/***************************************/
/********* CSS GENERAL MPADEL **********/
/***************************************/
html{
 height: 100%;
}
body{
    font-family: 'Open Sans', Arial, sans-serif;
    width: 100%;
    background-color: #fff;
    color: #555;
    font-size: 11pt;
    font-weight: 300;
    line-height: 1.75;
    height: 100%;
}

.container {
    max-width: 1170px;
    padding: 0 0 85,25px 0;
}
p{
    text-align: justify;
}
.ico{
    color: #005DAB;
    text-align: center;
    padding-bottom: .8em;
}
span.negrita{
    color: #005DAB;
    font-weight: bold;
}
.scroll{
    padding-right: 1em;
    margin-bottom: 3%;
    height: 32em;
    overflow-y: scroll;
}
abbr{
    font-weight: bold;
}



/***************************************/
/********* TITULOS DE PAGINA ***********/
/***************************************/

h1,h2,h3,h4{
    color: #005DAB;
    font-weight: 600;
}
.page-header{border-bottom:1px solid #005DAB}
.titulo-pagina{
    margin-top: -1%;
    color: #fff;
    font-size: 28pt;
    text-align: center;
    font-weight: 300;
    font-family: Open Sans;
    letter-spacing: .2em;
}
#titulo-club{
    background-image: url(../images/club.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}
#titulo-eventos{
    background-image: url(../images/eventos.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}
#titulo-escuela{
    background-image: url(../images/slider2.jpg);
    background-position: center 35%;
    background-size: 100% auto;
    color: #fff;
}
#titulo-galeria{
    background-image: url(../images/galeria.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}
#titulo-contacto{
    background-image: url(../images/contacto.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}
#titulo-cliente{
    background-image: url(../images/cliente.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;

}
#titulo-login{
    background-image: url(../images/cliente.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}
#titulo-doc{
    background-image: url(../images/documentacion.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}


/***************************************/
/*********** OWL -CAROUSEL *************/
/***************************************/

.sliderInicio .slide{
    height: 100%;
}
.owl-carousel, .owl-carousel .owl-stage-outer, .owl-carousel .owl-stage-outer .owl-stage, .owl-carousel .owl-stage-outer .owl-stage .owl-item{
    height: 100%;
    width: 100%;
}
.owl-dots{
    text-align: center;
    position: absolute;
    bottom: 5%;
    width: 100%;
}
.owl-dots .owl-dot{
    display: inline-block;
}
.owl-dots .owl-dot.active span{
    background: none repeat scroll 0 0 #005DAB;
}
.owl-dots .owl-dot span{
    background: none repeat scroll 0 0 transparent;
    border-radius: 100%;
    border: 1px solid #005DAB;
    display: block;
    height: 1em;
    margin: .5em .3em;
    opacity: 0.5;
    width: 1em;
}
.owl-dots-menu{
    position: absolute;
    bottom: 22%;
    left: 46%;
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    display: block;
    height: .5em;   
    width: .5em;
}

/***************************************/
/*********** CABECERA MENU *************/
/***************************************/

