@import  url( 'https://fonts.googleapis.com/css?family=Montserrat|Montserrat+Alternates|Poppins&display=swap' );
@import url('https://www.w3schools.com/w3css/5/w3.css');
 *{
     margin:0;
     padding: 0;
     text-decoration: none;
     box-sizing: border-box;
    font-family: "Verdana", sans-serif;
 }

#BotonCon{
    margin-left: none;
    align-items: left;
}
 .logoIMG{
    width: 95px;
    height: 80px;
    position:relative;
    float: left;
    margin-top: 5px;
}
 #Columnas{
height: 350px;
border-right: 1px groove #030f5e8a ;
  box-shadow: #030f5e;

 }
 #Columnas:hover{
    box-shadow: #030f5e;

 }


#cartasColumnas a{
    text-decoration: none;
    color: #030f5e;

}
#cartasColumnas a:hover{
    color: #1531cf;
    cursor: pointer;
}
 nav{
    width: 100%;
    height: auto;
 }
 nav p{
     color: #fff;
     font-weight: 400;
    font-size: 22px;
    float: left;
    margin-top: 10px;
 }
nav ul{
    float: left;
    margin-right: 20px;
    
   
}
nav ul li{
    display: inline-block;
    padding: 15px;
    line-height: normal;
    color: #fff;
    
   margin-bottom: 200px;
}
nav ul li a{
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    
    font-size: 20px;
    padding: 7px 13px;
}
nav ul li a:hover{
    
  color: #fff;
}

.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}
 .contenedor{
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
 }

.fondo1{
margin-left: 5%;
margin-top: 15%;
    float: left;
    border-radius: 1%;
    color: #fff;
    padding: 0;
}
.fondo2{
   
    float: left;
    color: #fff;
   
    width: 200px;
    height: 30px;
    text-align: center;
    margin-bottom: 90px;
    border-radius: 10px;
    
}
.fondo2 h4{
    background-color: #061a88;
     border-radius: 10px;
}
.fondo2 h4:hover{
    background-color: rgb(25, 74, 209);
border-radius: 10px;
border:none;


}
.fondo2 a{
    text-decoration: none;
    color: #fff;
}


.contenido{
    color: #fff;
    height: auto;
    width: 100%;
    margin-top: 50px;
    margin-left: 50px;
    display: inline-block;
    text-align: center;
    align-items: center;

}
.nosotros{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;

}
.nosotros h1{
text-align: center;
}
.nosotros img{
    
    float: right;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
 
    
}
.segmento1{
    background-color: #061a50;
    height: auto;
    width:330px;
    display: inline-block;
    border-radius: 10px;

    
}
.segmento2{
    background-color: #030f5e;
    height: auto;
    width: 330px;
  display: inline-block;
    border-radius: 10px;
   
    }

.segmento1 img{
    width: 70px;
    height: auto;
}
.segmento2 img{
    width: 70px;
    height: auto;
}
.segmento3 img{
    width: 70px;
    height: auto;
}
.segmento3{
    background-color: #030f5e;
    height: auto;
    width: 330px;
    display: inline-block;
    border-radius: 10px;
}  

.encuentranos a{
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;

    
}
.encuentranos iframe{
    height: 330px;
    width: 450px;
}
.encuentranos h1{
    text-align: center;
}
.encuentranos{
    font-size: 16px;
    text-align: center;
    color: #030f5e;
    width: 40%;
    margin-left: 20px;
    height: 580px;
    background-color: #ebeaea;
    display: inline;
    float: left;
    border-radius: 10px;
    margin-top: 10px;
    
}
.contacto{
    
    color: #030f5e;
    margin-top: 10px;
    text-align: justify;
    align-items: center;
    font-size: 16px;
    margin-left: none;
    width: 55%;
  background: #ebeaea;
  border-radius: 10px;
  float: right;
  margin-right: 20px;
    display: inline;
     height: 580px;
   
    
}
.contacto label{
    margin-left: 10px;
}

