@font-face {
    font-family: "DIN";
    src:  url("/img/DIN LightAlternate Regular.otf") format("opentype");
}
@font-face {
    font-family: 'DIN Next LT';
    src: url('/img/DIN Next LT Pro Medium.otf') format('opentype');
}
@font-face {
    font-family: "Calibri";
    src:  url("/img/Calibri Regular.ttf");
}
@media only screen and (max-width: 600px) {
    .inicio {
        font-size: 17px;
        font-family: "Calibri";
        background-image: url("/img/background.png");
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }
    .col-3 {
         flex: 0 0 100%; 
         max-width: 100%; 
    }
    .col-5 {
         flex: 0 0 100%; 
         max-width: 100%; 
    }
    .row{
        margin-right:0px;
        margin-left: 0px;
    }
    .logo{
        max-width: 120%;
    }
    .color-box{
        background-color: #eeff0091;
        margin-top: 40%;
    }
    .texto-left{
        margin-top: 40px;
        margin-left: 40px;
    }
    .text-big-bold{
        font-family: "DIN Next LT"; 
        font-size: 40px;
        font-weight: 1000;
    }
    .text-big{
        margin-top: 18px;
        font-family: "DIN"; 
        font-size: 40px;
        line-height: 35px;
        bottom: 0px;
    }
    .quieres{
        margin-top:160px;
        margin-right: 40px;
        margin-left: 40px;
        text-align:center;
    }
    .quieres-text{
        font-size: 28px;
    }
    .texto-center{
        margin-top: 40px;
        margin-bottom: 40px;
        margin-right: 40px;
        margin-left: 40px;
        max-width: 80%;
    }
    .texto-right{
        margin-bottom: 40px;
        margin-right: 40px;
        margin-left: 40px;
        max-width: 80%;
        padding-bottom:120px;
    }
    .input-custom{
        font-size: 20px;
        background-color: #f5f29ab3;
        border: 0px;
        width: 100%;
        height: 45px;
        margin-left: -20px;
        padding-left:30px;
        z-index: 10;
    }
    .textarea-custom{
        font-size: 20px;
        background-color: #f5f29ab3;
        border: 0px;
        width: 100%;
        height: 62%;
        z-index: 10;
    }
    ::placeholder {
        color: #0000004d;
    }
    .input-container {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        width: 100%;
        outline: none;
        margin-bottom: 27px;
    }
    .icon {
        font-size: 20px;
        display: inline-block;
        border-radius: 60px;
        background-color: black;
        color: #eeff00;
        padding: 0.4em 0.7em;
        padding-top: 12px;
        z-index: 20;
        opacity: 0.9;
    }
    .boton{
        background-color: black;
        color: #eeff00;
        width: 100%;
        height: 45px;
        border: 0px;
    }
    .header-left{
        margin-left:40px;
        margin-top: 35%;
    }
    .header-right{
        color: black;
        margin-left:40px;
        margin-top:40px;
        position: absolute;
    }
    .rrss{
        font-size: 30px;
        padding-left:20px;
    }
    a {
        color: black;
    }
    textarea
    {
        resize: none;
    }
} 
@media only screen and (min-width: 768px) {
    .quieres{
        display:none;
    }
    .inicio {
        font-size: 22px;
        font-family: "Calibri";
        background-image: url("/img/background.png");
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Do not repeat the image */
        background-size: cover; /* Resize the background image to cover the entire container */
    }
    .logo{
        max-width: 50%;
    }
    .color-box{
        background-color: #eeff0091;
        position: fixed;
        bottom: 0px;
        height: 265px;
    }
    .texto-left{
        margin-top: 40px;
        margin-left: 40px;
    }
    .text-big-bold{
        font-family: "DIN Next LT"; 
        font-size: 60px;
        font-weight: 1000;
    }
    .text-big{
        font-family: "DIN"; 
        font-size: 60px;
        line-height: 45px;
        position: fixed;
        bottom: 0px;
        margin-bottom: 40px;
    }
    .texto-center{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .texto-right{
        margin-top: 40px;
        margin-right: 40px;
        margin-bottom: 40px;
    }
    .input-custom{
        font-size: 20px;
        background-color: #f5f29ab3;
        border: 0px;
        width: 100%;
        height: 45px;
        margin-left: -20px;
        padding-left:30px;
        z-index: 10;
    }
    .textarea-custom{
        font-size: 20px;
        background-color: #f5f29ab3;
        border: 0px;
        width: 100%;
        height: 62%;
        z-index: 10;
    }
    ::placeholder {
        color: #0000004d;
    }
    .input-container {
        display: -ms-flexbox; /* IE10 */
        display: flex;
        width: 100%;
        outline: none;
        margin-bottom: 27px;
    }
    .icon {
        font-size: 20px;
        display: inline-block;
        border-radius: 60px;
        background-color: black;
        color: #eeff00;
        padding: 0.4em 0.7em;
        padding-top: 12px;
        z-index: 20;
        opacity: 0.9;
    }
    .boton{
        background-color: black;
        color: #eeff00;
        width: 100%;
        height: 45px;
        border: 0px;
    }
    .header-left{
        margin-left:40px;
        margin-top:40px;
    }
    .header-right{
        color: black;
        margin-right:40px;
        margin-top:40px;
        position: fixed;
        right:0px;
    }
    .rrss{
        font-size: 30px;
        padding-left:20px;
    }
    a {
        color: black;
    }
    textarea
    {
        resize: none;
    }
    .logo-effect{
        width: 300px;
        height: 230px;
        top: 37%;
        left: 53%;
        position: absolute;
        z-index: 7;
    }
        .logo-effect .logo-effect-2 {
        background: url(/img/logo-effect-2.png) repeat-y;
        height: 221px;
        width: 253px;
        position: absolute;
        left: -30px;
        animation-name: logo-effect-2;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    opacity: 0;
    }
    .logo-effect .logo-effect-3 {
        background: url(/img/logo-effect-2.png) no-repeat;
        height: 221px;
        width: 253px;
        position: absolute;
        left: -30px;
        animation-name: logo-effect-3;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 3s;
        opacity: 0;
    }
    .logo-effect .logo-effect-4 {
        background: url(/img/logo-effect-2.png) no-repeat;
        height: 221px;
        width: 253px;
        position: absolute;
        left: -30px;
        animation-name: logo-effect-4;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 6s;
        opacity: 0;
    }
    .logo-effect .logo-effect-5 {
        background: url(/img/logo-effect-2.png) no-repeat;
        height: 221px;
        width: 253px;
        position: absolute;
        left: -3px;
        animation-name: logo-effect-4;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 6s;
        opacity: 0;
    }
    .logo-effect .logo-effect-6 {
        background: url(/img/logo-effect-2.png) no-repeat;
        height: 221px;
        width: 253px;
        position: absolute;
        left: 20px;
        animation-name: logo-effect-4;
        animation-duration: 9s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-delay: 6s;
        opacity: 0;
    }
    @keyframes logo-effect-2 {
    0% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0;
    }
    20% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0.15;
    }
    40% {
        background: url(/img/logo-effect-2.png) 0px -20px no-repeat;
        opacity: 0.3;
    }
    100% {
        background: url(/img/logo-effect-2.png) 0px -100px no-repeat;
        opacity: 0;
    }
    }
    @keyframes logo-effect-3 {
    0% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0;
    }
    20% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0.15;
    }
    40% {
        background: url(/img/logo-effect-2.png) 0px -20px no-repeat;
        opacity: 0.3;
    }
    100% {
        background: url(/img/logo-effect-2.png) 0px -100px no-repeat;
        opacity: 0;
    }
    }
    @keyframes logo-effect-4 {
    0% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0;
    }
    20% {
        background: url(/img/logo-effect-2.png) 0px 0px no-repeat;
        opacity: 0.15;
    }
    40% {
        background: url(/img/logo-effect-2.png) 0px -20px no-repeat;
        opacity: 0.3;
    }
    100% {
        background: url(/img/logo-effect-2.png) 0px -100px no-repeat;
        opacity: 0;
    }
    }
}