/*-----------------------------------------------------------------------------------

    Template Name: CoursePro - Education Courses School Template
    Template URI: https://themeforest.net/user/themeioan
    Author: Ioan Drozd
    Author URI: https://www.drozd.at
    Description: Education Courses School Template
    Version: 1.3
    Tags: Landing Page, Courses, Learning
    Text Domain: CoursePro

    File: main.css - This is the stylesheet for this theme;

-----------------------------------------------------------------------------------*/

/**
====================[Table of contents]======================

1.  Site Styles
    1.1. Page Styles
    1.2. Site Elements Basic
    1.3. List Style for Why US
    1.4. Post Heading
    1.5. Scroll to Top
2.  Header
    2.1. Navigation
    2.2. Header Content
3.  Main
    3.1. Wrap Background
    3.2. Service
    3.3. Feature
    3.4. Counter
    3.5. Testimonial
    3.6. Teachers
    3.6.1 Teachers Slider
    3.7. Contact
    3.8. Blog
    3.9. Newsletter
    3.10. Icon Socials
    3.11. Pricing
    3.12. Why us
    3.13. Breadcrumb
    3.14. Blog
4.  Footer
5.  CSS Hacks
6.  Media Queries
    6.1. Normal Screen v1 -> (max-width: 1024px)
    6.2. Normal Screen v2 -> (min-width: 992px) and (max-width: 1199px)
    6.3. Laptop -> (min-width: 768px) and (max-width: 991px)
    6.4. Tablet -> (max-width: 767px)
    6.5. Small Tablet -> (max-width: 640px)
    6.6. Mobile v1 -> (max-width: 480px)
    6.7. Mobile v2 -> (max-width: 300px)
    6.8. If Height is to Small

================================================== */

/*-----------------
    @Typography
-----------------*/

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
/* 1. ========================= Site Styles ========================= */

/* 1.1. ========================= Page Styles ========================= */

html {
    font-family: "Poppins", sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    /* Firefox */
    -webkit-font-smoothing: antialiased;
    /* WebKit  */
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    margin: 0;
    color: #777777;
    overflow-x: hidden;
}

h1 {
    font-size: 60px;
    line-height: 1.0833333333333333;
}

h2 {
    font-size: 52px;
    line-height: 1.4444444444444444;
}

h3 {
    font-size: 26px;
    line-height: 1.0833333333333333;
}

h4 {
    font-size: 22px;
    line-height: 1.2380952380952381;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
}

p {
    font-size: 16px;
    color: #777777;
    line-height: 1.625;
    -webkit-hyphens: manual;
    -moz-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

a {
    color: #F99544;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

a:hover {
    text-decoration: none;
    outline: none;
}

a i {
    padding: 0 2px;
}

img {
    max-width: 100%;
}

ol {
    counter-reset: counter;
    padding-left: 0;
}

ol li {
    list-style: none;
    margin-bottom: 1rem;
}

ol li:before {
    counter-increment: counter;
    content: counter(counter);
    font-weight: 500;
    margin-right: 10px;
}

/* COLOR GLOBAL */

h1,
h2,
h3,
h4,
h5,
h6,
.section-title h2,
.section-title h3,
.tbl-pricing .tbl-prc-col .tbl-prc-price,
.tbl-pricing .tbl-prc-col .tbl-prc-list,
#header .nav>li>a,
#header .nav>li>a:hover {
    color: #242424;
}

.wrap-bg-primary,
.course-price,
.carousel-slider.gallery-slider .slick-dots li.slick-active button,
#testimonials .slick-dots li.slick-active button,
.themeioan_event .date,
.color-two,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap .featured-price {
    background: #fb770c;
}

.bar1,
.bar2,
.bar3,
.wrap-bg.wrap-bg-grey,
#teachers .item,
.color-three,
.color-three:hover,
.btn-1c:after,
.themeioan_blog .blog-content,
.footer-subscribe,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap,
.themeioan_event .event-content,
.themeioan_course .blog-content,
.themeioan_blog .blog-content,
#header .navbar-default .navbar-toggle .icon-bar,
.video-btn:hover,
.color-three,
.themeioan_testimonial {
    background-color: #ffffff;
}

.wrap-bg-primary .section-title span,
.wrap-bg-primary .section-title h2,
.wrap-bg-primary .section-title p,
.course-price,
.header-content .header-text,
.header-content .header-text h1,
.header-content .header-text p,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap .featured-price,
#footer,
#footer a,
.footer-text p,
.f-widget-title h4,
.f-widget-link ul li a,
.sigle-address p,
.copyright p,
.themeioan_event .date h4,
.text-white,
.text-white h2,
.section-title.text-white p,
.call-to-action-content h3,
.call-to-action-btn a,
.header-area .header-area-inner .subtitle,
.header-area .header-area-inner .title,
#header .navbar-default .navbar-nav a,
.header-content.page-header-content .page-header-text p,
.video-btn,
.wrap-bg.wrap-bg-parallax,
.color-one:hover,
.color-two,
.color-two:hover,
.btn-1c,
.header-cta .btn.btn-1c,
.footer-social a,
.header-area .header-area-inner p {
    color: #ffffff;
}

a:hover,
#header .navbar-nav>li>a:hover,
#header .navbar-default .navbar-nav>li>a:hover,
.secondary-color,
.section-title span,
.base-color,
#header .navbar-nav a.active,
#header .active,
#header a:hover,
.header-content.page-header-content .page-header-text h1,
.header-content.page-header-content .page-header-text h2,
.header-content.page-header-content .page-header-text h3,
.header-content.page-header-content .page-header-text h4,
.header-content.page-header-content .page-header-text h5,
.header-content.page-header-content .page-header-text h6,
.video-btn:hover,
.themeioan_counter i,
.btn-1c:hover,
.btn-1c:active,
.tbl-pricing .tbl-prc-col .tbl-prc-heading h4,
.tbl-pricing .tbl-prc-col .tbl-prc-list i,
#footer .copyright a,
.address-icon i,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap:hover .tbl-prc-price h5,
.single-features-light .feature_link a,
.readmore,
.themeioan_event ul li i,
#why-us i,
.themeioan_ul_icon i,
.course-viewer ul li i {
    color: #fb770c;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

figure {
    margin: 0px;
}

figure img {
    width: 100%;
}

figure iframe {
    overflow: hidden;
    width: 100% !important;
    background-color: #f4f4f4;
    border: 2px solid #e9e9e9;
}

video {
    width: 100%;
    height: auto;
}

.center-column {
    margin: 70px auto 0px auto;
}

.content-button {
    margin: 60px auto 0px auto;
    max-width: 250px;
}

.themeioan_ul_icon {
    margin-top: 15px;
}

.themeioan_ul_icon li {
    line-height: 33px;
    font-size: 16px;
    color: #777777;
}

.themeioan_ul_icon i,
.course-viewer ul li i {
    padding-right: 3px;
}

.mt-25 {
    margin-top: 25px;
}

.mb-60 {
    margin-bottom: 60px;
}

.text-left {
    text-align: left;
}

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

.text-right {
    text-align: right;
}

.section-text-left p {
    margin-left: 0px !important;
    margin-bottom: 25px !important;
}

.section-text-left h3 {
    margin-bottom: 15px !important;
}

.call-to-action-content h3 {
    font-weight: 700;
    margin: 73px 0 25px;
    font-size: 36px;
    line-height: 1.2;
    text-transform: capitalize;
}

.call-to-action-area img {
    position: absolute;
    right: 0;
    height: 100%;
}

.call-to-action-btn a {
    display: inline-block;
    border: 1px solid #fff;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 19px;
    margin-bottom: 80px;
}

.call-to-action-btn a:hover {
    background: #fff;
}

.call-to-action-btn2 a {
    display: inline-block;
    border: 1px solid #7CC9C8;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 19px;
    margin-bottom: 80px;
}

.call-to-action-btn2 a:hover {
    background: #7CC9C8;
}

.cta-center {
    text-align: center;
    margin: 0px auto;
}

.cta-center p {
    font-size: 18px;
}

.bg-cta {
    background: url(../images/sabor-y-salud/banners/banner-cta.jpg);
    background-position: center;
    background-size: cover;
}

.bg-cta2 {
    background: url(../images/sabor-y-salud/banners/banner-cta-naturaleza.jpg);
    background-position: center;
    background-size: cover;
}

/*tags course*/

.wrap-bg-secondary {
    background-image: linear-gradient(to right, #60687c, rgba(96, 104, 124, 0.81));
}

.themeioan_course {
    transition: transform .3s cubic-bezier(.68, -.55, .265, 1.55);
}

/*shadow hover all*/

.themeioan_course:active,
.themeioan_course:focus,
.themeioan_course:hover,
.single-features-light:hover,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap:hover,
#teachers .item:hover {
    -webkit-box-shadow: 0px 5px 17px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 5px 17px 0px rgba(0, 0, 0, 0.15);
}

/*end shadow*/

.themeioan_course {
    -webkit-box-shadow: 0 0 20px 0 #f2f2f2;
    box-shadow: 0 0 20px 0 #f2f2f2;
    border-radius: 6px;
    overflow: hidden;
}

.themeioan_course .blog-content,
.themeioan_blog .blog-content,
.themeioan_event .event-content {
    padding: 20px;
}

.themeioan_course.course-area .blog-content p {
    margin-bottom: 5px;
}

.themeioan_course .blog-content .title,
.themeioan_blog .blog-content .title,
.themeioan_event .event-content .title {
    font-size: 18px;
    line-height: 28px !important;
    font-weight: 600;
}

.course-single-content p {
    margin-top: 12px;
}

.mb20 {
    margin-bottom: 30px !important;
}

.course-bottom {
    margin-top: 25px;
}

.course-bottom-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
}

.course-avatar {
    width: 30px;
    height: 30px;
    display: inline;
    margin-right: 2px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
}

.course-avatar img {
    border-radius: 100%;
}

.course-bottom-list li {
    width: 50%;
}

.course-duration {
    margin-top: 3px;
    text-align: right;
}

.course-price {
    padding: 0 5px;
    margin-left: 10px;
    border-radius: 3px;
}

.themeioan_course .blog-meta li:last-child {
    margin-right: 0;
}

.themeioan_course .read-more {
    font-size: 12px;
}

.course-photo img {
    width: 100%;
    height: auto;
}

.course-title {
    margin-top: 7px;
}

.course-statistic {
    margin-bottom: 10px;
}

.course-star {
    float: left;
}

.course-star i {
    color: #ffb606;
    font-size: 14px;
    margin-right: 5px;
    padding-top: 8px;
}

.course-viewer {
    text-align: right;
}

.course-viewer li {
    color: #989898;
    font-size: 14px;
    padding: 5px 0px 5px 15px;
    border-radius: 3px;
}

.course-viewer ul li {
    list-style: none;
    display: inline-block;
}

.course-single:nth-last-of-type(2n+2) .tags a {
    background-color: rgb(253, 239, 219);
    color: #ffb606;
}

.course-single:nth-last-of-type(3n+3) .tags a {
    background-color: rgb(227, 248, 255);
    color: #29a1c1;
}

.required {
    color: #f9331e;
}

.animation {
    visibility: hidden;
}

.animated {
    visibility: visible;
}

/* 1.2. Site Elements Basic*/

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    height: 52px;
    color: #b3bcc6;
    font-size: 15px;
    padding: 0px 20px;
    border: 2px solid #dadee2;
    outline: none !important;
}

