@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');

@font-face {
	font-family: 'Bebas Neue';
	src: url('fonts/BebasNeueRegular.eot');
	src: local('Bebas Neue Regular'), local('BebasNeueRegular'),
		url('fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
		url('fonts/BebasNeueRegular.woff') format('woff'),
		url('fonts/BebasNeueRegular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Bebas Neue';
	src: url('fonts/BebasNeueBold.eot');
	src: local('Bebas Neue Bold'), local('BebasNeueBold'),
		url('fonts/BebasNeueBold.eot?#iefix') format('embedded-opentype'),
		url('fonts/BebasNeueBold.woff') format('woff'),
		url('fonts/BebasNeueBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}


* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none}
html, body {width: 100%; height: 100%}
body {font-family: 'Roboto'; line-height: 1.7; background: #fff; font-size: 15px; color: #555; -webkit-font-smoothing: antialiased}
html.lock {overflow: hidden}
body.lock {overflow: hidden}
.flex-wrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap}
.flex-nowrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: nowrap; -webkit-flex-wrap: nowrap}
.flex-start {align-items: flex-start; -webkit-align-items: flex-start}
.flex-center {align-items: center; -webkit-align-items:center; height: 100%}
.max {max-width: 1200px; margin: 0px auto; width: 100%; padding-left: 10px; padding-right: 10px}
a {color: inherit; text-decoration: none; outline: none; cursor: pointer; user-select:none; -webkit-user-select: none; -moz-user-select: none}
.ds {user-select:none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
table {border-collapse: collapse; width: 100%}
th {text-align: left; padding: 10px}
td {padding: 10px; vertical-align: top}

h1, h2, h3 {text-transform: uppercase; font-family: 'Bebas Neue'; color: #222; line-height: 1.2}
h1 {font-size: 42px}
h2 {font-size: 42px}
h3 {display: block; margin-top: 40px; font-size: 26px}

.under-h {color: #ff7d23; margin-bottom: 25px; text-transform: uppercase; display: block}

hr {height: 1px; background: #ddd; border: none; margin: 80px 0px}

a, i {cursor: pointer; transition: 300ms}
p {margin-top: 10px}

.half-20 {width: calc(20% - 10px)}
.half-25 {width: calc(25% - 10px)}
.half-30 {width: calc(30% - 10px)}
.half-40 {width: calc(40% - 10px)}
.half-50 {width: calc(50% - 10px)}
.half-60 {width: calc(60% - 10px)}
.half-70 {width: calc(70% - 10px)}

.float {margin: 0px -10px 0px -10px}
.clear {clear: both}
 .cover {background-size: cover; background-position: 50% 50%; background-repeat: no-repeat}


.home .first {background: rgba(0,0,0,0.5); height: calc(100vh - 20px); display: flex; align-items: center; padding-top: 80px; color: #fff; position: relative}
.home .first .text {max-width: 600px; opacity: 0; transition: 1s}
.home .first .text.show {opacity: 1}
.home .first h1 {color: #fff; margin-bottom: 20px}
.home .first .a-down {background: url(images/a-down.svg) 50% 50% no-repeat; background-size: contain; height: 30px; width: 30px; display: block; position: absolute; bottom: 25px; left: 50%; margin-left: -15px; opacity: 0; transition: 300ms}
.home .first .a-down.show {opacity: 1; bottom: 15px}



.ctas a, input[type=submit] {text-align: center; line-height: 42px; height: 44px; border:1px solid #aaa; padding: 0px 20px; margin-right: 20px; margin-top: 35px; border-radius: 22px; display: inline-block; width: 210px; font-weight: 500; transition: 300ms; cursor: pointer}
.ctas a:first-of-type, input[type=submit] {background: #ff7d23; color: #fff; border-color: #ff7d23}
.ctas a:hover, input[type=submit]:hover {box-shadow: 0px 0px 0px 1px #ff7d23; border-color: #ff7d23}

.big-slider {position: fixed; top:0px; height: calc(100vh - 20px); left: 0px; width: 100%; z-index: -1}
.big-slider .slick-slide {background-repeat: no-repeat; background-position: 50% calc(50% + 80px); background-size: cover}
.single-project-slider {height: 100%; position: relative}
.single-project-slider .slick-slide {background-repeat: no-repeat; background-position: 50% 50%; background-size: cover}
.big-slider div, .single-project-slider div {height: 100%}


/* HEADER */
.header {background: #fff; position: fixed; border-bottom: 1px solid #ddd; top:0px; left: 0px; width: 100%; height: 80px; box-sizing: border-box; transition: 1s; z-index: 8000}
.home .header {top:-80px}
.home .header.show {top:0px}
.home h2 {margin-top: 80px}
.home .white {background: #fff; padding-bottom: 80px}

.logo {width:150px; height:50px; background: url(images/logo.svg) no-repeat 0% 50%; border-bottom: 3px solid #ff7d23}
.header .menu li {display: inline-block; margin: 0px 15px}
.header .menu > li > a {margin: 3px 10px 0px 10px; color: #333; line-height: 74px; font-weight: 500; border-bottom: 3px solid transparent; text-transform: uppercase; transition:300ms; display: block}
.header .menu li:hover > a, .header .menu li.current-menu-item > a, .header .menu li.current-menu-parent > a {color: #ff7d23; border-color: #ff7d23}
.mobile-menu-icon {display: none; cursor: pointer; position: relative; width: 65px; height: 25px}
.mobile-menu-icon span {background: #555; height: 2px; width: 10px; position: absolute; display: block; transition: 300ms}
.mobile-menu-icon.active span {background: #ff7d23}
.mobile-menu-icon span:nth-of-type(1) {right: 8px; top:6px}
.mobile-menu-icon span:nth-of-type(2) {right: 0px; top:6px}
.mobile-menu-icon span:nth-of-type(3) {right: 8px; top:14px}
.mobile-menu-icon span:nth-of-type(4) {right: 0px; top:14px}
.mobile-menu-icon.active span:nth-of-type(1) {transform: rotateZ(45deg)}
.mobile-menu-icon.active span:nth-of-type(2) {transform: rotateZ(-45deg)}
.mobile-menu-icon.active span:nth-of-type(3) {transform: rotateZ(-45deg)}
.mobile-menu-icon.active span:nth-of-type(4) {transform: rotateZ(45deg)}


.header .lang li {display: inline-block}
.header .lang li a {display: block; line-height: 30px; width: 40px; text-align: center; text-transform: uppercase; font-size: 14px}
.header .lang li a.active {background: #ddd}
/* HEADER */


/* PROJECTS */
.projects .project {background-size: cover; background-repeat: no-repeat; border-right: 1px solid #ddd; background-position: 50% 50%}
.projects .project:last-of-type {border-right: 0px}
.projects .project .inner {background: #fff; transition: 300ms; padding: 80px 40px}
.projects .project .text {height: 310px}
.projects .project .num {color: #aaa; font-family: 'Bebas Neue'; font-size: 50px; font-weight: 600; line-height: 1}
.projects .project h3 {color: #333; font-size: 36px; margin: 20px 0px}
.projects .project h4 {font-weight: 400; color: #777; text-transform: uppercase; line-height: 1.5}
.projects .project .more {line-height: 38px; height: 40px; border:1px solid #aaa; color: #aaa; width: 150px; border-radius: 20px; display: block; text-align: center; font-weight: 500}
.projects .project:hover .more {background: #ff7d23; color: #fff; border-color: #ff7d23}
.projects .project:hover .inner {background: rgba(0,0,0,0.5)}
.projects .project:hover h3, .projects .project:hover h4, .projects .project:hover .num {color: #fff}


.menu-projects-slider {max-width: 1090px; margin: 0px auto; position: relative}
.menu-projects {position: fixed; z-index: 1000; top:80px; overflow: hidden; height: 0px;  background: #fff; left: 0px; width: 100%; transition: 300ms}
.menu-projects-wrapper:hover .menu-projects {height: 187px; border-bottom: 1px solid #ddd; padding-top: 15px; padding-bottom: 15px}

.menu-projects .project {background-size: cover; background-repeat: no-repeat; transition: 300ms; background-position: 50% 50%; width: calc(20% - 10px); margin-bottom: 15px; margin: 3px 5px}
.menu-projects .project .inner {background: rgba(0,0,0,0.5); height: 150px; padding: 10px; color: #fff; display: flex; align-items: flex-end}
.menu-projects .project h3 {color: #fff; font-size: 26px}
.menu-projects .project:hover {box-shadow: 0px 0px 0px 3px #ff7d23}

.menu-projects .slick-arrow svg * {fill:#ff6b00}
.menu-projects .slick-arrow.slick-next {right: -40px; top:50%; margin-top: -15px}
.menu-projects .slick-arrow.slick-prev {left: -40px; top:50%; margin-top: -15px}
.menu-projects .slick-arrow.slick-next:hover {right: -45px}
.menu-projects .slick-arrow.slick-prev:hover {left: -45px}
/* PROJECTS */

.content {min-height: calc(100vh - 200px); padding-top: 150px; margin-bottom: 80px}
.content a {color: #ff7d23; text-decoration: underline}
.content li {display: block; padding-left: 15px; margin-bottom: 10px; position: relative}
.content li:before {content: ''; display: block; border: 2px solid #ff7d23; height: 5px; width: 5px; border-radius: 50%; position: absolute; top:8px; left: 0px}
.content b, .content strong {color: #222; font-weight: 500}
.content ul + p {margin-top: 40px}


/* SINGLE-PROJECT */
.single-project iframe {height: 100%; width: 100%; border: none}
.single-project .img {height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; position: relative; display: block}
.single-project .first .half-50 {position: relative}
.single-project .black {margin-top: 80px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; color: #fff}
.single-project .black .inner {background: rgba(0,0,0,0.5); padding: 80px 0px}
.single-project .black h2 {color: #ff7d23}
.single-project .black .under-h {color: #fff}
.single-project .black .half-50 {width: 50%}
.single-project .black .half-50:nth-of-type(1) {border-right:1px solid #ddd; padding-right: 50px}
.single-project .black .half-50:nth-of-type(2) {padding-left: 50px}
.single-project .video-block {background: #fff; padding: 80px 0px}
.single-project .video-block iframe {display: block}

.single-project .white {margin-top: 80px; padding: 80px 0px; border-top: 1px solid #ddd}
.single-project .white h2 {color: #ff7d23}
.single-project .white .under-h {color: #fff}




.content.single-project {margin-bottom: 0px}
.single-project .chess .chess-section {position: relative; padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid #ddd}
.single-project .chess .chess-section:nth-of-type(even) .half-50 {order: 1}
.single-project .chess .chess-section:nth-of-type(even) .half-40 {order: 2}
/*
.single-project .chess .chess-section:nth-of-type(odd) {background: #fafafa; padding: 180px 0px}
.single-project .chess .chess-section:nth-of-type(odd):before {content: ''; width: 100%; background: url(images/triangle-top.svg) 50% 0%; height: 100px; top: 0px; display: block; position: absolute; left: 0px; z-index: 1}
.single-project .chess .chess-section:nth-of-type(odd):after {content: ''; width: 100%; background: url(images/triangle-bottom.svg) 50% 100%; height: 100px; bottom: 0px; display: block; position: absolute; left: 0px; z-index: 1}
*/
.single-project .chess .chess-section:last-of-type:after {display: none; padding-bottom: 0px}
.zoom {position: absolute; bottom: 15px; right: 15px; background: url(images/zoom.svg) 50% 50% no-repeat; background-size: contain; height: 20px; width: 20px; z-index: 1}
/* SINGLE-PROJECT */

.about {width: calc(100% - 350px)}
.about .text .inner {overflow: hidden; max-height: 250px; position: relative; transition: ease-in 600ms}
.about .text .inner a {color: #ff7d23; text-decoration: underline}

.about .text .inner:after {content: ''; display: block; transition: 300ms; position: absolute; bottom: 0px; left: 0px; width: 100%; background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); height: 50px}
.about .text.show .inner {max-height: 2000px}
.about .text.show .inner:after {height: 0px}
.about li {position: relative; padding-left: 15px}
.about li:before {content: ''; display: block; border: 2px solid #ff7d23; height: 5px; width: 5px; border-radius: 50%; position: absolute; top:8px; left: 0px}


.news {width: 300px}
/* .news .under-h i {display: inline-block; background: url(images/a-right.svg) 50% 3px no-repeat; vertical-align: top; width: 16px; height: 16px; background-size: contain; margin-left: 5px} */
.news-item {margin-bottom: 40px; font-size: 15px}
.news-item .img {width: 100%; height: 250px; position: relative; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; display: block; transition: 300ms}
.news-item .more {color: #ff7d23; text-decoration: underline}
.news-item h3 {font-size: 20px; transition: 300ms; margin: 15px 0px 5px 0px}
.news-item .date {margin-left: 10px; color: #ddd}
.news-item:hover .img {box-shadow: 0px 0px 0px 3px #ff7d23}
.news-item:hover h3 {color: #ff7d23}

.news-page .news-item {width: calc((100% - 120px) / 3)}
.single-news .img {width: 400px; height: 300px; margin-bottom: 15px; margin-left: 15px; float: right; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; overflow: hidden; display: block; transition: 300ms; box-shadow: 0px 0px 0px 3px #ff7d23}
.single-news .date {color: #ddd; font-size: 18px; font-family: 'Bebas Neue'; margin-top: 5px}
.single-news a {color: #ff7d23; text-decoration: underline; font-weight: 500}
.single-news .back {display: block; margin-top: 20px; font-family: 'Bebas Neue'; font-size: 18px; font-weight: 600}

.animate-block {position: absolute; top:80px; right: 0px; bottom: 0px; left: 0px; margin: auto; width: 500px; height: 200px}

.features {background: rgba(0,0,0,0.5); padding: 80px 0px; text-align: center; color: #fff}
.features h2 {color: #fff; margin-top: 0px; margin-bottom: 40px}
.feature {width: calc(20% - 10px)}
.feature .round {width: 150px; height: 150px; background-size: 60px; background-position: 50% 50%; background-repeat: no-repeat; transition: 300ms; margin: 0px auto 20px auto; border: 3px solid #fff; border-radius: 50%}
.feature:hover .round {border-color: #ff7d23}
.feature:nth-of-type(1) .round {background-image: url(images/01.svg)}
.feature:nth-of-type(2) .round {background-image: url(images/02.svg)}
.feature:nth-of-type(3) .round {background-image: url(images/03.svg)}
.feature:nth-of-type(4) .round {background-image: url(images/04.svg)}
.feature:nth-of-type(5) .round {background-image: url(images/05.svg)}



/* MODAL */
.layer {display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 8000; overflow-y: auto}
.modal .close {position: fixed; width: 50px; transform: rotateZ(45deg); padding: 10px; height: 50px; border-radius: 50%; top:50px; right: 100px; display: block; border: 2px solid #fff; cursor: pointer}
.modal .close:hover {background: #fff}
.modal .close:hover * {fill: #ff7d23}
.modal {display: none; position: relative; padding: 50px 50px; max-width: 900px; background: #fff; border:1px solid rgba(0,0,0,0.1); margin: 50px auto}
.modal label {display: block}

form input, form textarea {-webkit-appearance: none; -moz-appearance: none; transition: 300ms; font-size: inherit; font-family: inherit}
form input[type=text], form input[type=tel], form input[type=email] {display: block; width: 100%; border:1px solid #ddd; padding: 0px 10px; line-height: 38px; height: 40px; background: transparent}
form textarea {display: block; width: 100%; border:1px solid #ddd; padding: 10px; resize: none; height: calc(100% - 15px); line-height: 1.7}
form input[type=text]:focus, form input[type=tel]:focus, form input[type=email]:focus, form textarea:focus {border-color: #ff7d23; box-shadow: 0px 0px 0px 1px #ff7d23}
form input[type=checkbox] {display: inline-block; vertical-align: middle; width: 11px !important; height: 11px; margin-right: 10px !important; position: relative; border-radius: 1px; margin-left: 3px}
form input[type=checkbox]:before {border:1px solid #ddd; content: ''; display: block; width: 15px; height: 15px; position: absolute; top:-3px; left: -3px; border-radius: 1px} 
form input[type=checkbox]:checked {background: #ff7d23}
form input[type=checkbox]:checked:before {border:1px solid #ff7d23}
form .wpcf7-list-item {margin: 0px !important}
.wpcf7-not-valid-tip {font-size: 12px !important}
.wpcf7-validation-errors {display: none !important}

/* MODAL */









/* FOOTER */
.footer {border-top: 1px solid #ff7d23; color: #aaa; background: #222; padding: 25px 0px; font-size: 13px}
.footer .column {width: calc(25% - 10px)}
.footer .column b {color: #fff; font-family: 'Bebas Neue'; font-size: 18px; display: block; margin-bottom: 5px}
.footer .copyright {margin-top: 40px; color: #aaa}
.footer .belka {width: 250px; height: 23px; margin-left: 30px; filter: contrast(0); opacity: 0.7; margin-right: 100px}
.footer .belka svg {display: inline-block; vertical-align: middle; margin-top: 7px; white-space: nowrap; width: 90px; margin-left: 7px}
.footer .belka:hover {filter: contrast(1); opacity: 1}
/* FOOTER */


/* SLICK-SLIDER */
.slick-dotted.slick-slider {margin-bottom: 0px}
.slick-slider {-webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0}
.slick-list:focus {outline: none}
.slick-list.dragging {cursor: pointer; cursor: hand}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}
.slick-track {position: relative; top: 0; left: 0; display: block}
.slick-track:before, .slick-track:after {display: table; content: ''}
.slick-track:after {clear: both}
.slick-loading .slick-track {visibility: hidden}
.slick-slide {display: none;float: left; height: 100%; min-height: 1px}
[dir='rtl'].slick-slide {float: right}
.slick-slide img {display: block}
.slick-slide.slick-loading img {display: none}
.slick-slide.dragging img {pointer-events: none}
.slick-initialized .slick-slide {display: block}
.slick-loading .slick-slide {visibility: hidden}
.slick-vertical .slick-slide {display: block; border: 1px solid transparent}
.slick-arrow.slick-hidden {display: none}
.slick-arrow {height: 30px; width: 30px; transition: 300ms; text-align: center; z-index: 50; position: absolute}
.slick-arrow:before {display: none}
.slick-arrow svg {width: 30px; height: 30px}
.slick-arrow:hover svg * {fill:#ff7d23}
.single-project-slider .slick-arrow.slick-next {right: -100px; top:50%; margin-top: -15px}
.single-project-slider .slick-arrow.slick-prev {right: -60px; top:50%; margin-top: -15px}
/* SLICK-SLIDER */


@media screen and (max-width:1366px)
{
.projects .project .inner {padding: 40px 20px}
}

@media screen and (max-width:1023px)
{
.projects .project h3 {font-size: 32px}
.header .menu li {margin: 0px}
.feature .round {height: 120px; width: 120px}
body {font-size: 14px}
}

@media screen and (min-width:768px) {
.v-align {min-height: 500px; display: flex; flex-direction: column; justify-content: center}
}

@media screen and (max-width:767px)
{
	.single-project .chess .chess-section {padding-top: 40px; padding-bottom: 40px}
	.mobile-menu-icon {display: block}
	.header {height: 60px}
	.logo {width: 120px; height: 40px; border-bottom-width: 2px}
	.home .first {padding-top: 60px}
	.big-slider .slick-slide {background-position: 50% calc(50% + 60px)}
	.home .first .a-down {height: 20px}
	.content {margin-bottom: 40px; padding-top: 80px}
	.header .menu {position: absolute; top:60px; z-index: 1000; transition: 600ms; overflow-y: hidden; height: 0px; left: 0px; background: #fff; width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0px 10px}
	#menu-item-35 {display: none}
	.header .menu.show {height: 450px}
	.header .menu li {margin: 0px}
	.header .menu > li > a {display: inline; line-height: 60px; border-bottom: 2px solid #ddd; font-size: 13px; margin: 3px 0px 0px 0px}
	.animate-block {width: calc(100% - 20px)}
	.mobile-hide {display: none !important}
	.about {width: 100%}
	.footer .column b {line-height: 1; margin-bottom: 0px}
	.footer .column {width: 100%; margin-bottom: 15px}
	h1, h2 {font-size: 30px}
	hr {margin: 40px 0px}
	.home h2 {margin-top: 40px}
	.home .white {padding-bottom: 40px}
	.ctas a, input[type=submit] {line-height: 32px; height: 34px; border-radius: 17px; width: 130px; margin: 20px 0px 0px 0px; padding: 0px 5px; font-size: 13px}
	.ctas a:first-of-type {margin-right: 5px}
	form .half-50 {width: 100%}
	.single-project .half-50, .single-project .half-40 {width: 100%}
	.single-project iframe, .single-project .img, .single-project .slick-slide {height: 250px; margin-bottom: 10px; margin-top: 10px}
	.single-project .chess .flex-wrap .half-40 {order: 1}
	.single-project .chess .flex-wrap .half-50 {order: 2}
	.news-page .news-item {width: 100%}
	.single-news .img {width: 100%; height: 250px}
	.menu-projects {top: -380px}
	.menu-projects.show {top:100px; height: 380px !important; overflow-y: auto; padding-top: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd}
	.menu-projects .project {width: calc(50% - 5px); margin: 5px 0px}
	.menu-projects .project .inner {height: 100px}
	.menu-projects .project h3 {font-size: 21px}
	.header .lang li a {line-height: 25px; width: 30px; font-size: 13px}
	.feature {width: calc(50% - 20px); margin: 0px 0px 20px 0px}
	.feature .round {width: 120px; height: 120px}
	.single-project .black .half-50 {width: 100%; padding: 0px !important; border: none !important}
	.menu-projects-slider {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0px 10px}
}