/*
Theme Name: Helle Elementor Child
Theme URI: https://minreals-reast.greentech.nrw
Description: Child Theme for Hello Elementor
Author URI: https://meuter.de
Template: hello-elementor
Version: 1.0
 */

/**********
* General *
***********/

.gtme-title-hightlight-light-green{
    color: var(--e-global-color-accent);
}

.gtme-button .elementor-button-text{
    text-transform: uppercase !important;
}

/*************
* Typography *
**************/

h1, h2{
    font-size: 47px !important;
    line-height: 1.2 !important;
}

h3{
    font-size: 35px !important;
}

h4{
    font-size: 27px !important;
}

h5{
    font-size: 22px !important;
}

h6{
    font-size: 18px !important;
}

p{
    font-size: 18px !important;
}

.gtme-txt-edit li,
.gtme-icon-list .elementor-icon-list-text{
    font-size: 18px !important;
}

/* Links */

.gtme-txt-edit a{
    color: var(--e-global-color-primary) !important;
}

.gtme-txt-edit a:hover{
    text-decoration: underline !important;
}

/******************
* Header Nav Menu *
*******************/

.gtme-main-menu a{
    font-size: 20px !important;
}

.gtme-mobile-nav{
    display: none !important;
}

/**************************
* Full Width Image Spacer *
***************************/

.gtme-content-container{
    position: relative !important;
    overflow: hidden !important;
}

.gtme-content-container-inner.right{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 150px 100%);
}

.gtme-content-container-inner.left{
    clip-path: polygon(0% 0%, 100% 0, 90% 100%, 0% 100%);
}

.gtme-is-polygon-right{
    position: absolute !important;
    height: 100% !important;
    width: 45% !important;
}

.gtme-is-polygon-left{
    position: absolute !important;
    height: 100% !important;
    width: 45% !important;
}

.gtme-is-polygon-right.light-green{
    background: var(--e-global-color-accent);
    top: 10px;
    left: 15px;
    clip-path: polygon(450px 0%, 0% 0%, 145px 100%, 160px 100%, 16px 15px, 450px 15px);
}

.gtme-is-polygon-left.light-green{
    background: var(--e-global-color-accent);
    top: 1.6% !important;
    right: 1.5%;
    clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 75% 100%, 96% 15px, 0% 15px);
}

.gtme-is-polygon-right.green{
    background: var(--e-global-color-primary);
    top: 0;
    clip-path: polygon(450px 0%, 0% 0%, 145px 100%, 160px 100%, 16px 15px, 450px 15px);
}

.gtme-is-polygon-left.green{
    background: var(--e-global-color-primary);
    top: 0;
    right: 0;
    clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 75% 100%, 96% 15px, 0% 15px);
}

/******************************************
* 2 Col Text And Absolute Image Container *
*******************************************/

.gtme-absolute-image-container{
    overflow: hidden !important;
    height: 100% !important;
}

.gtme-absolute-image{
    height: 100% !important;
}

.gtme-image-overlay-polygon-right{
    position: absolute !important;
    height: 100% !important;
    width: 45% !important;
}

.gtme-image-overlay-polygon-right.green{
    background: var(--e-global-color-primary);
    top: 0;
    left: 0;
    clip-path: polygon(100% 0%, 0 0, 65% 100%, 70% 100%, 7% 3%, 100% 3%);
}

.gtme-image-overlay-polygon-right.light-green{
    background: var(--e-global-color-accent);
    top: 3%;
    left: 3%;
    clip-path: polygon(100% 0%, 0 0, 65% 100%, 70% 100%, 7% 3%, 100% 3%);
}

.gtme-image-overlay-polygon-left{
    position: absolute !important;
    height: 100% !important;
    width: 45% !important;
}

.gtme-image-overlay-polygon-left.green{
    background: var(--e-global-color-primary);
    top: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 65% 100%, 61% 100%, 95% 3%, 0 3%);
}

.gtme-image-overlay-polygon-left.light-green{
    background: var(--e-global-color-accent);
    top: 3%;
    right: 1.5%;
    clip-path: polygon(0 0, 100% 0, 65% 100%, 61% 100%, 95% 3%, 0 3%);
}

/***********
* Carousel *
************/

.gtme-carousel-item{
    position: relative !important;
    overflow: hidden !important;
}

.gtme-carousel-polygon{
    position: absolute !important;
}