textarea {
    height: auto;
    padding: 13px 20px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    color: #000000;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
textarea:disabled {
    color: #b9b9b9;
    background-color: #f0f0f0;
    border: 2px solid #f0f0f0;
}

.btn-custom,
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    line-height: 45px;
    font-weight: 500;
    padding: 12px 30px 12px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    outline: none !important;
    -webkit-transition: background-color .4s ease, border .4s ease, color .4s ease;
    -moz-transition: background-color .4s ease, border .4s ease, color .2s ease;
    -ms-transition: background-color .4s ease, border .4s ease, color .2s ease;
    -o-transition: background-color .4s ease, border .4s ease, color .2s ease;
    transition: background-color .4s ease, border .4s ease, color .4s ease;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button {
    line-height: 1;
    padding-top: 16px;
    padding-bottom: 16px;
}

.btn-custom:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
    outline: none !important;
    background: #121a2f;
}

.btn-custom:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
button:disabled {
    color: #fff !important;
    background-color: #bababa;
    border-bottom: 3px solid #bababa;
    outline: none !important;
}

.btn-custom.btn-icon {
    position: relative;
}

.btn-custom.btn-icon .fa {
    position: absolute;
    top: 9px;
    left: 30px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    line-height: 29px;
    text-align: center;
    border: 2px solid #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

button.close {
    font-family: Arial, Helvetica, sans-serif;
    color: #404040 !important;
    font-size: 20px;
    margin: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

button.close:hover {
    color: #1a1a1a;
    background: none;
    border: 0px;
}

select {
    height: auto;
    font-weight: 400;
    padding: 8px 12px;
    border: 2px solid #EEE;
    outline: none;
}

select:focus {
    outline: none;
}

.aligncenter {
    display: block;
    margin: 0px auto 20px auto;
}

.alignright {
    float: right;
    margin: 10px 0 10px 10px;
}

.alignleft {
    float: left;
    margin: 10px 10px 10px 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

.textcenter {
    text-align: center;
}

.textright {
    text-align: right;
}

.textleft {
    text-align: left;
}

.alert h4 {
    margin-bottom: 10px;
}

.tooltip {
    text-transform: lowercase;
}

.tooltip-inner {
    padding: 6px 12px 5px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

/* 1.3. ========================= List Style for Why US ========================= */

/* 1.4. ========================= Post Heading ========================= */

.cattaller p {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    padding-top: -4px;
    text-transform: capitalize;
    display: block;
    color: #fb770c;
}

f .post-heading-center {
    text-align: center;
}

.post-heading-left {
    margin-bottom: 25px;
}

.section-title.with-p {
    margin-bottom: 20px;
}

.section-title span {
    font-size: 16px;
    font-weight: 600;
    line-height: 55px;
    padding-bottom: 5px;
    text-transform: capitalize;
    display: block;
}

.section-title h2 {
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: capitalize;
    position: relative;
}

.section-title h3 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 600;
    margin-bottom: 25px;
}

.section-title p {
    max-width: 650px;
    font-size: 16px;
    line-height: 26px;
    color: rgba(36, 36, 36, 0.8);
    margin: 0 auto;
}

.sep-border {
    height: 1px;
    background-color: #e4e4e4;
}

/* 1.5. ========================= Scroll to Top ========================= */

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 40px;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: #fb770c url(../images/cd-top-arrow.svg) no-repeat center 50%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
    cursor: pointer;
    border-radius: 100px;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out,
.no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
}

.cd-top.cd-is-visible {
    /* the button becomes visible */
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-fade-out {
    /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
    /*opacity: .5;*/
}

.no-touch .cd-top:hover {
    /* background-color: #e86256;*/
    opacity: 1;
}

@media only screen and (min-width: 768px) {
    .cd-top {
        right: 20px;
        bottom: 20px;
    }
}

@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 40px;
        width: 40px;
        right: 30px;
        bottom: 30px;
    }
}

/* 2. ========================= Header ========================= */

.header-area .header-area-inner .subtitle {
    font-size: 40px;
    line-height: 60px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.header-area .header-area-inner .title {
    font-size: 50px;
    line-height: 60px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    margin-bottom: 27px;
}

.header-area .header-area-inner p {
    font-size: 16px;
    line-height: 26px;
    max-width: 550px;
}

.header-cta {
    margin-left: 45px;
}

.header-cta .btn.btn-1c {
    font-weight: 600;
    line-height: 19px;
}

/* 2.1. ========================= Navigation ========================= */

.transparent-header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 999;
    transition: .3s;
    padding: 15px 0px;
}

.transparent-header.sticky-menu {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    box-shadow: 0 0 60px 0 rgba(0, 0, 0, .07);
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    z-index: 999;
    background-image: linear-gradient(to right, #60687c, rgba(96, 104, 124, 0.81));
    padding: 0;
}

.header-style-two {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#header .navbar,
#header .navbar-brand,
#header .navbar-brand img {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

#header .navbar {
    width: 100%;
    z-index: 1000;
}

#header .navbar-default {
    border: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#header .navbar-brand {
    height: auto;
}

#navbar-header {
    padding-top: 3px;
}

#header .ml-auto {
    left: auto !important;
    right: 0px;
}

#header .navbar-brand img {
    max-height: 100px;
    height: auto;
}

#header .navbar-default .navbar-collapse {
    border: 0px;
}

#header .nav>li>a {
    display: block;
    font-weight: 500;
    font-size: 13px;
    line-height: 22px;
    padding: 17px 0px 18px;
    margin: 0px 13px;
}

#header .nav>li:last-child>a {
    margin-right: 0px;
}

#header .navbar-nav {
    margin-top: 0px;
    margin-bottom: 0px;
}

#header .navbar-default .navbar-nav>li>a {
    background: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 27px;
}

#header .navbar-nav>li>a:hover,
#header .navbar-default .navbar-nav>li>a:hover {
    border-color: #FFF;
}

#header .navbar-nav>.active>a,
#header .navbar-default .navbar-nav>.active>a {
    background-color: transparent;
    background-image: none;
    background-image: none;
    background-image: none;
    background-repeat: no-repeat;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
    filter: none;
    border-color: #FFF;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#header .navbar-toggle {
    margin-top: 13px;
    border: 0px;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 5px;
}

.burger-icon {
    display: none;
    cursor: pointer;
    padding: 0px 15px 0px 10px;
}

.navbar-toggler,
.navbar-toggler:hover {
    border: 0px;
    background: none !important;
    padding: 10px;
    z-index: 2;
    display: block;
}

