/*-----MARKETING----*/

.vert_item {
    max-width: 960px;
    margin: 6px auto;
    padding: 0px 30px 0px;
    font-size: 16px;
    color: #555;
}

.vert_item .vert_title {
    font-weight: 500;
    font-size: 22px;
    position: relative;
    color: #4d4d4d;
}

.item {
    display:table;


}



.h3-02{
 
    font-family: 'Titillium Web', sans-serif;
    color:#FF7058;
    font-size: 32px;
    padding-top:10px;
    font-weight: 400;
    line-height: 36px;
    /* margin-top: 0px; */
    text-align: center;
}

.magenta{
   color:#dd0047!important;
}


.item02 {
    display:table;
    margin-left: 10px;

}
.content-columns {
    display:table-cell;
    vertical-align:middle;
    text-align: left;
}

.puntos{
    margin-top:7.5px;
    margin-bottom:7.5px;
    font-size: 14px;
}

.puntos:before {
   content: "\f00c";
    color: #FF7058;
    font-family: 'fontAwesome';
    margin-right: 4px;
    margin-left: -18px;
    position: absolute;
    /* left: 0px; */
    /* text-align: left; */

}

.volver{
    color: #FF7058;
    color: #555;
    float: left; 
    width: 400xp;
    display: inline-block;

    padding-left: 20%;
    margin-top: -20;
    /* margin-top: 20px; */
}

.col-fixed02 {
    /* custom width */
 padding-right: 5px;
    width:310px;
     background-color: #EBEBEB;
 
}

.col-fixed03 {
    /* custom width */
    width:20% auto;
   min-width: 250px;


}


#actions {
    display: block;
    width: 100%;
    border-bottom: 2px solid #FF7058;
    background-color: #ebebeb;
    padding: 4px;
    margin-bottom: 10px;

}


.slickbox_contenedor {
    display: block;
    width: 100%;
    padding-top:15px;
    padding-bottom:25px;
    font-size: 14px;
    padding-left:25px;
  
    /*border: 1px solid #D9D9D9;*/
    background-color: #F2F2F2;
    margin-bottom:10px;
    color: #444;
    padding-right:20px;
}



.slickbox_contenedor02 {
    display: block;
    width: 100%;
    padding-top:15px;
    padding-bottom:25px;
    font-size: 14px;

  
    /*border: 1px solid #D9D9D9;*/
    background-color: #F2F2F2;
    margin-bottom:10px;
    color: #444;
    padding-right:20px;
}
.slickbox {

    display: block;
    width: 100%;
    margin: 0px;
    padding-top:5px;
    color: #444;
}

.slickbox:before { content: "\f00c";
    color: #FF7058;
    font-family: 'fontAwesome';
    margin-right: 10px;
    /*position: absolute;*/
    left: 0px;
   
}

.botonestilo{
    border: 0px;
    width: 100%;
    padding-left: 20px;
    background-color: #ebebeb;
    text-align: left;
}


.botonestilo:after{
  content: "\f0da";
   color: #555;
    font-family: 'fontAwesome';
    margin-right: 4px;
 
    float: right;
    text-align: left;

}

.col-centered01{
    display: inline-block;
    /*float: none;*/
    text-align: left;
    margin-right: -4px;

}


.row_centered_dashboards{
text-align: center;
    margin-left: 15px;
}


.col-centered_dashboards{
    display: inline-block;
    float: none;
    text-align: left;
    margin-right: -4px;

}

.logovertical{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
padding-top:10px;
    display: -webkit-box;
    min-width: 250px;
}

.espaciado{
     width: 30%; 
     float: left;
}


.espaciado02{
     width: 26%; 
     float: left;
}


#all_dashboards{

    
    background-color: #ebebeb;
    width: 230px;
    background-size: 100%;
    size: 10%;
    border-radius: 5px;
    height: 150px;
     float: left;
     margin-bottom:10px;

  }

  .retail01{
    background-image: url(../img/dashboards_retail01.png);
    background-repeat: no-repeat;
  }

   .retail02{
    background-image: url(../img/dashboards_retail02.png);
    background-repeat: no-repeat;
  }
    

     .retail03{
    background-image: url(../img/dashboards_retail03.png);
    background-repeat: no-repeat;

  }
    

