/*
 Theme Name:   VHS
 Description:  Theme der VHS NRW
 Author:       netkotec
 Author URI:   https://netkotec.de
 Template:     hello-elementor
 Version:      1.0
 Text Domain:  vhs 
*/

a {
    color: #556f91;
}

a:hover {
    color: #00285a;
}

.main-menu.elementor-sticky .sticky-logo {
    opacity: 0;
}

.main-menu.elementor-sticky--effects .sticky-logo {
    opacity: 100%;
    transition: all 0.25s;
}

.main-menu {
    z-index: 102 !important;
}

/*.main-menu .main-menu-nav .menu-item {
    position: initial;
}*/

.main-menu .main-menu-nav .menu-item .sub-menu {
    margin-top: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 44px;
    border-left: 5px solid #cedeec;
    border-right: 5px solid #cedeec;
    box-shadow: 0px 10px 15px -10px rgba(0, 0, 0, 0.5);
}

.main-menu .main-menu-nav .menu-item .sub-menu .menu-item .sub-menu {
    left: 100% !important;
    top: 0 !important;
}

.main-menu .main-menu-nav .menu-item .sub-menu .menu-item > a:hover {
    color: white;
    background-color: #00285a;
    padding-left: 25px;
}

.elementor-swiper-button {
    z-index: 101 !important;
}

.footer-content .footer-nav nav ul li > a {
    padding-right: 0;
}

.footer-content .footer-nav nav ul li > a:hover {
    padding-right: 10px !important;
    transition: 0.4s;
}

.footer-content .footer-nav nav ul li ul {
    display: none !important;
}

.footer-content .elementor-widget-container > h5 {
    display: none;
}

.elementor-column-gap-default
    > .elementor-row
    > .elementor-column
    > .elementor-element-populated {
    padding: 5px;
}

.sidebar-widget:not(.social-media-tabs) {
    cursor: pointer;
}

.bubble {
    position: relative;
    overflow: hidden;
}

/*.bubble::before {
    position: absolute;
    content: "";
    display: none;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #69b6d5;
    z-index: 100;
    opacity: 50%;
    top: -25px;
    left: -150px;
}

.bubble:hover::before {
    display: inline-block
}*/
.bubble {
    cursor: pointer;
}

.bubble::before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/grey_circle.svg");
    display: inline-block;
    width: 75%;
    height: 200%;
    z-index: 100;
    opacity: 100%;
    top: -60%;
    left: -68%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bubble:hover::before {
    left: -65%;
    opacity: 75%;
    transition: left 0.25s ease-in-out, opacity 0.5s ease-in-out;
}