.burger-icon.navbar-toggler {
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    z-index: 1;
    width: 35px;
    height: 5px;
    margin: 6px 0;
    transition: .6s;
    border-radius: 2px;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

/* 2.2. ========================= Header Content ========================= */

.bg-home-bg8 {
    background: url("../images/content/landing/slider8.jpg") no-repeat;
}

.slider-bg0n {
    background: url("../images/content/slider/slider8n.jpg") no-repeat;
}

.slider-bg0 {
    background: url("../images/sabor-y-salud/slider/slider-cocteleria-experiencia.jpg") no-repeat;
}

.slider-bg1 {
    background: url("../images/sabor-y-salud/slider/slider-enologia-cata-grupo.jpg") no-repeat;
}

.slider-bg2 {
    background: url("../images/content/landing/slider3.jpg") no-repeat;
}

.slider-bg3 {
    background: url("../images/content/slider/slider3.jpg") no-repeat;
}

.slider-bg4 {
    background: url("../images/sabor-y-salud/slider/slider-taller-grupo-cocinando.jpg") no-repeat;
}

.header-content {
    padding: 150px 0px 50px 0px;
    position: relative;
    background-size: cover;
    width: 100%;
    height: 60% !important;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    z-index: 1;
}

.header-content:after {
    position: absolute;
    z-index: -1;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.header-content.page-header-content {
    border-bottom: 0px;
}

.header-content .header-text {
    padding-top: 150px;
}

.header-content .header-text .btn-section {
    margin-top: 50px;
}

.header-content .header-slider {
    background: url("../images/base-header-slider.png") no-repeat;
    background-size: 100%;
    padding: 23.9% 7.1% 30% 6.6%;
    margin-bottom: -40px;
}

.header-content.page-header-content .page-header-text {
    text-align: center;
    background-color: #0375af;
    padding: 15px 0px 20px;
    border-top: 1px solid #2e4357;
    border-bottom: 1px solid #2e4357;
}

.header-content.page-header-content .page-header-text h1,
.header-content.page-header-content .page-header-text h2,
.header-content.page-header-content .page-header-text h3,
.header-content.page-header-content .page-header-text h4,
.header-content.page-header-content .page-header-text h5,
.header-content.page-header-content .page-header-text h6 {
    margin: 0px;
}

.header-content.page-header-content .page-header-text h1 {
    font-size: 30px;
    line-height: 36px;
}

.header-content.page-header-content .page-header-text p {
    font-size: 15px;
    margin: 5px 0px 0px;
}

.header-content .btn-section .btn-custom {
    display: inline-block;
    padding: 0px 20px;
}

.video-relative {
    position: relative;
    display: inline-block;
}

.video-btn i {
    color: #121a2f;
    font-size: 13px;
    line-height: 50px;
    margin-left: 4px;
}

.video-btn {
    height: 47px;
    width: 47px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 1px;
    left: 65px;
    text-align: center;
    margin: -30px 0 0 -30px;
    border-radius: 100px;
    z-index: 1
}

.orangebg {
    border: 1px solid #fff;
}

.video-btn .ripple {
    position: absolute;
    width: 110px;
    height: 110px;
    z-index: -1;
    left: 50%;
    top: 50%;
    opacity: 0;
    margin: -55px 0 0 -55px;
    border-radius: 100px;
    -webkit-animation: ripple 1.8s infinite;
    animation: ripple 1.8s infinite
}

@-webkit-keyframes ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ripple {
    0% {
        opacity: 1;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.video-btn .ripple:nth-child(2) {
    animation-delay: .4s;
    -webkit-animation-delay: .4s
}

.video-btn .ripple:nth-child(3) {
    animation-delay: .7s;
    -webkit-animation-delay: .7s
}

/* Slider Header */

.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 0px;
    position: absolute;
    left: 20px;
    right: 0;
    bottom: 20px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 20px;
    height: 2px;
    margin: 5px 7px;
    background: #869791;
    border-radius: 0px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #ffffff;
    height: 3px;
}

/* Center Position */

.position-center .header-text {
    text-align: center;
}

.position-center .header-text p {
    margin: 0px auto;
}

.play-center .video-btn {
    left: 0px;
}

/* 3. ========================= Main ========================= */

/* 3.1. ========================= Wrap Background ========================= */

.wrap-bg {
    padding: 100px 0px;
}

.wrap-bg.bg-bottom-zero {
    padding: 90px 0px 0px 0px;
}

.wrap-bg.wrap-bg-dark {
    background-color: #f3f4f4;
}

.wrap-bg.wrap-bg-primary {
    background-color: #558af2;
}

.wrap-bg.wrap-bg-parallax {
    background-color: #333;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.wrap-bg.wrap-bg-parallax .wrap-bg-overlay {
    background: url("../images/base-wrap-bg-parallax.png") repeat;
}

.wrap-bg.wrap-bg-parallax .socialfooter.wrap-bg-overlay {
    padding: 150px 0px 150px 0px;
}

.wrap-padding {
    padding: 60px;
}

.wrap-bg .carousel-slider {
    margin-bottom: 40px;
}

.wrap-bg#testimonials .carousel-slider {
    margin-bottom: 15px !important;
}

.wrap-bg .btn-section .btn-custom {
    margin: 0px 10px;
}

.wrap-page {
    padding: 100px 0px 60px;
    border-bottom: 1px solid #f0f0f0;
}

.col-text .list-style {
    padding-top: 10px;
}

.row-custom .col-left,
.row-custom .col-center,
.row-custom .col-right {
    float: left;
    padding: 0px 15px;
}

.row-custom .col-left,
.row-custom .col-right {
    width: 38%;
    padding-top: 40px;
}

.row-custom .col-center {
    width: 24%;
}

.row-custom .col-center img {
    width: 100%;
}

.row-custom .col-right {
    text-align: right;
}

/* 3.2. ========================= Service ========================= */

.themeioan_service {
    text-align: center;
    margin-bottom: 40px;
    padding: 60px 30px;
    margin: 0 0 30px 0;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 30px -12px #c9c9c9;
    box-shadow: 0 0 30px -12px #c9c9c9;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.themeioan_service i {
    margin-bottom: 20px;
}

.themeioan_service h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: capitalize;
}

/* 3.2. ========================= Transparent!!!! ========================= */

.move {
    -webkit-transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    transition: .5s;
}

.single-features-light:hover .move {
    -webkit-transform: translateY(-22%);
    -moz-transform: translateY(-22%);
    -ms-transform: translateY(-22%);
    -o-transform: translateY(-22%);
    transform: translateY(-22%);
}

.single-features-light:hover i.secondary-color {
    opacity: 0;
}

.feature_link a,
.readmore {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
}

.feature_link {
    opacity: 0;
    -webkit-transition: .4s;
    -o-transition: .4s;
    -moz-transition: .4s;
    transition: .4s;
    margin-bottom: -15%;
}

.single-features-light:hover .feature_link {
    opacity: 1;
}

/*transition for all hover element*/

.single-features-light,
.single-features-light i,
.themeioan_course,
.tbl-pricing .tbl-prc-col .tbl-prc-wrap h5,
#teachers .item {
    webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*end transition*/

.single-features-light {
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #eff2f5;
    background: #fff;
    overflow: hidden;
    min-height: 230px;
}

.single-features-light:hover {
    border: 1px solid #fff;
}

.single-features-light i {
    margin-top: 7px;
}

.single-features-light a {
    color: #000000;
}

.single-features-light h4 {
    font-size: 20px;
    color: #333333;
    margin-top: 15px;
    margin-bottom: 15px;
}

.single-features-light p {
    padding: 0 20px;
}

.services .single-features-light {
    margin: 15px 0px;
}

/* 3.3. ========================= Feature ========================= */

.themeioan_feature {
    position: relative;
    float: left;
    width: 100%;
    min-height: 90px;
    margin-bottom: 40px;
}

.themeioan_feature i {
    position: absolute;
    width: 80px;
    top: 5px;
    left: 0px;
}

.themeioan_feature .feature-text {
    padding-left: 100px;
}

.themeioan_feature .feature-text h4 {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 10px;
    font-weight: 700;
}

.row-custom .col-right .themeioan_feature i {
    left: auto;
    right: 0px;
}

.row-custom .col-right .themeioan_feature .feature-text {
    padding: 0px 100px 0px 0px;
}

/* 3.4. ========================= Counter ========================= */

.themeioan_counter {
    color: #121a2f;
    text-align: center;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.themeioan_counter h4 {
    font-size: 42px;
    line-height: 48px;
    margin: 20px 0px 0px;
    font-weight: 700;
}

.themeioan_counter p {
    margin: 0px;
}

/* 3.5. ========================= Testimonial =========================*/

#testimonials {
    background: url("../images/content/landing/testimonial.jpg");
    background-size: cover;
}

.themeioan_testimonial {
    margin-bottom: 40px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 6px;
}

.testimonail-content {
    margin-top: 80px;
    padding: 85px 20px 45px 20px;
}

.themeioan_testimonial .testimonial-text {
    border-radius: 6px 6px 0px 0px;
}

.themeioan_testimonial img {
    position: absolute;
    top: -80px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    width: 150px;
    height: 150px;
    max-width: 150px;
    border-radius: 50%;
    border: 3px solid #fff;
}

.slick-list {
    margin: -15px 0px -55px 0px !important;
}

.themeioan_testimonial .testimonial-text p {
    margin: 20px;
}

.themeioan_testimonial .testimonial-author {
    position: relative;
    border-radius: 0px 0px 6px 6px;
}

.themeioan_testimonial .testimonial-author h4 {
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin: 0px 0px;
}

.themeioan_testimonial .testimonial-author p {
    font-size: 14px;
    line-height: 26px;
}

.testimonial-author .course-star {
    float: none;
}

#testimonials .slick-dots {
    bottom: 60px !important;
}

/* 3.6. ========================= Teachers  ========================= */

#teachers {
    text-align: center;
}

#teachers .item {
    text-align: center;
    padding: 45px 20px;
    box-shadow: none;
    border-radius: 4px;
    margin: 15px 0;
}

