@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
:root {
    --amarillo: rgb(247, 168, 0);
    --azulito: rgb(143, 158, 209);
    --beige: rgba(250, 230, 217, 0.8);
    --azul: rgb(46, 61, 87);
    --cafe: rgb(204, 97, 56);
    --rojo: rgb(162, 34, 68);
}


/*movil*/

@media screen and (max-width:768px) {
    .navegacion-principal {
        width: 100vw;
        background-color: black;
        color: white;
        display: flex;
        justify-content: left;
        padding: 1rem 10%;
        gap: 2.5rem;
    }
    .col-4 {
        box-sizing: border-box;
        margin-top: 3rem;
        display: none;
    }
    .col-4 li {
        font-size: large;
        cursor: pointer;
        padding: 0.5rem 0.5rem;
        list-style: none;
        text-align: right;
        background: rgb(122, 19, 47);
        background: linear-gradient(0deg, rgba(122, 19, 47, 1) 1%, rgba(162, 34, 68, 1) 72%);
    }
    .col-4 li:hover {
        color: #ff8013;
    }
    .audio {
        width: 100%;
        margin: auto;
    }
    .switch-button {
        display: inline-block;
    }
    .switch-button .switch-button__checkbox {
        display: none;
    }
    .switch-button .switch-button__label {
        background-color: var(--color-red);
        --color-red: #fe5e41;
        width: 5rem;
        height: 3rem;
        margin: 2rem auto;
        border-radius: 3rem;
        display: inline-block;
        position: relative;
    }
    .switch-button .switch-button__label:before {
        transition: .2s;
        display: block;
        position: absolute;
        width: 3rem;
        height: 3rem;
        --color-button: #fdffff;
        background-color: var(--color-button);
        content: '';
        border-radius: 50%;
        box-shadow: inset 0px 0px 0px 1px var(--color-black);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label {
        --color-green: #00a878;
        background-color: var(--color-green);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label:before {
        transform: translateX(2rem);
    }
    .estructura {
        background-color: white;
    }
    .lista {
        display: inline;
        width: 110%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .landing {
        max-width: 95%;
    }
    body {
        background-color: aqua;
        background-image: url('../images/background.jpg');
        background-size: cover;
        overflow: hidden;
        overflow-y: scroll;
        background-color: rgb(255, 255, 255);
    }
    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;
    }
    .espacio {
        height: 20px;
        background-color: transparent;
    }
    .audio-video {
        background: rgb(247, 168, 0);
        background: linear-gradient(0deg, rgba(247, 168, 0, 1) 7%, rgba(247, 146, 0, 1) 47%, rgba(247, 168, 0, 1) 98%);
        -webkit-box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        height: 7.5rem;
        text-align: center;
        width: 100vw;
        margin: 0;
    }
    .audio-video span {
        color: white;
        margin: 0 0.5rem;
        font-weight: bold;
        font-size: 1.3rem;
        vertical-align: middle;
    }
    .mostrar {
        display: block;
    }
    .ocultar {
        display: none;
    }
    .mySlides {
        width: 100%;
        height: 180vh;
        text-align: center;
        position: relative;
        display: flex;
        padding: 2rem 0.5rem 4rem 0.5rem;
        float: center;
        --beige: rgba(250, 230, 217, 1);
        background-color: var(--beige);
    }
    .mySlides img {
        /*tablet*/
        width: 70%;
        float: center;
        position: relative;
        Margin: 3% 15%;
    }
    .numbertext a {
        background-color: var(--azul);
        padding: 2rem 2rem;
        color: white;
        border-radius: 50px;
        font-size: large;
        box-sizing: content-box;
        text-decoration: none;
        margin: 3em auto;
    }
    .numbertext/*cel*/
    {
        color: black;
        width: 100%;
        text-align: center;
        padding: 1em 3rem;
        margin: 1rem auto;
        position: relative;
    }
    .numbertext p {
        text-align: justify;
        font-size: large;
        line-height: 1.8rem;
        padding: 2rem auto;
    }
    .mySlides iframe {
        margin: 1.5rem 0 0 0;
    }
    /*myslides de videos*/
    .mySlides--videos {
        /*tablet*/
        width: 100%;
        height: auto;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        display: flex;
        background-position: bottom;
        text-align: center;
    }
    .mySlides--videos h1,
    h2 {
        color: white;
        float: center;
        margin: auto;
    }
    .mySlides--videos a {
        /*tab*/
        height: auto;
        float: center;
        margin: auto;
    }
    .mySlides--videos iframe {
        margin: 2rem auto;
        width: 90%;
        position: relative;
    }
    .numbertextv/*tablet*/
    {
        color: white;
        width: 100%;
        height: auto;
        text-align: justify;
        padding: 0em 2rem 2em;
        margin: 0 auto;
        position: relative;
        font-size: large;
    }
    .botones {
        padding: 1% 5% 15% 5%;
        text-align: center;
        box-sizing: border-box;
        height: auto;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        color: white;
        margin: auto;
        width: 100vw;
        font-size: 1.1rem;
    }
    .botones h3 {
        font-size: 1.3rem;
    }
    .botones img {
        display: inline;
        width: 20%;
        opacity: 1;
        margin: 8px;
    }
    .botones img:hover {
        cursor: pointer;
        opacity: .5;
    }
    .mesadeayuda {
        top: 2em;
        text-align: center;
        width: 80%;
        margin: 0 auto;
        position: relative;
    }
    .encabezado {
        /*movil*/
        font-size: large;
        text-align: justify;
        margin: 0 auto 0.5em auto;
        line-height: 1.5;
        color: white;
        padding: 4rem 3rem;
        background-color: rgba(0, 0, 0, 0.75);
        /*background: linear-gradient(0deg, rgba(6,175,234,1) 35%, rgba(1,196,200,1) 81%);*/
        -webkit-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
    }
    /* Next & previous flechitas tablet unico*/
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 55%;
        width: auto;
        padding: 15px;
        margin-top: -50px;
        color: rgb(255, 255, 255);
        --amarillo: rgb(247, 168, 0);
        background-color: var(--amarillo);
        font-weight: bold;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 3%;
        border-radius: 3px 0 0 3px;
    }
    .prev {
        left: 3%;
    }
    .prev:hover,
    .next:hover {
        --amarillo: rgba(247, 168, 0, 0.5);
        background-color: var(--amarillo);
    }
    .gob {
        /*movil*/
        position: absolute;
        bottom: -23rem;
        left: 40%;
        width: 20%;
    }
    .domicilio_escritorio {
        margin-top: -5rem;
        width: auto;
        text-align: center;
    }
    .footer {
        /*movil*/
        background: #1d1d1d;
        color: #fff;
        font-size: small;
        height: 90vh;
        width: 100%;
        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.2rem;
    }
    .email {
        /*movil*/
        position: absolute;
        font-size: small;
        margin: 5rem auto;
    }
    .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;
    }
    /* 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);
    }
    .cursor {
        cursor: pointer;
    }
    .caption-container {}
    .renglon:after {
        content: "";
        display: table;
        clear: both;
    }
    .column {
        float: top;
        width: 5rem;
        /* 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: none;
        /*display: inline-block;*/
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: auto;
        height: 15em;
        width: 100%;
        padding: 0 8%;
        position: relative;
        background-color: transparent;
    }
    .column/* escritorio*/
    {
        background-color: red;
        margin: 0.5%;
        position: relative;
        display: inline-block;
    }
    .demo/*tamaño de los cuadros*/
    {
        opacity: 0.6;
        width: 5rem;
        height: auto;
        float: center;
        margin: 0;
        position: relative;
    }
    .active,
    .demo:hover {
        opacity: 1;
        width: 100%;
    }
    .banner img {
        width: 100%;
    }
    .banner_movil {
        display: block;
    }
    .banner_desktop {
        display: none;
    }
}


