/*
====											====
			TABLE OF CONTENTS 
====											====

#0 Custom fonts used in this template
#1 Genreal structure Elements
#2 Header starts here
#3 Slider code
#4 If nav is sticky
#5 Main navigation
#6 section 1 code at top on main page
#7 success section
#8 Services section code
#9 Get in touch box
#10 Team Slider
#11 Portfolio section code
#12 Sorting items
#13 Free updates box code
#14 Pricing updates section code
#15 Code for blog section
#16 Get in touch contact form code
#17 Footer
#18 Socail media secton at bottom
#19 Copy Rights
#20 General Items used (secondary)
#21.1 Loader in header
#21.2 scroll to top function
#21.3 Animations
#21.3.1 Fadein effect of sections on scroll
#21.3.2 Slide-left effect of sections on scroll
#21.3.3 Slide-right effect of sections on scroll
#21.3.4 Slide-top effect of sections on scroll
#21.3.5 Slide-bottom effect of sections on scroll
#21.3.6 Pop effect of sections on scroll
#21.3.7 Fall effect of sections on scroll
#21.3.8 Helix effect of sections on scroll
#21.3.9 sonar effect
#22 Media queries
#23 Retina ready code 
*/


//variables

$font-Alic:'Alice', serif;
$font-Source-Sans:'Source Sans Pro', sans-serif;
//default colors
$colorWhite:#fff; // White
$colorBlack:#000; // Black
$color1:#363539;  // Gray
$color2:#999;     // Medium gray
$color3:#dadada;  // Light gray
$color4:#9dc02e;  // Perrot green color
$color5:#e7a800;  // Yellow color
$color6:#b75595;  // Purple color
$color7:#3498db;  // Blue color
//variables end here
.sprite, .sliderContainer .flex-control-paging li a, .innerSec:before, .bigIcon:before, .iconBox:before, .serviceNav li:before, .mediaNav li a, .teamSlider .owl-buttons div, .slctContainer:after{
	background:url(../images/sprite.png) no-repeat 0 0;
}
@mixin transition(){
	transition:all linear .3s;
	-moz-transition:all linear .3s;
	-webkit-transition:all linear .3s;
	-o-transition:all linear .3s;
}

/*=====================================================
#0 Custom fonts used in this template
=====================================================*/

/*font-family: 'Alice', serif;
font-family: 'Source Sans Pro', sans-serif;*/

/*=====================================================
#1 Genreal structure Elements
=====================================================*/

a, .portfolioHover, .imgContainer span{
	@include transition;
}
html{
	line-height:1.4;
	font-family: $font-Source-Sans;
	font-size: 16px;
	line-height: 26px;
	color: $color1;
	width: 100%;
}
body{
	overflow-x:hidden;
}
.auto-gen-code-snippet {
	display: none;
}
.auto-gen-code-visible {
	display: block;
}
.page--styleguide{ 
	h2{
		text-align:left;
		margin-bottom: 0;
	}
}
.page--styleguide {
	h4{
		font-weight:bold;
	}
}
.page--styleguide{
	 .breadcrumbs{
			margin-top:0;
	 }
}
.container{
	&:after{
		content:'';
		display:block;
		clear:both;
	}
}
h2{
	font-family: $font-Source-Sans;
	text-align:center;
	font-size:60px;
	line-height: 64px;
	color:$color1;
	font-weight:900;
	letter-spacing: -4px;
	margin: 0 0 40px 0;
	span{
		display:block;
		font-family: $font-Alic;
		font-size:24px;
		color:$color2;
		font-weight:normal;
		letter-spacing:-1px;
		line-height: 41px;
	}
}
h3{
	font-family: $font-Source-Sans;
	font-size:28px;
	line-height:30px;
	font-weight:900;
	color: $color1;
	margin:0;
	padding:0;
	letter-spacing: -1px;
}
p{
	font-family: $font-Source-Sans;
	font-size:16px;
	line-height:26px;
	color:$color1;
	font-weight:300;
	margin:0;
	padding:0;
}
section{
	&:after{
		content:'';
		display:block;
		clear:both;
	}
}

/*=====================================================
#2 Header starts here
=====================================================*/

.headerContainer{
	background:$colorBlack;
}
.headerContainer{
	&:after{
		content:'';
		display:block;
		clear:both;
	}
}
header{
	background:url(../images/bg_header.jpg) no-repeat center bottom;
	padding:95px 0 0 0;
	margin: 0 0 73px 0;
	background-size:cover;
	&:after{
	content:'';
	display:block;
	clear:both;
	}
}
.brandLogo{
	padding:0;
	margin:0;
	a{
		width:227px;
		height:56px;
		background:url(../images/logo.png) no-repeat 0 0;
		background-size:100%;
		text-indent:100%;
		overflow:hidden;
		white-space:nowrap;
		margin:0 auto;
		display:block;
	}
}
.mainContents{
	overflow:hidden;
	&:before{
		display:block;
		clear:both;
		content:'';
	}
}

/*=====================================================
#3 Slider code
=====================================================*/

