@import "css_vars.css";

/* ########################################## css.php ########################################## */

html,
body {
    font-size: 15px !important;
    -overflow-x: hidden !important;
}

h1,
.h1 {
    font-size: 1.602em;
}

h2,
.h2 {
    font-size: 1.424em;
}

h3 {
    font-size: 1.266em;
}

h4 {
    font-size: 1.125em;
}

h5 {
    font-size: 0.889em;
}

h6 {
    font-size: 0.79em;
}

.display-1 {
    font-size: 3.906em;
}

.display-2 {
    font-size: 3.125em;
}

.display-3 {
    font-size: 2.5em;
}

.display-4 {
    font-size: 2em;
}

@media (min-width: 48em) {
    h1,
    .h1 {
        font-size: 2.33em;
    }
    h2,
    .h2 {
        font-size: 1.953em;
    }
    h3 {
        font-size: 1.563em;
    }
    h4 {
        font-size: 1.25em;
    }
    .display-1 {
        font-size: 6em;
    }
    .display-2 {
        font-size: 5.5em;
    }
    .display-3 {
        font-size: 4.5em;
    }
    .display-4 {
        font-size: 3.5em;
    }
}


/* Large devices (desktops, 62em and up) */

@media (min-width: 62em) {
    html,
    body {
        font-size: 16px !important;
    }
}


/* Extra large devices (large desktops, 75em and up) */

@media (min-width: 75em) {
    html,
    body {
        font-size: 16.5px !important;
    }
}

.uppercase {
    text-transform: uppercase;
}

.p-0 {
    padding: 0px !important;
}

.m-0 {
    margin: 0px !important;
}

.p-15 {
    padding: 15px !important;
}

.m-15 {
    margin: 15px !important;
}

.p-30 {
    padding: 30px !important;
}

.m-30 {
    margin: 30px !important;
}

.mt-0 {
    margin-top: 0px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mb-0 {
    margin-bottom: 0px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}

.pt-0 {
    padding-top: 0px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-15 {
    padding-top: 15px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pb-0 {
    padding-bottom: 0px !important;
}
.pb-10 {
    padding-bottom: 10px !important;
}
.pb-15 {
    padding-bottom: 15px !important;
}
.pb-20 {
    padding-bottom: 20px !important;
}
.pb-30 {
    padding-bottom: 30px !important;
}


.op-70 {
    opacity: 0.7;
}

.op-50 {
    opacity: 0.5;
}

.op-30 {
    opacity: 0.3;
}

.brd-0 {
    border: 0px !important;
}

.float-right {
    float: right;
}

.fix-content-width {
    max-width: 750px;
    margin-right: auto;
    margin-left: auto;
}


/* edited text */

.rich-text h3 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: 550;
    color: #555555;
    line-height: 1.3;
}

.rich-text h3:first-of-type {
    margin-top: 0px;
}

.rich-text h4 {
    font-weight: 550;
    color: #555555;
    margin-top: 15px;
    line-height: 1.3;
}

.rich-text h4:first-of-type {
    margin-top: 0px;
}

.rich-text p, .rich-text blockquote {
	font-size: inherit !important;
	min-height: 1px;
}
.rich-text blockquote { 
	color: gray;
	font-weight: 500;
	padding: 10px;
}

.rich-text p.ql-align-center,
.rich-text h3.ql-align-center,
.rich-text h4.ql-align-center,
.rich-text blockquote.ql-align-center {
    text-align: center;
}

.rich-text p.ql-align-right,
.rich-text h3.ql-align-right,
.rich-text h4.ql-align-right,
.rich-text blockquote.ql-align-right {
    text-align: right;
}

.rich-text .embed-responsive {
	margin-bottom: 20px;
}

.rich-text .embed-responsive > .embed-responsive-item[src*="https://www.google.com/maps/"] {
	border: 1px solid #eee;
}

.rich-text p.ql-align-justify,
.rich-text blockquote.ql-align-justify {
    text-align: justify;
}

.rich-text b u {
    color: var(--global_main_color);
    text-decoration: none;
}

.rich-text ol,
.rich-text ul {
    margin-bottom: 20px;
}

.rich-text li {
    margin-top: 10px;
    margin-bottom: 10px;
}

ol > li[data-list="bullet"] {
	list-style-type: disc;
}

.rich-text a {
    font-weight: 500;
}

.rich-text a:hover {
    border-bottom: 1px dotted var(--global_main_color);
}

.rich-text img[align="right"] {
    margin-left: 20px;
    margin-bottom: 20px;
    line-height: 0;
}

.rich-text img[align="left"] {
    margin-right: 20px;
    margin-bottom: 20px;
    line-height: 0;
}

.rich-text img {
    max-height: 500px;
    height: auto;
    max-width: 800px;
    width: auto;
}

@media (max-width: 991.98px) {
    .rich-text img {
        max-width: 100%;
        margin-right: 0px;
        margin-left: 0px;
    }
}

@media (max-width: 600px) {
    .rich-text img[align="right"],
    .rich-text img[align="left"] {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 30px !important;
    }
}

.edit-btn {
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    text-shadow: none;
}
.edit-btn.small {
	width:24px;
	height:24px;
	line-height:24px;
	font-size: 12px;
}
.edit-btn:hover {
    opacity: 0.6;
}

.edit-btn.absolute {
	position:absolute;
	top:15px;
	right:20px;
	z-index:500;
}


/* login  */

.user-icon .fa-user-circle,
.cart-icon .fa-shopping-bag {
    font-size: 26px;
    margin-right: 20px;
    cursor: pointer;
    z-index: 1000;
}

@media(max-width:767px) {
    .user-icon .fa-user-circle {
        font-size: 30px;
    }
}

/* shopping cart */
.cart-icon {
	position:relative;
	cursor: pointer !important;
}
.cart-num {
    position: absolute;
    width: 22px;
    height: 16px;
    line-height: 14px;
    text-align: center;
    color: #000;
    font-size: 12px;
    border-radius: 10px;
    top: 14px;
    left: 22px;
    background-color: #cecece;
    z-index: 1000;
    cursor: pointer !important;
    display:none;
}
.cart-num.active {
    background-color: var(--global_main_color);
    font-weight: 550;
    color: #fff;
    display:block;
}
.cart-icon .fa-shopping-bag {
	 font-size: 25px;
	 margin-right: 10px;
	 margin-left:6px;
	 margin-top:-1px;
}
.nav-actions .cart-icon .fa-shopping-bag {
	font-size: 29px;
	margin-top:0px;
}
.nav-actions .cart-icon { 
	margin-right:10px;
}
.nav-actions .cart-icon .cart-num {
	background-color: #555;
	top: 16px;
	font-size: 12px;
	line-height: 14px;
}

#mainNav.affix #top-menu .fa-user-circle {
    color: var(--global_main_color);
}
#mainNav.affix #top-menu .fa-shopping-bag {
    color: #555 !important;
}

.popup-container {
    position: fixed;
    top: 74px;
    z-index: 1000;
    width: 100vw;
}

.login-wrap {
    display: none;
    float: right;
    background: white;
    width: 320px;
    max-width: 99vw;
    position: relative;
    border-radius: 1px;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.35);
}

.cart-content {
    padding: 15px;
}

.cart-content .button {
    display: block;
}

.shopping-cart-header {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 12px;
    font-size: 16px;
}

.shopping-cart-header .shopping-cart-total {
    float: right;
}

.login-wrap:after {
    bottom: 100%;
    left: 89%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: white;
    border-width: 8px;
    margin-left: -8px;
}

.login-wrap:after {
    left: 86%;
}

@media (max-width: 767.98px) {
    .login-wrap:after {
        left: 93%;
    }
}


/* login form */

.login-form input {
    border: 1px solid #ccc;
    border-radius: 0px;
    width: 100%;
    height: 40px;
    padding: 5px;
    padding-left: 40px;
    font-size: 15px;
    font-weight: 500;
    color: #444;
}

.login-form input:focus,
.button:focus {
    outline: 0;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 10px var(--global_main_color_rgb_20);
    border-color: var(--global_main_color);
}

.login-form input:-webkit-autofill {
    transition: background-color 50000s ease-in-out 0s;
    -webkit-text-fill-color: var(--global_main_color) !important;
    -webkit-text-size: 15px;
}

.login-form span {
    position: relative;
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;
}

.login-form .fa-envelope,
.login-form .fa-lock {
    position: absolute;
    font-size: 20px;
    left: 10px;
    top: 17px;
}

.login-form .user-name {
    display: inline-block;
    font-weight: bold;
    font-size: 17px;
    width: 290px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.login-form .fa-user-circle {
	font-size:70px;
}
.login-form .user-name .fa-user-circle {
	vertical-align:middle;
	font-size: 30px;
	margin-left: 1px;
	margin-right: 10px;
}

.login-form .bold {
    font-weight: 550;
    font-size: 15px
}

.login-form .gray-text {
    text-align:center;
    font-size:16px;
    color:gray;
    padding-top:10px;
}

.login-form .profile {
    border-bottom: 1px solid #E8E8E8;
    padding-left: 6px;
}

.login-form .profile b {
    line-height: 2.2;
    font-weight: 500;
    color: #5b5b5b;
    font-size: 14px;
}

.login-form .profile b:hover {
    opacity: 0.7;
}

.login-form .profile a {
    text-decoration: none !important;
}

.login-form .profile .fa {
    font-size: 16px;
    width: 24px;
    min-width: 24px;
    vertical-align: middle;
    text-align: left;
    margin-right: 5px;
}

.login-form .profile .fa-toggle-on,
.login-form .profile .fa-toggle-off {
    font-size: 23px;
    margin-left: 10px;
}
input:-webkit-autofill {
	transition: background-color 50000s ease-in-out 0s;
}

/* Fix bootstrap CSS to support RM and REM */

.input-group {
    display: flex;
    align-items: stretch;
    justify-content: center;
    align-content: center;
}

.input-group .form-control,
.input-group-addon,
.input-group-btn {
    display: flex;
}

.input-group-addon {
    font-size: 1rem;
    padding: .375rem .75rem;
    align-items: center;
    line-height: 1.5;
    width: auto;
}

.input-group-btn {
    width: auto;
}

.form-control {
    height: auto;
    font-size: 1rem;
    padding: .375rem .75rem;
    border-radius: 0px;
    box-shadow: none;
}

.form-control:focus,
.form-control:active {
    border-color: var(--global_main_color);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 10px var(--global_main_color_rgb_20);
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
    font-size: 1rem;
    padding: .375rem .75rem;
}

.form-control.input-lg {
    font-size: 1.25rem;
    padding: .5rem 1rem;
    line-height: 1.5;
}

.btn {
    font-size: 1rem;
    padding: .375rem .75rem;
    line-height: 1.5;
}

.btn-lg {
    font-size: 1.25rem;
    padding: .5rem 1rem;
    line-height: 1.5;
}

.img-responsive {
    display: inline-block;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.embed-responsive::before {
    display: block;
    content: ""
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-21by9::before {
    padding-top: 42.857143%
}

.embed-responsive-16by9::before {
    padding-top: 56.25%
}

.embed-responsive-4by3::before {
    padding-top: 75%
}

.embed-responsive-1by1::before {
    padding-top: 100%
}


/* Text font sizes */

.text-110 {
    font-size: 1.1rem;
}

.text-120 {
    font-size: 1.2rem;
}

.text-125 {
    font-size: 1.25rem;
}

.text-130 {
    font-size: 1.3rem;
}

.text-150 {
    font-size: 1.5rem;
}

.text-180 {
    font-size: 1.8rem;
}


/* Titles font sizes */

.header-300 {
    font-size: 3em;
    font-weight: 500;
}

.header-320 {
    font-size: 3.2em;
}

.header-360 {
    font-size: 3.6em;
}

textarea {
    resize: none;
}


/* Cookie Box */

.cookie-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 999;
    background: #404040;
    opacity: 0.98;
}

.cookie-close {
    position: absolute;
    top: 0px;
    right: 15px;
    color: white;
    font-size: 50px;
    line-height: 40px;
    font-weight: 300;
    cursor: pointer;
}

.cookie-text {
    width: 80%;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    margin-left: 10%;
    margin-top: 20px;
    text-align: justify;
}

.cookie-title {
    font-size: 20px;
    font-weight: 500;
}

.cookie-text a {
    display: block;
    margin-top: -5px;
    margin-bottom: 5px;
    font-weight: 500;
    opacity: 1 !important;
}

.cookie-button {
    line-height: 28px;
    display: inline-block;
    padding: 3px 15px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    margin-top: 14px;
    margin-bottom: 14px;
    border-radius: 14px;
}

#approveCookie {
    margin-left: 10%;
}


/* parallax */

.parallax {
    min-height: 45vh !important;
    height: 45%;
    width: 100%;
    max-width: 100vw;
    background-attachment: fixed;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.prlx {
    position: relative;
    text-align: center;
    width: 100%;
    padding-top: 120px;
    min-height: 250px;
}

@media (max-height: 800px),
(max-width:500px) {
    .parallax {
        height: 30%;
    }
}

.home-parallax .header-300,
.home-parallax .promoText2 {
    color: #ffffff;
    margin-top: 0px;
}

/* Catch gallery */

#gallery-container {
    width: 100%;
    min-height: 300px;
    margin-top: 30px;
}

.post-dropdown div.dropdown,
.post-dropdown div.dropdown.show {
    display: inline-block !important;
    opacity: 1 !important;
}

.post-dropdown .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.post-dropdown .dropdown-toggle {
    text-decoration: none;
}

.post-dropdown .dropdown.hide .dropdown-toggle::after {
    display: none;
}

.breadcrumb,
.post-dropdown .dropdown-item {
    font-size: 16px;
    font-weight: 550;
    text-transform: uppercase;
}

.breadcrumb {
    margin-top: 20px;
}

.breadcrumb li {
    cursor: pointer;
}

.breadcrumb li:hover {
    opacity: 0.7;
}

.breadcrumb li.post-dropdown:hover {
    opacity: 1;
}

.lake-container {
    margin-right: auto;
    margin-left: auto;
    max-width: 700px;
}

.lake-container .lake-map {
    height: 220px;
    width: 300px;
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 30px;
    background-position: center center;
    background-size: 90%;
    background-repeat: no-repeat;
    background-color: white;
    cursor: pointer;
    border: 1px solid #ebebeb !important;
    opacity: 0.95;
    transition: all 500ms ease;
}

.lake-container .lake-map:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1), 2px 4px 45px rgb(25 25 33 / 15%);
    opacity: 1;
}

.lake-map.disabled {
    cursor: not-allowed;
    border-color: transparent !important;
    background-color: transparent;
    opacity: 0.55;
}

.lake-map.disabled:hover {
    opacity: 0.45;
    box-shadow: none;
}

.lake-map .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
    padding: 0px 15px 18px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 550;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.lake-map.disabled .title {
    opacity: 0.6;
}

.folder {
    width: 200px;
    height: 200px;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    text-align: center;
}

.folder .fa-folder {
    font-size: 200px;
    color: #ebebeb;
    vertical-align: middle;
}

.folder:hover .fa-folder {
    color: #c1c1c1;
}

.folder-title {
    position: absolute;
    bottom: 70px;
    left: 0px;
    width: 100%;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}


/* PC
----------------------------------*/

.top-section {
    margin-top: 70px;
}

@media(min-width:768px) {
    #top-section .title {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
        padding: 60px 50px;
    }
    #top-section .title p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
    }
}


/* Mobile & Tablet
----------------------------------*/

@media(max-width:767px) {
    #top-section .title {
        margin-right: auto;
        margin-left: auto;
        padding: 40px 20px;
    }
}


/* ########################################## cssHomeSection.php ########################################## */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

@media (print),
(prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important;
    }
}

