* {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
body{background: #000;color:#FFF;text-align:center;padding:216px 0 0 0;margin:0}
header{position: fixed;top:0;left:0;z-index:10;width:100%;background:#000}
.social{position: absolute;right:20px;bottom:30px}
menu{font-weight:normal;font-size:16px;margin:40px 0 30px;padding:0}
menu a{margin:0 20px}

a{text-decoration: none;color:#CCC;}
a:hover{text-decoration: underline;color:#FFF;}

h1{font-weight:300;font-size:49px;margin:40px 0 0 }
h2{font-weight:300;font-size:25px;color:#888;margin:0 0 20px}
h3{font-size:40px;font-weight:200;margin:22px auto;padding:0 22px}
h4{margin:22px auto;padding:0 22px;width: 61vw;font-size: 19px;letter-spacing: 0.03em;font-weight: 300;color: #CCC;line-height: 1.5em;}

.bx{background:url(../img/bg1.jpg) no-repeat 50% 50%; background-size:100% 100%;padding:162px 0;margin:0 0 72px}
.bx p{background: #000;max-width: 740px;margin: 0 auto;padding: 0 40px;font-size: 19px;letter-spacing: 0.03em;font-weight: 300;color: #CCC;line-height: 1.5em;}
.bx p:first-child{padding: 40px 40px 20px 40px;}
.bx p:last-child{padding:20px 40px 40px 40px;}

.cols{display:flex;flex-wrap: wrap;align-items: center;justify-content: center;gap:20px;padding:0 80px;margin:72px 0}
.cols3>div{flex-grow: 1;width:calc(33.333% - 20px);aspect-ratio: 1 / 1;cursor: pointer;}

.thumbnail{position: relative;overflow: hidden;display: flex;flex-direction: column;vertical-align: middle;align-items: center;justify-content: center;}
.thumbnail img{position:absolute;top:0;left:0;height:100%;opacity:1;transition: opacity 0.2s;}
.thumbnail:hover img{opacity: 0.2;}
.thumbnail h5{font-size: 21px;font-weight: 200;margin: 0;}
.thumbnail p{margin:20px 0 0}
.thumbnail a{display:none}

.carousel{margin:72px 0}
.carousel .thumbnail{margin:0 10px;height:400px;display: flex!important;}
.carousel .thumbnail img{height:initial;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);}

.carousel[slides="2"] .thumbnail{height:500px}
.carousel[slides="3"] .thumbnail{height:400px}
.carousel[slides="4"] .thumbnail{height:200px}

.slick-arrow{font-size: 0.01px;color: transparent;border: 0;position: absolute;top: 50%;z-index: 2;height: 52px;width: 52px;cursor: pointer;}
.slick-arrow.slick-prev{background: url(../img/left.png)  no-repeat 0 0;left:20px;background-size:100% 100%}
.slick-arrow.slick-next{background: url(../img/right.png)  no-repeat 0 0;right:20px;background-size:100% 100%}

a.linkedin{background:url(../img/linkedin.png) no-repeat 0 0; background-size:100% 100%;width:20px;height: 20px;display:inline-block;vertical-align: -4px;margin:0 10px }
a.insta{background:url(../img/instagram.png) no-repeat 0 0; background-size:100% 100%;width:20px;height: 20px;display:inline-block;vertical-align: -4px;margin:0 10px }

.constservice.cs1{background:url(../img/bg3.jpg) no-repeat 0 0;background-size: 100% 100%;}
.constservice.cs2{background:url(../img/bg4.jpg) no-repeat 0 0;background-size: 100% 100%;}
.constservice.cs3{background:url(../img/bg5.jpg) no-repeat 0 0;background-size: 100% 100%;}
.constservice{overflow: hidden;width:100%;display: flex;flex-direction: column;padding:140px 0;}
.constservice h5{background: #000;width:100%;max-width: 740px;margin: 0 auto;font-size: 21px;letter-spacing: 0.03em;font-weight: 300;padding: 40px 40px 0 40px;font-size: 25px;}
.constservice p{background: #000;margin: 0 auto;max-width: 740px;padding: 40px 40px;font-size: 17px;font-weight: 200;line-height: 1.5em;}

.pop{display:none}
.pop.visible{display:block;position: fixed;top:0;left:0;z-index: 300;background:#000;width:100%;height:100vh;}
.preview .pr{display:flex;height:100vh}
.preview .pr .cl1{display: flex;justify-content: center;align-items: center;padding: 100px;width: 65%;}
.preview .pr .cl1 .w{flex-grow: 1;}
.preview .pr .cl1 .w img{width:100%}
.preview .pr .cl2{text-align: left;padding: 120px 0 0 0;}
.preview .pr .cl2 h5{font-size: 28px;font-weight: 300;margin: 0;}
.preview .pr .cl2 p{font-size: 14px;font-weight: 300;color: #CCC;}
.pop a.x{display: block;height: 52px;width: 52px;background: url(../img/x.png) no-repeat 0 0;z-index: 9909;position: fixed;top: 30px;right: 30px;}

@media screen and (max-width: 850px) {
    .bx{padding:34px;margin:0 0 42px}
    .cols{margin:42px 0;padding:0 20px}
    .cols3>div{width:auto}
    .constservice{padding:32px 50px;width:calc(100% - 64px)}
    .constservice h5{width:calc(100% - 80px)}
    .constservice p{width:calc(100% - 80px)}
    .slick-arrow{width:42px;height:42px}
    .slick-arrow.slick-prev{left:5px}
    .slick-arrow.slick-next{right:5px}
    .social{top:10px;right:10px}
    .preview .pr{flex-direction: column-reverse;}
    .preview .pr .cl1{flex-grow: 1;padding: 10px;width: calc(100% - 20px);}
    .preview .pr .cl2{text-align: left;padding: 40px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: calc(100% - 80px);}
    .pop a.x{top:0;right:0}
    .pop .slick-arrow.slick-prev{top:initial;bottom:40px;width:60px;height:60px}
    .pop .slick-arrow.slick-next{top:initial;bottom:40px;width:60px;height:60px}
}