/*
  * Bootstrap v3.3.5 (http://getbootstrap.com)
  *
  * Bootstrap IMG  - reset TYPO3 Image (bootstrap-img.css)
  * Copyright 2015-2017 Atelier 26, Daniel Kleiner
  */

/* TYPO3 IMG
-------------------------------------------------- */
DIV.csc-textpic {
  display: block;
  overflow: hidden;
}
img {
  height: auto;
  width: 100%;
  max-width: 100%;
}

DIV.csc-textpic .csc-textpic-imagewrap FIGURE {
  max-width: 100%;
  overflow: hidden;
  display: block;
}

DIV.csc-textpic DIV.csc-textpic-single-image IMG {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image img {
  padding: 0px 0px 0px 0px;
  display: inline-block;
}
DIV.csc-textpic-center .csc-textpic-imagewrap,
DIV.csc-textpic-center FIGURE.csc-textpic-imagewrap {
  width: 100%;
  display: block;
}

DIV.csc-textpic-center .csc-textpic-center-outer {
  max-width: 100%; /* max. size of image */
}

DIV.csc-textpic-center .csc-textpic-center-inner {
  max-width:100%;
  width: 100%;
}

/* Image Alignment */

.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap{
  width: 50%;
  float: left;
  padding-right: 15px;
  margin: 0px;
}
.csc-textpic-intext-right-nowrap .csc-textpic-text{
  width: 50%;
  float: right;
  padding-left: 15px;
  margin: 0px;
}

.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap{
  width: 50%;
  float: right;
  padding-left: 15px;
  margin: 0px;
}
.csc-textpic-intext-left-nowrap .csc-textpic-text{
  width: 50%;
  float: left;
  padding-right: 15px;
  margin: 0px;
}
.csc-textpic-intext-right .csc-textpic-imagewrap {
  width: 50%;
  float: left;
  margin-right: 30px;
  margin-bottom: 15px;
}
.csc-textpic-intext-left .csc-textpic-imagewrap {
  width: 50%;
  float: right;
  margin-left: 30px;
  margin-bottom: 15px;
}

.csc-textpic-below .csc-textpic-text {margin-bottom: 20px;}
.csc-textpic-above .csc-textpic-text {margin-top: 20px;}
.csc-textpic-above {margin-top: 20px;}


/* NEW Fix of problem scaling and TYPO3 row's */
.csc-textpic-imagewrap {
  display: block;
  overflow: hidden;
}
.csc-textpic-imagecolumn {
  float: left;
  padding: 0px 10px 10px 0px;
}

[data-csc-cols="1"] .csc-textpic-imagecolumn {width: 100%;}
[data-csc-cols="2"] .csc-textpic-imagecolumn {width: 50%;}
[data-csc-cols="3"] .csc-textpic-imagecolumn {width: 33.333333%;}
[data-csc-cols="4"] .csc-textpic-imagecolumn {width: 25%;}
[data-csc-cols="5"] .csc-textpic-imagecolumn {width: 20%;}
[data-csc-cols="6"] .csc-textpic-imagecolumn {width: 16.666666%;}
[data-csc-cols="7"] .csc-textpic-imagecolumn {width: 14.285714%;}
[data-csc-cols="8"] .csc-textpic-imagecolumn {width: 12.5%;}

@media (max-width: 767px) {
[data-csc-cols="1"] .csc-textpic-imagecolumn {width: 100%;}
[data-csc-cols="2"] .csc-textpic-imagecolumn {width: 50%;}
[data-csc-cols="3"] .csc-textpic-imagecolumn {width: 33.333333%;}
[data-csc-cols="4"] .csc-textpic-imagecolumn {width: 50%;}
[data-csc-cols="5"] .csc-textpic-imagecolumn {width: 50%;}
[data-csc-cols="6"] .csc-textpic-imagecolumn {width: 33.333333%;}
[data-csc-cols="7"] .csc-textpic-imagecolumn {width: 25%;}
[data-csc-cols="8"].csc-textpic-imagecolumn {width: 25%;}
}

/* CAPTION */

.csc-textpic-caption {
  font-size: 12px;
  line-height: 1.4;
  padding-top: 5px;
}
.csc-textpic-border img {
  border: 1px solid #dddddd;
  border-radius: 0px;
}


/* MAGNIFIC POPUP CSS
-------------------------------------------------- */

.mfp-zoom-out-cur {
  cursor: auto;
}
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: pointer;
  font-weight: 100;
  font-size: 40px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  .mfp-img-mobile .mfp-close {
  top: 0;
  right: 0;
  padding: 0px 10px 8px 10px;
  width: auto;
  height: auto;
  }
}
.mfp-arrow::before, .mfp-arrow::after {
  content: none;
}
body .mfp-arrow-left, body .mfp-arrow-right {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px auto;
  opacity: 0.3;
}
body .mfp-arrow-left {
  background-image: url(../img/carousel-control-prev.svg); /* all browser */
  background-image: url(../img/carousel-control-prev.png)\9; /* IE 8 and below */
}
body .mfp-arrow-right {
 background-image: url(../img/carousel-control-next.svg); /* all browser */
 background-image: url(../img/carousel-control-next.png)\9; /* IE 8 and below */
}
.mfp-bottom-bar {
    margin-top: -30px;
}
.mfp-title{
  font-size: 90%;
}

/* FLEXSLIDER CSS (tx-ws-flexslider)
-------------------------------------------------- */

.flexslider {
    margin: 0 0 0px;
    background: #fff;
    border: 0px solid #fff;
    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,.2);
    -moz-box-shadow: 0 0px 0px rgba(0,0,0,.2);
    -o-box-shadow: 0 0px 0px rgba(0,0,0,.2);
    box-shadow: 0 0px 0px rgba(0,0,0,.2);
    zoom: 1;
}

/* Direction Nav */
.flex-direction-nav a {text-decoration:none; display: block; width: 40px; height: 60%; margin: 10% 0 0; position: absolute; top: 30px; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav a:before {content: none; }
.flex-direction-nav a.flex-next:before {content: none; }

.flex-direction-nav a {
  text-indent: 9999px;
  overflow: hidden;
  background-size: 16px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../img/carousel-control-prev.svg);
  background-image: url(../img/carousel-control-prev.png)\9;
}
.flex-direction-nav a.flex-next {
  background-image: url(../img/carousel-control-next.svg);
  background-image: url(../img/carousel-control-next.png)\9;
}

/* Control Nav */
.flex-control-nav {width: auto; position: absolute; bottom: 15px; right: 18px; text-align: right; z-index: 1000;}
.flex-control-nav li {margin: 0 0px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {
  height: 10px;
  width: 10px;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  display: block;
  overflow: hidden;
  margin: 0px 2px 0px 2px;
  background-color: transparent;
  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.3);
  -moz-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
  -o-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
  box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
}
.flex-control-paging li a.flex-active, .flex-control-paging li a:hover {
  background-color: #FFFFFF;
}
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

/* Correction from theme CSS */
body .flexslider ul, body .flexslider ul li, body .flexslider ol, body .flexslider ol li {
  padding: 0px;
}
body .flexslider ul li::before {
  content: none;
  margin-left: 0px;
}
body .flexslider .caption-title, body .flexslider .caption-body{
  text-align: left;
}
