@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

*, *:after, *:before{margin:0;padding:0;box-sizing:border-box}
*:focus{outline:none}
html{font-size:10px;height:100%}
body{background-color:#e9e9e9;font-family:'Open Sans', Arial, Tahoma, Helvetica, sans-serif;font-weight:400;font-size:1.2rem;color:#333;min-height:100%;padding-bottom:6rem;position:relative}
a{text-decoration:none;transition:all .2s linear}
a:focus{outline:none}
img{border:none;display:block}
ul li{list-style:none}
input, button, textarea, select{background-color:transparent;border:none;color:#333;font-family:'Open Sans', Arial, Helvetica, sans-serif;font-size:1.4rem;font-weight:400;height:5rem;padding:0 2rem;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none}
textarea{display:block;resize:none;height:10rem;padding:1.5rem 2rem}
button{margin:0}
input, input:focus, button, button:focus, select, select:focus{outline:none}
button, input[type="submit"], input[type="button"]{border:none;cursor:pointer}
address{font-style:normal}
svg{display:block}
::-webkit-input-placeholder{color:#03182d}
::-moz-placeholder{color:#03182d}
:-moz-placeholder{color:#03182d}
:-ms-input-placeholder{color:#03182d}

h1, h2, h3, h4, h5, h6{font-weight:400;margin:0}

.scrollbar-inner > .scroll-element.scroll-y{right:0;width:.6rem}
.scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track{border-radius:0}

.icon-linkedin{position:absolute;top:2.6rem;left:2.6rem;z-index:15;transition:all .2s linear}
.icon-linkedin img{width:2.5rem}
.icon-linkedin.move{left:20.3rem}

.header{padding:3.8rem 1.5rem 0;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5}

.header h1{color:#c7c7c7;font-size:2.4rem;font-weight:600;padding-bottom:1rem;text-align:center;text-transform:uppercase}
.header h1 span{display:none}
.header:before{content:'';width:0;height:0;border-style:solid;border-width:2.8rem 2.8rem 0 2.8rem;border-color:#181f3d transparent transparent transparent;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.header-logo{display:flex;justify-content:center}
.header-logo img{width:32rem;height:7rem}
.index-page{height:100%;padding-bottom:6rem}
.index-page .header{padding-top:15.5rem}
.index-page h1{font-size:3rem}
.index-page .header-logo img{width:39.6rem;height:9.2rem}
.index-page:before{background-color:#f4f4f4;content:'';display:block;width:50%;height:100%;position:fixed;top:0;left:0}

.index-main{display:flex;justify-content:center;padding:47rem 1.5rem 0;position:relative;z-index:10}
.index-main_links{display:flex;padding-bottom:6rem}
.index-main_links li{padding:0 8.5rem}
.index-main_links div{color:#333;display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:700;width:19rem;height:19rem;position:relative;text-align:center;text-transform:uppercase}
.index-main_links div img{position:relative;z-index:3}
.index-main_links .marker{box-shadow:0 0 2rem rgba(0,0,0,.4);display:block;width:19rem;height:19rem;position:absolute;top:0;left:0;transition:all .4s linear}
.index-main_links .word{position:absolute;left:50%;bottom:-4.3rem;transform:translateX(-50%)}
.index-main .link-design .marker{background-color:#feae00;border-radius:100% 100% 100% 0}
.index-main .link-design img{width:7.1rem;height:7.1rem}
.index-main .link-html .marker{background-color:#924992;border-radius:100% 100% 0 100%}
.index-main .link-html img{width:9rem;height:5.7rem}
.index-main .link-design:hover .marker{transform:rotate(180deg)}
.index-main .link-html:hover .marker{transform:rotate(-180deg)}

.footer{padding:0 1.5rem 2.7rem;text-align:center;position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
.footer a{color:#333;font-weight:700}
.footer a:hover{text-decoration:underline}

.portfolio-main{padding:18.3rem 0 0;position:relative}
.portfolio-main:before{background-color:#f4f4f4;content:'';display:block;width:100%;height:26.5rem;position:absolute;top:0;left:0;}
.portfolio-main_top{width:100%;max-width:1360px;margin:0 auto;padding:0 2rem;position:relative;height:8.2rem;text-align:center}
.portfolio-main_year{color:#D2D2D2;font-size:6rem;position:absolute;top:50%;left:2rem;transform:translateY(-50%);width:20rem}
.portfolio-main_year a{color:#D2D2D2}
.years-carousel .owl-nav button.owl-next, .years-carousel .owl-nav button.owl-prev{position:absolute;top:50%;left:0;transform:translateY(-50%);background-color:#f4f4f4;width:3rem;height:5rem;font-size:4rem;text-align:left}
.years-carousel .owl-nav button.owl-next{left:auto;right:0;text-align:right}
.years-carousel .owl-nav button.owl-next.disabled, .years-carousel .owl-nav button.owl-prev.disabled{opacity:0}
.years-carousel .owl-nav button.owl-next span, .years-carousel .owl-nav button.owl-prev span{display:block;height:5rem;line-height:5rem}
.portfolio-main_filter{font-size:1.4rem;padding-top:2rem}
.portfolio-main_filter button{display:inline-block;height:auto;position:relative;width:11rem;text-transform:uppercase}
.portfolio-main_filter .is-checked{font-weight:700}
.portfolio-main_filter .marker-icon{position:absolute;left:50%;bottom:-5.4rem;transform:translateX(-50%);padding-top:1.8rem;opacity:0;transition:all .2s linear}
.portfolio-main_filter .marker{border-radius:100% 100% 100% 0;box-shadow:0 0 1rem rgba(0,0,0,.3);display:block;width:6rem;height:6rem;position:absolute;top:0;left:50%;transition:all .2s linear;transform:translateX(-50%) rotate(-45deg)}
.portfolio-main_filter .marker-design{background-color:#feae00}
.portfolio-main_filter .marker-html{background-color:#924992}
.portfolio-main_filter .marker-icon img{height:2.4rem;position:relative;z-index:2}
.portfolio-main_filter .is-checked .marker-icon{opacity:1}
.portfolio-section{padding:6rem 1.5rem 0}
.portfolio-works{display:flex;justify-content:center;align-items:flex-start;flex-flow:row wrap;margin:0 auto;max-width:1360px}
.portfolio-works li{margin:0 4rem 6rem;text-align:center}
.portfolio-item{background-color:#fff;width:26rem;height:26rem;overflow:hidden;position:relative}
.portfolio-item figure, .portfolio-item figure img{height:100%}
.portfolio-item_info{display:none}
.portfolio-item_info.open{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:45;-webkit-perspective:2000;-moz-perspective:2000;perspective:2000;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden}
.portfolio-item_info-in{background-color:rgba(23,26,43,.5);position:absolute;top:0;left:100%;width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-transform:rotateX(0) rotateY(90deg) translateZ(0);-moz-transform:rotateX(0) rotateY(90deg) translateZ(0);-ms-transform:rotateX(0) rotateY(90deg) translateZ(0);-o-transform:rotateX(0) rotateY(90deg) translateZ(0);transform:rotateX(0) rotateY(90deg) translateZ(0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all 650ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.portfolio-item_info-in.active{-webkit-transform:rotateX(0) rotateY(0deg) translateZ(0);-moz-transform:rotateX(0) rotateY(0deg) translateZ(0);-ms-transform:rotateX(0) rotateY(0deg) translateZ(0);-o-transform:rotateX(0) rotateY(0deg) translateZ(0);transform:rotateX(0) rotateY(0deg) translateZ(0);left:0}
.portfolio-item_info-in.out{-webkit-transform:rotateX(0) rotateY(-90deg) translateZ(0);-moz-transform:rotateX(0) rotateY(-90deg) translateZ(0);-ms-transform:rotateX(0) rotateY(-90deg) translateZ(0);-o-transform:rotateX(0) rotateY(-90deg) translateZ(0);transform:rotateX(0) rotateY(-90deg) translateZ(0);left:-100%;-webkit-transition:all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);-moz-transition:all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);-ms-transition:all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);-o-transition:all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);transition:all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045)}
.portfolio-item_info .icon-view{background-color:rgba(23,26,43,.9);border-radius:100%;display:flex;align-items:center;justify-content:center;width:6rem;height:6rem}
.portfolio-item_info .icon-view img{width:2rem}
.portfolio-item_info h3{text-shadow:0 .1rem 0 rgba(23,26,43,.8);color:#fff;font-size:1.2rem;font-weight:600;position:absolute;left:0;bottom:0;padding:1.5rem;width:100%}

.index-main .portfolio-main_year{position:absolute;top:33rem;left:50%;transform:translate(-50%, 0);text-align:center}
.index-main .years-carousel .owl-nav button.owl-next{background-color:#e9e9e9}

#lightboxOverlay{background-color:rgba(23,26,43,.6)}
.lb-data .lb-caption{color:#fff;font-weight:600}
.lb-data .lb-number{display:none !important}


@media screen and (max-width: 1389px) {
    .portfolio-works{max-width:102rem}
}

@media screen and (max-width: 1049px) {
    .portfolio-works{max-width:68rem}
}

@media screen and (max-width: 768px) {
    .index-page .header{padding-top:7.5rem}
    .index-main{padding-top:36rem}
    .index-main .portfolio-main_year{top:25rem}
    .portfolio-main{padding:16.3rem 0 0}
    .portfolio-main:before{height:33rem}
    .portfolio-main_year{left:auto;top:auto;transform:none;position:relative;margin:0 auto}
    .portfolio-main_top{height:16.2rem;padding:0}
    .portfolio-main_filter li{padding:0 2.5rem}
}

@media screen and (max-width: 709px) {
    .portfolio-works{max-width:26rem}
    .portfolio-works li{margin:0 0 4rem}
}

@media screen and (max-width: 660px) {
    .icon-linkedin{left:1.5rem;top:1.5rem;width:2.5rem;height:1.9rem}
    .index-main_links li{padding:0 4.5rem}
    .index-main_links div, .index-main_links .marker{width:16rem;height:16rem}
}

@media screen and (max-width: 440px) {
    .header, .header-logo{width:100%}
    .header-logo a{display:block;width:100%}
    .header-logo img{width:100%;height:auto}
    .index-main .portfolio-main_year{top:23.5rem}
    .index-main_links li{padding:0 2.5rem}
    .index-main_links div, .index-main_links .marker{width:11.5rem;height:11.5rem}
    .index-main .link-design img{width:4.1rem;height:4.1rem}
    .index-main .link-html img{width: 4.6rem;height:auto}
}