/*Style file for header section*/

/*
 The design should be mobile first to render page faster.
 This is to make small devices' design first before scaling up to bigger screens
*/

.main-header-hide {
	display: none !important;
}

.main-header-show-inline-block {
	display: inline-block !important;
}

.main-head-container {
	display: block;
	width: 100%;
	height: 45px;
	background: #2D383A;
}

.main-head-content {
	display: block;
	width: 100%;
	max-width: 1250px;
	height: 100%;
	padding: 0;
	margin: 0 auto;
}

.main-head-item-content {
	width: 100%;
	height: 100%;
	padding: 5px;
	margin: 0;
	margin-right: 10px;
	list-style: none;
	text-align: center;
}

.main-head-item-content > li {
	float: right;
	display: inline-block;
	width: auto;
	height: 35px;
	text-align: center;
	border-right: 2px solid #DCDCDC;
}

.main-head-item-content > li:first-child {
	display: none;
	border: none;
}

.main-head-item-content > li:last-child,
.main-head-item-content > li:nth-child(2) {
	border-left: 2px solid #DCDCDC;
}

.main-head-item-content > li > a {
	display: inline-block;
	width: auto;
	padding: 5px 10px;
	margin: 0;
}

.main-head-item-content > li > a > span:nth-child(1) {
	display: none;
}

.main-head-item-content > li > a > span:nth-child(2) {
	font-size: 1.2em;
}

.main-head-country-info-container {
	position: relative;
}

.main-head-country-info-container:hover > .main-head-country-info-content {
	display: block;
}

.main-head-country-info-container > a > span[country] {
	display: inline !important;
}

.main-head-country-info-container > a > span[country] > span[country-flag] > img {
	display: inline-block;
	width: 30px;
	height: auto;
	padding: 0;
	margin: 0;
}

.main-head-country-info-content {
	position: fixed;
	top: 50px;
	right: calc(calc(100% - 300px) / 2);
	display: none;
	width: 300px;
	height: auto;
	padding: 20px 10px;
	margin: auto;
	text-align: left;
	background-color: white;
	border: 2px solid #2d3e50;
	border-radius: 10px 10px 0 0;
	overflow: visible;
	z-index: 999;
}

.main-head-country-info-title {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	padding: 10px;
	margin: 0;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 1em;
	color: #FFEB3B;
	border-radius: 10px 10px 0 0;
	background-color: #2d3e50;
}

.main-head-country-info-content > label {
	display: block;
	width: auto;
	height: auto;
	padding: 5px;
	margin: 0 5px;
	margin-top: 20px;
	font-weight: normal;
	font-size: 1em;
	opacity: 0.8;
}

.main-head-country-info-content > select {
	display: block;
	width: 100%;
	height: 35px;
	padding: 0 5px;
	margin: 5px 0;
	margin-top: 0;
	font-size: 1em;
	border: 1px solid #2a80b9;
	border-radius: 10px;
}

.main-head-country-info-content > select:focus {
	outline: none;
	border-radius: 10px 10px 0 0;
} 

.main-head-country-info-content > select:hover {
	border-color: #2d3e50;
}

.main-head-country-info-note {
	display: block;
	width: 100%;
	height: auto;
	padding: 5px 0;
	margin: 0;
	font-size: 0.85em;
	font-weight: normal;
	opacity: 0.7;
}


.main-header-container {
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 60px;
	padding: 0;
	margin: 0;
	background: #36454F;
	box-shadow: 0 2px 5px 0 rgba(255, 165, 0, 1);
	z-index: 100;
	overflow: visible;
}

.main-header-content {
	display: block;
	width: 100%;
	max-width: 1250px;
	height: 100%;
	padding: 5px;
	margin: 0 auto;
}

.main-header-nav-menu {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 100%;
	padding: 10px 5px;
	white-space: nowrap;
}

.main-header-nav-menu > span {
	font-size: 1.3em;
	color: #FFFFFF;
	cursor: pointer;
	background: #36454F;
}

.main-header-nav-menu > span:first-child {
	padding: 10px;
}

.main-header-nav-menu > span:nth-child(2) {
	position: absolute;
	display: none;
	padding: 10px;
	padding-top: 0;
	padding-left: 0;
}

.main-header-nav-menu:hover > span {
	color: #FFA500;
}

.main-header-nav-container {
	position: absolute;
	top: calc(100% - 5px);
	left: 0;
	display: none;
}

.show-nav {
	display: block;
}

.main-header-logo {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 10px 0;
	margin: 0;
	vertical-align: middle;
	text-decoration: none;
	font-size: 1.3em;
}

.main-header-logo > a > img {
	display: inline-block;
	width: auto;
	height: 25px;
	padding: 0;
	margin: 0;
}

.main-header-empty-space {
	display: inline-block;
}

.main-header-search-centent {
	display: none;
	height: 100%;
	padding: 0 10px;
	margin: 0;
}

.main-header-search-form {
	position: relative;
	display: block;
	width: 100%;
	height: 45px;
	padding: 0;
	margin: 0;
	border: 2px solid #FFA500;
	border-radius: 10px;
	outline: none;
}

.main-header-search-form:hover {
	border-color: #2d3e50;
	outline: none;
}

.main-header-search-form > .dropdown,
.main-header-search-form > select {
	display: none;
}

.main-header-search-form > input {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px;
	padding-right: 80px;
	margin: 0;
	border-radius: 10px;
}

.main-header-search-form > input:hover,
.main-header-search-form > input:focus {
	outline: none;
}

