@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
 
html, body {  
  background-color: #ffffff;}
body, h1, p {
  font-family: arial, sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 20px; 
}

*{box-sizing: border-box; 

  transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out; 
    }
a {text-decoration: none;}
 


.listTrabajado img { 
width:21.5%; 
box-sizing: border-box;
margin: 1.5% ;filter: grayscale(100%) brightness(200%);
}


.main {
  height: 100%; 
}

.content { text-align:left; overflow-x: hidden;}
.fixWow {overflow: hidden;}
.max {
  height: 100%; 
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative; 
}
 
.header {  background-color:  #ffffff  ; color: #000000  ;  
  padding: 1px;   -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);  
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%); z-index: 200;
   position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  text-align: left;
  z-index: 1000;
  }
 
.header .max {
  height: 70px;
}

ol {
   padding-left: 45px;
  list-style-position: outside;
}


hr {
  border: 0px;
  margin:45px 0px 25px 0px;
  border-top: 1px solid #dddddd;
}
.owl-prev, .owl-next {
    width: 35px;
    height: 35px;
    line-height: 28px !important;
    font-size: 19px !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);  
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
}
.proy {background-color: #555555; color: #ffffff; 
    font-size: 1.2em;
    line-height: 1em;
    font-weight: 300; 
    padding: 20px 0px ;
    display: none;}
.logo {   }

.graf {   
  position: absolute; 
    height: 75px;
    top: 22px;
    left: 19px;
  opacity: 0.0; 
  display: none;
}
.log { position: relative;  height: 55px; top: 10px; left: 10px;}



