/**
 * Flex @package Helix Framework
 * @author Aplikko http://www.aplikko.com
 * @copyright Copyright (c) 2020 Aplikko
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/

/*=======================================*
 *======= 	TABLE OF CONTENT	 ========*
 *=======================================*

	01. Base Style	
	01. Button & Input
	03. Top Bar
	04. Header
	05. Page Title
	06. body innerwrapper
	07. Page Builder Addons
	08. Module
	09. Search
	10. Blog
	11. Bottom
	12. Footer
	13. Comingsoon
	14. Error page
	15. Mixed CSS
	16. Login

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


/*=========================================
 *======= 	 Start Base Style	   ============
 *=======================================*/
a {
	-webkit-transition: color 200ms, background-color 350ms;
	transition: color 200ms, background-color 350ms;
}
* {
	-webkit-font-smoothing: subpixel-antialiased; /* fix for Safari font-weight */
	-webkit-text-stroke:1px transparent;
}
body {
	line-height: 25px;
}

a,
a:hover,
a:focus,
a:active {
	text-decoration: none;
	outline: 0;
}
a,button,input,.btn,.sppb-btn {
	outline: 0!important;
}
label {
	font-weight: normal;
}

legend {
	padding-bottom: 10px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}
.floatcenter {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.full-window {
	min-height:100vh;
	//padding:50vh 0px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}


.sticky-bottom {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
}


/*End Base Style
*=======================================*/


/*=========================================
 *======= 	 Start Button	   ============
 *=======================================*/
.btn, .sppb-btn-rounded {border-radius: 4px;}
.sppb-btn {font-size:100%;line-height:1.4;} /* reset font size for sppb buttons */
.btn,
.sppb-btn {
	.transition(~'color 400ms, background-color 400ms, border-color 400ms');
	padding:8px 28px;
	margin-right:3px;
	border: 1px solid transparent;
	outline:0;
		
	&.sppb-btn-outline{
	  padding:8px 30px;
	}
	&.sppb-btn-round {
		line-height:1.5;
		padding:8px 26px 9px;
	}
	&.sppb-btn-3d {
		padding:10px 30px 11px;
		-webkit-box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.1);
		box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.1);
		outline:0;
		border:0;
		-webkit-transform: translateY(0) scale(1) perspective(1000px) rotateX(5deg) rotateY(0) translateZ(1%);
		-moz-transform: translateY(0) scale(1) perspective(1000px) rotateX(5deg);
		-ms-transform: translateY(0) scale(1) perspective(1000px) rotateX(5deg);
		-o-transform: translateY(0) scale(1) perspective(1000px) rotateX(5deg);
		transform: translateY(0) scale(1) perspective(1000px) rotateX(5deg) rotateY(0) translateZ(1%);
		.transition(all 0.1s ease);	
		
		&.focus,
		&.active,
		&:active,
		&:focus {
			outline:0;
			border:0;
			-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.1);
			box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.1);
			-webkit-transform: translateY(1px) scale(0.99) perspective(800px) rotateX(-5deg);
			-moz-transform: translateY(1px) scale(0.99) perspective(800px) rotateX(-5deg);
			-ms-transform: translateY(1px) scale(0.99) perspective(800px) rotateX(-5deg);
			-o-transform: translateY(1px) scale(0.99) perspective(800px) rotateX(-5deg);
			transform: translateY(1px) scale(0.99) perspective(800px) rotateX(0);
		}
		
		&.sppb-btn-lg {
			padding:10px 34px 13px;
		}
	  
	}

	&.sppb-selector,
	&.sppb-modal-selector {
		i {
			&.fa {
				margin:0 5px 0 0;
			}
			&.fas, &.far {
				margin:0 5px 0 0;
			}
			&.pe {
				margin:0 7px 0 -2px;
				line-height:1.1;
				font-size:115%;
				text-align:center;
				vertical-align:middle;
			}
		}
	}
	
	&.bold {
		i {
			&.pe {
				font-weight:600;
			}
		}
	}
	&.sppb-btn-xs {
		line-height:1.1;
		padding:5px 16px;
		font-size:80%;
	}
	&.sppb-btn-sm {		
		padding:6px 22px;
		font-size:87%;
	}
	&.sppb-btn-lg {
		line-height:1.7;
		font-size:125%;
		padding:9px 30px;
	}
	&.btn-light {
		i {
			line-height:1.3;
			margin-right:6px;
			&.pe {
				font-size:130%;
				vertical-align:middle;
				line-height:1.4;
				margin-right:7px;
				&.bold {
					font-weight:600;
				}
			}
		}
	}
	&.responsive {
		white-space: normal;
		text-align:center;
		display:table;
	}
	&.sppb-btn-link {
		border:0;
		padding-left: 20px;
		padding-right: 20px;
	}
}

.btn-readmore {
	margin:10px auto;
	padding:8px 30px;
}
.button {
	outline:none;
	border-radius:4px;
	border:none;
	margin:20px 10px;
	/*display:inline-block;*/
}


//Offline page

.offline-container {
	.row-fluid {
		.flexbox();
		.flex-align-items();
		.flex-justify-content(center);
		height:100vh;
	
	
		> div {
			.flex-align-items();
			.flex-justify-content(center);
		}
	}
}

.offline-inner {
	background:rgba(255,255,255,0.8);
	margin:0 auto;
	padding:3%;
	border-radius:4px;
	
	.offline_message {
		.flexbox();
		.flex-align-items();
		.flex-justify-content(center);
		margin:10px auto;
		padding:3vh;
	}
	.outline > .centered-logo{
		.flexbox();
		.flex-align-items();
		.flex-justify-content(center);
		margin:0 auto;
	}
	.outline {
		
		h1 {
			font-weight:300;
			color: #777;
			text-shadow: 1px 1px 2px gba(255,255,255,0.85);
		}
		
		#form-login {
			display:table;
			margin:10px auto 20px;
			text-align:center;
			width:320px;
		
			#submit-buton {
				margin:0;
				text-align:left;
				
				.btn-readmore.login {
					border-color: darken(@major_color, 2%);
					background-color: @major_color;
					background-color: fade(@major_color, 90%);
					color:#fff;
				
					&:hover,
					&:focus {
						border-color: darken(@major_color, 15%);
						background-color: darken(@major_color, 4%);
						color:#fff;
					}
				}
			}
			> div {
				margin:10px auto;
			}
			input.form-control {
				background-color:rgba(255,255,255,0.85);
				line-height:32px;
				height:42px;
			}
		}
	}
	
	hr {
		border-color:rgba(255,255,255,.8);
		box-shadow:0 -1px 0px rgba(0,0,0,0.1);
		margin-bottom:25px;
	}

	.sp-comingsoon-content {
		margin: 10px auto;
		clear:both;
		font-size: 26px;
		font-weight: 300;
		display:block;
		width:100%;
		text-align:center;
	}
	
	.sp-comingsoon-countdown {
		.flexbox();
		.flex-align-items();
		.flex-justify-content(center);
		padding:0 10%;
		
		.days,
		.hours,
		.minutes,
		.seconds{
			
			width: 22%;
			background-color: rgba(30,30,30,0.1);
			margin: 10px auto;
			box-shadow:none;
			padding:10px;
			border-radius:3px;
		}
	
		.days .number,
		.hours .number,
		.seconds .number,
		.minutes .number{
			min-width:50%;
			height: 45px;
			line-height: 45px;
			display: table;
			margin: 10px auto;
			text-align:center;
			font-size: 45px;
			font-weight: 300;	
		}
	
		.days .string,
		.minutes .string,
		.seconds .string,
		.hours .string{
			.flexbox();
			.flex-align-items();
			.flex-justify-content(center);
			font-size: 16px;
			color:#777;
			margin: 10px auto 5px;
		}
	}
}


//input
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    .form-control();
}

.group-control {
    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
        width: 100%;
    }
}

// for all inputs
input {
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
	&:focus {
		box-shadow:none!important;
	}
}

.group-control {
  select,
  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"],
  .uneditable-input {
    width: 100%;
  }
}

/* Some "Custom" Classes */
.pull-left {
	margin-right:20px;
	margin-bottom:3px;
}
.pull-center {
	margin:0 auto 10px;
	text-align:center;
}
.pull-right {
	margin-left:20px;
	margin-bottom:3px;
}
.float-left {
	float:left;
}
.float-center {
	float:none;
	margin:0 auto;
	text-align:center;
}
.float-right {
	float:right;
}

.svgwhite {
		background: url(../images/svgwhite.svg) center center repeat;
}
.shadow {
   box-shadow:-25px 0 30px -15px rgba(0,0,0,.15),25px 0 30px -15px rgba(0,0,0,.15);
}
.text-shadow {
	text-shadow: 1px 1px 2px rgba(0,0,0,.2);
	.sppb-cta-title {
		text-shadow: 1px 1px 2px rgba(0,0,0,.2);
	}
}
.border-radius {
   border-radius:5px;	
}
		
.padding30 {
	padding:0 30px;
}


/*=========================================
*======= 	Start  Top Bar	   ============
*=======================================*/
#sp-top-bar {
	
	.sp-module {
		display:inline-block;
		margin-top:0;
		margin-bottom:0;

		.modal-login-wrapper {
			display: inline-block;
		}
	}
 
}


ul.social-icons {
	list-style: none;
	padding: 0;
	margin: 0;
	display: inline-block;
	>li {
		display: inline-block;
		margin: 0 7px;
		a {
			color: #999999;
		}
	}
}