#top-section {
    padding: 0;
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: transparent;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#top-section .home_background_wrapper {
    background-color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 2em;
}


/* The background color was not changed in the preview without reload, so we fix it by this line */

#parallax_home_opacity {
    background-color: #000000 !important;
}

#top-section .home-image-bg,
#top-section .carousel,
#top-section #video-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

#top-section .homepage-layout-24 .btn-primary-transparent {
    color: #ffffff;
}

#top-section .homepage-layout-24 .btn-primary-transparent .svg-m {
    background-color: #ffffff;
}

#top-section .homepage-layout-24 .btn-primary-transparent:hover,
#top-section .homepage-layout-24 .btn-primary-transparent:focus {
    color: #ffffff;
}

#top-section .homepage-layout-24 .btn-primary-transparent:hover .svg-m {
    background-color: #ffffff;
}

#top-section .homepage-layout-24 .btn-primary-white {
    background-color: #ffffff;
    color: #000000;
    border-color: transparent;
}

#top-section .homepage-layout-24 .btn-primary-white .svg-m {
    background-color: #000000;
}

#top-section .homepage-layout-24 .btn-primary-white:hover,
#top-section .homepage-layout-24 .btn-primary-white:focus {
    opacity: 0.9;
}

#top-section .homepage-layout-24 .btn-primary-black {
    background-color: #000000;
    color: #ffffff;
    border-color: transparent;
}

#top-section .homepage-layout-24 .btn-primary-black .svg-m {
    background-color: #ffffff;
}

#top-section .homepage-layout-24 .btn-primary-grey {
    background-color: #ebedf0;
    color: #444950;
    border-color: transparent;
}

#top-section .homepage-layout-24 .btn-primary-grey .svg-m {
    background-color: #444950;
}

#top-section .homepage-layout-24 .btn-primary-grey:hover,
#top-section .homepage-layout-24 .btn-primary-grey:focus {
    color: #444950;
    background-color: #e2e5e9;
}

#top-section .homepage-layout-24 .btn-primary-black:hover,
#top-section .homepage-layout-24 .btn-primary-black:focus {
    opacity: 0.9;
}


/* FIX - only for IE 11 */

_:-ms-fullscreen,
 :root .homepage-search-field {
    width: 400px;
}


/* ########################################## cssHomepageText.php ########################################## */

#top-section .weight400 {
    font-weight: normal;
}

#top-section .weight700 {
    font-weight: bold;
}


/* Italic style */

#top-section .italic {
    font-style: italic;
}

#top-section .spacingSmall {
    letter-spacing: 1px;
    word-spacing: 1px;
}

#top-section .spacingBig {
    letter-spacing: 3px;
    word-spacing: 3px;
}

#top-section .spacingLarge {
    letter-spacing: 5px;
    word-spacing: 5px;
}

#top-section .bottomSpaceSmall {
    margin-bottom: 10px;
}

#top-section .bottomSpaceBig {
    margin-bottom: 30px;
}

#top-section .bottomSpaceLarge {
    margin-bottom: 50px;
}

#top-section .bottomSpaceHuge {
    margin-bottom: 70px;
}

#top-section .background1 {
    border: 1px solid;
    padding: 5px 25px;
}

#top-section .h1.background1 {
    border: calc(var(--home_text_size_px_media) / 15) solid;
}

#top-section .h2.background1 {
    border: calc(var(--home_text_size_2_px_media) / 15) solid;
}

#top-section p.background1 {
    border: calc(var(--slogan_text_size_px_media) / 15) solid;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background1 {
        padding: 0 5px;
    }
}

#top-section .background2 {
    border: 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding: 5px 25px;
}

#top-section .h1.background2 {
    border-top: calc(var(--home_text_size_px_media) / 15) solid;
    border-bottom: calc(var(--home_text_size_px_media) / 15) solid;
}

#top-section .h2.background2 {
    border-top: calc(var(--home_text_size_2_px_media) / 15) solid;
    border-bottom: calc(var(--home_text_size_2_px_media) / 15) solid;
}

#top-section p.background2 {
    border-top: calc(var(--slogan_text_size_px_media) / 15) solid;
    border-bottom: calc(var(--slogan_text_size_px_media) / 15) solid;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background2 {
        padding: 0 5px;
    }
}

#top-section .background3 {
    border: 0;
    padding: 5px 25px;
    background-color: var(--global_main_color);
    color: white !important;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background3 {
        padding: 0 5px;
    }
}

#top-section .background4 {
    border: 0;
    padding: 5px 25px;
    background-color: var(--global_main_color_rgba_70);
    color: white !important;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background4 {
        padding: 0 5px;
    }
}

#top-section .background5 {
    border: 0;
    padding: 5px 25px;
    background-color: #000;
    color: #fff !important;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background5 {
        padding: 0 5px;
    }
}

#top-section .background6 {
    border: 0;
    padding: 5px 25px;
    background-color: #fff;
    color: #000 !important;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background6 {
        padding: 0 5px;
    }
}

#top-section .background7 {
    border: 0;
    padding: 5px 25px;
    background-color: #fff;
    color: #000 !important;
    box-shadow: 3px 3px 2px 2px #000;
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background7 {
        padding: 0 5px;
    }
}

#top-section .background8 {
    color: var(--global_main_color) !important;
}

#top-section .background9 {
    opacity: 0.7 !important;
}

#top-section .background10:after {
    content: '';
    display: block;
    border-top: 6px solid var(--global_main_color);
    width: 100px;
    margin: 15px auto;
}

#top-section .ele_align_right .background10:after {
    margin-left: auto;
    margin-right: 0;
}

#top-section .ele_align_left .background10:after {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] #top-section .ele_align_right .background10:after {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] #top-section .ele_align_left .background10:after {
    margin-left: auto;
    margin-right: 0;
}

#top-section h1.background10:after {
    border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
}

#top-section h2.background10:after {
    border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color);
}

#top-section p.background10:after {
    border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color);
}

#top-section .background11:before {
    content: '';
    display: block;
    border-top: 6px solid var(--global_main_color);
    border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
    width: 100px;
    margin: 15px auto;
}

#top-section .ele_align_right .background11:before {
    margin-left: auto;
    margin-right: 0;
}

#top-section .ele_align_left .background11:before {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] #top-section .ele_align_right .background11:before {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] #top-section .ele_align_left .background11:before {
    margin-left: auto;
    margin-right: 0;
}

#top-section h1.background11:before {
    border-top: calc(var(--home_text_size_px_media) / 15) solid var(--global_main_color);
}

#top-section h2.background11:before {
    border-top: calc(var(--home_text_size_2_px_media) / 15) solid var(--global_main_color);
}

#top-section p.background11:before {
    border-top: calc(var(--slogan_text_size_px_media) / 15) solid var(--global_main_color);
}

#top-section .background12 {
    border: 0;
    padding: 5px 25px;
    background-color: rgba(192, 57, 43, 0.7);
    color: white !important;
    position: relative;
}

#top-section .background12:after {
    content: " ";
    /* background: #000; */
    position: absolute;
}

#top-section h1.background12:after {
    border: calc(var(--home_text_size_px_media) / 15) solid;
    width: calc(100% + var(--home_text_size_px_media) / 6 * 2);
    height: calc(100% + var(--home_text_size_px_media) / 6 * 2);
    left: calc(var(--home_text_size_px_media) / 6 * -1);
    top: calc(var(--home_text_size_px_media) / 6 * -1);
    /* the user was unable to edit those headers at the wizard so we move the after below its parent */
    z-index: -1;
    /* Source: https://stackoverflow.com/a/10822168/469161 */
}

#top-section h2.background12:after {
    border: calc(var(--home_text_size_2_px_media) / 15) solid;
    width: calc(100% + var(--home_text_size_2_px_media) / 6 * 2);
    height: calc(100% + var(--home_text_size_2_px_media) / 6 * 2);
    left: calc(var(--home_text_size_2_px_media) / 6 * -1);
    top: calc(var(--home_text_size_2_px_media) / 6 * -1);
    /* the user was unable to edit those headers at the wizard so we move the after below its parent */
    z-index: -1;
    /* Source: https://stackoverflow.com/a/10822168/469161 */
}

#top-section p.background12:after {
    border: calc(var(--slogan_text_size_px_media) / 15) solid;
    width: calc(100% + var(--slogan_text_size_px_media) / 6 * 2);
    height: calc(100% + var(--slogan_text_size_px_media) / 6 * 2);
    left: calc(var(--slogan_text_size_px_media) / 6 * -1);
    top: calc(var(--slogan_text_size_px_media) / 6 * -1);
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    #top-section .background12 {
        padding: 0 5px;
    }
}


/* boxStyle_1 */

.magic_homepage .boxStyle_1 {
    background-color: #000;
    padding: 20px;
    border-radius: 0;
    border-top: 5px solid var(--global_main_color);
}

.magic_homepage .boxStyle_1 h1,
.magic_homepage .boxStyle_2 h1,
.magic_homepage .boxStyle_1 p {
    color: #fff !important;
    text-shadow: none !important;
}


/* boxStyle_2 */

.magic_homepage .boxStyle_2 {
    background-color: #fff;
    padding: 20px;
    border-radius: 0;
    border-top: 5px solid var(--global_main_color);
}

.magic_homepage .boxStyle_2 h1,
.magic_homepage .boxStyle_2 h2,
.magic_homepage .boxStyle_2 p {
    color: #000 !important;
    text-shadow: none !important;
}


/* boxStyle_3 */

.magic_homepage .boxStyle_3 {
    background-color: #fff;
    padding: 20px;
    border-radius: 0;
    border: 5px solid var(--global_main_color);
}

.magic_homepage .boxStyle_3 h1,
.magic_homepage .boxStyle_3 h2,
.magic_homepage .boxStyle_3 p {
    color: #000 !important;
    text-shadow: none !important;
}


/* boxStyle_4 */

.magic_homepage .boxStyle_4 {
    padding: 20px;
    border-radius: 0;
    position: relative;
    margin-right: 25px;
}

.magic_homepage .boxStyle_4 .boxBorder,
.magic_homepage .boxStyle_4 .homepage_goal {
    z-index: 1;
}

.magic_homepage .boxStyle_4:before {
    content: " ";
    position: absolute;
    left: 25px;
    top: 25px;
    background-color: var(--global_main_color);
    width: 100%;
    height: 100%;
}

.magic_homepage .boxStyle_4:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.magic_homepage .boxStyle_4 h1,
.magic_homepage .boxStyle_4 h2,
.magic_homepage .boxStyle_4 p {
    color: #000 !important;
    text-shadow: none !important;
}


/* boxStyle_5 */

.magic_homepage .boxStyle_5 {
    padding: 20px;
    border-radius: 0;
    position: relative;
    margin-left: 25px;
}

.magic_homepage .boxStyle_5 .boxBorder,
.magic_homepage .boxStyle_5 .homepage_goal {
    z-index: 1;
}

.magic_homepage .boxStyle_5:before {
    content: " ";
    position: absolute;
    left: -25px;
    top: -25px;
    background-color: var(--global_main_color);
    width: 100%;
    height: 100%;
}

.magic_homepage .boxStyle_5:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.magic_homepage .boxStyle_5 h1,
.magic_homepage .boxStyle_5 h2,
.magic_homepage .boxStyle_5 p {
    color: #000 !important;
    text-shadow: none !important;
}


/* boxStyle_6 */

.magic_homepage .boxStyle_6 {
    padding: 20px;
    border-radius: 0;
    position: relative;
    margin-right: 75px;
}

.magic_homepage .boxStyle_6 .boxBorder,
.magic_homepage .boxStyle_6 .homepage_goal {
    z-index: 1;
}

.magic_homepage .boxStyle_6:before {
    content: " ";
    position: absolute;
    left: calc(100% - 75px);
    top: calc(100% - 75px);
    background-color: var(--global_main_color);
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.magic_homepage .boxStyle_6:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.magic_homepage .boxStyle_6 h1,
.magic_homepage .boxStyle_6 h2,
.magic_homepage .boxStyle_6 p {
    color: #000 !important;
    text-shadow: none !important;
}


/* boxStyle_7 */

.magic_homepage .boxStyle_7 {
    padding: 20px;
    border-radius: 0;
    position: relative;
    margin-right: 200px;
    margin-bottom: 200px;
}

.magic_homepage .boxStyle_7 .boxBorder,
.magic_homepage .boxStyle_7 .homepage_goal {
    z-index: 1;
}

.magic_homepage .boxStyle_7:before {
    content: " ";
    position: absolute;
    left: calc(100% - 200px);
    top: calc(100% - 200px);
    width: 400px;
    height: 400px;
    background-image: url("data:image/svg+xml;utf8,<svg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'><g transform='translate(160,200)'><path d='M206.8,-107.6C249.1,-46.2,251.4,50.2,210.3,94.4C169.2,138.7,84.6,130.8,18.5,120.2C-47.6,109.5,-95.3,96,-125.4,58.1C-155.6,20.2,-168.3,-42.2,-144.5,-92.9C-120.7,-143.7,-60.3,-182.8,11,-189.2C82.3,-195.5,164.5,-169,206.8,-107.6Z' fill='%23c0392b' /></g></svg>");
}


/* Mobile & Tablet
    ----------------------------------*/

@media(max-width:767px) {
    .magic_homepage .boxStyle_7:before {
        left: calc(100% - 250px);
        top: calc(100% - 100px);
        width: 200px;
        height: 200px;
        background-image: url("data:image/svg+xml;utf8,<svg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><g transform='translate(80,100)'><path d='M103.4,-53.8C124.55,-23.1,125.7,25.1,105.15,47.2C84.6,69.35,42.3,65.4,9.25,60.1C-23.8,54.75,-47.65,48,-62.7,29.05C-77.8,10.1,-84.15,-21.1,-72.25,-46.45C-60.35,-71.85,-30.15,-91.4,5.5,-94.6C41.15,-97.75,82.25,-84.5,103.4,-53.8Z' fill='%23c0392b' /></g></svg>");
    }
}

.magic_homepage .boxStyle_7:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.magic_homepage .boxStyle_7 h1,
.magic_homepage .boxStyle_7 h2,
.magic_homepage .boxStyle_7 p {
    color: #000 !important;
    text-shadow: none !important;
}

.magic_homepage .boxBorder .h1 {
    max-width: 100%;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Playfair Display', Arial, sans-serif;
    color: #ffffff;
    letter-spacing: 1px;
    word-spacing: 1px;
    line-height: 1.5;
    margin-bottom: 10px;
}


/* Small Devices, Wide Screens */

@media only screen and (max-width: 1169px) {
    .magic_homepage .boxBorder .h1 {
        letter-spacing: calc(1 * (100vw / 1170));
        word-spacing: calc(1 * (100vw / 1170));
    }
}


/* Small Devices, Wide Screens */

@media only screen and (max-height: 767px) {
    /* 
        We reduce the margin-bottom between user homepage text only if the height of the screen become really small.
        We choose 768 height because that the most use screen 1366X768
    */
    .magic_homepage .boxBorder .h1 {
        margin-bottom: calc(10 * (100vh / 768));
    }
}

.magic_homepage .boxBorder .h2 {
    max-width: 100%;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 30px;
}


/* Small Devices, Wide Screens */

@media only screen and (max-height: 767px) {
    /* 
        We reduce the margin-bottom between user homepage text only if the height of the screen become really small.
        We choose 768 height because that the most use screen 1366X768
    */
    .magic_homepage .boxBorder .h2 {
        margin-bottom: calc(30 * (100vh / 768));
    }
}

.magic_homepage .boxBorder p {
    max-width: 100%;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 5px;
    word-spacing: 5px;
    line-height: 1.5;
    margin-bottom: 20px;
}


/* Small Devices, Wide Screens */

@media only screen and (max-width: 1169px) {
    .magic_homepage .boxBorder p {
        letter-spacing: calc(5 * (100vw / 1170));
        word-spacing: calc(5 * (100vw / 1170));
    }
}


/* Small Devices, Wide Screens */

@media only screen and (max-height: 767px) {
    /* 
        We reduce the margin-bottom between user homepage text only if the height of the screen become really small.
        We choose 768 height because that the most use screen 1366X768
    */
    .magic_homepage .boxBorder .h2 {
        margin-bottom: calc(20 * (100vh / 768));
    }
}


/* Homepage animation */

@keyframes port {
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}

@-webkit-keyframes port {
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}


/* Fix the text of the homepage for different screens */


/* https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-might-not-know#media-query-break-points */


/* Custom, iPhone Retina */

@media only screen and (min-width: 1px) {
    /*
        8 is the minimum font size. Base on this trick: https://stackoverflow.com/questions/23560087/is-there-such-a-thing-as-min-font-size-and-max-font-size;
        */
     :root {
        --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170) + 8px);
        --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
        --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
    }
    #top-section #home_siteSlogan {
        font-size: calc(70 * (100vw / 1170) + 8px);
        font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
    }
    #top-section #home_siteSlogan_2 {
        font-size: calc(45 * (100vw / 1170) + 8px);
        font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
    }
    #top-section #home_SecondSiteSlogan {
        font-size: calc(20 * (100vw / 1170) + 8px);
        font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
    }
}


