/* TABLET VIEW */
@media only screen and (max-width:768px) {

    .gallery-mobile-stack{
        display:none;
    
    }

    .gallery-frame{

        height:500px;
        width:100%;
    
    }

    .about-me-column{
        margin-top: 450px;
    
    }
    .header-background-dark{

        background-image: url(Background/Header\ Tablet\ Dark.svg);

    }

    .faq-button{

        height: 80px;
        padding-left:0px;
        padding-right: 0px;
        padding-bottom: 10px;
        
    }

    .faq-button:hover {

        height:80px;
        padding-left:0px;
        padding-right: 0px;
        padding-bottom: 10px;
    
    }
    


    .navigation {
        gap:15px;
    
    }

    .nav_button a {
        font-size: 14px;
    
    }
    
    .gallery-box{

        display:flex;
    }

    #gallery-tablet-display{
        display:flex;
    }

    .gallery-center{
        background-color: #F7F4BA;
    }

    .gallery-center-dark{
        background-color: #272F4E;
    }


    #gallery{

        display:flex;
    }

    h2 {
        font-family: "lulo-one", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 32px;
        color: #F52602;
        line-height: 125%;
        margin:0px;
    }
    h3 {
        font-family: "lulo-one", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #000000;
        margin-top:20px;
        margin-bottom:0px;
    }

    .footer {
        height: 430px;

    }

    .mainn_nav {
        max-height:200px;

    }

    .gallery-top{

        height:100%;
    }
    
    .two-column-mobile-contact{

        flex-flow:column;
    
    }

    .header-background{

        background-repeat: no-repeat;
        width: 100%;
        height: 60vh;
        background-size: cover;
        background-position: center;
    
    }
    
    .about-container{

        margin-top:0px;
    }
}

/* MOBILE VIEW */
@media only screen and (max-width: 390px) {

    .gallery-mobile-stack{
        display:block;
        margin-top:40px;
    
    }

    .column{

        width:50px;


    }

    .gallery-navbar{

        display:none;
    }

    .three-column{

        margin-top: 30px;


    }

    .gallery-box {

        margin-top:0px;
        margin-bottom:0px;
        margin-left:0px;
        margin-right:0px;
        }

    .gallery-frame{

        height:220px;
        width:100%;
    
    }

    .faq-button{

        margin-top: 10px;
        margin-bottom: 10px;
        
    }

    .faq-button:hover{

        margin-top: 10px;
        margin-bottom: 10px;
        
    }

    .mobile-faq{

        display:flex;
        flex-flow: column;
        align-items: center;
    
    }

    .tablet-faq{

        display:none;
    }

    .header-background{

        background-image: url(Background/Mobile\ Header\ final.svg);
        width: 100%;
        height: 90vh;
        background-size: cover;
        background-position: center;
    
    }

    .header-background-dark{

        background-image: url(Background/Mobile\ Header\ Dark.svg);
    
    }
  
    .tablet-header {

        display: block;
    }
    
    .mobile-header{
    
        display:block;
        background-image: url(Background/Mobile\ Header\ final.svg);
        width: auto;
        height: 100%;

    }

    
    .navigation {
        display:none;
        }

     .mobile-menu {
        display:block;
        }


     .mobile-menu-popout {

            display:block;
        }

    .mainn_nav {
        height: 60vh;
        
    }
    
    .nav_button a {

        justify-content: left;
    
    }

    .two-column-mobile {
        display:block;
    
      }

      h2 {
        font-size: 30px;
        line-height: 120%;
        margin:0px;
    }


    #about{

        margin-top:165px;
        
    }

    .persona-box{
        margin-top:0px;
        max-width: 234px;
        width:200px;
        height:100%;
    
    
    }

    .persona-answer {

        height:auto;    
    
    }

    h3 {
        line-height:140%;
        font-size: 20px;
        color: #000000;
    }



    #skills{

        display:none;
    }


    #mobile-skills{

        display:flex;
    }

    #mobile_about {

        display:block;
    }
    #about {

        display:none;
    }
    #mobile{

        display:none;
    }

    .gallery-focus-image{


        width:250px;
        height:100%;
    }

    h5 {
        font-size: 10px;
 
        }

    span {

        font-size: 10px;

    }


    #gallery-mobile-display{

        display:flex;
    }
    #gallery-tablet-display{


        display:none;
        
    }

    .gallery-center{
        background-color: #F7F4BA;
    }

    .gallery-center-dark{
        background-color: #272F4E;
    }

    .gallery-summary-tablet{

        width:200px;
        margin:0 auto;
        display:block;
        font-size: 10px;
    }

    h3 {

        font-size: 16px;
    }


    #contact {

        height:450px;
    }

    .two-column-mobile-contact{

        flex-flow:column;
    
    }




}