* {
	box-sizing: border-box;
}

html,body{
    margin: 0;
    padding: 0;
	font-weight: 300;
	line-height: 1;
	text-rendering: optimizeLegibility; 
}
body{
    font-family: "Work Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 400;
	/*
	background: #000942;
	*/
	background:#399cd8;
	color: #fff;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height:100vh;
    min-height:100vh!important;
    overflow-x: auto;
    box-sizing: border-box;
}

div{
	box-sizing: border-box;
}


img {
	max-width:100%;
}

html,
body,
input,
select,
textarea {
	font-family: "Work Sans", "Helvetica Neue",'Roboto', 'San Francisco', helvetica, arial, sans-serif;
}

button,
input,
body,
textarea {
	font-size: 1.8rem; 
}

button{
	cursor:pointer;
}

input,
textarea{
	padding:.5rem;
}


input[readonly]{
	opacity:.7;
}


/*   ELEMENTS    */

p,
li,
dt,
dd,
time,
big,
textarea,
label {
  line-height: 3.2rem;
  margin-bottom: 3.2rem; 
}

li,
p:last-child {
  margin-bottom: 0; 
}

ul > li,
ol > li {
	margin-left: 3.2rem; 
	font-weight:normal;
}

li li {
	font-size: 100%; 
}


a,
p{
	color: white;
    font-weight: 400;  	
}

a {cursor:pointer;}

button{
	margin:1rem 0;
	padding:.5rem 1rem;
	border-radius:.5rem;
	border:none;
}

button + button{
	margin-left:1rem;
}

button:hover{
	background-color:white;
}


/*   BASIC STYLES   */

.italic{
	font-style:italic;
}
.bold{
	font-weight:900;
}

.underlined{
	text-decoration:underline;
}

.tiny-text{
	font-size:1.4rem;
}

.vlak{
	padding: 2rem 4rem;
	background-color: rgba(0,0,0,.2);
    border-radius:1rem;
}




/*  BOXY ELEMENTS, PLACING, SPACING  */


.margin-content{
	padding:2rem 4rem;
    margin:0 auto;
}


.highlighted{
	background-color:rgba(0,0,0,.3);
	padding:2rem 4rem;
}


.flex-space-around{
	display:flex;
	justify-content: space-around;
}

.flex-spread{
    
	display:flex;
	justify-content: space-between;
}




/*  OVERVIEW  */

#overview-container{
	margin-top:2rem;
	margin-bottom:4rem;
	/*margin-left: -4rem;
	width: calc(100% + 8rem);*/
}

#overview-hint{
	padding:2rem;
	background-color:rgba(27,33,85,1);
	font-style:italic;
}


#overview-cover{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	background-color:rgba(0,0,0,.3);
	z-index:3;
}




/*  SPECIFIC ELEMENTS  */


#tech-tutorial li{
	margin-bottom:2rem;
}

#start-scanning-button{
	font-size: 200%;
	padding: 2rem 4rem;
	margin: 1.5rem 0 2rem 0;
	border-radius:1rem;
}


#fullscreen-tip{
	padding:1rem 4rem;
	background-color: rgba(0,0,128,.8);
    width:100%;
}

#fullscreen-tip > button:not(:last-of-type) {
	margin-right:2rem;
}

#fullscreen-tip p{
	margin-bottom:1rem;
	margin-right:2rem;
}


#nl-warning{
	background-color:red;
	padding: 2rem 4rem;
	margin-bottom: 0;
	line-height:4rem;
}

#nl-warning h3{
	color:white;
}

#checkbox-container{
	display:flex;
	align-items: center;
	justify-content:center;
}

#landing-terms-checkbox{
	/*width:4rem;
	height:4rem;*/
	-webkit-transform: scale(3,3);
	transform: scale(3,3);
	margin-right:1.5rem;
}

#show-terms-button{
	text-decoration:underline;
	cursor:pointer;
}

#i-agree{
	vertical-align: text-top;
}

#viz-container{
	display:flex;
}


#sus-list-title{
	margin-top:4rem;
}

#sus-table-container{
	background-color: rgba(0,0,0,.2);
	overflow:auto;
}




/*  LANDING VIDEO  */

#nl-tip{
	display:block;
	background-color:#1b2155;
	color:white;
	padding:1rem 4rem;
}
#nl-tip h3{
	display:block;
}

#intro-video-item{
	display:flex;
	flex-wrap:wrap;
	margin:6rem 0;
}
#intro-video-item > div{
	min-width:240px;
}

#intro-video-container{
	text-align:center;
	flex-grow:1;
}
#intro-video{
	cursor:pointer;
}

