/*
Theme Name: Expro Child
Description: 
Author:
Template: expro
Version: 1.0
*/


/*************** ADD CUSTOM CSS HERE.   ***************/

:root {
    --py-color: #8B0305;
    --sd-color: #2C2C2C;
    --bg-color: #E8E8E8;
    --at-color: #B55D53;
    --ss-color: #FDEE00;
    --wn-color: #B55D53;
    --tx-color: #231F20;
    --shadow-color: rgba(35, 31, 32, 0.3);
    --bd-color-1: #F6F6F6;
    --limit-width: 1440px;
    --limit-width-nd: 1200px;
}

.limit-width-nd {
    max-width: var(--limit-width-nd) !important;
    margin-left: auto;
    margin-right: auto;
}

html, body {
    background-color: unset;
}

.absolute-footer {
    display: none;
}

.invisible-element {
    visibility: hidden;
}

.pb-0 {
    padding-bottom: 0px;
}

.pt-0 {
    padding-top: 0px;
}

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

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

.mt-2em {
    margin-top: 2em;
}

.mb-2em {
    margin-bottom: 2em;
}

.mt-3em {
    margin-top: 3em;
}

.mb-3em {
    margin-bottom: 3em;
}

.mt-4em {
    margin-top: 4em;
}

.mb-4em {
    margin-bottom: 4em;
}

.bg-parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.copyright-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background-color: var(--bg-color);
}

.copyright-section div.text p {
    margin-bottom: 0;
    color: black;
    font-size: 0.8em;
}

.copyright-section div.text a {
    color: inherit;
}

ul.sidebar-wrapper li.sidebar-item {
    margin-left: 0;
    margin-bottom: 2em;
}
.home-video {
	padding-left: 8px;
	padding-right: 8px;
}
.home-video .slider-nav-reveal .flickity-button {
	background-color: rgba(0,0,0,0.3) !important;
}
.home-video .slider-nav-reveal .flickity-button:hover .arrow {
	fill: white !important;
}
.home-sidebar h4 {
    font-size: 1.15em;
}

.header-section {
    padding: 0 !important;
}