#menu1>li.foco>a:focus,#menu1>li.foco>a:hover{    
    text-decoration: underline;
    color: #fff;
    border-radius: 20% 20%;
}
nav{
    position: relative;
    z-index: 999 !important;
    width: 100%;
    background-image: linear-gradient(to bottom, #005DAB, #003F70);
    height: 75px;
    box-shadow: 2px 0px 33px #003F73;
    border-bottom: 1px solid #003F74;
}
.navbar-toggle{
    margin-top: 13px;
    padding: 10px 15px;
    border-color: #fff !important;
}
.nav-cliente .navbar-toggle{
    border-color: #005DAB !important;
}
.nav-cliente .fa-navicon:before, .nav-cliente .fa-reorder:before, .nav-cliente .fa-bars:before {
    content: "\f0c9";
    color: #005DAB;
}
@media screen and (max-width: 992px){
    .btn-gen{
        display: block;
    }
    .menu .navbar-collapse.collapse { 
        display: none;
    }
    .navbar-collapse.in {
        overflow-y: visible;
        display: block !important;
        width: 100%;
        margin-top: 69px;
    }
    .menu-movil{
        background-image: linear-gradient(to bottom, #005DAB, #003F70);
    }
}
.navbar-toggle i{
    color: #fff !important;
    font-size: 22px;
}
.menu{
    float: right;
}
.menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu ul li{
    position: relative;
    float: left;
}
.menu ul li i{
    padding-left: .8em;
    font-size: 20pt;
}
.menu ul li a{
    padding: 1.7em 1em;
    color: #fff;
    text-decoration: none;
    font-size: 11pt;
    display: block;
    transition: border 0.15s linear;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .1em;
}
.menu .fa-user{
    font-size: 14pt;
}
.menu .fa-chevron-down{
    font-size: 10pt;
    margin-left: -15%;
}
.open>.dropdown-menu.cliente{
    width: 150%;
    border: solid 2px #fff;
    border-radius: 10% 10%;
    padding: 0 0;
    padding-right: 1em;
    margin-top: -10%;
    margin-left: -5%;
}
.open>.dropdown-menu i.i-nav{
    font-size: 12pt;
    padding-right: 2%;
}
.open>.dropdown-menu a.ico-nav {
    font-size: 9pt;
    padding: 0;
    margin: 2% 2%;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 1em;
    //margin-left: -5%;
}
.open>.dropdown-menu a.ico-nav:hover{
    text-decoration: underline;
    background-color: #005DAB;
    color: #fff;
    border-radius: 20% 20%;
}


/***************************************/
/************** ENLACES ****************/
/***************************************/

.consultar {
    margin-top: 5%;
    color: #005DAB;
    /* font-weight: bold; */
}
.consultar:hover{
    text-decoration: underline;
}
a:hover{
    text-decoration: none;
}
a.btn.btn-primary{
    background-color: #005DAB;
    border-radius: 10% 10%;
    margin-right: 5%;
    
}
a.btn.btn-primary:hover{
    background-color: #fff;
    color: #005DAB;
}
a.btn.btn-primary:hover h2{
    color: #005DAB;
}
a.btn.btn-primary h2 {
    color: #fff;
    padding: 2% 2%;
}


/***************************************/
/************ MENU USUARIO *************/
/***************************************/

@media screen and (max-width: 769px){
    .navbar-collapse.collapse { 
        display: none;
    }
    .navbar-collapse.in {
        overflow-y: visible;
        display: block !important;
        width: 100%;
        margin-top: 69px;
    }
    .boton-cl{
        float: left;
        display: block;
        margin-top: 5px;
        margin-left: 10px;
    }
    .nav-cliente .menu-usuario{
        right: 0px;
    }
    .nav-cliente .menu-usuario .dropdown-menu{
        margin-left: -75px;
    }
    .nav-cliente .menu-cliente{
        background-color: #E7F2FF;
        left: 0;
        top: 60px;
        z-index: 99;
    }
}
.nav-cliente{
    background: rgba(154, 202, 255, 0.24);
    height: 60px;
}
.menu-cliente{
    left: 30px;
    position: absolute;
    padding-bottom: 0;
    overflow: visible !important;
    display: block;
}
.menu-cliente ul li{
    position: relative;
    float: left;
    list-style-type: none;
}
.menu-cliente ul li a{
    padding: 18px 25px;
    text-decoration: none;
    color: #005DAB !important;
    font-size: 10pt;
    display: block;
    transition: border 0.15s linear;
    /*text-transform: uppercase;*/
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 24.5px;
}
.menu-cliente ul li a i{
    padding-right: 7px;
    font-size: 10pt
}
.titulo-contenido-cliente{
    padding: 50px 0;
    text-align: center;
}
.titulo-contenido-cliente .profile-image{
    margin-top: 20px;
    width: 130px;
    height: 130px;
}
.contenido-cliente li a{
    color: #9ACAFF;
    text-decoration: none;
}
.nav-tabs {
    border-bottom: 1px solid #9ACAFF;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #005DAB;
    font-weight: bold;
    border: 1px solid #9ACAFF;
    border-bottom-color: transparent;
    text-decoration: none;
}
.nav-tabs>li>a:focus, .nav-tabs>li>a:hover {
    text-decoration: none;
    background-color: #9ACAFF;
    color: #005DAB;
}
.pelota{
    background-image: url(../images/pelota.png);
    background-size: 17px 17px;
    background-repeat: no-repeat;
    background-position: center 50px;
}
.pelota-cliente{
    background-image: url(../images/pelota.png);
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center 40px;
}
.titulo-contenido-cliente p:first-of-type{
    padding-top: 25px;
}
.contenido-cliente{
    padding-top: 25px;
    padding-bottom: 50px;
}
.contenido-cliente .ranking-cliente{
    text-align: center;
}
.contenido-inicio{
    text-align: center;
}
.contenido-inicio .btn-primary{
    width: 90%;
    padding: 40px 40px;
    text-transform: uppercase;
    background-color: #005DAB;
}
.contenido-inicio .btn-primary:hover{
    background-color: #337ab7;
}
.contenido-inicio .btn-primary i{
    padding-right: 7px;
    font-size: 40px;
}
.contenido-inicio .btn-primary h2{
    font-size: 20px;
}
.contenido-cliente .partidos-creados h2, .ranking h2{
    text-align: center;
    padding-bottom: 40px;
}

.partidos-creados a{
    color: #555;
}
.partidos-creados a:hover, .partidos-creados a:focus, .partidos-creados a:active{
    color: #555;
    text-decoration: none;
    border: none;  
}
.partidos-creados h3{
    font-size: 15px;
}
@media screen and (max-width: 650px){
    #jugables .crear-partido{
        float: none;
    }
}
.crear-partido{
    margin-top: 20px;
    float: right;
}
.crear-partido h2{
    margin: 0;
    padding: 10px;
    font-size: 17px;
}
.crear-partido i{
    padding-right: 7px;
}
.table{
    table-layout: fixed;
}
th,td{
    witdh: 130px;
}
.email{
    width: 210px;
}
.partidos-creados table.table caption, .mis-partidos table.table caption{
    color: #67ACF9;
    font-weight: bold;
    font-size: 15px;
}
.partidos-creados table.table caption:focus, .mis-partidos table.table caption:hover{
    border: none
}
.mis-partidos table.table tbody tr th, .partidos-creados table.table tbody tr th, .ranking table.table tbody tr th{
    text-align: center;
    border: 1px solid #ddd;
    background-image: linear-gradient(to bottom, #005DAB, #003F70);
    color: #fff;
}
.mis-partidos table.table tbody tr td, .partidos-creados table.table tbody tr td, .ranking table.table tbody tr td{
    border: 1px solid #ddd;
    color: #555;
    font-weight: 400;
    text-align: center;
}
.verde{
    color: #4F8A10 !important;
}
.rojo{
    color: #D8000C !important;
}
.azul{
    background-color: #E7F2FF !important;
    color: #005DAB !important;
}
.destacado{
    font-weight: bold !important;
    background-color: #E7F2FF;
    color: #005DAB;
}
/* Modales de partido */
.close{
    text-align: center;
    font-weight: bold;
    color: #fff;
    opacity: .9;
}
.btn-default {
    color: #005DAB;
    background-color: #fff;
    border-color: #67ACF9;
}
.btn-default:hover {
    color: #005DAB;
    background-color: #ACD9FF;
    border-color: #9ACAFF;
}
.btn-default.focus, .btn-default:active,.btn-default.active, .btn-default:focus,.btn-default.active.focus,
.btn-default.active:focus, .btn-default.active:hover, 
.btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: #005DAB;
    background-color: #67ACF9;
    border-color: #9ACAFF;
}
#myModal .modal-content{
    position: absolute;
    top: 5em;
    width: 100%;
    border-radius: 0;
    margin: 15% auto;
}
/*
.modal-content{
    position: absolute;
    top: 8em;
    width: 100%;
}
*/
#myModal2 .modal-content{
    position: absolute;
    top: 8em;
    width: 100%;
}

