html {
    width: 100%;
    height: 100vh;
		background-image: url("../img/bg2.jpg");
background-size: cover;
background-color:black; 
background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
}

.col-centered{
    float: none;
    margin: 0 auto;
}

/*FONTS*/

/* open-sans-regular - latin */
/* open-sans-400 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../../../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../../../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../../../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* cardo-700 - latin */
@font-face {
  font-family: 'Cardo';
  font-style: bold;
  font-weight: 700;
  src: url('../../../fonts/cardo-v8-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Cardo Bold'), local('Cardo-Bold'),
       url('../../../fonts/cardo-v8-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../../../fonts/cardo-v8-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../../../fonts/cardo-v8-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../../../fonts/cardo-v8-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../../../fonts/cardo-v8-latin-700.svg#Cardo') format('svg'); /* Legacy iOS */
}


body {
	/* overflow: hidden; */
    margin: 0px;
    padding: 0px;
font-family: 'Open Sans', sans-serif;
width:100%;
overflow-x:hidden;
display:box;
/*
	background-image: url("../img/bg2.jpg");
background-size: cover; 
background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	padding-bottom: 100px;
*/
}

a.sb-nav-home
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/home.png");
	margin-bottom: 10px;
}

a.sb-nav-home:hover
{background-position: -35px 0;}

a.sb-nav-index
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/index.png");
	margin-bottom: 10px;
}

a.sb-nav-index:hover
{background-position: -35px 0;}

a.sb-nav-previous
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/previous.png");
	margin-bottom: 10px;
}
a.sb-nav-previous:hover
{background-position: -35px 0;}

a.sb-nav-next
{
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	background-image:url("../img/sidebar/next.png");
	margin-bottom: 10px;
}
a.sb-nav-next:hover
{background-position: -35px 0;}

#navcontain 
{
top: 50%;
margin-top: -90px;
position: absolute;
width:35px;	
height: 175px;
background-image:url("../img/sidebar/blacktrans-bg.png");
padding: 2px;	
}



.displace {
	position: absolute;
	left: -5000px;
	}



a {
text-decoration: underline;
color: #FFF;
margin: 0px;	
}


H1 {
	
	margin-top: 0px;
	margin-bottom: 10px;
	color: white;
	font-size: 500%;
	font-family: 'Cardo', serif;
	font-weight: 700;
	


.header {
	
		background-image:url("../img/h1-bg.jpg");
	background-repeat: repeat-x;
	background-position:top;
	width:40%;
	height: 90%;
}
	
}

H2 {
	font-size:190%;	
	margin-top: 0px;
	margin-bottom: 5px;
	line-height: 20pt;
	padding: 0;
	
}

H3{
background-image:url("../img/blacktrans-bg.png");
color: white;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
font-size: 10pt;
	
}



.quote {
	
font-family: 'Oswald', sans-serif;
	width: 100%;
	color: #63d824; 
	position: relative;
	float: left;
		text-shadow: 2px 2px #000;
text-align: center;
font-size: 24pt;
display: block;
	}


p {
	margin-top: 0px;
	
}


.p-indent {
	
padding-left: 30px;
margin: 0;
padding-bottom: 0;
border-left: 1px solid black;
	
}



.lowres-visibility {display: block;}
.1600res-hide {display: block;}

img {
	
	max-width: 100%;
	height: auto;
	width: auto/9; /* IE8 */
	
}

.textwrapleft{
	
	float:right;
	margin: 10px;
}

.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}


.st-panel {
	position: relative;
	width: 100%;
	height: 100%;
	vertical-align:top;

}


#sidebar {
	
	position: fixed;
	width:35px;
	min-height: 100%;
	padding-top: 10px;
}




.contentcontainer iframe,
.contentcontainer object,
.contentcontainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
}


.text1, .text2 {
	
	color: white; 		
	line-height: 21pt;
			font-size: 110%;
	}
	

.inset-text1 {
	color: white;
		max-width: 450px;
		font-size: 12pt;
}






