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

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

01. Body
02. Home
03. How it work
04. Client logo
05. MacBook video
06. Client logo
07. Crausel tabs
08. Counter
09. Gallery
10. Portfolio detail
11. Heading
12. Testimoni
13. Blog
14. Comments
15. Contact
16. Footer
17. Search
18. Inner page
19. Team
20. Story line
21. Services
22. Divider
23. Heading
24. Media responsive
25. Ui to top
26. Loading
27. Clear spacer
28. Custom top spacer
29. Custom bottom spacer
30. Custom left spacer
31. Custom right spacer
32. Custom responsive
	
============================================================== */

/*
Body
=========================== */
#wrapper{
	position:relative;
	background:#ffffff;
	overflow:hidden;
}

#slidewrapper{
	position:relative;
	overflow:hidden;
}

.containt{
	position:relative;
	padding-top:60px;
	padding-bottom:60px;
}

#slidewrapper .containt{
	background:#f8fefe;
}

.pattren-bg{
	background:#e5e7eb url(../images/pattren_new.jpg) repeat 0 0;
}

#slidewrapper .containt.pattren-bg{
	background:#e5e7eb url(../images/pattren_new.jpg) repeat 0 0;
}

.half-wrapper{
	background:#e5e7eb url(../images/pattren_new.jpg) repeat 0 0;
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:0;
}

.half-column{
	float:left;
	width:50%;
	padding:0;
	margin:0;
}

.half-containt{
	padding:80px 60px 80px 60px;
}

/*
Home
=========================== */
.home-wrapper,
.bg-slide{
	background:url(../images/main-bg.jpg) 50% 0 no-repeat fixed;
	position:relative;
	padding:60px;
	margin: 0 auto;
	overflow: auto;
	overflow-y: hidden;
	width: 100%;
	z-index:3;
	color:#fff;
}

.bg-slide{
	background:none;
}

.videobg{
	background:#212121;
}

.home-container{
	border:40px double rgba(255, 255, 255, 0.5);
	margin-bottom:0;
	padding:220px 0 220px 0;
}

.home-wrapper h1, .home-wrapper h2, .home-wrapper h3, .home-wrapper h4, .home-wrapper h5,.home-wrapper h6,
.bg-slide h1, .bg-slide h2, .bg-slide h3, .bg-slide h4, .bg-slide h5, .bg-slide h6{
	color:#fff;
}

.home-wrapper h1,
.bg-slide h1{
	font-size:52px;
	line-height:48px;
	letter-spacing:6px;
}

.home-wrapper h2,
.bg-slide h2{
	margin-bottom:10px;
	text-transform:uppercase;
}

.scrolltop ul{
	float:left;
	width:100%;
	margin:0;
	padding:0;
}

.scrolltop ul li{
	float:left;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
	font-size:14px;
	line-height:20px;
	text-transform:uppercase;
	letter-spacing:3px;
}

/*
How it work
=========================== */
.timeline{
	float:left;
	background:url(../images/gray-line.png) repeat-y top center;
	padding:40px 0 40px 0;
	margin-top:20px;
	margin-bottom:20px;
}

.circle{
	border:1px solid #8f9495;
	position:absolute;
	width:14px;
	height:14px;
	border-radius:50%;
	left:50%;
	margin-left:-8px;
}

.circle.on-top{
	top:0;
	margin-top:-14px;
}

.circle.on-bottom{
	top:100%;
	margin-bottom:-14px;
}

.box-line{
	position:relative;
	width:50%;
	clear:both;
}

.box-line.on-right{
	float:right;
}

.box-line.on-left{
	float:left;
}

