/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 #video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  max-width:640px;
  width:100%;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:640px;
  
}

#canvas {
  display:none;
}

.camera {
  width: 100%;
  display:inline-block;
}

.output {
	
  width: 100%;
  display:inline-block;
}
#vpb {
	display:none;
}
#photobooth {
	overflow:hidden;
}
#user_table {
	margin-top:2em;
	    margin-bottom: 3em;
}
#startbutton {
display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    padding: 0.5em 1em;
    top: 18px;
    background-color: rgb(0 122 97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgba(255, 255, 255, 1.0);
}
#sui_submit {
	margin-right:1em;
}
#sui_submit, #download, #start {
	padding: 0.5em 1em;
    background-color: rgb(0 122 97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgba(255, 255, 255, 1.0);
}
#vpbstart {
	text-align:center;
}
#download{
	background-color: #ffd21e;
    color: #007a61;
}
#camerror {
	background:red;
	color:white;
	padding:1em;
	margin-bottom:1em;
	font-size:24px;
	text-align:center;
	display:none;
}
.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}
#img_selector {
	width:100%;
	display:inline-block;
}
.overlay_image {
	max-width:90px;
	float:left;
	margin-right:1em;
	cursor: pointer;
}
.overlay_image img {
	border:1px solid;
}
.photocaption {
	float:left;
	
}
#video_box{
    /* float:left; */
}
#videostream {
	position:relative;
	width:100%;
}
#video_overlays {
position:absolute;
float:left;
   
    min-height:240px;

    z-index:99;
}
#video_overlays img {
	width:100%;
	height:auto;
}
#TB_caption {
     height: inherit!important;

}
	.grid-item {
		width: 100%;
		padding:5px;
	}
	
	
.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
	margin-bottom:2em;
    }

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 2 1 auto;
    -ms-flex: 2 1 auto;
    flex: 2 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }
	
	

@media only screen and (min-width: 600px) {
	.grid-item {
		width: 50%;
		padding:5px;
	}
	.camera {
  width: 100%;
  display:inline-block;
}

.output {
	padding:0 1em;
  width: 100%;
  display:inline-block;
}
	
}
@media only screen and (min-width: 996px) {
	.grid-item {
		width: 33%;
		padding:5px;
	}
}