﻿
@media screen and (max-width: 1227px){

}
/*
@media screen and (max-width: 1227px){
    :root{
        --window-width : calc(100vw - 17px);
    }
    .cont-centrado {
        width:var(--window-width);
        float: left;
    }
    .darwin_evol{
        width:calc(var(--window-width) - 535px);
    }
    .darwin_evol h2 {
        margin-left: calc(var(--window-width) / 9 );
    }
}

@media screen and (max-width: 1155px){
    .darwin_evol h2 {
        margin-left: calc(var(--window-width) / 12 );
    }
    .titulo{
        & span {
            font-size: calc(var(--window-width) / 17)
        }
        line-height: calc(var(--window-width) / 17 );
}

@media screen and (max-width: 935px){
    .darwin_evol h2 {
        margin-left: calc(var(--window-width) / 50 );
    }
    .titulo{
        & span {
            font-size: calc(var(--window-width) / 15 );
        }
        line-height: calc(var(--window-width) / 15 );
}
*/
@media screen and (max-width: 550px){
    :root{
    --window : 100vw;
    --heigh-window  :800px;
    --window-width  : 100%;
    --window-centro : 0px;

    --pos_ajolote_y : 1123px;
    --pos_ajolote_x : 422px;

    }
    body{
        zoom: 1;
        width: 100%;
        font-size: 20px;
    }
    #principal{
        width: 100%;
    }
    .cont-centrado{
        width: 100%;
    }
    header {
        width: 100%;
        height: 50px;
    }
    header menu {
        width: 100%;
    }
    header .logo img {
        width: 44%;
        margin-right: 20px;
    }
    .btnMenu {
        width: 30px;
        height: 30px;
        display: block;
    }
    .linea2 {
        margin-top: 7px;
    }
    .linea3 {
        margin-top: 7px;
    }
    #evolucion {
        margin-top: 30px;
        margin-bottom: 30px;
        height: auto;
    }
    .animacion-evol{
        height: auto;
        zoom:0.5;
    }
    .animacion-evol .cont-centrado{
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .imgdarwin{
       /* width: 50%;
        height: auto;*/
        margin-bottom: 90px;
        margin-right: 121px;
    }
    .darwin_evol{
        display: flex;
        flex-wrap: wrap;
    }
    .darwin_evol h2 {
        margin-left: 30px;
    }
    #evolucion .titulo{
        & span{
            font-size: 50px;
        }
        line-height: 50px;
    }
    #animflecha{
        margin-left: calc(50% - 270px);
    }
    #pd{
        background-position: center top;
        background-image: url(../images/fondo_totalm.jpg);
    }
    .titulo{
        font-size: 26px;;
    }
    .titulo{
        & span {
            font-size: 32px;
        }
        line-height: 35px;
    }
    .t1 {
        width: 100%;
        margin-left: 20px;
    }
    vermas {
        zoom: 0.45;
        width: 80px;
    }
    .t1 vermas .circulo{
        width: 300px;
    }
    .tituloprinposder vermas .circulo .txtcuadro, .tituloprinposizq vermas .circulo .txtcuadro {
        width: 109px;
    }
    #servicios {
        padding-top: 36%;
    }
    .t2 {
        width: 100%;
        margin-left: 10px;
    }
    .tituloprinposizq:hover vermas .circulo .txtcuadro{
        width:0px;
    }
    .tituloprinposizq:hover vermas .circulo{
        width: 80px;
    }
    .tituloprinposder:hover vermas .circulo .txtcuadro {
        width: 0px;
    }
    .tituloprinposder:hover vermas .circulo {
        width: 80px;
    }
    .tituloprinposder vermas .circulo, .tituloprinposizq vermas .circulo{
        width: 80px;
    }
    .tituloprinposder:hover vermas .circulo {
        left:0px;
    }
    .txt-der{
        padding: 0;
        padding-right: 20px;
        text-shadow: 1px 1px 1px black;
    }
    .t3 {
        width: 88%;
        margin-left: 10px;
    }
    .t4 {
        width: 100%;
        margin: auto;
    }
    .txt-cent{
        font-size: 20px;
        padding: 0px 10px;
    }
    #nosotros .logo {
        display: block;
        margin: auto;
        width: 50%;
    }
    .t1 vermas{
        margin-right: 240px;
    }
    .tituloprinposizq vermas .circulo .txtcuadro {
        width: 0px;
    }
    .t2 .titulo{
        margin-right: 65px;
    }
    .t3 vermas{
        margin-right:240px;
    }
    #roca1{
        display: none;
    }
    #roca2{
        display: none;
    }
    #submarino{
        display: none;
    }
    #ajoloteanim1{
        right: -55px;
    }
    #ajoloteanim2{
        top: 2054px;
        right: 0px;
    }
    #ajoloteanim3{
        top: 3138px;
        right: -52px;
    }
    #ajoloteanim4{
        display: none;
    }
    #footer .columnas1 .col1 {
        width: 100%;
    }
    #footer .columnas1 .col2{
        width: 100%;
    }
    #footer .columnas1, #footer .columnas2{
        flex-wrap: wrap;
        justify-content: center;
    }
    #footer .titulo{
        width: 100%;
        text-align: center;
    }
    #footer .titulo {
        & span{
            font-size: 50px;
        }
    }
    #footer .tel {
        width: 100%;
        font-size: 40px;
        color: #00214a;
        text-align: center;
    }
    #footer .social {
        width: 100%;
    }
    #footer .columnas1 .col2{
        background-size: contain;
        height: 384px;
    }
    #footer .sociosyclientes div{
        font-size: 18px;
        justify-content: center;
    }
    #footer .sociosyclientes img {
        width: 90px;
        height: auto;
    }
    #barraderechos a {
        color: white;
        font-size: 13px;
        display: block;
    }
}