html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

body {
		margin:0px;
		font-family: 'Lora', serif;
		font-size:1em;
	}
	
.vertical	{
position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.eyebrow{
	height:70px;
	background-color:#368890;
	color:#ffffff;
	padding:15px;
	width:100%;
}

.question{
	padding-bottom:10%;
}

.answerbtn {
	font-family: 'Basecoat-Bold';
	font-size:1.25em;
	color:#ffffff;
	background-color:#ffffff;
	border-style: solid;
	border-width:1px;
	border-color:#000000;
	width:60%;
	letter-spacing:1px;
	height:auto;
	padding-left:10px;
	padding-right:10px;
	padding-top:20px;
	padding-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	font-weight:normal;
}

.backanswerheadline{
	font-family: 'Basecoat-Bold';
	font-size:1.5em;
	padding-bottom:5%;
	letter-spacing:1px;
	line-height:1em;
	font-weight:normal;
}

.backanswer{
	font-family: 'Basecoat-Regular';
	font-size:1em;
	padding-bottom:2%;
	font-weight:normal;
}

a {
	color:#333333;
	text-decoration: none;
}

a:hover {
	color:#18B5D7;
	text-decoration:none;
}

a:active {
	color:#18B5D7;
	text-decoration:none;
}

.linksbelow {
	color:#ffffff;
	text-decoration: none;
	line-height:29px;
}

.linksbelow:hover {
	color:#18B5D7;
	text-decoration:none;
	cursor:pointer;
}


.animation {
margin-left:auto;
margin-right:auto;
width:100%;
display:block;
padding-top:10px;
text-align: center;
}

.eyebrowcontainer{
	margin-left:3%;
	width: 310px;
width: 310px;
float: left;
}

.eyebrowtext{
	height:auto;
	width:auto;
	background-color:#368890;
	color:#ffffff;
	font-size:1em;
	padding:8px;
	float:left;
	font-family: 'Basecoat-Regular';
}

.eyebrowtext2{
	height:auto;
	width:auto;
	background-color:#368890;
	color:#ffffff;
	font-size:1em;
	padding:8px;
	float:right;
	margin-right:20px;
	font-family: 'Basecoat-Regular';
	visibility:hidden;
}
		
.fish{
float:right;
width:79px;
height:35px;
}

.fish:hover{
filter: brightness(0.8);
}

.logo {
	height:350px;
	display: block;
	width:500px;
	height:auto;
    margin-left: auto;
    margin-right: auto;
	padding-top:80px;
}
		
img {
}


.container2 {
    width: 100%;
    padding-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	display:none;
}

.container3 {
    width: 100%;
    padding-bottom:20px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:50px;
}




.below {
	padding: 300px;
	height:400px;
	width:100%;
}

.section2 {
font-family: 'Basecoat-Bold';
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:2em;
font-weight:bold;
padding-bottom:50px;
color:#000000;
text-transform:uppercase;
}

html, body, div, ul {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}


.container {
    width: 100%;
    height: auto;
	clear:left;
}

.card {
	width: 33.33333%;
	height: 500px;
	float:left;
	cursor:pointer;
}

.card2 {
	width: 25%;
	height: 500px;
	float:left;
	cursor:pointer;
}

     .front, .back {
        padding: 10px;
      }

      .front {
		  color:#ffffff;
		  font-family: 'Basecoat-Regular';
		  letter-spacing:1px;
		  font-size:1.5em;
		  padding-top:50px;
		  padding-left:50px;
		  padding-right:50px;

      }
      .back {
		border: 1px black solid;
		color:#000000;
		margin-left:auto;
		margin-right:auto;
		text-align:center;
		padding-left:50px;
		padding-right:50px;
		z-index:1;
		vertical-align: middle;
		}
	  
	  .section{
	  margin-left:auto;
	  margin-right:auto;
	  display:block;
	  text-align:center;
	  padding:20px;
	  }
	
	#img_wrap1 #static1, #img_wrap1:hover #animated1 {
    display: inline;
}
#img_wrap1 #animated1, #img_wrap1:hover #static1 {
    display: none;
}

