/*
Theme Name: Swan Lake - Lead Generation Marketing Landing Page
Author: Adnan and Ahmed
Author URI: 
Version: 1.0
Text Domain: Swan Lake
Tags: one-column, two-columns
Theme URI:
*/

/*------------------------------------------------------------------

1. import files
2. Global style classes
3. main headinig styles / .main-heading
4. main wrapper styles / #wrapper
5. header of the page styles / #header
6. navigation of the page styles / #nav
7. main banner of the page styles / .main-banner
8. quote form of the page styles / .quote-form
9. about section of the page styles / .about-section
10. counter section of the page styles / .counter-section
11. services section of the page styles / .services-section
12. price section of the page styles / .price-section
13. quote section of the page styles / .quote-section
14. footer of the page styles / #footer

-------------------------------------------------------------------*/

// devices viewport width starts at:
$breakpoints: (
	xs-phone: 320px,
	phone: 480px,
	tablet: 768px,
	desktop: 1024px,
	widescreen: 1300px
);
 
// keywords
$media-expressions: (
	'screen': 'screen',
	'print': 'print',
	'handheld': 'handheld',
	'landscape': '(orientation: landscape)',
	'portrait': '(orientation: portrait)',
	'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)',
	'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)'
);
/*------------------------------------------------------------------
	1. import files
-------------------------------------------------------------------*/
// ligatured operators ≥ ≤

@import 'vendors/include-media';

@import "bootstrap-custom";
@import "vendors/bootstrap/variables";
@import "vendors/bootstrap/mixins";

@import 'base/mixins';
@import 'base/helpers';
@import "base/wp-reset";


