/*----* Paleta de colores *----*/

:root {
    /*--color-1: #065a84;*/
    --color-1: #0071b9;
    --color-2: #80b9c4;
    --color-3: #8b8787;
    --color-blanco: #ffffff;
    --color-negro: #000000;
    --color-gris: #dcdcdc;
    --font-family-1: 'Red Hat Display', sans-serif;
}

.bgColor1 {
    background-color: var(--color-1) !important;
}

.bgColor2 {
    background-color: var(--color-2) !important;
}

.bgColor3 {
    background-color: var(--color-3) !important;
}

/*----* Estilos Generales *----*/

body {
    background: #ffffff;
    color: #000000;
	word-wrap: break-word;
    font-family: 'Red Hat Display', sans-serif;
}

a {
    color: var(--color-2);
    font-weight: 700;
    outline: none;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

a:hover,
a:active,
a:focus {
    color: var(--color-1);
}

a.href-tema {
    font-weight: 500;
    color: var(--color-negro);
}

a.href-tema:hover,
a.href-tema:active,
a.href-tema:focus {
    color: var(--color-3);
}

a.href-act {
    font-weight: 500;
    color: var(--color-negro);
}

a.href-act:hover,
a.href-act:active,
a.href-act:focus {
    color: var(--color-3);
}

h1.title,
h3.subtitle {
    color: var(--color-2);
    font-weight: 500;
}

li, a {
    word-break:break-word
}

.referencia {
    font-size: 13px;
    /*color: var(--color-1);*/
    color: var(--color-negro);
	text-align: center;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-izq,
.img-der {
    max-width: 35%;
    height: auto;
    background-color: var(--color-gris);
    border: 1px solid var(--color-gris);
    border-radius: 5px;
    padding: 4px;
    margin-bottom: 10px;
}

.img-izq {
    float: left;
    margin-right: 10px;
}

.img-der {
    float: right;
    margin-left: 10px;
}

.img-center {
    margin: auto;
    border-radius: 5px;
    padding: 4px;
    height: auto;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.align-self-center {
    align-self: center;
}

.object-left {
    object-position: left;
}

.object-right {
    object-position: right;
}

/*----* Botones *----*/

.btn-secondary {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.btn-secondary:hover {
    background-color: var(--color-2);
    border-color: var(--color-2);
}

/*----* Videos *----*/

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-box {
    background-color: #f2f2f2;
    padding: 15px 15px 0px 15px;
    border: 1px solid #6c509a;
    margin-bottom: 29px;
    margin-top: 20px;
}

.video-box img {
    margin: auto;
    display: block;
}

.bg-legend {
    background-color: #28384c;
    color: #fff;
    margin-top: 6px;
    padding-top: 10px;
}

.apa-video {
	margin: auto;
    min-height: 100px;
}

/*----* Modales *----*/

.modal-dialog {
    width: 80%;
}

.modal-dialog.modal-md{
    width: 60%;
}

.modal-title {
    color: var(--color-1);
}

.modal-title img {
    position: relative;
    top: -4px;
    padding-right: 5px;
}

.modal-body {
    font-size: 18px;
    /*color: var(--color-3);*/
    color: var(--color-negro);
}

/*----* Titulo *----*/

.contenedor-encabezado {
    margin-bottom: 50px;
}

.contenedor-encabezado h1 {
    color: var(--color-2);
}

.contenedor-encabezado p {
    font-size: 18px;
    /*color: var(--color-3);*/
    color: var(--color-negro);
}

/*----* Recuadros y Citas *----*/

.caja-simple {
    background-color: lightgray;
    padding: 10px;
    color: #000;
}

.note {
    border: 2px dashed #000;
    border-radius: 8px;
    padding: 15px;
    background-color: #d9d9d9;
    margin-bottom: 20px;
}

.recuadro1 {
    width: 80%;
    padding: 15px;
    background-color: var(--color-blanco);
    margin: auto;
    color: var(--color-1);
    font-size: 14px;
    text-align: center;
    margin-bottom: 25px;
    border-radius: 10px;
	border-style: solid;
    border-color: var(--color-2);
}

.recuadro1 p {
    font-size: 18px;
    margin: 0px;
}

.recuadro-cita {
    width: 90%;
    line-height: 40px;
    margin: 15px;
    color: #2f3138;
}

.cita {
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 80px;
    margin-inline-end: 80px;
	line-height: 2.0;
}

.cita-centro {
	text-align: center;
	line-height: 2.0;
}

/*----* Tablas *----*/

table.table-style-1 {
    color: var(--color-1) !important;
}

table.table-style-1 {
    border: 1px solid var(--color-gris-2);
    margin-bottom: 15px;
}

table.table-style-1 p {
    margin: 0;
}

table.table-style-1 tr,
table.table-style-1 td {
    border: 1px solid var(--color-gris-2);
}

table.table-style-1 .titulotabla {
    background-color: var(--color-3);
    color: var(--color-blanco);
}

/*----* Botones *-----*/

.btn-primary {
    background-color: var(--color-2);
    color: var(--color-1);
    border: none;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 40px;
    border-radius: 10px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--color-1) !important;
    color: var(--color-blanco) !important;
}

/*----* Acordeones *----*/

/* IG */

/*#accordionIG .accordion-item {
    background-color: transparent;
    border: 0;
    margin-bottom: 40px;
}

#accordionIG .accordion-item .accordion-button {
    font-size: 24px;
    font-weight: 500;
    box-shadow: 2px 2px 5px 1px rgb(128, 185, 196, 0.5);
    border-radius: 25px;
    justify-content: center;
    padding: 20px 0;
    transition: all 0.15s ease-in-out;
}

#accordionIG .accordion-item .accordion-button.collapsed {
    background-color: var(--color-blanco);
    color: var(--color-1);
}

#accordionIG .accordion-item .accordion-button:not(.collapsed),
#accordionIG .accordion-item .accordion-button:hover,
#accordionIG .accordion-item .accordion-button:active {
    background-color: var(--color-2) !important;
    color: var(--color-blanco) !important;
    font-weight: 500 !important;
}

#accordionIG .accordion-item .accordion-button:focus {
    outline: 0;
    border-color: transparent;
}

#accordionIG .accordion-item .accordion-button::after {
    position: absolute;
    right: 10%;
}

#accordionIG .accordion-item .accordion-button.collapsed::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(128, 185, 196)" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
    transform: rotate(-180deg);
}

#accordionIG .accordion-item .accordion-button:not(.collapsed)::after,
#accordionIG .accordion-item .accordion-button:hover::after,
#accordionIG .accordion-item .accordion-button:active::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
}

#accordionIG .accordion-item .accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
}

#accordionIG .accordion-item .accordion-collapse {
    background-color: transparent;
}

#accordionIG .accordion-item .accordion-collapse .accordion-body {
    font-size: 18px;
    color: var(--color-1);
}*/

/* Temas / Videos */

#accordionContent .accordion-item {
    background-color: transparent;
    border: 0;
    margin-bottom: 70px;
}

#accordionContent .accordion-item .accordion-button {
    width: fit-content;
    max-width: 80%;
    min-width: 400px;
    font-size: 22px;
    font-weight: 700;
    border-radius: 25px 25px 0 0;
    padding: 10px 25px;
    justify-content: center;
    transition: all 0.15s ease-in-out;
    box-shadow: none;
}

#accordionContent .accordion-item .accordion-button span {
    width: fit-content;
}