// Language switcher
.sp-module-content {
	
	.mod-languages {

		.dropdown-toggle {
			display:block;
			padding:3px 10px 3px 14px;
			broder:none;
			box-shadow:1px 0 0 0px rgba(196,196,196,0.15), -1px 0 0 0px rgba(196,196,196,0.15);
			line-height:1;
			img {
				display:inline-block;
				padding:0 7px 0 0;
				margin-top:-2px;
				
			}
			>i {
				padding:0 0 0 4px;
				width:16px;
				line-height:14px;
				vertical-align:middle;
			}		
		}
		
		.dropdown-menu {
			background-color:rgba(60,60,60,0.87);
			border-radius: 0 0 5px 5px;
			margin-top:9px;
			
			li {
				 box-shadow:none;
				 border:none;
				a {
					padding:2px 14px;
					.flexbox();
					.flex-align-items();
					box-shadow:none;
					border:none;
					border-bottom:1px solid rgba(157,157,157,0.25);
										  
  
					img {
						vertical-align:middle;
						float:left;
						display:flex;
						padding:0 8px 0 0;
						
					}
					&:hover {
						color:#fff;
						background-color:rgba(0,0,0,0.1);
					}
				}	
				
				
				&:last-child {
					a {
					  border-bottom:none;
					}
				}
			}
		}
		
		
		ul.lang-inline {
			margin: 0;
			padding: 0 10px;
			border-left:1px solid rgba(129,129,129,0.4);
			border-right:1px solid rgba(129,129,129,0.4);

			li {
				border: none;
				display: inline-block;
				margin: 0 5px 0 0;

				a {
					padding: 0!important;
				}

				>a:before {
					display: none;
				}
				&:last-child {
					margin-right:0;
				}
			}
		}
		ul.lang-block.vertical {
			margin: 0;
			padding: 0;
			display: block;

			li {
				border: none;
				margin:8px 0 0 0;
				padding:0;
				display:table;
				text-align:left;

				a {
					float:left;
					display:block;
					padding: 0;
					line-height:1.5;

					img {
						float:left;
						direction:ltr;
						text-align:left;
						display:inline;
						margin:0;
				        padding:4px 8px 0 0;
					}
					span {
						font-size:90%;
						float:left;
						
					}

				}
				&.lang-active {
					a {
						i {
							padding:0px 0 0 6px;
							margin-top:3px;
							line-height:15px;
							font-size:80%;
							color:lighten(@major_color, 20%);
							vertical-align:top;
							opacity:0.7;
						}
					}
				}
				>a:before {
					display: none;
				}
			}
		}
	}
}


.signature {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 0;
  padding-bottom: 55.30973%;
}
.signature svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.sp-contact-info {
	float: left;
	list-style: none;
	padding: 0;
	margin: 0 10px 0 0;
	li {
		display: inline-block;
		margin: 0 7px;
		font-size: 90%;
		
		i{
			margin: 0 3px;
			&.pe {
				font-size:125%;
				line-height:1;
				margin-top:-2px;
				vertical-align:middle;
			}
		}
		span[id*="cloak"] {
			text-indent: -9999em; // hiding info
		}
	}
}
/* End  Top Bar
*=======================================*/

#sp-logo-centered {
	#sp-logo, #sp-logo div h1, #sp-logo div a {
		.flexbox();
		.flex-align-items();
		.flex-justify-content(center);
		margin: 0 auto;
		padding:0;
		/*
		img {
			margin: 2vh 0;
		}
		*/
	}	
}
#sp-addspace-logo {

	.sp-column, #sp-addspace div {
		.flexbox();
		.flex-align-items();
	}
	
	#sp-logo {
		
		> div {
			.flexbox();
			.flex-align-items();
			
		}
	}		
}

ol.breadcrumb{
	background:transparent;
	padding:0;
	margin-:0;
	list-style:none;
	border-radius:4px;
	
		> li{
			display:inline;
			
			+ li:before,img{
				display:none;
			}
			
			.text_separator {
				padding:0 5px;
				display:inline;
			}
			.breadcrumb_divider {
				padding:0 6px;
				vertical-align:middle;
				color:#ccc;
			}
		}
}



/*=========================================
*======= 	Start  Page Title   ============
*=======================================*/
#sp-title {
	min-height: 0;
}

// Page Title
.sp-page-title-no-img {
	background-color: #999;
}

.sp-page-title, .sp-page-title-no-img {
	.flexbox();
	.flex-align-items();
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: fixed;
	box-shadow: inset 0 -10px 40px -10px rgba(0,0,0,.1), inset 0 10px 10px -8px rgba(0,0,0,.2);
	backface-visibility: hidden;
	
	.container {
	
		
		h1 {
			font-weight:300;
		}
		
		h1,h2,h3 {
			margin: 0;
			padding: 0;
			color: #fff;
			text-shadow:1px 2px 5px rgba(0,0,0,0.2);
		}
	
		h1, h2 {
			font-size: 32px;
			line-height: 1;
		}
	
		h3 {
			font-size: 14px;
			font-weight: normal;
			line-height: 1;
			margin-top: 10px;
		}
	
		.breadcrumb {
			background: none;
			padding: 0;
			margin: 10px 0 0 0;
			>.active {
				color: rgba(255, 255, 255, 0.8);
			}
	
			>span,
			>li,
			>li+li:before,
			>li>a {
				color: #fff;
			}
		}
	}
}

.body-wrapper{ 
	//min-height: 100%;
}

/*=========================================
 *===  Start body innerwrapper	 =====
 *=======================================*/

.body-innerwrapper{
	//display:block;
	//.flexbox();
	//min-height: 100vh;
	//flex-direction: column;
	//-webkit-transition: margin-left 400ms cubic-bezier(0.7,0,0.3,1);
	//transition: margin-left 400ms cubic-bezier(0.7,0,0.3,1);
	overflow-x: hidden;
}

// Boxed Layout
.layout-boxed {

	.body-innerwrapper {
		max-width: 1170px;
		margin-left:auto;
		margin-right:auto;
		//-webkit-overflow-scrolling: touch;
		
		header.centered, header.centered > .container-fluid {
			width:100%;
		}
		
		.sp-page-title {
			padding-left: 20px;
		}
		
		#sp-left.container-fluid, #sp-right.container-fluid {
			padding:0 15px 0 15px!important;
		}
	}
	
	.no-padding {
		padding-left:0;
		padding-right:0;
	}
	
}



#sp-main-body {
	padding: 50px 0;
}

.com-sppagebuilder {
	#sp-main-body {
		padding:0;
		
		.sppb-section {
			
			backface-visibility: hidden;
			 
			 > .sppb-row {
				 padding:0;
				 
				 .sppb-addon-container {
					 padding:0;
				 }
			 }
		}
		
		#sp-left {
			padding:0 0 0 40px;
			margin-right:-15px;
		}
		#sp-right {
			padding:0 40px 0 0;
			margin-left:-15px;
		}
		
	}
}

/* End body innerwrapper
*=======================================*/


/*=========================================
*======= 	Start  Module	   ============
*=======================================*/

