body{

    margin:0px; 
    padding:0px; 
    font-family: Arial, Helvetica, sans-serif;
    
}

* {

    box-sizing: border-box;
    
}

@font-face {
    font-family: Paytone;
    src: url(PaytoneOne-Regular.ttf);
}

@font-face {
    font-family: Baloo;
    src: url(Baloo-Regular.ttf);
}

@font-face {
    font-family: Roboto;
    src: url(Roboto-Regular.ttf);
}


textarea:focus, input:focus{
    outline: none;
}

#_main {

    width:100%; 
    height:100%;
    background-color: #ffffff;
    display:flex;
    

}

#_camera {

    width:100%; 
    height:100%;
    background-color: #000000;
    position: absolute;
    top: 0px;
    left:0px;
        
}
#_picture {

    width:100%; 
    height:100%;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    left:0px;
    
}

.middle {

    position: relative;
    top : 50%;
    transform : translateY(-50%);
    
}

.center {

    margin: auto;
   
}

.size-1 {width: 8.33%;}
.size-2 {width: 16.66%;}
.size-3 {width: 25%;}
.size-4 {width: 33.33%;}
.size-5 {width: 41.66%;}
.size-6 {width: 50%;}
.size-7 {width: 58.33%;}
.size-8 {width: 66.66%;}
.size-9 {width: 75%;}
.size-10 {width: 83.33%;}
.size-11 {width: 91.66%;}
.size-12 {width: 100%;}

.size-show { display: initial }
.size-hide { display: none }

.size-sm-show { display: none }
.size-sm-hide { display: initial }


.display-block { display: block  }
.display-inline-block { display: inline-block }
.display-flex { display: flex }
.display-inline-flex { display: inline-flex }

.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-right { text-align: right; }
.text-left { text-align: left; }

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


    .sm-display-block { display: block  }
    .sm-display-inline-block { display: inline-block }
    .sm-display-flex { display: flex }
    .sm-display-inline-flex { display: inline-flex }

    .sm-text-center { text-align: center; }
    .sm-text-justify { text-align: justify; }
    .sm-text-right { text-align: right; }
    .sm-text-left { text-align: left; }

    .size-sm-1 {width: 8.33%;}
    .size-sm-2 {width: 16.66%;}
    .size-sm-3 {width: 25%;}
    .size-sm-4 {width: 33.33%;}
    .size-sm-5 {width: 41.66%;}
    .size-sm-6 {width: 50%;}
    .size-sm-7 {width: 58.33%;}
    .size-sm-8 {width: 66.66%;}
    .size-sm-9 {width: 75%;}
    .size-sm-10 {width: 83.33%;}
    .size-sm-11 {width: 91.66%;}
    .size-sm-12 {width: 100%;}

    .size-sm-show { display: initial }
    .size-sm-hide { display: none }

    .size-show { display: none }
    .size-hide { display: initial }

}