:root {
	
  --module-bkg-color: rgba(0,0,0,.5); /* rgba(0,0,0,.5) */
}

.section{
	min-height: var( --with-30px ); 
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*
==================================================================================================================================================================
================================================================================================================================================================== PAGE
==================================================================================================================================================================
*/
/*
.fb-like{
	height:60px;
	border:solid 2px red
}
*/
@media (min-width: 992px) {
	/*
	body.single{
		background:#325CD9
	}
	
	body.single:before {
		content:'';
		display:block;
		width:100%;
		height:200px;
		position:absolute;
		left:0;
		top:0;
		z-index:-1;
		background: #19191c;
		 
	}
	*/
	
	#page.taxonomy-faq-category #site_bar{
		padding-top:20px 
		
	}
	
} 

#page.page{ 
	display:block; 
	padding-bottom: var( --with-60px )
}

#page.page div,
#page.page p{
	font-size: var( --with-16px );
	font-weight:300
	/*font-size: 1.1em;*/
}

#page.page .well.lead,
#page.page .well.lead p{
	font-size:110%
}
/*
.well{
	padding: var( --with-15px );
	margin: var( --with-15px ) 0;
	border: solid var( --with-1px ) var( --module-bkg-color );
	background:var( --module-bkg-color );
	border-radius: var( --with-15px );
	box-shadow:0 var( --with-15px ) 20px rgba(0,0,0,.25)
}*/

/* ================= PAGE ======================== */
/* 
li.faq-section-list-item.ex:hover{
	background:var( --dark-color )  
}
*/

#page.page .faq-content .the_content .well p{
	max-width:100%
}

#page.page .faq-content .the_content .well:first-child{
	min-height:300px 
	
}

/* ================= breadcrumb ======================== */
.breadcrumb.ins{
	margin-bottom: 30px
}

.breadcrumb.top{
	/*background-color: var( --dark-color )*/  /* var( --module-bkg-color ) */ ;
	/*padding:15px 0;*/
	padding:6px 0;
	margin: 15px 0 0 0;
	/*margin:80px 0 0 0*/
}

.breadcrumb a,
.breadcrumb b, 
.breadcrumb span{
	font-size:14px;
	color:#fff;
	font-weight:300;
	display:inline-block;
	margin-right:5px;
	float:left 
}

.breadcrumb b:last-of-type {
	display:none
}

.breadcrumb a:hover{
	text-decoration:none;
	color: var( --second-color )
}

/* =================/breadcrumb // content // ======================== */
/*
.faq-content{ 
	margin-top:30px
}
*/

.faq-title,
.page-title {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5
}

.page-title { 
	margin:0 0 20px 0
}

@media (min-width: 820px) {
 .faq-title,
 .page-title {
    font-size: 36px
  }
}


/* =================================================================== */

.social_inner{
	float:right 
}  
.social_inner ul,
.social_inner ul li{
	list-style:none;
	margin:0;
	padding:0
} 
.social_inner ul{
	white-space: nowrap;
	text-align: center;
}

.social_inner ul li{
	display:inline-block;
	width:  var(--h3_fond_size);
	height: var(--h3_fond_size);
	margin: 0 0.36364em;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0);
	transition: border-color .2s ease-in-out;
}

.social_inner ul li a{
	color: var(--Body_text_color);
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center; 
	cursor:pointer
 
}

.social_inner .social_list .social_item .social_link svg{
	width: var(--small_text_size) !important;
	height: var(--small_text_size) !important;
}


.social_inner ul li a > svg{
	fill: #fff
}

.social_inner ul li a:hover > svg{
	fill: var( --second-color )
}
 

/* ===================================================================== */

#page.page .faq-content .the_content .ex{
	padding-bottom:30px
}

#page.page .faq-content .the_content p{
	font-size: 1.7rem 
}

/* ================= site_bar ======================== */
#site_bar .mod{
	padding-top:0;
	margin-bottom:40px
}