#teachers img {
    max-width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
}

#teachers .item h5 {
    font-size: 20px;
    padding: 35px 00px 0px 10px;
    font-weight: 600;
    margin-bottom: 0px;
}

#teachers .item span {
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 26px;
}

#teachers .item p {
    padding: 16px 20px 10px;
}

#teachers .carousel-slider .slick-preva,
#teachers .carousel-slider .slick-nextb {
    width: 40px;
    height: 40px;
    background-color: #d0d0d0;
    margin-top: -20px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    top: 0px;
}

#teachers .carousel-slider .slick-prev {
    right: 20px !important;
    left: 0 !important;
    background: #d0d0d0 url("../images/carousel-slider-arrow-prev.png") no-repeat center center;
}

#teachers .carousel-slider .slick-next {
    right: 20px;
    background: #d0d0d0 url("../images/carousel-slider-arrow-next.png") no-repeat center center;
}

/* 3.6.1 ========================= Teachers Slider ========================= */

.carousel-slider.gallery-slider .slick-dots {
    bottom: -40px;
    line-height: 0px;
}

.carousel-slider.gallery-slider .slick-dots li,
#testimonials .slick-dots li button {
    width: auto;
    height: auto;
}

.carousel-slider.gallery-slider .slick-dots li button,
#testimonials .slick-dots li button {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #121a2f;
    padding: 0px;
    margin: 0px 3px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 14px;
}

.carousel-slider.gallery-slider .slick-dots li button:before,
#testimonials .slick-dots li button:before {
    display: none;
}

.carousel-slider {
    display: block !important;
}

.color-one {
    background: transparent;
    border: 1px solid #c4c4c4;
    color: #333333;
}

.color-one:hover {
    border: 1px solid #121a2f;
    background: #121a2f;
}

.color-three {
    border: 1px solid #ffffff;
    color: #fff;
    background: none;
}

.color-three:hover {
    color: #000;
    background: #fff;
    border: 1px solid #ffffff;
}

/* General button style (reset) */

.btn {
    color: inherit;
    cursor: pointer;
    padding: 8px 25px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none;
    position: relative;
}

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* Button 1c */

.btn-1c {
    border: 1px solid #fff;
}

.btn-1c:after {
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
}

.btn-1c:hover:after,
.btn-1c:active:after {
    width: 100%;
}

.slick-dots li {
    margin: 0px !important;
    width: 8px;
    height: 8px;
}

.slick-dots li button:before {
    font-size: 12px !important;
}

/* 3.8. ========================= Blog ========================= */

.themeioan_blog {
    border: 1px solid #f2f2f2;
    -webkit-box-shadow: 0 0 20px 0 #f2f2f2;
    box-shadow: 0 0 20px 0 #f2f2f2;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 30px;
}

.themeioan_blog .read-more {
    font-size: 12px;
}

.blog-photo {
    position: relative;
}

.blog-photo img {
    width: 100%;
    height: auto;
}

.themeioan_blog .blog-content .course-viewer,
#blog-detail .course-viewer {
    text-align: left;
    margin-bottom: 12px;
}

#blog-detail .course-viewer li {
    padding: 5px 15px 5px 0px;
}

.themeioan_blog .blog-content .course-viewer li {
    padding: 0px 20px 0px 0px;
}

.themeioan_blog .blog-content h5 {
    margin-bottom: 15px;
}

.themeioan_blog .readmore,
.themeioan_blog .readmore i {
    font-size: 16px;
    line-height: 15px;
}

/* 3.9. ========================= Newsletter ========================= */

#newsletter {
    background: #f3f4f4;
}

#newsletter .bg-white {
    background: #fff;
}

.newslleter-call {
    position: relative;
}

#newsletter input {
    border-radius: 100px;
}

#newsletter .newsletter-submit {
    top: 0%;
    z-index: 1;
    right: 0px;
    position: absolute;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px !important;
    max-width: 120px;
    cursor: pointer;
    border: 2px solid #fb770c;
}

#newsletter .newsletter-submit:hover {
    border: 2px solid #121a2f;
}

/*Newsletter Box*/

.footer-subscribe {
    border-radius: 10px;
    padding: 45px 30px;
    box-shadow: 0px 5px 36.34px 9.66px rgba(0, 0, 0, 0.09);
    position: relative;
    bottom: -70px;
    z-index: 99;
}

.themeioan-form-newsletter input[type="text"],
.themeioan-form-newsletter input[type="email"] {
    width: 100%;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    color: #000;
}

.themeioan-form-newsletter .button {
    width: 100%;
    max-width: 200px;
    cursor: pointer;
}

.newsletter-submit {
    border-radius: 0px !important;
    border-top-right-radius: 25px !important;
    border-bottom-right-radius: 25px !important;
}

.subscribe-text {
    margin: 0px;
}

@media (min-width: 770px) {
    .footer-subscribe {
        padding: 60px 100px;
        top: 90px;
    }
}

/* 3.10. ========================= Icon Socials ========================= */

.footer-social a {
    font-size: 14px;
    margin-right: 12px;
}

.icon-round-white i {
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    padding: 8px;
}

/* 3.11. ========================= Pricing ========================= */

.tbl-pricing .tbl-prc-col {
    text-align: center;
}

.tbl-pricing .tbl-prc-col .tbl-prc-wrap {
    padding: 45px 0px;
    text-align: center;
    border-radius: 6px;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    overflow: hidden;
    position: relative;
}

.tbl-pricing .tbl-prc-col .tbl-prc-wrap .featured-price {
    position: absolute;
    top: 71px;
    right: -25px;
    padding: 8px 0px;
    font-size: 13px;
    text-align: center;
    width: 140px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
}

