:root {
    --red: #7f6f43;
    --redOpacity: rgba(148, 131, 61, 0.9);
    --gray: rgba(51, 56, 56, 0.9);
    --green: #003764;
}

@keyframes toggleAnim {
    0% {
        overflow: hidden;
        transform: scaleY(0);
        transform-origin: top;
    }
    100% {
        height: auto;
        transform: scaleY(1);
        transform-origin: top;
    }
}

@keyframes toggleAnimClose {
    0% {
        height: auto;
        transform: scaleY(1);
        transform-origin: top;
    }
    100% {
        max-height: 0px;
        overflow: hidden;
        transform: scaleY(0);
        transform-origin: top;
    }
}

.pointer {
    cursor: pointer;
}

.flex_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-element,
.flex_element {
    flex: 1;
}

.w100 {
    width: 100%;
    clear: both;
}

.section_white {
    background: #fff;
}

.section_bg {
    background: url(images/bk.jpg), #f2f2f2;
    background-size: auto 100%;
    background-repeat: no-repeat;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif!important;
}

.left {
    float: left;
}

.right {
    float: right;
}

.container {
    max-width: 767px;
    margin: 0 auto;
    position: relative;
}

img {
    max-width: 100%;
}

h1 {
    font-size: 18px;
    font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
p,
span {
    margin: 0;
}

div {
    box-sizing: border-box;
}

a,
label {
    display: block;
    text-decoration: none;
    color: white;
}

li {
    list-style-type: none;
}

.hide_on_desktop {
    display: none;
}

@media screen and (max-width: 767px) {
    .hide_on_mobile {
        display: none;
    }
    .hide_on_desktop {
        display: block;
    }
}


/*header*/

.header_bg {
    background: url(images/millennials_banking_webinar3_av.jpg);
    background-size: cover;
    background-position: center;
    min-height: 416px;
    position: relative;
}

.header_bg .overlay {
    position: absolute;
    background-color: rgba(127, 127, 127, 0.59);
    width: 100%;
    height: 100%;
}

.claim_header {
    text-align: left;
    padding-top: 30px;
}

.header_desktop {
    padding-top: 0;
}

.header_bg h1 {
    background-color: var(--redOpacity);
    font-weight: bold;
    color: white;
    width: 620px;
    padding: 15px 20px;
}

.header_bg h2 {
    background-color: var(--gray);
    font-weight: bold;
    color: white;
    width: 620px;
    padding: 15px 20px;
    font-size: 14px;
    width: 280px;
    margin-top: 5px;
}

.header_bg .claim_cta {
    background-color: var(--gray);
    font-weight: bold;
    color: white;
    width: 620px;
    padding: 15px 20px;
    font-size: 14px;
    width: 210px;
    text-transform: uppercase;
    text-decoration: underline;
    margin-top: 5px;
}

.header_bg .claim_cta:hover {
    text-decoration: underline;
}


/*NAV*/

nav {
    background-color: var(--red);
    text-align: left;
}

nav ul {
    display: inline-block;
}

nav ul li {
    padding-right: 20px;
}

nav a {
    font-size: 13px;
    color: white;
    line-height: 5px;
}


/*MAIN*/

#contenidos {
    background: none;
}

section#objetivos_del_curso {
    min-height: 394px;
    padding: 0 20px;
}

section h3 {
    font-size: 17px;
    line-height: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
}

section p {
    font-size: 14px;
    line-height: 20px;
    color: #7F7F7F;
}

.flex_element {
    padding: 10px;
}

.flex_element .image.search_marketing {
    background: url(images/social_media_marketing_av.jpg);
    background-size: 100%;
    min-height: 257px;
    background-position: center;
    position: relative;
}

.flex_element .image.social_media_marketing {
    background: url(images/instragram_av.jpg);
    min-height: 257px;
    background-size: auto 100%;
    background-position: center;
    position: relative;
}

.flex_element .image.tendencias {
    background: url(images/tendencias_av.jpg);
    min-height: 257px;
    background-size: auto 100%;
    position: relative;
    background-position: center;
}

.flex_element .image h3 {
    position: absolute;
    display: block;
    top: 15px;
    background-color: var(--red);
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: white;
    padding: 7px 10px;
}

.flex_element .image h4 {
    position: absolute;
    display: block;
    top: 55px;
    background-color: #7F7F7F;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: white;
    padding: 7px 10px;
    font-weight: lighter;
}

.flex_element .image.tendencias h3 {
    width: 214px;
}

.flex_element .image.tendencias h4 {
    width: 201px;
}