.slider{
	padding:0 0 3% 0;
	margin: 5% 0 11px 0;
	position:relative;
	overflow:hidden;
	.slide{
		font-family: $font-Alic;
		font-size:70px;
		line-height:1;
		color:$colorWhite;
		letter-spacing: -1px;
		padding:0;
		text-align:center;
		white-space:nowrap;
		p{
			font-family: $font-Alic;
			font-size:50px;
			line-height:1;
			color:$colorWhite;
			letter-spacing: 0;
			padding:0;
			text-align:center;
			white-space:nowrap;
			color:$colorWhite;
			&.smallPara{
				font-size:40px;
				line-height:1;
				letter-spacing:0;
			}
		}
		span{
			padding: 0 15px;
			display:inline-block;
			&.fs1{
				font-size:50px;
			}
			i{
				font-style:normal;
			}
			 i.purple{
				color:$color6;
			}
			i.yellow{
				color:$color5;
			}
			i.green{
				color:$color4;
			}
			&.starterKit{
				width:300px !important;
				height:300px !important;
				text-align:center;
				border-radius:50%;
				-moz-border-radius:50%;
				-webkit-border-radius:50%;
				background:rgba(#cf3a8c, .8);
				span{
					display:block;
				}
			}
		}
	}
}
		
.readMore{
	font-size:40px;
	line-height:40px;
	color:$colorWhite;
	text-decoration:none;
	&:hover{
		color:$colorWhite;
		text-decoration:none;
		opacity:.8;
	}
}

/*=====================================================
#4 If nav is sticky
=====================================================*/

.is-sticky {
		.navContainer{
		max-width:none;
	}
	.mainNav{
		max-width:none;
		top:0;
	}
}

/*=====================================================
#5 Main navigation
=====================================================*/

.navContainer{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	min-height:80px;
	position: relative;
	z-index: 10000;
}
.mainNav{
	width:100%;
	max-width:1200px;
	min-height:80px;
	background:$colorBlack;
	margin-bottom: 0px;
	position: absolute;
	top: 50%;
	ul{
		text-align:center;
		margin: 0;
		padding: 18px 0;
		> li{
			display:inline-block;
			font-family : $font-Alic;
			font-size: 16px;
			line-height:22px;
			list-style:none;
			padding: 10px 1.5%;
			&:before{
				display:none;
				}
			a{
				color:$colorWhite;/*#737278*/
				text-decoration:none;
				&:hover{
					color:$color4;/*#d5d3de*/
				}
			}
			&.active{
				a{
					color:$color4;
				}
			}
		}
	}
}

/*=====================================================
#6 section 1 code at top on main page
=====================================================*/

.sec1{
	padding: 20px 0 80px 0;
}
.g--last {
	.innerSec{
		margin: 0 -8.4%;
	}
}
.innerSec{
	padding: 55px 10% 83px 10%;
	background:$colorWhite;
	margin: 0 -8.2%;
	position:relative;
	@include transition;
	&:before{
		content:'';
		display:block;
		margin:0 auto;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		@include transition;
	}
	.moreLink{
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		opacity: 0;
		-webkit-transform: rotateY(-180deg);
		-ms-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
	&:hover{
		background: #f6f6f6;
		.moreLink{
			opacity:1;
			-webkit-transform: rotateY(0);
			-ms-transform: rotateY(0);
			transform: rotateY(0);
		}
		&:before{
			-webkit-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}
	}
	
	.smallTxt{
		font-family: $font-Alic;
		font-size:22px;
		color: $color2 !important;
	}
	h3{
			margin-bottom: 13px;
	}
	p{
			margin: 0 0 18px 0;
	}
	&.award:before{
		background-position:-73px 0;
		margin-bottom: 36px;
		width: 102px;
		height: 118px;
	}
	&.friendly:before{
		background-position:-188px 0;
		width: 124px;
		margin-bottom: 33px;
		height: 121px;
	}
	&.time:before{
		background-position:-313px 0;
		width: 86px;
		height: 124px;
		margin-bottom: 28px;
	}
	&.cost:before{
		background-position:-401px 0;
		width: 124px;
		height: 110px;
		margin-bottom: 43px;
	}
}
.moreLink{
	position:absolute;
	left:0;
	bottom:0;
	display:block;
	width:100%;
	text-align:center;
	font-size:36px;
	line-height:68px;
	font-weight:900;
	letter-spacing:-3px;
	color: $colorWhite !important;
	background:$color4;
	text-decoration:none;
	display:block;
	opacity:0;
	@include transition;
	box-shadow: inset 0 0 0 0 $color1;
	&:hover{
		color:$colorWhite;
		box-shadow: inset 0 68px 0 0 $color1;
	}
}

/*=====================================================
#7 success section
=====================================================*/

.success{
	background: url(../images/bg1.jpg) no-repeat 50% center fixed;
}
.successInfoContainer{
    padding: 36px 0 0 0;
}
.successBox{
	overflow:hidden;
	text-align:center;
	p{
		font-size:24px;
		font-weight:normal;
		font-style:italic;
		color:$colorWhite;
		padding: 0 0 31px 0;
	}
}
.numbers{
	font-family: $font-Alic;
	font-size:100px;
	line-height:100px;
	color:#202126;
	margin: 0 0 3px 0;
	display: inline-block;
}
.iconBox{
	width:100%;
	max-width:200px;
	height:200px;
	line-height:200px;
	display:block;
	margin: 0 auto -75px auto;
	background:#808080;
	background-color:rgba(142,195,201,.3);
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	position:relative;
	&:before{
		content:'';
		display:inline-block;
		vertical-align:middle;
	}
	&.design:before{
		background-position:-542px 0;
		width: 56px;
		height: 99px;
	}
	&.hours:before{
		background-position:-611px 0;
		width: 77px;
		height: 90px;
	}
	&.webs:before{
		background-position:-698px 0;
		width: 99px;
		height: 86px;
	}
	&.clients:before{
		background-position:-806px 0;
		width: 90px;
		height: 90px;
	}
}

/*=====================================================
#8 Services section code
=====================================================*/

.services{
	background:#f6f6f6;
	padding: 32px 0 0 0;
}
.servicesSec{
    /* width: 100%; */
    margin: 0 -3.7% 0 0;
    padding: 0 0 28px 0;
}
.serviceNav{
	margin: 0;
	padding:0 0 100px 0;
	&:after{
		content:'';
		display:block;
		clear:both;
	}
	li{
		position:relative;
		float: left;
		margin-right: 3.7%;
		width: 28.8%;
		list-style:none;
		padding: 0 0 30px 0;
		margin-bottom: -11px;
		&:before{
			content:'';
			display:block;
			position:absolute;
			left:0;
			top:0;
		}
		&.network:before{
			background-position: -7px -142px;
			width: 53px;
			height: 55px;
		}
		&.design:before{
			background-position:-68px -142px;
			width: 66px;
			height: 38px;
		}
		&.photos:before{
			background-position:-146px -142px;
			width: 58px;
			height: 44px;
		}
		&.pictures:before{
			background-position:-212px -142px;
			width: 50px;
			height: 45px;
		}
		&.custom_design:before{
			background-position:-270px -142px;
			width: 73px;
			height: 33px;
		}
		&.browser:before{
			background-position:-355px -142px;
			width: 62px;
			height: 43px;
		}
	}
}
.serviceBox{
	padding:0 0 0 80px;
	h3{
    padding: 0 0 13px 0;
	}
}

/*=====================================================
#9 Get in touch box
=====================================================*/

.getInTouchBox{
   margin: -121px -5% 0 -5%;
}
.getInTouchContents{
	background: #e2a500;
	&:after{
		content:'';
		display:block;
		clear:both;
	}
}
.grayBox{
	/* float:left; */
	background:#353438;
	text-align:center;
	padding: 30px 0 30px 0;
	width:auto;
	margin-right:0;
	h4{
		font-family: $font-Source-Sans;
		font-size:86px;
		line-height: 65px;
		font-weight:900;
		color:$colorWhite;
		padding:0;
		margin:0;
		text-transform: uppercase;
		span{
			display:block;
			font-family: $font-Alic;
			font-size:37px;
			line-height: 23px;
			text-transform: none;
			font-weight: normal;
			letter-spacing: -1px;
		}
	}
}
.yellowBox{
	background:#e2a500;
	float: none;
	padding:0 0 20px 0;
	p{
		padding: 45px 0 0 0;
		color:$colorWhite;
		/* font-size: 90% !important; */
		text-align: center;
	}
}
.smallTxt2{
	float:none;
	font-family: $font-Alic;
	font-size:24px;
	line-height: 15px;
	margin: 6px 0 0 0;
	display:block;
}
.phoneNumber{
	font-family: $font-Source-Sans;
	font-size:38px;
	line-height: 30px;
	font-weight:900;
	display:inline-block;
	margin: 10px 0 0 0;
	float: none;
	letter-spacing: -2px;
	word-spacing: 0;
}
.roundBox{
	width:72px;
	height: 72px;
	line-height: 67px;
	font-family: $font-Alic;
	font-size:36px;
	text-align:center;
	background:$color1;
	display:block;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	margin:10px auto;
}
.msgBtn{
	font-family: $font-Source-Sans;
	font-size:25px;
	line-height:59px;
	font-weight:900;
	display:inline-block;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border:4px solid $colorWhite;
	color: $colorWhite !important;
	text-decoration:none;
	padding:0 25px;
	@include transition;
	background-color: transparent;
	box-shadow: inset 0 0 0 0 $color1;
	&:hover{
		color:$colorWhite;
		box-shadow: inset 0 59px 0 0 $color1;
	}
}

/*=====================================================
#10 Team Slider
=====================================================*/

.teamMembers{
  padding: 34px 0 0 0;
}
.teamSliderContainer{
	margin: 0 -5%;
	.owl-controls{
		opacity:0;
	}
	&:hover{
		.owl-controls{
			opacity:1;
		}
	}
}

.member{
	position:relative;
	overflow:hidden;
	img{
		position:absolute;
		width: 100%;
		left: 0;
		top: 0;
		opacity:1;
		-webkit-transition: all 0.4s ease-in-out 0.5s;
		-moz-transition: all 0.4s ease-in-out 0.5s;
		-o-transition: all 0.4s ease-in-out 0.5s;
		-ms-transition: all 0.4s ease-in-out 0.5s;
		transition: all 0.4s ease-in-out 0.5s;
	}
	&:hover img{
		-webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
	}
	.memberTxt{
		padding: 46% 15% 46% 15%;
		position: relative;
		z-index:100;
		-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		opacity: 0;
		-webkit-transition: all 0.3s ease-in 0.4s;
		-moz-transition: all 0.3s ease-in 0.4s;
		-o-transition: all 0.3s ease-in 0.4s;
		-ms-transition: all 0.3s ease-in 0.4s;
		transition: all 0.3s ease-in 0.4s;
			nav{
				margin:0;
				padding:0;
				.mediaNav{
					margin:0;
					padding:10px 0 0 0;
					-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
					filter: alpha(opacity=0);
					opacity: 0;
					-webkit-transform: translateY(100px);
					-moz-transform: translateY(100px);
					-o-transform: translateY(100px);
					-ms-transform: translateY(100px);
					transform: translateY(100px);
					-webkit-transition: all 0.3s ease-in-out 0.1s;
					-moz-transition: all 0.3s ease-in-out 0.1s;
					-o-transition: all 0.3s ease-in-out 0.1s;
					-ms-transition: all 0.3s ease-in-out 0.1s;
					transition: all 0.3s ease-in-out 0.1s;
					li{
						list-style:none;
						display:inline-block;
						margin:0;
						padding:0;
						a{
							display:inline-block;
							width:26px;
							height:26px;
							margin:0 0 0 0;
							&.facebook{
								background-position:-905px -1px;
							}
							&.twitter{
								background-position:-935px -1px;
							}
							&.linkedIn{
								background-position:-965px -1px;
							}
						}
						&:before{
							display:none;
						}
					}
				}
			}
			h2{
				text-align:left;
				font-size:36px;
				line-height: 34px;
				margin: 0 0 10px 0;
				padding: 0;
				-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity=0);
				opacity: 0;
				background: transparent;
				-webkit-transform: scale(10);
				-moz-transform: scale(10);
				-o-transform: scale(10);
				-ms-transform: scale(10);
				transform: scale(10);
				-webkit-transition: all 0.3s ease-in-out 0.1s;
				-moz-transition: all 0.3s ease-in-out 0.1s;
				-o-transition: all 0.3s ease-in-out 0.1s;
				-ms-transition: all 0.3s ease-in-out 0.1s;
				transition: all 0.3s ease-in-out 0.1s;
				span{
					font-size:22px;
					line-height:22px;
				}
			}
			p{
				-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
				filter: alpha(opacity=0);
				opacity: 0;
				-webkit-transform: scale(10);
				-moz-transform: scale(10);
				-o-transform: scale(10);
				-ms-transform: scale(10);
				transform: scale(10);
				-webkit-transition: all 0.3s ease-in-out 0.2s;
				-moz-transition: all 0.3s ease-in-out 0.2s;
				-o-transition: all 0.3s ease-in-out 0.2s;
				-ms-transition: all 0.3s ease-in-out 0.2s;
				transition: all 0.3s ease-in-out 0.2s;
			}
		}
		&:hover .memberTxt{
		-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
		-webkit-transition-delay: 0s;
		-moz-transition-delay: 0s;
		-o-transition-delay: 0s;
		-ms-transition-delay: 0s;
		transition-delay: 0s;
		h2{
			-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity: 1;
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			-o-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-webkit-transition-delay: 0.1s;
			-moz-transition-delay: 0.1s;
			-o-transition-delay: 0.1s;
			-ms-transition-delay: 0.1s;
			transition-delay: 0.1s;
		}
		p{
		 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
		 filter: alpha(opacity=100);
		 opacity: 1;
		 -webkit-transform: scale(1);
		 -moz-transform: scale(1);
		 -o-transform: scale(1);
		 -ms-transform: scale(1);
		 transform: scale(1);
		 -webkit-transition-delay: 0.2s;
		 -moz-transition-delay: 0.2s;
		 -o-transition-delay: 0.2s;
		 -ms-transition-delay: 0.2s;
		 transition-delay: 0.2s;
		}
		.mediaNav{
			-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity: 1;
			-webkit-transform: translateY(0px);
			-moz-transform: translateY(0px);
			-o-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
			-webkit-transition-delay: 0.3s;
			-moz-transition-delay: 0.3s;
			-o-transition-delay: 0.3s;
			-ms-transition-delay: 0.3s;
			transition-delay: 0.3s;
		}
	}
}
.teamSlider{
  margin: 0;
	.owl-item{
		padding:0 35px;
		&:hover img{
			opacity: .2;
		}
	}
	.owl-wrapper-outer{
		position:relative;
		z-index:1;
	}
	.owl-buttons{
		position:absolute;
		left:0;
		top:50%;
		width:100%;
		height:118px;
		div{
			text-indent:100%;
			white-space:nowrap;
			overflow:hidden;
			width:118px;
			height:118px;
			position: relative;
			z-index: 1;
			&.owl-prev{
				background-position:-593px -127px;
				float:left;
				margin: 0 0 0 5%;
			}
			&.owl-next{
				background-position:-745px -130px;
				float:right;
				margin: 0 5% 0 0;
			}
		}
	}
}

/*=====================================================
#11 Portfolio section code
=====================================================*/

.portfolio{
	padding: 30px 0 0 0;
}
.sorter{
	margin:0;
	padding:0;
	ul{
		padding: 7px 0 0 0;
		margin: 0 0 45px 0;
		text-align:center;
		li{
			display:inline-block;
			padding: 0 5px;
			margin: 0 0 15px 0;
			text-transform:uppercase;
			font-family: $font-Source-Sans;
			font-size:18px;
			line-height: 44px;
			font-weight:900;
			height:42px;
			a{
				display:inline-block;
				text-decoration:none;
				color:$colorWhite;
				background:$color3;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				padding:0 20px;
				-webkit-transition: 0.33s ease-in-out;
				-moz-transition: 0.33s ease-in-out;
				-o-transition: 0.33s ease-in-out;
				transition: 0.33s ease-in-out;
				box-shadow: inset 0 0 0 0 $color1;
				&:hover{
					text-decoration:none;
					color:$colorWhite;
					box-shadow: inset 0 -44px 0 0 $color4;
				}
			}
			&:before{
				display:none;
			}
			&.active{
				a{
					text-decoration:none;
					color:$colorWhite;
					box-shadow: inset 0 -44px 0 0 $color4;
				}
			}
		}
	}
}

/*=====================================================
#12 Sorting items
=====================================================*/

.sortItems{
	margin: 0 0 43px 0;
	padding:0;
	ul{
		padding:0;
		margin: 0 -1.5%;
		&:after{
			content:'';
			display:block;
			clear:both;
		}
		li{
			list-style:none;
			padding:0;
			margin: 0 0 40px 0;
			width: 25%;
			padding: 0 1.578%;
			float:left;
			text-align:center;
			&:before{
				display:none;
			}
			a{
				position:relative;
				display:block;
				border:1px solid #e6e6e6;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				overflow:hidden;
				img{
					width:100%;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					-webkit-transform: scaleY(1);
					-moz-transform: scaleY(1);
					-o-transform: scaleY(1);
					-ms-transform: scaleY(1);
					transform: scaleY(1);
					-webkit-transition: all 0.5s ease-in-out;
					-moz-transition: all 0.5s ease-in-out;
					-o-transition: all 0.5s ease-in-out;
					-ms-transition: all 0.5s ease-in-out;
					transition: all 0.5s ease-in-out;
				}
				.portfolioHover{
					width:100%;
					height:100%;
					position:absolute;
					left:0;
					top:0;
					opacity:0;
					border-radius: 5px;
					-moz-border-radius: 5px;
					-webkit-border-radius: 5px;
					background-color: rgba(255, 231, 179, 0.3);
					-webkit-transition: all 0.5s linear;
					-moz-transition: all 0.5s linear;
					-o-transition: all 0.5s linear;
					-ms-transition: all 0.5s linear;
					transition: all 0.5s linear;
					-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
					filter: alpha(opacity=0);
					opacity: 0;
					p{
						position:absolute;
						bottom: 17%;
						font-family: $font-Alic;
						font-size:22px;
						line-height:22px;
						color:#666;
						width: 100%;
						-webkit-transform: scale(0);
						-moz-transform: scale(0);
						-o-transform: scale(0);
						-ms-transform: scale(0);
						transform: scale(0);
						color: #333;
						-webkit-transition: all 0.5s linear;
						-moz-transition: all 0.5s linear;
						-o-transition: all 0.5s linear;
						-ms-transition: all 0.5s linear;
						transition: all 0.5s linear;
						-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
						filter: alpha(opacity=0);
						opacity: 0;
						span{
							color:$color4;
							font-family: $font-Source-Sans;
							font-size:14px;
							font-weight:800;
							display: block;
						}
					}
				}
				.hoverIcon{
					/* background-position: -434px -142px; */
					width: 32px;
					height: 32px;
					line-height:32px;
					display: inline-block;
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -16px 0 0 -16px;
					text-align:center;
					-webkit-transform: scale(0);
					-moz-transform: scale(0);
					-o-transform: scale(0);
					-ms-transform: scale(0);
					transform: scale(0);
					-webkit-transition: all 0.5s linear;
					-moz-transition: all 0.5s linear;
					-o-transition: all 0.5s linear;
					-ms-transition: all 0.5s linear;
					transition: all 0.5s linear;
					-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
					filter: alpha(opacity=0);
					opacity: 0;
					&:before{
						color:#9ec02e;
						font-size:30px;
					}
				}
				&:hover{
					img{
						-webkit-transform: scale(10);
						-moz-transform: scale(10);
						-o-transform: scale(10);
						-ms-transform: scale(10);
						transform: scale(10);
						-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
						filter: alpha(opacity=0);
						opacity: 0;
					}
					.portfolioHover{
						-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
						filter: alpha(opacity=100);
						opacity: 1;
					}
					p{
						 -webkit-transform: scale(1);
						 -moz-transform: scale(1);
						 -o-transform: scale(1);
						 -ms-transform: scale(1);
						 transform: scale(1);
						 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
						 filter: alpha(opacity=100);
						 opacity: 1;
					}
					.hoverIcon{
						 -webkit-transform: scale(1);
						 -moz-transform: scale(1);
						 -o-transform: scale(1);
						 -ms-transform: scale(1);
						 transform: scale(1);
						 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
						 filter: alpha(opacity=100);
						 opacity: 1;
					}
				}
			}
		}
	}
}

/*=====================================================
#13 Free updates box code
=====================================================*/

.freeUpdatesBox{
   margin: 0 -5% -125px -5%;
}
.freeUpdatesContents{
	background: #9abc2d;
	&::after{
		content:'';
		display:block;
		clear:both;
	}
	.grayBox{
		/* float:left; */
		background:#353438;
		text-align:center;
		padding: 30px 0 30px 0;
		width:auto;
		margin-right:0;
		h4{
			font-family: $font-Source-Sans;
			font-size:55px;
			line-height: 50px;
			font-weight:900;
			letter-spacing:-4px;
			color:$colorWhite;
			padding:0;
			margin:0;
			text-transform: uppercase;
			span{
				display:block;
				font-family: $font-Alic;
				font-size:37px;
				line-height: 23px;
				text-transform: none;
				font-weight: normal;
				letter-spacing: -1px;
			}
		}
	}
}
.greenBox{
	background: #9abc2d;
	float: none;
	padding:0 0 20px 0;
	p{
		padding: 57px 10px 20px 10px;
		color:$colorWhite;
		font-family: $font-Alic;
		font-size:24px;
		/* font-size: 90% !important; */
		text-align: center;
	}
}
.fldSet{
	border:0;
	padding:0;
	background:none;
	p{
		padding:0;
		margin: 0 auto 33px;
		background:$colorWhite;
		float:none;
		width:60%;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		position:relative;
		&:after{
			content:'';
			clear:both;
			display:block;
		}
		input[type="text"], input[type="email"]{
			background: none;
			width: 50%;
			border: 0;
			border-left:1px solid #9abc2d;
			margin: 0;
			padding: 22px 10px 22px 30px;
			float:left;
			font-size: 20px;
			color: $color1;
		}
		input[type="text"]:first-child{
			border:0;
		}
		
	}
	input[type="submit"]{
		font-family: $font-Source-Sans;
		font-size: 30px;
		line-height: 59px;
		font-weight: 900;
		display: inline-block;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 4px solid $colorWhite;
		color: $colorWhite;
		text-decoration: none;
		padding: 0 25px;
		background: none !important;
		display: block;
		margin: 0 auto;
		-webkit-transition: 0.33s ease-in-out;
		-moz-transition: 0.33s ease-in-out;
		-o-transition: 0.33s ease-in-out;
		transition: 0.33s ease-in-out;
		background-color: transparent;
		box-shadow: inset 0 0 0 0 $color1;
		&:hover{
			box-shadow: inset 0 -59px 0 0 $color1;
		}
	}
}

/*=====================================================
#14 Pricing updates section code
=====================================================*/

.pricingUpdates{
	background:#f6f6f6;
	padding: 171px 0 0 0;
}
.pricingContents{
}
.pricingNav{
	padding: 22px 0 52px 0;
	margin:0;
	ul{
		padding:0;
		margin:0;
		&:after{
			content:'';
			display:block;
			clear:both;
		}
		li{
			list-style:none;
			width:100%;
			text-align:center;
			padding: 30px 0 30px 0;
			margin: 0;
			float: left;
			font-family: $font-Source-Sans;
			transition:all 0.2s ease-out;
			-webkit-transition:all 0.2s ease-out;
			-moz-transition:all 0.2s ease-out;
			-o-transition:all .2s ease-out;
			&:before{
				display:none;
			}
			&:hover{
				-webkit-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
				box-shadow:0 0 5px rgba($colorBlack, .2);
				-moz-box-shadow:0 0 5px rgba($colorBlack, .2);
				-webkit-box-shadow:0 0 5px rgba($colorBlack, .2);
				position:relative;
				z-index:1;
				background-color:$colorWhite;
			}
			.package{
				font-size: 24px;
				line-height: 24px;
				font-weight: 900;
				color:#ccc;
				text-transform: uppercase;
				letter-spacing: -1px;
				padding: 0 0 22px 0;
				display: block;
			}
			.price{
				border-top: 2px solid #ededed;
				border-bottom: 2px solid #ededed;
				display:block;
				font-family: $font-Alic;
				font-size:70px;
				line-height: 90px;
				height:100px;
				letter-spacing: -2px;
			}
			 p{
				font-family: $font-Source-Sans;
				font-size:20px;
				line-height: 48px;
				padding:0;
				margin:0;
				letter-spacing: -1px;
				color:$color2;
				padding: 10px 0 12px 0;
				span{
					display:block;
				}
			}
			strong{
				font-weight:900;
			}
			.planBtn{
				width:170px;
				margin:0 auto 0 auto;
				text-align:center;
				height:52px;
				line-height:52px;
				list-style:none;
				text-decoration: none;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				color:$colorWhite;
				font-size:22px;
				font-weight:900;
				letter-spacing:-1px;
				display: inline-block;
				-webkit-transition: 0.23s ease-in-out;
				-moz-transition: 0.23s ease-in-out;
				-o-transition: 0.23s ease-in-out;
				transition: 0.23s ease-in-out;
				background-color: transparent;
				box-shadow: inset 0 0 0 0 $color1;
				&:hover{
					box-shadow: inset 0 52px 0 0 $color1;
				}
			}
			&.green{
				.price{
					color:$color4;
				}
				.planBtn{
					background: $color4;
				}
			}
			&.yellow{
				.price{
					color:$color5;
				}
				.planBtn{
					background:$color5;
				}
			}
			&.purple {
				.price{
					color:$color6;
				}
				.planBtn{
					background:$color6;
				}
			}
			&.blue{
				.price{
					color:$color7;
				}
				.planBtn{
					background:$color7;
				}
			}
		}
	}
}

/*=====================================================
#15 Code for blog section
=====================================================*/

.blogItems{
    padding: 35px 0 20px 0;
}
.blogSec{
}
.blogPost{
	padding: 0 0 52px 0;
	h2{
		font-size: 28px;
		line-height: 25px;
		text-align:left;
		font-weight:bold;
		letter-spacing:-1px;
		margin: 0 0 13px 0;
		padding: 0;
	}
}
.imgContainer{
	display:block;
	position:relative;
	margin: 0 0 29px 0;
	overflow:hidden;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	img{
		width:100%;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	span.mask{
		text-indent:100%;
		max-width:100%;
		max-height:100%;
		white-space:nowrap;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		/*background:#3e3e3f;*/
		opacity:0;
		display:none;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border:0px solid rgba(0,0,0,0.7);
		 -webkit-transition: all 0.4s ease-in-out;
		 -moz-transition: all 0.4s ease-in-out;
		 -o-transition: all 0.4s ease-in-out;
		 -ms-transition: all 0.4s ease-in-out;
		 transition: all 0.4s ease-in-out;
		 display:block;
		 opacity:0;
	}
	span.fa{
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		display:block;
		opacity:0;
		text-indent:100%;
		overflow:hidden;
	}
	span.fa:before{
		/*background-position:-521px -134px;*/
		width: 42px;
		height: 42px;
		display:block;
		position:absolute;
		left:50%;
		top:50%;
		margin:-23px 0 0 -23px;
		color:$colorWhite;
		font-size: 29px;
		z-index: 2000;
		text-align: center;
		text-indent: 0;
		border: 4px solid $colorWhite;
		line-height: 45px;
		border-radius: 50%;
		opacity:0;
		text-indent:0;
		-moz-transform:scale(0,0);
		 -webkit-transform:scale(0,0);
		 -o-transform:scale(0,0);
		 -ms-transform:scale(0,0);
		 transform:scale(0,0);
		 -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
		 -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
		 -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
		 -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
		 transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
	}
	&:hover span.mask{
		display:block;
		opacity: 1;
		border:200px solid rgba(0,0,0,0.7);
	}
	&:hover span.fa{
		display:block;
		opacity: 1;
	}
	&:hover span.fa:before{
		opacity:1;
		-moz-transform:scale(1,1);
		-webkit-transform:scale(1,1);
		-o-transform:scale(1,1);
		-ms-transform:scale(1,1);
		transform:scale(1,1);
		-moz-transition-delay:0.3s;
		-webkit-transition-delay:0.3s;
		-o-transition-delay:0.3s;
		-ms-transition-delay:0.3s;
		transition-delay:0.3s;
	}
}

/*=====================================================
#16 Get in touch contact form code
=====================================================*/

.contactFormContainer{
    background: #f6f6f6 url(../images/contact_bg.jpg) no-repeat 0 bottom;
    padding: 36px 0 51px 0;
}
.contactForm{
	address{
		font-family: $font-Source-Sans;
		font-size:22px;
		line-height:32px;
		color: $color1;
		font-weight:900;
		font-style: normal;
		letter-spacing: -1px;
		padding:0 0 30px 0;
		span{
			color:#ccc;
			display: block;
		}
		a{
			color:$color1;
			text-decoration:none;
			&:hover{
				color:#ccc;
			}
		}
	}
}
.fldSet2{
	border:0;
	padding: 7px 0 0 0;
	p{
		width: 50%;
		float:left;
		padding: 0 0 0 3%;
		&.txtAreaContainer{
			width: 100%;
			float: none;
			padding: 0 0 0 3%;
			clear: both;
		}
	}
	input[type="text"], input[type="email"]{
		font-family: $font-Alic;
		border:1px solid $color1;
		width:100%;
		height: 58px;
		font-size:18px;
		line-height:18px;
		padding:20px 18px;
		/*float: left;*/
		margin: 0 0 30px 0;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	textarea{
		font-family: $font-Alic;
		border:1px solid $color1;
		max-width:100%;
		width: 100%;
		height: 275px;
		font-size:18px;
		line-height:18px;
		padding:20px 18px;
		/* float: left; */
		margin: 0 0 22px 0;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}
	input[type="submit"]{
		font-family: $font-Source-Sans;
		width:250px;
		margin:0 auto 0 auto;
		text-align:center;
		height: 67px;
		line-height: 43px;
		list-style:none;
		text-decoration: none;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		color:$colorWhite;
		font-size:30px;
		font-weight:900;
		letter-spacing:-1px;
		display: inline-block;
		background: $color4 !important;
		border: 0;
		outline: none;
		margin: 0 auto;
		padding: 0 0 5px 0;
		-webkit-transition: 0.33s ease-in-out;
		-moz-transition: 0.33s ease-in-out;
		-o-transition: 0.33s ease-in-out;
		transition: 0.33s ease-in-out;
		background-color: transparent;
		box-shadow: inset 0 0 0 0 $color1;
		&:hover{
			box-shadow: inset 0 -67px 0 0 $color1;
		}
	}
}
.slctContainer{
	font-family: $font-Alic;
	border:1px solid $color1;
	width: 47%;
	height: 58px;
	font-size:18px;
	line-height: 58px;
	padding: 0 0;
	float: left;
	margin: 0 0 30px 3%;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	position:relative;
	background:$colorWhite;
	select{
    width: 100%;
    height: 100%;
    border: 0;
		padding:0 18px;
    background: none;
    padding-top: 15px;
    padding-bottom: 15px;
		display:block;
		&:focus{
			outline:none;
		}
	}
}
::-webkit-input-placeholder {
   color: $color1;
}
:-moz-placeholder { /* Firefox 18- */
   color: $color1;  
}
::-moz-placeholder {  /* Firefox 19+ */
   color: $color1;  
}
:-ms-input-placeholder {  
   color: $color1;  
}
input.dirty:not(:focus):invalid, textarea.dirty:not(:focus):invalid { 
	background-color: #FFD9D9; 
}
input.dirty:not(:focus):valid, textarea.dirty:not(:focus):valid { 
	background-color: #D9FFD9; 
}
.submitContainer{
	padding:0 0 30px 3%;
	text-align:center;
}
.mapContianer{
	width:100%;
	/* height:580px; */
	iframe{
		width:100% !important;
		height:100% !important;
	}
	img{
		width:100%;
	}
}
.glass {
  width: 260px;
  height: 260px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
							0 0 0 7px rgba(255, 255, 255, 0.85),
							0 0 7px 7px rgba(0, 0, 0, 0.25), 
							inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /* hide the glass by default */
  display: none;
  cursor: pointer;
}

/*=====================================================
#17 Footer
#18 Socail media secton at bottom
=====================================================*/

.socialLinksContainer{
}
.mediaLinks{
	padding:0;
	margin:0;
	ul{
		padding: 85px 0;
		margin:0;
		text-align:center;
		li{
			list-style:none;
			display:inline-block;
			padding: 0 14px;
			&:before{
				display:none;
			}
			a{
				display:inline-block;
				-webkit-transition:none;
				transition:none;
				-moz-transition:none;
				position:relative;
				width:80px;
				height:80px;
				line-height:80px;
				background: rgba(255,255,255,0.1);
				-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
				-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
				transition: transform ease-out 0.1s, background 0.2s;
				border-radius: 50%;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				&:before{
					-webkit-transition:none;
					transition:none;
					-moz-transition:none;
					display:inline-block;
					text-align:center;
					vertical-align:middle;
					color:#ccc;
					font-size: 44px;
				}
				&:after{
					content:'';
					width:100%;
					height:100%;
					border-radius:50%;
					-moz-border-radius:50%;
					-webkit-border-radius:50%;
					display:block;
					position:absolute;
					box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
					opacity: 0;
					-webkit-transform: scale(0.3);
					-moz-transform: scale(0.3);
					-ms-transform: scale(0.3);
					transform: scale(0.3);
					left:0;
					top:0;
				}
				&:hover{
					background: rgba(255,255,255,0.05);
					&:after{
						-webkit-animation: sonarEffect 1s ease-out 10ms;
						-moz-animation: sonarEffect 1s ease-out 10ms;
						animation: sonarEffect 1s ease-out 10ms;
					}
					&:before{
						-webkit-animation:spin .3s linear 1;
						-moz-animation:spin .3s linear 1;
						animation:spin .3s linear 1;
						color:#7ed6fe;
					}
				}
			}
		}
	}
}

/*=====================================================
#19 Copyrights
=====================================================*/

.copyRights{
	text-align:center;
	background:#292929;
	padding: 37px 0 40px 0;
	p{
		text-align:center;
		color:#4c4c4c;
		font-family: $font-Alic;
		font-size:18px;
		line-height:20px;
		letter-spacing: -1px;
		span{
			color:#808080;
		}
		a{
			color:$color2;
			text-decoration:none;
			&:hover{
				color:$color4;
			}
		}
	}
}

/*=====================================================
#20 General Items used (secondary)
#21.1 Loader in header
=====================================================*/

#loader {
	-webkit-transition: 0.33s ease-in-out;
	-moz-transition: 0.33s ease-in-out;
	-o-transition: 0.33s ease-in-out;
	transition: 0.33s ease-in-out;
	z-index: 20000;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: $colorBlack;
	text-align: center;
	padding-top: 25%;
	color: $colorWhite;
	font-size: 24px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 50px;
	 #loading-bar {
		width: 50%;
		height: 1px;
		position: absolute;
		top: 50%;
		left: 25%;
		#inner {
			-webkit-transition: 0.25s ease-in-out;
			-moz-transition: 0.25s ease-in-out;
			-o-transition: 0.25s ease-in-out;
			transition: 0.25s ease-in-out;
			background-color: white;
			display: block;
			height: 1px;
			width: 0;
		}
	}
}
body{
	&.loading {
		#loader {
			opacity: 1;
		}
	}
	&.loaded{
		#loader {
			opacity: 0;
			pointer-events: none;
			z-index:-1;
		}
	}
}