/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
    /*
        8 is the minimum font size. Base on this trick: https://stackoverflow.com/questions/23560087/is-there-such-a-thing-as-min-font-size-and-max-font-size;
        */
     :root {
        --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170) + 8px);
        --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
        --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
    }
    #top-section #home_siteSlogan {
        font-size: calc(70 * (100vw / 1170) + 8px);
        font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
    }
    #top-section #home_siteSlogan_2 {
        font-size: calc(45 * (100vw / 1170) + 8px);
        font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
    }
    #top-section #home_SecondSiteSlogan {
        font-size: calc(20 * (100vw / 1170) + 8px);
        font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
        margin-bottom: 2em;
    }
}


/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
     :root {
        --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170));
        --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170));
        --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170));
    }
    #top-section #home_siteSlogan {
        font-size: calc(70 * (100vw / 1170));
        font-size: calc(var(--home_text_size) * (100vw / 1170));
    }
    #top-section #home_siteSlogan_2 {
        font-size: calc(45 * (100vw / 1170));
        font-size: calc(var(--home_text_size_2) * (100vw / 1170));
    }
    #top-section #home_SecondSiteSlogan {
        font-size: calc(20 * (100vw / 1170));
        font-size: calc(var(--slogan_text_size) * (100vw / 1170));
        margin-bottom: 2em;
    }
}


/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
     :root {
        --home_text_size_px_media: calc(var(--home_text_size) * (100vw / 1170));
        --home_text_size_2_px_media: calc(var(--home_text_size_2) * (100vw / 1170));
        --slogan_text_size_px_media: calc(var(--slogan_text_size) * (100vw / 1170));
    }
    #top-section #home_siteSlogan {
        font-size: calc(70 * (100vw / 1170));
        font-size: calc(var(--home_text_size) * (100vw / 1170));
    }
    #top-section #home_siteSlogan_2 {
        font-size: calc(45 * (100vw / 1170));
        font-size: calc(var(--home_text_size_2) * (100vw / 1170));
    }
    #top-section #home_SecondSiteSlogan {
        font-size: calc(20 * (100vw / 1170));
        font-size: calc(var(--slogan_text_size) * (100vw / 1170));
    }
}


/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
     :root {
        --home_text_size_px_media: var(--home_text_size_px);
        --home_text_size_2_px_media: var(--home_text_size_2_px);
        --slogan_text_size_px_media: var(--slogan_text_size_px);
    }
    #top-section #home_siteSlogan {
        font-size: 70px;
        font-size: var(--home_text_size_px);
    }
    #top-section #home_siteSlogan_2 {
        font-size: 45px;
        font-size: var(--home_text_size_2_px);
    }
    #top-section #home_SecondSiteSlogan {
        font-size: 20px;
        font-size: var(--slogan_text_size_px);
    }
}

#top-section .homepage-layout-24 .social-style-2 {
    border: 1px solid var(--global_main_color) !important;
    background: none !important;
    color: var(--global_main_color) !important;
}

#top-section .homepage-layout-24 .social-style-3 {
    border-radius: 0px !important;
    background: var(--global_main_color) !important;
}

#top-section .homepage-layout-24 .social-style-4 {
    border: none !important;
    background: none !important;
    color: var(--global_main_color) !important;
    font-size: 2.5rem !important;
}

#top-section .homepage-layout-24 .social-size-big:not(.social-style-4) {
    width: 65px !important;
    height: 65px !important;
    font-size: 2rem !important;
}

#top-section .homepage-layout-24 .social-size-large:not(.social-style-4) {
    font-size: 2.3rem !important;
    width: 75px !important;
    height: 75px !important;
}


/*  Bug Fix - The action buttons container was covering the
titles because of other style it has `margin-top: -30px` to drop button
with long text to new line
---------------------------*/

#top-section .magic_homepage .boxBorder .h1,
#top-section .magic_homepage .boxBorder .h2,
#top-section .magic_homepage .boxBorder p {
    z-index: 1;
}


/* New Main Homepage Goal Spacing Infrastructure
----------------------------------*/

#top-section .magic_homepage .home_main_wrapper .homepage_goal.mainGoal {
    margin-top: 0px;
    margin-top: var(--homepage_main_goal_margin_top);
    margin-bottom: 0px;
    margin-bottom: var(--homepage_main_goal_margin_bottom);
}


/* New Second Homepage Goal Spacing Infrastructure
----------------------------------*/

#top-section .magic_homepage .home_main_wrapper .homepage_goal.secondGoal {
    margin-top: 0px;
    margin-top: var(--homepage_second_goal_margin_top);
    margin-bottom: 0px;
    margin-bottom: var(--homepage_second_goal_margin_bottom);
}


/* Homepage Inline Video
-------------------------*/

.homepage_goal[data-type="video"] .inline-video {
    position: relative;
    max-width: 100%;
}

.homepage_goal[data-type="video"] .inline-video.old-customer {
    max-width: 640px;
    width: 100%;
}


/* ########################################## site_layout1.php ########################################## */

.home_page_design #mainNav:not(.affix) {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
}


/* Typography (based on Bootstrap Typography)
----------------------------------*/

html,
body {
    width: 100%;
    height: 100%;
}

.body {
    height: 100%;
}

#top-section .title {
    padding: 120px 50px 0 50px;
}


/* Navbar
----------------------------------*/

#mainNav {
    height: 80px;
}

:root {
    --mainNavHeight: 80px;
}

#mainNav.affix {
    height: 60px;
}

.inside_page_header_design #mainNav {
    position: absolute;
    margin: 0;
    border-bottom: 1px solid #ebebeb;
}


/** 
 * Menus Place Holder - The top menu has an absolute/fixed position so we 
 * use a placeholder to push the website down related to the menu height  
 */

.inside_page_header_design #s123ModulesContainer:before,
.inside_page_header_design .s123-page-container:before,
.s123-content-area:before {
    content: '';
    width: 100%;
    height: 70px;
    display: block;
    /* when the user scroll up there is an transition effect and he can see the background
    color, so we handle it by adding background color related to the first seen element */
    background-color: #ffffff;
}

.inside_page_header_design .s123-page-container:before {
    /* when the user scroll up there is an transition effect and he can see the background
    color, so we handle it by adding background color related to the first seen element */
    background-color: #ffffff;
}

.inside_page_header_design .s123-page-container.s123-page-404-error:before {
    /* 404 pages doesn't has header so we overwrite the `page_header_style` in case its exist */
    background-color: #ffffff;
}

.inside_page_header_design #mainNav.affix {
    position: fixed;
    margin: 0;
}

#mainNav .container-fluid,
#mainNav .site_container {
    display: flex !important;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
    max-width:100vw;
    width: auto !important;
}

#mainNav .navbar-header {
    order: 1;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-basis: auto;
    height: 100%;
    white-space: nowrap;
}

#mainNav #top-menu {
    order: 2;
    display: flex !important;
    justify-content: center; /*flex-end;*/
    align-content: center;
    align-items: center;
    flex-basis: auto;
    flex-grow: 1;
    max-width:100vw;
}

#mainNav.user {
	margin-right:-10px;
}
#mainNav.user.webshop {
}

#mainNav #top-menu .navPages,
#top-menu .navActions {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.navbar-default {
    background-color: #ffffff;
}

.navbar-default,
#mainNav .logo_name,
#mainNav .s123-site-logo {
    transition: height 0.35s, background-color 0.35s, font-size 0.35s;
}

.navbar-default .navbar-brand {
    font-weight: 700;
    color: #252525;
    height: auto;
    margin: 0;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.navbar-default .nav>li {
    margin: 0 1px;
}


/* website menu space between pages */

.navbar-default .nav.navPages>li {
    margin-right: var(--menu_pages_space);
    margin-left: 1px;
}

html[dir="rtl"] .navbar-default .nav.navPages>li {
    margin-right: 1px;
    margin-left: var(--menu_pages_space);
}

.navbar-default .nav>li>a:not(.navbar-brand),
.navbar-default .nav>li>a:not(.navbar-brand):focus {
    font-size: 13px;
    font-size: var(--menu_font_size);
    font-weight: 700;
    color: #252525;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding-top: 0px;
    padding-bottom: 0px;
    white-space: nowrap;
}


/* website menu page size */

.navbar-default .nav.navPages li a {
    padding-right: var(--menu_pages_side_padding);
    padding-left: var(--menu_pages_side_padding);
}


/* letter spacing + word spacing */

.navbar-default .nav.navPages li a .txt-container {
    letter-spacing: var(--menu_pages_letter_spacing);
    word-spacing: var(--menu_pages_word_spacing);
}

.navbar-default .nav>li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: var(--global_main_dark);
}

.navbar-default .nav>li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: var(--global_main_dark);
    background-color: transparent;
}

.navbar-default .nav>li.active>a:hover,
.navbar-default .nav>li.active>a :focus:hover {
    background-color: transparent;
}


/* Before user scroll
----------------------------------*/


/* logo */

.navbar-default .navbar-brand {
    float: none;
    padding: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    line-height: normal;
}

.navbar-default .navbar-brand .website-name-preview-helper.weight400,
.navbar-default .navbar-brand.weight400 {
    font-weight: normal;
}

.navbar-default .navbar-brand .website-name-preview-helper.weight700,
.navbar-default .navbar-brand.weight700 {
    font-weight: bold;
}


/* Italic style */

.navbar-default .navbar-brand .website-name-preview-helper.italic,
.navbar-default .navbar-brand.italic {
    font-style: italic;
}

.home_page_design .navbar-default {
    background-color: transparent;
}

.home_page_design .navbar-default .navbar-brand,
.inside_page_header_design .navbar-default .navbar-brand {
    color: transparent;
    height: 80px;
    display: flex;
    align-items: center;
    display: none;
}

.home_page_design .navbar-default.affix .navbar-brand {
    height: 60px;
}

.home_page_design.s_layout1 .opacity-full.affix-top .navbar-brand:hover,
.home_page_design.s_layout1 .opacity-full.affix-top .navbar-brand:focus {
    color: #ffffff;
}

.home_page_design .navbar-default .nav>li>a,
.home_page_design .navbar-default .nav>li>a:focus,
.inside_page_header_design .navbar-default .nav>li>a,
.inside_page_header_design .navbar-default .nav>li>a:focus {
    color: #ffffff;
}

.home_page_design .navbar-default .nav>li>a>.svg-m,
.home_page_design .navbar-default .nav>li>a:focus>.svg-m,
.inside_page_header_design .navbar-default .nav>li>a>.svg-m,
.inside_page_header_design .navbar-default .nav>li>a:focus>.svg-m {
    background-color: #ffffff;
}

.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):hover,
.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):hover,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover {
    color: var(--global_main_dark);
}

.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):hover .svg-m,
.home_page_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover .svg-m,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):hover .svg-m,
.inside_page_header_design .navbar-default .nav>li>a:not(.navbar-brand):focus:hover .svg-m {
    background-color: var(--global_main_dark);
}

.home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent {
    color: #ffffff;
}

.home_page_design .navbar-default .action-button-wrapper .btn-primary-transparent .svg-m {
    background-color: #ffffff;
}

.home_page_design .btn-primary-action-button-4 {
    color: #ffffff !important;
}


/* After user scroll
----------------------------------*/

.home_page_design .navbar-default.affix .btn-primary-action-button-4 {
    color: #252525 !important;
}

.home_page_design .navbar-default.affix .btn-primary-action-button-4 .svg-m {
    background-color: #252525 !important;
}


/* logo - image
----------------------------------*/

.navbar-default.affix .s123-site-logo img,
.inside_page_header_design .navbar-default .s123-site-logo img {
    max-height: 60px;
}


/* logo */

.navbar-default.affix .navbar-brand {
    line-height: 60px;
    height: 60px;
}

.home_page_design .navbar-default.affix,
.inside_page_header_design .navbar-default {
    border-color: #ebebeb;
    background-color: #ffffff;
    border-bottom: 1px solid #ebebeb;
    box-shadow: rgb(0 0 0 / 35%) 0px 2px 12px 2px;
}

.navbar-default.affix .navbar-brand,
.inside_page_header_design .navbar-default .navbar-brand {
    color: #252525;
    display: flex;
}

.navbar-default.affix .nav>li>a,
.navbar-default.affix .nav>li>a:focus,
.inside_page_header_design .navbar-default .nav>li>a,
.inside_page_header_design .navbar-default .nav>li>a:focus {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: #555;
    line-height: 1.5;
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    border-radius: 0;
}

.navbar-default.affix .nav>li>a .svg-m,
.navbar-default.affix .nav>li>a:focus .svg-m,
.inside_page_header_design .navbar-default .nav>li>a .svg-m,
.inside_page_header_design .navbar-default .nav>li>a:focus .svg-m {
    background-color: #252525;
}

.navbar-default.affix .navPages>li.active>a,
.navbar-default.affix .navPages>li.active>a:focus,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):hover,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):focus:hover,
.inside_page_header_design .navbar-default .navPages>li.active>a,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover {
    color: var(--global_main_dark);
    background-color: transparent;
    opacity: 1;
}

.navbar-default.affix .navPages>li.active>a .svg-m,
.navbar-default.affix .navPages>li.active>a:focus .svg-m,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):hover .svg-m,
.navbar-default.affix .navPages>li>a:not(.navbar-brand):focus:hover .svg-m,
.inside_page_header_design .navbar-default .navPages>li.active>a .svg-m,
.inside_page_header_design .navbar-default .navPages>li.active>a:focus .svg-m,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):hover .svg-m,
.inside_page_header_design .navbar-default .navPages>li>a:not(.navbar-brand):focus:hover .svg-m {
    background-color: var(--global_main_dark);
}

.navbar-default.affix .action-button-wrapper .btn-primary-transparent {
    color: #252525;
}

.navbar-default.affix .action-button-wrapper .btn-primary-transparent .svg-m {
    background-color: #252525;
}

.navbar-default.affix .navActions>li>a:hover {
    color: #252525;
}


/* breadcrumb */

.breadcrumb {
    margin-bottom: 0;
}

#top-menu .moduleMenu {
    cursor: pointer;
}

#top-menu .moduleMenu>a,
#popupFloatDiv .navPagesPopup a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.site_container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 750px;
}

@media (min-width: 768px) {
    .site_container {
        -width: 750px;
    }
}

@media (min-width: 992px) {
    .site_container {
        -width: 970px;
    }
}