.pricing-container02 {
    margin: 0 auto;
    padding: 5px 0px;
    background: #ebebeb;
    color: #888;
    text-align: center;
}
    

/*TOOLTIP 1 y 012 y 023*/
.wrapper, .wrapper012, .wrapper023 {

}

.wrapper .tooltip, .wrapper012 .tooltip, .wrapper023 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
 /* margin-bottom: -25px;*/
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before, .wrapper012 .tooltip:before, .wrapper023 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after, .wrapper012 .tooltip:after, .wrapper023 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .tooltip, .wrapper012:hover .tooltip, .wrapper023:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip, .lte8 .wrapper012 .tooltip, .lte8 .wrapper023 .tooltip  {
  display: none;
}

.lte8 .wrapper:hover .tooltip, .lte8 .wrapper012:hover .tooltip, .lte8 .wrapper023:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP 1 y 012 y 023*/



/*TOOLTIP002 y 013 y 024*/
.wrapper002, .wrapper013, .wrapper024 {

}

.wrapper002 .tooltip, .wrapper013 .tooltip, .wrapper024 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
  margin-bottom: -25px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper002 .tooltip:before, .wrapper013 .tooltip:before, .wrapper024 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper002 .tooltip:after, .wrapper013 .tooltip:after, .wrapper024 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper002:hover .tooltip, .wrapper013:hover .tooltip , .wrapper024:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper002 .tooltip, .lte8 .wrapper013 .tooltip, .lte8 .wrapper024 .tooltip  {
  display: none;
}

.lte8 .wrapper002:hover .tooltip, .lte8 .wrapper013:hover .tooltip, .lte8 .wrapper024:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP002 y 013 y 024*/

/*TOOLTIP003 y 014 y 025*/
.wrapper003, .wrapper014, .wrapper025 {

}

.wrapper003 .tooltip, .wrapper014 .tooltip, .wrapper025 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
 margin-bottom: -50px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper003 .tooltip:before, .wrapper014 .tooltip:before, .wrapper025 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper003 .tooltip:after, .wrapper014 .tooltip:after, .wrapper025 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper003:hover .tooltip, .wrapper014:hover .tooltip , .wrapper025:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper003 .tooltip, .lte8 .wrapper014 .tooltip, .lte8 .wrapper025 .tooltip  {
  display: none;
}

.lte8 .wrapper003:hover .tooltip, .lte8 .wrapper014:hover .tooltip, .lte8 .wrapper025:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP003 y 014 y 025*/

/*TOOLTIP004 y 015 y 026*/
.wrapper004, .wrapper015, .wrapper026 {

}

.wrapper004 .tooltip, .wrapper015 .tooltip, .wrapper026 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
  margin-bottom: -80px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper004 .tooltip:before, .wrapper015 .tooltip:before, .wrapper026 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper004 .tooltip:after, .wrapper015 .tooltip:after, .wrapper026 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper004:hover .tooltip, .wrapper015:hover .tooltip , .wrapper026:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper004 .tooltip, .lte8 .wrapper015 .tooltip, .lte8 .wrapper026 .tooltip  {
  display: none;
}

.lte8 .wrapper004:hover .tooltip, .lte8 .wrapper015:hover .tooltip, .lte8 .wrapper026:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP004 y 015 y 026*/

/*TOOLTIP005 y 016 y 027*/
.wrapper005, .wrapper016, .wrapper027 {

}

.wrapper005 .tooltip, .wrapper016 .tooltip, .wrapper027 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
  margin-bottom: -100px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper005 .tooltip:before, .wrapper016 .tooltip:before, .wrapper027 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper005 .tooltip:after, .wrapper016 .tooltip:after, .wrapper027 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper005:hover .tooltip, .wrapper016:hover .tooltip , .wrapper027:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper005 .tooltip, .lte8 .wrapper016 .tooltip, .lte8 .wrapper027 .tooltip  {
  display: none;
}

.lte8 .wrapper005:hover .tooltip, .lte8 .wrapper016:hover .tooltip, .lte8 .wrapper027:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP005 y 016 y 027*/

/*TOOLTIP006 y 017 y 028*/
.wrapper006, .wrapper017, .wrapper028 {

}

