style_landing.css

    /*CSS RESET -----------------------------------------*/

    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    body {
        line-height: 1;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    nav ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    a {
        margin: 0;
        padding: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

    /* change colours to suit your needs */

    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }

    /* change colours to suit your needs */

    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }

    del {
        text-decoration: line-through;
    }

    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted;
        cursor: help;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* change border colour to suit your needs */
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }

    input,
    select {
        vertical-align: middle;
    }

    input,
    textarea,
    button {
        -webkit-box-sizing: border-box;
        /* For legacy WebKit based browsers */
        -moz-box-sizing: border-box;
        /* For legacy (Firefox <29) Gecko based browsers */
        box-sizing: border-box;
    }


    /*CLASES-------------------------------------*/



    .logo {
        float: left;
        padding-top: 10px;
        filter: invert(100);
    }

    .menu {
        float: right;
    }

    .menu ul {
        list-style-type: none;
    }

    .menu li {
        display: inline;
        margin-left: 45px;
        line-height: 65px;
    }

    .menu a {

        text-decoration: none;
        color: white;
        font-family: 'Montserrat', Helvetica, sans-serif;
        font-size: 20px;
        -webkit-transition: color 2s;
        /* Safari prior 6.1 */

    }

    .menu a:hover {
        text-decoration: underline;


    }

    .imagen {
        height: 100vh;
        display: grid;
        /*Establecemos un grid para colocar la parte del formulario ¡Hay que cambiarlo para pantallas pequeñas!*/
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 30% 30% 30%;
        padding-left: 10vw;
        padding-right: 10vw;
    }

    .tarjetas {
        display: flex;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
        
        
    }

    .tarjetas div {
        width: 20vw;
        text-align: center;
        margin-top: 3em;
        margin-bottom: 3em;


    }

    .diagonal {
        height: auto;
        transform: skewY(4deg);
        transform-origin: top left;
        width: 100%;
        background-color: white;
 
    }

.diagonal>*{
     transform: skewY(-4deg);
        transform-origin: top left;
    z-index: 30;
    
}

    .somos_bg {
        background-color: white;
        height: 1000px;
        transform: skewY(4deg);
        transform-origin: top left;
        width: 100%;
    }




    /*ELEMENTOS---------------------------------------------*/

html{
    scroll-behavior: smooth;
}
   
header {
        padding-left: 10vw;
        padding-right: 10vw;
        height: 95px;
        position: fixed;
        width: 79vw;
        z-index: 200;
            }

a {
    color:inherit;
    text-decoration: none;
}

    body {
        background-color: white;
       
    }

    section {
        width: 100%;
    }

    h1 {
        font-size: 3em;
        font-family: 'Work Sans', Arial, Helvetica, sans-serif;
        font-weight: bolder;

    }

    h2 {
        font-size: 3em;
          padding-top: 13vh;
        padding-bottom: 5vh;
        text-align: center;
    }

    h3 {
        font-size: 1.5em;
        font-weight: bolder;
        margin: 1em;
    }

    h2,
    h3 {
        font-family: 'Work Sans', Arial, Helvetica, sans-serif;

    }



    p {
        font-family: 'Montserrat', Helvetica, sans-serif;
        font-size: 16px;

    }

    label {
        display: none;
    }

    textarea,
    input {

        font-family: sans-serif;
        color: grey;
    }

em{
    font-weight: bold;
    font-style: normal;
}

h2 + p{
    text-align: center;
}

footer{
    background-color: black;
    height: auto;
    color: white;
    text-align: center;
vertical-align: middle;
    line-height: 100px;
clear: both;
}

section>*{
        padding-left: 10vw;
        padding-right: 10vw;
}

 button {
        width: 100%;
        margin-top: 20px;
        height: 35px;
        background-color: rgba(124, 206, 244, 1);
        border: none;
        border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        color: white;
        font-family: 'Montserrat', Helvetica, sans-serif;
        font-size: 20px;
     cursor: pointer;
             transition: background-color 0.5s, color 0.5s;


    }

main{
      background-image: url("gratisography-black-white-escalators.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0% 20%;
    background-attachment: local
    width: 100%;
position: relative;
    
}



    /*ID'S--------------------------------------------------------*/


    #myVideo {
        position: fixed;
        left: -20%;
        top: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: -1000;

    }

#logo_mini{
    display: none;
}

    #claim {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        justify-self: center;
        width: 45vw;
            }

    #claim p,
    #claim h1 {
        text-align: right;
        color: white;
          text-shadow: 0px 0px 5px black;

    }

    #claim p {
        font-size: 30px;
        padding-top: 20px;
    }


    #form {
        grid-column-start: 3;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
    padding: 30px;
        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;
        border: 0px solid #000000;

        background-color: rgba(255, 255, 255, 0.4);

        backdrop-filter: blur(8px);
        /*SOLO FUNCIONA SI SE ACTIVA EXPLICITAMENTE EN CHROME!!!*/
        
        width: 22vw;
min-height: 370px;
height: 40vh;
        margin-left: auto;
        margin-right: auto;
     margin-top: 18vh;
}

    #form p {
        font-size: 25px;

    }

    #form input,
    #form textarea, #form img {

        margin-top: 5%;
        margin-right: auto;
        margin-left: auto;
    }

 #form img {
