@import url('https://fonts.googleapis.com/css2?family=Arimo&family=Comfortaa&display=swap');

body{font-family:'Comfortaa', cursive; color: #ffffff; background-color: #000000; -webkit-tap-highlight-color: transparent;}
a{color: #FFFFFF; text-decoration: none;}
.frame{width: 1000px; margin: 0 auto; box-sizing: border-box;}
.distance{margin-top: 120px;}
.distance-tiny{margin-top: 20px;}
#preview{overflow: hidden; z-index: 3; background-color: #ffffff;}
#preview .lines-preview{stroke-width: 0;}
#preview #lines{transform: translate(-50%, -50%); position:absolute;width: 100%;top: 50%;left: 50%; height: auto; opacity: 0;}
#preview .previewer{opacity: 0;}
#preview .previewer.after{transition: 2s; opacity: 1;}
#logo{right: 0; top: 0; width: 40.5%; z-index: 4; transition: 1s; position: absolute;}
#logo.big{top: 30%; width: 100%; position: fixed; display: none; }
#logo.mirror{transition: 0s;}
#logo #enter{ transform: translate(47%,55%) scale(0); transition: 0.5s; cursor: pointer;}
#logo #enter.open{transform: translate(0,0) scale(1); transition-delay: 3s;}
.mirror #enter{display: none;}
#site-background{z-index: -1;opacity: 0.7;}
.arrow{height: 100px; width: 42px; position: fixed; top: 50%;}
.arrow-prev{left: 80px; margin-top: -50px;}
.arrow-prev .background{transform: rotate(180deg);}
.arrow-next{right: 80px; transform: translateY(-50%);}
.arrow-two{top: 70%;}
.arrow span{position: absolute; opacity: 0; font-size: 28px;transition: 0.5s; color: green;}
.arrow:hover span{opacity: 1;}
.arrow-prev span{left: 100%;}
.arrow-prev:hover span{left: 150%;}
.arrow-next span{right: 100%;}
.arrow-next:hover span{right: 150%;}

.shadow{box-shadow: 10px 10px 3px #000000;}
.page-number{font-family: 'Arimo', sans-serif; font-weight: normal; margin: 40px 0;}
.big-pic{height: 500px;}
.subtitle .Text{display: inline-block; font-family: 'Arimo', sans-serif; font-weight: normal;}
.subtitle:before{content: "____"; }

.white{color: #ffffff;}
.black{color: #000000;}
.white-bg{background-color: #FFFFFF; color: #000000;}
.black-bg{background-color: #000000;}
.green{color: #00BF38;}
.green-bg{background-color: #00BF38;}

/* HEADER */
#header{position: relative; z-index: 2; height: 120px;}
#header #menu-icon{left: 5%; width: 120px; top: 50px; cursor: pointer;}

#menu-icon *{transition: 0.5s;}
#menu-icon:hover line{transform: translateX(-150px); }
#menu-icon:hover circle{r: 50; cx: 75; cy: 55; stroke-dasharray: 314; stroke-width: 8;}
#menu-icon:hover text{font-size: 18px; transform: translate(-95px, 10px);}

/* HOME */
#home{margin-top: -120px;}
#sitemap{width: 70%; height: auto;}
.banner{position: absolute; padding: 20px; box-sizing: border-box;}
.banner .white-bg, .banner .black-bg, .overlay{opacity: 0.6;}
.banner .Text{font-size: 20px; position: relative; z-index: 2;}
.banner .image{filter: grayscale(100%); box-shadow: 10px 10px 3px #000000;}
.banner:hover .white-bg, .banner:hover .black-bg{opacity: 0.3; transition: 0.5s;}
.banner:hover .image{filter: grayscale(0); opacity: 1; transition: 0.5s;}
#banner-1{top: 5.5%;left: 19.5%;width: 23%;height: 15.3%;}
#banner-2{top: 24%;left: 0;width: 42%;height: 23.5%;}
#banner-3{top: 51%;left: 18.7%;width: 23.3%;height: 15%;}
#banner-3 .Text{left: -40%;width: 120%;}
#banner-4{top: 69.7%;left: 0;width: 27.7%;height: 12%;}
#banner-4 .Text{left: 25%; top: 60%;}
#banner-5{top: 0;left: 48%;width: 15.2%;height: 20.8%;}
#banner-6{top: 24%;left: 45.4%;width: 25%;height: 23.5%;}
#banner-6 .Text{top: 70%;}
#banner-7{bottom: 0; left: 35.2%;width: 35%;height: 14.5%;z-index: 2;}
#banner-7 .image{box-shadow: none;}
#banner-7 .Text{left: -30%; font-size: 24px; line-height: 36px;}
#banner-8{ top: 17%;left: 71.8%;width: 27%;height: 14.5%;}
#banner-9{top: 33.2%;left: 71.8%;width: 27%;height: 9.5%;}
#banner-10{top: 44%; left: 71.8%;width: 27%; height: 22%;}
#banner-11{top: 69.5%;left: 78.9%;width: 21%;height: 9.5%;}
#banner-11 .Text{left: -40%;}
#banner-12{top: 80.5%;left: 71.8%;width: 26.5%;height: 11.5%;}
#banner-12 .Text{top: 40%;}
#people{width: 17%; height: auto; left: 48.5%; top: 52%;}
#sitemap-svg{pointer-events: none;}

/* PAGE STYLES  */
.mirror .go-front, .arrow{z-index: 2;}
.mirror .text-part{margin-top: -220px;}
.mirror .text-part h1{margin-bottom:70px; font-size: 40px;}
.mirror .overlay{opacity: 0.4;}
.right-content{top: 50px; left: -50px;}
.bottom-content{width: 80%; top: -100px; left: 10%;}

#quotes{float: none;}
#quotes .quote .white-bg{height: 240px;}
#quotes .quote .subtitle{font-weight: normal; cursor: pointer;}
#quotes .white-bg{padding-top: 40px; padding-bottom: 40px;}
#quotes i{font-size: 40px; margin-bottom: 20px; display: block;}
#quotes .white-bg i{-webkit-text-stroke: green 1px; color: transparent;}
#quotes .green-bg i{-webkit-text-stroke: white 1px; color: transparent;}
#quotes .skill{ z-index: 5; transition: 0.7s; overflow: hidden; box-sizing: border-box;}
#quotes .skill .skill-text{display: none; font-size: 20px;}
#quotes .skill.active .skill-text{display: block;}
#quotes .skill.active .text-preview{display: none;}
#quotes .skill.active i{font-size: 80px;}
#quotes .skill.active .skill-close{display: block !important; cursor: pointer;}
#quotes .skill.active .subtitle{display: none;}

#banner{height: 600px;}
.reviewer .image{background-size: auto 170%; background-position: 0px center;}
#reviewer-two{width: 50%;}
#reviewer-two #button-frame{overflow: hidden; height: 90px; bottom: 0;}
.reviewer .button{position: absolute; bottom: 40px; width: 160px; font-size: 24px;}
.reviewer #reviewer-button-one{left: 50%; margin-left: -80px;}
.reviewer #reviewer-button-two{ left: 640px; margin-left: -80px;}
#banner #review-mover{position: absolute; right: 0; margin-right: -2px; top: 0px; width: 4px; height: 100%;}
#banner #review-mover .arrow-prev, #banner #review-mover .arrow-next{position: absolute; width: 40px; height: 40px; top: 50%; margin-right: 12px;}
#banner #review-mover .arrow-prev{left: -40px; margin-top: -20px;}
#banner #review-mover .arrow-next{right: -50px;}
#banner #review-mover:hover{cursor: ew-resize;}

/* your dream */
#your-dream #quotes{margin-top: -150px;}

/* our meeting */
.team-file .image{height: 350px;}
.team-content{float: none; top: -50px;}
.team i, #contacts i{font-size: 20px; margin: 0 5px; -webkit-text-stroke: green 1px; color: transparent;}

/* contacts */
#contacts{list-style-type: none; padding: 0;}
#contacts i{margin-right: 15px;}
#contacts a, #contacts .Text, #footer a{color: #000000; padding: 5px 0; display: inline-block;}
#footer{z-index: 2; position: relative;}
#footer .partner-item .partner-name{margin: 0;}
#contacts .logger a{margin: 0 5px; display: inline-block;}
#footer-content{margin-top: 120px;}

@media (max-width: 1080px){
    .padding-60{padding: 30px;}
    #logo.big{top: 70%;}
    
    #header #menu-icon{left: 5%; width: 10%; top: 20px; }
    .frame{width: 90%;}
    .arrow{position: relative; display: block; width: 80%; margin: 0 auto;}
    .arrow-next{right: 0; transform: none; text-align: right; margin: 40px auto;}
    .arrow-next span{right: 0;}
    .arrow span, .arrow .background{position: relative; display: inline-block; vertical-align: middle; opacity: 1;}
    .arrow span{width: 67%; font-size: 22px;}
    .arrow .background{width: 30%;}
    .arrow-prev{text-align: left; left: 0;}
    .arrow-prev span{left: 0;}
    .arrow-prev:nth-child(2){margin: 40px auto;}
    
    .right-content{top: 0;}
    .mirror .text-part{margin-top: 0;}
    #quotes .quote .white-bg{height: auto;}
    
    #mobile-people{width: 50%; margin: 50px auto 0;}
    .mobile .banner{position: relative; margin: 20px 0; display: inline-block;}
    .mobile-arrow{position: absolute; z-index: 2; height: 70px; left: 0;}
    #mobile-arrow-long{height: 600px;}
    .mobile #our-meeting .column-6{width: 50%;}
    .mobile #our-meeting .column-6:last-child{left: 50%;}
    #home-mobile{margin-top: 100px;}
    #home-mobile #sideways .padding-10{padding: 0 10px;}
    #construction-mobile{height: 100px;}
    #construction-mobile .Text{right: 0; position: absolute;}
    #construction-mobile .mobile-arrow{top: 80px;}
}

@media (max-width: 768px){
    #preview #lines{width: auto; height: 100%;}
    #home-mobile #sideways .column-6{width: 50%; display: inline-block; vertical-align: top;}
}

@media (max-width: 640px){
    #header #menu-icon{width: 15%; top: 30px;}
    #logo{width: 60%; top: 10px;}
    #home-mobile{margin-top: 70px;}
}