/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		
	}
	#main-menu li{
	font-family: 'Bebas', sans-serif;
	padding-top: 0px !important ;
	line-height:35px;
  margin-top: 5px;
	margin-bottom: -20px;
	}
	#main-menu li a{
	font-size: 26px !important;
  line-height:35px !important;
	padding: 0px 0px 0px 0px !important;
	margin: 0 0px;

	}
	.space{
	display: none;
	}
	.gallery > li {
	  list-style-type: none;
	  float: left;
	  margin: auto; 
	}
	.logo{

	position:absolute;
	z-index: 500;
	padding-left: 50px;
	}
	.head{
	background: #000 !important;
	height:80px !important;

	}
	.sticky {
	 position: fixed;
	 font-family: 'Bebas', sans-serif;
	 background: rgba(0, 0, 0, 0.8)  !important;
	 height: 80px !important;
	 animation: thedrop 1s 1;
	 -moz-animation: thedrop 1s 1;
	 -webkit-animation: thedrop 1s 1;
	}
	.ca-menu{
		display: none;
	}
	.filter > li > a {
	line-height: 18px;
	font-size: 15px;

	}
  /* =========================
  FOOTER MOVIE POSTER TYPO
   ========================= */
.director{
}
.soon{
  font-size: 80px !important;
  line-height:100px !important;
}
.typo{
  font-family: 'Six Caps', sans-serif;
  text-align: center;
  font-size: 50px !important;
  line-height:50px !important;
}
.typo a{
color: #282828;
text-decoration:none;
}
.typotitle{
  font-size: 15px !important;
  line-height:15px !important;
  font-family: 'Bebas', sans-serif;
  text-align: justify !important;
  color: #282828;
}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 



}
body{
	background: url(../images/bg/bg.png);
	font-family: 'Special Elite';
	color: #282828;
  text-align: left;
   text-shadow: 0 1px 0px #fff;
	} 

h1{
	font-size: 75px;
	line-height:60px;
	font-family: 'Amatic SC', cursive;
	color: #282828;
}
h2{
	font-size: 50px;
	line-height:60px;
	font-family: 'Amatic SC', cursive;
	color: #282828;
}
h3{
	font-size: 25px;
	line-height:60px;
	font-family: 'Amatic SC', cursive;
	color: #282828;
   text-shadow: 0 1px 0px #fff;
}
h4{
	font-size: 50px;
	line-height:60px;
	font-family: 'Bebas', sans-serif;
	color: #282828;
   text-shadow: 0 1px 0px #fff;
}

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

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

/* =====
   MENU
   ===== */
.head{
	background:#000;
	height:50px;
  -moz-box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);
  box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);


}
nav {
  left: 0;
  right: 0;
  z-index: 42;
  display: block;
  position: relative;
  font-family: 'Bebas', sans-serif;
  text-align: center;
  color:#282828;
}
#main-menu {
  z-index: 1000;

}


#main-menu li {
 padding-top: 10px;
  padding-bottom: 15px;
  position: relative;
  display: inline-block;
  text-align: left;
}
 #main-menu li > a {
  text-shadow: 0 3px 0px rgba(0, 0, 0, 0.2);
  position: relative;
  display: inline;
  padding: 15px 10px;
  margin: 0 5px;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 30px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
   color:#ababab;
   text-decoration: none;
}
 #main-menu li > a:hover{
   color:#fff;
   text-decoration: none;
}
/* =====================================================================
   STICKY menu (page scrool down and stick menu top page)
   ===================================================================== */

.sticky {
  position: fixed;
  font-family: 'Bebas', sans-serif;
  background: #000 repeat-x;
  height: 50px;
  animation: thedrop 1s 1;
  -moz-animation: thedrop 1s 1;
  -webkit-animation: thedrop 1s 1;
   -moz-box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);
  box-shadow: 2px 0px 0px 5px  rgba(0, 0, 0, 0.2);
}
.sticky .nav-above {
  position: absolute;
  top: -88px;
  left: 1em;
  right: 1em;
  height: 88px;
}
/* =======================
   ABOUT FIRST text block
   ======================= */
blockquote{
  font-size: 40px;
  line-height:45px;
  font-family: 'Bebas', sans-serif;
  padding-bottom: 10px;
  padding-top: 10px;
  color: #000;
  border-bottom: 1px dotted #000;
  border-top: 1px dotted #000;
  text-align: left;
}