@media (min-width: 1200px) {
    .site_container {
        -width: 1170px;
    }
}


/* ########################################## opacity.php ########################################## */

#top-section {
    min-height: 100vh;
}

 :root {
    --homepage_layout_height_opacity_space_top: 81px;
}


/* when the menu is at the top and transparent we don't want to apply the hover colors
            on the icons in the menu */

.home_page_design .navbar-default:not(.affix) .nav>li>a:not(.navbar-brand):hover,
.home_page_design .navbar-default:not(.affix) .nav>li>a:not(.navbar-brand):focus:hover {
    color: #ffffff;
}

.home_page_design .navbar-default:not(.affix) .nav>li>a:not(.navbar-brand):hover .svg-m,
.home_page_design .navbar-default:not(.affix) .nav>li>a:not(.navbar-brand):focus:hover .svg-m {
    background-color: #ffffff;
}


/* transparent button before scrolling down make sure the icon is the same color as the text*/

.home_page_design .btn-primary-action-button-4 .svg-m {
    background-color: #ffffff;
}

 :root {
    --homepage_padding_top: 50px;
}

 :root {
    --homepage_padding_bottom: calc(50px + var(--homepage_layout_height_opacity_space_top) + var(--homepage_layout_height_opacity_space_bottom));
}


/**
* Checkbox Design
* Source: https://codepen.io/BrahmaUI/pen/WgOGQz
*/

.checkbox-label {
    font-weight: normal;
    padding-left: 18px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    clear: both;
}

html[dir="rtl"] .checkbox-label {
    padding-left: 0;
    padding-right: 18px;
}

.checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-label .checkbox-custom {
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    height: 18px;
    width: 18px;
    background-color: transparent;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #cccccc;
    transition: box-shadow .2s ease, -webkit-box-shadow .2s ease;
}

html[dir="rtl"] .checkbox-label .checkbox-custom {
    left: auto;
    right: 0;
}

.checkbox-label:hover .checkbox-custom {
    box-shadow: inset 0 0 0 1px #aaaaaa;
}

.checkbox-label input:checked~.checkbox-custom {
    background-color: transparent;
    border-radius: 2px;
    -webkit-transform: rotate(0deg) scale(1);
    -ms-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
    opacity: 1;
}

.checkbox-label .checkbox-custom::after {
    position: absolute;
    content: "";
    left: 9px;
    top: 9px;
    height: 0;
    width: 0;
    border-radius: 2px;
    border: solid #555555;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(0deg) scale(0);
    -ms-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    opacity: 1;
}

.checkbox-label input:checked~.checkbox-custom::after {
    -webkit-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
    opacity: 1;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #555555;
    border-width: 0 2px 2px 0;
    background-color: transparent;
    border-radius: 0;
}

.checkbox-label .input-title {
    padding-left: 10px;
    display: inline-block;
}

html[dir="rtl"] .checkbox-label .input-title {
    padding-left: 0;
    padding-right: 10px;
}


/**
* Radio Design
*/

.radio-label {
    font-weight: normal;
}


/* IntTelInput
---------------------------------*/

.intl-tel-input .country-list {
    color: #555;
    /* Related to Boostrap inputs text colors*/
}


/* Global layouts settings
----------------------------------*/


/**
 * Internet Explorer Scrollbar - Convert the IE Scrollbar into a standard scrollbar
 * because its go over to page content.
 * http://answers.microsoft.com/en-us/ie/forum/ie11-windows_7/disappearing-scroll-bar-on-websites/c3b883c6-7c46-4749-97af-02ae4b2cef85?auth=1
 */

@-ms-viewport {
    width: auto !important
}

body {
    font-family: 'Raleway', Arial, sans-serif;
    color: #252525;
    background-color: #ffffff;
    /* my full smoothing solution: https://jsfiddle.net/4mn64n2q/ */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    -webkit-text-stroke: 1px transparent;
}

.inside_page body {
    color: #252525;
}

html[dir="rtl"] body {
    direction: rtl;
}

@media (min-width: 768px) {
    html[dir="rtl"] .navbar-right {
        float: left!important;
    }
}

a {
    color: var(--global_main_color);
    transition: opacity .35s;
}

a .svg-m {
    background-color: var(--global_main_color);
}

.mainWebsiteColor {
    color: var(--global_main_color);
}


/**
 * Padding Helpers Classes 
 */

.pl-0 {
    padding-left: 0;
}

.pr-0 {
    padding-right: 0;
}


/**
* We use this class to fake a focus on fields 
* that we are unable to use focus on. 
*/

.fake-input-focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}


/**
 * Force LTR - Some inputs (e.g. email) need to be LTR even at RTL websites,
 * but we like the placeholder to be RTL so we use this solution:
 */

html[dir="rtl"] input.s123-force-ltr:not(:placeholder-shown),
html[dir="rtl"] input.s123-force-ltr:focus,
html[dir="rtl"] input[type="email"]:not(:placeholder-shown),
html[dir="rtl"] input[type="email"]:focus {
    direction: ltr !important;
}

html[dir="rtl"] input.s123-force-ltr:placeholder-shown,
html[dir="rtl"] input[type="email"]:placeholder-shown {
    direction: rtl;
}

html[dir="rtl"] input.s123-force-ltr:focus::-moz-placeholder,
html[dir="rtl"] input[type="email"]:focus::-moz-placeholder {
    color: transparent !important;
}

html[dir="rtl"] input.s123-force-ltr:focus:-ms-input-placeholder,
html[dir="rtl"] input[type="email"]:focus:-ms-input-placeholder {
    color: transparent !important;
}

html[dir="rtl"] input.s123-force-ltr:focus::-webkit-input-placeholder,
html[dir="rtl"] input[type="email"]:focus::-webkit-input-placeholder {
    color: transparent !important;
}


/**
 * Transition Page Load Handler - We need to added the transition only 
 * after the page loaded, otherwise the transition is apply when the 
 * page is render and there are bugs. e.g. we we select menu links style
 * as "Transparent Buttons" the links border will highlight on page render.
 * Source: https://css-tricks.com/transitions-only-after-page-load/
 */

html.page-loaded .moduleMenu a {
    transition: color, background-color, border .35s;
}

.moduleMenu.separate {
    border: 0;
    color: rgb(173, 173, 173);
    text-align: center;
}

a:hover,
a:focus {
    color: var(--global_main_dark);
    opacity: 0.9;
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
}


/* FIX different parts the H1,H2... headers so it will fit the way the product is working */

p {
    margin-bottom: 20px;
    line-height: 1.5;
}

hr {
    max-width: 90%;
    border-color: var(--global_main_color);
    border-width: 3px;
}

hr.small {
    max-width: 60px;
}

hr.light {
    border-color: var(--global_main_color);
}

.bg-primary hr.light {
    border-color: #fff;
}

.primary-color {
    color: var(--global_main_dark);
}

.inside_page .bg-primary .primary-color .box-primary .svg-m {
    background-color: var(--global_main_dark);
}

.background-primary-color {
    background-color: var(--global_main_dark) !important;
}

.background-primary-color-before:before {
    background-color: var(--global_main_dark);
}

.background-primary-color.border-left-before::before {
    border-left-color: var(--global_main_dark);
}

.background-primary-color.border-right-before::before {
    border-right-color: var(--global_main_dark);
}

html[dir="rtl"] .background-primary-color.border-left-before::before {
    border-right-color: var(--global_main_dark);
}

html[dir="rtl"] .background-primary-color.border-right-before::before {
    border-left-color: var(--global_main_dark);
}

@media(max-width:900px) {
    .background-primary-color.border-left-before::before {
        border-right-color: var(--global_main_dark);
        border-left-color: transparent;
    }
    html[dir="rtl"] .background-primary-color.border-left-before::before {
        border-right-color: transparent;
        border-left-color: var(--global_main_dark);
    }
}

.loading-primary {
    color: var(--global_main_dark);
}

.loading-primary .svg-m {
    background-color: var(--global_main_dark);
}

.btn-primary-text-color {
    color: #ffffff !important;
}


/* main page - shadow color */

.bg-primary .s123-module-shadows.shadow-before {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.bg-primary .s123-module-shadows.shadow-after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%) !important;
}


/* secondary page - shadow color */

.s123-module-shadows.shadow-before {
    background: linear-gradient(to right, #fafafa 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.s123-module-shadows.shadow-after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fafafa 100%) !important;
}


/* inside page - shadow color */

.inside_page .s123-module-shadows.shadow-before {
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%) !important;
}

.inside_page .s123-module-shadows.shadow-after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%) !important;
}


/**
 * Fancy Scrollbar - Design the scroll bar.
 */

.fancy-scrollbar::-webkit-scrollbar {
    height: 9px !important;
    width: 9px !important;
}

.fancy-scrollbar::-webkit-scrollbar-track-piece {
    background: #4f5050;
}

.fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:start {
    border-radius: 0px !important;
}

.fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:end {
    border-radius: 0px !important;
}

.fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:start {
    border-radius: 0px !important;
}

.fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:end {
    border-radius: 0px !important;
}

.fancy-scrollbar::-webkit-scrollbar-thumb:horizontal,
.fancy-scrollbar::-webkit-scrollbar-thumb:vertical {
    background: #C4C9CC !important;
    border-radius: 0px !important;
    display: block !important;
    height: 50px !important;
}


/* ########################################## cssButtons.php ########################################## */


/* Buttons
----------------------------------*/

.btn {
    border: 0;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 400;
}

.btn:focus {
    outline: none;
}

.btn-link {
    border: 0 !important;
}

.btn-link::before {
    border: 0 !important;
}

.btn-primary {
    border: 1px solid var(--global_main_color);
    color: #ffffff;
    background-color: var(--global_main_color);
    transition: background-color .35s, opacity .35s;
}

.btn-primary .svg-m {
    background-color: #ffffff;
}

.btn-primary-transparent {
    border: 1px solid;
    background-color: transparent;
}

.btn-primary-transparent-main {
    border: 1px solid var(--global_main_color);
    color: var(--global_main_color);
    background-color: transparent;
}

.btn-primary-transparent-main .svg-m {
    background-color: var(--global_main_dark);
}

.btn-primary-simplelink {
    color: var(--global_main_dark) !important;
    background: transparent;
    border: none !important;
    outline: none;
    box-shadow: none!important;
    padding: 0 !important;
    align-self: center;
    font-size: 1.1rem;
}

.btn-primary-simplelink:hover,
.btn-primary-simplelink:focus {
    color: #444950;
    background: transparent !important;
}

.btn-primary-simplelink .svg-m {
    background-color: var(--global_main_color);
}

.btn-primary-simplelink:hover .svg-m,
.btn-primary-simplelink:focus .svg-m {
    background-color: var(--global_main_color) !important;
}

.btn-primary-simplelink-text-color {
    color: #ffffff !important;
    background: transparent;
    border: none !important;
    outline: none;
    box-shadow: none!important;
    padding: 0 !important;
    align-self: center;
    font-size: 1.1rem;
}

.btn-primary-simplelink-text-color:hover,
.btn-primary-simplelink-text-color:focus {
    color: #444950;
    background: transparent !important;
}

.btn-primary-simplelink-text-color .svg-m {
    background-color: #ffffff;
}

.btn-primary-simplelink-text-color:hover .svg-m,
.btn-primary-simplelink-text-color:focus .svg-m {
    background-color: #ffffff !important;
}

.btn-primary-white {
    background-color: #ffffff;
    color: #000000;
    border-color: transparent;
}

.btn-primary-white .svg-m {
    background-color: #000000;
}

.btn-primary-white:hover,
.btn-primary-white:focus {
    opacity: 0.9;
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--global_main_color);
    color: #ffffff;
    background-color: var(--global_main_color);
    opacity: 0.9;
}

.btn-primary:hover .svg-m,
.btn-primary:focus .svg-m {
    background-color: #ffffff;
}

.btn-primary-transparent:hover,
.btn-primary-transparent:focus {
    opacity: 1;
}

.btn-primary .badge {
    color: #ffffff;
    background-color: #fff;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.btn-xl {
    padding: 15px 30px;
}

.btn-xxl {
    padding: 18px 34px;
    /* make it bigger in approximately 3 pixels then it's current font size */
    font-size: 1.15rem;
}

.btn-primary-simplelink.btn-xxl,
.btn-primary-simplelink-text-color.btn-xxl {
    /* make it bigger in approximately 3 pixels then it's current font size */
    font-size: 1.28rem;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: var(--global_main_dark);
    background-color: var(--global_main_dark);
}


/*
######################################
Global Stuff
######################################
*/

.padding-2 {
    padding: 2%;
    padding-top: 0;
}

.padding-bottom-2 {
    padding-bottom: 20px;
}

.padding-5px {
    padding: 5px;
}

.padding-10px {
    padding: 10px;
}

.row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.full-image-width {
    position: relative;
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

.label-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    color: rgb(255, 255, 255);
    width: 60px;
    height: 64px;
    text-align: center;
    padding-top: 7px;
    font-size: 26px;
    line-height: 1;
    z-index: 1;
    text-decoration: none;
}

.label-date span {
    display: block;
    font-size: 15px;
    margin-top: 5px;
}

.share-buttons {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.share-buttons.square li a {
    color: #252525;
    opacity: 0.7;
    padding: 2px 8px;
    font-size: 1.3em;
}

.inside_page .share-buttons.square li a {
    color: #252525;
}

.inside_page .share-buttons.square li a .svg-m {
    background-color: #252525;
}

.share-buttons.square li a:hover {
    opacity: 1;
}

.s123-card {
    margin: 0 0 30px;
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    display: flex;
}

.s123-card .module-title h3 {
    padding: 0;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.s123-card .module-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100px;
    height: 100px;
    float: left;
}

.s123-card .module-details {
    overflow: hidden;
    padding: 5px;
    position: relative;
    float: left;
}

.s123-card .module-meta {
    list-style: none;
    padding: 0;
    margin-bottom: -5px;
}

.s123-card .module-meta li {
    font-size: 0.5rem;
}

.v1-card {
    margin: 0 0 30px;
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    display: flex;
}

.v1-card.v1-top {
    flex-direction: column;
}

.v1-card .v1-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 150px;
}

.v1-card .v1-body {
    padding: 10px;
}

.v1-card .v1-body .v1-title {
    margin: 0;
    font-size: 1.5em;
    text-align: initial;
    margin-bottom: 10px;
}


/*
######################################
box_1
######################################
*/

.lm.box {
    padding: 0;
    position: relative;
}

.lm.box .product-details-container {
    padding: 10px;
}

.lm.box .buttons-container {
    padding: 10px;
}

.lm.box .product-sale-banner {
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 1;
    z-index: 1;
}

.lm.box .label-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    color: rgb(255, 255, 255);
    width: 60px;
    height: 64px;
    text-align: center;
    padding-top: 7px;
    font-size: 26px;
    line-height: 1;
    z-index: 1;
    text-decoration: none;
}

.lm.box .label-date span {
    display: block;
    font-size: 15px;
    margin-top: 5px;
}

.lm.box .product-sale-banner:hover {
    opacity: 1;
}

.lm.box .product-sale-banner {
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 1;
    z-index: 1;
}

.lm.box .product-sale-banner:hover {
    opacity: 1;
}

.lm.box .product-image {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    font-size: 0;
    display: block;
    height: 200px;
    padding: 0;
}

.lm.box.box_1 .buttons {
    text-align: center;
    margin: 20px 0 5px 0;
}

.lm.box .product-details-container {
    overflow: hidden;
}

.lm.box .product-details-container h4 {
    margin: 0.75em 0;
}

