.OutlineText
 {
    color: #eef;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
.OutlineTextW
 {
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
 }

.OutlineTextB
 {
    text-shadow: -1px 0 #229, 0 1px #229, 1px 0 #229, 0 -1px #229;
 }

.category
 {
  background:#dde;
   background: linear-gradient(yellow, #FFDD00);

  float:left;
  height:100%;
  width:3vw;
  font-size:2.0vw;
  line-height:3vw;
  text-align:center;
  margin-right:1vw;
  border-right:1px dashed #bbe;
  border:1px dashed #229;
  border:1px solid yellow;
  border-radius: 25%;
  -moz-box-shadow:
		0px 3px 15px rgba(20,20,65,0.8),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	-webkit-box-shadow:
		0px 3px 15px rgba(20,20,65,0.8),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	box-shadow:
		0px 0px 2px rgba(50,50,100,0.5),
		inset 0px 0px 5px rgba(255,255,255,1.90);
  
 }
 
.sektions-title
 {
  margin-bottom: 1.0vw;
  float:left;
  width:100%;
  border-bottom:2px solid #229;
  background: transparent;
  padding:0.0vw;
  padding-left:0;
  height:2.4vw;
  line-height:2.4vw;
  font-size:1.8vw;
  border-radius: .0vw;
 } 
.sektions-foot
 {
  margin-top: 1.0vw;
  float:right;
  text-align:right;
  width:100%;
  background: rgba(20,120,10, 0.0);
  padding:0.0vw;
  padding-right:4%;
  height:2.0vw;
  line-height:2.0vw;
  font-size:1.4vw;
  border-radius: .0vw;
 } 

 
.sektions-feld
 {
  margin-bottom: 1vw;
  float:left;
  width:100%;
  border:0px dashed #ccf;
  background: linear-gradient(yellow, #FFDD00);
  background:transparent;
  padding:2.0vw;
  line-height:1.6vw;
  font-size:1.6vw;
  text-align:center;
  border-radius: .0vw;
 } 
.sektions-text
 {
  height:100%;
  line-height:2vw;
  background:transparent;
  padding-left:0vw;
  padding-right:1vw;
  color:#229;
 }
 
.TheSlider
 {
  float:left; 
  width:100%;
  min-height:400px;
  height: auto;
  margin:auto;  

 } 

 
.TheSlider div.item
 {
  position:relative;
  width:100%;
  min-height:400px;
  height: auto;  
  background-size: 100% 100%;  
  background-position: center center;
  border:0px solid #001;
 }


.TheSlider div.item
 {
  background-size: cover;
  background-position: 100% auto;
  height:100%;
 }
 
  
 
.TheSlider
 {
  @include aspect-ratio(16, 9);
} 

.TheSlider {
  position: relative;
}
.TheSlider:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.TheSlider > .carousel-inner {
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.TheWerbungSlider
 {
  @include aspect-ratio(16, 9);       
 }
.TheWerbungSlider:before
 {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
 }
.TheWerbungSlider > .WerbungInlet
 {
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.WerbungInlet
{
}

.WerbungInlet div
 {
  position:relative;
  width:auto;
  min-height:100px;
  height: 100%; 
  background-size: 100% 100%;  
  background-position: center center;
  border-bottom:0px solid red;
 }

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 10px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:800px;
  background: #777;
  box-shadow: 0 15px 10px #55a;
  transform: rotate(-3deg);
  opacity: 0.51;
}
.effect2:after
{
  transform: rotate(3deg);
  right: 10px;
  left: auto;
} 

.box1
 {
  background:transparent; 
  border:0.25em solid #fff;
  border:0.001em solid #22a;
  margin:0;
  padding:0;
  -moz-box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
	-webkit-box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
	box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
 }
.box2
 {
  background:transparent; 
  position:Relative;
  border:1px dashed #ffdd00;
  border:0.001em solid #22a;
    margin:0;
  padding:0;
  -moz-box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
	-webkit-box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
	box-shadow:
		0px 1px 3px rgba(10,10,100,0.25),
		inset 0px 0px 410px rgba(255,255,255,0.0);    
 }
.box2::after
 {
  content: '';
  position:absolute;
  z-index:-1;
  top: 0; left: 0;
  width:100%;
  height:100%;
  background-repeat:no-repeat;
  background-image: linear-gradient(to right, #eef 0%,#ccf 100%), url(http://wfarm3.dataknet.com/static/resources/icons/set58/613f3c9d.png);  
  background-blend-mode: color-dodge;
  background-size: cover;    
  opacity: 0.15;
 } 
 
.box3
 {
  background:transparent; 
  margin:0;
  padding:0;   
  line-height:200px;
  font-size:5em;
  color:#e6e6ff;
  text-shadow: -1px 1px 2px #fff;
  }
.box4
 {
  background:transparent; 
  margin:0;
  padding:0;
  line-height:200px;
  font-size:5em;
  color:#ddf;
  text-shadow: -1px 1px 2px #fff;
  }
.box3:hover > DIV, .box4:hover > DIV
 {
  cursor:pointer;
 } 

.box5
 {
  position:relative;
  float:left;
  background:#eaefff;
  border:1px solid #fff;
  -moz-box-shadow:
		0px 1px 4px rgba(10,10,150,0.6),
		inset 0px 0px 25px rgba(245,245,255,0.980);
	-webkit-box-shadow:
		0px 1px 4px rgba(10,10,150,0.6),
		inset 0px 0px 25px rgba(245,245,255,0.980);
	box-shadow:
		0px 1px 4px rgba(10,10,150,0.6),
		inset 0px 0px 75px rgba(255,255,255,0.980);
 }
.box5::after
 {
  content: '';
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
  top:0; 
  left:0;
  background:#eef;
  opacity:0.7;
 }
 
/*==================================================
 * Effect 4
 * ===============================================*/
.BoxEffect4
{
  position: relative;
}
.BoxEffect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 10%;
  right: 2%;
  width: 96%;
  height:5%;
  max-width:300px;
  background: transparent;
  box-shadow: 0 5px 10px #224;
  transform: rotate(3deg);
  opacity:0.65;
}  
.BoxEffect1
{
  position: relative;
}
.BoxEffect1:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 10px;
  right: 5px;
  width: 90%;
  max-width:90%;
  height:10px;
  background: transparent;
  box-shadow: 0 5px 10px #224;
  transform: rotate(3deg);
}  

.BoxEffect2
{
  position: relative;
}
.BoxEffect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 12px;
  right: 5px;
  width: 55%;
  max-width:90%;
  height:10px;
  background: gold;
  box-shadow: 0 5px 10px #224;
  transform: rotate(2deg);
}  

.BoxEffect3
{
  position: relative;
}
.BoxEffect3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 8%;
  right: 5px;
  width: 75%;
  max-width:90%;
  height:10px;
  background: transparent;
  box-shadow: 0 5px 10px #224;
  transform: rotate(2deg);
  opacity:0.5;
}  














.TerminOverlay
 {
  float:left;
  position: relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;

  -moz-box-shadow:
		0px 0px 5px rgba(20,20,100,0.0),
		inset 0px 0px 40px rgba(255,250,250,0.90);
	-webkit-box-shadow:
		0px 0px 5px rgba(20,20,100,0.0),
		inset 0px 0px 40px rgba(255,250,250,0.90);
	box-shadow:
		0px 0px 5px rgba(20,20,100,0.0),
		inset 0px 0px 40px rgba(255,250,250,0.90);
 } 
.TerminOverlay::after
 {
  content: "";
  background: url(http://gruene-nord.de/userspace/HH/galnord/Bilder/Fraktion/presse/fotos/BU-Vereinslogo_FassadeNeubau.jpg);
  background-position: right bottom; 
  background-size: 300% 100%;
  opacity: 1.525;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
} 
 
.FooterFeld
 {
  border:1px solid yellow;
  -moz-box-shadow:
		0px 3px 15px rgba(20,20,65,0.8),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	-webkit-box-shadow:
		0px 3px 15px rgba(20,20,65,0.8),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	box-shadow:
		0px 0px 5px rgba(10,10,80,0.5),
		inset 0px 0px 40px rgba(255,255,255,0.0);
 } 

.Caption0
 {
  float:left;
  position:Relative;
  width:120px;
  height:100%;
  border:1px solid #113;
  padding:0.3vw;
  background-size: cover;
 } 
.Caption0::after
 {
  content: '';
  z-index:-1;
  position:Absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background:#224;
  opacity: 0.65;
 } 
 

.Caption
 {
  position:absolute;
  z-index:1;
  top:50%;
  width:90%;
  height:8vw;
  line-height:2vw;
  font-weight:300;
  font-size:2vw;
  text-shadow: -1px 1px 2px #112;
  margin-left:5%;
  padding:1vw;
 } 
.Caption::after
 {
  content: '';
  z-index:-1;
  position:Absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background:#224;
  opacity: 0.25;
 } 
 
.Caption2
 {
  position:absolute;
  z-index:2;
  bottom:60%;
  width:90%;
  height:3.7vw;
  line-height:4vw;
  color:#fff;
  font-size:4vw;
  text-shadow: 1px 1px 5px #112;
  margin-left:5%;
 } 
.Caption2::after
 {
  position:absolute;
  content: '';
  left:0;
  top:3.8vw;
  z-index:-1;
  width:90%;
  line-height:4vw;
  border-top:0.4vw solid gold;
  margin-left:5%;
 } 

.Caption3
 {
  position:relative;
  z-index:1;
  margin-top:-50%;
  width:100%;
  height:3.7vw;
  line-height:4vw;
  color:#fff;
  font-size:4vw;
  text-shadow: 1px 1px 5px #112;
  text-align:center;
  margin-left:0%;
 } 
.Caption3::after
 {
  position:absolute;
  content: '';
  left:0;
  top:3.8vw;
  z-index:-1;
  width:90%;
  line-height:4vw;
  border-top:0.4vw solid gold;
  margin-left:5%;
 } 

/*************************
********portfolio CSS*****
**************************/

#portfolio .container-fluid, 
#portfolio .container-fluid .col-sm-3  {
  overflow: hidden;
  padding: 0;
}

#portfolio .folio-item {
  position: relative;
}

