body{
	margin:					0px;overflow-x: hidden;
	/*padding-top: 			85px; this is because I had the top nav as fixed so all content would be under the top nav rather than covered by it */
}
header{
	width:					100%;
}
header.home{
	/*box-shadow: 5px 5px 15px #ccc;*/
    position: relative;
}
header.contact{
	padding-top: 			10px;
    padding-bottom: 		10px;
	box-shadow:				5px 5px 15px #eee;
}
.img-bg{
	background-repeat: 		no-repeat;
	width:					100%;
	position:				relative;
}
h1{
	font-family: 			'open sans', sans-serif;
	z-index:				100;
	font-size:				40px;
	color:					#365969;
	text-align:				center;
}
h1.main-title{text-align:left;font-size:22px;}
h2{
	font-family: 			'Cabin', sans-serif;
	font-size:				30px;
	color:					#7bc8ec;
	text-align:				center;
}
h3{
	font-family: 			'Cabin Condensed', sans-serif;
	font-size:				25px;
	color:					#365969;
	text-align:				center;
	font-weight: 			500;
}

p{
	font-family: 			'Titillium Web', sans-serif;
	font-size:				16px;
	color:					#616161;
	text-align:				left;
	font-weight:			400;
	-ms-word-break: 		keep-all;
	word-break: 			keep-all;
}
p.fixed-phrase{
	position:				fixed;
	bottom:					10px;
	left:					20px;
	z-index:				1000;
	font-family: 			'Titillium Web', sans-serif;
	text-align:				left;
	color:					#616161;
}
p.small{
	font-size:				14px;
	font-weight:			700;
	color:					#888;
	margin:					0px;
}
p.sub-title{
	font-size:				20px;
	color:					#fff;
	font-weight: 500;
}
.small-hr{border-bottom: solid 3px; border-top: none;width:50px;float: left; border-color: #365969;}
.center{
	text-align:				center;
	margin:					auto;
}
.left{
	text-align:				left;
}
.right{
	text-align:				right;
}
.white{
	color:					#fff!important;
}
.black{
	color:					#000!important;
}
h1.img-title{
	color:					#ffffff;
}
h2.sub-title{
	margin-top: 			-25px;
	color:					#ffffff;
}
.container-img {
	position: 				relative;
	text-align: 			center;
	padding: 				0px!important;
}
.over-img{
	background-color:		rgba(29,161,160,0.95);
	text-align:				center;
}
.container-over-img{position:relative;width:100%;height:100%;/*background: linear-gradient(to right , rgba(0,0,0,0.4) , rgba(0,0,0,0.1));*/}
.over-img-2{position:absolute;bottom:50px;left:20px;max-width:700px;padding:10px;}
.over-img-2 h1{color:#fff;}
.over-img-2 h2{color:#fff;text-align:left;font-size:25px;font-weight: 400;}
.grey{
	background-color:		#ebefec;
}
.blue{background-color: #94c6d3;}
.blue h2{color: #365969!important;}
.blue p{color: #fff;font-weight: 600;}
section{
	margin:					auto;
	display:				block;
	width:					80%;
	padding-top:			20px;
	padding-bottom:			20px;
	text-align: 			center;
}


.section-nav{width:98%!important;text-align: right;}
/* Add a background color to the top navigation */
.first-icon{
	float:					left;
	padding:				0px;
	margin:					0px;
}
.top-logo{height:70px;margin:5px;}
.topnav {
	top:					0!important;
    overflow: 				hidden;
	background-color:		#ffffff;
	text-align:				right;
    z-index: 				100;
	width: 					100%;
	position: relative;
}
/* Style the links inside the navigation bar */
.topnav a {
    display: inline-block;
    color: #444444;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Cabin', sans-serif;
    font-weight: 400;
    margin: 3px;
}

/* Change the color of links on hover */
/*.topnav a:hover {
    background-color: 		#ddd;
    color: 					black;
}*/

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon 					{display: none;}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1100px) {
  .topnav a:not(:first-child) 	{display: none;}
  .topnav a.icon 				{float: right;display: block;font-size: 25px;background-color: #93272c;color: #f1f1f1;padding: 5px 10px;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1100px) {
  .topnav.responsive 			{position: relative;z-index: 10000;text-align:center;}
  .topnav.responsive a.icon 	{position: absolute;right: 0;top: 0;}
  .topnav.responsive a 			{float: none;display: block;text-align: center;z-index: 10000;}
  .first-icon					{float: none;text-align:center;height:70px;}
  .topnav						{text-align:center;}
}
.underline{
	vertical-align: 			middle;
    -webkit-transform: 			perspective(1px) translateZ(0);
    transform:					perspective(1px) translateZ(0);
    box-shadow: 				0 0 1px transparent;
    position: 					relative;
    overflow: 					hidden;
}
.underline:before {
    content: 					"";
    position: 					absolute;
    z-index: 					-1;
    left: 						0;
    right: 						100%;
    bottom: 					0;
    background: 				#365969;
    height: 					2px;
-webkit-transition-property:	right;
    transition-property: 		right;
-webkit-transition-duration:	0.3s;
    transition-duration: 		0.3s;
-webkit-transition-timing-function:ease-out;
    transition-timing-function: ease-out;
}
.underline:hover:before, .underline:focus:before, .underline:active:before {
  right: 0;
}
/* Buttons and links */
a.read-more{font-family: 'Titillium Web', sans-serif;font-size:18px;text-align:left;color:#4ccbf2;}
a.read-more:hover{transform: scale(1.1);transition: 0.5s ease;}
.btn{
	background-color:		#7bc8ec;
	padding:				15px 20px;
	margin:					15px;
	border:					none;
	color:					#fff;
	font-family: 			'cabin', sans-serif;
	font-size:				16px;
	cursor:					pointer;
}
.btn:hover{
	background-color:		#94c6d3;
	transition:				all .5s ease;
}
.btn:focus{outline:none;}
.btn-white{
	background-color:		#fff;
	padding:				15px 20px;
	margin:					10px;
	border:					none;
	color:					#365969;
	font-family: 			'cabin', sans-serif;
	font-size:				16px;
	cursor:					pointer;
}
.btn-white:hover{
	background-color:		#7bc8ec;
	color:					#fff;
	transition:				all .3s ease;
}
.general-img{
	width:					100%;
	text-align:				center;
}
.icons{
	width:					50%;
	max-width:				200px;
	margin:					auto;
}
.fact-box-home{
    padding: 15px;
    margin-top: 10px;
	margin-bottom:20px;
}
.fact-box{
    background-color: #94c6d3;
    padding: 15px;
    margin-top: 10px;
    z-index: 100;
    overflow: hidden;
	border-radius: 25px;
	margin:10px;
}
.fact-box p{color:#fff;}
.fact-box h3{color:#fff;}
.img-zoom {position: relative;overflow: hidden;}
.img-zoom img{transition: all 0.5s ease;}
.img-zoom:hover img{transform:scale(1.2);}
.border{transition:all 0.5s ease;max-width:300px;}
.border:hover{box-shadow: 5px 5px 15px #ccc;;padding:10px;border-radius: 25px;}
.border:hover p{color: #fff;}
.scale:hover{transform:scale(1.2);transition: all .5s ease;}
.number{font-family: 'cabin', serif;font-size:60px;color:	#7bc8ec;font-weight:700;}
.press{
	padding:			15px;
	margin:				20px!important;
	background-color:	#fff;
	margin:				auto;
	width:				100%;
	max-width:			350px;
	min-width:			250px;
	border-radius:		25px;
	box-shadow:			5px 5px 15px #ccc;
}
.line-separator{width:50%;min-width:150px;max-width:800px;display:block;margin:auto;}
/* Footer __________________*/
footer{
	background-color:		#365969;
	padding:				20px;
	font-family: 			'Cabin Condensed', sans-serif;
	font-size:				18px;
	text-align:				left;
	font-weight:			200;
}
footer p{
	font-family: 			'Cabin', sans-serif;
	color:					#fff;
	text-decoration:		none;
	line-height: 			25px;
}
footer a:link{
	color:					#fff;
	text-decoration:		none;
	display: block;
	padding:5px;
	margin:5px;
}
footer a.social-media-footer{
	display:inline;
	padding:0px;
}
footer a:visited{
	color:					#fff;
	text-decoration:		none;
}
footer a:hover{
	color:					#ccc;
}
footer section{
	width:					90%;
	text-align: left;
}
.darker{
	background-color: #284450;
    padding: 3px 15px 3px 15px;
    border-radius: 5px;
}
/* Form _________________________________________________________*/
form{
	text-align:			center;
    margin: 			auto;
    width: 				90%;
}
input{
	background-color:	rgba(255,255,255,0);
	float:				left;
}
.input{
	width:				100%;
	height:				25px;
	border:				solid 0.5px #ccc;
	background-color:	#eee;
	padding:			5px;
}
.radio{
	text-align:			left;
	font-weight:		400;
	font-family: 		'Roboto Condensed', sans-serif;
}
.message{
	width:				100%;
	height:				80px;
	padding-top:		10px;
	border:				solid 0.5px #ccc;
	background-color:	#eee;
	padding:			10px;
	font-family: 		'Roboto Condensed', sans-serif;
	font-size:			16px;
}
.send{
	font-family: 		'Fira Sans Condensed', sans-serif;
	color:				#fff;
	padding:			10px 20px;
	background-color:	#7bc8ec;
	font-size:			20px;
	border:				none;
	margin-top:			15px;
	margin-bottom:		15px;
	cursor:				pointer;
	float: none;
	width: 100%;
}
.send:hover{
	border-bottom:		none;
	background-color:	#398288;
}


/* The container */
.container {
    display: 			block;
    position: 			relative;
    padding-left: 		35px;
    margin-bottom: 		12px;
    cursor: 			pointer;
    font-size: 			22px;
    -webkit-user-select:none;
    -moz-user-select:	none;
    -ms-user-select: 	none;
    user-select: 		none;
	text-align:			left;
	font-weight:		400;
	font-family: 		'Roboto Condensed', sans-serif;
}
/* END FORM ______________________________________________________________________________________*/

a:link{
	text-decoration:none;
}
.link-header a:hover{
	transform:scale(1.1);
	color:		#515151;
}

.lead-img-2{
	display:none;
}
/* Results Tabs */
* {box-sizing: border-box}

/* Style the tab */
.tab {
    width: 30%;
    height: auto;
}

/* Style the buttons inside the tab */
.tab button {
    display: block;
    background-color: #7bc8ec;
    color: #fff;
    padding: 25px;
    width: 100%;
    border: solid 0.5px #fff;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #68b6db;
	transform:scale(1.05);
}

/* Create an active/current "tab button" class */
.tab button.active {
    background-color: #7bc8ec;
}

/* Style the tab content */
.tabcontent {
	float:left;
	background-color:#fff;
    padding: 0px 12px;
    width: 70%;
    border-left: none;
    height: auto;
	box-shadow:5px 5px 15px rgba(0,0,0,0.1);
}
/* / tabs */
/* MEDIA QUERIES */
@media screen and (max-width: 1000px) {
	.padded-box{padding:0px;}
	.sidebar-display{display:none;}
	h2{font-size:22px;}
}

@media screen and (max-width: 915px) {
	.sidebar{margin-top:350px;}
}
@media screen and (max-width: 700px) {
	.lead-img-1{display:none;}
	.lead-img-2{display:block;}
}	
@media screen and (max-width: 650px) {
	.container-over-img{background-color: rgba(0,0,0,0.3);}
}
@media screen and (max-width: 550px) {
	.top-logo{height:50px;margin:5px;}
	.over-img-2{bottom:5px;}
	.over-img-2 h1{font-size:27px;}
	.over-img-2 h2{font-size:20px;}
}


@media screen and (max-width: 480px) {
	h1{font-size:30px;font-size: 25px;margin-bottom: 5px;}
	h2{font-size:20px;}
	.over-img-2 h1{font-size:25px;}
	.over-img-2 h2{font-size:18px;}
	h3{font-size:20px;}
	h2.sub-title{margin-top:0px;}
	p{font-size:16px;}
	footer{font-size:14px;}	
	.top-logo{height:40px;margin:3px;}
	section{width:90%;padding-top:10px;padding-bottom:10px;}
}
@media screen and (max-width: 350px) {
	.top-logo{height:40px;margin:5px;}
	.over-img-2 h2{font-size:16px;}
}