.flex_element .logos.flex_container {
    flex-direction: column;
    padding: 0 40px;
    max-height: 160px;
}

.flex_element .logos img {
    max-width: 100%;
}

.claim_intersection {
    padding-bottom: 15px;
}

.claim_intersection p {
    background-color: var(--red);
    padding: 5px;
    color: white;
    margin-bottom: 15px;
}

.profesor {
    padding: 10px 40px;
}

.profesor .flex_container {
    padding: 0 20px 20px 20px;
}

.profesor a,
.precio a,
#profesores a {
    font-size: 16px;
    color: var(--red);
    line-height: 22px;
    font-weight: bold;
    padding: 5px 0;
}

.profesor p {
    font-size: 12px;
    line-height: 14px;
}


/* ACCORDION */

.accordion_container {
    margin: 30px 0;
    min-height: 300px;
}

.accordionItem {
    text-align: left;
    transition: 1s ease-out;
}

.accordionItemHeading {
    cursor: pointer;
    margin: 0px 0px 2px 0px;
    padding: 10px;
    background: var(--red);
    color: #fff;
    width: 100%;
}

.close .accordionItemContent {
    animation: .5s toggleAnimClose ease-in forwards;
    height: 0px;
}

.accordionItemContent {
    padding: 0 10px;
    ;
}

.accordionItemContent .title {
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 0;
}

.accordionItemContent p {
    margin-bottom: 20px;
}

.open .accordionItemContent {
    animation: .5s toggleAnim ease-in forwards;
}

.precio .flex_element {
    background: #fff;
}

.precio .flex_element:first-of-type {
    margin-right: 15px
}

.precio .flex_element:last-of-type {
    margin-left: 15px
}

.certif h3 {
    margin-bottom: 5px;
}

.certif {
    background: #fff;
    margin: 10px 0;
}

.certif h4 {
    font-size: 22px;
    color: var(--red);
    line-height: 31px;
    font-weight: bold;
}

.certif h5 {
    font-size: 19px;
    color: #7F7F7F;
    line-height: 27px;
    font-weight: 400;
}

.certif p {
    margin: 10px 0;
}

#form {
    background-color: #7f7f7f;
}

#form .form_red {
    background-color: var(--red);
    color: white;
    padding: 10px 0;
    margin-bottom: 20px;
}

#form .form_green {
    background-color: #2baf74;
    color: white;
    padding: 10px 0;
}

#form .form_green h3 {
    margin: 0;
}

input {
    width: 100%;
    max-width: 325px;
    margin: 10px;
}

input[type="submit"] {
    -webkit-appearance: none;
}

input#name {
    height: 40px;
}

input#email {
    height: 40px;
}

input#mensaje {
    height: 80px;
}

label[for="terms"] {
    font-size: 12px;
    float: left;
}

label[for="terms"] input {
    font-size: 12px;
    float: left;
    width: auto;
    max-width: 325px;
    margin: 0;
    margin-right: 5px;
}

a.privacy {
    font-size: 12px;
    float: left;
}

#form .container {
    max-width: 325px;
}

input[type="submit"] {
    background-color: var(--red);
    width: 100%;
    margin: 5px 0 25px 0;
    padding: 10px 0;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
}

form {
    margin: 0;
}

footer {
    background: #333838;
    min-height: 200px;
    padding-top: 30px;
}

footer .right {
    padding-top: 15px;
}

footer .right a {
    padding-bottom: 5px;
}

footer p,
footer ul,
footer ul li {
    color: white;
    text-align: left;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

footer p {
    font-size: 14px;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
}

footer ul li {
    font-size: 12px;
    line-height: 15px;
}

footer ul li:first-of-type {
    padding-top: 5px;
}

.whatsapp:before {
    content: url(images/logo-whatsapp.png);
    padding-right: 5px;
    position: relative;
    top: 5px;
}

.mail:before {
    content: url(images/email.png);
    padding-right: 5px;
    position: relative;
    top: 5px;
}

.enlaces_header .mail,
.enlaces_header .whatsapp {
    text-align: left;
    font-size: 14px;
    margin-bottom: 5px;
}

.enlaces_header .left,
.enlaces_header .right {
    padding-top: 70px;
}

.enlaces_header .flex_container {
    margin-top: 5px
}

.link_campus a {
    display: inline-block;
    float: left;
}

.link_campus a:first-of-type {
    background: var(--redOpacity);
    padding: 7px 7px;
}

.link_campus {
    padding-top: 20px;
}

.link_campus a:last-of-type {
    background: var(--red);
    font-size: 12px;
    font-weight: bold;
    padding: 8px 9px 8px 7px;
}

#contenidos {
    MARGIN-TOP: -267PX;
}

