/* video Style */


#video_text_box {
	width: 100%;
	margin-top: 20%;
	font-family: 'code_lightregular', Arial, Helvetica;
	font-size: 55px;
	color: #BADDDB;
	text-align: center;
	position: absolute;
	xxposition: fixed;
	-webkit-animation: video-title-ani 10s infinite; /* Chrome, Safari, Opera -- forwards makes it stop infinite makes it loop */
	animation: video-title-ani 10s infinite; /* Standard syntax */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes video-title-ani {
    0% {color: #BADDDB;}
    50% {color: #6b2138;}
	100% {color: #BADDDB;}
}

/* Standard syntax */
@keyframes video-title-ani {
    0% {color: #BADDDB;}
    50% {color: #6b2138;}
	100% {color: #BADDDB;}
}

@font-face {
    font-family: 'code_lightregular';
    src: url('../font/code_light-webfont.eot');
    src: url('../font/code_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/code_light-webfont.woff2') format('woff2'),
         url('../font/code_light-webfont.woff') format('woff'),
         url('../font/code_light-webfont.ttf') format('truetype'),
         url('../font/code_light-webfont.svg#code_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#outer_video_box {
	height: 450px;
	xxheight: 100%;
	xxmin-height: 450px;
	position: relative;
	overflow: hidden;
}

#video_box_holder { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#template { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/background.jpg);
}

video.fillwidth {
	width: 100%;
}






#video_box_holder_street_photography { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#street_photography { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/street_photography_background.jpg);
}

#video_box_holder_objects { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#objects { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/objects_background.jpg);
}

#video_box_holder_abstract { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#abstract { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/abstract_background.jpg);
}

#video_box_holder_architecture { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#architecture { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/architecture_background.jpg);
}

#video_box_holder_interiors { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#interiors { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/interiors_background.jpg);
}

#video_box_holder_landscapes { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#landscapes { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/landscapes_background.jpg);
}


#video_box_holder_cityscapes { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#cityscapes { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/cityscapes_background.jpg);
}

#video_box_holder_sculpture { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#sculpture { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/sculpture_background.jpg);
}


#video_box_holder_garden { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#garden { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/garden_background.jpg);
}


#video_box_holder_religious_buildings { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#religious_buildings { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/religious_buildings_background.jpg);
}


#video_box_holder_twa_flight_center { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#twa_flight_center { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/twa_flight_center_background.jpg);
}


#video_box_holder_stairs { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#stairs { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/stairs_background.jpg);
}


#video_box_holder_miniatures { /* give this a unique name for each section because the position of the video would change */
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	xxoverflow: hidden;
	position: absolute;
	margin-top: -150px; /* moves video up or down some */
}

video#miniatures { /* give this a unique name because of the background, have to change in html too */
	position: absolute;
	z-index: -100;
	background-repeat: no-repeat;
	background-image: url(../videos/miniatures_background.jpg);
}






/*Styles for screen 1067px and lower*/
@media only screen and (max-width : 1067px) {

#outer_video_box {
	height: 350px;
}	

}


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

#outer_video_box {
	height: 300px;
}	

}


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

#outer_video_box {
	height: 250px;
}	

}

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

#outer_video_box {
	height: 210px;
}	

}

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

#outer_video_box {
	height: 170px;
}	

}

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

#outer_video_box {
	height: 150px;
}	
#video_text_box {
	font-size: 20px;
}

}


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

#outer_video_box {
	height: 130px;
}	
#video_text_box {
	display: none;
}

}

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

#outer_video_box {
	height: 110px;
}	


}

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

#outer_video_box {
	height: 90px;
}	


}


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

#outer_video_box {
	height: 70px;
}	


}


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

#outer_video_box {
	height: 50px;
}	


}


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

#outer_video_box {
	height: 45px;
}	

#c_logo {
	margin-top: 4px;
}

}