.lm.box .product-details-container p.short {
    margin-bottom: 0.75em;
    height: 106px;
    overflow: hidden;
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    max-width: 100%;
    height: 63px;
    /* Fallback for non-webkit */
    font-size: 15px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm.box .list-price {
    opacity: 0.4;
    text-decoration: line-through;
}

.lm.box.box-no-border .product-details-container {
    padding: 0 10px;
}

.lm.box.box-no-border .product-details-container H4 {
    margin-top: 0;
}


/*
######################################
box_1 Style 2
######################################
*/

.lm.box.box_2 {
    display: flex;
    flex-direction: row;
    height: 250px;
}

.lm.box.box_2 .product-image {
    width: 20%;
    height: 100%;
    padding: 0;
}

.lm.box.box_2.noImages .product-image {
    width: 100px;
}

.lm.box.box_2 .product-details-container {
    width: 80%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.lm.box.box_2.noImages .product-details-container {
    width: 100%;
}

.lm.box.box_2 .buttons {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    align-content: center;
    justify-content: flex-start;
}


/*
######################################
box_3
######################################
*/

.lm.box.box_3 {
    width: 90%;
    float: none;
    margin: 0 auto;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
    overflow: hidden;
    display: block;
    text-align: center;
}

@media (min-width: 992px) {
    .lm.box.box_3 {
        width: 50%;
    }
}

.lm.box.box_3 .blog-m-meta {
    margin: 10px !important;
    margin-bottom: 5px !important;
    display: inline-block;
    list-style: none;
}

.lm.box.box_3 .news-blog-module {
    margin: 0 0 30px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.lm.box.box_3 .blog-container {
    clear: both;
}

@media ( min-width: 768px) {
    .lm.box.box_3 .blog-container {
        clear: none;
    }
    .lm.box.box_3 .blog-container:nth-child(odd) {
        clear: both;
    }
}

.lm.box.box_3 .news-blog-module-frame {
    border: 1px solid #e5e5e5;
    padding: 6px;
    margin-bottom: 15px;
}

.lm.box.box_3 .news-blog-module-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
    position: relative;
    width: 100%;
}

.lm.box.box_3 .news-blog-module-details {
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.lm.box.box_3 .news-blog-module-title h2 {
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.lm.box.box_3 .news-blog-module-meta {
    list-style: none;
    padding: 0;
    margin-bottom: -5px;
}

.lm.box.box_3 .news-blog-module-meta li {
    float: left;
    font-size: 14px;
    font-style: italic;
    line-height: 14px;
    margin: 0 10px 10px 0;
}

html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li {
    float: right;
}

html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li:before {
    margin-left: 10px;
    margin-right: 0;
}

.lm.box.box_3 .news-blog-module-meta li i {
    margin-right: 3px;
    margin-bottom: 15px;
    position: relative;
    top: 1px;
}

html[dir=rtl] .lm.box.box_3 .news-blog-module-meta li i {
    margin-left: 3px;
    margin-right: 0;
}

.lm.box.box_3 .news-blog-module-content a {
    float: right;
}

html[dir=rtl] .lm.box.box_3 .news-blog-module-content a {
    float: left;
}

html[dir=rtl] .lm.box.box_3 .fa-angle-right:before {
    content: "\f104";
}


/* Top Menu
----------------------------------*/

.website-name,
.logo_name {
    font-family: 'Raleway', Arial, sans-serif;
}

#mainNav {
    font-family: 'Raleway', Arial, sans-serif;
    z-index: 3000;
}


/* Modules
----------------------------------*/

.video-section iframe {
    display: none;
}

.s123-modules-container {
    position: relative;
}

.s123-modules-container section {
    position: relative;
}

.s123-page-container section {
    position: relative;
}

.s123-page-container section {
    position: relative;
}

.s123-content-area {
    min-height: 65vh;
}

.s123-content-area section {
    min-height: 65vh;
}

.inside_page .s123-module,
.home_page .s123-module {
    padding: 100px 0;
    padding: var(--sectionsPadding) 0;
}

@media(max-width:767px) {
    .inside_page .s123-module,
    .home_page .s123-module {
        padding: 50px 0;
        padding: calc( var(--sectionsPadding) / 2) 0;
    }
}

.inside_page .s123-module.s123-page-data {
    padding: 20px 0;
}

@media(max-width:767px) {
    .inside_page .s123-module.s123-page-data {
        padding: 20px 0;
    }
}

.modulesTitle .h1,
.modulesTitle .h2 {
    font-family: 'Raleway', Arial, sans-serif;
    margin-top: 0;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.5;
}

#s123ModulesContainer section#section-169 .header1,
#s123ModulesContainer section#section-169 .header2,
#s123ModulesContainer section[data-module-type-num="167"] .header1,
#s123ModulesContainer section[data-module-type-num="167"] .header2 {
    font-family: 'Raleway', Arial, sans-serif;
    line-height: 1.5;
}

.video-container {
	padding: 20px 0px;
}

section.section-brd {
	border-top: 1px solid #ebebeb;
}

section.section-bg {
	background-color: #fafafa;
}

/* Modules Colors & Settings
----------------------------------*/

.home_page .modulesTitle {
    padding-bottom: 10px;
}

.s123-content-area .modulesTitle {
    padding-top: 20px;
    padding-bottom: 10px;
}

.s123-module {
    color: #252525;
}


/* on layout and data page remove the top padding of the titles
because now the section has the padding */

.s123-content-area .s123-module .modulesTitle {
    padding-top: 0px;
}

.s123-module .svg-m {
    background-color: #252525;
}

.s123-module a .svg-m {
    background-color: var(--global_main_dark);
}

.s123-module .btn-primary .svg-m {
    background-color: #ffffff;
}

.inside_page .s123-page-data.dataPageBreadcrumbs {
    padding-top: 0;
}

.inside_page .s123-page-data.dataPageBreadcrumbs .modulesTitle {
    padding-top: 20px;
    padding-bottom: 10px;
}

.bg-primary {
    color: #252525;
    background-color: #ffffff;
}

.bg-primary .svg-m {
    background-color: #252525;
}

.bg-primary .btn-link .svg-m {
    background-color: #337ab7;
}

.bg-primary .btn-primary .svg-m {
    background-color: #ffffff;
}

.inside_page .bg-primary {
    color: #252525;
    background-color: #ffffff;
}

.bg-primary .text-primary {
    color: #252525;
}

.inside_page .bg-primary .text-primary {
    color: #252525;
}

.bg-primary .text-inverse {
    color: var(--global_main_dark);
}

.bg-primary-black {
    color: #fff;
    background-color: #000;
}

.bg-primary-gray {
    color: #444950;
    background-color: #ebedf0;
}

.bg-primary-white {
    color: #000;
    background-color: #fff;
}

.bg-primary-black.border-left-before::before {
    border-left-color: #000;
}

.bg-primary-black.border-right-before::before {
    border-right-color: #000;
}

html[dir="rtl"] .bg-primary-black.border-left-before::before {
    border-right-color: #000;
}

html[dir="rtl"] .bg-primary-black.border-right-before::before {
    border-left-color: #000;
}

.bg-primary-gray.border-left-before::before {
    border-left-color: #ebedf0;
}

.bg-primary-gray.border-right-before::before {
    border-right-color: #ebedf0;
}

html[dir="rtl"] .bg-primary-gray.border-left-before::before {
    border-right-color: #ebedf0;
}

html[dir="rtl"] .bg-primary-gray.border-right-before::before {
    border-left-color: #ebedf0;
}

.bg-primary-white.border-left-before::before {
    border-left-color: #fff;
}

.bg-primary-white.border-right-before::before {
    border-right-color: #fff;
}

html[dir="rtl"] .bg-primary-white.border-left-before::before {
    border-right-color: #fff;
}

html[dir="rtl"] .bg-primary-white.border-right-before::before {
    border-left-color: #fff;
}

@media(max-width:900px) {
    .bg-primary-black.border-left-before::before {
        border-right-color: #000;
        border-left-color: transparent;
    }
    html[dir="rtl"] .bg-primary-black.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #000;
    }
    .bg-primary-gray.border-left-before::before {
        border-right-color: #ebedf0;
        border-left-color: transparent;
    }
    html[dir="rtl"] .bg-primary-gray.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #ebedf0;
    }
    .bg-primary-white.border-left-before::before {
        border-right-color: #fff;
        border-left-color: transparent;
    }
    html[dir="rtl"] .bg-primary-whitek.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #fff;
    }
}

.text-primary {
    color: var(--global_main_dark);
}

.text-inverse {
    color: #252525;
}

.inside_page .text-inverse {
    color: #252525;
}

.border-primary {
    border-color: var(--global_main_dark);
}

.border-top-primary {
    border-top-color: var(--global_main_dark);
}

.border-right-primary {
    border-right-color: var(--global_main_dark);
}

.border-left-primary {
    border-left-color: var(--global_main_dark);
}

.border-bottom-primary {
    border-bottom-color: var(--global_main_dark);
}

.site123-box-border {
    box-shadow: none;
    border: 1px solid #ebebeb !important;
}


/* Box inside Modules - Colors & Settings
----------------------------------*/

.bg-primary .box-primary {
    background-color: #fafafa !important;
}

.inside_page .bg-primary .box-primary {
    background-color: #fafafa !important;
}

.bg-primary .box-primary p,
.bg-primary .box-primary label,
.bg-primary .box-primary h2,
.bg-primary .box-primary h3,
.bg-primary .box-primary h4,
.bg-primary .box-primary h5,
.bg-primary .box-primary h6,
.bg-primary .box-primary li,
.bg-primary .box-primary.box-text-primary,
.bg-primary .box-primary.box-text-primary span,
.bg-primary .box-primary.box-text-primary strong,
.bg-primary .box-primary .box-text-primary,
.bg-primary .box-primary .box-text-primary span,
.bg-primary .box-primary .box-text-primary strong {
    color: #252525 !important;
}

.bg-primary .box-primary .price {
    color: #252525 !important;
}


/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */

.box-primary .box-primary a.moduleTextColor {
    color: #252525 !important;
}

.inside_page .bg-primary .box-primary p,
.inside_page .bg-primary .box-primary label,
.inside_page .bg-primary .box-primary h2,
.inside_page .bg-primary .box-primary h3,
.inside_page .bg-primary .box-primary h4,
.inside_page .bg-primary .box-primary h5,
.inside_page .bg-primary .box-primary h6,
.inside_page .bg-primary .box-primary li,
.inside_page .bg-primary .box-primary.box-text-primary,
.inside_page .bg-primary .box-primary.box-text-primary span,
.inside_page .bg-primary .box-primary.box-text-primary strong,
.inside_page .bg-primary .box-primary .box-text-primary,
.inside_page .bg-primary .box-primary .box-text-primary span,
.inside_page .bg-primary .box-primary .box-text-primary strong {
    color: #252525 !important;
}

.inside_page .bg-primary .box-primary .svg-m,
.inside_page .bg-primary .box-primary.box-text-primary .svg-m {
    background-color: #252525;
}

.inside_page .bg-primary .box-primary .price {
    color: #252525 !important;
}


/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */

.inside_page .box-primary .box-primary a.moduleTextColor {
    color: #252525 !important;
}

.bg-primary .box-primary.border-left-before::before {
    border-left-color: #fafafa;
}

html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
    border-right-color: #fafafa;
}

.bg-primary .box-primary.border-right-before::before {
    border-right-color: #fafafa;
}

html[dir="rtl"] .bg-primary .box-primary.border-right-before::before {
    border-left-color: #fafafa;
}

.inside_page .bg-primary .box-primary.border-right-before::before {
    border-right-color: #fafafa
}

html[dir="rtl"] .inside_page .bg-primary .box-primary.border-right-before::before {
    border-left-color: #fafafa
}

@media(max-width:900px) {
    .bg-primary .box-primary.border-left-before::before {
        border-right-color: #fafafa;
        border-left-color: transparent;
    }
    html[dir="rtl"] .bg-primary .box-primary.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #fafafa;
    }
    .inside_page .bg-primary .box-primary.border-left-before::before {
        border-right-color: #fafafa;
        border-left-color: transparent;
    }
    html[dir="rtl"] .inside_page .bg-primary .box-primary.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #fafafa;
    }
}


/* Secondery */

.box-primary {
    background-color: #ffffff !important;
}

.box-primary p,
.box-primary label,
.box-primary h2,
.box-primary h3,
.box-primary h4,
.box-primary h5,
.box-primary h6,
.box-primary li,
.box-primary.box-text-primary,
.box-primary.box-text-primary span:not(.a-b-container,
.a-b-t),

/* exclude action buttons text */

.box-primary.box-text-primary strong,
.box-primary .box-text-primary,
.box-primary .box-text-primary span:not(.a-b-container,
.a-b-t),

/* exclude action buttons text */

.box-primary .box-text-primary strong {
    color: #252525 !important;
}

.box-primary .svg-m,
.box-primary.box-text-primary .svg-m,
.box-primary .box-text-primary .svg-m {
    background-color: #252525;
}

.box-primary.border-left-before::before {
    border-left-color: #ffffff;
}

html[dir="rtl"] .box-primary.border-left-before::before {
    border-right-color: #ffffff;
}

.box-primary.border-right-before::before {
    border-right-color: #ffffff;
}

html[dir="rtl"] .box-primary.border-right-before::before {
    border-left-color: #ffffff;
}

@media(max-width:900px) {
    .box-primary.border-left-before::before {
        border-right-color: #ffffff;
        border-left-color: transparent;
    }
    html[dir="rtl"] .box-primary.border-left-before::before {
        border-right-color: transparent;
        border-left-color: #ffffff;
    }
}


/* SVG Icons Inside Of Buttons - Make sure the svg icons inside of buttons
will keep their colors even when they are inside of other design combinations
---------------------*/

.inside_page .bg-primary .box-primary .btn-primary .svg-m,
.box-primary .btn-primary .svg-m {
    background-color: #ffffff;
}

.box-primary .price {
    color: #252525 !important;
}


/* Sometimes we don't want to use the main link color of the website for some links (like in songs player) so we add this class to the links */

.box-primary a.moduleTextColor {
    color: #252525 !important;
}


/* `box-text-primary` can't display custom text color for Froala editor that using BR as line breaks */

.box-primary .fr-view {
    color: #252525 !important;
}

.s123-box-padding {
    padding: 2em;
}

.s123-box-padding-thin {
    padding: 1em;
}

.s123-box-margin-bottom {
    margin-bottom: 2em;
}

.s123-box-clean {
    border: 0;
    border-radius: 0;
}

.s123-box-border {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
}

.s123-box-shadow {
    border-radius: .25rem;
    box-shadow: 0 .3125rem .875rem 0 rgba(129, 129, 129, .2)!important;
}

.s123-box-top-primary-border {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-top: 3px solid var(--global_main_dark);
}

.s123-box-top-primary-big {
    border: 0;
    border-radius: 0.3rem;
    border-top: 6px solid var(--global_main_dark);
}

.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}


/* overlay box */

.text-over-container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.text-over {
    position: relative;
    overflow: hidden;
    width: 280px;
    height: 280px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    border: 1px solid #ebebeb !important;
}

@media(max-width:650px) {
    .text-over {
        width: 360px;
        height: 360px;
    }
}

@media(max-width:500px) {
    .text-over {
        width: 80vw;
        height: 80vw;
    }
}

.text-over-block .inner-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #ffffff;
}

.text-over-block .block-image-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
}

.text-over-block .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0px 15px 18px;
    font-size: 22px;
    line-height: 26px;
    font-weight: 550;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transition: all 500ms ease;
}

.text-over-block:hover .title {
    opacity: 0;
    visibility: hidden;
}

.text-over-block .block-image-layer:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: hsla(150, 25%, 10%, .6);
    background: -webkit-linear-gradient(bottom, rgba(19, 32, 26, 0.95), rgba(19, 32, 26, 0.80), rgba(0, 0, 0, 0.0));
}