.box-icon,
.box-time{
	position:absolute;
	width:80px;
	height:80px;
	border:1px solid;
	color:#fff;
	font-size:42px;
	line-height:82px;
	text-align:center;
	border-radius:50%;
	top:50%;
	margin-top:-40px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.box-line.on-right .box-icon,
.box-line.on-right .box-time{
	left:0;
	margin-left:-40px;
}

.box-line.on-left .box-icon,
.box-line.on-left .box-time{
	right:0;
	margin-right:-40px;
}

.box-time{
	font-size:16px;
	line-height:76px;
	font-weight:700;
}

.box-wrapp{
	background-image:url(../images/box-line.png);
	background-repeat:repeat-x;
}

.box-line.on-right .box-wrapp{
	background-position:left center;
	padding-left:85px;
}

.box-line.on-left .box-wrapp{
	background-position:right center;
	padding-right:85px;
}

.box-containt{
	background:#f8fbfb;
	border:1px solid #bfcaca;
	border-radius:3px;
	padding:30px;
}

.box-line.on-right .box-containt{
	text-align:left;
}

.box-line.on-left .box-containt{
	text-align:right;
}

.box-containt h5,
.box-containt p{
	margin-bottom:10px;
}

/*
Client logo
=========================== */
.client{
	background:#e5e7eb url(../images/pattren_new.jpg) repeat 0 0;
	padding:45px 0 40px 0;
	margin-top:-5px;
}

.client h5{
	margin-bottom:10px;
	text-transform:uppercase;
}

.client-wrapper{
	float:left;
	width:100%;
}

.client-logo{
	display:inline-block;
	position:relative;
}

.client-link{
	cursor:pointer;
	position:absolute;
	z-index:2;
	width:108px;
	height:75px;
}


/*
Heading
=========================== */
.pricing-wrapper{
	background:#f8fbfb;
	border:1px solid #bfcaca;
	padding:1px;
	text-align:center;
	display:block;
	margin-top:20px;
	border-radius:3px;
}

.pricing-price{
	position:relative;
	font-size:60px;
	line-height:60px;
	font-weight:700;
	color:#444;
	padding:20px;
}

.pricing-price p{
	margin-bottom:0;
}

.pricing-price span{
	position:absolute;
	font-size:24px;
	line-height:24px;
	top:30px;
	margin-left:-15px;
}

.pricing-head{
	background:#e8f1f1;
	border-top:1px solid #ddeaea;
	border-bottom:1px solid #ddeaea;
	padding:20px;
}

.pricing-head h4{
	text-transform:uppercase;
	margin-bottom:0;
	color:#444;
}

.pricing-wrapper.popular .pricing-head h4{
	color:#fff;
}

.pricing-list{
	margin:15px 0 15px 0;
	padding:0;
}

.pricing-list li{
	list-style:none;
	margin:0;
	padding:10px;
	color:#444;
	font-size:16px;
	line-height:20px;
	letter-spacing:1px;
}

.pricing-bottom{
	background:#e8f1f1;
	border-top:1px solid #ddeaea;
	border-bottom:1px solid #ddeaea;
	padding:20px;
}

/*
Contact
=========================== */
.contact-detail{
	float:left;
	width:100%;
	color:#fff;
	padding-top:60px;
	padding-bottom:60px;
}

.contact-detail h5{
	margin-bottom:10px;
	text-transform:uppercase;
}

.contact-icon{
	display:block;
	font-size:52px;
	line-height:32px;
	margin-bottom:15px;
}
.form-icon{
	display:block;
	font-size:32px;
	line-height:32px;
	margin:6px 5px 0 0px;
}

.contact-wrapper{
	background:url(../images/contact-bg.jpg) 50% 0 no-repeat fixed;
	position:relative;
	overflow: auto;
	overflow-y: hidden;
	color:#fff;
}

.contact-form{
	background:rgba(255, 255, 255, 1.0);
	color:#999;
	padding:0px 0 20px 0;
}

.contact-headline{
	color:#333;
	padding:10px 0 20px 0;
	font-size:26px;
	/*font-weight:bold;*/
}

ul.listForm{
	float:left;
	width:100%;
	padding:0;
	margin:0;
}

ul.listForm li {
	float:left;
	width:49%;
	padding:0;
	margin:0 0 30px 0;	
	list-style:none;	
}

ul.listForm li .form-control:-moz-placeholder {
  color: #aeaeae;
}

ul.listForm li .form-control::-moz-placeholder {
  color: #aeaeae;
}

ul.listForm li .form-control:-ms-input-placeholder {
  color: #aeaeae;
}

ul.listForm li .form-control::-webkit-input-placeholder {
  color: #aeaeae;
}

ul.listForm li .form-control{
	background:none;
	border:1px solid #aeaeae;
}

ul.listForm li.first-list {
	margin-right:2%;
}

ul.listForm li.full-list{
	width:100%;
}

#sendmessage{
	display:none;
}

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

/*
Footer
=========================== */
footer{
	background:#2f2f2f;
	color:#fff;
	padding:60px 0 50px 0;
	text-align:center;
}

