@font-face {
    font-family: 'exo';
    src: url('archivos/fuentes/exo-semibold-webfont.eot');
    src: url('archivos/fuentes/exo-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('archivos/fuentes/exo-semibold-webfont.woff2') format('woff2'),
         url('archivos/fuentes/exo-semibold-webfont.woff') format('woff'),
         url('archivos/fuentes/exo-semibold-webfont.ttf') format('truetype'),
         url('archivos/fuentes/exo-semibold-webfont.svg#exodemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}


img{width: 100%;}
body{margin: 0; padding: 0; width: 100%;}


.medida{
    display: inline-block;
    margin-top: 10%;
}

header{
    background-color: white;
display: inline-block;
margin: 0;
padding: 0;
    position: fixed;
overflow: hidden;
text-align: right;
width: 100%;
z-index: 1000000;
}


.logo{
    display: inline-block;
    margin-right:2%;
    width: 15%;
    vertical-align: middle;
}

#menuprin{
    background-color: #27a9e1;
    display: inline-block;
    margin-left: 15%;
    padding: .5em .5em;
    text-align: left;
    width: 50%;
}

#menuprin li{
  display: inline-block;
  font-family: 'exo';
    padding: 0 3%;
}

#menuprin li a{text-decoration: none;color: black; }
#menuprin li a:hover{text-decoration: none;color: white; border-bottom: .2em solid black; }

#banners{
    display: inline-block;
   /* width: 100%;*/
   margin-left: 10%;
   margin-top: 8%;
   width: 80%;
}

#banners img{border-bottom: .8em solid #0074c8;}



#atributos{
    border-top: 1px solid black;
    display: inline-block;
     margin: 3% 0 3% 20%;
     padding-top: 2%;
    width: 60%;
}

#atributos article{
    display: inline-block;
    font-family: 'exo';
     margin-right: 2%;
     vertical-align: top;
    width: 31%;
    }  

#atributos article:last-child{
  margin-right: 0%;
    } 


.tit{   
        font-size: 1.2em;
        color:#27a9e1;
        display: inline-block;
        text-align: center;
        width: 100%;
    }

  .imgatrib{
    border-radius:1em;
    display: inline-block;
    margin-left: 15%;
    width: 70%;
  }

  footer{
    background: url("archivos/bg_footer_smart.png") ;
    background-position: 10% 10%;
    background-size: 100%;
    border-top: .5em solid black;
    overflow: hidden;
   /* width: 100%;*/
   margin-left: 10%;
   width: 80%;
  }

  .margen{
    display: inline-block;
    margin-left: 65%;
    margin-top: 3%;
    margin-bottom: 15%;
  }

  /*  aside ul{
   display: none;
   list-style-type: none;
   margin:0;
   padding: 0;
  }

  aside ul li{
display: block;
margin-bottom: 4%;
  }

  aside ul li img{
    display: inline-block;
    margin-right: 2%;
vertical-align: middle;
width: 20%;
  }

  aside ul li p{
    display: inline-block;
      font-family: 'exo';
vertical-align: middle;
width: 68%;
  }*/

.tel{display: inline-block; vertical-align: top;}



  .direcc{
    background-color: #ed1c24;
    display: inline-block;
    margin-top: -.2em;
    text-align: right;
    width: 100%;
  }

   /* .direcc p{
    background-color:black;
    color: white;
    display: inline-block;
     font-family: 'exo';
    margin: 0;
    margin-left: 5%;
    padding: .5em 0 .5em 40% ;
    width: 90%;
  }*/

.direcc ul{
  background: black;
    display: inline-block;
    list-style-type: none;
    margin: 0;
    margin-left: 1%;
    padding: .5em 1%;
    width: 97%;
  }

  .direcc ul li{
    display: inline;
    margin-right: 2%;
    width: 10%;
  }
   .direcc ul li img{
    display: inline;
    vertical-align: middle;
    margin-right: 1%;
    width: 2%;
  }

  .direcc ul li p{
    color: white;
    display: inline;
    font-size: .8em;
    vertical-align: middle;
    width: 20%;
  }
    .direcc ul li a{
  text-decoration: none;
  }


#descpaquete{
    display: inline-block;
     margin: 2% 0 2% 20%;
    width: 60%;
}


.nompaquete{
  border-bottom: 1px solid black;
  padding-bottom: 1%;
  display: inline-block;
  font-family:'exo'; 
  text-align: center;
  width: 100%;
}

.nompaquete span{color: #0074c8;}

.desc1{
color: #0074c8;
display: inline-block;
font-family: 'exo';
margin-left: 5%;
text-align:  justify;
vertical-align: middle;
width: 40%;
}

.img1{
  display: inline-block;
  margin-left: 15%;
  vertical-align: middle;
  width: 30%
}

.desc2{
  display: block;
  font-family: 'exo';
  text-align: justify;
  width: 100%;
}

.desc3{
  display: block;
  font-family: 'exo';
  font-size: 1.1em;
  margin-top: 4%;
  text-align: center;
  width: 100%;
}

.imgfin{
  border-top: .5em solid black;
  display: inline-block;
  opacity: .6;
  margin-left: 10%;
  margin-bottom: 0%;
  width: 80%;
}

footer.paquete1{background: url("archivos/fotter_videocamara.png") ;}
footer.paquete2{background: url("archivos/fotter_control.png") ;}
footer.paquete3{background: url("archivos/fotter_paquete_seguridad.png") ;}
footer.paquete4{background: url("archivos/fotter_paquete_ninos_colima.png") ;}
footer.paquete5{background: url("archivos/bg_iluminacion_smarttek.png") ;}


.paquete4 .asideinterior {color:white;}


aside.asideinterior{margin-top: 3%;margin-bottom: 1%;}
aside.asideinterior ul li img{width: 10%;}
aside.asideinterior ul li{margin-bottom: 4%;}

/*CONTACTO*/

#contactofrm{
   display: inline-block;
     margin: 10% 0 2% 20%;
     text-align: center;
    width: 60%;
}