.text-over-block .title .txt {
    position: relative;
}

.text-over-block:hover .over-link {
    opacity: 1;
}

.text-over-block .over-link .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -15px;
    font-size: 30px;
    line-height: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}

.text-over-block .inner-box .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: table;
    vertical-align: middle;
    color: #ffffff;
    background: var(--global_main_color_rgba_60);
    opacity: 0.5;
    visibility: hidden;
    transform: translateY(-100%);
    transition: all 500ms ease;
}

.text-over-block .inner-box:hover .overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0%);
    transition: all 1200ms ease;
}

.text-over-block .inner-box .overlay a {
    color: #ffffff;
}

.text-over-block .inner-box .overlay .over-inner {
    position: relative;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 20px 15px;
}

.text-over-block .inner-box .overlay .over-inner .text {
    line-height: 1.4;
    font-weight: 450;
    overflow: hidden;
    max-height: 100px;
}

.text-over-block .inner-box .overlay .over-inner .text p {
    margin-bottom: 0px;
}

.text-over-block .inner-box .overlay .h3 {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 20px;
    color: white;
}

.text-over-block .inner-box .overlay .cat,
.text-over-block .inner-box .overlay .cat a {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
}

.text-over-block .inner-box .overlay .h3 a:hover {
    text-decoration: underline;
}

.text-over .fa-pen {
    position: absolute;
    cursor: pointer;
    top: 16px;
    right: 16px;
    z-index: 100;
    font-size: 20px;
    color: #fff;
}

.gallery-image .title {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 0px;
    background: hsla(150, 25%, 10%, .6);
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.0));
    transition: all 500ms ease;
    visibility: hidden;
    overflow: hidden;
    cursor: pointer;
}

.gallery-image:hover .title {
    height: 30%;
    visibility: visible;
}

.gallery-image .title div {
    width: 100%;
    height: 100%;
    display: table;
}

.gallery-image .title div div {
    vertical-align: bottom;
    display: table-cell;
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 7%;
    font-size: 13px;
}

@media(max-width:991px) {
    .gallery-image .title div div {
        padding-bottom: 6%;
        font-size: 14px;
    }
}

.s123-module-gallery select {
    display: inline-block;
    width: 100%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px;
    background-color: #fff;
}


/* PAGINATION */

.pagination {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 30px;
    margin-bottom: -30px;
    text-align: center;
}

.pagination .pg {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-left: 3px;
    margin-right: 3px;
    line-height: 36px;
    vertical-align: middle;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: #000;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.pagination .pg.active,
.pg.dots {
    cursor: default;
    color: #000 !important;
}

.pagination .pg.active {
    background: var(--global_main_color);
    color: white !important;
}

.pagination .pg:hover {
    color: var(--global_main_color);
}

.pagination .pg .fa {
    font-size: 40px;
    margin-bottom: 4px;
    vertical-align: middle;
    color: #ccc;
}

.pagination .pg:hover .fa {
    color: var(--global_main_color) !important;
}


/*
SITE123 card box
*/

.s123-card {
    margin: 0 0 30px;
    position: relative;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.s123-card .image-container {
    width: 100%;
    height: 10em;
    overflow: hidden;
}

.s123-card .image-container .main-image {
    display: flex;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: transform 0.5s;
}

.s123-card:hover .image-container .main-image {
    transform: translate(0%, 0%) scale(1.1);
}

.s123-card .image-container .square-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
    color: rgb(255, 255, 255);
    width: 60px;
    height: 64px;
    text-align: center;
    padding-top: 7px;
    font-size: 26px;
    line-height: 1;
    z-index: 1;
    text-decoration: none;
}

.s123-card .image-container .square-date span.s-d-month {
    color: rgb(255, 255, 255) !important;
    display: block;
    font-size: 15px;
    margin-top: 5px;
}

.s123-card .details {
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.s123-card .details .title {
    height: 2.5em;
}

.s123-card .details .title>a {
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.s123-card .details .title>a:hover {
    text-decoration: none;
}

.s123-box-right-primary-border {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-right: 3px solid var(--global_main_dark);
}

html[dir="rtl"] .s123-box-right-primary-border {
    border-right: 1px solid #e0e0e0;
    border-left: 3px solid var(--global_main_dark);
}

.s123-box-right-primary-border-hover {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-right: 8px solid #e0e0e0;
    transition: border-color 0.5s ease;
}

.s123-box-right-primary-border-hover:hover {
    border-right: 8px solid var(--global_main_dark);
}

html[dir="rtl"] .s123-box-right-primary-border-hover {
    border-right: 1px solid #e0e0e0;
    border-left: 8px solid #e0e0e0;
}

html[dir="rtl"] .s123-box-right-primary-border-hover:hover {
    border-right: 1px solid #e0e0e0;
    border-left: 8px solid var(--global_main_dark);
}

.s123-box-left-primary-border {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-left: 3px solid var(--global_main_dark);
}

html[dir="rtl"] .s123-box-left-primary-border {
    border-left: 1px solid #e0e0e0;
    border-right: 3px solid var(--global_main_dark);
}

.s123-box-bottom-primary-border {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-bottom: 3px solid var(--global_main_dark);
}

.s123-box-bottom-primary-border-hover {
    border: 1px solid #e0e0e0;
    border-radius: 0.3rem;
    border-bottom: 8px solid #e0e0e0;
    transition: border-color 0.5s ease;
}

.s123-box-bottom-primary-border-hover:hover {
    border-bottom: 8px solid var(--global_main_dark);
}

.s123-box-flying-up {
    transition: transform .6s ease-out;
    transform: translateY(0);
}

.s123-box-flying-up:hover {
    transition: transform .6s ease-out;
    transform: translateY(-4px);
}

.s123-btn-tag {
    border: none;
    color: rgba(0, 0, 0, .68);
    background: rgba(0, 0, 0, .05);
    font-size: 0.8em;
    letter-spacing: 0;
    text-decoration: none;
    border-radius: 3px;
    padding: 5px 10px;
    line-height: 2.5;
}

.s123-btn-tag:hover {
    background: rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .68);
    text-decoration: none;
}


/* Modal (Open window) CSS
----------------------------------*/

.modal {
    z-index: 3001;
}

.modal-content {
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal-header .close {
    font-size: 32px;
}

button.close {
    font-size: 32px;
}


/* Video Player Design
----------------------------------*/

.s123-video-cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    cursor: pointer;
}

.s123-video-cover .s123-video-play-icon {
    padding: 10px;
    background-color: #000;
    padding: 10px 26px;
    background-color: rgba(0, 0, 0, 0.57);
    color: white;
    border-radius: 15px;
    font-size: 22px;
}

.s123-video-cover .s123-video-play-icon.v-p-i-xs {
    padding: 5px 13px;
    border-radius: 10px;
    font-size: 16px;
}

.s123-video-cover .s123-video-play-icon .svg-m {
    background-color: white;
}

.s123-video-cover:hover .s123-video-play-icon {
    background-color: var(--global_main_dark);
}


/* ########################################## cssFooter.php ########################################## */

.inside_page footer {
    border-top: 1px solid #ebebeb;
}


/* footer_1 */

footer.footer_1 {
    color: #fff;
    padding: 40px 0;
    background-color: #484747;
    font-size: 0.8rem;
}

footer.footer_1 .side2 {
    text-align: right;
}

html[dir=rtl] footer.footer_1 .side2 {
    text-align: left;
}

footer.footer_1 .footer_name {
    font-size: 1.2rem;
    text-transform: uppercase;
}

footer.footer_1 .navbar-nav>li {
    display: inline-block;
}

footer.footer_1 .navbar-nav>li>a {
    padding: 0;
    margin: 0px 8px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 500;
}

footer.footer_1 .nav>li>a:focus,
footer.footer_1 .nav>li>a:hover {
    color: var(--global_main_color);
    background-color: transparent !important;
}

footer.footer_1 .navbar-nav {
    float: none;
    display: inline-block;
    text-align: right;
    margin-bottom: 15px;
}

html[dir=rtl] footer.footer_1 .navbar-nav {
    text-align: left;
}

@media(max-width:767px) {
    footer.footer_1 .part1 {
        width: 100%;
        display: table;
    }
    footer.footer_1 .side1 {
        text-align: center;
        padding: 40px 0 0 0;
    }
    /* on RTL mobile the element don't got the text-align position because html tag (highest element in the hierarchy)
    was overwrite the text-align position, so until we'll update this to mobile first we need to add the html tag. */
    html[dir=rtl] footer.footer_1 .side2,
    footer.footer_1 .side2 {
        text-align: center;
        padding: 20px 0 40px 0;
    }
    footer.footer_1 .part1 .nav {
        display: none;
    }
    footer.footer_1 .part1 .mailing .input-group {
        float: none;
        margin: 0 auto;
    }
    footer.footer_1 .part1 .mailing {
        margin: 10px auto;
    }
    /* on RTL mobile the element don't got the text-align position because html tag (highest element in the hierarchy)
    was overwrite the text-align position, so until we'll update this to mobile first we need to add the html tag. */
    html[dir=rtl] footer.footer_1 #widget_subscribe_form,
    footer.footer_1 #widget_subscribe_form {
        width: 350px;
        max-width: 90%;
        text-align: center;
        margin: 0 auto;
    }
}


/* Footer Dropdown menu */

footer .nav>li>a {
    color: #252525;
}

footer .nav>li>a:hover {
    color: var(--global_main_dark);
}

footer .nav>li>a:focus,
footer .nav>li>a:hover,
footer .nav>li.open>a,
footer .nav>li.open>a:focus,
footer .nav>li.open>a:hover,
footer .nav>li.active>a,
footer .nav>li.active>a:focus,
footer .nav>li.active>a:hover {
    background-color: transparent !important;
}

footer .nav .site-dropdown-menu {
    background-color: #ffffff;
}

footer .nav .site-dropdown-menu li a {
    color: #252525;
    background-color: transparent;
}

footer .nav .site-dropdown-menu li a .svg-m {
    background-color: #252525;
}

footer .nav .site-dropdown-menu>li>a:focus,
footer .nav .site-dropdown-menu>li>a:hover,
footer .nav .site-dropdown-menu>li.active>a,
footer .nav .site-dropdown-menu>li.active>a:focus,
footer .nav .site-dropdown-menu>li.active>a:hover {
    color: var(--global_main_color);
    background-color: transparent;
    text-decoration: none;
    opacity: 1 !important;
}

footer .language-bar {
    font-size: 1.35em;
    font-weight: 500;
    margin-right: 8px;
    margin-bottom: 20px;
    margin-left: 8px;
}

footer .language-bar a {
    opacity: 0.4;
    color: white;
    text-decoration: none;
}

footer .language-bar a:hover {
    opacity: 0.9;
}


/* homepage - contact us form */

#contactUsFormHome .help-block {
    font-size: 12px;
}

.contact-as-details-container .fa,
.contact-as-details-container .fab {
    margin-right: 8px;
}

.map-container {
    border: 1px solid #ebebeb;
}

.driving-directions {
	margin-top:20px;
	text-align:center;
}
.driving-directions a.act {
	font-weight:600;
}
.driving-directions .fa {
	margin-right: 8px;
}
.map-dir1, .map-dir2 {
	margin-top:16px;
}
.map-dir1 p, .map-dir2 p {
	font-size: 0.8em;
	margin-bottom:0px;
	text-align: justify;
}


/* breadcrumb design */

.rich_page .breadcrumb,
.inside_page .breadcrumb {
    border-radius: 0;
    color: #252525;
    background-color: transparent;
    margin-bottom: 0;
    font-size: 0.8em;
    display: flex;
    flex-wrap: wrap;
}

.rich_page .breadcrumb>.active,
.inside_page .breadcrumb>.active {
    color: #777;
}

@media(max-width:767px) {
    .inside_page .container-fluid>.breadcrumb-wrap>.breadcrumb {
        padding-right: 0px;
        padding-left: 0px;
    }
}


/* ########################################## websiteHeaderStylesCss.php ########################################## */


/* breadcrumb design */

.rich_page .r-c-f-c .mainColor .breadcrumb,
.inside_page .s123-module .mainColor .breadcrumb {
    color: #fff !important;
    background-color: var(--global_main_color);
}


/* Multi sections breadcrumbs - the selector for the multi section is different so we handle it for here */

.inside_page .s123-module .mainColor .breadcrumb a {
    color: #fff;
}

.inside_page .s123-module .mainColor .breadcrumb>.active {
    color: #fff;
    font-weight: bold;
}

.rich_page section .page_header_style,
.inside_page .page_header_style {
    margin-bottom: 20px;
}


/* Inside page - background box color */

.rich_page .r-c-f-c .boxColor,
.inside_page .s123-module .boxColor {
    color: #252525;
    background-color: #fafafa;
}


/* Inside page - background main color */

.rich_page .r-c-f-c .mainColor,
.inside_page .s123-module .mainColor {
    color: #fff;
    background-color: var(--global_main_color);
}

.rich_page .r-c-f-c .mainColor .modulesTitle hr,
.inside_page .s123-module .mainColor .modulesTitle hr {
    border-color: #fff;
}

.rich_page .r-c-f-c .boxColor,
.inside_page .s123-module .boxColor,
.rich_page .r-c-f-c .mainColor,
.inside_page .s123-module .mainColor {
    padding-top: var(--sectionsPadding);
    margin-top: calc(-1*var(--sectionsPadding));
}

.inside_page .s123-page-data.s123-module:not(.dataPageBreadcrumbs) .mainColor,
.inside_page .s123-page-data.s123-module:not(.dataPageBreadcrumbs) .boxColor {
    padding-top: 20px;
    margin-top: -20px;
}


/* Module header text transform
		----------------------------*/


/* Header layouts with bold text
        ----------------------------*/


/* Header Layouts - Old Customers had custom font size
        ----------------------------*/


/* Home text color */

.home-text-color {
    color: #ffffff;
}


/* Home Secondary Background Color */

.home-secondary-background-color {
    background-color: #ffffff;
}

.home_third_background_color {
    background-color: #000000;
}

@media(max-height:500px) {
    /* on small screens we make the icon is smaller */
    /*
	#websitePopupHomeVideo {
		font-size: 7px;
	}
    */
}


/* ########################################## cssDropdownMenu.php ########################################## */

.site-dropdown-menu {
    position: absolute;
    top: 100%;
    left: -5px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .005);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    opacity: 1;
}

html[dir=rtl] .site-dropdown-menu {
    right: 0;
    left: auto;
    float: right;
    text-align: right;
}

.dropdown-submenu.open>.site-dropdown-menu {
    display: block;
    *opacity: 0;
    /* doesnt show the dropdown until I know where to position it */
    margin: 0;
}

@media(max-width:768px) {
    .dropdown-submenu a {
        cursor: pointer;
    }
    .site-dropdown-menu {
        background-color: transparent;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        float: none;
        position: relative;
        padding-top: 5px;
        padding-bottom: 8px;
        margin-bottom: 20px;
    }
    .site-dropdown-menu li a {
        background-color: transparent !important;
        line-height: 0.8 !important;
    }
    .site-dropdown-menu li a .txt-container {
        font-size: 0.7em;
        cursor: pointer;
    }
}

