/*------------------------ Mobile Styles -----------------------*/
@media only screen and (max-width: 1007px) and (min-width: 1px) {
    
    /*MENU BAR--------------------------------------------------------*/
        .menu {
            grid-area: menu_section;
            height: 90px;
            width: 100%;
            max-width: 100%;
            position: fixed;
            z-index: 100;
            top: 0;
            background-color: #fff;
            -webkit-transition: top 0.3s ease-in-out;
            -moz-transition: top 0.3s ease-in-out;
            -o-transition: top 0.3s ease-in-out;
            transition: top 0.3s ease-in-out;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-areas: 
                "logo" 
                "nav";
            padding-left: 0;
            padding-right: 0;
            grid-row-gap: 10px;
    
          box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
          -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
          -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2);
        /*  border-bottom: 1px solid rgba(0,0,0,0.2);*/
        }
    
        .logo2 {
            grid-area: logo;
            padding-left: 0%;
            padding-top: 10px;
            margin-left: auto;
            margin-right: auto;
            align-self: center;    
        }
    
        .QLogo {
            height: 40px;
        }    
    
        ._profile{
            margin-top: 10px;
        }
    
        .account{
            display: none;
        }
    
        
    /*NAV BAR---------------------------------------------------------*/
    .navicons {
        grid-area: nav;
        display: grid;
        grid-template-areas:
            "about","products","media","team","contact";
        width: 100%;
    }
    
    .clickableBoxes {
        width: 100%;
        min-width: 50px;
        height: 100%;
        min-height: 30px;
        box-shadow: none;
        transition: height 0.5s;
        transition: box-shadow 5s;
        -webkit-transition: height 0.5s;
        -moz-transition: height 0.5s;
        display: grid;
    }
    .clickableBoxes:hover {
      height: 100%;
       /*height: 105%;*/
       box-shadow: none;
    }
        
    /*FOOTER----------------------------------------------------------*/
    .footerCard{
    	  /*grid-area: footer_section;*/
        padding-bottom: 5%;
    }

    .footerSection{
        display: grid;
        grid-template-areas: 
        "privacy" 
        "terms"
        "FAQ"
        "copyright";
        min-height: 50px;
        grid-row-gap: 15%;
        padding-top: 10px;
        padding-bottom: 40px;
    }
    
    
    /*Tablet Mode-----------------------------------------------------*/
    @media only screen and (min-width: 671px) and (max-width: 1007px) {
    .clickableBoxes:hover {
      height: 100%;
      box-shadow:5px 5px 10px rgba(255, 255, 255, 0.8);
      -moz-box-shadow:5px 5px 10px rgba(255, 255, 255, 0.8);
      -webkit-box-shadow:5px 5px 10px rgba(255, 255, 255, 0.8);
    }        
    }
}