/*
 _____  __  __  ____                __                   
/\___ \/\ \/\ \/\  _`\             /\ \                  
\/__/\ \ \ \_\ \ \ \/\_\    ___    \_\ \     __    ____  
   _\ \ \ \  _  \ \ \/_/_  / __`\  /'_` \  /'__`\ /',__\ 
  /\ \_\ \ \ \ \ \ \ \L\ \/\ \L\ \/\ \L\ \/\  __//\__, `\
  \ \____/\ \_\ \_\ \____/\ \____/\ \___,_\ \____\/\____/
   \/___/  \/_/\/_/\/___/  \/___/  \/__,_ /\/____/\/___/ 
                                                         
http://www.jhcodes.com/
Jesus Herrera - jesuxherrera@jhcodes.com
*/

/* Import CSS Files */
@import url("css-ini/font-awesome.min.css");
@import url("css-ini/bootstrap.min.css");
@import url("css-ini/responsive.css");
@import url("css-ini/animate.css");

/* Loading */
#loading{
	position: absolute;
	background: #eaeaea;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
}

body{
   font-family: 'Open Sans', sans-serif;
   font-weight: 300;
   background: #eaeaea;
   background: url(../img/model-tapiz2.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Raleway', sans-serif;
	color: #FFF;
}

a:hover{
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}


.company-bg{
  background: url(../img/model-tapiz2.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #FFF;
}

::-webkit-scrollbar
{
    width: 10px;
    background-color: #FFF;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #c14742;
}

/* Bootstrap Change Styles */

.navbar-default {
  background-color: transparent;
  border-color: transparent;
}

.navbar-default .navbar-nav>li>a {
  color: #FFF;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #FFF;
  background-color: #C14742;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: transparent;
}

.navbar-collapse {
  border-top: 0px solid transparent;
  -webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
  box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
}

.navbar-brand {
  float: left;
  height: 45px;
  padding: 12px 15px;
  font-size: 18px;
  line-height: 20px;
  margin-top: 5px;
  border-radius: 4px;
  margin-left: 5px;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  color: #FFF;
  background-color: #A32924;
}

.navbar-default .navbar-brand {
  color: #FFF;
  background-color: #C14742;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
  color: #FFF;
  background-color: #C14742;
}


.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #FFF;
  background-color: #C14742;
}


/* Menu */
#menu .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #A32924;
}


/* Header */
#header{
	height: 150px;
	padding-top: 0%;
	padding-bottom: 5%;
	right: 0;
	top: 0;
}

.knob{
	margin-left: 50px;
}


/* Sections */

.description-section{
  text-align: center;
  margin-bottom: 3%;
}

.description-section h2{
  margin-top: 0px;
  margin-bottom: 0px;
  color: #777;
}

#section1{
    padding-top: 2%;
	padding-bottom: 5%;
	background: #eaeaea;
	display: none;
}


.info-cube{
  background: #c14742;
  text-align: center;
  border-radius: 5px;
  padding-top: 3%;
  padding-bottom: 5%;
  margin-bottom: 1%;
}

.info-cube h2{
  margin-top: 0px;
  margin-bottom: 10px;
}

.info-cube i{
  font-size: 3em;
  color: #FFF;
}

.info-cube .info-cube-body{
  background: #FFF;
  padding: 5%;
}


#section2{
	padding-top: 5%;
	padding-bottom: 5%;
	color: #FFF;
}

/* carousel */
#quote-carousel 
{
  padding: 0 10px 30px 10px;
  margin-top: 30px;
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: -25px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
    margin-bottom: 10px;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}





#section3{
  background: #c14742;
  padding-top: 5%;
  padding-bottom: 5%;
}

.pre-cube{
  padding-right: 5px;
  padding-left: 5px;
}

.icon-cubic{
  color: #FFF;
  font-size: 30px;
  display: block;
  width: 51px;
  height: 51px;
  border: 1px dashed #FFF;
  text-align: center;
  line-height: 48px;
  position: relative;
  float: left;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.cubic-title{
  color: #FFF;
  font-size: 30px;
  display: block;
  border: 1px dashed #FFF;
  text-align: center;
  line-height: 49px;
  position: relative;
  margin-left: 5px;
  float: left;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.cubic-content{
  color: #FFF;
  font-size: 20px;
  display: block;
  border: 1px dashed #FFF;
  position: relative;
  float: left;
  text-align: center;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-top: 2%;
  padding: 2%;
  margin-bottom: 3%;
}

#section4{
  padding-top: 1%;
  padding-bottom: 5%;
  background: rgba(45, 45, 58, 0.7);
  color: #FFF;
}

#section4 h3{
  font-size: 3em;
  margin-top: 20px;
  margin-bottom: 25px;
}

#section4 small{
  margin-bottom: 5%;
  margin-top: 10%;  
  display: block;
  background-color: #C14742;
  border-radius: 4px;
  font-size: 15px;
}


#footer{
	padding-top: 3%;
	padding-bottom: 3%;
}


#social-icons{
   font-size: 2em;
}

#social-icons a{
   color: #FFF;
}

#social-icons i{
  margin-left: 2%;
}


.portfolio-item{
  display:none;
}


.thumbnail {
    position:relative;
    overflow:hidden;
    background-color: transparent;
}
 
.caption {
    position:absolute;
    bottom:-100%;
    right:0;
    background: rgba(193, 71, 66, 0.6);
    width:100%;
    height:100%;
    padding:2%;
    text-align:center;
    color:#fff !important;
    z-index:2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.thumbnail:hover .caption {
  bottom:0%;
}

.thumbnail .caption {
  padding: 15%;
}

.caption i{
  font-size: 3em;
}


.description-section-red{
  text-align: center;
  margin-bottom: 3%;
}

.description-section-red h2{
  margin-top: 0px;
  margin-bottom: 0px;
  color: #FFF;
}


/* trans item */

.trans-item{
   margin-bottom: 3%;
}

.trans-item-body{
  border: 1px solid #FFF;
  border-radius: 4px;
  padding: 2% 2%;
}

.trans-item-title{
  border: 1px solid #FFF;
  font-size: 2em;
  padding: 1% 3%;
  margin-bottom: 1%;
}


.trans-item-content{
  border:1px solid #FFF;
  padding: 2%;
}

.contact-body{
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #FFF;
  border-radius: 6px;
  padding: 4%;
}

.contact-body .form-control{
  background-color: transparent;
  color: #FFF;
}