body {
    font-family: 'Khula', sans-serif;
    font-weight: 400;
    color: #3e7592;
    font-size: 16px;
}

body a { 
    color: inherit; 
    text-decoration: none; 
}
    
a.anchor{ 
    display: block; 
    position: relative; 
    top: -90px; 
}

.title {
    font-size: 34px;
    color: #09a0ce;
}

header {
    position: fixed;
    background-color: #ffffff;
    padding: 20px 10% 0;
    width: 100%;
    z-index: 100; 
}
.header_logo { 
    width: 40%; 
    float: left; 
}
header .dropdown{ 
    display: none; 
}
.header_menu_container { 
    float: right; 
    text-align: right; 
    font-weight: 500; 
    font-size: 18px;
    white-space: nowrap;
}

.menu_anchors { 
    padding-top: 5px; 
}

.menu_anchors a {
    padding: 0 5px;
}

.intro { 
    width: 100%;
    display: inline-block;
    padding: 40px 10%;
    background: url('https://image.my.newtopia.com/lib/fe9113727c60037c75/m/1/1d654496-52d5-48c2-8c12-7d1a0064f79b.png?b=1518533692000') #b7d33c bottom repeat-x; 
    color: #2f586e!important;
    margin-top: 70px;
}

.intro .title { 
    color: inherit; 
}

.intro .left { 
    width: 55%; 
    float: left; 
}

.intro .right { 
    width: 45%; 
    float: left; 
}

.intro .intro-start { 
    font-size: 34px; 
    font-weight: 600; 
    padding: 3% 0; 
    width: 100%; 
}

.intro .verbiage { 
    font-size: 24px; 
    padding: 2% 0; 
    width: 100%; 
}

.intro .intro-eligible { 
    font-size: 16px; 
    padding: 20px 0; 
    width: 100%; 
}
.intro .intro-join { 
    font-size: 16px; 
    font-weight: 500; 
    padding: 8% 0 0 0; 
    width: 100%; 
}
.intro-join img { 
    padding-right: 5px; 
}

.intro-join a { 
    color: inherit; 
    text-decoration: underline; 
}

