*{
    border: none;
    padding: 0;
    margin: 0;
    /*overflow-x: hidden;*/
}

/*
    FONTS
    font-family: 'Roboto', sans-serif;
    font-family: 'Poppins', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-family: 'Playfair Display', serif;
*/

header{
    width: 100%;
    height: 75px;
    padding-top: 5px;
    background-color: black;
    border-bottom: 1px solid;
    border-bottom-color: rgba(255,255,255,0.3);
}

header img{
    height: 70px;
    margin-left: 15vw;
}

header nav{    
    position: absolute;
    top: 50px;
    right: 15vw;
}

header nav a{    
    text-decoration: none;
    display: inline-block;
    border-bottom: 2px transparent solid;
    transition: .2s;    
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: lighter;
    margin-left: 25px;
    padding: 7px 7px;
    transition: .2s;
}

header nav a:hover{    
    transition: .2s;
    border-bottom: 2px white solid;
}

header nav a.linkWhatsApp{
    transition: .2s;
    background-color: #128c7e;
    font-weight: 600;
    padding: 7px 12px;
}

header nav a.linkWhatsApp img{
    width: 17px;
    height: 17px;
    margin-left: 0;
    margin-right: 5px;
    vertical-align: top;    
}

header nav a.linkWhatsApp:hover{
    border-bottom: 2px transparent solid;
    transition: .2s;
    /*border-bottom: none;*/
    background-color: #25d366;
    color: white;
}

#header2{
    background-color: rgba(0,0,0,0.75);
    position: fixed;
    top: -80px;
    left: 0;
    z-index: 999;
}

header#header2 nav{
    top: 30px;
}

footer{
    height: 40px;
    background-color: black;
    border-top: 1px solid;
    border-top-color: rgba(255,255,255,0.3);
}

footer a{    
    text-decoration: none;
    display: inline-block;
    color: white;
    border-bottom: 1px transparent solid;
    transition: .2s;    
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: lighter;
}

footer span{
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: lighter;
}

footer #link_1{
    padding-right: 5px;
    margin-left: 5vw;
    margin-top: 10px;
}

footer p{
    float: right;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: lighter;
    margin-right: 5vw;
    margin-top: 10px;
}

section{
    height: 100vh;
}

h1, h2, h3, p{
    color: white;    
    cursor: default;
}

h1{
    font-size: 70px;
    font-family: 'Poppins', serif;
    font-weight: 700;
    padding: 0 20vw;
    padding-bottom: 15px;
    text-align: center;
}

h2{
    font-size: 36px;
    font-family: 'Poppins', serif;
    line-height: 1em;
    font-weight: 700;
    width: 1200px;
}

#h2_black{
    color: black;
    width: 100%;
}

h3{
    font-size: 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    text-align: center;
}

h4{
    font-size: 17px;
    font-family: 'Poppins', sans-serif;  
    font-weight: 300;
    line-height: 1.8em;
    color: rgb(114, 114, 114);
    cursor: default;
}

p{
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4em;    
    font-weight: 400;
}

p:hover{
    color: red;
}

#sec_home{
    background-image: url(../img/bg_home.png);
}

#sec_home div{
    padding-top: 37.5vh;
}

#sec_serv{
    background-image: url(../img/bg_servicios.png);
    padding: 0 15vw;
}

#sec_home, #sec_serv{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
}

#sec_about{
    margin-top: 20vh;
    height: 45vh;
    padding: 0 15vw;
    padding-bottom: 5vh;
}

#sec_about #sec_about_left{
    float: left;    
    width: 30vw;
    padding-right: 6vw;
}

#sec_about img{
    height: 290px;
    float: left;
}

#sec_serv #sec_serv_left{
    margin-right: 13vw;
}

#sec_serv #sec_serv_right{
}   

#sec_serv_left, #sec_serv_right{
    float: left;
    width: 27vw;
    padding-top: 40vh;
}

#sec_serv h2{
    padding-bottom: 60px;
    width: 100%;
}

#sec_serv p{
    margin-bottom: 20px;
}

#sec_cont{
    width: 70%;
    height: 65vh;
    padding: 0 15%;
    padding-top: 35vh;
}

#sec_cont h2{
    color: black;
    width: 100%;
    line-height: 50px;
}

#sec_cont_left{
    width: 20vw;
    float: left;
    margin-right: 8vw;
}

#sec_cont #sec_cont_left #h4_tel{
    padding-top: 40px;
}

.tick{
    font-size: 16px;
    color: red;
    font-weight: 600;
    cursor: default;
    padding-right: 20px;
}

.border_red{  
    width: 30px;
    border: 2px solid red;
    border-radius: 3px;
    margin: 30px 0;
}

form{
    float: left;
}

input, textarea{
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 13px;
    border-bottom: 1px rgba(0,0,0,.8) solid;
    outline: none;
    outline-offset: 0;
}

input{    
    width: 12vw;
    margin-right: 1.5vw;
    margin-top: 50px;
}

textarea{
    resize: none;
    display: block;
    margin-top: 100px;
    width: 39.5vw;
}

