/* FONTS */
@font-face {
    font-family: SourceSansProBlack;
    src: url("../../font/source/SourceSansPro-Black.ttf");
}
@font-face {
    font-family: SourceSansProBold;
    src: url("../../font/source/SourceSansPro-Bold.ttf");
}
@font-face {
    font-family: SourceSansProRegular;
    src: url("../../font/source/SourceSansPro-Regular.ttf");
}
@font-face {
    font-family: SourceSansProLight;
    src: url("../../font/source/SourceSansPro-Light.ttf");
}
/* FONTS */

/* UTILIDADES */
/* do not group these rules */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: white;
}
#formulario-contacto input:-moz-placeholder, #formulario-contacto textarea:-moz-placeholder {
    /* FF 4-18 */
    color: white;
    opacity: 1;
}
#formulario-contacto input::-moz-placeholder, #formulario-contacto textarea::-moz-placeholder {
    /* FF 19+ */
    color: white;
    opacity: 1;
}
#formulario-contacto input:-ms-input-placeholder, #formulario-contacto textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: white;
}
#formulario-contacto input::-ms-input-placeholder, #formulario-contacto textarea::-ms-input-placeholder {
    /* Microsoft Edge */
    color: white;
}
#formulario-contacto input::placeholder, #formulario-contacto textarea::placeholder {
    /* modern browser */
    color: white;
}
/* UTILIDADES */

/* MOVIL */
#contacto-container{
    background: #071727;
}
#contacto-contenido{
    padding-top:10vh;
    color:white;
    overflow: hidden;
}
#contacto-contenido h1{
    font-size: 3.3em;
    font-family: SourceSansProBold;
}
#contacto-contenido h3{
    font-size: 1.2em;
    font-family: SourceSansProBold;
}
#contacto-contenido h4{
    font-family: SourceSansProLight;
    margin-bottom:80px;
}
#direcciones{
    margin-top:40px;
}
#direcciones p{
    color:#01e5dd;
    line-height: 1em;
}
.margenbottom-20vh{
    margin-bottom: 20vh;
}
#formulario-contacto input, #formulario-contacto textarea{
    background-color:transparent;
    border:1px solid grey;
    color:white;
    margin-bottom: 20px;
}
#contacto-contenido button{
    border-radius: 20px;
    background-color:#01e5dd;
    padding-left:40px;
    padding-right: 40px;
    font-size: 1.2em;
    margin-bottom: 30px;
    margin-top: 30px;
    display: block;
}
.direccion-mapa:hover p{
    cursor: pointer;
}

.cambiar-color-movil{
    background: #1f1f2f !important;
    cursor: pointer;
    -webkit-transition: background-color 2s ease-out;
    -moz-transition: background-color 2s ease-out;
    -o-transition: background-color 2s ease-out;
    transition: background-color 2s ease-out;
  }
  .cambio-color-fondo{
    background-color:#1f1f2f;
    position:absolute;
    left:-9999px;
    top: -13px;
    width: 40%;
}
.mover-color-fondo{
    left: -10px;
    transform: translatey(10px);
    transition: 2s;
}
#mensaje-enviado{
    display:none;
}
/* MOVIL */

/* DESKTOP */
@media only screen and (min-width: 1024px) {
    #contacto-contenido{
        padding-top:20vh;
    }
    #contacto-contenido h1{
        font-size: 5em;
    }
    #contacto-contenido h4{
        margin-bottom:100px;
    }

    #direcciones p{
        line-height: .8em;
    }
    #panel-derecho{
        margin-top: -25%;
    }
    #panel-derecho h4{
        margin-bottom:10px;
    }
    #grupostaff-secundario{
        display: none;
    }
    #imagen-texto{
        display: none;
    }
    #grupostaff-secundario h2{
        margin-bottom: 20px;
    }
    .translate-texto{
        -ms-transform: translateX(100%); /* IE 9 */
        -webkit-transform: translateX(100%); /* Safari */
        transform: translateX(100%);
        transition: 2s;
    }
    .translate-imagen{
        -ms-transform: translateY(25%); /* IE 9 */
        -webkit-transform: translateY(25%); /* Safari */
        transform: translateY(30%);
        transition: 2s;
    }
    /*  */
    .form{
        position: relative;
        left:-9999px;
        top: -25%;
    }
    .form-move{
        left: -10px;
        transform: translatey(10px);
        transition: 2s;
    }

    .imagen{
        padding: 0;
    }
    .img-move{
        transform: translatey(32%);
        transition: 2s;
    }

    .texto-moviento{
        background: green;
    }
    .text-move{
        transform: translateX(100%);
        transition: 2s;
    }


}