.sp-column .sp-lr { /* Only for left and right modules (.sp-lr) */
	.sp-module {
		margin-top: 40px;
		
		&:first-child {
			margin-top: 0;
		}
	}
}
.sp-module, .sppb-addon-module {
		
	&:first-child {
		margin-top: 0;
	}
	.sp-module-title {
		margin: 0 0 20px;
		font-size:140%;
		line-height: 1.2;
		width:auto;
		padding-right:30px;
		box-shadow: inset 0 -1px 0 #ddd;
		display:table;

		&:after{
			clear: both;
			display:block;
			float:left;
			content:"";
			position:relative;
			height:2px;
			width:70%;
			margin:10px 30% 0 0;
			border-radius:2px;
			padding: 0;
		}
	
	}
		
	//Un-ordered List
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		>li {
			display: block;
			border-bottom: 1px solid #e8e8e8;
			-webkit-transition: 300ms;
			transition: 300ms;
			>a {
				display: block;
				padding: 5px 0;
				line-height: 36px;
				padding: 2px 0;
				-webkit-transition: 300ms;
				transition: 300ms;

				&:hover {
					background: none;
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	//List category
	.categories-module {
		ul {
			margin: 0 10px;
		}
	}
	
	//Articles-category module
	ul.category-module {
		>li {
			padding-bottom: 10px;
			margin-bottom: 7px;
			a.mod-articles-category-title {
				line-height:1.5;
				>i {
					font-size:87%;
					opacity:0;
					margin-left:-2px;
					.transition(300ms);
				}
				&:hover {
					>i {
						opacity:1;
						margin-left:5px;
					}	
				}
			}
			span {
				margin:0 7px 0 0;
				padding:0;
				display:inline-table;
				font-size:85%;
				color:#888;
				line-height:1;
				>i {
					margin:0 3px 0 0;
					font-size:90%;
					line-height:1.33;
					vertical-align:top;
				}
			}
			p {
				margin:5px auto 0;
				font-size:90%;
				color:#888;
				line-height:1.5;
				.fa-quote-left {
					margin:0 5px 0 0;
					font-size:90%;
				}
				.fa-quote-right {
					margin:0 0 0 5px;
					font-size:90%;
				}
			}
		}
	}

	//Latest Articles (module)
	.latest-articles{
		display:block;
		width:100%;
		a{
			float: left;
			color: #707070;
			width:100%;
			clear:both;
			font-size: 14px;
			line-height: 1.57;
			padding: 5px 0;
			.flexbox();
			.flex-align-items();
			.flex-justify-content(center);
			
			
			
			.article-list-img{
				float: left;
				margin: 0 15px 0 0;
				width:50px;
				.transition(all .3s ease-in-out);
				
				.overlay {						
					position:absolute;
					.transition(all .3s ease);
					width: 50px;
					height: 50px;
					box-shadow: none;
					border-radius: 2px;					
				}
					
				img{
					width: 50px;
					height: 50px;
					object-fit: cover;
					border-radius: 2px;				
					
				}
				
			}
			.latest-articles-title {
				width:70%;
				margin: 10px 0;		
				font-size: 14px;
				line-height: 1.57;
			}
			.date {
				float: left;
				display:block;
				margin: 0 15px 0 0;
				width:50px;
				text-align:center;
				background:rgba(155,155,155,0.1);
				border-radius: 2px;
				color:#777;
				border:1px solid rgba(95,95,95,0.12);
				.transition(all .3s ease-in-out);
				
				
				.year {
					font-size:15px;
					line-height:27px;
					color:#999;
				}

				small {
					font-size:11px;
					line-height:15px;
					display:block;
					clear:both;
					margin:5px auto 0;
					color:#777;
				}
			}
			
			&:hover,
			&:focus{
				color: #444;
				
				.overlay {	
					box-shadow: inset 0 0 0 2px rgba(55,55,55,0.25);							
				}
				
				.date {
					border:1px solid rgba(95,95,95,0.35);
					
					.year {
						color:#888;
					}
	
					small {
						color:#666;
					}
				}
			}
		}
	}
	
	//Related Articles
	.relateditems {
		>li {
			padding-bottom: 5px;
			margin-bottom: 5px;
			border-bottom: 1px solid #e8e8e8;

			&:last-child {
				padding-bottom: 0;
				margin-bottom: 0;
				border-bottom: 0;
			}
			>a {
				display: block;
				font-weight: 400;
				line-height:1.5;
				>i.fa, >i.fas, >i.far {
					font-size:90%;
					line-height:12px;
					color:#888;
					width:16px;
					margin-right:0;
					text-align:center;
				}
				>div.related-date {
					display: block;
					margin:5px 0;
					font-size:90%;
					color:#888;
					>i {
						color:#bbb;
						width:16px;
						margin-right:3px;
						text-align:center;
					}
				}
			}
		}
	}

	//Tags Cloud
	.tagscloud {
		margin: -2px 0;
		.tag-name {
			display: inline-block;
			padding: 4px 10px;
			font-size:85%;
			color: #fff;
			border:1px solid #ccc;
			border-radius: 4px;
			margin: 3px 0 3px 2px;

			span {
				display: inline-block;
				min-width: 8px;
				margin:0 -1px 0 3px;
				padding: 3px 7px;
				font-size: 11px;
				font-weight: 700;
				line-height: 1.3;
				text-align: center;
				white-space: nowrap;
				vertical-align: baseline;
				background-color: rgba(0, 0, 0, 0.12);
				border-radius: 10px;
			}
		}	
	}
}
/* End  Module
*=======================================*/


//Top search
.top-search-wrapper{
	position:relative;
	line-height: 32px;
	width:42px;
	z-index:3;
	.transition(color 0.3s ease-in-out);
	
	.icon-top-wrapper{
		cursor: pointer;

		i.fa, i.fas, i.far {
			font-size:15px;
			text-align:center;
			width:42px;
			margin:0 auto;
		}
		i.pe {
			font-size:18px;
			text-align:center;
			font-weight:bold;
			width:42px;
			margin:0 auto;
		}
		.search-close-icon{
			display: none;
		}
		.search-close-icon.open{
			display:block;
		}
		i.pe.search-close-icon.open {
			font-size:22px;
		}
		.search-close-icon,
		.search-open-icon {
			width:42px;
			text-align:center;
			line-height:32px;
		}
	}
}
 
.top-search-input-wrap{
	display: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
	.top-search-wrap {
		position:absolute;
		right:-10px;
		left:auto;
		float:left;
		width:360px;
		margin:-20px 0 0 0;
		z-index:8;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform: translateY(-20px) scale(0.85) perspective(500px) rotateX(90deg);
		-moz-transform: translateY(-20px) scale(0.85) perspective(500px) rotateX(90deg);
		-ms-transform: translateY(-20px) scale(0.85) perspective(500px) rotateX(90deg);
		-o-transform: translateY(-20px) scale(0.85) perspective(500px) rotateX(90deg);
		transform: translateY(-20px) scale(0.85) perspective(500px) rotateX(90deg);
		.transition(all 0.3s cubic-bezier(0.405, 0.020, 0.325, 0.950));
		opacity:0;
		
		.searchwrapper{
			background-color: rgba(255, 255, 255, 0.95);		
			padding: 8px 0;
			border-radius: 3px;
			margin-top:-1px;
		}
		  	  
		.sp_search_input{
			width:360px;
			 input{
				background-color: transparent;
				width: 100%;
				height: auto;
				font-size: 18px;
				font-weight: 600;
				border: 0;
				box-shadow:none;
				text-align: center;
			 }
		}
		&.active {	
			margin-top:1vh;
			-webkit-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-moz-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-ms-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-o-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			opacity:1;
		}
	}
}



/*=========================================
*======= 	Start  Search	   ============
*=======================================*/
.search {
	input#mod-search-searchword {
		width:100%;
		border-radius:4px;
		&:focus {
			box-shadow:none;
		}

	}
	button[name="Search"] {
		position:absolute;
		right:-19px;
		border-radius:0 4px 4px 0;
		line-height:1;
		width:42px;
		height:34px;
		padding-left:5px;
		padding-right:4px;
		.fa-search {
			font-size:110%;
			vertical-align:top;
			line-height:1.1;
		}
	}
	
	/* icon fa-search */
	&.flex-search {
		&:before {
			/* FontAwesome 5 in Flex 3.9 */
			font-family:'Font Awesome 5 Free';
			content:"\f002";
			font-weight:900;
			position:relative;
			z-index:1;
			margin-bottom:-42px;
			float:right;
			right:12px;
			line-height:2.2;
			padding-left:3px;
			text-align:center;
			vertical-align:middle;
			opacity:0.9;
			.transition(all .3s ease-in-out);
		}
		&:hover:before,
		&:focus:before,
		&:active:before {
			opacity:0.2;
			content:"\f00e";
			font-weight:900;
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
		}
	}
	.btn-toolbar {
		margin-bottom: 20px;
		span.icon-search {
			margin: 0;
		}
		button {
			color: #fff;
		}
	}

	.phrases {
		.phrases-box {
			.controls{
				label {
					display: inline-block;
					margin: 0 20px 20px;
				}	
			}
		}

		.ordering-box {
			margin-bottom: 15px;
		}
	}

	.only {
		label {
			display: inline-block;
			margin: 0 20px 20px;	
		}
	}

	.search-results {

		dt.result-title {
			margin-top: 40px;	
			font-size:110%;
			
			> a {
				+ i.fa-link {
					font-size:90%;
					color:#909090;
					line-height:1.1;
					margin-left:-5px;
					opacity:0;
					.transition(all .2s ease-in-out);
				}
				&:hover {
					+ i.fa-link {
						opacity:1;
						margin-left:3px;
					}
				}
			}
			
		}
	
		dt,dd {
			margin: 5px 0;
		}
		.result-created {
			margin:10px 0 0;
			font-size:90%;
		}
	}
	span.highlight {
		background: #9BCC56;
		color: #fff;
		padding:0 3px;
	} 
	
}

.filter-search {
	.chzn-container-single {
		.chzn-single {
			height:34px;
			line-height:34px;
		}
	}
}

.form-search {
	.finder {
		label {
			display: block;
		}

		.input-medium {
			width: 60%;
			border-radius: 4px;
		}
	}
}

.finder {
	.word {
		input {
			display: inline-block;
		}
	}

	.search-results.list-striped {
		li {
			padding: 20px 0;
		}
	}
}

/* End  Search
*=======================================*/



/*=========================================
*======= 	Start  Blog	   ============
*=======================================*/
.article-info {
	margin:0;
	padding-top:12px;
	line-height: 12px;

	>dd{
		display: inline-block;
		font-size: 12px;
		line-height: 20px;
		color: #666;
		margin: 0 5px;
		>i,
		>span.fa-eye, >span.far.fa-eye {
			display: inline-block;
			margin-right:2px;
		}
		.voting-symbol {
			margin-left:3px;
		}
	}
}

article {
	&.item {
		//margin-bottom: 50px;
	}
}
// Tags
.tag-category {
	.btn-group.pull-right {
	  margin-right:10px;	
	}
	table.category {
		margin:30px auto;
	}
	ul.category {
		padding:40px 0;
		li {

			.sp-module {
				margin:0;
			}
			
			h3 {	
				>a {
					font-size:115%;
					line-height:1.3;
				}
				
			}
			>.tag-body {
				margin:5px 0 0 0;
			}
			>.tag-img {
				margin:5px 25px 5px 0;
				width:33%;
				
				
				.overlay {
					position:relative;
					&:before {
						content:"";
						opacity:0;
						width:100%;
						height:100%;
						position:absolute;
						background:rgba(0,0,0,.1);
						box-shadow:inset 0 0 25px rgba(0,0,0,.15), inset 0 0 0 5px rgba(0,0,0,.1);
						-webkit-transition: all .3s ease-in-out;
						transition: all .3s ease-in-out;	
						
					}
					i {
						position:absolute;
						opacity:0;
						color:#fff;
						font-size:20px;
						line-height:1;
						padding:10px 11px;
						margin:-10px 0 0 -20px;
						border-radius:3px;
						text-align:center;
						vertical-align:middle;
						top:50%;
						left:50%;
						background:rgba(0,0,0,.5);
						-webkit-transition: all .3s ease-in-out .1s;
						transition: all .3s ease-in-out .1s;
					}
					
					&:hover {
					
						&:before {
							opacity:1;
						}
						i {
							opacity:1;
							margin:-19px 0 0 -21px;
						}
					}
				}
					
			}
			&:last-child {
				border-bottom:none;
			}
		}

	}
}
.tags {
	font-size:90%;
	padding-top:10px;
	float:left;
	margin:7px 20px 0 0;
	>span {
		>i {
			margin:0 5px 0 3px;
		}
	}
	&:hover {
		>span {
			>i {
				.transition(all .3s ease-in-out);
			}
		}
	}
	>a {
		margin-right:5px;
	}
}

.readmore {
	margin:0 20px 0 0;
	float:left;
}

.helix-social-share{
	.helix-social-share-blog{
		margin-top: 11px;
		float: left;
		display:table;
		
		ul{
			padding: 6px;
			list-style: none;
			margin: 0;
			background:#eee;
			border-radius: 3px;
			
			li{
				display: inline-block;
				margin-right: 4px;
				
				&:last-child{
					margin-right: 0;
				}
				
				a {
					font-size: 14px;
					display: inline-block;
					text-align:center;
					text-transform: none;
					border-radius:2px;
					color:#fff;
					.transition(all .3s ease-in-out);
					
					
					> i {
						height: 24px;
						width:26px;	
						line-height: 24px;
					}

					&.facebook{
						background-color: #3b5998;  
					}
					&.twitter{
						background-color: #1da1f2;	
					}
					&.google-plus{
						background-color: #dd4b39;
					}
					&.linkedin{
						background-color: #00a0dc;
					}
		
					&:hover {
						background-color: #555;
					}
					
					
				}
				
			}
		}
		
		&.helix-social-share-article {
			margin-top: 9px;
			
			ul{
				padding: 2px;
				margin: 0;
				background:transparent;
				border-radius: 3px;
				
				li{
					display: inline-block;
					margin-right: 4px;

					
					a {
						font-size: 14px;
						border-radius:3px;
						color:#fff;
						
						> i {
							height: 24px;
							width:24px;	
							line-height: 24px;
							font-size: 17px;
							text-align:center;
						}
						&.facebook,
						&.twitter{
							padding:5px 20px 5px 18px;
						}
						&.google-plus,
						&.linkedin{
							padding:5px 10px;
						}
						
					}
				}
			}
		}
	}
}


//Article Voting
.content_rating,
.content_rating + form {
	display: none;
}

.voting-symbol{
	unicode-bidi: bidi-override;
	direction: rtl;
	font-size:1em;
	display: inline-block;

	span.star {
		/* FontAwesome 5 in Flex 3.9 */
		font-family:'Font Awesome 5 Free';
		font-style: normal;
		display: inline-block;
		

		&.active:before{
			//content: "\f005";
			font-weight:900;
		}

		&:before{
			content: "\f005";
			font-style:normal;
			font-weight:400;
			padding-right: 0.3em;
		}

	}
}

.sp-rating {

	span.star:before,
	span.star ~ span.star:before {
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}

	span.star:hover:before,
	span.star:hover ~ span.star:before {
		//content: "\f005";
		cursor: pointer;
		font-weight:900;
	}
}

.post_rating {
	margin-bottom: 20px;
	.ajax-loader,
	.voting-result {
		display: none;
	}
}

.entry-image,
.entry-gallery,
.entry-video,
.entry-audio,
.entry-link,
.entry-status,
.entry-quote {
	margin-bottom: 30px;
	position:relative;
}

.entry-image .img-caption-overlay {
	background:rgba(0,0,0,.6);
	background:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6));
	color:#fff;
	padding:5px 15px;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
}