.main-header-search-form > button {
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 100%;
	padding: 5px;
	margin: 0;
	font-size: 1.4em;
	text-align: center; 
	border-radius: 0 10px 10px 0;
	outline: none;
}


.main-header-cart-content,
.main-header-user-content,
.main-header-search-btn,
.main-header-search-back-btn {
	position: relative;
	display: inline-block;
	width: auto;
	height: 100%;
	padding: 5px 10px;
	margin: auto;
}

.main-header-user-content {
	display: none !important;
}

.main-header-cart-content > a,
.main-header-user-content > span,
.main-header-search-btn > span,
.main-header-search-back-btn > span {
	font-size: 1.5em;
}

.main-header-cart-content:hover > a,
.main-header-user-content:hover > span,
.main-header-search-btn:hover > span,
.main-header-search-back-btn:hover > span {
	color: #FFA500;
}


.main-header-search-back-btn {
	display: none;
}

.main-header-cart-content > a {
	position: relative;
}

.main-header-cart-content > a > #cart-bardge {
	position: absolute;
	top: -10px;
	right: -10px;
	display: inline-block;
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	font-size: 0.4em;
	font-weight: bold;
	border-radius: 50px;
	background-color: #FFA500;
	border: #F8F8FF solid 1.5px;
}

.main-header-cart-content:hover > a > #cart-bardge {
	color: black;
}





/* Small devices (portrait phones, 481px and up) */
@media only screen and (min-width: 481px) {
	
	.main-header-logo {
		display: inline-block;
		width: auto;
		height: auto;
		padding: 5px 0;
	}

	.main-header-logo > a > img {
		height: 40px;
	}

	.main-header-search-back-btn {
		width: 50px;
		margin: 0 15px;
	}

	.main-header-cart-content > a,
	.main-header-user-content > span,
	.main-header-search-btn > span,
	.main-header-search-back-btn > span {
		font-size: 2em;
	}
	
}

/* Small devices (portrait tablets and large phones, 601px and up) */
@media only screen and (min-width: 601px) {
	
	.main-head-item-content > li > a > span:nth-child(1) {
		display: inline;
	}

	.main-head-item-content > li > a > span:nth-child(2) {
		display: none;
	}

	.main-head-country-info-content {
		position: absolute;
		top: calc(100% + 5px);
		right: 0;
		padding: 30px 10px 20px 10px;
	}

	.main-head-country-info-content:after {
		content: " ";
	  position: absolute;
	  bottom: 100%;  /* At the top of the tooltip */
	  right: 25px;
	  margin-left: -5px;
	  border-width: 15px;
	  border-style: solid;
	  border-color: transparent transparent #2d3e50 transparent;
	}

	.main-header-search-form > .dropdown {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 120px;
		height: 41px;
		margin: 0;
	}

	.main-header-search-form > .dropdown > button {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		text-align: left;
		background: #F8F8FF;
		outline: none;
		box-shadow: none;
		border: none;
		border-right: 1px #36454F solid;
		border-radius: 10px 0 0 10px;
		overflow: hidden;
	}

	.main-header-search-form > .dropdown > button > span {
		display: inline-block;
		width: calc(100% - 12px);
		height: 100%;
		padding: 5px;
		line-height: 30px;
		white-space: nowrap;
		overflow: hidden;
	}

	.main-header-search-form > .dropdown > button > .dropdown-toggle {
		position: absolute;
		top: 10px;
		right: 5px;
	}

	.main-header-search-form > .dropdown > button:hover,
	.main-header-search-form > .dropdown > button:focus {
		color: black;
		background-color: #F8F8FF;
		outline: none;
		box-shadow: none;
		border: none;
		border-right: 1px #2d3e50 solid;
	}

	.main-header-search-form > .dropdown .dropdown-item {
		padding: 8px 20px;
	}

	.main-header-search-form > .dropdown .dropdown-item:hover {
		background-color: rgb(211, 207, 207);
	}	
	
	.main-header-search-form > select:hover,
	.main-header-search-form > select:focus {
		outline: none;
		border: none;
	}

	.main-header-search-form > input {
		padding-left: 125px;
	}

} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) {
	.main-head-item-content > li:first-child {
		float: none;
		display: inline-block;
		width: 200px;
	}

	.main-header-nav-menu:hover > span {
		display: inline;
	}

	.main-header-nav-menu:hover > .main-header-nav-container {
		display: block !important;
	}

	.main-header-nav-container {
		display: none !important;
	}

	/*
	.main-header-nav-container {
		position: absolute;
		top: calc(100% - 5px);
		left: -20px;
		display: none;
		width: calc(100vw - 100px);
	 	height: calc(100vh - 70px);
	 	padding: 0;
	 	margin: 0;

	 	font-size: 0.9em;
	 	z-index: auto;
		overflow: visible;
		 
	}
	*/

	.main-header-user-content {
		display: block;
	}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) {

	.main-head-item-content > li:first-child {
		width: 300px;
	}

	.main-header-empty-space {
		display: none;
	}

	.main-header-search-centent {
		display: inline-block !important;
		margin: 0 10px;
	}

	.main-header-nav-menu,
	.main-header-logo,
	.main-header-cart-content,
	.main-header-user-content {
		display: inline-block !important;
	}

	.main-header-search-back-btn,
	.main-header-search-btn {
		display: none !important;
	}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {
	.main-head-item-content > li:first-child {
		width: 350px;
	}

	.main-header-search-centent {
		margin: 0 30px;
	}
}