@import url("https://use.typekit.net/dpi1tqh.css");

html, body{margin:0; padding:0; font-family: museo-slab; box-sizing: border-box;}
section{height: 100vh;}
a{text-decoration: none;}
li{list-style-type: none; font-weight: 100;}

/***** HEADER ****************/

li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
.media{margin-right: 25px;}
li.dropdown { display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: rgba(43, 43, 100, 0.5); min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: center;}
.dropdown-content a:hover { background-color: #f1f1f1; }
.dropdown:hover .dropdown-content { display: block;}


nav{display: flex; justify-content: space-between; align-items: center; min-height: 120px; width: 100%; position: absolute; z-index: 99999999999999;} 
.nav-links{display: flex; justify-content: space-around; width: 400px; font-size: 16px; margin: 0 40px 0 0;}
.nav-links a{text-decoration: none; letter-spacing: 0.5px; font-weight: 300; transition: all 0.2s;}
.nav-links a:hover:not(.contact){color: gray;}
.nav-links li{list-style: none;}
.nav-links .contact{border: 2px solid white; background-color: white none; padding: 12px 20px 12px 20px; color: white;}
.nav-links .contact:hover{background-color: white; color: #000; transition: all 0.2s;}
#logo{width: 300px; margin: 5px 0 0 40px; transition: all 0.25s;}
#logo:hover{transform: scale(1.03);}

.hamburger {display: none; cursor: pointer; justify-content: space-around; margin: 0 40px 0 0;}
.bar1, .bar2, .bar3 {width: 35px; height: 5px; background-color: #fff; margin: 6px 0; transition: 0.4s; border-radius: 3px;}
.change .bar1 {-webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); background-color: red;}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); background-color: red;}

/***** HOME ****************/

