/*
*		    ________      .___   
*	__  _  _\_____  \   __| _/
*	\ \/ \/ / _(__  <  / __ |
*	 \     / /       \/ /_/ |
*	  \/\_/ /______  /\____ |
*	               \/      \/
*
*	@author			Jacques Baars <j@w3d.co.za>
*
*	@notice			This is the property of W3Designs, W3Development, W3D,
*					it is illegal to use this source code without the required permission,
*					contact j@w3d.co.za for further advice or permissions.
*
*	@license		Copyright (c) 2016 W3Designs (PTY) Ltd. (http://www.w3d.co.za)
*
*	@source			core.css
*	
*	@conception		<04 September 2021>
*	@updated		<24 February 2023>
*	@version		<3.02.24>
*/

/*------------- Icon Picker -------------*/

.icon-picker{
	position: relative;
}

	.icon-picker .icon{
		width: 39px;
		text-align: center;
		padding: 10px 0 11px;
		font-size: 16px !important;
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);
		border-right: none;
	}

	.icon-picker select{
		width: calc(100% - 40px) !important;
	}

/*------------- Color Picker -------------*/

.color-picker{
	position: relative;
}

	.color-picker input[type=color]{
		top: 1px;
		left: 1px;
		padding: 0;
		width: 37px;
		height: 37px;
		border: none;
		position: absolute;
		-webkit-appearance: none;
		border-right: 1px solid var(--softBorderColor);
	}
	
		.color-picker input[type=color]::-webkit-color-swatch-wrapper{
			padding: 0;
		}
		
		.color-picker input[type=color]::-webkit-color-swatch{
			border: none;
		}

	.color-picker .value{
		padding: 10px;
		padding-left: 50px;
		color: var(--mediColor);
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);
		
		font-size: 16px !important;
		font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
		
		-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	}

		.color-picker .value:hover{
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}

/*------------- Range Slider -------------*/

.range-slider{
	width: 100%;
}

	.range-slider .value{
		width: 100%;
		padding-top: 5px;
		text-align: right;
		font-size: var(--fontSize90);
	}

	.range-slider input{
		width: 100%;
	}

/*------------- Checkbox -------------*/

.checkbox{
	display: block;
	cursor: pointer;
	position: relative;
	padding-left: 24px;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.checkbox input{
		width: 0;
		height: 0;
		opacity: 0;
		cursor: pointer;
		position: absolute;
	}

	.checkbox .checkmark{
		top: 0;
		left: 0;
		width: 16px;
		height: 16px;
		position: absolute;
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);
	}

		.checkbox:hover input ~ .checkmark{
			background-color: var(--softBgColor);
		}

		.checkbox input:checked ~ .checkmark{
			border-color: var(--bgColor);
			background-color: var(--bgColor);
		}

		.checkbox .checkmark:after{
			content: '';
			display: none;
			position: absolute;
		}

			.checkbox input:checked ~ .checkmark:after{
				display: block;
			}

			.checkbox .checkmark:after{
				top: 1px;
				left: 5px;
				width: 4px;
				height: 9px;
				border: solid white;
				border-width: 0 2px 2px 0;
				
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}

/*------------- Radio -------------*/