.contacto input{
    
    border: 1px solid #030f5e;
    height: 30px;
   width: 90%;
    color: #030f5e;
    outline: 0;
    margin-left: 10px;
    border-radius: 10px;
}
.contacto select{
    margin-left: 10px;
    color: #030f5e;
    border-radius: 10px;
}
.contacto textarea{
    margin-left: 10px;
    width: 90%;
    color: #030f5e;
    border-radius: 10px;
}
.block
{
    grid-column: 1 / 3;
}
.contacto button{
    width: 100px;
    border: none;
    background: #030f5e;
    border-radius: 10px;
    color: #fff;
    height: 30px;
    align-items: center;
    margin-left: 350px;
    margin-top: 5px;
    margin-bottom: 14px;
}
.contacto h1{
    text-align: center;
}
.contacto label{
 font-size: 18px;
 text-align: left;

}

.pie{
    width: 100%;
    height: 350px;
    background-color: #030f5e;
    color: #fff;
    font-size: 16px;
 

}

.services{
    color: #030f5e;
    text-align: justify;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
}


.card{
    z-index: -1;
    

}
.services .logoSer{
 position: absolute;
    width: 90%;
    z-index: -2;
    height: auto;
   margin-bottom: 10px;
   opacity: 0.5;

}


.services h1{
    text-align: center;
   
}
.services a{
    
    color: #030f5e;
}

.services h2{
    text-align: center;
    
}

.imagenserv{
    width: 90%;
    margin-left: 50px;
}

.imagenserv img{
    margin-left: 500px;
    height: auto;
}

 .capa{
    position: absolute;
    z-index: -1;
    top: 0;left: 0;
    width: 100%;
    height: 68vh;
    background: linear-gradient(to left, transparent,  #030f5e), url(https://orozcoasesores.com/wp-content/uploads/2018/02/asesoramiento-contable.jpg);
    background-size: 100vw 80vh;
    background-repeat: no-repeat;
    
}
.capa2 img{
    position: absolute;
    z-index: -1;
    top: 0;left: 0;
    width: 100%;
    height: 85vh;
    background-size: 100vw 80vh;
    background-repeat: no-repeat;   
 
}
.capa2{
background: linear-gradient(to top left, transparent, #030f5e);
    width: 100%;
    height: 85vh;
    z-index: -1;
    margin-top: 0%;
    margin-bottom: 0%;
}

.Hcapa{
    font-size: 35px;
    z-index: -1;
    display: block;
    float: left;
    color: #fff;
    margin-left: 50px;
    align-items: center;
    margin-top: 180px;
}
.pp{
    margin-left: 5px;
}
.SerNomina img{
     float: left;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
   box-shadow: 0px 0px 10px #464545;
}

.SerNomina img:hover{
    animation: fadein 3s infinite;
}

@keyframes bounce{
    0%{transform: translateY(0);}
    50%{transform: translateY(-20px);}
    100%{transform: translateY(-10px);}
}
@keyframes pulse{
    0%,100%{transform: scale(0.8);}
    50%{transform: scale(1);}
}
@keyframes fadein{
    
    0%{opacity: 0;}
    50%{opacity: 5;}
    100%{opacity: 0;}
}
.SerNomina{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
    margin-top: 20px;
    
}
.SerConta img:hover{
    animation: bounce 2s infinite;
}

.SerConta img{
     float: right;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #464545;
}

.SerConta{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
   
}


.SerAsesoria img{
     float: right;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #464545;
     animation: reverse 2s infinite;
}
.SerAsesoria img:hover ,.SerAsesoria2 img:hover{
    animation: bounce 2s infinite;
}

.SerAsesoria{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
   
}
.SerAsesoria2 img{
     float: right;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #464545;

}
.SerAsesoria2{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
   
}

.SerTramites img{
     float: left;
    width: 600px;
    height: auto; 
    margin-left: 0px;
    margin-right: 40px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #464545;
    display: block;
}
.SerTramites{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
   
}
.SerTramites ul li{
margin-left: 50px;
}
.SerTramites img:hover{
    animation: bounce 2s infinite;
}



.SerGes img{
     float: left;
    width: 600px;
    height: auto; 
    margin-left: 10px;
    margin-right: 40px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #464545;

}
.SerGes{
    color: #030f5e;
    font-size: 16px;
    width: 90%;
    margin-left: 50px;
    display: inline-block;
    text-align: justify;
   
}
.SerGes img:hover{
    animation: bounce 2s infinite;
}



/*
.fondoI{
    position: absolute;
    background-color: linear-gradient(to left, transparent,  #030f5e);
    width: 100%;
    height: 70%;
    background-repeat: no-repeat;
     z-index: -1;
      top: 0;left: 0;
}*/
/*Estilos para el encabezado*/
.header{
    width: 100%;
    height: 80px;
    position: fixed;
    top: 0;left: 0;
    background-color: #1c1c1c;
    opacity: 0.7;
}
.container{
    width: 90%;
    max-width: 1200px;
    
  
}

.container .menu a:hover{
    border-bottom: 2px solid #c7c7c7;
    padding-bottom: 5px;
}
/*Fin de Estilos para el encabezado*/

/*pie de pagina*/
.pieWeb{
    width: 100%;
    height: 300px;
    z-index: -1;
    margin-top: 100px;
    /*background-color:rgb(0, 0, 0, 0.9);*/
    background-color: #030f5e;
 border-right: 1px groove #ffffff ;
    display: block;
    color: #fff;
}
.pieWeb h4{
   text-align: center;
   
}

.pieWeb h5{
    margin-left: 10px;
}
.LogoPie{
    height: 150px;
    width: 150px;
    float: left;
    margin-left: 0;
}
.LogoPie:hover{
animation: rotate 3s infinite;
    
}
#ColumnasPie ul li i{
    margin-right: 15px;
   
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform:rotate(360deg);}
}
#ColumnasPie{
   border-right: 1px groove #fff ;

}