.icon{
  font-family: "FoundationIconsGeneralEnclosed";
  font-size: 35px;
  color: #505050;
  margin-top: 20px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.info{
  border-left: 1px dotted #000;
  padding-left: 20px;
  margin-top:20px;
  color: #505050;
}
.icon:hover{
  color: #fff;
}

/* =========================================
   2 logo (textlogo, and motion graphic logo)
   ========================================= */
.brand{
	display: block;
  	margin-left: 35%;
  	margin-top: 20px;
  	margin-bottom: 50px;

}

.logo{
	position:absolute;
	top:150px;
	z-index: 500;
}
.logotext{
	position:relative;
	padding-right:40px;
}

/* =========================================
   GENERAL BLOCK - space after blocks
   ========================================= */
section {
  padding-bottom: 130px;
}
.slider{
  padding-bottom: 0px;
}
/* =========================================
   FILTER - gallery theme filter css design
   ========================================= */
.filter {
  display: block;
  border-top: 4px dotted #282828;
  border-bottom: 4px dotted #282828;
  margin-bottom: 20px;
  text-align: center;
  padding: 15px 0;
}
.filter > li {
  font-family: 'Bebas', sans-serif;
  display: inline;
  display: inline-block;
}
.filter > li > a {
  line-height: 20px;
  font-size: 25px;
  text-decoration:none;
  text-transform: uppercase;
  padding: 0 10px;
  color: #282828;
   text-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.filter > li > a:hover {
  line-height: 20px;
  text-decoration:none;
  text-transform: uppercase;
  padding: 0 10px;
  color: #ababab;
  text-shadow: 0 3px 0px rgba(0, 0, 0, 0.1);
}
/* =========================================
   GALLERY - circle gallery thumb css design
   ========================================= */
.gallery > li {
  list-style-type: none;
  float: left;
}
.gallery .thumb {
	position: relative;
	display: block;
	margin: 30px;
	padding: 1px;
	height: 215px;
	width: 215px;
	line-height: 215px;
	font-size: 100px;
	text-transform: uppercase;
	text-align: center;
	border: 4px solid  #282828;
	color: #888;
	-moz-box-shadow: 10px 10px 5px #000;
	-webkit-box-shadow: 10px 10px 5px #000;
	box-shadow: 10px 10px 5px #000;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-moz-box-shadow:    inset 5px 0 0 10px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: inset 5px 0 0 10px rgba(0, 0, 0, 0.8);
	box-shadow:         inset 5px 0 0 10px rgba(0, 0, 0, 0.8);
	-moz-box-shadow:     0px 0 0 0px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow:  0px 0 0 0px rgba(0, 0, 0, 0.8);
	box-shadow:          0px 0 0 0px rgba(0, 0, 0, 0.8);
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.gallery .thumb img {
	margin: 7px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.gallery .thumb:hover {
	border: 4px solid  #ababab;
	-moz-box-shadow:    inset 0px 0 0 2px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: inset 0px 0 0 2px rgba(0, 0, 0, 0.8);
	box-shadow:         inset 0px 0 0 2px rgba(0, 0, 0, 0.8);
   -moz-box-shadow:    0px 0 0 10px rgba(0, 0, 0, 0.8);
   -webkit-box-shadow:  0px 0 0 10px rgba(0, 0, 0, 0.8);
   box-shadow:          0px 0 0 10px rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
/* ==============================
    PROFILE PIC - illustration
   ============================== */
.profile{
	position:relative;
}

/* ===============
    KNOBS - SKILLS
   =============== */
.knobs{
	font-family: 'Bebas', sans-serif;

}
/* ===============
    CONTACT FORM 
   =============== */
#name{
  width: 100%;
  height: 30px;
  float:left;
  color:#FFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #282828;
  border: 1px solid #fff;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
}
#email{
  width: 100%;
  height: 30px;
  float:left;
  color:#FFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #282828;
  border: 1px solid #fff;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;
}
#message{
  width: 100%;
  height: 350px;
  float:left;
  color:#FFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #282828;
  border: 1px solid #fff;
  -moz-box-shadow:    inset 0 0 8px #000000;
  -webkit-box-shadow: inset 0 0 8px #000000;
  box-shadow:         inset 0 0 8px #000000;

}
#send{
	margin-top: 30px;
  margin-bottom: 30px;
	float:right;
	width: 100px;
	height:100px;
	color:#282828;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
	background: #dedede;
	border: 2px solid #cfcfcf;
	font-family: 'bebas', sans-serif;
	font-size: 20px;
    -moz-box-shadow:     0 0 15px #fff;
  -webkit-box-shadow:  0 0 15px #fff;
  box-shadow:          0 0 15px #fff;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
#send:hover{
	color: #fff;
	background: #000;
	border: 5px solid #282828;
      -moz-box-shadow:     0 0 8px #b0b0b0;
  -webkit-box-shadow:  0 0 8px #b0b0b0;
  box-shadow:          0 0 8px #b0b0b0;
}

/* =========================
  FOOTER MOVIE POSTER TYPO
   ========================= */
.foottypo{
  text-align: center;
}
.soon{
  font-family: 'Six Caps', sans-serif;
  color: #fff;
  font-size: 150px;
  line-height:180px;
  text-align: center;
  border-bottom: 1px solid #282828;
  border-top: 1px solid #282828;
  text-shadow: 0 1px 0px #000;
}
.typo{
  font-family: 'Six Caps', sans-serif;
  color: #fff;
  font-size: 79px;
  line-height:90px;
  text-shadow: 0 1px 0px #000;
}
.typo a{
color: #fff;
text-decoration:none;
text-shadow: 0 1px 0px #000;
}
.typotitle{
  font-size: 20px;
  line-height:25px;
  font-family: 'Bebas', sans-serif;
  color: #fff;
   text-shadow: 0 1px 0px #000;
}
/* =========================
  2.0 service
   ========================= */
  .headbg{ 
background:url(../images/bg/head.png) repeat-x;
}
footer{
  border-top:1px solid #000;
  background-color: rgba(0,0,0, 0.5);
}