#intro-video-side{
	padding:2rem 4rem;
	min-width:300px;
}



/*  LANDING TRYPTIC  */

#triptic-container{
	margin-bottom:4rem;
}

#tutorial-triptic{
	display:flex;
	flex-wrap:wrap;
	margin: 1rem 0 6rem 0;
}

#tutorial-triptic > div{
	flex-grow:1;
	min-width:150px;
	flex-shrink: 1;
}
#tutorial-triptic > div > img{
	width: calc(100% - 2rem);
	margin-right:2rem;
	margin-bottom:2rem;
	/*box-shadow: 4px 4px 8px rgba(0,0,0,.3);*/
}


/*  START BUTTON  */


#start-button-container{
	padding-top:4rem;
	text-align:center;
    border-radius:1rem;
    margin-bottom:10rem;
}






/*  CONTROLS  */

#first-fields{
	display:flex;
}

#first-fields-names{
	display:flex;
	flex-direction:column;
	flex-grow:1;
}

#selected-avatar{
	width:7rem;
	background-color:rgba(255,255,255,1);
	position:relative;
}

#selected-avatar .avatar{
	width:5rem;
	height:5rem;
	margin:1rem;
}

#thumbnail-image{
	position:absolute;
	width:7rem;
	height:7rem;
	left:0;
	top:0;
	cursor:pointer;
	z-index:10;
}

#canvas-photo{
	border:1px dashed #fff;
}

#controls #snitch-buttons{
	background-color: rgba(255,255,255,.05);
}

#snitch-buttons > button{
    font-size: 2rem;
    padding: 1rem;
}

#input-first-name{
	font-size:120%;
}



/*   CAM   */


#video-background{
	background-color:black;
}
.video-wrapper{
	position:relative;
	margin:0 auto;
	text-align: center;
	max-width:640px;
}

#cam-container{
	padding: 2rem 4rem;
	background-color:rgba(0,0,0,.2);
	margin-bottom:4rem;
    border-radius:1rem;
    margin-top:1px;
}

#main-overlay-canvas{
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}

.flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
  filter: FlipH;
}

#grab-face-button,
#cam-test-button{
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:11;
	margin:0;
    cursor:pointer;
}

#cam-shrink-button{
	position:absolute;
	top:10px;
	right:10px;
	z-index:12;
	margin:0;
}

#cam-mini{
	position:relative;
	align-items:center;
}
#cam-expand{
	display:none;
	padding:1rem 2rem;
	cursor:pointer;
	font-size:2rem;
}

#cam-container.active{
	padding:0;
}

#cam-loading{
	display:flex;
	align-items:center;
}

#cam-loading-status{
	line-height:2.4rem;
}

#cam-settings{
	padding:2rem 4rem;
	text-align:left;
}

#cam-container.shrunk #cam-mini{
	display:flex;
}
/*
#cam-container.shrunk {
	padding:0;
}
*/
#cam-container.shrunk video,
#cam-container.shrunk canvas{
	width:128px!important;
	flex-shrink:0;
	flex-grow:0;
}

#cam-container.shrunk #switch-camera,
#cam-container.shrunk #cam-test-button-container,
#cam-container.shrunk #cam-ready,
#cam-container.shrunk #cam-settings,
#cam-container.shrunk #cam-shrink-button{
	display:none;
}
#cam-container.shrunk #cam-expand{
	display:inline-block;
	flex-grow:1;
    font-weight: 400;
}



/*  CAMERA  */

#camera{
	background-color:black;
}

#camera-side-panel{
	display:flex;
	flex-direction:column;
}

#thumbnail{
	position:relative;
	left:-80px;
	visibility:hidden;
}





/*  SHARE TAB  */

.settings-tab-content h2,
.sharing-tab-content h2{
	margin-top:6rem;
}

.share-field{
	text-align:right;
}
.infected-codes-textarea,
.share-textarea{
	width:100%;
	height:12rem;
	text-align:left;
	margin-bottom:0;
}

#share-output-buttons button{
	display:inline-block;
}




/*  TABS  */

#tabs-content-container{
	/*padding-top:4rem;*/
}

.tab-container{
	padding:2rem 4rem;
}

#tabs {
   background-color: rgba(255,255,255,.1);
   /*padding-left: 2rem;*/
}

#tab-menu-items{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	margin-left:4rem;
	padding-bottom:2rem;
}

.tab-menu-item {
	display:inline-block;
    outline:none;
	padding: 1rem 2rem;
	border-radius:1rem;
    color:#000;
    background: #fff;
	cursor:pointer;
	margin-right:2rem;
	font-size: 2rem;

	margin-top:2rem;
	margin-bottom:0rem;
}

