/* RAMFOGO | 20/12/2021 */

html,body{
    display: grid;
    font-family: 'Kanit', Arial, Helvetica, sans-serif;
}

#main{
    background-image: url(../assets/fondex.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: grid;
    align-items: center;
}

.hero{
    position: absolute;
    top: 0px;
    left: 40%;
}
.tag{
    position: absolute;
    left: 0%;
    height: 100vh;
    width: 50vw;
}
.drop{
    position: absolute;    
    left: 20%;
}
.logo{
    position: absolute;    
    width: 32vw;
    max-width: 23vw;
    left: 10rem;
}
.text{
    position: absolute;    
    right: 10rem;
    width: 28vw;
    max-width: 19vw;
}

.verde{
    position: absolute;
    top: 60%;
    right: 10rem;
}
.outline{    
    width: 55vw;
    height: 34vh;
}

.rel{
    position: relative;
}

form{
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 1rem;
    padding-top: 2rem;
}

input, textarea{
    background-color: #fff;
    color: #000;
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

textarea{
    height: 100px;
    padding-top: 0.5rem;
}

#datos{
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #fff;
    text-align: right;
}

h2{
    color: #8DDB3A;
    font-size: 1.6rem;
}

.enviar{
    background-color: #8DDB3A;
    color: #000;
    text-align: center;
    width: 10rem;
}


@media only screen and (max-width: 1024px) {
    .tag {
        height: 50vw;
    }
    .text {
        position: absolute;
        right: 2rem;
        width: 33vw;
        max-width: 33vw;
    }
    .logo {
        position: absolute;
        width: 36vw;
        max-width: 36vw;
        left: 2rem;
    }
    .verde {
        position: absolute;
        top: 60%;
        right: 2rem;
    }
    .outline {
        width: 100vw;
        height: 35vh;
    }
    .hero {
        position: absolute;
        top: 0px;
        left: 0%;
    }
  }