@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,700;0,900;1,200&family=Open+Sans&display=swap');


@font-face {
    font-family: 'futura-bold';
    src: 
         url('/fonts/futura-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
   
    color:#fff;
    text-rendering: optimizeLegibility; 
	font-family: 'futura-bold', sans-serif;
    position:relative;
    -webkit-font-smoothing: antialiased;
      width: 100%; //fallback
   width: 10vw;
  
   background-color:#24759B;
   
}

.clearfix:after {  content: ".";  display: block; height: 0;  clear: both; visibility: hidden;}
ul {margin:0;padding:0;}
li {list-style:none;margin:0;padding:0;}
textarea, input {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} 
a:link { text-decoration: none; }

.container{
	width:100%;
	
}
input {
    
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

.container{
	max-width:1440px;
	margin:0 auto;
	display: flex;
	
}





.links{	
	margin-left:auto;
	color:#27AAE1;
	text-transform: uppercase;
	font-size: calc(1em + 1.3vw);
	
}
.links ul{
	margin:20px;
	display: flex;
}

.home{
	flex-direction: column;
}
.homeText{
	height:80%;
	padding:20px;

	
}

.homeText{
	display:flex;
	background-image:url('../img/alana.png');
	background-repeat: no-repeat;
	background-position:right;
	background-overflow: visible;
	background-size:  contain;
	background-position: right bottom;
}
.homeText p{	
	
	align-self:flex-end;
	text-transform: uppercase;
	font-size: calc(2.8em + 4vw);
	line-height: calc(.9em + 0.4vw);
	letter-spacing: .3vw;
}
.homeText p span{ display:block;}

.homeText p em{
	font-weight:normal;
	color:#27AAE1;
}


h2{
	text-transform: uppercase;
	font-size: calc(1em + .9vw);

}
.prioritiesPage{
	flex-direction: column;
}
.prioritiesText{
	display: block;
	width:78.34%;
	margin:5% 0% 10% 16.66%;
	padding-bottom:30px;
	
}



.prioritiesText>p{
	margin-bottom: 30px;
	font-family: 'Montserrat', Sans-serif;
	font-size: calc(0.8em + .9vw);
	line-height: calc(1em + 0.4vw);
	}

.priority{
	font-family: 'Montserrat', Sans-serif;
	margin-bottom:30px;
	
}
.priority>p{
	margin:2vw 0;
	font-size: calc(0.8em + .6vw);
	line-height: calc(1.2em + .6vw);
}
.prioritiesText a:link, .prioritiesText a:visited{
	color:#fff;
	font-weight: bold;
	text-decoration: underline;
}
.priority img{
	width:100%;
	margin-bottom:30px;
}

.priority li{
	font-size: calc(.8em + .6vw);
	list-style:disc;margin-top:calc(.5em + .3vw);margin-left:20px;

}
.blogIndex{
		display: block;
	width:78.34%;
	margin:5% 0% 10% 16.66%;
	padding-bottom:30px;
}

.indexPost{
	margin-top:30px;
	font-family: 'Montserrat', Sans-serif;

}
.indexPost a:link, .indexPost a:visited{
	color:#fff;
}
.indexPost a:hover h3{
	color:#27AAE1;
}
.indexPost h3{
	font-family: 'futura-bold';
	margin-left:0;
}
.indexPost p{
	margin-top:10px;
}
a .postNo{
	
	margin-bottom:10px;
	font-size: calc(.5em + .5vw);
	color:#27AAE1;
}

.footer{
	background-color:#002736;
	padding:20px;
	font-family: 'Montserrat', Sans-serif;
	font-style: italic;
	
}
.paidFor{
	font-size: calc(0.6em + 0.6vw);
	
}
.socialBlock{
	
	margin-left:auto;
	
}
.socialBlock ul{
	display:flex;
	margin-bottom: 20px;
}
.address{
	text-align: right;
}
.socialBlock li{
	margin-left:30px;
}
.socialBlock li a{
	display:block;
	background-repeat: no-repeat;
	background-position:right top;
	height: 64px;
	width:64px;
	background-size: 64px 64px;
	text-indent:-9999px;
	
}
.socialFB{
	background-image:url('/img/icon_fb.png');
}
.socialTwitter{
	background-image:url('/img/icon_twitter.png');
}
.socialInsta{
	background-image:url('/img/icon_insta.png');
}
.endorsements{
	
	display:flex;
	justify-content: space-between;
	 align-items: center;
	 	flex-wrap: wrap;
}
.endorsements>div{
	width:28%;
}
.endorsements img{
	width:100%;
}
.contact{
	text-align: right;
	color:#fff;
	font-style: normal;
}
.contact a:any-link{
	color:#fff;
}




video {
  object-fit: cover;
  width: 100vw;
  height:75%;
  position:absolute;
    top: 0;
  left: 0;
}



.subImg img {
  object-fit: cover;
 
  width: 100vw;
  height:75%;
  position:absolute;
  top: 0;
  left: 0;
}

#aboutPage .subImg img {
 object-position: bottom;
  

}

.viewport-header {

	position:relative;
	height:75%;
  
}

nav{
	
	position:absolute;
	top:0;
	
	width:100%;
	text-align: center;
	align-content: center;
}
nav ul{
	display:flex;
	padding:60px 10% 30px 10%;
	justify-content:space-between;
	font-size: 1.4em;
	text-transform: uppercase;
}
nav ul>li{
	display:flex;
	align-items: center;
}
nav a:any-link{
	color:#fff;
	
}
nav .active{
	padding:3px 0;
	border-bottom:solid #00AEEF 5px;
}
.menuBtn{
	display:none;
}
.logoSpace{
	width:284px;
}
.logo {
	text-align: center;
	align-content: center;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.40));
	
}
.logo img{
	
	position:relative;
	width:284px;
	
	margin: 30px auto 20px auto;
	z-index:9999;
	
}


