@charset "utf-8";
/* CSS Document */


/********************************/
/*          Hero Headers        */
/********************************/

#hgroup {
	max-width:420px;
	text-align:center;
	padding:0;
	margin:0;
	display:block;
}

#hero-wrapper h1 {
	width:100%;
    font-size: 30px;    
    font-weight: bold;
	line-height:0;
	position: absolute;
	top: 24%;
	left:0;
	right:0;
	bottom:0;
	z-index:6;
	clear:both;	
	display: inline-block;
}
#hero-wrapper h1 img {
	clear:both;	
    margin:0 auto;
	padding:18px;
	line-height:0;
	background: rgba(255,255,255,.6);
}
.btn-top {
	z-index:6;
	position:absolute;
	bottom:20%;
	left:48%;
	margin:20px auto 6px auto;
	display: inline-block;
}

@media (max-height:570px) {
#hero-wrapper .btn-top {
  display:none;
}
}

/********************************/
/*          Media Queries       */
/********************************/
@media (max-width:1140px) {
#hero-wrapper h1 {
    font-size: 5em;    
	top: 20%;
}
}
@media (max-width:979px) {
#hero-wrapper h1 { 
	top: 8%;
}
.btn-top {
	bottom:8%;
}
}

@media (max-width:768px) {
#hero-wrapper h1 {    
	top: 30%;
	padding:10px;
}
#hero-wrapper h1 img {
	clear:both;	
    margin:auto;
	padding:12px;
}
.btn-top {
	bottom:10%;
}
}
@media (max-width:480px) {
#hero-wrapper h1 {
    font-size: 18px;    
	top: 20%;
	padding:10px;
}
.btn-top {
	left:42%;
	bottom:10%;
}
}

.carousel{
	clear:both;
	position: relative;
}


.item img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    transform: scale(1.05, 1.05);
	max-width:100vw;
	max-height:100vh;
}

#hero-wrapper {
	margin-top:50px;
	width:100%;
	clear:both;
	z-index: 1;
	height:94vh;
	position: relative;
}

#hero-wrapper .carousel-wrapper,
#hero-carousel {
	width: 100%;
}
#hero-carousel img {
  left: 0;
  bottom: 0;
  min-width: 100%;
  max-width: none;
  width: auto;
  height: auto;
  background-size:cover;
}

#hero-carousel i {
  position: absolute;
  top: 30%;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
  min-height:100vh;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.scale_up{
	margin-top:0px;
	-moz-animation-delay:0s;
	-moz-animation-duration:16s;
	-moz-animation-fill-mode:forwards;
	-moz-animation-iteration-count:1;
	-moz-animation-name:extention;
	-moz-animation-timing-function:ease-out;
	-ms-animation-delay:0s;
	-ms-animation-duration:16s;
	-ms-animation-fill-mode:forwards;
	-ms-animation-iteration-count:1;
	-ms-animation-name:extention;
	-ms-animation-timing-function:ease-out;
	-o-animation-delay:0s;
	-o-animation-duration:16s;
	-o-animation-fill-mode:forwards;
	-o-animation-iteration-count:1;
	-o-animation-name:extention;
	-o-animation-timing-function:ease-out;
	-webkit-animation-delay:0s;
	-webkit-animation-duration:16s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-iteration-count:1;
	-webkit-animation-name:extention;
	-webkit-animation-timing-function:ease-out;
	-webkit-backface-visibility:hidden
}


	
@-moz-keyframes extention {
0% { transform: scale(1.0); -webkit-transform: scale(1.0); }
100% { transform: scale(1.2); -webkit-transform: scale(1.2); }
}

@-webkit-keyframes extention {
0% { transform: scale(1.0); -webkit-transform: scale(1.0); }
100% { transform: scale(1.2); -webkit-transform: scale(1.2); }
}

@-o-keyframes extention {
0% { transform: scale(1.0); -webkit-transform: scale(1.0); }
100% { transform: scale(1.2); -webkit-transform: scale(1.2); }
}

@-ms-keyframes extention {
0% { transform: scale(1.0); -webkit-transform: scale(1.0); }
100% { transform: scale(1.2); -webkit-transform: scale(1.2); }
}