#accordionContent .accordion-item .accordion-button.collapsed {
    background-color: var(--color-2);
    color: var(--color-blanco);
}

#accordionContent .accordion-item .accordion-button:not(.collapsed),
#accordionContent .accordion-item .accordion-button:hover,
#accordionContent .accordion-item .accordion-button:active {
    background-color: var(--color-1) !important;
    color: var(--color-blanco) !important;
}

#accordionContent .accordion-item .accordion-button:focus {
    outline: 0;
    border-color: transparent;
    box-shadow: none;
}

#accordionContent .accordion-item .accordion-button.collapsed .hr {
    height: 2px;
    width: 350%;
    background-color: var(--color-2);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.15s ease-in-out;
}

#accordionContent .accordion-item .accordion-button.collapsed:hover .hr {
    background-color: var(--color-1);
}

#accordionContent .accordion-item .accordion-button .bi {
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 2px;
    margin-left: 10%;
    transition: transform 0.2s ease-in-out;
}

#accordionContent .accordion-item .accordion-button::after {
    content: inherit;
}

#accordionContent .accordion-item .accordion-button.collapsed .bi-caret-up-fill {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
    transform: rotate(-180deg);
}

#accordionContent .accordion-item .accordion-button:not(.collapsed) .bi-caret-up-fill,
#accordionContent .accordion-item .accordion-button:hover .bi-caret-up-fill,
#accordionContent .accordion-item .accordion-button:active .bi-caret-up-fill {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
}

