/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* GLOBAL STYLES
****************************************************/

body {

}

.clear {
    clear:both;
}

h1, h2, h3, h4, h5, h6 {
    color:#fff;
    font-family: 'Roboto Condensed', sans-serif;
    text-shadow:0 1px 2px #444;
    font-weight:700;
    text-transform: uppercase;
}
h1 { font-size:30px; }
h2 { font-size:24px; }
h3 { font-size:20px; }
h4 { font-size:18px; }
h5 { font-size:16px; }
h6 { font-size:14px; }

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

p {

}

a {
    text-decoration:none !important;
}
    a:hover {
    }

ul li {

}

.hr {
    display:block;
    width:60%;
    background:url(../images/hr-pattern.jpg) repeat-x;
    height:12px;
    margin:20px auto;
}

/* FONT STYLES
****************************************************/

/* BUTTONS STYLES
****************************************************/

.button {
    background:#eb901b;
    font-weight:700;
    font-size:14px;
    border-bottom:4px solid #ae6405;
}

.button:hover {
    background:#ff8f00;
}

/* HEADER STYLES
****************************************************/

#main-header {
    background:#222;
    display:block;
    height:748px;
    width:100%;
    background:url(../images/header-bg.jpg) repeat-x;
}

.logo {
    display:block;
    max-width:553px;
    margin: 0px auto;
    padding:25px 0 0;
}

.intro {
    display:block;
    width:100%;
    height:579px;
    margin:30px auto;
    background:url(../images/intro-bg.png) no-repeat center;
}

.intro h1 {
    display:block;
    text-align:center;
    padding-top:110px;
    font-family: 'Roboto Condensed', sans-serif;
}

.intro p {
    color:#fff;
    max-width:500px;
    text-align:center;
    margin:20px auto 30px;
}

.intro a {
    color:#357ab0;
    border:2px solid #fff;
    display:block;
    padding:15px;
    max-width:230px;
    margin:30px auto 0;
    font-family: 'Roboto', sans-serif;
    font-weight:700;
    font-size:14px;
    text-align:center;
    background:#fff;
}

.intro a:hover {
    color:#357ab0;
    background:#fff;
}



/* Navigation STYLES
****************************************************/

.nav-wrapper {
    display:block;
    background:rgba(0,0,0,0.75);
    margin:0;
    padding:0;
    position:absolute;
    width:100%;
    top:300px;
    z-index: 99;
}

.home .nav-wrapper {
    display:block;
    background:rgba(0,0,0,0.75);
    margin:0;
    padding:0;
    position:absolute;
    width:100%;
    top:657px;
}

nav {
    max-width:842px;
    width:100%;
    margin:0 auto;
}

nav ul {
    margin:0;
}

nav li {
    display:inline-block;
    margin:0;
    padding:0;
}

nav a {
    color:#fff;
    font-family: 'Roboto', sans-serif;
    font-weight:700;
    font-size:14px;
    text-transform: uppercase;
    padding:20px 27px;
    background:none;
    display:inline-block;
}

nav a:hover {
    color:#377fb8;
}

.sticky {
    position: fixed !important;
    z-index:20 !important;
    width: 100%;
    left: 0;
    top: 0 !important;
    z-index: 100;
}

/* HOME PAGE STYLES
****************************************************/

#the-principles {
    display:block;
    margin-top:40px;
    overflow:hidden;
    height:520px;
    position:relative;
}

#the-principles.full {
    height:auto;
}

#the-principles ul {
    magin:0;
    padding:0;
}

#the-principles ul li {
    font-family: 'Roboto', serif;
    font-size: 1rem;
    color:#363636 ;
    list-style:none;
    padding:15px 0;
}

.home #the-principles ul li {
    font-family: 'Roboto', serif;
    font-size:18px;
    color:#363636 ;
    list-style:none;
    padding:15px 0;
}

#the-principles ul li:last-child {
    border-bottom:0;
}

#the-principles a.view-all {
    display:block;
    text-align:center;
    margin:20px 0;
    position:absolute;
    bottom:20px;
    font-size:24px;
    color:#204480;
    text-decoration:underline !important;
}

#the-principles .small-12 {
    /*height:520px;*/
}

.sublist {
    margin-left: 66px;
}

.sublist li {
    margin:0;
    padding:10px 0 !important;
}

.fade {
    display:block;
    background:url(../images/principles-fade.png) repeat-x transparent;
    height:225px;
    width:100%;
    position:absolute;
    bottom:0;
}

.view-all {
    font-family: 'Roboto', sans-serif;
    font-weight:700;
    color:#afafaf;
    text-align:center;
    display:block;
    width:100%;
    z-index:10;
}

#supporters {
    display:block;
    background:url(../images/supporter-arrow.png) #e1e9ef no-repeat center top;
    min-height:665px;
}