#myModal .modal-header, #myModal2 .modal-header{
    background-image: linear-gradient(to bottom, #005DAB, #003F70);
    color: #fff;
    border-bottom: none;
}
.modal-title{
    text-align: center;
    font-weight: bold;
    color: #fff;
}
.modal-body{
    padding: 0;
    font-weight: 400;
}
.modal-body p{
    text-align: center;
}
.modal-body input[type=checkbox]{
    margin-right: 7px;
}
.modal-body .input-registro.apartado{
    padding-bottom: 40px;
}
.modal-body #buscarPareja{
    display: none;
}
.modal-body .profile-image{
    width: 50px;
    height: 50px;
}
.input-group-addon {
    background-color: #005dab;
    border: 1px solid #005dab;
    color: #fff;
}
.background-modal-crearPartido{
    background-image: url('http://www.padelcity.com/files/tmce/padel_ecomm-1--2-1.jpg');
    background-repeat: no-repeat;
    background-position: 20% 10%;
    background-size: cover;
    height: 200px;
    position: relative;
}
.background-modal-unirsePartido{
    background-image: url('../images/pista.png');
    background-repeat: no-repeat;
    background-position: 20% 10%;
    background-size: cover;
    height: 20em;
    position: relative;
    /*margin-bottom: 25px;*/
}
#myModal2 select{
    max-width: 125px;
}
#myModal2 .modal-content .jugador1{
    color: #fff;
    display: inline-block;
    position: relative;
    /*left: 119px;
    top: 115px;*/
    left: 10em;
    top: 7em;
}
#myModal2 .modal-content .jugador2{
    color: #fff;
    position: absolute;
    /*left: 107px;
    top: 197px;*/
    left: 10em;
    top: 12em;
}
#myModal2 .modal-content .jugador3{
    color: #fff;
    position: absolute;
    /*left: 318px;
    top: 116px;*/
    right: 7em;
    top: 7em;
    
}
#myModal2 .modal-content .jugador4{
    color: #fff;
    position: absolute;
    /*left: 320px;
    top: 197px;*/
    right: 7em;
    top: 12em;
}
#myModal2 input[type="radio"]{
    padding-top: 5px;
}
.delete i{
    color: #e8373a;
    font-size: 16px;
    cursor: pointer;
}
.seleccion-division .botonAceptar{
    margin-top: 35px;
}
.seleccion-division label{
    font-size: 18px;
}
.resultadoSection{
    padding-bottom: 147px;
}
.mensaje-positivo{
    text-align: center !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #4F8A10 !important;
}
.mensaje-negativo{
    text-align: center !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #D8000C !important;
}
.center{
    text-align: center;
}