/* PAGE 1 */

.page1 {

background-image: url("../img/bg.jpg");
background-repeat:no-repeat;
background-position:top;
width: 100%;
height: 100%;
background-size: cover; 
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}

#title {
	
		position: absolute;
	width:757px;
	height: 281px;
	background-image: url(../img/mettle.png);
	right: 3%;
	margin-top: 15%;	
	z-index: 14;
}






/*PAGE 2*/
.page2 {
	

	border-top: 2px solid black;
		
}

.page2 .text1 {
	

		width: 100%;
		height: auto;
	margin-left:auto; margin-right:auto; 

}



.page2 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;

	margin-left:auto; margin-right:auto; 
	float: right;
	position: relative;
	

}



.page2 .inset-text1 {
	
		color: white;
		max-width: 426px;
		font-size: 12pt;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	background-image: url("../img/greentrans-bg.png");
margin-top: 50px;
border: 2px solid;
border-color: #000;
position: absolute;
bottom:25%;
display:box;
right: 0;

}




.page2 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom:0px;
	background-color:#000000;
}

.page2 .inset-text1 p {
			margin: 0 4px 0 0;
			padding: 0 0 0 5px;
			text-align: left;
}


.page2 .quote {
	
	width: 100%;
bottom: 1%;
	line-height: 28pt;
	position: absolute;
	
	margin-left: auto;
	margin-right: auto;

}

.page2 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}




/*PAGE 8*/
.page8 {
	
	overflow:hidden;
		
}

.page8 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page8 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page8 .inset-text1 {
	
		color: white;
		max-width: 426px;
		font-size: 12pt;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	background-image: url("../img/greentrans-bg.png");
margin-top: 50px;
border: 2px solid;
border-color: #000;
position: absolute;
bottom:25%;
display:box;
right: 0;

}




.page8 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom:0px;
	background-color:#000000;
}

.page8 .inset-text1 p {
			margin: 0 4px 0 0;
			padding: 0 0 0 5px;
			text-align: left;
}


.page8 .quote {
	
	width: 100%;
bottom: 1%;
	line-height: 28pt;
	position: absolute;
	
	margin-left: auto;
	margin-right: auto;

}

.page8 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

/*PAGE 9*/
.page9 {
	
	overflow:hidden;
		
}

.page9 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page9 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page9 .inset-text1 {
	
		color: white;
		max-width: 426px;
		font-size: 12pt;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	background-image: url("../img/greentrans-bg.png");
margin-top: 50px;
border: 2px solid;
border-color: #000;
position: absolute;
bottom:25%;
display:box;
right: 0;

}




.page9 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom:0px;
	background-color:#000000;
}

.page9 .inset-text1 p {
			margin: 0 4px 0 0;
			padding: 0 0 0 5px;
			text-align: left;
}


.page9 .quote {
	
	width: 100%;
bottom: 1%;
	line-height: 28pt;
	position: absolute;
	
	margin-left: auto;
	margin-right: auto;

}

.page9 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

/*PAGE 10*/
.page10 {
	
	overflow:hidden;
		
}

.page10 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page10 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page10 .inset-text1 {
	
		color: white;
		max-width: 426px;
		font-size: 12pt;
		line-height: 19pt;
	margin-left:auto; margin-right:auto; 
	background-image: url("../img/greentrans-bg.png");
margin-top: 50px;
border: 2px solid;
border-color: #000;
position: absolute;
bottom:25%;
display:box;
right: 0;

}




.page10 .inset-text1 h2 {
	
	padding: 5px;
	margin-top: 0px;
	margin-bottom:0px;
	background-color:#000000;
}

.page10 .inset-text1 p {
			margin: 0 4px 0 0;
			padding: 0 0 0 5px;
			text-align: left;
}


.page10 .quote {
	
	width: 100%;
bottom: 1%;
	line-height: 28pt;
	position: absolute;
	
	margin-left: auto;
	margin-right: auto;

}

