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

Template name : Saepisan creative portfolio html template
Categorie : HTML template
Author : Nce18cex
Version : v1.0.0
Created : 27 November 2013
Last update : 05 Desember 2013

-----------------------------------------------------------------
CSS structure
-----------------------------------------------------------------

01. Main body
02. Logo
03. Intro
04. Services
05. Contain
06. Grid rotator
07. Filter
08. Blog
09. Contact
10. Team
11. Pricing table
12. Testimoni
13. Underconstruction
14. Error 404
15. Footer
16. Subscribe
17. Heading
18. divider
19. Clear spacer
20. Custom top spacer
21. Custom bottom spacer
22. Custom left spacer
23. Custom right spacer
24. Ui to top
25. Custom responsive

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

/*
Main body
=========================== */
aside{
	position:fixed;
	background:#303030;
	color:#909393;
	width:300px;
	height:100%;
	top:0;
	left:0;
}

#wrapper{
	background:#3e4344;
	color:#bfbfbf;	
	max-width:2000px;
	position:relative;
	overflow:hidden;
	height:auto;
	margin-left:300px;
}

/*
Logo
=========================== */
.logo{
	float: left;
	padding: 18px 20px 18px 20px;
	font-size: 18px;
	line-height: 20px;	
}

/*
Intro
=========================== */
#intro{
	background:#f5f5f5;
	margin:0;
	padding:30px 40px 30px 40px;
	color:#515151;
	text-shadow:1px 1px 1px #fff;
	font-size:26px;
	line-height:44px;
	letter-spacing:1px;
	font-weight:300;	
}

#intro h3{
	color:#515151;
	font-size:56px;
	line-height:72px;
	font-weight:300;
	letter-spacing:4px;
	margin-bottom:20px;
}

#intro p{
	margin-bottom: 20px;
	font-size: 19px;
}

/*
Services
=========================== */
#service{
	background:#fff;
	position:relative;
	padding:0;
	margin:0;
	width:100%;	
}

.services-box{
	background:#333839;
	float:left;
	width: 25%;
	position:relative;
	color:#a7b2b4;
	margin:0;
	padding:40px 20px 30px 25px;
}

.services-box h1, .services-box h2, .services-box h3, .services-box h4, .services-box h5, .services-box h6{
	color:#fff;
}

.services-box .alignleft, .services-box .alignright{
	margin-top:20px;
}

.services-box.first{
	border-left:1px solid #fff;
	border-bottom:5px solid #faa534;
}

.services-box.second{
	border-left:1px solid #fff;
	border-bottom:5px solid #e95858;
}

.services-box.third{
border-left:1px solid #fff;
	border-bottom:5px solid #8cd0d7;
}

.services-box.fourth{
	border-left:1px solid #fff;
	border-bottom:5px solid #9ed757;
}

.services-box span.service-arrow{
	background:url(../img/service-box-bg.png) no-repeat left center;
	width:13px;
	height:22px;
	position:absolute;
	display:block;
	top:50%;
	left:-1px;
	margin-top:-11px;
}

.boxed{
	padding:20px;
}

/*
Contain
=========================== */
.contain{
	position:relative;
	padding:0;
	margin:0;
	width:100%;
}

/*
Search form
=========================== */
.search-form{
	float:left;
	width:215px;
	position:relative;
	color: #939393;
	margin:0;
}

input.search{
	float:right;
	font-size:12px;
	width:215px;
	color: #848889;
	background:#202020;	
	border:1px solid #202020;
	margin:0;
	padding:0 10px 0 10px;
	height:85px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;	
}

input.search:focus{
	border:1px solid;
	color: #b9bcbc;
	outline:none;
}

input.search:-moz-placeholder{
  font-weight:normal;
  color: #848889;
  font-size:12px;
}

input.search:-ms-input-placeholder{
  font-weight:normal;
  color: #848889;
  font-size:12px;
}

input.search::-webkit-input-placeholder{
  font-weight:normal;
  color: #848889;
  font-size:12px;
}

