/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

div.ot-dtp-picker.wide {
    width:100%;
}
.ot-dtp-picker.wide form.ot-dtp-picker-form {
    background: transparent;
    border: 0px;
    height: auto!important;
    text-align: center;
    
}

div.ot-dtp-picker.wide .ot-title {
    text-align: center;
}

.ot-dtp-picker.wide form.ot-dtp-picker-form > div {
    display: inline-block !important;
    float:none !important;
    vertical-align: top;
    text-align: center;
    background:white;
    margin: 4px;
}

.ot-dtp-picker.wide form.ot-dtp-picker-form > input.ot-button {
    display: block;
    clear: both;
    margin: 15px auto 10px !important;
    float:none;
    background: #000000 !important;
    border-color:  #000 !important;
    border-radius:4px;
    width: 196px !important;
}

.picker__box table td, .picker__box table th {
    padding:0;
    line-height: 1;
    vertical-align: middle;
}

div.ot-dtp-picker.wide .ot-powered-by {
    background-position: center;
}

.stretched-link {
    position: relative;
}
.stretched-link a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    /*display: block;*/
}



body:not(.elementor-editor-active) .slideNav {
    position: absolute;
    right: 5%;
    top: 50%;
    margin-top: -200px;
    width: 50px;
}

body:not(.elementor-editor-active) .slideNav button {
    border: 0;
    background: none;
    width: 35px;
    height: 35px;
    overflow: hidden;
    text-indent: -9990px;
    position: relative;
}

body:not(.elementor-editor-active) .slideNav button:before {
    content: "";
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left:  -8px;
    background-color: #fff;
    opacity: 0.7;
    border-radius: 50%;
}
body:not(.elementor-editor-active) .slideNav button.active:before {
    background-color: #000;
}

.leafs > div {
    z-index: 100;
}
.leafs > .leafs-container {
    z-index: 50;
}
.leafs-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*border: 2px solid red;*/
}

.leafs-container > span {
    /*border: 2px solid red;*/
    display: block; 
    position: absolute;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.leafs-container > span.leaf-1 {
    background-position: top center;
    background-image:  url(assets/img/leafs-1.svg);
    width: 265px;
    height: 370px;
    top: -10%;
    right: 70%;
}

.leafs-container > span.leaf-2 {
    background-image:  url(assets/img/leafs-2.svg);
    width: 434px;
    height: 427px;
    top: -18%;
    left: 40%;
    margin-left: -200px;
}

.leafs-container > span.leaf-3 {
    background-image:  url(assets/img/leafs-3.svg);
    width: 300px;
    height: 450px;
    top: -18%;
    left: 60%;
}

.leafs-container > span.leaf-4 {
    background-image:  url(assets/img/leafs-4.svg);
    width: 434px;
    height: 427px;
    bottom: 50%;
    right: -8%;
}

.leafs-container > span.leaf-5 {
    background-image:  url(assets/img/leafs-5.svg);
    width: 350px;
    height: 427px;
    top: 45%;
    right: -4%;
}

.leafs-container > span.leaf-6 {
    background-image:  url(assets/img/leafs-6.svg);
    width: 350px;
    height: 400px;
    bottom: -8%;
    left: 65%;
}

.leafs-container > span.leaf-7 {
    background-image:  url(assets/img/leafs-7.svg);
    width: 350px;
    height: 400px;
    bottom: -18%;
    left: 35%;
}

.leafs-container > span.leaf-8 {
    background-image:  url(assets/img/leafs-8.svg);
    width: 500px;
    height: 400px;
    bottom: -10%;
    right: 70%;
    
}

.leafs-container > span.leaf-9 {
    background-image:  url(assets/img/leafs-9.svg);
    width: 300px;
    height: 400px;
    top: 25%;
    left: -3%;   
}

.leafs-container > span.leaf-1,
.leafs-container > span.leaf-2,
.leafs-container > span.leaf-3 {
    transform-origin: top center;
}

.leafs-container > span.leaf-4,
.leafs-container > span.leaf-5 {
    transform-origin: center right;
}

.leafs-container > span.leaf-6,
.leafs-container > span.leaf-7,
.leafs-container > span.leaf-8 {
    transform-origin: bottom center;
}

.leafs-container > span.leaf-9 {
    transform-origin: center left;
}

@media only screen and (max-width: 1380px) {
    
    .leafs-container > span {
        transform: scale(0.8);
    }

    /*.leafs-container > span.leaf-4 {
        bottom: 40%;
        right: -15%;
    }

    .leafs-container > span.leaf-5 {
        top: 35%;
        right: -15%;
    }

    .leafs-container > span.leaf-8 {
        bottom: -10%;
        right: 50%;   
    }

    .leafs-container > span.leaf-9 {
        left: -10%;   
    }*/
} 

@media only screen and (max-width: 1024px) {
    
    body:not(.elementor-editor-active) .slideNav {
        display: none;
    }

    .leafs-container > span {
        transform: scale(0.6);
    }

    .leafs-container > span.leaf-4 {
        bottom: 40%;
        right: -15%;
    }

    .leafs-container > span.leaf-5 {
        top: 35%;
        right: -15%;
    }

    .leafs-container > span.leaf-8 {
        bottom: -10%;
        right: 50%;   
    }

    .leafs-container > span.leaf-9 {
        left: -10%;   
    }
} 

@media only screen and (max-width: 767px) {

    

    .leafs-container > span {
        transform: scale(0.4);
    }

    .leafs-container > span.leaf-1 {
        right: 55%;
    }
    .leafs-container > span.leaf-2 {
        left: 39%;
    }
    .leafs-container > span.leaf-3 {
        left: 48%;
    }

    .leafs-container > span.leaf-4 {
        right: -35%;
    }

    .leafs-container > span.leaf-5 {
        top: 22%;
    }
    .leafs-container > span.leaf-6 {
        right: -100px;left: auto;
    }
    .leafs-container > span.leaf-7 {
        left: 50%;
        margin-left: -180px;
    }
    .leafs-container > span.leaf-8 {
       left: -200px;
       right: auto;
    }
    .leafs-container > span.leaf-9 {
        left: -18%;
        top: 22%;
    }
}