/*
* Fox by FreeHTML5.co
* Twitter: https://twitter.com/fh5co
* Facebook: https://fb.com/fh5co
* URL: https://freehtml5.co
*/

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Balsamiq+Sans&display=swap');
.estructura {
    background-color: white;
}

#principal {
    width: 100%;
    height: 30em;
    background: no-repeat;
    float: left;
    margin: 0;
    background-image: url("/images/principal.jpg");
}

#revista {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#audio {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#video {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#itinerante {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#podcast {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#musiteca {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

#mapa {
    width: 15%;
    height: 1.3%;
    z-index: 100;
    float: left;
    margin: 1% 1.5%;
}

.lista {
    display: inline;
    width: 110%;
    background-color: rgba(0, 0, 0, 0.5);
}

.landing {
    max-width: 95%;
}

body {
    /*background-image: url('images/banner2.jpg');*/
    background-size: contain;
    overflow: hidden;
    overflow-y: scroll;
    background-color: rgb(255, 255, 255);
    height: auto;
}

body .bg-img {
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 0px;
}

body nav {
    background: rgba(12, 35, 30, 1);
}

body nav .navbar-nav a {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff !important;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}

body nav .navbar-nav a:hover {
    color: #ff8013 !important;
}

body nav .navbar-nav .btn-danger {
    background: #ff8013;
    border-color: #ff8013;
    border-radius: 0;
}

body nav .navbar-nav .btn-danger:hover {
    background: #df6700;
    border-color: #df6700;
}


/*Código para los embebidos por alice Macias */

.videos {
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    width: 95%;
    /*padding:2em 13em;*/
    position: relative;
    float: center;
    margin: 0 auto;
    padding: 1%;
    color: #ffffff;
    font-family: 'Balsamiq Sans', cursive;
    font-weight: 700;
}

.encabezado2 {
    margin: 1em auto;
    font-size: x-large;
}

.espacio {
    height: 2800px;
    background-color: transparent;
}


/* moviles  servicios 1 */
@media only screen and (max-width:680px) {
   
       
    .encabezado{
        font-size:larger;
        text-align: center;
        margin:2em;
        }
     .container2 {
        position: relative;
        background-color: rgba(255, 255, 255, 1);
        width: 100%;
        bottom: 0px;
    }


    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 35%;
        width: auto;
        padding: 8px;
        color: rgb(255, 255, 255);
        background-color: rgba(250, 249, 249, 0.5);
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    footer {
        background: #131313;
        color: #fff;
        font-size: small;
        text-align: center;
        position: relative;
        padding: 0 2%;
        
        height: 600px;
    
        padding: 0em;
        font-family: 'Balsamiq Sans', cursive;
    }
    footer .footer2 .form-box {
        background: rgba(236, 17, 17, 0);
        margin: 4em 0 0 0em;

    }
    .email {
        float: center
    }
    .column {
        float: top;
        padding: 0% 1% 0% 1%;
        width: 12.28%;
        margin: 0;
        /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
    }
    .renglon {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 2em 1.5em;
        float: center;
        height: auto;
        width: 100%;
        position: relative;
        background-color: transparent;
        /* NO QUITAR ESTE PARA NO ARRUINAR EL EFECTO DEL HOVER*/
    }
    .numbertext {
        color: black;
        background-color: rgba(0, 0, 0, 0);
        width: 90%;
        height: auto;
        font-size: 1.2em;
        text-align: justify;
        margin: 1.5em auto 1.5em auto;
        position: relative;
        font-family: 'Balsamiq Sans', cursive;
    }
    .gob {

        text-align: center;
        float: center;
        margin-left:9em ;
        margin-top:28em;
        position: absolute;
    }
    .domicilio_escritorio{
        position: relative;
        top:2em;
        text-align: center;
    }
    .mesadeayuda{
        top:2em;
        position: relative;
    }
}