#site_bar .mod h3{
	font-size: 20px;
	/*margin-top:0;*/
	padding-top:0
}

#site_bar .mod h3,
#site_bar .mod h4{
	font-weight: 300;
}

#site_bar .ex{
	border-bottom:solid 1px rgba(255,255,255,.15);
	margin: 0 0 25px 0;
	padding:0 0 25px 0;
}

#site_bar .ex:last-of-type {
	border:none;
	margin:0;
	padding-bottom:15px
}

#site_bar a{
	color:#fff;
}

#site_bar .ex p{
	font-size:14px;
}

.read_more{ 
	text-decoration:none
}

.read_more:hover > i{
	margin-left:10px
}

#site_bar ul,
#site_bar ul li{
	margin:0;
	padding:0;
	list-style:none
}

#site_bar ul li{
	border-bottom:solid 1px var( --border-bottom-white );
	margin: 5px 0;
	padding:5px 0
}

#site_bar ul li:last-of-type {
	border:none
}

#site_bar ul li > a{
	display:block
}

#site_bar ul li > a:hover{
	color: var( --second-color )
}

#site_bar ul li a > i{
	float:right
}

#site_bar a:hover{
	text-decoration:none
}

/* ================= ins ======================== */
#page.page .faq-content .the_content .well.ex{ 
	min-height: 600px
}
#page.page .the_content .well.ex{
	padding:40px 
}

#page.page .the_content .well.ex .date{
	font-size:14px;
	margin:0;
	padding:0
}

/* ================= breadcrumb ======================== */

body.support-body #page.page.single-faq .the_content .well.ex .date{
	display:block;
	margin-bottom:30px 
}


/* ================= faq_feedback ======================== */
.faq_feedback{
	margin-top: 50px;
	padding-top:40px;
	border-top:solid 1px rgba(255,255,255,.15)
}
 
.faq_feedback_input__buttons {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	margin: 0px 20px;
}

.hc-button {
	color:#fff;
	height: 40px;
	min-width: 40px;
	padding: 0px 14px;
	font-size: 14px;
	border-radius: 4px;
	border:solid 1px #fff
}

.hc-button span{
	display:inline-block;
	margin-left:4px
}

.hc-button:hover,
.hc-button.disabled{ 
	text-decoration:none;
	background-color: rgba(255,255,255,.25)
}

#page h2.title-h2{
	margin: var( --with-40px ) 0; 
	border-left: var( --with-5px ) solid #fff;
	padding-left: var( --with-15px )
}

/* ================= post-navigation ======================== */

.nav.sticky{
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
}

nav.navigation.post-navigation{ 
	background-color: var( --dark-color ); 
	border: solid var( --with-1px ) var( --module-bkg-color ); 
	overflow:hidden
}

nav.navigation.post-navigation h2.screen-reader-text{
	display:none
}

nav.navigation.post-navigation .nav-links div > a{
	display:flex;
	align-items: center
}

#the_post_navigation nav.navigation.post-navigation .nav-links div{
	width:50%;
	height:60px
}

nav.navigation.post-navigation .nav-links a{
	color:#fff; 
	height:100%;
	position:relative;
	-webkit-transition: all 0.3s ease-out;
	   -moz-transition: all 0.3s ease-out;
	    -ms-transition: all 0.3s ease-out;
	     -o-transition: all 0.3s ease-out;
	        transition: all 0.3s ease-out;
}

#the_post_navigation nav.navigation.post-navigation .nav-links a{
	width:100%;
}

nav.navigation.post-navigation a > span.arrow{
	width:50px;
	height:100%;
	position:absolute;
	top:0 
}

nav.navigation.post-navigation a > span.ttl{ 
	width:100% 
}

nav.navigation.post-navigation .nav-links div.nav-previous a,
nav.navigation.post-navigation .pagination a.prev{
	padding:0 15px 0 40px 
}