.has-post-format-masonry {
	position: absolute;
	.post-format-masonry {
		position: absolute;
		z-index:2;
		top: 7px;
		left: 8px;
		width: 24px;
		height: 24px;
		
		> i {
			font-size: 14px;
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			color: #fff;
			margin:0 auto;
			border-radius: 2px;

		}
	}
	
}

.entry-header {
	position: relative;
	margin-bottom: 25px;

	&.has-post-format {
		margin-left: 62px;
		
		.post-format {
			position: absolute;
			top: 3px;
			left: -62px;
			display: block;
			width: 48px;
			height: 48px;
			font-size: 24px;
			line-height: 48px;
			text-align: center;
			color: #fff;
			border-radius: 3px;
		}
	}

	h1 {
		font-size:225%;
		font-weight:300;
	}

	h1, h2 {
		margin:0;
		line-height: 1.2;
		width:auto;
		padding-right:30px;
		box-shadow: inset 0 -1px 0 #ddd;
		display:table;
		word-wrap: break-word;

		&:after{
			clear: both;
			display:block;
			float:left;
			content:"";
			position:relative;
			height:2px;
			width:70%;
			margin:10px 30% 0 0;
			border-radius:2px;
			padding: 0;
		}
	}
}


.entry-link {
	padding: 50px;
	position: relative;
	z-index:0;
	border-radius:4px;
	
	a {
		h4 {
			margin: 0;
			font-size: 36px;
			line-height:1.5;
			color: #fff;
			&:hover {
				color:rgba(255, 255, 255, 0.85);
			}			
		}
	}

	&:before {
		position: absolute;
		right: -20px;
		font-size: 200px;
		/* font-family: FontAwesome; */
		font-family:'Font Awesome 5 Free';
		content: "\f0c1";
		font-weight:900;
		transform: rotate(180deg);
		top:85px;
		color: rgba(255, 255, 255, 0.1);
		z-index: -1;
	}
}

.entry-quote {
	position: relative;
	padding: 50px;
	border-radius:4px;
	color:rgba(255, 255, 255, 0.9);
	z-index:0;
	
	&:before {
		position: absolute;
		right: -10px;
		font-size: 200px;
		/* font-family: FontAwesome; */
		font-family:'Font Awesome 5 Free';
		content: "\f10e";
		font-weight:900;
		transform: rotate(320deg);
		top:120px;
		color: rgba(255,255,255,0.1);
		z-index: -1;
	}

	blockquote small {
		color: #FFF;
		font-weight: 600;		
		font-size: 20px;
	}

	blockquote {
		padding: 0;
		margin: 0;
		font-size: 16px;
		border: none;
		.fa-quote-left {
			margin-right:7px;
		}
		.fa-quote-right {
			margin-left:7px;
		}
	}
}

.newsfeed-category {
	.category {
		list-style: none;
		padding: 0;
		margin: 0;

		li {
			padding: 5px 0;
		}
	}

	#filter-search {
		margin: 10px 0;
	}
}

.category-module,
.categories-module,
.archive-module,
.latestnews,
.newsflash-horiz,
.mostread,
.form-links,
.list-striped {
	list-style: none;
	padding: 0;
	margin: 0;

	li {
		padding: 2px 0;

		h4 {
			margin: 5px 0;
		}
	}
}

/* End  Blog	
 *=======================================*/


/*=========================================
*======= 	Start  Bottom	   ============
*=======================================*/
#sp-bottom {

	.sp-module {
		.sp-module-title {
			text-transform:none;
			font-weight:400;
			font-size:24px;
		}
	}
}
/* End  Bottom	
 *=======================================*/


/*=========================================
*======= 	Start  Footer	   ============
*=======================================*/
footer {
  margin-top: auto; /* sticky footer at the bottom */
} 
#sp-footer {
	color: #fff;
	text-align: center;
	padding: 20px 0;

	a {
		color: rgba(255, 255, 255, 0.9);
		&:hover {
			color: #fff;
		}
	}
}

#sp-footer-wrapper {
	ul {
		display:inline-block;
		&.nav {
			display:inline-block;
			list-style:none;
			padding:0;
			margin:0 5px;
			li {
				display:inline-block; 
				margin:0 5px;
				a {
					display:block;
					&:hover{
						background:none;
					}
				}
			}
		}
	}
	
	.helix-framework {
		display:inline-block;

	}

	.copyright {
		display:block;
	}	
}
/* End  Footer	
 *=======================================*/


/*=========================================
*======= 	Start  Coming Soon	   ============
*=======================================*/
.sp-comingsoon {

	width: 100%;
	height: 100%;
	min-height: 100%;

	body {
		width: 100%;
		height: 100%;
		min-height: 100%;
		color: #fff;
		

		#sp-comingsoon,
		.sp-comingsoon-wrap {
			z-index:1;
			position:relative;
		}
		

		
		a.logo {
			padding:25px;
			width: 100%;
			text-align:center;
			display:table;
			margin:0 auto 0;
			background: rgba(20,20,20,.6);
			box-shadow:0 30px 200px rgba(0,0,0,.2);
			
				img.sp-default-logo {
					text-align:center;
					margin:0 0 0 -140px;
					padding:5px;
					display:inline-table;
					-webkit-transition: all 300ms .4s;
					transition: all 300ms .4s;
				}
				div.backhome {
					margin:0 auto;
					text-indent:-20px;
					padding:0 5px;
					font-size:17px;
					color:#ddd;
					line-height:20px;
					display:inline-block;
					opacity:0;
					-webkit-transition: all 500ms .5s;
					transition: all 500ms .5s;
				}
				
		+ .fa-clock-o, + .far.fa-clock {
			height:auto;
			position:fixed;
			overflow:hidden;
			top:28%;
			left:50%;
			margin:0 0 0 -184px;
			text-align:center;
			font-size:430px;
			color: rgba(0,0,0,.12);
			opacity:0.4;
			z-index:0;
			-webkit-transition: transform .7s .7s, opacity .7s .8s;
			transition: transform .7s .7s, opacity .7s .8s;
			-ms-transform: rotate(30deg);
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
		}
		
			&:hover {
				background: rgba(0,0,0,.6);

				img.sp-default-logo {
					text-align:center;
					margin:0 0 0 10px;
				}
				
				div.backhome {
					text-indent:-20px;
					opacity:1;
				}
				+ .fa-clock-o, + .fa-clock {
					opacity:0.6;
					-ms-transform: rotate(-400deg);
					-webkit-transform: rotate(-400deg);
					transform: rotate(-400deg);
				}

			}

		}
	}

	.sp-comingsoon-title {
		margin: 60px auto 0;
		font-size: 370%;
		font-weight: 300;
	}

	.sp-comingsoon-content {
		margin: 20px auto 0;
		font-size: 26px;
		font-weight: 300;
		
	}

	.days,
	.hours,
	.minutes,
	.seconds{
		display: inline-block;
		margin: 70px 15px;
	}

	.days .number,
	.hours .number,
	.seconds .number,
	.minutes .number{
		width: 125px;
		height: 120px;
		line-height: 120px;
		border: 1px solid fade(white, 50%);
		border-radius: 4px;
		display: inline-block;
		font-size: 48px;
		font-weight: 100;
		background-color: fade(black, 7%);
	}

	.days .string,
	.minutes .string,
	.seconds .string,
	.hours .string{
		display: block;
		font-size: 18px;
		margin-top: 10px;
	}

	.social-icons {
		li {
			display: inline-block;
			margin: 25px 15px 40px;

			a {
				color: rgba(255, 255, 255, 0.7);
				font-size: 24px;
				-webkit-transition: color 400ms;
				transition: color 400ms;
	
				&:hover {
					color: #fff;
				}
			}
		}
		&.with-bckg-img {
			.social-icons {
				margin:15px auto;
				padding: 3px 5px;
				border-radius:5px;
				li {
					display: inline-table;
					margin: 5px 15px 2px;
				}
			}
		}
	}
}
/* End  Comingsoon	
 *=======================================*/