#portfolio .overlay
 {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2e1ff+0,66b6fc+100;Blue+3D+%236 */
background: #b2e1ff; /* Old browsers */
background: -moz-linear-gradient(top,  #b2e1ff 0%, #66b6fc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #b2e1ff 0%,#66b6fc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  transparent 20%,#116 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */

  color: #fff; 
  left: 0;
  right:0;
  bottom:-100%;
  height: 0;
  position: absolute;
  text-align: center;
  opacity:0;  
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index:2;
  
}

.overlay .overlay-content {
  display: table;
  height: 100%;
  width: 100%;
  cursor:pointer;
}

.overlay .overlay-text {
  display: table-cell;
  vertical-align: bottom;
}

.overlay .folio-info {
  opacity: 0;
  margin-bottom: 75px;
  margin-top: -75px;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.overlay .folio-info h3
 {
  margin-top: 0;
  color: #fff;
  font-size:2.5vw;
  text-shadow: 1px 1px 2px #112;
}
.overlay .folio-info p
 {
  margin-top: 0;
  color: #eef;
  font-size:2.0vw;
  text-shadow: 1px 1px 2px #112;
}

.folio-overview a
 {
  font-size: 2.5vw;
  color: #229;
  height: 4vw;
  width: 4vw;
  line-height: 4vw;
  border-radius: 50%;
  background: linear-gradient(yellow, #FFDD00);
  display: inline-block;
  margin-top: 7vw;
  margin-right: 5px;
}

.folio-overview a:hover {
  background: linear-gradient(#229, #33b);
  color: gold;
}

.folio-overview .folio-expand {
  margin-top: -500px;
  margin-left: -500px;
}

.folio-image, .folio-overview .folio-expand {
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
}

#portfolio .folio-item:hover .folio-image {
  -webkit-transform: scale(1.5) rotate(-15deg);
  transform: scale(1.5) rotate(-15deg);
}

.folio-image img {
  width: 100%;
}

#portfolio .folio-item:hover .overlay {
  opacity: 0.8;
  bottom: 0;
  height: 100%;
}

#portfolio .folio-item:hover .folio-overview .folio-expand {
  margin-top: 0;
  margin-left:0;
}

#portfolio .folio-item:hover .overlay .folio-info {
  opacity: 1;  
  margin-bottom:0;
  margin-top:0;
}


