@import "elements/vars"
@import "../mixins/mixins"

.main-header
	width: 100%
	height: 200px
	z-index: 10
	backface-visibility: hidden
	color: #fff


.logo-wrapper
	position: absolute
	top: 25px
	left: 50%
	margin-left: -75px
	width: 150px
	height: 150px

.logo
	display: block
	width: 100%
	height: 100%
	line-height: 150px
	background-color: rgba(255, 255, 255, .2)
	border-radius: 50%
	text-align: center
	transition: background-color .2s ease-in-out

	&:hover
		background-color: rgba(255, 255, 255, .3)
	

	img
		width: 130px
		height: 130px


.navigation

	ul > li
		position: relative
		display: inline-block
		font-weight: 400
		


.left-nav
	position: absolute
	top: 85px
	left: 0

	li
		margin-right: 45px


.right-nav
	position: absolute
	top: 85px
	right: 0
	margin-right: 85px

	li
		margin-left: 45px

.nav__sity
	position: relative

.pick-sity-wrapper
	display: none
	position: absolute
	left: 0
	top: 35px
	width: 300px		
	background: #fff
	color: $text-color
	text-align: center
	padding: 20px
	border-radius: 10px
	box-shadow: 0 5px 30px rgba(0, 0, 0, .2)

	&:before
		content: ""
		display: block
		position: absolute
		top: -10px
		left: 20px
		border-left: 10px solid transparent
		border-right: 10px solid transparent
		border-bottom: 10px solid #fff


.pick-sity__step
	display: none

.active-step
	display: block

.pick-sity__btn-group
	margin-top: 15px

	a
		display: inline-block
		padding: 5px 5px
		font-weight: 700
		width: 80px

		&:first-child
			background-color: #fff
			box-shadow: 0 0 1px rgba(0, 0, 0, .6)
			color: rgba(0, 0, 0, .6)
			font-weight: 300
			margin-right: 10px



.nav__work-time

.nav__callback
	&:after
		content: ''
		display: block
		width: 100%
		height: 1px
		background-color: #fff
		margin-top: 1px

.nav__phone

.burger
	cursor: pointer
	position: absolute
	top: 80px
	right: 0

	span
		display: block
		height: 4px
		margin-bottom: 6px
		font-size: 0
		

		&:last-child
			margin-bottom: 0
		
		&:before, &:after
			content: ''
			display: inline-block
			background-color: #fff
			height: 4px
			border-radius: 50px

		&:nth-child(1):before
			width: 27px
			margin-right: 3px

		&:nth-child(1):after
			width: 10px

		&:nth-child(2):before
			width: 7px
			margin-right: 3px

		&:nth-child(2):after
			width: 30px

		&:nth-child(3):before
			width: 20px
			margin-right: 3px

		&:nth-child(3):after
			width: 17px


.site-language
	display: none
	position: absolute
	left: -105px
	top: 85px
	font-size: 0

	a
		display: inline-block
		font-weight: 300
		position: relative
		font-size: 18px

		&:first-child
			margin-right: 21px

			&:after
				content: ''
				display: block
				background-color: #fff
				height: 14px
				width: 1px
				position: absolute
				right: -10px
				top: 2px

	.active
		font-weight: 500



.header--program
	color: $text-color

	.burger span

		&:before, &:after
			background-color: $text-color

	.nav__callback

		&:after
			background-color: $text-color

	.logo-wrapper
		margin-left: -100px
		width: 200px
		height: 150px
		z-index: 2

	.logo
		width: 150px
		height: 150px
		margin: 0 auto
		background-color: rgba(0, 0, 0, 0.03)

		&:hover
			background-color: rgba(0, 0, 0, 0.05)

	.navigation

		&:after
			content: ''
			display: block
			height: 1px
			width: 100%
			background-color: #ededed
			position: absolute
			top: 126px
			left: 0
			z-index: -1








.nav
	position: fixed
	right: 0
	top: 0
	background-color: rgba(0, 0, 0, .9)
	width: 100%
	height: 100%
	z-index: 10
	display: none
	overflow: hidden



.nav__content-wrapper
	color: #fff
	padding-top: 150px
	text-align: right
	font-size: 30px
	font-weight: 900
	margin-right: -15px

	a
		display: block
		margin-bottom: 15px
		transition: color .3s linear

		&:hover
			color: $accent-color

.dropdown
	//font-size: 30px
	display: none

.dropdown-active
	color: rgba(255, 255, 255, .3)

.burger
	z-index: 10


// .menu-overlay
// 	position: fixed
// 	left: 0
// 	top: 0
// 	width: 100%
// 	height: 100%
// 	background-color: rgba(0, 0, 0, .7)
// 	z-index: 8888
// 	display: none