/*=========================================
*======= 	Start  Error Page	   ============
*=======================================*/
.error-page {
	width: 100%;
	height: 100%;
	min-height: 100%;

	body {
		width: 100%;
		height: 100%;
		min-height: 100%;
	}

	.error-page-inner {
		height: 100%;
		min-height: 100%;
		width: 100%;
		display: table;
		text-align: center;
		>div.container {
			display: table-cell;
			vertical-align: middle;
			.btn-error {
				background:lighten(@major_color, 5%);
				color:#fff;
				margin:25px auto 40px;
				>i {
					margin-right:5px;
				}
				&:hover{
					background: @major_color;
				}
			}
				.fa-exclamation-triangle {
					font-size: 64px;
					line-height: 1;
					margin-bottom:0;
					color:lighten(@major_color, 15%);
				}
			
				.error-code {
					font-weight: 100;
					font-size: 120px;
					line-height: 1;
					color:lighten(@major_color, 10%);
					margin: -10px 0 30px 0;
					padding: 0;
				}
				.error-code-message {
					font-weight: 300;
					font-size: 40px;
					color:#777;
					line-height: 1;
					margin: 20px 0;
					padding: 0;
				}
			
				.error-message {
					font-size: 24px;
					line-height: 1;
					color:#aaa;
					margin-bottom: 30px;
				}
		}
		&.with-bckg-img {
			div.container {
				.pe-7s-compass {
					font-size: 100px;
					font-weight: 100;
					color:#fff;
					text-shadow: 1px 3px 6px fade(black, 10%);
				}
				.error-code {
					font-weight: 300;
					font-size: 130px;
					color:lighten(@major_color, 5%);
					margin: -15px 0 30px 0;
				}
				.error-code-message {
					font-weight: 300;
					font-size: 50px;
					color:#fff;
					margin: 20px 0;
					text-shadow: 2px 3px 6px fade(black, 25%);
				}
			
				.error-message {
					font-size: 24px;
					line-height: 1;
					color:#fff;
					text-shadow: 1px 2px 4px fade(black, 25%);
				}
			}
		}
	}
}
/* End  Error Page	
 *=======================================*/


/*=========================================
*======= 	Start  Mixed CSS   ==========
*=======================================*/
.sp-social-share {
	ul{
		display: block;
		padding: 0;
		margin: 20px -5px 0;

		li{
			display: inline-block;
			font-size: 24px;
			margin: 0 5px;
		}
	}
}


// profile
.dl-horizontal {
	dt {
		margin: 8px 0;
		text-align: left;
	}
}


// page-header
.page-header {
	padding-bottom: 15px;
}

// featured contact
table.category {

	width: 100%;
	thead,
	tbody{
		>tr {
			border: 1px solid #f2f2f2;	
			th,td {
				padding: 10px;
			}
		}
	}
}

//contact from
.contact-form {
	.form-actions {
		background: none;
		border: none;
	}
}

// sp portfolio
.sp-simpleportfolio .sp-simpleportfolio-filter > ul.flex > li > a:hover{
	color:#fff;
}


// Carousel (Post)
.entry-gallery.carousel {
	.carousel,
	.carousel-inner, 
	.carousel-inner .item {
		height: 100%;
	}


	.carousel-left,
	.carousel-right {
		position: absolute;
		top: 50%;
		font-size: 24px;
		width: 36px;
		height: 36px;
		line-height: 34px;
		margin-top: -18px;
		text-align: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 4px;
	
		&:hover,
		&:focus {
			color: #fff;
		}
		
		>.fa, >.fas, >.far {
			width:32px;
			text-align:center;
		}
	}
	
	.carousel-left {
		left: 10px;
		padding-right:1px;
	}
	
	.carousel-right {
		right: 10px;
		padding-left:3px;
	}
	
	&:hover {	
		.carousel-left,
		.carousel-right {
			&:hover {
				background: rgba(0, 0, 0, 0.4);
			}
		}
	}
	/* Carousel Fade effect */
	&.carousel-fade {
		.carousel-inner {
			.item {
				width:100%;
				transition-property: opacity;
				/*.transition(.6s cubic-bezier(0.65,0,0.35,1));*/
			}
			
			.item,
			.active.left,
			.active.right {
				opacity: 0;
			}
	
			.active,
			.next.left,
			.prev.right {
				opacity: 1;
			}
	
			.next,
			.prev,
			.active.left,
			.active.right {
				left: 0;
				transform: translate3d(0, 0, 0);
			}
		}
	
		.carousel-control {
			z-index: 2;
		}
	}

}


/* option to make pixeden icons bold */
.bold {
	i.pe {
		font-weight:600;
	}
	.sppb-btn {
		i {
			&.pe {
				font-weight:600;
			}
		}
	}
}


/* Desaturate effect for hover images */
.desaturate {
	li {
		&:hover {
			.overlay {
			  -webkit-filter:none;
			}
		}
	}
	a { 
		img {
			&:hover {
				.transition(all .5s ease-in-out);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%); 
				-o-filter: grayscale(100%);
				filter: grayscale(100%);
				filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
				filter: gray;
				-webkit-filter: grayscale(1);
			}
		}
	&:hover {
		overflow:hidden;
			>img.desaturate{			
				.transition(all .5s ease-in-out .1s);
				-webkit-filter: grayscale(100%) brightness(1.3);
				-moz-filter: grayscale(100%) brightness(1.3) blur(1px);
				-ms-filter: grayscale(100%) brightness(1.3) blur(1px); 
				-o-filter: grayscale(100%) brightness(1.3) blur(1px);
				filter: grayscale(100%) brightness(1.3) blur(1px);
				filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
				filter: gray;
				/*-webkit-filter: grayscale(1);*/
			}			
		}	
	}
}

/* ----- Scroll to Top ----- */
a#scroll-top {
	opacity:0;
	-moz-opacity:0;
	-webkit-opacity:0;
	filter:alpha(opacity=0);
	visibility:hidden;
	position:fixed;
	right:-40px;
	bottom:1px;
	height:54px;
	width:54px;
	line-height:54px;
	border-radius:4px;
	background:transparent;
	z-index:9;
	.transition(all .7s cubic-bezier(0.405, 0.020, 0.325, 0.950) .2s);

	&.open {
		right:10px;
		opacity:0.8;
		-moz-opacity:0.8;
		-webkit-opacity:0.8;
		filter:alpha(opacity=80);
		visibility:visible;
	}
	>i {
		color:#777;
		height:56px;
		width:56px;
		line-height:1;
		text-align:center;
		font-size:56px;
		.transition(all .3s ease-in-out);
	}
	&:hover {
		opacity:1;
		-moz-opacity:1;
		-webkit-opacity:1;
		filter:alpha(opacity=100);
		>i {
			color:#333;
		}
	}

}

/* iframe video */
.flex-video {
	position: relative;
	
	padding-top: 45px;
	padding-bottom: 56.4%;
	height: 0;
	overflow: hidden;
		&.widescreen { padding-bottom: 50%; }
		&.flex-video.vimeo { padding-top: 0; }
		&.flex-video.youtube{ padding-top: 0; }
		&.flex-video.html5{ padding-top: 0; }
		&.flex-video .video-js{ width:100%;}
		iframe{ border:none;outline:none;margin-top:-1px;}
		iframe, object, embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
}

/* AP Smart LayerSlider */
.sp-layer {
	.btn {
		border-radius:7px;
		margin-right:10px;
		font-size:210%;
		line-height:1.5;
		padding:14px 50px 15px;
	}
}

/* AcyMailing Module */
.acymailing_form {
	position:relative;
	width:100%;
	input.inputbox {
		background:transparent;
	}
	
	.acysubbuttons{
		position:absolute;
		top:-20px;
		right:-10px;
		overflow:hidden;
		
		input {
			text-indent:-9999px;
			padding:0;
			border:none;
			width:44px;
			height:34px;
			border-radius:0 4px 4px 0;
		}
		
		&::before{
			font-family: "peIcon7";
			content:"\e639";
			width:34px;
			font-size:110%;
			text-align:center;
			color:#fff;
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			pointer-events:none;
			.transition(all .2s ease);
			
		}
		&:hover {
			&::before{
				font-family: "peIcon7";
				content:"\e63a";
				transform:translate(-50%,-56%);
			}
		}	
	}
	
	.acyterms,
	.fieldacyterms {
		input {
			display:inline-block;
			margin-right:5px;
		}
	}
}
.dark {
	.acymailing_form {
		input.inputbox {
			opacity:.8;
		}
	}
	.acym_module_form {
		input.cell {
			background:transparent;
		}
	}
}

