/**
 * @author JoomDev https://www.joomdev.com/
 * @copyright Copyright (C) 2008 - 2018 Joomdev.com. All rights reserved.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPLv2 or later
*/

/*----- Body style -----*/
body{
	color: @text_color;
}

.body-wrapper{
	background: url(../images/top-banner.jpg) no-repeat center top;
}

/*----- Button style -----*/
.qx-btn{
	color: #fff;
	border: none;
	font-size: 20px;
	font-weight: 600;
	padding: 15px 40px;
	&.qx-btn-primary{
		background: @major_color;
		&:hover, &:focus, &:active{
			background: darken(@major_color , 10%);
		}
	}
	&.qx-btn-default{
		color: #fff;
		background: @secondary_color;
		&:hover, &:focus, &:active{
			color: #fff;
			background: darken(@secondary_color , 10%);
		}
	}
	&.qx-btn-info{
		color: #273140;
		border: 1px solid #ddd;
		background: transparent;
		&:hover, &:focus, &:active{
			border: 1px solid #ddd;
			color: #fff;
			background: @secondary_color;
		}
	}
}

::-moz-selection {
    color: #fff;
    background: darken(@secondary_color, 10%);
}

::selection {
    color: #fff;
    background: darken(@secondary_color, 10%);
}

.mfp-wrap{
	z-index: 99999;
}

.scrollup{
	right: 40px;
	bottom: 40px;
	border-radius: 4px;
	border: darken(@major_color, 10%);
	background: darken(@major_color, 10%);
	&:hover, &:focus{
		border: darken(@major_color, 15%);
		background: darken(@major_color, 15%);
	}
	&:before{
		color: #fff;
	}
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	line-height: normal;
}

.highlight {
    color: #fff;
    padding: 0 5px;
    background: @secondary_color;
}

/* Module class suffix CSS */
.secondary-bg{
	background: @secondary_color;
}

.sp-module {
	.sp-module-title{
		font-size: 25px;
		font-weight: 600;
		line-height: 38px;
		text-align: left;
		text-transform: none;
	}
}

/* iCheck plugin Minimal skin, green
----------------------------------- */
.icheckbox_minimal-green,
.iradio_minimal-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(../images/checkbox.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_minimal-green {
    background-position: -144px 0;
}
    .icheckbox_minimal-green.hover {
        background-position: -144px 0;
    }
    .icheckbox_minimal-green.checked {
        background-position: -168px 0;
    }
    .icheckbox_minimal-green.disabled {
        background-position: -60px 0;
        cursor: default;
    }
    .icheckbox_minimal-green.checked.disabled {
        background-position: -80px 0;
    }

.iradio_minimal-green {
    background-position: -100px 0;
}
    .iradio_minimal-green.hover {
        background-position: -120px 0;
    }
    .iradio_minimal-green.checked {
        background-position: -140px 0;
    }
    .iradio_minimal-green.disabled {
        background-position: -160px 0;
        cursor: default;
    }
    .iradio_minimal-green.checked.disabled {
        background-position: -180px 0;
    }

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
    .icheckbox_minimal-green,
    .iradio_minimal-green {
        background-image: url(../images/checkbox@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px;
    }
}

/*----- Breadcrumb -----*/

.sp-page-title{
	.breadcrumb {
		margin: 20px 0 0;
		border-radius: 0;
		&:before{
			background: #fff;
			content: "";
			display: block;
			float: left;
			height: 2px;
			margin-right: 5px;
			position: relative;
			top: 13px;
			width: 30px;
		}
		li + li:nth-child(2){
			&:before{
				content: none;
			}
		}
	}
}

/*----- Project Features -----*/
.project{
	li{
		line-height: 30px;
		i.fa{
			color: @major_color;
			line-height: 30px;
		}
		a{
			display: inline-block;
			margin: 0 5px 0 10px;
			text-align: center;
		}
	}
}

/*----- Class name here -----*/

/* 1) portfolio-img-style */

/* ------------end--------- */

.qx-element-carousel{
	.slick-slide{
		margin: 0px 15px;
	}
	.slick-dots{
		bottom: auto;
		margin-top: 30px;
		position: relative;
		li{
			height: 5px;
			width: 30px;
			margin: 0px 5px;
			button{
				position: relative;
				&:before{
					top: 0px;
					left: 0px;
					height:5px;
					right: 0px;
					opacity: 1;
					width: 30px;
					content: "";
					display: block;
					border: 1px solid ;
					position: absolute;
				}
			}
			&.slick-active{
				button{
					&:before{
						opacity: 1;
						background: currentcolor;
					}
				}
			}
		}
	}
}

/*----- Social Icon -----*/
.social-links{
	> a[href*="pinterest.com"]::before{
		content: "\f0d2";
	}
}

.social-icon{
	li{
		a[href*="facebook.com"]{
			color: #3b5998;
		}
		a[href*="twitter.com"]{
			color: #55acee;
		}
		a[href*="instagram.com"]{
			color: #e4405f;
		}
		a[href*="plus.google.com"]{
			color: #dd4b39;
		}
		a[href*="in.linkedin.com"]{
			color: #0077B5;
		}
		a[href*='youtube.com']{
			color:#e62117
		}
		a[href*='behance.net']{
			color:#1478ff
		}
		a[href*='dribbble.com']{
			color:#f16396
		}
		a[href*='flickr.com']{
			color:#fe0084
		}
		a{
			font-size: 18px;
		}
	}
}

/*----- Media -----*/
.media{
	margin: 0px;
	.media-left,.media-right{
		width: 70px;
		float: left;
	}
	.media-body{
		h4.media-heading{
			font-weight: 600;
		}
	}
}

/*----- Image Absolute Style -----*/
.service-img-style{
	position: relative;
	.qx-element-image{
		img{
			left: 0;
			margin: 0 auto;
			max-width: 450px;
			position: absolute;
			right: 0;
			top: -150px;
			width: 100%;
		}
	}
}

/*----- Page Title -----*/
#sp-page-title{
	.sp-page-title{
		padding: 50px 0px 30px;
		background: transparent;
		h2{
			
		}
	}
}