#img_wrap2 #static2, #img_wrap2:hover #animated2 {
    display: inline;
}
#img_wrap2 #animated, #img_wrap2:hover #static2 {
    display: none;
}
	  
	    .section3{
	  margin-left:auto;
	  margin-right:auto;
	  display:block;
	  text-align:center;
	  }
	  
	      .section4{
	  width:auto;
	  padding-top:50px;
	  height:auto;
	  }
	  
.section5{
font-family: 'Basecoat-Bold';
text-align:center;
font-size:2em;
padding-top:75px;
margin-top:50px;
margin-bottom:50px;
color:#000000;
clear:left;
display:none;
}
	  
	  .btn {
  font-family: 'Basecoat-Bold';
  color: #ffffff;
  font-size: 1.5em;
  background: #368890;
  padding: 17px 23px 14px 23px;
  text-decoration: none;
  width:auto;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  cursor:pointer;
  text-align:center;
}

.btn:hover {
  background: #327980;
  text-decoration: none;
}

 .textArea {
  font-family: 'Basecoat-Bold';
  font-size:2em;
  padding-bottom:20px;
  padding-top:100px;
  line-height:1.25em;
 }
 
  .textArea1 {
	 font-size:1.2em;
	 font-family:'Basecoat-Light';
	 line-height:1.5em;
 width:50%;
 margin-left:auto;
 margin-right:auto;
 padding-bottom:50px;
 text-align:center;
 }
 
 .textArea2 {
	 font-family:'Basecoat-Light';
	 font-size:1.2em;
	 line-height:1.5em;
 width:50%;
 margin-left:auto;
 margin-right:auto;
 padding-bottom:50px;
 padding-top:30px;
 text-align:center;
 position:relative;
 clear:left;
 }
 
  
 .textArea3 {
	 font-size:1em;
	 line-height:1.5em;
 width:50%;
 height:auto;
 margin-left:auto;
 margin-right:auto;
 margin-top:40px;
 padding-bottom:50px;
 padding-top:150px;
 text-align:center;
 }
.words {
padding-bottom:50px;
}

.words2 {
padding-bottom:50px;
font-size:.6em;
line-height:1.7em;
}
 
 
 .morecolumn {
 padding-bottom:120px;
 }
 
  .waves {
height: 40px;
background-image:url(IMAGES/waves.png);
float:left;
clear:right;
display:block;
width:100%;
background-repeat:no-repeat;
background-position:bottom;
background-size:contain;
 }
 
  .waves2 {
height: 40px;
background-image:url(IMAGES/waves.png);
float:left;
clear:right;
display:block;
width:100%;
background-repeat:no-repeat;
background-position:bottom;
background-size:contain;
-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
 }
 
 .waves3 {
height: 150px;
background-image:url(IMAGES/water2.png);
float:left;
clear:right;
display:block;
width:100%;
background-repeat:no-repeat;
background-position:top;
background-size:contain;
 }
 
   .scene {
height:600px;
margin-top:-500px;
background-image:url(IMAGES/SCENE.png);
float:left;
clear:right;
display:block;
width:100%;
background-repeat:no-repeat;
background-position:bottom;
background-size:contain;
 }
 
.toolkit{
width:100%;
background-color:#0099ab;
background-image:url(IMAGES/192.jpg);
height:auto;
padding-left:30px;
padding-right:30px;
padding-top:30px;
padding-bottom:60px;
display:block;
overflow:visible;
float:left;
clear:both;
}

.toolkitheader {
  font-family: 'Basecoat-Regular';
  letter-spacing:2px;
  text-align:center;
  color:#ffffff;
  font-size:2em;
  padding:6%;
  line-height:1.3em;
}

.toolkitcontainer {
height:auto;
margin-left:auto;
margin-right:auto;
padding-left:10%;
padding-right:10%;
}