#accordionContent .accordion-item .accordion-button:not(.collapsed) .bi-caret-up-fill {
    transform: rotate(0deg);
}

#accordionContent .accordion-item .accordion-collapse {
    background-color: transparent;
    box-shadow: 5px 5px 15px 1px rgb(128, 185, 196, 0.5);
    border-radius: 0 25px 25px 25px;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body {
    font-size: 18px;
    /*color: var(--color-3);*/
    color: var(--color-negro);
    overflow: hidden;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body .col-video {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:first-child {
    padding-right: 15px !important;
    padding-left: 50px !important;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:last-child {
    padding-left: 15px !important;
    padding-right: 50px !important;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body .container-video {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body h4 {
    color: var(--color-2);
    text-align: center;
    /*margin-bottom: 30px;*/
    margin-bottom: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#accordionContent .accordion-item .accordion-collapse .accordion-body .embed-responsive {
    min-height: 300px;
    box-shadow: 5px 5px 15px 1px rgb(128, 185, 196, 0.5);
    border: 7px solid var(--color-blanco);
}

/*----* Header *----*/

.contenedor-header {
    height: 100px;
}

.contenedor-header .row {
    height: 100%;
}

#logos .contenedor-logo {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
}

#logos .contenedor-logo .logo#logo-tecmilenio {
    width: 200px;
    margin: 0 50px;
}

#logos .contenedor-logo .logo#logo-alamo {
    width: 250px;
}

/*----* Banners *----*/

.contenedor-banner {
    height: 450px;
    position: relative;
}

.banner-detail,
.banner-bg {
    width: 100%;
    height: 100%;
}

.banner-detail {
    position: absolute;
    top: 0;
    z-index: 1;
}

.banner-detail .titulo {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-detail .titulo h1 {
    color: var(--color-blanco);
    font-size: 58px;
    font-weight: 700;
}

.banner-detail .titulo h2 {
    color: var(--color-blanco);
    font-size: 42px;
    font-weight: 500;
}

.banner-detail .titulo h4 {
    color: var(--color-blanco);
    font-weight: 700;
    margin: 0;
}

.banner-bg {
    background-size: cover !important;
    overflow: hidden;
    position: relative;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.banner-bg:before {
    content: "";
    background: rgba(6, 12, 34, 0.3);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

/* Banner Index */

#banner-index {
    height: 450px;
}

#banner-index .banner-bg {
    background: url("../img/contenido/intro-bg.jpg") center;
}

/* Banner Videos */

#banner-videos {
    height: 350px;
}

#banner-videos .banner-detail {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 8%;
}

#banner-videos .banner-detail .titulo {
    width: auto;
    height: fit-content;
    display: block;
}

