header{
        position: fixed;
        z-index: 100;
        transition: all 300ms cubic-bezier(0.000, 0.730, 0.000, 1.000);
        padding: 8px 10px;
    }

    header .logo{
      width: 60%;
      max-width: 300px;
      background-color: white;
      border-radius: 30px;
      padding: 15px;
    }

    header nav{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 0;
        width: 100%;
    }

    header nav .menu{
        position: absolute;
        bottom: 0;
        padding: 5px;
        transform: translateY(300px);
        background-color: rgba(0,0,0,.2);
        border-top: 3px solid #1f143b;
     }
    header nav .menu li{
        width: 100%;

    }
    header nav .menu li a {
        display: block;
        padding: 8px 15px;
        background-color: white;
        margin-bottom: 2px;
        color: #1f143b;
        font-weight: bold;
        border-radius: 4px;
    }
   
    header nav .ma {
        transform: translateY(0);
    }

    header nav .menuIcon {
        position: absolute;
        bottom: 55px;
        right: 15px;
        width: 35px;
        height: 35px;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
        font-size: 25px; 
        z-index: 2;
    }
    header .lenguaje {
       width: 30px;
       height: 30px;
       border-radius: 15px;
       line-height: 30px;
       cursor: pointer;
    }

    header .lenguaje:hover {
        background-color: #3a7497;
    }

    .subeM{
        transform: translateY(-100%);
    }
    .otroF{
        background: white;
        box-shadow: 0 1px 2px rgba(0,0,0,.5);
    }

    .s01 {
        height: 100vh;
        width: 100%;
        max-height: 600px; 
    }
    .s01 .ancho {
        z-index: 2;
    }
    .s01 .ancho .texto{
        z-index: 2;
        max-width: 80%;
        padding-left: 40px;
    }

    .s01 .ancho .texto h1,
    .s01 .ancho .texto p,
    .s01 .ancho .texto small{
        padding-left: 10px;
        padding-bottom: 10px;
    }

    .s01 .ancho .texto h1{
        font-weight: normal;
        font-size: 35px;
        line-height: 35px;
    }
    .s01 .ancho .texto p{
        font-weight: bold;
    }
     .s01 .ancho .texto h1:before,    
     .s01 .ancho .texto p:before,    
     .s01 .ancho .texto small:before{
        content:'';
        position: absolute;
        top: 0;
        right: 100%;
        width: 35px;
        height: 35px;
        background-image: url(../img/punto.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px auto;

     }  
     .s02{
        margin-top: -15vh;
        max-width: 100vw;
        overflow: hidden;
        padding: 50px 0;
     }
     .s02 .fondo{
        height: 600px;
        width: auto;
     }
      

     .s02 .globo {
        width: 150px;
        flex: 1 1 120px;
        margin:5px;
        margin-bottom: 15px;
     } 

     .s02 .pa{
        padding: 5px;
     }

      .s02 .globo a{
            width: 100%;
            display: block; 
            background: #2883a6;
            position: relative; 
            box-shadow: inset 0 -1px 2px rgba(0,0,0,.5);
        }

        .s02 .globo .contGlobo {
            padding: 15px 10px; 
            z-index: 2; 
            position: relative;
            border:3px solid rgba(255,255,255,.5);
        }

      .s02 .globo .contGlobo .foto{
        display: block;
        width: 100%;
        border-radius: 50%;
        margin-bottom: 15px;
      } 

      .s02 .globo .contGlobo p{
        text-transform: uppercase;
        width: 70%;
        margin-bottom: 15px;
        color: white;
        font-weight: bold;
        text-align: center;
      }

      .s02 .globo a small{
        position: absolute;
        bottom: 10px;
        left: 30%;
        display: block;
        width: 40%;
        text-align: center;
        font-size: 18px;
        padding:2px 10px;
        border-radius: 4px;
        color: white;
      }

      .s03{
        padding: 50px 0;
        margin-top: -50px;
      }

      .s03 .texto{
        order: 2;
        padding: 15px;
      }
      .s03 .camion{
        max-width: 300px;
      }

      .s04{
        margin-top: 0;
      }

      .s04 .ns{
        text-transform: uppercase;
        font-weight: normal;
      }

      .s04 .servicio {
        flex: 1 1 100px;
        margin:5px; 
      }

      .s04 .servicio .icono{
        width: 80px;
        margin-bottom: 10px;
      }
      .s04 .servicio .texto{
        text-align: center;
      }
       
    .footer{
        padding-bottom: 25px;
        background-size:100% 100%;
    }

    .footer .logo {
        padding: 15px; 
        margin-bottom: 15px;
    } 

    .footer .subir{
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #d1d1d1;
        cursor: pointer;
        z-index: 100;
        font-weight: bold;
    }

    .footer .subir:hover{
        background-color: rgba(0,0,0,.5);
    }

    .footer .logo{
        flex: 1 1 300px;
    }

    .footer .logo img{
      max-width:  300px;
      margin:auto;
    }
    .footer .telefonos{
        padding-left: 15px;
    }
    .footer .redes{
        padding-right: 15px;
        font-size: 22px;
    }

    .footer .redes .icon{
        border: 2px solid rgba(0,0,0,.5);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin: 0 5px; 
        cursor: pointer;
    }
     .footer .redes .icon:hover{
        background-color: rgba(0,0,0,.1);
        color: #444;
     }

     

     /*============================================
       ///////////////////////////////////////////
     ============================================*/

     .about, .pross, .serv, .casos, .contac
     {
        padding-top: 100px;
     }

     .titu h1{
        padding-left: 15px;
        font-weight: 300;
        font-size: 30px;
        margin-bottom: 25px;
     }

     .about .texto{
        padding: 0 15px;
        flex: 1 1 300px;
        max-width: 600px;
     }
     .about .foto{
        flex: 1 1 400px;
     }
     .about .tabs{
        padding: 50px 5px;
        max-width: 900px;
     }
    
     .about .tabs .btn{
        flex: 0 0 100px;
     }
     .about .tabs .foto{
        flex: 1 1 250px;
        max-width: 200px;
        border-radius: 50%;
        border-bottom: 3px solid #009ec2;
        border-right: 3px solid #009ec2;
        border-left: 3px solid transparent;
        border-top: 3px solid transparent;
     }
     .about .tabs button{
        background: transparent; 
        padding: 5px 10px;
        margin-bottom: 10px;
        font-weight: 700;
        border-radius: 25px;
        position: relative;
     }
     .about .tabs button:after{
        content: '';
        position: absolute;
        top: 100%;
        width: 0;
        height: 2px;
        background-color: #009ec2;
        left: 0;
        transition: all 500ms cubic-bezier(0.000, 0.730, 0.000, 1.000);
     }
     .about .tabs button:hover:after{
        width: 100%;
     }

     .about .tabs .activo{
        background: #009ec2;
        color: white;
     }
     .about .tabs .activo:after{
        opacity: 0;
     }

     .about .tabs .foto .cont{
        border-radius: 50%;

     }

     .about .coment{
        margin-bottom: 50px;
     }
     .about .coment .think{
        max-width: 500px;
        flex: 100px;
     }



      /*============================================
       ///////////////////////////////////////////
     ============================================*/

     .pross{
        padding: 10px;
        padding-top: 80px;
        background-size: auto 60%;
        background-position: center top;
     }

    .pross .timg .texto{
        flex: 1 1 300px;
        max-width: 500px;
    }

     .pross .timg .foto{
        flex: 10 1 300px;
        max-width: 500px;
     }
      

     .pross .pasos{
        margin-top: 50px;
     }


    .pross .paso{
     margin-bottom: 25px; 
     padding: 0 10px; 
     color: #444; 

    }
     .pross .paso:last-child .texto{
        border-bottom: 0;
     }
     .pross .paso .icon{
        flex: 0 0 80px;
        padding:0 10px 0 0; 
     }

     .pross .paso .icon img{
        height: 50px;
        width: auto;
     }
     .pross .paso .texto{
        flex: 1 1 100px;
        border-bottom: 3px solid #d1d1d1;
        padding-bottom: 15px;
     }



      /*============================================
       ///////////////////////////////////////////
     ============================================*/

     .paletas {
        background-size: auto 100%;
        margin-bottom: 50px;
     }

     .paletas .paleta {
        flex: 1 1 150px;
        max-width: 250px;
        border:2px solid rgba(0,0,0,.5);
        margin: 10px;

     }
     .paletas .paleta .desc{
        position: absolute;
        bottom: 0;
        padding: 10px 20px; 
        left: 5%;
        width: 90%;
        display: block;
        color: white;
        z-index: 1;
        font-size: 14px;
     }

     .paleta .foto{
        border-radius: 50%;
        padding: 10px; 
        border:3px solid rgba(0,0,0,0);
        border-right:3px solid rgba(0,0,0,.3);
        border-bottom:3px solid rgba(0,0,0,.3);
        margin-bottom: 15px;
     }
     .paleta .circulo{
        border-radius: 50%;
     }

    .paletas .paleta .cont{
         padding: 20px;
         z-index: 3;
         position: relative;
    }

    .tresC .cuadro{
        flex:1 1 200px;
        margin: 15px;
        max-width: 350px;
    }

    .tresC{
        background-size: auto 100%;    }
   

        
    .tresC .cuadro .foto{
        width: 60%;
        border-radius: 50%;
        margin-bottom: 20px;
    }
    .dosC {
        margin: 50px 0;
    }
     .dosC .cuadroC:first-child {
        border-bottom: 2px solid #d1d1d1;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .dosC .cuadroC .foto{
        flex: 4 1 300px;
        max-width: 500px; 
        margin-bottom: 15px;
    }

    .dosC .cuadroC .texto{
        flex: 1 1 300px; 
        padding: 15px; 
        max-width: 900px;
    }


 /*============================================
       ///////////////////////////////////////////
     ============================================*/
     .casos .cab{
        justify-content: space-between;
     }

    .casoslist {
       margin: 50px 0;
       width: 100%;
    }


     .casoslist .ancho .btns{
        flex: 1 1 200px;
        max-width: 300px;
     }
     .casoslist .ancho button{
        width: 100%;
        background: transparent;
        padding: 10px 8px;
        margin-bottom: 5px;
        border-bottom:1px solid #d1d1d1;
        text-align: left;
     }
     .casoslist .ancho button:hover{
        background-color: rgba(0,0,0,.2);
     }
     .casoslist .ancho button:last-child{
        border:0; 
     }

     .casoslist .ancho .content{
        flex: 1 1 300px;
        padding: 15px 20px;
     }

      .casoslist .ancho .content .foto{
        width: 90%;
        max-width: 350px;
        border-radius: 50%;
        margin-bottom: 25px;
      }



 /*============================================
       ///////////////////////////////////////////
     ============================================*/

      .mapa{
        max-height: 500px;
        overflow: hidden;
      }

      .mapa .logo{
        width: 50%;
        max-width: 400px;
        padding: 15px 25px;
        border-radius: 20px;
        background-color: rgba(255,255,255,.8);
      }

      .letricas{
        display: none;
      }
      .letricas p {
        font-size: 12px;
        margin-bottom: 10px;
      }
      .letricas .red a{
        display: inline-block;
        width: 25px;
        height: 25px;
        cursor: pointer; 
        border: 2px solid #d1d1d1;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
      }

     
      .screen.ng-enter {
        transition: all 1s cubic-bezier(0.000, 0.730, 0.000, 1.000);
      }

     .screen.ng-enter{
        opacity: 0;
      }
      .screen.ng-enter-active {
        opacity: 1;
      }