/* ****************************************************************************************** In Josue Tai we believe in sharing and education. If this CSS is useful for you to learn apply or solve a programming challenge, feel free to use the code. If you need help with your project, contact our partner company makko.io Be creative! Be teachable and respect the work of others ;) ****************************************************************************************** */ /******************************************************* GENERICS *******************************************************/ @font-face {font-family: 'Conv_Montserrat-Bold';src: url('fonts/Montserrat-Bold.eot');src: local('☺'), url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf') format('truetype'), url('fonts/Montserrat-Bold.svg') format('svg');font-weight: normal;font-style: normal;} @font-face {font-family: 'Conv_Montserrat-Light';src: url('fonts/Montserrat-Light.eot');src: local('☺'), url('fonts/Montserrat-Light.woff') format('woff'), url('fonts/Montserrat-Light.ttf') format('truetype'), url('fonts/Montserrat-Light.svg') format('svg');font-weight: normal;font-style: normal;} @font-face {font-family: 'Conv_Montserrat-Regular';src: url('fonts/Montserrat-Regular.eot');src: local('☺'), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg') format('svg');font-weight: normal;font-style: normal;} @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap'); :root { --background: rgba(0, 0, 0, 0.9); --jtRed: rgba(160,37,33,1); --calendar-today-color: linear-gradient(to bottom, #7C0303, #6a0303); --jtGrey: rgba(27,31,33,0.6); --border-color: rgba(160,37,33,1); } /******************************************************* RESET *******************************************************/ *, *::before, *::after{box-sizing: border-box;} body{margin: 0;padding: 0;font-family: "Conv_Montserrat-Regular", Helvetica, sans-serif;background-color: #fefefe;} a{text-decoration: none;} /******************************************************* HEADER *******************************************************/ header{background-color: var(--background);text-align: center;position: fixed;width: 100%;z-index: 888;} header img{height: 55px;padding: 5px 0;} .nav-toggle{display: none;} .nav-toggle-label{position: absolute;top: 0;left: 0;margin-left: 1em;height: 100%;display: flex;align-items: center;} .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{display: block;background: white;height: 2px;width: 2em;border-radius: 2px;position: relative;} .nav-toggle-label span::before, .nav-toggle-label span::after{content: '';position: absolute;} .nav-toggle-label span::before{bottom: 7px;} .nav-toggle-label span::after{top: 7px;} nav{position: absolute;text-align: left;top: 100%;left: 0;background: var(--background);width: 100%;transform: scale(1,0);transform-origin: top;transition: transform 400ms ease-in-out;} nav ul{margin: 0;padding: 0;list-style: none;} nav li{margin-bottom: 1em;margin-left: 1em;position: relative;} nav a{text-decoration: none;color: white;font-size: 1rem;text-transform: capitalize;opacity: 0;transition: opacity 50ms ease-in-out;font-weight: 600;} nav a:hover{color: var(--jtRed);} .nav-toggle:checked ~ nav{transform: scale(1,1);} .nav-toggle:checked ~ nav a{opacity: 1;transition: opacity 250ms ease-in-out 250ms;} nav a.active{color: var(--jtRed);} /* Dropdown menu */ nav ul li ul {display: none;position: absolute;top: 40px;left: 0;background: var(--background);padding: 0;margin: 0;list-style: none;z-index: 1000;transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;opacity: 0;transform: translateY(-10px);width: 200px;} nav ul li.open ul {display: block;opacity: 1;transform: translateY(0);} nav ul li ul li {padding: 0;width: 100%;text-align: left;margin: 0;} nav ul li ul li a {color: white;font-size: 0.9rem;font-weight: 400;text-transform: none;transition: background 200ms ease, color 200ms ease;padding: 0.5em;display: inline-block;width: 100%;} nav ul li ul li a:hover {background: var(--jtRed);color: white;} nav ul ul li a:hover::before { content: none; /* Prevent the line from appearing */ } /******************************************************* HOME *******************************************************/ #main_hero{min-height: 100vh;position: relative;background-attachment: fixed;background-image: url('../imgs/jt-home_img-01.jpg');background-position: center;background-size: cover;color: var(--jtGrey);overflow: hidden;padding-top: 0px;} .clouds {position: absolute;top: 0;left: 0;width: 200%;height: 100%;background: url('../images/cloud1.png') repeat-x;background-size: 50% auto;background-position: -100% -80px;animation: moveClouds 90s linear infinite;z-index: 1;} @keyframes moveClouds { from {background-position: -100% -50px;} to {background-position: 0 -50px;} } #welcome-blurb{position: relative;z-index: 3;margin-top: 40px;display: grid;grid-template-columns: 1fr;background-image: url('../images/jt_home-02.png');background-repeat: no-repeat;background-position: 100px 0px;background-size: cover;} #welcome-blurb-text{grid-column: 1 / span 1;padding-left: 8%;} #welcome-blurb-text h1{font-family: 'Conv_Montserrat-Light', sans-serif;margin: 40px auto 20px auto;font-size: 2.6rem;text-transform: uppercase;background-image: linear-gradient(to bottom, #44000B,rgba(160,37,33,1));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;} #welcome-blurb-text p{display: none;} #welcome_actionable_background{padding-left: 12%;display: flex;flex-direction: column;justify-content: center;gap: 2rem;padding-top: 30px;} #welcome_actionable_background a{color: var(--jtRed);} .home_action_btn{display: grid;grid-template-columns: 70px 1fr;width: 90%;min-height: 140px;border-radius: 6px;} .backhomebtn01{background-image: url('../images/backtest01.png');background-repeat: no-repeat;background-position: 0% 0%;transition: background-image 3s ease;} .backhomebtn02{background-image: url('../images/backtest01.png');background-repeat: no-repeat;background-position: 60% 30%;transition: background-image 3s ease;} .backhomebtn03{background-image: url('../images/backtest01.png');background-repeat: no-repeat;background-position: 33% 33%;transition: background-image 3s ease;} .backhomebtn01:hover, .backhomebtn02:hover, .backhomebtn03:hover{background-image: url('../images/ricepaper.webp');background-repeat: repeat;} .home_action_btn-title{background-image: url('../images/ricepaper.webp');background-repeat: repeat;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 1rem;padding: 6px;border-right: 2px solid #d4d4d4;} .home_action_btn-title img{width: 50px;height: 50px;rotate: 270deg;} .home_action_btn-title h3{font-weight: 900;text-transform: uppercase;font-size: 2rem;rotate: 270deg;margin: 0;padding: 0;} #welcome_actionable_background a p{color: rgb(29, 25, 25);} #welcome_actionable_background a p span{color: var(--jtRed);} .home_action_btn p{text-align: center;font-size: 2rem;font-weight: 600;padding: 0;margin: 0;display: flex;align-items: center;flex-direction: column;justify-content: center;} #welcome-divider{margin-top: 100px;height: 20px;text-align: center;} #welcome_join_academy{width: 90%;margin: 100px auto 0 auto;text-align: center;position: relative;z-index: 3;padding-top: 30px;padding-bottom: 80px;background-image: none;background: transparent;} #welcom_join_academy-title h2{margin: 0 0 16px 0;padding: 0;font-size: 2.6rem;text-transform: uppercase;background-image: linear-gradient(to bottom, #44000B,rgba(160,37,33,1));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;} #welcom_join_academy-title p{color: black;margin: 0 auto 0 0;font-size: 1.4rem;letter-spacing: .2px;line-height: 1.6rem;} #welcom_join_academy-title p small{color: var(--jtGrey);} #welcome_join_academy h3{padding: 0;margin: 0;} #welcome_join_academy h3 a{text-decoration: none;background-color: var(--jtRed);border-radius: 6px;padding: 10px 22px;color: #fff;} #welcome_join_academy-descr{display: grid;grid-template-columns: repeat(1,1fr);gap: 1rem;width: 70%;margin: 10px auto 40px auto;padding: 8px;} #welcome_join_academy-descr div:not(:last-of-type){border-bottom: 1px solid var(--jtGrey); border-right: none;padding-bottom: 15px;} #welcome_join_academy-descr p{color: black;margin: 0 auto 0 0;font-size: 1.4rem;letter-spacing: .2px;line-height: 1.6rem;} #welcome_about{width: 100%;display: grid;padding: 0;grid-template-columns: 1fr;gap: 2rem;align-items: center;background-color: transparent;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;color: #111;position: relative;} .divider-main{position: absolute;top: -15px;left: 0;width: 100%;text-align: center;} #welcome_about-descr h2, #welcome-video h2{font-size: 2.4rem;width: 70%;margin: 0 auto 20px 10%;} #welcome_about-descr h2 span, #welcome-video h2 span{font-size: 1.8rem;} #welcome_about-descr p, #welcome-video p{font-size: 1.4rem;letter-spacing: .2px;line-height: 1.6rem;width: 70%;margin: 16px auto 16px 10%;} #welcome_about-descr-btns{width: 80%;margin: 30px auto 0 10%;display: flex;justify-content: center;gap: 1rem;align-items: center;} #welcome_about-descr-btns a{text-decoration: none;background-color: var(--jtRed);border-radius: 6px;padding: 10px 22px;color: #fff;font-size: 1.2rem;} #welcome-video{width: 100%;background-color: transparent;background-image: url('../imgs/jtai_sc-02.png');background-repeat: no-repeat;background-size: cover;padding: 60px 0 180px 0;} #welcome-video-frame{width: 80%;margin: 40px auto 0px auto;} #welcome_about-descr{display: none;} #welcome-mobile{display: block;} #welcome-banner, #welcome-banner-massage{position: relative;padding: 40px 0 20px 0;background-image: url('../imgs/jt-home_img-02.jpg');background-repeat: no-repeat;background-size: cover;background-position: center bottom;background-attachment: fixed;min-height: 385px;z-index: 2;} #welcome-banner-massage{background-image: url('../imgs/jt-massage-bannerb.png');} #promo-text{width: 70%;margin: 0 auto 0 26%;} #promo-text h3{font-size: 2.9em;color: #fff;text-transform: uppercase;font-family: "Conv_Montserrat-Bold", sans-serif;} #promo-text h3 span{font-family: "Conv_Montserrat-Light", sans-serif;} #promo-text p{font-size: 1.5em;font-family: "Conv_Montserrat-Light", sans-serif;color: white;} #img-promok{float: left;margin-left: 10%;} .promo-btns{display: flex;align-items: center;justify-items: space-between;flex-flow: wrap;gap: 1rem;padding-bottom: 40px;} .btn{text-decoration: none;border-radius: 6px;border: none;text-align: center;} .btn-md{padding: 10px 22px;font-size: 1.2rem;} .btn-dark{background-color: black;color: #fff;} .btn-danger{background-color: var(--jtRed);color: #fff;} .promo-text-btn-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;} #welcome_shop{width: 100%;padding: 0 0 140px 0;background-color: transparent;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;color: #111;position: relative;} #welcome-shop-title{text-align: center;} #welcome-shop-title img{width: 40px;position: relative;margin-top: -19px;z-index: 3;} #welcome-shop-title h2{margin: 40px 0 0 0;padding: 0;color: var(--jtRed);} #welcome-shop-container{display: grid;grid-template-columns: repeat(2,1fr);gap: 1rem;background: transparent;width: 90%;margin: 80px auto;} .shop_item{background-color: white;} .shop_item img{width: 100%;} .shop_item h3{width: 90%;margin: 0 auto;} .shop_item h3 a{color: var(--jtRed);} .shop_item p{width: 90%;margin: 0 auto;font-size: 0.9rem;margin-top: 12px;} .shop_item p.price{display: flex;justify-content: space-between;align-items: center;gap: 1rem;border-top: 1px solid #d4d4d4;padding: 12px 0;} .shop_item p.price a{border: 1px solid var(--jtRed);border-radius: 6px;background-color: var(--jtRed);color: #fefefe;padding: 3px 6px;} .shop_item p.price a:hover{background-color: black;border: 1px solid black;} #welcome-media{width: 100%;background-color: transparent;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;color: #111;position: relative;padding: 0 0 30px 0;} #welcome-media-title{text-align: center;} #welcome-media-title img{width: 40px;position: relative;margin-top: -19px;z-index: 3;} #welcome-media-title h2{color: var(--jtRed);margin: 40px 0 14px 0;font-family: "Conv_Montserrat-Light", sans-serif;text-transform: uppercase;} #welcome-media-title p{width: 80%;margin: 20px auto;} #welcome-blog-entry{display: grid;gap: 2rem;grid-template-columns: 1fr;width: 80%;margin: 0 auto;padding: 40px 0 100px 0;align-items: center;} #welcome-blog-video{background-image: linear-gradient(to right, #870000, #190a05);padding: 10px 10px 8px 10px;position: relative;} #welcome-blog-video img#media-poster{width: 100%;} .wservicio-btn{text-align: center;} #main-quote{background-color: #d3c6a6;padding-top: 40px;position: relative;} #main-quote-seal{position: absolute;top: 0;left: 0;width: 100%;text-align: center;} #main-quote img{position: relative;width: 40px;margin-top: -19px;} .blockquote-wrapper {display: flex;padding: 0 20px;margin-top: 30px;} .blockquote {position: relative;font-family: 'Conv_Montserrat-Regular', sans-serif;max-width: 80%;margin: 0px auto 60px auto;align-self: center;} .blockquote h2 {position: relative;color: #782624;font-size: 1.5rem;line-height: 2.1rem;letter-spacing: .2px; margin: 0;border: 2px solid #d3c6a6;border: solid 2px;border-radius:20px;padding: 25px;} .blockquote h2:after {content:"";position: absolute;border: 2px solid #782624;border-radius: 0 50px 0 0;width: 60px;height: 60px;bottom: -60px;left: 50px;border-bottom: none;border-left: none;z-index: 3;} .blockquote h2:before {content:"";position: absolute;width: 80px;border: 6px solid #d3c6a6;bottom: -3px;left: 50px;z-index: 2;} .blockquote h2 span{color: #000;} @media all and (min-width: 600px) {.blockquote h2 {font-size: 1.5rem;line-height: 1.2;}} .blockquote h4 {position: relative;color: #782624;font-size: 1rem;line-height: 1.2;margin: 0;padding-top: 15px;z-index: 1;margin-left:150px;padding-left:12px;text-align: left;} .blockquote h4:first-letter {margin-left:-12px;} footer{background-image: url('../imgs/jt-home_img-03.jpg');background-repeat: no-repeat;background-size: cover;background-color: #782624;color: #fff;position: relative;z-index: 2;padding: 0;margin: 0;} footer p{font-size: 0.8rem;} footer p span{padding: 0 8px;} footer a{color: #fefefe;text-decoration: none;} footer a:hover{text-decoration: underline;color: #feffff;} #footer-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;align-items: center;padding: 30px 0;} #footer-grid div:first-of-type{align-items: center;display: flex;justify-content: space-between; flex-direction: column;grid-column: span 2;} .footer-copy{text-align: center;} .footer-copy p{padding: 0 0 16px 0;margin: 0;} #whatsapp-contact{width: 60px;position: fixed;bottom: 10px;right: 10px;} #whatsapp-contact img{width: 60px;height: auto;} /******************************************************* ABOUT *******************************************************/ #welcome-social{position: absolute;top: 120px;left: 3%;width: 40px;} #welcome-social img{display: block;margin-bottom: 10px;width: 100%;} #about-welcome{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;} #about-welcome-header{background-image: url('../imgs/jtai_sc-02.png');background-repeat: no-repeat;min-height: 400px;} #about-container{display: grid;width: 90%;margin: 0 auto;gap: 2rem;grid-template-columns: 1fr;width: 90%;margin: 0 auto;} .about-welcome-img{grid-row-start: 2;} .about-welcome-img img.about-img-mobile{display: inline;width: 100%;margin-bottom: 80px;} .about-welcome-img img.about-img-screen{display: none;} .about-welcome-img p{font-size: 1.2em;margin: 10px auto 10px 10%;} .about-welcome-txt{padding-top: 80px;} .about-welcome-txt h1{font-family: "Conv_Montserrat-Bold", sans-serif;color: #912120;text-transform: uppercase;text-align: center;} .about-welcome-txt p{font-size: 1.2em;width: 90%;margin: 15px auto;} p.about-intro{text-transform: uppercase;color: #912120;font-size: 1.8em;} .about-maestros{text-align: center;} .about-maestros img{display: block;width: 100%;} #banner-certificaciones{clear: both;display: grid;gap: 1em;grid-template-columns: 1fr;padding: 70px 4%;background-image: url("../imgs/jtai_sc-01a.jpg");background-repeat: no-repeat;background-size: cover;} #banner-certificaciones h2{text-align: left;color: #fff;font-size: 2.4rem;font-family: "Conv_Montserrat-Light", sans-serif;text-transform: uppercase;} #banner-certificaciones h2 span{font-family: "Conv_Montserrat-Bold", sans-serif;} #banner-certificaciones p{color: #fff;font-size: 1.2rem;text-align: justify;} #estudios{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: 100% auto;} .estudios-background{background-image: url('../imgs/jtai_sc-14.png');background-repeat: no-repeat;background-size: 100% auto;padding-top: 20px;} #estudios-container{display: grid;gap: 1rem;grid-template-columns: 1fr;width: 90%;margin: 20px auto;} .sello{opacity:0.8;width: 60px;} .about-welcome-txt-sello{text-align: center;} #josue-tai-firma{display: flex;justify-content: flex-end;align-items: center;margin-bottom: 20px;} #josue-tai-firma span{font-size: 1.2em;} #josue-tai-firma img{margin: 0 20px;} #about-memberships{display: grid;grid-template-columns: repeat(4,1fr);gap: 2rem;width: 100%;margin: 0 auto;padding: 30px 2%;align-items: center;background-color: #f2f2f2;text-align: center;border-top: 2px solid #795921;border-bottom: 2px solid #795921;} #about-memberships a{text-decoration: none;} .about-membership-item img{width: 60%;height: auto;display: inline;} .about-membership-item img.rounded-logo{width: 80px;} /******************************************************* MEDIA CHANNEL *******************************************************/ /* Media Channel */ #media-main{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;padding-bottom: 80px;} #media-main-title{background-image: url("../images/media_back_test.png");background-repeat: no-repeat;background-size: 100% auto;background-position: center bottom;padding-top: 100px;padding-bottom: 60px;} #media-main-title h1{font-family: 'Conv_Montserrat-Light', sans-serif;color: var(--jtRed);font-size: 2rem;text-align: center;margin-bottom: 0;padding-bottom: 0;text-transform: uppercase;} #media-main-title p.media-intro{margin: 0 auto;width: 80%; padding: 0;font-family: 'Conv_Montserrat-Light', sans-serif;color: var(--jtGrey);font-size: 1rem;text-transform: uppercase;text-align: center;} #blog-main-disclaimer{width: 80%;margin: 140px auto 30px auto;padding: 10px 20px;border-radius: 20px;display: flex;align-items: center;background-color: rgba(255, 255, 255, 0.5);} @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {#blog-main-disclaimer {-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);background-color: rgba(255, 255, 255, 0.5);}} #blog-main-disclaimer h3{font-family: 'Conv_Montserrat-Bold', sans-serif;font-size: 1.5rem;} #blog-main-disclaimer h3 small{font-family: 'Conv_Montserrat-Regular', sans-serif;font-size: 0.9rem;} #blog-search{width: 30%;margin: 0 0 0 auto;display: flex;flex-direction: row;align-items: center;} #blog-main-article{width: 80%;margin: 40px auto 50px auto;gap: 1rem;grid-template-columns: 1fr;border-bottom: 2px dotted #d4d4d4;} #blog-main-article-media{grid-column: span 1;background: linear-gradient(to right, red, black);padding: 4px;} #blog-main-article{display: grid;align-items: center;position: relative;} #blog-main-article-media{background: linear-gradient(to right, red, black);padding: 6px 6px 4px 6px;} #blog-main-article-media img{width: 100%;} #blog-main-article-descr{grid-column: span 2;} #blog-main-article-descr h2{margin-top: 10px;margin-bottom: 15px;} #blog-main-article-descr h2 a, #blog-main-article-descr p a{text-decoration: none;color: #000;} #blog-main-listing{display: grid;gap: 2rem;grid-template-columns: 1fr;width: 80%;margin: 0 auto;} .blog-entry{background-color: white;border-bottom: 1px dashed #d4d4d4;padding-bottom: 10px;} .blog-entry h3{padding: 8px;} .blog-entry p{padding: 8px;} .blog-entry h3 a, .blog-entry p a{color: #000001;text-decoration: none;cursor: pointer;} .blog-entry:hover{border: 1px solid #870000;} .blog-entry-media img{width: 100%;} .author-mini{display: flex;flex-direction: row;align-items: center;padding-top: 10px;} .author-mini img{width: 40px;height: 40px;margin: 0 8px;} .author-mini p{margin: 0;padding: 0;font-family: 'Conv_Montserrat-Regular', sans-serif;font-size: 1rem;} .author-mini p span{font-size: 0.8rem;} /* Media display */ #media-display-main{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;} #media-display-container{background-image: url("../imgs/jt_blog_ele-02.png");background-repeat: no-repeat;background-size: 120% auto;background-position: center top;padding-top: 100px;} #mdc-media{width: 68%;margin: 0 auto;filter: drop-shadow(0px 4px 5px black);position: relative;} #mdc-media img{width: 100%;} #mdc-descr{width: 68%;margin: 40px auto;} #mdc-descr h1{font-family: 'Conv_Montserrat-Bold', sans-serif;font-size: 2.5rem;} #mdc-descr h2{font-family: 'Conv_Montserrat-Bold', sans-serif;color: #782624;} #mdc-descr ul, ol{width: 80%;margin: 10px auto 18px auto;font-size: 1.3rem;} #mdc-descr h4{font-family: 'Conv_Montserrat-Regular', sans-serif;color: #782624;width: 80%;margin-left: auto;margin-right: auto;} #mdc-descr a{color: #7C0303;} #mdc-descr p{font-size: 1.3rem;} #mdc-footer{width: 68%;margin: 0px auto 40px auto;border-top: 1px solid black;padding-top: 20px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;} .consultoria-blog{display: flex;padding-top: 30px;} .social-blog{text-transform: uppercase;font-family: 'Conv_Montserrat-Bold', sans-serif;} #mdc-footer img{height: 40px;margin: 0 4px;} /******************************************************* CONTACT *******************************************************/ #contacto-welcome{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;} #contacto-container{padding-top: 100px;padding-bottom: 80px;margin: 0; background-image: url('../images/back-contact-mobile.png'); background-repeat: no-repeat;background-position: top left;background-size: contain;} #contacto-content{display: grid;margin-top: 0px;grid-template-columns: 1fr;gap: 1rem;} #contacto-form{width: 90%;border-radius: 8px;margin: 0 auto;padding: 16px 26px;background-image: url('../images/ricepaper.webp');background-repeat: repeat;} #contacto-form h1{text-align: center;text-transform: uppercase;margin: 20px 0 10px 0;padding: 0;} #contacto-form p{text-align: center;margin: 0;padding: 0;color: var(--jtGrey);} #contacto-form form{padding-top: 50px;padding-bottom: 20px;} #contacto-form label{font-family: 'Conv_Montserrat-Bold', sans-serif;} #contacto-form input[type=text], #contacto-form input[type=email], #contacto-form textarea{width: 100%;box-sizing: border-box;border-top: none;border-right: none;border-left: none;background-color: transparent;border-bottom: 1px solid #000;border-radius: 0;margin-bottom: 20px;padding-top: 8px;} #contacto-form input[type=text]:focus, #contacto-form input[type=email]:focus, #contacto-form textarea:focus{background-color: white;border-bottom: 1px solid #870000;} img.contacto-banner{height: 80%;margin-top: 40px;} .contacto-info{font-weight: bold;text-align: center;} .contacto-info h4{color: var(--jtRed);text-transform: uppercase;font-size: 2rem;} #contacto-form input#websiteb{display: none;} #contact-divider{display: none;} #contact-divider img{width: 40px;} /* Thank you Both */ #thank-you-main{min-height: 100vh;position: relative;background-attachment: fixed;background-image: url('../imgs/jt-home_img-01.jpg');background-position: center;background-size: cover;color: var(--jtGrey);overflow: hidden;padding-top: 80px;padding-bottom: 80px;} #thank-you-container, #thank-you-resources{width: 80%;margin: 0 auto;padding-top: 55px;position: relative;z-index: 3;} #thank-you-container{text-align: center;} #thank-you-container img{margin-bottom: 20px;} #thank-you-container h1{text-align: center;font-family: 'Conv_Montserrat-Bold', sans-serif;color: #7C0303;margin-bottom: 30px;font-size: 2.2rem;text-transform: uppercase;} #thank-you-container p{width: 80%;color: black;font-size: 1.4rem;letter-spacing: .2px;line-height: 1.6rem;margin: 30px auto;} #thank-you-container p span{color: #7C0303;} #thank-you-animation{width: 200px;height: 188px;background: url('../images/thankyoufly.png') left center;animation: play 2.2s steps(10) infinite;margin: 20px auto 0 auto;} @keyframes play {100% { background-position: -2020px; }} #thank-you-resources{display: grid;gap: 3rem;grid-template-columns: 1fr 1fr;} .thank-item{background-color: rgba(255, 255, 255, 0.6);padding: 14px 14px 30px 14px;box-sizing: border-box;border-radius: 10px;text-align: center;} .thank-item h3{color: var(--jtRed);font-size: 1.9rem;font-weight: bold;font-family: 'Conv_Montserrat-Bold', sans-serif;} .thank-item img{width: 100px;height: auto;} .thank-item p{font-size: 1.3rem;margin-bottom: 25px;} /******************************************************* Tai Ji *******************************************************/ #taiji-body{background-image: url('../imgs/jt-home_img-01.jpg');background-repeat: no-repeat; background-size: 100% auto;background-position: top center;} #taiji-main{min-height: 1000px;padding-top: 100px;background-image: url('../images/taijiback.png');background-repeat: no-repeat;background-size: 100% auto;background-position: fixed;} #taiji-main h1{width: 100%;text-align: center;font-size: 2.2rem;font-weight: 600;margin: 30px 0 0 0;text-transform: uppercase;} p.taiji-phrase{text-align: center;margin: 20px 0 0 0;padding: 0;font-style: italic;font-size: 1rem;} #taiji-welcome-blurb{width: 95%;margin: 0 auto;padding-top: 120px;display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;align-items: center;} #taiji-welcome-blurb p{font-size: 1.2rem;} #taiji-welcome-blurb h2{text-align: center;font-size: 2.3rem;text-transform: uppercase;background-image: linear-gradient(to bottom, #44000B,rgba(160,37,33,1));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;} .taiji-welcome-video{width: 80%;margin: 0px auto 0 auto;padding: 10px;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);} #taiji-main-calendar{padding-top: 60px;width: 96%;margin: 0 auto;} #taiji-calendar-container{position: relative;display: block;} #taiji-calendar-container-mobile{display: none;} #taiji-calendar-container table {width: 100%;border-collapse: collapse;margin-bottom: 1em;} #taiji-calendar-container table th, #taiji-calendar-container table td {padding: 12px;text-align: center;border: 1px solid #ddd;} #taiji-calendar-container table thead {background-color: #44000B;color: #fff;text-align: center;} #taiji-calendar-container table tbody tr:nth-child(even) {background-color: #f9f9f9;} .class-item{background-color: #44000B;color: #fff;} .taiji-class-location{cursor: pointer;} .taiji-class-location p{padding: 0;margin: 0;} .taiji-class-location p span{color: #fff;font-size: 0.8rem;} /* Modal Styling */ .modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);} .modal-content {background: url('../images/ricepaper.webp') repeat;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;border-radius: 8px; position: relative; display: grid;grid-template-columns: 1fr 1fr;gap: 1rem; } .modal-content img{width: 90%;height: auto;display: block;margin: 40px auto 0 auto;border: 4px solid var(--jtGrey);} .modal-content address{width: 90%;margin: 10px auto 0 auto;text-align: center;} .close {color: #aaa;position: absolute;top: 9px;right: 20px;font-size: 28px;font-weight: bold;border: 1px solid #aaa;padding: 0 3px;} .close:hover, .close:focus {color: red;cursor: pointer;} #taiji-dates{width: 96%;margin: 0 auto;} #taiji-dates p{display: grid;grid-template-columns:80px 1fr 1fr;border-bottom: 1px solid var(--jtRed);border-left: 1px solid var(--jtRed);text-align: left;align-items: center;box-sizing: border-box;padding: 3px;border-radius: 0 0 0 3px;} #taiji-dates p.active-event{background-color: rgb(236, 246, 142);border-bottom: 1px solid rgb(236, 246, 142);border-left: 1px solid rgb(236, 246, 142);} #taiji-dates p.past-event{color: var(--jtGrey);border-bottom: 1px solid var(--jtGrey);border-left: 1px solid var(--jtGrey);} #taiji-dates p a{color: var(--jtRed);} #taiji-dates-reference{margin: 0;padding: 0;display: flex;align-items: center;justify-content: space-between;} #taiji-dates-reference button{background-color: var(--jtRed);color: white;padding: 6px 16px;border: 1px solid var(--jtRed);border-radius: 4px;cursor: pointer;} #taiji-dates-reference button:hover{background-color: #44000B;border: 1px solid #44000B;} #taiji-events-container{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1rem;} #taiji-testimonials{width: 96%;margin: 0 auto;} #taiji-testimonials-container{display: grid;grid-template-columns: repeat(4,1fr);gap: 2rem;} .taiji-testimonials-item{background: url('../images/ricepaper.webp') repeat;border: rgba(11, 11, 11, 0.48);border-radius: 8px;box-shadow: 0 2px 2px rgba(11, 11, 11, 0.28);box-sizing: border-box;padding: 20px;} .taiji-testimonials-item img{display: block;width: 40px;height: 40px;margin: 0 auto;border: 1px solid var(--jtGrey);border-radius: 50%;} .taiji-testimonials-item p{line-height: 1.5rem;} .taiji-testimonials-item p.testimonial_author{text-align: right;color: var(--jtGrey);} #about-taiji{text-align: center;padding-top: 40px;width: 95%;margin: 0 auto;} #about-taiji h3{width: 60%;margin: 20px auto;color: #4f4f4f;font-size: 1.4rem;} #about-taiji img{display: block;width: 80px;margin: 0 auto 20px auto;} #about-taiji-descr{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin: 80px 0 0px 0;align-items: center;text-align: left;} #about-taiji-descr h3{width: 80%;text-align: left;} #about-taiji-descr p{width: 80%;margin: 20px auto;text-align: left;} #about-taiji-descr ul{width: 90%;margin: 0 auto 40px auto;} #about-taiji-descr strong{color: var(--jtRed);} #taiji-video-frame{width: 80%;margin: 0px auto 0 auto;padding: 10px;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);} #daoist-concepts{display: flex;flex-direction:row;justify-content: space-between;width: 60%;min-width: 600px;margin: 100px auto;} #daoist-concepts img{width: 60px;height: 60px;} #taiji-main-resources{padding: 20px 0 80px 0;margin-top: 120px;background: rgb(253,252,251);background: linear-gradient(90deg, rgba(253,252,251,1) 35%, rgba(226,209,195,1) 100%);color: black;} #taiji-main-resources h2{color: var(--jtRed);text-transform: uppercase;} #daoist-arts-banner{text-align: center;} #daoist-arts-banner img{filter: drop-shadow(10px 10px 4px #d4d4d4);width: 80%;max-width: 260px;} #taiji-resources-container{display: grid;grid-template-columns: repeat(3,1fr);gap: 2rem;width: 90%;margin: 0 auto;} #taiji-banner{text-align: center;padding: 80px 0 40px 0;} .taiji-resource-item{border: 1px solid #d4d4d4;border-radius: 6px;} .taiji-resource-item-descr{width: 96%;margin: 0 auto;} .taiji-resource-item-video{padding:56.25% 0 0 0;position:relative;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);width: 100%;} .resources_title_opts{display: flex;justify-content: space-between;align-items: center;width: 94%;margin: 20px auto;} .resources_title_opts a{border: 1px solid var(--jtRed);background-color: var(--jtRed);padding: 8px 16px;text-transform: uppercase;color: #fff;text-decoration: none;border-radius: 6px;font-size: 0.8rem;} .resources_title_opts a:hover{background-color: #000;} /******************************************************* Restorative Therapies *******************************************************/ #massage-body{background-image: url('../imgs/jt-home_img-01.jpg');background-repeat: no-repeat;background-size: 100% auto;background-position: top center;} #massage-main{min-height: 1000px;padding-top: 100px;background-image: url('../images/back-massage.png');background-repeat: no-repeat;background-size: 100% auto;background-position: fixed;} #massage-main h1{width: 100%;text-align: center;font-size: 2.2rem;font-weight: 600;margin: 30px 0 0 0;text-transform: uppercase;} p.massage-phrase{text-align: center;margin: 13px 0 0 0;padding: 0;font-style: italic;font-size: 1.2rem;} #massage-welcome-blurb{width: 96%;margin: 120px auto 30px auto;display: grid;grid-template-columns: 1fr 1fr; gap: 2rem;align-items: center;} #massage-welcome-blurb h2{text-align: center;font-size: 2.3rem;text-transform: uppercase;background-image: linear-gradient(to bottom, #44000B,rgba(160,37,33,1));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-weight: 900;} #massage-welcome-blurb p{text-align: center;font-size: 1.1rem;line-height: 1.5;} .massage-welcome-video{width: 80%;margin: 0px auto 0 auto;padding: 10px;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);} #massage-main_rvsp{margin: 150px auto 150px auto;} img.massage-divider-img{display: block;width: 40px;margin: 0 auto 30px auto;} #massage-main_rvsp h2{font-family: "Conv_Montserrat-Light", sans-serif;text-align: center;font-size: 2.3rem;color: var(--jtRed);margin: 0 auto 20px auto;} #massage-main_rvsp-container{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin: 40px auto 0 auto;width: 90%;} #massage-main_rvsp-container > div{background-color: rgba(255, 255, 255, 0.5);border-radius: 6px;border: 1px solid rgba(0, 0, 0, 0);padding: 10px;box-shadow: 0 1px 2px rgba(204, 210, 218, .07), 0 2px 4px rgba(204, 210, 218, .07), 0 4px 8px rgba(204, 210, 218, .07), 0 8px 16px rgba(204, 210, 218, .07), 0 16px 32px rgba(204, 210, 218, .07), 0 32px 64px rgba(204, 210, 218, .07);transition: all .15s;box-sizing: border-box;text-transform: uppercase;overflow-x: auto;text-align: center;} #massage-main_services{width: 92%;margin: 0 auto 20px auto;} #massage-main_services h2{font-family: "Conv_Montserrat-Light", sans-serif;text-align: center;font-size: 2.3rem;font-weight: 200;color: var(--jtRed);margin: 0 auto 20px auto;} #massage-main_services-descriptions{display: grid;grid-template-columns: repeat(2,1fr);gap: 2rem;align-items:baseline;} /* TEST ACORDEON */ .hide{clip: rect(0 0 0 0);height: 1px;margin: -1px;padding: 0;position: absolute;width: 1px;} .accordion{background: #fff;width: 100%;border: 1px solid var(--border-color);list-style-type: none;padding: 0;} .accordion-item{position: relative;width: 100%;border-bottom: 1px solid var(--border-color); &:last-child{border-bottom: none;} } .accordion-label{padding: 20px 0 20px 30px;width: 100%;display: block;font-size: 18px; &:hover{cursor: pointer;} &:before{content: '';position: absolute;height: 5px;width: 5px;top: 22px;left: 12px;display: inline-block;border-left: 5px solid #999;border-top: 5px solid transparent;border-bottom: 5px solid transparent;} input[type=checkbox]:checked ~ &:before{transform: rotate(90deg);} } .accordion-child{margin: 0;overflow: hidden;transition: all 0.3s ease;opacity: 0;height: 0;transform: scale(1,0);transform-origin: center top; input[type=checkbox]:checked ~ &{border: 1px solid var(--border-color);margin: 0 -20px 15px -20px;background: #fff;box-shadow: 0 3px 6px 1px rgba(0,0,0,0.16);padding: 30px;height: auto;opacity: 1;transform: scale(1,1);} } #massage-testimonials{width: 96%;margin: 0 auto 120px auto;} #massage-testimonials-container{display: grid;grid-template-columns: repeat(4,1fr);gap: 1rem;padding: 10px;box-sizing: border-box;} .massage-testimonials-item{min-height: 100px;} #about-massage-therapy{text-align: center;padding-top: 40px;width: 95%;margin: 0 auto;} #about-massage-therapy img{display: block;width: 40px;margin: 0 auto 20px auto;} #about-massage-therapy-descr{display: grid;grid-template-columns: 1fr 1fr;gap: 2rem;margin: 80px 0 0px 0;align-items: center;text-align: left;} #about-massage-therapy-descr h3{width: 80%;text-align: left;} #about-massage-therapy-descr p{width: 80%;margin: 20px auto;text-align: left;} #about-massage-therapy-descr ul{width: 90%;margin: 0 auto 40px auto;} #about-massage-therapy-descr strong{color: var(--jtRed);} #massage-video-frame{width: 80%;margin: 0px auto 0 auto;padding: 10px;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);} #massage-main_resources{padding: 20px 0 80px 0;margin-top: 60px;background: rgb(253,252,251);background: linear-gradient(90deg, rgba(253,252,251,1) 35%, rgba(226,209,195,1) 100%);color: black;} #massage-main_resources h2{color: var(--jtRed);width: 90%;margin: 0 auto 20px auto;font-weight: 200;} #massage-main_resources-title{display: flex;align-items: center;justify-content: space-between;width: 94%;margin: 0 auto 20px auto;} #massage-main_resources-title a{border: 1px solid var(--jtRed);background-color: var(--jtRed);color: white;text-transform: uppercase;padding: 4px 12px;border-radius: 4px;border-radius: 4px;font-size: 14px;width: 144px;text-align: center;} #massage-main_resources-container{display: grid;grid-template-columns: repeat(3,1fr);gap: 2rem;width: 90%;margin: 0 auto;} .massage-resource-item{border: 1px solid #d4d4d4;} .massage-resource-item-video{padding:56.25% 0 0 0;position:relative;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);width: 100%;} /******************************************************* Feng Shui *******************************************************/ #feng-shui-main{min-height: 800px;box-sizing: border-box;border-top: 1px solid transparent;} video#welcome-fs-video{object-fit: cover;width: 100%;position: absolute;top: 0px;z-index: 0;} #feng-shui-container{position: relative;z-index: 2;background-image: url("../imgs/back-FS2.png");background-repeat: no-repeat;background-size: 100% auto;background-position: center 80px;} #feng-shui-container h1{font-size: 3rem;font-family: 'Conv_Montserrat-Bold', sans-serif;color: white;text-align: center;padding-top: 90px;padding-bottom: 140px;text-transform: uppercase;} #feng-shui-descr{margin: 0 auto;} .fsd-intro{text-align: center;font-family: 'Conv_Montserrat-Regular', sans-serif;width: 70%;margin: 0 auto 30px auto;} .fsd-intro blockquote{padding: 20px auto;font-size: 1.3rem;margin-bottom: 30px;font-family: 'Conv_Montserrat-Light', sans-serif;color: #912120;} .fsd-intro img{width: 40px;margin-bottom: 20px;} .fsd-intro h2{padding: 20px 0;} .fsd-intro p{margin: 10px auto;text-align: left;font-size: 1.1rem;} .fsd-content{position: relative;display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;width: 80%;margin: 0 auto;} .fsd-content h4{color: #870000;margin-top: 0px;} .fsd-content p{width: 85%;margin: 10px auto;font-size: 1.1rem;} .fsd-content img{width: 90%;display: block;margin: 0 auto;} .feng-shui-strategies h2{color: #870000;margin-bottom: 40px;text-align: center;} .feng-shui-strategies p{width: 60%;margin: 10px auto;text-align: left;} .fsd-types{display: grid;gap: 3rem;grid-template-columns: 1fr 1fr 1fr 1fr;text-align: center;width: 80%;margin: 0 auto;} .fsd-types h3{color: #870000;} .fsd-types img{width: 100%;} #fsd-video{position: relative;margin-top: 120px;text-align: center;margin-bottom: -7px;} #fsd-video-grid{display: grid;gap: 3rem;grid-template-columns: 1fr 1fr;align-items: center; width: 70%;margin: 0 auto;} #fsd-video img{width: 100%;} #fsd-video blockquote{padding: 20px auto;font-size: 1.4rem;margin-bottom: 30px;font-family: 'Conv_Montserrat-Light', sans-serif;color: #912120;} #fsd-video-media{background-image: linear-gradient(to bottom left, #B93C40, #000);padding: 14px;width: 80%;margin: 0 auto;} #consultation-steps, #consultation-steps-corporate{font-family: 'Conv_Montserrat-Regular', sans-serif;background-color: #000;position: relative;z-index: 2;color: #fff;padding: 55px 7%;box-sizing: border-box;display: grid;gap: 4rem;grid-template-columns: 45% 1fr;align-items: center;} #consultation-steps-corporate{background-color: #7C0303;background-image: url('../imgs/jt_servicios-01.jpg');background-repeat: no-repeat;background-size: cover;} #consultation-steps h2, #consultation-steps-corporate h2{font-family: 'Conv_Montserrat-Bold', sans-serif;} #consultation-steps p, #consultation-steps-corporate p{margin: 25px 0 0 0;} #consultation-steps img, #consultation-steps-corporate img{width: 55px;} #consultation-steps ol, #consultation-steps-corporate ol{list-style-type: trad-chinese-formal;} /******************************************************* Consultation REquest and Free tips (rework) *******************************************************/ #consutlation-request{background-image: url('../imgs/jt-home_img-01.jpg');background-repeat: no-repeat;background-size: cover;box-sizing: border-box;min-height: 600px;border-top: 1px solid transparent;} #consutlation-request h1{text-align: center;font-family: 'Conv_Montserrat-Bold', sans-serif;color: #7C0303;padding-top: 80px;} #consutlation-request p{width: 80%;margin: 0 auto;font-size: 1rem;padding: 0 0 10px 0;text-align: center;} #consultation-container{width: 80%;margin: 0 auto;display: grid;gap: 2rem;grid-template-columns: 35% 1fr;padding-bottom: 80px;align-items: center;} #consultation-container img{width: 90%;margin: 0 auto;display: block;} #request-consultation-form{box-sizing: border-box;padding-top: 20px;} #request-consultation-form p{width: 100%;margin: 10px 0;text-align: left;} #request-consultation-form label{margin: 0;padding: 0;color: #7C0303;} #request-consultation-form input[type=text], #request-consultation-form input[type=tel], #request-consultation-form input[type=date], #request-consultation-form input[type=email]{border: none;border-bottom: 1px solid black;width: 100%;padding: 3px;background-color: transparent;margin-bottom: 20px;box-sizing: border-box;} #request-consultation-form textarea{border: none;border-bottom: 1px solid black;width: 100%;padding: 3px;background-color: transparent;margin-bottom: 20px;box-sizing: border-box;} #request-consultation-form textarea:focus{background-color: rgba(255,255,255,0.5);} #request-consultation-form input:focus{border: 1px solid #7C0303;} #request-consultation-form select{border: 1px solid black;width: 100%;margin-bottom: 20px;margin-top: 6px;} .contact-form-buttons{display: flex;flex-wrap: nowrap;justify-content: space-between;} #request-consultation-form input#website{display: none;} /******************************************************* Decision Dyanmics *******************************************************/ #decision-dynamics-main{padding-top: 100px;min-height: 400px;} /******************************************************* Eye Promo *******************************************************/ #eye-promo-main{box-sizing: border-box;border-top: 1px solid transparent;} /******************************************************* Founders List *******************************************************/ #founders-container{ min-height: 100vh;position: relative;background-attachment: fixed;background-image: url('../imgs/jt-home_img-01.jpg');background-position: center;background-size: cover;color: var(--jtGrey);overflow: hidden;padding-top: 0px; } #founders-form{margin-top: 90px;margin-bottom: 80px;} #founders-form h1, #founders-form h2, #founders-form strong, #founders-form a{text-align: center;color: #6a0303;} .form-container {width: 100%;max-width: 700px;margin: 0 auto;padding: 20px 60px;background-color: #f9f9f9;border-radius: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);} .form-group{margin-top: 50px;} .form-group input[type="text"],.form-group input[type="email"],.form-group textarea {width: 100%;padding: 10px;font-size: 1rem;border: 1px solid #ccc;border-radius: 5px;} .form-group select{width: 100%;padding: 10px;background-color: #6a0303;color: white;border: none;border-radius: 6px;} .form-group label {font-weight: bold;display: block;margin-bottom: 8px;} .error {color: red;margin-top: 5px;} #founder-submit{text-align: center;} #founder-submit input[type="submit"]{padding: 8px 12px;background-color: #44000B;color: white;border: none;border-radius: 6px;font-size: 1rem;cursor: pointer;} #founder-submit input[type="submit"]:hover{background-color: #34495e;} /******************************************************* Feedback Form *******************************************************/ #feedback-container{min-height: 100vh;position: relative;background-attachment: fixed;background-image: url('../imgs/jt-home_img-01.jpg');background-position: center;background-size: cover;color: var(--jtGrey);overflow: hidden;padding-top: 0px;} #feedback-form{margin-top: 90px;margin-bottom: 80px;} #feedback-form h2, #founders-form strong, #founders-form a{text-align: center;color: #6a0303;} #feedback-submit{text-align: center;padding: 30px;} #feedback-submit input[type="submit"]{padding: 8px 12px;background-color: #44000B;color: white;border: none;border-radius: 6px;font-size: 1rem;cursor: pointer;} #feedback-submit input[type="submit"]:hover{background-color: #34495e;} .text-center{text-align: center;} /******************************************************* Memberships *******************************************************/ #memberships-main{padding-top: 100px;min-height: 300px;} #memberships-packs{min-height: 500px;} .snip1214 {color: #000000;text-align: center;font-size: 16px;width: 90%;max-width: 1000px;margin: 0 auto;} .snip1214 .plan {margin: 0;width: 25%;position: relative;float: left;background-color: #ffffff;border: 1px solid rgba(0, 0, 0, 0.1);} .snip1214 * {-webkit-box-sizing: border-box;box-sizing: border-box;} .snip1214 header {position: relative;} .snip1214 .plan-title {position: relative;top: 0;font-weight: 800;padding: 5px 15px;margin: 0 auto;-webkit-transform: translateY(-50%);transform: translateY(-50%);margin: 0;display: inline-block;background-color: #222f3d;color: #ffffff;text-transform: uppercase;} .snip1214 .plan-cost {padding: 0px 10px 20px;} .snip1214 .plan-price {font-family: 'Montserrat', Arial, sans-serif;font-weight: 800;font-size: 2.4em;color: #34495e;} .snip1214 .plan-type {opacity: 0.6;} .snip1214 .plan-features {padding: 0;margin: 0;text-align: center;list-style: outside none none;font-size: 0.8em;} .snip1214 .plan-features li {border-top: 1px solid #d2d7e2;padding: 10px 5%;} .snip1214 .plan-features li:nth-child(even) {background: rgba(0, 0, 0, 0.08);} .snip1214 .plan-features i {margin-right: 8px;opacity: 0.4;} .snip1214 .plan-select {border-top: 1px solid #d2d7e2;padding: 10px 10px 0;} .snip1214 .plan-select a {background-color: #222f3d;color: #ffffff;text-decoration: none;padding: 0.5em 1em;-webkit-transform: translateY(50%);transform: translateY(50%);font-weight: 800;text-transform: uppercase;display: inline-block;} .snip1214 .plan-select a:hover {background-color: #46627f;} .snip1214 .featured {margin-top: -10px;background-color: #34495e;color: #ffffff;box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);z-index: 1;} .snip1214 .featured .plan-title, .snip1214 .featured .plan-price {color: #ffffff;} .snip1214 .featured .plan-cost {padding: 10px 10px 20px;} .snip1214 .featured .plan-features li {border-top: 1px solid rgba(255, 255, 255, 0.4);} .snip1214 .featured .plan-select {padding: 20px 10px 0;border-top: 1px solid rgba(255, 255, 255, 0.4);} /******************************************************* Privacy *******************************************************/ #privacy-main{background-color: #fff;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: 100% auto;} #privacy-main-container{background-image: url("../imgs/jt_blog_ele-02.png");background-repeat: no-repeat;background-size: 120% auto;background-position: center top;border-top: 1px solid transparent;} #privacy-main-container h1{font-family: 'Conv_Montserrat-Bold', sans-serif;color: #fff;padding-top: 60px;font-size: 2.5rem;text-align: center;} #privacy-descr{width: 70%;margin: 220px auto 100px auto;font-size: 0.9rem;} /******************************************************* Media Queries *******************************************************/ @media screen and (min-width: 800px){ .nav-toggle-label{display: none;} header{display: grid;grid-template-columns: 60px auto minmax(600px, 1fr) 60px;background: transparent;transition: background-color 0.3s ease-in-out;} header.scrolled{background: black;} .logo{grid-column: 2 / 3;} nav{all: unset;grid-column: 3 / 4;display: flex;justify-content: flex-end;align-items: center;background: transparent;} nav ul{display: flex;justify-content: flex-end;} nav li{margin-left: 2em;margin-bottom: 0;} nav a{opacity: 1;position: relative;color: black;} nav.scrolled a{color: white;} nav a::before{content: '';display: block;height: 2px;background: var(--jtRed);position: absolute;bottom: -0.75em;left: 0;right: 0;transform: scale(0,1);transition: transform ease-in-out 250ms;} nav a:hover::before{transform: scale(1,1);} nav.scrolled a.active{color: var(--jtRed);} nav a.active::before{transform: scale(1,1);} .clouds {background-position: -100% -120px;} #main_hero{padding-top: 40px;} #welcome-blurb{display: grid;grid-template-columns: 60px 1fr 1fr;margin-top: 80px;background-position: center center;background-size: contain;} #welcome-blurb-text{grid-column: 2 / 3;padding-left: 0;} #welcome-blurb-text h1{font-size: 4rem;} #welcome-blurb-text p{display: block; color: black;width: 80%;margin: 0 auto 0 0;font-size: 1rem;letter-spacing: .2px;line-height: 1.6rem;} .home_action_btn{display: grid;grid-template-columns: 70px 1fr;width: 76%;min-height: 140px;} #welcome_join_academy{width: 100%;margin: 100px auto 0 auto;padding-bottom: 160px;background-image: url('../images/academy_back.png');background-repeat: no-repeat;background-size: contain;background-position: center;} #welcome_join_academy-descr{grid-template-columns: repeat(3,1fr);} #welcome_join_academy-descr div:not(:last-of-type){border-right: 1px solid var(--jtGrey); border-bottom: none;padding-bottom: 0px;} #welcome_about{width: 100%;display: grid;padding: 0;grid-template-columns: 1fr 1fr;gap: 2rem;align-items: center;background-color: transparent;background-image: url('../imgs/jt_blog_img-01.jpg');background-repeat: no-repeat;background-size: cover;color: #111;position: relative;} #welcome_about-descr{display: block;} #welcome-mobile{display: none;} #welcome-video{padding: 120px 0 180px 0;} #promo-text{width: 50%;margin: 0 auto 0 20%;} #promo-text h3{font-size: 3.8em;margin-top: 0;} #promo-text p{font-size: 1.5em;} .promo-btns{padding-bottom: 70px;} #welcome-shop-container{grid-template-columns: repeat(4,1fr);gap: 2rem;width: 90%;margin: 80px auto;} #welcome-blog-entry{display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;width: 80%;margin: 0 auto;padding: 40px 0 100px 0;align-items: center;} #welcome-media{padding: 0 0 60px 0;} #footer-grid{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;gap: 2rem;align-items: center;padding: 30px 0;} /* ABOUT */ #about-container{gap: 4rem;grid-template-columns: 1fr 1fr;} .about-welcome-img{grid-row-start: 1;} .about-welcome-img img.about-img-screen{display: inline;width: 120%;margin-bottom: 80px;} .about-welcome-img img.about-img-mobile{display: none;} #banner-certificaciones{gap: 3em;grid-template-columns: 1fr 1fr;padding: 70px 10% 50px 10%;} #banner-certificaciones h2{text-align: right;color: #fff;font-size: 2.8rem;} #estudios-container{display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;width: 80%;margin: 20px auto;} /* Media Channel */ #media-main-title{padding-top: 100px;padding-bottom: 120px;} #media-main-title h1{font-size: 3rem;} #media-main-title p.media-intro{margin: 0;padding: 0;font-size: 1.2rem;width: 100%;} #blog-main-article{gap: 2rem;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;margin: 40px auto 80px auto;border-bottom: none;} #blog-main-article-media{grid-column: span 3;} #blog-main-listing{gap: 3rem;grid-template-columns: 1fr 1fr 1fr;width: 90%;} .consultoria-blog{display: flex;padding-top: 0px;} /* Contact */ #contacto-container{padding-top: 100px;padding-bottom: 80px;margin: 0;background-image: url('../images/contact-back-test.png');background-repeat: no-repeat;background-position: bottom left;background-size: contain;} #contacto-content{display: flex;flex-wrap: wrap;justify-content: center;gap:4rem;margin-top: 50px;} #contacto-form{width: 50%;margin: 0;} #contact-divider{display: flex;align-items: center;justify-content: center;} .contacto-info{font-weight: bold;} } @media only screen and (max-width: 767px) { /* About */ #about-memberships{display: grid;grid-template-columns: repeat(2,1fr);gap: 1rem;} .snip1214 .plan {width: 50%;} .snip1214 .plan-title, .snip1214 .plan-select a {-webkit-transform: translateY(0);transform: translateY(0);} .snip1214 .plan-cost, .snip1214 .featured .plan-cost {padding: 20px 10px 20px;} .snip1214 .plan-select, .snip1214 .featured .plan-select {padding: 10px 10px 10px;} .snip1214 .featured {margin-top: 0;} /* Tai Ji */ #taiji-body{background-size: 150% auto;} #taiji-main{background-size: 130% auto;} #taiji-welcome-blurb{width: 95%;padding-top: 80px;display: grid;grid-template-columns: 1fr;} #taiji-welcome-blurb h2{text-align: center;font-size: 1.8rem;} .taiji-welcome-video{width: 90%;order: -1;} #taiji-main-calendar{padding-top: 60px;width: 96%;margin: 0 auto;} #taiji-calendar-container{display: none;} h2#tjdtitle{text-align: center;} #taiji-events-container{grid-template-columns: 1fr;gap: 1rem;} #taiji-testimonials-container{grid-template-columns: repeat(1,1fr);gap: 1rem;} #about-taiji-descr{grid-template-columns: 1fr;gap: 2rem;} #about-taiji-descr div:nth-of-type(2){order: -1;} #taiji-video-frame{width: 80%;margin: 0px auto 0 auto;padding: 10px;border-radius: 10px 0 10px 0;background-image: linear-gradient(to bottom left, #B93C40, #000);} #daoist-concepts{display: flex;flex-direction:row;justify-content: space-between;width: 60%;min-width: 600px;margin: 100px auto;} #taiji-main-resources{margin-top: 80px;} #taiji-resources-container{grid-template-columns: repeat(1,1fr);} /* Restorative Therapies */ #massage-body{background-size: 140% auto;} #massage-main{background-size: 150% auto;} #massage-main h1{font-size: 2.2rem;margin: 0;text-align: right;} p.massage-phrase{display: none;} #massage-welcome-blurb{margin: 80px auto 30px auto;grid-template-columns: 1fr;} #massage-welcome-blurb h2{text-align: center;font-size: 1.6rem;} .massage-welcome-video{width: 90%;order: -1;} #massage-main_rvsp{margin: 50px auto;} #massage-main_rvsp-container{display: grid;grid-template-columns: 1fr;gap: 2rem;margin-top: 40px;} #massage-main_rvsp-actions{order: -1;} #massage-main_services-descriptions{grid-template-columns: repeat(1,1fr);gap: 0.1rem;width: 90%;margin: 0 auto;} #massage-main_resources-container{grid-template-columns: repeat(1,1fr);gap: 1rem;} #massage-testimonials{width: 96%;margin: 0 auto 120px auto;} #massage-testimonials-container{display: grid;grid-template-columns: repeat(1,1fr);gap: 1rem;padding: 10px;box-sizing: border-box;} #about-massage-therapy-descr{grid-template-columns: 1fr;} #about-massage-therapy-descr div:nth-of-type(2){order: -1;} #about-massage-therapy-descr div:nth-of-type(2) h3{display: none;} /* Privacy */ #privacy-main-container{background-size: 160% auto;} #privacy-descr{width: 90%;margin: 120px auto 100px auto;font-size: 0.9rem;} /* Feng Shui */ video#welcome-fs-video{width: 180%;top: 40px;} #feng-shui-container h1{font-size: 2.5rem;padding-top: 60px;padding-bottom: 10px;text-transform: uppercase;} .fsd-intro{width: 90%;} .fsd-intro blockquote{font-size: 1.3rem;} .fsd-content{grid-template-columns: 1fr;width: 90%;} .feng-shui-strategies p{width: 90%;} .fsd-types{grid-template-columns: 1fr 1fr;text-align: center;width: 90%;} #fsd-video{margin-top: 20px;} #fsd-video-grid{display: grid;gap: 1rem;grid-template-columns: 1fr;align-items: center;width: 90%;} #consultation-steps, #consultation-steps-corporate{gap: 1rem;grid-template-columns:1fr;align-items: center;} /*Promo banners */ .promo-text-btn-grid{grid-template-columns: 1fr;} /* Founders Form */ .form-container {padding: 20px 30px;} } @media only screen and (max-width: 440px) { .snip1214 .plan {width: 100%;} } /* Adiditonal Blocks */