@media screen and (max-width: 768px) {
    #topper {
        display: none;
    }

    .tagline h3{
        font-size: 16px;
        color: #353535;
    }

    /* HERO */
    #hero{
        padding: 50px 0px;
    }
    #hero h1{
        font-size: 34px;
    }
    #hero p{
        font-size: 16px;
        margin: 16px;
    }
    /* END */

    /* DESIGN */
    #design{
        display: block;
    }
    #design .d-content{
        display: flex;
        flex-direction: column;
        margin: auto;
        margin-top: 30px;
        text-align: center;
    }

    #design .image , .cd-text{
        width: 100%;
        align-items: center;
        font-size: 20px;
    }
    /* END */


    /* ABOUT */
    #about{
        display: block;
    }
    #about .a-content{
        display: flex;
        flex-direction: column-reverse;
        margin: auto;
        margin-top: 30px;
        text-align: center;
    }

    #about .image , .ca-text{
        width: 100%;
        align-items: center;
        font-size: 20px;
    }
    /* END */

    /* CONTACT */
    .contact-item{
        padding: 0%;
        margin-bottom: 30px;
    }
    .contact-item .image{
        display: none;
    }

    .contact-item .formz{
        width: 80%;
    }
    /* END */

    /* Footer */
    footer{
        padding: 20px;
    }
    footer .foot-top ul{
        font-size: 14px;
        font-weight: 550;
    }
    
    footer .foot-mid i{
        font-size: 24px;
    }
    footer .copyright img{
        width: 40%;
    }

    footer .foot-bot a{
        font-size: 11px;
        margin: 10px;
    }
}

/* ####################################################### BREAK POINT ############################################################# */

@media screen and (max-width:450px) {
        /* Top */
        #topper{
            display: none;
        }
        /* End */

        /* HERO */
        #hero{
            padding: 100px 0px;
        }
        /* END */

        /* DESIGN */

        #design h1{
            font-size: 26px;
        }
        #design .d-content img{
            width: 100%;
        }
        #design .d-content .cd-text{
            font-size: 16px;
        }
        /* END */

        /*  ABOUT */
        #about h1{
            font-size: 26px;
        }
        #about p{
            font-size: 16px;
            text-align: justify;
        }
        #about .image img{
            width: 100%;
        }
        /* END */

        /* HISTORY */
        #history .history-item{
            width: 90%;
        }
        /* END */

        /* CONTACT */
        .contact-item{
            margin-bottom: 0;
        }
        .contact-item .formz{
            width: 100%;
            border-radius: 0;
        }
        /* END */

        /* Footer */
        footer .foot-top ul{
            display: none;
        }

        .foot-mid{
            padding: 10px;
        }

        footer .foot-bot{
            flex-direction: column;
            text-align: center;
        }
        /* End */
}