/* ================================
	02- Intro
	03- La empresa
	04- Portafolio
	05- Clientes
	06- Contacto

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

@import url('font-awesome.min.css');
@import url('simpletextrotator.css');
@import url('overwrite.css');
@import url('animate.css');

@font-face {
    font-family: 'ITC Bauhaus';
    src: url('../fonts/BauhausITCbyBT-Medium.eot');
    src: url('../fonts/BauhausITCbyBT-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BauhausITCbyBT-Medium.woff2') format('woff2'),
         url('../fonts/BauhausITCbyBT-Medium.woff') format('woff'),
         url('../fonts/BauhausITCbyBT-Medium.ttf') format('truetype'),
         url('../fonts/BauhausITCbyBT-Medium.svg#BauhausITCbyBT-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'ITC Bauhaus';
    src: url('../fonts/BauhausITCbyBT-Bold.eot');
    src: url('../fonts/BauhausITCbyBT-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BauhausITCbyBT-Bold.woff2') format('woff2'),
         url('../fonts/BauhausITCbyBT-Bold.woff') format('woff'),
         url('../fonts/BauhausITCbyBT-Bold.ttf') format('truetype'),
         url('../fonts/BauhausITCbyBT-Bold.svg#BauhausITCbyBT-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Blacksword';
    src: url('../fonts/Blacksword.eot');
    src: url('../fonts/Blacksword.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Blacksword.woff2') format('woff2'),
         url('../fonts/Blacksword.woff') format('woff'),
         url('../fonts/Blacksword.ttf') format('truetype'),
         url('../fonts/Blacksword.svg#Blacksword') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ================================
General
================================= */

body{
	text-align: center;
	font-family: 'ITC Bauhaus', sans-serif;
	font-size: 18px;
	line-height: 1.6em;}

h1 {font-size: 36px;}
h2 {font-size: 32px;}
h3 {font-size: 28px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}
h6 {font-size: 18px;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
	color: #3a3a3a;
	font-weight: 700;
	margin-bottom: 20px;
	font-family: 'Blacksword', sans-serif;}


.lead{font-weight: 400;}
.bold{font-weight: bold;}

button {
	display: inline-block;
	margin-bottom: 0;
	margin-bottom: 10px;
	padding: 6px 12px;
	border: 1px solid transparent;
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.428571429;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;}

