/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/

/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #0462ac;
    border-color: #0462ac;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
/*
.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in .6s;
       -moz-transition: 2s all ease-in .6s; 
        -ms-transition: 2s all ease-in .6s; 
         -o-transition: 2s all ease-in .6s; 
            transition: 2s all ease-in .6s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in .6s; 
       -moz-transition: 2s all ease-in .6s; 
        -ms-transition: 2s all ease-in .6s; 
         -o-transition: 2s all ease-in .6s; 
            transition: 1s all ease-in 500ms; 
}*/

.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right{
    opacity: 1;
    -webkit-transition: ease-in-out .6s; 
       -moz-transition: ease-in-out .6s;  
        -ms-transition: ease-in-out .6s;  
         -o-transition: ease-in-out .6s;  
            transition: ease-in-out .6s;  
}
.fade{
  opacity: 1 !important;	
}
/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .7;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.7;
}
.fade-carousel .slides .slide-1 {
  /*background-image: url('/media/1021/background_1.png'); */
}
.fade-carousel .slides .slide-2 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
  background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 3em; }   
	.hero { width: 100% !important;}
	hgroup.top_text { width: 100% !important;}
	
}

.carousel-indicators {
    text-align: right;
    float: right;
    right: 2% !important;
    left: inherit;
	 -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 98%;
    z-index: 15;
    width: 60%;
    padding-left: 0;
    margin-left: 0%;
    text-align: center;
    list-style: none;
    top: 52% !important;
}
.carousel-indicators {
    text-align: right;
    /* float: right; */
    /* right: 0% !important; */
    /* left: inherit; */
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    /* transform: rotate(90deg) !important; */
    height: 0% !important;
    width: 0% !important;
    position: absolute;
    /* right: 0px !important; */
}

.scroll-indicator {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 100%;
    position: absolute;
    bottom: 40px;
    left: 50%;
    z-index: 3;
    -webkit-transform: translateX(-50%) translateY(0);
    -ms-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
    -webkit-animation: scrollIndicator 2s infinite;
    animation: scrollIndicator 2s infinite;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
    color: #fff !important;
}
.carousel-inner {
    top: -115px !important;
}
.top_overlay {
    background: transparent;
}
a.scroll-indicator.js-scroll-to.fullscreen {
    position: absolute;
    bottom: -60% !important;
}