button.search-button{
	background-image:url(../img/search-icon.png);
	background-repeat:no-repeat;
	background-position:0 0;
	background-color:#202020;
	border:none;
	width:26px;
	height:26px;
	text-indent:-99999;
	position:absolute;
	right:20px;
	top:28px;
}

/*
Grid rotator
=========================== */
.gridrotator{
	position:relative;
	overflow:hidden;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}

.grid-wrapper{
	background:url(../img/grid-wrapper-bg.png) repeat 0 0;
	height: 100%;
	padding-top:95px;
	position: absolute;
	font-weight:normal;
	text-transform:uppercase;
	font-size:36px;
	line-height:42px;
	color:#fff;
	text-align:center;
	width: 100%;
	z-index: 1;
}

.grid-wrapper h3{
	font-weight:bold;
	text-transform:uppercase;
	font-size:90px;
	line-height:110px;
}

.grid-wrapper ul{
	font-size:24px;
	line-height:36px;
	font-style:italic;
}

.ri-grid{
	margin:0 auto;
	position: relative;
	height: auto;	
}

.ri-grid ul {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.ri-grid ul:before,
.ri-grid ul:after{
	content: '';
    display: table;
}

.ri-grid ul:after {
    clear: both;
}

.ri-grid ul {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
} 

.ri-grid ul li {
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	-ms-perspective: 400px;
	perspective: 400px;	
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
}

.ri-grid ul li a{
	display: block;
	outline: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* Grid wrapper sizes */
.ri-grid-size{
	width: 55%;
}
.ri-grid-size{
	width: 100%;
}

/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
	content: "";
	position: absolute;
	z-index: -2;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	max-height: 100px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.ri-shadow:after{
	right: 10px;
	left: auto;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

.ri-grid-loading:after,
.ri-grid-loading:before{
	display: none;
}

.ri-loading-image{
	display: none;
}

.ri-grid-loading .ri-loading-image{
	position: relative;
	width: 30px;
	height: 30px;
	left: 50%;
	margin: 100px 0 0 -15px;
	display: block;
}

.grid-relative{
	position:relative;
	overflow:hidden;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
}

.grid-relative img{
	margin:0;
	padding:0;
}

.grid-relative .grid-wrapper h3{
	float:left;
	margin:65px 0 0 30px;
	padding:0;
}

.grid-relative .grid-wrapper p{
	float:left;
	width:100%;
	font-size:32px;
	line-height:42px;
	margin:0 0 0 30px;
	padding:0;
	text-transform:none;
	text-align:left;
}

.scrolltop {
	float:left;
	margin:65px 0 0 0;
	font-weight:bold;
	text-transform:uppercase;
	font-size:90px;
	line-height:110px;
}

.scrolltop ul{
	float:left;
	overflow:hidden;
	padding:0;
	margin:;
	text-align:left;	
}

.scrolltop ul li{
	float:left;
	list-style:none;
	display:block;
	padding:0;
	margin:0;
	text-align:left;		
}

.grid-relative .grid-wrapper ul li p{
	font-weight:bold;
	text-transform:uppercase;
	font-size:90px;
	line-height:110px;
	font-style:normal;
	text-align:left;		
}

.sl-slide-cap h3{
	margin-bottom:0;
}

.sl-slide-cap p{
	margin-bottom:30px;
}

/*
Filter
=========================== */
.portfolio-categ{
	float:right;
	padding:0;
	margin:20px 0 0 0;
	position:relative;
	text-align:right;
}
.portfolio-categ li{
	display:inline-block;
}

.portfolio-categ li.label{
	text-align:right;
	width:100%;
	font-size:12px;
	line-height:12px;
	text-transform:uppercase;
	color:#fff;
	padding:0 20px 0 0;
	margin-bottom:10px;
}

.portfolio-categ li a {
	color:#838587;
	font-size:12px;
	line-height:12px;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	padding:10px 20px 10px 0;
	outline:none;
}

.portfolio-area{
	float: left;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;	
}

.portfolio-area li{
	list-style:none;
	overflow: hidden;
	position:relative;
	float: left;
	margin:0;
	padding:0;
}

.portfolio-area li.portfolio-intro{
	height:221px;
	color:#fff;
	text-align:left;
	padding:20px;
}

.portfolio-area li.portfolio-intro h4{
	color:#fff;
	font-size:46px;
	line-height:56px;
	font-weight:700;	
}

.portfolio-area li.portfolio-intro h4 span{
	font-weight:300;
}

.portfolio-area li.portfolio-intro .btn:hover,
.portfolio-area li.portfolio-intro .btn:focus {
  color: #303030;
  border:1px solid #303030;
}

.da-thumbs li  {
	overflow: hidden;
	display: block;
	position: relative;	
	margin:0;
	padding:0;
	text-align:center;
}

.da-thumbs li  article {
	position: absolute;
	text-shadow:none;
	width: 100%;
	height: 100%;
	margin:0;
	font-size:14px;
	display:block;
}

.da-thumbs li  article.da-animate {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.da-thumbs li  article a.zoom{
	z-index:2;	
	text-align:center;
	color:#fff;
	display:block;
	font-size:18px;
	width:100%;
	position:absolute;
	top:50%;
	margin-top:-30px;
}

.da-thumbs li  article a.zoom:hover{
	opacity: 0.80;
	filter: alpha(opacity=80); 
}

.da-thumbs li  article a.zoom:hover,
.da-thumbs li  article a.zoom:focus,
.da-thumbs li  article a.zoom:active{
	text-decoration:none;
	outline:none;
}

.da-thumbs li  article p {
	color:#fff;
	font-weight:400;
	z-index:2;	
	text-align:center;
	color:#fff;
	font-size:14px;
	width:100%;
	position:absolute;
	top:50%;
	margin-top:20px;
}

.da-thumbs li  article p a{
	color:#fff;
}

.da-thumbs li  article .caption-bg{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	z-index:1;
	opacity: 0.80;
	filter: alpha(opacity=80);    
}

/* === Initial state classes === */
.da-slideFromTop {
	left: 0px;
	top: -200%;
}
.da-slideFromBottom {
	left: 0px;
	top: 100%;
}
.da-slideFromLeft {
	top: 0px; 
	left: -102%;
}
.da-slideFromRight {
	top: 0px;
	right: -102%;
}

/* === Final state classes === */

.da-slideTop {
	top: 0px;
}
.da-slideLeft {
	left: 0px;
}

.folio-detail{
	padding:20px 30px 20px 0;
	border-top:1px solid;
}

.folio-detail h4 a{
	color:#fff;
}

.folio-detail .widget{
	float:left;
	width:100%;
	border-bottom:1px solid #fff;
	margin:10px 0 20px 0;
	padding-bottom:20px;
}

.folio-detail .widget strong{
	color:#fff;
}

.folio-detail .widget .list-meta{
	float:left;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}

.folio-detail .widget .list-meta li{
	float:left;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}

.folio-detail .widget .list-meta li label{
	font-weight:400;
	color:#fff;
	margin-right:10px;
}

.folio-detail .widget .tags{
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 -10px 0;
	padding:0;
}

.folio-detail .widget .tags li{
	float:left;
	list-style:none;
	margin:0 15px 25px 0;
	padding:0;
}

.folio-detail .widget .tags li a{
	color:#fff;
	border:1px solid #fff;
	padding:5px 15px 5px 15px;
	margin:0;
}

.folio-detail .widget .tags li a:hover{
	text-decoration:none;
}

/* Blog
========================== */
.services-wrapp{
	padding-top:20px;
	padding-bottom:30px;
	margin-bottom:10px;
}

/* Blog
========================== */
.article-post{
	padding:20px 20px 20px 0;
	border-top:1px solid;
}

.post-more{
	padding:20px;
	border-top:none;
}

.article-post h4 a{
	color:#fff;
}

.meta-wrapper{
	float:left;
	width:100%;
	background:url(../img/line.png) repeat-x top left;
	margin-bottom:20px;
}

ul.meta-post{
	float:left;
	width:100%;
	border-top:1px solid #d0d7d9;
	border-bottom:1px solid #d0d7d9;
	margin:0 0 20px 0;
	padding:8px 0 5px 0;
}

ul.meta-post li{
	float:left;
	color:#fff;
	list-style:none;
	margin:0 15px 0 0;
	padding:0;	
}

ul.meta-post li label{
	font-weight:400;
}

.comment-wrapper .media {
	background: url(../img/comment-line.jpg) no-repeat 0 45px;
	position:relative;
	border-left:1px solid #b4b4b4;
	padding:20px 0 0 20px;
	margin:0;
}

.comment-wrapper .media .media{
	float:right;
	width:95%;
}

.media-heading{
	font-size:18px;
	width:100%;
	margin:0 0 10px 0;
}
.media-heading h5{
	color:#fff;
	margin:0;
}

.media-heading h5 a{
	color:#fff;
}

.media-avatar{
	float:left;
	width:50px;
	margin:0 25px 20px 0;
	padding:0;
}

.media-avatar img{
	border:4px solid #b4b4b4;
}

.comment-form label{
	text-transform:uppercase;
	font-weight:700;
	color:#fff;
}

.comment-form p{
	margin-bottom:20px;
}

/*
Contact
=========================== */
.map{
	height:450px;
	width:100%;
	border:0;
	padding:0;
	margin:0 0 -5px 0;
}

ul.listForm{
	width:100%;
	padding:0;
	margin:0;	
	list-style:none;
}

ul.listForm li {
	margin-bottom: 15px;
}

ul.listForm label{
	font-weight:400;
	display:block;
	color:#fff;
}

ul.listForm label span{
	font-weight:300;
	font-style:italic;
}

ul.listForm .form-control{
	background:#fff;
	height:45px;
}

ul.listForm textarea.form-control{
	height:160px;
}

.validation {
	display:none;
	margin-top: 5px;
}

#sendmessage{
	display:none;
}

#sendmessage.show,.show  {
	display:block;
}

.contact-detail{
	color:#fff;
}

.contact-detail label{
	font-weight:400;
	display:block;
	font-size:14px;
}

.contact-detail label i{
	margin-right:5px;
}

.contact-detail p{
	margin-bottom:20px;
}

/*
Team
=========================== */
.team-wrapper-box{
	float:left;
	text-align:center;
	padding:0;
	margin-left:2%;
	margin-bottom:20px;
	width:23.5%;
	border: none;
	background:#fff;
	border: 5px solid #f1f1f1;
	color:#242424;
}

.team-wrapper-box.first{
	margin-left:0;
}

.team-wrapper-box h6, .team-wrapper-box h6 a{
	color:#242424;
	margin:10px 0 5px 0;
}

.team-wrapper-box p{
	margin-bottom:10px;
}

/*
Pricing table
======================================= */
.pricing-table {
	float:left;
	width:100%;
	margin:65px auto;
	list-style:none;
	padding: 0 20px 0 20px;
}

.pricing-table li {
	display:block;
	float:left;
	width:32%;
	position:relative;
}

.pricing-table li.featured {
	width:36%;
	position:relative;
	z-index:3;
	top:-30px;
	-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.13);
	-moz-box-shadow:0 2px 5px rgba(0,0,0,0.13);
	box-shadow:0 2px 5px rgba(0,0,0,0.13);
}

.pricing-table li ul {
	display:block;
	float:left;
	width:100%;
	margin:0;
	padding:0;
}
.pricing-table li ul li {
	display:block;
	width:100%;
	float:left;
	margin:0;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	border-top:1px solid #edeff0;
	padding:20px;
}

.pricing-table li ul li {
	background:#f5f8f9;
	color:#858585;
	font-size:14px;
	line-height:14px;
}

.pricing-table li ul li.plan_name {
	background:#818485;
	color:#fff;
	font-size:20px;
	padding:18px 0 0;
	line-height:24px;
	font-size:24px;
	font-weight:700;
	border-top:0 !important;
}

.pricing-table li.featured ul li.plan_name {
	padding:28px 0 0;
}

.pricing-table li.featured ul li.plan_price {
	padding:16px 0 28px;
}

.pricing-table li ul li.plan_price {
	background:#818485;
	color:#fff;
	font-size:13px;
	line-height:13px;
	padding:12px 0 18px;
	border-top:0 !important;
	font-style:italic;
}
.pricing-table li ul li.plan_price strong {
	font-size:20px !important;
	line-height:20px !important;
	font-style:normal !important;
}

.pricing-table li ul li.button_box {
	padding:40px 0 40px 0;
	background:#3c3c3c;
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;	
}

.pricing-table li.featured ul li.plan_price {
	font-size:14px;
	line-height:14px;
}

.pricing-table li.featured ul li.plan_price strong {
	font-size:22px !important;
	line-height:22px !important;
	font-style:normal !important;
}

.pricing-table li.featured ul li.plan_price span {
	font-size:12px !important;
	line-height:12px !important;
}

/*
Testimoni
=========================== */
.testimoni-wrapp{
	margin-top:20px;
	margin-bottom:20px;
}

blockquote {
  float: left;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 1px solid #d5d5d5;
}

blockquote p {
  margin-bottom: 0;
  font-size: 13px;
  font-weight: normal;
  line-height: 22px;
  font-style:italic;
}

blockquote small {
  display: block;
  line-height: 18px;
}

blockquote small:before {
  content: '\2014 \00A0';
}

blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 1px solid #d5d5d5;
  border-left: 0;
}

