/*
	Author: Ashfaq Ahmed @ Reverie Tech.
	Author URI: http://www.reverie-tech.com/
*/

/****************************************************************************
CSS RESET
****************************************************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio,
video {	margin: 0; 	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0; }



/****************************************************************************
FONTS
****************************************************************************/

@import url(http://fonts.googleapis.com/css?family=Signika:300);
@import url(http://fonts.googleapis.com/css?family=Satisfy);
@font-face {
  font-family: 'BebasNeueRegular';
  src: url("../fonts/BebasNeue-webfont.eot");
  src: url("../fonts/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/BebasNeue-webfont.woff") format("woff"), url("../fonts/BebasNeue-webfont.ttf") format("truetype"), url("../fonts/BebasNeue-webfont.svg#BebasNeueRegular") format("svg");
  font-weight: normal;
  font-style: normal; }


/****************************************************************************
BASIC STYLES
****************************************************************************/

body { color: #000000; font: 1em/1.2 "Signika", Arial, sans-serif; font-size:14px; background:url(../images/bg.png); margin: 35px 0 70px; padding:0; }

a { color:#4d4d4d; text-decoration: none; font-size:12px; }
a:visited { color: #4d4d4d; }
a:hover { text-decoration:none; }
a:focus { outline: thin dotted; }
strong{ font-weight:bold;}
h1, h2, h3, h4, h5, h6{
 font-family: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;  
}

h1 {
    font-size: 52px;
    font-weight: normal;
    text-align: center;
}

h1 span{
font-size:20px;
color:#FF0000;
position:relative;
bottom:25px;
}

h1 span small{
font-size:14px;
font-style:italic;
}

em{  bottom: 10px;
font-size: 10px;
left: 8px;
position: relative;}

p {line-height:20px; color:#525252;margin-bottom:8px;  }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/****************************************************************************
HEADER STYLES
****************************************************************************/

.container-narrow {
    margin: 0 auto;
    max-width: 980px;
	overflow:auto;
}

header {
background:#333333;
margin-bottom:40px;
margin-top:30px;
}

header ul {
    height: 90px;
    line-height: 90px;
    text-align: center;
}

header ul li{
display: inline-block;
height: 40px;
line-height: 40px;
}
header ul li label {
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
	color: #FFFFFF;
	font-size:16px;
}
.last{ margin-right:0px;}

#desktop:checked ~ #wrapper .desktop,
#tablet:checked ~ #wrapper .tablet,
#mobile:checked ~ #wrapper .mobile,
#fullwidth:checked ~ #wrapper .fullwidth {
	background:  #EB6156;
	
}



/****************************************************************************
SLIDER STYLES
****************************************************************************/

#container input{ display:none;}
#reveslides{ background:#FFFFFF; padding: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);}

#hide{overflow: hidden; width: 100%;}


#reveslides .animation {
-webkit-transition:all 1.0s ease-in-out;
  -moz-transition:all 1.0s ease-in-out;
  -o-transition:all 1.0s ease-in-out;
  transition:all 1.0s ease-in-out;
}

#wrapper {
-webkit-transform: translateZ(0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.slide img {
	width: 100%;
}
#reveslides .animation {
	width: 500%;
	line-height: 0;
}

#reveslides .slide {
	width: 20%;
	float: left;
}


#slide1:checked ~ #reveslides .animation { margin-left:0; }
#slide2:checked ~ #reveslides .animation { margin-left:-100%; }
#slide3:checked ~ #reveslides .animation { margin-left:-200%; }
#slide4:checked ~ #reveslides .animation { margin-left:-300%; }
#slide5:checked ~ #reveslides .animation { margin-left:-400%; }

/*Tooltip*/

#reveslides .tooltip {
left:0px;
}
#reveslides .tooltip h1 {
	color:#fff;
	font-size:24px;
	font-weight:300;
	line-height:60px;
}

#slide1:checked ~ #reveslides .tooltip, 
#slide2:checked ~ #reveslides .tooltip, 
#slide3:checked ~ #reveslides .tooltip, 
#slide4:checked ~ #reveslides .tooltip, 
#slide5:checked ~ #reveslides .tooltip {
	
	height:60px;
	background:#373535; 
}


/************* CONTROLING AND STYLING  *************/


#controls {
	margin: -25% 0 0 0;
	width: 100%;
	height: 50px;
}

#controls label { 
	display: none;
	width: 50px;
	height: 50px;
	opacity: 0.3;
}

#active {
	margin: 10% 0 0;
	text-align: center;
}

#active label {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #f89e67;
	cursor:pointer;
}

#active label:hover {
	background: #F65D00;
	
}

#controls label:hover {
	opacity: 0.8;
}

#slide1:checked ~ #controls label:nth-child(2), 
#slide2:checked ~ #controls label:nth-child(3), 
#slide3:checked ~ #controls label:nth-child(4), 
#slide4:checked ~ #controls label:nth-child(5), 
#slide5:checked ~ #controls label:nth-child(1) {
	background: url('../images/right-arrow.png') no-repeat;
	float: right;
	display: block;
	cursor:pointer;
}


#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) {
	background: url('../images/left-arrow.png') no-repeat;
	float: left;
	display: block;
	cursor:pointer;
}

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) {
	background: #F65D00;
	border-color: #F65D00 !important;
	cursor:pointer;
}



/****************************************************************************
RESPONSIVE VIEW STYLING (DESKTOP)
****************************************************************************/

#wrapper{ margin: 0 auto 132px; }

#desktop:checked ~ #wrapper { max-width: 980px; }

#fullwidth:checked ~ #wrapper { width:auto; }

/****************************************************************************
RESPONSIVE VIEW STYLING (TABLET)
****************************************************************************/

#tablet:checked ~ #wrapper { max-width: 850px; }

#tablet:checked ~ #wrapper #active{margin: 6% 0 0;}

#tablet:checked ~ #wrapper #controls label{margin-top: -40px;}

/****************************************************************************
RESPONSIVE VIEW STYLING (MOBILE)
****************************************************************************/

#mobile:checked ~ #wrapper { max-width: 450px; }

#mobile:checked ~ #wrapper #active{margin: -8% 0 0;}

#mobile:checked ~ #wrapper #controls label{margin-top: -58px;}

/****************************************************************************
RESPONSIVE VIEW STYLING (FULL WIDTH)
****************************************************************************/

#fullwidth:checked ~ #wrapper {
    margin: 0 auto 160px;
}


#fullwidth:checked ~ #wrapper #reveslides{ background:transparent; padding: 0px; box-shadow: none;}


/****************************************************************************
RESPONSIVE CSS
****************************************************************************/

@media (max-width: 480px) {
	
	
	#wrapper #active {
		margin: -20% 0 0;
	}

}



@media only screen and (max-width: 450px) {

	#wrapper #controls label{
		margin-top: -74px;
	}
	
	#wrapper #active{margin: -22% 0 0;}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 

#wrapper #controls label{
		margin-top: -70px;
	}
	
#wrapper #active{margin: 5% 0 0;}

}





/****************************************************************************
FOOTER CSS
****************************************************************************/

.footer .left{ float:left;}
.footer .right{ float:right;}
.footer  ul{ text-align:center;}
.footer li{ margin-bottom:10px; font-size:16px;}


.footertext{ text-align:center; margin-top:25px;}