@media(min-width:768px) {
    #mainNav #top-menu .navPages,
    #mainNav #top-menu .navActions,
    #mainNav #top-menu .headerSocial,
    #header .header-row,
    .global_footer .nav {
        -opacity: 0;
    }
    /* design 'more menu' in the menu */
    .site-dropdown-menu,
    .website-languages-menu .site-dropdown-menu {
        background-color: #ffffff;
    }
    .navbar-default .navbar-nav>.open>a,
    #website-languages-menu .navbar-default .navbar-nav>.open>a,
    .navbar-default .navbar-nav>.open>a:focus,
    .navbar-default .navbar-nav>.open>a:hover {
        background-color: transparent;
    }
    .dropdown-submenu {
        position: relative;
    }
    .dropdown-submenu>.site-dropdown-menu {
        border-radius: 0;
        padding: 0;
    }
    html[dir=rtl] .dropdown-submenu>.site-dropdown-menu {
        border-radius: 0;
    }
    .dropdown-submenu>.site-dropdown-menu li {
        margin: 0;
    }
    .dropdown-submenu .site-dropdown-menu a {
        display: block;
        margin: 0;
        text-align: left;
        border: 0;
    }
    html[dir=rtl] .dropdown-submenu .site-dropdown-menu a {
        text-align: right;
    }
}


/* Dropdown Menu Design for all layouts */

.site-dropdown-menu>li>a {
    font-size: 13px;
    font-weight: 300;
    background-color: #ffffff;
    border: 1px solid transparent;
    line-height: 1.5;
    color: #555;
    margin-top: 0;
    padding: 6.5px 15px !important;
    white-space: nowrap;
}

.site-dropdown-menu>li>a .svg-m {
    background-color: #252525;
}

.site-dropdown-menu>li>a:focus,
.site-dropdown-menu>li>a:hover,
.site-dropdown-menu>li.active>a,
.site-dropdown-menu>li.active>a:focus,
.site-dropdown-menu>li.active>a:hover {
    background-color: #ffffff;
    color: var(--global_main_dark);
    line-height: 1.5;
    text-decoration: none;
    opacity: 1;
}

.site-dropdown-menu>li>a:focus .svg-m,
.site-dropdown-menu>li>a:hover .svg-m,
.site-dropdown-menu>li.active>a .svg-m,
.site-dropdown-menu>li.active>a:focus .svg-m,
.site-dropdown-menu>li.active>a:hover .svg-m {
    background-color: var(--global_main_dark);
}


/* Build a class that take care dropdown side menu opening */

html .site-dropdown-menu.dropdown-side-open-right {
    top: 0;
    left: 100%;
    right: auto;
}

html .site-dropdown-menu.dropdown-side-open-left {
    top: 0;
    right: 100%;
    left: auto;
}

html .site-dropdown-menu.dropdown-side-open-up {
    top: auto;
    bottom: 100%;
}


/* ########################################## cssMobileMenu.php ########################################## */


/* Mobile & Tablet
----------------------------------*/


/* Hide the menu (we show it only at mobile devices ) */

#mainNavMobile {
    display: none;
}

@media(max-width:767px) {
     :root {
        --mainNavMobileHeight: 60px;
    }
    #top-section {
        padding-top: 0 !important;
    }
    .home_page_design body {
        padding-top: var(--mainNavMobileHeight) !important;
    }
    .home_page_design #top-section {
        padding-bottom: 0px !important;
        margin-top: 0 !important;
    }
    .home_page_design .body {
        padding-top: 0 !important;
    }
    /* Homepage image - decrase toolbar size */
    #top-section {
        min-height: calc(100vh - var(--mainNavMobileHeight)) !important;
    }
    #mainNavMobile {
        position: fixed !important;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        background-color: rgba(255,255,255,0.8);
        backdrop-filter: blur(4px);
        border-width: 0;
        min-height: var(--mainNavMobileHeight);
        border-bottom: 1px solid #ebebeb;
        box-shadow: rgb(0 0 0 / 35%) 0px 2px 12px 2px;
    }
    #top-section .home_background_wrapper {
			top: calc(-1 * var(--mainNavMobileHeight) );
			height: calc(100% + var(--mainNavMobileHeight) );
    }
    
    /* FIX - only for IE 11 */
    _:-ms-fullscreen,
     :root #mainNavMobile {
        height: 60px;
        /* for IE11 fix */
    }
    #mainNavMobile .navPagesLeft {
        order: 1;
        flex-grow: 1;
        padding: 0 5px;
        width: 60px;
        display: flex;
        justify-content: center;
    }
    #mainNavMobile .navPagesLeft a {
        color: #252525;
        border-color: #252525;
        cursor: pointer;
        background-color: transparent;
        font-size: 25px;
    }
    #mainNavMobile .navPagesLeft a .svg-m {
        background-color: #252525;
    }
    #mainNavMobile .navPagesLeft a:hover,
    #mainNavMobile .navPagesLeft a:focus {
        cursor: pointer;
        background-color: transparent;
    }
    #mainNavMobile .navbar-header {
        order: 2;
        flex-grow: 1;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #mainNavMobile .navbar-header a {
        font-weight: bold;
        color: #252525;
        font-size: 14px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;
    }
    /* in mobile we want to limit the logo name font size */
    #mainNavMobile .navbar-header a .website-name {
        *font-size: 14px !important;
        white-space: nowrap;
    }
    #mainNavMobile .navbar-header a img {
        max-height: 35px !important;
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
        margin-right: 8px;
    }
    /* hide the website name by default */
    #mainNavMobile .s123-site-logo>.website-name {
        display: none;
    }
    /* logo font weight normal */
    #mainNavMobile .navbar-header .weight700 {
        font-weight: bold;
    }
    /* logo font weight bold */
    #mainNavMobile .navbar-header .weight400 {
        font-weight: normal;
    }
    /* Italic style */
    #mainNavMobile .navbar-header .italic {
        font-style: italic;
    }
    /* show the website name if the user choose to */
    #mainNavMobile .s123-site-logo>.website-name.website-name-active {
        display: inline-block;
        padding-left: 4px;
    }
    html[dir="rtl"] #mainNavMobile .s123-site-logo>.website-name.website-name-active {
        padding-left: 0;
        padding-right: 4px;
    }
    #mainNavMobile .navPagesRight {
        order: 3;
        flex-grow: 1;
        padding: 0 5px;
        width: 80px;
        display: flex;
        justify-content: flex-end;
    }
    #mainNavMobile .navPagesRight .navActions {
        margin: 0;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: flex-end;
        padding: 0 5px;
    }
    #mainNavMobile .navPagesRight .navActions li {
        display: inline-block;
    }
    /* we had a bug so we decide to hide the button on mobile for now */
    #mainNavMobile .header-client-zone-wrapper {
        display: none !important;
    }
    #mainNavMobile .header-cart-wrapper.show-static {
        display: none !important;
    }
    #mainNavMobile .navPagesRight .navActions a,
    #mainNavMobile .navPagesRight .navActions button {
        font-size: 15px !important;
        padding: 0 !important;
        color: #252525 !important;
    }
    #mainNavMobile .navPagesRight .navActions a .svg-m,
    #mainNavMobile .navPagesRight .navActions button .svg-m {
        background-color: #252525 !important;
    }
    #mainNavMobile .navPagesRight .navActions a {
        padding: 0 7px !important;
    }
    /* Remove all menus and margin of the desktop platform */
    #websiteHeader {
        display: none !important;
    }
    body,
    .body {
        margin: 0 !important;
        border: 0;
    }
    .rich_page section.s123-module:first-child:before,
    .rich_page #s123ModulesContainer:before,
    .inside_page #s123ModulesContainer:before,
    .inside_page .s123-page-container:before,
    .s123-content-area:before {
        content: none;
    }
    /**
     * Mobil Navigation Grid Handler
     */
    #mainNavMobile .navbar-header {
        -position: absolute !important;
        z-index: 1;
        height: 100%;
        align-items: center;
    }
    #mainNavMobile .navbar-header>a {
        *max-width: calc(100% - 60px);
        padding-top: 2px;
        padding-bottom: 2px;
        height: 100%;
    }
    #mainNavMobile .s123-site-logo>.website-name.website-name-active,
    #mainNavMobile .website-name {
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-y: hidden;
        vertical-align: middle;
        max-height: 100%;
        display: inline-block;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #mainNavMobile .navPagesLeft>.header-menu-wrapper {
        margin-right: auto;
        position: relative;
        z-index: 2;
    }
    html[dir="rtl"] #mainNavMobile .navPagesLeft>.header-menu-wrapper {
        margin-right: 0;
        margin-left: auto;
    }
    #mainNavMobile .navPagesRight>ul.navActions {
        margin-left: auto;
        position: relative;
        z-index: 2;
    }
    html[dir="rtl"] #mainNavMobile .navPagesRight>ul.navActions {
        margin-left: 0;
        margin-right: auto;
    }
    /* add padding to the buttons to make them bigger for mobile clicks */
    #mainNavMobile .navPagesRight .navActions a,
    #mainNavMobile .navPagesLeft>.header-menu-wrapper a {
        padding: 7px !important;
    }
}


/* ########################################## css.siteLogo.php ########################################## */


/* Logo Design */

.logo_name>div {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    vertical-align: middle;
    margin-right: 4px;
}

html[dir="rtl"] .logo_name>div {
    margin-left: 7px;
    margin-right: 0;
}

.logo_name>div>i {
    text-align: center;
}


/* limit the width and height of the style so it will 
        not overflow the container */

.logo_name .logoLayout {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

.s123-w-l-s {
    letter-spacing: 0.5px;
    word-spacing: normal;
}

.s123-w-l-s .website-name {
    font-size: 22px;
}

.s123-w-l-s div {
    font-size: 26px;
}

.s123-w-l-s .logoLayout_text,
.s123-w-l-s .img-responsive,
.s123-w-l-s div:not(.logoLayout):not(.svg-m) {
    margin-right: 0px;
}

html[dir="rtl"] .s123-w-l-s .logoLayout_text,
html[dir="rtl"] .s123-w-l-s div div:not(.logoLayout):not(.svg-m),
html[dir="rtl"] .s123-w-l-s .img-responsive {
    margin-right: 0;
    margin-left: 0px;
}

.s123-w-l-s .website-name {
    font-weight: 700;
    text-transform: uppercase;
}


/* https://stackoverflow.com/questions/25224969/fixed-positioned-header-jumps-in-google-chrome */

.affix {
    transform: translateZ(0px);
}

.externalAlert {
    font-family: arial;
    color: black;
}

.contactUsConfirm {
    font-family: arial;
    color: black;
}

.modulesTitle H4 {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}


/**
 * Email Contact Email 
 */

.global-contact-email-container {
    width: 70%;
    color: #fff;
    text-align: left;
}

html[dir=rtl] .global-contact-email-container {
    text-align: right;
}

.global-contact-email-container .g-c-email-info-box a {
    color: #fff;
}

.g-c-email-message-sent-box {
    display: none;
    text-align: center;
}

.global-contact-email-container .g-c-email-message-content {
    margin-bottom: 30px;
}

ul.share-buttons {
    list-style: none;
    padding: 0;
}

ul.share-buttons li {
    display: inline;
}

.website-languages li>a {
    line-height: 30px !important;
}

#cboxOverlay {
    background: none;
    background-color: #000;
}


/* SVG Icons Support
-------------------------------*/

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle;
}

.fa-2x {
    font-size: 2em;
}

.fa-3x {
    font-size: 3em;
}

.fa-4x {
    font-size: 4em;
}

.fa-5x {
    font-size: 5em;
}


/* Menu Action Buttons
----------------------------------*/

.navActions a {
    border-bottom: 0 !important;
}

.navActions a {
    padding: 0 7px !important;
}


/**
 * Languages Flag Fix - When the user upload a flag we show it instead
 * of our icon, the flag is not a font, its an image, so if the user
 * set a big font size to the menu, the icon we not vertical centered.
 * When I fix it I sow that its centered everything better, also on 
 * mobile and other icons, so I add it to all of them.
 */

ul.navActions a {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.navActions li a:hover {
    background-color: transparent !important;
}

.action-button-wrapper a:hover {
    border-color: transparent !important;
    border-bottom: 0 !important;
    background-color: transparent !important;
    opacity: 1 !important;
}

.btn-primary-action-button-1 {
    font-size: 13px;
    border-color: var(--global_main_dark);
    background-color: var(--global_main_dark);
    font-weight: bold;
    color: #ffffff;
    border-bottom: solid 3px rgba(0, 0, 0, 0.2);
}


/* set icon color according to the button style and
ignore the global menu icon color */

.btn-primary-action-button-1 .svg-m {
    background-color: #ffffff !important;
}

.btn-primary-action-button-1:hover {
    opacity: 1;
}

.btn-primary-action-button-2 {
    font-size: 13px;
    border-color: #252525;
    background-color: #252525;
    font-weight: bold;
    color: var(--global_main_dark);
}

.btn-primary-action-button-2:hover {
    opacity: 1;
}


/* set icon color according to the button style and
ignore the global menu icon color */

.btn-primary-action-button-3 {
    font-size: 13px;
    border-color: var(--global_main_dark);
    background-color: var(--global_main_dark);
    font-weight: bold;
    color: #ffffff;
}

.btn-primary-action-button-3:hover {
    opacity: 1;
}


/* set icon color according to the button style and
ignore the global menu icon color */

.btn-primary-action-button-3 .svg-m {
    background-color: #ffffff !important;
}

.btn-primary-action-button-4 {
    font-size: 13px;
    border-bottom: 0;
    border: 1px solid;
    background-color: transparent;
    color: #252525;
    position: relative;
}

.btn-primary-action-button-4:hover,
.btn-primary-action-button-4:focus {
    border: 1px solid;
    background-color: transparent;
    color: #252525;
}

.btn-primary-action-button-4::before {
    border: 0 !important;
}

.btn-primary-action-button-4 .svg-m,
#header .header-column-menu-actions .navActions>li a:hover .svg-m {
    background-color: #252525;
}

.btn-primary-action-button-5 {
    font-size: 13px;
    border-bottom: 0;
    border: 1px solid transparent !important;
    color: #444950 !important;
    background-color: #ebedf0 !important;
    position: relative;
}

.btn-primary-action-button-5:hover {
    color: #444950;
    background-color: #e2e5e9;
}


/* set icon color according to the button style and
ignore the global menu icon color */

.btn-primary-action-button-5 .svg-m {
    background-color: #444950 !important;
}

.btn-primary-action-button-5:hover .svg-m {
    background-color: #444950 !important;
}

#mainNav #topAction_buttonText_1,
#mainNav #topAction_buttonText_2 {
    display: flex;
    align-items: center;
}


/* colored svg - make sure that the
width and height will be the same as icon tags */

#mainNav #topAction_buttonText_1 .s123-icon-converter,
#mainNav #topAction_buttonText_2 .s123-icon-converter {
    width: 1em !important;
    height: 1em !important;
}

.btn-primary-action-button-6 {
    font-size: 13px;
    border-bottom: 0;
    border: 1px solid var(--global_main_dark);
    background-color: transparent;
    color: var(--global_main_dark);
    position: relative;
}

.btn-primary-action-button-6 .svg-m {
    background-color: var(--global_main_dark) !important;
}

.btn-primary-action-button-6:hover,
.btn-primary-action-button-6:focus {
    border: 1px solid var(--global_main_dark);
    background-color: transparent !important;
    color: var(--global_main_dark);
}

.global_footer .social-icons .list-inline>li>a {
    border: 1px solid var(--global_main_color);
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    background-color: var(--global_main_color);
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    text-decoration: none;
}

.global_footer .social-icons .list-inline>li>a .svg-m {
    background-color: #fff;
}

.global_footer .social-icons .list-inline>li>a:hover {
    opacity: 0.8;
    text-decoration: none;
}

.payment-logo .container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    font-size: 0.9em;
    font-weight:450;
}

.payment-logo img {
    display: block;
    margin-right:auto;
    margin-left:auto;
    margin-bottom: 12px;
}
.payment-logo span {
	font-size: 0.8em;
}

/* Fix the big space around the Facebook svg
---------------------------------------------*/

.social-icons .svg-m[data-icon-name="facebook"] {
    width: 0.65em;
}


/* Set the image background of the homepage
----------------------------------*/