.tbl-pricing .tbl-prc-col .tbl-prc-heading {
    color: #404040;
    font-size: 13px;
    line-height: 20px;
    padding-bottom: 5px;
    margin: 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-heading h4 {
    font-weight: 600;
    font-size: 26px;
    line-height: 36px;
    margin: 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-heading p {
    margin: 5px 0px 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-price {
    display: inline-block;
    width: 120px;
    height: 120px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    background-color: #f3f7fe;
    margin: 15px 0px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.tbl-pricing .tbl-prc-col .tbl-prc-price h5 {
    font-size: 42px;
    line-height: 44px;
    margin: 26px 0px 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-price h5 sup {
    font-size: 22px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-price p {
    margin: 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-list {
    padding: 0px;
    margin: 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-list li {
    list-style-type: none;
    margin: 15px 0;
}

.tbl-pricing .tbl-prc-col .tbl-prc-list li:last-child {
    border-bottom: 0px;
}

.tbl-prc-list h5 {
    margin-top: 5px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-footer {
    padding-top: 15px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-footer .btn-custom {}

.tbl-pricing .tbl-prc-col.tbl-prc-recommended {
    padding-top: 0px;
    padding-bottom: 0px;
}

.tbl-pricing .tbl-prc-col .tbl-prc-list i {
    margin-right: 5px;
}

.tbl-pricing .tbl-prc-col.tbl-prc-recommended .tbl-prc-list li:last-child {
    border-bottom: 0px;
}

/* 3.12. ========================= WHY US ========================= */

#why-us .why-us-left-bg {
    background-image: url("../images/content/landing/about.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#why-us .whyus-style-two.why-us-left-bg {
    background-image: url("../images/content/breadcrumb/home2-about.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#why-us .wrap-padding {
    max-width: 650px;
}

/* 3.13. ========================= BANNER BREADCRUMB ========================= */

.lernen_breadcrumb .breadcrumbs span a:after {
    background-color: #fb770c;
}

.lernen_banner {
    padding: 230px 0 130px;
    background-image: linear-gradient(to right, #121a2f, rgba(20, 41, 65, 0.81));
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center center !important;
    text-align: center;
}

.lernen_banner_title {
    text-align: center;
    margin: 0px auto;
    padding: 0 20px;
}

.lernen_breadcrumb {
    margin-top: 25px;
}

.lernen_banner_title h1 {
    font-size: 40px;
    font-weight: 700;
    color: #fff
}

.lernen_breadcrumb .breadcrumbs {
    margin: 0;
    background: 0 0;
    font-size: 14px;
    color: #FB770C;
}

.lernen_breadcrumb .breadcrumbs span a {
    color: #fff;
    -o-transition: all .3s;
    transition: all .3s
}

.lernen_breadcrumb .breadcrumbs span a:hover {
    color: #fff;
}

.lernen_breadcrumb .breadcrumbs span.last-item {
    color: #cacaca;
}

.lernen_breadcrumb .breadcrumbs span.separator {
    display: none !important;
}

.lernen_breadcrumb .breadcrumbs span a {
    position: relative;
    display: inline-block;
    padding-right: 20px;
}

.lernen_breadcrumb .breadcrumbs span a:after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    position: absolute;
    right: 5px;
    top: 8px;
}

.lernen_breadcrumb .breadcrumbs span.separator {
    margin: 0 10px
}

/* 3.14. ========================= BLOG ========================= */

#blog-detail #teachers {
    border: 1px solid #f2f2f2;
    padding: 20px 40px;
    border-radius: 5px;
    margin-bottom: 25px;
}

#blog-detail #teachers img {
    margin-bottom: 25px;
}

#blog-detail #teachers h5 {
    margin-bottom: 15px;
}

/* 4. ========================= Footer ========================= */

#footer {
    font-size: 14px;
}

#footer a {
    position: relative;
}

.footer-text p {
    line-height: 1.9;
    margin-bottom: 0;
}

.footer-top .row {
    padding: 160px 0px 80px 0px;
}

.offnewsletter.footer-top .row {
    padding: 80px 0px 80px 0px;
}

.footer-top .row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.f-widget-title h4 {
    font-size: 20px;
    padding-bottom: 15px;
    position: relative;
}

.f-widget-link ul li {
    margin-bottom: 8px;
}

.f-widget-link ul li:hover a {
    padding-left: 10px;
}

.f-widget-link ul li:last-child {
    margin-bottom: 0px;
}

.f-widget-link ul li a {
    display: block;
    font-size: 14px;
    text-transform: capitalize;
}

.sigle-address {
    margin-bottom: 16px;
}

.address-icon {
    float: left;
    display: block;
    margin-right: 10px;
}

.sigle-address p {
    overflow: hidden;
    display: block;
    margin-bottom: 0;
    line-height: 1.5;
}

.copyright p {
    margin: 0;
    font-size: 14px;
    padding: 20px 0;
}

/* 3.8. ========================= Event ========================= */

.themeioan_event {
    border: 1px solid #f2f2f2;
    -webkit-box-shadow: 0 0 20px 0 #f2f2f2;
    box-shadow: 0 0 20px 0 #f2f2f2;
    border-radius: 6px;
    overflow: hidden;
}

.themeioan_event .read-more {
    font-size: 12px;
}

.event img {
    width: 100%;
    height: auto;
}

.themeioan_event .event-content p {
    margin-bottom: 5px;
}

.themeioan_event .event-content .btn-section {
    margin: 40px 0px 20px 0px;
    text-align: center;
}

.themeioan_event .course-viewer {
    text-align: left;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    margin: 20px 0px;
    padding: 5px 0px;
}

.themeioan_event .course-viewer li {
    padding: 5px 15px 5px 0px;
}

/*event*/

.themeioan_event {
    position: relative;
}

.themeioan_event .date {
    padding: 10px 15px;
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 1;
    border-radius: 5px;
    text-align: center;
}

.themeioan_event .date h4 {
    font-size: 14px;
    margin: 0;
    text-transform: uppercase;
}

.themeioan_event .date h4 span {
    display: block;
    font-size: 40px;
    font-weight: 900;
}

/* 6. ========================= Media Queries ========================= */

@media (max-width: 991px) {
    .header-cta .btn.btn-1c {
        display: none;
    }
    .f-widget-title {
        margin-top: 25px;
    }
    .footer-subscribe {
        padding: 30px 50px;
        top: 50px;
    }
    h5.subscribe-text {
        font-size: 16px;
    }
    .themeioan_blog .blog-content .course-viewer li {
        padding: 0px 10px 0px 0px;
    }
    .single-features-light p {
        padding: 0 5px;
    }
}

/* 6.1. ========================= Media Queries Normal Screen v1 ========================= */

@media (max-width: 1024px) {
    #download,
    #counter,
    #header {
        background-attachment: scroll !important;
        background-position: center top !important;
    }
}

/* 6.2. ========================= Media Queries Normal Screen v2  ========================= */

@media (min-width: 992px) and (max-width: 1199px) {
    .course-bottom-list {
        font-size: 11px;
    }
    .course-avatar .course-duration span {
        font-size: 11px;
    }
    #header .navbar-brand {
        padding-left: 18px;
        padding-right: 18px;
    }
    #header .nav>li>a {
        margin: 0px 10px;
    }
    #header .header-content .header-text {
        padding-top: 20px;
    }
    .col-text.padding-top10,
    .col-text.padding-top20,
    .col-text.padding-top30,
    .col-text.padding-top40,
    .col-text.padding-top50,
    .col-text.padding-top60 {
        padding-top: 0px !important;
    }
    .row-custom .col-left,
    .row-custom .col-right {
        padding-top: 0px;
    }
    .themeioan_testimonial .testimonial-author {
        padding: 15px 30px 15px 20px;
    }
    .themeioan_testimonial .testimonial-author img {
        right: 20px;
    }
    .icon-socials a {
        margin: 0px 14px 10px;
    }
    .themeioan_blog .blog-content .course-viewer li {
        font-size: 12px;
    }
    .themeioan_blog .blog-content .course-viewer li {
        padding: 0px 5px 0px 0px;
    }
    .themeioan_event .course-viewer li {
        font-size: 13px;
        padding: 5px 7px 5px 0px;
    }
}

/* 6.3. ========================= Media Queries Laptop ========================= */

@media (min-width: 768px) and (max-width: 991px) {
    .wrap-padding {
        padding: 45px;
    }
    h1 {
        font-size: 26px;
    }
    .tbl-pricing .tbl-prc-col .tbl-prc-wrap {
        padding-top: 50px;
    }
    .tbl-pricing .tbl-prc-col .tbl-prc-list li {
        font-size: 12px;
    }
    #header .nav>li>a {
        margin: 0px 10px;
        font-size: 14px !important;
    }
    .col-text.padding-top10,
    .col-text.padding-top20,
    .col-text.padding-top30,
    .col-text.padding-top40,
    .col-text.padding-top50,
    .col-text.padding-top60 {
        padding-top: 0px !important;
    }
    .row-custom .col-left,
    .row-custom .col-right {
        padding-top: 0px;
    }
    .themeioan_testimonial .testimonial-author {
        padding: 10px 20px 10px 15px;
    }
    .themeioan_testimonial .testimonial-author img {
        right: 15px;
    }
    .icon-socials a {
        margin: 0px 8px 10px;
    }
}

/* 6.4. ========================= Media Queries Tablet ========================= */

@media (max-width: 767px) {
    .header-area .header-area-inner .title,
    .header-area .single-header-carousel-item .title {
        font-size: 36px;
        line-height: 46px;
    }
    .header-area .header-area-inner .subtitle,
    .header-area .single-header-carousel-item .subtitle {
        font-size: 25px;
        line-height: 40px;
    }
    #header .header-content .header-slider {
        margin: 0 60px;
        padding: 16.9% 6.1% 30% 5.6%;
    }
    .header-content .header-text {
        padding-top: 0px;
    }
    .burger-icon {
        display: block;
    }
    #features .col-center {
        margin: 0 60px;
    }
    .single-features-light {
        margin: 15px 0px;
    }
    #screenshots .slick-list {
        margin: 0 60px;
    }
    .themeioan-form-contact {
        width: auto;
    }
    .blog-single,
    .info {
        margin-bottom: 30px;
    }
    .tbl-pricing .tbl-prc-col {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 30px;
    }
    .tbl-pricing .tbl-prc-col.tbl-prc-recommended .tbl-prc-heading {
        padding-top: 0px;
    }
    .tbl-pricing .tbl-prc-col.tbl-prc-recommended .tbl-prc-footer {
        padding-bottom: 0px;
    }
    #header .navbar,
    #header .navbar-brand,
    #header .navbar-brand img {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }
    .navbar {
        padding: 0px;
    }
    #header .navbar-default .navbar-collapse {
        background: #fff;
    }
    #header .navbar-default .navbar-nav>li>a {
        color: #242424;
    }
    #header .navbar-default .navbar-nav>li>ul>li>a,
    #header .navbar-default .navbar-nav>li>ul>li>ul>li>a,
    #header .navbar-default .navbar-nav>li>ul>li>ul>li>ul>li>a {
        color: #242424;
        background: none;
        font-weight: 500;
        font-size: 14px;
        line-height: 27px;
        padding: 10px 15px 10px 20px;
        margin: 0px;
        border-top: 0px;
        text-align: left;
        border-bottom: 1px solid #f2f2f2 !important;
        display: block;
    }
    #header .navbar-default .navbar-nav>li>ul,
    #header .navbar-default .navbar-nav>li>ul>li>ul,
    #header .navbar-default .navbar-nav>li>ul>li>ul>li>ul {
        display: none;
        list-style: none;
    }
    .show-sub-menu {
        display: block !important;
    }
    .subnav {
        position: Relative;
    }
    .nav__expand {
        position: absolute;
        right: 0px;
        top: 0px;
        display: block;
        text-align: right;
        padding: 12px 20px;
        cursor: pointer;
        width: 100%;
    }
    .nav__expand i {
        color: #272727;
    }
    #header .navbar,
    #header .nav {
        height: auto;
    }
    #header .container>.navbar-header,
    #header .container-fluid>.navbar-header {
        height: 80px;
    }
    #header .navbar-brand,
    #header .navbar.affix .navbar-brand {
        background-color: transparent;
        padding: 24px 0px 13px 15px;
    }
    #header .navbar-brand img {
        height: 34px;
    }
    #header .nav>li>a,
    #header .nav>li>a:hover {
        padding: 10px 15px;
        margin: 0px;
        border-top: 0px;
        text-align: left;
        border-bottom: 1px solid #f2f2f2 !important;
    }
    #header .header-content .header-text {
        text-align: center;
        padding-top: 0px;
        padding-bottom: 60px;
    }
    #header .header-content .col-xs-offset-1 {
        padding: 0px 120px;
        margin: 0px;
    }
    .wrap-bg .col-xs-offset-1,
    .wrap-page .col-xs-offset-1 {
        margin: 0px;
    }
    .wrap-bg .btn-section .btn-custom {
        display: inline-block;
        line-height: 24px;
        padding-top: 12px;
        padding-bottom: 13px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .col-text.padding-top10,
    .col-text.padding-top20,
    .col-text.padding-top30,
    .col-text.padding-top40,
    .col-text.padding-top50,
    .col-text.padding-top60 {
        padding-top: 0px !important;
    }
    .row-custom .col-left,
    .row-custom .col-center,
    .row-custom .col-right {
        display: block;
        width: auto;
        padding-top: 0px;
    }
    .row-custom .col-right {
        text-align: left;
    }
    .row-custom .col-right .themeioan_feature i {
        left: 0px;
        right: auto;
    }
    .row-custom .col-right .themeioan_feature .feature-text {
        padding: 0px 0px 0px 100px;
    }
    .icon-socials a {
        margin: 0px 5px 10px;
    }
    .wrap-bg {
        padding: 60px 0px;
    }
    .wrap-bg.bg-bottom-zero {
        padding: 60px 0px 0px 0px;
    }
    #download a {
        display: block;
        max-width: 250px;
        margin: 20px auto;
    }
    h1 {
        font-size: 26px;
    }
    h2 {
        font-size: 26px;
    }
    .section-title h2,
    .section-title h3,
    .call-to-action-content h3 {
        font-size: 30px;
        line-height: 40px;
    }
    .themeioan_course .blog-content .title,
    .themeioan_blog .blog-content .title,
    .themeioan_event .event-content .title {
        font-size: 18px;
        line-height: 28px;
    }
    #why-us .why-us-left-bg {
        display: none;
    }
    .subscribe-text {
        margin-bottom: 25px;
    }
    .f-widget-title h4 {
        padding-bottom: 5px;
    }
    .content-button {
        margin-top: 0px !important;
    }
    .wrap-padding {
        padding: 35px;
    }
    .lernen_banner {
        padding: 160px 0 60px;
    }
    .lernen_banner_title h1 {
        font-size: 25px;
        line-height: 30px;
    }
    .lernen_breadcrumb {
        display: none;
    }
}

