html{
height: 100%;
margin: 0;
padding: 0;
}

.guardian-body{
	font-family: 'Lato', sans-serif;
	color: #89867e;
	/*	background: #f9f9f9;*/
	/*background-color: lightgray;*/
	background-color: #5D5D5D;
	/*background: linear-gradient(to bottom, rgba(255,0,0,0),lightblue);*/
	/*background-image: url("mask.gif");*/
	margin:0;
	padding:0;
	height:100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	display: inline-block;
}

.conquerer-body{
	font-family: 'Lato', sans-serif;
	color: #89867e;
	/*	background: #f9f9f9;*/
	/*background-color: lightgray;*/
	background-color: black;
	/*background: linear-gradient(to bottom, rgba(255,0,0,0),lightblue);*/
	/*background-image: url("mask.gif");*/
	margin:0;
	padding:0;
	height:100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	display: inline-block;
}

.nightmare-body{
	font-family: 'Lato', sans-serif;
	color: #89867e;
	/*	background: #f9f9f9;*/
	/*background-color: lightgray;*/
	background-color: black;
	/*background: linear-gradient(to bottom, rgba(255,0,0,0),lightblue);*/
	/*background-image: url("mask.gif");*/
	margin:0;
	padding:0;
	height:100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overflow: hidden;
	display: inline-block;
}

.guardianI{
	height: 100%;
}


.guardianH{
	width: 35%;
	height: 30%;
	/*background-color: lightgray;*/
	padding-top: 1em;
	color: #3CC0A2;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
	 /*transition: width 2s, height 2s, background-color 2s, transform 2s;*/
}
.guardianP a{
	color: #3CC0A2;
}

.teacherH{
	width: 35%;
	height: 30%;
	/*background-color: lightgray;*/
	padding-top: 1em;
	color: #438064;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;	
}

.teacherP a{
	color: #438064;
}

.photographerH{
	width: 35%;
	height: 30%;
	padding-top: 1em;
	color: #5B7AB7;
	margin-left: 46px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
	 /*transition: width 2s, height 2s, background-color 2s, transform 2s;*/
}
.photographerP a{
	color: #5B7AB7;
}

.friendH{
	width: 35%;
	height: 30%;
	padding-top: 1em;
	/*background-color: lightgray;*/
	color: #2285D6;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.friendP a{
	color: #2285D6;
}


.doctorH{
	width: 35%;
	height: 30%;
	color: #9FCA45;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.doctorP a{
	color: #9FCA45;
}

.storytellerH{
	width: 35%;
	height: 30%;
	color: #55DADB;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.storytellerP a{
	color: #55DADB;
}

.conquererH{
	width: 35%;
	height: 30%;
	color: #B7293A;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.conquererP a{
	color: #B7293A;
}

.captivatorH{
	width: 35%;
	height: 30%;
	color: #6061D5;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.captivatorP a{
	color: #6061D5;
}

.nightmareH{
	width: 35%;
	height: 30%;
	color: white;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.nightmareP a{
	color: #5D5D5D;
}

.rulerH{
	width: 35%;
	height: 30%;
	color: #D82B62;
	padding-top: 1em;
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
}
.rulerP a{
	color: #D82B62;
}

.hostH{
	width: 35%;
	height: 30%;
	/*padding-top: 1em;*/
	color: #00B300;
	/*color: #3CC0A2;*/
	margin-left: 42px;
	position: absolute;
	top: 40%;
	left: 55%;
	font-size: 2em;
	overflow: hidden;
	 /*transition: width 2s, height 2s, background-color 2s, transform 2s;*/
}
.HostP a{
	color: #00B300;
}

/*.guardianH:hover {
    background-color: #FFCCCC;
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}*/


/*h2{
	text-align: center;
	font-size: 3em;
	padding: 5px;
	margin: 0;
	position: absolute;
	left: 70%;
	top:9%;
}*/



.guardianP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	/*font-family: 'Proza Libre', sans-serif;*/
	/*font-family: 'Open Sans Condensed', sans-serif;*/
	font-family: 'Droid Sans', sans-serif;


	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}


.teacherP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	/*font-family: 'Proza Libre', sans-serif;*/
	font-family: 'Droid Sans', sans-serif;



	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.photographerP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 28%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}


.friendP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 10%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.doctorP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.storytellerP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.conquererP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.captivatorP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.nightmareP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Open Sans Condensed', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: white;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.rulerP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 24px;
	word-spacing: 2px;
	position: absolute;
	top: 25%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}

.HostP p{
	/*font-family: 'Cormorant Garamond', serif;*/
	font-family: 'Droid Sans', sans-serif;
	color: white;
	width: 35%;
	padding: 1em;
	/*margin: 0 auto;*/
	color: black;
	font-size: 22px;
	word-spacing: 2px;
	position: absolute;
	top: 10%;
	left: 57%;
	opacity: 0.0;
	z-index: -1;
}




/*conquerer = B7293A*/

/*TEXT COLOR*/
#words{
	color: white;
}
#wordsH{
	color: white;
}
#wordsT{
	color: white;
}
#wordsP{
	color: white;
}
#wordsF{
	position: absolute;
	top:18%;
	color: white;
}
#wordsD{
	color: white;
}
#wordsS{
	color: white;
}
#wordsC{
	position: absolute;
	top:18%;
	color: lightgray;
}
#wordsCa{
	position: absolute;
	top:18%;
	color: white;
}
#wordsN{
	font-family: 'Open Sans Condensed', sans-serif;
	color: white;
}
#wordsR{
	color: white;
}

footer{
	padding: 0;
	margin: 0;
	position: absolute;
	top:97%;
}

.fa-fa-moon-o{
	color: white;
}

a{
	color:white;
}
a:hover{
	color: lightgray;
}