@import url('https://fonts.googleapis.com/css?family=Sen&display=swap');

*{margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: 'Sen', sans-serif;
}
.wrapper{
    width: 960px;
}
header{ width: 100vw; height: 100vh; background-image: url(images/back.png); background-size: cover;}
nav{
    width: 100%;
    height: 50px;
    background-color: #06171c; color: white;
    position: fixed;
    top: 0;
    z-index: 1;
}
nav ol{ position: absolute; top: 0; right: 0;}
nav ol li{display: inline-block; margin: 20px;}
nav ol a{ display: block; width: auto;  color: white;}
#logoChajofer{
    text-indent: 500px;
    overflow: hidden;
    margin: 10px 25px;
    width: 325px;
    height: 90px;
    background-image: url(images/LogotipoChajofer.svg);
    background-size: cover;
}
#boxblue{
    background-color:transparent; 
    height: 0px; 
    width: 350px;
    border-right: 100px solid transparent;
	border-bottom: 100px solid transparent;
    border-top: 100px solid #06171c;
    position: fixed; top: 20px;
    z-index: -1;

}

#boxblue2{
    background-color: rgba(13,66,83,.85); width: 100vw; height: 300px;
    top:250px; position: absolute;

}


h1{
    background-image: url(images/chajoferlogo2.svg);
    width: 420px;
    height: 115px;
    background-size: cover;
    position: absolute;
    top: 300px;
    left: 10%;
    text-indent: 500px;
    overflow: hidden;
    z-index: 1;
}

#background1{ background-color: rgba(13,66,83,.5); width: 100vw; height: 100vh; position: absolute; top: 0; }

header video{ position: absolute; width: 38%; top: 25%; left:60%;}
#cel1{ position: absolute; top: 40%; left: 50%;}
#futerheader{background-color: rgba(13,66,83,1); width: 100%; height: 200px; bottom: 100px; position: absolute;}
header p{ position: absolute; top: 60%; left: 10%; color: white;}
#scrollBtn{top: 70%; left: 40%; }

section#contact, footer, section#msg{
    margin: 0;
    background-color: #06171c; color: white;

}

section h3{
    margin: -50px auto 50px auto;
    font-size: 2em;    
}

form, #msg{
    width: 50%;
    margin: auto;
    padding: 100px;
}
input{width: 100%;}

input[type="submit"]{
    background-color: white;
    border-radius: 50px;
    width: 50%;
    margin: 25px auto -50px auto;
    display: block;
}
footer{
    text-align: center;
    font-size: 75%;
}

footer p{ padding: 20px;}
footer h3{
    text-indent: 500px;
    overflow: hidden;
    background-image: url(images/LogotipoChajofer.svg);
    background-size: cover;
    width: 220px;
    height: 60px;
    margin: auto;
}

#contact div{
    width: 48%;
}
@media screen and (max-width: 600px){
    
    h1{
        display: none;
    }
    nav ol{display: none;}
    
    header video{ position: absolute; width: 50%;  display: block; left: 0; transform: translate(50%);}
    
    header, #contact{
        width: 100%;
        height: 100vh;
    }
    #contact{
        padding-top: 100px; 
    }
    
    #cel1{ position: absolute; top: 40%; left: auto; right: 10%; width: 25%;}
    input{ width: 100%; height: 25px;}
    label{width: 100%;}
    #contacto p{font-size: 1em;}
    #contact div{ width: 100%; clear: both;}

}