@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Slabo+27px);

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ========================================================================== */

html
{
	height: 100vh;
}

body
{
	background: #F0952C;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #000;
	position: relative;
	min-height: 100vh;
   
}

.main-container
{
	border-top: 5px solid #141414;
	height: calc(100vh - 196px);
	position: relative;
	overflow: hidden;
}

.main
{
	height: calc(100vh - 196px);
	position: relative;
}

.wrapper
{
	width: 100vw;
	max-width: 1200px;
	margin: 0 auto;

}


.maintext
{
	width: 45%;
	max-width: 45vw;
	display: inline-block;
	text-align: center;
	position: absolute;
	left: 2%;
	top: 0;
	z-index: 3;
}

.mainimg
{
	width: 53%;
	max-width: 53vw;
	display: inline-block;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}




.mainlogo
{
	background: url("../img/logomain.png")	top center no-repeat;
	max-height: 193px;
	max-width: 244px;
	height: 19.3vw;
	width: 24.4vw;
	background-size: 100% 100%;
	display: inline-block;
	margin: 0 auto;
	display: inline-block;
	margin-top: 8vh;
	margin-bottom: 3vh;
	
}

.introtext
{
	width: 100%;
	font-size: 22px;
	font-weight: 300;
	line-height: 1.4;
	font-family: 'Roboto Condensed', sans-serif;
	font-family: 'Slabo 27px', serif;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.introtext p
{
	text-align: justify;
}

.guysimg
{

	width: 100%;

	max-height: 878px;
	max-width: 866px;
	display: inline-block;
}









.clicksection
{
	height: 73px;
	background: #111111 url("../img/buttonbg.png") center center no-repeat;
	text-align: center;
	display: block;
}

.clicksection a.bigbutton
{
	background: #ffc579; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzU3OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYjlkMjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffc579 0%, #fb9d24 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc579), color-stop(100%,#fb9d24)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffc579 0%,#fb9d24 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffc579 0%,#fb9d24 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffc579 0%,#fb9d24 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffc579 0%,#fb9d24 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc579', endColorstr='#fb9d24',GradientType=0 ); /* IE6-8 */
	
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	
	font-size: 45px;
	text-transform: uppercase;
	text-decoration: none;
	outline: 0;
	line-height: 1.4;
	color: #000;
	padding: 0 15px;
	margin: 0 auto;
	margin-top: 5px; 
	
	display: inline-block;
}

.clicksection a.bigbutton:hover
{
	background: #fb9d24; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiOWQyNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmM1NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #fb9d24 0%, #ffc579 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb9d24), color-stop(100%,#ffc579)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fb9d24 0%,#ffc579 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fb9d24 0%,#ffc579 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fb9d24 0%,#ffc579 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fb9d24 0%,#ffc579 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb9d24', endColorstr='#ffc579',GradientType=0 ); /* IE6-8 */
	
	color: #fff;
}



.info
{
	background: #dbdbdb url("../img/infobg.png") top center repeat-x;
	text-align: center;
	font-size: 16px;
	color: #000;
	line-height: 36px;
	height: 36px;
	display: block;
	
}

.info p
{
	margin: 0;
}


.footer-container
{
	background: #fff;
	position: relative;
	
	
	width: 100%;
	max-width: 100vw;
}

footer
{
	padding: 15px 0;
}

.logofooter
{
	background: url("../img/logofooter.png")	top center no-repeat;
	height: 46px;
	width: 68px;
	background-size: 100% 100%;
	display: inline-block;
	margin-right: 8px;
	margin-left: 8px;
}

.footertext
{
	display: inline-block;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: 2px;
	text-align: justify;
	max-width: 90%;
}

.footertext p
{
	margin: 0;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-height: 800px)
{
	.mainimg { width: 40%; max-width: 40vw; }
	.maintext { width: 58%; max-width: 58vw; }
	.mainlogo { margin: 2vh auto 0vh; }
	.introtext { font-size: 21px; line-height: 1.2; }
} 
   
@media only screen and (max-width: 1280px) and (max-height: 675px)
{
	.mainimg { width: 40%; max-width: 40vw; }
	.maintext { width: 58%; max-width: 58vw; }
	.mainlogo { margin: 2vh auto 0vh; }
} 

@media (min-width: 970px) and (max-width: 1025px) {
	
	.mainimg { width: 45%; max-width: 45vw; }
	.mainlogo { height: 9.65vw; width: 12.2vw; margin: 3vh auto 0vh; }
  	.introtext { font-size: 21px; line-height: 1.2; }
  	.maintext { width: 52%; max-width: 52vw; }
}

@media only screen and (max-width: 767px) and (orientation: portrait) 
{
	.wrapper { width: 96vw; }
	
	.main-container 
	{
    height: auto;
    overflow: auto;
	}
	
	.main 
	{
    position: relative;
    height: auto;
	}
	
	.maintext
	{
    width: 90%;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    left: auto;
    top: auto;
    z-index: 3;
	}
	
	.mainlogo 
	{
    height: 39.55vw;
    width: 50vw;
    margin: 2vh auto 0vh;
	}
	
	.introtext { font-size: 19px; line-height: 1.2;	}
	
	.mainimg
	{
    width: 90%;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
	}
	
	.clicksection { height: 78px; }
		
	.clicksection a.bigbutton
	{
    -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;
    font-size: 36px;
    line-height: 1;
    margin: 3px 3vw 0px;
    display: inline-block;
	}
	
	.info 
	{
    background: #DBDBDB;
    text-align: center;
    font-size: 15px;
    line-height: 1.4;
    height: auto;
    display: block;
	}
	
	.separator {display: none;}
	
	.info p { margin: 0px 2vw;	}
	
	.logofooter { display: none; }
	
	.footertext 
	{
    display: block;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0px;
    text-align: justify;
    max-width: 96%;
    margin: 0 auto;
	}
	
}

@media only screen and (max-width: 969px) 
{}

@media only screen and (max-width: 767px) and (orientation: landscape) 
{
	.wrapper { width: 97vw; }
	
	.main-container 
	{
    height: auto;
    overflow: auto;
	}
	
	.main 
	{
    position: relative;
    height: auto;
	}
	
	.maintext
	{
    width: 90%;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    left: auto;
    top: auto;
    z-index: 3;
	}
	
	.introtext { font-size: 19px; line-height: 1.2;	}
	
	.mainimg
	{
    width: 90%;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
	}
	
	.guysimg 
	{
    width: 60%;
    display: block;
    margin: 0 auto;
	}
	
	.clicksection { height: 59px; }
	
	.clicksection a.bigbutton 
	{
    -webkit-border-radius: 20px;
	 -moz-border-radius: 20px;
	 border-radius: 20px;
    font-size: 35px;
	}
	
	.info	{ font-size: 12px; font-family: 'Roboto Condensed', sans-serif;}
	
	.logofooter { display: none; }
	
	.footertext 
	{
    display: block;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0px;
    text-align: justify;
    max-width: 96%;
    margin: 0 auto;
	}
	
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}