body.overlay .overlay-layer {
	opacity:.97;
	visibility:visible
}



.menu-bg {
	
	position:fixed;
	display:block;
	top:0;
	right:0;
	z-index:0;
	width:180px;
	height:120px;
	/*background-image:url(../images/gr-bg.png);*/
	background-repeat: no-repeat;
	background-position: right top;
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	background-size: cover;
}
header:hover .menu-bg{
	/*background-image:url(../images/gr-bg-yellow.png); */
}




@media (max-width: 1023px) {
body {
	overflow:initial
}
main {
	overflow:hidden
}
section {
	position:relative;
	opacity:1 !important;
	visibility:visible !important;
	transform:none !important;
	height:initial !important
}


.caption {
	position:relative;
	left:initial;
	transform:none;
	top:initial
}

.btn {
	padding:18px 0;
	width:220px;
	font-size:13px;
	opacity:1;
	transform:none;
	border-width:3px
}
.copy {
	display:none
}
.box {
	height:210px
}
.box:before, .box:after {
	width:100%;
	height:100%;
	opacity:1
}
.box .title {
	width:130px;
	font-size:13px;
	line-height:17px;
	top:30px;
	left:30px
}
.box .title:before {
	left:10px;
	opacity:1
}
.box .number {
	width:220px;
	bottom:20px;
	left:35px;
	font-size:100px
}
}
@media (max-width: 767px) {
.box {
	display:none
}
.image .inside {
	width:100% !important;
	height:initial !important
}
.image .inside img {
	display:block;
	position:relative;
	top:initial;
	left:initial;
	transform:none;
	width:100%
}
section.sub {
	border-width:0
}
section .zoom {
	padding:50px 25px;
	max-width:480px
}
section:not(#projects) h2 {
	white-space:initial
}
.btn {
	width:200px
}
h2 p {
	display:inline
}
h2 p:after {
content:' ';
display:inline
}
}
@media (max-width: 479px) {
section .zoom {
	padding-top:25px;
	padding-bottom:25px
}


.btn {
	width:150px;
	font-size:11px;
	padding:15px 0
}
}


header .menu {
	display:block;
	width: 80px;
    height: 80px;
	/*background:#bf2b37;*/
	position:relative;
	
	/*top:50%;*/
	top:0;
	right:0;
	/*transform:translateY(-50%);*/
	z-index:39
}




/*header .menu:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	right:0;
	z-index:0;
	width:100%;
	height:100%;
	background:#000;
	transition:all .5s ease;
	transform:translateX(100%)
}*/
header .menu.close {
	background:#233563;
	background:transparent;
	    opacity:1 !important;
		font-size:12px;
    font-weight:400;
	text-shadow:none;
}
header .menu.close .current{ font-size: 10px;
    right: 12px;opacity: 0;}
header .menu.close span {
	width:45px
}
header .menu.close span:nth-child(3) {
	width:45px;
	margin:0 0 0 -10px;
	transform:translate(-50%, -50%) rotate(45deg)
}
header .menu.close span:nth-child(4) {
	margin:0 0 0 -10px;
	transform:translate(-50%, -50%) rotate(-45deg)
}
header .menu.close span:nth-child(2) {
	opacity:0
}
header .menu .current {
	text-transform:uppercase;
	font-size:12px;
	color:#fff;
	position:absolute;
	top:50%;
	left:16px;
	/*transform:rotate(90deg) translateX(50%);*/
	z-index:1;
	transform-origin:100% 0
}
header .menu span {
	background:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	height:2px;
	width:32px;
	margin-left:-10px;
	z-index:1;
	transition:all .3s ease
}
header .menu span:nth-child(2) {
	margin-top:-13px
}
header .menu span:nth-child(3) {
	width:40px;
	margin-top:-4.5px
}
header .menu span:nth-child(4) {
	margin-top:4.5px
}
header .menu span:last-child {
	margin-top:6px
}