.slider {position: relative; overflow: hidden; height: 100vh; width: 100%;}
.slide {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.75s ease-in-out;}
.slide.current {opacity: 1; z-index: 9;}
.slide .content h1 {color: white; font-weight: 500; font-style: italic; text-align: center; font-size: 4.5vw; margin: 20px 0 20px 0;}
.slide.current .content {opacity: 1; transform: translateY(-50%); transition: all 1s;}
.buttons button#next {position: absolute; top: 50%; right: 15px;}
.buttons button#prev {position: absolute;top: 50%;left: 15px;}
.buttons button {border: white; background-color: transparent; cursor: pointer; padding: 13px 15px; outline: none; z-index: 99;}
.slide .content {margin: 45vh 0 0 20%; padding: 1px 0 5px 0; opacity: 0; width: 60vw; background-color: rgba(43, 43, 100, 0.2); color: #333; -webkit-box-shadow: 0 0 30px; box-shadow: 0px 0px 30px;}
.slide .content:hover { background-color: rgba(43, 43, 100, 0.7); transition-duration: 0.5s;}
.slide .content:active { animation-delay: 2s; animation-name: colors; animation-duration: 10s; animation-timing-function: ease;} 
    @keyframes colors {
    
    0% {background-color: rgba(43, 43, 100, 0.7);} 
    
    20% {background-color: #FF0018;} 
    40% {background-color: #FFA52C;} 
    60% {background-color: #FFFF41;} 
    80% {background-color: #008018;}
    60% {background-color: #0000F9;} 
    80% {background-color: #86007D;} 
    
    100% {background-color: rgba(43, 43, 100, 0.7);}}

.slide:first-child {background: url('../img/foto/brickhario_3d.jpg') no-repeat center top/cover; background-attachment: fixed;}
.slide:nth-child(4) {background: url('../img/foto/landscape.jpg') no-repeat center top/cover; background-attachment: fixed;}
.slide:nth-child(5) {background: url('../img/foto/3d.jpg') no-repeat center top/cover; background-attachment: fixed;}
.slide:nth-child(3) {background: url('../img/foto/lego_sports.jpg') no-repeat center top/cover; background-attachment: fixed;}
.slide:nth-child(6) {background: url('../img/foto/blog.jpg') no-repeat center top/cover; background-attachment: fixed;}
.slide:nth-child(2) {background: url('../img/photos/haraldro2021-67.jpg') no-repeat center top/cover; background-attachment: fixed;}

.button {border-radius: 4px; background-color: rgba(0, 0, 0, 0.5); border: white 2px solid; color: #FFFFFF; text-align: center; font-size: 3vw; padding: 1vw 0 1vw 0; width: 25vw; transition: all 0.5s; cursor: pointer; margin: -10px 10px 20px 30%; font-family: museo-slab; font-weight: 500;}
.button span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button span:after {content: ' \25BA'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.button:hover {background-color: black;}
.button:hover span {padding-right: 50px;}
.button:hover span:after {opacity: 1; right: 0;}

.arrow {border: solid lightgrey; border-width: 0 4px 4px 0; display: inline-block; padding: 10px; border-radius: 3px; transition: all 0.25s;}
.arrow:hover{padding:12px;}
.right {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
.left {transform: rotate(135deg);-webkit-transform: rotate(135deg);}

/* CONTACT *******************************/

#contact{background-color: #2b2b64; text-align: center; height: 100%;}
#contact .logo-foot{width: 8em; margin-bottom: -20px;}
#contact h2{color:white; font-size: 2.5em; margin: 1em 0 0 0; padding: 0;}
#contact h5{color:white; font-size: 2em; margin:30px 0 0 0; font-weight: 300; transition: all 0.5s; width: 100%;}
#contact a img{transition: all 0.25s ease 0s;}
#contact a img:hover{opacity: 0.5;}
.yt-footer{width: 200px; margin: 30px 20px 30px 0;}
.fb-footer{width:50px; margin: 30px 20px 30px 0;}
.ig-footer{width:50px; margin: 30px 20px 30px 0;}
.blue-box{padding: 20vh 0 10vh 0;}
.blue-box p{color: white; font-weight: 100; margin-bottom: 25px;}
.blue-box p:nth-of-type(1){font-weight: 300; font-size: 1.25em; line-height: 30px;}
.blue-box p:nth-of-type(2){letter-spacing: 1px; line-height: 20px;}

/* FOOTER *******************************/

footer{width: 100%; height: 100px; background-color: black; font-family: museo-slab,serif; font-weight: 100; font-style: normal; text-align: center; margin:0; display: flex; justify-content: center; align-items: center; font-size: 12px; color:lightgray;}
footer p{margin-top: -3px;}

/***** MEDIA QUERIES ****************/

/* TABLET */

@media screen and (max-width: 1150px) {
   
    html{overflow-x: hidden;}
    body{overflow-x: hidden;}
    nav{min-height: 90px; padding-top: 15px;}
    .nav-links{position: absolute; right: 0px; top:0px; height: 100%; background-image: url("../img/svg/bg.svg"); background-color: white; background-position: center center; background-repeat: no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; width: 100%; transform: translateX(100%); font-size: 30px; position: fixed; margin: 0; justify-content: space-evenly;}
    .nav-active{transform: translateX(0%); transition: transform 0.5s ease-in;}
    .nav-links a{color:black; font-weight: 500;}
    .nav-links a:active{color: gray; font-weight: 700;}
    .nav-links .contact{display: none;}
    .about{display: none;}
    .nav-links li{opacity: 0;}
    .hamburger{display: block;}
    .slide .content{background-color: rgba(43, 43, 100, 0.7);}
    .slide .content:active {background-color: darkred; transition-duration: 5s; transition-delay: 2s;}
    .dropdown:hover .dropdown-content { display: none;}
    .blue-box p:nth-of-type(1){}
    .blue-box p:nth-of-type(2){padding: 0 5em;}
}
/* MOBILE */

@media screen and (max-width: 500px) {
    
    nav{padding-top: 0;}
     #logo{width: 200px;  margin: 5px 0 0 20px;}
    .hamburger{margin: 0 20px 0 0;}
    .nav-links {font-size: 20px;}
    
    .slide .content {margin-top: 40vh; width: 70vw; margin-left: 15%;}
    .slide .content h1 {margin: 10px 0 10px 0;}
    .button {width: 50vw; font-size: 25px; margin: 0 0 15px 10vw; padding: 10px 0 10px 0;}
    
    #about{padding-top: 50px; height: 100%;}
    #clients h1{display: block;}
    .client-container{justify-content: center; margin-bottom: 20px;}
    .client-container img{margin-right: 1vw; width: 15vw; flex-wrap: wrap;}
    #clients p{font-size: 2.7vw; line-height: 20px;}
    
    .box-1{margin: 20px 5vw 0 5vw;}
    .box-1 h1{font-size: 8vw;}
    .box-1 p{font-size: 3.5vw; line-height: 20px; margin: 5px 0vw 20px 0vw; font-weight: 500;}
    .box-2{margin: 10px 5vw 0px 5vw;}
    .box-2 h1{font-size: 8vw;}
    .box-2 p{font-size: 3.5vw; line-height: 20px; margin: 5px 0vw 20px 0vw; font-weight: 500;}
    
    #contact a .yt-footer{width: 150px;}
    #contact a .fb-footer{width: 40px; margin-right: 0;}
    #contact a .ig-footer{width: 40px;}
    #contact h2{font-size: 2em;}
    #contact h5{font-size: 1.25em; margin-top: 30px;}
    .blue-box{padding-top: 40%;}
    .blue-box p{font-size: 0.75em; padding: 0 5% 0 5%;}
    #contact .logo-foot{width: 5em;}
    .blue-box p:nth-of-type(1){font-size: 1.1em;}
    .blue-box p:nth-of-type(2){padding: 0 5em;}
    
    footer{height: 50px;}
    footer p{margin:0; font-size: 10px;}
    
}

 @keyframes navLinkFade{
        from{opacity: 0; transform: translateX(50px);}
        to{opacity: 1; transform: translateX(0px);}
    }