/***************************************/
/************* HOME ***************/
/***************************************/

#servicios{
    padding-top: 50px;
    padding-bottom: 25px;
}
.servicio{
    text-align: center;
    margin: 50px 0;
    padding: 0 35px;
}
.servicio i{
    color: #005DAB;
    font-size: 55px;
}
.servicio .texto-servicio{
    text-align: justify;
    color: #555;
    font-weight: 300;
    margin-top: 17px;
    margin-bottom: 0;
}

#noticias{
    padding: 25px 0;
}
#noticias .noticia{
    padding: 40px 0;
}
#noticias .titulo-secundario, #torneos .titulo-secundario{
    text-align: left;
    padding-bottom: 20px;
    color: #005DAB;
}
#noticias img{
    height: 300px;
}
#noticias .btn-noticia, #torneos .btn-noticia{
    padding-top: 20px;
    text-align: center;
}

#patrocinadores{
    padding-top: 25px;
    padding-bottom: 75px;
}
.sliderPatrocinadores{
    height: 130px;
    padding-top: 20px;
}
.sliderPatrocinadores .owl-item{
    padding: 0 15px;
}
.sliderPatrocinadores .slide{
    height: 100%;           
}
.sliderPatrocinadores .slide img{
    margin: 0 auto;
    max-width: 100%;
    height: 100px;
}
#titulo-login{
    background-image: url(../images/cliente.jpg);
    background-position: center center;
    background-size: 100% auto;
    color: #fff;
}