#single-portfolio {
  padding: 90px 0;
  background: #f5f5f5;
  position: relative;
}

#single-portfolio img {
  width: 100%;
  margin-bottom: 10px;
}

#single-portfolio .close-folio-item {
  position: absolute;
  top: 30px;
  font-size: 34px;
  width: 34px;
  height: 34px;
  left: 50%;
  color: #999;
  margin-left: -17px;
}


.LogoGround3
 {
  float:left;
  
  border:0.2em solid #fff;
  background:gold;

  -moz-border-radius: 5em; 
  -webkit-border-radius:5em; 
  border-radius:5em;
  -moz-box-shadow:
		0px 0px 2px rgba(20,20,60,0.0),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	-webkit-box-shadow:
		0px 0px 2px rgba(20,20,60,0.0),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	box-shadow:
		0px 0px 2px rgba(20,20,60,0.0),
		inset 0px 0px 10px rgba(10,10,10,0.0);
  opacity: 0.6;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);  
  
  transition: all .5s;
  webkit-transition: all .5s;
  
 } 
 
 
 
 .LogoGround3:hover
 {
  z-index:2;
  cursor:pointer;
  -moz-box-shadow:
		0px 0px 5px rgba(20,20,60,0.95),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	-webkit-box-shadow:
		0px 0px 5px rgba(20,20,60,0.95),
		inset 0px 0px 410px rgba(255,255,255,0.0);
	box-shadow:
		0px 0px 5px rgba(20,20,60,0.95),
		inset 0px 0px 10px rgba(25,255,25,0.0);
  opacity: 1.0;
  transform: scale(1.3) ;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);  
  
 } 



                
                
                
                
                
                
                
                
                
                
                
                