#banner-videos .banner-detail .titulo h2 {
    margin-bottom: 20px;
}

#banner-videos .banner-bg {
    background: url("../img/contenido/videos-bg.jpg");
    background-position-y: 30%;
}

/* Banners Temas */

#banner-tema .banner-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 80px;
}

#banner-tema .banner-detail .titulo {
    width: auto;
    height: fit-content;
    display: block;
}

#banner-tema .banner-bg#banner-t1  {
    background: url("../img/banners-temas/1.jpg") center;
}
 
#banner-tema .banner-bg#banner-t2  {
    background: url("../img/banners-temas/2.jpg") center;
}

#banner-tema .banner-bg#banner-t3  {
    background: url("../img/banners-temas/3.jpg") top;
}

#banner-tema .banner-bg#banner-t4  {
    background: url("../img/banners-temas/4.jpg") center;
}
 
#banner-tema .banner-bg#banner-t5  {
    background: url("../img/banners-temas/5.jpg") center;
}

#banner-tema .banner-bg#banner-t6  {
    background: url("../img/banners-temas/6.jpg") center;
}

#banner-tema .banner-bg#banner-t7  {
    background: url("../img/banners-temas/7.jpg") center;
}
 
#banner-tema .banner-bg#banner-t8  {
    background: url("../img/banners-temas/8.jpg") center;
}

#banner-tema .banner-bg#banner-t9  {
    background: url("../img/banners-temas/9.jpg") center;
}

/* Banner Galeria Videos */

#banner-gallery .banner-detail {
    display: flex;
    justify-content: center;
    align-items: center;
}

#banner-gallery .banner-detail .titulo {
    width: auto;
    height: fit-content;
    display: block;
}

#banner-gallery .banner-bg {
    background: url("../img/contenido/videos-bg.jpg") center;
}

/*----* Info General *----*/

.contenedor-info-g {
    margin-top: 50px;
    margin-bottom: 50px;
}

.col-op-info-g {
    
}

.col-op-info-g .btn-info-g {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    overflow-anchor: none;
    font-size: 24px;
    font-weight: 500;
    box-shadow: 2px 2px 5px 1px rgb(128, 185, 196, 0.5);
    border-radius: 25px;
    justify-content: center;
    padding: 15px 0;
    margin-bottom: 40px;
    transition: all 0.15s ease-in-out;
    background-color: var(--color-blanco) !important;
    color: var(--color-1) !important;
    transform: rotate(0deg);
}

.col-op-info-g .btn-info-g:hover,
.col-op-info-g .btn-info-g:active {
    background-color: var(--color-2) !important;
    color: var(--color-blanco) !important;
    font-weight: 500 !important;
}

.col-op-info-g .btn-info-g .bi {
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 10%;
    transition: transform 0.2s ease-in-out;
}

.col-op-info-g .btn-info-g .bi-caret-up-fill {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(128, 185, 196)" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
    transform: rotate(-270deg);
}

.col-op-info-g .btn-info-g:hover .bi-caret-up-fill,
.col-op-info-g .btn-info-g:active .bi-caret-up-fill {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-caret-up-fill" viewBox="0 0 16 16"><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>');
}

/*----* Contenido Programa *----*/