footer h5{
	margin-bottom:10px;
	text-transform:uppercase;
}

.subscribe-form{
	width:100%;
	position:relative;
	margin:30px 0 30px 0;
}

input.subscribe:-moz-placeholder {
  color: #3b3b3b;
}

input.subscribe::-moz-placeholder {
  color: #3b3b3b;
}

input.subscribe:-ms-input-placeholder {
  color: #3b3b3b;
}

input.subscribe::-webkit-input-placeholder {
  color: #3b3b3b;
}

input.subscribe{
	position:relative;
	width:100%;
	border:none;
	background:#fff;
	padding:20px;
	border-radius:4px;
}

.subscribe-button{
	position:absolute;
	width:40px;
	height:40px;
	border:none;
	border-radius:50%;
	right:20px;
	top:14px; 
	font-size:16px;	
}

.subscribe-button:hover{
	opacity: 1;
	filter: alpha(opacity=100); 	
}

.copyright{
	color:#989b9c;
}

.social-network{
	display:block;
	width:100%;
	font-size:14px;
	line-height:24px;
}

.social-network a{
	display:inline-block;
	color:#989b9c;
	margin:0 2px 5px 2px;
}

/*
Search
=========================== */
.search-wrapper{
	float:right;
	position:relative;
	background:none;
	background:#fff;
	border-radius:3px;
	width:50%;
	margin-top:20px;
}

.search{
	display:block;
	width:40%;
	background:none;
	border:none;
	padding:8px 20px 8px 20px;
	color:#4e4e4e;
}

.btn-search{
	background:#232a34 url(../images/search.png) no-repeat center center;
	position:absolute;
	border:none;
	text-indent:-9999px;
	overflow:hidden;
	top:0;
	right:0;
	padding:8px 25px 8px 25px;
	border-radius:0 3px 3px 0;
}

.btn-search:hover{
	background:#2f3640 url(../images/search.png) no-repeat center center;
}

/*
Divider
=========================== */
.divider{
	float:left;
	width:100%;
	height:1px;
	background:#d8d8d8;
	margin:60px 0 60px 0;
}

/*
Heading
=========================== */
.heading{
	background: rgba(0, 0, 0, .9);
	color:#fff;
	font-weight:700;
	font-size:26px;
	line-height:54px;
	letter-spacing:3px;
	padding-bottom:0px;
	margin-bottom:0px;
	padding: 0px 15px 0px 15px;
	border-radius: 3px 3px 0 0px;
}

.heading h3{
	text-transform:uppercase;
	font-size:18px;
	line-height:18px;
}

.sub-heading{
	background: rgba(255, 255, 255, .9);
	color:#444;
	font-weight:700;
	font-size:22px;
	line-height:36px;
	letter-spacing:1px;
	padding-bottom:20px;
	margin-bottom:0px;
	padding: 15px;
	border-radius: 0 0 3px 3px;
}

#warning p span {
    color: #cc0000;
    font-weight: bold;
}

/*
Media responsive
=========================== */
.video-container,.map-container,.embed-container{
	position:relative;
	margin:0 0 15px 0;
	padding-bottom:58%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	border:none;
}

.embed-container iframe,
.embed-container object,
.embed-container embed,
.video-container iframe,
.map-container iframe,
.map-container object,
.map-container embed,
.video-container video,  
.video-container source,  
.video-container object,  
.video-container embed{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

iframe {
	border:none;
}

/*
Ui to top
=========================== */
#toTop{
	display:none;
	text-decoration:none;
	z-index:600;
	position:fixed;
	bottom:20px;
	right:20px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	border-radius:2px;
	text-indent:-999px;
	background-image:url(../images/ui.totop.png);
	background-repeat:no-repeat;
	background-position: top left;
	background-color:rgba(0, 0, 0, 0.4);
}

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

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

/*
Loading
=========================== */
div.loading-invisible{
    display:none;
}

div.loading-visible{
    position:fixed;
	z-index:9999999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    padding-top:20%;
	font-size:24px;
	line-height:36px;
	color:#fff;
	font-weight:300;
}

div.loading-visible i{
	display:inline-block;
	margin-bottom:20px;
}

div.loading-visible .loader{
	margin-bottom:20px;
}

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

.padding-clear{
	padding:0;
}

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

