.page.index .top-slider{
	.slick-dots{
		position:absolute;
		bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
		li{
			display:inline-block;
			button {
				border-radius: 50%;
				width: 16px;
				height: 16px;
				border: none;
				margin: 0 8px;
			}
			&.slick-active button{
				background-color: #454545;
			}
		}
	}
}
.page.index .top-slider .item{
	position:relative;
}
.page.index .top-slider .item .img{
	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
}
.page.index .top-slider h5{
	color: #60b7f1;
	padding-bottom: 15px;
	position: relative;
	font-size: 14px;
}
.page.index .top-slider h5:after{
	position: absolute;
	content: "";
	background-color: #60b7f1;
	height: 3px;
	width: 30px;
	bottom: -1px;
	left: 0;
}
.page.index .top-slider h2{
	color: #eeeeee;    
	line-height: 1.1;
	margin: 15px 0;
}
.page.index .top-slider p{
	font-weight: 600;
	line-height: 1.6;
	color: #999 !important;
}
.page.index .top-slider .btn{
	display: inline-block;
	margin-top: 20px;
	font-size: 14px;
}

.page.index .promo{
	background-color: #eeeeee;
}
.page.index .promo .text{
	display: inline-block;
	line-height: 75px;
	font-size: 2em;
}
.page.index .promo .buttons{
	padding-top: 30px;
}
.page.index .promo .btn{
	font-size: 1.4em;
}
.page.index .promo .btn.primary{
	margin-right: 1em;
}

.page.index #courses{
	padding-top: 6em;
	padding-bottom: 6em;
}
.page.index #courses h3{
	display:block;
	width:100%;
}
.page.index #courses img{
	width:100%;
}
.page.index #courses h5{
	margin:2.5em 0 1.5em;
	font-size: 1.4em;
	color:#333333;
}

.page.index #courses .panel{
	position:relative;
}
.page.index #courses .panel > div{
	margin:2em 0;
}
.page.index #courses .panel > div:first-of-type{
	margin-top: 0;
}
.page.index #courses .panel > div:last-of-type{
	margin-bottom: 0;
}
.page.index #courses .panel > div > *{
	display:inline-block;
	width: 63%;
	vertical-align: top;
}
.page.index #courses .panel > div > img{
	width: 32%;
	margin-right: 4%;
}
.page.index #courses .panel h5{
	margin: 0 0 0.5em;
}

.page.index #products{
	padding-top: 6em;
	padding-bottom: 6em;
	background-color: #454545;
}
.page.index #products h3{
	color:#eeeeee;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page.index #products .narrow > .catalog,
.page.index #products .narrow > .panel{
	display:inline-block;
	vertical-align: top;
}
.page.index #products .catalog-inner{
	position:relative;
}
.page.index #products .catalog-inner img{
	width:100%;
	z-index: 2;
	position: relative;    
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.page.index #products .catalog-inner .content{
	position:absolute;
	width:100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	border-radius: 2px;
	text-align: center;
	cursor:pointer;
}
.page.index #products .catalog-inner .content-inner{
	position:absolute;        
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top:50%;
	width: 100%;
	left:0;
	margin-top: -10px;
}
.page.index #products .panel .catalog-inner .content-inner{
	margin-top: 0;
}
.page.index #products .content h4{
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	font-weight: 700;
	font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
	text-transform: capitalize;
}
.page.index #products .content .btn{
	font-size: 1.4em;
	line-height: 6px;
	color: #454545;
	border-radius: 2px 2px 2px 2px;
	background-color: #60b7f1;
	z-index: 2;
	display: inline-block;
	font-family: "Source Sans Pro",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	margin-top: 1em;
}
.page.index #products .panel .content .btn{
	margin-top: 0.5em;
}

.page.index #video{
	.youtubevideo{
		width: 100%;
    	height: 0;
    	padding-top: 56%;
    	position: relative;
		iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
}

.page.index #contactus{
	background-image: url(../images/pattern_bg1.png);    
	padding-top: 6em;
	padding-bottom: 6em;
}

.page.index #contactus .info >div{
	font-size: 1.6em;
}
.page.index #contactus .info >div a{
	color:#777;
}
.page.index #contactus .info .fa{
	color:#60b7f1;
	margin-right: 5px;
}
.page.index #contactus .info >div:nth-of-type(2),
.page.index #contactus .info >div:nth-of-type(3){
	margin: 1.5em 0;
}
.page.index #contactus form .contact input{
	display:block;
}
.page.index #contactus form .contact span{
	display: block;
	text-align: center;
	margin-bottom: 1em;
	font-size: 1.5em;
}
.page.index #contactus form .btn{
	display:block;    
	float: right;
	margin-top: 2em;
	font-size: 1.4em;
}
.page.index #contactus form input,
.page.index #contactus form textarea{
	display: block;
	box-shadow: none;
	width: 100%;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	border-color: rgb(221, 221, 221);
	border-image: initial;
	padding: 1em;
	font-size: 1.5em;
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.page.index #contactus form input:nth-of-type(2){
	margin:1em 0;
}
.page.index #contactus form .result{
	position: absolute;
	font-size: 1.8em;
	margin-top: 2.2em;
	color: red;
}