/* tablets  horizontal 1 ***/

@media screen and (min-width:768px) and (max-width:1200px) {
    .navegacion-principal {
        width: 100vw;
        background-color: black;
        color: white;
        display: flex;
        justify-content: left;
        padding: 1rem 10rem;
        gap: 2.5rem;
    }
    .col-4 {
        box-sizing: border-box;
        margin-top: 3rem;
    }
    .col-4 li {
        font-size: large;
        cursor: pointer;
        color: white;
        text-decoration: none;
        padding: 0.5rem 0.5rem;
        list-style: none;
        text-align: right;
        background: rgb(122, 19, 47);
        background: linear-gradient(0deg, rgba(122, 19, 47, 1) 1%, rgba(162, 34, 68, 1) 72%);
    }
    .col-4 li:hover {
        color: #ff8013;
    }
    .col-4 a {
        text-decoration: none;
        color: white;
    }
    .switch-button {
        display: inline-block;
    }
    .switch-button .switch-button__checkbox {
        display: none;
    }
    .switch-button .switch-button__label {
        background-color: var(--color-red);
        --color-red: #fe5e41;
        width: 5rem;
        height: 3rem;
        margin: 2rem auto;
        border-radius: 3rem;
        display: inline-block;
        position: relative;
    }
    .switch-button .switch-button__label:before {
        transition: .2s;
        display: block;
        position: absolute;
        width: 3rem;
        height: 3rem;
        --color-button: #fdffff;
        background-color: var(--color-button);
        content: '';
        border-radius: 50%;
        box-shadow: inset 0px 0px 0px 1px var(--color-black);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label {
        --color-green: #00a878;
        background-color: var(--color-green);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label:before {
        transform: translateX(2rem);
    }
    .estructura {
        background-color: white;
    }
    .lista {
        display: inline;
        width: 110%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .landing {
        max-width: 95%;
    }
    body {
        background-color: aqua;
        background-image: url('../images/background.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;
    }
    .espacio {
        height: 20px;
        background-color: transparent;
    }
    .audio {
        width: 100%;
        margin: auto;
    }
    .mostrar {
        display: block;
    }
    .ocultar {
        display: none;
    }
    .mySlides {
        width: 100%;
        height: 200vh;
        text-align: center;
        display: flex;
        padding: 2rem 3rem;
        float: center;
        --beige: rgba(250, 230, 217, 1);
        background-color: var(--beige);
    }
    .mySlides img {
        /*tablet*/
        width: 50%;
        float: center;
        position: relative;
        Margin: 3% 25%;
    }
    .numbertext a {
        background-color: var(--azul);
        padding: 2rem 2rem;
        color: white;
        border-radius: 50px;
        font-size: large;
        box-sizing: content-box;
        text-decoration: none;
        margin: 3em auto;
    }
    .numbertext a:hover {
        color: white;
        padding: 1.2rem 1.7rem;
    }
    .numbertext/*tablet*/
    {
        color: black;
        width: 100%;
        text-align: justify;
        padding: 1em 3rem;
        margin: 2rem auto;
        position: relative;
    }
    .numbertext p {
        text-align: left;
        font-size: large;
        line-height: 1.8rem;
        padding: 2rem auto;
    }
    .mySlides iframe {
        margin: 1.5rem 0 0 0;
    }
    /*myslides de videos*/
    .mySlides--videos {
        /*tablet*/
        width: 100%;
        height: auto;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        display: flex;
        background-position: bottom;
        text-align: center;
    }
    .mySlides--videos h1,
    h2 {
        color: white;
        float: center;
        margin: auto;
    }
    .mySlides--videos a {
        /*tab*/
        height: auto;
        float: center;
        margin: auto;
    }
    .mySlides--videos iframe {
        margin: 5rem auto;
        width: 90%;
        position: relative;
    }
    .numbertextv/*tablet*/
    {
        color: white;
        width: 100%;
        height: auto;
        text-align: justify;
        padding: 0em 4rem 2em;
        margin: 0 auto;
        position: relative;
        font-size: x-large;
    }
    .botones {
        padding: 1% 5% 15% 5%;
        text-align: center;
        box-sizing: border-box;
        height: auto;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        margin: auto;
        width: 100vw;
    }
    .botones img {
        display: inline;
        width: 20%;
        opacity: 1;
        margin: 8px;
    }
    .botones img:hover {
        cursor: pointer;
        opacity: .5;
    }
    .mesadeayuda {
        top: 2.6em;
        position: relative;
    }
    .encabezado {
        /*tablet*/
        font-size: large;
        text-align: justify;
        margin: 0 auto 1.5em auto;
        line-height: 1.5;
        color: white;
        padding: 6rem 5rem;
        background-color: rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
    }
    /* Next & previous flechitas tablet unico*/
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 70%;
        width: auto;
        padding: 30px;
        margin-top: -50px;
        color: rgb(255, 255, 255);
        --amarillo: rgb(247, 168, 0);
        background-color: var(--amarillo);
        font-weight: bold;
        font-size: 20px;
        user-select: none;
        -webkit-user-select: none;
    }
    /* Position the "next button" to the right */
    .next {
        right: 3%;
        border-radius: 3px 0 0 3px;
    }
    .prev {
        left: 3%;
    }
    .prev:hover,
    .next:hover {
        --amarillo: rgba(247, 168, 0, 0.5);
        background-color: var(--amarillo);
    }
    .gob {
        margin: 4em auto 0 0;
        float: left;
        position: absolute;
    }
    .domicilio_escritorio {
        margin-top: 6.5rem;
        width: auto;
        text-align: right;
    }
    .footer {
        /*tablet*/
        background: #1d1d1d;
        color: #fff;
        font-size: small;
        height: 90vh;
        width: 100%;
        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.2rem;
    }
    .email {
        font-size: large;
        text-align: left;
        font-size: 1.5rem;
    }
    .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;
    }
    /* 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);
    }
    .cursor {
        cursor: pointer;
    }
    .caption-container {}
    .renglon:after {
        content: "";
        display: table;
        clear: both;
    }
    .column {
        float: top;
        width: 5rem;
        /* 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: none;
        /*display: inline-block;*/
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: auto;
        height: 15em;
        width: 100%;
        padding: 0 8%;
        position: relative;
        background-color: transparent;
    }
    .column/* escritorio*/
    {
        background-color: red;
        margin: 0.5%;
        position: relative;
        display: inline-block;
    }
    .demo/*tamaño de los cuadros*/
    {
        opacity: 0.6;
        width: 5rem;
        height: auto;
        float: center;
        margin: 0;
        position: relative;
    }
    .active,
    .demo:hover {
        opacity: 1;
        width: 100%;
    }
    .banner img {
        width: 100%;
    }
    .banner_movil {
        display: block;
    }
    .banner_desktop {
        display: none;
    }
    .email {
        position: absolute;
        font-size: small;
        float: center;
        margin: 5rem auto;
    }
}


/*  Escritorio */

@media screen and (min-width:1200px) {
    .navegacion-principal {
        width: 100vw;
        background-color: black;
        color: white;
        display: flex;
        justify-content: right;
        padding: 1rem 10rem;
        gap: 2.5rem;
    }
    .col-4 {
        box-sizing: border-box;
        margin-top: 3rem;
    }
    .col-4 li {
        border: 1px;
        border: 1px solid transparent;
        cursor: pointer;
        padding: 0.5rem 0.5rem;
        color: white;
        list-style: none;
        text-align: right;
        background: rgb(122, 19, 47);
        background: linear-gradient(0deg, rgba(122, 19, 47, 1) 1%, rgba(162, 34, 68, 1) 72%);
    }
    .col-4 li:hover {
        color: #ff8013;
    }
    .col-4 a {
        text-decoration: none;
        color: white;
    }
    .audio {
        width: 100%;
        margin: auto;
    }
    .email {
        position: absolute;
        font-size: small;
        float: left;
        margin: 4rem auto 0 -4.5rem;
    }
    .switch-button {
        display: inline-block;
    }
    .switch-button .switch-button__checkbox {
        display: none;
    }
    .switch-button .switch-button__label {
        background-color: var(--color-red);
        --color-red: #fe5e41;
        width: 5rem;
        height: 3rem;
        margin: 2rem auto;
        border-radius: 3rem;
        display: inline-block;
        position: relative;
    }
    .switch-button .switch-button__label:before {
        transition: .2s;
        display: block;
        position: absolute;
        width: 3rem;
        height: 3rem;
        --color-button: #fdffff;
        background-color: var(--color-button);
        content: '';
        border-radius: 50%;
        box-shadow: inset 0px 0px 0px 1px var(--color-black);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label {
        --color-green: #00a878;
        background-color: var(--color-green);
    }
    .switch-button .switch-button__checkbox:checked+.switch-button__label:before {
        transform: translateX(2rem);
    }
    .estructura {
        background-color: white;
    }
    .lista {
        display: inline;
        width: 110%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .landing {
        max-width: 95%;
    }
    body {
        background-color: aqua;
        background-image: url('../images/background.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;
    }
    .espacio {
        height: 20px;
        background-color: transparent;
    }
    .audio-video {
        background: rgb(247, 168, 0);
        background: linear-gradient(0deg, rgba(247, 168, 0, 1) 7%, rgba(247, 146, 0, 1) 47%, rgba(247, 168, 0, 1) 98%);
        -webkit-box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        box-shadow: -1px -2px 22px -6px rgba(0, 0, 0, 0.75);
        height: 7.5rem;
        text-align: center;
        width: 100vw;
        margin: 0;
    }
    .audio-video span {
        color: white;
        margin: 0 2rem;
        font-weight: bold;
        font-size: xx-large;
        vertical-align: middle;
    }
    .mostrar {
        display: block;
    }
    .ocultar {
        display: none;
    }
    .mySlides--videos {
        width: 100%;
        min-height: 65vh;
        float: center;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        /* background-image: url('../images/background.jpg');*/
        background-position: bottom;
    }
    .mySlides--videos h1,
    h2 {
        color: white;
        float: center;
        position: relative;
        margin: auto;
        text-align: center;
    }
    .mySlides--videos img {
        /*escritorio*/
        width: 25%;
        float: left;
        Margin: 7.5% 1% 1.5% 15%;
    }
    .mySlides--videos a {
        /*escritorio*/
        width: 25%;
        height: auto;
        float: center;
        margin: 8rem 0 2rem 10%;
        position: absolute;
    }
    .botones img {
        display: inline;
        width: 10%;
        opacity: 1;
    }
    .botones img:hover {
        cursor: pointer;
        opacity: .5;
    }
    .botones {
        padding: 0% 1% 10% 5%;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        line-height: 0;
        --rojo: rgba(240, 84, 74, 0.9);
        background-color: var(--rojo);
        margin: 2rem auto;
    }
    .botones h3 {
        margin: 0 auto 1rem auto;
        color: white;
        text-align: center;
        float: center;
        position: relative;
    }
    .mesadeayuda {
        top: 2.6em;
        position: relative;
    }
    .encabezado {
        /*desktop*/
        font-size: large;
        text-align: justify;
        margin: 0 auto 3em auto;
        line-height: 1.7;
        color: white;
        padding: 6rem 8rem;
        background-color: rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 3px 10px 22px -6px rgba(0, 0, 0, 0.75);
    }
    /* Next & previous flechitas */
    .prev,
    .next {
        cursor: pointer;
        position: absolute;
        top: 75%;
        width: auto;
        padding: 30px;
        margin-top: -50px;
        color: rgb(255, 255, 255);
        --amarillo: rgb(247, 168, 0);
        background-color: var(--amarillo);
        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: 3%;
        border-radius: 3px 0 0 3px;
    }
    .prev {
        left: 3%;
    }
    .prev:hover,
    .next:hover {
        --amarillo: rgba(247, 168, 0, 0.5);
        background-color: var(--amarillo);
    }
    .prevv,
    .nextv {
        cursor: pointer;
        position: absolute;
        top: 85%;
        width: auto;
        padding: 30px;
        margin-top: -50px;
        color: rgb(255, 255, 255);
        --azul: rgb(46, 61, 87);
        background-color: var(--azul);
        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 */
    .nextv {
        right: 3%;
        border-radius: 3px 0 0 3px;
    }
    .prevv {
        left: 3%;
    }
    .prevv:hover,
    .nextv:hover {
        --amarillo: rgba(247, 168, 0, 0.5);
        background-color: var(--amarillo);
    }
    .gob {
        float: center;
        top: 4em;
        position: relative;
    }
    .mySlides {
        width: 100%;
        height: 100vh;
        display: flex;
        padding: 2rem auto;
        float: center;
        --beige: rgba(250, 230, 217, 1);
        background-color: var(--beige);
    }
    .mySlides img {
        /*escritorio*/
        width: 25%;
        float: left;
        Margin: 7.5% 1% 1.5% 15%;
    }
    .mySlides a {
        /*escritorio*/
        --azul: rgb(46, 61, 87);
        background-color: var(--azul);
    }
    .numbertext a {
        background-color: var(--azul);
        padding: 1rem 1.5rem;
        color: white;
        border-radius: 25px;
        font-size: 1.2rem;
        box-sizing: content-box;
        text-decoration: none;
        margin: 2rem auto;
    }
    .numbertext a:hover {
        color: white;
        padding: 1.2rem 1.7rem;
    }
    .numbertext/*desktop*/
    {
        color: black;
        width: 45%;
        text-align: left;
        float: right;
        padding: 1em 3rem;
        margin: 5% 8% 2% 0;
    }
    .numbertext p {
        text-align: left;
        font-size: large;
        line-height: 1.8rem;
        padding: 2rem auto;
    }
    .mySlides iframe {
        margin: 1.5rem 0 0 0;
    }
    .numbertextv/*desktop*/
    {
        color: white;
        width: 40%;
        text-align: justify!important;
        text-align: left;
        float: right;
        line-height: 1.5rem !important;
        padding: 1em 3rem;
        margin: 3.5rem 8% 0% 0;
    }
    .domicilio_escritorio {
        /*desk*/
        margin-top: 5.8em;
    }
    .footer {
        /*escritorio*/
        background: #1d1d1d;
        color: #fff;
        font-size: 1.3rem;
        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;
    }
    .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;
    }
    /* 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);
    }
    .cursor {
        cursor: pointer;
    }
    .caption-container {}
    .renglon:after {
        content: "";
        display: table;
        clear: both;
    }
    .column {
        float: top;
        width: 5rem;
        /* 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: none;
        /*display: inline-block;*/
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: auto;
        height: 15em;
        width: 100%;
        padding: 0 8%;
        position: relative;
        background-color: transparent;
    }
    .column/* escritorio*/
    {
        background-color: red;
        margin: 0.5%;
        position: relative;
        display: inline-block;
    }
    .demo/*tamaño de los cuadros*/
    {
        opacity: 0.6;
        width: 5rem;
        height: auto;
        float: center;
        margin: 0;
        position: relative;
    }
    .active,
    .demo:hover {
        opacity: 1;
        width: 100%;
    }
    .banner img {
        width: 100%;
    }
    .banner_movil {
        display: none;
    }
}


/*PARA EL FOOTER ROOT NO MODIFICAR*/

@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;
    }
}