/*MOBILE*/
/*16px-22px*/
@media screen and (max-width: 800px) {

    #desktop-br br {
        display: none;
    }

    body p {
        font-size: 16px;
    }

    .nav-desktop {
        display: none;
    }

    .nav-phone {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        background-color: goldenrod;
    }

    nav li {
        display: flex;
        width: 100%;
        height: auto;
        padding: 3px;
        text-align: center;
        list-style-type: none;
        font-weight: 600;
        cursor: pointer;
    }

    nav li:hover {
        border-radius: 0;
        background-color: whitesmoke;
    }

    nav li a {
        width: 100%;
        height: auto;
        color: black;
    }
    
    .nav-phone li:hover {
        height: auto;
        background-color: whitesmoke;
    }
    
    .collapsible-phone {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        cursor: pointer;
        border: none;
        justify-content: center;
        font-size: 35px;
        text-decoration: none;
        color: black;
        background-color: goldenrod;
      }

    #phone.content {
        width: 100%;
        height: auto;
        max-height: 0;
        margin: auto;
        display: flex;
        flex-direction: column;
        transition: max-height 0.5s ease-out;
        overflow: hidden;
      }

    #phone.content li {
        width: 100%;
        height: auto;
        display: block;
    }

    .dropdown-phone {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
    }

    .dropdown-phone a {
        width: 100%;
        height: auto;
        display: block;
        padding: 1vw;
        font-size: 20px;
        font-family: Courgette;
        text-decoration: none;
    }

    .dropdown-content-phone {
        width: 100%;
        height: auto;
        text-align: center;
        display: none;
    }
    
    .dropdown-content-phone a {
        width: 100%;
        height: auto;
        font-size: 12px;
        font-family: Quicksand;
        display: none;
    }

    .dropdown-phone:hover .dropdown-content-phone {
        display: block;
        width: 100%;
        height: auto;
    }

    .main img {
        margin: auto;
        width: 100%;
        height: auto;
    }

    .whitespace .whitespace-content h3 {
        font-size: 22px;
    }

    .whitespace-content {
        display: relative;
        text-align: center;
        width: 85%;
        padding: 10vw 1vw 10vw 1vw;    
    }

    .who-we-are-container-box {
        width: 35%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 3vw;
        margin-right: 3vw;
        margin-bottom: 5vw;
        padding-top: 7vw;
        padding-bottom: 7vw;
        line-height: 1.25;
        background-color: tan;
    }

    .who-we-are .who-we-are-title h6 {
        font-size: 22px;
        padding-top: 10vw;
    }
  
    .who-we-are .who-we-are-container-box h2 {
        font-size: 18px;
    }

    .learn h6 {
        font-size: 18px;
    }

    .services-container .services-content {
        margin-bottom: 7vw;
        padding-bottom: 0;
    }

     .services-container #academic.services-content {
        margin-bottom: 0;
    }

    .services-content {
        width: 25em;
        height: auto;
        margin: .5vw;
        display: flex;
        padding-bottom: 7vw;
        flex-direction: column;
        align-items: center;
        background-color: whitesmoke;
    }

    .services .services-title h2 {
        font-size: 22px;
        padding-top: 10vw;
    }

    .services-title h2 {
        font-size: 25px;
        padding: 0;
    }

    .services-content h3 {
        font-size: 22px;
    }

    .FAQ .whitespace .whitespace-content h4 {
        font-size: 22px;
    }

    .FAQ h4 {   
        font-size: 25px;
    }

    #faq .collapsible {
        font-size: 18px;
      }
      
    .foot-content {
        padding-top: 7vw;
    }
    
    .foot-container {
        width: 33%;
        margin: 1vw 1vw 1vw 1vw;
        text-align: center;
    }

    .foot-content .foot-container h6 {
        font-size: 16px;
    }

    .foot-content .foot-container a {
        font-size: 12px;
    }

    .foot-content .foot-container p {
        font-size: 12px;
    }
    
    #contact-desktop {
        display: none;
    }

    #contact-phone {
        display: block;
        width: 100%;
        height: auto;
        padding: 7vw;
        margin: 0;
        background-color: tan;
    }

    #contact-phone.foot-container h6 a {
        font-size: 22px;
        padding: 10px;
    }

    .foot-contact a {
        width: 100%;
        height: auto;
        color: white;
        text-decoration: none;
        font-size: 35px;
    }

    .foot-bottom p {
        font-size: 12px;
    }

    #meet #meet-col-33-phone.meet-col-33 {
        display: block;
    }

    #meet #meet-col-66-desktop {
        display: none;
    }

    #meet #meet-col-66-phone {
        display: block;
    }

    #meet .collapsible {
        font-size: 12px;
    }
    
    #meet .meet-title h6 {
        font-size: 25px;
    }

    #meet .about-me p {
        font-size: 16px;
    }

    #meet .about-me h5 {
        font-size: 25px;
    }

    #meet .meet-container {
        max-width: 100%;
        height: auto;
        position: relative;
        display: block;
        padding: 0 8vw 4vw 8vw;
        justify-content: center;
    }

    #meet .meet-col-33 {
        display: block;
        width: 100%;
        height: auto;
    }
    
    #meet .meet-col-66 {
        width: 100%;
        height: auto;
        background-color: white;
        padding: 4vw;
        display: block;
        align-items: center;
    }



    .whitespace-content h3 {
        margin: 0;
        font-size: 20px;
    }

    .who-we-are-container {
        width: 80%;
        height: auto;
        margin: auto;
        display: block;
        
        justify-content: center;
    }
    
    .who-we-are-container-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10vw auto;
        line-height: 1.25;
        background-color: tan;
    }

    .who-we-are-container-box h2 {
        margin: .1vw 0 .1vw 0;
        padding: 0 1vw 0 1vw;
        font-size: 20px;
    }

    .services-title h2 {
        margin: auto;
        padding: 2vw 0 0 0;
        font-size: 20px;
    }

    .services-content h3 {
        font-size: 18px;
    }

    .services-quad-title {
        width: 100%;
        height: 25vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .services-quad-title h3 {
        font-size: 20px;
        margin: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .FAQ h4 {
        width: fit-content;
        height: auto;
        margin: 0 auto;  
        font-size: 20px;
    }

    .foot-container h6 {
        font-size: 14px;
        margin: 0 0 2vw 0;
    }

    .foot-container a {
        font-size: 12px;
    }

    .foot-contact a {
        width: 100%;
        height: auto;
        color: white;
        text-decoration: none;
        font-size: 12px;
    }

    /*ABOUT.HTML*/

    #meet #meet-danielle.meet-title {
        padding: 10vw;
    }

    #meet #meet-carson.meet-title {
        padding: 10vw;
    }

    .main-textbox {
        color: white;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        font-size: 22px;
    }

    #meet-col-33-desktop {
        display: none;
    }

    #meet-col-33-phone.meet-col-33 {
        width: 100%;
        height: 120vw;
    }

    #meet .meet-col-66 h5 {
        display: flex;
        font-size: 22px;
        text-shadow: -.5px 0 black, 0 .5px black, .5px 0 black, 0 -.5px black;
        margin: 10vw auto 7vw auto;
        justify-content: center;
        text-align: center;
    }

    #meet .meet-col-66 p {
        text-align: center;
        line-height: 1.75;
        font-size: 16px;
    }

    #collapse-phone.collapsible {
        font-size: 14px;
    }

    #collapse-content-phone.content li {
        font-size: 14px;
    }

    #about-me-phone.about-me h5 {
        font-size: 22px;
        text-align: center;
    }

    #about-me-phone.about-me p {
        font-size: 16px;
        text-align: center;
    }



    /*FAQ.HTML*/

    #faq .collapsible {
        position: relative;
        display: flex;
        margin: 7vw auto 0 auto;
        justify-content: space-between;
        background-color: lightslategrey;
        color: white;
        cursor: pointer;
        padding: 1.75vw;
        width: 95%;
        border: none;
        text-align: left;
        font-size: 18px;
        font-family: Quicksand;
        font-weight: bold;
      }

      #faq .content {
        display: flex;
        width: 95%;
        margin: auto;
        text-align: left;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
        background-color: lightslategrey;
        color: white;
      }

      #faq .content p {
        font-family: Quicksand;
        font-size: 16px;
        padding: 0 1vw;
    }
      

    .lets-do-it h4 {
        width: fit-content;
        height: auto;
        margin: 0 auto;  
        padding: 7vw;
        font-size: 22px;
    }

    .lets-do-it a  {
        color: white;
        text-shadow: -.5px 0 black, 0 .5px black, .5px 0 black, 0 -.5px black;
    }

    .icon_container {
        display: block;
        width: 100%;
    } 

    .construction img {
        width: 80%;
        height: auto;
    }

    .email_icon {
        width: auto;
        padding: 20px 0;
    } 

    .phone_icon {
        width: auto;
        padding: 20px 0;
    }

}