/*----- Header -----*/
header#sp-header{
	height: auto;
	padding: 10px 0;
	box-shadow: none;
	background: transparent;
	&.menu-fixed{
		background: @secondary_color;
		border-bottom: 1px solid darken(@secondary_color, 5%);
	}
}

/*----- Menu Style -----*/
ul.sp-megamenu-parent{
	padding: 10px 0 0;
	> li{
		> a, > span{
			color: #fff;
			line-height: 60px;
			font-size: inherit;
			text-transform: none;
		}
		&.sp-has-child:hover{
			&:after{
				width: 10px;
				content: "";
				height: 10px;
				margin: 0 auto;
				display: block;
				border-bottom: 10px solid #fff;
				border-left: 10px solid rgba(0, 0, 0, 0);
				border-right: 10px solid rgba(0, 0, 0, 0);
			}
		}
	}
	/* Dropdowns Menu */
	.sp-dropdown{
		padding: 10px 0;
		background: #fff;
		border-radius: 5px;
		.sp-dropdown.sp-dropdown-sub .sp-dropdown-inner{
			box-shadow: none;
		}
		.sp-dropdown-inner{
			padding: 0;
			background: none;
			box-shadow: none;
			> li{
				&.active{
					> a{
						color: @secondary_color;
					}
				}
				a{
					color: #484848;
					font-size: 16px;
					padding: 12px 20px;
					font-weight: normal;
					&:hover{
						color: @secondary_color;
						background: transparent;
					}
				}
			}
			ul.sp-dropdown-items{
				> li.sp-menu-item{
					>a, >span{
						padding: 10px 20px;
						transition: all .35s ease-in-out;
					}
					&:not(:last-child){
						border-bottom: 1px solid #ddd;
					}
					&.active, &:hover{
						>a, >span{
							color: #fff;
							padding-left: 30px;
							background: @secondary_color;
						}
						.fa{
							color: @major_color;
						}
					}
				}
			}
			.sp-menu-item{
				.fa{
					bottom: 2px;
					color: #484848;
					font-size: 10px;
					position: relative;
					padding-right: 10px;
				}
			}
		}
		/* Mega Menu */
		&.sp-dropdown-mega{
			padding: 30px;
			a.sp-group-title{
				color: #484848;
				background: none;
				text-transform: none;
				.fa{
					top: 1px;
					font-size: 21px;
					position: relative;
					padding-right: 5px;
					color: @secondary_color;
				}
				&:hover{
					color: #484848;
					background: none;
				}
			}
			.active a.sp-group-title{
				color: #484848;
			}
			ul.sp-dropdown-items{
				li.sp-menu-item{
					&:not(:last-child){
						margin-bottom:5px;
						border-bottom: none;
					}
					a{
						border-radius: 10px;
						-webkit-border-radius: 10px;
						transition: all .35s ease-in-out;
					}
					&:hover{
						a{
							color: #fff;
							background: @secondary_color;
							.fa{
								color: @major_color;
							}
						}
					}
				}
			}
		}
	}
}