.intro a.intro-cta { 
    background-color: #3e7592;
    padding: 2px 30px;
    margin-bottom: 5px;
    height: 40px;
    line-height: 40px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 18px;
    border: none;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.brand { 
    padding: 50px 10%; 
    text-align: center; 
}

.brand .verbiage { 
    padding: 20px 0 0 0; font-weight: 400; font-size: 20px; 
}

.mbl { 
    display: none; 
}

.solutions { 
    display: inline-block; 
    padding: 45px 10%; 
}

.story_wrapper { 
    padding-top: 20px; 
}

.story_wrapper .left { 
    width: 45%; 
    float: left; 
}

.story_wrapper .left img { 
    width: 90%; 
    max-width: 420px; 
}
.story_wrapper .right { 
    width: 55%; 
    float: left; 
}

.participants {  
    display: inline-block;
    background: #ffffff;
    padding: 45px 10%; 
}

.participants .title {
    color: inherit;
    text-align: center;
}

.participants .wrapper { 
    padding-top: 20px; 
}

.participants .left, 
.participants .right { 
    width: 47%; 
    float: left; 
    text-align: center; 
}

.participants .left img,
.participants .right img { 
    width: 90%; 
    max-width: 220px; 
}

.participants .comment_1 { 
    padding: 40px 0; 
    font-size: 20px; 
    font-weight: 600;
    color: #09a0ce;
}

.participants .video-container { 
    width: 100%;
    display: inline-block;
    padding-top: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
}

.video-container img { 
    width: 35px; 
    height: auto; 
}

.works { 
    background-color: #f4f4f2;
    padding: 45px 10%; 
}

.works .sub_title {
    font-size: 24px;
    font-weight: 500;
    color: #2db3e7;
    display: block; 
}

.works .wrapper {
    margin: 0 auto;
    width: 90%;
    display: table;
    text-align: center;
}

.section { 
    width: 30%; 
    padding: 40px 20px; 
    display: inline-table; 
    text-align: left; 
}

.section img { 
    padding-bottom: 20px; 
    width: 100%; 
    height: auto; 
    max-width: 135px; 
}

.section .header { 
    color: #09a0ce; 
    font-size: 20px; 
    font-weight: 600;
    padding-bottom: 10px; 
}

.technology { 
    display: inline-block;
    background: #abe0f5;
    color: #2f586e;
    padding: 45px 10%; 
}

.technology .title {
    color: inherit;
}

.technology .verbiage {
    padding-top: 30px;
    font-size: 24px;
    color: inherit;
}

.technology .wrapper { 
    padding-top: 20px; 
}

.technology .left { 
    width: 47%; 
    float: left; 
    padding-top: 5%; 
}

.technology .right { 
    width: 47%; 
    float: right; 
}

.contacts { 
    text-align: center; 
    padding: 80px 10% 40px; 
}

.contacts a { 
    color: #09a0ce 
}

.contacts a:hover { 
    color: #09a0ce 
}

.contacts .paragraph {
    font-size: 28px;
}

hr { 
    margin: 30px 20%; 
}

footer {
    padding: 40px 10% 0;
    text-align: center;
    font-size: 14px;
    padding-bottom: 50px !important; 
}

@media (max-width: 778px) {

    header { position: relative; }

    header .dropdown { display: block; }
    .btn { 
        padding: 22px 30px; 
    }

    .btn,
    .btn-primary,
    .open > .dropdown-toggle.btn-primary,
    .btn-primary:focus { 
        background-image: url("https://image.my.newtopia.com/lib/fe9113727c60037c75/m/1/16faadf9-546f-452d-a61f-d5b91c2798d8.png?b=1518540804000");
        background-color: #ffffff;
        border-color: #ffffff;
        background-repeat: no-repeat;
        background-size: 42px;
        background-position: center center;
    }

    header .dropdown-menu { 
        right: 0; 
        left: -100px; 
    }

    header .dropdown-menu > li > a { 
        font-size: 16px; 
        font-weight: 400; 
        text-align: center; 
        padding: 10px 0; 
        color: #3e7592; 
    }

    .intro { 
        margin-top: 0
    }

    .intro .title img { 
        padding: 0 10%; 
    }

    .intro .left .mbl img { 
        padding: 0; 
        width: 200px; 
    }

    .menu_social, .menu_anchors, .intro .right { 
        display: none; 
    }

    .intro, .title, .sub_title, .intro-start, .verbiage, .intro-eligible, .intro-join { 
        text-align: center !important; 
        width: 100% !important; 
        height: auto; 
    }

    .title, .intro-start, .verbiage, .intro-eligible, .intro-join { 
        padding-left: 5% !important; 
        padding-right: 5% !important; 
    }

    .intro-join { 
        padding-bottom: 50px !important; 
    }

    .intro-join img { 
        padding: 5px !important; 
    }

    .social_container { 
        width: 50%; 
        float: left; 
    }

    .social_container img{ 
        width: 32px !important; 
    }

    .sc_1 { 
        text-align: right; 
    }

    .sc_2 { 
        text-align: left; 
    }

    .technology .left { 
        padding: 0 0 10% 0; 
    }

    .mbl { 
        display: block; 
    }

    .mbl img { 
        width: 100%; 
    }

    .left, .right { 
        float: none !important; 
        width: 100% !important; 
        text-align: center !important; 
    }

    .left img { 
        padding: 0 5% 40px; 
        width: 100%; 
    }

    .sc_1 .left img { 
        padding: 0; 
        width: 22px; 
    }

    .solutions { 
        padding: 40px 0 !important; 
    }

    .participants img { 
        width: 100% !important; 
        max-width: 495px !important; 
    }

    .others img { 
        width: 100%; 
        max-width: 33px !important; 
    }

    .right .comment_1 { 
        padding-top: 40px !important; 
    }

    .comment_1 { 
        padding-top: 0px !important; 
    }

    .comment_2 { 
        padding-bottom: 40px; 
    }

    .works { 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
    }

    .section { 
        width: 50%; text-align: center; 
    }

}

@media (max-width: 578px) {
    a.anchor { 
        display: block; 
        position: relative; 
        top: -120px; 
    }

    .intro-main { 
        font-size: 33px !important; 
    }

    .intro-sub, .intro-start { 
        font-size: 21px !important; 
    }

    .title, .c1 { 
        font-size: 26px !important; 
        line-height: 30px !important; 
    }

    .sub_title, .verbiage, .comment_1, .comment_2, .header, .blurb, .c2, .c3, .c4 { 
        font-size: 16px !important; 
    }

    footer { 
        font-size: 12px !important; 
    }

    .section { 
        width: 100%; text-align: center; 
    }
}

@media (max-width: 330px) {
    .header_logo { 
        width: 65%; 
    }

    .header_logo img { 
        width: 100%; 
    }

    .header_menu_container { 
        width: 30%; 
    }

    .dropdown-menu{ 
        left: -100px; 
    }

    .btn{ background-size: 36px; padding: 18px; }
}