/*
====================================================

* 	[Master Stylesheet]
	
	Theme Name :  LYCEUM
	Version    :  1.1
	Author     :  Roman Ahmed
	Author URI :  https://themeforest.net/user/webzed

====================================================

	1. PRIMARY STYLES
	2. COMMON SYLES
		BUTTON HOVER EFFECT
	3. MENU STYLING
		UPPER AREA
		MAIN MENU 
		SEARCH AREA
		DROPDOWN
		TOGGLE CAKE ICON 
	4. SLIDER STYLING
		SLIDER ELEMENTS ANIMATIONS
		SLIDER STYLING
		SLIDER CONTENT
		CAROUSEL INDICATORS 
		CAROUSEL CONTROLS
	5. FEATURED AREA
	6. COURSES AREA
	7. SERVICES AREA
	8. BANNER AREA
	9. WHY US AREA
	10. QUOTO AREA
		QUOTOS CONTROLS
	11. TEAM AREA
	12. COUNER AREA
	13. BLOG AREA 
	14. FOOTER

===================================================== */

/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html{ font-size: 100%; overflow-x: hidden; touch-action: manipulation; }

body{ font-size: 16px; font-family: 'Aileron', sans-serif; width: 100%; margin: 0; font-weight: 300;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; color: #111; }

h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6,ul,a{  }

h1,h2,h3,h4,h5,h6{ line-height: 1.3; font-weight: inherit; }

p{ line-height: 1.6; font-family: 'Open Sans', sans-serif; font-weight: 400; }

h1{ font-size: 38px; line-height: 1.5; }
h2{ font-size: 3em; line-height: 1.1; }
h3{ font-size: 2em; }
h4{ font-size: 1.5em; font-weight: 400; }
h5{ font-size: 1.1em; font-weight: bold; }
h6{ font-size: .9em; letter-spacing: 1px; }

a{ display: inline-block; text-decoration: none; color: inherit; transition: all .3s; }

a:focus, a:active, a:hover { text-decoration: none; color: #FD6500; }

b{ font-weight: 700; }

img{ width: 100%; }

li{ list-style: none; }

span{ display: inline-block; }

header{ font-weight: 400; }


/* PAGE LOADER */

.css-loader{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99999; text-align: center; 
	overflow: hidden; background: #fff; }
	
.css-loader .loader-wrapper { height: 50px; margin-top: calc(50vh - 25px); margin-left: calc(50vw - 100px); width: 180px; }

.css-loader .circle{ border-radius: 50%; border: 5px solid #ccc ; float: left; height: 50px; margin: 0 5px; width: 50px; }

.css-loader .circle-1{ animation: move 1s ease-in-out infinite; }

.css-loader .circle-1a{ animation: fade 1s ease-in-out infinite; }

@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.css-loader .circle-2 { animation: move 1s ease-in-out infinite; }

@keyframes move {
	0% {transform: translateX(0);}
	100% {transform: translateX(60px);}
}

.css-loader .circle-1a { margin-left: -55px; opacity: 0; }

.css-loader .circle-3 { animation: circle-3 1s ease-in-out infinite; opacity: 1; }

@keyframes circle-3 {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.css-loader .loader-writing{ color: #aaa; letter-spacing: 0.05em; margin: 40px auto; text-transform: uppercase; }

.after-load,
.inverse-after-load{ animation: .7s forwards cubic-bezier(.77, .2, .175, 1); }
	
.after-load{ animation-name: after-load-anim; }	

@keyframes after-load-anim{
	0%	{ opacity: 1; }
	100%{ opacity: 0; z-index: -10; }
}



/* ---------------------------------
2. COMMON SYLES
--------------------------------- */

.section{ padding: 40px 0 20px; box-shadow: inset 0px 2px 5px -4px #676767; }

.section .left-heading-area{ margin-bottom: 100px; }

.section .heading-area{ text-align: center; position: relative; padding-bottom: 25px; margin-bottom: 45px; }

.section .heading-area:before{ content:''; position: absolute; bottom: 0; left: 50%; width: 100px; margin-left: -50px; 
	height: 1px; opacity: .7; background: #FD6500; }

.section .heading-area:after{ content:''; position: absolute; bottom: -5px; left: 50%; width: 70px; margin-left: -35px; 
	height: 1px; opacity: .6; background: #FD6500; }
	
.section .pre-heading{ letter-spacing: 2px; padding-bottom: 5px; color: #333; }

.pre-title{ letter-spacing: 2px; }

.position-fixed{ position: fixed!important; }

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }

.center-text{ text-align: center; }

.left-border,
.right-border{ margin: 30px 0; position: relative; }

.left-border:after,
.right-border:after{ content:''; position: absolute; top: 0; bottom: 0; width: 4px; opacity: .4; background: #FD6500; }

.left-border{ padding: 5px 0 5px 25px; }

.left-border:after{ left: 0; }
	
.right-border{ padding: 5px 25px 5px 0; text-align: right; }

.right-border:after{ right: 0; }

.float-none{ float: none; }


.multi-item.swiper-container{ padding: 0 10px; padding-bottom: 80px; margin-bottom: 20px; }

.multi-item .swiper-wrapper{ transition-timing-function: cubic-bezier(.24, .01, .15, 1);   }

.multi-item .swiper-pagination-fraction, 
.multi-item .swiper-pagination-custom, 
.multi-item .swiper-container-horizontal > .swiper-pagination-bullets{ bottom: 0; }

.multi-item .swiper-pagination-bullet-active{ background: #FD6500; }

.multi-item .swiper-pagination-bullet{ height: 10px; width: 10px; }


.scrollbar-1::-webkit-scrollbar { width: 8px; }

.scrollbar-1::-webkit-scrollbar-track { background: #333; }

.scrollbar-1::-webkit-scrollbar-thumb { background: #CBD2D8; }

.absolute-bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0;  }



/* BUTTON HOVER EFFECT */

[data-hover-effect="1"]{ position: relative; z-index: 1; overflow: hidden; will-change: transform; 
	transition: all 1s ease-in-out; }

[data-hover-effect="1"]:hover{ box-shadow: 5px 3px 10px -1px rgba(0,0,0,.3); color: #fff; }

.btn-child{ position: absolute; top: 0; left: 0; z-index: -1; height: 200px; width: 200px; margin-left: -100px; 
	margin-top: -100px; border-radius: 100px; transform: scale3d(0, 0, 0); will-change: transform; transition: all 3s;
	box-shadow: 0px 0px 200px 200px #00C389; background: #00C389; }
	
.btn-child.in{ animation: btn-1-anim-in 1.2s forwards ease-in-out; }

.btn-child.out{ animation: btn-1-anim-out 1.2s forwards ease-in-out; }

@keyframes btn-1-anim-in{
	0%{ transform: scale3d(0,0, 0); }
	100%{ transform: scale3d(1, 1, 1); }
}

@keyframes btn-1-anim-out{
	0%{ transform: scale3d(1, 1, 1); }
	100%{ transform: scale3d(0,0, 0); }
}


.btn-effect-2{ padding: 5px 0; position: relative; overflow: hidden; }

.btn-effect-2:before,
.btn-effect-2:after{ content:''; position: absolute; bottom: 0; width: 100%; height: 2px; transition: all .2s;
	background: #FD6500; }

.btn-effect-2:after{ left: 0; }

.btn-effect-2:before{ left: -100%; transition-delay: .25s; }
	
.btn-effect-2:hover:after{ transform: translate3d(100%, 0, 0); }

.btn-effect-2:hover:before{ transform: translate3d(100%, 0, 0); }


.btn{ display: inline-block; font-weight: 600; letter-spacing: 1px; transition: all .3s;
	text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 10px; box-shadow: 1px 1px 0px #cc8f00; background: #FD6500; color: #fff; }

.btn:hover{ transform: translateY(-3px); box-shadow: 1px 1px 0px #cc8f00, 3px 8px 10px rgba(0,0,0,0.4); color: #fff; }

.btn-1{ border-radius: 50px; padding: 15px 50px;}

.btn-2{ border-radius: 5px; padding: 12px 40px; }



/* ---------------------------------
3. MENU STYLING
--------------------------------- */

header{ font-family: 'Noway', sans-serif; position: absolute; top: 0px; left: 0; right: 0; z-index: 1000;
	font-size: .85em; color: #fff; }


/* UPPER AREA */

header .upper-area{ overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #fff; }

header .upper-area .our-info{ float: left; }

header .upper-area .our-info > li{ display: inline-block; padding: 15px 15px; 
	border-left: 1px solid rgba(255, 255, 255, .3); }

header .upper-area .our-info > li:first-child{ border-left: 0; }

header .our-info .icn{ margin-right: 10px; }

header .upper-area .icons{ float: right; }

header .upper-area .icons > li{ display: inline-block; }

header .upper-area .icons > li > a{ padding: 15px 15px; border-left: 1px solid rgba(255, 255, 255, .3); }



/* MAIN MENU */

header .menu-wrapper{ 
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

header .logo{ float: left; height: 36px; margin: 12px 0; }

header .logo a{ display: block; height: 100%; }

header .logo img{ width: auto; height: 100%;  }


.main-menu{ float: right; position: relative; }

.main-menu ul.nav-menu> li{ display: inline-block; }

.main-menu ul.nav-menu> li > a{ line-height: 60px; padding: 0 15px; transition: all .35s ease-out; }

.main-menu ul.nav-menu li.drop-down{ position: relative; }


.fixed-menu{ position: fixed!important; top: 0px; left: 0; right: 0; transition: all .4s ease-out; 
	border: 0!important; box-shadow: 0px 2px 10px -1px rgba(0, 0,0, .15); background: #000; }

.menu-out{ transform: translate3d(0, -100px, 0); }



/* SEARCH AREA */

.main-menu .nav-menu{ display: inline-block; position: relative; }

.main-menu .search-area{ width: 30px; font-size: 1.2em; }

.search-area .search-input{ border: 0; outline: 0; box-shadow: none; position: absolute; bottom: 0; right: 30px; 
	height: 61px; letter-spacing: 2px; font-size: 1.3em; transition: all .2s ease-out; padding: 0;
	width: 0%; color: #111; background: #000; } 

.search-area .search-input:focus{ opacity: 1; }


.search-area .search-input.active{ width: 100%; padding: 0 25px; background: #fff; }

.main-menu .search-area .close-icn{ display: none; }

.main-menu .search-area .full-size{ display: inline-block; }

.main-menu .search-area .no-size{ display: none; }



/* DROPDOWN */

.drop-down-menu{ position: absolute; top: 60px; left: 0px; opacity: 0; overflow: hidden; text-align: left;
	will-change: transform; max-height: 0px; min-width: 200px; transition: all .35s ease-out;
	box-shadow: 0 2px 10px -1px rgba(0, 0, 0, .2); background: #222; color: #fff; }

.drop-down-menu li > a{ display: block; padding: 10px 0px; padding-left: 15px; border-top: 1px solid #333; 
	transition: all .5s ease-out; }

.drop-down-menu li:first-child > a{ border-top: 0; }

.drop-down-menu li > a:hover{ padding-left: 18px; background: #000; color: #fff; }

.drop-down-menu.submenu{ left: 100%; top: 0; margin-left: 10px; }

.main-menu ul.nav-menu li.drop-down .nv-icn{ margin-left: 10px; transition: all .2s ease-in-out, transform .3s; }


.main-menu ul.nav-menu li.drop-down.active > a{ color: #FD6500; }

.main-menu li.drop-down.active > .drop-down-menu{ overflow: visible; opacity: 1; padding: 10px; max-height: 500px; }

.main-menu ul.nav-menu li.drop-down.active > a > .nv-icn{ transform: rotate(-90deg); }



/* TOGGLE CAKE ICON */

.nav-icon{ border-radius:0; border: 0; margin: 21.5px 0; height: 18px; width: 30px; position: relative; float: right;
	background: none; cursor: pointer; z-index: 10000; transition: all .2s ease-in-out; margin-right: 0px; display: none; }

.nav-icon:after{ content:''; position: absolute; top: -16px; bottom: -18px; right: -12px; left: -12px; z-index: -1; 
	border-radius: 100px; transition: all .1s cubic-bezier(.77, .2, .325, 1); }

.nav-icon:hover:after{ transform: scale(1.1); }

.nav-icon span{ display: block; position: absolute; height: 2px; width: 100%; left: 0; 
	transition: all .3s cubic-bezier(.77, .2, .325, 1); box-shadow: 0px 0px 10px -1px rgba(0,0,0,1); background: #fff; }
	
.nav-icon span:nth-child(1){ top: 0; width: 80%; }

.nav-icon span:nth-child(2){ top: 8px; }

.nav-icon span:nth-child(3){ top: 16px; margin-left: 30%; width: 70%; }

.nav-icon:hover span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn{ transform: rotate(-90deg); }

.nav-icon.close-btn span{ width: 100%; margin-left: 0; }

.nav-icon.close-btn span:nth-child(2){ opacity: 0; }
	
.nav-icon.close-btn span:nth-child(1){ transform: translateY(8px) rotate(45deg); }

.nav-icon.close-btn span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }



/* ---------------------------------
4. SLIDER STYLING
--------------------------------- */

/* SLIDER ELEMENTS ANIMATIONS */

.carousel.fade .item{ will-change: transform; transition: transform .6s .2s cubic-bezier(0.7, 0.25, 0.2, 0.98); }
	
.inner-animation,
.inner-animation-wrapper{ width: 100%; height: 100%;  }

.to-top,
.inverse-to-top,
.in-direction-to-top,
.inverse-in-direction-to-top,
.to-bottom,
.inverse-to-bottom,
.in-direction-to-bottom,
.inverse-in-direction-to-bottom,
.to-left,
.inverse-to-left,
.in-direction-to-left,
.inverse-in-direction-to-left,
.to-right,
.inverse-to-right,
.in-direction-to-right,
.inverse-in-direction-to-right,
.scale-up,
.scale-down,
[data-animation-in],
[data-animation-out]{ animation-duration: 1.1s; animation-timing-function: cubic-bezier(0.7, 0.25, 0.2, 0.98); 
	animation-fill-mode: forwards; opacity: 0; overflow: hidden; will-change: transform; } 

	
.to-top{ animation-name: to-top-anim; }

@keyframes to-top-anim{
	0%	{ opacity: 1; transform: translate3d(0, 115%, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0px, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-to-top{ animation-name: inverse-to-top-anim; }

@keyframes inverse-to-top-anim{
	0%	{ opacity: 1; transform: translate3d(0, -100%, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.in-direction-to-top{ animation-name: in-direction-to-top-anim; }

@keyframes in-direction-to-top-anim{
	0%	{ opacity: 1; transform: translate3d(0, -115%, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-in-direction-to-top{ animation-name: inverse-in-direction-to-top-anim; }

@keyframes inverse-in-direction-to-top-anim{
	0%	{ opacity: 1; transform: translate3d(0, 100%, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}


.to-left{ animation-name: to-left-anim; }

@keyframes to-left-anim{
	0%	{ opacity: 1; transform: translate3d(115%, 0, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0px, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-to-left{ animation-name: inverse-to-left-anim; }

@keyframes inverse-to-left-anim{
	0%	{ opacity: 1; transform: translate3d(-113%, 0, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}


.in-direction-to-left{ animation-name: in-direction-to-left-anim; }

@keyframes in-direction-to-left-anim{
	0%	{ opacity: 1; transform: translate3d(-115%, 0, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-in-direction-to-left{ animation-name: inverse-in-direction-to-left-anim; }

@keyframes inverse-in-direction-to-left-anim{
	0%	{ opacity: 1; transform: translate3d(113%, 0, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}


.to-right{ animation-name: to-right-anim; }

@keyframes to-right-anim{
	0%	{ opacity: 1; transform: translate3d(-115%, 0, 0) skew(15deg) scale3d(1.06, 1.06, 1); }
	100%{ opacity: 1; transform: translate3d(0px, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-to-right{ animation-name: inverse-to-right-anim; }

@keyframes inverse-to-right-anim{
	0%	{ opacity: 1; transform: translate3d(100%, 0, 0) skew(-15deg) scale3d(1.06, 1.06, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.in-direction-to-right{ animation-name: in-direction-to-right-anim; }

@keyframes in-direction-to-right-anim{
	0%	{ opacity: 1; transform: translate3d(115%, 0, 0) skew(15deg) scale3d(1.06, 1.06, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-in-direction-to-right{ animation-name: inverse-in-direction-to-right-anim; }

@keyframes inverse-in-direction-to-right-anim{
	0%	{ opacity: 1; transform: translate3d(-100%, 0, 0) skew(-15deg) scale3d(1.06, 1.06, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}


.to-bottom{ animation-name: to-bottom-anim; }

@keyframes to-bottom-anim{
	0%	{ opacity: 1; transform: translate3d(0, -115%, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0px, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-to-bottom{ animation-name: inverse-to-bottom-anim; }

@keyframes inverse-to-bottom-anim{
	0%	{ opacity: 1; transform: translate3d(0, 100%, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.in-direction-to-bottom{ animation-name: in-direction-to-bottom-anim; }

@keyframes in-direction-to-bottom-anim{
	0%	{ opacity: 1; transform: translate3d(0,115%, 0) skew(15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}

.inverse-in-direction-to-bottom{ animation-name: inverse-in-direction-to-bottom-anim; }

@keyframes inverse-in-direction-to-bottom-anim{
	0%	{ opacity: 1; transform: translate3d(0, -100%, 0) skew(-15deg) scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: translate3d(0, 0, 0) skew(0deg) scale3d(1, 1, 1); }
}


.scale-up{ animation-name: scale-up-anim; transform-origin: left center; animation-duration: 6s; 
	animation-timing-function: cubic-bezier(.234, .65, .325, 1); }

@keyframes scale-up-anim{
	0%	{ opacity: 1; transform: scale3d(1.02, 1.02, 1) translate3d(-2px, 0, 0); }
	100%{ opacity: 1; transform:  scale3d(1, 1, 1); }
}

.scale-down{ animation-name: scale-down-anim; }

@keyframes scale-down-anim{
	0%	{ opacity: 1; transform: scale3d(1.04, 1.04, 1); }
	100%{ opacity: 1; transform: scale3d(1, 1, 1); }
}


/* SLIDER STYLING */

.carousel-inner{ height: 480px; }

.carousel.carousel-fade .item{ opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	display: block; z-index: 1; transition: opacity 1s; }

.carousel.carousel-fade .item.active{ z-index: 2; opacity: 1; }

.slider-image{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; background-size: cover; }

.bg-1{ background-image: url(../../images/akademi-1.jpg); }
.bg-2{ background-image: url(../../images/slider-4-1600x900.jpg); }
.bg-3{ background-image: url(../../images/slider-2-1600x900.jpg); }

.slider-image:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; 
	background: rgba(0, 0, 0, .3); }

	
/* SLIDER CONTENT */

.slider-content{ position: relative; z-index: 1; padding: 0 25px; padding-top: 30px; 
	text-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px; color: #fff; }

.slider-content .pre-title { 
	letter-spacing: 1px; 
	color: #fff;
	font-size: 22px;
    font-weight: bold;
}

.slider-content .title-wrapper{ padding: 20px 0; }
    
.slider-btn{ letter-spacing: 2px; border-radius: 20px; padding: 12px 22px; transition: all .1s;
	background: #FD6500; color: #fff; }

.slider-btn:hover{ transform: translateY(3px); box-shadow: 0px 1px 20px 1px rgba(0,0,0,.3); color: #fff; }



/* CAROUSEL INDICATORS */
	
.carousel-indicators{ z-index: 50; margin-bottom: 0; bottom: 25px; }

.carousel-indicators >li.active,
.carousel-indicators > li{ height: 16px; width: 16px; border-radius: 16px; margin: 0; margin: 0 8px; background: none; 
	position: relative; transition: all .3s ease-in-out; border: 1px solid  #fff; }

.carousel-indicators > li:before{ content:''; position: absolute; right: -18px; left: 100%; height: 1px; top: 50%;
	margin-top: -.5px; background: #fff; }

.carousel-indicators > li:last-child:before{ display: none; }

.carousel-indicators >li:after{ content:''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; 
	z-index: -1; border-radius: 30px; opacity: 1; background: none; transition: all .4s ease-in-out; }

.carousel-indicators >li:hover:after{ border: 1px solid #ddd; }

.carousel-indicators >li.active:after{ background: #fff; }
	


/* CAROUSEL CONTROLS */

.slider-control{ position: absolute; bottom: 20px; right: 40px; width: 100px; height: 30px; z-index: 50; }

.slider-control .next,
.slider-control .prev{ float: left; width: 50%; height: 100%; position: relative; left: auto; right: auto; 
	background: none; color: #fff; }


.slider-control .prev .left-arrow,
.slider-control .next .right-arrow{ position: absolute; top: 50%; height: 1px; margin-top: -.5px; background: #fff; 
	transition: all .3s ease-in-out; }

.slider-control .prev .left-arrow{ left: 10px; right: 8px;  }
	
.slider-control .next .right-arrow{ left: 8px; right: 10px; }	


.slider-control .next:hover .right-arrow,
.slider-control .prev:hover .left-arrow{ left: 0px; right: 0; }
	
.slider-control .prev:hover:before,
.slider-control .prev:hover:after,
.slider-control .next:hover:before,
.slider-control .next:hover:after{ width: 50%; }
	

.slider-control .prev:before,
.slider-control .prev:after,
.slider-control .next:before,
.slider-control .next:after{ content:''; position: absolute; top: 50%; width: 30%; height: 1px; margin-top: -.5px; 
	background: #fff; transition: all .2s .3s ease-in-out; }

	
.slider-control .next:before,
.slider-control .next:after{ right: 0px; transform-origin: center right; }

.slider-control .prev:before,
.slider-control .prev:after{ left: 0px; transform-origin: center left; }

.slider-control .prev:before,	
.slider-control .next:after{ transform: rotate(45deg); }

.slider-control .prev:after,
.slider-control .next:before{ transform: rotate(-45deg); }



/* ---------------------------------
5. FEATURED AREA
--------------------------------- */

.welcome-area{ padding-bottom: 10px; }

.welcome-area .title{ margin: 5px 0 10px; }

.featured-area .featured{ margin: 0 20px 50px 0; }

.featured .icn{ font-size: 3.3em; color: #FD6500;; }

.featured .title{ margin: 15px 0; }

.featured .read-more-btn{ margin: 20px 0; }



/* ---------------------------------
6. COURSES AREA
--------------------------------- */

.courses-area{ background: #fff; position: relative; }

.course{ border: 1px solid #ccc; background: #fff; }

.course .course-info{ padding: 30px 25px; }

.course .course-info .subject{ text-transform: uppercase; font-weight: 300; }

.course .course-info .title{ margin: 7px 0 12px; }

.course .course-info .author{ font-size: 1.2em; }

.course .course-info .icons{ font-size: 1.25em; float: right; color: #FD6500; }

.course .course-info .desc{ margin-top: 20px; }

.course .course-footer{ padding: 20px 25px; overflow: hidden; position: relative; font-size: 1em;
	border-top: 1px solid #ccc; }

.course .course-footer .left-area{ float: left; width: 30%; font-weight: 600; color: #666; }

.course .course-footer .right-area{ float: right; width: 70%; text-align: right; font-weight: 700; color: #F44C0A; }



/* ---------------------------------
7. SERVICES AREA
--------------------------------- */

.service{ margin-bottom: 50px; margin-right: 5px; }

.service-icon{ float: left; width: 70px;  }

.service-icon .icn{ display: block; font-size: 40px; color: #FD6500; }

.service-content{ margin-left: 70px; }

.service .title{ padding-bottom: 15px; }



/* ---------------------------------
8. BANNER AREA
--------------------------------- */

.banner-area{ background: #fff; }

.banner{ position: relative; display: block; padding: 70px 50px 20px; z-index: 1; overflow: hidden; 
	background-repeat: no-repeat; background-image: url(../../images/slider-5-1600x900.jpg); background-size: cover; 
	text-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px; color: #fff; }
	
.banner:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -2; 
	background: rgba(0,0,0,.54);;  }

.banner .left-area{ float: left; }

.banner .right-area{ float: right; }

.banner .title{ line-height: 50px; margin-bottom: 50px; }

.banner .course-btn{ padding: 0 40px; line-height: 50px; margin-bottom: 50px; }



/* ---------------------------------
9. WHY US AREA
--------------------------------- */

.why-us-area{ background: #fff; margin-bottom: 0px; position: relative; box-shadow: none; }

.why-us-area .why-us{ margin-bottom: 50px; }

.why-us .title{ margin: 5px 0 20px; }

.why-us .qualities{ margin-top: 20px;  }

.why-us .qualities > li{ margin: 10px 0; line-height: 20px; }

.why-us i{ margin-right: 10px; color: #aaa; }

.why-us .read-more-btn{ margin-top: 30px; }

	
	
/* ---------------------------------
10. QUOTO AREA
--------------------------------- */

.quoto-area{ position: relative; text-align: center; z-index: 1; background-repeat: no-repeat; background-size: cover; 
	background-image: url(../../images/slider-5-1600x900.jpg); text-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px; }

.quoto-area:after{ content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -2; 
	background: rgba(0,0,0,.8); }


.quoto .quoto-img{ width: 140px; border-radius: 5px; margin: 0 auto; overflow: hidden;
	box-shadow: 0px 0px 40px 10px rgba(0,0,0,.1); }

.main-quoto{ padding-top: 40px; }

.main-quoto .name{ margin-bottom: 5px; color: #fff; }

.main-quoto .intro{ color: #eee; }

.main-quoto .desc{ font-weight: 400; line-height: 1.3; color: #fff; }

.main-quoto .quoto-info{ margin-top: 30px; }

.swiper-container{ padding-bottom: 80px; margin-bottom: 30px;}


/* QUOTOS CONTROLS */

.quoto-area .slider-control{ width: 80px; bottom: 0px; left: 50%; margin-left: -40px; }

.quoto-area .slider-control .prev .left-arrow,
.quoto-area .slider-control .next .right-arrow{ background: #fff; }

.quoto-area .slider-control .prev .left-arrow{ left: 5px; right: 5px; }
	
.quoto-area .slider-control .next .right-arrow{ left: 5px; right: 5px; }

.quoto-area .slider-control .prev:before,
.quoto-area .slider-control .prev:after,
.quoto-area .slider-control .next:before,
.quoto-area .slider-control .next:after{ background: #fff; }

.quoto-area .slider-control .next:hover .right-arrow,
.quoto-area .slider-control .prev:hover .left-arrow{ left: 0px; right: 0; }
	
.quoto-area .slider-control .prev:hover:before,
.quoto-area .slider-control .prev:hover:after,
.quoto-area .slider-control .next:hover:before,
.quoto-area .slider-control .next:hover:after{ width: 50%; }



/* ---------------------------------
11. TEAM AREA
--------------------------------- */

.team-area{ background: #fff; }

.teacher{ border: 1px solid #ccc; background: #fff; }

.teacher .profile-image{ position: relative; }

.teacher .profile-image .icons{ position: absolute; top: 0; right: 0; bottom: 0; padding: 10px 0; 
	background: rgba( 0, 0, 0, .1); }

.teacher .profile-image .icons a{ display: block; }

.teacher .profile-image .icons i{ display: block; font-size: .85em; padding: 7px 10px; transition: all .2s; color: #fff; }

.teacher .profile-image .icons i:hover{ background: rgba( 0, 0, 0,.8); }

.teacher .teacher-info{ padding: 30px 25px; }

.teacher .teacher-info .name{ margin-top: 10px; }



/* ---------------------------------
12. COUNER AREA
--------------------------------- */

.counter-area{ padding: 100px 0 50px; background: #111; color: #fff; }

.counter{ margin-bottom: 50px; font-size: 1.2em; position: relative; text-align: center; z-index: 1; }

.counter .desc{ margin-top: 10px; }

.counter .counter-icon{ font-size: 5em; position: absolute; left: 50%; margin-left: -130px; z-index: -1; 
	opacity: .4; color: #444; }

.counter .counter-icon i{ display: block; }

.counter .right-area{ margin-left: 0px; display: inline-block; text-align: left;  }



/* ---------------------------------
13. BLOG AREA 
--------------------------------- */

.blog-area{ background: #fff; text-align: center; }

.blog-post{ margin-bottom: 50px; border: 1px solid #ccc; background: #fff; }

.blog-img{ position: relative; }

.blog-img .tag{ position: absolute; top: 25px; left: 25px; border-radius: 1px; padding: 7px 15px; background: #fff; }

.blog-post .blog-info{ padding: 35px 25px; }

.blog-post .blog-info .title{ margin: 10px 0; }

.blog-post .desc{ margin: 20px 0; }

.blog-post .read-more-btn{ border-radius: 2px; }



/* ---------------------------------
14. FOOTER
--------------------------------- */

footer{ position: relative; padding: 100px 0 30px; background: #111; color: #fff;  }

footer .footer-bg{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

footer .footer-section{ margin-bottom: 50px; }

footer .footer-section .title{ margin-bottom: 25px; }

footer .footer-section .desc{ margin: 15px 0; color: #ddd; }


footer .icons{ margin-top: 30px; }

footer .icons > li{ display: inline-block; }
	
footer .icons > li > a{ font-size: .9em; margin-right: 10px; text-align: center; border-radius: 3px; height: 35px; 
	width: 35px; line-height: 33px; border: 1px solid #555; background: #222; }


footer ul.help{ margin: 5px 0; }

footer ul.help > li{ display: inline-block; padding-right: 10px;  }


footer .subscribe-area{ position: relative; height: 45px; width: 100%; }

footer .subscribe-area .email-input{ position: absolute; top: 0; bottom: 0; left: 0; width: 100%; padding: 0 140px 0 20px; 
	border: 0; border-radius: 3px; min-height: 45px; line-height: 45px; color: #000; }

footer .subscribe-area .submit-btn{ position: absolute; top: 0; bottom: 0; width: 200px; right: 0; border: 0; 
	letter-spacing: 1px; transition: all .3s; border-radius: 0 3px 3px 0; background: #FD6500; color: #fff; }

footer .subscribe-area .submit-btn:hover{ background: #000; }
	
footer .copyright{ margin-top: 30px; padding-top: 30px; font-size: .9em; border-top: 1px solid #888; color: #bbb; }