/* 
 Theme Name:     Ottmar-DIVI-Child 30.05.23 english version  !! Don't activate !!
 Author:         Roland Rabel
 Author URI:     http://www.rkrwebregal.de
 Template:       Divi
 Version:        30.05.23
 Description:   style.css for Ottmars Website

*/


/* ----- Ottmars Farben ----- */

.divi-light-blue {
    color: #74d4ff;
}

.divi-dark-blue {
    color: #0075bf;
}

.divi-link-blue {
    color: #2ea3f2;
}


/* Header text */

#et-top-navigation {
    font-weight: 400;
}


/* no line below header */

header#main-header.et-fixed-header,
#main-header {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}


/* ----- row width for mobile ---- */

@media (max-width: 480px) {
    .mobile-width-20 {
        width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ---- Remove bottom footer from Divi ----- */

#footer-bottom {
    display: none;
}


/* ----- thicker line -----*/

header#main-header {
    border-bottom: 0px solid #eeeeee;
}

div#top-header {
    border-bottom: 0px solid #eeeeee;
}


/*---- height of google map on mobile 400px fixed ----*/

@media (max-width: 768px) {
    .et_pb_map {
        height: 400px !important
    }
}


/*------- Expand / Collapse with text or carrot -----------*/

.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    padding-top: 5px;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-checked-text .read-unchecked-text {
    cursor: pointer;
}

.read-more-carrot {
    cursor: pointer;
    display: block;
    float: right;
    margin-right: 5px;
    font-family: 'ETmodules';
    font-size: 30px;
}

.read-more-state~.read-more-carrot:before {
    content: '\33';
}

.read-more-state:checked~.read-more-carrot:before {
    content: '\32';
}

.read-more-state~.read-unchecked-text {
    display: inline-block;
    cursor: pointer;
}

.read-more-state:checked~.read-unchecked-text {
    display: none;
}

.read-more-state~.read-checked-text {
    display: none;
}

.read-more-state:checked~.read-checked-text {
    display: inline-block;
    cursor: pointer;
}

.read-more-checked-text:hover,
.read-unchecked-text:hover,
.read-more-carrot:hover {
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
    color: #666666;
    background-color: #e6e6e6;
}


/*------- END of Expand / Collapse with text or carrot -----------*/


/*---- Correction of gap between header and first section ----*/

@media (max-width: 980px) {
    #page-container {
        padding-top: 70px !important;
    }
}


/*--- Mobile Slide in from left or right-----*/


/*--- Theme Customizer setting: Headerformat Standard -----*/

@media (max-width: 980px) {
    div.container.clearfix.et_menu_container {
        width: 95% !important;
        margin-left: 0 !important
    }

    .et_header_style_left .logo_container {
        left: 5%;
    }

    span.mobile_menu_bar.mobile_menu_bar_toggle {
        padding-bottom: 14px !important;
    }

    /* fix menu at top */
    .et_non_fixed_nav.et_transparent_nav #main-header,
    .et_non_fixed_nav.et_transparent_nav #top-header,
    .et_fixed_nav #main-header,
    .et_fixed_nav #top-header {
        position: fixed !important;
    }

    .et_mobile_menu {
        display: block !important;
        border-top: none;
        margin-top: -10px;
        padding-top: 20px;
        padding-bottom: 40px;
        padding-left: 2%;
        padding-right: 0;
        width: 250px !important;
    }

    /* -- direction left or right --*/
    .mobile_nav.closed #mobile_menu {
        transform: rotateY(90deg);
        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        transform-origin: left;
        -webkit-transform-origin: left;
        -moz-transform-origin: left;
        transition: .4s ease-in-out !important;
    }

    .mobile_nav.opened #mobile_menu {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        transform-origin: left;
        -webkit-transform-origin: left;
        -moz-transform-origin: left;
        transition: .4s ease-in-out;
    }
}

@media (max-width: 980px) and (min-height: 501px) {

    /*-- full height --*/
    .et_mobile_menu {
        height: 100vh;
    }
}

@media (max-width: 980px) and (max-height:500px) {

    /*-- float height --*/
    .et_mobile_menu {
        min-height: 80vh;
        max-height: 83vh;
        overflow-y: auto !important;
    }
}


/* adapt size of menu*/

@media(min-width: 341px) {

    /*to right*/
    /*#mobile_menu {margin-left:calc(100% - 250px);}*/
    /*to left*/
    #mobile_menu {
        margin-left: 0;
    }
}

@media(min-width: 341px) {
    #mobile_menu {
        margin-left: 0;
    }
}

@media(max-width: 340px) {
    #mobile_menu {
        width: 300px;
        margin-right: 0;
    }
}


/* adapt hamburger */

.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}

span.mobile_menu_bar:before {
    color: #2ea3f2 !important;
}


/*--------- END of Slide in Menu--------------*/


/** show row, if width is equal or greater than 768px **/

@media only screen and (min-width: 768px) {
    .show-min-768 {
        display: block !important;
    }

    .show-max-767 {
        display: none !important;
    }
}


/** show row, if width is equal or smaller then 767px **/

@media only screen and (max-width: 767px) {
    .show-max-767 {
        display: block !important;
    }

    .show-min-768 {
        display: none !important;
    }
}


/** selection of display on mobile; change between portrait and landscape  **/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .show-mobile-landscape {
        display: block !important;
    }

    .show-mobile-portrait {
        display: none !important;
    }
}

@media only screen and (min-width: 100px) and (max-width: 479px) {
    .show-mobile-landscape {
        display: none !important;
    }

    .show-mobile-portrait {
        display: block !important;
    }
}