/**
 * @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;
	}
}

/*----- 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;
}

/*----- 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;
	}
}