body {

    font-family: 'Kaushan Script', cursive;

}



body * {

    box-sizing:border-box;

}



a {

    color: #BC252A;

    text-decoration:none;

}



body.fondo {

    background: url('../imgs/pueblo-alto.jpg');

    width: 100vw;

    height: 100vh;

    background-position: top center;

    background-size: cover;

    position: relative;

    z-index: 1;

    overflow: hidden;

}

    body.fondo:before {

        content: '';

        display: block;

        width: 100vw;

        height: 30vh;

        position: absolute;

        z-index: 1;

        bottom: 0;

        left: 0;

        background-image: linear-gradient(rgba(255,255,255,0), rgba(0,0,0,0.7));

    }



main {

    width: 100vw;

    height: 100vh;

    padding:50px;

    position:relative;

    z-index:2;

}

main .logo {

    background: url('../imgs/pueblo-alto-blanco.svg');

    width: 310px;

    height:177px;

    background-position: top center;

    background-size: cover;

    margin:auto;

}



.info {

    color:#fff;

    font-size:40px;

    line-height:50px;

    text-align:center;

    max-width:1000px;

    margin:0 auto;

    position:absolute;

    bottom:50px;

    left:0;

    right:0;



}

.info h1 {

    display:inline;

}

    .info div {

        font-size: 15px;

        font-family: 'Roboto', sans-serif;

        letter-spacing: 1.5px;

    }



    .info iframe {

        width: 100%;

        height: 40px;

        overflow: hidden;

        max-width: 800px;

        margin:10px auto 0;

    }



input[type=submit] {

    display: inline-block;

    padding: 5px 10px;

    border: 2px solid #fff;

    color: #fff;

    font-size: 15px;

    font-family: 'Roboto', sans-serif;

    letter-spacing: 1.5px;

    background:transparent;

    width:20%;

    text-align:center;

}

form label {
    float:left;
}
form div:not(#submit-msg) {width:50%;float: left;padding:20px;box-sizing: border-box;}

        input[type=submit]:hover {

            cursor:pointer;

            background:rgba(255,255,255,0.3);

        }



input[type=email], input[type=text], input[type=tel] {

    border: none;

    border-bottom: 2px solid #dadada;

    padding: 5px 0;

    color: #fff;

    font-size: 15px;

    font-family: 'Roboto', sans-serif;

    letter-spacing: 1.5px;

    height: 36px;

    margin-right: 10px;

    float: left;

    background: transparent;
    width:100%;

}

textarea {

    border: 2px solid #dadada;

    padding: 5px;

    color: #fff;

    font-size: 15px;

    font-family: 'Roboto', sans-serif;

    letter-spacing: 1.5px;

    margin-right: 10px;

    float: left;

    background: transparent;
    width:100%;

}

::placeholder {

    color: #fff;

    font-size: 15px;

    font-family: 'Roboto', sans-serif;

    letter-spacing: 1.5px;

}



.redes {

    text-align:center;

    position:absolute;

    top:30px;

    right:50px;

}



.redes a {

    display: inline-block;

    width: 40px;

    height: 40px;

    margin: 20px 10px ;

    cursor: pointer;

    background-size: cover;

}



.redes .fb {

    background-image: url('../imgs/fb.svg');

}



.redes .ig {

    background-image: url('../imgs/ig.svg');

}



.redes .wapp {

    background-image: url('../imgs/wapp.svg');

}



.redes a:hover {

    opacity: 0.8;

}



    

 

/***************** tablet *******************/

@media screen and (min-width: 750px) and (max-width: 1023px) {

    

}





/***************** moviles y tablet *******************/



@media screen and (min-width: 100px) and (max-width: 1023px) {



   



}





/***************** móviles *******************/

@media screen and (min-width: 100px) and (max-width: 749px) {

    
main {padding:0;}

.info {position:static;}
}



/***************** móviles chicos *******************/

@media screen and (min-width: 100px) and (max-width: 500px) {

    .info iframe {

        height: 170px;

        margin: 10px auto 0;

    }




form {
    margin-top: 20px;
}

form div:not(#submit-msg) {
    width:100%;
    padding:0;
    margin:10px 0 0 0!important;
}
    input[type=email], input[type=text], input[type=submit] {

        width: 100%;

        clear: both;

        margin-bottom: 10px;

    }

    input[type=email] {

        margin-bottom: 10px;

    }

}



@media screen and (min-width: 100px) and (max-width: 749px) and (orientation: portrait) {

    body.fondo:before {

        height: 70vh;

    }



   main .logo {
    width: 205px;
    height: 117px;
    margin: 70px auto 20px;
}



    .info {

        font-size: 25px;

        line-height: 34px;

        padding: 0 20px;

        bottom: 50px;

    }



    .info div {

                font-size: 15px;

                letter-spacing: 0;

                line-height: 20px;

                text-align: left;

                margin-top: 20px;

            }

        

    .redes {
    text-align: center;
    position: absolute;
    top: -65px;
    right: 0;
    left: 0;
}



        .redes a {

            width: 30px;

            height: 30px;

        }

    

    

}



@media screen and (min-width: 100px) and (max-width: 749px) and (orientation: landscape) {
    body, main {
        height: inherit!important;
        overflow: inherit!important;
    }
    body.fondo {
        background-repeat: no-repeat;
    }


    main {

        padding: 20px;

    }

    main .logo {

        width: 150px;

        height: 88px;

    }

    .info {

        padding: 20px;

        bottom:0;

        padding: 20px;

    }

}