/* Grid by Texy */

/* Grid container */
.container {
    width: 1350px;
    margin: auto;
    padding: 1rem;
}

/* Collomn grid */
.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: row dense;
    gap: 1rem;
    width: 100%;
}

.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }


/* Media Queries by Texy */


/* Media Query: Normal (max-width: 1350px) */
@media screen and (max-width: 1350px) {
    .container {
        width: 1000px;
    }

    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-5 { grid-column: span 5; }
    .col-md-6 { grid-column: span 6; }
    .col-md-7 { grid-column: span 7; }
    .col-md-8 { grid-column: span 8; }
    .col-md-9 { grid-column: span 9; }
    .col-md-10 { grid-column: span 10; }
    .col-md-11 { grid-column: span 11; }
    .col-md-12 { grid-column: span 12; }

	/* Here the style edit */

    /* Here is te text modification */
    h1 { font-size: 2.75rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1rem; } 
    h5 { font-size: 1rem; }  
    h6 { font-size: 0.75rem; }

    #countdown h2 { font-size: 2.25rem; }
    #countdown .timer { font-size: 5.25rem; }

    #mission .title { font-size: 2.25rem; }
    #mission .text { font-size: 1.25rem; }

    #memebers .title { font-size: 2.25rem; }
    #memebers .member-card h2 { font-size: 1.25rem; }
    #memebers .member-card h3 { font-size: 1rem; }  

    footer { font-size: 1.5rem; }
    #bottom-bar .bottom-bar-text { font-size: 1rem; }  
}


/* Media Query: Medium (700px - 1000px) */
@media screen and (max-width: 1000px) and (min-width: 701px) {
    .container {
        width: 700px;
    }

    .col-sm-1 { grid-column: span 1; }
    .col-sm-2 { grid-column: span 2; }
    .col-sm-3 { grid-column: span 3; }
    .col-sm-4 { grid-column: span 4; }
    .col-sm-5 { grid-column: span 5; }
    .col-sm-6 { grid-column: span 6; }
    .col-sm-7 { grid-column: span 7; }
    .col-sm-8 { grid-column: span 8; }
    .col-sm-9 { grid-column: span 9; }
    .col-sm-10 { grid-column: span 10; }
    .col-sm-11 { grid-column: span 11; }
    .col-sm-12 { grid-column: span 12; }

	/* Here the style edit */

    #memebers .member-card {
        width: 320px;
    }
    /* Here is te text modification */
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1rem; } 
    h5 { font-size: 1rem; } 
    h6 { font-size: 0.75rem; }

    #countdown h2 { font-size: 2rem; }
    #countdown .timer { font-size: 5rem; }

    #mission .title { font-size: 2rem; }
    #mission .text { font-size: 1rem; } 

    #memebers .title { font-size: 2rem; }
    #memebers .member-card h2 { font-size: 1.25rem; }
    #memebers .member-card h3 { font-size: 1rem; } 

    footer { font-size: 1.25rem; }
    #bottom-bar .bottom-bar-text { font-size: 1rem; } 

    #more-info .img-contact {
        display: none;
    }

}




/* Media Query: small (320px - 700px) */
@media screen and (max-width: 700px) and (min-width: 321px) {
    .container {
        width: 90%;
        margin: 0 auto;
    }

    .col-xs-1 { grid-column: span 1; }
    .col-xs-2 { grid-column: span 2; }
    .col-xs-3 { grid-column: span 3; }
    .col-xs-4 { grid-column: span 4; }
    .col-xs-5 { grid-column: span 5; }
    .col-xs-6 { grid-column: span 6; }
    .col-xs-7 { grid-column: span 7; }
    .col-xs-8 { grid-column: span 8; }
    .col-xs-9 { grid-column: span 9; }
    .col-xs-10 { grid-column: span 10; }
    .col-xs-11 { grid-column: span 11; }
    .col-xs-12 { grid-column: span 12; }

	/* Here the style edit */

    header .menu{
        display: none;
    }

    header .logo {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    header .btn-hbg {
        display: flex;
    }
    header.mobile-menu {
        display: flex;
    }



    #accessibility {
        display: none;
    }

    #hello-there {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    #memebers .member-card {
        width: 100%;
    }

   footer .container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    }

    footer .footer-left,
    footer .footer-right {
        align-items: center;
        text-align: center;
    }
    
    #more-info .img-contact {
        display: none;
    }


    /* Here is te text modification */
     
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1rem; } 
    h5 { font-size: 1rem; } 
    h6 { font-size: 0.75rem; }

    #countdown h2 { font-size: 1.75rem; }
    #countdown .timer { font-size: 4.75rem; }



    #mission .title { font-size: 1.75rem; }
    #mission .text { font-size: 1rem; } 

    #memebers .title { font-size: 1.75rem; }
    #memebers .member-card h2 { font-size: 1.25rem; }
    #memebers .member-card h3 { font-size: 1rem; } 

    footer { font-size: 1.25rem; }
    #bottom-bar .bottom-bar-text { font-size: 1rem; } 
}




/* Media Query: very small (0px - 320px) */
@media screen and (max-width: 320px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }

    [class^="col-"], [class*=" col-"] {
        grid-column: span 12 !important;
    }

	/* Here the style edit */

    header .menu {
        display: none;
    }

    header .logo {
        display: flex;
        justify-content: start;
        align-items: center;
    }

    header .btn-hbg {
        display: flex;
    }
    header.mobile-menu {
        display: flex;
    }

    #accessibility {
        display: none;
    }

    #hello-there {
        padding-top: 12.5px;
        padding-bottom: 12.5px;
    }

    #memebers .member-card {
        width: 100%;
   }

   footer .container {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    }

    footer .footer-left,
    footer .footer-right {
        align-items: center;
        text-align: center;
    }

    /* Here is te text modification */

    h1 { font-size: 2rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1rem; } 
    h4 { font-size: 1rem; } 
    h5 { font-size: 1rem; } 
    h6 { font-size: 0.75rem; }

    #countdown h2 { font-size: 1.5rem; }
    #countdown .timer { font-size: 4.5rem; }

    #mission .title { font-size: 1.5rem; }
    #mission .text { font-size: 1rem; } 

    #memebers .title { font-size: 1.5rem; }
    #memebers .member-card h2 { font-size: 1rem; } 
    #memebers .member-card h3 { font-size: 1rem; } 

    footer { font-size: 1rem; } 
    #bottom-bar .bottom-bar-text { font-size: 1rem; } 

    #more-info .img-contact {
        display: none;
    }
}