/* >> Header Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
header{
	display: block; 
	position: fixed; 
	width: 100%; 
	left: 0; top: 0; 
	z-index: 999; 
	padding: 0; 
	background: rgba(0,175,237,0.85);
	@media #{$mq-iPad_land}{background: rgba(0,175,237,0.85);}
	.contentWrapper{
		@extend %flexBox; 
		justify-content: space-between; 
		align-items: center; 
		flex-wrap: nowrap; 
		position: absolute; 
		z-index: 101; 
		width: calc(100% - 58px); 
		max-width: 1600px; 
		height: auto; 
		margin: 0 0 0 auto; 
		height: 96%; 
		position: relative; 
		width: 96%; 
		margin: 0 auto; 
		padding-left: 0;
		@media #{$mq-pc_1600}{width: 96%; padding: 0;}
	}
	&.sticky{@include shadow-depth5; background: rgba(0,175,237,0.85);
	}
}

#stickyHeader{padding: 1.25rem 0; 
	@include transition;
}

.menuBar{flex-grow: 1; padding-left: 2rem;
	@media #{$mq-iPad_land}{padding-left: 2rem;}
	.menuBar__top{@include transition; @extend %flexBox; align-items: center; justify-content: flex-start; padding: 0;
		@media #{$mq-iPad_land}{border-bottom: 1px solid $color-border; padding: 0.75rem 0;} 
		.buttonWrapper{ width: auto; margin: 0 0 0 auto;}
	}

	.menuBar__bottom{display: none; @include transition; padding: 0.75rem 0;
		@media #{$mq-iPad_land}{display: block;}
	}
}

.headerContacts{ display: none;
	@media #{$mq-slide-spec-sm}{display: inline-block;}
	.contact__icon{@include shadow-depthSocial; @include transition; display: inline-block; vertical-align: middle; position: relative; width: 34px; height: 34px; margin-left: 0.5rem; border-radius: $radius-round; background-color: $color-secondary; background-repeat: no-repeat; background-position: center center; background-size: 16px 16px;
		@media #{$mq-pc_1600}{ margin-left: 1rem;}
		&.contact__icon--phone{background-image: url("../images/icons/contact-phone.svg");}
		&.contact__icon--email{background-image: url("../images/icons/contact-mail.svg");}
		&:first-child{margin-left: 0;}
		&:hover{background-color: lighten($color-secondary, 6%);}
	}
}

.socials{
	display: none;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	@media #{$mq-iPad_port}{
		display: block;
		margin-left: 1rem;
	}
	@media #{$mq-iPad_land}{margin-left: 8rem;}
	a{
		transition: 0.3s;
		color: $color-gray;
		padding: 0 10px;
		&:hover{color: $color-primary;}
	}
}

/*Logo*/
.logoContainer{ 
	display: inline-block; 
	position: relative; 
	top: 0;  
	z-index: 90; 
	padding: 0; 
	width: 160px;
}
.seoWrapper{margin:0; display: block; position: relative;
	h1,h2{display: none;}
	.logo__slogen{display: none}
}

.headerWrapper{ 
	@include transition;  
	width: 100%; 
	z-index: 999; 
	top:0; 
	background-color: $color-menuBg; 
	padding: 0;
	@media #{$mq-iPad_land} {position: relative; padding: 0; }

}

#pc-menu{ 
	display: block; 
	position: absolute; 
	visibility: hidden; 
	opacity: 0; 
	z-index: -1; 
	width: 100%; 
	height: 100%; 
	left: 0; 
	top: 0;
	background-color: $color-menuBg; 
	> .contentWrapper{
		position: relative;
		display: flex;
    	justify-content: center;
		height: stretch;
	    align-items: center;
		width: 100%;
		@media #{$mq-iPad_land}{justify-content: flex-end;}
		&:before{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 240px;
			height: 100%;
			background-repeat: no-repeat;
    		background-size: contain;
    		background-position: center center;
			background-image: url("../images/easydent/menu-bg.png");
			opacity: 0.35;
			@media #{$mq-iPad_land}{opacity: 1;}
		}
	}
	.dlMenu__pcMenu{
		transition: all 0.7s ease; 
		transition-delay: 500ms; 
		opacity: 0; 
		width: 100%;
		padding: 0 1rem;
		@media #{$mq-iPad_land}{width: 45%; padding: 0;}
		.dl-menuwrapper{
			li{border: 0}
		}
	}
	&.open{
		@extend %flexBox; 
		align-items: flex-start; 
		position: fixed; 
		visibility: visible; 
		opacity: 1; 
		z-index: 999;
		top: 4.6rem;
		animation: bounce-in-right 1s ease;
		.dlMenu__pcMenu{ opacity: 1; }
	}
	@keyframes bounce-in-right {
		0% {
			opacity: 0;
			transform: translateX(2000px);
		}
		60% {
			opacity: 1;
			transform: translateX(-30px);
		}
		80% { transform: translateX(10px); }
		100% { transform: translateX(0); }
	}
	.menuwrapper-container{
		padding-top: 6rem;
		@media #{$mq-slide-spec-sm}{
			display: flex;
			justify-content: center;
		}
		@media #{$mq-iPad_land}{justify-content: flex-start;}
		.menuwrapper-contact{
			margin-bottom: 2rem;
			@media #{$mq-slide-spec-sm}{padding-right: 3rem; margin-bottom: 0;}
			a:last-child{color: $color-primary;}
		}
		.menuwrapper-contact, .menuwrapper-social{
			display: flex;
			flex-direction: column;
			text-align: left;
			line-height: 1.75;
			color: $color-light;
			align-items: center;
			@media #{$mq-slide-spec-sm}{
				align-items: flex-start;
			}
			a{color: #fff;
				&:hover{text-decoration: underline;}
			}
		}
		.social-icons{
			display: flex;
			img{
				width: 16px;
				margin-right: 10px;
			}
			.social-youtube img{width: 24px;}
		}
	}
}


