/*STYLES FOR HOME PAGE START HERE*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

*{
 margin:0px;
 padding:0;
}

html{
	height:100%;
	overflow-x:hidden;
	overflow-y:scroll;
	-webkit-font-smoothing: antialiased !important;
}

body{
	text-align:center;
	height:100%;
}

.header{
	width:100%;
	height:auto;
	min-height:70px;
	padding-bottom:25px;
	position:relative;
}

.logo{
	padding-top:20px;
	width:152px;
	height:46px;
	overflow:hidden;
	margin:0 auto;
	text-align:left;
	z-index:1;
	position:relative;
}

.contact{
	top:10px;
	right:10px;
	width:140px;
	height:auto;
	text-align:right;
	z-index:10;
	position:absolute;
}

.toplinks{
	width:90%;
	max-width:850px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	text-align:left;
	z-index:1;
	position:relative;
}

.toplinks div{
	margin-right:-5px;
	padding:20px 0 10px 0;
	width:16.66%;
	display:inline-block;
	text-align:center;
	position:relative;
}

.sublinks{
	width:90%;
	max-width:400px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	text-align:left;
	z-index:1;
	position:relative;
}

.sublinks div{
	margin-right:-5px;
	padding:20px 0 10px 0;
	width:25%;
	display:inline-block;
	text-align:center;
	position:relative;
}

.sublink{
	cursor:pointer;
}

.borderWhite{
	border-bottom:3px solid #fff;
}

.borderBlack{
	border-bottom:3px solid #000;
}

.borderOrange{
	border-bottom:3px solid #f26522;
}

.swiper-slide {
	text-align: center;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

h1{
	font-size:5.5em;
}

h3{
	font-size:1.2em;
	line-height:1.5em;
}

h2{
	font-size:3em;
	line-height:1.5em;
}

.headline{
	font-size:1.5em;
}

.imageGrid{
	width:10%;
	display:inline-block;
	opacity: 0.2;
    filter: alpha(opacity=20);
	z-index:0;
	position:relative;
}

.mainimage1{
	top:-100%;
	left:0px;
	width:100%;
	height:auto;
	z-index:1;
	position:absolute;
}

.mainimage2{
	bottom:0px;
	left:0px;
	width:100%;
	height:auto;
	z-index:1;
	position:absolute;
}

.content1{
	width:90%;
	max-width:980px;
	height:auto;
	min-height:450px;
	display:block;
	overflow:hidden;
	margin:0 auto;
	text-align:left;
	z-index:1;
	text-align:center;
	position:relative;
}

#slider div.slide{
	top:0px;
	left:100%;
	width:100%;
	position:absolute;
}

#slider div.active{
	top:0px;
	left:0px;
	width:100%;
	position:absolute;
}

.footer{
	background-image:url('../images/black-dot.png');
	padding:3px;
	bottom:0px;
	left:0px;
	width:100%;
	height:auto;
	text-align:center;
	z-index:2;
	position:fixed;
}

.hide{
	display:none;
}

.thankyoumessage, .errormessage{
	top:0px;
	right:0px;
	padding:12px;
	vertical-align:top;
	z-index:200;
	position:relative;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.thankyoumessage{
	border:2px solid #00CC00;
	background-color:#C8F7BF;
	color:#00CC00;
}

.errormessage{
	border:2px solid #FF0000;
	background-color:#FCD1D1;
	color:#FF0000;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    margin:0px;
	padding:0px;
	display: block;
	position:relative;
}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
	float: left;
	text-align:center;
	vertical-align:middle;
	padding:0px;
	margin-left: 3.2%;
	position:relative;
}

.fullwidth .col {
	float: none;
	margin-left: 0;
}

/* grid4 col */
.grid4 .col, .grid4a .col {
	width: 22.6%;
}

/* grid3 col */
.grid3 .col {
	width: 31.2%;
}

/* grid2 col */
.grid2 .col {
	width: 48.4%;
}

/* clear col */
.grid4 .col:nth-of-type(4n+1), .grid4a .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) 
{
	margin-left: 0;
	clear: left;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* reset cols to 3-column */
@media screen and (max-width: 740px) {
	/* grid4 */
	.grid4 .col, .grid4a .col {
		width: 31.2%;
	}
	
	.grid4 .col:nth-of-type(4n+1), .grid4a .col:nth-of-type(4n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	
	.grid4 .col:nth-of-type(3n+1), .grid4a .col:nth-of-type(3n+1) {
		margin-left: 0;
		clear: left;
	}

	body{
		font-size:10pt !important;
	}

	h1{
		font-size:2.5em !important;
	}

	h3{
		font-size:1em !important;
	}

	h2{
		font-size:1.4em !important;
	}

	.headline{
		font-size:1em !important;
	}

	.active, .active .col{
		position:relative !important;
	}

	.content1{
		height:auto !important;
	}

	.mobile{
		display:inline;
	}

	.desktop{
		display:none;
	}
}


@media screen and (max-width: 600px) {
	.imageGrid{
		width:20% !important;
	}
}

/* reset cols to 2-column */
@media screen and (max-width: 540px) {
	
	/* grid4 */
	.grid4 .col, .grid4a .col {
		width: 48.4%;
	}
	.grid4 .col:nth-of-type(3n+1), .grid4a .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid4 .col:nth-of-type(2n+1), .grid4a .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	/* grid3 */
	.grid3 .col {
		width: 48.4%;
	}
	.grid3 .col:nth-of-type(3n+1) {
		margin-left: 3.2%;
		clear: none;
	}
	.grid3 .col:nth-of-type(2n+1) {
		margin-left: 0;
		clear: left;
	}

	.logo{
		padding-top:0px;
		top:10px !important;
		left:10px !important;
		position:absolute !important;
	}

	.logo img{
		width:100px !important;
	}

	img.icon{
		width:35px !important;
	}

	.scrollButton{
		width:50px !important;
	}

	
}

@media screen and (max-height: 550px) {

	h1{
		font-size:2.5em !important;
	}

	h3{
		font-size:1em !important;
	}

	h2{
		font-size:1.4em !important;
	}

	img.icon{
		width:45px !important;
	}

	.scrollButton{
		width:60px !important;
	}

	body{
		font-size:10pt !important;
	}

	.headline{
		font-size:1em !important;
	}

	.footer{
		margin-top:100px !important;
		position:relative !important;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width: 380px) {
	/* grid4 */
	.grid4 .col, .grid3 .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}

	.grid2 .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

/* reset cols to fullwidth */
@media screen and (max-width: 320px) {
	/* grid4a */
	.grid4a .col {
		width: 100% !important;
		margin-left: 0 !important;
		clear: none !important;
	}
}

@media screen and (max-width: 990px) {

	.footer2{
		margin-top:100px !important;
		position:relative !important;
	}
}

@media screen and (max-width: 1100px) {

	body{
		font-size:12pt !important;
	}

	h1{
		font-size:3.5em;
	}

	h3{
		font-size:1.3em;
	}

	h2{
		font-size:2em;
	}

	.headline{
		font-size:1.2em !important;
	}

	img.icon{
		width:45px !important;
	}

	.scrollButton{
		width:60px !important;
	}
}