.paddingtop-clear{
	padding-top:0;
}

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

.paddingbot-clear{
	padding-bottom:0;
}

.marginbot-min40{
	margin-bottom:-40px;
}

.margintop-min15{
	margin-top:-15px;
}

/*
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;
}

.margintop80{
	margin-top:80px;
}

/*
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-bottom:45px;
}

.marginbot50{
	margin-bottom:50px;
}

.marginbot55{
	margin-bottom:55px;
}

.marginbot60{
	margin-bottom:60px;
}

.marginbot80{
	margin-bottom:80px;
}

/*
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;
}

/*
Custom responsive
=========================== */
@media (min-width: 1200px){
	.video-player{
		width:720px;
		top:30px;
		left:128px;
	}
	.home-wrapper h1,
	.bg-slide h1{
		font-size:72px;
		line-height:68px;
	}
	.scrolltop ul li{
		font-size:18px;
		line-height:30px;
	}
}

@media (min-width: 768px) and (max-width: 990px) {
	.navbar-default .navbar-nav li a{
		font-size:15px;
		padding:20px 8px 20px 8px;
	}
	.video-player{
		width:546px;
		top:23px;
		left:103px;
	}
	.home-wrapper h1,
	.bg-slide h1{
		font-size:52px;
		line-height:48px;
	}
	.scrolltop ul li{
		font-size:14px;
		line-height:20px;
	}
	.timeline{
		float:left;
		width:100%;
		padding-bottom:20px;
		padding-left:10%;
		padding-right:10%;
	}
	.box-line.on-right, .box-line.on-left{
		float:left;
		width:100%;
		padding-top:100px;
		padding-bottom:30px;
	}
	.box-line.on-right .box-wrapp, .box-line.on-left .box-wrapp{
		background:none;
		padding-left:20px;
		padding-right:20px;
	}
	.box-line.on-right .box-icon,
	.box-line.on-left .box-icon,
	.box-line.on-right .box-time,
	.box-line.on-left .box-time{
		top:0;
		left:50%;
		margin:0 0 0 -40px;
	}
	.box-line.on-right .box-containt,
	.box-line.on-left .box-containt{
		text-align:center;
	}
	.jwg_slider_module .tabbed_navigation > ul li{
		margin-bottom:10px;
	}
	.tabs-containt{
		padding-top:0;
		padding-bottom:20px;
	}
	.half-column{
		width:100%;
	}
	.half-containt{
		padding:60px 60px 40px 60px;
	}
	.counter-text{
		display:block;
		margin-bottom:30px;
	}
	.gallery-item,
	.gallery-item.two-column{
		width: 50%;
	}
	.recent-post{
		float:left;
		margin-bottom:20px;
	}
	.contact-text{
		display:block;
		margin-bottom:20px;
	}
	.search-wrapper{
		float:left;
	}
	.service-box{
		margin-top:80px;
	}
	aside{
		border-left:none;
		padding-left:0;
	}
	.detail-post,
	.detail-aside{
		width:100%;
	}
	.detail-desc{
		border-right:none;
	}
	.detail-aside{
		border-top:1px solid #bfcaca;
	}
}

@media (width: 768px) {	
	ul.listForm{
		float:left;
		width:93%;
		padding:0;
		margin:0;
	}
}

