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

html,
body {
    font-size: 14px !important;
}
h1 {
    font-size: 1.602em;
}
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 {
      font-size: 2.441em;
    }
    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;
    }
}





/* 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;
    padding: 0.75rem 1.10rem;
    font-size: 1rem;
    border-color: #d4d7e5;
}
.form-control:focus {
    border-color: var(--global_main_color);
}
select.form-control:not([size]):not([multiple]) {
    font-size: 1rem;
    padding: 0.75rem 1.10rem;
}
.form-control.input-lg {
    font-size: 1.25rem;
    padding: .5rem 1rem;
    line-height: 1.5;
}
.btn {
    font-size: 1rem;
    line-height: 1.5;
}
.btn:not(.btn-link):not(.btn-sm):not(.btn-xl):not(.btn-xxl) {
    padding: 0.75rem 1.10rem;
}
.btn-lg {
    font-size: 1.25rem;
	padding: .5rem 1rem;
    line-height: 1.5;
}

/* 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;
}
.header-320 {
    font-size: 3.2em;
}
.header-360 {
    font-size: 3.6em;
}
:root { --global_main_color: ; --global_main_color_btn_text_color: #ffffff; --home_text_color: #ffffff; --home_third_background_color: #000000; --home_custom_image_size: px; --home_custom_image_width: px; --home_text_size_px: 65px; --home_text_size_2_px: 26px; --slogan_text_size_px: 52px; --home_text_size: 65; --home_text_size_2: 26; --slogan_text_size: 52; --home_text_size_px_media: 65px; --home_text_size_2_px_media: 26px; --slogan_text_size_px_media: 52px; --layout_text_align: center; --layout_text_align_rtl: center; --layout_text_box_width: 100%; --layout_left_side_width: 50%; --layout_left_side_width_vh: 50vh; --homepage_layout_height: %; --homepage_layout_height_vh: vh; --homepage_layout_height_menu_space: 0px; --mainNavMobileHeight: 0px; --homepage_layout_height_opacity_space_top: 0px; --homepage_layout_height_opacity_space_bottom: 0px; --mobileMenuFontSize: 20px; --mobileMenuPagesSpace: 0px; --homepageShapeDividerList_Size: %; --layout_bottom_spacing: 0px; --window-height: 100vh; --window-width: 100vw; --menu_font_size: 13px; --menu_pages_space: 1px; --menu_pages_side_padding: 15px; --menu_pages_letter_spacing: 0.5px; --menu_pages_word_spacing: 0px; --menu_thin_border: #ECECED; --mobileMenuTextAlign: center; --menu_text_color: ; --menu_text_hover_color: #000000; --menu_color: ; --modules_color_text: ; --modules_color_text_second: ; --inside_modules_color_text: ; --sectionsPadding: 100px; --home_text_top_space_1: 0px; --home_text_bottom_space_1: 10px; --home_text_top_space_2: 0px; --home_text_bottom_space_2: 10px; --home_text_top_space_3: 0px; --home_text_bottom_space_3: 20px; --homepage_padding_top: px; --homepage_padding_bottom: px; --homepage_main_goal_margin_top: 0px; --homepage_main_goal_margin_bottom: 0px; --homepage_second_goal_margin_top: 0px; --homepage_second_goal_margin_bottom: 0px; --modules_color_second: ; --modules_color: ; --footer_back: #222222; --footer_text_hover: ; --footer_links_color: ; --footer_text: #ffffff; --home_background_color: #222; --inside_modules_color_box: ; --inside_modules_color_text_box: ; --module_separate_border_color: ; --modules_color_box: ; --modules_color_second_box: ; --modules_color_text_second_box: ; --inside_modules_color: ; --modules_color_text_box: ; --font_logo: ; --font_menu: ; --global_font: ; --font_slogan: ; --font_slogan_2: ; --font_second_slogan: ; --font_modules_header: ; --sticky_menu: 1; --scrollHeaderSize: 0px; --modules_color_section_main: ; --modules_color_section_btn_text: #ffffff; --modules_color_second_section_main: ; --modules_color_second_section_btn_text: #ffffff; --inside_modules_color_section_box_main: ; --inside_modules_color_section_btn_text: #ffffff; --line_height_modules_header: 1.25; --global_line_height: 1.25;}
textarea {
    resize: none;
}

/* PC
----------------------------------*/
@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: #222;
        position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
/* The background color was not changed in the preview without reload, so we fix it by this line */
#parallax_home_opacity {
	background-color: #222 !important;
}

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

#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 ########################################## */

    :root {
        --global_main_color_rgba_07: rgba(0,0,0,0.7)    }

    #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: rgba(0,0,0,0.7);
        background-color: var(--global_main_color_rgba_07);
        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(0,0,0,0.7);
        background-color: var(--global_main_color_rgba_07);
        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='%23000000' /></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='%23000000' /></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;
		color: #ffffff;
                        line-height: 1.5;
                    margin-bottom: 10px;
    }
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
    .magic_homepage .boxBorder h1 {
                    }
}
/* 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: 10px;
    }
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
    .magic_homepage .boxBorder h2 {
                    }
}
/* 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(10 * (100vh / 768));
            }
}
.magic_homepage .boxBorder p {
    max-width: 100%;
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
		font-size: 52px;
	color: #ffffff;
                        line-height: 1.5;
                    margin-bottom: 20px;
    }
/* Small Devices, Wide Screens */
@media only screen and (max-width : 1169px) {
    .magic_homepage .boxBorder p {
                    }
}
/* 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(65 * (100vw / 1170) + 8px);
            font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
        }
        #top-section #home_siteSlogan_2 {
            font-size: calc(26 * (100vw / 1170) + 8px);
            font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
        }
        #top-section #home_SecondSiteSlogan {
            font-size: calc(52 * (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(65 * (100vw / 1170) + 8px);
            font-size: calc(var(--home_text_size) * (100vw / 1170) + 8px);
        }
        #top-section #home_siteSlogan_2 {
            font-size: calc(26 * (100vw / 1170) + 8px);
            font-size: calc(var(--home_text_size_2) * (100vw / 1170) + 8px);
        }
        #top-section #home_SecondSiteSlogan {
            font-size: calc(52 * (100vw / 1170) + 8px);
            font-size: calc(var(--slogan_text_size) * (100vw / 1170) + 8px);
        }
	}

	/* 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(65 * (100vw / 1170));
            font-size: calc(var(--home_text_size) * (100vw / 1170));
        }
        #top-section #home_siteSlogan_2 {
            font-size: calc(26 * (100vw / 1170));
            font-size: calc(var(--home_text_size_2) * (100vw / 1170));
        }
        #top-section #home_SecondSiteSlogan {
            font-size: calc(52 * (100vw / 1170));
            font-size: calc(var(--slogan_text_size) * (100vw / 1170));
        }
	}

	/* 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(65 * (100vw / 1170));
            font-size: calc(var(--home_text_size) * (100vw / 1170));
        }
        #top-section #home_siteSlogan_2 {
            font-size: calc(26 * (100vw / 1170));
            font-size: calc(var(--home_text_size_2) * (100vw / 1170));
        }
        #top-section #home_SecondSiteSlogan {
            font-size: calc(52 * (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: 65px;
            font-size: var(--home_text_size_px);
        }
        #top-section #home_siteSlogan_2 {
            font-size: 26px;
            font-size: var(--home_text_size_2_px);
        }
        #top-section #home_SecondSiteSlogan {
            font-size: 52px;
            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%;
}