.gtme-carousel-polygon.green{
    background: var(--e-global-color-primary);
    bottom: 0;
    height: 95%;
    width: 95%;
    clip-path: polygon(0% 100%, 100% 100%, 100% 97%, 19px 97%, 115px 0%, 100px 0%);
}

.gtme-carousel-polygon.light-green{
    background: var(--e-global-color-accent);
    height: 100% !important;
    width: 100% !important;
    bottom: 15px;
    left: 25px;
    clip-path: polygon(0% 100%, 100% 100%, 100% 97%, 19px 97%, 120px 0%, 105px 0%);
}

/****************
* Opening Times *
*****************/

.gtme-icon-box .elementor-icon-box-icon{
    background: var(--e-global-color-accent);
    transform: skewX(12deg);
    padding: 15px;
}

.gtme-icon-box .elementor-icon-box-icon .elementor-icon{
    transform: skewX(-12deg);
}

/***************
* Contact Form *
****************/

.gtme-contact-form .elementor-button-text{
    text-transform: uppercase;
}

.gtme-contact-form-link{
    color: var(--e-global-color-primary);
}

.gtme-contact-form-link:hover{
    color: var(--e-global-color-primary);
    text-decoration: underline;
}

/***********
* Contacts *
************/

.gtme-contacts-img-container{
    overflow: hidden !important;
}

.gtme-contact-img-line{
    position: absolute !important;
    width: 50% !important;
    height: 100% !important;
}

.gtme-contact-img-line.green{
    background: var(--e-global-color-primary);
    top: 0;
    left: auto;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 73% 100%, 70% 100%, 97% 2%, 0 2%);
    z-index: 2;
}

.gtme-contact-img-line.light-green{
    background: var(--e-global-color-accent);
    top: 2%;
    left: auto;
    right: 1.5%;
    clip-path: polygon(0 0, 100% 0, 73% 100%, 70% 100%, 97% 2%, 0 2%);
    z-index: 3;
}

.gtme-contacts-img{
    height: 96% !important;
}

/*********
* Footer *
**********/

.gtme-footer-links a{
    color: var(--e-global-color-accent);
}

.gtme-footer-links a:hover{
    color: var(--e-global-color-accent);
    text-decoration: underline;
}

.gtme-icon-list .elementor-icon-list-item a:hover{

}

/****************
* Cookie Policy *
*****************/

.gtme-cookie-policy h2{
    color: var(--e-global-color-primary);
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 35px !important;
}

.gtme-cookie-policy h3{
    font-size: 25px !important;
}

.gtme-cookie-policy p{
    font-family: var(--e-global-typography-text-font-family);
    font-size: 18px !important;
    color: var(--e-global-color-text);
}

.gtme-cookie-policy p a{
    color: var(--e-global-color-primary);
    text-decoration: none !important;
}

.gtme-cookie-policy p a:hover{
    text-decoration: underline !important;
}

@media (max-width:1024px) {

    /******************
    * Header Nav Menu *
    *******************/

    .gtme-mobile-nav{
        display: block !important;
    }

    /******************************************
    * 2 Col Text and Absolute Image Container *
    *******************************************/

    .gtme-txt-img-section .e-con-inner{
        display: block !important;
    }

    .gtme-absolute-image-container{
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .gtme-image-overlay-polygon-right.green
    {
        clip-path: polygon(100% 0%, 0 0, 15% 100%, 19% 100%, 4% 3%, 100% 3%);
    }

    .gtme-image-overlay-polygon-right.light-green
    {
        clip-path: polygon(100% 0%, 0 0, 15% 100%, 19% 100%, 4% 3%, 100% 3%);
        left: 1.8%;
    }

    /**********
    * OSM Map *
    ***********/

    .gtme-osm-map-section .e-con-inner{
        display: block !important;
    }

    .gtme-osm-map-container{
        position: relative !important;
    }
}

@media(max-width: 767px){

    /*************
    * Typography *
    **************/

    h1, h2{
        font-size: 37px !important;
    }

    h3{
        font-size: 27px !important;
    }

    h4{
        font-size: 25px !important;
    }

    /**************************
    * Full Width Image Spacer *
    ***************************/

    .gtme-content-container-inner{
        clip-path: none !important;
    }

    /***********
    * Carousel *
    ************/

    .gtme-carousel-polygon{
        display: none !important;
    }
}