.contenedor-programa {
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Flip Cards */

.flip-card {
    background-color: transparent;
    width: 100%;
    height: 300px;
    perspective: 1000px;
    padding: 0 25px;
    margin-bottom: 50px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 25px;
    box-shadow: 2px 2px 5px 1px rgb(128, 185, 196, 0.8);
}

.flip-card-front {
    background-color: var(--color-3);
    overflow: hidden;
}

.flip-card-front .numeracion {
    position: absolute;
    left: 25px;
    top: 0;
    width: 75px;
    height: 70px;
    background-color: var(--color-blanco);
    color: var(--color-1);
    border-radius: 0 0 15px 15px;
    font-size: 42px;
    font-weight: 700;
    z-index: 1;
}

.flip-card-front .image-card {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: 0;
}

.flip-card-back {
    background-color: var(--color-2);
    color: var(--color-blanco);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    word-wrap: break-word;
}

.flip-card-back a {
    font-size: 22px;
    color: var(--color-blanco);
    text-decoration: none;
}

.flip-card-back a:active,
.flip-card-back a:focus,
.flip-card-back a:hover {
    color: var(--color-1);
}

/* Flip Cards - Quiz */

#card-quiz .flip-card-front {
    background-color: var(--color-1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#card-quiz .flip-card-front .text-card {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-blanco);
}

#card-quiz .flip-card-back .card-options {
    display: grid;
}

#card-quiz .flip-card-back .card-options a {
    font-weight: 700;
}

#card-quiz .flip-card-back .card-options .hr {
    height: 1px;
    width: 100%;
    background-color: var(--color-blanco);
    margin-top: 10%;
    margin-bottom: 10%;
}

/*----* Contenido Temas / Galeria Videos *----*/

.contenido {
    padding: 0px 85px 100px 70px;
    overflow: hidden;
}

.contenido .migaja p {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-1);
    margin: 0;
}

.contenido .seccion {
    width: 100%;
    border-top: 1px solid var(--color-2);
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
}

.contenido .encabezado {
    display: flex;
    justify-content: left;
}

.contenido .encabezado h4 {
    background-color: var(--color-2);
    color: var(--color-blanco);
    margin: 0;
    padding: 10px 30px;
}

.contenido .detalle {
    overflow: hidden;
    padding-top: 30px;
}

.contenido .detalle p {
    font-size: 18px;
    line-height: 22px;
}

.contenido #copyright {
    border-top: none;
    display: none;
}

/*----* Footer *----*/

.footer-container {
    padding: 20px 80px;
}

.footer-container .copyright {
    color: var(--color-blanco);
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

.footer-container .social {
    height: 50px;
    display: flex;
    justify-content: end;
}

.footer-container .social a,
.footer-container .icon-autor a {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
}

.footer-container .social a.facebook {
    background-image: url("../img/footer/Facebook-normal.svg");
}

.footer-container .social a.facebook:hover {
    background-image: url("../img/footer/Facebook-hover.svg");
}

.footer-container .social a.twitter {
    background-image: url("../img/footer/Twitter-normal.svg");
}

.footer-container .social a.twitter:hover {
    background-image: url("../img/footer/Twitter-hover.svg");
}

.footer-container .social a.instagram {
    background-image: url("../img/footer/Instagram-normal.svg");
}

.footer-container .social a.instagram:hover {
    background-image: url("../img/footer/Instagram-hover.svg");
}

.footer-container .social a.linkedin {
    background-image: url("../img/footer/Linkedin-normal.svg");
}

.footer-container .social a.linkedin:hover {
    background-image: url("../img/footer/Linkedin-hover.svg");
}

.footer-container .icon-autor {
    height: 47px;
    display: flex;
    justify-content: end;
    position: relative;
}

.footer-container .icon-autor a {
    position: relative;
    top: -2px;
}

.footer-container .icon-autor a.autor {
    background-image: url("../img/iconos/icono-autores-normal.svg");
}

.footer-container .icon-autor a.autor:hover {
    background-image: url("../img/iconos/icono-autores-hover.svg");
}

/*----* Autor *----*/

#OpenA {
    width: 300px;
    position: absolute;
    background-color: var(--color-2);
    color: var(--color-negro);
    padding: 10px;
    font-size: 14px;
    bottom: 50px;
    right: 0px;
    border: 1px solid var(--color-1);
    text-align: center;
}

#OpenA p {
    margin: 0px;
}

/*----* Boton Flotantes *----*/

.botones-nav {
    height: 120px;
}