.wrapper006 .tooltip, .wrapper017 .tooltip, .wrapper028 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
   margin-bottom: -120px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper006 .tooltip:before, .wrapper017 .tooltip:before, .wrapper028 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper006 .tooltip:after, .wrapper017 .tooltip:after, .wrapper028 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper006:hover .tooltip, .wrapper017:hover .tooltip , .wrapper028:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper006 .tooltip, .lte8 .wrapper017 .tooltip, .lte8 .wrapper028 .tooltip  {
  display: none;
}

.lte8 .wrapper006:hover .tooltip, .lte8 .wrapper017:hover .tooltip, .lte8 .wrapper028:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP006 y 017 y 028*/

/*TOOLTIP007 y 018 y 029*/
.wrapper007, .wrapper018, .wrapper029 {

}

.wrapper007 .tooltip, .wrapper018 .tooltip, .wrapper029 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
 margin-bottom: -150px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper007 .tooltip:before, .wrapper018 .tooltip:before, .wrapper029 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper007 .tooltip:after, .wrapper018 .tooltip:after, .wrapper029 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper007:hover .tooltip, .wrapper018:hover .tooltip , .wrapper029:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper007 .tooltip, .lte8 .wrapper018 .tooltip, .lte8 .wrapper029 .tooltip  {
  display: none;
}

.lte8 .wrapper007:hover .tooltip, .lte8 .wrapper018:hover .tooltip, .lte8 .wrapper029:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP007 y 018 y 029*/

/*TOOLTIP008 y 019 y 030*/
.wrapper008, .wrapper019, .wrapper030 {

}

.wrapper008 .tooltip, .wrapper019 .tooltip, .wrapper030 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
  margin-bottom: -170px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper008 .tooltip:before, .wrapper019 .tooltip:before, .wrapper030 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper008 .tooltip:after, .wrapper019 .tooltip:after, .wrapper030 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper008:hover .tooltip, .wrapper019:hover .tooltip , .wrapper030:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper008 .tooltip, .lte8 .wrapper019 .tooltip, .lte8 .wrapper030 .tooltip  {
  display: none;
}

.lte8 .wrapper008:hover .tooltip, .lte8 .wrapper019:hover .tooltip, .lte8 .wrapper030:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP008 y 019 y 030*/

/*TOOLTIP009 y 020 y 031*/
.wrapper009, .wrapper020, .wrapper031 {

}

.wrapper009 .tooltip, .wrapper020 .tooltip, .wrapper031 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
 margin-bottom: -200px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper009 .tooltip:before, .wrapper020 .tooltip:before, .wrapper031 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper009 .tooltip:after, .wrapper020 .tooltip:after, .wrapper031 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper009:hover .tooltip, .wrapper020:hover .tooltip , .wrapper031:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper009 .tooltip, .lte8 .wrapper020 .tooltip, .lte8 .wrapper031 .tooltip  {
  display: none;
}

.lte8 .wrapper009:hover .tooltip, .lte8 .wrapper020:hover .tooltip, .lte8 .wrapper031:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP009 y 020 y 031*/


/*TOOLTIP010 y 021 y 032*/
.wrapper010, .wrapper021, .wrapper032 {

}

.wrapper010 .tooltip, .wrapper021 .tooltip, .wrapper032 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
 margin-bottom: -220px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper010 .tooltip:before, .wrapper021 .tooltip:before, .wrapper032 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper010 .tooltip:after, .wrapper021 .tooltip:after, .wrapper032 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper010:hover .tooltip, .wrapper021:hover .tooltip , .wrapper032:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper010 .tooltip, .lte8 .wrapper021 .tooltip, .lte8 .wrapper032 .tooltip  {
  display: none;
}

.lte8 .wrapper010:hover .tooltip, .lte8 .wrapper021:hover .tooltip, .lte8 .wrapper032:hover .tooltip {
  display: block;
}


/*FIN TOOLTIP010 y 021 y 032*/


/*TOOLTIP011 y 022 y 033*/
.wrapper011, .wrapper022, .wrapper033 {

}

.wrapper011 .tooltip, .wrapper022 .tooltip, .wrapper033 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
   margin-bottom: -245px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper011 .tooltip:before, .wrapper022 .tooltip:before, .wrapper033 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper011 .tooltip:after, .wrapper022 .tooltip:after, .wrapper033 .tooltip:after  {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper011:hover .tooltip, .wrapper022:hover .tooltip , .wrapper033:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper011 .tooltip, .lte8 .wrapper022 .tooltip, .lte8 .wrapper033 .tooltip  {
  display: none;
}

.lte8 .wrapper011:hover .tooltip, .lte8 .wrapper022:hover .tooltip, .lte8 .wrapper033:hover .tooltip {
  display: block;
}


#demodos{
    color:#555;
}