#myCarousel .item .item-overlay
 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfe7fa+0,6393c1+100;Grey+Blue+3D */
background: #cfe7fa; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #cfe7fa 0%, #6393c1 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #cfe7fa 0%,#6393c1 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  transparent 70%,#225 120%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#6393c1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
 
.item-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0f0;
    opacity: 0.3;
    transition: all 0.2s ease-out;
} 
 
div.myCarouselcaption
{
 position:absolute;
 z-index:99;
 left:5%;
 top:50%;
 width:90%;
 border:0px dashed #f33;
 padding:0%;
 font-variant:normal;
} 

div.myCarouselcaption p
 {
  border-bottom:0px solid #ffdd00;
  color:#eef;
  background:transparent;
  text-shadow: 1px 2px 4px #112;
  font-size:1.8vw;
  font-weight:400;
  height: calc ( 2.4vw + 2px );
  line-height:2.4vw;
  padding:0;
  margin:0;
  margin-bottom:0px;
 }
.OutlineTextX
 {
  text-shadow: -1px 0 #001, 0 1px #001, 1px 0 #001, 0 -1px #001, 0px 0px 2px #22c;  
 }
  
div.myCarouselcaption h2
 {
  padding:1.0vw;
  margin:0;
  margin-left: 0vw;
  width:100%;
 }
div.myCarouselcaption h2::after
 {
  content: '';
  position:absolute;
  z-index: -1;
  top: 0; left: 0;
  width:100%;
  height:100%;
  opacity: 0.45;
  background: linear-gradient(to bottom, transparent -20%, #1C2956 140%);
  border:1px solid #ddf;
  border-bottom:1px solid #112;
  border-right:1px solid #224;
  -moz-box-shadow:
		0px 3px 15px rgba(20,20,65,0.0),
		inset 0px 0px 410px rgba(255,255,255,0.980);
	-webkit-box-shadow:
		0px 3px 15px rgba(20,20,65,0.0),
		inset 0px 0px 410px rgba(255,255,255,0.980);
	box-shadow:
		0px 0px 5px rgba(25,25,100,0.85),
		inset 0px 0px 200px rgba(255,255,250,0.25);
  border-radius: 0.0em;  
 }

div.myCarouselcaption h3
 {
  padding:1.0vw;
  margin:0;
  margin-left: 0vw;
  width:100%;
 }
div.myCarouselcaption h3::after
 {
  content: '';
  position:absolute;
  z-index: -1;
  top: 0; left: 0;
  width:100%;
  height:100%;
  opacity: 0.45;
 }


/* original solution by https://codepen.io/Rowno/pen/Afykb */

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control
 {
    z-index: 2;
 }


 
 




 
.BildContainer
 {
  overflow:hidden;
 }
.BildContainer img
 {
  width:100%;                
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
 }
 
.HighLight1
 {
  background:transparent;
  border:1px dashed transparent;
  padding-top:1em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
 }
.HighLight1:hover
 {
  cursor:pointer;
  border:1px dashed #22a;
  padding-top:1em;
  border-radius:0.0em;
  -moz-box-shadow:
		0px 0px 2px rgba(255,255,255,0.80),
		inset 0px 0px 200px rgba(255,255,250,0.8);
	-webkit-box-shadow:
		0px 0px 2px rgba(255,255,255,0.80),
		inset 0px 0px 2px rgba(20,20,120,0.4),inset 0px 0px 200px rgba(245,245,255,0.8);
	box-shadow:
		0px 0px 2px rgba(255,255,255,0.0), 
		inset 0px 0px 2px rgba(20,20,120,0.0);
 }
.HighLight1:hover .BildContainer img
 {
  -webkit-transform: scale(1.5) rotate(-5deg);
  transform: scale(1.5) rotate(-5deg);
 }