@font-face {
    font-family: 'Montserrat-Regular';
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf')  format('truetype'), url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'),  url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf')  format('truetype'), url('fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/Montserrat-Medium.woff') format('woff'), url('fonts/Montserrat-Medium.ttf')  format('truetype'), url('fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}


* {margin: 0; padding: 0}
body {font-family: 'Montserrat', sans-serif;}
.clear {clear: both}
a.fullWidth {display: block; width: 100%; height: 100%; color: #fff; text-decoration: none;}
iframe {border: 0}
body.lock {overflow: hidden}

/**************/
/*** Mobile ***/
nav {padding: 10px 15px;}
.navbar {margin-bottom: 0}
#logo {text-indent: 100%; height: 53px; white-space: nowrap; overflow: hidden; background: url('/images/injaz-lebanon-logo.png?v=1') 0 0 no-repeat; background-size: contain; width: 200px; margin: 0; padding: 0;}
a.fullBlock, a.fullBlock:visited {display: block; width: 100%; height: 100%; color: #fff; text-decoration: none;}
h1, h2 {text-transform: uppercase;}
h2.smaller {font-size: 1.2em; margin-top: 10px;}
h2.medium {font-size: 1.5em; margin-top: 0;}
#main .body {text-align: center; margin-top: 25px; margin-bottom: 25px;}
#main .body h1 {color: #285F74; margin-bottom: 25px;}
#main .mainBanner {height: 250px;}
.onDesktop {display: none;}
.btn {border: 0; border-radius: 18px; background-color: #72ae36; background: url('/images/btn-bg.png') center center no-repeat; padding: 5px 25px}
.btn:hover {background-color: #285F74; background: #285F74 url('/images/traingle-corner.png') -4px center no-repeat;}
.btn:hover a {text-decoration: none;}
.highlighted_text {color: #00A0AF;}

/******  Home Page  ******/
#main.home #myCarousel .item {background-size: cover; background-position: center center; height: 200px}
#main.home #myCarousel .item img {visibility: hidden;}
#main.home .carousel-caption {right: 0; left: 0; padding-bottom: 20px; }
#main.home .carousel-caption h2 {color: #285F74; background-color: #fff; text-transform: uppercase; font-size: 34px; font-family: "Montserrat-Bold"; letter-spacing: normal}
#main.home .carousel-caption h2 a {color: #285F74; text-decoration:none; text-shadow: none!important;}
#main.home .box, #main.programs .box {margin: 10px 0; padding: 25px;}
#main.home .aboutBox {text-align: center; margin-top: 50px}
#main.home h2 {color: #00A0AF; font-size: 34px; font-weight: bold; letter-spacing: 22px}
/*#main.home .aboutBox h2 {color: #00A0AF; font-size: 34px; font-weight: bold; letter-spacing: 22px}*/
#main.home .aboutBox p.intro {font-size: 1.3em; margin: 35px 0; color: #285F74; font-weight: bold; line-height: 50px}
#main.home .carousel_container {background: white; position: absolute; bottom: 0; width: 80%; left: 10%; min-height: 90px; overflow: hidden}

#main.home .homeBox, #main.programs .homeBox {padding: 0; text-align: center; color: #fff; cursor: pointer; position: relative; z-index: 1;  height: 250px; overflow: hidden;}
#main.home .entrepBox, #main.programs .entrepBox {background: url("/images/home-box-entro.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .text-bg, #main.programs .text-bg {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #285F74; opacity: 0; z-index: 0;}
#main.home .subText, #main.programs .subText {position: absolute; bottom: 25px; left: 5%; right: 5%;}
/*#main.home h3, #main.programs h3 {position: absolute; right: 0; left: 0;}*/

#main.home .workBox, #main.programs .workBox {background: url("/images/home-box-work.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .workBox .text-bg, #main.programs .workBox .text-bg {background-color: #72ae36;}

#main.home .finaBox, #main.programs .finaBox {background: url("/images/home-box-fina.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .finaBox .text-bg, #main.programs .finaBox .text-bg {background-color: #db8732;}

#main .quoteBox {background: #e6e6e6 url('/images/home-quote-bg-mobile.png') 5% 5% no-repeat; color: #72ae36; text-align: center; padding: 25px 0;}
#main.home .quoteBox {padding: 25px 0;}
#main .quoteBox a {color: #285F74;}
#main .quoteBox .quoteBoxWrapper {overflow: hidden; float: left; width: 80%; visibility: hidden}
#main .quoteBox .cltBtn {float: left; width: 10%; cursor: pointer; visibility: hidden}
#main .quoteBox .cltL {color: #999}
#main .quoteBox .quoteBoxList {width: 1000px; list-style: none;}
#main .quoteBox .quoteBoxList p.testimonial {font-size: 1.2em; padding-top: 30px;}
#main .quoteBox .quoteBoxList li {float: left; width: 21%; margin: 0 2%;}

#main.home .textContainer {position: absolute; top: 80%; left: 0; right: 0; background-color: #285F74; height: 250px; z-index: 0; padding: 0 15px;}
#main.home .textContainer h3 {margin-top: 11px;}

#main.home .donateBox {background: url("/images/home-box-donate.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .volunteerBox {background: url("/images/home-box-volunteer.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .volunteerBox .textContainer {background-color: #db8732;}
#main.home .partnerBox {background: url("/images/home-box-partner.jpg") 0 0 no-repeat; background-size: cover;}
#main.home .partnerBox .textContainer {background-color: #72ae36;}

.flip-container {perspective: 1000;}
.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}
.flip-container, .front, .back {width: 100%; height: 100px; font-size: 0.8em; line-height: 20px;}
.flip-container .back a, .flip-container .back a:visited {color: #fff; width: 100px; display: block; margin: 0 auto; text-decoration: none;}
.flipper { transition: 0.6s; transform-style: preserve-3d; position: relative;}
.front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0;}
.front {z-index: 2; transform: rotateY(0deg);}
.back {transform: rotateY(180deg);}

#main.home .boardBox {background-color: #72ae36; color: #fff; text-align: center;}
#main.home .boardBox ul {list-style: none;}
#main.home .boardBox ul li {float: left; width: 30%; height: 150px; margin: 1.5%; cursor: pointer;}
#main.home .boardBox ul li .flipper .front {background: url('/images/board/board-member-defualt.png') center center no-repeat; background-size: contain;}
#main.home .boardBox ul li .flipper .back {background: url('/images/board/board-member-defualt-hover.png') center center no-repeat; background-size: contain; color: #fff;}

#main .sponsorsBox {color: #285F74; text-align: center;}
#main .sponsorsBox .sponsorsCat {list-style: none; margin: 0;}
#main .sponsorsBox .sponsorsList {border-top: 1px solid #285F74; list-style: none;}
#main .sponsorsBox .sponsorsList li {float: left; width: 31.33%; margin: 1%}
#main .sponsorsBox .sponsorsList li img {width: 100%;}
#main .sponsorsBox .sponsorsList li.seeMore {background-color: #e6e6e6; color: #285F74; position: relative;}
#main .sponsorsBox .sponsorsList li.seeMore a {color: #285F74;}
#main .sponsorsBox .sponsorsList li.seeMore p {position: absolute; top: 40%; left: 0; right: 0;}

/******* Dynamic Project page *******/
.dynamicProjectPage .content.project_lang_ar, .dynamicProjectPage .content.project_lang_ar * {direction: rtl; text-align: right;}
.dynamicProjectPage .content.project_lang_en, .dynamicProjectPage .content.project_lang_en * {direction: ltr; text-align: left;}
.dynamicProjectPage .content h2 {margin: 75px auto 40px auto; color: #22404D; text-align: center;}
.dynamicProjectPage .content .component_entry_container h2 {min-height: 66px; height: 66px; overflow: hidden;}
.dynamicProjectPage .content * {text-align: left;}
.dynamicProjectPage .content img {object-fit: contain;}
.dynamicProjectPage .content ul, .dynamicProjectPage .content ol {list-style-position: inside;}
.dynamicProjectPage .content .details h3 {text-align: center; color: #22404D; font-size: 1.2em; font-weight: bold;}
.dynamicProjectPage .content .details ul li { margin: 10px 0;}
.dynamicProjectPage .content .component_single_entry {padding: 20px;}
.dynamicProjectPage .btn-register {display: block; max-width: 150px; margin: 25px auto;}
.dynamicProjectPage .component_description, .dynamicProjectPage .component_notes {max-width: 800px; margin: 0 auto;}
.dynamicProjectPage .content .details {display: grid;}
.dynamicProjectPage .content .details.col2 {grid-template-columns: 50% 50%;}
.dynamicProjectPage .content .details.col2.col_margins {grid-template-columns: 49% 49%; grid-column-gap: 2%;}
.dynamicProjectPage .content .details .component_entry_container {margin-bottom: 20px; overflow: hidden;}
.dynamicProjectPage .content .details.col3 {grid-template-columns: 33.3% 33.3% 33.3%;}
.dynamicProjectPage .content .details.col3.col_margins {grid-template-columns: 32% 32% 32%; grid-column-gap: 2%;}
.dynamicProjectPage .content .details.col4 {grid-template-columns: 25% 25% 25% 25%;}
.dynamicProjectPage .content .details.col4.col_margins {grid-template-columns: 24% 24% 24% 24%;; grid-column-gap: 1.3%;}

.FAQ h3 {text-align: left; cursor: pointer; margin: 0 0 5px 0; font-size: 20px;} /* color: #008752;  */
.FAQ p {margin: 0 0 10px;}
.FAQ .odd, .FAQ .even {background: #8cc75180; padding: 7px;}
.FAQ .even {background: #8cc7514f;}
/******* End Dynamic Project page *******/

/******* New HP ********/
.container-70 {width: 70%; margin: 0 10%; clear: both}
.container-80 {width: 80%; margin: 0 10%; clear: both}
.container-100 {width: 100%; clear: both}
#main.home .hp_about .hp_about_circles {text-align: center}
#main.home .hp_about .hp_about_circles img {width: 223px; margin-right: 30px}
#main.home .hp_about .about_subpage_row {text-align: center; margin: 70px 0 120px}

.hp_our_programs {text-align: center; margin: 70px 0 120px; font-size: 0}
.hp_our_programs a {display: block; text-decoration: none}
.hp_our_programs a:hover {display: block; text-decoration: none}
.hp_our_programs h2 {margin-bottom: 50px}
.hp_our_programs > div {width: 33%; text-align: center; display: inline-block; vertical-align: top}
.hp_our_programs > div p {font-size: 34px; font-weight: bold; color: #E3E24F; text-transform: uppercase; margin-top: 30px}
.hp_our_programs .entrepreneurship_img {}
.hp_our_programs .financialliteracy_img {}
.hp_our_programs .workreadiness_img {}

#main.home .testimonial_blc {background: url('../images/about-bg.png?1') no-repeat center center; background-size: cover; height: 395px; color: white; text-align: center}
#main.home .testimonial_blc h3 {font-size: 25px; line-height: 40px; font-weight: bold}
#main.home .testimonial_blc p {font-size: 23px; font-weight: bold; margin-top: 45px}
#main.home .testimonial_blc > div {padding: 60px 0}

#main.home .lms_projects {font-size: 0; padding: 0; margin-top: 100px; margin-bottom: 100px}
#main.home .lms_projects::after {clear: both; display: block; content: ''}
#main.home .lms_projects a {display: block}
#main.home .lms_projects > div {width: 47%; height: 26vw; text-align: center; position: relative}
#main.home .lms_projects > div:first-child {float: left; background: url('../images/lms_img.png') no-repeat center center; background-size: cover}
#main.home .lms_projects > div:last-child {float: right; background: url('../images/projects_img.png') no-repeat center center; background-size: cover}
#main.home .lms_projects > div p {color: white; font-size: 50px; font-weight: bold}
#main.home .lms_projects > div a.success {}
#main.home .lms_projects .lms_container p {position: absolute; left: 0; right: 0; top: calc(50% - 107px); line-height: 70px}
#main.home .lms_projects .projects_container p {position: absolute; left: 0; right: 0; top: calc(50% - 35px);}
#main.home .lms_projects .btn-success {position: absolute; left: 0; right: 0; bottom: 30px; width: 130px; margin: auto}

#main.home .get_involved {text-align: center}
#main.home .get_involved a {display: block; text-decoration: none}
#main.home .get_involved a:hover {text-decoration: none}
#main.home .get_involved > div {font-size: 0; margin: 100px auto}
#main.home .get_involved > div > div {width: 33%; display: inline-block}
#main.home .get_involved > div > div p {font-size: 34px; font-weight: bold; color: #E3E24F; margin-top: 40px}

#main.home .success_stories {margin-top: 120px; margin-bottom: 70px;}
#main.home .success_stories > h2 {text-align: center}

#main.home .newsletter_subscribe {background: url('../images/green_bg.png') no-repeat center center; background-size: cover; height: 395px}
#main.home .newsletter_subscribe h3 {font-size: 25px; font-weight: bold; color: white}
#main.home .newsletter_subscribe .newsletter_subscribe_inner .newsletter_subscribe_desktop {display: inline-block}
#main.home .newsletter_subscribe .newsletter_subscribe_inner .newsletter_subscribe_mobile {display: none}
#main.home .newsletter_subscribe .newsletter_subscribe_inner {padding-top: 80px}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form {padding-top: 30px}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form input {background: transparent; border: 1px solid white; padding: 15px 20px; border-radius: 27px; margin-right: 15px; font-size: 21px; color: white; outline: none}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form input:first-child {width: 34%}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(2) {width: 27%}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(3) {width: 27%}
#main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(4) {background: url('../images/arrow_right.png') no-repeat center center; background-size: 35px; background-color: white; width: 63px; height: 63px; border-radius: 50%}
::-webkit-input-placeholder{color: white; font-size: 19px}
:-moz-placeholder{color: white; font-size: 19px}
::-moz-placeholder{color: white; font-size: 19px}
:-ms-input-placeholder{color: white; font-size: 19px}
#main.home .carousel-caption { bottom: 0; padding: 0; background: white; width: 70%; left: 20%; position: relative; text-align: left; color: #285F74; font-size: 34px; font-family: "Montserrat-Bold"; padding-left: 50px}
#main.home .carousel-caption::before {content: ''; width: 1px; height: 90%; background: grey; position: absolute; left: 9px;}
#main.home .carousel-caption h2 { width: 80% }
#main.home .carousel_caption_container { position: absolute; bottom: calc(50% - 45px); left: 0; margin-left: 0; width: 20%; height: 90px; background: white }
/*#main.home .carousel_caption_container { position: absolute; bottom: calc(50% - 45px); left: 0; margin-left: 40px; width: 12%; height: 90px; max-width: 120px;  background: white }*/
/*#main.home .carousel_caption_container::after {content: ''; width: 1px; height: 60px; background: #A1A1A2; position: absolute; right: -60%; top: 20px;}*/
#main.home .carousel_caption_container .carousel-control { background: none; z-index: 2 }
#main.home .carousel_caption_container .carousel-control.left { left: 8% }
#main.home .carousel_caption_container .carousel-control.right { right: 12% }
#main.home .carousel_readmore {position: absolute; right: 0; bottom: 0; background: url('../images/carousel_readmore_bg.png') no-repeat center center; background-size: cover; height: 100%; padding: 35px; color: white; width: 110px}
#main.home .carousel_readmore span {position: absolute; top: calc(50% - 20px)}
#main.home .carousel_caption_container .right.carousel-control img {visibility: visible!important; opacity: 1; bottom: calc(50% - 14.5px); position: absolute;}
#main.home .carousel_caption_container .left.carousel-control img {visibility: visible!important; opacity: 1; bottom: calc(50% - 14.5px); position: absolute;}
#main.home #myCarousel .item {height: 600px}
#main.home .carousel-inner {height: 600px}
#main.home figure.carousel_slider {height: 550px; width: 100%; }
#main.home .carousel_caption_container > p {font-family: Montserrat-Regular}

#innumbers {}
#innumbers .gero_green_bg {background: url('../images/green_bg.png') no-repeat center center; background-size: cover; height: 222px; text-align: center}
#innumbers .gero_green_bg h1 {color: white; font-size: 50px; font-weight: bold; padding: 56px 0 0 0; margin: 0}
#innumbers .gero_green_bg h1 span {color: #00A0AF}
#innumbers .innumbers_row {text-align: left}
#innumbers .innumbers_row::after {content: ''; clear: both; display: block}
#innumbers .innumbers_row > div {display: inline-block; vertical-align: top}
#innumbers .innumbers_row > div p {text-align: left; font-size: 18px; font-weight: bold; letter-spacing: 3px}
#innumbers .innumbers_row_one {text-align: center; margin: 100px auto}
#innumbers .innumbers_row_one .students_count_img {float: left}
#innumbers .innumbers_row_one .gender_img {}
#innumbers .innumbers_row_one .region_img {float: right}
#innumbers .innumbers_row_two {margin: 150px auto}
#innumbers .innumbers_row_two .age_img {float: left}
#innumbers .innumbers_row_two .institution_img {float: right}
#innumbers .innumbers_row_three {margin: 100px auto}
#innumbers .innumbers_row_three .volunteers_img {float: left}
#innumbers .innumbers_row_three .volunteer_img {margin-left: 20%}

.menu_navbar {background: white; border: none; box-shadow: none; min-height: 110px}
.menu_navbar > .container {width: 80%; margin: 30px auto}
.menu_navbar .navbar-nav > li > a {color: #1D1C1C; font-size: 14px; font-family: "Montserrat-Medium"; padding: 5px 30px; position: relative}
.menu_navbar .navbar-nav > li.active::after, .menu_navbar .navbar-nav > li:hover::after {content: ''; margin-top: 40px; height: 13px; width: 100%; background: #285F74; position: absolute}
.menu_navbar .navbar-nav > li.active a {background: transparent; color: #1D1C1C; box-shadow: none; background-image: none}
nav .navbar-right .dropdown-menu {right: auto; left: 0; background-color: white; border: 0; box-shadow: none; -webkit-box-shadow: none; margin-top: 50px}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {margin-top: 10px!important;}

.homepage_menu_mobile, .mobile {display: none}
.desktop {display: block}
.homepage_menu_desktop {position: relative; height: 120px; z-index: 10; font-size: 0; width: 100%; margin: 0}
.homepage_menu_desktop.homepage {position: absolute; height: 120px; z-index: 10; font-size: 0; width: 80%; margin: auto 10%}
.homepage_menu_desktop.homepage.isSubPage {position: relative}
.homepage_menu_desktop .logo_container {display: inline-block; width: 22%; text-align: center; padding: 34px 0; background: white; height: 120px}
.homepage_menu_desktop .menu_items {display: inline-block; background: #285F74; width: 78%; height: 100%; vertical-align: top; text-align: center; position: relative; font-size: 0}
.homepage_menu_desktop .menu_items > li {display: inline-block; width: 15.6%; vertical-align: top }
.homepage_menu_desktop .menu_items > li.long_menu_title {width: 26.6%}
.homepage_menu_desktop .menu_items > li.small_menu_title {width: 10.6%}
.homepage_menu_desktop .menu_items > li.blog_menu_item a {color:#00A0AF}
.homepage_menu_desktop .menu_items > li.active::after {content: ''; width: 100%; height: 13px; background: white; display: block; position: relative; bottom: 13px;}
.homepage_menu_desktop .menu_items > li:hover::after {content: ''; width: 100%; height: 13px; background: white; display: block; position: relative; bottom: 13px;}
.homepage_menu_desktop .menu_items > li.blog_menu_item.active::after {background:#00A0AF}
.homepage_menu_desktop .menu_items > li.blog_menu_item:hover::after {background:#00A0AF}
.homepage_menu_desktop .menu_items > li a {font-size: 16px; color: white; font-family: Montserrat-Bold; text-decoration: none; display: block; padding: 49px 0; transition: 0.2s}
.homepage_menu_desktop .menu_items > li a:hover {text-decoration: none}
.homepage_menu_desktop .menu_items > li span {display: block}
.homepage_menu_desktop .menu_items > li .dropdown_menu {display: none; position: absolute; top: 120px; left: 0; width: 100%; height: auto; transition: 0.1s; background: white; text-align: left; padding: 40px}
.homepage_menu_desktop .menu_items > li:hover .dropdown_menu {display: block}
.homepage_menu_desktop .menu_items > li:hover .dropdown_menu li a {font-size: 16px; font-family: Montserrat-Medium; color: #285F74; padding: 5px 0}
.homepage_menu_desktop .menu_items > li .dropdown_menu .dropdown_menu_side {display: inline-block; width: 50%; vertical-align: top}
.homepage_menu_desktop .menu_items > li .dropdown_menu .dropdown_menu_side .highlight a {color: #00A0AF}

.article_top_container {text-align: left; font-size: 0}
.article_top_container figure.article_image.desktop {display: inline-block;}
.article_top_container figure.article_image.mobile {display: none;}
.article_top_container figure.article_image {width: 50%; height: 35vw; display: inline-block; vertical-align: top}
.article_top_container .article_title_info {display: inline-block; width: 45%; margin-left: 5%; vertical-align: top}
.article_top_container .article_title_info h1 {margin: 40px 0 20px 0; font-size: 34px; font-family: Montserrat-Bold; line-height: 50px; margin-bottom: 20px!important;}
.article_top_container .article_title_info .article_datetime {font-size: 18px; color: #A1A1A2; margin: 30px 0; font-family: Montserrat; font-weight: lighter}
.article_top_container .article_title_info .summary {font-size: 18px; color: #545555}
.article_top_container .article_title_info .tagsDiv {font-size: 16px}

.articlesList {list-style: none; text-align: left; height: 100%!important;}
.articlesList h2 {color: #8cc751; font-size: 20px; color: #1c9448; text-transform: capitalize;}
.articlesList p {color: #000;}
.articlesList figure img {width: 100%;}
.articlesList li {margin-bottom: 15px;}
.articlesList p {font-size: 0.8em}
.articlesList h3 {color: #008752; font-size: 1.1em}
.articlesList figure img {width: 100%; height: 100%; object-fit: cover!important;}

#lang {border: 2px solid #008752; max-width: 100px; padding: 5px; margin: 0 auto;}
#lang a {color: #008752; font-weight: bold;}
#main .body.container {position: relative;}
.full-height {height: 100%;}

@media (min-width:830px) {
    .articlesList li {width: 24%; float: left; margin-right: 1%; position: relative; padding-bottom: 25px;}
    .articlesList li .btn {position: absolute; bottom: 0}
    #lang {position: absolute; right: 0; top: 25px;}
}

/******  Success Stories  ******/
#main.success-stories .mainBanner {background: url('/images/success_stories_bg.png') center center no-repeat; background-size: cover; height: 350px; position: relative}
#main.success-stories .mainBanner .success_stories_top_title {position: absolute; padding: 0; top: calc(50% - 53px)}
#main.success-stories .storiesList {list-style: none; position: relative; text-align: left}
#main.success-stories .storiesList h3 {margin: 0; font-size: 1em; color: #285F74; text-transform: uppercase;}
#main.success-stories .storiesList li {width: 29%; display: inline-block; vertical-align: top; margin-right: 4%; margin-bottom: 60px; border-bottom: 1px solid #285F74; padding-bottom: 40px;}
#main.success-stories .storiesList li figure {display: block; width: 100%; height: 20vw;}
#main.success-stories .storiesList li h2 {color: #285F74; font-size: 1.5em; font-family: Montserrat-Bold; line-height: 30px;}
#main.success-stories .storiesList li a.btn-success {margin-top: 10px}
#main.success-stories .story img {margin: 25px 0; max-width: 90%;}
#main.success-stories .success_stories_top_title {font-size: 34px; font-family: Montserrat-Bold; color: #00A0AF; letter-spacing: 24px}
#main.success-stories .success_stories_top_title span {color: white; font-size: 50px; letter-spacing: 1px; display: inline-block; margin-top: 15px}
#main.storyPage .mainBanner {background: url('/images/banners/success-story-banner.jpg?v=2') center center no-repeat; height: 75px}


/******  Blog  ******/
#main.blog .mainBanner {background: url('/images/blogs_banner.png') center center no-repeat; background-size: cover; height: 395px; position: relative}
#main.blog.articlePage .mainBanner {height: 155px; background-position: top}
#main.blog .mainBanner .blog_top_title {font-size: 34px; font-family: Montserrat-Bold; color: #00A0AF; letter-spacing: 24px; position: absolute; top: calc(50% - 35px); padding: 0}
#main.blog .mainBanner .blog_top_title span {color: white; font-size: 50px; letter-spacing: 1px; display: inline-block; margin-top: 15px}
#main.blog .articlesList {list-style: none;}
#main.blog .articlesList h2 {color: #285F74; font-size: 1.5em; font-family: Montserrat-Bold; line-height: 30px}
#main.blog .articlesList p, .storiesList p {color: #000;}
#main.blog .articlesList .articleImage img {width: 100%;}
#main.blog .articlesList .articleItem {margin-bottom: 40px; width: 29%; display: inline-block; vertical-align: top; margin-right: 4%; text-align: left; border-bottom: 1px solid #285F74; padding-bottom: 40px;}
#main.blog .articlesList .articleItem > a.fullWidth {display: block; width: 100%; height: 20vw;}
#main.blog .articlesList .articleItem > a.fullWidth .articleImage {display: block; width: 100%; height: 20vw;}
#main.blog .articlesList .articleItem > a.btn-success {margin-top: 10px}
#main.blog .tagLink {color: #3C9E57; text-decoration: none; font-size: 14px}
#main.articlePage .content p {color: #545555; font-size: 21px}
#main.articlePage .content * {max-width: 100%}

#main.articlePage .content {text-align: left}
#main.articlePage p img {max-width: 100%;}
#main.articlePage .tagsDiv {margin: 25px 0;}

/**************/


@media(max-width: 1420px) {
    .homepage_menu_desktop .menu_items > li a {font-size: 14px}
    .homepage_menu_desktop .logo_container img {height: 40px}
    .homepage_menu_desktop .menu_items > li:hover::after {bottom: 11px}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input:first-child {width: 33%}
}

@media(max-width: 1365px) {
    #innumbers .innumbers_row_one .region_img img {height: 163px!important;}
    #innumbers .innumbers_row_one .gender_img img {height: 182px!important;}
    #innumbers .innumbers_row_one .students_count_img {height: 161px!important;}
    #innumbers .innumbers_row_two .institution_img img {height: 115px!important;}
    #innumbers .innumbers_row_two .age_img img {height: 85px!important;}
}

@media(max-width: 1290px) {
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(2) {width: 26%}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(3) {width: 26%}
    .hp_our_programs > div p {font-size: 30px}

    #innumbers .innumbers_row_one .region_img img {height: 153px!important;}
    #innumbers .innumbers_row_one .gender_img img {height: 172px!important;}
    #innumbers .innumbers_row_one .students_count_img img {height: 151px!important;}
    #innumbers .innumbers_row_two .institution_img img {height: 105px!important;}
    #innumbers .innumbers_row_two .age_img img {height: 75px!important;}
}

@media(max-width: 1170px) {
    #main.home .testimonial_blc h3 {font-size: 30px}

    #innumbers .innumbers_row_one .region_img img {height: 153px!important;}
    #innumbers .innumbers_row_one .gender_img img {height: 152px!important;}
    #innumbers .innumbers_row_one .students_count_img img {height: 131px!important;}
    #innumbers .innumbers_row_two .institution_img img {height: 95px!important;}
    #innumbers .innumbers_row_two .age_img img {height: 65px!important;}
    #innumbers .innumbers_row > div p {font-size: 15px}
}

@media(max-width: 1130px) {
    .homepage_menu_desktop .menu_items > li a {font-size: 12px}
    .homepage_menu_desktop .logo_container img {height: 35px}
    .homepage_menu_desktop .menu_items > li:hover::after {bottom: 8px}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(2) {width: 25%}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input:nth-child(3) {width: 25%}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input {font-size: 18px}
    ::-webkit-input-placeholder{font-size: 18px}
    :-moz-placeholder{font-size: 18px}
    ::-moz-placeholder{font-size: 18px}
    :-ms-input-placeholder{font-size: 18px}
    #main.home .lms_projects .lms_container p, #main.home .lms_projects .projects_container p {font-size: 40px; line-height: 50px}
    .hp_our_programs > div p {font-size: 27px}
}

@media(max-width: 1000px) {
    .highlighted_text {color: #00A0AF;}
    #main {padding-top: 70px}
    .homepage_menu_mobile, .mobile {display: block}
    .homepage_menu_desktop, .desktop {display: none}
    .homepage_menu_mobile {position: absolute; width: 100%; z-index: 10; background: white; height: 70px; overflow: hidden;}
    .homepage_menu_mobile .logo_container {height: 100%}
    .homepage_menu_mobile .logo_container a {display: block}
    .homepage_menu_mobile .logo_container img {height: 28.5px!important; margin: 21px 25px;}
    .homepage_menu_mobile .mobile_menu_toggle {background: #285F74; position: absolute; right: 0; top: 0; height: 100%; width: 70px; text-align: center}
    .homepage_menu_mobile .mobile_menu_toggle img {padding: 28px 0}
    .homepage_menu_mobile .mobile_menu_toggle.menu_close {display: none}
    .homepage_menu_mobile .menu_items {position: fixed; overflow: auto; width: 100%; height: 100%; max-width: 100%; left: -100%; transition: 0.3s; background: #285F74; padding: 30px;}
    .homepage_menu_mobile .menu_items .menu_items_parent {position: absolute; overflow: auto; padding-bottom: 100px;}
    .homepage_menu_mobile .menu_items.active {left: 0; padding-top: 0}
    .homepage_menu_mobile .menu_items li {list-style-type: none}
    .homepage_menu_mobile .menu_items li a {color: white; display: block}
    .homepage_menu_mobile .menu_items .main_item {font-size: 14px; font-family: Montserrat-Bold; margin: 25px auto 7px auto}
    .homepage_menu_mobile .menu_items .sub_item {font-size: 14px; font-family: Montserrat-Regular; line-height: 28px}
    .homepage_menu_mobile .menu_items .highlight a {color: #00A0AF; font-family: Montserrat-Bold}
    .homepage_menu_mobile .menu_items .highlight_gold a {color: #00A0AF; font-family: Montserrat-Bold}
    #main.home .carousel-inner {overflow: visible; height: auto}
    #main.home .carousel-inner::after {content: ''; display: block; clear: both}
    #main.home .carousel_container {top: -26px; height: 100%; left: 10%; width: 80%; overflow: visible; background: transparent; position: relative; margin: 0; padding: 0}
    .carousel-control {opacity: 1}
    .carousel-control.left {left: 10px; top: -20px}
    .carousel-control.right {right: 25px; top: -20px}
    #main.home #myCarousel .item {height: auto; background-image: none!important;}
    #main.home #myCarousel .item img {height: 30px}
    #main.home .top_container {font-size: 0}
    #main.home .top_container::after {content: ''; display: block; clear: both}
    #main.home .carousel_caption_container {position: relative; float: left; font-size: 16px; bottom: 0; left: auto; margin: auto; width: 40%; height: 70px; max-width: 50%}
    #main.home .carousel_caption_container > p {position: relative!important; top: 15px!important; color: gray; font-size: 14px; margin: 0}
    #main.home .carousel_readmore {height: 40px; width: 60%; display: inline-block; float: right; position: relative; font-size: 16px; background-size: cover; padding: 25px 0; text-align: center}
    #main.home .carousel_readmore span {position: relative; top: calc(50% - 10px)}
    #main.home .carousel-caption::before {display: none}
    #main.home .carousel-caption {width: 100%; left: 0}
    #main.home .carousel-caption h2 {width: 100%; font-size: 24px; line-height: 35px; font-family: Montserrat-Medium; margin: auto}

    #main.home h2 {font-size: 18px; letter-spacing: 3px}
    #main.home .lms_projects .lms_container p {top: calc(50% - 14px)}
    #main.home .lms_projects .btn-success {bottom: 70px}
    #main.home .aboutBox p.intro {line-height: 31px; margin: 25px auto}
    #main.home .box, #main.programs .box {margin: 0}
    #main.home .hp_about .about_subpage_row {margin: 50px 0}
    #main.home .hp_about .hp_about_circles img {margin-right: 5%; display: inline-block; width: 40%;}
    .hp_our_programs > div {width: 100%; display: block;}
    .hp_our_programs > div p {font-size: 18px}
    .hp_our_programs .entrepreneurship_img {margin-bottom: 40px}
    #main.home .testimonial_blc {height: auto}
    #main.home .testimonial_blc h3 {font-size: 18px; line-height: 30px;}
    #main.home .testimonial_blc > div {padding: 40px 0}
    #main.home .testimonial_blc p {font-size: 13px}
    #main.home .lms_projects {width: 100%!important; margin: 0}
    #main.home .lms_projects > div {float: none!important; width: 100%; height: 300px;}
    #main.home .lms_projects > div p {font-size: 20px}
    #main.home .lms_projects .projects_container p {top: calc(50% - 14px)}
    #main.home .get_involved {margin: 70px auto}
    #main.home .get_involved > div > div {width: 100%; display: block; margin-bottom: 70px}
    #main.home .get_involved > div > div p {font-size: 18px}
    #main .projectsList {margin-top: 40px}
    #main .projectsList figure {height: 228px!important;}
    #main .projectsList li {border-bottom: 1px solid #285F74; padding-bottom: 40px;}
    #main.home .newsletter_subscribe h3 {font-size: 15px}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner {padding-top: 40px}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner form input {width: 100%!important; padding: 10px 30px; margin-bottom: 20px; font-size: 16px}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner .newsletter_subscribe_desktop {display: none}
    #main.home .newsletter_subscribe .newsletter_subscribe_inner .newsletter_subscribe_mobile {display: block; background: white; width: 150px!important; color: #285F74; font-size: 16px; text-align: left; position: relative}
    #main.home .submit_container {position: relative}
    #main.home .submit_container img {position: absolute; top: calc(50% - 11px); left: 115px;}
    ::-webkit-input-placeholder{font-size: 16px}
    :-moz-placeholder{font-size: 16px}
    ::-moz-placeholder{font-size: 16px}
    :-ms-input-placeholder{font-size: 16px}
    #main.home #myCarousel .item {background-image: none}
    #main.home figure.carousel_slider {height: 200px}
    #main.home .lms_projects .lms_container p, #main.home .lms_projects .projects_container p {font-size: 20px; line-height: 30px}

    #innumbers .gero_green_bg h1 {font-size: 30px; font-family: Montserrat-Medium; padding: 40px 0}
    #innumbers .gero_green_bg h1 span {color: #00A0AF; font-size: 21px; letter-spacing: 5px; margin-top: 15px; display: inline-block;}
    #innumbers .innumbers_row_one {margin: 50px auto}
    #innumbers .innumbers_row {width: 80%!important}
    #innumbers .gero_green_bg {padding-top: 70px}
    #innumbers .innumbers_row > div {display: block; width: 100%; margin: 0 auto 70px auto; float: none!important;}
    #innumbers .innumbers_row > div p {text-align: center; margin-bottom: 20px}
    #innumbers .innumbers_row {text-align: center}
    #innumbers .innumbers_row img {max-width: 100%; height: auto!important;}
    #innumbers .innumbers_row_two {margin: 50px auto}
    #innumbers .innumbers_row_three {margin: 50px auto}
    #innumbers .innumbers_row_three .volunteer_img {margin-left: auto}

    #main.blog .articlesList .articleItem {width: 100%!important; display: block!important; margin: 20px auto 40px auto!important;}
    #main.blog .articlesList .articleItem > a.fullWidth .articleImage {height: 300px!important;}
    #main.blog .articlesList .articleItem > a.fullWidth {height: auto!important;}

    #main.success-stories .storiesList li {width: 100% !important; display: block!important; vertical-align: top; margin-right: auto!important; margin-bottom: 30px!important;}
    #main.success-stories .storiesList li figure {display: block; width: 100%; height: 300px!important;}
    #main.success-stories .storiesList li h2 {color: #285F74; font-size: 1.5em; font-family: Montserrat-Bold;}
    #main.success-stories .storiesList li a.btn-success {margin-top: 10px}

    .article_top_container figure.article_image.desktop {display: none;}
    .article_top_container figure.article_image.mobile {display: block; margin: 30px 0 20px 0}
    .article_top_container figure.article_image {width: 100%; height: 300px; display: block}
    .article_top_container .article_title_info {display: block; width: 100%; margin-left: auto}
    .article_top_container .article_title_info h1 {margin: 20px 0; font-size: 21px; font-family: Montserrat-Bold; line-height: 30px; margin-bottom: 10px!important;}
    .article_top_container .article_title_info .article_datetime {font-size: 16px; color: #A1A1A2; margin: 10px 0 30px 0; font-family: Montserrat; font-weight: lighter}
    .article_top_container .article_title_info .summary {font-size: 18px; color: #545555}
    .article_top_container .article_title_info .tagsDiv {font-size: 16px}

    .dynamicProjectPage .content .details.col2, .dynamicProjectPage .content .details.col2.col_margins {grid-template-columns: 100%; grid-column-gap: 0;}
    .dynamicProjectPage .content .details.col3, .dynamicProjectPage .content .details.col3.col_margins {grid-template-columns: 100%; grid-column-gap: 0;}
    .dynamicProjectPage .content .details.col4, .dynamicProjectPage .content .details.col4.col_margins {grid-template-columns: 100%; grid-column-gap: 0;}

    #main.success-stories .mainBanner {background: url(/images/success_stories_bg_mobile.png) center center no-repeat; background-size: cover;  height: 200px}
    #main.success-stories .success_stories_top_title {font-size: 18px; letter-spacing: 10px; position: absolute; top: calc(50% - 30px);}
    #main.success-stories .success_stories_top_title span {font-size: 25px; }

    #main.blog .mainBanner {background: url(/images/blog_banner_mobile.png) center center no-repeat; background-size: cover; height: 200px}
    #main.blog.articlePage .mainBanner {height: 140px}
    #main.blog .mainBanner .blog_top_title {font-size: 18px; letter-spacing: 10px; top: calc(50% - 30px);}
    #main.blog .mainBanner .blog_top_title span {font-size: 25px; }

}

/******  Footer  ******/
footer .footerInfo {background-color: #285F74;}
footer .footerBox {background-color: #e9e9e9; border-top: 2px solid #285F74; height: 150px; color: #285F74; text-align: center;}
footer .contactInfoBox h2 p a {color: #285F74;}
footer .contactIcons {list-style: none; width: 357px; height: 40px; margin: 35px auto;}
footer .contactIcons li {display: inline-block; margin: 0 2px; width: 47px; height: 36px; background: url('/images/contact-icons-sprite-mobile.png?v=2') 0 0 no-repeat;}
footer .contactIcons li.address {background-position: -48px 0;}
footer .contactIcons li.call {background-position: -94px 0;}
footer .contactIcons li.facebook {background-position: -141px 0;}
footer .contactIcons li.twitter {background-position: -188px 0;}
footer .contactIcons li.linkedin {background-position: -235px 0;}
footer .contactIcons li.youtube {background-position: -282px 0;}
footer .contactIcons li.instagram {background-position: -329px 0;}
footer .mapCont {padding-left: 0; padding-right: 0; text-align: center; color: #fff;}
footer #gmap {width: 100%; background: url('/images/footer-reach-map.png') center center no-repeat; background-size: cover; height: 300px}
footer #map-canvas {width: 100%; height: 350px;}
footer .footerContent {padding: 25px 0; color: #fff;}
footer .fsubMenu {list-style: none; margin: 0 0 25px 0}
footer .fsubMenu li {float: left; width: 50%; margin: 5px 0;}
footer .fsubMenu li a {color: #fff;}
#mc_embed_signup label {display: block}
#mc_embed_signup input {color: #000; width: 100%}
#mc_embed_signup input[type=submit] {color: #fff; margin: 10px 0 35px 0; background-image: none;}
#mc_embed_signup input[type=submit]:hover {background-color: #dc7106}
#signature {font-size: 0.6em; text-align: center;}
#signature a {color: #fff;}
#topArrow {width: 50px; height: 50px; background: #285F74 url('/images/top-arrow.png') center center no-repeat; background-size: contain; position: fixed; bottom: -5px; right: 50px; border-radius: 5px; cursor: pointer; display: none; z-index: 9999;}

footer { background: #285F74; width: 100%; font-size: 0; color: white; padding: 60px 0 }
footer .footer_column { display: inline-block; vertical-align: top; width: 30%; margin-right: 3%  }
footer .footer_column > h2 { color: white; font-weight: bold; font-size: 14px; margin-bottom: 15px  }
footer .footer_column ul {  }
footer .footer_column ul li { list-style-type: none; }
footer .footer_column a { color: white; text-decoration: none; font-size: 14px }
footer .footer_column .highlight { color: #00A0AF  }
footer .footer_column h3 { color: #E3E24F; font-size: 14px  }
footer .footer_column h4 { font-size: 14px; font-family: Montserrat-Bold }
footer .footer_column img {  }
footer .footer_column p { color: white; font-size: 14px; line-height: 16px  }
footer .footer_column .email { margin-top: 30px }
footer .footer_column .social { margin-top: 50px }
footer .footer_column .social ul li {display: inline-block; margin-right: 5px}

@media (max-width:767px) {
    footer { padding: 30px 0 10px 0 }
    footer .footer_column { display: block; width: 100% }
}

/******  About Us  ******/
#main.about .mainBanner {background: url('/images/banners/overview-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.about .box {background-color: #72ae36; color: #fff; margin: 10px 0; padding: 15px 0;}
#main.about .mission {margin-top: 25px;}
#main.about .vision {background-color: #285F74;}
#main.about .values {background-color: #db8732;}
#main.about ul.injaz-logos {list-style: none; margin: 25px 0;}
#main.about ul.injaz-logos li {float: left; width: 50%;}
#main.about ul.injaz-logos li a, #main.about ul.injaz-logos li a:visited {color: #000;}
#main.about ul.injaz-logos li img {width: 95%; max-width: 163px;}

/******  Board of Directors  ******/
#main.board .mainBanner {background: url('/images/banners/board-banner.jpg?v=2') center top no-repeat; background-size: contain; height: 135px;}
#main.board .boardList .board {margin: 10px 0; padding: 25px;}
#main.board .boardList .evenBoard {background-color: #e6e6e6;}
#main.board .boardList .pic {margin: 0 auto; background-image: url('/images/board/board-member-defualt.png'); width: 250px; height: 250px; background-size:contain;}
#main.board .boardList .name {margin-top: 15px}
#main.board .boardList .name, #main.board .boardList .title {font-weight: bold;}
#main.board .boardList .title {color: #285F74;}


/******  Media Center  ******/
#main.media .mainBanner {background: url('/images/banners/media-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.media .subNav {list-style-type: none; margin: 0;}
#main.media .subNav li {float: left; width: 25%; background-color: #a0d46a; cursor: pointer;}
#main.media .subNav li.selected {background-color: #90c956; color: #fff;}
#main.media .subNav li a {display: block; width: 100%; height: 100%; color: #fff;}
#main.media .panel {text-align: center;}
#main.media .elemContainer {background-color: #dddada; margin: 10px 0; padding: 5px;}
#main.media .panel figure {background-position: center center; background-size: cover; height: 200px;}
#main.media .panel figure img {width: 100%;}
#main.media .panel .highElem .elemContainer {background-color: #a0d46a}
#main.media {margin-top: 0;}
#main.media .panel h2 {color: #285F74; font-size: 2em;}
#main.media .panel .date {color: #191F1D; font-size: 0.9em; font-weight: bold;}
#main.media .tvRadio figure {height: auto;}


/******  Meet The Team  ******/
#main.meetTeam .mainBanner {background: url('/images/banners/meet-team-banner.jpg?v=1') center center no-repeat; background-size: cover;}


/******  Programs  ******/
#main.programs .mainBanner {background: url('/images/banners/programs-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.programs .body .content {margin-bottom: 25px;}


/******  Program  ******/
#main.program .mainBanner {background: url('/images/banners/programs-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.program .subNav {color: #fff; text-align: center;}
#main.program .subNav .control {width: 45%; height: 45px; padding: 13px; cursor: pointer;}
#main.program .subNav .prev {float: left; }
#main.program .subNav .next {float: right;}
#main.program ul {list-style: none;}
#main.program .program {border-bottom: 2px solid #285F74; padding: 15px; text-align: left; background-color: #e5f3ed;}
#main.program .program .right {float: right; width: 78%; padding-left: 2%}
#main.program .program .left {float: left; width: 20%;}
#main.program .program h3 {font-style: italic; margin-top: 0;}
#main.program .program .traits span, #main.program .program h3 {color: #285F74; font-weight: bold;}
#main.program .program .content {margin: 20px 0;}
#main.program .program .sponsor {font-size: 0.8em}
#main.program .program img {width: 100%;}
#main.program .program .sponsor img {width: auto; margin-top: 5px; max-height: 50px}

#main.program #actionMenu {list-style: none; margin: 25px 0;}
#main.program #actionMenu li {float: left; width: 32.3%; margin: 0.5%; background-color: #285F74; color: #fff; height: 125px; text-align: center; cursor: pointer;}
#main.program #actionMenu li span {display: block; height: 40px; width: 40px; margin: 15px auto; background: url('/images/program-action-menu-sprite-mobile.png') 0 0 no-repeat;}
#main.program #actionMenu li.feedback span {background-position: -40px 0;}
#main.program #actionMenu li.sponsor span {background-position: -80px 0;}

#main.workreadiness h1, #main.workreadiness .program .traits span, #main.workreadiness .program h3 {color: #8cc751}
#main.financialliteracy h1, #main.financialliteracy .program .traits span, #main.financialliteracy .program h3 {color: #dc7106}
#main.financialliteracy .program {background-color: #F3EBE5}
#main.entrepreneurship .mainBanner {background: url('/images/banners/entrepreneurship-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.workreadiness .mainBanner {background: url('/images/banners/workreadiness-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.financialliteracy .mainBanner {background: url('/images/banners/financialliteracy-banner.jpg?v=2') center center no-repeat; background-size: cover;}

/******  Competitions  ******/
#main.competitions .mainBanner {background: url('/images/banners/competitions-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.competitions h2 {font-size: 1.8em; margin: 25px 0; color: #8cc751}
#main.competitions ul {list-style: none;}
#main.competitions .photosList {height: 100px;}
#main.competitions .photosList li {float: left; height: 100px; width: 33.33%; border-bottom: 5px solid #8cc751; background-size: cover;}
#main.competitions .competition {margin: 50px 0;}
#main.competitions .competition:nth-child(2) h2 {color: #dc7106}
#main.competitions .competition:nth-child(2) .photosList li {border-bottom: 5px solid #dc7106;}
#main.competitions .competition:nth-child(3) h2 {color: #285F74}
#main.competitions .competition:nth-child(3) .photosList li {border-bottom: 5px solid #285F74;}
#main.competitions .competition .readMore {color: #285F74; margin-top: 15px; display: block;}

/******  Competitions | Ripples of Happiness  ******/
#main.ripples .mainBanner {background: url('/images/banners/ripples-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.ripples .logo {width: 200px; margin: 15px auto;}
#main.ripples .sponsor {width: 200px; margin: 15px auto;}
#main.ripples .logo img, #main.ripples .sponsor img {width: 100%;}
.lpForm form {background-color: #285F74; color: #fff; padding: 10% 5%;}
.lpForm form h3 {margin-top: 0;}
.lpForm form .input-group {margin: 15px 0;}
.lpForm form .btn-success {background-image: none; background-color: #8cc751; width: 100%;}
#main.ripples .lpForm {margin-bottom: 50px;}
#main.ripples .sessionList {padding: 15px;}
#main.ripples .session {margin: 50px 0; opacity: 0;}
#main.ripples .session .circle {background-color: #285F74; border-radius: 50%; float: left; width: 25%; color: #fff;}
#main.ripples .session2 .circle, #main.ripples .session5 .circle {background-color: #dc7106}
#main.ripples .session3 .circle, #main.ripples .session6 .circle {background-color: #8cc751}
#main.ripples .session .circle h4 {font-size: 0.8em; text-align: center; padding-top: 10px; text-transform: uppercase;}
#main.ripples .session .circle span {display: block; margin: 0 auto; background: url('/images/ripples-of-happiness-sessions-sprite-mobile.png') 0 0 no-repeat; width: 25px; height: 25px;}
#main.ripples .session2 .circle span {background-position: -25px 0;}
#main.ripples .session3 .circle span {background-position: -50px 0;}
#main.ripples .session4 .circle span {background-position: -75px 0;}
#main.ripples .session5 .circle span {background-position: -100px 0;}
#main.ripples .session6 .circle span {background-position: -125px 0;}
#main.ripples .session .content {float: right; width: 70%;}
#main.ripples .session .content h3 {font-size: 1.4em; font-weight: bold; margin: 0 0 10px 0;}
#main.ripples .videoList {padding: 25px 0;}

#main.ripples ul.logos {list-style: none; margin: 25px 0;}
#main.ripples ul.logos li {float: left; width: 33.33%;}
#main.ripples ul.logos li img {width: 95%; max-width: 163px;}

/******  Projects  ******/
#main.projects .mainBanner {background: url('/images/banners/projects-banner.jpg?v-1') center center no-repeat; background-size: cover;}
#main.projects .mainBanner h1 {color: #fff; padding: 75px 0 0 15px}
#main.projects ul.logos {list-style: none; margin-top: -35px;}
#main.projects ul.logos li {float: left; width: 50%;}
#main.projects ul.logos li img {width: 95%; max-width: 163px;}

#main .projectsList {list-style: none; text-align: left}
#main .projectsList h2 {font-size: 1.2em; color: #285F74; font-family: Montserrat-Bold; line-height: 26px}
#main .projectsList h3 {font-size: 1.2em; color: #285F74}
#main .projectsList p {color: #000;}
/*#main .projectsList figure {height: 16vw}*/
#main .projectsList figure img {width: 100%;}
#main .projectsList li {margin-bottom: 40px;}

#main.projectPage .content {text-align: left}
#main.projectPage p img {max-width: 100%;}

/******  Partners  ******/
#main.partners .mainBanner {background: url('/images/banners/partners-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.partners h2 {background-color: #8cc751; color: #fff; padding: 5px 0; font-size: 1.8em;}
#main.partners h3 {color: #8cc751;}
#main.partners .category:nth-child(2) h2 {background-color: #dc7106;}
#main.partners .category:nth-child(2) h3 {color: #dc7106;}
#main.partners .category:nth-child(3) h2 {background-color: #285F74;}
#main.partners .category:nth-child(3) h3 {color: #285F74;}
#main.partners .category:nth-child(4) h2 {background-color: #8cc751;}
#main.partners .category:nth-child(4) h3 {color: #8cc751;}
#main.partners .category:nth-child(5) h2 {background-color: #dc7106;}
#main.partners .category:nth-child(5) h3 {color: #dc7106;}
#main.partners ul {list-style: none;}
#main.partners .sponsorsList li {float: left; width: 40%; height: 100px; margin: 5%;}
#main.partners .sponsorsList li .photo {height: 100%;}
#main.partners .sponsorsList li img {height: 100%; margin: 0 auto;}
#main.partners .categoriesList {margin: 75px 0;}

/******  Get Invovled  ******/
#main.getinvolved .mainBanner {background: url('/images/home-banner.jpg?v=3') center center no-repeat; background-size: cover;}
#main.getinvolved.companyprogram .mainBanner {background: url('/images/banners/companyprogram-banner.jpg?v=2') center center no-repeat; background-size: cover; display: none;}
/*#main.getinvolved .body ul {margin-left: 25px;}*/
#main.getinvolved .body em {font-weight: bold;}

#main.getinvolved .FAQ {margin: 50px 0;}
#main.getinvolved .FAQ .ques {background-color: #c6c6c6; color: #fff; padding: 10px 5px; margin: 2px 0;}
#main.getinvolved .FAQ .ques.even {background-color: #848484;}
#main.getinvolved .FAQ h3 {font-size: 1.1em; margin: 0; font-weight: bold; cursor: pointer;}
#main.getinvolved .FAQ .qBody {font-size: 0.8em;}
#main.getinvolved .FAQ .qBody p {margin: 25px 0;}

#main.alumni .mainBanner {background: url('/images/banners/almuni-banner.jpg?v=3') center center no-repeat; background-size: cover;}
#main.volunteers .mainBanner {background: url('/images/banners/volunteer-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.corporations .mainBanner {background: url('/images/banners/corporations-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.educators .mainBanner {background: url('/images/banners/educators-banner.jpg?v=2') center center no-repeat; background-size: cover;}
#main.youth .mainBanner {background: url('/images/banners/youth-banner.jpg?v=3') center center no-repeat; background-size: cover;}


#main.alumni .ques {background-color: #c6c6c6; color: #fff; padding: 10px 5px; margin: 2px 0;}
#main.alumni .ques.even {background-color: #848484;}

#volGraph .circle {font-size: 1.2em;}
#volGraph .circle span {color: #bcd347; font-size: 1em; font-style: italic;}
#volGraph .circle2 span {color: #f3961f}
#volGraph .circle3 span {color: #1ba054}
#volGraph .rect {background-color: #e8efc6; padding: 15px;}
#volGraph .rect2 {top: 300px; background-color: #fddbb4;}
#volGraph .rect3 {top: 450px; background-color: #c0d9c1;}
#volGraph .rect ul {text-align: left; margin-left: 15px;}

/******  Donate  ******/
#main.donate .mainBanner {background: url('/images/banners/donate-banner.jpg?v=3') center center no-repeat; background-size: cover;}
#main.donate h2 {color: #285F74; font-size: 1.7em;}
#main.donate .headline {text-transform: uppercase; font-weight: bold;}
#main.donate .info {color: #8cc751;}
#main.donate .subheadline {color: #285F74;}
#main.donate .bold {font-weight: bold;}

/*** Tablet ***/
@media (min-width:1000px) {
    .centerInParent {margin-top: 50px;}
    .centerInParentDesktop {margin-top: 50px;}
    #main .body {margin-top: 50px; margin-bottom: 50px;}
    #main .body h1 {margin-bottom: 50px;}
    #main .mainBanner {height: 350px;}
    .onDesktop {display: block;}
    .onMobile {display: none;}

    /******  Nav  ******/
    /*nav .navbar-right .dropdown-menu {right: auto; left: 0; background-color: rgba(255, 255, 255, 0.65); border: 0; box-shadow: none; -webkit-box-shadow: none;}*/
    /*.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {background-image: none; background-color: transparent; border-bottom: 2px solid #285F74; box-shadow: none; -webkit-box-shadow: none;}*/
    .navbar-nav>li>a {padding-top: 5px; padding-bottom: 5px;}
    .navbar-brand {height: 35px}

    /******  Home Page  ******/
    /*#main.home .carousel-caption {padding-bottom: 80px; left: 50%; text-align: left;}*/
    /*#main.home .carousel-caption h2 {font-size: 2.5em; padding: 7px 10px;}*/

    #main.home .aboutBox p.intro {font-size: 2.1em;}

    #main.home .homeBox, #main.programs .homeBox {border-right: 10px solid #fff;}
    #main.home .workBox, #main.programs .workBox {border-right: 5px solid #fff; border-left: 5px solid #fff;}
    #main.home .finaBox, #main.programs .finaBox {border-left: 10px solid #fff;}
    #main.home .finaBox, #main.home .donateBox {border-right: 0}

    #main.home .boardBox ul li {height: 150px; width: 23%; margin: 1.5% 1%;}
    .flip-container, .front, .back {height: 150px;}
    
    #main .quoteBox {background-image: url('/images/home-quote-bg.png'); background-repeat: no-repeat}
    #main .quoteBox a {padding-top: 5px;}
    #main .quoteBox p.testimonial {font-size: 1.5em;}

    #main .sponsorsBox .sponsorsCat li {float: left; width: 19%; height: 25px; margin: 0 0.5%; color: #285F74; cursor: pointer;}
    #main .sponsorsBox .sponsorsCat li.selected {background-color: #285F74; color: #fff;}
    #main .sponsorsBox .sponsorsList {display: none;}
    #main .sponsorsBox .sponsorsList li {width: 14.66%; margin: 1%;}
    #main .sponsorsBox .sponsorsList.selected {display: block;}

    /******  Footer  ******/
    footer .contactIcons {width: 490px; margin: 35px auto;}
    footer .contactIcons li {margin: 0 5px; cursor: pointer;}
    footer .contactInfoBox {background: #e9e9e9 url('/images/traingle-corner.png') 0 10px no-repeat;}
    footer .contactInfoBox h2 {font-size: 1.2em; width: 80%; margin: 0 auto;}
    footer .fsubMenu {float: left; width: 25%; margin-left: 25px}
    footer .fsubMenu li {float: left; margin: 2%; width: 46%; font-size: 0.8em;}
    footer #gmap {height: 400px}
    footer .contactBox {border-right: 5px solid #fff;}
    #mc_embed_signup {float: right; width: 60%; margin-bottom: 25px;}
    #mc_embed_signup h4 {margin: 0 0 10px 1%;}
    #mc_embed_signup .mcCol {float: left; width: 23%; margin: 0 1%;}
    #mc_embed_signup input {height: 20px; padding: 0}
    #mc_embed_signup input[type=submit] {margin: 0}

    
    /******  About Us  ******/
    #main.about .box {height: 140px; padding:0}
    #main.about .mission {margin-top: 100px;}
    #main.about .box h2 {margin-top: 0}
    #main.about .box .content {text-align: left;}

    /******  Board of Directors  ******/
    #main.board .mainBanner {background: url('/images/banners/board-banner.jpg?v=3') center center no-repeat; background-size: cover; height: 350px;}
    #main.board .boardList .evenBoard {background-color: transparent;}
    #main.board .boardList .evenRow {background-color: #e6e6e6;}
    #main.board .boardList .board {min-height: 400px;}
    #main.meetTeam .boardList .board {min-height: 400px;}

    /******  Meet The Team  ******/
    #main.meetTeam .mainBanner {background: url('/images/banners/meet-team-banner.jpg?v=2') center center no-repeat; background-size: cover; height: 350px;}


    /******  Media Center  ******/
    #main.media .subNav {margin: 0 auto; width: 40%}
    #main.media .subNav li {padding: 3px 0;}
    #main.media .panel .elem {padding: 5px;}
    #main.media .panel .highElem {padding: 0; text-align: center;}
    #main.media .panel .elemContainer {height: 320px;}
    #main.media .panel .highElem .elemContainer {padding: 50px;}
    #main.media .panel figure {margin-bottom: 15px;}
    #main.media .panel .summary {margin-top: 15px; width: 75%; font-size: 0.7em;}
    #main.media .panel .highElem .summary {width: 100%; font-size: 1em;}
    #main.media .panel h2 {font-size: 1em; line-height: 1em;}
    #main.media .panel .info {float: left; text-align: left; width: 30%}
    #main.media .tvRadio .elemContainer {height: 250px;}

    /******  Programs  ******/
    #main.programs .body .content {margin-bottom: 100px;}


    /******  Program  ******/
    #main.program .subNav {margin: 100px 0 -110px 0;}
    #main.program .subNav .control {width: 20%;}
    #main.program ul.programMenu {list-style-image: url('/images/bullet-grey-square.jpg'); color: #b8b8b8; text-align: left; float: left; width: 17%; background: url('/images/border-dashed-green.png') right 0 no-repeat; margin-top: 75px;}
    #main.program ul.programMenu li {cursor: pointer;}
    #main.program ul.programMenu li:hover, #main.program ul.programMenu li.selected {list-style-image: url('/images/bullet-green-square.jpg'); color:#285F74;}

    #main.program ul.programList {width: 80%; float: right; margin-top: 75px;}
    #main.program ul.programList li {display: none;}
    #main.program ul.programList li.selected {display: block;}
    #main.financialliteracy ul.programMenu li:hover, #main.financialliteracy ul.programMenu li.selected {list-style-image: url('/images/bullet-orange-square.jpg'); color:#dc7106;}
    #main.workreadiness ul.programMenu li:hover, #main.workreadiness ul.programMenu li.selected {list-style-image: url('/images/bullet-lgreen-square.jpg'); color:#8cc751;}

    #main.program #actionMenu li {height: 135px; width: 32.9%; margin: 0.2%;}
    #main.program #actionMenu li span {height: 70px; width: 70px; background-image: url('/images/program-action-menu-sprite.png');}
    #main.program #actionMenu li.feedback span {background-position: -70px 0;}
    #main.program #actionMenu li.sponsor span {background-position: -140px 0;}


    /******  Competitions  ******/
    #main.competitions .photosList, #main.competitions .photosList li {height: 275px;}
    #main.competitions .competition {margin: 100px 0;}

    /******  Competitions | Ripples of Happiness  ******/
    #main.ripples .session {background: url('/images/ripples-of-happiness-session-bg-1.jpg') 100px bottom no-repeat; margin: 0; padding-bottom: 50px;}
    #main.ripples .session2,#main.ripples .session4,#main.ripples .session6 {margin-left: 100px; background: url('/images/ripples-of-happiness-session-bg-2.jpg') 0 bottom no-repeat}
    #main.ripples .session6 {background-image: none;}
    #main.ripples .session .content {margin-top: 35px;}
    #main.ripples .session2 .content,#main.ripples .session4 .content,#main.ripples .session6 .content {padding-left: 25px;}
    #main.ripples .session .circle h4 {font-size: 1.8em; padding-top: 25px;}
    #main.ripples .session .circle span {background: url('/images/ripples-of-happiness-sessions-sprite.png') 0 0 no-repeat; width: 100px; height: 100px;}
    #main.ripples .session2 .circle span {background-position: -100px 0;}
    #main.ripples .session3 .circle span {background-position: -200px 0;}
    #main.ripples .session4 .circle span {background-position: -300px 0;}
    #main.ripples .session5 .circle span {background-position: -400px 0;}
    #main.ripples .session6 .circle span {background-position: -500px 0;}

    /******  Projects  ******/
    #main .projectsList li {display: inline-block; min-height: 300px; margin: 25px 6% 25px 0; width: 27%; vertical-align: top}
    #main .projectsList a.btn-success {margin-top: 15px}
    #main .mainBanner h1 {padding: 100px 0 0 0}

    
    /******  Partners  ******/
/*    #main.partners .subCategoriesList li {float: left; width: 50%; text-align: center;}*/
/*    #main.partners .subCategoriesList .sponsorsList li {width: 48%}*/
    #main.partners .sponsorsList li {width: 12.66%; margin: 2%;}


    /******  Get Invovled  ******/
    #main.getinvolved .body {text-align: left;}
    #main.getinvolved .FAQ {margin-top: 100px;}
    #main.getinvolved .FAQ .ques {padding: 10px 25px;}
    #main.getinvolved .FAQ .qBody {font-size: 1em;}
    
    #volGraph {position: relative; height: 450px; width: 100%;}
    #volGraph .circle {font-size: 1.6em; position: absolute; top: 0; left: 75px; width: 200px; padding-top: 55px; height: 200px; background: url('/images/volunteer-figure-a1.png') center center no-repeat; background-size: contain; text-align: center;}
    #volGraph .circle2 {top: 128px; left: 0; background-image: url('/images/volunteer-figure-a2.png');}
    #volGraph .circle3 {top: 255px; background-image: url('/images/volunteer-figure-a3.png');}
    #volGraph .circle span {font-size: 0.7em;}
    #volGraph .rect {position: absolute; top: 50px; left: 285px; background-color: #e8efc6; padding: 10px 25px; right: 0;}
    #volGraph .rect2 {top: 195px; background-color: #fddbb4; left: 200px;}
    #volGraph .rect3 {top: 325px; background-color: #c0d9c1;}
    #volGraph ul {margin-bottom: 0}
    #volGraph .rect .color {position: absolute; background-color: #bcd347; right: 0; width: 20px; top: 0; bottom: 0;}
    #volGraph .rect2 .color {background-color: #f3961f;}
    #volGraph .rect3 .color {background-color: #1ba054;}

    /******  Success Stories  ******/
    #main.success-stories .storiesList {position: relative;}
    #main.success-stories .storiesList li h3 {font-size: 2em;}
    #main.storyPage .mainBanner {height: 150px}
    
    
    /******  Donate  ******/
    #main.donate .details {width: 70%; margin: 25px auto; font-style: italic; }
    #main.donate .dLeft, #main.donate .dRight {float: left; width: 50%}


    /******  Blog  ******/
    #main.blog .articleText {text-align: left;}
    #main.blog .articleText.oddItem {text-align: right;}
}


/**************/
/*** Desktop ***/
@media (min-width:1160px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {display: block;}
}