.linkPie a{
text-align: center;
    color: #fff;
    text-decoration: none;

}
.telefonoPie{
    text-decoration: none;
    color: #fff;
}

.linkPie{

display: block;
    line-height: normal;
    color: #fff;
}
/*Menù lateral*/
#btn-menu{
    display: none;
}
.container-menu{
    position: absolute;
    background: #9b313166 ;
    width: 100%;
    height: auto;
    transition: all 500ms ease;
    opacity: 0;
}


#btn-menu:checked ~ .container-menu .cont-menu{
    transform: translateX(0%);
}
nav{
    transform: translateY(15%);
}
@media (max-width: 1252px) {
.pieWeb{
    width: 100%;
    height: 300px;
    z-index: -1;
    margin-top: 100px;
    /*background-color:rgb(0, 0, 0, 0.9);*/
    background-color: #030f5e;
 border-right: 1px groove #ffffff ;
    display: block;
    color: #fff;
}
.pieWeb h4{
   text-align: center;
   
}

.pieWeb h5{
    margin-left: 10px;
}
.LogoPie{
    height: 150px;
    width: 150px;
    float: left;
    margin-left: 0;
}
.LogoPie:hover{
animation: rotate 3s infinite;
    
}
#ColumnasPie ul li i{
    margin-right: 15px;
   
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform:rotate(360deg);}
}
#ColumnasPie{
   border-right: 1px groove #fff ;

}

.linkPie a{
text-align: center;
    color: #fff;
    text-decoration: none;

}
.telefonoPie{
    text-decoration: none;
    color: #fff;
}

.linkPie{

display: block;
    line-height: normal;
    color: #fff;
}



     #Columnas{