/* 6.5. ========================= Media Queries Small Tablet ========================= */

@media (max-width: 640px) {
    .tbl-pricing .tbl-prc-col .tbl-prc-wrap {
        margin-bottom: 10px;
    }
    #header .header-content .col-xs-offset-1 {
        padding: 0px 70px;
    }
    .themeioan_testimonial .testimonial-author {
        padding: 15px 30px 15px 20px;
    }
    .themeioan_testimonial .testimonial-author img {
        right: 20px;
    }
    .header-area .header-area-inner .title,
    .header-area .single-header-carousel-item .title {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 15px;
    }
}

/* 6..6 ========================= Media Queries Mobile v1 ========================= */

@media (max-width: 480px) {
    #header .header-content .col-xs-offset-1 {
        padding: 0px 20px;
    }
    .themeioan_feature {
        position: static;
        float: none;
        width: auto;
        text-align: center;
        min-height: 0px;
    }
    .themeioan_feature i {
        position: static;
        top: auto;
        left: auto;
    }
    .themeioan_feature .feature-text,
    .row-custom .col-right .themeioan_feature .feature-text {
        padding: 15px 0px 0px;
    }
    .themeioan_testimonial .testimonial-text {
        padding: 10px 15px 50px;
    }
    .themeioan_testimonial .testimonial-author {
        padding: 10px 20px 10px 15px;
    }
    .themeioan_testimonial .testimonial-author img {
        right: 15px;
    }
    .themeioan_testimonial .testimonial-text p {
        margin: 0px;
    }
}

/* 6.7. ========================= Media Queries Mobile v2 ========================= */

@media (max-width: 300px) {
    .tbl-pricing .tbl-prc-col .tbl-prc-wrap {
        padding: 10px;
    }
    #header .navbar-header {
        text-align: center;
        padding: 20px 0px 5px;
    }
    #header .container>.navbar-header,
    #header .container-fluid>.navbar-header {
        height: auto;
    }
    #header .navbar-brand,
    #header .navbar.affix .navbar-brand {
        float: none;
        padding: 0px;
        margin-bottom: 15px;
    }
    #header .navbar-brand img,
    #header .navbar.affix .navbar-brand img {
        height: auto;
        max-height: 40px;
    }
    #header .nav>li>a {
        text-align: center;
    }
    #header .navbar-toggle {
        float: none;
        margin: 0px 0px 15px 0px;
    }
}

/* 6.8 ========================= Media Queries If Height is to Small ========================= */

@media (max-height: 750px) {
    .header-content {
        min-height: 750px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px !important;
    }
}

/* Hide element on Mobile device */

@media (max-width:767px) {
    .mobile-off {
        display: none;
    }
    .course-single:nth-child(6n+4),
    .course-single:nth-child(6n+5),
    .course-single:nth-child(6n+6) {
        display: none;
    }
}

/* Header Intro Text for Large Display */

@media (min-height:800px) {
    .header-content .header-text {
        padding-top: 20%;
    }
}

/* Course Detail */

/* Center Position */

.position-center .header-text {
    text-align: center;
}

.position-center .header-text p {
    margin: 0px auto;
}

.play-center .video-btn {
    left: 0px;
}

/*Background for Breadcrumb Banner*/

.course-detail.header-content {
    padding: 150px 0px 50px 0px;
    position: relative;
    background: url("../images/content/courses/detail.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    z-index: 1;
}

.course-detail-style-two.header-content {
    padding: 150px 0px 50px 0px;
    position: relative;
    background: url("../images/content/courses/detail2.jpg") no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    z-index: 1;
}

#why-us .course-detail-why.why-us-left-bg {
    background-image: url("../images/content/courses/detail-whyus.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-services {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-quienes-somos-grupo.jpg);
}

.bg-events {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-cocina-conversacion.jpg);
}

.bg-events-detail {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-galeria.jpg);
}

.bg-courses {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-talleres.jpg);
}

.bg-contact {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-contacto.jpg);
}

.bg-detail {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-blog-detalle.jpg);
}

.bg-blog {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-blog.jpg);
}

.bg-teamb {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-equipo-vinos-bierzo.jpg);
}

.bg-celebraciones {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-celebraciones.jpg);
}

.bg-regalos {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .2)), url(../images/sabor-y-salud/banners/banner-inscripcion.jpg);
}

#contact input,
#contact textarea {
    width: 100%;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    padding-left: 20px;
    padding-right: 10px;
    font-weight: 500;
}

#contact input[type=submit] {
    color: #fff;
    max-width: 200px;
    margin-bottom: 50px;
}

.error-msg {
    color: Red;
}

.lernen_contact_map {
    display: block;
    width: 100%;
    margin-top: 50px;
    margin-bottom: -10px;
}

.lernen_contact_map p {
    margin: 0px !important;
}

.lernen_contact_map iframe {
    display: inline-block;
    width: 100%;
    height: 400px;
    border: 0
}

/*MENU DROPDOWN*/

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