blockquote span{
  float: left;
  font-style:normal;
  margin-top:20px;
  color:#fff;
  font-size:11px;
  font-weight:600;
}

/*
Login register
=========================== */
.login-reg-wrapper{
	padding:30px 20px 30px 20px;
}

.login-reg-wrapper label{
	color:#fff;
	font-size:14px;
	font-weight:400;
	margin-bottom:15px;
}

.login-reg-wrapper p{
	margin-bottom:20px;
}

/*
Underconstruction
=========================== */
#underconstruction{
	float:left;
	background:#303030 url(../img/underconstruction-bg.png) no-repeat top center;
	width:100%;
	height:100%;
	border-top:5px solid;
	text-align:center;
	font-size:18px;
}

#underconstruction .logo{
	float: none;
	padding: 28px 20px 38px 20px;
	font-size: 18px;
	line-height: 20px;	
}

#underconstruction .logo img{
	margin-top:10px;
}

#wrapping {
	width: 440px;
	margin: 0 auto;
	margin-top: 60px;
}

#wrapping  h4{
	margin-bottom: 40px;
	text-transform:none;
}

#clock-ticker {
	display: block;
}

#clock-ticker .block {
	position: relative;
	color: #fff;
	font-family:Helvetica, sans-serif;
	text-shadow:1px 1px 1px #000;
	font-weight: bold;
	float: left;
	margin: 0 11px 0 11px;
	display: block;
}