button.navbar-toggle {
	background: #2b2b2b;
	border: none;
	color: #fff;}

.btn-theme,.btn-theme:hover,.btn-theme:focus{color: #fff;}

.btn-theme:hover{
	background: transparent !important;
	border-color: #999;
	color: #999;}


/* ================================
margin, padding
================================= */
.mar-top0 {margin-top: 0;}
.mar-top10 {margin-top: 10px;}
.mar-top20 {margin-top: 20px;}
.mar-top30 {margin-top: 30px;}
.mar-top40 {margin-top: 40px;}


/* Back to top button */
.back-to-top {
  position: fixed;
  display: none;
  padding: 6px 12px 9px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
  z-index:1000;}

@media (max-width: 768px) {
  .back-to-top {bottom: 15px;}
}

.back-to-top:focus {outline: none;}

/* ================================
Navbar
================================= */
nav.navbar{
	position: fixed;
	top: -72px;
	margin-bottom: 0px;
	padding: 10px 0px 10px 0px;
	width: 100%;
	border-radius: 0px;
	transition: all 0.2s;}

.navbar-nav{float: right;}

nav.navbar.fixed-to-top{top: 0px;}

.navbar-default{
	border: none;
	border-bottom: none;
	opacity: 1;
	display: none;
	z-index: 9999;
	background: #416207;}

.navbar-default .navbar-nav > li > a {
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.5px;}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{
	color: #fdf8d1;
	cursor: pointer;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	outline: 0;}

/* brand / logo */
.navbar-default .navbar-brand{
	color: #fff;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2em;}

.navbar-default .navbar-brand{padding: 0;}
.navbar-brand > img{
	width: auto;
	height: 60px;}

/* ================================
Home sections
================================= */
.home-section {
	width: 100%;
	padding: 100px 0px 100px 0px;}

/* --- heading --- */
.section-heading {margin-bottom: 50px;}
.section-heading h2 {font-size: 48px; color: #819b00;}

.section-heading .heading-line {
	margin:0 auto;
	display: block;
	height: 5px;
	width: 100px;
	background: #819b00;
	margin-top: 10px;
	margin-bottom: 20px;}


/* --- section bg var --- */
.bg-white {background: #fff;}
.bg-gray {background: #f5f5f5;}
.bg-dark {background: #575757;}


/* --- section content general color --- */
.color-light h1,.color-light h2,.color-light h3,.color-light h4,.color-light h5,.color-light h6 {
	color: #fff;}

.color-light p {color: #eee;}

/* ==========================
Parallax
============================= */
#parallax1{background-image: url(../img/parallax/1.jpg);}
#parallax2{background-image: url(../img/parallax/2.jpg);}


/* ================================
	02- Intro
================================= */
#intro {
	position: relative;
	margin: 0 auto;
	width: 100%;
	overflow-x: hidden;
	height:80vh;
	z-index:2;
	background-size:cover;}

.intro-text {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	text-align: center;
  	position: absolute;
  	bottom: 0;
  	top: 0;
  	left: 0;
  	right: 0;
	z-index:999;}

.intro-text h1 {
	color:#fff;
	text-align:center;
	font-weight: 700;
	font-size: 60px;
	line-height:1.1em;
	padding-top:30px;}

.line-spacer {
	width: 20%;
	margin:0 auto;
	margin-top: 20px;
	margin-bottom: 25px;
	border-bottom:1px solid #fff;}

.intro-text p{
	color:#fff;
	font-size: 24px;
	text-align:center;
	font-weight: 300;}

/* ================================
	03- La empresa
================================= */
#laEmpresa .about-img {
  height: 490px;
  overflow: hidden;}

#laEmpresa .about-img img {
  margin-left: -15px;
  max-width: 100%;}

@media (max-width: 768px) {
  #laEmpresa .about-img {height: auto;}
  
  #laEmpresa .about-img img {
    margin-left: 0;
    padding-bottom: 30px;}
}

#laEmpresa .content h2 {
  color: #333;
  font-weight: 300;
  font-size: 24px;
  text-align: left;}

#laEmpresa .content h3 {
  color: #777;
  font-weight: 300;
  font-size: 18px;
  line-height: 26px;
  font-style: italic;
  text-align: left;}

#laEmpresa .content p {
  line-height: 26px;
  text-align: left;
  white-space: pre-line;}

#laEmpresa .content p:last-child { margin-bottom: 0;}

#servicios{padding-bottom: 0px;}

/* ================================
	04- Portafolio
================================= */
#portafolio{padding-top: 0px; padding-bottom: 100px;}
.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	height: 250px;
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
	width: 225px;}

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: none;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

.og-expander {
	position: absolute;
	background: #FFF;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
}

.og-expander-inner {
	padding: 50px 0;
	height: 100%;
	background: #f5f5f5;}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	cursor: pointer;}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.og-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

.og-fullimg,
.og-details {
	width: 47%;
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
	margin-right: 20px;}

.og-details {
	padding: 0 40px 0 0;
}

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

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.og-details h4 {
	font-weight: 300;
	margin-bottom: 10px;
	font-size: 38px;}

.og-details p {
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6em;
	/*color: #555;*/
	white-space: pre-line;}

.og-details p span{
	display: block;
	width: 160px;
	float: left;
	margin-right: 35px}

.og-details p span.lastSpan{margin-top: -25px;}

.og-details a {
	font-weight: 700;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
	display: none;}


.og-details a:hover {
	border-color: #999;
	color: #999;
}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

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

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

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

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }

}

/* ================================
	05- Clientes
================================= */
#clientes {
  padding: 100px 0;
  overflow: hidden;}

#clientes img {
	width: 100%;
	max-width: 200px;
	transition: 0.3s;
	padding: 15px 0;}

ul.clientes {list-style: none;}
ul.clientes li {
	padding: 0 10px 25px;
	display: inline;}

@media screen and (max-width: 991px){
	ul.clientes{padding: 0;}
}

/* ================================
	06- Contacto
================================= */
#contacto{
	background-image: url(../img/bgslides/back_ducker_contacto.jpg);
	background-size: cover;
	background-repeat: no-repeat;}