/*FIN TOOLTIP011 y 022 y 033*/



/*TOOLTIP011-02*/
.wrapper011-02 {

}

.wrapper011-02 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
   margin-bottom: -275px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper011-02 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper011-02 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper011-02:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper011-02 .tooltip {
  display: none;
}

.lte8 .wrapper011-02:hover .tooltip {
  display: block;
}


#demodos{
    color:#555;
}

/*FIN TOOLTIP011-02*/


/*TOOLTIP011-03*/
.wrapper011-03 {

}

.wrapper011-03 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
   margin-bottom: -295px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper011-03 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper011-03 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper011-03:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper011-03 .tooltip {
  display: none;
}

.lte8 .wrapper011-03:hover .tooltip {
  display: block;
}


#demodos{
    color:#555;
}

/*FIN TOOLTIP011-03*/


/*TOOLTIP011-04*/
.wrapper011-04 {

}

.wrapper011-04 .tooltip {
  background: rgba(51, 51, 51, 0.9);
  bottom: 100%;
  color: #fff;
  display: block;
 /* left: -25px;*/
   margin-bottom: -315px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper011-04 .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper011-04 .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid rgba(51, 51, 51, 0.9) 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper011-04:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper011-04 .tooltip {
  display: none;
}

.lte8 .wrapper011-04:hover .tooltip {
  display: block;
}


#demodos{
    color:#555;
}

/*FIN TOOLTIP011-04*/


#img-dash01{
    background-image:url(../img/marketing_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dash01 {
      padding-left: 10px;
}}