.bubble::after {
    position: absolute;
    content: "";
    background-image: url("./assets/images/white_circle.svg");
    display: inline-block;
    width: 75%;
    height: 200%;
    z-index: 100;
    opacity: 0%;
    top: 50%;
    left: -30%;
    background-position: initial;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bubble:hover::after {
    opacity: 50%;
    transition: all 0.5s ease-in-out;
}

.bubble-slider {
    position: relative;
    overflow: hidden;
}

.bubble-slider::before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/white_circle.svg");
    display: inline-block;
    width: 75%;
    height: 200%;
    z-index: 100;
    opacity: 50%;
    bottom: -160%;
    right: -30%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bubble-slider::after {
    position: absolute;
    content: "";
    background-image: url("./assets/images/blue_circle.svg");
    display: inline-block;
    width: 50%;
    height: 100%;
    z-index: 100;
    opacity: 50%;
    bottom: 0;
    right: -30%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.course-finder {
    overflow: hidden;
}

.course-finder::before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/white_circle.svg");
    display: inline-block;
    width: 75%;
    height: 250%;
    z-index: 0;
    opacity: 25%;
    top: -135%;
    right: -32.5%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.course-finder::after {
    position: absolute;
    content: "";
    background-image: url("./assets/images/blue_circle.svg");
    display: inline-block;
    width: 50%;
    height: 400%;
    z-index: 1;
    opacity: 50%;
    top: -280%;
    right: -29.5%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.course-finder > div {
    z-index: 2;
}

.teaser .teaser-image {
    z-index: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.teaser .teaser-content {
    z-index: 2;
    cursor: pointer;
}

.teaser .teaser-image::before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/grey_circle.svg");
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 75%;
    top: 25%;
    left: -50%;
    background-repeat: no-repeat;
    background-size: 100%;
}

.teaser:hover .teaser-image::before {
    top: 22.5%;
    left: -47.5%;
    opacity: 95%;
    transition: all 0.25s ease-in-out;
}

.teaser .teaser-image::after {
    position: absolute;
    content: "";
    background-image: url("./assets/images/blue_circle.svg");
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 50%;
    top: -65%;
    right: -56%;
    background-repeat: no-repeat;
    background-size: 100%;
    /* rotate: 180deg; */
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari and Chrome */
    -o-transform: rotate(180deg);
}

.teaser:hover .teaser-image::after {
    top: -62.5%;
    right: -54.5%;
    opacity: 75%;
    transition: all 0.25s ease-in-out;
}

.calendar-item > div {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.calendar-item > div > div > section:first-of-type {
    z-index: 2;
}

.calendar-item-round {
    height: 285px;
    position: relative;
    cursor: pointer;
}

.calendar-item-round > div > div {
    margin-top: 35%;
}

.calendar-item-round .date {
    position: absolute;
    width: 200px !important;
    bottom: 10px;
    left: 24px;
}

.calendar-item-round .date > div {
    padding-top: 10px;
}

.blog-post > div {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.blog-post > div > div > section:first-of-type {
    z-index: 2;
}

.blog-post > div::before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/white_circle.svg");
    display: inline-block;
    width: 100%;
    height: 300%;
    z-index: 3;
    opacity: 75%;
    top: -85%;
    right: -85%;
    background-repeat: no-repeat;
}

.blog-post > div::after {
    position: absolute;
    content: "";
    background-image: url("./assets/images/blue_circle.svg");
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 50%;
    bottom: -60%;
    right: -30%;
    background-repeat: no-repeat;
}

.blog-post:hover > div::before {
    opacity: 95%;
    right: -75%;
    transition: all 0.25s ease-in-out;
}

.blog-post:hover > div::after {
    opacity: 75%;
    transition: all 0.25s ease-in-out;
}

.blog-post .post-content,
.blog-post .post-content > div {
    height: 100%;
}

.newsletter-cta {
    position: relative;
    overflow: hidden;
}

.newsletter-cta:before {
    position: absolute;
    content: "";
    background-image: url("./assets/images/dotted-circle.png");
    display: inline-block;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 75%;
    top: 0;
    right: -25%;
    background-repeat: no-repeat;
}

.newsletter-cta > div {
    z-index: 4;
}

.newsletter-subscription-form #newsletter-subscription-submit {
    display: none;
}

.slider-container {
    margin: 0 !important;
}

.slider-control {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    z-index: 2;
    margin: 0 150px;
}

.slider-control .slide-bubble {
    width: 15px;
    height: 15px;
    display: inline-block;
    border: 1px solid #86898b;
    border-radius: 100%;
    margin: 0 5px;
    cursor: pointer;
}

.slider-control .slide-bubble.active {
    background-color: #86898b;
}

select {
}

.elementor-editor-active .bubble::before,
.elementor-editor-active .bubble::after {
    display: none;
}

.elementor-editor-active .bubble-slider::before,
.elementor-editor-active .bubble-slider::after {
    display: none;
}

.elementor-editor-active .course-finder::before,
.elementor-editor-active .course-finder::after {
    display: none;
}
.elementor-editor-active .teaser .teaser-image::before,
.elementor-editor-active .teaser .teaser-image::after {
    display: none;
}

.elementor-editor-active .calendar-item > div::before,
.elementor-editor-active .calendar-item > div::after {
    display: none;
}

.elementor-editor-active .blog-post > div::before,
.elementor-editor-active .blog-post > div::after {
    display: none;
}

.elementor-editor-active .contact-container > div::before,
.elementor-editor-active .contact-container > div::after {
    display: none;
}

.elementor-editor-active .newsletter-cta:before {
    display: none;
}

.sub-arrow + .sub-arrow {
    display: none;
}