nav.navigation.post-navigation .nav-links div.nav-next a,
nav.navigation.post-navigation .pagination a.next{
	padding:0 40px 0 15px 
}

nav.navigation.post-navigation .nav-links div.nav-previous a span.arrow,
nav.navigation.post-navigation .pagination a.prev span.arrow{ 
	left:0;
}

nav.navigation.post-navigation .nav-links div.nav-next span.arrow,
nav.navigation.post-navigation .pagination a.next span.arrow{
	right:0;
} 

nav.navigation.post-navigation .nav-links .nav-next a span.ttl,
nav.navigation.post-navigation .nav-links.pagination .nav-links a.next.page-numbers span.ttl
{
	display: flex;
 	justify-content: flex-end;
}

nav.navigation.post-navigation .nav-links:after{
	display:table;
	content:'';
	clear:both
}

nav.navigation.post-navigation .nav-previous{
	float:left;
	border-right: solid var( --with-1px ) var( --module-bkg-color );
}

nav.navigation.post-navigation .nav-next{
	float: right
}

/* ============ hover =============== */
 
nav.navigation.post-navigation .nav-links div a:hover > span.arrow,
nav.navigation.post-navigation .pagination a.hover > span.arrow{
	background-color: var( --second-color );
	color:var( --dark-color )
}

nav.navigation.post-navigation .nav-links div.nav-previous a:hover,
nav.navigation.post-navigation .pagination a.prev:hover{
	padding-left:60px 
}


nav.navigation.post-navigation .nav-links div.nav-next a:hover,
nav.navigation.post-navigation .pagination a.next:hover{
	padding-right:60px 
}
 
/* ================= pagination ======================== */

.pagination{
	position:relative;
	padding:0 130px;
	width:100%
}

nav.navigation.post-navigation .nav-links.pagination .nav-links div.pagination-wrap{
	display: flex;
	justify-content: center; 
	height:60px;
	margin:auto 
}

nav.navigation.post-navigation .nav-links.pagination .nav-links .pagination-wrap .page-numbers{
	display: flex;
	align-items: center;
	justify-content: center;
	width:50px;
	overflow:hidden
}

nav.navigation.post-navigation .nav-links.pagination .nav-links .pagination-wrap .page-numbers:hover,
nav.navigation.post-navigation .nav-links.pagination .nav-links .pagination-wrap .page-numbers.current{
	background-color: var( --second-color );
	color:var( --dark-color )
}

.navigation.post-navigation .nav-links.pagination a.prev,
.navigation.post-navigation .nav-links.pagination a.next{
	position:absolute;
	top:0; 
	max-width:130px;
	margin:0
}

.navigation.post-navigation .nav-links.pagination a.prev{
	left:0
}
.navigation.post-navigation .nav-links.pagination a.next{
	right:0
}

#page.page .faq-content{
	min-height: calc( 100vh - var( --with-90px ) )
}

/* ================= search-form ======================== */

.search-form > button.search-submit,
.search-form > button.search-field,
.search-form > input.form-control {
	background:none;
	border:none !important;
	outline:none !important;
	box-shadow:none !important
}

.search-form button:focus, 
.search-form input:focus{
    outline: none;
}
	

.search-form{
	width: 100%;
	padding:0 0 0 50px;
	margin:0;
	position:relative 
}

.search-form .form-group{
	margin:0 
}

.search-form .search-field{
 	background: inherit;
	
	font-size: 17px;
	color: var(--white-color);
	text-overflow: ellipsis;
	
	display:block;
	width: 100%;
	height:      50px;
	line-height: 50px;
	padding:0 15px;
	margin:0;
	
	overflow: hidden;
 	
	float:left;
	outline:none;
	border:none !important;
	border-radius:0 
}

.search-form .search-submit{
	background:inherit;
	font-size:24px;
	
	width:  50px;
	height: 50px;
	padding:0;
	margin:0;
	position:absolute;
	left:0;
	top:0; 
}