.page10 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}



/*PAGE 11*/
.page11 {
	
	overflow:hidden;
		
}

.page11 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page11 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page11 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 12*/
.page12 {
	
	overflow:hidden;
		
}

.page12 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page12 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page12 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 13*/
.page13 {
	
	overflow:hidden;
		
}

.page13 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page13 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page13 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

/*PAGE 14*/
.page14 {
	
	overflow:hidden;
		
}

.page14 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page14 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page14 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 15*/
.page15 {
	
	overflow:hidden;
		
}

.page15 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page15 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page15 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

/*PAGE 16*/
.page16 {
	
	overflow:hidden;
		
}

.page16 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page16 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page16 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}

/*PAGE 17*/
.page17 {
	
	overflow:hidden;
		
}

.page17 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page17 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page17 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 18*/
.page18 {
	
	overflow:hidden;
		
}

.page18 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page18 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page18 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}



/*PAGE 19*/
.page19 {
	
	overflow:hidden;
		
}

.page19 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page19 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page19 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 20*/
.page20 {
	
	overflow:hidden;
		
}

.page20 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page20 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page20 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 21*/
.page21 {
	
	overflow:hidden;
		
}

.page21 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page21 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page21 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}



/*PAGE 22*/
.page22 {
	
	overflow:hidden;
		
}

.page22 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page22 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page22 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}




/*PAGE 23*/
.page23 {
	
	overflow:hidden;
		
}

.page23 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page23 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page23 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}





/*PAGE 24*/
.page24 {
	
	overflow:hidden;
		
}

.page24 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page24 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page24 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}



/*PAGE 25*/
.page25 {
	
	overflow:hidden;
		
}

.page25 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page25 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page25 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}


/*PAGE 26*/
.page26 {
	
	overflow:hidden;
		
}

.page26 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page26 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page26 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}



/*PAGE 27*/
.page27 {
	
	overflow:hidden;
		
}

.page27 .text1 {
	

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 500px;
	float: left;
	margin-top: 20px;
		position: relative;
}


.page27 .text2 {

		width: 46%;
		min-width: 350px;
		min-height: 395px;
		height: 100%;
		margin-top: 20px;
	float: right;
	position: relative;
	

}



.page27 .contentcontainer{
	
min-width:900px;
height: 95%;
width: 70%;	
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

}













/*POPUP BOXES*/


.tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
  text-decoration: underline;
  outline: none;
}

.tooltip span {
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 1px solid #990000;
  opacity: 1;
  background-color: #000;                     

}

.tooltip:hover {
  border: 0; /* IE6 fix */
}

.tooltip:hover span {
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after {
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #990000;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltip span:before {
  border-top-color: #000;
  bottom: -8px;
}






/* SMALLER RESOULTION STYLES */




@media only screen and (min-width : 600px) and (max-width : 1099px) /* Set Max-Width so that it doesnt count everything above minwidth */
{
	
	
#title {
	
		position: absolute;
	width:100%;
	height: 281px;
	background-size: contain;
	background-position:center;
	background-repeat: no-repeat;
	left: 50%;
	margin-left: -50%;
	bottom: 10%;	
	z-index: 14;
}

#sidebar{display:none;}

	
}





@media only screen and (min-width : 0px) and (max-width : 599px) /* Set Max-Width so that it doesnt count everything above minwidth */
{


#navcontain{display:none;}




/* PAGE 1 */

.page1 {

background-image: url("../img/bg.jpg");
background-repeat:no-repeat;
background-position: -200px;
width: 100%;
height: 100%;
background-size: cover; 
overflow:hidden; /* FIXED TOP GAP PROBLEM */
}

		#title {
	
		position: absolute;
	width:290px;
	height: 356px;
	background-position:bottom right;
	background-size:contain;
	background-repeat:no-repeat;
	left: 54%;
	margin-left: -157.5px;
	bottom: 10%;
	z-index: 14;	
}




}