label{
color:#0074c8;
  display: inline-block;
  margin-right: 1%;
  text-align: right;
  width:5em;
}


#contactofrm .texto{
  background-color:transparent;
  border-width:0;
  border-bottom: .1em solid #0074c8; 
  color: black;
  font-size: 1.3em;
  width: 60%;
}

ul.contactodatos{

   display: inline-block;
   list-style-type: none;
   margin:10% 0 0 0 ;
   padding: 0;
   text-align: center;
    width:100%;
  }

ul.contactodatos li{

display: inline-block;
margin-bottom: 4%;
text-align: center;
vertical-align: top;
width: 30%;
  }

   ul.contactodatos li img{
    display: inline-block;
    margin-right: 2%;
vertical-align: top;
width: auto;
height: 3em;
  }

 ul.contactodatos li p{
    display: block;
      font-family: 'exo';
vertical-align: middle;
  }

  .btnenviar{
  background: none;
  border-bottom: .3em solid red;
  display: inline-block; 
  color: black;
  margin:5% 0 0 80%;
  text-decoration: none;
  padding: 0 .8em;
}


/*Paquetes*/

#paqueteslista{
  display: inline-block;
     margin: 10% 0 2% 20%;
     text-align: center;
    width: 60%;}

.pkt{
    border-bottom: .5em solid #0074c8; 
  display: block;
  margin-bottom: 2%;
  overflow: hidden;
  height: 10em;
}

.pkt:hover{
  height: 12em;
    transition: all .5s ease;
  -webkit-transition: all .5s ease;
}

/*SHOWROOM*/
.encon{
  color: #0074c8;
  display: inline-block;
  font-family: "exo";
  font-size: 4em;
  text-align: center;
  width: 100%;
}

.encon2{
  display: block;
  font-family: "exo";
  font-size: 2em;
}
.encon2 a{color: #0074c8;}
.encon2 a:hover{color: black;}

#mapa_area{
  display: inline-block;
height: auto;
  width: 100%;
}

#mapa {
  height: 20em; 
  margin-left: 0%;    
  width: 100%;
}


.listashowroom{
  display: inline-block;
  list-style-type: none;
  padding: 0;
  text-align: center;
  width: 100%;
}

.listashowroom li{
  
  display: inline-block;
  margin-bottom: .5em;
  margin-left: .8em;
  width: 20%;
}


.listashowroom li img{  
  border: .3em solid #0074c8;
  border-radius:1em;
  width:100%;
}
/**Blog*/

#entradas{
    border-top: 1px solid black;
    display: inline-block;
     margin: 10% 0 3% 20%;
     padding-top: 2%;
    width: 60%;
}
 /*InteliTips*/

.img1it{
display: inline-block;
width: 20%;
}

.textoit{
  display: inline-block;
  margin-left: 5%;
  vertical-align: top;
  width: 60%;
}
.desc1it{
  display: inline-block;
  font-family: 'exo';
  text-align: justify;
  vertical-align: top;
  width: 100%;
}

.desc2it{
  display: inline-block;
  font-family: 'exo';
  text-align: justify;
  vertical-align: top;
  width: 100%;
}



@media only screen and (min-width:176px) and (max-width: 418px) {
  /*MOVILES*/
#banners{ margin-top: 38%; width: 100%; margin-left: 0;}
header{text-align: left;}
.logo{display: inline-block;margin-left: 25%;width: 50%;}
#menuprin{ margin-left: 0; text-align: center; width: 100%;}

#atributos{display: block; margin: 0; width: 100%;}
#atributos article{margin:0; width: 100%;}
.imgatrib{margin-left: 30%; width: 40%;}

#paqueteslista{ margin: 35% 0 2% 0%; width: 100%;}
.pkt{ border-bottom: .1em solid #0074c8;  height: 4.5em; }
.pkt:hover{height: 4.5em;}

#contactofrm{margin: 35% 0 0 0; width: 100%;}

.listashowroom li{width: 50%;}

}

@media only screen and (min-width:450px) and (max-width: 800px) {


header{text-align: left;}
.logo{display: inline-block;margin-left: 25%;width: 50%;}
#menuprin{ margin-left: 0; text-align: center; width: 100%;}
.medida{border:1px solid red; margin-top:25%;}
#atributos{margin: 3% 0 3% 0%;width: 100%;}

aside{margin-left: 5%; width: 90%;}
aside ul{margin-left: 0; width: 100%;}
aside ul li img{width: 10%;}

#banners{ margin-top: 10%; width: 100%; margin-left: 0;}
#descpaquete{margin: 10% 0 0 5%; width: 90%;}

.encon{font-size: 2em;}
#contactofrm{margin: 10% 0 0 0; width: 100%;}
#paqueteslista{margin: 10% 0 0 0; width: 100%;}
  
  .direcc ul li{display:block;width: 100%;}
  .direcc ul li img{width:5%;}

  footer{margin-left: 0%;width: 100%;}

.listashowroom li{ width: 40%;}
}



@media only screen and (min-width:850px) and (max-width: 1120px) {

header{}
.logo{ width: 20%;}
#menuprin{ margin-left: 5%; width: 60%;}

}