#contacto .section-heading h2{color: #fff;}

#contacto p{
	text-align: left;
	color: #fff;}

.contactForm .col-md-6:first-child{padding-left: 0;}
.contactForm .col-md-6:last-child{padding-right: 0;}

@media screen and (max-width: 991px){
	#contacto div.form-group,
	.divTel, .divTelNom{padding: 0!important;}

	.divTelNom{margin-bottom: 15px;}

	form{
		display: block;
	    width: 100%;
	    height: auto;
	    padding: 0 17px;}

}

/*datos contacto*/
.listaDatos{margin-top: 40px;}
.listaDatos li{
	display: block;
	width: 100%;
	height: auto;
	padding-left: 30px;
	text-align: left;
	color: #fff;
	margin-bottom: 35px;}

.listaDatos li.ubicacion{
	background-image: url(../img/icUbicacion.png);
	background-repeat: no-repeat;
	background-size: 25px 25px;}

.listaDatos li.email{
	background-image: url(../img/icMail.png);
	background-repeat: no-repeat;
	background-size: 25px 25px;}

.listaDatos li.telefono{
	background-image: url(../img/icTelefono.png);
	background-repeat: no-repeat;
	background-size: 25px 25px;}

.listaDatos li.facebook{
	background-image: url(../img/icFacebook.png);
	background-repeat: no-repeat;
	background-size: 25px 25px;}

.listaDatos li.facebook a{color: #fff!important;}
.listaDatos li.facebook a:hover{
	text-decoration: none;
	opacity:0.5!important;}

/*validacion*/
.validation {
  color: red;
  display:none;
  margin: 0;
  font-weight:400;
  font-size:13px;}

#sendmessage {
  color: green;
  border:1px solid green;
  display:none;
  text-align:center;
  padding:15px;
  font-weight:600;
  margin-bottom:15px;}

#errormessage {
  color: red;
  display:none;
  border:1px solid red;
  text-align:center;
  padding:15px;
  font-weight:600;
  margin-bottom:15px;}

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

/*mapa*/
iframe{
	width: 100%;
	height: 500px;}

/* ================================
Bottom widget
================================= */
#bottom-widget {
  overflow: hidden;
}
ul.social-network {
	margin: 0;
	margin-left:0;
	padding-left: 0;
	list-style: none;
}
ul.social-network li {
	display: inline;
	margin: 5px 5px;
}


ul.social-network li a:hover span .fa-circle {
	color: #2b2b2b;
}

ul.social-network li a i{
  transition: 0.3s
}
/* ================================
Footer
================================= */
footer {
	font-size: 11px;
	background: #fff;
	padding: 10px 0 20px;}

footer a img {
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0;
	display: block;}

footer p{
	white-space: pre-line;
	text-align: right;
	line-height: 1.1;}

/* ================================
more media queries
================================= */

@media (max-width:768px) {

	header{
		padding-bottom: 50px;
		min-height: 1000px;
		height: 100%;
	}

	.navbar-nav {
		float: left;
		text-align: left;
	}

	.box-team, .box-team img {
		text-align: center;
	}
	.box-team img {
		float: none;
		margin:0 auto;
	}
	.box-team {
		margin-bottom: 30px;
	}

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; padding: 0 40px; }

}

@media (max-width:992px) {

	.service.carousel .item h4, .service.carousel .item p{
		text-align: center;
	}

	.service p{
			margin-bottom: 60px;
	}
	.og-expander {
		background: transparent;

	}
	.og-details {
		padding: 0 20px;
	}

}

@media (max-width:480px){

	header .carousel-iphone, .detail .screenshot{
		width: 280px;
	}

	header .carousel, .detail .screenshot img{
		padding-top: 85px;
		width: 245px;
	}

	.service .screenshot img{
		margin-top: -12px;
		padding-top: 0px;
	}

	header{
		padding-top: 30px;
		padding-bottom: 0px;
	}

	header h1{
		font-size: 70px;
	}
}