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

html, body {
  margin: 0;
  scroll-behavior: smooth;
}



a:visited {
	color: #467EA3;
}

p {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}



.navbar {
	background-color:#FFFF36;
	text-align: center;
	color: #467EA3;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
		

}

.navbar a {
	text-decoration: none;
	padding:20px;
}

.hero {
	
	background-image: url("images/herobg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-positon: center;
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
	justify-content: center; 
    align-items: center;
	
}

.hero .hero2container .hero2middlecontainer p {
	font-size:25px;
}

.heroheadertext {
	width:80%;
}

.bookimage {
	width:90%;
	padding-bottom:100px;
}


.hero2container {
	background-image: url("images/herobg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-positon: center;
	width: 100%;
	height:auto;
	display: flex;
	text-align: center;
    justify-content: center; 
    align-items: center;
}

.hero2middlecontainer {
	width:70%;
	height:auto;
	
}



.hero a {
	color: white;
	text-align: center;
}





.hero p {
	color: #fff;
	padding-bottom: 0x;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 25px;
	line-height: 35px;
}





/*** ABOUT ****/


.aboutcontainer {
	width:100%;
	height:auto;
	display: flex;
	text-align: center;
    justify-content: center; 
    align-items: center;
}

.aboutinnercontainer {
	width:40%;
	height:auto;
	}


.about {
	background-color: #153851;
	text-align: center;
}

.about h2 {
	color: white;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding:50px;
	line-height: 35px;
}

.about p {
	color: white;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	line-height: 30px;
}

.text-container{
	padding-bottom:200px;
}


.bugdivider {
	background-image: url("images/bugdivider.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-positon: center;
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
}

.dividerbugs {
	width:80%;
	height:auto;
}


/*** RESOURCES ****/


.resources {
	background-color: #FF6D1F;
	text-align:center;
	float:left;
	width:100%;
	padding-bottom: 100px;
}

.resources p {
	color: white;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	line-height: 30px;
	padding:20px;
	
}

.resources h2 {
	color: white;
	text-align: center;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding:50px;
	line-height: 35px;
}

.resources a {
	color: #FFFF36;
	text-decoration: none;
}


.resourcescontainer {
	width:100%;
	height:auto;
    display: flex;
    justify-content: center; 
    align-items: center;
}

.middlecontainer {
	width:50%;
	height: auto;
}

.leftcolumn {
	width:40%;
	justify-content: left;
	padding-bottom:25px;	
}

.leftcolumn img {
	width: 75%;
	height: auto;
	float: left;
	padding-bottom: 100px;
}

.rightcolumn {
	width: 60%;
	padding-bottom: 100px;
	text-align: left;
	float: left;
}



/*** CONTACT ***/

.contactcontainer {
	width:100%;
	height:auto;
	display: flex;
	text-align: center;
    justify-content: center; 
    align-items: center;
}

.contactinnercontainer {
	width:50%;
	height:auto;
	}




.contact {
	background-color: #FFFF36;
	text-align:center;
	float:left;
	width:100%;
	padding-bottom: 100px;
}

.contact img {
	padding-top: 100px;
}

.contact h2 {
	color: #467EA3;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	padding:50px;
	line-height: 35px;
}

.contact p {
	color: #467EA3;
}

/**** iPad Screen ****/

@media only screen and (min-width: 810px) and (max-width: 1080px) {
	
	.navbar p {
		font-size: 30px;
	}

	
	.hero .hero2container .hero2middlecontainer p {
	font-size:35px;
	line-height: 45px;
}
	
	.heroheadertext {
	width:100%;
	}
	
	.hero2middlecontainer {
	width:90%;
	height:auto;
	}
	
	.aboutinnercontainer {
	width:85%;
	height:auto;
	}

	.about h2 {
	padding:50px;
	font-size: 40px;
	line-height: 55px;
}
	
	.about p {
	font-size: 25px;
	line-height: 40px;
}

.middlecontainer {
	width:90%;
	height: auto;
}

.leftcolumn {
	width:40%;
	justify-content: left;
	padding-bottom:25px;	
}

.leftcolumn img {
	width: 65%;
	height: auto;
	float: left;
	padding-bottom: 100px;
}

.rightcolumn {
	width: 70%;
	padding-bottom: 100px;
	text-align: left;
	float: left;
}
	
.contactcontainer {
	width:100%;
	height:auto;
	display: flex;
	text-align: center;
    justify-content: center; 
    align-items: center;
}

.contactinnercontainer {
	width:70%;
	height:auto;
	}



}



/**** iPhone Screen ****/

@media only screen and (min-width: 375px) and (max-width: 812px) {
	
	.navbar p {
		font-size: 30px;
	}
	
	.hero p {
	font-size: 35px;
	line-height: 45px;
    }
	
	
	
	.aboutinnercontainer {
	width:85%;
	height:auto;
	}
	.about h2 {
	padding:50px;
	font-size: 40px;
	line-height: 55px;
}

.about p {
	font-size: 25px;
	line-height: 35px;
}
	
	
.middlecontainer {
	width:100%;
	height: auto;
}

.leftcolumn {
	width:100%;
	justify-content: left;
	padding-bottom:25px;	
}

.leftcolumn img {
	width: 100%;
	height: auto;
	float: left;
	padding-bottom: 100px;
}

.rightcolumn {
	width: 100%;
	padding-bottom: 100px;
	text-align: left;
	float: left;
}
	
	
	.contactcontainer {
	width:100%;
	height:auto;
	display: flex;
	text-align: center;
    justify-content: center; 
    align-items: center;
}

.contactinnercontainer {
	width:90%;
	height:auto;
	}

	
	
}