@font-face {
    font-family: 'Bold';
    src: url('fonts/Roboto-Bold-webfont.eot');
    src: url('fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Bold-webfont.svg#Robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Light';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#Robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Regular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#Robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Medium';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#Robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{width:100%; height:100%;  margin:0; padding-bottom: 20px; font-family:'Regular', Arial, sans-serif; background-image: url("../images/background.png");}
#outer {width: 100vw; height: 100%; max-width: 1200px; margin: 0 auto;}
#video_container {width:1180px; height:665px; margin:0 auto; contain: strict; margin-top: 20px; margin-bottom: 20px;}

#backgroundV {
	width:1180px; height:665px; margin:0 auto; position: absolute; 
	 overflow: hidden ; background-color: #000;
}

#background_video {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index:2;
}

#background_video2 {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index:1;
}

#animationLayer{ 
	width: 100%; height: 100%; margin:0 auto; position: absolute; background: transparent; overflow: hidden;
}

#space_overlay {position: relative; display: none;}
#space_overlay img { position: absolute; top: 0px; right: 0px; width: 25px; height: 25px; z-index: 99999; padding: 25px;}

#frame {position: relative; }
#frame img { position: absolute; top: 15px; right: 0px; width: 1200px; height: 675px; z-index: 99999;}

.imgHolder {background-size: cover; background-position: center; background-repeat: no-repeat; outline-color:#000; outline-width:0px; outline-style:solid; border-style:solid; border-width:0px; border-color:#FFF; position:absolute; z-index: 20;}

/*#controls_container {margin: 0 auto; width: 1200px; background-color: #0074b0;}*/
#controls_container {margin: 0 auto; background-color: #0074b0;}
#addPhoto {margin: 20px; margin-bottom: 10px; background-color: #FFF; color: #1d9ada; text-align: center; padding: 10px; cursor: pointer;}
#addPhoto span {vertical-align: middle;}

#finish_btn {width: 380px; margin: 20px; margin-bottom: 10px; background-color: #FFF; color: #0074b0; text-align: center; padding: 10px; display: inline-block; cursor: pointer;}
#countdown {display: inline-block; color: #0074b0; padding-left: 20px; font-weight: bold; vertical-align: middle;}
#refresh {width: 175px; margin: 0 auto; background-color: #FFF; color: #0074b0; text-align: center; padding: 10px; display: inline-block; cursor: pointer; margin-right: 20px;}
#refresh span {vertical-align: middle;}

#fullscreen {width: 155px; margin: 0 auto; background-color: #FFF; color: #0074b0; text-align: center; padding: 10px; display: inline-block; cursor: pointer;}
#fullscreen span {vertical-align: middle;}

/*#queue_container {margin: 0 auto; width: 1200px; min-height: 130px;  display: none; padding-top: 10px; background-color: #FFF;}*/
#queue_container {margin: 0 auto; min-height: 130px;  display: none; padding-top: 10px; background-color: #FFF;}

/*#header {background-color: #0074b0; margin: 0 auto; width: 1200px; text-align: center;}*/
#header {background-color: #0074b0; margin: 0 auto; text-align: center; padding: 0 20px 0 20px;}
#header img {vertical-align: middle; padding: 20px 8px; width: 95%;}
#leftContainer {display: inline-block; background-color: #1d9ada; position: relative; vertical-align: top;}
#leftContainerText {color: #FFF; margin-left: 20px;}
#rightContainer {display: inline-block; vertical-align: top;}

#queue_top {margin: 0 20px 10px 20px; color: #0074b0; font-size: 23px;}
#exitQueue {float: right; cursor: pointer;}
#exitQueue img {width: 20px;}
#arrow { width: 0; height: 0; border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 13px solid #FFF; position: absolute; top: 0; left: 25px; display: none;}



.added {border: 3px solid #0074b0; width:90px; height:90px; margin: 0 0 22px 22px; cursor: pointer;}
.imageThumb {border: 3px solid #000000; width:90px; height:90px; margin: 0 0 22px 22px; cursor: pointer;}
.timerThumb {position: absolute; top: 3px; right: 3px;  color: #FFF; padding: 1px 7px; font-size: 13px;}
.icon {min-width: 23px; height: 23px; padding-right: 20px; vertical-align: middle;}
.iconBtn {min-width: 23px; height: 23px; padding-right: 10px; vertical-align: middle;}
#addIcons {margin-left: 20px; padding: 10px 0;}
#rightContainerText { color: #FFF; margin-left: 20px;}
#finishText {vertical-align: middle;}
#foot img {float: right; padding: 15px 10px 15px 0;}



/*MOBILE*/

@media only screen 
and (max-device-width : 1024px)  {  
    #frame img {display: none;}
    #fullscreen {display: none;}

    body {position: relative; padding-bottom: 0px;}
    body, #queue_top {font-size: 13px;}
    #header {padding: 10px 20px 10px 20px; background: transparent;}
    #header img {display: inline-block; padding: 5px 0px;}
    #head1 {width: 90%;}
    #head2 {width: 55%;}
    #queue_top {margin: 0px 10px 10px 10px;}
    #queue_container {min-height: 105px;}
    #queueText {font-size: 9px;}
    #exitQueue {position: relative;}
    #exitQueue img {width: 14px; top: 3px; position: absolute; right: -3px;}
    #frame img {display: none;}
    #leftContainer, #rightContainer {display: block; padding: 15px 0px;}
    #leftContainerText {font-size: 13px;}
    #rightContainerText {margin-left: 10px;}
    #addPhoto, #cont {display: inline-block;}
    #cont { vertical-align: middle;}
    .icon {padding-right: 9px; height: 20px;}
    #addPhoto { width: 30%; margin: 10px;}
    .iconBtn {height: 15px; min-width: 0px; padding-right: 2px;}
    #fullscreen {display: none;}
    #finish_btn {width: 55%; margin: 10px;}
    #refresh {width: auto; margin-right: 1px;}
    #video_container { margin-top:0; margin-bottom: 0;z-index: 10000;}
    #arrow {left: 5px;}
   .imageThumb, .added {margin: 0 0 5px 10px; width: 15vw; height: 15vw; }
   #queuedPhotos {overflow: hidden;}
   #countdown {padding-left: 2px;}
   [id='5'], [id='6'], [id='7'], [id='8'], [id='9'] {display: none;}
   #space_overlay img {top: -15px;right: -15px; width: 15px; height: 15px;}
   #foot img {margin: 0 auto; padding: 15px 10px 15px 0;}
}

@media (max-width: 1024px) and (orientation:landscape) {
    #frame img {display: none;}
 	#fullscreen {display: none;}
 	body {overflow: hidden; background-color: #000; background-image: none;}
 	#video_container { margin-top:0; margin-bottom: 0;z-index:10000;}
 }