@media (min-width:768px) {
    .transparent-header .navbar .nav>li {
        position: relative;
        float: left;
        list-style: none;
        text-align: left;
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    .transparent-header .navbar .nav>li>a {
        position: relative;
        display: block;
        opacity: 1;
        text-align: center;
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    .transparent-header .navbar .nav>li>ul {
        position: absolute;
        left: -10px;
        top: 100%;
        margin-top: 24px;
        min-width: 240px;
        max-width: 240px;
        width: 100%;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        padding: 15px 5px;
        background: #fff;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        list-style: none;
    }
    .transparent-header.sticky-menu .navbar .nav>li>ul {
        margin-top: 8px;
    }
    .transparent-header .navbar .nav>li>ul:before {
        position: absolute;
        content: '';
        left: 0px;
        top: -30px;
        width: 100%;
        height: 30px;
        display: block;
    }
    .transparent-header .navbar .nav>li.subnav:hover>ul {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
        overflow: visible;
    }
    .transparent-header .navbar .nav>ul li.subnav .dropdown-btn,
    .transparent-header .navbar .nav>ul li.page_item_has_children .dropdown-btn {
        position: absolute;
        right: 10px;
        top: 8px;
        width: 34px;
        height: 30px;
        border: 1px solid #ffffff;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        color: #ffffff;
        cursor: pointer;
        z-index: 5;
        display: none;
    }
    .transparent-header .navbar .nav>li>ul>li {
        position: relative;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .transparent-header .navbar .nav>li>ul>li:last-child {
        border: none;
    }
    .transparent-header .navbar .nav>li>ul>li>a {
        position: relative;
        display: block;
        padding: 7px 20px;
        line-height: 24px;
        font-weight: 400;
        font-size: 15px;
        text-transform: capitalize;
        color: #222 !important;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
    }
    .transparent-header .navbar .nav>li>ul>li>a:before,
    .transparent-header .navbar .nav>li>ul>li>ul>li>a:before {
        font-family: "Font Awesome 5 Free";
        content: "\f061";
        font-weight: 900;
        color: inherit;
        padding-right: 8px;
        margin-left: -20px;
        -webkit-transition: .3s;
        -o-transition: .3s;
        -moz-transition: .3s;
        transition: .3s;
        opacity: 0;
    }
    .transparent-header .navbar .nav>li>ul>li:hover a:before,
    .transparent-header .navbar .nav>li>ul>li>ul>li:hover a:before {
        opacity: 1 !important;
        padding-left: 23px;
    }
    .transparent-header .navbar .nav>li>ul>li.subnav>a:after,
    .transparent-header .navbar .nav>li>ul>li.page_item_has_children>a:after,
    .transparent-header .navbar .nav>li>ul>li>ul>li.subnav>a:after,
    .transparent-header .navbar .nav>li>ul>li>ul>li.page_item_has_children>a:after {
        font-family: "Font Awesome 5 Free";
        content: "\f054";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 8px;
        line-height: 24px;
        font-size: 14px;
        text-align: center;
    }
    .transparent-header .navbar .nav li>ul>li.subnav:hover>ul,
    .transparent-header .navbar .nav li>ul>li.page_item_has_children:hover>ul {
        visibility: visible;
        opacity: 1;
        top: 0;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    .transparent-header .navbar .nav>li>ul>li>ul,
    .transparent-header .navbar .nav>li>ul>li>ul>li>ul {
        position: absolute;
        margin-left: 5px;
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
        -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        -ms-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        -o-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        top: 100%;
        width: 220px;
        padding: 15px 5px;
        background: #fff;
        list-style: none;
    }
    .transparent-header .navbar .nav>li>ul>li>ul:before {
        content: '';
        position: absolute;
        left: -7px;
        top: 0px;
        width: 7px;
        height: 100%;
    }
    .transparent-header .navbar .nav>li>ul>li>ul>li {
        list-style: none;
        position: relative;
        width: 100%;
        margin-bottom: 0px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .transparent-header .navbar .nav>li>ul>li>ul>li:last-child {
        border: none;
    }
    .transparent-header .navbar .nav>li>ul>li>ul>li>a,
    .transparent-header .navbar .nav>li>ul>li>ul>li>ul>li>a {
        position: relative;
        display: block;
        padding: 7px 20px;
        line-height: 24px;
        font-weight: 400;
        font-size: 15px;
        text-transform: capitalize;
        color: #222 !important;
        transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        -o-transition: all 500ms ease;
    }
    .nav__expand {
        display: none;
    }
}

@media (min-width:1200px) {
    .transparent-header .navbar .nav>li>ul>li>ul,
    .transparent-header .navbar .nav>li>ul>li>ul>li>ul {
        position: absolute;
        left: 100%;
    }
    .transparent-header .navbar .nav>li:nth-last-child(-n+4) ul>li>ul,
    .transparent-header .navbar .nav>li:nth-last-child(-n+4) ul>li>ul>li>ul {
        position: absolute;
        left: -100% !important;
        right: 100% !important;
    }
}

.pr0 {
    padding-right: 0px;
}

.pl0 {
    padding-left: 0px;
}

/* 7. ===== Formulario de inscripción — mismos estilos que el de contacto ======
   El formulario de contacto se ve con la combinación de "#contact input" mas la
   altura canónica del tema: 52px de alto, 15px, peso 500, texto #333, borde de
   1px rgba(0,0,0,.1) y sin radio. Pero el tema solo da esa altura a
   input[type="text"|"password"|"email"], asi que "tel", "number" y los <select>
   se quedaban fuera y aparecían con tres alturas distintas (52 / 28 / 48px).
   Aquí se extiende ese mismo acabado a todos los campos de la inscripción para
   que ambos formularios se vean idénticos. El <textarea> conserva su alto
   automático, como en contacto. */

#inscripcion-form input[type="text"],
#inscripcion-form input[type="email"],
#inscripcion-form input[type="tel"],
#inscripcion-form input[type="number"],
#inscripcion-form select,
#inscripcion-form textarea {
    width: 100%;
    font-size: 15px;
    font-weight: 500;
    color: #333333;
    background-color: #ffffff;
    padding-left: 20px;
    padding-right: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0px;
}

#inscripcion-form input[type="text"],
#inscripcion-form input[type="email"],
#inscripcion-form input[type="tel"],
#inscripcion-form input[type="number"],
#inscripcion-form select {
    height: 52px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#inscripcion-form textarea {
    height: auto;
    padding-top: 13px;
    padding-bottom: 13px;
}


/* 8. ===== Cabecera más compacta ==============================================
   La cabecera medía 156px en escritorio: 100px de logotipo y 56px de relleno
   repartido entre .navbar-brand (10), .navbar (16) y la propia cabecera (30).
   Se recorta ese relleno y se deja el logotipo a su tamaño, que ya es pequeño.
   La versión fija al hacer scroll conserva su relleno cero para seguir siendo
   algo más baja que la de reposo, como en el tema original. */

#header.transparent-header {
    padding: 8px 0px;
}

#header.transparent-header.sticky-menu {
    padding: 0px;
}

@media (min-width: 992px) {
    #header .navbar {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #header .navbar-brand {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}


/* 9. ===== Separación entre enlaces del menú x1.4 =============================
   El tema separa los enlaces con 13px de margen a cada lado (26px de hueco
   entre elementos) a partir de 1200px, y 10px (20px de hueco) entre 992 y
   1199px. Aquí ese hueco se multiplica por 1,4: 26 -> 36,4px y 20 -> 28px.
   El margen derecho del último enlace se deja sin escalar para que el menú
   siga anclado exactamente en el mismo punto por la derecha y todo el
   crecimiento se produzca hacia la izquierda.
   Por debajo de 992px no se toca: ahí el menú ya se reparte en dos filas y
   más separación lo empujaría a una tercera. */

@media (min-width: 1200px) {
    #header .nav > li > a {
        margin: 0px 18.2px;
    }
    #header .nav > li:last-child > a {
        margin-right: 13px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #header .nav > li > a {
        margin: 0px 14px;
    }
    #header .nav > li:last-child > a {
        margin-right: 10px;
    }
}


/* 10. ===== Imagen de "¿Para quién es cada taller?" alineada con el titular ===
   En esa fila la columna de texto empieza con el <span> de antetítulo, que mide
   60px (line-height 55px + padding-bottom 5px de .section-title span), de modo
   que el <h3> arranca 60px por debajo del borde superior de la fila. La imagen,
   en cambio, empezaba pegada arriba. Se baja esos mismos 60px para que su borde
   superior coincida con el del titular.
   Solo cuando las dos columnas van una al lado de la otra (>=768px, que es
   donde col-md-6 deja de apilarse); apiladas, el desplazamiento sobraría.
   El selector con ">" limita la regla a la portada: en quienes-somos.html el
   mismo id cuelga de un .wrap-bg y no de un .container, así que no coincide. */

@media (min-width: 768px) {
    #colectivos > .row > .col-md-6:last-child > img {
        margin-top: 60px;
    }
}


/* 11. ===== Clips verticales de la portada ====================================
   Los tres clips de "Cocina y Conversación" son vídeos de móvil: 480x848 (9:16)
   una vez el navegador aplica la matriz de rotación del MP4. Sus pósters, en
   cambio, son apaisados, así que al empezar la reproducción el <video> cambiaba
   de proporción y desplazaba la maqueta. Aquí se fija la caja en vertical y se
   recorta el contenido con object-fit, de modo que póster y vídeo ocupan
   exactamente el mismo hueco y nada se mueve al pasar el ratón.
   El encuadre se desplaza hacia arriba (28%) porque en los vídeos verticales
   de móvil las caras quedan en la mitad superior y centrarlo las cortaba.
   El vídeo grande no necesita esto: es 1024x1024 y su póster también. */

#why-us .col-md-4 video {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 28%;
}


/* 12. ===== Tarjetas del equipo con la misma altura =========================
   Slick coloca los slides con float:left y cada tarjeta se queda con el alto
   de su propio texto: las biografías de dos líneas daban 469px y las de
   cuatro, 521px. Pasando la pista a flex, los slides se estiran todos al del
   más alto y las tarjetas quedan parejas. float:none y height:auto son
   necesarios para que el estirado surta efecto sobre los slides flotados. */

#teachers .carousel-slider .slick-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#teachers .carousel-slider .slick-track .slick-slide {
    float: none;
    height: auto;
}


/* 13. ===== Tarjetas de rejilla a la misma altura ============================
   Las columnas .blog-single ya se estiran (la .row de Bootstrap es flex), pero
   la tarjeta de dentro conservaba el alto de su propio texto: con resúmenes de
   3 o 4 líneas salían 538px frente a 564px. Se encadena el estirado
   columna -> tarjeta -> article -> .blog-content para que todas las tarjetas
   de una fila midan lo mismo, y el enlace del pie se baja con margin-top:auto
   para que "Leer más" y el bloque de precio queden alineados entre tarjetas. */

.blog-single {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.blog-single > .themeioan_blog,
.blog-single > .themeioan_course {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
}

.blog-single > .themeioan_blog > article {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.blog-single .blog-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.blog-single .blog-content .readmore,
.blog-single .blog-content .course-bottom {
    margin-top: auto;
}

.blog-single .blog-content .readmore {
    -ms-flex-item-align: start;
    align-self: flex-start;
}


/* 14. ===== Botón del newsletter centrado en su campo ========================
   El tema coloca este botón en posición absoluta dentro del campo
   (#newsletter .newsletter-submit: position:absolute; top:0; right:0) y le
   deja su alto natural de 44px, de modo que quedaba pegado arriba y su centro
   caía 4px por encima del centro del campo, que mide 52px. Anclándolo también
   por abajo toma el alto completo del campo y queda centrado, sea cual sea la
   altura del campo.
   El padding derecho del input reserva el hueco del botón: sin él, en pantallas
   estrechas el texto del placeholder pasaba por debajo del botón. */

#newsletter .input-group .newsletter-submit {
    top: 0;
    bottom: 0;
    height: auto;
}

#newsletter .input-group > .form-control {
    padding-right: 130px;
}