/* Acymailing Module (from version 6.x) */
.acym_module_form {
	
	position:relative;
	
	input.cell {
		width:100%;
		background:transparent;
	}
	
	.btn {
		margin:0 auto;
	}
	
	.acysubbuttons-icon {	
		position:absolute;
		top:0;
		right:0;
		color:yellow;
		
		
		input.icon_button_subscribe {
			padding:0;
			border:none;
			width:44px;
			height:34px;
			line-height:44px;
		}
	
		&::before{
			font-family: "peIcon7";
			content:"\e639";
			position:absolute;
			top:0;
			right:0;
			width:42px;
			height:34px;
			line-height:34px;
			font-size:110%;
			text-align:center;
			color:#fff;
			pointer-events:none;
			border-radius:0 4px 4px 0;
			
		}	
	}	
}

	

#system-message-container{
	.alert-error{
		color: #a94442;
		background-color: #f2dede;
		border-color: #ebccd1;
	
	}
}
/*=========================================
*======= 	Start  Login Form	 =========
*=======================================*/
.login, .registration, .registration-wrapper, .form-validate {
	
	.login-description {
		margin-bottom: 30px;
	}

	.form-group {
		margin-bottom: 20px;
		
		.group-control {
			input {
				min-height:40px;
			}
		}
	}

	.form-links {
		display: inline-block;
		margin: 0 10px;

		a {
			font-weight: 600;
		}
	}

	.form-footer {
		margin: 30px auto;
		padding-top: 20px;
		border-top: 1px solid #e5e5e5;
		text-align: center;
	}

	img {
		display: inline-block;
		margin: 20px 0;
	}
	
	.title{
		
		margin:35px auto;
		
		i.pe {
			font-size:36px;
			line-height:37px;
			vertical-align:top;
			margin:-1px 8px 0 0;
		}
	}
	fieldset {
		
		margin:35px auto 15px;
		
		&:first-child {
			margin:10px auto;
		}
			
		.field-calendar {

			button.btn {
				margin-top:1px;
				box-shadow: 0 0 0 1px #ccc;
				background:#f8f8f8;
				
				&:hover {
					box-shadow: 0 0 0 1px #bbb;
					background:#f5f5f5;
				}
			}
			
			.icon-calendar {
				&:before {
					font-family:'Font Awesome 5 Free';
					content:"\f073";
					font-style:normal;
					font-weight:400;
					font-size:1.25em;
					line-height:1.05;
					//margin:-2px 6px 0 0;
					color:#777;
					text-shadow:0 1px 0 #fff;
				}
			}
			
			.calendar-container table {
				max-width: 300px;
			}
		}
	}
	
	
	/* Fix for TOS ("Terms of Service") in Registration */
	label#jform_profile_tos-lbl, #jform_terms_terms-lbl, #jform_consentbox-lbl {
		position:relative;
		margin:4px 20px 0 0;
		float:left;
		display:inline-block;
	
		a {
			display:inline-table;
			position:relative;
			color:@text_color;
			padding:2px 1px;
			
			&:before {
				font-family:'Font Awesome 5 Free';
				content:"\f15c";
				font-style:normal;
				font-weight:400;
				font-size:1.1em;
				line-height:1.2;
				margin:-4px 6px 0 0;
				color:#888;
			}
			
			&:hover, &:hover:before {
				color:@major_color;
			}
		}
		span.star {
			//color:red;
		}
		
		& ~ div {
			margin:15px 0 25px;
		}
	
	}
	
	/* Privacy Consent (from Joomla 3.9) */
		label#jform_privacyconsent_privacy-lbl {
			position:relative;
			margin:4px 20px 0 0;
			float:left;
			display:inline-block;

		
			a {
				display:inline-table;
				position:relative;
				color:@text_color;
				padding:2px 1px;
				
				
				&:before {
					font-family:'Font Awesome 5 Free';
					content:"\f15c";
					font-weight:400;
					font-size:1.1em;
					line-height:1.2;
					margin:-4px 6px 0 0;
					color:#888;
				}
				
				&:hover, &:hover:before {
					color:@major_color;
				}
			}
			span.star {
				position:relative;
			}
			
		}
	/* TOS Fieldset */
	#jform_profile_tos, #jform_privacyconsent_privacy, #jform_terms_terms {
	
		input[type="radio"] {
			opacity: 0;
			visibilty:hidden;
			margin:8px 0 0 3px;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
		label {
			position: relative;
			display: inline-block;
			padding: 2px 8px;
			text-indent:18px;
			
			&::before,
			&::after {
				position: absolute;
				content: "";
				display: inline-block;
				.transition(all .3s ease);
			}
			
			/* Outer box of the fake checkbox*/
			&::before{
				height: 18px;
				width: 18px;
				border: 1px solid #aaa;
				border-radius: 3px;
				left: 0px;
				top: 6px;
			}
			
			/* fake checkbox */
			&::after{
				height: 6px;
				width: 11px;
				border:0;
				border-left: 2px solid white;
				border-bottom: 2px solid white;
				box-shadow:0 1px 0 0 rgba(0,0,0,0.25);
				transform: rotate(-45deg);
				left: 4px;
				top: 11px;	
			}
			&:hover {
				&::before{
					border: 1px solid @major_color;
				}
			}
		}
		
		/*Hide the checkmark by default*/
		input[type="radio"] + label::after {
			content: none;
		}
		
		/*Unhide on the checked state*/
		input[type="radio"]:checked + label::after {
			content: "";
		}
		
		/*Adding focus styles on the outer-box of the fake checkbox*/
		input[type="radio"]:checked + label::before {
			background:lighten(@major_color, 10%);
			border: 1px solid darken(@major_color, 10%);
		}	
	}
}

/* Some fixes for SqueezeBox (iframe popup) */
#sbox-window {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding:0;
}
.sbox-content-iframe#sbox-content, .sbox-content-iframe{
	overflow-y:hidden;
	padding:3%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#sbox-content iframe {
	width:100%;
}

/* Fix for Joomla 3.9.0 - hidding Joomla's rating/voting */
.content_rating, .unseen.element-invisible, span.content_vote {
	visibility:hidden;
	display:none;
	
	~ img {
		visibility:hidden;
		display:none;
	}
}
img[src$="rating_star.png"],
img[src$="rating_star_blank.png"] {
	visibility:hidden;
	display:none;
}

/* Checkbox (custom) */
#login, #login-form, .login {

	input[type="checkbox"] {
		opacity: 0;
		visibility:hidden;
		position:absolute;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		width:1px;
		height:1px;
	}
	
	label {
		position: relative;
		display: inline-block;
		vertical-align:middle;
		padding: 2px 8px;
		text-indent:18px;
		cursor: pointer;
		
		&::before,
		&::after {
			position: absolute;
			content: "";
			//display: inline-block;
			.transition(all .3s ease);
		}

		&::before{
			height: 18px;
			width: 18px;
			border: 1px solid #aaa;
			border-radius: 3px;
			left: 0;
			top: 5px;
		}
		
		&::after{
			height: 6px;
			width: 11px;
			border:0;
			border-left: 2px solid white;
			border-bottom: 2px solid white;
			box-shadow:0 1px 0 0 rgba(0,0,0,0.25);
			transform: rotate(-45deg);
			left: 4px;
			top: 10px;	
		}
		&:hover {
			&::before{
				border: 1px solid @major_color;
			}
		}
	}
	
	input[type="checkbox"] + label::after {
		content: none;
	}
	
	input[type="checkbox"]:checked + label::after {
		content: "";
	}
	
	input[type="checkbox"]:checked + label::before {
		background:lighten(@major_color, 10%);
		border: 1px solid darken(@major_color, 10%);
	}										
}

/* Bootstrap's Checkbox */
.checkbox {

	label {

		cursor: pointer;
		
		input[type="checkbox"] {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			visibility:hidden;
			width: 22px;
			height: 18px;
			line-height:1;
			top:3px;
			background:transparent;
			border:none;
			outline:none;
			cursor: pointer;
			position:relative;
			  
		  
		  	&::before,
			&::after {
				position: absolute;
				content: "";
				//display: inline-block;
				.transition(all .3s ease);
			}
			&::before{
				visibility: visible;
				opacity:1;
				height: 18px;
				width: 18px;
				border: 1px solid #aaa;
				border-radius: 3px;
				left: 0;
				top: 0;
			}
			
			&::after{
				visibility: hidden;
				opacity:0;
				height: 6px;
				width: 11px;
				border:0;
				border-left: 2px solid white;
				border-bottom: 2px solid white;
				box-shadow:0 1px 0 0 rgba(0,0,0,0.25);
				transform: rotate(-45deg);
				left: 4px;
				top: 5px;	
			}
			
			&:hover {
				&::before{
					border: 1px solid @major_color;
				}
			}
			
			&:checked {
				&::before {
					background:lighten(@major_color, 10%);
					border: 1px solid darken(@major_color, 10%);
					visibility: visible;
					opacity:1;
				}
				&::after{
					visibility: visible;
					opacity:1;
				}
			}
		}
	}									
}

.form-links{
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
}
/* End  Login Form
*=======================================*/
/* ************** 	 START POPUP (MODAL) LOGIN 	  *************** */
.modal-login {
	text-align: center;
	
	.modal-content {
		border:1px solid rgba(0,0,0,.1);
		-webkit-box-shadow:0 4px 20px rgba(0,0,0,.35);
		box-shadow:0 4px 20px rgba(0,0,0,.35);
	}
}

