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

body a { color: inherit; text-decoration: none; }
body a:hover { 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: 50px 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: 2% 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-join a:hover { 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 { width: 47%; float: left; text-align: center; }
.participants .left img { width: 90%; max-width: 220px; }
.participants .right { width: 47%; float: right; text-align: center; }
.participants .comment_1 { 
    padding: 40px 0; 
    font-size: 20px; 
    font-weight: 600;
    color: #09a0ce;
}
.participants .right img { width: 90%; max-width: 220px; }
.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,
.btn-primary.active,
.btn-primary:active,
.open > .dropdown-toggle.btn-primary,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:hover,
.focus.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 { background-image: none; background: #b7d33c; padding: 50px 0 0 0; } */
.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; }
}