@media (max-width: 767px) {	
	.video-player{
		width:72.38%;
		height:84%;
		top:5.5%;
		left:14%;
	}
	.navbar-default .navbar-collapse{
		float:none;
	}
	.navbar-default .navbar-nav > li{
		padding:0 20px 0 20px;
		margin-bottom:5px;
		float:left;
		width:100%;
	}
	.navbar-default .navbar-nav > li > a{
		border:1px solid #dedede;
		padding:10px 20px 10px 20px;
		border-radius:4px;
	}
	.navbar-default .dropdown-menu {
		position:relative;
		background:none;
		float:left;
		width:100%;
		padding:0 10px 0 10px;
		-webkit-box-shadow: none;
		box-shadow: none;
		border:none;
		left:0;
	}
	.navbar-default .dropdown-menu li a{
		font-size:14px;
		line-height:14px;
		border:1px solid #dedede;
		padding:10px 20px 10px 20px;
		border-radius:4px;
		margin-top:5px;
	}
	.home-wrapper,
	.bg-slide{
		padding:20px;
	}
	.home-wrapper h2,
	.bg-slide h2{
		font-size:20px;
		line-height:20px;
	}
	.home-wrapper h1,
	.bg-slide h1{
		font-size:32px;
		line-height:28px;
	}
	.scrolltop ul li{
		font-size:12px;
		line-height:20px;
	}
	.home-container{
		padding:80px 0 80px 0;
	}
	.timeline{
		float:left;
		width:100%;
		padding-bottom:20px;
	}
	.box-line.on-right, .box-line.on-left{
		float:left;
		width:100%;
		padding-top:100px;
		padding-bottom:30px;
	}
	.box-line.on-right .box-wrapp, .box-line.on-left .box-wrapp{
		background:none;
		padding-left:20px;
		padding-right:20px;
	}
	.box-line.on-right .box-icon,
	.box-line.on-left .box-icon,
	.box-line.on-right .box-time,
	.box-line.on-left .box-time{
		top:0;
		left:50%;
		margin:0 0 0 -40px;
	}
	.box-line.on-right .box-containt,
	.box-line.on-left .box-containt{
		text-align:center;
	}
	.jwg_slider_module .tabbed_navigation > ul {
		float:left;
		width:100%;
	}
	.jwg_slider_module .tabbed_navigation > ul li{
		float:left;
		width:100%;
		margin-bottom:5px;
	}
	.tabs-containt{
		padding-top:0;
		padding-bottom:20px;
	}
	.half-column{
		width:100%;
	}
	.half-containt{
		padding:60px 60px 40px 60px;
	}
	.counter-text{
		display:block;
		margin-bottom:30px;
	}
	.gallery-item,
	.gallery-item.two-column{
		width: 50%;
	}
	.recent-post{
		float:left;
		margin-bottom:20px;
	}
	.contact-text{
		display:block;
		margin-bottom:20px;
	}
	.team-list li{
		border:none;
	}
	.team-list li ul li,
	.team-list li ul li.first{
		width: 60%;
		border:1px solid #8f9495;
		margin-bottom:40px;
		margin-left:20%;
		margin-right:20%;
	}
	.search-wrapper{
		float:left;
	}
	.service-box{
		margin-top:80px;
	}
	aside{
		border-left:none;
		padding-left:0;
	}
	.detail-post,
	.detail-aside{
		width:100%;
	}
	.detail-desc{
		border-right:none;
	}
	.detail-aside{
		border-top:1px solid #bfcaca;
	}
}

@media (max-width: 670px) {	
	.gallery-item,
	.gallery-item.two-column{
		width: 100%;
		text-align:center;
	}
	.img-column{
		width:60%;
		margin-left:20%;
	}
	ul.listForm li {
	float:left;
	width:100%;
	padding:0;
	margin:0 0 30px 0;	
	list-style:none;	
	}
	.containt{
	position:relative;
	padding-top:20px;
	padding-bottom:60px;
	}

}

@media (max-width: 570px) {	
	.gallery-item,
	.gallery-item.two-column{
		width: 100%;
	}
	.img-column{
		width:80%;
		margin-left:10%;
	}
	.team-list li ul li,
	.team-list li ul li.first{
		width: 80%;
		border:1px solid #8f9495;
		margin-bottom:40px;
		margin-left:10%;
		margin-right:10%;
	}
	.home-wrapper,
	.bg-slide{
		padding:20px;
	}
	.home-wrapper h2,
	.bg-slide h2{
		font-size:16px;
		line-height:16px;
	}
	.home-wrapper h1,
	.bg-slide h1{
		font-size:24px;
		line-height:28px;
	}
	.scrolltop ul li{
		font-size:10px;
		line-height:18px;
	}
	.home-container{
		padding:80px 0 80px 0;
	}
}

@media (max-width: 470px) {	
	.gallery-item,
	.gallery-item.two-column,
	.img-column{
		width: 100%;
		margin:0;
	}
}

/*EXTERNAL*/
.login-box-body,
.register-box-body {
  background: #fff;
  padding: 20px;
  color: #444;
  border-top: 0;
  color: #666;
}
.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback {
  color: #777;
}
.login-box-msg,
.register-box-msg {
  margin: 0;
  text-align: center;
  padding: 0 20px 20px 20px;
}
.social-auth-links {
  margin: 10px 0;
}