#supporter-logos {

}

#supporter-logos li img {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    margin-left: auto;
    margin-right: auto;
    diplay: block;
}

#supporters h2 {
    font-size:60px;
    font-family: 'Roboto', arial, sans-serif;
    font-weight:100;
    color:#373c42;
    text-shadow: none;
    text-align:center;
    text-transform: none;
    margin-top:85px;
}

.supporter-block {
    float:left;
    width:200px;
    height:162px;
    margin:0 45px 30px 0;
    background:#fff;
    padding:0px;
    border-radius:8px;
    position:relative;
    text-align:center;
}
.supporter-block:before {
    content:' ';
    display: inline-block;
    height:100%;
    vertical-align:middle;
}

.supporter-block:nth-child(4n+4) {
    margin-right:0;
}

.supporter-block img {
    display:inline;
    max-width:80%;
    max-height:140px;
}

.supporter-block span {
    background:#256aa2;
    display:block;
    padding:15px;
    border-radius:0 0 8px 8px;
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
    color:#fff;
    display:none;
}


.supporter-slider {
    display:block;
    max-width:940px;
    margin:0 auto;
}

.slick-prev:before, .slick-next:before {
    background:url(../images/prev-arrow.png) no-repeat;
    margin-left:0;
    display:block;
    height:121px;
    width:67px;
    content: '';
}

.slick-prev:before, .slick-next:before {
    background:url(../images/prev-arrow.png) no-repeat;
    margin-left:0;
    display:block;
    height:121px;
    width:67px;
    content: '';
    text-indent:-9999px;
}

.slick-next:before {
    background:url(../images/next-arrow.png) no-repeat !important; 
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; display:block; height:121px; width:67px; content:'';}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; display:block; height:121px; width:67px; content:'';}

.slick-prev:before, .slick-next:before { opacity: 0.75;  display:block; height:121px; width:67px; content:'';}


.slick-prev:before {

}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { display:block; height:121px; width:67px; content:''; }


.slick-prev { left: -110px; }
[dir="rtl"] .slick-prev { left: auto; right: -35px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }

.slick-next { right: -95px; }
[dir="rtl"] .slick-next { left: -35px;  }
.slick-next:before { content: ""; }
[dir="rtl"] .slick-next:before { content: ""; }

.slick-prev, .slick-next {
    height:121px;
    width:67px;
    top:36%;
}

#resources {
    display:block;
    background:url(../images/resources-bg.jpg) repeat;
    padding:20px 0;
    height: auto;
}

.testimonial-slider {
    display:block;
    margin:40px 0;
}

.testimonial {
    display:block;
    width:60%;   
}

.testimonial p {
    color:#fff;
    font-size:18px;
    font-family: "Georgia", serif;
    font-style:italic;
    display:block;
    width:70%;
    margin:0 auto;
}

.testimonial span {
    font-family:Helvetica, Arial, sans-serif;
    font-size:14px;
    color:#fff;
    display:block;
    width:70%;
    margin:20px auto;
}

#resources .slick-prev:before, .slick-next:before {
    background:url(../images/prev-arrow.png) no-repeat;
    margin-left:0;
    display:block;
    height:121px;
    width:67px;
    content: '';
    text-indent:-9999px;
}

#resources .slick-next:before {
    background:url(../images/next-arrow.png) no-repeat;
}

#resources .slick-prev { left: -125px; }
#resources [dir="rtl"] .slick-prev { left: auto; right: -35px; }
#resources .slick-prev:before { content: "←"; }
#resources [dir="rtl"] .slick-prev:before { content: "→"; }

#resources .slick-next { right: -65px; }
#resources [dir="rtl"] .slick-next { left: -35px;  }
#resources .slick-next:before { content: ""; }
#resources [dir="rtl"] .slick-next:before { content: ""; }

#resources h2 {
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    font-size:36px;
    color:#fff;
    text-shadow:0;
    text-align:center;
}

.resource-list-container {
    display:block;
    padding:15px;
    color:#fff;
    background:rgba(0,84,138,0.2);
    border-radius:8px;
}

.resource-list-container ul li {
    list-style:none;
    color:#fff;
    font-family: 'Roboto', sans-serif;
    font-size:16px;
    padding:10px 0 10px 30px;
    border-bottom:1px solid #0e4d81;
    border-top:1px solid #2a79ba;
    letter-spacing:1px;
    background:url(../images/arrow-right.png) no-repeat 0 15px;
}

.resource-list-container ul li:first-child {
    border-top:0;
}

.resource-list-container ul li:last-child {
    border-bottom:0;
}

.resource-list-container ul li strong {
    text-transform:uppercase;
}

.resource-list-container ul li a {
    font-family: 'Roboto', sans-serif;
    color:#fff;
    font-weight:300;
    font-size:12px;
}