.overlayTitle{
	
	 position: absolute;
	 bottom: 0px;
	  text-align: center;
	width:100%;

	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60));
}
.overlayTitle h1{
	font-size: calc(1.2em + 2vw);
	
	padding: 60px 0;
}
.subBody{
	font-family: 'Montserrat', Sans-serif;
	width:66%;
	max-width:1024px;
	min-width:300px;
	padding:60px 0;
	margin:0 auto;
}
#about .subBody, #running .subBody{
	
	font-size:1.25em;
}
.contribute{
	font-size: 2em;
	margin-bottom:50px;
}
.contribute a:any-link{
	color:#fff;
}
.contribute a:hover{
	color:#00AEEF;
}
.subBody p{
	margin-bottom:30px;
	line-height: 1.4em;
}

.subBody h2{
	font-size: 1.75em;
	display:inline-block;
	font-family: 'futura-bold';
	text-transform: uppercase;
	padding:0.6vw 0.8vw 0.4vw 0.8vw;
	background-color: #264554;
	margin-right:auto;
	margin-bottom:30px;
}
.subBody h3{
	font-size: 1.25em;
	display:inline;
	font-family: 'futura-bold';
	text-transform: uppercase;
}
h4{
	font-family: 'futura-bold';
	font-size: calc(1em + .6vw);
}

.subBody a:any-link{
	color:#fff;
	text-decoration: underline;
}
.advocateBlock{
	min-height:600px;
	background-image:url('/img/alana.png') ;
	background-repeat: no-repeat;
	object-fit: cover;
	background-position: right bottom;
	background-size: 600px;
}
.advocateText{
	padding:80px;
}
.advocateText h2{
	font-size:3em;
	margin-bottom:30px;
	color:#fff;
}
.advocateText p{
	font-family: 'Montserrat', Sans-serif;

	width:60%;
	font-size:1.2em;
	color:#fff;
	margin-bottom:1em;
}
.endorsementsBlock{
	background-color: #eee;
}
.detailPhoto{
	text-align: center;
}
.detailPhoto img{
	width:60%;
	min-width: 300px;
	max-width: 800px;
	
}
.caption{
	text-align: center;
	font-size:.6em;
	color:#eee;
	width:60%;
	min-width: 300px;
	max-width: 800px;
	margin:5px auto;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 896px) { 
	.subImg img {

	  height:60%;

	}
	
	video
	{
		height:60%;
	}
	
	.viewport-header {
	
		height:60%;

	}
	
	.links{
		width:100%;
		 background-color: #264554;
		 font-size: 1em;
	}
	
	.links ul {
		margin:20px auto; background-color: #264554;
	}
	
	.navBox{
		display:none;
		background-color:rgba(36, 117, 155, 0.85);
		
		padding:120px 20px 10px 20px;
		
		right:0px;
		top:0px;
	}
	.menuBtn{
		display:block;
	}
	.menuBtn a{
		display:Block;
		text-indent: -99999px;
		width:40px;
		height:40px;
	}
	.menuBtn{
		position:absolute;
		right:20px;
		top:20px;
		
		background-repeat: no-repeat;
		background-position:left;
		background-size:  contain;
		background-position: left top;
		height:40px;
		width:40px;
	}
	.menuBtn.open{

		background-image:url('../img/menu_open.png');
	}
	
	.menuBtn.closed{

		background-image:url('../img/menu_closed.png');

	}	
	nav ul{
		display:block;
		padding:0 ;
		justify-content:space-between;
		font-size: 1.4em;
		text-transform: uppercase;
	}
	nav ul>li{
		display:block;
		text-align: center;
		align-items: center;
	}
	nav .active{
		padding:0;
		border-bottom:none;
	}
	.logo img{
		width:196px;
		
	}

	
	.homeText{
		height:65%;
		padding-top:0;
	}
	.homeText p span { display:inline;}
	.homeText p{	
		margin:0 auto;
	align-self:flex-start;
	text-align: center;
	font-size: calc(1.5em + 2vw);
	line-height: calc(0.9em + 0.4vw);
	letter-spacing: .3vw;
	}
	
	.donateText p{	
	
	font-size: calc(1.2em + 2vw);
	line-height: calc(0.85em + 0.4vw);
	letter-spacing: .3vw;
	}
	.socialBlock li{
		margin-left:15px;
	}
	.socialBlock li a{
		height: 32px;
		width:32px;
		background-size: 32px 32px;	
	}
	
	.overlayTitle h1{
		
		font-size:1.5em;
		padding: 30px 60px;
	}
	.contribute{
		text-align: center;
	}
	.advocateBlock{
		min-height:300px;
		background-image:url('/img/alana.png') ;
		background-repeat: no-repeat;
		object-fit: cover;
		background-position: center 0px;
		background-size: 300px;
	}
	.advocateText{
		padding:320px 30px 30px 30px;
	}
	.advocateText h2{
		font-size:2em;
		margin-bottom:30px;
		text-align: center;
	}
	.advocateText p{
		width:100%;
		font-size:1.2em;
		color:#00AEEF;
		margin-bottom:1em;
	}
	
}
@media only screen 

and (max-width : 896px) 
and (orientation : landscape) { 
	
	.homeText p{	
	margin:0px;
	align-self:flex-end;
	text-align: left;
	font-size: calc(1.5em + 2vw);
	line-height: calc(0.9em + 0.4vw);
	letter-spacing: .3vw;
	}
	.homeText p span { display:block;}
	.donateText p{	
	width:66%;
	font-size: calc(.9em + 1.2vw);
	line-height: calc(0.8em + 0.4vw);
	letter-spacing: .3vw;
	}

}