/* Grapgic Carousel Generic Styles */
.mod-graphic-carousel { display:block }
.mod-graphic-carousel .slider { visibility:hidden; white-space:nowrap }
.mod-graphic-carousel .slider.slick-initialized { visibility:visible }
.mod-graphic-carousel .slider .slick-slide { float:none; display:inline-block; vertical-align:middle }
.mod-graphic-carousel .slider .slick-slide img { margin:0 auto }

/* Grapgic Carousel Style1 */
.mod-graphic-carousel.style1 .slider { padding:20px; text-align:center }
.mod-graphic-carousel.style1 .slick-slide { padding:0 20px }
.mod-graphic-carousel.style1 .slick-prev, 
.mod-graphic-carousel.style1 .slick-next { position:absolute; left:20px; top:50%; z-index:1; margin-top:-20px; width:40px; height:40px; padding:0; border:none; font-family:'glyphicons'; cursor:pointer; text-align:center; text-shadow:0 0 5px rgba(0,0,0,0.8); overflow:hidden; color:#444; background:transparent }
.mod-graphic-carousel.style1 .slick-next { left:auto; right:20px }
.mod-graphic-carousel.style1 .slick-prev:before { content:"\e80f"; display:block; height:40px; font-size:3rem; line-height:40px }
.mod-graphic-carousel.style1 .slick-next:before { content:"\e810"; display:block; height:40px; font-size:3rem; line-height:40px }
.mod-graphic-carousel.style1 .slick-prev:focus,
.mod-graphic-carousel.style1 .slick-next:focus { outline:none; text-shadow:1px 1px 10px rgba(0,0,0,0.8) }

/* Grapgic Carousel Style2 */
.mod-graphic-carousel.style2 .slick-slide { padding:0 10px }

/* Grapgic Carousel Style3 */
.mod-graphic-carousel.style3 { text-align:center }
.mod-graphic-carousel.style3 .slick-slide img { display:block; margin:0 auto }
.mod-graphic-carousel.style3 .slick-prev, 
.mod-graphic-carousel.style3 .slick-next { position:absolute; left:20px; top:50%; z-index:1; margin-top:-20px; width:40px; height:40px; padding:0; border:none; font-family:'glyphicons'; cursor:pointer; text-align:center; text-shadow:0 0 5px rgba(0,0,0,0.8); overflow:hidden; text-shadow:none; color:#444; background:#fff; border-radius:100%; box-shadow:0 0 2px rgba(0,0,0,0.5) }
.mod-graphic-carousel.style3 .slick-next { left:auto; right:20px }
.mod-graphic-carousel.style3 .slick-prev:before { content:"\e80f"; display:block; height:40px; font-size:1.5rem; line-height:40px }
.mod-graphic-carousel.style3 .slick-next:before { content:"\e810"; display:block; height:40px; font-size:1.5rem; line-height:40px }
.mod-graphic-carousel.style3 .slick-prev:focus,
.mod-graphic-carousel.style3 .slick-next:focus { outline:none; text-shadow:1px 1px 10px rgba(0,0,0,0.8) }

/* Grapgic Carousel Style4 */
.mod-graphic-carousel.style4 { text-align:center }
.mod-graphic-carousel.style4 .slick-track, 
.mod-graphic-carousel.style4 .slick-list { -moz-transform:none; -ms-transform:none; -o-transform:none; -webkit-transform:none; transform:none }
.mod-graphic-carousel.style4 .slick-slide { position:relative; min-height:300px; background:no-repeat fixed 50% 0 #000; background-size:auto 100% }
.mod-graphic-carousel.style4 .slick-slide .title { position:absolute; left:50%; top:50%; font-size:3em; color:#fff; text-transform:uppercase; transform:translate(-50%, -50%) }
.mod-graphic-carousel.style4 .slick-prev, 
.mod-graphic-carousel.style4 .slick-next { position:absolute; left:20px; top:50%; z-index:1000; margin-top:-20px; width:40px; height:40px; padding:0; border:none; font-family:'glyphicons'; cursor:pointer; text-align:center; text-shadow:0 0 5px rgba(0,0,0,0.8); overflow:hidden; color:#444; background:transparent }
.mod-graphic-carousel.style4 .slick-next { left:auto; right:20px }
.mod-graphic-carousel.style4 .slick-prev:before { content:"\e80f"; display:block; height:40px; font-size:3rem; line-height:40px }
.mod-graphic-carousel.style4 .slick-next:before { content:"\e810"; display:block; height:40px; font-size:3rem; line-height:40px }
.mod-graphic-carousel.style4 .slick-prev:focus,
.mod-graphic-carousel.style4 .slick-next:focus { outline:none; text-shadow:1px 1px 10px rgba(0,0,0,0.8) }

/* Grapgic Carousel Style5 */
.mod-graphic-carousel.style5 { position:relative; border:1px solid #ccc }
.mod-graphic-carousel.style5 .controls { display:block; padding:10px; text-align:center }
.mod-graphic-carousel.style5 .controls .control { display:inline-block; vertical-align:top; width:20px; height:20px; margin:0 5px; cursor:pointer; text-indent:-9999px; background:#ccc }
.mod-graphic-carousel.style5 .controls .control.active { background:#444 }
.mod-graphic-carousel.style5 .slick-slide { float:left; display:block }
.mod-graphic-carousel.style5 .slick-slide img { display:block }
.mod-graphic-carousel.style5 .slick-slide img.lazyloaded { width:100% }

/* Grapgic Carousel Style6 */
.mod-graphic-carousel.style6 .slick-slider { margin: 0 -0.5rem;}
.mod-graphic-carousel.style6 .slick-slide { padding:0 0.5rem; }

/* TABLET */
@media only screen and (min-width:768px) {
    
    /* Grapgic Carousel Style1 */    
    .mod-graphic-carousel.style1 .slider { padding:20px 70px }    
    
    /* Grapgic Carousel Style5 */
    .mod-graphic-carousel.style5 { position:relative; display:flex; flex-direction:row-reverse; min-height:100px; border:1px solid #ccc; overflow:hidden }
    .mod-graphic-carousel.style5 .slider { width:70% }
    .mod-graphic-carousel.style5 .controls { display:inline-flex; flex-direction:column; width:30%; padding:0; background:#000 }
    .mod-graphic-carousel.style5 .controls .control { position:relative; display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; width:auto; height:auto; margin:0; padding:10px 35px; border-bottom:1px solid #ccc; cursor:pointer; font-weight:700; text-align:right; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; background:#f5f5f5 } 
    .mod-graphic-carousel.style5 .controls .control:after { content:''; position:absolute; right:10px; top:50%; margin-top:-5px; margin-left:10px; border:5px solid transparent; border-left-color:#000 }
    .mod-graphic-carousel.style5 .controls .control.active { color:#fff; background:var(--main-bg-color-red) }      
    .mod-graphic-carousel.style5 .controls .control.active:after { border-left-color:#fff }
    
    .no-flex .mod-graphic-carousel.style5 .slider { float:right }
    .no-flex .mod-graphic-carousel.style5 .controls { float:left }
    .no-flex .mod-graphic-carousel.style5 .controls .control { display:block }

}

/* DESKTOP */
@media only screen and (min-width:992px) {

    /* Grapgic Carousel Style4 */
	.mod-graphic-carousel.style4 .slick-slide { min-height:400px; background-size:cover }

}