.tab-menu-item.inactive{
    color:#222;
    background: #CCC;
    outline:none;
}

.tab-menu-item:hover, 
.tab-menu-item.inactive:hover {
    background-color:white;
}






/*  ABOUT  */

#extra-about-hint{
	padding-bottom:4rem;
}



/*   SLIDER   */

.slidecontainer {
	width: 100%; /* Width of the outside container */
	height:0;
}

/* The slider itself */
.slider {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 5px;  
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	z-index:4;
	position: relative;
	top: -10px;
}

.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 35px;
	height: 35px;
	border-radius: 50%; 
	background: #4CAF50;
	cursor: pointer;
}

.slider::-moz-range-thumb {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #4CAF50;
	cursor: pointer;
}

#slider-hint{
	padding:2rem;
	background-color:rgba(0,0,0,.2);
}



/*   TOGGLE SWITCHES   */

#landing-terms-checkbox-label{
	display:inline-block;
}

.form-switch {
  display: flex;
  /*justify-content: center;*/
  align-items:center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /**/
  margin-bottom:.5rem;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: 2rem;
  width: 46px; /*  46? */
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
  transform: scale(1.5);
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.form-switch input { display: none; }

.form-switch input:checked + i { background-color: #4BD763; }

.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }




/*  loading animation */

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-right:4rem;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}







@media only screen and (max-width: 640px) {
    
    #sharingbuttons-explanation{
        display:none!important;
    }
}

/*
@media only screen and (max-width : 801px) {
	button{
		 
	}
}
*/


@media only screen and (min-width: 1025px) {

}

@media only screen and (min-width: 1325px) {

}




/*  confetti */


.confetti-wrapper {
  	position: fixed;
  	height:100%;
  	min-height: 100vh;
  	width:100vw;
	z-index:-1;
}

[class|="confetti"] {
  	position: absolute;
}

.red {
  	background-color: #E94A3F;
}

.yellow {
  	background-color: #FAA040;
}

.blue {
  	background-color: #5FC9F5;
}



/*  DEMO AND DEBUG  */



.rounded-corners{
    border-radius:1rem;
}


.multi-column-flex{
    display:flex;
    flex-wrap:wrap;
}
.multi-column-flex > div{
    min-width:300px;
    padding:1rem;
    display:flex;
    flex-wrap:wrap;
}

.multi-column-flex > div{
    min-width:80px;
}



.found-faces-container:not(:empty):before{
    display:block;
    margin-bottom:1rem;
    margin-top:1rem;
    width:calc(100% - 2rem);
    margin-left:0rem;
    border-bottom:1px dotted rgba(255,255,255,.5);
}



#restart-button:hover{
    transform: rotate(-45deg);
}


#start-scanning-button:hover,
#polaroid-download-button:hover,
#score-restart-button:hover{
    transform: rotate(0);
    transition-duration: .1s
}

.found-faces-container canvas{
    width:20%;
}


#winning-face{
    width:100%;
    min-width:100px;
    max-width:300px;
    height:auto;
}


.text-align-right{
    text-align:right;
}

/*  SHARING BUTTONS  */

#sharingbuttons h3{
    line-height: 4rem;
}

#sharingbuttons-explanation{
    opacity:0;
    transition: opacity .1s ease-in-out;
}

#sharingbuttons-container{
    margin-top:2rem!important;
    border-radius:1rem;
    text-align:center;
}

#sharingbuttons-container:hover #sharingbuttons-explanation{
    opacity:1;
}

.sharingbuttons {
    margin-top: 6rem;
}

.sharingbuttons a:hover{
    transform: scale(1.1);
    background-color:rgba(255,255,255,.1);
    border-radius:5px;
}

.sharingbuttons a:not(:last-of-type) {
    margin-right: 3rem;
}

.sharingbuttons img{
     width:auto;
}



#polaroid-download-button{
    background-color:green;
    color:white;
}


/*  COLOFON  */
#colofon{
    max-width:50rem;
    margin-top:2rem;
}

#colofon p{
    font-size:70%;
}


#intro-header-image{
    background-color: rgba(255,255,255,.1);
}

#intro-logo{
    margin-bottom:2rem;
}

#learn-more-button-container{
    margin-top:.5rem;
}

#learn-more-button{
    opacity:.8;
    cursor:pointer;
}

#learn-more-button:hover{
    opacity:1;
}

#explanation{
    border-radius:1rem
}

#percentage-recognised-container{
    font-size: 2rem;
    padding:2rem;
    text-align:center;
}

.huge-text{
    text-align:center;
    font-weight: 500;
}



/*  STALK */