#contenidos .flex_container {
    align-items: flex-start;
}

.header_menu {
    display: none;
}

.whatsapp_mobile {
    display: none;
}

.section_bg .container {
    padding: 20px 0;
}

.precio .flex_element {
    min-height: 204px;
}

.container.mobile {
    display: none;
}

input.error {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    border: 1px solid red;
}

input.error::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1;
    /* Firefox */
}

.form_green h3 {
    padding-top: 0px;
}

.copyright {
    background-color: #7f7f7f;
    text-align: center;
    padding: 10px 5px;
    margin-top: 10px;
    clear: both;
    display: block;
}

.copyright img {
    margin: 5px auto 15px;
}

.copyright p {
    text-align: center;
    border: none;
    font-size: 12px;
}

#profesores .container>.flex_container {
    flex-direction: column;
    text-align: left;
}

#profesores .flex_container img {
    float: left;
    margin-right: 20px;
}

#profesores .flex_container .rrss {
    max-width: 170px;
}

#profesores .enlace_ficha {
    background: var(--red);
    float: right;
    color: white;
    padding: 5px 40px;
}

#profesores .enlace_ficha a {
    color: white;
}

#faq .accordionItemContent p {
    padding-top: 10px;
}

#terms_cond {
    text-align: left;
    padding: 20px 10px;
}

#profesor {
    text-align: left;
}

#profesor h5 {
    font-size: 16px;
    color: #7F7F7F;
    margin-bottom: 10px;
}

#profesor h5 span {
    color: var(--red);
}

#profesor ul {
    margin-top: 0;
}

#profesor ul li {
    color: #7F7F7F;
    font-size: 13px;
    line-height: 18px;
    list-style-type: disc;
}

#profesor ul li a {
    color: var(--red);
}

@media screen and (max-width: 767px) {
    .flex_element .image h4 {
        top: 65px;
    }
    .precio .flex_element:last-of-type {
        margin-left: 0;
    }
    .desktop {
        display: none;
    }
    .claim_header {
        padding-top: 120px;
    }
    .hide_on_mobile {
        display: none;
    }
    .flex_container {
        flex-direction: column;
    }
    .rrss.flex_container {
        flex-direction: row;
    }
    .header_bg h1 {
        width: 100%;
        padding: 15px 20px;
        box-sizing: border-box;
    }
    .header_menu {
        display: block;
        background: #363737;
        position: relative;
        height: 70px;
        overflow: hidden;
    }
    .header_menu.open {
        overflow: visible;
    }
    .header_menu>a {
        display: inline;
    }
    .logo {
        width: 47%;
        padding-top: 5px;
        padding-bottom: 5px;
        float: left;
        height: auto;
    }
    .menu {
        float: right;
        padding-top: 16px;
        padding-right: 7px;
    }
    .menu_desp {
        background-color: var(--red);
        clear: both;
    }
    .menu_desp ul {
        padding-left: 0;
    }
    .menu_desp ul li {
        padding: 10px 0;
        font-size: 14px;
    }
    .flex_element {
        width: 100%;
    }
    #contenidos {
        MARGIN-TOP: -141PX;
    }
    #contenidos .flex_element {
        padding: 0;
    }
    .flex_element .image h3 {
        top: 25px;
    }
    .whatsapp_mobile {
        display: block;
        background-color: #22B573;
        padding: 10px 0 15px;
        color: white;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
    footer {
        padding-top: 0;
    }
    .container.mobile {
        background-color: #7f7f7f;
        text-align: center;
        padding: 0 5px;
        padding-bottom: 50px;
        display: block;
    }
    .container.mobile img {
        margin: 5px auto 15px;
    }
    .container.mobile p {
        text-align: center;
        border: none;
        font-size: 12px;
    }
    .container.mobile .rrss {
        max-width: 150px;
        margin: 5px auto 15px;
    }
    .flex_element .logos img {
        max-width: 180px;
        margin: 0 auto;
    }
    .copyright {
        display: none!important;
    }
    #profesores .flex_element {
        text-align: center;
    }
    #profesores .flex_container img {
        float: none;
    }
    #profesores .flex_container .rrss {
        margin: 0 auto;
    }
    #profesores .enlace_ficha {
        float: none;
        margin-top: 10px;
    }
}

section#profesores {
    padding-top: 10px;
}

#profesores .flex_container .rrss {
    max-width: 100px;
}

footer img {
    max-width: 190px;
}

.logo {
    padding-top: 10px;
}