/****************************************/
/****************************************/ 

/** Waste Management and Resource Recovery Association of Australia (WMRR) RESPONSIVE STYLE SHEET **/
/*
 * 
 *  Author: CAUSEIS PTY LTD - info@causeis.com.au
 * 
 *  Version: 1 - 22 November 2019 
 *
 *  Document contains changes to Carousel
 *
 *
*/

/****************************************/
/****************************************/

.row.customcarousel > div {
    padding: 0;
}

.row.customcarousel .panel-body {
    padding: 0;
}
 
.row.customcarousel {
    max-width: 100% !important;
    margin-bottom: 70px !important;
}


.carousel-indicators .active {
    margin: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff87;
    transition: cubic-bezier(0.17, 0.05, 0.24, 1) width 6s;
    display: inline-block;
    margin: 0 10px;
}


.carousel-indicators li {
    width: 0;
    height: 0;
    border: 0px solid #0000;
    background-color: #ffffff75;
    display: block;
}

ol.carousel-indicators {
    bottom: 85px;
    z-index: 1;
    pointer-events: none;
}


/** START CAROUSEL FUNCTIONALITY **/
 
 
    
  
 

  .row.customcarousel.homebanner  a.carousel-link {
    /* position: relative; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    z-index: 1000000;
    text-decoration: none;
}
.row.customcarousel.homebanner    .carousel-caption {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

  
.row.customcarousel.homebanner    .carousel-caption {
    margin: auto;
    left: 0;
    right: 0;
    /* top: 0; */
    /* bottom: auto; */
    max-width: 1300px;
    text-align: left;
    width: 100%;
    text-shadow: none;
    height: 66%;
    padding: 0;
    }
     
/*** Display Flex ***/
 .row.customcarousel.homebanner   .carousel-caption div {
     /* display: -webkit-box; */      /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
     display: -ms-flexbox;      /* TWEENER - IE 10 */
     /* display: -webkit-flex; */     /* NEW - Chrome */
     /* display: flex; */             /* NEW, Spec - Opera 12.1, Firefox 20+ */
     width: 100%;
     margin: auto;
    }
 .row.customcarousel.homebanner   .carousel-caption div div:nth-child(2) {
    margin: auto;
    }
 .row.customcarousel.homebanner   .carousel-caption div > div {
    display: block;
    margin-left: 0;
    padding: 30px;
    max-width: 40%;
    height: auto;
 }

 

span.icon-prev, span.icon-next {
    width: 30px !important;
    height: 120px !important;
    font-size: 88px !important;
}


.carousel-control .icon-next:before {
    content: '-';
    background-image: url(/App_Themes/WMRR_Responsive/images/rightarrow.svg);
    background-repeat: no-repeat;
    color: transparent;
}

.carousel-control .icon-prev:before {
    content: '-';
    background-image: url(/App_Themes/WMRR_Responsive/images/leftarrow.svg);
    background-repeat: no-repeat;
    color: transparent;
}

 .row.customcarousel.homebanner .carousel-caption {
    max-height: 530px;
    top: auto;
    bottom: 79px;
}

.row.customcarousel.homebanner .carousel-caption div > div.right {
    text-align: right;
    float: right;
}

.row.customcarousel.homebanner .carousel-caption div > div.left {
    text-align: left;
    float: left;
}

.row.customcarousel.homebanner .carousel-caption div > div.center {
    text-align: center;
    margin: auto;
}

.carousel-control {
    /* z-index: 1000000000; */
    height: 610px;
    bottom: 0;
    top: auto;
    background-image: none !important;
}


.carousel-control.right:hover span.icon-next {
    margin-right: -50px;
}

.carousel-control.left:hover  span.icon-prev {
    margin-left: -50px;
}
span.icon-next, span.icon-prev  {
    transition: all .2s ease-in-out;
}




/* MOBILE */
@media (max-width: 767px) {
.carousel-control.left:hover span.icon-prev {
    margin-left: -20px;
}

.carousel-control.right:hover span.icon-next {
    margin-right: -20px;
}

}


.col-primary .full > .row.customcarousel .carousel-caption {
   
left: 0;
   
right: 0;
   
top: auto;
   
bottom: auto;
   
margin: auto;
   
display: flex;
   
align-content: center;
   
max-width: 1300px;
   
height: 100%;
   
padding: 0;
}
 
 .col-primary .full > .row.customcarousel .carousel-caption > div > div > h1{
    padding: 15px;
 }
 
 
 @media (max-width: 768px) {
   
    .carousel-caption h1 {
    font-size: 40px !important;
    }

 }
/** END CAROUSEL FUNCTIONALITY **/


.carousel-caption h1 {
    font-size: 55px;
    transform: translateY(-0.0em);
    margin: auto 0;
}

.carousel-caption a.button {font-size: 19px;background-color: #91be41;color: #ffffff !important;transform: scale(1.0);font-weight: 600;padding: 6px 30px 13px 30px;}


 

 

.carousel-caption p {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}


.col-sm-6.right {
    max-width: 100% !important;
}




.carousel-inner.bg-img > .item {
    min-height: 250px;
}

.col-primary .full > .row.customcarousel .carousel-caption > div {
    /* margin: auto 0; */
    display: flex;
    /* height: 100%; */
}

.col-primary .full > .row.customcarousel .carousel-caption > div > div {
    display: flex;
}



@media (max-width: 767px){
 

.carousel-caption h1 {
    transform: translateY(-0.6em);
}


.col-primary .full > .row.customcarousel .carousel-caption > div > div {
    padding-top: 100px;
    display: table;
}


}
 

   .item.text-left > div > div > div {
    float: left;
    }
    .item.text-right > div > div > div {
    float: right;
    }




.carousel-indicators .active, .carousel-indicators li {
    width: 7px;
    height: 7px;
    transition: none;
    display: inline-block;
    margin: 3px !important;
}


.carousel-indicators .active {
    background-color: #ffffffcc;
}

ol.carousel-indicators {
    pointer-events: all;
}
