@font-face {font-family: 'Futura-black'; src: url('../fonts/futura-black-bold.woff') format('woff'); font-weight: 900; font-style: bold; font-display: swap;}
html{scroll-behavior: smooth;}
body{font-family:'Barlow', sans-serif; font-weight: 400; font-size: 20px;cursor:}
h1,h2{font-family: 'Futura-black';color: white;}
h3,h4,h5{font-family:'Barlow', sans-serif;}
h1{font-size: 100px; opacity:0.8;line-height: 70px;}
h2{font-size: 100px;opacity:0.7;line-height: 50px;}
h1:hover{opacity: 1;cursor: pointer;}
h2:hover{opacity: 1;}
h3{font-weight: 700; color: black;font-size:25px;padding-bottom: 15px;}
h4{color: white; font-size:35px; font-weight: 200; letter-spacing: 10px;}
a{text-decoration: none!important}
button{outline: none!important;}
.home{width: 100%; height: 100vh;position: relative;background-image: url(../img/fondo-home.png);background-size: cover;background-attachment:fixed;background-position: center;background-repeat: no-repeat;}
.container.titulo {position: absolute;left: 50%;top: 77%;transform: translate(-50%, -50%);text-align: center;max-width: 1200px; margin: 0 auto;}
a.flecha-home{position: absolute;left: 50%;transform: translateX(-50%);bottom: 40px;opacity:0.7; cursor: pointer!important;}
a.flecha-home:hover{opacity: 1;}
.contenido-texto{padding: 120px 0px 80px 0px;max-width: 750px;}
.contenido-texto p {margin: 2rem auto;}
.video-content {max-width: 750px;margin: 80px auto;}
.creditos{position:relative; width: 100%; height:auto; background-image: url(../img/fondo-colores-3.png); background-size:100%; padding: 50px 0; text-align: center;background-attachment:fixed;background-position: center;background-repeat: no-repeat;}
.row{max-width: 800px; margin:2em auto;display: grid; color: white; font-family:'Barlow', sans-serif; font-weight: 400 }
.creditos ul{list-style: none;padding-left: 0px;}
.roles{font-family:'Barlow', sans-serif; font-weight: 400; color: white;font-size:20px; background-color: #eb567a; padding: 5px 10px;border-radius: 10px;}
.creditos p{font-family:'Barlow', sans-serif; font-weight: 400; color: black;font-size:20px;}
footer{background-color:#243673; padding:25px 0px; text-align: center; height: auto;}
.footer{display: flex;}
.carolina{background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;background-image: url(../img/carolina.png);background-size: cover;background-color: #eb567a;}
.ana{background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;background-image: url(../img/ana.png);background-size:cover;background-color: #bfae30; }
.martha{background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;background-image: url(../img/martha.png);background-size: cover;background-color: #20ce83;}
.nini{background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;background-image: url(../img/nini.png);background-size: cover; background-color: #243673;}
.zonia{background-attachment:fixed;background-position: center;background-repeat: no-repeat;width: 100%; height: 100vh;position: relative;background-image: url(../img/zonia.png);background-size: cover; background-color: #b98ddb;}
.container.perfiles {position: absolute;left: 50%;bottom:5%;transform: translate(-50%, -50%);text-align: center;}
nav a{font-family:'Barlow', sans-serif; font-weight: 600; color: white; font-size: 20px;}
nav a:hover{color: antiquewhite;}
.overlay-navigation{z-index: 400;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: hsla(0, 0%, 100%, 0.2);display: none;opacity: 0;}
.menu{position: fixed;z-index:500;top: 3.2rem; left: 5rem;cursor: pointer!important;}
.menu a{font-family:'Barlow', sans-serif; font-weight: 600; color: black; font-size: 20px; -webkit-border-radius: 10px 10px; padding: 10px; }
.open-overlay {position: fixed;right: 5rem;top: 3.2rem;z-index: 100;width: 45px;display: block;cursor: pointer; -webkit-border-radius: 10px 10px; padding: 2px 5px 10px; cursor: pointer!important;}
.open-overlay span {display: block;height: 2px;background-color: black;cursor: pointer;margin-top: 8px;}
nav,nav ul {width: 100%;height: 100%;margin: 0;padding: 0;}
nav ul {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;list-style: none;}
nav ul li {-webkit-flex-basis: 20%;-ms-flex-preferred-size: 20%;flex-basis: 20%;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;
justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center; height: 100%;
overflow: hidden;opacity: 0;display: none;}
nav li a {position: relative;top: 46%;color: #fff;text-transform: uppercase;letter-spacing: 1px;text-decoration: none;display: block;text-align: center;font-size: 1.3rem;opacity: 0;font-family:'Barlow', sans-serif; font-weight: 600; color: white;}
.apellido{font-family:'Barlow', sans-serif; font-weight: 300; color: white;font-size: 1.2rem;}
nav li a:before {content: '';width: 70px;height: 2px;background-color: #fff;position: absolute;top: 50%;left: 0;z-index: 100;-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);opacity: 0;-webkit-transition: all .2s linear;transition: all .2s linear;}
nav li a:after {content: attr(data-content);font-size: 0.9rem;-webkit-transition: all .2s linear;transition: all .2s linear;opacity: 0;position: absolute;z-index: 100;color: #fff;display: block;margin-right: auto;margin-left: auto;left: 0;right: 0;bottom: -50px;text-transform: none;font-family:'Barlow', sans-serif; font-weight: 300;font-style: italic;letter-spacing: 0;padding: 0px 20px;display: block;}
nav li a:hover:before {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);opacity: 1;}
nav li a:hover:after {-webkit-transform: translateY(15px);-ms-transform: translateY(15px);transform: translateY(15px);opacity: 1;}
nav li:nth-of-type(1) {background-color: #243673}
nav li:nth-of-type(2) {background-color: #eb567a}
nav li:nth-of-type(3) {background-color: #bfae30}
nav li:nth-of-type(4) {background-color: #20ce83}
nav li:nth-of-type(5) {background-color: #b98ddb}
.animate-top-bar {-webkit-animation: animate-top-bar .6s linear 1 both;animation: animate-top-bar .6s linear 1 both}
.animate-bottom-bar {-webkit-animation: animate-bottom-bar .6s linear 1 both;animation: animate-bottom-bar .6s linear 1 both}
.animate-middle-bar {-webkit-animation: animate-middle-bar .6s linear 1 both;animation: animate-middle-bar .6s linear 1 both}
.animate-out-top-bar {-webkit-animation: animate-out-top-bar .6s linear 1 both;animation: animate-out-top-bar .6s linear 1 both}
.animate-out-bottom-bar {-webkit-animation: animate-out-bottom-bar .6s linear 1 both;animation: animate-out-bottom-bar .6s linear 1 both}
.animate-out-middle-bar {-webkit-animation: animate-out-middle-bar .6s linear 1 both;animation: animate-out-middle-bar .6s linear 1 both}
.autor{padding: 0px 0px 20px 0px;}
.autor p{font-family:'Barlow', sans-serif; font-weight: 600; font-size: 18px;text-align: center;font-style: italic;}
.fondo-video{background-image: url(../img/fondo-colores.png); background-size: cover; height: 400px;padding: 1px 0px;margin: 50px 0px;}
.fondo-galeria{background-image: url(../img/fondo-colores-2.png); background-size: cover; height: 600px;padding: 1px 0px;margin: 50px 0px;}
#container-main{max-width: 750px;margin: 0px auto 130px auto;min-width:320px;}
.accordion {width: 100%;margin: 0 0 20px;clear:both;}
.accordion-header {position: relative;display: block;padding: 0px 20px 20px 20px;background: #eb567a;color: #fff;text-decoration: none;height: 70px;opacity:1; border: none;line-height: 35px;}
.accordion-header.open {background: #243673;}
.accordion-header:hover {background: #243673}
.accordion-item {margin-bottom: 15px;border: none;}
.accordion-item h2 button{font-family:'Barlow', sans-serif;font-weight:600;color: white;opacity: 1; text-decoration: none;}
button.btn.btn-link.btn-block.text-left{position:absolute;top:10px;color:white;text-decoration: none; outline: none!important;}
button.accordion-button, button.accordion-button.collapsed{font-size: 28px;line-height: 32px}
.accordion-body{padding: 35px;}
.accordion-body p{padding: 0.5rem 0;}
.accordion a{color: #eb567a;}
.accordion a:hover{color: #bfae30;cursor: pointer;}
.podcast{margin-bottom: 70px;margin-top: 70px;}
.foto p,.podcast p{font-family:'Barlow', sans-serif; font-weight: 400; color: black;font-size:15px;text-align: right;margin-top: 1rem!important}
.btn-secondary {padding: 0px 10px 3px 10px;color: #fff;background-color: #bfae30;border-color: #bfae30;font-size:20px}
.btn-secondary:hover{background-color: #bfae30;border-color: #bfae30 ;}
.cartas{display: flex;}
.flip-card {background-color: transparent;width: 300px;height: 400px;perspective: 1000px;}
.flip-card-inner {position: relative;width: 100%;height: 407px;text-align: center;transition: transform 0.6s;transform-style: preserve-3d;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}
.flip-card:hover .flip-card-inner {transform: rotateY(180deg);}
.menu-cartas{margin:150px auto 100px auto}
.flip-card-front, .flip-card-back, .flip-card-front2, .flip-card-front3, .flip-card-front4, .flip-card-front5 {position: absolute;width: 100%;height: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.flip-card-back {padding: 30px;background-color: #e6ccc6;color: black;transform: rotateY(180deg);}
.flip-card-back p{font-family:'Barlow', sans-serif; font-weight: 400; font-size: 15px;}
.flip-card-back h1{font-family:'Barlow', sans-serif; font-weight: 900; font-size: 45px;padding: 20px 0px; line-height: 35px;}
.flip-card-front {background-image: url(../img/tarot-martha.png);background-size:100% ;}
.flip-card-front2 {background-image: url(../img/tarot-nini.png);background-size:100% ;}
.flip-card-front3 {background-image: url(../img/tarot-ana.png);background-size:100% ;}
.flip-card-front4 {background-image: url(../img/tarot-zonia.png);background-size:100% ;}
.flip-card-front5 {background-image: url(../img/tarot-carolina.png);background-size:100% ;}
.foto { margin: 70px 0px;}
.foto p{padding-right: 15px; border-right:10px solid #bfae30; padding-left: 50px;}
.carrusel{max-width: 800px; margin:50px auto}
.carousel-indicators{top:0}
.carousel-caption p{font-size: 16px;margin-top: 0; font-family:'Barlow', sans-serif ;margin-bottom: 1rem;line-height: 20px;background-color: #eb567a;padding:7px;}
.caso-especial{margin-top:300px!important}

@media screen and (max-width: 800px){
.home{width: 100%; height: 100vh;position: relative;background-image: url(../img/fondo-cel.png);background-size: cover;background-attachment:fixed;background-position: center;background-repeat: no-repeat;}
.creditos, .home, .carolina, .ana, .martha, .zonia, .nini{background-attachment: scroll;background-position: center;background-repeat: no-repeat;}
.menu{left: 1rem;top:2rem}
.open-overlay{right: 1rem;top:2rem}
h1 {font-size: 60px;opacity: 0.8;line-height: 50px;}
h2{font-size: 50px;}
h4{font-size:20px}
.container.titulo {top: 70%}
nav li a{font-size: 0.8rem;}
.apellido{font-size: 0.7rem;}
.contenido-texto {padding-left: 20px;padding-right: 20px;padding-top: 50px;}
.fondo-video{margin: 0px;}
.creditos{background-image: none;padding-left: 20px;padding-right: 20px;}
.creditos p {font-size:14px}
.roles{font-size: 13px;}
button.accordion-button, button.accordion-button.collapsed{font-size: 20px;line-height: 20px}
#carolina-tarot, #nini-tarot, #ana-tarot, #zonia-tarot, #martha-tarot{margin-bottom: 30px;}
.row{ margin-top:0rem; margin-left: 1.5rem;}
.d-none {display: block!important;}
.carousel-caption {bottom:-1.5rem}
.carousel-caption p {font-size: 12px; line-height: 14px;}
.fondo-galeria{height: auto;}
.caso-especial{margin-top:50px!important}
nav li a:after {display: none;}
}