/*------------------------------------------------------------------
	2. Global style classes
-------------------------------------------------------------------*/
.dark-bg{background-color: $color1;}
.bg-img-full{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.bg-img-parallax{background-attachment: fixed;}
.overlay{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0.75;
	position: absolute;
	pointer-events: none;
	background-color: $black;
}
.divider{
	background-image: url(images/divider.png);
	width: 65px;
	height: 10px;
	display: block;
	margin: 0 0 15px;
}
.divider.center{margin: 0 auto 10px;}
.divider.white{background-image: url(images/divider2.png);}
.section{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.mar-top-xs{margin-top: 30px !important;}
.mar-top-sm{margin-top: 60px !important;}
.mar-top-md{margin-top: 90px !important;}
.pad-top-xs{padding-top: 30px !important;}
.pad-top-sm{padding-top: 60px !important;}
.pad-top-md{padding-top: 90px !important;}
.mar-top-lg{margin-top: 120px !important;}
.pad-top-lg{padding-top: 120px !important;}
.mar-bottom-xs{margin-bottom: 30px !important;}
.mar-bottom-sm{margin-bottom: 60px !important;}
.mar-bottom-md{margin-bottom: 90px !important;}
.pad-bottom-sm{padding-bottom: 60px !important;}
.pad-bottom-xs{padding-bottom: 30px !important;}
.pad-bottom-md{padding-bottom: 90px !important;}
.mar-bottom-lg{margin-bottom: 120px !important;}
.pad-bottom-lg{padding-bottom: 120px !important;}
.btn-default{
	border: 0;
	color: $white;
	font-weight: 700;
	border-radius: 2px;
	padding: 16px 43px;
	transition: all ease 0.3s;
	font-family: $font-family-ubuntu;
	&:focus,
	&:active,
	&:hover{
		color: $white;
		background-color: $color1 !important;
	}
}
body{
	&.pattern1{background-image: url(images/patterns/pattern1.png);}
	&.pattern2{background-image: url(images/patterns/pattern2.png);}
	&.pattern3{background-image: url(images/patterns/pattern3.png);}
	&.pattern4{background-image: url(images/patterns/pattern4.png);}
	&.pattern5{background-image: url(images/patterns/pattern5.png);}
	&.pattern6{background-image: url(images/patterns/pattern6.png);}
	&.pattern7{background-image: url(images/patterns/pattern7.png);}
	&.pattern8{background-image: url(images/patterns/pattern8.png);}
	&.pattern9{background-image: url(images/patterns/pattern9.png);}
	&.pattern10{background-image: url(images/patterns/pattern10.png);}
	&.pattern11{background-image: url(images/patterns/pattern11.png);}
	&.pattern12{background-image: url(images/patterns/pattern12.png);}
	&.pattern13{background-image: url(images/patterns/pattern13.png);}
	&.pattern14{background-image: url(images/patterns/pattern14.png);}
}
body.boxed-v #wrapper {
	max-width: 80%;
	margin: 20px auto;
	border-radius: 3px;
	box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}
/*------------------------------------------------------------------
	3. main headinig styles / .main-heading
-------------------------------------------------------------------*/
.main-heading{
	margin-bottom: 76px;
	.heading{
		color: $color5;
		margin: 0 0 18px;
		font: 700 28px/30px $font-family-ubuntu;
	}
	p{margin: 0;}
}
/*------------------------------------------------------------------
	4. main wrapper styles / #wrapper
-------------------------------------------------------------------*/
#wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
}
/*------------------------------------------------------------------
	5. header of the page styles / #header
-------------------------------------------------------------------*/
#header{
	z-index: 2;
	position: relative;
	padding: 34px 0 70px;
	&.sticky{
		#nav{
			top: 0;
			bottom: auto;
			position: fixed;
			.nav-list{
				border-radius: 0 4px 4px 0;
				box-shadow: 0 0 10px rgba(0,0,0,0.1);
			}
		}
	}
	.nav-opener{
		width: 45px;
		height: 40px;
		display: none;
		font-size: 24px;
		margin: 4px 0 0;
		line-height: 34px;
		border-radius: 3px;
		text-align: center;
		transition: all ease 0.3s;
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
}
/*------------------------------------------------------------------
	6. navigation of the page styles / #nav
-------------------------------------------------------------------*/
#nav{
	left: 0;
	right: 0;
	bottom: -38px;
	font-weight: bold;
	position: absolute;
	transition: all ease 0.3s;
	font-family: $font-family-ubuntu;
	.nav-list{
		margin: 0;
		overflow: hidden;
		background: $white;
		border-radius: 4px;
		padding: 18px 31px 18px 28px;
		li{
			padding: 7px 27px 0 0;
			vertical-align: middle;
		}
		a{
			color: $color5;
			transition: all ease 0.3s;
		}
		.button{
			float: right;
			padding: 0;
		}
		.btn{
			color: $white;
			font-size: 12px;
			padding: 9px 15px;
		}
	}
}
.top-list{
	margin: 0;
	font-family: $font-family-ubuntu;
	li{
		position: relative;
		padding: 0 8.8% 0 7%;
	}
	.fa{
		right: 0;
		top: -3px;
		width: 50px;
		height: 50px;
		font-size: 18px;
		line-height: 50px;
		position: absolute;
		text-align: center;
		background: #1f1f1f;
		border-radius: 560%;
		border: 1px solid #292929;
	}
	strong{
		display: block;
		margin: 0 0 -4px;
	}
	a{
		color: $color7;
	}
}
.mt-social{
	margin: 0;
	font-size: 16px;
	li{
		padding: 0 0 0 5%;
	}
	a{
		opacity: 0.3;
		color: $white;
		transition: all ease 0.3s;
		&:hover{opacity: 1;}
	}
}
#main{
	width: 100%;
	overflow: hidden;
	position: relative;
}
/*------------------------------------------------------------------
	7. main banner of the page styles / .main-banner
-------------------------------------------------------------------*/
.main-banner{
	padding: 220px 0;
	overflow: hidden;
	position: relative;
	&.small{
		padding: 180px 0;
	}
	.title{
		color: $color8;
		display: block;
		margin: 0 0 4px;
	}
	.heading{
		color: $white;
		margin: 0 0 18px;
		font: 700 48px/60px $font-family-ubuntu;
	}
	.divider{
		margin: 0 0 41px;
		vertical-align: top;
		display: inline-block;
	}
	.btn{
		padding: 18px 28px;
	}
	.arrow{
		right: 40px;
		width: 185px;
		height: 103px;
		bottom: -39px;
		position: absolute;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.promo-info{
		color: $white;
		display: block;
		letter-spacing: 1px;
		font-family: $font-family-ubuntu;
	}
	.btn-play{
		width: 60px;
		height: 60px;
		font-size: 16px;
		line-height: 60px;
		border-radius: 50%;
		background: $white;
		text-align: center;
		padding: 0 0 0 4px;
		margin: 0 18px 0 0;
		display: inline-block;
		vertical-align: middle;
		transition: all ease 0.3s;
	}
	.txt{
		z-index: 2;
		color: $white;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		font-family: $font-family-ubuntu;
	}
	.img-holder{
		max-width: 500px;
		border-radius: 5px;
		position: relative;
		margin: 0 auto 30px;
		box-shadow: 0 44px 32px 0 rgba(0, 0, 0, 0.6);
		img{border-radius: 5px;}
		.btn-play{
			top: 50%;
			left: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
		}
	}
}
.main-slider{
	.slick-arrow{
		top: 50%;
		border: 0;
		padding: 0;
		z-index: 2;
		width: 30px;
		opacity: 0.2;
		font-size: 0;
		height: 30px;
		line-height: 0;
		position: absolute;
		background: transparent;
		transition: all ease 0.3s;
		border: solid $white;
		border-width: 3px 3px 0 0;
		transform: translateY(-50%) rotate(45deg);
		&:hover{opacity: 1;}
	}
	.slick-prev{
		left: 55px;
		transform: translateY(-50%) rotate(-135deg);
	}
	.slick-next{
		right: 55px;
	}
	.slick-dots{
		left: 0;
		right: 0;
		margin: 0;
		padding: 0;
		bottom: 40px;
		text-align: center;
		position: absolute;
		li{
			padding: 0 3px;
			text-align: left;
			display: inline-block;
			vertical-align: middle;
			&.slick-active button{opacity: 1;}
		}
		button{
			border: 0;
			padding: 0;
			width: 10px;
			height: 10px;
			opacity: 0.2;
			display: block;
			overflow: hidden;
			border-radius: 50%;
			background: $white;
			text-indent: -9999px;
			transition: all ease 0.3s;
			&:hover{opacity: 1;}
		}
	}
}
/*------------------------------------------------------------------
	8. quote form of the page styles / .quote-form
-------------------------------------------------------------------*/
.quote-form{
	margin: -97px 0;
	border-radius: 3px;
	padding: 56px 30px 69px;
	background-color: $white;
	background-repeat: no-repeat;
	background-position: -470px -270px;
	.form-heading{
		color: $color5;
		display: block;
		margin: 0 0 3px;
		font: 700 28px/30px $font-family-ubuntu;
	}
	.form-title{
		display: block;
		margin: 0 0 49px;
	}
	.form-control{
		height: 48px;
		outline: none;
		color: $color3;
		box-shadow: none;
		padding: 6px 23px;
		background: #f5f5f5; 
		border-color: $color6;
	}
	.form-group{
		overflow: hidden;
		margin: 0 0 20px;
		&.has-error .form-control{
			color: #ff3333;
			border-color: #ff3333;
		}
	}
	.fa{
		font-size: 12px;
		margin-right: 2px;
	}
	.info{
		float: left;
		font-size: 11px;
		padding: 16px 0 0;
	}
	.btn{
		float: right;
		padding: 11px 28px;
		opacity: 1 !important;
	}
	.form-message{
		color: $white;
		font-size: 11px;
		font-weight: 600;
		position: relative;
		&:after{
			top: 14px;
			left: 17px;
			width: 20px;
			content: "";
			height: 20px;
			border-radius: 50%;
			position: absolute;
			text-align: center;
			font-family:'FontAwesome';
		}
		&.error{
			margin: 0 0 20px;
			background: #ff3333;
			padding: 15px 5px 13px 50px;
			&:after{
				content:"\f00d";
				background: #cc2929;
			}
		}
		&.success{
			margin: 0 0 20px;
			background: #698cf0;
			padding: 15px 5px 13px 50px;
			&:after{
				content:"\f00c";
				background: #5470c0;
			}
		}
	}
	&.style2{
		max-width: 1000px;
		padding: 15px 20px;
		margin: 0 auto 30px;
		.form-group{
			float: left;
			width: 250px;
			margin: 0 20px 0 0;
		}
		.form-message{
			left: 50%;
			bottom: -30px;
			position: absolute;
			transform: translateX(-50%);
			padding: 15px 25px 13px 50px;
		}
		&.small{
			max-width: 460px;
		}
	}
}
/*------------------------------------------------------------------
	9. about section of the page styles / .about-section
-------------------------------------------------------------------*/
.about-box{
	line-height: 22px;
	.num{
		display: block;
		margin: 0 0 34px;
		font: 700 28px/17px $font-family-ubuntu;
	}
	.title{
		display: block;
		color: $color5;
		margin: 0 0 19px;
		font: 700 18px/20px $font-family-ubuntu;
	}
	.divider{
		width: 35px;
		margin: 0 0 17px;
	}
	.more{font: 700 12px/20px $font-family-ubuntu;}
	p{margin: 0 0 20px;}
}
/*------------------------------------------------------------------
	10. counter section of the page styles / .counter-section
-------------------------------------------------------------------*/
.counter-section{
	overflow: hidden;
	.counter{
		display: block;
		font-size: 72px;
		margin: 0 0 -6px;
		line-height: 80px;
	}
	.txt{
		display: block;
		font-family: $font-family-ubuntu;
	}
}
/*------------------------------------------------------------------
	11. services section of the page styles / .services-section
-------------------------------------------------------------------*/
.services-section{
	overflow: hidden;
	.services-box{
		margin: 0;
		overflow: hidden;
		border-radius: 4px;
		li{
			width: 50%;
			float: left;
			height: 230px;
			overflow: hidden;
			position: relative;
			background: rgba(33,33,33,1);
			&:last-child,
			&:first-child{background: rgba(33,33,33,0.9);}
			&:hover{
				.over {
					-webkit-transform: translateY(-67%);
						-ms-transform: translateY(-67%);
							transform: translateY(-67%);
				}
				.icomoon {
					opacity: 0;
					-webkit-transform: translateY(-62%);
						-ms-transform: translateY(-62%);
							transform: translateY(-62%);
				}
				p {
					opacity: 1;
					-webkit-transform: translateY(0);
						-ms-transform: translateY(0);
							transform: translateY(0);
				}
			}
		}
		.over{
			left: 0;
			right: 0;
			top: 50%;
			position: absolute;
			transition: all ease 0.3s;
			transform: translateY(-32%);
		}
		.divider{
			width: 35px;
			margin: 0 auto 0;
		}
		.icomoon{
			display: block;
			font-size: 50px;
			margin: 0 0 16px;
			transition: all ease 0.3s;
		}
		p{
			opacity: 0;
			color: $color4;
			max-width: 90%;
			line-height: 20px;
			margin: 15px auto 0;
			transition: all ease 0.3s;
			transform: translateY(50%);
		}
		.title{
			display: block;
			margin: 0 0 15px;
			font: 700 18px/24px $font-family-ubuntu;
		}
	}
	.txt-box{
		padding: 41px 0 0 7.8%;
		.divider{margin: 0 0 10px;}
		.main-heading{margin-bottom: 37px;}
		.list{
			color: $color4;
			font-weight: bold;
			font-family: $font-family-ubuntu;
			.fa{
				font-size: 17px;
				margin: 0 11px 0 4px;
				vertical-align: middle;
			}
			li{margin: 0 0 11px;}
		}
	}
}
/*------------------------------------------------------------------
	12. price section of the page styles / .price-section
-------------------------------------------------------------------*/
.price-box{
	background: $white;
	border: 1px solid $color6;
	.header{
		color: $color4;
		font-size: 12px;
		padding: 30px 10% 33px;
	}
	.title{
		color: $color5;
		display: block;
		font-size: 14px;
		font-family: $font-family-ubuntu;
	}
	.price-txt{
		display: block;
		font-size: 14px;
		margin-bottom: 5px;
		.price{
			font-size: 38px;
			line-height: 50px;
			display: inline-block;
			vertical-align: bottom;
			margin: 0 4px -5px -5px;
		}
		.txt{
			letter-spacing: 1px;
			display: inline-block;
			vertical-align: bottom;
		}
	}
	p{margin: 0;}
	.box{
		line-height: 22px;
		padding: 38px 9.4%;
		border-top: 1px solid $color6;
		p{margin: 0 0 22px;}
	}
	h3{
		color: $color5;
		margin: 0 0 19px;
		font: 700 18px/24px $font-family-ubuntu;
	}
	.divider{
		width: 34px;
		margin: 0 0 15px 3px;
	}
	.order{font: 700 12px/16px $font-family-ubuntu;}
}
/*------------------------------------------------------------------
	13. quote section of the page styles / .quote-section
-------------------------------------------------------------------*/
.quote-section{
	color: $color8;
	overflow: hidden;
	position: relative;
	.subtitle{display: block;}
	h2{
		margin: 0 0 23px;
		font: 700 48px/69px $font-family-ubuntu;
	}
	p{margin: 0 0 28px;}
	.divider{margin: 0 auto 14px;}
}
/*------------------------------------------------------------------
	14. footer of the page styles / #footer
-------------------------------------------------------------------*/
#footer{
	width: 100%;
	overflow: hidden;
	position: relative;
	.bottom{
		margin-top: 30px;
		padding-top: 21px;
		border-top: 1px solid $color2;
	}
}
.popup-holder{
	height: 0;
	overflow: hidden;
	position: relative;
}
.lightbox .quote-form{
	margin: 0;
	width: 450px;
}
#back-top {
	bottom: 0;
	opacity: 0;
	z-index: 9;
	right: 20px;
	width: 50px;
	color: #fff;
	height: 50px;
	z-index: 9999;
	cursor: pointer;
	font-size: 25px;
	position: fixed;
	line-height: 47px;
	text-align: center;
	border-radius: 3px;
	background: #252525;
	transition: all .6s ease;
	transform: translateY(40px);
	-ms-transform: translateY(40px);
	-webkit-transition: all .6s ease;
	-webkit-transform: translateY(40px);
}
#back-top.show {
	opacity: 1;
	transform: translateY(-20px);
	-ms-transform: translateY(-20px);
	-webkit-transform: translateY(-20px);
}
#back-top:hover {opacity: .9;}