display: block;
}

    #nombre {
        width: 100%;
        height: 25px;
        background-color: white;
        background-image: url('http://cdn.onlinewebfonts.com/svg/img_51277.png');
        background-position: 2px 2px;
        background-repeat: no-repeat;
        padding-left: 30px;
        background-size: 20px 25px;
        border: 1px;


    }



    #telefono {
        width: 100%;
        height: 25px;

        background-color: white;
        background-image: url('https://image.flaticon.com/icons/png/512/9/9243.png');
        background-position: 2px 2px;
        background-repeat: no-repeat;
        padding-left: 30px;
        background-size: 20px 25px;
        border: 1px;

    }

    #email {
        width: 100%;
        height: 25px;

        background-color: white;
        background-image: url('https://png.pngtree.com/svg/20160617/mail_122991.png');
        background-position: 2px 2px;
        background-repeat: no-repeat;
        padding-left: 30px;
        background-size: 20px 25px;
        border: 1px;
    }

    #consulta {
        width: 100%;
        height: 90px;
        padding: 5px;

        border: none;
    }


    #enviar:hover {

        background-color: black;
        cursor: pointer;
    }

    #formlanding {
        text-align: center;
    }





#somos{
    display: flex;
    justify-content: center;    
     padding-left: 10vw;
        padding-right: 10vw;
}

#somos div{
    width: 30vw;
    margin: 2vw;
    text-align: right;
    margin-bottom: 6vw;
}



#titular{
   font-size: 2em;
    font-weight: bold;
    color: rgba(124, 206, 244, 1);
    text-align: left;
}

 h2 {
     padding-top: 20vh;
    }


#servicios{
  
   background-image: linear-gradient(rgba(124, 206, 244, 0.9), rgba(124, 206, 244, 0.9));
      transform: skewY(4deg);
        transform-origin: top left;
    background-color: transparent;    
    }

#logos{
display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#logos img{
    width: 250px;
}
        
#mapa {
    background-color: rgba(124, 206, 244, 1);    
    height: auto;
    width: 100%;
    text-align: center;
}

#map_responsive{
          overflow:hidden;
    padding-bottom:45vh;
    position:relative;
    height:0;
}

#mapa iframe{
    margin: 0;
     left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

#mapa p{
    margin: 1em;
}

#mapa button{
    background-color: black;
    width: 46vw;
    height: 35px;
margin-bottom: 2em;
    font-size: 20px;
    
}

#mapa button:hover{
   background-color: white;
    color: rgba(124, 206, 244, 1);
}




#servicios{
    color: white;
text-shadow: 0px 0px 10px rgba(150, 150, 150, 1);
}



/*-----MEDIA QUERIES-------*/

@media only screen and (max-width: 992px){
    
        .imagen{
        display: block;
        text-align: center;
        height: auto;
        
    }
    
      #claim p{
    font-size: 20px;
    }
    
    #form p{
        font-size: 20px;
    }
    
    #form{
        display: block;
        width: auto;
        height: auto;
        margin: 6vw;
        padding: 3vw;
        margin-bottom: 20%;
    }
    
    #claim{
        display: block;
    width: auto;
        height: auto;
      
        text-align: center;
        margin-top: 50%;
        margin-bottom: 50%;
        padding-left: 6vw;
            padding-right: 6vw;
        
    }
    
    header{
        position: fixed;
        top: 0;
    }
}

@media only screen and (max-width: 768px) {
 
    header{
        width: auto;
        display: none;
    }
    
    p{
        font-size: 12px;
    }
    
    main{
         background-image: none;
        background-color: white;

    }
    
    h1, h2{
        font-size: 2em;
    }
     
    h3{
    font-size: 1em;
    }
    
    h2{
                  padding-top: 14vh;
        padding-bottom: 5vh;
    }
    
    footer{
        line-height: normal;
        padding-top: 1vh;
        padding-bottom: 1vh;
        
    }
    
    /*ID'S */
    
    #claim p{
    font-size: 20px;
    }
    
    #form p{
        font-size: 20px;
    }
    
    #form{
        display: block;
        width: auto;
        height: auto;
        margin: 6vw;
        padding: 3vw;
        margin-bottom: 20%;
    }
    
    #claim{
        display: block;
    width: auto;
        height: auto;
      
        text-align: center;
        margin-top: 50%;
        margin-bottom: 50%;
        padding-left: 6vw;
            padding-right: 6vw;
        
    }
    
    #myVideo {
        left: -260%;
    }
    
    #titular{
        font-size: 20px;
    }
    
    #somos{
        display: block;
    }
    
    #somos div{
    width: auto;
text-align: justify;
}
    
    #logos img{
    width: 100px;
}
    
    #logo_mini{
display: block;
        text-align: center;
        filter: invert(100);
        
}
    
  #servicios{
  
  background-color: rgba(124, 206, 244, 1);  
    }
     
    #servicios p{
        text-align: justify;
    }
    
    /*CLASESEEES*/
    
    .imagen{
        display: block;
        text-align: center;
        height: auto;
        
    }
    
    .diagonal{
        height: auto;
    }
    
    .tarjetas {
        display: block;
text-align: center;
        margin: 0;
        margin-top: 5vh;
        margin-bottom: 5vh;
        padding: 0;
    }
    
     .tarjetas div {
        width: auto;
        text-align: center;
        margin-top: 2vh;
        margin-bottom: 2vh;


    }
    
    #mapa button{
width: 100%;
    padding: 2vh;
    }
    
    
}