@media only screen and (max-width: 1165px) {
    /*
    * NAVIGATION MENU
    */
    header { padding: 0 25px }

    /*
    * CONTENT BLOCKS
    */
    .std_pad { max-width: 100%; margin: 0 auto }
    section { padding: 0 }
    section.padded { padding: 70px 25px }

    section#hero.default { background-size: 50% }
    section#hero .std_pad { padding: 0 25px }
    section#community .std_pad { padding: 0 25px }
    section#esg .std_pad { padding: 0 25px }

    section#join { padding: 60px 25px }

    /*
     * FOOTER
     */
    footer #links { padding: 50px 25px 40px 25px }
    footer #copyrights { padding: 20px 25px }
}

@media only screen and (max-width: 768px) {
    h1 { font-size: 1.8rem; margin: 15px 0 }
    h2 { font-size: 1.5rem }
    h3 { line-height: 1.7em; font-size: .9rem; letter-spacing: .008rem }
    h4 { line-height: 1.3em; font-size: 1.2rem }

    /*
     * GLOBAL COMPONENTS
     */
    a.btn { font-size: .9rem; letter-spacing: .007rem; padding: 15px 20px }
    i.tag { font-size: .75rem; line-height: 1.8em; padding: 0 12px }

    /*
     * FORM COMPONENTS
     */
    input, select, textarea { padding: 12px }
    label { font-size: .85rem }
    form .grid-sys [class*="col-"] + [class*="col-"] { margin-top: 0 }

    /*
     * NAVIGATION MENU
     */
    header { padding: 0 15px }
    header .nav-wrapper #logo { width: 7.5rem; height: 3.2rem }

    header .nav-wrapper #main-menu {
        position: absolute;
        top: calc(3.2rem + 1.7px); left: 0; right: 0;
        height: 0px;
        border-bottom: 1px solid rgba(0, 0, 0, .2);
        background: #FFF;
        float: unset;
        padding: 5px 15px;
        margin-left: 0;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }
    header .nav-wrapper #main-menu.active { height: calc(100vh - (3.2rem + 2px)); opacity: 1; visibility: visible }

    header .nav-wrapper #main-menu li {
        display: block;
        float: unset;
        opacity: 0;
        transform: translateY(-5px);
        -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    header .nav-wrapper #main-menu.active li {
        opacity: 1;
        transform: translateY(0);
        -webkit-transition-delay: .35s;
        -moz-transition-delay: .35s;
        -o-transition-delay: .35s;
        transition-delay: .35s;
    }

    header .nav-wrapper #main-menu li:hover::after { transition: all .3s ease-in-out }
    header .nav-wrapper #main-menu li + li { margin-left: 0 }
    header .nav-wrapper #main-menu li a { line-height: 2.8rem; font-size: .85rem }

    header .nav-wrapper #btn-menu { height: 3.2rem }
    header .nav-wrapper #btn-menu .btn { font-size: .8rem; padding: 14px }


    /*
     * NAVIGATION BUTTON
     */
    header .nav-wrapper #mobile-btn {
        position: relative;
        width: 2.7rem;
        height: 2.2rem;
        border-radius: 8px;
        border: 1px solid #262626;
        float: right;
        margin: .53rem 0 .53rem 10px;
    }
    header .nav-wrapper #mobile-btn span {
        display: block;
        position: absolute;
        left: 30%;
        height: 2px;
        width: 40%;
        background: #262626;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    
    header .nav-wrapper #mobile-btn span:nth-child(1) { top: 11px }
    header .nav-wrapper #mobile-btn span:nth-child(2),
    header .nav-wrapper #mobile-btn span:nth-child(3) { top: 17px }
    header .nav-wrapper #mobile-btn span:nth-child(4) { top: 23px }
    
    header .nav-wrapper #mobile-btn.active span:nth-child(1) { top: 18px; width: 0%; left: 50% }
    
    header .nav-wrapper #mobile-btn.active span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    header .nav-wrapper #mobile-btn.active span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    header .nav-wrapper #mobile-btn.active span:nth-child(4) { top: 18px; left: 50%; width: 0% }

    #welcome { padding-top: 30px }
    #welcome .std_pad { padding: 0 15px }
    #welcome .std_pad .inner { width: 100% }
    #welcome #banner { height: 400px }


    /*
     * CONTENT BLOCKS
     */
    section.padded { padding: 0 15px; margin-top: 80px }
    section.mobile-btm-opt { padding: 50px 15px; margin-top: 0 }

    section .project_head { width: 100%; margin-bottom: 30px }

    section .boxed { background-size: 90%; background-position: bottom left; padding: 0 35px 370px 35px }
    section .boxed.top-padded { margin-top: 80px; margin-bottom: 30px }

    section .card .card-content h4 { margin: 15px 0 }
    section .card img.icon { width: 40px; height: 40px }
    section .card img.icon ~ h4 { margin-top: 10px }

    section#hero { padding: 70px 0 100px 0; margin-top: 3.2rem }
    section#hero.default { background-size: 60%; padding: 130px 0 40px 0 }
    section#hero.colored { background-size: 60%; padding: 150px 0 80px 0 }
    section#hero .std_pad { padding: 0 15px }
    section#hero .inner { width: 100% }
    section#hero .subtext { width: calc(100% - 30px); font-size: .75rem; line-height: 1.3em }

    section#intro .flex-sys { display: block; flex-direction: unset; align-items: unset; -webkit-transform: scaleY(-1); transform: scaleY(-1); margin: 40px 0 }
    section#intro .flex-sys::after { content:''; display: table; clear: both }
    section#intro .flex-sys .child1,
    section#intro .flex-sys .child2 { width: 100%; padding-right: 0; -webkit-transform: scaleY(-1); transform: scaleY(-1) }
    section#intro .flex-sys .child1 { margin-bottom: 30px }
    section#intro .flex-sys .child2 img { width: 80% }

    section#community { width: 100%; padding: 70px 0 }
    section#community .std_pad { padding: 0 15px }

    section#esg { width: 100%; padding: 70px 0 }
    section#esg .std_pad { padding: 0 15px }

    section#explainer { width: 100%; padding: 70px 0 }
    section#explainer .std_pad { padding: 0 15px }

    #banner { width: 100%; padding: 70px 25% 70px 5% }
    #banner h1 { font-size: 24pt }
    #banner p { font-size: 13pt }

    #content { padding-top: 60px; padding-bottom: 60px }

    section#join { background-size: 100%; background-position: center 7%; padding: 100px 15px 60px 15px }
    section#join .box_wrap { width: 100% }


    /*
     * FOOTER
     */
    footer { width: 100% }
    footer #links { padding: 50px 15px 40px 15px }
    footer #copyrights { padding: 20px 15px }
    footer #copyrights .wrapper .left,
    footer #copyrights .wrapper .right { float: left }
    footer #copyrights .wrapper .left span { line-height: 1.4rem; font-size: .8rem }
    footer #copyrights .wrapper .right li { line-height: 1.4rem; font-size: .8rem }
}