/*................................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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}
/*................................clearfix...........................................*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/*.........GLOBLE......*/

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #86878b;
	font-weight: 400;
	background: #fff;
}
h2 {
	font-weight: 400;
	font-family: 'Raleway', sans-serif;
	font-size: 36px;
	color: #212121;
	line-height: 43px;
	text-align: center;
	text-transform: uppercase;
}
h3{font-size: 20px;
	font-weight: 700;
	color: #333333;}
.line {
	width: 64px;
	height: 2px;
	background: #ff8b38;
	display: block;
	margin: 30px auto;
}
header {
	z-index: 9998;
	background: #000;
	width: 100%;
	padding: 20px 0;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
header.sticky {
	position: fixed;
	width: 100%;
	background: #000;
	box-shadow: 3px 1px 0.99px 0.01px rgba(0, 0, 0, 0.05);
	padding: 15px 0px;
}
header a.logo img {
	display: block;
}
.logo {
	width: 30%;
	float: left;
}
nav {
	width: 70%;
	float: left;
	text-align: right;
}
nav ul li {
	display: inline-block;
	padding: 0px 0px 0px 48px;
}
nav ul li a {
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	display: block;
	color: rgba(255,255,255,0.70);
}
nav ul li a:hover {
	color: #ff8b38;
	transition: all 0.5s;
}
#inicio {
	background: url(images/banner.jpg) no-repeat bottom center;
	background-size: cover;
	padding: 10px 0 135px;
	/*padding: 110px 0 135px;*/
}
#inicio img {
	display: block;
}
#inicio h2 {
	color: #fff;
	text-align: left;
	margin-top: 25px;
}
#inicio span.line {
	margin: 30px 0;
}
#inicio p {
	color: rgba(255,255,255,0.80);
	margin-bottom: 35px;
}
#inicio span.line{background:#fff;}
#inicio a.download {
	width: 135px;
	height: 42px;
	line-height: 40px;
	border: 2px solid #fff;
	text-align: center;
	color: #fff;
	font-size: 15px;
	display: block;
}
#inicio a.download:hover {
	background: #fff;
	color: #232323;
	transition: all 0.5s;
}
#inicio form {
	/*max-width: 360px;*/
	width: 100%;
	float: right;
	background: #fff;
	border-radius: 3px;
	text-align: center;
}
#inicio form h3 {
	font-size: 20px;
	font-weight: 700;
	color: #333333;
	background: #f5f5f5;
	padding: 20px 0;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
#inicio form h3 span {
	color: #ff9b51;
}
#inicio form input {
	width: 85%;
	border: 0;
	margin-top: 30px;
	border-bottom: 1px solid #d6d6d6;
	border-left: 1px solid #fbfbfb;
	border-right: 1px solid #fbfbfb;
	padding: 10px;
	outline: 0;
}
#inicio form input:focus{
	border-bottom:1px solid	#ff8b38;
}
#inicio form a {
	background: #ff9b51;
	color: #fff;
	display: block;
	width: 100%;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	/* margin-top: 50px; */
	/* padding: 20px 0; */
	padding: 10px 0;
	font-size: 15px;
	font-weight: 600;
}
#inicio form a:hover {
	background: #000;
	transition: all 0.5s;
}
#social {
	padding: 20px 0;
	box-shadow: 0px 1px 0.3px 0px rgba(0, 0, 0, 0.38);
}
#social h3 {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	padding-bottom: 5px;
}
.rightside {
	text-align: right;
}
#social a i {
	color: #cccccc;
	padding: 10px 0px 0 40px;
}
#social a i:hover {
	color: #ff9b51;
}
/* TABING CSS*/
/*----- Tabs -----*/
.tabs {
	width: 100%;
	display: inline-block;
}
/*----- Tab Links -----*/
    /* Clearfix */