@media screen and (min-width: 820px) {
	.search-form .search-field {
		font-size: 24px;
	}
}

/*
==================================================================================================================================================================
================================================================================================================================================================== HOME
==================================================================================================================================================================
*/

#page .iframe-cnt{
	width:100%;
	position:relative 
}
	
#page .iframe-cnt iframe{
	display:block;
	width:100%;
	/*max-width:  1001px  ;*/
	max-width: calc( calc( var( --with-100px ) * 10 ) + var( --with-1px ) )  ;
	/*min-height: calc( 100% * 0.5624375624375624 );*/ /* == 563 / 1001 == ratio == */
	/*height:563px;*/
	margin:auto;
	overflow:hidden;
	border:none;
	margin: var( --with-30px ) auto 0 auto;
	aspect-ratio: 1.5 /*1.77797513321492*/ /*  16 / 9  */
}

#page,
#page .iframe-cnt, 
#page .iframe-cnt iframe#gmfr{
	background: transparent !important
}

#page .iframe-cnt .btn{
	position:absolute;
	bottom: 0;
	left:50%;
	transform:translate(-50%, -60%)
}

.btn-h-i{
	width:100%;
	/*max-width:1001px;*/
	max-width: calc( calc( var( --with-100px ) * 10 ) + var( --with-1px ) )  ;
	margin:auto; 
	/*margin-bottom: var( --with-30px );*/
	padding: var( --with-10px ) 0
	
}

#page .iframe-cnt .btn-h-i.clearfix{ 
	text-align:right
}

.onoffswitch:before{
	content:'Full Screen Mode';
	font-size: var( --with-14px );
	width: var( --with-120px );
	text-align:right;
	display:block;
	position:absolute;
	left: calc( var( --with-120px ) * -1 );
	top:50%;
	transform:translateY(-50%);
	padding-right: var( --with-10px );
	margin-top: calc( var( --with-3px ) * -1 )
}


@media (max-width:768px) {
	
	body.home #page.section.cleahWheight.home{ 
		display:block
	}
	
	.m-clean{
		padding:0
	}
	
	#page .iframe-cnt .btn.border-gradient{
		width:100%;
		max-width: var( --with-260px );
		transform:translate(-50%, 50%)
	}
	
	#page .iframe-cnt .btn-h-i.clearfix{
		margin: var( --with-50px ) 0 0 0;
		padding-right: var( --with-15px );
  		padding-left:  var( --with-15px )
	}
	
	#page .iframe-cnt .btn-h-i.clearfix{ 
		text-align: center
	}
	
	.onoffswitch{
		margin-top: var( --with-15px )
	}
	
	.onoffswitch:before{
		top: calc( var( --with-15px ) * -1 );
		left:50%;
		transform:translate( -50%, calc( var( --with-7px ) * -1 ) )
	}
	
	/*#page .iframe-cnt .btn-h-i.clearfix div.onoffswitch{
		float:none;
		margin:auto
	}*/
}
 


/*
==================================================================================================================================================================
================================================================================================================================================================== MISK
==================================================================================================================================================================
*/
 
@media (min-width: 1220px) {
	
	 .section{
		min-height: calc( 100vh - var( --header-height ) - 115px )
	 }
	
}

/*
==================================================================================================================================================================
================================================================================================================================================================== Coming soon
==================================================================================================================================================================
*/

body.pop_up{
	overflow:hidden
}

body.pop_up .content-wrapper,
body.pop_up header,
body.pop_up footer{ 
	filter: blur(5px);
	opacity:.6
}

html body #alert_wrap{
	opacity:0;
	visibility:hidden;
	transform:scale(0,0);
	
	position:fixed;
	left:0;
	top:-100%;
	z-index:9999;
	
	width:100%;
	height:100vh;
	background:rgba(0,0,0,.0)
	
}

