/* large tablet to all : 1024px - 1200px*/

@media only screen and (max-width: 1200px) {}

/* small to large tablet : 901px - 1023px */

@media only screen and (max-width: 1023px) {
    html, body {
        font-size: 18px;
        margin-top: 0px;
    }

    h3 {
        font-size: 140%;
        margin-bottom: 6px;
        height: 60px;
    }

    section {
        padding-right: 5%;
    }


}

/* small phone to small tablets : 661px - 900 */

@media only screen and (max-width: 900px) {
    html, body {
        font-size: 15px;
    }

    .sidenav ul li {
        font-size: 1.2rem;
    }
    
    section {
        padding-right: 2.5%;
    }

    .title, header {
        font-size: 1.2rem;
    }

    h1 {
        font-size: 120%;
    }
    h2 {
        font-size: 110%;
    }

    .row {
        flex-direction: column;
    }

    .card {
        width: 70%;
        margin: 10px auto;
    }

    aside .card {
        width: 100%;
    }

    .card li {
        padding-top: 0.3rem;
        line-height: 0.8rem;
    }
    .title {
        font-size: 120%;
    }
    .logo {
        font-size: 120%;
    }
    .main-nav {
        display: none;
    }
    .mobile-nav-icon {
        display: inline-block;
        border: 0;
        font-size: 100%;
    }
    .mobile-nav-icon:link, .mobile-nav-icon:visited {
        border: 0;
    }
    .mobile-nav-icon i {
        color: white;
    }
    .main-nav {
        float: left;
        margin-top: 35px;
    }
    .sticky .main-nav {
        float: left;
        margin-top: 5px;
    }
    .main-nav li {
        display: block;
    }
    .main-nav li a:link, .main-nav li a:link {
        display: block;
        border: 0;
        padding: 10px 0px;
    }
    .sticky .main-nav li a:link, .sticky .main-nav li a:link {
        display: block;
        border: 0;
        padding: 10px 0px;
    }
    .sticky .mobile-nav-icon i {
        color: black;
    }

}

/* small phones : 0 - 660 */

@media only screen and (max-width: 660px) {

    body {
        display: grid;
        grid-template-columns: [start] 1fr [end];
        grid-template-areas: "title" "nav" "body" "sidebar" "footer";
    }


    h1 {
        font-size: 110%;
        text-align: center;
        position: relative;
    }

    
    section:before { 
        content: ''; 
        display: block; 
        position: relative; 
        width: 0; 
        height: 3em; 
        margin-top: -3em;
    }
   

   header {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
    }

    section {
        padding-right: 0;
    }

    .title {
        display: none;
    }

    header nav ul {
        justify-content: space-around;
    }

    aside {
        grid-area: sidebar;
        /* background-color: #4CAF50; */
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    aside * {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    aside img {
        width: 65%;
        margin: 10px auto;
    }

    aside hr {
        width: 65%;
        margin: 10px auto;
    }

    #contact-header {
        display: block;
    }


}