/* 15. ===== Slides del hero todos con la misma altura ========================
   Los slides toman el alto de su contenido, así que un titular que ocupa una
   línea más deja el slide más bajo que el resto y se ve un escalón al pasar de
   uno a otro. Poniendo la pista de Owl en flex, todos los slides se estiran al
   más alto y quedan iguales sea cual sea el largo del texto. */

main > .owl-carousel .owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

main > .owl-carousel .owl-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

main > .owl-carousel .owl-item > .item {
    width: 100%;
}

/* el tema fija height:60%!important en .header-content; con el padre ya
   estirado eso lo dejaba a 391px y la foto no cubría el slide entero */
main > .owl-carousel .owl-item .header-content {
    width: 100%;
    height: 100% !important;
}


/* 16. ===== Imagen de "¿Qué hacemos en Sabor y Salud?" a la altura del texto ==
   La foto es vertical (1200x1600) y con su proporción natural medía 760px,
   91px más que la columna de texto (669px), de modo que asomaba por debajo.
   Sacándola del flujo (posición absoluta) deja de marcar la altura de la fila:
   la fila pasa a medirla el texto y la imagen rellena ese hueco recortada.
   object-position:top conserva la parte de arriba y recorta por abajo.
   Los 15px de inset son el gutter de la columna, para que no cambie de sitio.
   Solo a partir de 768px: por debajo las columnas se apilan y la imagen debe
   recuperar su alto natural. */

@media (min-width: 768px) {
    #services > .container > .row > .col-md-6:last-child {
        position: relative;
    }
    #services > .container > .row > .col-md-6:last-child > img {
        position: absolute;
        top: 0;
        left: 15px;
        /* en elementos reemplazados (img) width/height:auto usan el tamaño
           intrínseco e ignoran top/bottom/left/right, así que hay que darles
           medidas explícitas; los 30px son el gutter de la columna */
        width: calc(100% - 30px);
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* 17. ===== "Nuestra historia": foto alineada por abajo con el texto =========
   La foto es más baja que la columna de texto y quedaba 74px por encima del
   final del párrafo. Se baja hasta apoyar su borde inferior en esa línea.
   Solo desde 1200px: por debajo el contenedor se estrecha, el texto crece y
   la foto se encoge (el hueco pasa a 351px a 992 y 628px a 768), donde
   bajarla dejaría un agujero enorme arriba y lo natural es alinear por
   arriba. Por debajo de 768px las columnas se apilan y no hay nada que
   alinear. */
@media (min-width: 1200px) {
    #historia > .container > .row > .col-md-6:last-child {
        display: flex;
        align-items: flex-end;
    }

    #historia > .container > .row > .col-md-6:last-child > img {
        width: 100%;
    }
}

/* 18. ===== "Con quién trabajamos": foto a la altura del texto ==============
   Saca la foto del flujo para que la altura de la fila la marque el texto y
   la foto rellene esa caja (570x650 desde 1200px), de modo que su borde
   inferior quede siempre a ras del botón.
   Lo que se recorta depende de la proporción de la foto: con una vertical se
   pierde por abajo, con una apaisada -la actual, 1600x1200- se ve el 100%
   del alto y se recortan los lados (queda el 65,8% del ancho, centrado).
   Solo desde 1200px: por debajo la foto ya es más baja que el texto, así que
   se deja a su tamaño natural y se ve entera. Ojo: en la portada el mismo id
   es el propio .container, así que este selector no la toca. */
@media (min-width: 1200px) {
    #colectivos > .container > .row > .col-md-6:first-child {
        position: relative;
    }

    #colectivos > .container > .row > .col-md-6:first-child > img {
        position: absolute;
        top: 0;
        left: 15px;
        /* medidas explícitas: en elementos reemplazados width/height:auto
           usan el tamaño intrínseco e ignoran top/left; 30px es el gutter */
        width: calc(100% - 30px);
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

/* 19. ===== Imágenes con width/height sin deformarse =========================
   Al declarar width y height en cada <img> el navegador reserva el hueco
   antes de descargarla y el texto deja de dar el salto al cargar. Pero el
   tema sólo trae img{max-width:100%} SIN height:auto: al estrechar la
   ventana el ancho se reduce y el alto se quedaría clavado en el del
   atributo, deformando la foto. Con esto el alto vuelve a calcularse a
   partir de la proporción. No cambia nada de lo que ya se veía, porque
   hasta ahora ninguna imagen llevaba alto declarado. Las reglas que sí
   fijan un alto a propósito (bloques 16 y 18) tienen más especificidad y
   siguen mandando. */
img {
    height: auto;
}

/* 20. ===== Uso con el dedo en móvil =========================================
   La maquetación ya era adaptable (nada se desborda a 320px), pero eso solo
   dice que cabe, no que se pueda usar. Aquí se corrigen tres cosas que sí se
   notan al manejar la web con una mano:

   1. Campos a 16px. Por debajo de ese tamaño, Safari en iPhone amplía la
      página sola al tocar un campo y deja el formulario descolocado. No es
      cuestión de estética: es la causa de que rellenar una inscripción desde
      el móvil resulte incómodo.

   2. Tamaño de los objetivos táctiles. El criterio 2.5.8 de las WCAG (nivel
      AA) pide 24x24 px como mínimo; las guías de Apple y Google recomiendan
      44x44 para lo que se usa a menudo. Se aplica 24 como suelo general y 44
      a lo que más se pulsa, en vez de agrandarlo todo: subir los catorce
      enlaces del pie a 44 añadiría más de 300px de scroll a cambio de poco.
      Los enlaces dentro de un párrafo quedan fuera a propósito: la norma los
      exime y ensancharlos rompería la línea de texto.

   3. Texto auxiliar a 14px. Los «(opcional)» y la nota de privacidad se
      quedaban en 12,8px, que en pantalla pequeña cuesta leer.

   Todo va dentro de la media query: el escritorio no cambia. */
@media (max-width: 991px) {

    /* --- 1. campos de formulario --------------------------------------- */
    /* se repiten los selectores con [type] para igualar la especificidad de
       las reglas del bloque 7; si no, no ganarían */
    #inscripcion-form input[type="text"],
    #inscripcion-form input[type="email"],
    #inscripcion-form input[type="tel"],
    #inscripcion-form input[type="number"],
    #inscripcion-form select,
    #inscripcion-form textarea,
    #contact-us-form input[type="text"],
    #contact-us-form input[type="email"],
    #contact-us-form textarea,
    input.form-control,
    textarea.form-control,
    select.form-control {
        font-size: 16px;
    }

    /* --- 2. objetivos táctiles ------------------------------------------ */
    /* el icono del menú: es lo primero que se toca en cada página */
    .burger-icon {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* enlaces de navegación del pie: se separan lo justo para no fallar el
       dedo, sin disparar el alto de la página */
    #footer .f-widget-link ul li a {
        display: block;
        padding: 6px 0;
    }

    /* teléfonos y correo: se pulsan para llamar, conviene que sean cómodos */
    #footer .sigle-address p a {
        display: inline-block;
        padding: 6px 0;
    }

    /* iconos sociales: eran de 30x20, por debajo del mínimo */
    #footer .icon-round-white a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }


    /* --- 3. texto auxiliar ---------------------------------------------- */
    .text-muted,
    label .text-muted {
        font-size: 14px;
    }
}

/* 21. ===== Zonas táctiles que seguían por debajo del mínimo ================
   Segunda pasada tras medir de verdad contra el criterio 2.5.8 (24x24 px).
   Cada caso necesita una solución distinta según dónde esté pintado el punto
   o por qué la caja sale más pequeña de lo que parece. */
@media (max-width: 991px) {

    /* Puntos del carrusel de portada.
       Con el relleno no hay nada que hacer: owl.carousel.min.css declara
       «padding: 0 !important» sobre button.owl-dot y además se carga después
       de esta hoja, así que gana siempre. En lugar de subir la apuesta con
       otro !important, se usa la misma solución que en slick: una capa
       transparente centrada que recoge el toque. No toca el diseño ni pelea
       con la hoja del complemento. */
    .owl-dots .owl-dot {
        position: relative;
    }

    .owl-dots .owl-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        transform: translate(-50%, -50%);
    }

    /* Puntos del carrusel del equipo (slick). Aquí el punto SÍ es el fondo
       del propio botón, de 8x8 y redondeado: darle relleno agrandaría el
       círculo. Se superpone una capa transparente centrada que recoge el
       toque y deja el diseño exactamente igual. */
    .slick-dots li button {
        position: relative;
    }

    .slick-dots li button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
    }

    /* Enlaces que envuelven una foto. Al ser «inline», su caja se quedaba en
       23px de alto aunque la imagen ocupe mucho más; en la galería eso son 59
       fotos cuya zona de toque no coincidía con lo que se ve. */
    .course-photo > a,
    .blog-photo > a {
        display: block;
    }

    /* Enlaces de acción de las tarjetas: «Ver taller», «Leer más». */
    .readmore,
    .feature_link > a {
        display: inline-block;
        padding: 6px 0;
    }
}