#clock-ticker .block .flip-top {
	display: block;
	width: 88px;
	height: 38px;
	line-height: 75px;
	font-size: 55px;
	background: url('../img/flip-top.png') no-repeat;
	text-align: center;
}

#clock-ticker .block .flip-btm {
	display: block;
	width: 88px;
	height: 48px;
	background: url('../img/flip-btm.png') no-repeat;
	text-align: center;
}

#clock-ticker .block label {
	color: #fbfbfb;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	width: 88px;
	line-height: 35px;
	text-align: center;
	text-shadow: 1px 1px 0px #333;
}

.clearflip:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearflip {
	display: inline-block;
}

/*
Error 404
=========================== */
#error{
	padding:110px 0 80px 0;
	text-align:center;
}

#error img{
	margin-bottom:30px;
}

/*
Footer
=========================== */
footer{
	background:#303030;
	color:#909393;
	padding:60px 0 40px 0;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
	color: #fff;
	font-weight: 700;
	margin-bottom: 30px;
	font-size: 11px;
}

footer .widget{
	margin-bottom:30px;
}	

footer .thumbnail{
	-webkit-box-shadow:none;
	box-shadow:none;
	border:none;
	border-radius:2px;
}

footer a, footer a:hover{
	color:#fff;
}

footer a:hover{
	text-decoration:underline;
}

