/*   M O B I L E   */
@media (max-width: 900px ) {
    .videoHeader video{
        width:  350px;
        height: 350px;
    }
    .section-a .container {
        grid-gap: 0rem;
        justify-content: space-between;
    }  
}

/* NAVBAR */
@media (max-width: 850px ){
    label.logo{
        font-size: 30px;
        padding-left: 50px;
    }
    nav ul li a{ font-size: 16px; }

    .checkbtn{ display: block; }
    nav ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: var(--lightPrimaryAlpha);
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .2s;
    }
    nav ul{ position: absolute }
    nav ul li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav ul li a{ 
        color: var(--navbar-hover-color);
        font-size: 20px;
    }
    nav a:hover, nav a.active{
        background: none;
        color: black;
    }
    #check:checked ~ ul{ left: 0; }
}


/* GENERAL */
@media (max-width: 750px ) {

    /*.navbar .container { grid-gap: 0.5rem; }*/
    .section-a .container {
        padding: 0;
        grid-template-columns: 1fr;
        text-align: center;
    }  
    .section-a .container div:first-child { order: 2 }
  
    .section-a .container div:nth-child(2) { order: -1 }
  
    .section-a img {
      width: 80%;
      margin: auto;
    }
  
    .section-b{ height: 1000px }
  
    .section-c .gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .section-c .gallery a:first-child {
      grid-row: 1/1;
      grid-column: 1/1;
    }
  
    .section-c .gallery a:nth-child(2) {
      grid-column: 2/4;
      grid-row: 2/2;
    }
  
    .section-c .gallery a:last-child { display: none }
  
    .section-footer { padding: 2rem 0 }
    .section-footer .container {
      grid-template-columns: 1fr;
      text-align: center;
    }
    /*.section-footer div:nth-child(2), .section-footer div:nth-child(3){ display: none }*/
}

/* NAVBAR reduced + smaller images*/
@media (max-width: 510px) {   
    /*.mt-1{ font-size: 0.4em }*/
    label.logo{ font-size: 25px; padding-left: 1em; }
    .videoHeader video{
        width:  270px;
        height: 270px;
    }
    h2.text-5{ font-size: 3rem; }
}

@media (max-width: 400px) {   
    .videoHeader video{
        width:  240px;
        height: 240px;
    }
}