body.pop_up #alert_wrap{  
	top:0;
	z-index:9999;
	 
	opacity:1;
	visibility: visible;
	transform:scale(1,1);
}

#alert_wrap .alert_cnt_wrap{
	width:100%; 
	
	padding: var( --with-15px ) var( --with-20px );
	border-radius: var( --with-20px );
	position:relative
}

body.pop_up.body_alert #alert_wrap .alert_cnt_wrap{
	text-align:center; 
	background:red; 
	max-width: calc( var( --with-150px ) * 2 ); 
}

body.pop_up.page_popup #alert_wrap .alert_cnt_wrap{
	background: var( --dark-color );
	padding: var( --with-30px )  var( --with-20px ) 
}

@media ( min-width: 768px ) {
	
			
	#page .iframe-cnt iframe{ 
		aspect-ratio: 1.77797513321492 /*1.77797513321492*/ /*  16 / 9  */
	}
	
	body.pop_up.page_popup #alert_wrap .alert_cnt_wrap{
		max-width: 80%;
	}
}

#alert_wrap .alert_cnt_wrap .alert_cnt{ 
	color:#fff;
	font-size: var( --with-18px )
}


body.pop_up.body_alert #alert_wrap .alert_cnt_wrap .alert_cnt h4{
	font-size: var( --with-33px );
	font-weight:900;
	text-transform: uppercase; 
}

#alert_wrap .alert_cnt_wrap .alert_cnt{
	width:100%;
	max-height: calc( 100vh - 120px );
	overflow:auto
}


/* ================== close ====================== */

.gg-close {
    box-sizing: border-box;
    position: absolute;
	left: calc( 100% - var( --with-40px ) );
	top: calc( var( --with-11px ) * -1 );
    display: block;
    transform: scale(1.4);
    width:  var( --with-22px );
    height: var( --with-22px );
    border: var( --with-2px ) solid transparent;
   /* border-radius: 40px;*/
   -webkit-border-radius: var( --with-40px ); /*var( --with-40px ) 0 0;*/
	border-radius:        var( --with-40px ); /*var( --with-40px ) 0 0;*/
	background: red;
	transform-origin: center;
}

.gg-close::after,
.gg-close::before {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width:  var( --with-16px );
    height: var( --with-2px );
    background: #fff;
    transform: rotate(45deg);
    border-radius: var( --with-5px );
    top:  var( --with-8px );
    left: var( --with-1px ); 
	
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.gg-close::after {
    transform: rotate(-45deg)
}


.gg-close:hover{
	transform: scale(1.5)
}

.gg-close:hover::before{
	transform: rotate( 225deg );
}

.gg-close:hover::after{
	transform: rotate( -225deg );
}

/*
==================================================================================================================================================================
================================================================================================================================================================== login PAGE temp
==================================================================================================================================================================
*/

#login-page-temp{
	min-height:100vh 
}

#login-page-temp .the_content{
	max-width:320px;
	margin:auto 
}


/*
==================================================================================================================================================================
================================================================================================================================================================== PAGE
==================================================================================================================================================================
*/


#site-content{ 
	min-height:50vh
}

.real-page h2{
	font-size:4.2rem
}

.real-page h3{
	font-size:var( --with-28px );
	margin-top:var( --with-35px );
	font-weight:600 
}

.real-page h4{
	font-size:var( --with-22px );
	margin-top:var( --with-35px );
	font-weight:600;
	text-transform:uppercase
}

.real-page .title{
	text-transform:uppercase
}

#page.page .the_content p a{
	color:#fff;
	text-decoration:underline
}

.error404-content{ 
	padding:60px 0
}

.real-page,
.real-page p,
html body #page.page .the_content .real-page,
html body #page.page .the_content .real-page p{
	font-size: var( --with-18px );
	font-weight:300
}

html body #page.page .the_content .real-page p{
  margin: 0 0 var( --with-18px ) 0;
}