.modal-backdrop {
	background:rgba(0,0,0,0.45);
	
	&.in {
		z-index:110; /* Fix for Sticky Header to avoid Bootstrap modal window to be grayed out [closed] */
	}
	
	
}

@media screen and (min-width: 768px) { 
	.modal:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}
}

.modal-login .modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}

.top-divider {
	line-height:1.2;
	position:absolute;
	top:0;
	width:1px;
	height:100%;
	padding:0;
	margin:0;
	opacity:0.2;
	border:0;
	border-left:1px solid #999;
}

.ap-modal-login{
	margin:-1px 0 -7px;
	padding:0;
	
	.ap-login,
	.ap-signin{
		margin:0;
		padding:0;
		display:block;
		a{
			padding:0 10px;
			line-height:20px;
			display:inline-block;
			vertical-align:top;
			margin-top:0;
			
			i{
				&.pe {
					font-size: 22px;
					line-height:20px;
					margin:0 4px;
					vertical-align:middle;
				}
			}
			.info-content {
				vertical-align:middle;
		
			}
		}
	}
	.title{
		
		margin:0 auto;
		
		i.pe {
			font-size:36px;
			line-height:37px;
			vertical-align:top;
			margin:-1px 8px 0 0;
		}
	}
	.modal-content{
	
		padding: 30px;
		font-size: 14px;
		.modal-header{
			border: none;
		}
		.modal-body{
			margin-bottom: 30px;
			
			.pretext {
				margin-bottom: 20px;
			}

			.posttext {
				margin-top: 20px;
			}
			// Secret Key field
			.controls {
				margin: 20px auto 0;
				
				.input-prepend,
				.input-append {
				
					.add-on {
						width:50px;
						height:44px;

						span {
							line-height:32px;
							font-size:16px;
							color:#909090;
							
						}
						&:hover {
							span {
								color:#555;
							}
						}
						
					}
				}
				input.form-control {
					min-height:44px;
					width:100%;
				}
			}
			
			input[type="text"]{
				margin-bottom: 20px;
			}
			.button-wrap{
				position: relative;
				line-height: 42px;
				float:left;
				
			}
			input[type="submit"]{
				z-index: 1;
				/*padding:10px 30px;*/
			}
			.input-block-level {
				min-height:44px;
			}
			.remember-wrap{
				width: 100%;
				overflow: hidden;
				min-height: 70px;
				text-align: left;
				label{
					margin: 20px 0 0;
					vertical-align: middle;
				}
			}
			
			
			.forget-name-link{
				max-height: 30px;
				line-height: 30px;
				font-weight: 400;
				margin-left: 10px;
				padding-top: 5px;
				float:left!important;
				a{
					font-weight: 600;
				}
			}
		}
		.modal-footer{
			max-height: 40px;
			line-height: 40px;
			font-weight: 500;
			text-align: center;
			
		}
	}
	.modal-header{
		.title{
			text-align: left;
			margin-top: 0;
		}
		.close{
			margin-top: -2px;
			position: absolute;
			right: 10px;
			top: 10px;
			padding: 10px;
			text-align: center;
			.transition(.3s);
			
			i{
				margin-right: 0;
				font-size:32px;
			}
		}
	}
	
	.dropdown {
		
		.dropdown-menu {
			position: absolute;
			opacity:0;
			visibility:hidden;
			z-index: 1000;
			display: block;
			float: left;
			right:0;
			left:auto;
			min-width: 200px;
			border: 1px solid #ccc;
			border: 1px solid rgba(0, 0, 0, .12);
			border-radius: 0 0 4px 4px;
			-webkit-box-shadow: 0 4px 9px rgba(0, 0, 0, .12);
			box-shadow: 0 4px 9px rgba(0, 0, 0, .12);
			.transition(all 0.35s cubic-bezier(0.225, 0.025, 0.225, 1.225));
			-webkit-transform: translateY(-20px) scale(0.9) perspective(800px) rotateX(30deg);
			-moz-transform: translateY(-20px) scale(0.9) perspective(800px) rotateX(30deg);
			-ms-transform: translateY(-20px) scale(0.9) perspective(800px) rotateX(30deg);
			-o-transform: translateY(-20px) scale(0.9) perspective(800px) rotateX(30deg);
			transform: translateY(-20px) scale(0.9) perspective(800px) rotateX(30deg);
		}
	}
	.open {
		z-index:13999;
		.dropdown-menu {
			opacity:1;
			visibility:visible;
			position:absolute;
			z-index:13999;
			-webkit-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-moz-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-ms-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			-o-transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
			transform: translateY(0) scale(1) perspective(1000px) rotateX(0deg);
		}
	}
	button {
		background:transparent;
	}
	
}

//My Profile
.profile {
	fieldset {
		
		legend {
		   line-height:1.5;
		}
		.dl-horizontal {
			margin:0 auto 45px;
			dt, dd {
				line-height:27px;
				vertical-align:middle;
				padding:3px;
				margin:0 auto 5px;
			}
			dt {
				min-width:25%;
				display:block;
			}
		}
	}
}

//view-profile
.view-profile{
	.select-menu select{
		display: block;
	}
	button{
		&:focus{
			outline: none;
		}
	}
	a[title="Cancel"]{
		background-color: lighten(@gray, 20%);
		color:#fff;
		&:hover{
			background-color: lighten(@gray, 10%);
		}
	}
}

//my-account-menu
.ap-my-account-menu{
	position: relative;
	cursor: pointer;
	padding:0;
	
	
	.signin-img-wrap{
		float: left;
		height:20px;
		line-height:21px;
		i{
			&.pe {
				font-size: 20px;
				margin:0 0 0 4px;
				line-height:21px;
				vertical-align:middle;
			}
		}
		img{
			display: inline-block;
		}
	}
	.info-wrap{
		//float: left;
		display:inline-block;
		margin-left: 8px;
		margin-bottom:7px;
		line-height:24px;
		.info-text {
			font-size:14px;
			
		}
	}
	
	ul>li{
		//overflow: hidden;
	}
	ul.menu{
		padding:5px 0;
		>li{
			border: none;
			min-width: 200px;
			border-bottom:1px solid rgba(189,189,189,0.2);
			
			a {
				i {
					
					width:22px;
					line-height:18px;
					display:inline-block;
					vertical-align:top;	
					
					&.fa, &.fas, &.far {
						margin-top:9px;
						font-size:17px;
					}
					&.pe {
						margin-top:8px;
						font-size:18px;
					}
				}
			}
	
			&:last-child {
				border-bottom: none;
				a{
					padding-bottom:6px;
					i.pe {
						font-size:22px;
						width:25px;
						line-height:20px;
					}
				}	
			}
		}
		a {
			display: block;
			padding: 4px 20px;
			font-size: 14px;
			font-weight: 400;
			cursor: pointer;
			
			&:before{
				display: none;				
			}
		}
	}
	
}

// Login, Registration, Reset, Remind
.login-wrapper,
.registration-wrapper,
.reset-wrapper,
.remind-wrapper {
	>i {
		&.pe {
			position:absolute;
			top:7vh;
			left:2vw;
			font-size:20vw;
		}
	}
	.group-control {
		input {
			min-height: 45px;
		}
	}
}

.login-wrapper {
	>i {
		&.pe {
			-webkit-transform: rotate(28deg);
			transform: rotate(28deg);
			top:9vh;
			right:8vw;
			left:auto;
			font-size:22vw;
		}
	}
}
.remind-wrapper { 
   margin: 10vh auto;
   	>i {
		&.pe {
			font-size:17vw;
			left:2vw;
		}
	}
}
.reset-wrapper{ 
	margin: 10vh auto;
	>i {
		&.pe {
			left:7vw;
		}
	}
}

/* ************   START Pre-Loader CSS   ************** */
/* **************************************************** */