/***************************************/
/************* SERVICIOS ***************/
/***************************************/

#servicios{
    padding-top: 50px;
}
.servicio{
    text-align: center;
    margin: 50px 0;
    padding: 0 35px;
}
.servicio i{
    color: #005DAB;
    font-size: 55px;
}
.servicio h3{
    text-align: center;
    font-size: 21px;
    font-weight: 300;
    margin: 0;
    padding-top: 18px;
    letter-spacing: 1px;
}
.servicio .texto-servicio{
    text-align: justify;
    color: #555;
    font-weight: 300;
    margin-top: 17px;
    margin-bottom: 0;
}
.black{
    background: rgba(1, 1, 1, .5);
    padding: 100px 0;
}


/***************************************/
/************ FORMULARIOS **************/
/***************************************/

#login h2, #registro h2{
    text-align: center;
}
#login .jumbotron, #registro .jumbotron{
    padding-bottom: 0;
    background-color: #fff;
}
#registro .jumbotron label{
    padding-top: 10px;
    text-align: center;
    font-weight: normal;
}
.altura{
    min-height: 75px;
}
.form-signin{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-control, .form-registro .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}
.form-signin input{
    margin-bottom: 15px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="email"]{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"]{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.form-signin .checkbox{
    font-weight: normal;
    margin-bottom: 10px;
}
.input-registro{
    padding-bottom: 20px;
    padding-top: 20px;
}
.boton-registro{
    text-align: center;
}
.boton-registro button{
    margin-top: 30px;
}


/***************************************/
/*************** FOOTER ****************/
/***************************************/

#footer{
    min-height: 40px;
    max-height: 100%;
    width: 100%;
    margin-bottom: -7px;
    font-size: 14px;
    margin-top: 50px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: inline-block;
    color: #fff;
    padding: 25px 0;
    background-image: linear-gradient(to top, #005DAB, #003F70);
    border-bottom: 1px solid #005DAB;
    box-shadow: 2px 7px 33px #003F73;
}
.wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: 85,25px;
    padding: 0 0 85,25px 0;
}
.contenido-footer{
    font-weight: 300;    
    display: inline-block;
    width: 100%;    
    text-align: center;
}
.contenido-footer h2{
    font-weight: 300;
    font-size: 22px;
    position: relative;
    margin-bottom: 30px;
}
.contenido-footer p{
    padding-right: 50px;
}
.contenido-footer ul{
    list-style: none;
    padding: 0;
}
.contenido-footer .lista-contacto li{
    padding: 7px 10px;
    display: inline;    
}
.contenido-footer .lista-contacto li i{
    font-size: 21px;
    width: 20px;
    opacity: 1;
    position: relative;
    top: 3px;
    padding-right: .2em; 
}
.contenido-footer .lista-contacto a,.contenido-footer .lista-contacto span{      
    color: #fff;
    padding-left: .2em;
}
.contenido-footer .lista-contacto a:hover{
    text-decoration: underline;
}
.contenido-footer .social-iconos li{
    font-size: 20px;
    margin-right: 55px;
    float: left;
    line-height: 35px;
}


/***************************************/
/************** GALERIA ****************/
/***************************************/

.gallery{
    padding: 0;
    margin-top: 5%;
}



/***************************************/
/************** IMAGENES ***************/
/***************************************/