.botones-container .opciones .contenedor-icono {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 5px 1px rgb(128, 185, 196, 0.5);
    margin: 0 15px;
    border-radius: 0 0 15px 15px;
}

.botones-container .opciones a {
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

.botones-container .opciones a:focus {
    outline: none;
}

.botones-container .opciones a.back-theme {
    background-image: url('../img/iconos/iconos-atras-normal.png');
}

.botones-container .opciones a.back-theme:hover {
    background-image: url('../img/iconos/iconos-atras-hover.png');
}

.botones-container .opciones a.next-theme {
    background-image: url('../img/iconos/iconos-siguiente-normal.png');
}

.botones-container .opciones a.next-theme:hover {
    background-image: url('../img/iconos/iconos-siguiente-hover.png');
}

.botones-container .opciones a.play-videos {
    background-image: url('../img/iconos/iconos-play-normal.png');
}

.botones-container .opciones a.play-videos:hover {
    background-image: url('../img/iconos/iconos-play-hover.png');
}

.botones-container .opciones a.home {
    background-image: url('../img/iconos/iconos-home-normal.png');
}

.botones-container .opciones a.home:hover {
    background-image: url('../img/iconos/iconos-home-hover.png');
}

.botones-container .opciones a.download-pdf {
    background-image: url("../img/iconos/iconos-pdf-normal.svg");
}

.botones-container .opciones a.download-pdf:hover {
    background-image: url("../img/iconos/iconos-pdf-hover.svg");
}

.botones-container .opciones a.back-to-top {
    background-image: url('../img/iconos/iconos-arriba-normal.png');
}

.botones-container .opciones a.back-to-top:hover {
    background-image: url("../img/iconos/iconos-arriba-hover.png");
}

.botones-container#btn-top {
    position: fixed;
    width: 45px;
    height: 45px;
    bottom: 130px;
    right: 10px;
    display: none;
}

.botones-container#btn-top .opciones a {
    width: 45px;
    height: 45px;
}

.botones-container#btn-contenido {
    width: 100%;
}

.botones-container#btn-contenido .opciones {
    display: flex;
    justify-content: end;
}
.botones-container#btn-contenido .opciones a {
    width: 35px;
    height: 35px;
}

/*----* Otros Estilos *----*/

.instruccion {
    color: var(--color3);
    text-align: center;
    font-weight: 700;
    padding-bottom: 1px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 15px;
}

.valor-agregado {
    width: 100%;
    height: 80px;
    position: relative;
}

.funcionalidades {
    width: fit-content;
    float: right;
    margin-top: 20px;
    margin-right: 0px;
    position: absolute;
    right: 21px;
}

/*----* Iframe Video *----*/

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    min-height: 400px;
    padding: 0;
    overflow: hidden;
}

.embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*----* Genera PDF *----*/

.screen #banner,
.screen #competencia,
.screen #introduccion,
.screen #modulos,
.screen #intro,
.screen .modu_title,
.screen .back-to-top,
.screen .recursos,
.screen #footer {
	display: none !important;
}

.screen .tema-seccion #copyright {
	display: block !important;
}

/*----* Responsive Media Queries *----*/

/* 'xxl' applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* 'xl' applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    
    /*----* Info General *----*/
    
    .contenedor-encabezado {
        margin-bottom: 30px;
    }

    .contenedor-info-g {
        margin-top: 30px;
        margin-bottom: 30px;
    }    

    /*----* Contenido Programa *----*/

    .contenedor-programa {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0;
    }
    
    /* Flip Cards */
    
    .flip-card {
        padding: 0 15px;
    }
    
    /*---* Footer *---*/
    
    .footer-container {
        padding: 15px 80px;
    }
    
    /*----* Iframe Video *----*/

    .embed-responsive {
        min-height: 350px;
    }
    
}