/*----- Mobile Menu -----*/
a#offcanvas-toggler{
    font-size: 23px;
    background: #fff;
    margin-top: 24px;
    padding: 3px 10px;
    border-radius: 2px;
    line-height: normal;
	> i{
		color: @secondary_color;
		&:hover, &:focus{
			color: @secondary_color;
		}
	}
}

div.offcanvas-menu{
	background: #fff;
}

/*----- Default style -----*/
.default-offcanvas{
	.offcanvas-menu{
		color:#333;
		background:#fff;
		.close-offcanvas{
			color:#000;
			border:none;
			.fa{
				font-size: 25px;
			}
		}
		.offcanvas-inner{
			padding:20px 0 0;
			.sp-module{
				&:first-child{
					
				}
				ul.nav.menu{
					margin:0 -30px;
					> li{
						padding:0 10px;
						a{
							color:#333;
							text-transform: none;
							&:before{
								display: none;
							}
						}
						.offcanvas-menu-toggler{
							color:#333;
							font-size:20px;
							padding:7px 20px;
						}
						&.active, &:hover, &:focus{
							a{
								color:@major_color;
								background:none !important;
							}
							.offcanvas-menu-toggler{
								color:@major_color;
							}
							ul{
								margin-bottom: -1px;
								> li{
									a{
										color:#333;
									}
									.offcanvas-menu-toggler{
										color:#333;
									}
									&.active, &:hover, &:focus{
										> a{
											background:none !important;
											color:@major_color;
										}
										.offcanvas-menu-toggler{
											color:@major_color;
										}
									}
								}
							}
						}
						ul{
							background:none;
						}
					}
				}
			}
		}
	}
}

/*----- Banner -----*/
section#sp-banner{
	padding: 50px 0;
	.qx-subtitle p{
		color: #fff;
		&:before{
			top: -6px;
			left: -5px;
			height: 2px;
			width: 25px;
			content: "";
			margin-left: 5px;
			background: #fff;
			position: relative;
			display: inline-block;
			font-family: FontAwesome;
		}
	}
}

/*----- Main Body -----*/
section#sp-main-body{
	background: #fff;
	padding: 50px 0px;
}

body.com-quix{
	section#sp-main-body{
		background: #fff;
		padding: 50px 0px 0;
	}
}

/*----- Footer -----*/
footer#sp-footer{
    padding: 40px 0;
	background: #3053ff;
	address{
		text-align: left;
		margin: 0px;
		font-weight: normal;
	}
	ul.nav{
		li{
			border: none;
			text-align: left;
			&:hover{
				a{
					background: transparent;
				}
			}
			a{
				text-transform: capitalize;
				&:before{
					content: none;
				}
				&:hover,&:Focus,&:active{
					background: transparent;
				}
			}
		}
	}
	.row > [id*="sp-footer-"]:not(:last-child){
		margin-bottom: 30px;
	}
}

/*----- Copyright -----*/
section#sp-copyright{
	background: @secondary_color;
	padding: 20px 0px;
	text-align: center;
	color: #fff;
	span,a{
		color: #ffffff;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 1px;
	}
}

/*----- 3rd Party Extension -----*/

/*-----
	1. ChronoForms
-----*/

/*----- ChronoForms -----*/
.chronoforms{
	button{
		&#btn-primary{
			background: @major_color;
			&:hover, &:focus, &:active{
				background: fade(@major_color, 80%);
			}
		}
		&#btn-default{
			background: @secondary_color;
			&:hover, &:focus, &:active{
				background: fade(@secondary_color, 80%);
			}
		}
	}
	.ui.button{
		color: #fff;
		border: none;
		font-size: 20px;
		padding: 15px 28px;
		font-weight: normal;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		i.fa{
			margin-right: 15px;
		}
	}
	textarea{
		height: auto;
		font-weight: 500;
	}
}