.resource-list-container ul li span.date {
    font-family: 'Helvetica Neue Light', arial, sans-serif;
    font-size:12px;
    font-style:italic;
    margin:-3px 0 0 0;
    display:block;
}

.newsletter {
    display:block;
}

.newsletter h3 {
    font-family: 'Roboto', sans-serif;
    font-weight:300;
    font-size:30px;
    color:#fff;
    margin-top:60px;
    display:block;
}

.newsletter p {
    color:#fff;
    font-size:14px;
}

#contact {
    display:block;
    background:url(../images/contact-spacer.jpg) repeat-x;
    padding:60px 0 0 0;
}

#contact h2 {
    color:#363636;
    text-transform:uppercase;
    text-align:center;
    font-size:30px;
    font-weight:400;
    text-shadow:none;
}

#contact h2 span {
    font-size:20px;
    font-family: 'Roboto', arial, sans-serif;
    color:#717171;
    text-shadow: none;
    font-weight:300;
    margin:0px 0 30px;
    display:block;
}

.contact-info {
    padding:25px 0 60px;
    display:block;
}

#contact span.email-info {
    background:url(../images/email-icon.png) no-repeat 0 0px ;
    display:block;
    height:43px;
    padding:10px 0 0 56px;
    width: 345px;
    margin: 0 auto;
}

#contact span.address {
    background:url(../images/address-icon.png) no-repeat;
    display:block;
    height:43px;
    padding:10px 0 0 56px;
}

#contact span.phone {
    background:url(../images/phone-icon.png) no-repeat;
    display:block;
    height:43px;
    padding:10px 0 0 56px;
}

::-webkit-input-placeholder {
    color: #424950;
}

:-moz-placeholder { /* Firefox 18- */
    color: #424950;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #424950;
}

:-ms-input-placeholder {
    color: #424950;
}

#contact input,
#contact textarea {
    padding:25px;
    display:block;
    margin:0;
    box-shadow:0;
    border:1px solid #424950;
}

#contact textarea {
    height:205px;
}

#contact input[type="submit"] {
    background:#eb901b;
    font-weight:700;
    font-size:14px;
    border-bottom:4px solid #ae6405;
    border-top:0;
    border-right:0;
    border-left:0;
    display:block;
    padding:14px 45px;
    color:#fff;
    margin:20px 14px;
    float:right;
}

.page-template-page-contact #contact {
    background:None;
}

#the-principles li span {
    display:inline-block;
    margin:0 20px 0px 0;
    background:#377fb8;
    padding:10px 0px;
    text-align:center;
    border-radius:30px;
    width:50px;
    height:50px;
    color:#fff;
    float:left;
    font-size:18px;
    font-family: 'Roboto', arial, sans-serif;
}

#the-principles li p {
    float:left;
    display:inline-block;
    width:85%;
    margin-top: 10px;
    text-align: left;
}

#the-principles li {
    display:inline-block;
    overflow:auto;
    width:100%;
}

/* SUB PAGE STYLES
****************************************************/

#subpage-main-header {
    background:#222;
    display:block;
    height:362px;
    width:100%;
    background:url(../images/header-bg.jpg) repeat-x;
}

.page #page-content {
    background:url(../images/subpage-header-bg.jpg) repeat-x top #fff !important;
    display:block;
    padding:60px 0;
    background:#fff;
}

#page-content h1 {
    font-size:40px;
    display:block;
    width:100%;
    text-align:center;
    text-shadow:None;
    color:#363636;
    padding:35px 0;
    font-weight:300;
    margin-top:20px;
}

#subpage-main-header .logo {
    position:relative;
    z-index:20;
}

.ipad {
    display:block;
    height:361px;
    width:100%;
    position:absolute;
    top:0;
    z-index:0;
    background:url(../images/subpage-header-bg.png) no-repeat top center;
}


.ipad h1 {
    display:block;
    text-align:center;
    margin-top:220px;
    position:relative;
}

#page-content h2{
    display:block;
    font-size:30px;
    font-family: 'Roboto', arial, sans-serif;
    font-weight:300;
    text-align:center;
    text-shadow:none;
    color:#333b41;
}

#page-content p {
    text-align:center;
    font-size:18px;
    color:#363636;
    font-family: 'Roboto', arial, sans-serif;
}

#supporter-logos ul li {
    display:block;
    float:left;
    list-style:None;
    margin:20px;
    height:150px;
    width:260px;
    text-align: center;
}

#supporter-logos ul li img {
    max-height:150px;
    margin:0 auto;
    max-width:100%;
    width:auto;
}

#organization {
    display:block;
    border-bottom:1px solid #ccc;
    border-top:1px solid #ccc;
    min-height:91px;
    margin-bottom:30px;
}