.header-img-box .box-text {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

.header-statement {
    padding-top: 2em;
    padding-bottom: 2em;
}

.header-statement::before {
    font-family: "IM Fell French Canon";
    display: block;
    content: "\201C";
    font-size: 8em;
    position: absolute;
    top: 20%;
    left: 8%;
}

.header-statement::after {
    font-family: "IM Fell French Canon";
    display: block;
    content: "\201D";
    font-size: 8em;
    position: absolute;
    top: 40%;
    right: 8%;
}

.msg-title {
    border-top: solid var(--py-color) 0.3em;
    border-bottom: solid var(--py-color) 0.3em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.msg-title h2 {
    margin-bottom: 0;
}

.msg-col {
    background: url(/wp-content/uploads/2021/06/32902758143_280557e983_b.jpg);
    background-clip: content-box;
}

.news-tabs ul.nav {
    position: absolute;
    top: 1.3em;
    justify-content: flex-end;
}

.home-title h3 {
    padding-top: 1em;
    border-top: solid;
    padding-bottom: 1em;
    border-bottom: solid;
}

.news-tabs ul.nav li.tab {
    padding-left: 1.5em;
    padding-right: 1.5em;
    border-right: solid 0.1em var(--py-color);
}

.news-tabs ul.nav li.tab:last-child {
    padding-left: 1.5em;
    padding-right: unset;
    border-right: none;
}

.news-tabs a span {
    color: var(--sd-color);
}

.news-tabs li.active a span {
    color: var(--py-color);
}

.home-news-posts .post-item {
    background-color: var(--py-color);
    background-clip: content-box;
}

.home-news-posts .post-item:nth-child(even) {
    background-color: var(--sd-color);
}

.home-news-posts .post-item .box-blog-post .box-text {
    color: white;
    padding: 1.5em 1.5em;
}

.first-news .post-item .box-blog-post .box-text {
    padding: 4em 4em;
}

.home-news-posts .post-item .box-blog-post .box-text h5.post-title {
    color: white;
}

.home-news-posts .post-item .box-blog-post .box-text button {
    float: right;
    color: white;
}

.home-news-posts .post-item .box-blog-post .box-text .box-text-inner::after {
    content: "";
    clear: both;
    display: table;
}

.training-row .content-row .col .col-inner {
    height: 500px;
}

.training-row .content-section {
    padding: 0 0 !important;
}

.testa-slide .flickity-viewport {
    height: 600px !important;
}

.testa-slide .testa-banner {
    border-radius: 30px;
    margin-top: unset !important;
}

.testa-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 100px !important;
    border-radius: 20px;
}

.testa-section ul.testa-area {
    position: relative;
    height: 450px;
}

.testa-section .testa-widget {
    margin-bottom: 0 !important;
}

.testa-section .testa-widget:first-child {
    width: 30%;
    position: absolute;
    bottom: 0%;
    left: 8%;
}

.testa-section .testa-widget:first-child img {
    height: 550px !important;
    width: auto !important;
}

.testa-section .testa-widget:last-child {
    width: 65%;
    padding-top: 1em;
    float: right;
    color: white;
}

.testa-section .testa-widget:last-child h4 {
    color: inherit;
    font-size: 2em;
    font-weight: normal;
}

.sub-stack {
    padding: 1em 1em;
    transition: background-color linear 0.4s;
}

.sub-stack * {
    color: var(--py-color);
}

.sub-stack:hover {
    background-color: var(--py-color);
}

.sub-stack:hover * {
    color: white !important;
}

.sub-stack .stack-icon>p {
    display: block;
    width: 2em;
    height: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    text-align: center;
    border: solid 2px;
    border-radius: 50%;
}

.sub-stack .stack-icon>p>a {
    vertical-align: middle;
}

.footer-follow-icons>span:first-child {
    font-size: 1.3em;
    font-weight: normal;
    color: white;
}

.boarder-house .sub-img-row {
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: -8%;
    background-color: white;
    padding-top: 1em;
}

.enroll-banner {
    margin-bottom: 1.5em;
}

.enroll-banner .bg-loaded {
    background-size: contain !important;
    background-position: top right;
}

.enroll-banner .text-box {
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
}

.enroll-banner .text-box .text-box-content {
    height: 100%;
}

.faq-row {
    background-color: var(--bd-color-1);
}

.grid-section {
    position: relative;
}

.grid-section .section-content {
    position: absolute !important;
    top: 5%;
    left: 50%;
    transform: translateX(-43%);
    -moz-transform: translateX(-43%);
    --webkit-transform: translateX(-43%);
}

.grid-section .abs-grid .banner, .grid-section .abs-grid .col-inner, .grid-section .abs-grid .col-inner img {
    border-radius: 10px;
}

.grid-section .abs-grid .col-inner {
    border-radius: 10px;
    box-shadow: 3px 3px 15px 3px var(--shadow-color);
}

.grid-section .abs-grid .has-quote .col-inner::before {
    content: "\f10e";
    font-size: 1em;
    color: black;
    z-index: 1000;
    position: absolute;
    top: 5%;
    right: 5%;
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
}

.bubble-arrow {
    --unit: 2px;
    height: 100px;
    width: 100px;
    padding: var(--unit) var(--unit);
    border: var(--unit) solid gray;
    background: rgb(211,211,211);
    background: linear-gradient(170deg, rgba(211,211,211,1) 0%, rgba(255,255,255,1) 100%);
    background-clip: content-box;
    position: relative;
    border-radius: 50%;
}

.bubble-arrow:before {
    --sub-unit: 10px;
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - (var(--sub-unit))/2 - (var(--unit) * 2));
    width: 0;
    border-top: 20px solid #808080;
    border-left: var(--sub-unit) solid transparent;
    border-right: var(--sub-unit) solid transparent;
}

.bubble-arrow:after {
    --sub-unit: 10px;
    content: "";
    position: absolute;
    top: calc(100% - var(--unit));
    left: calc(50% - (var(--sub-unit))/2 - (var(--unit)));
    width: 0;
    border-top: calc(var(--sub-unit) * 2 - var(--unit)) solid white;
    border-left: calc(var(--sub-unit) - var(--unit)) solid transparent;
    border-right: calc(var(--sub-unit) - var(--unit)) solid transparent;
}

.bubble-arrow h4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.process-step .step-dot p,
.process-step .step-text p {
    margin-bottom: 0;
}

.process-step .step-dot i {
    background-color: white;
}

.step-section .step-axis {
    position: absolute;
    bottom: 11%;
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    z-index: -10;
}

.step-section .step-axis hr {
    --unit: 2px;
    opacity: 0.9;
    border-top: solid var(--unit) gray;
}

.step-section .step-axis hr::before {
    content: "";
    display: block;
    width: calc(var(--unit) * 6);
    height: calc(var(--unit) * 6);
    background-color: gray;
    border-radius: 50%;
    position: absolute;
    left: 2em;
    top: calc(0% + var(--unit) * 6 - 2px);
}

.step-section .step-axis hr::after {
    content: "";
    position: absolute;
    right: 1em;
    top: calc(0% + var(--unit) * 4);
    display: block;
    border: calc(var(--unit) * 4) solid transparent;
    border-left-color: gray;
}

.timeline-section {
    padding-left: 1em;
    padding-right: 1em;
}