.tab-links:after {
	display: block;
	clear: both;
	content: '';
}
.tab-links li {
	margin: 0px 5px;
	list-style: none;
}
.tab-links a {
	width:112px;
	height:112px;
	line-height:112px;
	display:block;
	background: #333333;
	border-bottom:1px solid #fff;
	font-size: 15px;
	font-weight:700;
	color: #fff;
	text-align:center;
	transition: all linear 0.15s;
}
.tab-links a:hover {
	background: #ff8b38;
	text-decoration: none;
}
.tab-links li.active a, .tab-links li.active a:hover {
	background: #ff8b38;
	color: #fff;
}
/*----- Content of Tabs -----*/

.tab {
	display: none;
}
.tab.active {
	display: block;
}
#practica{background:#f5f5f5; padding:145px 0 110px;}
.width60{width:60%; float:left; padding-left:50px;}
.width40{width:40%; float:left; text-align:right;}
#practica h3 {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	padding-bottom: 50px;
}
#practica p{padding-bottom:45px;}
.width60 a {
	width: 121px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	color: #fff;
	background:#ff8b38;
	border-radius:3px;
	font-size: 15px;
	display: block;
}
.width60 a:hover {
	background: #232323;
	color: #fff;
	transition: all 0.5s;
}

.sublevel1{
	padding:110px 0 120px;	
}
.sublevel1 img , #sublevel2 img{width:100%; display:block;}
.sublevel1 span.line , #sublevel2 span.line{margin:30px 0;}
.sublevel1 p{padding-bottom:35px;}
.sublevel1 i{
	width:40px;
	height:40px;
	line-height:40px;
	border-radius:50%;
	border:2px solid #ff8b38;
	color:#ff8b38;	
	text-align:center;
	font-size:18px;
}
.sublevel1 a {
	height: 46px;
	line-height: 46px;
	text-align: center;
	color: #fff;
	background:#ff8b38;
	border-radius:3px;
	font-size: 15px;
	display: block;
}
.sublevel1 h4{font-size:14px; line-height:17px; color:#000; font-weight:700; padding-bottom:10px;}
#sublevel2{background:#f5f5f5; padding:80px 0;}
#sublevel2 h3{padding-top:50px;}
#awesome{
	text-align:center;
	padding:100px 0;	
}
p.bottom{padding-bottom:70px;}
#awesome i{
	width:70px;
	height:70px;
	line-height:70px;
	border-radius:50%;
	border:2px solid #ff8b38;
	color:#ff8b38;	
	text-align:center;
	font-size:30px;
}
#awesome h3{padding:25px 0;}
#pricing{
	background:#f5f5f5;
	padding:100px 0;
	text-align:center;	
}
#pricing p.bottom{padding-bottom:110px;}
#pricing article h3{
	background:#333333;
	color:#fff;
	padding:22px 0;
	border-bottom:1px solid #fff;	
}
#pricing article h1{
	background:#333333;
	color:#fff;
	font-size:92px;
	font-weight:700;
	line-height:100%;	
	font-family: 'Raleway', sans-serif;
}
#pricing article h1 span{font-size:35px;}
#pricing article h4{
	background:#333333;
	color:rgba(255,255,255,0.50);
	font-size:14px;
	font-style:italic;
	padding-bottom:20px;
	border-bottom:5px solid #ff8b38;
	font-weight:400;
	line-height:100%;	
}
#pricing article h5{
	background:#ff8b38;
	color:#fff;
	font-size:14px;
	padding:10px 0;
	font-weight:600;
	line-height:100%;	
}
#pricing article p{
	background:#fff;
	border-bottom:1px solid #f5f5f5;
	padding:15px 0;	
	text-transform:uppercase;
}
#topmar{margin-top:-30px;}
#customer{
	padding:80px 0;
	text-align:center; 	
}
p.arrow_box {
	position: relative;
	background: #f5f5f5;
	padding:15px;
	text-align:left;
	max-width:282px;
}
p.arrow_box:after {
	top: 100%;
	left: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(245, 245, 245, 0);
	border-top-color: #f5f5f5;
	border-width: 15px;
	margin-left: -15px;
}
.mainhald{margin-top:20px;}
.hlfside{width:30%; float:left;}
.athrhalf{width:70%; float:left; text-align:left;}
.athrhalf h3{padding-top:15px; padding-bottom:5px;}
#design{
	background:url(images/news.jpg) no-repeat center center;
	min-height:	320px;
	background-size:cover;
	padding:70px 0;
	color:#fff;
	text-align:center;
}
#design h2{color:#fff;} 