footer ul.link{
	list-style:none;
	margin:0;
	padding:0;
}

footer ul.link li{
	background:url(../img/arrow1.png) no-repeat 0 10px;
	list-style:none;
	margin:0;
	padding:3px 0 3px 10px;
}

footer ul.link li a{
	color:#909393;
}

.social-network:hover{
	text-decoration:none;
}

/*
Subscribe
=========================== */
.subscribe-field-group label{
	font-weight:400;
}

.subscribe-field-group{
	position:relative;
	width:80%;
	padding:0;
	margin:0;
}

.subscribe-field-group input{
  display: inline-block;
  width:100%;
  height: 48px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.428571429;
  color: #848889;
  vertical-align: middle;
  background-color: #202020;
  border: none;
  border-radius: 0;	
}

.subscribe-field-group input.button{
  position:absolute;
  width:auto;
  right:0;
  top:0;
  color: #ffffff;
  font-size:14px;
  padding-left:25px;
  padding-right:25px;
  border: none;
  border-radius:0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: none;
          transition: none;			  
}

.subscribe-field-group input:focus{
	color:#b9bcbc;
	border: 1px solid;
}

.subscribe-field-group input.button:hover, .subscribe-field-group input.button:focus{
	color: #ffffff;
	border: none;
}

/*
Heading
=========================== */
.heading{
	float:left;
	width:100%;
	background:#202020;
	color:#fff;
	margin:0;
	padding:0;
}