#top-section .home-image-bg {
    background-image: url('../../upload/site/main_bg.jpg');
    filter: contrast(100%) brightness(100%) saturate(130%);
    -display: table-cell;
    vertical-align: middle;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center center;
}


/*patterns design*/

#top-section .home-image-bg.patterns {
    background-size: initial !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important;
}

.white-logo {
		position:relative;
    opacity: 0.9;
    width: 300px;
    height: 464px;
    background-image: url('../../upload/site/logo_white.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    margin-bottom: 20px;
}

@media (max-width: 520px) {
    .white-logo {
        width: 200px;
        height: 310px;
        margin-top:-30px;
    }
}

/**
 * Parallax Handler - We edit the `parallax.js` file and added a `parallax-active`
 * class when it active (its not active in android, mobiles, etc). When the Parallax
 * is active we need to remove the parents backgrounds properties, in this way 
 * the background-color and opacity will works correctly.
 */

html.parallax-active #top-section.parallax-on,
html.parallax-active .home_background_wrapper.parallax-on,
html.parallax-active .s123-module-promo.parallax-on,
html.parallax-active .s123-module-promo .parallax-on,
html.parallax-active .s123-promo-module-v2.parallax-on,
html.parallax-active .s123-promo-module-v2 .parallax-on,
html.parallax-active .s123-widgets-module.parallax-on,
html.parallax-active .s123-widgets-module .parallax-on,
html.parallax-active .parallax-window {
    background: none !important;
}


/* Order System */

.orderPopupWin {
    z-index: 99999;
}

.orderPopupWin .modal-footer {
    display: none;
}

.website-languages-menu-link {
    cursor: pointer;
}


/* Homepage Image Goal
----------------------------------*/


/* old customers that are still working with ` max-height` flow */

#top-section .magic_homepage .home_custom_image {
    width: auto;
    height: auto;
    max-height: var(--home_custom_image_size);
    max-width: 100%;
}

#top-section .magic_homepage .home_custom_image.image_type_video {
    height: 100%;
    width: var(--home_custom_image_size);
}

@media (max-width: 767px) {
    #top-section .magic_homepage .home_custom_image {
        max-height: var(--home_custom_image_size);
    }
}


/* System Handlers
----------------------------------*/


/**
 * Responsive Tables- We wrap all the tables with a div and add
 * a class to it for converting them to be responsive.
 */

.s123-responsive-table {
    overflow-x: auto;
}


/* froala svg- icons color */

.fr-toolbar .fr-command.fr-btn .svg-m,
.fr-popup .fr-command.fr-btn .svg-m {
    background-color: #222222;
}


/**
 * Unbreakable Words Handler - Sometimes the users add very long words 
 * and we don't like the browser to add a scroll to the website because
 * of that. To fix it we allows unbreakable words to be broken.
 */

.breakable {
    word-wrap: break-word;
}


/* New Line Break - Active textarea enter key to create a new line. */

.s123-new-line-break {
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* Flex Center */

.s123-flex-center {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}


/* Columns Center - Used when we like the last row columns to be center */

@media(min-width:768px) {
    .s123-col-centered {
        display: inline-block;
        float: none;
        vertical-align: text-top;
    }
}


/* Image ratio design */

.s123-image-ratio-16-9 {
    padding-bottom: 56.25% !important;
}

.s123-image-ratio-3-2 {
    padding-bottom: 66.66667% !important;
}

.s123-image-ratio-4-3 {
    padding-bottom: 75% !important;
}

.s123-image-ratio-1-1 {
    padding-bottom: 100% !important;
}

.s123-image-ratio-9-16 {
    padding-bottom: 177.77778% !important;
}

.s123-image-ratio-2-3 {
    padding-bottom: 150% !important;
}

.s123-image-ratio-3-4 {
    padding-bottom: 133.33333% !important;
}

.localToolStyleNumber {
    position: absolute;
    top: 0;
    right: 0px;
    background: #fff;
    padding: 1px;
    font-size: 7px;
    color: black;
}

.actionButton {
    cursor: pointer;
}

.onlyContent123 .s123-content-area,
.onlyContent123 #s123ModulesContainer,
.onlyContent123 .s123-page-container {
    padding-top: 0 !important;
}

html.onlyContent123 body {
    background-color: #ffffff;
    background-image: none;
}

.onlyContent123 .body {
    width: 100%;
    border: 0;
}

.homepageRandomText,
.homepageRandomTextStop {
    opacity: 0;
}

.elementToFadeIn {
    -webkit-animation: fadein 0.5s linear forwards;
    animation: fadein 0.5s linear forwards;
    opacity: 0;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bg-primary .fr-view[dir="rtl"] blockquote {
    border-color: #252525 !important;
}

.bg-primary .fr-view[dir="rtl"] blockquote blockquote {
    border-color: #252525 !important;
}

.bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {
    border-color: #252525 !important;
}

.bg-primary .fr-view blockquote {
    border-color: #252525 !important;
    color: #252525 !important;
}

.fr-view[dir="rtl"] blockquote {
    border-color: #252525 !important;
}

.fr-view[dir="rtl"] blockquote blockquote {
    border-color: #252525 !important;
}

.fr-view[dir="rtl"] blockquote blockquote blockquote {
    border-color: #252525 !important;
}

.fr-view blockquote {
    border-color: #252525 !important;
    color: #252525 !important;
}

.inside_page .bg-primary .fr-view[dir="rtl"] blockquote {
    border-color: #252525 !important;
}

.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote {
    border-color: #252525 !important;
}

.inside_page .bg-primary .fr-view[dir="rtl"] blockquote blockquote blockquote {
    border-color: #252525 !important;
}

.inside_page .bg-primary .fr-view blockquote {
    border-color: #252525 !important;
    color: #252525 !important;
}

.fr-view hr {
    max-width: 100% !important;
    border-width: 1px !important;
}

.fr-view section {
    position: static;
    min-height: 0;
}


/* image gallery */

.mfp-image .g-i a {
    background-position: center center;
}

.mfp-title {
    display: inline-block;
    position: absolute;
    left: 30px;
    bottom: 30px;
    background-color: rgba(0, 0, 0, .5);
    padding: 6px;
    padding-left: 10px;
    padding-right: 10px;
    text-shadow: 1px 1px 3px #000;
}

@-webkit-keyframes mfpFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes mfpFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes mfpFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mfpFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.mfp-open .mfp-figure {
    -webkit-animation-name: mfpFadeIn;
    -moz-animation-name: mfpFadeIn;
    -o-animation-name: mfpFadeIn;
    animation-name: mfpFadeIn;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* homapage lake map */
.tpl-home #lake_select {
    height: 40px;
    border:none;
    border-radius: 0px;
    padding: 4px;
    margin-top: 0px;
    outline: none;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    font-weight:bold;
    font-size: 1.3em;
    color: gray;
    background-color: transparent;
    cursor:pointer;
}
.tpl-home .lake-map-img {
	width: 290px;
	height: auto;
	min-height: 220px;
	margin-left:auto;
	margin-right: auto;
	padding:20px;
	background-color: white;
	border: 1px solid #ebebeb !important;
}
.tpl-home .lake-map-container {
	min-height: 400px;
}
.tpl-home .lake-map-img img {
	width: 250px;
	height: auto;
}


/* Gift cards */

.gift-card {
	position:relative;
	width: 300px;
	height: 200px;
	background-image: url('../img/gift_card.png');
	background-size:100%;
	background-repeat:no-repeat;
	background-color: #fefeff;
	margin-left:20px;
	margin-right: 20px;
	margin-top:40px;
	padding-top:124px;
	padding-right:26px;
	text-align: right;
	font-size: 14px;
	text-decoration:none;
	cursor:pointer;
	border-radius: 14px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 2px 4px 25px rgb(25 25 33 / 25%);
}
.gift-card-amount small {
	font-weight: 600;
	font-size: 17px;
	display: inline-block;
	margin-top:10px;
	margin-bottom:5px;
}
.gift-card-amount big {
	font-weight: 600;
	font-size: 33px;
}
.gift-card-amount .expiry {
	font-weight: 400;
	font-size: 12px;
	margin-top:-3px;
}

.s123-module [data-item-is-hidden="1"] a {
    text-decoration: none;
    opacity: 0.7;
}

.s123-module [data-item-is-hidden="1"] .hidden-item-label {
    display: flex !important;
    position: absolute;
    top: 0px;
    font-size: 40px;
    height: 100%;
    width: 100%;
    align-content: center;
    align-items: center;
    justify-content: center;
}

_:-ms-fullscreen,
 :root .magic_homepage .home_main_wrapper .box_container .boxBorder {
    text-align: center;
}

_:-ms-fullscreen,
 :root .magic_homepage .play-home-video-btn #websitePopupHomeVideo {
    color: #ffffff;
    border-color: #ffffff;
}

_:-ms-fullscreen,
 :root .magic_homepage .play-home-video-btn #websitePopupHomeVideo:hover {
    color: #ffffff;
    border-color: #ffffff;
}

_:-ms-fullscreen,
 :root .magic_homepage .form_style_2 h3 {
    color: #ffffff !important;
}

_:-ms-fullscreen,
 :root .magic_homepage .form_style_2 p {
    color: #ffffff !important;
}

_:-ms-fullscreen,
 :root .magic_homepage .form_style_2 label {
    color: #ffffff !important;
}

@supports (-ms-ime-align:auto) {
    .magic_homepage .home_main_wrapper .box_container .boxBorder {
        text-align: center !important;
    }
    html[dir="rtl"] .magic_homepage .home_main_wrapper .box_container .boxBorder {
        text-align: center !important;
    }
}

.magic_homepage .promoButtons #home_buttonText,
.magic_homepage .promoButtons #home_buttonText_1 {
    max-width: 100%;
    margin-top: 30px;
}

html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText {
    margin-left: 60px !important;
}

html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText_1 {
    margin-left: 30px;
}

html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText {
    margin-right: 60px !important;
}

html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText_1 {
    margin-right: 30px;
}

@media (max-width:767px) {
    html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText,
    html[dir="ltr"] .magic_homepage .promoButtons #home_buttonText_1 {
        margin-right: 0px !important;
        margin-left: 30px !important;
    }
    html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText,
    html[dir="rtl"] .magic_homepage .promoButtons #home_buttonText_1 {
        margin-right: 30px !important;
        margin-left: 0px !important;
    }
}

#mainNav a[data-social-icon="whatsApp-icon"],
#mainNav a[data-social-icon="telegram-icon"] {
    padding: 0 3.79px !important;
}

#mainNav a[data-social-icon="skype-icon"] {
    padding: 0 3.59px !important;
}

@media(max-width:767px) {
    section.s123-module.h-s-f-hm {
        display: none !important;
    }
}

img.lz-opacity {
    transition: opacity 0.2s ease-in-out;
}

img.lz-opacity:not([src]) {
    opacity: 0;
}

img.lz-opacity.loaded {
    opacity: 1;
}

.s123-btn-loading {
    position: relative;
}

.s123-btn-loading .s123-btn-loading-text {
    visibility: hidden;
}

.s123-btn-loading i[data-icon-name="spinner"],
.s123-btn-loading i.fa-spinner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 17px;
}

.shadow1 {
    text-shadow: 1px 1px 3px #000;
}

.shadow2 {
    text-shadow: 5px 5px 3px #000;
}

.shadow3 {
    text-shadow: 3px 3px 3px #000;
}

.shadow4 {
    text-shadow: 5px 5px 0px #000;
}


/* preloader */
#preloader {
	position: fixed;
	width:100%;
	height:100%;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	background: #fff url('../img/loading.svg') center no-repeat;
	z-index: 2000000;
}


/* popup windows*/

html[dir="ltr"] .popupWinScroll {
    overflow: hidden;
    position: relative;
    height: 100%;
}

html[dir="rtl"] .popupWinScroll {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.popupWin {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: transparent;
    opacity: 1;
    z-index: 99000;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: -200vh;
    bottom: 0;
    overflow: auto;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    transition: top 0.7s;
    visibility: hidden;
}

_:-ms-fullscreen,
:root .popupWin {
    justify-content: inherit !important;
}

@supports (-ms-ime-align:auto) {
    .popupWin {
        top: -199vh;
    }
}

.popupWin.open {
    top: 0;
}

.popupWin .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #181818;
    opacity: 1;
    z-index: 1;
}

.popupWin .content {
    background-color: white;
    z-index: 99000;
    max-width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    border: 1px solid rgba(0, 0, 0, .2);
    padding: 0;
}

.popupWin.oneColor .content {
    background-color: transparent;
    border: 0;
}

.popupWin .content .popupHeader {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    min-height: 60px;
    padding: 0 5px;
}

_:-ms-fullscreen,
:root .popupWin .content .popupHeader {
    line-height: 60px;
}

.popupWin.oneColor .content .popupHeader {
    border-bottom: 1px solid transparent;
}

.popupWin .content .popupHeader.emptyHeader {
    border-bottom: 0;
    height: 1px;
    min-height: inherit;
}

.popupWin .content .popupHeader .title {
    order: 1;
    flex-basis: 90%;
    color: #333;
    font-size: 18px;
}

.popupWin.oneColor .content .title {
    color: white;
}

.popupWin .popupCloseButton {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    padding: 0;
    z-index: 99999;
    width: 32px;
    height: 32px;
    background: url('../img/icon_close_white.svg') center center no-repeat;
}

html[dir=rtl] .popupWin .popupCloseButton {
    right: auto;
    left: 20px;
}

@media(max-width:767px) {
    .popupWin .popupCloseButton {
        left: 15px;
        top: 15px;
    }
    html[dir=rtl] .popupWin .popupCloseButton {
        left: auto;
        right: 15px;
    }
}

.popupWin .content .page {
    padding: 15px 5px;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    text-align: center;
}

.popupWin.oneColor .content .page {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.popupWin .content .page>iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
}

#popupFloatDiv .navPagesPopup {
    order: 1;
    list-style-type: none;
    list-style: none;
    align-self: center;
    padding: 0;
    overflow: auto;
		overflow-x: hidden !important;
    width: 100%;
    padding-bottom: 30px;
}

#popupFloatDiv .navPagesPopup a {
    text-transform: capitalize;
    font-size: 20px !important;
    line-height: 1.6;
    color: white;
    border: 0;
    padding: 6px;
    display: block;
    text-align: center;
    text-align: var(--mobileMenuTextAlign);
    word-wrap: break-word;
}

#popupFloatDiv .moduleMenu.separate {
    padding: 6px;
    text-align: center;
    text-align: var(--mobileMenuTextAlign);
}

#popupFloatDiv .navPagesPopup li:last-child a {
    border: 0;
}

#popupFloatDiv .navPagesPopup li.active>a {
    background-color: transparent;
    color: #c3c3c3;
    color: var(--global_main_color);
}

#popupFloatDiv .navPagesPopup a:hover,
#popupFloatDiv .navPagesPopup a:focus {
    text-decoration: none;
    color: #c3c3c3;
    color: var(--global_main_color);
}

#popupFloatDiv .navPagesPopupActionButtons {
    order: 2;
    list-style: none;
    align-self: center;
    text-align: center;
    padding: 0;
    border-top: 1px solid var(--global_main_color);
    padding-top: 15px;
    padding-bottom: 50px;
}

#popupFloatDiv .navPagesPopupActionButtons_part1 {
    display: flex;
    justify-content: center;
}

#popupFloatDiv .navPagesPopupActionButtons_part1 a {
    margin: 0 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    background-color: #fff !important;
    color: #c3c3c3 !important;
    color: var(--global_main_color) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
}

.navPagesPopupActionButtons_part1 a {
    padding: 10px;
}

.mobile-menu-logo {
    width: 100px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    background: url('../../upload/site/logo_white.svg') top center no-repeat;
    background-size: 100px;
}