.ui.form .field{
	input:not([type]), input[type="date"], input[type="datetime-local"],
	input[type="email"], input[type="file"], input[type="number"],
	input[type="password"], input[type="search"], input[type="tel"],
	input[type="text"], input[type="time"], input[type="url"],textarea{
		padding: 15px 20px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		&:focus, &:active{
			border-radius: 10px;
			-webkit-border-radius: 10px;
		}
	}
}

a.chronoforms6_credits{
	display: none;
}

/*----- Elements List -----*/

/*-----
	01. Image
	02. Heading
	03. Pie Counter
	04. Divider/Spacer
	05. Bar Counter
	06. JD Horizontal Tabs
	07. JD Pricing Table
	08. JD Tabs
	09. JD Testimonial
	10. JD Testimonial PRO
	11. JD Team
	12. JD Portfolio
	13. JD Service
	14. JD Timeline
	15. JD Select
	16. JD Pie Counter
-----*/

/*----- Images -----*/

.qx-element-image {
	img{
		display: inline;
	}
}

.qx-element-blurb{
	img{
		display: inline;
	}
}
.vidwrap{
	img{
		display: inline;
	}
}

/*----- Pie Counter -----*/
.jd-pie-counter{
	h4.qx-pc-title{
		text-align: left;
	}
}

/*----- Divider/Spacer -----*/
.qx-element-space{
	margin: 0;
}

/*----- Bar Counter -----*/
.qx-element-bar-counter {
	.qx-progress{
		border-radius: 0;
		box-shadow: none;
		overflow: visible;
		position: relative;
		margin: 10px 0 25px;
		&:after{
			right: auto;
			top: -30px;
			position: absolute;
			content: attr(data-progress) "%";
		}
		.qx-progress-bar{
			font-size: 0;
			position: relative;
			&:after{
				content: "\f10c";
				display: block;
				font-family: FontAwesome;
				font-size: 18px;
				position: absolute;
				right: -13px;
				color: @secondary_color;
				top: 0px;
			}
		}
	}
}

/*----- JD Horizontal Tabs -----*/
.jd-horizontal-tabs{
	overflow: hidden;
	ul.tabs{
		float: left;
		max-width: 300px;
		overflow: hidden;
		margin: 0px;
		padding: 0px;
		margin: 0 50px 0 0;
		li{
			width: 100%;
			padding: 0px;
			list-style: none;
			display: inline-flex;
			a{
				width: 100%;
				display: block;
				font-size: 18px;
				font-weight: 600;
				color: @text_color;
				padding: 15px 15px;
				border-bottom: 1px solid #ccc;
				&:focus,&:hover{
					outline-offset: 0px;
				}
			}
			a.active{
				color: #fff;
				border-radius: 5px;
				margin-bottom: 0px;
				background: @secondary_color;
				
			}
			&:last-child{
				a{
					border-bottom: none;
				}
			}
		}
	}
	.tab-content{
		float: none;
		display: none;
		overflow: hidden;
		line-height: 30px;
				animation-duration: 1.2s;
		-webkit-animation-duration: 1.2s;
				animation-fill-mode: both;
		-webkit-animation-fill-mode: both;
				animation-name: bounceInRight;
		-webkit-animation-name: bounceInRight;
		ul{
			margin: 0;
			padding: 0;
			li{
				list-style: none;
				position: relative;
				padding-left: 25px;
				&:before{
					left: 0;
					top: 2px;
					color: #1dd8c9;
					display: block;
					font-size: 15px;
					content: "\f00c";
					position: absolute;
					font-weight: normal;
					font-family: FontAwesome;
					
				}
				&:not(:last-child){
					margin-bottom: 10px;
				}
			}
		}
		&.active{
			display: block;
		}
	}
	/* Right Layout */
	&.tab-right{
		.tab-content{
			animation-name: bounceInLeft;
			-webkit-animation-name: bounceInLeft;
		}
		ul.tabs{
			float: right;
			margin: 0 0 0 50px;
		}
	}
}

