/* =============================================================================
HTML5 CSS Reset Minified - Eric Meyer
========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}


/* =============================================================================
My CSS
========================================================================== */

/* ---- base ---- */



html{ 
	width:100%;
	height:200%;
	background:white;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{ 
	width:100%;
	height:100%;
	background:white;
	font:normal 75% Arial, Helvetica, sans-serif;
}


$text: #ff9;
$link: red; /*rgb(18, 88, 118, 0.8); /*#e34234;*/
$link-hover: red; /*#ba160c;*/
$background: #008d23;





#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	background: $background
}



.text {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
	color:  	#F0F8FF;
	max-width: 90%;
	padding: 2em 3em;
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0px 0px 2px #131415;
	font-family: 'Open Sans', sans-serif;
}

h1 {
	margin-top: 4px;
	font-size: 2.25em;
	font-weight: 700;
	letter-spacing: -1px;
	text-align: center;
}
h2 {
	margin-top: 30px;
	font-size: 2.25em;
	font-weight: 700;
	letter-spacing: -1px;
	text-align: center;
}
h2.gal {
}

a {
	color: rgb(18, 88, 118, 1);
}
a:visited {
	color: rgb(18, 88, 118, 0.75);
	transition: 0.25s;
}

a:hover {
	color: rgb(18, 88, 118, 0.5);
}


.hero-image {
	height: 50%; 
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


ul {
	margin-bottom: 25px;
	padding: 25px 50px 0px 0px;
	position: relative;
	left: 50%;
}

li {
	padding-top: 10px;
	color: black;
	font-size: 1.5em;

}

li a {
	color: $link;
}
li a:visited {
	color: $link;
}

li:hover {
}
li a:hover {
	color: $link-hover;
}

#quotescontainer {
	width: 100%;
	height: 25%;
	font-size: 12px;
	overflow: hidden; /* contain floated elements */
	background: #ccc;

}
#quotescontainer > div {
	float: left;
	height: 100%;	
	width: 33.33333%;
}
#quotesleft {
	background-color: #b7ccd5;/*#a0bcc8;*/
}
#finalcenter {	
	width: 100%;
	height: 50%;
	background-image: url(../DSC_3391.JPG);
	background-size: cover;
	background-origin: content
}
#quotescenter { 
	background-image: url(../DSC_3391.JPG);
	background-size: cover;
	background-origin: content
}

.quotesright img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.imgbox {
	height: 100%;
}

.img-text {
	position: relative;
	top: 25%;
	left: 42%;
	color: black;
	background: rgba(183, 204, 213, 0.4);
	font-size: 12px;
	max-width: 20%;
}

.img-text2 {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%,-50%);
	color:  	#F0F8FF;
	max-width: 90%;
	padding: 10px;
	background: rgba(0, 0, 0, 0.4);
	text-shadow: 0px 0px 2px #131415;
	font-family: 'Open Sans', sans-serif;
}
.center-fit {
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}

#quotescontainer2 {
	width: 100%;
	height: 25%;
	font-size: 12px;
	background: #a0bcc8;

}
#quotescontainer2 > div {
	float: left;
	height: 100%;	
	width: 33.33333%;
	background-color: #a0bcc8; /*125876;/*#a0bcc8;*/
}
#quotescontainer3 {
	width: 100%;
	height: 30%;
	font-size: 12px;
	overflow: hidden; /* contain floated elements */
	background-color: #FFFFFF;
}
#quotescontainer3 > div {
	float: left;
	height: 100%;	
	width: 50%;

}
#quotesleft3 {
	position: relative;
	top: 25%
}
/* ---- particles.js container ---- */

#particles-js{
	width: 100%;
	height: 100%;
	background-color: #125876;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

@media screen and (max-width: 800px) {
	#finalcenter{
		height: 500px;
		margin-top: 10vmin;
	}
	.img-text {
		top: 25vh;
	 	top: calc(var(--vh, 1vh) * 25); 
		left: 42%;
		color: black;
		background: rgba(183, 204, 213, 0.4);
		font-size: 12px;
		max-width: 25%;
	}
	#quotescontainer3{
		height: 350px;    
	}
	#quotescontainer3 > div {
		float: left;
		height: 50%;	
		height: 100px;
		width: 100%;

	}
	#quotesright3{
		padding: 0;
		margin: 0;
	}
	h2 {
		
		margin-top: 10px;
	}
	li {
		padding-top: 0px;
	}
	ul {
		padding: 0 0 0 0;
		margin-bottom: 0px;
	}
	#quotescontainer2 {
		overflow: hidden;
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100); 

	}
	#quotescontainer2 > div {
		height: 50%;
		width: 100%;
	}
	.hero-image {
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100); 
		 
	}	
	.text {
		top: 50vh;
		top: calc(var(--vh, 1vh) * 50);
	}
	#particles-js{
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
	}
} /* End Media Screen */

	p.main-p {
		padding: 50px 200px 50px 200px;
		text-align: center;
		font-size: 20px ;
	}
	@media screen and (max-width: 800px) {
		p.main-p {
			padding: 0 0 0 0;
			width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
		}
	}

	hr.style-one { border: 0; height: 1px; background: #333; background-image: linear-gradient(to right, #ccc, #333, #ccc); position: relative; top:0px;}