#organization p {
    font-size:18px;
    text-align:center;
    font-family: 'Roboto', arial, sans-serif;
    text-transform: uppercase;
    padding:20px 0;
}

.learn-more-list li {
    list-style:none;
}

.orange-bar {
    display:block;
    padding:20px;
    color:#fff;
    font-family: 'Robot', arial, sans-serif;
    font-size:19px;
    margin-bottom:3px;
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #e37634;
}

.orange-bar:hover {
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #ce5f1b;
    color:#fff;
}

.blue-bar {
    display:block;
    padding:20px;
    color:#fff;
    font-family: 'Robot', arial, sans-serif;
    font-size:19px;
    margin-bottom:3px;
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #2474ac;
}

.blue-bar:hover {
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #0d5689;
    color:#fff;
}

.green-bar {
    display:block;
    padding:20px;
    color:#fff;
    font-family: 'Robot', arial, sans-serif;
    font-size:19px;
    margin-bottom:3px;
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #59a262;
}

.green-bar:hover {
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #297732;
    color:#fff;
}

.red-bar {
    display:block;
    padding:20px;
    color:#fff;
    font-family: 'Robot', arial, sans-serif;
    font-size:19px;
    margin-bottom:3px;
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #da6d5b;
}

.red-bar:hover {
    background:url(../images/chevron-arrow-right.png) no-repeat 96% center #bf4935;
    color:#fff;
}

.principle-list {
    display:block;
}

.principle-list li {
    list-style:none;
    font-size:18px;
    color:#444;
    font-family: 'Roboto', arial, sans-serif;
    padding:10px 0;
    min-height:100px;
}

.principle-list li span {
    display:inline-block;
    margin:0 20px 0px 0;
    background:#377fb8;
    padding:10px 0px;
    text-align:center;
    border-radius:30px;
    width:50px;
    height:50px;
    color:#fff;
    float:left;
}

.principle-list li.large-li {
    min-height:150px;
    margin-bottom:20px;
}

.principle-list ul.sublist li {
    min-height: 29px;
    padding:0 !important;
    margin-bottom: 19px !important;
    border-bottom:0;
}



/* FOOTER STYLES 
****************************************************/

.footer {
    display:block;
    height:200px;
    background:#393939;
}

.footer p {
    color:#fff;
    display:block;
    font-size:16px;
    text-align: center;
    margin-top:80px;
}

/* RESPONSIVE STYLES
****************************************************/

.mobile-nav {
    display:none;
}

.mobile-hint {
    display:none;
    font-size:14px;
    margin:20px auto;
    font-style:italic;
    color:#555;
}

#resources .mobile-hint {
    color:#fff;
}

@media only screen and (max-width: 40em) {

    .mobile-hint {
        display:block;
    }

    .mobile-nav {
        display:block;
    }

    .home .nav-wrapper {
        display:none;
    }

    .nav-wrapper {
        display:none;
    }

    a.mobile-menu-toggle {
        display:block;
        float:right;
        color:#fff;
        font-size:18px;
        margin:20px 20px 0;
        padding: 0 7px 0 27px;
        background: url(../images/menu-icon.png) no-repeat 0 3px;
    }

    .mobile-nav li {
        display:block;
    }

    .mobile-nav nav a {
        display:block;
        float:none;
        width:100%;
    }

    .supporter-slider .slick-prev, 
    .supporter-slider .slick-next {
        display:none !important;
    }

        .supporter-block {
        width:40%;
        float:left;
        margin-right:10%;
    }
    .supporter-block:nth-child(2n+2) {
        margin-right:0;
    }
    #resources .slick-prev,
    #resources .slick-next {
        display:none !important;
    }
    #the-principles li p {
        width:70%;
    }
    .sublist {
        margin-left:70px;
    }
    #subpage-main-header .logo {
        padding:20px;
    }
    .ipad {
        display:none;   
    }
    #subpage-main-header {
        background:#222;
        display:block;
        height: 162px;
        width:100%;
        background:url(../images/header-bg.jpg) repeat-x;
    }

    .orange-bar {
        background:#e37634;
    }

    .orange-bar:hover {
        background:#ce5f1b;
        color:#fff;
    }

    .blue-bar {
        background:#2474ac;
    }

    .blue-bar:hover {
        background:#0d5689;
        color:#fff;
    }

    .green-bar {
        background:#59a262;
    }

    .green-bar:hover {
        background:#297732;
        color:#fff;
    }

    .red-bar {
        background:#da6d5b;
    }

    .red-bar:hover {
        background:#bf4935;
        color:#fff;
    }
    #resources {
        height:auto;
    }

}

@media (max-width: 450px) {
    #contact span.email-info {
        width: auto;
        font-size: 13px;
    }


}

@media (max-width: 480px) {

    .intro-text p {
        margin-left: 12px;
        margin-right: 12px;
    }

}


/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}