.shadow {
    box-shadow: 2px 2px 33px #888;
}
.fotos-club{
    margin-top: 50px;
}
.foto-pie-escuela{
    height: 270px;
    background-image: url(../images/escuela.jpg);
    background-position: center center;
    background-size: cover;
    border-radius: 100px;
    margin-top: 5%;
    box-shadow: 2px 2px 33px #888;
    border: 5px solid #fff;
}
.foto-pie-eventos{
    height: 300px;
    background-image: url(../images/eventos/torneo.jpg);
    background-position: center 27%;
    background-size: cover;
    border-radius: 100px;
    margin-top: 5%;
    box-shadow: 2px 2px 33px #888;
    border: 5px solid #fff;
}
.fotos-galeria{
    margin: 0 auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 5px solid #fff;
    border-radius: 100%;
    width: 180px;
    height: 180px;
    margin-top: 50px;
    box-shadow: 2px 2px 33px #888;
}
.fotos-galeria:hover{
    border: 5px solid #005DAB;
}
.logo img{
   position: absolute;
   top: .5em;
   border: none;
}
.img-responsive{
    border-radius: 100px;
    margin-top: 5%;
}
.zoom{
    border-radius: 100%;
    /* Aumentamos la anchura y altura durante 2 segundos */
    transition: width 1s, height 1s, transform 1s;
    -moz-transition: width 1s, height 1s, -moz-transform 1s;
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
    -o-transition: width 1s, height 1s,-o-transform 1s;
}
.zoom-img{
    margin-top: 50%;
    padding: 4% 4%;
    border: none;
}
.zoom:hover{
    /* tranformamos el elemento al pasar el mouse por encima scale(2). */
    transform : scale(1.5);
    -moz-transform : scale(1.5);      /* Firefox */
    -webkit-transform : scale(1.5);   /* Chrome - Safari */
    -o-transform : scale(1.5);        /* Opera */
}
img{
    padding: .4em .4em;
}
.img-club{
    margin-top: 5%;
}
.carga-imagen{
    width: 150px;
    min-height: 75px;
    height: 120px;
}


/***************************************/
/*********** DOCUMENTACION *************/
/***************************************/

.ngdoc, .ngdoc:visited, .ngdoc:focus{
    color: #fff;
}
.ngdoc:hover, .caja:hover .ngdoc{
    color: #005DAB;
}
.caja{
    background-image: linear-gradient(to bottom, #005DAB, #003F70);
    width: 10em;
    height: 5.5em;
    color: #fff;
    text-align: center;  
    font-size: 12pt;
    font-weight: bold;
    padding-top: 1.8em;
    border-radius: 100%;
    border: 3px solid #fff;
}

.sub-caja{
    margin: 6.5em auto;
}
.caja:hover{
    border: 3px solid #005DAB;
    background-image: linear-gradient(to bottom, #fff, #f3f3f3);
    color: #005DAB;
    box-shadow: 0px 2px 33px #003F73;
}
.tec div .caja{
    width: 8em;
    height: 4em;
    margin-left: 2em;
    padding-top: 1.1em;
    font-size: 10pt;
}


/***************************************/
/************** TOOL-TIP ***************/
/***************************************/

[data-tooltip],
.tooltip {
    position: relative;
    cursor: help;
}
/* Estilo base del tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -moz-transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    transition:
    opacity 0.2s ease-in-out,
    visibility 0.2s ease-in-out,
    transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
}
/* Muestra el bocadillo */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}
/* formato direccion en que aparece el bocadillo */
.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
}
/* Contenido del tooltip */
.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 10px;
    width: 220px;
    border-radius: 100px;
    background-color: #005DAB;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
}
/* Direccion tooltip */
/* Top (pro defecto arriba) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
    bottom: 100%;
    left: 50%;
}
[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #005DAB;
}
/* Si el tooltip es horizontal */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
    margin-left: -110px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
}
.tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
}
.tooltip-bottom:before {
    margin-top: -15px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #005DAB;
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after {
    bottom: 50%;
    left: 100%;
}
.tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);
}
/*  Mueve la direccion de la flecha */
.tooltip-left:before,
.tooltip-right:before {
    top: 3px;
}
/* Centrado Vertical del tooltip desde izq a derecha */
.tooltip-left:after,
.tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
}


/***************************************/
/************** SCROLLBAR **************/
/***************************************/

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #cedfff;
  border: 0px none #ffffff;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ACAFF;
}
::-webkit-scrollbar-thumb:active {
  background: #005DAB;
}
::-webkit-scrollbar-track {
  background: #e6f0ff;
  border: 1px none #ff0080;
  border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
  background: #e6f0ff;
}
::-webkit-scrollbar-track:active {
  background: #cedfff;
}
::-webkit-scrollbar-corner {
  background: transparent;
}