.toolcolumn {
  font-family: 'Basecoat-Regular';
  background-color:inherit;
  letter-spacing:1px;
  padding-bottom:100px;
  color:#ffffff;
  font-size:1em;
  height:auto;
  width:50%;
  float:left;
  line-height:3em;
  text-align:center;
}
 
  .footer {
  font-family: 'Basecoat-Bold';
  color:#000000;
  font-size:1em;
  padding-bottom:70px;
  padding-top:70px;
  padding-left:80px;
  padding-right:80px;
  background: #fffffff;
  text-transform:uppercase;
  height:auto;
  display:block;
  float:left;
  width:100%;
 }
 
  .footerheadlineleft{
 float:left;
 }
 
 .footerheadlineright{
 float:right;
 }
 .footerleft{
 width:50%;
 float:left;
 margin-top:20px;
 clear:left;
 }
  .footerright{
 width:auto;
 float:right;
 margin-top:20px;
 }
 
 .lalogo {
width: 100px;
height: 100px;
background-image: url(IMAGES/LA2050.jpg);
margin-top: 30px;
text-align: center;
clear: none;
float: none;
margin: auto;
 }
 
  .pacoimalogo {
width: 100px;
height: 86px;
background-image: url(IMAGES/PacoimaBeautiful.png);
background-size: contain;
background-repeat: no-repeat;
text-align: center;
float: left;
margin-top:4px;
margin-left:40px;
 }
 
   .htblogo {
width: 100px;
height: 86px;
background-image: url(IMAGES/htblogo.png);
background-size: contain;
background-repeat: no-repeat;
text-align: center;
margin-top:4px;
float: left;
margin-right:40px;
margin-top:20px;
 }
 
   .pavalogo {
width: 100px;
height: 100px;
background-image: url(IMAGES/PAVA.png);
background-size: contain;
padding-right: 50px;
background-repeat: none;
text-align: center;
float: left;
 }

 .specialthanks {
  font-family: 'Basecoat-Bold';
  background-image:url(IMAGES/192.jpg);
  color:#000000;
  font-size:1em;
  padding-bottom:120px;
  padding-top:70px;
  padding-left:80px;
  padding-right:80px;
  text-transform:uppercase;
  height:auto;
  display:block;
  float:left;
  width:100%;
 }
 
 .logocontainer{
 clear:left;
 padding-top:20px;

 }
 
 .logos {
	 background-color:#ffffff;
	 width:14%;
	 float:left;
	 text-align:center;
	 padding-top:2%;	 
	 padding-bottom:2%;	 
 }
 
 .videos {
 margin-left:auto;
 margin-right:auto;
 height:100%;
 clear:left;
 text-align:center;
 }
 

@media screen and (min-width: 800px) and (max-width: 1000px) {
 .backanswerheadline{
	font-size:1em;
	line-height:1.1em;
}

.front {
	font-size:1em;
	line-height:1.4em;
}

.backanswer{
	font-size:.8em;
}

.answerbtn{
	font-size:.8em;
}

.card {
	width: 33.33333%;
	height: 500px;
	float:left;
	cursor:pointer;
}

.card2 {
	width: 50%;
	height: 500px;
	float:left;
	cursor:pointer;
}
 
 }
 



@media (min-device-width: 375px) and (max-device-height: 800px) {
.card {
	width: 100%;
	height:1100px;
}
.card2 {
	width: 100%;
	height:1100px;
}

.question{
	padding-bottom:10%;
}

.section2 {
font-size:3.5em;
padding-top:50px;
padding-bottom:100px;
font-weight:normal;
}

.logo {
	height:500px;
	width:100%;
    margin-left: auto;
    margin-right: auto;
	padding-top:120px;
	padding-bottom:50px;
}

.ktf {
width:800px;
}

.front{
font-size:3.2em;
 padding-top:75px;
 padding-left:75px;
 padding-right:75px;
}

.back{
font-size:2.5em;
 padding-left:75px;
 padding-right:75px;
 	margin-left:auto;
		margin-right:auto;
		text-align:center;

}

.answerbtn {
	font-size:1.25em;
}


.backanswerheadline{
	font-size:2em;
	padding-bottom:5%;
	letter-spacing:1px;
	line-height:1em;
}

.backanswer{
	font-size:1em;
	padding-bottom:2%;
}



.btn {
  font-size: 1.5em;
}

.textArea {
  font-size:2em;
 }
 
 .textArea1 {
	 padding-top:75px;
	 padding-bottom:50px;
	 font-size:2em;
	  width:75%;
 }
 
.textArea2 {
	 font-size:2em;
	 line-height:1.5em;
	 width:75%;
	  padding-bottom:75px;
}

.toolkit{
width:100%;
background-color:#0099ab;
padding:30px;
}

.toolkitheader {
  letter-spacing:2px;
  font-size:3em;
  padding:6%;
}

.toolcolumn {
  letter-spacing:1px;
  font-size:2em;
  width:100%;
  line-height:2em;
}

}