height: 350px;
border-right: 1px groove #030f5e ;
width: 500px;
margin-bottom: 100px;
 }
    .checkbtn{
        display: block;
        margin-right: 10px;
        margin-bottom: 10px;
    } 
    nav ul{ background: #030f5e;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 80px;
        left: -110%;
        text-align: center;
        transition: all 0.5s;
        
    }
    nav p{
        font-size: 16px;
        margin-top: 30px;
    }
    .nosotros img{
        border-radius: 10px;
    }
    
     
     nav ul li{
    display: block;
    
    margin: 50px 0;
    line-height: 30px;
     }
    nav ul li a{
        font-size: 20px;
    }
     nav ul li a:hover{
         background: none;
         color: #fff;
     }
     
    
     #check:checked ~ ul{
        left:0;
        
     }
     .nosotros p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
     .SerConta p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerNomina p{
         font-size: small;
         display: block;
         color: #030f5e;
     }

      .SerAsesoria p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerAsesoria2 p{
         font-size: small;
         display: block;
         color: #030f5e;
     }


       .SerTramites p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerGes p{
         font-size: small;
         display: block;
         color:#030f5e;
     }
  }


  
@media (max-width: 1252px) {
      #Columnas{
height: 350px;
border-right: 1px groove #030f5e8a ;
width: 500px;
margin-bottom: 100px;
 }
    .checkbtn{
        display: block;
        margin-right: 10px;
        margin-bottom: 10px;
    } 
    nav ul{ background: #061a88;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 80px;
        left: -110%;
        text-align: center;
        transition: all 0.5s;
        float: right;
        
    }
    nav p{
        font-size: 14px;
        margin-top: 30px;
        float: left;
    }
    .nosotros img{
        border-radius: 10px;
    }
    
     
     nav ul li{
    display: block;
    
    margin: 50px 0;
    line-height: 30px;
     }
    nav ul li a{
        font-size: 20px;
    }
     nav ul li a:hover{
         background: none;
         color: #fff;
     }
     
    
     #check:checked ~ ul{
        left:0;
        
     }
     .nosotros p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
       .SerConta p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerNomina p{
         font-size: small;
         display: block;
         color: #030f5e;
     }

     .SerAsesoria p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerAsesoria2 p{
         font-size: small;
         display: block;
         color: #030f5e;
     }


      .SerTramites p{
         font-size: small;
         display: block;
         color: #030f5e;
     }
      .SerGes p{
         font-size: small;
         display: block;
         color: #030f5e;
     }

     .services{
        font-size: small;
        display: block;
        color: #061a59;
     }
     .encuentranos iframe{
        width: 350px;
        height: 280px;
    }
    .capa{
        background-size: 100vw 60vh;
        display: block;
    }
        .capa2 img{
        background-size: 100vw 60vh;
        display: block;
    }
    .nosotros{

        display: block;
    }
     .SerConta{

        display: block;
    }
  }



  @media (max-width: 640px) {
.pieWeb{
    width: 100%;
    height: auto;
    z-index: -1;
    /*background-color:rgb(0, 0, 0, 0.9);*/
    background-color: #030f5e;
 border-right: 1px groove #ffffff ;
    display: block;
    color: #fff;
}
.logoIMG{
     width: 95px;
    height: 80px;
    position:relative;
    float: left;
    margin-top: 5px;
}
.pieWeb h4{
   text-align: center;
   font-size: 14px;
   
}
.pieWeb p{
    font-size: 12px;
}

.pieWeb h5{
    margin-left: 10px;
}
.LogoPie{
    height: 100px;
    width: 100px;
    float: left;
    margin-left: 0;
}
.LogoPie:hover{
animation: rotate 3s infinite;
    
}
#ColumnasPie ul li i{
    margin-right: 5px;
    display: block;
   
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform:rotate(360deg);}
}
#ColumnasPie{
   border-right: 1px groove #fff ;

}

.linkPie a{
text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 12px;

}

.telefonoPie{
    text-decoration: none;
    color: #fff;
}

.linkPie{

display: block;
    line-height: normal;
    color: #fff;
}

      #Columnas{