.nav {
	position:absolute;
	bottom:12px;
	left:25px;
	width:100%;
	z-index:9;
	
}
.nav.black {
	left:32px;
	bottom:14px;
	transition:all .3s ease
}
.nav.black .current {
	color:#acadbd
}
.nav.black ul li a:before {
	background:#d5d6e4;
	transition:all .3s ease
}
.nav.black ul li a:after {
	background:#000;
	transition:all .3s ease;
	width:100%;
	opacity:0
}
.nav.black ul li a.active:after {
	opacity:1
}
.nav .current {
	display:inline-block;
	vertical-align:top;
	font-weight:700;
	color:#fff;
	margin-right:20px;
	line-height:25px;
	width:15px
}
.nav ul {
	display:inline-block;
	vertical-align:top
}
.nav ul li {
	display:inline-block;
	vertical-align:top;
	margin-right:15px;
	
}
.nav ul li a {
	display:block;
	width:50px;
	height:25px;
	position:relative;
	transition:all .5s ease
}
.nav ul li a.active:after {
	animation:loads 5s linear 0s forwards
}
.nav ul li a.active .thumb:before {
	animation:loads 5s linear 0s forwards
}
.nav ul li a:before, .nav ul li a:after {
	content:'';
	position:absolute;
	display:block;
	bottom:12.5px;
	left:0;
	width:100%;
	height:2px;
	background:#fff;
	opacity:.5
}
.nav ul li a:after {
	opacity:1;
	width:0%
}
.nav ul li a .thumb {
	width:100%;
	height:0px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	position:absolute;
	bottom:14.5px;
	left:0;
	transition:all .5s ease
}
.nav ul li a .thumb:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	left:0;
	background:#000;
	width:0%;
	height:100%;
	opacity:0.8
}
@keyframes loads {
	100% {
	width:100%
}
}
.desktop header .menu:hover:before {
	transform:translateX(0)
}

.desktop .nav.black ul li a:hover {
	width:50px
}
.desktop .nav ul li a:hover {
	width:180px
}
.desktop .nav ul li a:hover .thumb {
	height:100px
}
@media (max-height: 899px), (max-width: 1599px) {
	header .left {
	width:115px;
	height:115px
}
header .left:before, header .left:after {
	right:50px
}



header .menu {
	    width: 80px;
    height: 80px;
	
}

header .menu .current {
	font-size:12px;
}
.subsection-on header .left {
	width:115px;
	height:115px
}
}
@media all and (max-width: 1365px) {
.nav ul li {
	margin-right:10px
}
.nav ul li a {
	width:30px
}
.desktop .nav.black ul li a:hover {
	width:30px
}
.desktop .nav ul li a:hover {
	width:100px
}
.desktop .nav ul li a:hover .thumb {
	height:60px
}
}
@media (max-width: 1023px) {
header {
	height:115px;
	position:fixed
}
header .left:before, header .left:after {
	display:none !important
}
header .menu {
	top:0;
	transform:none
}
header .menu span {
	margin-left:0 !important
}
header .menu .current {
	/*display:none*/
}
}
@media (max-width: 767px) {
	header {
	height:90px;
	background:#000;
	width:100%
}
header .menu {
	height:80px
}
header .left {
	height:80px
}


}
@media (max-width: 480px) {
header {
	height:60px;
	width:100%
}
header .menu {
	height:60px
}
header .menu span:nth-child(2) {
	margin-top:-18px
}
header .menu span:nth-child(3) {
	width:40px;
	margin-top:-9px
}
header .menu span:nth-child(4) {
	margin-top:3px
}
header .menu span:last-child {
	margin-top:-1px
}
header .left {
	height:60px
}
header .menu .current { left: 25px; top: 44%;}

}

#menu {
	width:100%;
	height:100%;
	z-index:38;
	background:url(../images/popup-bg.jpg) no-repeat center center;
	background-size:cover;
	position:fixed;
	opacity:0;
	visibility:hidden;
	transition:all .5s ease;
	top:0px;
}

#menu.active {
	opacity:1;
	visibility:visible
}
#menu.active .logo {
	top:115px;
	opacity:1;
	transition-delay:.5s
}
#menu.active nav li:first-child .over {
	transition-delay:.7s
}
#menu.active nav li:nth-child(2) .over {
	transition-delay:.8s
}
#menu.active nav li:nth-child(3) .over {
transition-delay:.9s
}
#menu.active nav li:nth-child(4) .over {
	transition-delay:1s
}
#menu.active nav li:nth-child(5) .over {
	transition-delay:1.1s
}
#menu.active nav li:nth-child(6) .over {
	transition-delay:1.2s
}
#menu.active nav li .over {
	width:225px
}
@media (max-width: 1599px) {
#menu.active nav li .over {
	width:244px
}
}
nav {
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	width:100%;
	text-align:center
}
nav>ul {
	counter-reset:section;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-basis:100%;
	flex-basis:100%;
	-webkit-flex-wrap:no-wrap;
	flex-wrap:no-wrap;
	/*-webkit-align-items:center;
	align-items:center;*/
	-webkit-justify-content:center;
	justify-content:center;
	width:100%
}
@media (max-width: 1599px) {
nav>ul {
	margin-left:-30px
}
}
nav li {
	font-size:20px;
	color:#fff;
	text-align:left;
	position:relative;
	width:245px
}
nav li:before {
	content:'';
	position:absolute;
	display:block;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:0;
	height:105vh;
	background:#ecac00;
	margin-top:10px;
	transition:all .3s ease
}
nav li.hover:before {
	width:100%
}
nav li.hover .over {
	overflow:initial
}
nav li.hover .over>span {
	color:#fff
}
nav li.hover .over>span:before {
	color:#ffffff
}
nav li.hover .over>span:after {
	background:#ffffff
}


