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

html, body{margin:0; padding:0; font-family: museo-slab; box-sizing: border-box;}
section{height: 100%;}
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;}
li.dropdown { display: inline-block;}
.dropdown-content { display: none; position: absolute; background-color: #2b2b64; 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%; z-index: 99999999999999; background-color: #2b2b64; background-color: #2b2b64; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);} 
.nav-links{display: flex; justify-content: space-around; width: 500px; 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;}


/***** LEGO STOP MOTION ****************/

#legosm h1{text-align: center; color: black; font-weight: 500; font-size: 2em; margin: 50px 0 40px 0;}
#legosm iframe{width: 60vw; height: 59.5vh; margin-left: 20vw; }

.slideshow-container {max-width: 60vw; position: relative; margin: 0;}

.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; color: grey; font-weight: bold; font-size: 25px; transition: 0.25s ease; user-select: none; margin: -22px -42% 0 25%;}
.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {color: black;}

.dot {cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}
.active, .dot:hover {background-color: #717171;}

.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/**** LEGO TABLE TENNIS ANIMATION *********/

.ttvid{padding: 0px;}
#ttanime h1{text-align: center; color: black; font-weight: 500; font-size: 2em; margin: 100px 0 100px 0;}

#ttanime figure{display: flex; justify-content: center; margin: 0 10vw 50px 10vw;}
#ttanime figure img{width: 400px; transition: all 0.5s; box-shadow: 0 0 10px grey;}
#ttanime figure img:hover{opacity: 0.2;}
#ttanime a{background-image: url(../img/svg/hover_play-100.jpg);background-repeat: no-repeat; width: 400px;}
#ttanime figcaption{margin: 0 0 0 3vw;}
#ttanime figcaption h2{color: #2b2b64; font-weight: 800; font-size: 2em; margin: 10px 0 10px 0;}
#ttanime figcaption p{font-weight: 300; font-size: 1.2em; margin-top: 10px;}

/* 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: 25vh 0 20vh 0;}
.blue-box p{color: white; font-weight: 100;}
.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; z-index: 9;}
    .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; z-index: 9;}
    
    #legosm h1{margin: 7vh 0 7vh 0;}
    #legosm iframe{height: 14.5em;}
    .prev, .next{margin: -30px -50% 0 17.5%;}
    #ttanime figure{flex-wrap: wrap;}
    #ttanime figcaption h2{font-size: 1.5em; text-align: center;}
    #ttanime figcaption p{font-size: 0.8em; line-height: 20px;}
    #ttanime h1{margin: 50px 0 70px 0;}
    #ttanime figure img:hover{opacity: 1;}
    #ttanime figcaption {padding: 0 20% 0 20%;}
    .blue-box{padding-top: 30vh;}
    .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;}
    
    #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;}
    
    #legosm h1{margin: 60px 0 50px 0;}
    .slideshow-container{max-width: 100%;}
    #legosm iframe{width: 100%; height: 32vh; margin-left: 0;}
    .next{right: 10em;}
    .prev, .next{margin: 15.5vh -220px 0 30px;}
    #ttanime figcaption {padding: 0}
    
    
     #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;}
    
    footer{height: 50px;}
    footer p{margin:0; font-size: 10px;}
    .blue-box p:nth-of-type(1){font-size: 1.1em;}
    .blue-box p:nth-of-type(2){padding: 0 5em;}
    
}

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