form #boton, form #enviar{
    border: none;
    background-color: rgb(190, 30, 45);
    color: white;    
    border-radius: 35px;
    width: 150px;
    height: 50px;
    padding: 0px 0;
    text-align: center;
    vertical-align: central;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    transition: .3s;
    cursor: pointer;
    display: block;
    margin-left: 15.5vw;
}

form #boton:hover, form #enviar:hover{
    background-color: rgba(190, 30, 45, .7);
}

#respuestaForm{
    color: black;
    margin-top: 20px;
}

#respuestaForm:hover{
    color: black;
    margin-top: 20px;
}

#info_cont{
    padding-top: 15px;
    background-color: black;
}

#info_cont p{
    margin-right: 15vw;
    float: right;
    color: white;
    font-size: 13px;
    font-family: "Open Sans",sans-serif;    
    font-weight: lighter;
}

#info_cont p:hover{    
    color: white;
}


#info_cont i{
    font-size: 15px;
    padding-left: 20px;
    padding-right: 5px;
}

header div{
    display: none;
}

#btn_cobraCheque{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-decoration: none;
    width: 100%;
    padding: 5% 0;
    display: block;
    text-align: center;
    background-color: #111111;
    border-bottom: 5px solid white;
    transition: .2s;
    color: white;
    font-size: 1.8em;
}

#btn_cobraCheque:hover{
    background-color: #ebebeb;
    border-bottom: 5px solid #111111;
    transition: .2s;
    color: #111111;
    font-size: 1.9em;
}

#cobrarCheque_div{
    min-height: 90vh;
    padding-top: 10vh;
}

#cobrarCheque_div .cobrarCheque_divs{
    width: 30%;
    padding: 0 5%;
    float: left;
}

#cobrarCheque_div #cobrarCheque_divs_left{
    margin-left: 10%;
}

#cobrarCheque_div #cobrarCheque_divs_left img{
    width: 100%;
    margin-top: 50px;
}

#cobrarCheque_div #cobrarCheque_divs_right{
    padding-top: 150px;
}

#cobrarCheque_divs_right form{
    width: 100%;
}

#cobrarCheque_divs_right form #nombre, #cobrarCheque_divs_right form #mail{
    width: 96%;
    margin: 0 2%;
}

#cobrarCheque_divs_right form #moneda{
    width: 25%;
    margin: 0 2%;
}

#cobrarCheque_divs_right form #monto{
    width: 66%;
    margin: 0 2%;
}

#cobrarCheque_div form #boton{
    width: 40%;
    margin-left: 30%;
}

#cobrarCheque_divs_right form #nombre, #cobrarCheque_divs_right form #mail, #cobrarCheque_divs_right form #moneda, #cobrarCheque_divs_right form #monto{
    margin-bottom: 30px;
    /*height: 30px;*/
    padding-bottom: 13px;
}

#cobrarCheque_div form select{
    outline: none;
    cursor: pointer;
    /*height: 30px;*/
    font-size: 14px;
    border-bottom: 1px black solid;
}

#cobrarCheque_div #h2_black{
    width: 100%;
}

#cobrarCheque_div input#custom-input-date,
label {
  display: block;
  outline: none;
}

#cobrarCheque_div .input-field {
  margin-bottom: 16px;
  width: 96%;
  margin: 0 2%;
}

#cobrarCheque_div label {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  color: #212529;
  margin-bottom: 8px;
}

#cobrarCheque_div input#custom-input-date {
  width: 93%;
  padding: 12px 16px;
  border-bottom: 1px black solid;
  color: #212529;
  font-size: 14px;
  font-weight: 500;
  margin-top: 0;
    height: 30px;
}

#cobrarCheque_div input.calendar {
  background-image: url('https://bytebucket.org/fuoricitta/form-best-practice/raw/197f5e38bea1d53b52102b6c98e0e6b129dd6908/Examples/assets/img/calendar.png?token=b57efe00e0e5d28327a3b62e263519c284c70d53');
  background-repeat: no-repeat;
  background-position: right 30px center;
}

#cobrarCheque_div .label-error {
  width: 96%;
  margin: 0 2%;
  margin-top: 10px;
  font-size: 14px;
  color: #DC3545;
}

#cobrarCheque_div input#custom-input-date:hover {
  /*border: 1px solid #8f8f8f;*/
}

#cobrarCheque_div input#custom-input-date:focus {
  /*border: 1px solid #007BFF;*/
}

#cobrarCheque_div .error {
  border-bottom: 1px red solid;
}





.input-file-container {
  position: relative;
  width: 96%;
  margin: 0 2%;
  margin-top: 30px;
} 
.js .input-file-trigger {
  display: block;
  padding: 40px 45px;
  text-align: center;
  background: #222222;
  color: white;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
}
.js .input-file {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  background: rgb(190, 30, 45);
  color: #39D2B4;
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.js .file-return {
  font-size: 1em;
}
.js .file-return:not(:empty):before {
  content: "Archivo seleccionado: ";
  font-style: normal;
  font-weight: normal;
}

.input-file-trigger{
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
}

#cobrarCheque_div label{
    color: white;
    font-weight: normal;
}