@media (max-width:767px){
	.jd-horizontal-tabs{
		ul.tabs{
			float: none;
			max-width: none;
			margin: 0 0 30px;
		}
	}
}

/*----- JD Pricing Table -----*/
.qx-element-jd-pricing-table{
	margin-top: 100px;
	.single-table {
		margin: 0px 15px;
		background: #fff;
		position: relative;
		border-radius: 10px;
		box-shadow: 0px 0px 10px 0px rgba(181, 181, 181, 0.2);
		-moz-box-shadow: 0px 0px 10px 0px rgba(181, 181, 181, 0.2);
		-webkit-box-shadow: 0px 0px 10px 0px rgba(181, 181, 181, 0.2);
		&:first-child{
			margin-left: 0;
		}
		&:last-child{
			margin-right: 0;
		}
		.cost{
			color: #fff;
			padding: 15px 0;
			background: @secondary_color;
			.description{
				margin: 0px 0px 10px 0px;
			}
			.curency-amount{
				display: block;
				padding: 10px 0;
			}
			.title{
				margin: 0px 0px 10px 0px;
			}
		}
		&.featured{
			.cost{
				background: @major_color;
			}
		}
		.table-body{
			ul{
				li{
					border-bottom: 1px solid #ebebeb;
				}
			}
		}
		.header-image{
			margin-top: -110px;
			img{
				text-align: center;
				margin: 0 auto;
			}
		}
		.table-heading{
			background: transparent;
			padding: 20px 0;
		}
		.table-body{
			background: transparent;
		}
		.table-footer{
			background: transparent;
		}
	}
}

@media (max-width: 767px){
	.qx-element-jd-pricing-table .single-table{
		margin-top: 60px !important;
	}
	.qx-element-jd-pricing-table .single-table:first-child{
		margin-top: 0px !important;
	}
}

/*----- JD Tabs -----*/
.jd-tabs-style {
	ul.qx-tabs { 
		padding: 0;
		margin: 0 auto;
		max-width: 400px;
		border-bottom: 2px solid #f5f5f5;
		> li >{
			&:hover{
				a{
					&:after{
						transform: scale(1);
					}
				}
			}
			a{
				border: none;
				font-size: 20px;
				font-weight: 600;
				color: @text_color;
				position: relative;
				&:after{
					content: ""; 
					background: @major_color; 
					height: 2px; 
					position: absolute; 
					width: 100%; 
					left: 0px; 
					bottom: -2px; 
					transform: scale(0);
					transition: all 250ms ease 0s;
				}
				&:hover{
					border: none; 
					color: @major_color !important; 
					background: transparent;
				}
			}
			a.qx-active{
				border: none; 
				color: @major_color !important; 
				background: transparent;
				&:focus,&:hover{
					border-width: 0;
				}
				&:after{
					transform: scale(1);
				}
			}
		}
	}
}

/*----- JD Founder -----*/
.jd-founder-element{
	.person-name{
		font-size: 20px;
		font-weight: 600;
		line-height: normal;
	}
	.testi-signature{
		img{
			padding: 20px 0px;
		}
	}
}

/*----- JD Testimonial PRO-----*/
.qx-element-jd-testimonial-pro{
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	.qx-testimonial{
		img{
			display: inline;
		}
	}
	.qx-testimony{
		p{
			position: relative;
			&:before{
				background: url(../images/icons/testimonial-comments-icon.png) no-repeat;
				content: "";
				position: absolute;
				display: block;
				left: 0;
				width: 35px;
				height: 30px;
				top: -15px;
			}
		}
	}
	.slick-dots{
		li{
			height: 5px;
			width: 30px;
			margin: 0px 5px;
			&.slick-active{
				button{
					&:before{
						opacity: 1;
						background: currentcolor;
					}
				}
			}
			button{
				position: relative;
				&:before{
					content: "" !important;
					position: absolute;
					width: 30px;
					height:5px;
					border: 1px solid ;
					display: block;
					top: 0px;
					right: 0px;
					left: 0px;
					opacity: 1;
				}
			}
		}
		
	}
}