/* tablets  vertical1 ******************************************/
@media screen and (min-width:680px) and (max-width:768px) {
 
    .encabezado{
        font-size:xx-large;
        text-align: center;
        margin:2em;
        }
    
    .container2 {
        position: relative;
        background-color: rgba(255, 255, 255, 1);
        width: 100%;
        height: 45% ;
        padding-bottom: 5em;
        }
    .numbertext {
        color: black;
        width: 100%;
        height: 3.5em;
        font-size:x-large ;
        text-align: center;
        margin: 2em auto 0em auto;
        width: 80%;
        position: relative;
        font-family: 'Balsamiq Sans', cursive;
    }
    .column {
        float: top;
        padding: 0% 1% 0% 1%;
        width: 12.28%;
        position: relative;
        /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
    }
    .renglon {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 4% 0 0% 10%;
        float: center;
        height: 6em;
        width: auto;
        position: relative;
        background-color: transparent;
        /* NO QUITAR ESTE PARA NO ARRUINAR EL EFECTO DEL HOVER*/
    }

    .prev,
    .next {
        cursor: pointer;
        top: 0;
        width: auto;
        padding: 8px;
        color: rgb(255, 255, 255);
        background-color: rgba(250, 249, 249, 0.9);
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    footer {
        background: #161616;
        color: #fff;
        text-align: center;
        position: relative;
        margin: 0% 0 0 0;
        bottom: 0em;
        height:55em;
        width: 100%;
        font-size: 0.8em;
        font-family: 'Balsamiq Sans', cursive;
    }
 
 
        footer .footer2 .form-box {
            background: rgb(41, 6, 0,0);
            margin: 13em 1em 0 auto;
            text-align: center;
            position: relative;
            
        }

        .gob {
            text-align: center;
            position: relative;
            position: relative;
            float: center;
            top:40em;
            width:150px;
        }
        
        .mesadeayuda{
            top:20em;
            width: 100%;
            position: relative;
            text-align: center;
            float: center;
        }
        .domicilio_escritorio{
            margin-top:12em;
            width: 100%;
            position: absolute;
            text-align: center;
        }
        .email{
            top:6.5em;
            position: relative;
            text-align: center;
            right: 5em;
            columns: black;
        }
        
}

/* tablets  horizontal 1 ******************************************/
@media screen and (min-width:769px) and (max-width:1200px) {
 
    .encabezado{
        font-size:x-large;
        text-align: center;
        margin:2em;
        }
    

    .numbertext {
        height: 5em;
        color: black;
        width: 100%;
        border-color: black;
        border-width: 10px;
        font-size:x-large ;
        text-align: center;
        margin: 1em auto 0em auto;
        width: 90%;
        position: relative;
        font-family: 'Balsamiq Sans', cursive;
    }
    .column {
        float: top;
        padding: 0% 1% 0% 1%;
        width: 12.28%;
        position: relative;
        /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
    }
    
    .renglon {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: 8.5%;
        margin-bottom:8em;
        float: center;
        height: 6em;
        width: auto;
        position: relative;
        background-color:transparent;
        /* NO QUITAR ESTE PARA NO ARRUINAR EL EFECTO DEL HOVER*/
    }

    .prev,
    .next {
        cursor: pointer;
        top:70%;
        position: absolute;
        width: auto;
        padding: 8px;
        color: rgb(255, 255, 255);
        background-color: rgba(250, 249, 249, 0.9);
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    footer {
        background: #161616;
        color: #fff;
        text-align: center;
        position: relative;
        margin: 0% 0 0 0;
        bottom: 0em;
        height:40em;
        width: 100%;
        font-family: 'Balsamiq Sans', cursive;
    }
 
 
        footer .footer2 .form-box {
            background: rgb(41, 6, 0,0);
            margin: 15em 0em 0 auto;
            text-align: center;
            position: relative;
            
        }

        .gob {
            position: relative;
            float: center;
            top:18em;
            width:150px;
        }
        
        .mesadeayuda{
            top:12em;
            width: 100%;
            position: relative;
            text-align:left;
            float: center;
        }
        .domicilio_escritorio{
            margin-top:12em;
            margin-right:3em;
            width: 100%;
            position: absolute;
            text-align: left;
        }
        .email{
            top:6.5em;
            position: relative;
            text-align: center;
            right: 5em;
            columns: black;
        }
        
}


/*escritorios pequeños*/
@media screen and (min-width:1200px) and (max-width:1500px) {
        
    .encabezado{
        font-size:2em;
        text-align: center;
        margin:2em;
        }
        
    .container2 {
            position: relative;
            background-color: rgba(255, 255, 255, 1);
            width: 100%;
            height:auto;
            padding-bottom: 5em;
            }
        .numbertext {
            color: black;
            width: 100%;
            height: 3.5em;
            font-size:2rem;
            text-align: center;
            margin: 2em auto 0em auto;
            width: 80%;
            position: relative;
            font-family: 'Balsamiq Sans', cursive;
        }
        .column {
            float: top;
            padding: 0% 1% 0% 1%;
            width: 12.28%;
            position: relative;
            /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
        }
        .renglon {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin: 4% 0 2% 10%;
            float: center;
            height: 10em;
            width: auto;
            position: relative;
            background-color: transparent;
            /* NO QUITAR ESTE PARA NO ARRUINAR EL EFECTO DEL HOVER*/
        }

        .prev,
        .next {
            cursor: pointer;
            top: 40%;
            position: absolute;
            width: auto;
            padding: 8px;
            color: rgb(255, 255, 255);
            background-color: rgba(250, 249, 249, 0.9);
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-user-select: none;
        }
        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }
        .footer {
            background: #161616;
            width: 100%;
            padding-left: 2em !important;
            color: #fff;
            font-size: 1rem;
            height: 800px;
            bottom: 0;
            position: relative;
            margin: 0;
            left: 0;
        }
        footer .footer2 .form-box {
                background: rgba(0, 0, 0, 0);
                padding: 10px 15px;
                margin: 10em 0;
                text-align: center;
                font-size: 1rem;
            
        }
        .gob {
            text-align: center;
            margin: 12em auto;

            position: relative;
            float: center;
        }
        .email {
            font-size: large;
            text-align: left;
            font-size: 1.5rem;
            margin-left: 0;
            position: relative;
        }
        .mesadeayuda{
            top:11em;
            position: relative;
        }



        .domicilio_escritorio {
            margin-top: 8em;
            text-align: left ;
            margin-left: -1em;

        }
          
 }
     

/*  Escritorio grande servicios 1 * * * * * * * * * * * * * ******/
@media screen and (min-width:1500px){
    .mesadeayuda{
        top:2.6em;
        position: relative;
    }
    .encabezado{
    font-size:3em;
    text-align: center;
    margin:2em;
    }

    .container2 {
        position: relative;
        background-color: rgb(241, 241, 241);
        width: 100%;
        height: auto;
        margin: 5em 0;
        position:relative;
    }
 
    /* Next & previous flechitas */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 30%;
        width: auto;
        padding: 30px;
        margin-top: -50px;
        color: rgb(255, 255, 255);
        background-color: rgba(207, 207, 207, 0.671);
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
 
    .prev:hover,
    .next:hover {
        background-color: rgba(255, 168, 168, 0.3);
    }
    .gob {
        float: center;
 top:4em;
 position: relative;
  
    }


.mySlides {
    display: none;
    margin: auto;
    width: 85%;
    float: center;
}

    .numbertext {
       color: black;
        width: 100%;
        padding: 0 2em;
        height: 5em;
        background:transparent;
        width: 100%;
        font-size: 3em;
        text-align: center;
        margin: 0.5em auto ;
        position: relative;
        font-family: 'Balsamiq Sans', cursive;
    }
    .renglon {
        display: -ms-flexbox;
        display: inline-block;
         -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 auto 0em 7%;
        height:15em;
        width: auto;
        position: relative;
        background-color: transparent;
        /* NO QUITAR ESTE PARA NO ARRUINAR EL EFECTO DEL HOVER*/
    }
    .column/* escritorio*/
    {
        background-color: white;
        padding: 0% 1% 0% 1%;
        width: 12.28%;
        margin: 0.5%;
        position: relative;
        display: inline-block;
        /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
    }
    .domicilio_escritorio {
        margin-top: 5em;
    }

    .footer {
        background: #1d1d1d;
        color: #fff;
        font-size: 1.5rem;
        height: 900px;
        bottom: 0;
        position: relative;
        margin: 0;
        left: 0;
    }
    footer .footer2 .form-box {
        background: rgba(0, 0, 0, 0);
        padding: 10px 15px;
        margin: 7em 0;
        text-align: center;
        font-size: 1.5rem;
    }
    .email {
        font-size: large;
        text-align: left;
        font-size: 1.5rem;
    }

}
/*fin escritorio min 1500 servicios*/




.titulo {
    max-width: 90%;
    font-size: large;
    font-weight: bolder;
    float: center;
    margin: 0.5em auto;
    color: rgb(255, 255, 255);
}

a,
a:hover {
    color: #ff8013;
}

.fh5co-banner-text-box {
    position: relative;
    max-height: 120px;
    display: inline-block;
    margin-top: 250px;
}

.fh5co-banner-text-box .quote-box {
    max-width: 455px;
    padding: 20px 0;
}

.fh5co-banner-text-box .quote-box h2 {
    font-family: 'Balsamiq Sans', cursive;
    font-weight: 700;
    color: #fff;
    font-size: 40px;
}

.fh5co-banner-text-box .quote-box h2 span {
    color: #ff8013;
    font-size: 34px;
}

.fh5co-banner-text-box .quote-box::before {
    content: "";
    position: absolute;
    height: 38px;
    width: 38px;
    left: 0;
    top: 0;
    background: url("../images/right-quote.png");
    background-repeat: no-repeat;
}

.fh5co-banner-text-box .quote-box::after {
    content: "";
    position: absolute;
    height: 38px;
    width: 38px;
    background: url("../images/left-quote.png");
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
}

.fh5co-banner-text-box a {
    color: #fff;
    border-color: #4e2b0d;
    border-radius: 0;
    min-width: 150px;
}

.fh5co-banner-text-box a:hover {
    background: transparent;
    border-color: gray;
    color: #ff8013;
}

.fh5co-network,
.fh5co-about-us {
    background: url("../images/about-bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 50px 0;
    padding-top: 30px;
}

.fh5co-network figure,
.fh5co-about-us figure {
    margin-top: -70px !important;
}

.fh5co-network h2,
.fh5co-about-us h2 {
    color: #ff8013;
    font-family: 'Balsamiq Sans', cursive;
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 0;
}

.fh5co-network h4,
.fh5co-about-us h4,
.fh5co-network h5,
.fh5co-about-us h5,
.fh5co-network p,
.fh5co-about-us p {
    color: #282828;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.fh5co-network hr,
.fh5co-about-us hr {
    border-color: #ff8013;
    border-width: 5px;
    max-width: 100px;
    margin-left: 0;
    border-radius: 5px;
}

.fh5co-network figure,
.fh5co-about-us figure {
    text-align: center;
}

.fh5co-about-us {
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.fh5co-about-us p {
    color: #fff;
    font-family: 'Balsamiq Sans', cursive;
    font-weight: normal;
}

.fh5co-about-us hr {
    border-color: #fff;
    margin-left: 50px;
    margin-top: 5px;
}

.fh5co-about-us a {
    color: #fff !important;
    border-color: #4e2b0d;
    border-radius: 0;
    min-width: 150px;
}

.fh5co-about-us a:hover {
    background: transparent;
    border-color: gray;
    color: #ff8013;
}

.fh5co-content-box {
    background: #464646;
    padding-bottom: 100px;
}

.fh5co-content-box .pr-0 img {
    margin-top: -128px;
}

.fh5co-content-box img {
    width: 100%;
}

.fh5co-content-box .card-img-overlay {
    color: #fff;
    text-align: center;
    top: 35%;
}

.fh5co-content-box .trainers {
    position: relative;
    padding: 50px 0;
    margin: 70px 0;
    background: url("../images/gym2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
}

.fh5co-content-box .trainers .bg-50 {
    background: rgba(0, 0, 0, 0.3);
}

.fh5co-content-box .trainers .card {
    border: none;
    background: transparent;
}

.fh5co-content-box .trainers .card img {
    max-width: 250px;
    margin: 0 auto;
    max-height: 250px;
}

.fh5co-content-box .trainers .card .card-body {
    background: #ccc;
    border-radius: 15px;
    padding: 30px 20px;
    margin-top: 30px;
    padding-bottom: 50px;
}

.fh5co-content-box .trainers .card .card-body::before {
    content: "";
    position: absolute;
    border: 20px solid #ccc;
    border-color: transparent transparent #ccc transparent;
    margin-top: -70px;
    text-align: center;
    margin-left: -15px;
}

.fh5co-content-box .trainers .quote-box2 {
    color: #fff;
    max-width: 250px;
    position: relative;
    text-align: center;
    margin: auto;
    margin-bottom: 50px;
}

.fh5co-content-box .trainers .quote-box2::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 0;
    top: -10px;
    background: url("../images/right-quote-white.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.fh5co-content-box .trainers .quote-box2::after {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    background: url("../images/left-quote-white.png");
    background-repeat: no-repeat;
    right: 0;
    bottom: -10px;
    background-size: 100% 100%;
}

.fh5co-content-box .trainers::before,
.fh5co-content-box .trainers::after {
    content: "";
    position: absolute;
    border: 5px solid #ff8013;
    width: 100%;
    top: -10px;
}

.fh5co-content-box .trainers::before {
    bottom: -10px;
    top: auto;
}

.fh5co-content-box .gallery .card {
    border: none;
    background: transparent;
}

.fh5co-content-box .gallery .card img {
    border-radius: 0;
    max-height: 580px;
}

.fh5co-content-box .gallery .card .card-body {
    background: #ff8013;
}

.fh5co-content-box .gallery .card .card-body h4 {
    color: #fff;
}

.fh5co-content-box .gallery .card .card-body p {
    font-family: 'Balsamiq Sans', cursive;

    font-weight: 700;
}

footer .footer1 p {
    margin-top: 0px;
}

footer .footer2 h4 {
    color: #ffffff;
 font-family: 'Balsamiq Sans', cursive;
    font-weight: 700;
    text-align: center;
    margin: 20px auto;
}

.centrado {
    background-color: transparent;
    width: 40%;
    margin: auto;
    text-align: center;
    float: center;
}

footer .footer2 input[type='text'],
footer .footer2 input[type='email'] {
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #000;
}

footer .footer2 input[type='text']:focus,
footer .footer2 input[type='email']:focus {
    box-shadow: none;
    border-color: #ff8013;
}

footer .footer2 .btn {
    min-width: 150px;
    border-radius: 0;
}

footer .footer2 ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #262626;
}

footer .footer2 ::-moz-placeholder {
    /* Firefox 19+ */
    color: #262626;
}

footer .footer2 :-ms-input-placeholder {
    /* IE 10+ */
    color: #262626;
}

footer .footer2 :-moz-placeholder {
    /* Firefox 18- */
    color: #262626;
}

footer .footer3 {
    padding-top: 50px;
}

footer .footer3 a {
    background: #fff;
    border-radius: 50%;
    height: 40px;
    width: 80px;
    padding: 0;
    padding-top: 5px;
    font-size: small;
}

footer .footer3 a:hover {
    background: #ff8013;
}

footer .footer3 .nav-item li {
    margin-top: 20px;
    text-align: center;
}

footer .table td,
footer .table th {
    border: none;
}

footer::before {
    content: "";
    position: absolute;
    border: 3px solid #ff8013;
    width: 100%;
    left: 0;
}

@media (max-width: 1199px) {
    .fh5co-content-box .pr-0 img {
        margin-top: -107px;
    }
}

@media (max-width: 991px) {
    .fh5co-content-box .pr-0 img {
        margin-top: -78px;
    }
    .fh5co-content-box .card-img-overlay {
        top: 20%;
    }
}

@media (max-width: 767px) {
    body nav .navbar-nav {
        margin-left: 0 !important;
        max-width: 50px;
    }
    .fh5co-network figure,
    .fh5co-about-us figure {
        margin-top: 0 !important;
    }
    .fh5co-content-box .pr-0 img {
        margin: 20px auto;
    }
    .fh5co-content-box .col-md-5 {
        padding: 0 !important;
    }
    .fh5co-content-box .col-md-7 {
        padding: 0 !important;
    }
    .gallery .card {
        margin-bottom: 25px;
    }
    .footer1 {
        min-height: 150px;
    }
    .footer2 .form-box {
        margin-top: 0 !important;
    }
}


/* Reset */

button {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0.5em;
    cursor: pointer;
    outline: 0;
    -webkit-appearance: none;
}


/* Custom */

button {
    display: inline-block;
    position: relative;
    padding: 0.4em 1.3em;
    top: 0;
    font-size: 20px;
    font-family: 'Balsamiq Sans', cursive;
    border-radius: 4px;
    border-bottom: 1px solid rgba(76, 75, 175, 0.5);
    background: rgb(69, 31, 192);
    color: #fff;
    box-shadow: 0px 0px 0px rgba(115, 84, 149, 0.1);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

button:hover {
    top: -10px;
    box-shadow: 0px 10px 10px rgba(194, 129, 194, 0.2);
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -ms-transform: rotateX(20deg);
    transform: rotateX(20deg);
}

button:active {
    top: 0px;
    box-shadow: 0px 0px 0px rgba(254, 237, 255, 0);
    background: rgba(76, 75, 175, 1);
}


/********************************************* slider para servicios ************************************/


/********************************************************************************************************/





/* agregar pointer al cursos en un hover*/

.cursor {
    cursor: pointer;
}


/* Container for image text */

.caption-container {}

.renglon:after {
    content: "";
    display: table;
    clear: both;
}


/* Six columns side by side */

.column {
    float: top;
    padding: 0% 1% 0% 1%;
    width: 12.28%;
    /* resultado de 90% que quiero que mida el width, entre 7 botones, es decir 100-7 del margen de cada imagen entre 7 = 13.28*/
}

.column:hover {
    position: relative;
    width: 12.5%;
    padding: 0% 0% 0% 0%;
    transition-property: width;
    transition-duration: 0.3s;
}


/* Add a transparency effect for thumnbail images */

.demo
/*tamaño de los cuadritos definitivo !important*/

{
    opacity: 0.6;
    width: 100%;
    margin: 0;
    position:relative;
}

.active,
.demo:hover {
    opacity: 1;
}