.sp-pre-loader {
    position: fixed;
	left: 0;
    top: 0;
	width: 100vw;
	height:100vh;
    z-index: 999;
	

    // Clock loader
    .sp-loader-clock {
        border-radius: 60px;
        bottom: 0;
        height: 80px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 80px;
        &:after{
            content: "";
            position: absolute;
            top:2px;
            left: 48%;
            height: 38px;
            width: 4px;
            border-radius: 5px;
            -webkit-transform-origin: 50% 97%;
            transform-origin: 50% 97%;
            -webkit-animation: grdAiguille 2s linear infinite;
            animation: grdAiguille 2s linear infinite;
        }

        &:before{
            content: "";
            position: absolute;
            top:6px;
            left: 48%;
            height: 35px;
            width: 4px;
            border-radius: 5px;
            -webkit-transform-origin: 50% 94%;
            transform-origin: 50% 94%;
            -webkit-animation: ptAiguille 12s linear infinite;
            animation: ptAiguille 12s linear infinite;
        }
    }
    // Circle Loader (default)
    .sp-loader-circle{
        position: absolute;
        height: 50px;
        width: 50px;
        border-radius: 50px;
        left: 0;
        top: -4px;
        right: 0;
        bottom: 0;
        margin: auto;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: loader1 1s linear infinite;
        animation: loader1 1s linear infinite;
        &:after{
			
			content: "";
			position: absolute;
			top: -4px;
			left: -4px;
			height: 50px;
        	width: 50px;
			border-radius: 50px;
			border: 4px solid transparent;
		 
        }
    }
	
	
	// Flip Loader
	.loader-flip{
		position: absolute;
		width: 100px;
		height: 100px;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		-webkit-perspective: 120px;
		-moz-perspective: 120px;
		-ms-perspective: 120px;
		perspective: 120px;
		
		  &:after{
			content: "";
			position: absolute;
			left: 25px;
			top: 25px;
			width: 50px;
			height: 50px;
			border-radius:4px;
			-webkit-animation: flip 1s linear infinite;
			animation: flip 1s linear infinite;
		}
	}
	
    // Bubble Loop Loader
    .sp-loader-bubble-loop{
        position: absolute;
        width: 12px;
        height: 12px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 12px;
        -webkit-transform-origin:  50% 50%;
        transform-origin:  50% 50% ;
        -webkit-animation: loader6 1s ease-in-out infinite;
        animation: loader6 1s ease-in-out infinite;
        &:before{
            content: "";
            position: absolute;
            top: 0px;
            left: -25px;
            height: 12px;
            width: 12px;
            border-radius: 12px;
        }
        &:after{
            content: "";
            position: absolute;
            top: 0px;
            left: 25px;
            height: 12px;
            width: 12px;
            border-radius: 12px;
        }
    }
    // Circle Loader Two
    .circle-two {
        bottom: 0;
        height: 100px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
    }
    .circle-two > span,
    .circle-two > span:before,
        .circle-two > span:after {
        content: "";
        display: block;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    .circle-two > span {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-left-color: transparent;
        -webkit-animation: effect-2 2s infinite linear;
        -moz-animation: effect-2 2s infinite linear;
        -ms-animation: effect-2 2s infinite linear;
        -o-animation: effect-2 2s infinite linear;
        animation: effect-2 2s infinite linear;
    }
    .circle-two > span:before {
        width: 75%;
        height: 75%;
        border-right-color: transparent;
    }
    .circle-two > span:after {
        width: 50%;
        height: 50%;
        border-bottom-color: transparent;
    }

    // Audio Wave 2 Loader
    .wave-two-wrap{
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 50%;
        width: 90px;
    }
    .wave-two {
        margin: 0;
        list-style: none;
        width: 90px;
        position: relative;
        padding: 0;
        height: 10px;
    }
    .wave-two li {
        position: absolute;
        width: 2px;
        height: 0;
        bottom: 0;
    }

    .wave-two li:nth-child(1) {
        left: 0;
        -webkit-animation: sequence1 1s ease infinite 0;
        animation: sequence1 1s ease infinite 0;
    }
    .wave-two li:nth-child(2) {
        left: 15px;
        -webkit-animation: sequence2 1s ease infinite 0.1s;
        animation: sequence2 1s ease infinite 0.1s;
    }
    .wave-two li:nth-child(3) {
        left: 30px;
        -webkit-animation: sequence1 1s ease-in-out infinite 0.2s;
        animation: sequence1 1s ease-in-out infinite 0.2s;
    }
    .wave-two li:nth-child(4) {
        left: 45px;
        -webkit-animation: sequence2 1s ease-in infinite 0.3s;
        animation: sequence2 1s ease-in infinite 0.3s;
    }
    .wave-two li:nth-child(5) {
        left: 60px;
        -webkit-animation: sequence1 1s ease-in-out infinite 0.4s;
        animation: sequence1 1s ease-in-out infinite 0.4s;
    }
    .wave-two li:nth-child(6) {
        left: 75px;
        -webkit-animation: sequence2 1s ease infinite 0.5s;
        animation: sequence2 1s ease infinite 0.5s;
    }

    // Audio Wave Loader
    .sp-loader-audio-wave {
        width: 3em;
        height: 2em;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
        animation: audioWave 1.5s linear infinite;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

    // Loader With Logo
    .sp-loader-with-logo{
        top: 0;
        left: 0;
        width: 100%;
        height: 110px;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        position: absolute;
        .logo {
            display: inline-block;
            width: auto;
			> img {
				max-height:100%;
			}
        }
        .line{
            bottom: 0;
            height: 3px;
            left: 0;
            position: absolute;
            top: auto;
        }
    }
}

/* *************   END:: Pre-Loader CSS   ************* */
/* **************************************************** */

/* ************   START Loader Animation   ************ */
/* **************************************************** */

@-webkit-keyframes flip {
	0% {-webkit-transform: rotate(0);}
	50% {-webkit-transform: rotateY(180deg);}
	100% {-webkit-transform: rotateY(180deg)  rotateX(180deg);}
}

@keyframes flip {
	0% {transform: rotate(0);}
	50% {transform: rotateY(180deg);}
	100% {transform: rotateY(180deg)  rotateX(180deg);}
}

// Clock Loader Animation
@-webkit-keyframes grdAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes grdAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
@-webkit-keyframes ptAiguille{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}
@keyframes ptAiguille{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

// Circle Loader Animation
@-webkit-keyframes loader1{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}

@keyframes loader1{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

// Bubble Loop Loader Animation
@-webkit-keyframes loader6{
    0%{-webkit-transform:rotate(0deg);}
    50%{-webkit-transform:rotate(180deg);}
    100%{-webkit-transform:rotate(180deg);}
}
@keyframes loader6{
    0%{transform:rotate(0deg);}
    50%{transform:rotate(180deg);}
    100%{transform:rotate(180deg);}
}

// Ring Loader Animation
@keyframes rotate-360 {
    from {
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// Audio Wave Loader Animation
@keyframes audioWave {
    25% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    37.5% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em;
    }
    50% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em, 0.5em 0.25em;
    }
    62.5% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em, 0.5em 0.25em;
    }
    75% {
        background: linear-gradient(@preloader_tx, @preloader_tx) 0 50%, linear-gradient(@preloader_tx, @preloader_tx) 0.625em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.25em 50%, linear-gradient(@preloader_tx, @preloader_tx) 1.875em 50%, linear-gradient(@preloader_tx, @preloader_tx) 2.5em 50%;
        background-repeat: no-repeat;
        background-size: 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 0.25em, 0.5em 2em;
    }
}

// Circle 2 Loader Animation
@-webkit-keyframes effect-2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes effect-2 {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

// Audio Wave Loader 2 animation
@keyframes sequence1 {
    0% {
        height: 10px;
    }
    50% {
        height: 50px;
    }
    100% {
        height: 10px;
    }
}
@keyframes sequence2 {
    0% {
        height: 20px;
    }
    50% {
        height: 65px;
    }
    100% {
        height: 20px;
    }
}

@keyframes rot1 {
    100% {
        transform: skew(-10deg) translateX(50px) rotate(405deg);
    }
}
@-webkit-keyframes rot1 {
    100% {
        -webkit-transform: skew(-10deg) translateX(50px) rotate(405deg);
    }
}
@keyframes rot2 {
    100% {
        transform: skew(-10deg) rotate(525deg);
    }
}
@-webkit-keyframes rot2 {
    100% {
        -webkit-transform: skew(-10deg) rotate(525deg);
    }
}
@keyframes rot3 {
    100% {
        transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg);
    }
}
@-webkit-keyframes rot3 {
    100% {
        -webkit-transform: skew(-10deg) translateX(20px) translateY(-50px) rotate(645deg);
    }
}

@keyframes width {
    10% {
        width: 10%;
    }
    20% {
        width: 20%;
    }
    30% {
        width: 30%;
    }
    40% {
        width: 40%;
    }
    50% {
        width: 50%;
    }
    60% {
        width: 60%;
    }
    70% {
        width: 70%;
    }
    80% {
        width: 80%;
    }
    90% {
        width: 90%;
    }
    100% {
        width: 100%;
    }
}

/* ***********   END:: Loader Animation   ************* */
/* **************************************************** */

/* **********   END:: Helix 1.5 Loader Css   ********** */
/* **************************************************** */

/* ************ START Animations Header *************** */
/* **************************************************** */

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

@-webkit-keyframes fadeInDown{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,-50px,0);
        transform:translate3d(0,-50px,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
@keyframes fadeInDown{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,-50px,0);
        transform:translate3d(0,-50px,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.fadeInDown{
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown;
}

@-webkit-keyframes fadeIn{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,30px,0);
        transform:translate3d(0,30px,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
@keyframes fadeIn{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,30px,0);
        transform:translate3d(0,30px,0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.fadeIn{
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn;
}


/* ************ END:: Animations Header *************** */
/* **************************************************** */

/* *********   START Responsive Media Query   ********* */
/* **************************************************** */
//Tablet
@media screen and (min-width: 768px) and (max-width: 1199px){
    .scrollup {
        bottom: 25px;
        right: 25px;
    }
    #sp-header {
        top: 65px;
    }
}
//Mobile Device
@media screen and (min-width: 320px) and (max-width: 767px){
    //Top social
    ul.social-icons {
        margin: 0;
        width: 100%;
        text-align: center;
        > li{
            // margin: 5px;
        }
    }
    .sp-contact-info {
        margin: 0;
        text-align: center;
        width: 100%;
        li{
            //margin: 0 5px;
            font-size: 89%;
        }
    }
}

/* *********   END:: Responsive Media Query   ********* */
/* **************************************************** */

/* Edit Article (added from Flex 2.7, for Joomla 3.8) */
.edit-article {
	margin:0;
	float:right;
	display:inline-block;
	position:relative;
	width:100px;
	z-index:2;
	background:transparent;
	
	.btn.dropdown-toggle {
		border:1px solid lighten(@major_color, 5%);
		background:transparent;
		color:#777;
		padding:6px 10px; 
		margin-top:4px;
		
		&:before {
			font-family: 'peIcon7';
			content: "\e62c";
			font-size:21px;
			line-height:24px;
			margin:0 7px 0 10px;
			
		}
		&:hover {
			border:1px solid darken(@major_color, 5%);
			color:#444;
		}
		
		.icon-cog {
			display:none;
		}
		.caret {
			margin:12px 8px 0 0;
			vertical-align:top;
		}
	
	}

}


/* Lazy Loading for images. From Flex 3.5 */
.lazyload,.lazyloading {
	opacity: 0;
	height:100%;
}
.lazyloaded {
	opacity: 1;
	.transition(opacity 650ms ease);
}