#img-dash02{
   background-image:url(../img/marketing_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dash02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dash03{
background-image:url(../img/marketing_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dash03 {
    width: 100%;
    margin-left: -1px;
}}


/*----FIN MARKETING---*/


/*---- INICIO RETAIL ---*/



#img-dashretail01{
    background-image:url(../img/retail_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashretail01 {
      padding-left: 10px;
}}

#img-dashretail02{
   background-image:url(../img/retail_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashretail02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashretail03{
background-image:url(../img/retail_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashretail03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN RETAIL ---*/



/*---- INICIO finance ---*/



#img-dashfinance01{
    background-image:url(../img/finance_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashfinance01 {
      padding-left: 10px;
}}

#img-dashfinance02{
   background-image:url(../img/finance_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashfinance02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashfinance03{
background-image:url(../img/finance_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashfinance03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN FINANCE ---*/




/*---- INICIO NGO ---*/


#img-dashngo01{
    background-image:url(../img/ngo_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashngo01 {
      padding-left: 10px;
}}

#img-dashngo02{
   background-image:url(../img/ngo_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashngo02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashngo03{
background-image:url(../img/ngo_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashngo03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN NGO ---*/




/*---- INICIO rrhh ---*/


#img-dashrrhh01{
    background-image:url(../img/rrhh_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashrrhh01 {
      padding-left: 10px;
}}

#img-dashrrhh02{
   background-image:url(../img/rrhh_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashrrhh02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashrrhh03{
background-image:url(../img/rrhh_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashrrhh03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN rrhh ---*/


/*---- INICIO health ---*/


#img-dashhealth01{
    background-image:url(../img/health_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashhealth01 {
      padding-left: 10px;
}}

#img-dashhealth02{
   background-image:url(../img/health_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashhealth02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashhealth03{
background-image:url(../img/health_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashhealth03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN health ---*/



/*---- INICIO pharma ---*/


#img-dashpharma01{
    background-image:url(../img/pharma_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashpharma01 {
      padding-left: 10px;
}}

#img-dashpharma02{
   background-image:url(../img/pharma_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashpharma02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashpharma03{
background-image:url(../img/pharma_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashpharma03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN pharma ---*/


/*---- INICIO tourism ---*/


#img-dashtourism01{
    background-image:url(../img/tourism_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashtourism01 {
      padding-left: 10px;
}}

#img-dashtourism02{
   background-image:url(../img/tourism_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashtourism02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashtourism03{
background-image:url(../img/tourism_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashtourism03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN tourism ---*/



/*---- INICIO ecommerce ---*/


#img-dashecommerce01{
    background-image:url(../img/ecommerce_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashecommerce01 {
      padding-left: 10px;
}}

#img-dashecommerce02{
   background-image:url(../img/ecommerce_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashecommerce02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashecommerce03{
background-image:url(../img/ecommerce_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashecommerce03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN ecommerce ---*/







/*---- INICIO education ---*/


#img-dasheducation01{
    background-image:url(../img/education_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dasheducation01 {
      padding-left: 10px;
}}

#img-dasheducation02{
   background-image:url(../img/education_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dasheducation02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dasheducation03{
background-image:url(../img/education_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dasheducation03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN education ---*/



/*---- INICIO publicadmin ---*/


#img-dashpublicadmin01{
    background-image:url(../img/publicadmin_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashpublicadmin01 {
      padding-left: 10px;
}}

#img-dashpublicadmin02{
   background-image:url(../img/publicadmin_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashpublicadmin02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashpublicadmin03{
background-image:url(../img/publicadmin_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashpublicadmin03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN publicadmin ---*/



/*---- INICIO telco ---*/


#img-dashtelco01{
    background-image:url(../img/telco_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashtelco01 {
      padding-left: 10px;
}}

#img-dashtelco02{
   background-image:url(../img/telco_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashtelco02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashtelco03{
background-image:url(../img/telco_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashtelco03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN telco ---*/





/*---- INICIO utilities ---*/


#img-dashutilities01{
    background-image:url(../img/utilities_dashboard01.png);
    border: 1px solid #d0d0d0; 
    height:510px; 
    margin:10px; 
    width: 328px; 
    margin:10px; 
    margin-left: auto; 
    margin-right: auto; 

}

@media (max-width: 768px){
#img-dashutilities01 {
      padding-left: 10px;
}}

#img-dashutilities02{
   background-image:url(../img/utilities_dashboard02.png); 
   border: 1px solid #d0d0d0; 
   width:560px; 
   height:276px; 
   margin-left:30px; 
   margin-top:10px;

}

@media (max-width: 768px){
#img-dashutilities02 {
    width: 100%;
    margin-left: -1px;
}}

#img-dashutilities03{
background-image:url(../img/utilities_dashboard03.png); 
border: 1px solid #d0d0d0; 
width:560px; height:224px;
margin-left:30px; 
margin-top:10px;

}

@media (max-width: 768px){
#img-dashutilities03 {
    width: 100%;
    margin-left: -1px;
}}

/*--- FIN utilities ---*/


/*-- VERTICALES --*/

/*----------------------------- VERTICALES CSS -------------/*


    /*div.wrapper {
    opacity: 0;
  
    position: relative;
    overflow: hidden;
    height: auto;
    display: block text-align:center!important;
    color: #666!important;
    font-family: 'titillium web';
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
    text-align: center!important;}*/

/*div.bubble:nth-child(1) {
    border-bottom-color: #074396;
    color: #074396;
}
@media (min-width: 1200px)
bootstrap.css:2237
.col-lg-offset-1 {
    margin-left: 8.33333333%;
}*/


.vert_item {
    max-width: 960px;
    margin: 6px auto;
    /* border-bottom: solid 1px #ccc; */
    padding: 0px 30px 0px;
    font-size: 16px;
    color: #555;
}

.vert_item .vert_title {
    font-weight: 500;
    font-size: 22px;
    position: relative;
    color: #4d4d4d;
  
}

/* -------------------------------- COLUMNAS GENÉRICO ------------------------------*/

div.bubble .circulo {
    /*height: 150px;
    width: 150px;*/
    border-radius: 50%;
   /* margin: 30px auto 20px auto;*/
   /* background-color: #fff;*/
    opacity:1;
       background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
}

path{ fill: black;
}




.bubble{
    
      /*content: "";*/
    height: 200px;
    width: 200px;
  /* opacity: .1;*/
  /*  z-index: -1;*/
   
    }



div.bubble:hover .retail,  div.bubble_rrhh:hover .rrhh, div.bubble_finance:hover .finance, div.bubble_ngo:hover .ngo,
div.bubble_pharma:hover .pharma, div.bubble_marketing:hover .marketing, div.bubble_publicadmin:hover .publicadmin,
div.bubble_ecommerce:hover .ecommerce, div.bubble_health:hover .health,  div.bubble_telco:hover .telco,
div.bubble_utilities:hover .utilities, div.bubble_tourism:hover .tourism, div.bubble_education:hover .education{
   filter: grayscale(0%)!important;
    opacity: 1;
       transition: all 1s;
    -webkit-transition: all 1s;
}



.aui h5 {
    font-size: 14px;
}


div.bubble h5 a, div.bubble_rrhh h5 a, div.bubble_finance h5 a, div.bubble_ngo h5 a,
div.bubble_pharma h5 a, div.bubble_marketing h5 a, div.bubble_publicadmin h5 a, 
div.bubble_ecommerce h5 a, div.bubble_health h5 a, div.bubble_telco h5 a,
div.bubble_utilities h5 a, div.bubble_tourism h5 a, div.bubble_education h5 a {
    color: #666;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    font-family: 'titillium web';
    text-align: center;
    display: block;
}



div.bubble:hover a h5, div.bubble:hover a span.hl, div.bubble_rrhh:hover a h5, div.bubble_rrhh:hover a span.hl,
div.bubble_finance:hover a h5, div.bubble_finance:hover a span.hl,
div.bubble_ngo:hover a h5, div.bubble_ngo:hover a span.hl,
div.bubble_pharma:hover a h5, div.bubble_pharma:hover a span.hl,
div.bubble_marketing:hover a h5, div.bubble_marketing:hover a span.hl,
div.bubble_publicadmin:hover a h5, div.bubble_publicadmin:hover a span.hl,
div.bubble_ecommerce:hover a h5, div.bubble_ecommerce:hover a span.hl,
div.bubble_health:hover a h5, div.bubble_health:hover a span.hl,
div.bubble_telco:hover a h5, div.bubble_telco:hover a span.hl,
div.bubble_utilities:hover a h5, div.bubble_utilities:hover a span.hl,
div.bubble_tourism:hover a h5, div.bubble_tourism:hover a span.hl,
div.bubble_education:hover a h5, div.bubble_education:hover a span.hl {
    color: white!important;
}

.titularBI{
font-size: 15px; 
color: #666; 
line-height: 22px;
}



 /* -------------------------------- F I N     D E   COLUMNAS  GENÉRICO --------------*/


/* -------------------------------- RETAIL (cambiar por cada vertical) --------------*/
 div.bubble {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #962A2A;
    color: #962A2A;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble:hover {

    background-color: #962A2A;
   
}

 .retail {

    background: url(../img/retail01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble:nth-child(1) h5 a span.hl {
    color: #962A2A;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularRetail{
    color: #962A2A; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   RETAIL --------------*/


/* -------------------------------- RRHH --------------*/
 div.bubble_rrhh {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
    /*min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #FF016A;
    color: #FF016A;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_rrhh:hover {

    background-color: #FF016A;
   
}

 .rrhh {

    background: url(../img/rrhh01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_rrhh:nth-child(1) h5 a span.hl {
    color: #FF016A;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularRRHH{
    color: #FF016A; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   RRHH --------------*/

/* -------------------------------- FINANCE --------------*/
 div.bubble_finance {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /*min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #AA6455;
    color: #AA6455;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_finance:hover {

    background-color: #AA6455;
   
}

 .finance {

    background: url(../img/finance01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_finance:nth-child(1) h5 a span.hl {
    color: #AA6455;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularFinance{
    color: #AA6455; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   FINANCE --------------*/


/* -------------------------------- NGO --------------*/
 div.bubble_ngo {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #657C48;
    color: #657C48;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_ngo:hover {

    background-color: #657C48;
   
}

 .ngo {

    background: url(../img/ngo01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_ngo:nth-child(1) h5 a span.hl {
    color: #657C48;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularNgo{
    color: #657C48; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   NGO --------------*/


/* -------------------------------- PHARMA --------------*/
 div.bubble_pharma {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #7878D1;
    color: #7878D1;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_pharma:hover {

    background-color: #7878D1;
   
}

 .pharma {

    background: url(../img/pharma01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_pharma:nth-child(1) h5 a span.hl {
    color: #7878D1;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularPharma{
    color: #7878D1; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   PHARMA --------------*/


/* -------------------------------- MARKETING --------------*/
 div.bubble_marketing {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #FF7058;
    color: #FF7058;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_marketing:hover {

    background-color: #FF7058;
   
}

 .marketing {

    background: url(../img/marketing01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_marketing:nth-child(1) h5 a span.hl {
    color: #FF7058;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularMarketing{
    color: #FF7058; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   MARKETING --------------*/

/* -------------------------------- PUBLIC ADMIN --------------*/

 div.bubble_publicadmin {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #D87395;
    color: #D87395;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_publicadmin:hover {

    background-color: #D87395;
   
}

 .publicadmin {

    background: url(../img/publicadmin01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_publicadmin:nth-child(1) h5 a span.hl {
    color: #D87395;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularPublicadmin{
    color: #D87395; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   PUBLICADMIN --------------*/

/* -------------------------------- ECOMMERCE --------------*/

 div.bubble_ecommerce {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #D19D09;
    color: #D19D09;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_ecommerce:hover {

    background-color: #D19D09;
   
}

 .ecommerce {

    background: url(../img/ecommerce01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_ecommerce:nth-child(1) h5 a span.hl {
    color: #D19D09;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularEcommerce{
    color: #D19D09; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   ECOMMERCE --------------*/

/* -------------------------------- HEALTH --------------*/

 div.bubble_health {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #408974;
    color: #408974;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_health:hover {

    background-color: #408974;
   
}

 .health {

    background: url(../img/health01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_health:nth-child(1) h5 a span.hl {
    color: #408974;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularHealth{
    color: #408974; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   HEALTH --------------*/

/* -------------------------------- TELCO --------------*/

 div.bubble_telco {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #0C4384;
    color: #0C4384;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_telco:hover {

    background-color: #0C4384;
   
}

 .telco {

    background: url(../img/telco01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_telco:nth-child(1) h5 a span.hl {
    color: #0C4384;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularTelco{
    color: #0C4384; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   TELCO --------------*/

/* -------------------------------- UTILITIES --------------*/

 div.bubble_utilities {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #805A8E;
    color: #805A8E;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_utilities:hover {

    background-color: #805A8E;
   
}

 .utilities {

    background: url(../img/utilities01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_utilities:nth-child(1) h5 a span.hl {
    color: #805A8E;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularUtilities{
    color: #805A8E; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   UTILITIES --------------*/

/* -------------------------------- TOURISM --------------*/

 div.bubble_tourism {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #98BC00;
    color: #98BC00;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_tourism:hover {

    background-color: #98BC00;
   
}

 .tourism {

    background: url(../img/tourism01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_tourism:nth-child(1) h5 a span.hl {
    color: #98BC00;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularTourism{
    color: #98BC00; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   TOURISM --------------*/


/* -------------------------------- EDUCATION --------------*/

 div.bubble_education {
    /*position: relative;*/
    margin: 6px 3px;
    margin-bottom: 0;
   /* min-width: 250px;*/
    height: 270px;
 /*-------------*/
    transition: all 1s;
    -webkit-transition: all 1s;
   /* left: 100%;*/
    border-bottom: solid 5px;
    border-bottom-color: #0DA6C9;
    color: #0DA6C9;
    cursor: pointer;

    background: #dfdfdf;
   
}

 div.bubble_education:hover {

    background-color: #0DA6C9;
   
}

 .education {

    background: url(../img/education01.svg);
    filter: grayscale(100%)!important;
    opacity: 0.4;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin: 30px auto 20px auto;
    background-color: #fff;
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 1s;
    -webkit-transition: all 1s;

    
}


div.bubble_education:nth-child(1) h5 a span.hl {
    color: #0DA6C9;
       font-weight: bold;
       font-size: 20px;
       line-height:30px;

}
.subtitularEducation{
    color: #0DA6C9; 
    font-size: 20px; 
    font-weight: Bold;

}
/* -------------------------------- F I N     D E   EDUCATION --------------*/

/*------- BOOTSTRAP -----*/


.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-fixed {
    /* custom width */
    width:220px; /* LO PODEMOS CAMBIAR PARA QUE ENTREN MÁS COLUMNAS*/
}


.item {

    padding:1px;

}


.item {
    display:table;
        margin-left: auto;
    margin-right: auto;
}
.content {
    
    vertical-align:middle;
    text-align:center;

}
/*------- FIN DE BOOTSTRAP -----*/


/*------------------------------ FIN VERTICALES CSS ------------/*


    .vert_item {
    max-width: 960px;
    margin: 30px auto;
    /* border-bottom: solid 1px #ccc; 
    padding: 0px 30px 0px;
    font-size: 16px;
    color: #555;
}*/

.vert_item .vert_title {
    font-weight: 500;
    font-size: 22px;
    position: relative;
    color: #4d4d4d;
  
}
    


#project{
    padding-top: 20px;
    /* max-width: 1500px; */
    margin: auto;

}

.laptop{
    position: relative;
    /* width: 446px; */
    /* height: 348px; */
    overflow: hidden;
    /* transform: scale(0.9); */
    margin: auto;
    text-align: center;

}

.carousel-inner {
    height: 430px;
    width: 100%;
}


.items_left, .items_right {
    width: 250px;
    height: 345px;
    position: absolute;
   top:20px;
  
    z-index: 1;
    overflow: hidden;

}






.itemsverticales {
    height: 25%;
    margin-bottom: 0%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    position: relative;
}
@media (max-width: 1024px){

.itemsverticales {
    /* width: 33%; */
    HEIGHT: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
}}


.itemsverticales_left, .itemsverticales_right {
    width: 250px;
    height: 455px;
    position: absolute;
    top: 30px;
    left: calc(50% - 512px);
    z-index: 1;
    overflow: hidden;
}

.itemsverticales_right {
    left: auto;
    right: calc(50% - 512px);
}

.itemsverticales {
    height: 33%;
    margin-bottom: 0%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    position: relative;
}

.itemsverticales:hover , .itemsverticales.selected{

    float: none;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
}

.itemsverticales_contentverticales {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    transition: all 1000ms;
}

.itemsverticales_contentverticales.left{
    left: 390px;
}

.itemsverticales_contentverticales.right{
    left: -380px;
}

.itemsverticales_contentverticales.top{
    top: 130px;
}

.itemsverticales_contentverticales.middle{
    top: 10px;
}

.itemsverticales_contentverticales.bottom{
    top: -110px;
}

span.title {
    position: absolute;
    width: 100%;
    top: calc(100% - 15px);
    left: 0;
    /*text-transform: uppercase;*/
    line-height: 16px;
    font-size: 17px;
    font-weight: 600;

    cursor: default;

}


@media (max-width: 768px){

span.title {
      padding-left: 10px;
}




.itemsverticales_left, .itemsverticales_right {
    width: 250px;
    height: 455px;
    position: absolute;
    top: 30px;
    left: calc(50% - 512px);
    z-index: 1;
    overflow: hidden;
}

.itemsverticales_right {
    left: auto;
    right: calc(50% - 512px);
}

.itemsverticales {
    height: 33%;
    margin-bottom: 0%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    position: relative;
}

.itemsverticales:hover , .itemsverticales.selected{
    opacity: 1;
}

.itemsverticales_content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    transition: all 1000ms;
}

.itemsverticales_content.left{
    left: 390px;
}

.itemsverticales_content.right{
    left: -380px;
}

.itemsverticales_content.top{
    top: 130px;
}

.itemsverticales_content.middle{
    top: 10px;
}

.itemsverticales_content.bottom{
    top: -110px;
}


.itemsverticales img{
    width: 90px;
    height: auto;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 50px);
    border: solid 2px transparent;
    border-radius: 50%;
    padding: 0px;
    background: #ebebeb;
    transition: all 300ms;
    cursor: pointer;

}

.itemsverticales img:hover{
    bottom: 25px;
}

.itemsverticales.selected span.title {
    font-weight: 700;
}




.itemsverticales.selected img{
    border: solid 2px #b4b4b4;
    opacity: 1;
}


@media (max-width: 1024px){

.carousel-inner {
 

    width: 100%;

    padding: 0px 25px;
   height: 380px!important;
  
}}


@media (max-width: 768px){
#seccionvideo{
    /* width: 33%; */
    height: 50px;
  
}}

}
/*-- FIN VERTICALES --*/