body {
	margin: 0;
	padding: 0;
	text-align: center;
	overflow: hidden;
	color: #fff;
	background-color:#fff;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
#datGUI { 
	position: absolute;
	top: 9%;
	right: 42%;
	visibility:'hidden'; 
}



canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index:-10;
}

#loading {
	z-index:100;
	font-weight: 200;
	font-size: 12pt;
	letter-spacing: .5em;
	position: absolute;
	top: 50%;
	width: 100%;
}
.titleimgholder {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.titleimg {
	width: 100%; 
	height: 50%; 
	top:50%; 
	position: relative; 
}

.titleimg img{
    display: block;
    max-width: 100%;
    position: absolute;
    bottom:20%;
    left:50%;
    transform:translateX(-50%);
    
}

@media screen (min-width: 667px) and (orientation: landscape) {

.titleimg img{
    display: block;
    max-width: 40%;
    position: absolute;
    bottom:30%;
    left:50%;
    transform:translateX(-50%);
    
}

}

#dimScreen
{
    position:fixed;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:rgba(255,255,255,1);
}


#headerfont {
	position: absolute;
	top:100px;
	width: 100%;
	font-family: 'Playfair Display', serif;
	font-weight:900;
	font-size:172px;
}
#subheader{
	font-size:24px;
}

video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url('../../assets/img/no_webgl.jpg') no-repeat;
    background-size: cover; 
}



#radial-center {
  /* fallback */
  background-color: #fff;
  background-image: url(images/radial_bg.png);
  background-position: center center;
  background-repeat: no-repeat;

  /* Safari 4-5, Chrome 1-9 */
  /* Can't specify a percentage size? Laaaaaame. */
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-radial-gradient(circle, #1a82f7, #2F2727);

  /* IE 10 */
  background: -ms-radial-gradient(circle, #1a82f7, #2F2727);

  /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */
}


@media screen and (max-device-width: 800px) {
	
	#alt_bg{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #fff url('../assets/img/no_webgl.jpg') no-repeat;
		-moz-background-size: cover;
		background-size: cover;
		-webkit-background-size: cover;
		-o-background-size: cover;
		background-color: transparent;
		display:none;
	}
	
    #bgvid {
        display: none;
    }
}




.cssload-container{
	position:relative;
}
	
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgb(204,204,204);
	border-left-color: rgb(0,0,0);
	border-radius: 974px;
		-o-border-radius: 974px;
		-ms-border-radius: 974px;
		-webkit-border-radius: 974px;
		-moz-border-radius: 974px;
}

.cssload-whirlpool {
	margin: -24px 0 0 -24px;
	height: 49px;
	width: 49px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
	content: "";
	margin: -22px 0 0 -22px;
	height: 43px;
	width: 43px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
	content: "";
	margin: -28px 0 0 -28px;
	height: 55px;
	width: 55px;
	animation: cssload-rotate 2300ms linear infinite;
		-o-animation: cssload-rotate 2300ms linear infinite;
		-ms-animation: cssload-rotate 2300ms linear infinite;
		-webkit-animation: cssload-rotate 2300ms linear infinite;
		-moz-animation: cssload-rotate 2300ms linear infinite;
}



@keyframes cssload-rotate {
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-rotate {
	100% {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-rotate {
	100% {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-rotate {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-rotate {
	100% {
		-moz-transform: rotate(360deg);
	}
}

@media screen and (max-height: 370px) {
	
	canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index:-10;
	display:none;
}
    #bgvid {
        display: none;
    }
}