/* CSS Document */



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

   03. INTRO

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



#intro {

	width: 100%;

	height: 100%;

	position: relative;

	top: 0px;

	z-index: 1;

	display: block;

	overflow: hidden;

	padding: 0 !important;

}

  

#slides {

	position: relative;

}



#slides .scrollable {

	height: 100%;

	position: relative;

	top: 0;

	left: 0;

	*zoom: 1;

	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

}



#slides .scrollable:after {

	content: "";

	display: table;

	clear: both;

}



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

/*	 INTRO SLIDER CONTENT

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



.intro-content {

	width: 90%; 

	position: absolute;

	left: 50%;

	top: 50%;

	color: #fff;

	text-align: center;

	display: inline-block;

	-webkit-transform: translate(-50%,-50%);

	-moz-transform: translate(-50%,-50%);

	-ms-transform: translate(-50%,-50%);

	-o-transform: translate(-50%,-50%);

	transform: translate(-50%,-50%);

	padding-top: 6px;

}



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

/*	 INTRO TEXT

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



#intro h2 {	

	color: #fff;

	font-size:50px;

	font-weight: 700;

	line-height: 1.2em;

	margin-top: 0;

	margin-bottom: 10px;

	max-height: 2.4em;

	overflow: hidden;

	text-align: center;

}



.intro-content p {	

	color: #fff;

	font-size: 22px;

	line-height: 1.5em;

	font-weight: 300;

	padding: 0;

	max-height: 4.5em;

	overflow: hidden;

	margin-bottom: 0;

	text-align: center;

}



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

/*	 INTRO BUTTON

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



.intro_button .btn {

    font-size: 18px;

    margin-top: 10px;

    padding: 10px 40px;

    color: #fff;

    border: 0;

    text-transform: uppercase;

    border-radius: 50px;

    background-color: #21b0eb;

    opacity: 1;

}



.intro_button .btn:hover {

	background-color: #939393;

	opacity: 0.6;

	transition: 0.5s;

}



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

/*	 Transparent Button

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



.intro_button .btn.btn-tra {

	background-color: transparent;

	padding: 13px 26px;

	margin-right: 15px;

	border: 2px solid #fff;

}



.intro_button .btn.btn-tra:hover {

	background-color: #0b7d79;

	border-color: #0b7d79;

	color: #fff;

}



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

/*	 SLIDES NAVIGATION  

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



.slides-navigation {

	width: 100%;

    position: absolute;

    z-index: 3;

    top: 50%;

	margin-top: -50px

}



.slides-navigation a {

    position: absolute;

    display: block;

	text-decoration: none !important

}



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

/*	 Next Button  

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



.slides-navigation a.next {

    right: 0px;

}



.slides-navigation .next.fa-angle-right {

    color: #ddd;

    font-size: 100px;

    opacity: 0.2;

	margin-right: 30px;

	opacity: 0.3;

	transition: 0.5s;

}



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

/*	 Previous Button

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



.slides-navigation a.prev {

    left: 0px;

}



.slides-navigation .prev.fa-angle-left {

    color: #ddd;

    font-size: 100px;

    opacity: 0.3;

	margin-left: 30px;

	transition: 0.5s;

}



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

/*	 Buttons Hover  

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



.slides-navigation .next.fa-angle-right:hover,

.slides-navigation .prev.fa-angle-left:hover {

	 opacity: 1;

	 text-decoration: none !important;

	 transition: 0.5s;

}



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

/*	 SCROLL DOWN MOUSE  

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



.scroll-down {

    display: block;

	width: 100%;

    position: absolute;

    z-index: 99;  

    left: 0px;

    bottom: 4%;

    text-transform: uppercase;

    color: #ddd;

    font-size: 13px;

	font-weight: 700;

    text-align: center;

	-webkit-animation-name: Floatingx;

    -webkit-animation-duration: 1.8s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: ease-in-out;

    -moz-animation-name: Floating;

    -moz-animation-duration: 1.8s;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: ease-in-out;

}



@-webkit-keyframes Floatingx{

    from {-webkit-transform:translate(0, 0px);}

    65% {-webkit-transform:translate(0, 10px);}

    to {-webkit-transform: translate(0, -0px);    }    

}

    

@-moz-keyframes Floating{

    from {-moz-transform:translate(0, 0px);}

    65% {-moz-transform:translate(0, 10px);}

    to {-moz-transform: translate(0, -0px);}    

}



.mouse {

    width: 18px;

    height: 28px;

	color: #ddd;

	border: 2px solid #ddd;

    border-radius: 9px;

	-webkit-border-radius: 9px;

    -moz-border-radius: 9px;

    border-radius: 9px;

    display: block;

    text-align: center;

    margin: 0px auto 10px; 

}



@media (max-width: 1350px) {

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

	/*	 Next Button  

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

	

	

	.slides-navigation .next.fa-angle-right {

		font-size: 70px;

		margin-right: 15px;

	}

	

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

	/*	 Previous Button

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

	

	.slides-navigation .prev.fa-angle-left {

		font-size: 70px;

		margin-left: 15px;

	}



}



@media (max-width: 950px) {

	.intro-content {width: 85%}

}



@media (max-width: 640px) {

	

	.intro-content {width: 80%}

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

	/*	 Next Button  

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

	

	

	.slides-navigation .next.fa-angle-right {

		font-size: 55px;

		margin-right: 5px;

	}

	

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

	/*	 Previous Button

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

	

	.slides-navigation .prev.fa-angle-left {

		font-size: 55px;

		margin-left: 5px;

	}



}