/* =====================================
   RESPONSIVE DESIGN
===================================== */


/* TABLETS */

@media(max-width:900px){


header{

    padding:15px 25px;

}


.logo{

    font-size:1.1rem;

}


nav a{

    margin-left:10px;

    font-size:.9rem;

}



.hero h1{

    font-size:2.6rem;

}



.section h2{

    font-size:2.1rem;

}



}



/* MOBILE */


@media(max-width:768px){



header{

    position:sticky;

}



.menu{

    display:block;

}



nav{

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:white;

    display:none;

    flex-direction:column;

    padding:20px;

    box-shadow:0 10px 20px rgba(0,0,0,.1);

}



nav.active{

    display:flex;

}



nav a{

    margin:12px 0;

}



.hero{

    min-height:80vh;

}



.hero h1{

    font-size:2rem;

}



.hero p{

    font-size:1rem;

}



.section{

    padding:50px 18px;

}



.section h2{

    font-size:1.8rem;

}



/* Schedule mobile */


table{

    font-size:.85rem;

}



th,td{

    padding:10px;

}



/* Donation */


.donation-box{

    padding:25px 15px;

}



/* Gallery */


.gallery-item img{

    height:220px;

}



/* WhatsApp */


.whatsapp{

    width:55px;

    height:55px;

    right:15px;

    bottom:15px;

}



}