/* ==========================================================
   LAIDBACK OLD SIX
   RESPONSIVE.CSS
   Version 3.0
========================================================== */

/* ==========================================================
   DESKTOP (1200px)
========================================================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:78px;

}

.hero h2{

    font-size:34px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.gallery{

    grid-template-columns:repeat(2,1fr);

}

}

/* ==========================================================
   TABLET (992px)
========================================================== */

@media (max-width:992px){

.navbar{

    padding:0 25px;

    height:80px;

}

.logo img{

    height:60px;

}

.hero{

    background-attachment:scroll;

}

.hero-logo{

    width:180px;

}

.hero h1{

    font-size:64px;

}

.hero h2{

    font-size:28px;

}

.hero p{

    font-size:20px;

}

.container{

    padding:70px 0;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.gallery{

    grid-template-columns:repeat(2,1fr);

}

#countdown{

    gap:20px;

}

.time-box{

    width:150px;

}

}

/* ==========================================================
   MOBIEL MENU
========================================================== */

@media (max-width:900px){

.hamburger{

    display:flex;

    position:fixed;

    right:25px;

    top:22px;

    z-index:10001;

}

.navbar ul{

    position:fixed;

    top:0;

    right:-100%;

    width:320px;

    height:100%;

    background:#050505;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:28px;

    transition:.4s;

    box-shadow:-5px 0 25px rgba(0,0,0,.6);

}

.navbar ul.show{

    right:0;

}

.navbar li{

    width:100%;

    text-align:center;

}

.navbar a{

    font-size:22px;

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.menu-overlay.show{

    opacity:1;

    visibility:visible;

}

}

/* ==========================================================
   TELEFOON
========================================================== */

@media (max-width:768px){

.hero{

    height:90vh;

}

.hero-logo{

    width:150px;

}

.hero h1{

    font-size:48px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.button{

    width:240px;

    text-align:center;

}

.cards{

    grid-template-columns:1fr;

}

.gallery{

    grid-template-columns:1fr;

}

.card img{

    height:260px;

}

.footer-menu{

    flex-direction:column;

    gap:15px;

}

.socialbuttons{

    flex-direction:column;

    align-items:center;

}

#countdown{

    flex-direction:column;

    align-items:center;

}

.time-box{

    width:220px;

}

}

/* ==========================================================
   KLEINE TELEFOONS
========================================================== */

@media (max-width:480px){

body{

    font-size:16px;

}

.navbar{

    height:75px;

    padding:0 18px;

}

.logo img{

    height:50px;

}

.hero{

    height:80vh;

}

.hero-logo{

    width:120px;

}

.hero h1{

    font-size:38px;

}

.hero h2{

    font-size:18px;

}

.hero p{

    font-size:16px;

}

h2{

    font-size:34px;

}

h3{

    font-size:24px;

}

.button{

    width:200px;

    padding:15px;

    font-size:16px;

}

.container{

    width:92%;

    padding:55px 0;

}

.card img{

    height:220px;

}

.footer img{

    width:110px;

}

.footer{

    padding:50px 20px;

}

#topButton{

    width:50px;

    height:50px;

    right:15px;

    bottom:15px;

}

}

/* ==========================================================
   EXTRA GROTE SCHERMEN
========================================================== */

@media (min-width:1600px){

.container{

    max-width:1450px;

}

.hero-logo{

    width:300px;

}

.hero h1{

    font-size:120px;

}

.hero h2{

    font-size:42px;

}

.hero p{

    font-size:30px;

}

}

/* ==========================================================
   LANDSCAPE MOBIEL
========================================================== */

@media (max-height:550px){

.hero{

    height:100vh;

}

.hero-logo{

    width:110px;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:20px;

}

.hero p{

    font-size:16px;

}

.scroll-down{

    display:none;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

.navbar,
.hero-buttons,
.social,
footer,
#topButton{

    display:none;

}

body{

    background:white;

    color:black;

}

.container{

    width:100%;

    padding:0;

}

}

/* ==========================================================
   EINDE RESPONSIVE.CSS
========================================================== */