body, html {padding: 0; margin: 0; font-family: Roboto, sans-serif; font-size: 16px; line-height: 22px; background: #1f1f1f; color: #fff; font-size: 15px; line-height: 20px;}
body::-webkit-scrollbar {width: 12px;}
textarea::-webkit-scrollbar {width: 4px;}
body::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track, .jconfirm-content::-webkit-scrollbar-track {background: #e1e1e1;}
body::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb, .jconfirm-content::-webkit-scrollbar-thumb {background: #1c1d1f;}
body::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, .jconfirm-content::-webkit-scrollbar-thumb:hover {background: #1f1f1f;}
a {text-decoration: none; color: #fff;}
img {display: block; max-width: 100%;}
* {box-sizing: border-box;}
body.show-project-content {overflow: hidden;}

.bad-container {padding: 0 40px; width: 100%; max-width: 100%; margin: 0 auto; position: relative;}
.site-logo {position: relative; display: block;}
.site-logo .black {opacity: 0; position: absolute; left: 0; top: 0;}
.page-header {margin: 0 0 30px 0;}
.page-header h1 {margin: 0; font-weight: 700; font-size: 26px; line-height: 30px; color: #fff;}

.content {margin: 0 0 50px 0;}
.content p {margin: 0 0 20px 0;}
.content h2 {font-size: 21px; line-height: 22px; margin: 0 0 10px 0; font-weight: 400;}
.content h3 {font-size: 19px; line-height: 22px; margin: 0 0 5px 0; font-weight: 400;}
.content h4 {font-size: 17px; line-height: 22px; margin: 0 0 0px 0; font-weight: 400;}
.content ul {margin: 0 0 20px 0;}
.content a {color: #fff; border-bottom: 1px solid transparent; transition: border .4s;}
.content a:hover {border-color: #fff;}

.navigation-box {position: fixed; left: 0px; right: 0; top: 0; z-index: 2; padding: 30px 0 0 0;}
.navigation-box .navigation-content {display: flex; flex-wrap: wrap; align-items: center;}
.main-menu { margin: 0 -10px 20px auto;}
.main-menu .menu {display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
.main-menu .menu .menu-item {display: block; padding: 0 10px; text-transform: uppercase}
.main-menu .menu .menu-item a {text-decoration: none; color: #fff; font-size: 21px; line-height: 22px; transition: background .4s; font-weight: 400; padding: 3px 5px;}
.main-menu .menu .menu-item a:hover {background: #ff6600;}
.navigation-box .site-logo {text-decoration: none; margin: 0 20px 0 0;}
.navigation-box .site-logo img {height: 120px; width: auto; transition: opacity .4s;}
.navigation-box .social {display: flex; justify-content: flex-end; margin: 0;}
.navigation-box .social a {display: block; margin: 0 0 0 10px;}
.navigation-box .social a svg {display: block; height: 20px; fill: #fff; transition: fill .4s;}
.navigation-box .social a:hover svg {fill: #707070;}

.bad-slider {background: #1f1f1f;}
.bad-slider .slick-slide {height: 100vh;}
.bad-slider .item {position: relative;}
.bad-slider .item img {display: block; margin: 0 auto; max-width: 100vw; max-height: 100vh;}
.bad-slider .item {height: 100vh; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center;}
.project-slider.bad-slider .slick-slide:nth-last-of-type(1) .item {background-position: center bottom;}
.bad-slider.main-slider .item img, .bad-slider .item img {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; max-width: initial; max-height: initial; transform: translate(-50%,-50%);}
.bad-slider.project-slider .slick-slide {#height: calc(100vh - 120px);}
.bad-slider.project-slider {padding: 0;}
.bad-slider.project-slider .item img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.bad-slider .item.content-item {color: #fff;}
.bad-slider .item.content-item .content-item-cont {width: 1920px; max-width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 180px 0 0 0;}
.bad-slider .item.content-item .content-item-cont .photo {width: 50%; position: relative; padding: 0 15px;}
.bad-slider .item.content-item .content-item-cont .photo img {position: relative; transform: translate(0,0); top: 0; left: 0; max-width: 100%; min-width: initial; min-height: initial;}
.bad-slider .item.content-item .content-item-cont .description {padding: 0 15px; font-size: 16px; line-height: 25px; color: #cccccc; font-weight: 400; width: 50%;}
.bad-slider .item.content-item .content-item-cont .description h1 {font-size: 21px; line-height: 25px; color: #ed6b21; text-transform: uppercase; margin: 0; font-weight: 400;}
.bad-slider .item.content-item .content-item-cont .description h2, .bad-slider .item.content-item .content-item-cont .description p {margin: 0; font-size: 15px; line-height: 20px; font-weight: 400;}
.bad-slider .item .info {padding: 0 15px; font-size: 16px; line-height: 25px; color: #cccccc; font-weight: 400; width: 100%; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; color: #fff;}
.bad-slider .item .info h1 {font-size: 21px; line-height: 25px; color: #ed6b21; text-transform: uppercase; margin: 0; font-weight: 400;}
.bad-slider .item .info h2, .bad-slider .item .info p {margin: 0; font-size: 15px; line-height: 20px; font-weight: 400; color: #fff;}

.bad-slider .slick-dots {position: absolute; right: 40px; bottom: 40px; display: flex; flex-wrap: wrap; justify-content: flex-end; list-style: none; margin: 0;}
.bad-slider .slick-dots li {display: block; margin: 0 0 0 16px;}
.bad-slider .slick-dots li button {display: block; border: none; background: #ff6600; width: 20px; height: 20px; border-radius: 0; font-size: 0; color: transparent; cursor: pointer; transition: background .4s;}
.bad-slider .slick-dots li button:hover, .bad-slider .slick-dots li.slick-active button {background: #fff;}
.bad-slider .slick-arrow {position: fixed; top: 50%; transform: translate(0, -50%); background: none; border: none; font-size: 0; color: transparent; box-shadow: none; outline: none; cursor: pointer; z-index: 3; opacity: 0.5; transition: opacity .4s; padding: 5px;}
.bad-slider .slick-arrow.slick-prev {left: 30px;}
.bad-slider .slick-arrow.slick-next {right: 30px;}
.bad-slider .slick-arrow:hover {opacity: 1;}
.bad-slider .slick-arrow svg {display: block; width: 50px; height: auto; fill: #fff;}

.page-template-projects .navigation-box, .page-template-content .navigation-box {position: relative; left: initial; right: initial; top: initial;}
.page-template-projects .site-logo .white, .page-template-content .site-logo .white {opacity: 1;}
.page-template-projects .site-logo .black, .page-template-content .site-logo .black {opacity: 0;}
.page-template-page-projects .main-menu .menu .menu-item a, .page-template-page-content .main-menu .menu .menu-item a, .page-template-page-contact .main-menu .menu .menu-item a, .page-template-page-text .main-menu .menu .menu-item a {transition: color .4s; #color: #000;}
.page-template-page-projects .main-menu .menu .menu-item a:hover, .page-template-page-projects .main-menu .menu .menu-item.current-menu-item a,
.page-template-page-content .main-menu .menu .menu-item a:hover, .page-template-page-content .main-menu .menu .menu-item.current-menu-item a,
.page-template-page-contact .main-menu .menu .menu-item a:hover, .page-template-page-contact .main-menu .menu .menu-item.current-menu-item a,
.page-template-page-text .main-menu .menu .menu-item a:hover, .page-template-page-text .main-menu .menu .menu-item.current-menu-item a {color: #ff6600; background: none;}
.page-template-projects .navigation-box .social a svg, .page-template-content .navigation-box .social a svg {fill: #000;}
.page-template-projects .navigation-box .social a:hover svg, .page-template-content .navigation-box .social a:hover svg {fill: #707070;}
.projects-list-page {padding: 180px 0 30px 0;}
.page-content {padding: 180px 0 30px 0;}
.projects-list .list {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.projects-list .list .item {padding: 15px; width: 33.3333%;}
.projects-list .list .item .item-cont {position: relative; overflow: hidden; background: #1f1f1f;}
.projects-list .list .item .photo img {filter: grayscale(0.5); transition: filter .4s;}
.projects-list .list .item .item-cont:hover img {filter: grayscale(0);}
.projects-list .list .item .info {position: absolute; bottom: 0; left: 0; right: 0; background: #fff; padding: 10px 20px; transform: translate(0, 100%); opacity: 0; transition: transform .4s, opacity .4s;}
.projects-list .list .item .info h2 {font-size: 21px; line-height: 25px; margin: 0; font-weight: 400; color: #ed6b21; text-transform: uppercase;}
.projects-list .list .item .info p {font-size: 15px; line-height: 20px; margin: 0; color: #000;}
.projects-list .list .item .info a {color: #000;}
.projects-list .list .item .link {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: #fff; opacity: 0.35; transition: opacity .4s;}
.projects-list .list .item .item-cont:hover .info {top: initial; transform: translate(0,0); opacity: 1; z-index: 2;}
.projects-list .list .item .item-cont:hover .link {opacity: 0;}

.project-page .content-button {position: fixed; right: 50px; bottom: 80px; border: 2px solid #fff; color: #fff; font-size: 16px; line-height: 20px; padding: 10px 20px; cursor: pointer; box-shadow: none; outline: none; background: none; transition: background .4s, color .4s;}
.project-page .content-button:hover {background: #fff; color: #000;}
.project-page .project-close-menu {position: fixed; right: 50px; top: 120px; color: #fff;}
.project-page .project-close-menu ul {list-style: none; padding: 0; margin: 0;}
.project-page .project-close-menu .menu-item-105 a {display: block; font-size: 0; color: transparent; width: 30px; height: 30px; position: relative; opacity: 0.5; transition: opacity .4s;}
.project-page .project-close-menu .menu-item-105 a:hover {opacity: 1;}
.project-page .project-close-menu .menu-item-105 a:before, .project-page .project-close-menu .menu-item-105 a:after {content: ' '; display: block; width: 100%; height: 4px; background: #fff; top: 50%; left: 50%; position: absolute;}
.project-page .project-close-menu .menu-item-105 a:before {transform: translate(-50%, -50%) rotate(45deg);}
.project-page .project-close-menu .menu-item-105 a:after {transform: translate(-50%, -50%) rotate(-45deg);}
.project-content {position: fixed; left: 100%; top: 100%; width: 100%; height: 100%; background: #fff; padding: 80px 0 50px 0; z-index: 10; transition: left .4s, top .4s, opacity .4s; overflow-y: scroll; opacity: 0;}
.show-project-content .project-content {left: 0; top: 0; opacity: 1;}
.project-page .project-content .content-button {position: absolute; top: -40px; right: 0; padding: 5px; border: none; background: none; opacity: 0.7; transition: opacity .4s; bottom: initial;}
.project-page .project-content .content-button svg {display: block; width: 30px; height: auto; fill: #000;}
.project-page .project-content .content-button:hover {opacity: 1;}

.contact-data .contact-data-cont {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.contact-data .contact {width: 20%; padding: 15px; margin: 0 0 30px 0;}
.contact-data .contact-cont {position: relative;}
.contact-data .contact .map {margin: 0 0 20px 0;}
.contact-data .contact .map p {margin: 0; display: block;}
.contact-data .contact .map iframe {display: block; border: none; width: 100%; height: 500px;} .map p {margin: 0; display: block;}
.contact-data .contact .content {margin: 0;}
.contact-map .contact-map-cont {margin: 0 -40px;}
.contact-map iframe {width: 100%; height: 500px; border: none;}

.clients-list .list {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.clients-list .list .client {padding: 15px; width: 33.3333%;}
.clients-list .list .client .client-cont {position: relative; overflow: hidden; background: #1f1f1f;}
.clients-list .list .client .logo {display: flex; position: relative; height: 340px; background: #fff; padding: 15px; align-items: center;}
.clients-list .list .client .logo img {filter: grayscale(0.5); transition: filter .4s; max-width: 100%; height: auto; max-height: 100%; display: block; margin: 0 auto;}
.clients-list .list .client .client-cont:hover img {filter: grayscale(0);}.projects-list .list .item .info h2 {font-size: 21px; line-height: 25px; margin: 0; font-weight: 400; color: #ed6b21; text-transform: uppercase;}
.clients-list .list .client .info {position: absolute; bottom: 0; left: 0; right: 0; background: #fff; padding: 10px 20px; transform: translate(0, 100%); opacity: 0; transition: transform .4s, opacity .4s;}
.clients-list .list .client .info h2 {font-size: 21px; line-height: 25px; margin: 0; font-weight: 400; color: #ed6b21; text-transform: uppercase;}
.clients-list .list .client .info p {font-size: 15px; line-height: 20px; margin: 0; color: #000;}
.clients-list .list .client .info a {color: #000;}
.clients-list .list .client .link {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: #fff; opacity: 0.35; transition: opacity .4s;}
.clients-list .list .client .client-cont:hover .info {top: initial; transform: translate(0,0); opacity: 1; z-index: 2;}
.clients-list .list .client .client-cont:hover .link {opacity: 0;}

.footer-2 {background: #1f1f1f; color: #fff; padding: 20px 0; font-size: 16px; line-height: 24px;}
.footer-2 .footer-cont {display: flex; flex-wrap: wrap; margin: 0 -15px;}
.footer-2 .col {padding: 0 15px; width: 50%;}
.footer-2 p {margin: 0 0 20px 0;} 
.footer-2 .col-info b {font-size: 18px; line-height: 24px;}
.footer-2 .col-logo a {display: inline-block;}
.footer-2 .col-info a {color: #fff; transition: opacity .4s;}
.footer-2 .col-info a:hover {opacity: 0.6;}
.footer-2 .col-social {text-align: right;}
.footer-2 .col-social a {display: inline-block; margin: 0 0 0 10px; opacity: 1; transition: opacity .4s;}
.footer-2 .col-social a svg {display: block; height: 24px; width: auto; fill: #fff;}
.footer-2 .col-social a:hover {opacity: 0.6;}


@media all and (max-width: 1200px) {
	.projects-list .list .item {width: 50%;}
	.clients-list .list .client {width: 50%;}
	.contact-data .contact {width: 50%;}
}

@media all and (max-width: 992px) {
	.bad-container {padding: 0 15px;}
	.footer-2 .col {width: 50%;}
	.footer-2 .col-logo {width: 100%; text-align: center;}
	.footer-2 .col-logo img {max-height: 100px;}
}

@media all and (max-width: 800px) {
	.projects-list .list .item {width: 100%;}
	.clients-list .list .client {width: 100%;}
	.contact-data .contact {width: 100%;}
}

@media all and (max-width: 767px) {
	.bad-container {padding: 0 10px;}
	.footer-2 .col {width: 100%; text-align: center;}
	.footer-2 .col-info {margin: 0 0 10px 0;}
	.footer-2 .col-social a {margin: 0 5px 10px 5px;}
}

@media all and (max-width: 500px) {
	.bad-slider .slick-dots {left: 0; right: 0; justify-content: center; width: 100%; padding: 0 10px;}
	.bad-slider .slick-dots li {margin: 0 5px;}
}
