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

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

html, body {
    width: 100% !important;
    overflow-x: hidden !important;
}

.gtm-text-editor.link-dark-bg a{
    color: var(--e-global-color-accent);
    text-decoration: none;
}

.gtm-text-editor.link-dark-bg a:hover{
    text-decoration: underline;
}

.gtm-text-editor.linked-white-bg a {
    color: var(--e-global-color-primary);
}

.gtm-text-editor.linked-white-bg a:hover {
    text-decoration: underline;
    cursor: pointer;
}

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

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

h3{
    font-size: 37px !important;
    line-height: 1.2  !important;
}

h4{
    font-size: 35px !important;
    line-height: 1.2 !important;
}

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

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

p,
li,
.elementor-button-text{
    font-size: 18px !important;
}

.gtm-links.white-bg{
    color: var(--e-global-color-primary);
    text-decoration: none;
}

.gtm-links.white-bg:hover{
    text-decoration: underline;
}

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

.highlight-green{
    color: var(--e-global-color-primary);
}

/****************
* Absolute Bars *
*****************/

/* Header */

.gtm-hero-image-container{
    position: relative !important;
    overflow-y: visible !important;
}

.gtm-header-bar.big{
    width: 350px;
    height: 100%;
    transform: skewX(-10deg);
    right: 90px;
    left: auto !important;
}

.gtm-header-bar.small{
    width: 250px;
    height: 80%;
    transform: skew(-10deg);
    left: auto !important;
    right: 0;
    top: auto !important;
    bottom: auto;
}

/* Navigation */
.gtm-nav a:hover{
    color: var(--e-global-color-accent) !important;
}

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

/******************
* Content Section *
*******************/

.gtm-line{
    height: 5px;
    margin-left: auto;
    margin-right: 0;
    width: 0;
    transform-origin: right center;
    transition: width .8s ease-out;
}

.gtm-line-left{
    height: 5px;
    width: 0;
    transform-origin: left center;
    transition: width .8s ease-out;
}

.gtm-line.light-green,
.gtm-line-left.light-green{
    background: var(--e-global-color-accent);
}

.gtm-line.green,
.gtm-line-left.green{
    background: var(--e-global-color-primary);
}

.gtm-lines-wrapper.gtm-lines-active .gtm-line.light-green,
.gtm-lines-wrapper.gtm-lines-active .gtm-line-left.light-green{
    width: 100%;
}

.gtm-lines-wrapper.gtm-lines-active .gtm-line.green,
.gtm-lines-wrapper.gtm-lines-active .gtm-line-left.green{
    width: 98%;
}

.gtm-lines-wrapper.gtm-lines-active .gtm-line.light-green.short{
    width: 50%;
}

.gtm-lines-wrapper.gtm-lines-active .gtm-line.green.short{
    width: 48%;
}

/* 2 col with Image and Text */
.gtm-img-bg-box{
    width: 250px !important;
    height: 100% !important;
    transform: skewX(12deg);
    left: 50% !important;
}

/*****************
* Content Banner *
******************/

.gtm-skew-bg-box{
    width: 60% !important;
    height: 65vh !important;
    z-index: 1 !important;
}

.gtm-skew-bg-box.left{
    left: auto !important;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 150px 100%);
}

.gtm-skew-bg-box.right{
    clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
}

.gtm-cb-content-box{
    z-index: 2 !important;
}

.gtm-cb-accent-box{
    width: 250px !important;
    height: 70% !important;
}

.gtm-cb-accent-box.left{
    left: 40% !important;
    transform: skew(12deg);
}

.gtm-cb-accent-box.right{
    left: 48% !important;
    transform: skewX(-12deg);
    bottom: 0 !important;
    top: auto !important;
}

/********************
* Carousel Icon Box *
*********************/

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

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

.gtm-ib-bg-absolute{
    width: 35% !important;
    height: 90% !important;
    left: auto !important;
    right: 15%;
    top: auto !important;
    bottom: 0;
    transform: skewX(12deg);
    z-index: -1 !important;
}

/**************************
* Project Content Section *
***************************/

.gtm-project-section::after{
    content: "";
    position: absolute;
    width: 250px;
    background: linear-gradient(90deg, rgba(153,209,64,.6) ,rgba(1,146,112,.6));
    height: 100%;
    top: 0;
}

.gtm-project-section.img-left::after{
    transform: skewX(12deg);
    left: 25%;
}

.gtm-project-section.img-right::after{
    transform: skewX(-12deg);
    left: auto;
    right: 25%;
}

.gtm-project-content-container{
    margin-left: auto !important;
    margin-right: 0 !important;
}

.gtm-project-image-container{
    height: 80% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

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

.gtm-contact-image::after{
    content: "";
    position: absolute;
    z-index: 1;
    background: linear-gradient(90deg, var(--e-global-color-91a565a), var(--e-global-color-c05a890));
    width: 250px;
    transform: skewX(-12deg);
    height: 100%;
    top: 0;
    right: 60px;
    left: auto;
}

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

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

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

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

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

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

/*************
* Responsive *
**************/

@media (max-width: 1024px){

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

    .gtm-content-section .e-con-inner{
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .gtm-content-container{
        width: 100% !important;
        order: 2 !important;
    }

    .gtm-line-container{
        position: relative !important;
        width: 100% !important;
        margin-bottom: 50px !important;
        order: 1 !important;
    }

    /* Content Banner */
    .gtm-skew-bg-box{
        /*clip-path: none !important;*/
        width: 100% !important;
    }

    .gtm-cb-accent-box.left{
        left: 0 !important;
    }

    .gtm-cb-accent-box.right{
        left: auto !important;
        right: 0 !important;
        transform: skewX(-8deg);
    }

    /* 2 col Image with Text */
    .gtm-content-image-container .e-con-inner{
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 767px){

    /* Typography */

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

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

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

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

    /* Header */

    .gtm-hero-image-container::after{
        content: "" !important;
        position: absolute !important;
        inset: 0;
        background: var(--e-global-color-e1d6af8);
    }

    .gtm-header-bar{
        background: var(--e-global-color-e1d6af8) !important;
    }

    /* Content Banner */
    .gtm-skew-bg-box{
        clip-path: none !important;
        width: 100% !important;
        height: 100% !important;
    }
}