/*=====================================================
#21.2 scroll to top function
=====================================================*/

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
	z-index: 10000;
	&:active, &:focus{
		outline:none;
	}
}

#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
#ascrail2000-hr{
	display: none !important;
}
//extrans
.subsection-number{
	letter-spacing:0;
}
.featured-spotlight,.highlight-module--remember,.highlight-module--learning,.styleguide__next-lessons{
	h3,p{
		color:#fff;
	}
}
.color--white{
	color:#fff !important;
}

/*=====================================================
#21.3 Animations
#21.3.1 Fadein effect of sections on scroll
=====================================================*/

[class*=".trans-"] {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	perspective: 1000;
}
.trans-fade {
	opacity: 0;
	&.wb {
		opacity: 1;
	}
}

/*=====================================================
#21.3.2 Slide-left effect of sections on scroll
=====================================================*/

.trans-slide-left {
	-webkit-transform: translate3d(-30%, 0, 0);
	transform: translate3d(-30%, 0, 0);
	opacity: 0;
	&.wb {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*=====================================================
#21.3.3 Slide-right effect of sections on scroll
=====================================================*/

.trans-slide-right {
	-webkit-transform: translate3d(30%, 0, 0);
	transform: translate3d(30%, 0, 0);
	opacity: 0;
	&.wb {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*=====================================================
#21.3.4 Slide-top effect of sections on scroll
=====================================================*/

.trans-slide-top {
	-webkit-transform: translate3d(0, -30%, 0);
	transform: translate3d(0, -30%, 0);
	opacity: 0;
	&.wb {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*=====================================================
#21.3.5 Slide-bottom effect of sections on scroll
=====================================================*/

.trans-slide-bottom {
	-webkit-transform: translate3d(0, 30%, 0);
	transform: translate3d(0, 30%, 0);
	opacity: 0;
	&.wb {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

/*=====================================================
#21.3.6 Pop effect of sections on scroll
=====================================================*/

.trans-pop {
	opacity: 0;
	&.wb {
		-webkit-animation: pop 0.6s ease-out 0.5s both;
		-moz-animation: pop 0.6s ease-out 0.5s both;
		-o-animation: pop 0.6s ease-out 0.5s both;
		animation: pop 0.6s ease-out 0.5s both;
		opacity:1;
		opacity: 1 \9;
	}
}

/*=====================================================
#21.3.7 Fall effect of sections on scroll
=====================================================*/

.trans-fall {
	opacity: 0;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	&.wb {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		opacity: 1;
	}
}

/*=====================================================
#21.3.8 Helix effect of sections on scroll
=====================================================*/

.trans-helix {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	opacity: 0;
	-webkit-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	&.wb {
		opacity: 1;
		-webkit-transform: rotateY(0);
		-ms-transform: rotateY(0);
		transform: rotateY(0);
	}
}
@-webkit-keyframes pop {
	0% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
	50% {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
	}
	100% {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
}
@-moz-keyframes pop {
	0% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
	50% {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
	}
	100% {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
}
@-o-keyframes pop {
	0% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
	50% {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
	}
	100% {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
}
@keyframes pop {
	0% {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
	50% {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	opacity: 1;
	}
	100% {
	opacity: 1;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	}
}

/*=====================================================
#21.3.9 sonar effect
=====================================================*/

@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 20px 5px #00affe, 0 0 0 5px rgba(0,0,0,0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 20px 5px #00affe, 0 0 0 5px rgba(0,0,0,0.5);
		-webkit-transform: scale(1.2);
		opacity: 0;
	}
}

@-moz-keyframes spin { 
	100% { -moz-transform: rotate(360deg); 
	} 
}
@-webkit-keyframes spin { 
	100% { -webkit-transform: rotate(360deg); 
	} 
}
@keyframes spin { 
	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 
	} 
}

/*Animations code end here*/
/*=====================================================
#22 Media queries
=====================================================*/

@media only screen and (max-width: 619px){
	.fs-pager-wrapper{
		bottom:3%;
	}
	.sticky-wrapper{
		height:auto !important;
	}
	.servicesSec{
		margin:0;
	}
	.serviceNav {
		li{
			margin-right: 0;
			width:auto;
			float:none;
		}
	}
	.sortItems{
		margin:0;
		ul{
			li{
				width: 100%;
				padding:0;
			}
		}
	}
	.fldSet{
		p{
			width:90%;
		}
	}
	/*.pricingNav ul li{
		width:100%;
	}*/
	.fldSet2{
		p, p.txtAreaContainer{
			padding-left:0;
			width:100%;
			float: none;
		}
		input[type="text"], input[type="email"], textarea, .slctContainer{
			margin-left:0;
			float:none;
			width:100%;
		}
		textarea{
			height:150px;
		}
		.submitContainer{
			padding-left:0;
		}
	}
	
	.slctContainer{
		float:none;
		width:100%;
	}
	header{
		background:url(../images/bg_header.jpg) repeat center 0;
		background-size:cover;
		padding:95px 0 0 0;
		margin: 0 0 73px 0;
		-webkit-transition: -webkit-transform 0.3s ease-out;
		transition: transform 0.3s ease-out;
		position:relative;
	}
	.headerContainer{
		.menu{
			display:block !important;
			position:absolute;
			left:0;
			top:0;
			background: $colorBlack;
			border: 0;
			width: 50px;
			height: 44px;
			border: 1px solid $color3;
			&:before{
				color:$colorWhite;
				font-size: 28px;
			}
			&:focus{
				outline:none;
			}
		}
	}
	.open{
		.menu:before{
			content:'X';
		}
	}
	header.open{
		-webkit-transform: translate(250px,0);
		transform: translate(250px,0);
	}
	.navContainer{
		position:absolute;
		top:0;
		left:0;
		padding:0;
		margin:0;
		width:250px;
		-webkit-transition: -webkit-transform 0.3s ease-out;
		transition: transform 0.3s ease-out;
		-ms-flex-direction: row;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-transform: translate(-250px,0);
		transform: translate(-250px,0);
		z-index:-1000;
		&.open{
			-webkit-transform: translate(-250px,0);
			transform: translate(-250px,0);
			z-index:10000;
		}
	}
	.mainNav{
		text-align:left;
		position: static;
		background:$colorBlack;
		ul{
			padding:0;
			margin:0;
			> li{
				display:block;
				border-bottom:1px solid $colorWhite;
				text-align: left;
				float:none;
				padding:0;
				margin:0;
				font-size: 20px;
				a{
					display:block;
					padding:10px 10px;
					-webkit-transition: 0.23s ease-in-out;
					-moz-transition: 0.23s ease-in-out;
					-o-transition: 0.23s ease-in-out;
					transition: 0.23s ease-in-out;
					box-shadow: inset 0 0 0 0 $color1;
					&:hover{
						box-shadow: inset 250px 0 0 0 $color4;
						color:$colorWhite;
					}
				}
				&:first-child{
					border-top:1px solid $colorWhite;
				}
				&.active{
					a{
						box-shadow: inset 250px 0 0 0 $color4;
						color:$colorWhite;
					}
				}
			}
		}
	}
}
@media only screen and (max-width: 799px) and (min-width: 620px){
	.serviceNav{
		li{
			margin-right: 3.7%;
			width: 45.75%;
		}
	}
	.sortItems{
		ul{
			li{
				width: 50%;
				padding: 0 1.578%;
			}
		}
	}
	.pricingNav{
		ul{
			li{
				width:50%;
			}
		}
	}
	.fldSet2{
		p, p.txtAreaContainer{
			padding-left:0;
			width:100%;
			float: none;
		}
		input[type="text"], input[type="email"], textarea, .slctContainer{
			margin-left:0;
			float:none;
			max-width:100%;
			width:100%;
		}
		textarea{
			height:150px;
		}
		.submitContainer{
			padding-left:0;
		}
	}
 }
@media only screen and (min-width: 800px){
	h3{
		font-size:20px;
		line-height:30px;
	}
	.moreLink{
		font-size:28px;
	}
	.iconBox{
		width:150px;
		height:150px;
		line-height:150px;
	}
	.pricingNav{
		ul{
			li{
				width:25%;
			}
		}
	}
}
@media only screen and (min-width: 1200px){
	.container{
		width:91.20%;
		padding:0 4.4%;
		max-width:1200px;
		margin:0 auto;
	}
	.mainNav{
		ul{
			> li{
				padding: 10px 3.5%;
				font-size: 20px;
			}
		}
	}
	h3{
		font-size:28px;
		line-height:30px;
	}
	.moreLink{
		font-size:36px;
	}
	.iconBox{
		width:200px;
		height:200px;
		line-height: 186px;
	}
	.grayBox{
		float:left;
		background:#353438;
		text-align:center;
		padding: 82px 0 80px 0;
		width: 20%;
		margin-right: 3%;
		h4{
			font-family: $font-Source-Sans;
			font-size:86px;
			line-height: 65px;
			font-weight:900;
			color:$colorWhite;
			padding:0;
			margin:0;
			text-transform: uppercase;
			span{
				display:block;
				font-family: $font-Alic;
				font-size:37px;
				line-height: 23px;
				text-transform: none;
				font-weight: normal;
				letter-spacing: -1px;
			}
		}
	}
	.freeUpdatesContents{
		.grayBox{
			float:left;
			background:#353438;
			text-align:center;
			padding: 80px 0 80px 0;
			width: 20%;
			margin-right: 5%;
			h4{
				font-family: $font-Source-Sans;
				font-size:55px;
				line-height: 55px;
				font-weight:900;
				color:$colorWhite;
				padding:0;
				margin:0;
				text-transform: uppercase;
				span{
					display:block;
					font-family: $font-Alic;
					font-size:37px;
					line-height: 23px;
					text-transform: none;
					font-weight: normal;
					letter-spacing: -1px;
				}
			}
		}
	}
	.greenBox{
		float:left;
		p{
			text-align:left;
			margin:0 20px 20px 0;
		}
	}
	.fldSet{
		p{
			float:left;
			overflow: visible;
		}
		input[type="submit"], input[type="email"]{
			display:inline;
		}
	}
	.yellowBox{
		background:#e2a500;
		float: left;
		p{
			padding: 92px 0 0 0;
			color:$colorWhite;
			/* font-size: 90% !important; */
			text-align: center;
		}
	}
	
	.smallTxt2{
		float:left;
		font-family: $font-Alic;
		font-size:24px;
		line-height: 15px;
		margin: 6px 0 0 0;
	}
	.phoneNumber{
		font-family: $font-Source-Sans;
		font-size:50px;
		line-height: 30px;
		font-weight:900;
		display:inline-block;
		margin: 10px 40px 0 0;
		float: left;
		clear: left;
		letter-spacing: -2px;
		word-spacing: 0;
	}
	.roundBox{
		width:72px;
		height: 72px;
		line-height: 67px;
		font-family: $font-Alic;
		font-size:36px;
		text-align:center;
		background:$color1;
		display:inline-block;
		border-radius:50%;
		-moz-border-radius:50%;
		-webkit-border-radius:50%;
		margin: 0 30px 0 0;
	}
	.msgBtn{
		font-family: $font-Source-Sans;
		font-size:30px;
		line-height:59px;
		font-weight:900;
		display:inline-block;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border:4px solid $colorWhite;
		color:$colorWhite;
		text-decoration:none;
		padding:0 25px;
		-webkit-transition: 0.33s ease-in-out;
		-moz-transition: 0.33s ease-in-out;
		-o-transition: 0.33s ease-in-out;
		transition: 0.33s ease-in-out;
		background-color: transparent;
		box-shadow: inset 0 0 0 0 $color1;
		&:hover{
			color: $colorWhite !important;
			box-shadow: inset 0 59px 0 0 $color1;
		}
	}
	.pricingNav{
		ul{
			li{
				width:25%;
			}
		}
	}
}

/*=====================================================
#23 Retina ready code 
=====================================================*/

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .brandLogo {
		a{
			background:url(../images/logo@2x.png) no-repeat 0 0;
			background-size:100% 100%;
		}
  }
}