@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Roboto:wght@300&display=swap');
/*font-family: 'Roboto', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap');
/*font-family: 'Barlow Condensed', sans-serif;*/


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}


body{
    font-family: 'News Cycle', sans-serif;
    background:white;
    width: 100%;
    height: auto;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items:center;
   
    
    
    
   
}




.padre {
   
    background-image: url(img/fondo3.png);
    
    width: 100%;
    height:auto;
    padding: 5%;
   
    
    background-size: cover;
    background-attachment: fixed;
    background-repeat:repeat;
    
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:flex-start;
    align-items: center;
    
    
  
}

/*YO*/
.yo{
    
    background-image: url(img/imgF3.png);
    background-position: center;
    opacity: 0.90;
    
    width: 100%;
    max-width: 950px;
    height:560px;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
    
   
   
}


        

.presentacion{
    background: rgba(255, 255, 255, 0.83);
    width: 400px;
    height: 100%;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}

.logo{
   /*background: red;*/
    width: 200px;
    height: 80px;
    margin-bottom: 10px;
    margin-left: 20px;
    
    align-self: flex-start;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:flex-start;
    align-items: center;
    
    /*https://animate.style/*//*son animaciones preestablecidas*/
    animation: backInDown; 
    animation-duration: 2s;
    
}




.tipos{
    background: rgb(255, 255, 255);
    width: 90%;
    height: auto;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
}

.bloque{
   /*background: red;*/
    width: 90%;
    height: auto;
    margin: 20px 5px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
    

}

.intro{
    text-align: justify;
    font-size: 16px;
    font-family: 'Barlow Condensed', sans-serif;
    color: black;
}

.bloqueIconos{
    /*background: gray;*/
    width: 260px;
    height: 80px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
    
     /*https://animate.style/*//*son animaciones preestablecidas*/
    animation: fadeInUp; 
    animation-duration: 4s;
    
   
}

.bk{
    width: 80px;
    height: 80px;
    background: gray;
}

.bk1{
     background:  url(img/seg.gif);
}

.bk2{
     background:  url(img/tech.gif);
}

.bk3{
     background:  url(img/soporte-1.gif);
}

/*YO*/





/*OFRECEMOS*/
.ofrecemos{
    
    background-image: url(img/imgF2.png);
    background-position: center;
    opacity: 0.9;
    
    width: 100%;
    max-width: 950px;
    height:auto;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-items: center;
  
}

.of{
    /*background: red;*/
    width: 800px;
    height: auto;
    padding: 20px;
    
    
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    align-items: flex-start;
    
    
}

h2{

   /*background: green;*/
   text-align: center;
   width: 100%;
   font-family: 'Barlow Condensed', sans-serif;
   color: white;
   font-size: 45px;
   margin-right: 20px;
}



.prod{
    background: rgba(0, 0, 0, 0.67);
    width: 350px;
    height: auto;
    margin: 5px;
    padding: 5px;
    
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items: center;
}


.prod:hover{
    background: #0f2f50;
}


.p2{
    color: white;
    width: 240px;
    text-align: justify;
    font-size: 15px;
    font-family: 'Barlow Condensed', sans-serif;
    margin: 0px 10px 0px 10px;
}

.imgcctv{
    width: 100px;
    height: 100px;
    background:  url(img/cctv-b.gif);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #676F7B;
}

.imgcctv:hover{
    background-color: #4e86d9;
}


.imgPort{
    width: 100px;
    height: 100px;
   background:  url(img/video-b.gif);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#676F7B;
}

.imgPort:hover{
    background-color: #4e86d9;
}


.imgAlarm{
    width: 100px;
    height: 100px;
    background:  url(img/alarmas-b.gif);;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #676F7B;
}

.imgAlarm:hover{
    background-color: #4e86d9;
}


.imgAcces{
    width: 100px;
    height: 100px;
    background: url(img/acceso-b.gif);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #676F7B;
}

.imgAcces:hover{
    background-color: #4e86d9;
}



.imgCable{
    width: 100px;
    height: 100px;
   background:  url(img/redes-b.gif);;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#676F7B;
}


.imgCable:hover{
    background-color: #4e86d9;
}

.imgDetec{
    width: 100px;
    height: 100px;
   background: url(img/incendi.gif);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#676F7B;
}

.imgDetec:hover{
    background-color: #4e86d9;
}

.imgMante{
    width: 100px;
    height: 100px;
   background:  url(img/mantenimiento-b.gif);;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#676F7B;
}

.imgMante:hover{
    background-color: #4e86d9;
}

.imgProy{
    width: 100px;
    height: 100px;
   background:  url(img/proyectos-b.gif);;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#676F7B;
}

.imgProy:hover{
    background-color: #4e86d9;
}




/*OFRECEMOS*/





/*MARCAS
.marcas{
    
    background-image: url(img/imgF1.png);
    background-position: center;
    
    opacity: 0.9;
    
    width: 100%;
    max-width: 950px;
    height:600px;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
  
}*/


