/* CASOS DE ÉXITOS*/
div.galeria {
border: 1px solid #ccc;
}
div.galeria:hover {
border: 1px solid #777;
}
div.galeria img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

/*BOTÓN INICIA SESIÓN*/
 .boton-inicia-sesion a{
    background-color: #e69c0e;
    color: #fff !important;
  }

  .boton-inicia-sesion:hover{
    background-color: #d5cec2 !important;
    color: #fff;
    border: 1px solid #fff;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  }

  .boton{
    background-color: #e69c0e;
  }

  .boton:hover{
    background-color: transparent;
    color: #0e4d43;
    border: 1px solid #fff;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  }


   /*ESTILOS REDES SOCIALES*/
   .social-paot-1 {
            position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
            /*left: 0;  Establecemos la barra en la izquierda */
            right: 0; /*Establecemos la barra en la derecha */
            margin-right: 7%;
            top: -93px; /*Bajamos la barra 200px de arriba a abajo */
            z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
            }


            .social-paot-1 a {
              color:#fff;
            }
            .social-paot-1 a:hover {
              color:#e69c0e;
            }

            #l1, #l2{
              float:left
            }

            .social-paot-icons li {
              font-size: 1.6em;
              padding: 0.5em;
            }

            #l1 li{
              display:list-item;
              xlist-style:none;
            }

            #l2 li{
              display: inline;
            }

            #l2{
              margin-left:50px;
              margin-top:100px;
            }

            div.tooltip-paot{
              background: #009688;
              padding: .5em;
              border-radio: 4;
              color: white;
              font: courier;
              float:left;
              position: fixed;
              top: 150px;
              left: 220px;
              z-index: 2000;
              
            }
            div.tooltip-paot:before {
              position:fixed;
              bottom:34px;
              content:"";
              border-bottom: 10px solid #009688;
              border-top: 10px solid transparent ;
              border-right: 10px solid transparent ;
              border-left: 10px solid transparent ;
              z-index: 2000;
            }




        .social-paot {
        position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
        /*left: 0;  Establecemos la barra en la izquierda */
        right: 0; /*Establecemos la barra en la derecha */
        top: 74px; /*Bajamos la barra 200px de arriba a abajo */
        z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
        }

        .social-paot ul {
        list-style: none;
        
        }

        .social-paot ul li a {
            display: inline-block;
            color:#fff;
            background: #000;
            padding: 10px 15px;
            text-decoration: none;
            -webkit-transition:all 500ms ease;
            -o-transition:all 500ms ease;
            transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
        }

        .social-paot ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
        .social-paot ul li .icon-twitter {background: #00abf0;}
        .social-paot ul li .icon-googleplus {background: #d95232;}
        .social-paot ul li .icon-pinterest {background: #ae181f;}
        .social-paot ul li .icon-mail {background: #666666;}

        .social-paot ul li a:hover {
            background-color: rgba(45, 58, 75, 0.5); /* Cambiamos el fondo cuando el usuario pase el mouse */
            /* padding:  10px 30px; Hacemos mas grande el espacio cuando el usuario pase el mouse */
        }