height: 350px;
border-right: 1px groove #030f5e8a ;
width: 500px;
margin-bottom: 180px;
 }

    body{
        align-items: center;
        display: block;
    }
    .checkbtn{
    display: block;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 1000px;
    
    } 
    
    .contenido  {
    margin-left: 45px;
    width: 150px;
    float: left;
    font-size: 14px;
    align-items: initial;
    display: block;
    }
    .nosotros img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }
    .SerConta img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }
    .SerNomina img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }

    .SerAsesoria img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }
    .SerAsesoria2 img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }


     .SerTramites img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }
    .SerGes img{
    width: 300px;
    float: left;
    display: block;
    margin-left: 25px;
    border-radius: 10px;
    }

    .nosotros{
    margin-left: 15px;
    text-align: justify;
    
    }
     .SerConta{
    margin-left: 15px;
    text-align: justify;
    
    }
    .SerNomina{
    margin-left: 15px;
    text-align: justify;
    
    }

    .SerAsesoria{
    margin-left: 15px;
    text-align: justify;
    
    }

    .SerAsesoria2{
    margin-left: 15px;
    text-align: justify;
    
    }

    .SerTramites{
    margin-left: 15px;
    text-align: justify;
    
    }

    .SerGes{
    margin-left: 15px;
    text-align: justify;
    
    }

    .services{
    margin-left: 15px;
    text-align: justify;
    }
    .services .logoSer{
 position: absolute;
 display: none;
    width: 100%;
    height: 100%;
    z-index: -2;
    height: auto;
   margin-bottom: 10px;
   opacity: 0.5;

}
    .segmento1{
    width: 300px;
    display: block;
    display: inline-block;
    }
    .segmento2{
    width: 300px;
    display: block;
    display: inline-block;
    }
    .segmento3{
    width: 300px;
    display: block;
    display: inline-block;
    }
    
    
    .menu ul{ background: #061a88;
    position: fixed;
    width: 100%;
    height: 65vh;
    top: 80px;
    left: -110%;
    text-align: center;
    transition: all 0.5s;
    float: right;
    
    }
    nav p{
    font-size: 14px;
    margin-top: 10px;
    float: left;
    }
    
    
    nav ul li{
    display: block;
    
    margin: 50px 0;
    line-height: 10px;
    }
    nav ul li a{
    font-size: 20px;
    }
    nav ul li a:hover{
     background: none;
     color: #fff;
    }
    
    #check:checked ~ ul{
    left:0;
    
    }
    .nosotros h1{
        display: block;
    }
    .nosotros p{
     font-size: small;
     display: block;
     color: #061a59;
    }

     .SerConta p{
     font-size: small;
     display: block;
     color: #061a59;
    }

    .SerNomina p{
     font-size: small;
     display: block;
     color: #061a59;
    }

    .SerAsesoria p{
     font-size: small;
     display: block;
     color: #061a59;
    }
     .SerAsesoria2 p{
     font-size: small;
     display: block;
     color: #061a59;
    }


    .SerTramites p{
     font-size: small;
     display: block;
     color: #061a59;
    }
     .SerGes p{
     font-size: small;
     display: block;
     color: #061a59;
    }

    .services{
    font-size: small;
    display: block;
    color: #061a59;
    align-items: center;
    }
    .services img{
    margin-left: 50px;
    width: auto;
    height: auto;
    margin-top: 20px;
    }
    .fondo1{
     margin-top: 25%;
     
    }
    .encuentranos{
        width: 90%;
        display: block;
    }
    .contacto{
        display: block;
        width: 90%;
        float: right;
    }
     .contacto button{
      margin-left: 25px;
    }
    .encuentranos iframe{
        width: 350px;
        height: 280px;
    }
    .capa{
        background-size: 100vw 60vh;
        display: block;
    }
     .capa2 img{
        width: 100%;
        height: 70vh;
        display: block;
    }

    .Hcapa{
    font-size: 20px;
    z-index: -1;
    display: block;
    float: left;
    color: #fff;
    margin-left: 30px;
    align-items: center;
    margin-top: 130px;
}
.capa2{
    background: linear-gradient(to top left, transparent, #030f5e);
    width: 100%;
    height: 70vh;
    z-index: -1;
    margin-top: 0%;
    margin-bottom: 0%;
}
    }