nav li:last-child:before{background:#18264a;}

nav li:nth-child(2):before{background:#bf2b37;}

nav li:nth-child(3):before{background:#0173ba;}


nav li.hover ul {
	max-height:250px;
	width:100%;
	transition:max-height .5s 0s ease, width .5s .4s ease
}
nav li ul {
	/*max-height:0;*/
	overflow:hidden;
	transition:max-height .5s .1s ease, width .1s 0s ease;
	/*width:0*/
}
nav li li {
	display:block;
	line-height:normal;
	font-size:14px;
	padding-top:10px
}
nav li li:before, nav li li:after {
	display:none
}
nav li .over {
	width:0;
	overflow:hidden;
	transition:all 1.5s 0s ease;
}
nav li .over>span {
	width:225px;
	min-height:60px;
	padding-top:25px;
	padding-left:55px;
	position:relative;
	transition:all .5s 0s ease;
	display:block
}
nav li .over>span:before {
	counter-increment:section;
	content:counter(section, decimal-leading-zero);
	position:absolute;
	display:block;
	top:0px;
	left:20px;
	color:#bf2b37;
	font-size:15px;
	transition:all .3s ease
}
nav li .over>span:after {
	content:'';
	position:absolute;
	display:block;
	top:10px;
	left:55px;
	width:32px;
	height:2px;
	background:#bf2b37;
	transition:all .3s ease
}
/*add*/
nav li a:hover {
	color:#eee;
	display:block
}


@media (max-width: 1599px) {
	nav li .over>span {
	width:244px
}
}
nav li a {
	color:#fff;
	display:block
}

@media (max-width: 1599px) {
nav li {
	width:244px
}
}
@media all and (max-width: 1366px) {
nav li {
	font-size: 18px;
    width: 200px;
}
nav li .over>span {
	padding-left:40px
}
nav li .over>span:before {
	font-size:11px;
	left:10px
}
nav li .over>span:after {
	left:40px;
	width:22px;
	height:1px
}
nav li li {
	
    padding-top: 6px;
}
}
@media (max-width: 1023px) {
nav {
	margin-top:60px
}
nav>ul {
display:block;
max-width:540px;
margin:0 auto
}
nav>ul>li, nav>ul .over {
width:100% !important
}
nav>ul>li {
margin-bottom:30px
}
nav>ul>li .over {
opacity:0 !important
}
nav>ul li {
width:initial;
font-size:18px
}
nav>ul li:before {
display:none
}
nav>ul li a {
width:100% !important
}
nav>ul li a br {
display:none
}
nav>ul li a:before {
font-size:15px !important
}
nav>ul li ul {
width:initial;
max-height:initial
}
nav>ul li ul li {
display:inline-block;
vertical-align:top;
font-size:14px;
color:#6e6f7d;
padding-top:15px;
padding-right:30px
}
#menu.active nav>ul>li .over {
opacity:1 !important
}
}
@media (max-width: 767px) {
nav>ul{ padding-left:20px;}
nav>ul li {
margin-bottom:45px
}
nav>ul li .over {
text-align:left
}
nav>ul li .over>span {
display:inline-block;
width:initial !important;
min-height:initial;
padding-top:0px;
padding-left:80px
}
nav>ul li .over>span:before {
top:13px;
transform:translateY(-50%)
}
nav>ul li .over>span:after {
top:13px;
transform:translateY(-50%)
}
nav>ul li ul {
display:none
}
nav>ul li.hover ul {
display:block
}
nav>ul li.hover ul li {
display:block;
margin:0;
padding-right:0
}
}
@media (max-width: 479px) {
nav {
margin-top:0
}
nav>ul li {
margin-bottom:20px;
font-size:15px
}
}