.heading h4{
	float:left;
	color:#fff;
	padding:30px 20px 30px 20px;
	margin:0;
}

.row .heading{
	margin-left:15px;
}

/*
divider
=========================== */
.divider{
	float:left;
	width:100%;
	background:url(../img/divider.png) repeat-x 0 0;
	position:relative;
	width:100%;
	height:5px;
	margin:30px 0 30px 0;
}

.divider.fullwidth{
	padding:0 -20px 0 -20px;
}

/*
Clear spacer
=========================== */
.marginnone{
	margin:0;
}

.margintop-clear{
	margin-top:0;
}

.marginbot-clear{
	margin-bottom:0;
}

/*
Custom top spacer
=========================== */
.margintop5{
	margin-top:5px;
}

.margintop10{
	margin-top:10px;
}

.margintop15{
	margin-top:15px;
}

.margintop20{
	margin-top:20px;
}

.margintop25{
	margin-top:25px;
}

.margintop30{
	margin-top:30px;
}

.margintop35{
	margin-top:35px;
}

.margintop40{
	margin-top:40px;
}

.margintop45{
	margin-top:45px;
}

.margintop50{
	margin-top:50px;
}

.margintop55{
	margin-top:55px;
}

.margintop60{
	margin-top:60px;
}

/*
Custom bottom spacer
=========================== */
.marginbot5{
	margin-bottom:5px;
}

.marginbot10{
	margin-bottom:10px;
}

.marginbot15{
	margin-bottom:15px;
}

.marginbot20{
	margin-bottom:20px;
}

.marginbot25{
	margin-bottom:25px;
}

.marginbot30{
	margin-bottom:30px;
}

.marginbot35{
	margin-bottom:35px;
}

.marginbot40{
	margin-bottom:40px;
}

.marginbot45{
	margin-top:45px;
}

.margintop50{
	margin-top:50px;
}

.marginbot55{
	margin-top:55px;
}

.marginbot60{
	margin-top:60px;
}

/*
Custom left spacer
=========================== */
.marginleft5{
	margin-left:1px;
}

.marginleft10{
	margin-left:10px;
}

.marginleft15{
	margin-left:15px;
}

.marginleft20{
	margin-left:20px;
}

/*
Custom right spacer
=========================== */
.marginright5{
	margin-right:1px;
}

.marginright10{
	margin-right:10px;
}

.marginright15{
	margin-right:15px;
}

.marginright20{
	margin-right:20px;
}

/*
Ui to top
=========================== */
#toTop{
	display:none;
	text-decoration:none;
	z-index:600;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:45px;
	height:44px;
	border:none;
	text-indent:-999px;
	background-image:url(../img/ui.totop.png);
	background-repeat:no-repeat;
	background-position: top left;
}

#toTopHover{
	background-image:url(../img/ui.totop.png);
	background-repeat:no-repeat;
	background-position: left -44px;
	background-color:#202020;
	width:45px;
	height:44px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);	
}