.header__left{
	width: 100%; 
	@extend %flexBox; 
	justify-content: flex-start; 
	align-items: center; 
	@media #{$mq-iPad_land}{width: 85%;}
}
.header__right{
	@extend %flexBox;
	width: 50%; 
	justify-content: flex-end; 
	align-items: center;
	@media #{$mq-iPad_port}{width: 15%;}
}

.menuToggler{@include transition; display: block; position: relative; z-index: 9999;
	width: 24px;
	height: 20px;
	margin-left: 1rem;
	background-color: transparent;
	border: none;
	outline: none;
	font-size: 0;
	line-height: 0;
	text-indent: -1000px;
	padding: 0;
	cursor: pointer;
	span{
		@include transition; 
		display: block; 
		width: 100%; 
		height: 2px; 
		position: absolute; 
		left: 0; 
		background-color: white;
		&:nth-child(1){top: -1px;}
		&:nth-child(2){top: calc(50% - 2.5px);}
		&:nth-child(3){bottom: 2px;}
	}
	@media #{$mq-pc_1280}{	
		margin-left: 1.5rem;
	}
}
#menuClose{ 
	position: absolute; 
	opacity: 0; 
	visibility: hidden;
	width: 28px;
    height: 28px;
	right: -2px;
	span{transform-origin: 0 3px; left: 10px;
		&:nth-child(1){transform: rotate(45deg);}
		&:nth-child(2){display: none;}
		&:nth-child(3){transform: rotate(-45deg); }
	}
	&.active{opacity: 1; visibility: visible;}
}

#menuButton{opacity: 1; visibility: visible;
	&.active{opacity: 0; visibility: hidden;}
}

.contactBtn{ background-color: darken($color-primary,12%); padding: 0.25rem 0.2rem;
	.btn--header{background-color: $color-active; display: inline-block; vertical-align: middle; margin: 0.15rem;}
	span{display: inline-block; vertical-align: middle; padding: 0 0.5rem; color: white; font-size: 0.8rem; line-height: 1; font-weight: 600; text-transform: uppercase;}
}
.contactBtn--mobile{
    display: block;
    width: fit-content;
	margin-bottom: 1rem;
	@media #{$mq-iPad_land}{display: none;}
}

.btn--header{width: 44px; height: 44px; padding: 0; background-color: darken($color-primary,12%); background-repeat: no-repeat; background-position: center center; background-size: 24px 24px;
	&.btn--facebook{background-image: url("../images/icons/social-facebook.svg");}
	&.btn--instagram{background-image: url("../images/icons/social-instagram.svg");}
	&.btn--youtube{background-image: url("../images/icons/social-youtube.svg");}
	&.btn--tiktok{background-image: url("../images/icons/social-tiktok.svg");}
	&:hover{background-color: lighten($color-primary, 6%);}
}

.langWrapper{ 
	a:hover span{color: $color-primary;}
	span{
		font-size: 12px;
		font-weight: 500;
		color: $color-gray;
		padding: 0 5px;
		line-height: 2;
		transition: 0.3s;
	}
	.active{
		color: $color-primary;
	}
}

/* >> Custom select for language
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
#lang {
	display: inline-block;
	margin: 0;
	outline: none;
	border: 0;
	line-height: 32px;
	height: 32px;
	background: white;
	color:$color-baseText;
	font-size: 12px;
	font-weight: 600;
	padding: 0 0.5rem;
	cursor: pointer;

	option {
		color: $color-baseText;
		font-weight: 600;
	}
}

header{
	.btn--job{
		margin-left: 0;
		@media #{$mq-iPad_land}{margin-left: 1.25rem;}
	}
}