@charset "utf-8";
/* CSS Document */

body {
	background-color: #282828;
	}

.normal_content {
	background-color: #BABABA;
	padding-left: 10px;
}

.container_video {
	width: 100%;
	height: auto;
}

.banner {
	background-color: #232323;
}

.menu_main {
	background-color: #474747;
	padding-left: 10px;
}

a {
	text-decoration: none;
	color: white;
	font-family: arial;
}

a:hover {
	text-decoration: overline;
	font-family: arial;
	color:#B8B8B8;
}

a:active{
	text-decoration: none;
	color: white;
	font-family: arial;
}

a:pressed {
	text-decoration: none;
	color: white;
	font-family: arial;
}

.selected_link {
	color: #CFCFCF;
	text-decoration: overline;
	font-family: arial;
}



#video_overlays {
position:absolute;
padding-left: 15px;
    width:90%;
    z-index:300000;
}


@font-face {
    font-family: "pixellife_small_cap";
    src: url("../fonts/pixel-li-webfont.woff2") format("woff2"),
         url("../fonts/pixel-li-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;

}


.largetext {
	font-size:124px;
	}
	
.mediumtext {
	font-size:72px;
	}
	
	
	
	
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

/* Mobile optimization */

@media screen and (max-width:320px) {
  /* CSS for screens that are 320 pixels or less will be put in this section */
}

@media screen and (min-width:320px) and (max-width:640px) {
  /* for screens that are at least 320 pixels wide but less than or equal to 640 pixels wide */
}


/* code that is here, until the first @media block, will apply to any screen size */
#somethingorother {
  width: 800px ;
}

@media screen and (max-width: 320px) {
  /* comes into effect for screens less than or equal to 320 pixels */
  #somethingorother {
    width: 120px ;
  }
}
@media screen and (min-width: 321px) and (max-width: 480px) {
  /* comes into effect for screens between 321 and 480 pixels (inclusive) */
  #somethingorother {
    width: 320px ;
  }
}
@media screen and (min-width: 481px) {
  /* comes into effect for screens larger than or equal to 481 pixels */
  #somethingorother {
    width: 480px ;
  }
}

/* code that is here will apply to any screen size */


@font-face {
    font-family: "The Redlight Free";
    src: url("../fonts/TheRedlightFree.woff2") format("woff2"),
        url("../fonts/TheRedlightFree.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'ShaniaHeinz';
    src: url('../fonts/ShaniaHeinz.woff2') format('woff2'),
        url('../fonts/ShaniaHeinz.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'tahu';
    src: url('../fonts/tahu.woff2') format('woff2'),
        url('../fonts/tahu.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}