/* 'lg' applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    
    /*----* Acordeones *----*/

    /* IG */

    /*#accordionIG .accordion-item {
        margin-bottom: 20px;
    }

    #accordionIG .accordion-item .accordion-button {
        font-size: 18px;
    }
    
    #accordionIG .accordion-item .accordion-collapse .accordion-body {
        font-size: 16px;
    }*/
    
    /* Temas / Videos */
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video {
        padding-top: 15px !important;
        padding-bottom: 30px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:first-child {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:last-child {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .embed-responsive {
        min-height: 350px;
    }
    
    /*---* Banner *---*/
    
    /* Banner Videos */
    
    #banner-videos .banner-detail {
        padding-left: 13%;
    }
    
    /*----* Info General *----*/

    .contenedor-info-g {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    
    .col-op-info-g .btn-info-g {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /*----* Contenido Programa *----*/

    .contenedor-programa {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0;
    }

    /* Flip Cards */
    
    .flip-card {
        padding: 0 15px;
    }
    
    /*---* Footer *---*/
    
    .footer-container {
        padding: 15px 80px;
    }
    
    .footer-container .copyright {
        font-size: 18px;
        text-align: left;
    }
    
    .footer-container .social {
        justify-content: center;
    }
    
    .footer-container .icon-autor {
        justify-content: center;
    }
    
    /*----* Iframe Video *----*/

    .embed-responsive {
        min-height: 400px;
    }
    
}

/* 'md' applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    
    /*---* Estilos generales *---*/
    
    h1.title {
        font-size: 28px;
    }
    
    h3.subtitle {
        font-size: 22px;
    }
    
    .img-izq, .img-der {
        max-width: 100%;
        height: auto;
    }
    
    /*----* Botones *-----*/

    .btn-primary {
        font-size: 16px;
    }
    
    /*----* Acordeones *----*/

    /* IG */

    /*#accordionIG .accordion-item {
        margin-bottom: 20px;
    }

    #accordionIG .accordion-item .accordion-button {
        font-size: 18px;
    }*/
    
    /* Temas / Videos */
    
    #accordionContent .accordion-item {
        margin-bottom: 50px;
    }
    
    #accordionContent .accordion-item .accordion-button {
        min-width: 60%;
        font-size: 18px;
        padding: 7px 25px;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body {
        font-size: 16px;
        padding: 10px;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body h4 {
        font-size: 18px;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video {
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:first-child {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .col-video:last-child {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .embed-responsive {
        min-height: 350px;
    }
    
    /*----* Header *----*/
    
    #logos .contenedor-logo .logo#logo-tecmilenio,
    #logos .contenedor-logo .logo#logo-alamo {
        width: 180px;
        margin: 0 10px;
    }
    
    /*---* Banner *---*/
    
    .banner-detail .titulo {
        width: 85%;
        margin: 0 auto;
        text-align: center;
    }
    
    .banner-detail .titulo h1 {
        font-size: 38px;
    }
    
    .banner-detail .titulo h2 {
        font-size: 32px;
    }
    
    /* Banner Videos */
    
    #banner-videos .banner-detail {
        padding-left: 0;
    } 
    
    /*----* Info General *----*/

    .contenedor-encabezado {
        margin-bottom: 20px;
    }
    
    .contenedor-encabezado h1 {
        font-size: 28px;
    }
    
    .contenedor-info-g {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    
    .col-op-info-g .btn-info-g {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /*----* Contenido Programa *----*/

    .contenedor-programa {
        margin-top: 20px;
        margin-bottom: 30px;
        padding: 0;
    }

    /* Flip Cards */
    
    .flip-card {
        padding: 0 10px;
    }
    
    .flip-card-front .numeracion {
        width: 55px;
        height: 50px;
        font-size: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 5px;
    }
    
    .flip-card-back a {
        font-size: 18px;
    }
    
    /*----* Contenido Temas / Galeria Videos *----*/
    
    .contenido {
        padding: 0px 30px 20px;
    }
    
    .contenido .encabezado h4 {
        font-size: 20px;
        padding: 8px 25px;
    }
    
    .contenido .detalle {
        padding-top: 15px;
    }
    
    .contenido .botones-nav {
        position: relative;
    }
    
    .contenido .botones-nav .migaja {
        width: 100%;
        position: absolute;
        top: 70px;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .contenido .botones-nav .botones-container {
        position: absolute;
        top: 0px;
    }
    
    /*----* Recuadros y Citas *----*/

    .recuadro1 {
        width: 90%;
        margin-bottom: 10px;
    }
    
    /*---* Botones *---*/
    
    .botones-container {
        right: 0px;
    }

    .botones-container#btn-top {
        width: 50px;
        height: 50px;
        bottom: 180px;
    }
    
    .botones-container#btn-contenido {
        height: 50px;
        margin-bottom: 15px;
    }
    
    .botones-container#btn-contenido .opciones {
        justify-content: center;
    }

    .botones-container .opciones a {
        width: 50px;
        height: 50px;
    }
    
    .botones-container .opciones .contenedor-icono {
        margin: 0 10px;
    }
    
    /*---* Footer *---*/
    
    .footer-container {
        padding: 15px 40px 0px;
    }
    
    .footer-container .copyright {
        text-align: center;
    }
    
    .footer-container .icon-autor {
        margin-bottom: 20px;
    }
    
    /*----* Autor *----*/

    #OpenA {
        width: 270px;
        right: auto;
    }
    
    /*----* Iframe Video *----*/

    .embed-responsive {
        min-height: 350px;
    }
    
}

/* 'sm' applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    
    /*---* Estilos generales *---*/
    
    .img-izq,
	.img-der {
        width: 100%;
        height: auto;
	}
    
    /*----* Acordeones *----*/
    
    /* Temas / Videos */
    
    #accordionContent .accordion-item {
        margin-bottom: 20px;
    }
    
    #accordionContent .accordion-item .accordion-button {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    
    #accordionContent .accordion-item .accordion-button.collapsed .hr {
        display: none;
    }
    
    #accordionContent .accordion-item .accordion-collapse {
        border-radius: 0 0 25px 25px;
    }
    
    #accordionContent .accordion-item .accordion-button.collapsed {
        border-radius: 25px;
    }
    
    #accordionContent .accordion-item .accordion-collapse .accordion-body .embed-responsive {
        min-height: 250px;
    }
    
    /*----* Header *----*/
    
    #logos .contenedor-logo .logo#logo-tecmilenio,
    #logos .contenedor-logo .logo#logo-alamo {
        width: 120px;
        margin: 0 10px;
    }
    
    /*----* Contenido Programa *----*/

    /* Flip Cards */
    
    .flip-card {
        padding: 0 25px;
    }
    
    /*----* Contenido Temas / Galeria Videos *----*/
    
    .contenido {
        padding: 0px 15px 20px;
    }
    
    .contenido .botones-nav .migaja {
        top: 70px;
    }
    
    .contenido .botones-nav .migaja p {
        font-size: 16px;
    }
    
    .contenido .botones-nav .botones-container {
        position: absolute;
        top: 0px;
    }
    
    /*----* Botones *----*/

    .botones-container#btn-top {
        width: 45px;
        height: 45px;
        bottom: 200px;
    }
    
    .botones-container#btn-contenido {
        margin-bottom: 5px;
    }

    .botones-container .opciones a {
        width: 45px;
        height: 45px;
    }
    
    .botones-container .opciones .contenedor-icono {
        margin: 0 5px;
    }
    
    /*----* Modales *----*/
    
    .modal-dialog {
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    }
    
    /*----* Iframe Video *----*/

    .embed-responsive {
        min-height: 300px;
    }

}

/* 'xs' returns only a ruleset and no media query */
@media (max-width: 320.98) {}