/*----- JD Team -----*/
.jd-team-element{
	.qx-carousel-item{
		position: relative;
		a.team-img{
			margin: 10px;
			display: block;
				border-radius: 10px;
			-webkit-border-radius: 10px;
			box-shadow:0 0 10px 0 rgba(181, 181, 181, 0.4);
			-webkit-box-shadow:0 0 10px 0 rgba(181, 181, 181, 0.4);
			img{
				border-radius: 10px;
				-webkit-border-radius: 10px;
			}
		}
		.team-social-box{
			background: fade (#fff , 80%);
			bottom: 60px;
			color: @text_color;
			left: 0;
			padding: 0px;
			position: absolute;
			right: 0;
			width: 95%;
			margin: 0 auto;
			transition: all 0.2s ease-in-out 0s;
			
			h4{
				font-weight: 600;
				line-height: 30px;
				padding: 0px;
				margin: 0px;
				font-size: 20px;
			}
			
			.qx-carousel-caption{
				font-weight: 300;
				line-height: 30px;
				padding: 0px;
				margin: 0px;
				font-size: 20px;
			}
			.team-detail{
				position: relative;
				padding: 10px 0px;
			}
			.social-links{
				position: relative;
				background: @secondary_color;
				opacity: 0;
				transition: all ease 0.2s;
				transition: all 0.2s ease-in-out 0s;
				height: 0px;
				a{
					color: #fff;
					margin: 0 20px;
					padding: 5px 0px;
					&:hover, &:active, &:focus{
						color: #fff;
						&:before{
							color: #fff;
						}
					}
					
				}
			}
		}
		&:hover{
			.team-social-box{
				transform: translateY(-10px);
				background: #fff;
				.social-links{
					opacity: 1;
					transform: translateY(-0px);
					display: block;
					transition: all .3s linear;
					height: auto;
				}
			}
		}
	}
	.slick-arrow{
		&.slick-prev{
			left: -40px;
		}
		&.slick-next{
			right: -40px;
		}
	}
	.slick-dots{
		bottom: auto;
		margin-top: 20px;
		position: relative;
		li{
			height: 5px;
			width: 30px;
			margin: 0px 5px;
			&.slick-active{
				button{
					&:before{
						opacity: 1;
					}
				}
			}
			button{
				position: relative;
				&:before{
					content: "" !important;
					position: absolute;
					width: 30px;
					height:5px;
					border: 1px solid ;
					display: block;
					top: 0px;
					right: 0px;
					left: 0px;
					opacity: 1;
				}
			}
		}
		
	}
}

/*----- JD Portfolio -----*/
.jd-portfolio{
	ul.qx-fg-filter{
		margin: 0;
		> li{
			> a{
				border: none;
				color: #273140;
				font-size: 16px;
				padding: 5px 10px;
				&.active{
					background: none;
					color: @major_color;
				}
			}
		}
	}
	.qx-overlay{
		&:hover{
			.jd-overlay-panel{
				top: auto;
				bottom: 0;
				animation-name: slideInUp;
				-webkit-animation-name: slideInUp;
			}
		}
	}
	.qx-fg-title{
		margin: 5px 0 20px;
	}
	.qx-fg-readmore{
		float: right;
		color: inherit;
	}
	.jd-overlay-panel{
		top: 100%;
		width: 100%;
		padding: 15px;
		color: inherit;
		background: #fff;
		position: absolute;
		border: 1px solid #ddd;
				animation-duration: 0.5s;
		-webkit-animation-duration: 0.5s;
				animation-fill-mode: both;
		-webkit-animation-fill-mode: both;
	}
}

/*----- JD Service -----*/
.jd-service-element {
	overflow: hidden;
	&.hover-effect{
		.service-media{
			overflow: hidden;
			position: relative;
			&:after{
				background: fade(@secondary_color, 70%);
				content: "";
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 0;
				transition: opacity 0.3s ease-in-out 0s;
				width: 100%;
			}
			&:before{
				opacity: 0;
				color: #fff;
				width: 100%;
				height: 100%;
				z-index: 999;
				top: calc(46%);
				font-size: 30px;
				content: "\f067";
				position: absolute;
				text-align: center;
				font-family: FontAwesome;
				transition: opacity 0.3s ease-in-out 0s;
				
			}
			&:hover{
				&:after{
					opacity: 1;
				}
				&:before{
					opacity: 1;
					transition-delay: .3s;
				}
			}
		}
	}
	.qx-blurb-title{
		color: #273140;
		margin-top: 30px;
		padding: 0px 20px;
		margin-bottom: 20px;
	}
	a{
		.qx-blurb-content{
			p{
				color: @text_color;
			}
		}
	}
	.qx-blurb-content{
		padding: 0 20px 35px;
	}
}

/*----- JD Timeline -----*/
.jd-timeline-element{
	.jd-timeline{
		display: block;
		overflow: hidden;
		.left{
			float: left;
			width: 180px;
			display: grid;
			overflow: hidden;
		}
		.right{
			display: table-cell;
			width: 100%;
		}
		.tab{
			.date-month{
				font-size: 18px;
				position: relative;
				line-height: normal;
				color: @secondary_color;
				&:after{
					background: #ffffff;
					border-radius: 100%;
					border: 1px solid #ebebeb;
					box-shadow: 0 0 0 4px #ebebeb,0 0 0 1px #000;
					content: "";
					display: block;
					height: 15px;
					left: auto;
					position: absolute;
					right: 22px;
					top: 4px;
					width: 15px;
				}
			}
			.year{
				font-size: 26px;
				font-weight: 600;
				line-height: normal;
			}
		}
		.timeline-horizontal{
			position: relative;
			&:after{
				border: 1px solid #ebebeb;
				content: "";
				display: block;
				height: 100vh;
				min-height: auto;
				position: absolute;
				left: 150px;
				right: auto;
				top: -20px;
			}
		}
		.timeline-vertical {
			position: relative;
			&:after{
				border: 1px solid #ebebeb;
				content: "";
				display: block;
				height: auto;
				left: 80px;
				position: absolute;
				right: auto;
				top: 11px;
				width: 70px;
			}
		}
	}
}

/*----- JD Select -----*/
.jd-select-element{
	.element-inner{
		float: left;
		position: relative;
		ul.dropdown-menu{
			margin: 0;
			padding: 0;
			width: 100%;
			background: #fff;
			border: 1px solid #ddd;
			box-shadow: none;
				border-radius: 0;
			-webkit-border-radius: 0;
			li{
				&:not(:last-child){
					border-bottom: 1px solid #ddd;
				}
				a{
					padding: 5px 15px;
					background: none;
					transition: all 250ms ease 0s;
					&:hover{
						color: #fff;
						padding-left: 20px;
						background: @secondary_color;
					}
					&:before{
						display: none;
					}
				}
			}
		}
		.chzn-single{
			color: #fff;
			bottom: 2px;
			width: 260px;
			font-size: 16px;
			text-align: left;
			box-shadow: none;
			padding: 15px 18px;
			position: relative;
			border-radius: 5px;
			line-height: normal;
			border: 1px solid #ddd;
			background: rgba(255,255,255,0.5);
		}
		.dropdown-toggle{
			color: #fff;
			border: none;
			box-shadow: none;
			border-radius: 0;
			padding: 12px 17px;
			border-radius: 5px;
			background: @major_color;
		}
		.caret-icon{
			.fa{
				font-size: 26px;
				line-height: 26px;
			}
		}
	}
}

/*----- JD Pie Counter -----*/
.jd-pie-counter-element-main{
	.left-box{
		margin: 0;
		float: left;
		width: 150px;
	}
	.right-box{
		overflow: hidden;
		padding-left: 20px;
	}
}

@media (max-width:767px){
	.jd-pie-counter-element-main{
		.left-box{
			float: none;
		}
		.right-box{
			padding-left: 20px;
		}
	}
}

/*----- Animations -----*/

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(1200px, 0, 0);
    transform: translate3d(1200px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(1200px, 0, 0);
    transform: translate3d(1200px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1200px, 0, 0);
    transform: translate3d(-1200px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-1200px, 0, 0);
    transform: translate3d(-1200px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*----- Responsive -----*/
@media (max-width: 768px){
	.container{
		width: 95%;
	}
	.qx-btn{
		padding: 10px 25px;
	}
	#sp-banner{
		padding: 20px 0;
	}
 	.qx-container {
		width: 100%;
	}
}

@media (max-width: 421px){
	.qx-element-button-group{
		text-align: center !important;
		.qx-btn + .qx-btn{
			margin: 10px auto 0 !important;
		}
	}
	.qx-btn{
		padding: 8px 20px;
	}
	.scrollup{
		right: 20px;
		bottom: 20px;
	}
}