@media(min-width: 751px) {
	.page.index .top-slider .item{
		height:480px;
	}
	.page.index .top-slider h2{
		font-size: 3em;
	}
	.page.index .top-slider .item .img{
		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
	}
	.page.index .top-slider .item .container{
		width:560px;
		height:300px;
		padding: 30px;
		background: rgba(51, 51, 51, 0.9);
		position: absolute;
		top: 105px;
	}
	.page.index .promo{
		height: 75px;
	}
	.page.index .promo .buttons{
		float:right;
	}
	.page.index #courses >*{
		display:inline-block;
		width:36.8em;
		vertical-align: top;
	}
	.page.index #courses a{
		margin-bottom:4em;
		cursor: pointer;
	}
	.page.index #courses .img-container{
		overflow: hidden;
	}
	.page.index #courses a:hover {
		.img-container img{
			transform: scale(1.1);
			transition: transform .2s;
		}
		.content h5{
			color:#1e61b0;
		}
	}
	.page.index #courses .middle{
		margin:0 2.4em;
	}
	.page.index #products .catalog{
		width:36.8em;
	}
	.page.index #products .narrow > .catalog{
		margin-right: 2.4em;
		padding: 1.2em 0;
		width:76em;
	}
	.page.index #products .panel{
		padding: 1.2em 0;
	}
.page.index #contactus .info,
.page.index #contactus form{
	width:85.8em;
	display: inline-block;
	vertical-align: top;
}
.page.index #contactus form .contact,
.page.index #contactus form #message{
	display:inline-block;
	vertical-align: top;
	width:37.4em;
}
.page.index #contactus .info,
.page.index #contactus form .contact{
	width: 27em;
	margin-right: 2.4em;
}
.page.index #products .catalog:hover .content{
	/* background-image:url(../images/products_bg.jpg); */
	background: #333;
	z-index: 3;
}
.page.index #products .catalog:hover img{
	transform: translateY(-50px) scale(0);
	-webkit-transform: translateY(-50px) scale(0);
	-moz-transform: translateY(-50px) scale(0);
	-o-transform: translateY(-50px) scale(0);
}
.page.index #products .panel .catalog{
	padding-bottom: 3.1em;
    display: block;
}
}
@media(max-width: 750px) {
	.page.index .top-slider .item .img{
		height:180px;
	}
	.page.index .top-slider .item .narrow{
		background: #333;
	}
	.page.index .top-slider .item .container{
		padding: 20px 0 0;
		display: block;
		height:350px;
	}
	.page.index .top-slider p{
		font-size: 16px;
	}
	.page.index .top-slider .slick-dots{
		bottom:16px;
	}
	.page.index .top-slider .slick-dots li button{
		width: 10px;
        height: 12px;
	}
	.page.index .promo{
		padding: 35px 0 40px;
	}
	.page.index .promo .text{
		line-height: 1.6;
		text-align: center;
	}
	.page.index .promo .btn{
		display:inline-block;
	}
	.page.index .promo .btn.primary{
		margin-right: 0.5em;
	}

	.page.index #courses,
	.page.index #aboutus,
	.page.index #contactus{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.page.index #courses .content{
		padding-bottom:40px;
		h5{
			margin-top: 20px;
		}
	}
	.page.index #courses .middle{
		margin:30px 0;
	}
	.page.index #products .catalog{
		padding: 1em 0;
	}
	.page.index #products .panel .catalog{
		display:block;
	}
	.page.index #products .narrow > a{
		padding-top:0;
	}
	.page.index #products .narrow > a:nth-of-type(2){
		margin-right:0;
	}
	.page.index #contactus form{
		margin-top: 30px;
	}
	.page.index #contactus form textarea{
		margin-top: 1em;
	}

	.page.index #courses .panel h5{
		margin-bottom: 5px;
	}
	.page.index #products .catalog-inner .content{
		z-index: 3;
	}
	.page.index #products .content h4{
		display:none;
	}
	.page.index #products .content .btn{
		font-size: 16px;
		background-color: rgba(51,51,51,0.8);
    	border: none;
    	color: #dddddd;
		padding: 16px 20px;
	}
	.page.index #contactus .info >div:nth-of-type(2),
	.page.index #contactus .info >div:nth-of-type(3){
		margin: 10px 0;
	}

}