.timeline-section .section-title {
    margin-bottom: 1em;
}

.timeline-container ol {
    margin: 0;
    list-style: none;
    padding: 0;
    --hue: 1;
    --unit: 1rem;
    display: flex;
    flex-flow: row wrap;
    gap: calc(var(--unit) * 2);
}

.timeline-container p {
    line-height: 1em;
    color: white;
}

.timeline-container p.step-title {
    font-size: 1.3em;
    font-weight: bold;
}

.timeline-container p.step-content {
    font-size: 1.3em;
    margin-bottom: 0;
}

.timeline-container li {
    position: relative;
    padding: 2em 1em;
    flex: 1 1 20%;
    border-radius: 10px;
}

.timeline-container li:nth-child(odd) {
    background-color: var(--py-color);
    border-color: var(--py-color);
}

.timeline-container li:nth-child(even) {
    background-color: var(--sd-color);
    border-color: var(--sd-color);
}

.timeline-container li::before {
    content: "";
    background-color: inherit;
    position: absolute;
    display: block;
    width: var(--unit);
    height: var(--unit);
    left: 100%;
    top: calc(50% - (var(--unit)/2));
}

.timeline-container li::after {
    content: "";
    position: absolute;
    display: block;
    left: calc(100% + var(--unit));
    top: calc(50% - (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
}

.timeline-container li:last-child::before, .timeline-container li:last-child::after {
    content: none;
}

.consult-form .wpcf7-submit {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.training-tabs ul.nav {
    gap: 1em;
}

.training-tabs h4 {
    font-size: 1.4em;
    margin-bottom: 1em;
}

.training-tabs .tab-panels {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.blog-nav, .training-nav, .boarder-nav {
    font-size: 1.2em;
    margin-top: 2em;
    margin-bottom: 3em;
}

.orientation-banner {
    border-radius: 20px;
}

.orientation-banner .box-5 {
    bottom: 8%;
}

.custom-portfolio .gallery {
    align-items: baseline;
}

.custom-portfolio-page h1.entry-title {
    text-align: center;
    margin-top: 1em;
}

.custom-portfolio-page .page-wrapper {
    padding-top: 15px;
}

.custom-portfolio-page .container ul.nav {
    font-size: 1.2em;
    gap: 0.8em;
    margin-bottom: 1em;
}

.custom-portfolio-page .portfolio-box-category {
    display: none;
}

.custom-portfolio-page h6.portfolio-box-title {
    font-size: 1em;
}

.portfolio-archive .portfolio-element-wrapper .box-shade .box-text h6,
.portfolio-archive .portfolio-element-wrapper .box-overlay .box-text h6 {
    color: white;
    opacity: 1;
}
.portfolio-archive .portfolio-element-wrapper .box-shade .box-text {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0px 0px 16px 16px;
    transition: background-color linear 0.3ss;
}
.portfolio-archive .portfolio-box:hover .portfolio-element-wrapper .box-shade .box-text {
    background-color: rgba(0, 0, 0, 0.5);
}

ul.home-video {
    display: flex;
    flex-flow: row wrap;
    gap: 2em;
}

ul.home-video li.home-video-item {
    flex: 1 1 30%;
}

.announce-area li {
    margin-bottom: 0 !important;
}

.announce-area li p:last-child {
    margin-bottom: 0 !important;
}

.square-icon-box>p {
    margin-bottom: 0.5em;
    width: min-content;
    padding: 0.3em 0.6em;
    background-color: var(--py-color);
    color: white;
    border-radius: 5px;
}

.widget .tagcloud a {
    background-color: #ddd;
    border-radius: 3px;
    color: black;
    display: inline-block;
    font-size: 16px !important;
    margin: 0 5px 5px 0;
    padding: 2px 5px;
    text-decoration: none;
}

.widget .tagcloud a:hover {
    color: white;
}

#post-list .post .entry-category, #post-list .post .entry-divider, #post-list .post .entry-meta {
    display: none;
}

.featured-posts .post-item .cat-label, .featured-posts .post-item .is-divider, .featured-posts .post-item .from_the_blog_excerpt {
    display: none;
}

.custom-featured-image {
    max-height: 800px;
    overflow: hidden;
    margin-bottom: 3em;
}

.custom-featured-image > img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.custom-post .box-text {
    vertical-align: top;
    padding-top: 0;
}

@media only screen and (max-width: 549px) {
    .first-news .post-item .box-image .image-cover {
        padding-top: 70% !important;
    }
    .enroll-row {
        padding-top: unset;
        margin-top: 2em !important;
    }
    .timeline-container ol {
        flex-flow: row wrap;
        justify-content: center;
    }
    .timeline-container li {
        margin-bottom: 0;
        flex: 0 0 70%;
        max-width: 70%;
    }
    .timeline-container p.step-content {
        font-size: 1em;
        margin-bottom: 0;
    }
    .timeline-container li::before {
        content: "";
        background-color: inherit;
        position: absolute;
        display: block;
        width: var(--unit);
        height: var(--unit);
        top: 100%;
        left: calc(50% - (var(--unit)/2));
    }
    .timeline-container li::after {
        content: "";
        position: absolute;
        display: block;
        top: calc(100% + var(--unit));
        left: calc(50% - (var(--unit)));
        border: var(--unit) solid transparent;
        border-top-color: inherit;
    }
    .first-news .post-item .box-blog-post .box-text {
        padding: 1em;
    }
    .first-news .post-item .box-image .image-cover {
        padding-top: 75%;
    }
    .news-tabs ul.nav {
        width: 100%;
        position: absolute;
        top: 4em;
        justify-content: center;
    }
    .news-tabs ul.nav li.tab {
        padding-left: 1em;
        padding-right: 1em;
        border-right: solid 0.1em var(--py-color);
    }
    .news-tabs ul.nav li.tab:first-child {
        padding-left: 0;
    }
    .news-tabs ul.nav li.tab:last-child {
        padding-left: 1em;
        padding-right: 0;
    }
    .news-tabs ul.nav li.tab a {
        padding-top: 0;
        padding-bottom: 0;
    }
    .news-tabs .tab-panels {
        margin-top: 1em;
    }
    .testa-slide .flickity-viewport {
        height: 1000px !important;
    }
    
    .testa-slide .testa-banner {
        border-radius: 30px;
        margin-top: 100px !important;
    }
    
    .testa-section {
        padding-top: 1em !important;
        padding-bottom: 1em !important;
        margin-top: 0px !important;
        border-radius: 20px;
    }
    
    .testa-section ul.testa-area {
        position: relative;
        height: 900px;
    }
    
    .testa-section .testa-widget {
        margin-bottom: 0 !important;
    }
    
    .testa-section .testa-widget:first-child {
        width: 100%;
        position: unset;
        bottom: unset;
        left: unset;
    }
    
    .testa-section .testa-widget:first-child img {
        height: 500px !important;
        width: auto !important;
    }
    
    .testa-section .testa-widget:last-child {
        width: 100%;
        padding: 5px 5px;
        float: none;
        position: absolute;
        top: 20%;
        left: 0;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 15px;
    }
    
    .testa-section .testa-widget:last-child h4 {
        color: inherit;
        font-size: 1em;
        font-weight: bold;
    }
}

@media only screen and (min-width: 550px) and (max-width: 849px) {
    .first-news .post-item .box-image .image-cover {
        padding-top: 70% !important;
    }
    .testa-slide .flickity-viewport {
        height: 600px !important;
    }
    
    .testa-slide .testa-banner {
        border-radius: 30px;
        margin-top: unset !important;
    }
    
    .testa-section {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0px !important;
        border-radius: 20px;
    }
    
    .testa-section ul.testa-area {
        position: relative;
        height: 450px;
    }
    
    .testa-section .testa-widget {
        margin-bottom: 0 !important;
    }
    
    .testa-section .testa-widget:first-child {
        width: 30%;
        position: absolute;
        top: 10%;
        left: 0%;
    }
    
    .testa-section .testa-widget:first-child img {
        height: auto !important;
        width: auto !important;
    }
    
    .testa-section .testa-widget:last-child {
        width: 65%;
        padding-top: 1em;
        float: right;
        color: white;
    }
    
    .testa-section .testa-widget:last-child h4 {
        color: inherit;
        font-size: 1.3em;
        font-weight: bold;
    }
}

@media only screen and (max-width: 849px) {
    .timeline-container p {
        line-height: 1.5em;
        color: white;
    }
    .timeline-container p.step-title, .timeline-container p.step-content {
        font-size: 1em;
    }
    .consult-form .wpcf7-submit {
        display: unset;
        margin-left: unset;
        margin-right: unset;
    }
    .header-statement {
        padding-top: 0;
        padding-bottom: 0;
    }
    .header-statement::before, .header-statement::after {
        display: none;
    }
    .first-news .post-item .box-blog-post .box-text {
        padding: 1em;
    }
}

@media only screen and (min-width: 1367px) {
    .limit-width-lg {
        max-width: var(--limit-width) !important;
        margin-left: auto;
        margin-right: auto;
    }
    .limit-width-nd {
        max-width: 1280px !important;
        margin-left: auto;
        margin-right: auto;
    }
    .featured-title {
        max-width: var(--limit-width) !important;
        margin-left: auto;
        margin-right: auto;
    }
}