/***********Carousel Fade Home Page********************/
/*
inspired from http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.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;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


#carousel-home-text2 {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#carousel-home-text2 .carousel-inner {
    position: absolute;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

#carousel-home-text2 .carousel-inner .item {
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
}

.flexslider .img-background-flex {
    margin-top: 0px;
}
    
.flexslider .img-background-flex .content .small {
    font-size: 1.786em;
    color: #018c39;
    font-family: 'MeodedLight';
}

.flexslider .img-background-flex .content .heading4 {
    font-size: 3.429em;
    color: #018c39;
}


@media(max-width:767px){
    #carousel-home-text2 {
        display: none;
    }
    
    .img-background,.img-background-flex {
        padding-bottom: /*6.625%*/ 93vw;
        position:relative;
    }
    
    .flexslider .img-background-flex .content {
        margin-top: 30px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        height: 100%;
        width: 100%;
        left: 0px;
        right: 0px;
    }
    
    .flexslider {
        margin: 0px;
        background: none;
        border: none;
        position: relative;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -o-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: 0 0px 0px rgba(0,0,0,0);
        -moz-box-shadow: 0 1px 0px rgba(0,0,0,0);
        -o-box-shadow: 0 0px 0px rgba(0,0,0,0);
        box-shadow: 0 0px 0px rgba(0,0,0,0);
        zoom: 1;
    }
    
    .flex-control-nav {
        width: 100%;
        position: absolute;
        bottom: 26px;
        text-align: center;
    }
    
    .flex-control-paging li a {
        width: 11px;
        height: 11px;
        display: block;
        cursor: pointer;
        text-indent: -9999px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0);
        -moz-box-shadow: inset 0 0 0px rgba(0,0,0,0);
        -o-box-shadow: inset 0 0 0px rgba(0,0,0,0);
        box-shadow: inset 0 0 0px rgba(0,0,0,0);
        background-color: #00552C;
        border: 5px solid transparent;
    }
    
    .flex-control-paging li a.flex-active {
        background-color: #00552C;
        background: #00552C;
        border: 7px solid #00552C;
        cursor: default;
    }
    
}

@media (min-width:768px){
    #home-link {
        color: #018939 !important;
        border-top: 4px solid #008935 !important;
    }
    
    html,body,form,
    #SiteContainer,#SiteGridContainer,#SiteGrid,
    #PageGrid,#MainGallery {
        height: 100%; 
        min-height: 650px;   
    }

}