html { background-color:#0F0B09; }

html, body {
	/* Height and width fallback for older browsers. */
	height: 100%;
	width: 100%;

	/* Set the height to match that of the viewport. */
	height: 100vh;

	/* Set the width to match that of the viewport. */
	width: 100vw;

	/* Remove any browser-default margins. */
	margin: 0;

	overflow:hidden;





}

body {
	font-size: 0.75em;

	font-family: 'Quicksand', sans-serif;
	color: #eceff1;
	line-height: 1.5; 
	width:100%;
	overflow:hidden;
	position:relative;

	background: url(/_images/web-bg.jpg) no-repeat center center fixed; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;

}


.logo-front { position:absolute; bottom:75px; left:20%; width:60%; height:auto; }
.logo-front img { width:100%; height:auto; }

.logo-inside { position:absolute; bottom:65px; left:40%; width:20%; height:auto; }
.logo-inside img { width:100%; height:auto; }

.boldLink { color:#fff; text-decoration:none; font-family:Anton;text-align:center;font-size:18pt;letter-spacing:3px;z-index:500; }
.boldLink:hover { color:#D2A6A6; text-decoration:none; }

.smallLink { color:#fff; text-decoration:none; text-align:center;font-size:16pt;letter-spacing:2px;z-index:500;font-weight:bold; }
.smallLink:hover { color:#e7b173; text-decoration:none; }

/*
new body
body {
	font-size: 0.75em;

	font-family: 'Quicksand', sans-serif;
	color: #eceff1;
	line-height: 1.5; 
	width:100%;
	overflow:hidden;
	position:relative;
	background-image:url('/_images/webbg2.jpg');
	background-position:center top;
	background-repeat:no-repeat;
	background-size: auto 100%;

}
*/

canvas {
	position:absolute;
	bottom:0px;
    left: 0px;
	overflow:hidden;
	height:25%;
	width:100%;
	min-width:1200px;
	opacity: 0.3;
	z-index:3;
}

#frontimage { position:relative; z-index:2; width:1050px; height:423px; overflow:hidden; }
#frontimage img { position:relative; z-index:2; }

h1 { font-size:2.5em; margin:15px 0 40px 0; color:#B0201C; }
h3 { margin-top:25px; clear:both; }

.wrapper { width:1050px; margin:0 auto; height:100%; height: 100vh; z-index:10; position:relative;}


			.contentwrapper {
				background-image:url('/_images/50.png');
				padding:25px;
			}

			.content { 
				width:100%; 
				margin:0 auto; 
				height:57%;
				height:57vh;
				min-height:30vh; 
				overflow-x:hidden; 
				overflow-y:auto; 
				color:#fff;
				padding:5px;
				line-height:160%;
				text-align:justify;
			}
			.contentpadding { /*display:none;*/ padding:5px 25px 5px 0; }


.menuwrapper { position:relative; clear:both; height:17%; height:17vh; width:100%; min-height:95px; }
.menu { position:absolute; left:0; bottom:70px; width:100%; text-align:center;  }

ul.mainmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.mainmenu li {
    float: left;
}

ul.mainmenu li a {
    display: block;
    margin:0 20px;
	color:#B0201C;
	text-decoration:none;
	font-size:18pt;
	font-weight:700;
}


ul.mainmenu li a:hover {
	color:#dd2c29;
}


#extrasmenu { margin-left:10px; }

ul.extrasmenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.extrasmenu li {
    float: left;
}

ul.extrasmenu li a {
    display: block;
    margin:0 10px;
	color:#B0201C;
	text-decoration:none;
	font-size:13pt;
	font-weight:600;
}

ul.extrasmenu li a:hover {
	color:#dd2c29;
}

ul.extrasmenu li a.active {
	color:#EE9795;
}


.sharing { height:50px; clear:both; margin:-10px -12px 0 0; }
.addthis_sharing_toolbox {
	float:right;
}

.image200 { float:right;width:200px;margin:0 0 15px 40px;border:1px solid black; }
.image300 { float:right;width:300px;margin:0 0 15px 40px;border:1px solid black; }

.character {     }
.bio { font-size:0.9em; font-style: italic; }

.at-follow-label { color:#000; font-weight:bold; }


@media (max-width:1030px){
	.wrapper { width:90%; }

}


.copyright {
	position:fixed;
	bottom:0px;
	left:0;
	width:100%;
	height:60px;
	text-align:center;
	font-size:9pt;
	color:#cfd8d5;
	font-family:verdana;
	margin-top:5px;
	z-index:50;
}

.copyright img { text-align:center; clear:both; }
.copyright a { text-decoration:none; color:#cfd8d5; z-index:100; }
.copyright a:hover { color:#cfd8d5; }


.newsbox { width:48%; float:left; margin-left:1%; }
.newsboximg { border:1px solid #000; height:260px; overflow:hidden; z-index:10; background-size:100% auto; background-position:center top; }
.newsboximg img { width:100%; height:100%; }
.newsboxtext { border:1px solid #000; width:85%; margin:0 auto; background-color:#fff; color:#000; padding:2%; margin-top:-35px; z-index:600; font-size:10pt;}
.newsboxheading { font-weight:bold; }
.newsboxheading a { color:#000; }
.newsboxheading a:hover { color:#CC0033; }
.publication { font-style:italic; color:#222; }


.clr { clear:both; }


@media screen and (min-width: 500px) {

  body { font-size: 1em; } 

}

a {
  color: #eceff1;
  text-decoration: none;
  transition: color 0.15s ease-in; 
  text-shadow: 1px 1px 1px #000;
  }

  a:hover {
    color: #eceff1; text-decoration:underline; }

  a:active, a:focus {
    color: #eceff1; }

code {
  font-weight: bold; }



.rainwrapper {
  position: absolute;
  left: -10%;
  top:-30%;
  width: 200%;
  height: 200%;
  z-index: 2;
  transform: rotate(-7deg);
}


.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(200,190,190,1) ), to(rgba(175,190,215,0.6))  );
  background: -moz-linear-gradient(top, rgba(200,190,190,1) 0%, rgba(175,190,215,.6) 100%);
	width:1px;
	height:89px;
	position: absolute;
	bottom:200px;
	-webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
  
}

/* animate the drops*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}


@media screen and (max-width: 1024px) {
	.newsboximg { background-size:auto 100%; }

}


@media screen and (max-width: 768px) {

	/* TABLETS */
	.logo-front { position:absolute; bottom:120px; left:5%; width:90%; height:auto; }



}

@media screen and (max-width: 640px) { 
	/* PHONES */

	body {   }
	canvas { display:none; }
	.wrapper { height:auto; width:100%;  }
	.content { height:auto; padding-bottom:50px;}
	.prefog { position:fixed }
	.image200 { float:none; width:100%; margin:0; }
	.image300 { float:none; width:100%; margin:0; }
	.sharing { display:none; }
	.menuwrapper { height:50px; min-height:initial; }
	.menu { bottom:0; }
	ul.mainmenu li a { font-size:12pt; }
	.contentpadding { padding:0; }

	.newsbox { width:100%; margin:0; margin-bottom:5px; }
	.newsboxtext { width:94%; }
	.newsboximg { background-size:100% auto; }

}

@media screen and (max-width: 470px) { 
	.newsboximg { background-size:auto 100%; }
}