@charset "utf-8";
/* CSS Document */







p {
    font-family: 'Montserrat', sans-serif;
    line-height: 150%;
}

h3{ font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 25px;}
h4 {font-family: 'Montserrat', sans-serif; font-weight: 300; font-size:15px; color: #008fd5;}

.Header { 
background-color: #5b5f76;
height:7em;
width:100%;
margin:0;padding:0
}


.coverBanner {
background-image: url("../images/1forALL-hero_001.jpg");
height: 38vh;
background-color: #fff;
display: flex;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-position: 50% 55%;
background-size: cover;
background-repeat: no-repeat;
border-bottom: 5px solid #e5bb65;}


.charityBanner { 

    height:35vh;

    padding-top:30px;
    padding-bottom:30px;

background-color: #fff;
max-width: 1920px;
margin:auto;

margin-bottom: 3vh;

}


    .CIRHand{
    
   
    width:70%;
    
    }



    .charityBanner h3 {

        padding-top: 2em;
    }

.charityBanner b {
color: #F05A22;}




.blue {
background-color: #008fd5;

border-bottom: 5px solid #5a5e75;

margin-top:3vh;

}

.blueContent {
max-width: 1920px;

margin:auto;
}

.blue h1 {




margin-top:0;

padding-top:1em;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 5em;
color: white;



}


.blue p {
    color: white;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}

div#p1 { 
width: 40%; 
float: left; 
padding-left: 15em; 
padding-right:2em;}

div#p2 {
margin-left: 20%;
font-size: 14px; 
padding-left: 2em; 
padding-right:15em; }

div#p1, div#p2 {
display: table-cell;
}

.hearts {
width:50px;}
/*.blue iframe {float:left; padding-left: 16em; padding-top:7em;}*/

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
box-sizing: border-box;
max-width: 1920px;	
}

.video-container iframe {
position: absolute;
width: 30%;
height: 30%;
float:left; 
padding-left: 15em; 
padding-top:5em;
}


.quote {
float:right;
width:30%;
padding-right:15em;
padding-top:6em;
min-width: 300px;
max-width: 560px;
z-index: 1;}






.CharityTitle h1 {
    margin-top: 0;
    padding-top: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 4em;
    color: black;
    margin-bottom:1em;
}

.wrapper { 
padding-top:3em;
padding-left:15em;
box-sizing: border-box;
z-index: -1; 
height:930px;
overflow: hidden;}

.wrapper p {
min-width: 300px; 
max-width: 500px;
box-sizing: border-box;
margin-left: 0;}

.wrapper h4 {
box-sizing: border-box;
overflow:auto;}

.stripe {
border-bottom: 2px solid #D7D7D7;
width: 50px;}


.video-container2 {	
max-width: 1920px;
display: inline;}

.video-container2 iframe {
padding-right:10em;
width: 40%;
height: 40%;
position: absolute;
transform: translateY(-250px);
margin-left:40em;
margin-top:-6em;
max-width: 800px;	
}

.video-container3 {	
max-width: 1920px;
display: inline;}

.video-container3 iframe {
padding-right:10em;
width: 40%;
height: 40%;
position: absolute;
transform: translateY(-390px);
margin-left:40em;
max-width: 800px;
}


hr { 
opacity: 0.2;
}



.recognition { 

background-color: #5a5e75; 
border-top: 5px solid #008fd5; }

.recognition p { 
color:white;
}

.wrapper3 img {
    
    padding: 3vh;



}




#Patron_Award_Logo {
    margin-top: 4vh;
}


#Benefactor_Logo {
    margin-top: 5vh;
}



#Benevolent_Logo {
    margin-top: 3vh;
}


.recognition2 { height: 80px; 
background-color: #5a5e75; 
border-bottom: 5px solid #008fd5; }













@media screen and (max-width: 1024px) {



    .charityBanner {
        height:35vh;
    }





    .CIRHand {
       
        width: 100%;
    }
        
        .blue h1 {
    
     font-size: 3em;
    
    }


    .CharityTitle h1 {
        margin-top: 0;
        padding-top: 1em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 3.5em;
        color: black;
        margin-bottom: 1em;
    }



    #Patron_Award_Logo {
        margin-top: 3vh;
    }


    #Benefactor_Logo {
        margin-top: 4vh;
    }



    #Benevolent_Logo {
        margin-top: 3vh;
    }


}

@media screen and (max-width: 824px) {

    .charityBanner {
        height: 170vh;
    }
}


@media screen and (max-width: 813px) {

    .charityBanner {
        height: 190vh;
    }
}



@media screen and (max-width: 769px) {


    .charityBanner {
        height: 120vh;
    }


    .blue h1 {
        font-size: 2.5em;
    }



    .CharityTitle h1 {
        margin-top: 0;
        padding-top: 1em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 2.5em;
        color: black;
        margin-bottom: 1em;
    }


}


@media screen and (max-width: 737px) {

    .charityBanner {
        height: 140vh;
    }
}


@media screen and (max-width: 732px) {

    .charityBanner {
        height: 140vh;
    }
}



@media screen and (max-width: 641px) {

    .charityBanner {
        height: 140vh;
    }

}


@media screen and (max-width:479px) {

    .charityBanner {
        height: 120vh;
    }

    .blue h1 {
        font-size: 1.2em;
    }



    .CharityTitle h1 {
        margin-top: 0;
        padding-top: 1em;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 1.2em;
        color: black;
        margin-bottom: 1em;
    }


}



@media screen and (max-width:320px) {

    .charityBanner {
        height: 130vh;
    }

   
}