/*MARCAS*/






/*CONTACO*/

.contacto{
    background: #66666E;
    width: 100%;
    max-width: 950px;
    height:auto;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    align-content: center;
}

.logo2{
   /*background: #124980;*/
    margin: 5px;
    width: 220px;
    height:80px;
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
    
 
}

.correo{
    background: #124980;
    color: white;
    margin: 5px;
    width: 50px;
    height:80px;
    
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}

.fijo{
    background: #124980;
    color: white;
    margin: 5px;
    width: 50px;
    height:80px;
    
    
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}

.cel{
    background: #124980;
    color: white;
    margin: 5px;
    width: 50px;
    height:80px;
    
    
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}

.wp{
    background: green;
    color: white;
    margin: 5px;
    width: 200px;
    height:80px;
    
    text-decoration: none;
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}





.face {
    background: #012243;
    margin: 5px;
    width: 50px;
    height:80px;
    
       
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}

.insta {
    background: #ff00b1;
    margin: 5px;
    width: 50px;
    height:80px;
    
       
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}


.linke{
    background: #52a3f4;
    margin: 5px;
    width: 50px;
    height:80px;
    
       
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
   
}






.cont:hover{
    background: #035a03;
}

.cont2:hover{
    background: #0f2f50;
}


.qr{
    background: #ffffff;
    margin: 5px;
    width: 80px;
    height:80px;
   
}


/*CONTAC*/


/*--------------------------*/



/*YO adaptable*/

@media (max-width:430px) {
    .yo{
    width: 350px;
    height: auto;
        
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
      
    }
     
@media (max-width:430px) {
    .presentacion{
    background: rgba(255, 255, 255, 0.6);
    width: 300px;
    height: 100%;
    border-radius: 10px;
    padding: 10px;
   
    }
    
@media (max-width:430px) {
    .logo{
   
    width: 200px;
    height: 80px;
    margin-bottom: 10px;
    margin-left: 0px;
    
    align-self:center;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
   
    }
    
@media (max-width:430px) {
    .bloqueIconos{
    
    width: 250px;
    height: 80px;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content:space-between;
    align-items:center;
   
    }
    
       
/*YO adaptable*/

    

/*OFRECEMOS adaptable*/

@media (max-width:430px) {
    .ofrecemos{
    
    background-image: url(img/imgF2.png);
    background-position: center;
    opacity: 0.9;
    
    width: 350px;
    max-width: 950px;
    height:auto;
    padding: 10px 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items: center;
  
}
    
@media (max-width:430px) {
    .of{
    
   
    width:350px;
    height: auto;
    padding: 20px;
    
    
    display: flex;
    flex-flow: column nowrap;
    justify-content:center;
    align-items:center;
    
  
}
    
@media (max-width:430px) {
    h2{
    
   
   text-align: center;
   width: 100%;
   font-family: 'Barlow Condensed', sans-serif;
   color: white;
   font-size: 45px;
   margin-right: 0px;
    
  
}
    
/*OFRECEMOS adaptable*/
    
    
    
/*MARCAS adaptable*/
    @media (max-width:430px) {
    .marcas{
    
    background: url(img/responsive%20logo.png);
 
    
    opacity: 1.0;
    
    width: 350px;
    max-width: 950px;
    height:100px;
    padding: 0px;
    margin-bottom: 20px;
    border-radius: 10px;
    
  
}
        
    @media (max-width:430px) {
    .mod{
  
    width: 95%;
    height: auto;
    
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    align-items:center;
}
        
    @media (max-width:430px) {
    .m{
    background: white;
    
    width: 80px;
    height: 80px;
    margin:  5px;
        
 }
    
/*MARCAS adaptable*/

        
/*CONTÁCTO adaptable*/
   @media (max-width:430px) {
    .contacto{
    background: #36364a;
    width: 350px;
    max-width: 950px;
    height:auto;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
    
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    align-content: center;
}
       
    @media (max-width:430px) {
    .logo2{
   
    margin: 5px;
    width: 0px;
    height:0px;
        
    
    display: flex;
    flex-flow: column wrap;
    justify-content:center;
    align-content: center;
    
}
       

       
    @media (max-width:430px) {
    .correo{
    background: #124980;
    color: white;
    margin: 5px;
    width: 90px;
    height:70px;
    
    
   
}

    @media (max-width:430px) {
    .fijo{
    background: #124980;
    color: white;
    margin: 5px;
    width: 90px;
    height:70px;
   
}
        
    @media (max-width:430px) {
    .cel{
    background: #124980;
    color: white;
    margin: 5px;
    width: 90px;
    height:70px;
   
}
        
    @media (max-width:430px) {
    .face, .insta, .linke{

    color: white;
    margin: 5px;
    width: 90px;
    height:70px;
   
}


/*CONTÁCTO adaptable*/