.file-return{
    color: #222222;
    width: 96%;
    margin: 0 2% !important;
    margin-top: 10px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
}

.file-return:hover{
    color: #222222;    
}

#cobrarCheque_div #respuestaForm{
    width: 96% !important;
    margin: 0 2% !important;
    margin-top: 30px !important;
    font-size: 15px !important;
}



input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#backHome{
    display: block;
    width: 100%;
    padding: 20px 0;
    color: white;
    text-decoration: none;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    background-color: #222222;
    font-size: 15px;
    display: none;
}

#menuMobile, #navMobile{
    display: none;
}

#navMobile{
    background-color: rgba(0,0,0,.9);
    height: 100vh;
    width: 100vw;
    z-index: 5;
}

/*///////////////////////////////RESPONSIVE///////////////////////////////*/
@media screen and (max-width: 1100px){
    nav{
        display: none;
    }
    #menuMobile{
        display: block;
        position: absolute;
        right: 6vw;
        top: 18px;
        width: 12vw;
        height: 12vw;
    }
    #navMobile{
        display: block;
        position: fixed;
        top: -100vh;
    }
    #navMobile nav{
        display: block;
        padding-top: 25vh;
    }
    #navMobile a, #navMobile p{
        display: block;
        color: white;
        text-decoration: none;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
        width: 100%;
        padding: 0.75vh 0;
    }
    #navMobile a{
        padding: 1vh 0;
        margin: 0.5vh 0;
    }
    #navMobile .linkWhatsApp{
        background-color: #128c7e;
        font-weight: 600;
        padding: 2vh 0;
    }
    #navMobile .linkWhatsApp img{
        width: 18px;
        height: 18px;
        vertical-align: sub;
        margin-right: 5px;
    }
    #navMobile div{
        background-color: white;
        width: 100%;
        height: 3px;
        margin: 20px 0;
    }
    #navMobile #cerrarNav{
        position: absolute;
        bottom: 2vh;
        left: 44vw;
        width: 8vw;
    }
    
    header#header div{
        display: none;
    }
    header img{
        margin-left: 5vw;
        margin-top: 12px;
    }
    header{
        height: 95px;
    }
    
    #backHome{
        display: block;
    }
    
    
    
    h1{
        font-size: 40px;
        width: 100%;
        padding: 0;
    }
    
    h2{
        font-size: 30px;
        width: 100%;
        text-align: center;
    }
    
    h3{
        margin-top: 20px;
        font-size: 20px;        
    }
    
    h4{
        font-size: 15px;
        width: 100%;
        text-align: center;
    }
    
    #sec_home div {
        padding-top: 20vh;
        width: 80vw;
        padding-left: 10vw;
    }
    
    #sec_about {
        margin-top: 10vh;
        padding: 0 10vw;
        padding-bottom: 10vh;
        width: 80vw;
        height: auto;
    }
    
    #sec_about #sec_about_left {
        width: 80vw;
        float: none;
    }
    
    #sec_about img {
        height: auto;
        width: 80vw;
        float: none;
        margin-top: 10vh;
    }
    
    #sec_serv{
        padding: 10vh 10vw;
        width: 80vw;
        height: auto;        
    }
    
    #sec_serv_left, #sec_serv_right{
        padding-top: 0;
        float: none;
        width: 80vw;
    }
    
    #sec_serv h2{
        padding-bottom: 30px;
        padding-top: 50px;
    }
    
    .border_red{
        margin: 30px auto;
    }
    
    #sec_cont{
        padding: 10vh 10vw;
        width: 80vw;
        height: auto;
    }
    
    #sec_cont_left{
        width: 80vw;
    }
    
    input{
        width: 80vw;
        display: block;
    }
    
    textarea{
        width: 80vw;
    }
    
    #info_cont{
        display: none;
    }
    
    header div{
        display: block;
        float: right;
    }
    
    header div p{
        margin-right: 5vw;
        color: white;
        font-size: 11px;
        font-family: "Open Sans",sans-serif;    
        font-weight: lighter;
        text-align: right;
        padding: 3px 0;
    }
    
    header div p:hover{
        color: white;
    }

    header div p i{
        font-size: 13px !important;
        padding-right: 5px;
        padding-left: 3px;
    }
    #btn_cobraCheque{
        padding: 12% 0;
    }
    
    
    
    #cobrarCheque_div .cobrarCheque_divs{
        width: 90%;
        padding: 0 5%;
        float: none;
    }
    #cobrarCheque_div #cobrarCheque_divs_left{
        margin-left: 0;
    }
    #cobrarCheque_div form #boton{
        margin-bottom: 50px;
    }
    #cobrarCheque_div #cobrarCheque_divs_right{
        padding-top: 50px;
    }
    #cobrarCheque_divs_right form input{
        display: initial !important;
    }
    #cobrarCheque_divs_right form #monto{
        width: 65%;
    }
    #cobrarCheque_div input#custom-input-date{
        width: 89%;
    }
    
}