.loader-container{
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	position: fixed;
	background: rgba(0, 0, 0, 0.7);
	.holder{
		top: 50%;
		left: 50%;
		position: absolute;
		transform: translate(-50%,-50%);
	}
}
.la-line-scale,
.la-line-scale > div {
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.la-line-scale {
    display: block;
    font-size: 0;
    color: #fff;
}
.la-line-scale.la-dark {
    color: #333;
}
.la-line-scale > div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}
.la-line-scale {
    width: 40px;
    height: 32px;
}
.la-line-scale > div {
    width: 4px;
    height: 32px;
    margin: 2px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-animation: line-scale 1.2s infinite ease;
       -moz-animation: line-scale 1.2s infinite ease;
         -o-animation: line-scale 1.2s infinite ease;
            animation: line-scale 1.2s infinite ease;
}
.la-line-scale > div:nth-child(1) {
    -webkit-animation-delay: -1.2s;
       -moz-animation-delay: -1.2s;
         -o-animation-delay: -1.2s;
            animation-delay: -1.2s;
}
.la-line-scale > div:nth-child(2) {
    -webkit-animation-delay: -1.1s;
       -moz-animation-delay: -1.1s;
         -o-animation-delay: -1.1s;
            animation-delay: -1.1s;
}
.la-line-scale > div:nth-child(3) {
    -webkit-animation-delay: -1s;
       -moz-animation-delay: -1s;
         -o-animation-delay: -1s;
            animation-delay: -1s;
}
.la-line-scale > div:nth-child(4) {
    -webkit-animation-delay: -.9s;
       -moz-animation-delay: -.9s;
         -o-animation-delay: -.9s;
            animation-delay: -.9s;
}
.la-line-scale > div:nth-child(5) {
    -webkit-animation-delay: -.8s;
       -moz-animation-delay: -.8s;
         -o-animation-delay: -.8s;
            animation-delay: -.8s;
}
.la-line-scale.la-sm {
    width: 20px;
    height: 16px;
}
.la-line-scale.la-sm > div {
    width: 2px;
    height: 16px;
    margin: 1px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-2x {
    width: 80px;
    height: 64px;
}
.la-line-scale.la-2x > div {
    width: 8px;
    height: 64px;
    margin: 4px;
    margin-top: 0;
    margin-bottom: 0;
}
.la-line-scale.la-3x {
    width: 120px;
    height: 96px;
}
.la-line-scale.la-3x > div {
    width: 12px;
    height: 96px;
    margin: 6px;
    margin-top: 0;
    margin-bottom: 0;
}
#bgvid {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 777px;
	width: auto;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: 1s opacity;
	transition: 1s opacity;
}
#bgvid .vegas-slide{height: 100%;}
/*
 * Animation
 */
@-webkit-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-moz-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
           -moz-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
           -moz-transform: scaleY(.4);
             -o-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
           -moz-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
    }
}
@-o-keyframes line-scale {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(.4);
             -o-transform: scaleY(.4);
                transform: scaleY(.4);
    }
    20% {
        -webkit-transform: scaleY(1);
             -o-transform: scaleY(1);
                transform: scaleY(1);
    }
}