/* apply a natural box layout model to all elements */
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

div#preloader {position: absolute;left: -9999px;top:  -9999px;}
div#preloader img {display: block;}

#preloading {position:fixed;top:0px;left:0px;background:black;width:100%;height:100%;z-index:99999;}


.enter-btn {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-family: 'galliard regular';letter-spacing:4px;border:1px solid white;padding-left:24px;padding-right:20px;font-size:24pt;}


html {width:100%;min-height:100%;  overflow-y: scroll;}
body {;font-family:"galliard regular";font-size:56px;line-height:68px;color:white;width:100%;height:100%;background-color:black}

.bg-default {background-image: url(../img/smoother_stars_fatter.gif);background-position:top left;background-repeat:repeat}
.bg-hover {background-image:  url(../img/cluster_random_2.gif),url(../img/smoother_stars_fatter.gif);background-position:top left,top left;background-repeat:repeat,repeat}

.bg-blank {background-position:top left;background-repeat:repeat}

.wrapper {margin-left:45px;margin-right:45px;margin-top:23px;padding-bottom:45px}

.logo-title {position: absolute;left:45px;top:23px;z-index:2}

a {cursor: pointer;text-decoration:none;color:white}
a:hover {background:url(../img/circle_dots_white.gif) 0px 0px}
h1 {font-weight: normal;}
h2 {display:inline-block;font-weight: normal}

.small-caps {font-variant: small-caps;letter-spacing:7px}

.contact-section,
.about-section {margin-top:25px}
.about-section p:first-of-type {margin:0;padding:0;display:inline}

.films-section {margin-top:24px}

.project-title {text-align: center;display:block;margin-top:64px}

.email {background-image:url(../img/email.svg);background-repeat: no-repeat; background-position:0px 4px;background-size: 64px 40px;width:64px;height:40px;display:inline-block}
.email a {width:inherit;height:inherit;display:block;float:left;margin-top:2px}

.left-arrow {position:absolute;left:0px;margin-left:45px;background-image:url(../img/left-arrow.svg);background-repeat: no-repeat; background-position:0px 0px;background-size: 40px 40px;width:40px;height:40px;cursor: pointer;z-index:10}
.left-arrow:hover {background-image:url(../img/left-arrow-hover.svg)}

.right-arrow {position:absolute;right:0px;margin-right:45px;background-image:url(../img/right-arrow.svg);background-repeat: no-repeat; background-position:0px 0px;background-size: 40px 40px;width:40px;height:40px;cursor: pointer;z-index:10}
.right-arrow:hover {background-image:url(../img/right-arrow-hover.svg)}

.icon-up-arrow {background-image:url(../img/down-arrow.svg);background-repeat: no-repeat; background-position:0px 0px;background-size: 40px 40px;width:40px;height:40px;cursor: pointer;z-index:10}
.icon-up-arrow:hover {background-image:url(../img/down-arrow-hover.svg)}

.icon-down-arrow {background-image:url(../img/up-arrow.svg);background-repeat: no-repeat; background-position:0px 0px;background-size: 40px 40px;width:40px;height:40px;cursor: pointer}
.icon-down-arrow:hover {background-image:url(../img/up-arrow-hover.svg);}

.vertical-center {top:50%;margin-top:-20px}
.vertical-bottom {bottom:40px;z-index:100;margin-left:0px;margin-right:0px}


#down-arrow-top {position: absolute;top:45px;right:45px;z-index:200}

#up-arrow-top {position:absolute;bottom:25px;right:45px;overflow: hidden;cursor: pointer}

em {font-family: 'galliard italic';font-style:normal;}

.description {position:absolute;left:0px;top:0px;display:none;background-color:black;z-index:100;width:100%;min-height:100%;}
.description .padding {margin-left:90px;margin-right:90px;text-align: center;margin-top:23px;position: relative;padding-bottom:40px}

.temp {display:none;position:absolute;top:0px;left:0px;z-index:1;background-color:black}
.temp .padding {margin-top:23px;padding-bottom:40px}

@keyframes play {
   100% { background-position: -210px; }
}


@media only screen and (max-width: 575px) {
	#up-arrow-top,
	#down-arrow-top {right:20px;}

	#down-arrow-top {top:20px}
	
	.right-arrow {margin-right:20px}
	.left-arrow {margin-left:20px}
	
	.description .padding {margin-left:50px;margin-right:50px}
	
	body {font-size:20px;line-height:30px}
	.films-section {margin-top:9px}
	.wrapper {margin-left:25px;margin-right:25px}
	
	.small-caps {letter-spacing:4px}
	
	.contact-section,	
	.about-section {margin-top:20px}	
	.email {background-position:0px 0px;background-size:24px 15px;width:24px;height:15px;}
	
	.video .control {display:none}

	.icon-down-arrow,
	.icon-up-arrow,
	.right-arrow,
	.left-arrow {background-size: 20px 20px;width:20px;height:20px}
	
}