/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 04.11.2016, 10:21:46
    Author     : barthelfr
*/

/*
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;
}

.carousel .carouselTitle p{display:inline-block; padding: 10px 20px; background:#b60837; color:#FFF; text-transform: uppercase; font-size:26px}
.carousel .carouselText p{display:inline-block; background:#000; color:#FFF; font-size:16px; padding:5px 10px; margin-bottom:2px}

.carousel .container .carouselTitle,
.carousel .container .carouselText {margin: 0 50px 10px 50px;}
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    text-align: left;
    padding: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
    
.carousel-control.left {text-align:center;} 
.carousel-control.right {text-align:center;} 
.carousel-control .fa-chevron-left {left:15px; right:auto;}
.carousel-control .fa-chevron-right {left:auto; right:15px;}
.carousel-control .fa-chevron-left, 
.carousel-control .fa-chevron-right {
    position: absolute;
    top: 45%;
    z-index: 5;
    display: inline-block;
    font-size:40px;
}
.carousel-indicators {bottom:0;}
.carousel-control {width:10%}


/* newsslider  */
.newsslider > div {margin:0 10%;}
.newsslider .item > div[class*="col-"]{ 
    padding:0;
    
}
.newsslider .item .moduleItemImageBlock {margin-right:20px;}
.newsslider .item span.catItemImage {margin:0;}

.newsslider .item * {text-align: left!important}

.newsslider .carousel-control {background:none;}
.newsslider .carousel-control .fa:before { color: red;}
/*
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);
    }
}