#siteheader {
	width: 100%;
	height: auto;
	padding-top: 0px;
	margin-top: 0px;
}



#header-section {
	background: url("../images/hero.png") no-repeat;
	background-size: cover;	
	height: auto;
	width: 100%;
	color: #fff; 

}

 
.dark-overlay {
	background: rgba(96, 96, 96, 0.6);
	width: 100%;
	height: auto;
	padding-bottom: 50px;
	padding-top: 30px;
	margin-top: 120px;
}

#header-section .fa {
	color: #9F1D2A;
	background: #fff;
	padding: 4px;
	border-radius: 5px;
	font-size: 30px; 
}

#accountrequest-form .fa {
	color: #9F1D2A;
	background: #fff;
	padding: 4px;
	border-radius: 5px;
	font-size: 20px; 
}


#our-principales-section .fa {
	color: #fff;
	background: #737a80;
	padding: 4px;
	border-radius: 5px;
	font-size: 30px; 
}

  
.invalidfeedback {
	display: none;
	text-align: right;
	width:100%;
}

 

.warehouse-card {
	border: 1px solid #9F1D2A; 
}

.warehouse-card  a{
	color: #9F1D2A; 
}

.warehouse-name{
	color: #9F1D2A; 
}


  
  
@import url(https://fonts.googleapis.com/css?family=Expletus+Sans:600);
/*==========SCALE-IN==========*/
@-webkit-keyframes scale-in {
	 0%   {transform: scale(10, 10); opacity: 0;}
	100% {transform: scale(1, 1); opacity: 1;}
}

@keyframes scale-in {
	0%   {transform: scale(10, 10); opacity: 0;}
	100% {transform: scale(1, 1);  opacity: 1;}
}
/*==========ROLL-OUT==========*/
@-webkit-keyframes roll-out {
	0%   {width: 0;}
	100% {width: 100%; }
}
@keyframes roll-out {
	0%   {width: 0;}
	100% {width: 100%; }
}


.hero{
  width: 100%; 
  height: auto;      
  text-align: center;
  margin: 0 auto;
  background: #392f28;
  position: relative; 
  color: #FFFFFF;
}

#youtube-video{
  font-size: 4.1em;
  margin: auto;
  position: absolute; 
  top: 250px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}		

.hero h1{
  font-size: 4.1em;
  margin: auto;
  position: absolute; 
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.hero p{
  font-size: 2.0em;
  margin: auto;
  position: absolute; 
  top: 120px;
  left: 0;
  right: 0;		 
   z-index: 3;
}
.hero img{
  width: 100%;
}
.bar{
  width: 100%;
  height: 200px;
  background: -moz-linear-gradient(289deg, #333333 0%, #000000 36%, #333333 100%);
  background: -webkit-linear-gradient(289deg, #333333 0%, #000000 36%, #333333 100%);
  background: -ms-linear-gradient(289deg, #333333 0%, #000000 36%, #333333 100%);
  background: linear-gradient(161deg, #333333 0%, #000000 36%, #333333 100%);
  opacity: 0.3;
  position: absolute; 
  z-index: 2;
  left: 0;
  top: 10px;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
   -webkit-animation: roll-out 1.2s ease-out ;
  -moz-animation: roll-out 1.2s ease-out ;
	animation: roll-out 1.2s ease-out ; 
}
.hero h1, .hero p{
  -webkit-animation: scale-in 1.3s ease-out;
  -moz-animation: scale-in 1.3s  ease-out;
	animation: scale-in 1.3s ease-out; 
}

#video {
	width:70%;
	height:400px;		
}

@media all and (max-width: 1500px) {
  #body_wrapper {
	width: 100%;
	min-height: 10px;
	margin-bottom: 0px;
  }  	
  #youtube-video{
	top: 17vw;
  }

	#video {
		width:70%;
		height:300px;		
	}		  
}

@media all and (max-width: 768px) {
  .hero{
	height: 42vw;
  }
  .bar{
	height: 12vw;
	bottom: 10vw;
  }
  
  .hero h1{
	font-size: 5vw;
	top: 2vw;
  }
  .hero p{
	font-size: 4vw;
	top: 8vw;
  }
  
  #youtube-video{
	top: 2vw;
  }
  
	#video {
		width:100%;
		height:100%;		
	}	
 
}