#design a {
	width: 135px;
	height: 42px;
	line-height: 40px;
	border: 2px solid #fff;
	text-align: center;
	color: #fff;
	font-size: 15px;
	margin:30px auto 0;
	display: block;
}
#design span.line{background:#fff;}
#design a:hover {
	background: #fff;
	color: #232323;
	transition: all 0.5s;
}
#contact{
	padding:100px 0 80px;	
}
#contact p{text-align:center;}
#contact input , #contact textarea{width:100%; border:0; outline:0; border-bottom:1px solid #d6d6d6; margin-bottom:20px; padding:13px;
}
#contact textarea{height:180px;}
#contact a {
	width: 148px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	color: #fff;
	background:#ff8b38;
	border-radius:3px;
	font-size: 15px;
	display: block;
	margin:20px auto 0;
}
#contact a:hover {
	background: #232323;
	color: #fff;
	transition: all 0.5s;
}
#contact input:focus , #contact textarea:focus{
	border-bottom:1px solid	#ff8b38;
}
footer{
	padding:20px 0;
	background:#000;
	text-align:center;	
	color:#fff;
}
footer a i{padding:0 10px; font-size:20px !important;color:#fff;}
footer a i:hover{color:#ff8b38;}
footer p , footer p a{color:rgba(255,255,255,0.50); font-size:12px;}
.bottomsocial{margin-bottom:10px;}
footer p a:hover{color:#fff;}

/* New */

.os-animation {
	opacity: 0;
}
.os-animation.animated {
	opacity: 1;
}
.staggered-animation {
	opacity: 0;
}
.staggered-animation.animated {
	opacity: 1;
}
/*LOADER EFFECT*/
/*Paste this css to your style sheet file or under head tag*/
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9998;
 background: #ff9b51;
}


.cssload-spinner {
	position: absolute;
	width: 33px;
	height: 33px;
	left: 50%;
	top:50%;
	margin-left: -17px;
	margin-top: -17px;
}
.cssload-spinner:after, .cssload-spinner:before {
	position: absolute;
	content: "";
	border: 2px solid rgb(255,255,255);
	width: 31px;
	height: 31px;
}
.cssload-spinner:after {
	animation: cssload-spinner1 2.88s linear infinite;
		-o-animation: cssload-spinner1 2.88s linear infinite;
		-ms-animation: cssload-spinner1 2.88s linear infinite;
		-webkit-animation: cssload-spinner1 2.88s linear infinite;
		-moz-animation: cssload-spinner1 2.88s linear infinite;
}
.cssload-spinner:before {
	width: 43px;
	height: 43px;
	margin-left: -6.5px;
	margin-top: -6.5px;
	animation: cssload-spinner2 2.88s linear infinite;
		-o-animation: cssload-spinner2 2.88s linear infinite;
		-ms-animation: cssload-spinner2 2.88s linear infinite;
		-webkit-animation: cssload-spinner2 2.88s linear infinite;
		-moz-animation: cssload-spinner2 2.88s linear infinite;
}



@keyframes cssload-spinner1 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-spinner1 {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-spinner1 {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-spinner1 {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-spinner1 {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}

@keyframes cssload-spinner2 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

@-o-keyframes cssload-spinner2 {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(-360deg);
	}
}

@-ms-keyframes cssload-spinner2 {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(-360deg);
	}
}

@-webkit-keyframes cssload-spinner2 {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(-360deg);
	}
}

@-moz-keyframes cssload-spinner2 {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(-360deg);
	}
}