.radio{
	display: block;
	cursor: pointer;
	position: relative;
	padding-left: 24px;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

	.radio input{
		width: 0;
		height: 0;
		opacity: 0;
		cursor: pointer;
		position: absolute;
	}

	.radio .checkmark{
		top: 0;
		left: 0;
		width: 16px;
		height: 16px;
		position: absolute;
		background-color: var(--softBgColor);
		border: 1px solid var(--softBorderColor);

		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-m-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
	}

	.radio.dark-mode .checkmark{
		background-color: var(--darkModeBgColor);
		border: 1px solid var(--darkModeBorderColor);
	}

	.radio:hover input ~ .checkmark{
		background-color: var(--softBgColor);
	}

	.radio.dark-mode:hover input ~ .checkmark{
		background-color: var(--darkModeHoverBgColor);
	}

	.radio input:checked ~ .checkmark{
		background-color: var(--bgColor);
	}

		.radio .checkmark:after{
			content: "";
			display: none;
			position: absolute;
		}

			.radio input:checked ~ .checkmark:after{
				display: block;
			}

			.radio .checkmark:after{
				top: 4px;
				left: 4px;
				width: 8px;
				height: 8px;
				background-color: #fff;

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-m-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
			}

/*------------- Search Bar and Btn -------------*/

.search-bar-btn{
	cursor: pointer;
	display: inline-block;
}

.search-bar{
	float: right;
}

	.search-bar .container{
		position: relative;
	}

		.search-bar .container .options-btn{
			float: left;
			position: relative;
			margin-right: -1px;
			font-size: var(--fontSize90);
		}

			.search-bar .container .options-btn .label{
				height: 41px;
				cursor: pointer;
				padding: 0 15px;
				line-height: 41px;
				text-align: center;
				color: var(--btnColor);
				background: var(--btnBgColor);
			}

				.search-bar .container .options-btn .label .icon{
					float: left;
				}

				.search-bar .container .options-btn .label .text{
					float: left;
					margin-left: 5px;
				}

			.search-bar .container .options-btn .options{
				width: 125px;
				display: none;
				z-index: 10000;
				padding: 5px 0;
				margin-top: -1px;
				position: absolute;
				background-color: var(--optionsBgColor);
			}

				.search-bar .container .options-btn .options .option{
					padding: 8px 0;
					cursor: pointer;
					text-align: center;
				}

				.search-bar .container .options-btn .options .option:hover{
					background-color: var(--optionsHoverBgColor);
				}

		.search-bar .container input{
			float: left;
			width: 200px;
			padding: 10px;
			color: var(--mediColor);
			border: 1px solid var(--softBorderColor);
			
			-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
			-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
			box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
		}

		.search-bar.no-options .container input{
			width: 300px;
		}

		.search-bar .container .search-btn{
			float: left;
			height: 41px;
			padding: 0 10px;
			cursor: pointer;
			line-height: 41px;
			text-align: center;
			margin-left: -1px;
		}

.mobile-search-btn{
	top: 0;
	right: 49px;
	padding: 16px;
	cursor: pointer;
	position: absolute;
}

.core-mobile-overlay-widget{}

.core-mobile-overlay-widget.dark-mode{
	background-color: var(--darkModeContainerBgColor);
}

	.core-mobile-overlay-widget .search-bar{
		float: none;
		padding: 20px;
		width: calc(100% - 40px);
	}

		.core-mobile-overlay-widget .search-bar .container .options-btn .label{
			color: #000;
			background-color: transparent;
		}

@media screen and (min-width: 600px){
	.search-bar .container .search-btn{
		float: left;
		height: 41px;
		padding: 0 10px;
		cursor: pointer;
		line-height: 41px;
		text-align: center;
		margin-left: -1px;
		
		-webkit-border-top-left-radius: 0;
		-moz-border-top-left-radius: 0;
		-m-border-top-left-radius: 0;
		-o-border-top-left-radius: 0;
		border-top-left-radius: 0;
		
		-webkit-border-bottom-left-radius: 0;
		-moz-border-bottom-left-radius: 0;
		-m-border-bottom-left-radius: 0;
		-o-border-bottom-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

@media screen and (max-width: 600px){
	.search-bar-btn{
		display: none;
	}
	
	.search-bar{
		float: none;
		width: 100%;
	}
	
		.search-bar .container .options-btn{
			margin: 0;
			float: none;
			margin: 0 0 5px 0;
		}
		
		.search-bar .container input,
		.search-bar.no-options .container input{
			float: none;
			width: 100%;
		}

		.search-bar .container .search-btn{
			margin: 0;
			float: none;
			display: block;
			margin: 5px 0 0 0;
			text-align: center;
		}

			.search-bar .container .search-btn:after{
				content: "Search";
			}
}
	
/*------------- Read More -------------*/

.read-more{
	padding: 3px 0;
}
	
	.read-more a{
		cursor: pointer;
		color: var(--softColor);
	}
	
	.read-more a.open{
		text-decoration: underline;
	}
	
	.read-more .data{
		padding: 3px 0 0;
	}
	
/*------------- Video -------------*/

.video{}

	.video iframe{
		width: 100%;
	}

/*------------- Social Network Icons -------------*/

.social-network-icons{
	display: inline-block;
}

	.social-network-icons .network{
		display: inline-block;
	}

	.social-network-icons .network:not(:first-child){
		margin-left: 5px;
	}
	
		.social-network-icons .network img{
			width: 40px;
		}

/* 1380px */		
@media screen and (max-width: 1380px){
	.social-network-icons .network img{
		width: 32px;
	}
}

/*------------- User Left Menu -------------*/

.user-left-menu{
	padding: 20px;
	margin-bottom: 30px;
	background-color: #fff;
}

.user-left-menu.dark-mode{
	background-color: var(--darkModeContainerBgColor);
}

	.user-left-menu .title{
		color: #222;
		padding: 10px;
		margin: 0 0 10px;
		font-weight: bold;
		font-size: var(--fontSize90);
		border-bottom: 1px solid var(--softBorderColor);
	}

	.user-left-menu.dark-mode .title{
		color: var(--darkModeColor);
		border-bottom: 1px solid var(--darkModeBorderColor);
	}

	.user-left-menu .title:first-child{
		padding: 0 10px 10px;
	}
	
	.user-left-menu .data{}
	
		.user-left-menu .data .row{}
	
		.user-left-menu .data .row.active{
			font-weight: bold;
		}
		
			.user-left-menu .data .row:hover{	
				cursor: pointer;
				background-color: var(--bgColor);
			}
		
				.user-left-menu .data .row:hover a{
					color: #fff;
				}
	
			.user-left-menu .data .row .icon{
				float: left;
				width: 20px;
				padding: 5px;
			}

				.user-left-menu .data .row .icon img{
					width: 100%;
				}
		
			.user-left-menu .data .row .label{
				float: left;
				padding: 7px 0 2px 5px;
				font-size: var(--fontSize90);
			}
	
@media screen and (max-width: 1380px){
	.user-left-menu{
		margin-bottom: 20px;
	}
}

/*------------- Gateways -------------*/

.gateway{
	padding: 20px 0;
}

	.gateway .sub{
		padding: 0 0 20px;
		text-align: center;
	}

	.gateway .btn{
		width: 100%;
		padding: 10px 0;
		text-align: center;
	}

	.gateway.paypal > div{
		margin: 0 auto;
		max-width: 750px;
	}

/*------------- Marquee -------------*/

.marquee{
	overflow: hidden;
}

	.marquee .wrapper{}
	
		.marquee .wrapper .section{
			display: inline-block;
		}

			.marquee .wrapper .section .container{
				display: inline-block;
			}

				.marquee .wrapper .section .container img{
					height: 100%;
				}

/*------------- FX Rates -------------*/

.fx-rates{
	padding: 2px 0;
	font-style: italic;
}
	
	.fx-rates .marquee{
		height: 19px;
	}

		.fx-rates .marquee .container{
			padding: 0 10px;
		}

	.fx-rates table{
		border: 0;
		width: 100%;
	}

		.fx-rates table tr td{
			padding: 5px;
		}

	.fx-rates .name{}

	.fx-rates .rate{
		color: red;
	}

	.fx-rates .ask{
		color: green;
	}

	.fx-rates .bid{
		color: yellow;
	}

/*------------- Contact Box -------------*/

.contact-box{}

	.contact-box > .image{
		width: 100%;
	}

		.contact-box > .image img{
			width: 100%;
		}

	.contact-box > .label{
		color: #fff;
		margin: 8px auto;
		text-align: center;
		background-color: var(--bgColor);
	}

		.contact-box > .label a{
			color: #fff;
			padding: 10px 0;
			display: block;
		}

		.contact-box > .label:nth-child(2){
			background-color: #222;
		}
		
		.contact-box > .label:hover:not(:nth-child(2)){
			background-color: var(--bgColor2);
		}

/*------------- Team Members -------------*/

.team-members{}

	.team-members .team-member{}
	
	.team-members .team-member.image-top{
		text-align: center;
	}

		.team-members .team-member .team-member-image{
			-webkit-transition: transform 1s ease;
			-moz-transition: transform 1s ease;
			-ms-transition: transform 1s ease;
			-o-transition: transform 1s ease;
			transition: transform 1s ease;
		}

		.team-members .team-member.image-top .team-member-image{
			width: 60%;
			margin: 0 auto;
		}

			.team-members .team-member .team-member-image:hover{
				-webkit-transform: scale(1.2);
				-moz-transform: scale(1.2);
				-ms-transform: scale(1.2);
				-o-transform: scale(1.2);
				transform: scale(1.2);
			}

		.team-members .team-member .team-member-info.has-image{
			margin: 0 0 0 10px;
		}

		.team-members .team-member.image-top .team-member-info.has-image{
			margin: 20px 0 0 0;
		}

			.team-members .team-member .team-member-info span{
				margin: 5px 0;
				display: block;
			}
		
	
@media screen and (max-width: 600px){
	.team-members .team-member{
		margin-top: 50px;
	}

		.team-members .team-member .team-member-image{
			width: 70%;
			margin: 0 auto 30px;
		}

		.team-members .team-member .team-member-info{
			text-align: center;
		}
}

/*------------- Tick List -------------*/

.tick-list{}

	.tick-list .row{
		position: relative;
		padding: 5px 0;
	}

		.tick-list .row span{}

			.tick-list .row span:before{
				color: #fff;
				padding: 3px;
				margin: 0 6px 0 0;
				background-color: #377EB6;
				
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
			}

		.tick-list .row .sub{
			margin: 5px 0 0 20px;
		}

/*------------- Open Weather -------------*/

.open-weather{}

	.open-weather .location{
		padding: 20px;
		text-align: center;
	}
	
		.open-weather .location .city{
			font-size: var(--fontSize120);
		}

		.open-weather .location .summary{
			font-size: var(--fontSize300);
		}

			.open-weather .location .summary img{
				width: 80px;
				margin: 0 auto;
			}

		.open-weather .location .currently{
			padding: 3px 0;
			font-size: var(--fontSize120);
		}

		.open-weather .location .highLow{
			padding: 3px 0;
			font-size: var(--fontSize90);
		}

		.open-weather .location .wind{
			padding: 3px 0;
			font-size: var(--fontSize90);
		}

/*------------- Load Circle -------------*/

.load-circles{}

	.load-circles .circle{
		text-align: center;
	}

		.load-circles .circle .element{
			position: relative;
		}

			.load-circles .circle .element .container{
				position: absolute;
			}

		.load-circles .circle .label,
		.load-circles .circle .description{
			margin: 10px 0;
		}

/*------------- Carousel -------------*/

.carousel{}

	.carousel .content{
		transform-style: preserve-3d;
	}

		.carousel .content .container{
			top: 0;
			opacity: 0;
			width: 100%;
			margin: auto;
			padding: 0 58px;
			position: absolute;
			transition: transform .5s, opacity .5s;
		}

			.carousel .content .container.active{
				opacity: 1;
				position: relative;
			}
			
			.carousel .content .container.prev{
				transform: translateX(-100%);
			}
			
			.carousel .content .container.next{
				transform: translateX(100%);
			}

		.carousel .content .prev-btn,
		.carousel .content .next-btn{
			top: 50%;
			width: 48px;
			height: 48px;
			cursor: pointer; 
			position: absolute;
			background-color: #fff;
			border: 1px solid #888;
			transform: translateY(-50%);
			
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms-border-radius: 50%;
			-o-border-radius: 50%;
			border-radius: 50%;
		}

			.carousel .content .prev-btn:hover,
			.carousel .content .next-btn:hover{
				border: 1px solid #000;
			}

		.carousel .content .prev-btn{
			left: 0;
		}

		.carousel .content .next-btn{
			right: 0;
		}

		.carousel .content .prev-btn:after,
		.carousel .content .next-btn:after{
			top: 50%;
			left: 19px;
			width: 10px;
			height: 10px;
			content: '';
			position: absolute;
			border-right: 2px solid #888;
			border-bottom: 2px solid #888;
			transform: translate(-50%, -50%) rotate(-45deg);
		}

			.carousel .content .prev-btn:hover:after,
			.carousel .content .next-btn:hover:after{
				border-right: 2px solid #000;
				border-bottom: 2px solid #000;
			}

		.carousel .content .prev-btn:after{
			left: 24px;
			transform: translate(-50%, -50%) rotate(135deg);
		}

/*------------- Image Slide -------------*/

.image-slide{
	position: relative;
	overflow: hidden;
}

	.image-slide .image{
		cursor: pointer;
		position: relative;
	}

		.image-slide .image img{
			width: 100%;
		}

	.image-slide .data{
		width: 100%;
		display: none;
		background: #222;
		position: relative;
	}
	
		.image-slide .data .title{
			color: #ddd;
			padding: 10px;
			font-size: var(--fontSize120);
			border-bottom: 1px solid #444;
		}

			.image-slide .data .left{}

			.image-slide .data .right{}

				.image-slide .data .right img{
					cursor: pointer;
				}

		.image-slide .data .options{}

			.image-slide .data .options .option{
				padding: 8px;
				font-size: var(--fontSize100);
				border-bottom: 1px solid #333;
			}

				.image-slide .data .options .option:hover{
					background: #111;
				}

				.image-slide .data .options .option a{
					color: #f06d00;
				}
				
@media screen and (max-width: 1350px){
	.image-slide .data .title{
		padding: 8px;
	}

		.image-slide .data .options .option{
			padding: 6px;
		}
}

@media screen and (max-width: 1100px){
	.image-slide .data .title{
		padding: 7px;
	}

		.image-slide .data .options .option{
			padding: 5px;
		}
}

@media screen and (max-width: 600px){
	.image-slide .data .title{
		padding: 8px;
	}

		.image-slide .data .options .option{
			padding: 6px;
		}
}

/*------------- Hover Flip -------------*/

.hover-flip{
	position: relative;
	
	perspective: 1000;
	-ms-perspective: 1000;
	-moz-perspective: 1000;
	-webkit-perspective: 1000;

	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
}

	.hover-flip:hover > .flipper > .back,
	.hover-flip.hover > .flipper > .back{
		transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
	}

	.hover-flip:hover > .flipper > .front,
	.hover-flip.hover > .flipper > .front{
		transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
	}

		.hover-flip,
		.hover-flip > .flipper > .front,
		.hover-flip > .flipper > .back{
			/* set with and height */
		}

		.hover-flip > .flipper{
			position: relative;
			
			-ms-transition: 0.6s;
			-webkit-transition: 0.6s;
			-webkit-transform-style: preserve-3d;

			-moz-transition: 0.6s;
			-ms-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-moz-transform: perspective(1000px);

			transition: 0.6s;
			transform-style: preserve-3d;
		}

		.hover-flip > .flipper > .front,
		.hover-flip > .flipper > .back{
			top: 0;
			left: 0;
			position: absolute;
			
			backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;

		    -webkit-transition: 0.6s;
		    -webkit-transform: rotateY(0deg);
		    -webkit-transform-style: preserve-3d;

		    -moz-transition: 0.6s;
		    -moz-transform: rotateY(0deg);
		    -moz-transform-style: preserve-3d;

		    -o-transition: 0.6s;
		    -o-transform: rotateY(0deg);
		    -o-transform-style: preserve-3d;

		    -ms-transition: 0.6s;
		    -ms-transform: rotateY(0deg);
		    -ms-transform-style: preserve-3d;

		    transition: 0.6s;
		    transform: rotateY(0deg);
		    transform-style: preserve-3d;
		}

		.hover-flip > .flipper > .front{
			-ms-transform: rotateY(0deg);
			-webkit-transform: rotateY(0deg);
		}

		.hover-flip > .flipper > .back{
		    transform: rotateY(-180deg);
		    -o-transform: rotateY(-180deg);
		    -ms-transform: rotateY(-180deg);
		    -moz-transform: rotateY(-180deg);
			-webkit-transform: rotateY(-180deg);
		}

/*------------- Fade Slider -------------*/

.fade-slider{
	position: relative;
}

	.fade-slider .loader{
		height: 100px;
	}

		.fade-slider .loader svg{
			width: 48px;
			height: 48px;
		}

	.fade-slider .slide{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

/*------------- Fade Block -------------*/

.fade-block{}

	.fade-block.fade-move-0-100,
	.fade-block > .fade-move-0-100{
		width: 450px;
		text-align: center;
	}

	.fade-block .title.infinite{
		-webkit-animation: fade-move-0-100 5s ease infinite; /* safari 4.0 - 8.0 */
		animation: fade-move-0-100 5s ease infinite;
	}

		.fade-block .title.infinite:nth-child(2){animation-delay: 0.5s;}
		.fade-block .title.infinite:nth-child(3){animation-delay: 1s;}
		.fade-block .title.infinite:nth-child(4){animation-delay: 1.5s;}
		.fade-block .title.infinite:nth-child(5){animation-delay: 2s;}
		.fade-block .title.infinite:nth-child(6){animation-delay: 2.5s;}
		.fade-block .title.infinite:nth-child(7){animation-delay: 3s;}
		.fade-block .title.infinite:nth-child(8){animation-delay: 3.5s;}
		.fade-block .title.infinite:nth-child(9){animation-delay: 4s;}
		.fade-block .title.infinite:nth-child(10){animation-delay: 4.5s;}

@media screen and (max-width: 600px){
	.fade-block.fade-move-0-100,
	.fade-block > .fade-move-0-100{
		width: 80%;
	}
}

/*------------- YouTube Video -------------*/

.youtube-video{
	width: 100%;
	position: relative;
}

.youtube-video:not(.not-found){
	cursor: pointer;
}

	.youtube-video:not(.not-found):after{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		content: '';
		position: absolute;
		
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		filter: grayscale(100%);
		
		background-position: center;
		background-repeat: no-repeat;
		background-image: url('../images/ui/youTubeVideo/btn.png');
	}

	.youtube-video:not(.not-found):hover:after{
		background-color: rgba(0, 0, 0, 0.1);
		
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		filter: grayscale(0);
	}

.youtube-video-frame{
	height: 100%;
	position: relative;
}

	.youtube-video-frame .close{
		top: 10px;
		right: 10px;
		cursor: pointer;
		position: absolute;
	}

	.youtube-video-frame iframe{
		background-color: #000;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url('../images/ui/youTubeVideo/loader.gif');
	}

/*------------- Embed HTM -------------*/

.embed-html{
	width: 100%;
	border: none;
	margin-bottom: -4px;
}

/*------------- Sum Div -------------*/

.sum-div{
	overflow-x: hidden; 
}

	/* Generic */
	.sum-div .sum-row{}

		.sum-div .sum-row .sum-row-wrapper{
			padding: 10% 0;
		}

		.sum-div .sum-row .sum-row-wrapper.no-padding{
			padding: 0;
		}

			.sum-div .sum-row .sum-row-wrapper > .title{
				width: 600px;
				max-width: 80%;
				padding: 0 0 15px;
				text-align: center;
				margin: 0 auto 50px;
				font-size: var(--fontSize180);
			}
		
			.sum-div .sum-row .sum-row-wrapper .sum-column{
				text-align: center;
			}
	
				.sum-div .sum-row .sum-row-wrapper .sum-column > *:first-child{
					margin-top: 0 !important;
					padding-top: 0 !important;
				}
	
				.sum-div .sum-row .sum-row-wrapper .sum-column > *:last-child{
					margin-bottom: 0 !important;
					padding-bottom: 0 !important;
				}
		
				.sum-div .sum-row .sum-row-wrapper .sum-column > .title{
					width: 600px;
					max-width: 80%;
					margin: 0 auto 40px;
					padding: 25px 0 15px;
					font-size: var(--fontSize160);
				}
		
				.sum-div .sum-row .sum-row-wrapper .sum-column > .text{
					margin: 25px 0 0;
				}
		
				.sum-div .sum-row .sum-row-wrapper .sum-column > .links{
					margin: 25px 0;
				}
	
				.sum-div .sum-row .sum-row-wrapper .sum-column > .image{
					margin: 0 auto;
				}
	
	/* Circles */
	.sum-div .sum-row.circles{}
	
		.sum-div .sum-row.circles .sum-row-wrapper .sum-column > .image{
			width: 70%;
		}
	
	/* Cover */
	.sum-div .sum-row.cover{
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-ms-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
		.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
			width: 30%;
			float: left;
			padding: 2% 5%;
			text-align: center;
		}

			.sum-div .sum-row.cover .sum-row-wrapper .sum-column > .text ul,
			.sum-div .sum-row.cover .sum-row-wrapper .sum-column > .text ol{
				text-align: left;
			}
			
	/* Flex */
	.sum-div .sum-row.flex{
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-ms-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
		.sum-div .sum-row.flex .dmsn{
			width: 100% !important;
		}
		
		.sum-div .sum-row.flex .grid-row{
			display: flex;
			display: -moz-flex;
			display: -webkit-flex;
		}
		
			.sum-div .sum-row.flex .grid-row .grid-box{
				flex: 1;
				-ms-flex: 1;
				-webkit-flex: 1;
			}
		
		.sum-div .sum-row.flex .sum-row-wrapper{
			padding: 0;
		}
			
			.sum-div .sum-row.flex .sum-column .image{
				width: 300px;
				margin: 0 auto;
			}

	/* Video */
	.sum-div .sum-row.video{
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-ms-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
	
		.sum-div .sum-row.video .sum-row-wrapper .sum-column{
			width: 50%;
			margin: 0 auto;
		}
			
			.sum-div .sum-row.video .sum-row-wrapper .sum-column .video iframe{
				width: 100%;
				margin-bottom: -4px;
			}
	
	/* Summary */
	.sum-div .sum-row.summary{}
	
		.sum-div .sum-row.summary .sum-row-wrapper .sum-column{
			width: 40%;
			margin: 0 auto;
			text-align: center;
		}
		
			.sum-div .sum-row.summary .sum-row-wrapper .sum-column > .image{
				width: 70%;
			}

/* 1650px */
@media screen and (max-width: 1650px){
	.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
		width: 40%;
	}
	
	.sum-div .sum-row.flex .sum-column .image{
		width: 280px;
	}
	
	.sum-div .sum-row.summary .sum-row-wrapper .sum-column{
		width: 50%;
	}
}

/* 1550px */
@media screen and (max-width: 1550px){
	.sum-div .sum-row .sum-row-wrapper > .title{
		width: 400px;
	}
		
	.sum-div .sum-row.flex .sum-column .image{
		width: 250px;
	}
}

/* 1380px */
@media screen and (max-width: 1380px){
	.sum-div .sum-row .sum-row-wrapper > .title{
		width: 350px;
	}
	
	.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
		width: 50%;
	}
	
	.sum-div .sum-row.summary .sum-row-wrapper .sum-column{
		width: 60%;
	}
}

/* 1250px */
@media screen and (max-width: 1250px){
	.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
		width: 60%;
	}
	
	.sum-div .sum-row.summary .sum-row-wrapper .sum-column{
		width: 70%;
	}
}

/*950px*/
@media screen and (max-width: 950px){	
	.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
		width: 70%;
	}
	
	.sum-div .sum-row.summary .sum-row-wrapper .sum-column{
		width: 80%;
	}
}

@media screen and (max-width: 600px){
	.sum-div .sum-row .sum-row-wrapper{
		padding: 80px 0;
	}
	
		.sum-div .sum-row .sum-row-wrapper > .title{
			margin: 0 auto 40px;
		}
		
		.sum-div .sum-row .sum-row-wrapper .sum-column:not(.column-1){
			margin-top: 40px;
		}
	
			.sum-div .sum-row .sum-row-wrapper .sum-column > *:first-child{
				margin-top: 0 !important;
			}

			.sum-div .sum-row .sum-row-wrapper .sum-column > .title{
				margin: 0 auto 30px;
			}

			.sum-div .sum-row .sum-row-wrapper .sum-column > .text{
				width: 90%;
				margin: 25px auto 0;
			}

	.sum-div .sum-row.circles .sum-row-wrapper > .dmsn{
		width: 80%;
	}

		.sum-div .sum-row.circles .sum-row-wrapper .sum-column > .image{
			width: 90%;
		}
	
	.sum-div .sum-row.cover .sum-row-wrapper .sum-column{
		width: 80%;
		float: none;
		padding: 8% 5%;
		margin: 0 auto;
	}

	.sum-div .sum-row.flex .grid-row{
		flex-direction: column;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
	}
		
	.sum-div .sum-row.flex .sum-column .image{
		width: 200px;
	}
	
	.sum-div .sum-row.video .sum-row-wrapper .sum-column{
		width: 80%;
	}
}

/*------------- Spread -------------*/

.spread{
	background-color: #fff;
}

.spread.dark-mode{
	background-color: var(--darkModeContainerBgColor);
}

	.spread > .title{
		padding: 10px 20px;
		font-size: var(--fontSize160);
	}
			
		.spread > .title span{
			display: inline-block;
		}

	.spread > .data{
		padding: 30px;
	}
	
	.spread .data > .core-info-block,
	.spread .data > .core-data-table.controls{
		margin: -30px -30px 30px;
	}
	
	.spread .data > .core-tabs{
		margin: -30px;
	}
		
		.spread > .data h2,
		.spread > .data h3{
			padding: 5px;
			margin: 10px 0;
		}

			.spread > .data h2:first-child,
			.spread > .data h3:first-child{
				margin: 0 0 10px 0;
			}

	.spread > .link{
		padding: 20px;
		text-align: center;
		border-top: 1px solid var(--softBorderColor);
	}

	.spread.dark-mode > .link{
		border-top: 1px solid var(--darkModeBorderColor);
	}

		.spread > .link .btn{
			margin: 0 8px;
		}
	
@media screen and (max-width: 1380px){
	.spread > .data{
		padding: 20px;
	}

	.spread .data > .core-info-block,
	.spread .data > .core-data-table.controls{
		margin: -20px -20px 20px;
	}

	
	.spread .data > .core-tabs{
		margin: -20px;
	}

	.negate-spread-data-margin{
		margin: -20px -20px 20px;
	}
}
	
@media screen and (max-width: 600px){
	.spread > .link .btn{
		margin: 0 0 8px;
		display: block;
	}
	
	.spread > .link .btn:last-child{
		margin: 0;
	}
}

/*------------- Mail Preview -------------*/

.mail-preview{
	padding: 20px;
}

	.mail-preview > .header{
		padding-bottom: 20px;
	}

	.mail-preview > .body{}

	.mail-preview > .footer{
		padding: 20px;
		margin-top: -1px;
	}

/* 1250px */
@media screen and (max-width: 1250px){
	.mail-preview > .footer > table > tbody > tr > td{
		width: 100%;
		display: block;
	}	

	.mail-preview > .footer > table > tbody > tr > td:not(:last-child){
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 600px){
	.mail-preview{
		padding: 5px;
	}
	
		.mail-preview > .header{
			padding-bottom: 10px;
		}

		.mail-preview > .footer{
			padding: 10px;
		}
}

/*------------- Document -------------*/

/* document */
.document{}

	.document h3{
		margin: 0 0 10px 0;
		font-size: var(--fontSize140);
		border-bottom: 1px solid #ddd !important;
	}

	.document.dark h3{
		color: var(--darkModeColor) !important;
		border-bottom: 1px solid var(--darkModeBorderColor) !important;
	}
		
		.document h3.red{
			color: var(--redColor) !important;
		}
		
		.document h3.green{
			color: var(--greenColor) !important;
		}
		
		.document h3.white{
			color: var(--whiteColor) !important;
		}
		
		.document h3.black{
			color: var(--blackColor) !important;
		}

	.document .head{
		padding: 20px;
		background: #eee;
	}

	.document.dark .head{
		background: var(--darkModeBgColor);
	}

		.document .head .left{
			width: 49%;
		}

		.document .head .right{
			width: 49%;
		}

	.document .summary{
		padding: 20px;
		font-size: var(--fontSize90);
	}

		.document .summary .table{
			margin: 0 0 20px 0;
		}

		.document .summary .table:last-child{
			margin: 0;
		}
		
			.document .summary .table table{
				border: 0;
				width: 100%;
			}
			
				.document .summary .table table th{
					color: #222;
					padding: 5px 0;
					font-weight: normal;
				}
			
				.document.dark .summary .table table th{
					color: var(--darkModeColor);
				}
			
				.document .summary .table table tr{
					background: #ddd;
				}
			
				.document.dark .summary .table table tr{
					background: var(--darkModeBgColor);
				}
			
				.document .summary .table table tr:nth-child(odd){
					background: transparent;
				}
				
					.document .summary .table table td{
						padding: 5px;
					}

	.document .totals{
		text-align: right;
	}

	.document .terms{
		padding: 0 10px;
		font-size: var(--fontSize90);
	}

@media screen and (max-width: 600px){
	.document .head{
		padding: 10px;
	}
	
		.document .head .left{
			float: none; 
			width: 100%;
		}

		.document .head .right{
			float: none; 
			width: 100%;
		}

	.document .summary{
		padding: 10px;
	}

		.document .summary .table{
			margin: 0 0 10px 0;
		}
}

/*------------- Sqr Img -------------*/

.sqr-img{
	overflow: hidden;
	position: relative;	
}

	.sqr-img .dummy{
		margin-top: 100%;
	}

	.sqr-img .el{
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
		overflow: hidden;
		position: absolute;
		width: calc(100% + 10px);
	}

		.sqr-img .el img{
			object-fit: cover;
		}

		.sqr-img .el img.width{
			width: 100%;
		}

		.sqr-img .el img.height{
			height: 100%;
			position: absolute;
		}
		
			.sqr-img .el img.height:empty{
				top: 0;
				left: 50%;
				-webkit-transform: translate(-50%, 0);
				-moz-transform: translate(-50%, 0);
				-ms-transform: translate(-50%, 0);
				-o-transform: translate(-50%, 0);
				transform: translate(-50%, 0);
			}

/*------------- List Box -------------*/

.list-box{}

	.list-box .list-box{
		padding: 0;
	}

		.list-box .list-box .list-box{
			margin: 0 5px;
		}

	.list-box .label{
		padding: 5px;
		cursor: pointer;
		font-weight: bold;
	}

		.list-box .label .sym{
			width: 9px;
			margin-right: 5px;
		}

	.list-box .items{
		padding: 5px;
		display: none;
	}

		.list-box .items .item{
			margin: 0 5px;
			cursor: pointer;
		}

		.list-box .item{
			padding: 5px;
		}

			.list-box .item.active{
				background: var(--bgColor);
			}

			.list-box .item:hover{
				background: var(--bgColor2);
			}
			
				.list-box .item:hover a,
				.list-box .item.active a{
					color: #fff;
				}
		
		.list-box .items .item:hover,
		.list-box .items .item.active{}

/*------------- Label Box -------------*/

.label-box{
	background-color: #fff;
}

.label-box.dark-mode{
	background-color: var(--darkModeContainerBgColor);
}

	.label-box > .title{
		padding: 10px 0;
		text-align: center;
		font-size: var(--fontSize140);
	}

	.label-box > .content{
		padding: 20px;
	}

/*------------- File List -------------*/

.file-list{}
	
	.file-list > .item{
		margin: 8px 0;
	}
	
	.file-list > .item:first-child{
		margin: 0 0 8px;
	}
	
	.file-list > .item:last-child{
		margin: 8px 0 0;
	}