#toTop:active, #toTop:focus{
	outline:none;
}

/*
Custom responsive
=========================== */
@media (min-width: 80px) and (max-width: 767px) {	
	aside{
		float:left;
		position:relative;
		width:100%;
		height:auto;
	}
	#wrapper{
		width:100%;
		float:left;
		margin:0;
	}
	#intro h3{
		font-size:24px;
		line-height:37px;
	}	
	.services-box{
		width:100%;
		border-left:none;
		margin:0;
	}
	.services-box.second, .services-box.third, .services-box.fourth{
		border-left:none;
	}	
	.services-box span.service-arrow{
		display:none;
	}
	.logo{
		position:relative;
		z-index:2;
	}	
	.search-form{
		width:100%;
		position:absolute;
		padding-left:85px;
	}
	input.search{
		width:100%;
	}	
	.collapse {
	  display: inline-block;
	  float:left;
	}
	.accordion-body.collapse{
	  display: none;
	  float:none;
	  width:auto;	
	}
	.accordion-body.collapse.in {
	  display: block;
	}	
	.navbar{
		position:relative;
		clear:both;
		width:100%;
		margin:0;
		padding:0;
	}
	.navbar-collapse.collapse{	
		width:100%;
		margin:0;
		padding:0;
	}
	.navbar-nav{
		width:100%;
		padding:0;
		margin:0;
		border:none;
	}		
	.navbar-nav > li{
		display:none;		
	}
	.navbar .navbar-collapse .nav select{
		display:block;
		width:100%;
		color: #a9b0b7;
		border:none;
		background:#303030;
		margin:0;
		padding:25px 15px 25px 15px;
		font-size:13px;	
		cursor:pointer;		
	}
	.heading h4{
		width:100%;
	}
	.portfolio-categ{
		float:left;
		padding:0 0 0 20px;
		margin:20px 0 20px 0;
		text-align:left;
	}
	.portfolio-categ li{
		display:inline-block;
	}

	.portfolio-categ li.label{
		text-align:left;
	}	
	.article-post, .folio-detail{
		padding:20px;
	}
	.pricing-table li, .pricing-table li.featured{
		width:100%;
		margin:0 0 20px 0;
		top:0;
	}
	.grid-wrapper h3{
		font-size:40px;
		line-height:50px;
		margin-top:-35px;
	}	
	.grid-relative .grid-wrapper h3{
		margin-top:-20px;
		font-size:24px;
		line-height:32px;
	}
	.grid-relative .grid-wrapper p{
		font-size:14px;
		line-height:20px;
		width:80%;
		margin-top:0;
	}	
	.scrolltop {
		margin-top:-20px;
	}
	.grid-relative .grid-wrapper ul li p{	
		font-size:24px;
		line-height:32px;
		margin-left:10px;
	}		
	#wrapping {
		width: 176px;
	}	
	#clock-ticker .block {
		margin:0;
	}	
}

@media (min-width: 768px) and (max-width: 991px) {
	.services-box{
		width:100%;
		border-left:none;
		margin:0;
	}
	.services-box.second, .services-box.third, .services-box.fourth{
		border-left:none;
	}	
	.services-box span.service-arrow{
		display:none;
	}
	.heading h4{
		width:100%;
	}	
	.portfolio-categ{
		float:left;
		padding:0 0 0 20px;
		margin:20px 0 20px 0;
		text-align:left;
	}
	.portfolio-categ li{
		display:inline-block;
	}

	.portfolio-categ li.label{
		text-align:left;
	}	
	.article-post, .folio-detail{
		padding:20px;
	}
	.pricing-table li, .pricing-table li.featured{
		width:100%;
		margin:0 0 20px 0;
		top:0;
	}
	.grid-wrapper h3{
		font-size:40px;
		line-height:60px;
		margin-top:-35px;
	}	
	.grid-relative .grid-wrapper h3{
		margin-top:-20px;
		font-size:46px;
		line-height:80px;
	}
	.grid-relative .grid-wrapper p{
		font-size:18px;
		line-height:24px;
		width:80%;
		margin-top:0;
	}	
	.scrolltop {
		margin-top:-20px;
	}
	.grid-relative .grid-wrapper ul li p{	
		font-size:46px;
		line-height:80px;		
	}		
}

