@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');


body{
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    background-color: #3d3d3d;
    background-image: url("imgs/thumb-1920-720032.jpgs");
    color : #ccc;
    width : 100%;
    align-content: center;
}

header{
    width: 100%;
    align-content: center;
    text-align: center;
}

header a{
    color: #f5f5f5;
    text-decoration: none;
}

.main-container{

    text-align: center;
    align-content: center;
}

/*Uploader*/

.uploader{
    margin: 5% 25% 5% 25%;
    padding: 5%;
    width: 40%;
    text-align: center;
    background: rgba(38.4, 38.4, 38.4, 0.7);
    border:1px solid #f5f5f5;
    border-radius: 5px;
}

.mb8{
    font-weight: 300;
}

.lead{
    font-size: 10px;
}


/*Style Upload */
input{
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

button{
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

button[type="submit"]{

    background-color: #3d3d;
    color: #f5f5f5

}

input[type="file"]:focus {
  outline: 1px solid #ccc;
}

m6 {
  margin: 4px;
}

input[type="file"] {
	 padding: 12.5px;
     /*background: #f5f5f5;*/
     background: rgba(255, 255, 255, 0.2);
     border-radius: 5px;
     color: #f5f5f5;
   width: 50%;
   text-align: center;
}

#mask > .bold{
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;

  width: 250px;
  height: 5px;
}

progress {
    /* Reset the default appearance */
    -webkit-appearance: none;
  
    -moz-appearance: none;
    appearance: none;
    
    width: 250px;
    height: 5px;
    background: rgba(27.8, 70.6, 45.9, 0.2);
    border: 0;
    
}
	
progress::-webkit-progress-bar { 
	background: rgba(27.8, 70.6, 45.9, 0.2);
    height: 5px;
    border: 0;
}
progress::-webkit-progress-value {  
	background: #3d3d;

}  
progress::-moz-progress-bar { 
    /*background: #ff8f00;*/
    background: #3d3d;
    

}

.link{
    width: 100%;
    padding: 12.5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: #f5f5f5;
    width: 100%;
    text-align: center;
    border: none;
	margin-bottom: 5px;

}

.btn{
    margin: 1%;
    padding: 12.5px;
    border : none;
    text-decoration: none;
    background-color: #f5f5f5;
    color: #333;
    font-size: 15px;
    border-radius: 5px;
}


/* video */

.viddiv{
    width: 70%;
    margin: 1% 15% 1% 15%;
    text-align: center;


}

.vid{
    width: 90%;

}

.grama{
    background-color: #333;
    width: 100%;
    color: #ccc;
}




footer{
    width: 98%;
    padding: 0% 1% 0% 1%;
    font-size: 10px;
    text-align: center;
}

.red{
    color: red;
}

.green{
    color: #3d3d;
}