.menu { position: fixed; top: 62px;  right: 0px;   width:100%; max-height: 0px; 
  -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);  overflow: hidden;
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%); background-color: #ffffff; border-radius: 0px 0px 15px 15px;}
.menu span {display: block; padding: 25px 0px; z-index: 10000; color: #111111; cursor:pointer ; text-align: center;}
.menu span:hover {background-color: #D68879; color: #ffffff;}

.ver { max-height:550px;     z-index: 1000; }
.ham { width: 35px; position: absolute; top: 15px; right:15px; cursor:pointer; }

 
.banner {
    background-color: #f0f0f0; font-size: 1em;
    width: 100%; min-height: 540px; 
    text-align: center;  
  position: relative;
}
.banner img { }
.bnicdmx {margin-top: 70px; width: 300px;}
.miembro { color: #C2272B ; font-size: .8em; margin-top: 10px ; font-weight:600;}
.dgt { color: #c2272b;  font-size: .8em; margin-top: 10px ; font-weight:600;}
.ddm { color: #c2272b; font-size: 1.76em; display:block; font-weight:600; margin-bottom:20px; }
.maquina { width: 300px; font-size:1.9em;  margin-top: 180px; 
  text-align: left; margin: 0 auto; display: block; padding-top: 80px}

.promesa {
  width: 80%;
  max-width: 220px;
  margin-top: 50px;
}

.ntSpacer {
 width: 90%;
 max-width:380px;
 margin: 0 auto;
 margin-top:200px;
 margin-bottom: 70px;
}

.nt {   color: #f4cac2 ; font-size: .8em; margin-top: 10px ; font-weight:600; text-align: center; text-align: center;}
.nt2 {  font-size: .8em; margin-top: 10px ; font-weight:600; text-align: center; text-align: left;}
.ddi { color: #f0e400 ;font-size: 1.76em; display:block; font-weight:600;  text-align: center; margin-bottom: 19px;}
.ddi2 { color: #f4cac2 ;font-size: 1.36em; display:block; font-weight:600;  text-align: left; margin-bottom: 19px;}
.refleja { font-size:1.2em; padding-right: 25px;  }


.nsSpacer {
 width: 85%;
 max-width:500px;
 margin: 0 auto;
 margin-top:80px;
}

.logoClientes {text-align: center;}
.logoClientes img { margin: 25px; height: 100px;}

.figura {
  font-size: .5em;
  color: #aaaaaa;
}

.btrabajo,
.bCatalogo {
  background-color:   ; 
  position: relative;
}
 
.btrabajo img:nth-child(1) {
  top: 10%;
  left: 10%;
  position: absolute;
  height: 70%;
}
.btrabajo img:nth-child(2) {
  top: 50%;
  left: 35.6%;
  margin-top: -35%;
  margin-right: -30%;
  position: absolute;
  height: 70%;
}
.btrabajo img:nth-child(3) {
  bottom: 10%;
  right: 10%;
  position: absolute;
  height: 70%;
}
.btrabajo img:nth-child(4) {
  width: 90%;
}



.bCatalogo img:nth-child(1) {
  top: 10%;
  left: 5%;
  position: absolute;
  width: 60%;
}
.bCatalogo img:nth-child(2) {
  top: 59%;
  left: 18%;
  margin-top: -25%;
  margin-right: -30%;
  position: absolute;
  width: 60%;
}
.bCatalogo img:nth-child(3) {
  bottom: 10%;
  right: 5%;
  position: absolute;
  width: 60%;
}
.bCatalogo img:nth-child(4) {
  width: 90%;
}

.botonAzul { background-color: #1d70fa;
display: inline-block;
border-radius: 4px;
color: #ffffff;
font-size: 14px; 
padding: 7px 15px;
margin: 9px 25px; width: 180px;
text-align: center; 
 }
.botonAzul2 { background-color: #2697cf;
display: inline-block;
border-radius: 4px;
color: #ffffff;
font-size: 14px; 
padding: 7px 15px;
margin: 9px 25px; width: 180px;
text-align: center; 
 }

 .botonAzul img, 
 .botonAzul2 img { 
  vertical-align: middle;
  height: 30px;
 }


.botonRojo { background-color: #c2272b; border: 2px solid #c2272b;
display: inline-block;
border-radius: 4px;
color: #ffffff;
font-size: 14px; 
padding: 7px 15px;
margin: 9px 25px; width: 180px;
text-align: center; 
 }
.botonBrojo { background-color: #ffffff; border: 2px solid #c2272b;
display: inline-block;
border-radius: 4px;
color: #c2272b;
font-size: 14px; 
padding: 7px 15px;
margin: 9px 25px; width: 180px;
text-align: center; 
 }



.botonAmarillo { background-color: #f0e400; 
display: inline-block;
border-radius: 4px;
color: #403d11;
font-size: 14px; 
font-weight: 600;
padding: 7px 15px;
margin: 0 25px; width: 180px;
text-align: center; 
 }



.botonAzul:hover,
.botonRojo:hover ,
.botonBrojo:hover,
.botonAmarillo:hover {
  opacity: 0.7;
}



.tipoTable {
  display: table;
  width: 100%;
}

.tipoTable div {
  display: table-cell !important; 
  width: 50%;
  position: relative;
}

.bLogo{
  margin-left:-140px;
  position: absolute;
  top: 20px;
  left: 50%;
}
.bBoton {
  margin-left:-90px;
  position: absolute;
  bottom: 30px;
  left: 50%;
}

.deCon { 
  text-align: left;
  max-width: 350px; 
  padding: 45px 0px 300px 35px;
}


.de65 {
  width: 65% !important;
}
.de35 {
  width: 35% !important;
}


.goCenter { 
  margin: 0 auto;
}

.dark {
/*  background-color: #25282A;*/
  background-color: #2a272e;
  color: #ffffff;
}

.corerider { background-color: #efefef; color: #111111;  }
.redescomida { background-color: #25282A; color: #ffffff;  }
.talleresren { background-color: #b6b8b5; color: #111111;  }
.sibbed { background-color: #b870a4; color: #ffffff;  }
.sibbedplegable { background-color: #efefef; color: #111111;  }
.africam { background-color: #6282b0; color: #ffffff;  }



.redescomida .serviciosIcons img,
.sibbed .serviciosIcons img,
.africam .serviciosIcons img {filter: brightness(10000%)   ;   }


h1 {font-size: 2.33em; font-weight: 700; padding: 5px 10%;} 
h2 {font-size: 2.22em; font-weight: 300; color: #D68879; padding: 20px 0px;} 
h3 {font-size: 1.2em;  line-height: 1.4em; font-weight: 300; color: #D68879; padding: 0px; padding-top: 28px;} 
h4 {font-size: 1em; font-weight: 300; line-height: 2em; padding: 0px; }
h5 {font-size: 1.1em;  line-height: 1.4em; font-weight: 300; color: #D68879; padding: 0px; margin: 0px;  } 
h6 {font-size: 1em;  line-height: 1.5em; font-weight: 300;   padding: 0px; margin: 0px;  } 

.bannerPadding {padding: 20px 35px; }
.proyecto  {font-size: .8em; padding-top: 10px;}
.proyectoNombre {font-size: 1.6em;}

.tcenter {text-align: center;}
.tleft {text-align: left;}

 
.diseno h5 {color: #D68879;} 
.estrategico h5 {color: #A69C59;} 
.multimedia h5 {color: #4C0BB7;} 

.nowrap {white-space: nowrap; margin: 20px 0px; display: inline-block;}

 

.clear {clear: both;}

 label {display: block;}
form {margin: 0px 5%;}
input { display: block; border: 1px solid silver; border-radius: 10px; width:100%; font-size: 20px;
 padding: 11px;
margin-top: 11px;}
.button {
  background-color: #D68879;
  color: #ffffff;
  border: 0px;
  padding:  22px;
}


.button:hover {
  opacity: 0.7;
  cursor: pointer;
}
  



.tgris {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  color: #141415;
  margin-bottom: 30px;
  font-size: .9em;
}
.tgris b {
  color: #111111 !important;
}

.tblanco {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  color: #ffffff;
  margin-bottom: 30px;
  font-weight: 200;
  font-size: .9em;
}
.tblanco b {
  color: #f4cac2 !important;
}




.de25 b {display: block;}

.de20  { float: left; width: 20%; 
  padding: 0 25px; 
  margin-bottom: 15px; 
min-height: 240px;
background-color:   ;
color: #141415;
  font-size: .9em;
}
.de20 img {
  width: 121px;
  height: 118px;
  opacity: 0.4;
}



.de25  { float: left; width: 25%; 
  padding: 0 25px; 
  margin-bottom: 25px; 
min-height: 220px;
background-color:  ;
color: #141415;
  font-size: .9em;
}
.de25 img {
  width: 74px;
  height: 65px;
  opacity: 0.4;
}


.de100 {width: 100%;}

.social {margin-bottom: 38px;}
.social a {margin-right: 5%}
.social a:nth-child(5) {margin-right: 0px}
.social img { width: 15%; max-width: 50px}

.area { text-align:left;     font-size: 1em;
    font-weight: 300;
    line-height: 2em;
    padding: 0px;}
.area img { height: 100px; }

.magic { padding: 45px 0px 85px 0px;}
.card {  background-color:  #ffffff  ; color: #000000  ;  
  padding: 1px;   -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);  
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
text-align: center;
margin-bottom: 40px;
padding: 30px;
cursor: pointer;
position: relative;border-radius: 7px;
  }
.card .icon {width: 100px; height: 100px;
 position: absolute; left: calc(50% - 50px);  top: 30px;
   transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out; 
}
.names {margin-top: 100px;  transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out; }
.listado {font-size: 20px !important; text-align:left !important; 
  max-height: 2px; overflow: hidden;  
clear: both; position: relative; line-height: 2em;
z-index: 10;
padding-top: 10px;
  transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out; 
     }
.pico { position: absolute; top: 15px; right: 15px; width: 15px !important; height: 15px !important;}

.on { text-align:left !important; }
.on .icon {float: left !important; width: 60px; height: 60px; margin-right: 10px; 
  transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out; 
left: 30px; top: -5;
  }
.on .names {margin-top: 0px; padding-left: 70px; 
  transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -webkit-transition: all 0.25s ease-out; }
.on .listado {font-size: 20px !important; line-height: 2em; text-align:left !important; max-height:550px; 
clear: both;
padding-top: 35px;

  transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -webkit-transition: all 0.15s ease-out; 
    }
.on .pico { transform: rotate(180deg);  top: 15px; right: 15px; }

.locator {position: relative; top:-70px;}


 
#topper {
    display: none;
    position: fixed;
    bottom: 13px;
    left: 19px;
    z-index: 99;
    border: none; 
    outline: none;
    background-color: #D68879;
    color: white;
    cursor: pointer;
    padding: 18px;
    border-radius: 50px;
    font-size: 0px;
    z-index: 100000000000;
    -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);
    -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%);
}

#topper:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#topper img {
  width: 25px;
}

.movil {display: block;}
.escritorio {display: none}


.clientes   { text-align: center ;}



.clientes img { width: 44%; max-width: 150px; margin: 2%; 
  filter: grayscale(100%) brightness(200%);}

.colaborado {position: relative; top: -10px;}
 

/*.owl-pagination {display: none !important;}*/


.owl-controls  {position: absolute; bottom: 20px; right: 20px;  display:none; }
 
.serviciosCom { background-color: #f9f9f8; }
.aliadosCom { background-color: #e5aa9e; }
.aliadosCom  h3 {color: #ffffff}

/*.aliadosCom .aliadosExternos { width: 100%; padding:0%; display: inline-block; text-align: right; position: relative;}
.aliadosCom .aliadosExternos img { width: 100%;  border-radius: 15px;}
.aliadosCom .aliadosExternos:hover {  opacity: 0.8;}*/

.aliadosExternos { width: 100%; padding:0%; display: inline-block; margin-bottom:45px; } 
.aliadosExternos div {  padding:4px  0px 4px 20px;  font-size: .8em; line-height: 1.3em; } 
.aliadosExternos  table td:nth-child(1){   width:40% ; vertical-align: top;} 
.aliadosExternos img { width: 90%;  border-radius: 15px;}


.visita {border-radius: 15px; font-size: .9em; color: #ffffff; background-color: #D68879;  
  padding: 10px 25px; margin-top: 15px; }


.goDemo { max-width: 0%;  bottom: 0px; right:0px; }
.on .goDemo {max-width: 100%; z-index: 1; border-radius: 15px; margin-top: 20px;}



.pregunta {display: block; border-top: 1px solid silver; padding: 9px 5px; color: #111111; 
background-image: url(../img/ver.png); background-repeat: no-repeat; background-position: right center;
background-size: 25px; font-size: .9em; padding-right: 30px;
}
.pregunta:hover,

.verWhats:hover   {
  opacity: 0.6;
  cursor: pointer;
}
.hide {display: none !important;}
.respuesta {border: 0px solid silver; border-radius: 15px; width: 100%; max-width: 890px;  }
.respuesta div {padding: 0px; display: block; }
.boton { border: 1px solid silver; border-radius: 7px; padding: 7px; width: 80px; display: inline-block;
text-align: center; font-size: .7em; margin-right: 15px; color: #D68879; font-weight: 600;}
.boton:hover {
  color: #ffffff;
  background-color: #D68879;
  border: 1px solid  #D68879;
  cursor: pointer;
}
.gracias {font-size: .8em;}
.contactanos {display: none}
.ver {display: block;}

.arbol { border-top: 1px solid silver; padding:8px; font-size: 16px; color: #aaaaaa; }
.arbol a {color: #D68879; }
.arbol a:hover {color: #333333; }

.verWhats   {text-align: left !important; border: 1px solid #dddddd; 
  border-radius: 7px; display: inline-block;
  margin-top: 25px;
  font-size: .8em; line-height: 1em;
padding: 15px; position: relative;
top: -15px;
-moz-box-shadow: 0 0px 8px rgb(34 34 34 / 12%);  
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 12%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 12%); z-index: 200;
    }
.verWhats span {font-size: .7em;}
.verWhats img {float: left; margin-right: 15px; width: 30px;}

.footer { font-size: .7em; text-align: left;
 padding: 25px; color: #141415;}

.footer a {    color: #737373;   white-space: nowrap;  }
.footer a:hover {   text-decoration: underline; }

.footer .deLogo  img { width:143px; margin-bottom: 40px; }
.footer .deRedes  {  text-align: right;}
.footer .deRedes img { width:35px; margin: 5px 5px 15px 5px;}
 
.footer span {
    display: block;
    padding: 8px;
}



.enfoque {position: absolute; top: 10%; right: 15%; 
  bottom: 10%; left: 15%; z-index: 0;  background-color: white; 
  filter: blur(26px);
  -webkit-filter: blur(26px); opacity: 0.3578;}


.serviciosIcons div   {display: block;   margin-bottom: 3px;  font-size: .8em;}
.serviciosIcons div table td:nth-child(1)   {  width: 80px; }
.serviciosIcons div img { width: 69px !important;  vertical-align: middle;}



.tblPrecios3 {border: 1px solid silver; border-radius: 10px; padding: 10px; width: 100%; font-size: .89em;}
.tblPrecios3 td {border: 1px solid silver; border-collapse:collapse;  }
.tblPrecios3 img { vertical-align: middle; width: 35px !important; height: 35px !important; }



.redes   { position: absolute; top: -90px; right: 20px;}
.redes img { width: 35px; }


.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
}
.styled-table thead tr {
    background-color: #D68879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table th,
.styled-table td:nth-child(2),
.styled-table td:nth-child(3) {
    text-align: center;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type  {
    border-top: 2px solid #D68879;
}

.styled-table img { vertical-align: middle; width: 30px !important; height: 30px !important; }


.verWhats2 {cursor: pointer; text-decoration: underline; color: #D68879; }



.paquetes {
  display: table;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  color: #111111;
    font-size: .89em;
    margin-bottom: 50px;
}
.paquetes > div:nth-child(1) {
display: table-cell;
background-color: #ffffff;
width: 50%;
border-radius: 20px 0px 0px 20px;
padding: 45px;
}
.paquetes > div:nth-child(2) {
display: table-cell;
background-color: #eeeeee;
width: 50%;
border-radius: 0px 20px 20px 0px;
padding: 45px;
}


 .unadetres { 
    background-color:#ffffff;
    border-radius: 15px;
    color: #111111;
    padding: 25px;
    width: 90%; 
    display: inline-block;
    float: left;
    font-size: 18px;
    margin: 10px 5% ;
    box-sizing: border-box;
    } 
  .infoDesc{font-size: 1.44em;  font-weight:100; }



.paqueteTit { font-weight:600;  font-size: .8em}
.paqueteTit span{ 
font-size: 1.5em;
display: block;
margin-bottom: 25px;
 }
 .paqueteTit img { width:165px; margin:0 auto; display: block; margin-bottom: 25px;}
.paqueteDesc {
  text-align: left;
  min-height: 430px;
}
.mini {
  font-size: .5em; 
  font-weight: 600;
}

.paqueteDesc img {
  width: 95%;
  margin-top: 25%;
}
.promesas {
  margin-top: 20px;
  width: 120px;
}



@media screen and (min-width: 570px) {
  
   .nowrap {  margin:  0px !important;  }
    
  .visita { font-size: .75em;  }
  .enfoque { top: 20%; right: 20%; bottom: 20%; left: 20%;  filter: blur(64px);
  -webkit-filter: blur(64px); opacity: 0.48;}

.footer span {
    display: inline-block;
    padding: 3px;
}
.aliadosExternos  table td:nth-child(1){   width:30% ; } 




}



@media screen and (min-width: 768px) { 
 .movil {display: none;}
.escritorio {display: block}



.respuesta {border: 1px solid silver; border-radius: 15px; width: 100%; max-width: 890px;}

.respuesta div {padding: 20px 35px 45px 35px; display: block; }


.unadetres {  
    width: 46%;
    min-height: 800px; 
    margin: 1.5%; 
    } 



}

@media screen and (min-width: 1024px) { 


.unadetres {  
    width: 30%;
    min-height: 800px; 
    margin: 1.5%; 
    } 


  .visita { font-size: .6em;  }
.goDemo { height: 0%; position: absolute; bottom: 0px; right:0px; }
.on .goDemo {height: 50%; max-width: auto; z-index: 1; border-radius: 0px;}
 


.serviciosIcons img {width: 50% !important; }

  body, h1, p {  font-size: 19px; }
.ham { top: -50px} 


 .redes {  top: 15px; }




.header { height:115px}
h5 {  height: 40px; font-size:.7em;   }

.log {   left: 10px; margin-top: 20px;}


.menu { font-size:.69em; 
  position: fixed; top:15px; 
 right: 20px; 
 top: 80px;
 min-height: 20px; 
 z-index:10000;  
  background-color:transparent !important;   
  text-align: right; 
  padding: 0px;
  font-weight: 600;
  padding-right: 5px;
  -moz-box-shadow: 0 0px 8px rgb(34 34 34 / 10%);  
   -webkit-box-shadow: 0 0px 8px rgb(34 34 34 / 0%); 
    box-shadow: 0 0px 8px rgb(34 34 34 / 0%); 
    }
.menu span,
.menu a {display: inline-block; padding:  0px; font-size: .8em; padding: 0px 7px; color:#111111;  }
.menu span:hover,
.menu a:hover
 {  color: #D68879; background-color: transparent;}
.ver {top: 15px !important;}
 
.log { height: 75px; }
/*.pico {display: none;}*/



.bannerMax { 
  padding: 0px  10%;
  max-width: 1910px;
  margin: 0 auto;
}


.de40  { float: left; width: 45%;}
.de50  { float: left; width: 50%;}
.de60  { float: right; width: 55%;}



.de40a  { float: left; width: 40%;}
.de60a  { float: left; width: 60%;}

.de40a img,
.de60a img { width:90% }

.derecha .de50  { float: right; width: 50%;}

.derecha .de40a  { float: right; width: 40%;}
.derecha .de60a  { float: right; width: 60%;}
.social a {margin-right: 20px}

.card { float: left; width:  30%; margin-right: 3%;
  }
  .card:hover   {
  opacity: 0.8;
  cursor: pointer;
}


 
.area img { height: 130px; }

.on {width: 63%; height: 460px; border: 3px solid #ffffff;}


.diseno .on {border: 3px solid #D68879;} 
.estrategico .on {border: 3px solid #A69C59;} 
.multimedia .on {border: 3px solid #4C0BB7;} 

.magic {background-color:    ; position: relative;  height: 300px; }


.magic .card {position: absolute;}
.magic .card:nth-child(1) {left:0%;  width: 32%;}
.magic .card:nth-child(2) {left:34%; width: 32%;}
.magic .card:nth-child(3) {left:68%; top: 15%; width: 32%;}


.deLook .card:nth-child(1) {left:0%;  width: 64% !important;}
.deLook .card:nth-child(2) {left:68%; width: 32%;}
.deLook .card:nth-child(3) {left:68%; top: 54%; width: 32%;}

.dePublicaciones .card:nth-child(1) {left:0%;  width: 32% !important;}
.dePublicaciones .card:nth-child(2) {left:36%; width: 64%;}
.dePublicaciones .card:nth-child(3) {left:0%; top: 54%; width: 32%;}

.deIlustracion .card:nth-child(1) {left:0%;  width: 32% !important;}
.deIlustracion .card:nth-child(2) {left:0%; top: 55%; width: 32%;}
.deIlustracion .card:nth-child(3) {left:36%; width: 64%;  top: 9%;}

.deLook, .dePublicaciones, .deIlustracion { height: 540px; }



 
.dePersonalidad .card:nth-child(1) {left:0%;  width: 64% !important;}
.dePersonalidad .card:nth-child(2) {left:68%; width: 32%;}
.dePersonalidad .card:nth-child(3) {left:68%; top: 54%; width: 32%;}

.deConcepto .card:nth-child(1) {left:0%;  width: 32% !important;}
.deConcepto .card:nth-child(2) {left:36%; width: 64%;}
.deConcepto .card:nth-child(3) {left:0%; top: 54%; width: 32%;}

.deUsabilidad .card:nth-child(1) {left:0%;  width: 32% !important;}
.deUsabilidad .card:nth-child(2) {left:0%; top: 55%; width: 32%;}
.deUsabilidad .card:nth-child(3) {left:36%; width: 64%;  top: 9%;}

.dePersonalidad, .deConcepto, .deUsabilidad { height: 540px; }




 
.deInterfaz .card:nth-child(1) {left:0%;  width: 64% !important;}
.deInterfaz .card:nth-child(2) {left:68%; width: 32%;}
.deInterfaz .card:nth-child(3) {left:68%; top: 54%; width: 32%;}

.deDesarrollo .card:nth-child(1) {left:0%;  width: 32% !important;}
.deDesarrollo .card:nth-child(2) {left:36%; width: 64%;}
.deDesarrollo .card:nth-child(3) {left:0%; top: 54%; width: 32%;}

.deProduccion .card:nth-child(1) {left:0%;  width: 32% !important;}
.deProduccion .card:nth-child(2) {left:0%; top: 55%; width: 32%;}
.deProduccion .card:nth-child(3) {left:36%; width: 64%;  top: 9%;}

.deInterfaz, .deDesarrollo, .deProduccion { height: 540px; }



 

.aliadosExternos { width: 48%;  display:inline-block; } 


.listado { 
  max-height: 2px; 
  transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out; 
     }





.floatLeft { float:left !important;  margin: 0px; }
.floatRight { float:right !important; margin: 0px;}
}








@media screen and (max-width: 1300px) {
.de20  {  width: 25%;  
min-height: 240px;
}
}



@media screen and (max-width: 1010px) {

.de25  { width: 50%; }

.de20  {  width: 33.33%; 
min-height: 240px;
}

.de65 {
  width: 50% !important;
}
.de35 {
  width: 50% !important;
}

.ntSpacer { 
    margin-top: 40px;
    margin-bottom: 40px;
}

.deCon {  
    padding: 45px 0px 40px 35px;
}

.footer,
.footer .deLogo ,
.footer .deRedes  {  text-align: center;}


}



@media screen and (max-width: 700px) {

.de25  { width: 100%; 
min-height: initial;
margin-bottom: 40px;
}


.bLogo{
  width: 170px;
  margin-left:-85px;
  position: absolute;
  top: 20px;
  left: 50%;
}

.bnicdmx {
    margin-top: 49px;
    width: 300px;
}



.paquetes {
  display: block; 
}
.paquetes > div:nth-child(1) {
display: block ;
width: 100%;
border-radius: 20px 20px 0px 0px;
padding: 45px;
}
.paquetes > div:nth-child(2) {
display: block ;
width: 100%;
border-radius: 0px 0px 20px 20px;
padding: 45px;
}


.paqueteDesc img {
  width: 95%;
  margin-top: 10px;
}

.paquetes > div:nth-child(2)  .paqueteTit { display: none; }

.paqueteDesc {
  text-align: left;
  min-height: initial;
}



}


@media screen and (max-width: 600px) {
.de20  {  width: 50%;  
min-height: 240px;
}
}








@media screen and (min-width: 1300px) {
body, h1, p {  font-size: 22px; }
.serviciosIcons div   {display: inline-block; width: 48%; }
.max {width: 90%;}




}


 


 
.on .goDemo {height: 60%; max-width: auto; z-index: 1; border-radius: 0px;}


 

.locator {position: relative; top:-170px;}
.area img { height: 160px; }
}