@media (min-width: 992px) and (max-width: 1199px) {
	.services-box{
		width: 25%;
	}
	.services-box.second, .services-box.third, .services-box.fourth{
		border-left:1px solid #fff;
	}		
	.services-box span.service-arrow{
		display:block;
	}	
	.article-post, .folio-detail{
		padding:20px;
	}
	.pricing-table li, .pricing-table li.featured{
		width:100%;
		margin:0 0 20px 0;
		top:0;
	}
	.grid-wrapper h3{
		font-size:60px;
		line-height:90px;
		margin-top:-35px;
	}
	.grid-relative .grid-wrapper h3{
		margin-top:20px;
		font-size:60px;
		line-height:80px;
	}
	.grid-relative .grid-wrapper p{
		font-size:18px;
		line-height:24px;
		width:80%;
		margin-top:0;
	}	
	.scrolltop {
		margin-top:20px;
	}
	.grid-relative .grid-wrapper ul li p{	
		font-size:60px;
		line-height:80px;		
	}	
}

@media (min-width: 1200px) {
	.services-box{
		width: 25%;
	}
	.services-box.second, .services-box.third, .services-box.fourth{
		border-left:1px solid #fff;
	}	
	.services-box span.service-arrow{
		display:block;
	}
	.grid-relative .grid-wrapper ul li p{
		line-height:110px
	}
}

/*
STYLESWITCHER
=========================== */			
.panel{
	background:#4d5053;
	color:#fff;
	width:250px;
	border-left:none;
	display:none;
	height:auto;
	left:0;
	padding:0; 
	top:120px;
	position:fixed;
	_position:absolute;
	z-index:99999;
}
	
.panel h6{
	text-align:center;
	margin-bottom:20px;
	padding:10px 0 10px 0;
	text-transform:uppercase;
	background:#868686;
	color:#fff;
}

a.openpanel{ 
	_background-image:none; 
	background:#868686; 
	padding:6px 10px 7px 7px;
	border-left:none;
	color:#fff;
	display:block;
	left:0;
	text-align:center;
	font-size:24px;
	top:121px;
	z-index:99999; 
	position:fixed;
	_position:absolute; 
}

a.openpanel{
	text-decoration:none;
}
		
a.active.openpanel{ 
	border-left:none;
	_position:absolute; 
	left:249px;
}

a.openpanel:hover,
a.openpanel:focus,
a.openpanel:active{
	outline:none;
}

.stylechanger, .layuout{ 
	width:100%;
	float:left;
	list-style:none; 
	list-style-type:none; 
	list-style-position:outside; 
	margin:0;
}

.stylechanger{
	margin:0 10px 10px 10px;
	padding:0;
}

.stylechanger li, .layuout li{
	list-style:none; 
	float:left;
	width:25px;
	height:25px;
	margin:0 10px 10px 10px;
}

.stylechanger li a{ 
	display:block; 
	width:100%; 
	height:100%;
	text-indent:-9999px; 
	outline:none;
}	

.layuout li{
	list-style:none; 
	float:left;
	width:92px;
	height:auto;
	margin:5px 10px 20px 10px;
	text-align:center;
}

.layuout li a{
	text-indent:0; 
	color:#fff;
}

.layuout li a img{
	margin-bottom:5px;
}

#color1 { background: #1fbf97; }
#color2 { background: #1fbfae; }
#color3 { background: #32a9a2; }
#color4 { background: #4ccee1; }
#color5 { background: #1f88bf; }
#color6 { background: #5dbe66; }
#color7 { background: #81a017; }
#color8 { background: #e27923; }
#color9 { background: #d89e2d; }
#color10 { background: #e0bf26; }

#color11 { background: #b83535; }
#color12 { background: #bf391f; }
#color13 { background: #da5135; }
#color14 { background: #dc3e6b; }
#color15 { background: #c0469e; }
#color16 { background: #75579e; }
#color17 { background: #8a4692; }
