/* Media Queries */

/* Mobile */

@media (min-width: 320px) and (max-width: 766px) {
    /* Navigation */
    nav {
        display: flex;
        align-items: flex-end;
        flex-flow: row nowrap;
        width: 100%;
        height: 6rem;
        bottom: 0px;
        top: auto;
        z-index: 999;
    }

    nav ul {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
    }

    /* nav ul li .link-container {
        width: auto;
    } */

    /* Header and CTA Buttons */
    .jumbotron {
        height: 40rem;
        margin: 13px 0 30rem 3%;
    }

    .jumbotron .text h1 {
        font-size: 3rem;
    }
    .jumbotron .text span {
        font-size: 1.2rem;
    }

    .jumbotron .headers-cta {
        position: absolute;
        margin-top: 76rem;
    }
    .jumbotron .headers-cta .header-cta,
    .container-cta {
        width: 25rem;
    }
    main .insider-container .container-cta {
        height: 8rem;
        margin-bottom: 2rem;
    }

    .main-footer .description, .links {
        width: 100%;
    }

    main .button-form {
        height: 12rem !important;
    }
    
    
    /* Main page content */
    main .left-container {
        width: 100%;
    }
    main .right-container {
        width: 100%;
        height: 36.3rem;
        position: relative;
        right: 3.7%;
        margin: -6rem 0 5rem 0;
    }
    
    /* Footer */
    footer {
        margin: 0 5rem 9rem 9.3%;
    }
    
    footer .main-footer {
        margin: 0 0 2.5rem 0;
    }

    footer .main-footer .description, .links {
        width: 100%;
        margin: 0.8rem 0;
    }
    
    footer .main-footer .links {
        width: 100%;
    }
    footer .legal-footer a:first-child {
        display: block;
        margin-bottom: 0.4rem;
    }
    footer .legal-footer a {
        margin-right: 1rem;
    }
    
    /* END OF INDEX HTML */
    
    /* COLORS */
    
    .colors-container {
        margin: 7rem 0 56rem 3%;
    }
    
    .colors-container .color-definition {
        width: 100%;
    }

    /* FONTS */
    main .types-container .column {
        width: 100%;
        margin: 0 0 14rem 0;
    }
    main h3 {
        font-size: 2.2rem;
    }
    main section.examples .column-two {
        width: 90%;
        margin-bottom: 2rem;
    }
    main section.examples .column-one {
        width: 100%;
    }
    main section.outro-columns .columns-container .column-one, .column-two {
        width: 100%;
    }

    
    /* TEXT STYLES */
    main section.use-case {
        margin: 21rem 0 4rem 0;
    }
    
    /* Pages */
    #fonts-section, #text-styles-page, #buttons-page {
        padding: 7rem 4rem 1rem 4rem;
    }
    .colors-jumbotron, .fonts-jumbotron, .text-jumbotron, .buttons-jumbotron {
        margin: 12px 0 7px 3%;
        height: 38rem;
    }
    .colors-jumbotron h2, .fonts-jumbotron h2, .text-jumbotron h2, .buttons-jumbotron h2 {
        font-size: 3.5rem;
    }
    .colors-jumbotron p, .fonts-jumbotron p, .text-jumbotron p, .buttons-jumbotron p {
        font-size: 1rem;
        margin-top: 1rem;
    }
}


/* Tablet */

@media (min-width: 767px) and (max-width: 1023px) {
    /* Navigation */
    nav {
        display: flex;
        align-items: flex-end;
        flex-flow: row nowrap;
        width: 100%;
        height: 6rem;
        bottom: 0px;
        top: auto;
        z-index: 999;
    }
    
    nav ul {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-evenly;
    }
    
    nav ul li .link-container {
        width: auto;
    }
    .jumbotron {
        height: 56rem;
        margin: 13px 0 30rem 4%;
    }

    .jumbotron .text h1 {
        font-size: 3rem;
    }
    .jumbotron .text span {
        font-size: 1.2rem;
    }

    .jumbotron .headers-cta {
        position: absolute;
        margin-top: 76rem;
    }
    .jumbotron .headers-cta .header-cta,
    .container-cta {
        width: 25rem;
    }

    /* TEXT STYLES */
    main section.use-case {
        margin: 6rem 0 4rem 0;
    }

    /* COLORS PAGE */

    /* Colors header */
    .colors-jumbotron, .fonts-jumbotron {
        margin: 7px 0 7px 3%;
    }

    /* Colors boxes */
    .colors-container {
        margin: 7rem 0 7rem 3%;
    }


    /* FONTS */
    main section.font-types .types-container .column {
        width: 100%;
        margin: 1rem 5px 10rem 5px;
    }
    
    /* Footer */
    footer .main-footer .description, .links {
        width: 100%;
    }
    footer .main-footer .description {
        width: 100%;
    }
    footer .main-footer .links {
        width: 100%;
    }

    /* PAGES */
    #fonts-section, #text-styles-page {
        padding: 7rem 4rem 1rem 4rem;
    }
}


/* Laptop */

@media (min-width: 1024px) and (max-width: 1599px) {
    .jumbotron {
        height: 56rem;
    }
    footer .main-footer .description {
        width: 60%;
    }
    footer .main-footer .links {
        width: 40%;
    }

    /* FONTS */
    main section.font-types .types-container {
        margin-bottom: 8rem;
    }
    main section.font-types .types-container .column {
        width: 42%;
    }
}


/* Desktop */

@media (min-width: 1600px) {
    footer .main-footer .description {
        width: 60%;
    }
    footer .main-footer .links {
        width: 40%;
    }
    /* FONTS */
    main section.font-types .types-container {
        margin-bottom: 8rem;
    }
    main section.font-types .types-container .column {
        width: 42%;
    }
}