/*
Theme Name: My Theme
Theme URI: 
Author: Fabian
Author URI: 
Description: This is a test to integrate Leaflet
Version: 1.0.0
*/


/*----------------------
@import findet normalerweise bei functions.php statt
-------------------------*/
/*@import url('css/bootstrap.min.css');*/



/* GLOBAL STYLES (sachen die allgemein so genommen werden.. kommt immer drauf an, wo ich welche id's nutze)
-------------------------------------------------- */

body {
    /* Padding below the footer and lighter body text -> habe ich jetzt �ber footer-padding gel�st */
    /*    padding-bottom: 40px;*/
    color: #5a5a5a;
    /*height: 100%;*/
    /*background: #f2f2e8;*/
    /*padding top if navbar fixed to top (to not hide content of body)*/
    /*padding-top: 70px;*/
}

img {
    max-width: 100%;
    height: auto;
}


/*specific style for wordpress navbar labels - make available under admin screen options */
/*.nav-bar-font-small {
    font-size: 1.2em;
    font-family: "Open Sans"; 
}*/

/*test masonry bootstrap isotope row coloumn*/
/*.row.test {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 -moz-column-gap: 4px;
 -webkit-column-gap:4px; 
}
.row.test > .col-lg-3 {
 display: inline-block;
 padding: 0;
 margin: 0;
 width:  100%; 
 float:none;
}*/
/*test end*/

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
/*.grid-item { width: 200px; }*/
.grid-item { 
    width: 46%;
    margin-bottom: 20px;
}
.gutter-sizer { width: 4%; }
/*.grid-item--width2 { width: 40%; }*/

@media only screen and (max-width: 900px) {
    .grid-item { width: 100%; }
}


/*masonry css test*/
/*.masonry {  Masonry container 
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
            -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
}
.masonry-item {  Masonry bricks or child elements 
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}*/








#back-to-top {
    position: fixed;
    bottom: 60px;
    right: 40px;
    z-index: 9999;
/*    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;*/
    /*background: #f5f5f5;*/
/*    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;*/
    transition: opacity 0.2s ease-out;
    /*transition: opacity 0.2s ease-out, font-size 0.1s;*/
    opacity: 0;
}
#back-to-top:hover {
    /*background: #e9ebec;*/
    font-size: 18px;
    margin-right: -5px;
    /*animation-duration: 1s;*/
}
#back-to-top.show {
    opacity: 1;
}



/*tooltip version 1*/
a[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  /*display: inline;*/
  text-decoration: none;
}
/*arrow*/
/*a[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 20px solid #66ff33;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  visibility: hidden;
  top: -18px;
  left: -26px;
}*/
a[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -55px;
  left: -26px;
  background: #1C1C1C;
  /*padding: 5px 15px;*/
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap;
  visibility: hidden;
  
  width:140px;
  /*height: 40px;*/
  line-height: 40px;
  text-align: center;
}
a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 0.8;
}
/*end of tooltip version 1*/


/*tooltips for filter icons. Good because specific to toolips class, see notes for integration*/
/*a.tooltips {
  position: relative;
  display: inline;
}
a.tooltips span {
  position: absolute;
  width:140px;
  color: #FFFFFF;
  background: #1C1C1C;
  height: 40px;
  line-height: 40px;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
}*/
/*arrow*/
/*a.tooltips span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-top: 8px solid #66ff33;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  bottom: 30px;
  left: 50%;
  margin-left: -76px;
  z-index: 999;
}*/
/*tooltip end*/

/*tooltips for filter icons but too error prone due to non specific handling of a and span*/
/*a span{	
	display:none;
	color:#fff;
	background:rgba(51,51,51,0.75);
	padding:20px;
        margin-top: -40px;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	width:auto;
	text-align:center;
	position: absolute;
	z-index:10;
}
a { display: inline-block;}
a:hover span{ display:block; }*/

/*Masonry Setup*/
#ms-container {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#ms-container2 {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#ms-container3 {
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
.ms-item {
    margin-bottom: 15px;
    /*width: 33%;*/
}
.tileThumb {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
    /*padding shorthand -> top right bottom left*/
    padding: 10px 10px 10px 10px;
    background-color: white;
    color: black;
    /*min-height: 450px;*/
}
.tileThumb-narrow {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
    /*padding shorthand -> top right bottom left*/
    padding: 10px 20px 10px 20px;
    background-color: white;
    width: 830px;
    margin: auto;
}
.tileThumb-narrow-font {
    font-size: 1.2em;
    font-family: "Open Sans";
}
.tilesFont {
    /*font-style: italic;*/
    font-size: 1.2em;
    font-family: "Open Sans";
}
.tilesFontDescription {
    /*font-style: italic;*/
    font-size: 0.8em;
    font-family: "Open Sans";
}
.tileVideo {
    margin-bottom: 5px;
}
.tileVideoInner {
    /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
}
#Horizontal.dropdown-menu{
width: 400px;
text-align: center;
padding: 20px;
/*background-color: #ffb3b3;*/
}
/*.horizontal-item {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
}*/

/*.textHeaderBackground {
    background-color: white;
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
}*/
.textHeader {
    font-family: "Open Sans";
    text-align: justify;
    padding-left: 150px;
    padding-right: 150px;
    /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
    /*background-color: white;*/
}

/*apparently required by wordpress for image alignment from posts
http://www.dailyblogtips.com/now-i-see-why-the-wordpress-image-align-feature-was-not-working/*/
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }
    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }
    .alignright {
    float: right;
    }
    .alignleft {
    float: left;
    }
/*end of image alignment stylesheet*/

/* Mobile First styles
--------------------------------------------------
This has responsive design. Ab hier mobile view (mobile fist)
Weiter unten ab bestimmten Gr��en f�r Computer
------------wichtig hier------------------------------
wenn sich gleiche divs/klassen/ids unten bei responsive wiederholen...
muss ich darauf achten, dass ich bestimmte parameter auch wieder aufnehme..
nicht einfach nur davon ausgehen, dass null ist.. ich muss sozusagen
bei mobile view definiertes wieder bei normal view 'wegdefinieren'
siehe bsp .carousel und margin-botton
------------------------------------------------------
mobile design/structure summary als Denkst�tze wie das hier aufgebaut ist.
---mobile view hat nav als erstes oben!
*/

/*Mindestbreite der Seite.. verhindert das seite zu klein wird*/
@media (max-width: 320px) {
    body, .container{
        width:320px;
    }
}
#information.sidebar-pane.active {
    padding-right: 50px;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}
.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
}
.navbar-wrapper .navbar .container {
    width: auto;
}
.navbar-logo {
    position: absolute;
    left: 0px;
    /*bottom: -60px;*/
    height: 40px;
}
.navbar-brand {
    display: none;
}
.corner-ribbon-topleft {
    width: 250px;
    background: #e43;
    position: fixed;
    top: 42px;
    left: -57px;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    line-height: 50px;
    letter-spacing: 1px;
    color: #f0f0f0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    z-index: 999999;
}
.corner-ribbon-topleft:hover {
    color: white;
    font-size: 105%;
}
.corner-ribbon-topleft:visited {
    color: white;
}

/* IMAGE HEADER SINGLE PAGES (->kann raus eigentlich?!?!?!?!)
-------------------------------------------------- */
.imageheader {
    margin-top: 70px;
    margin-bottom: 40px;
    height: 100px;
    width: 100%;
}
.imageheader > .item > img {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*min-width: 100%;*/
    /*position: relative;*/
    width: 100%;
    height: 100px;
    /*    margin: 0px auto;*/
}
.image-caption {
    z-index: 20;
    position: absolute;
    /*background: appworkspace;*/
    background-color:rgba(223,223,223,0.7);
    border-radius: 4px;
    /*border-width: 5px;*/
    /*border-color:rgba(223,223,223,0.5);*/
    max-width: 700px;
    /*margin: 0px auto;*/

}
.imagetitle { 
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
}

/* CUSTOMIZE THE CAROUSEL HOME PAGE (now on every page!  single page above can be deleted)
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    height: 500px;
    /*vor allem wenn ich die leiste oben frei haben will mit margin machen*/
    /*margin-top: 51px;*/
    margin-bottom: 60px;
    /*    position: fixed;
            top: 0;*/
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
    /*background: appworkspace;*/
    background-color:rgba(223,223,223,0.7);
    /*background-color:rgba(111,111,111,0.7);*/
    border-radius: 4px;
    /*border-width: 5px;*/
    /*border-color:rgba(223,223,223,0.5);*/
    max-width: 700px;
    margin: 0px auto;
}
/*.container-captionBackground {
    background: appworkspace;
    opacity: 0.5;
       border-style: solid;
    z-index: 5;
}*/
.carousel-paragraph { 
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
}

/* Declare heights because of positioning of img element */
/*carousel+item ist der ganze header teil (carousel), mit text und bild*/
.carousel .item {
    height: 500px;
    background-color: #777;
}
/*das bild*/
.carousel-inner > .item > img {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*min-width: 100%;*/
    min-width: 1500px;
    height: 500px;
    /*height: 100%;*/
    /*    margin: 0px auto;*/
}
video{
    /*width:100%*/
    height: 100%;
}


/* MARKETING CONTENT (eigentlich main/page content)
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 20px;
    text-align: center;
}
.marketing h2 {
    font-weight: normal;
}
.marketing .col-lg-4 p {
    margin-right: 10px;
    margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
    margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
}






/* WebGIS
-------------------------------------------------- */

/*html, body, #container {
  height: 100%;
  overflow: hidden;
  width: 100%;
}*/


/*m�sste hier nicht eigentlich .weggis oder so hin*/

/*fullscreen auch hinter navbar*/
/*#map { 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0;
    
}*/
#map { 
    position:absolute; 
    /*wenn passend unter navbar sollte ich top:70px; nehmen
    das sollte letztlich auch so gemacht werden!!! ------*/
    top:0px; 
    bottom:0px; 
    width:100%;
    /*z-index: 10;*/
}

#map-fullscreen { 

    position:absolute; 
    /*wenn passend unter navbar sollte ich top:70px; nehmen
    das sollte letztlich auch so gemacht werden!!! ------*/
    top:0px; 
    bottom:0; 
    width:100%;
    /*z-index: 10;*/
}
#map-single { 

    /*position:static;*/ 
    /*position:relative;*/ 
    /*position:fixed;*/ 
    /*position:absolute;*/ 
    /*wenn passend unter navbar sollte ich top:70px; nehmen
    das sollte letztlich auch so gemacht werden!!! ------*/
    /*top:0px;*/ 
    /*margin-top: 100px;*/
    /*bottom:0px;*/ 
    /*right: 0;*/
    /*left: 0;*/
    /*width:100%;*/
    /*width:auto;*/
    /*width:200px;*/
    /*height: 100%;*/
    /*min-height: 100%;*/
    /*height: 800px;*/
    z-index: 1000000;
    /*    margin-top: -50px;
        margin-bottom: -50px;*/
    height: calc(100% - 50px);
}
.single-highlight-content {
    margin-top: 100px;
    /*height: 100%;*/
}
/*.container-fluid, .row, .col-md-8, #map-single {
    height: 100%;
}*/
.playbackControls {
    margin-top: 5px;
    font-family:courier; 
    font-style: italic;
}
#rateSlider {
    width: 200px;
}

#mapLivestream { 
    position:absolute; 
    /*wenn passend unter navbar sollte ich top:70px; nehmen
    das sollte letztlich auch so gemacht werden!!! ------*/
    top:0px; 
    bottom:0px; 
    width:100%;
    /*z-index: 10;*/
}
.livestream-wrapper {
    z-index: 5000000;
    top: 50px;
    left: 20px;
    padding-bottom: 20px;

    /*    width:80%;
        height:100%;
        margin:0;*/

    background-color: rgba(255, 255, 255, 0.9);
    /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
    -webkit-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 11px 4px rgba(0,0,0,0.75);
}
.livestream-container {
    position: relative; 
    padding-bottom: 56.25%; /* ratio 16x9 */
    height: 0; 
    overflow: hidden; 
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.livestream-container iframe {

    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
/* ratio 4x3 */
.livestream-container.ratio4x3 {
    padding-bottom: 75%;
}
.livestream-fontStylo {
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    /*font-size: 20px;*/
}
.start-marker {
    background-color: blue;
    color: white;
    text-align: center;
    opacity: 0.5;
    padding-top: 5px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
.end-marker {
    background-color: blue;
    color: white;
    text-align: center;
    opacity: 0.5;
    padding-top: 5px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
#detailButton {
/*    position: fixed;
    z-index: 9999;
    top: 100px;
    right: 50px;*/
}
#overviewButton {
/*    position: fixed;
    z-index: 9999;
    top: 100px;
    right: 120px;*/
}
/*.iss-marker {
  -webkit-transition: transform 2s linear;
  -moz-transition: transform 2s linear;
  -o-transition: transform 2s linear;
  -ms-transition: transform 2s linear;
  transition: transform 2s linear;
}*/

/*das musste ich machen da ich irgendwo .siderbar margin top 80 habe
wahrscheinlich gemacht da karten vorher unter der navbar also 70 + normalabstand von 10*/
/*#sidebar {
    margin-top: 0px;
}*/


/*@media (min-width: 1400px) {
    .sidebar {
        width: 800px; } }*/


#dropdownFromDynamicJson {
    /*z-index: 5000;*/
}

.imagePostStyle {
    /*position: relative;*/
    /*    min-height: 10em;
        display: table-cell;
        vertical-align: middle;*/
    /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
}
.imagePostStyle img {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
    width: 400px;
    height: 400px;
    /*margin-top: 50px;*/
}
.imagePostStyle iframe {
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
    width: 100%;
    height: 400px;
}
/*.anchor {
    margin-top: 70px;
}*/

/*das hier versuch mit flexbox
http://jsfiddle.net/danield770/rqa3d6L6/1/
*/
/*.imagePostStyle {
    position: relative;
    width: 100%;
    border: 1px solid black;
    overflow: hidden;
}
.dummy {
    padding-top: 100%;  forces 1:1 aspect ratio 
}
.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;  align horizontal 
    align-items: center;  align vertical 
}*/




/* Off Canvas Highlights Archiv
-------------------------------------------------- */
/*body {
    background: #fff;
    padding: 5px 1.2%;
}*/
/*evtk eigne divs für canvas map und canvas filter menu machen (wie is das beim scroll?)*/
/*dafür war glaub ich auch div body oben wichtig*/
.canvas {
    position:absolute; 
    /*wenn passend unter navbar sollte ich top:70px; und evtl z-index wieder weg nehmen
    das sollte letztlich auch so gemacht werden!!! ------*/
    top:70px; 
    bottom:0; 
    right: 0;
    left: 0;
    z-index: 10;
    /*height: 100%;*/
    /*    width:100%;*/
}
/*.off-canvas-element {
    background:aqua;
}*/
.offcanvas-viewport {
    background: #efefef;
    /*border: 1px solid #999;
    /*margin: 5px;*/
    /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
}
.offcanvas-main {
    background: #efefef;
    text-align: center;
    /*height: 200px;*/
}
.offcanvas-viewport .page {
    width: 100%;
}
.offcanvas-left, .offcanvas-right, .offcanvas-top, .offcanvas-bottom {
    background: #444;
    color: #eee;
    text-align: center;
}
.offcanvas-main-overlay {
    background: rgba(0, 0, 0, .5);
}
pre {
    white-space: pre-wrap;
}
.example-toggle-1 {
    position:absolute; 
    top:10px; 
    /*right:100px;*/
    left:20px;
    z-index: 40000;
}
.example-toggle-2 {
    /*    position:absolute; 
        top:10px; */
    /*right:100px;*/
    /*left:20px;*/
    z-index: 40000;
}
.example-toggle-3 {
    /*position:absolute;*/
    margin: auto;
    /*top:10px;*/ 
    /*right:100px;*/
    /*left:20px;*/
    z-index: 40000;
}
.offCanvas-toggle-map {
    position:absolute; 
    /*top:100px;*/ 
    /*right:100px;*/
    right:0;
    top:50%; 
    height: 20em;
    margin-top:-10em;
    z-index: 40000;
}

/*jquery fade effect*/
.main-canvas-element {
    -webkit-transition: opacity 400ms linear;
    transition: opacity 400ms linear; 
}
.main-canvas-element.faded {
    opacity:.4;
    /*    -webkit-transition: opacity 400ms linear;
        transition: opacity 400ms linear; */
}



/* RESPONSIVE CSS ab 768px Breite -> normal desktop view
-------------------------------------------------- */
@media (min-width: 768px) {
 
    
    
    
    /*------filter: der div in dem die tag buttons sind*/
    .post-tags {
        margin-top: 70px;
        margin-left: 20px;
        margin-right: 20px;
        color: black;
        font-family: 'Open Sans', sans-serif;
    }

    /*-----filter: die tag buttons*/
    .tax-filter {
        /*font-family: 'Open Sans', sans-serif;*/
        /*font-size: 150%;*/
        /*margin-right: 20px;*/
        /*padding-left: 20px;*/
        /*padding-right: 20px;*/
        /*padding-top: 10px;*/
        /*padding-bottom: 10px;*/
        /*background: #fff;*/
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
    }
    /*-------filter result thumbs area*/
    /*nimmt aber auch hier die paddings von unten an, evtl macht das auch sinn*/
    /*    .tagged-posts {
            padding-left: 50px;
            padding-right: 50px;
        }*/

    /*neuer versuch thumbs als tiles*/
/*    #containerTiles {
        width: 100%;
        max-width: 700px;
        margin: 2em auto;
    }
    .colsTiles {
        -moz-column-count:3;
        -moz-column-gap: 3%;
        -moz-column-width: 30%;
        -webkit-column-count:3;
        -webkit-column-gap: 3%;
        -webkit-column-width: 30%;
        column-count: 3;
        column-gap: 3%;
        column-width: 30%;
    }
    .boxTile {
        margin-bottom: 20px;
        height:100px;
        background:#BFBFBF;
    }*/

    .tagged-posts {
        color: black;
        padding-left: 50px;
        padding-right: 50px;
        /*background-color: black;*/
    }

    .showAll {
        /*komischerweise muss ich hier die schrift black machen kann aber eigentlich so nicht sein*/
        color: black;
        padding-left: 50px;
        padding-right: 50px;
    }
    /*------filter result thumbs*/
    /*   .tagged-posts.row > .colPadding {
            background-color: black;
        }*/
    .colBackground {
        background-color: white;
        box-shadow: 0 2px 3px rgba(0,0,0,.4);
        margin-top: 30px;
        /*margin: 10px;*/
        /*width: 360px;*/
        /*margin-top: -20px;*/
    }
    .colPadding {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 40px;
        /*        background-color: black;*/
    }
    /*    a.link-to-post {
            background-color: black;
        }*/

    /*-------selected post div in map sidebar*/
    .selected-post {
        padding-left: 50px;
        padding-right: 50px;
        color: black;
        /*background-color: black;*/

    }
    p {
        font-family: 'Open Sans', sans-serif;
    }
    /*    p .tagged-posts {
            color: black;
        }*/
    /*        h2 {
                color: black;
            }*/


    /*padding top hier damit carousel oben frei ist und �bergescrollt werden kann*/
    body {
        padding-top: 500px;
        /*background: #f2f2f2;*/
        /*background-color: #f2f2f2;*/
    }

    /*f�r die single pages, wo carousel nicht da sein soll*/
    body.body-single-page {
        padding-top: 0px;
    }
    section.single-page {
        padding-top: 0px;
    }

    /* carousel (header) -------------------------------------------------- */
    /*    hier wieder verrafft!!!! nachdem ich #myCarousel vorgesetzt habe gings wieder..
        verstehen: ids und classes bei css!*/
    #myCarousel.carousel {
        height: 500px;
        /*padding-top: 50px;*/
        position: fixed;
        top: 0;
        width: 100%;
        /*z-index: 10;*/
        margin-bottom: 0px;
        /*vor allem wenn ich die leiste oben frei haben will mit margin machen*/
        /*margin-top: 51px;*/
    }

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }
    .carousel .item {
        height: 500px;
        background-color: #777;
    }
    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-width: 1500px;
        min-height: 500px;
        margin: 0px auto;
        /*height: 500px;*/
    }

    /* navbar -------------------------------------------------- */

    /* Navbar positioning foo */
    .navbar-wrapper {
        /*margin-top: 500px;*/
        height: 70px;
        position: relative;
        z-index: 180;     
        /*hier -> margin-bottom: -70px; im zusammenspiel mit .marketing-background div {padding-top:150px; damit scroll smooth ist*/  
        margin-bottom: -70px;
        background: #fff;
        box-shadow: 0 2px 3px rgba(0,0,0,.4);
    }

    /*    sticky after scrolling needs jquery/js code
        - see nav-scroller.js  in js folder
        - additional needs to registered/enqued correctly in function.php
        - search for:  sticky navbar jquery wordpress scroll 
        - alternativ direkt in code reinhauen, aber wo? */
    .navbar-wrapper-scrolled {
        position: fixed;
        margin-top: 0px;
        /*margin-bottom: 500px;*/
        /*top: 0;*/
        width: 100%;
        /*z-index: 300;*/
    }

    .navbar-wrapper .container {
        padding-right: 15px;
        padding-left: 15px;
    }
    .navbar-wrapper .navbar {
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-logo {
        position: absolute;
        left: -110px;
        bottom: -60px;
        height: 150px;
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        /*filter:         drop-shadow(5px 5px 5px #222);*/
        filter:         drop-shadow(0px 2px 3px rgba(0,0,0,.4));
    }
    .navbar-logo-small {
        position: absolute;
        left: 400px;
        bottom: -60px;
        height: 112px;
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        /*filter:         drop-shadow(5px 5px 5px #222);*/
        filter:         drop-shadow(0px 2px 3px rgba(0,0,0,.4));
    }
    .map-logo {
        position: absolute;
        right: 30px;
        bottom: 60px;
        /*top: 70px;*/
        height: 112px;
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        /*filter:         drop-shadow(5px 5px 5px #222);*/
        filter:         drop-shadow(0px 2px 3px rgba(0,0,0,.4));
        z-index: 100000;
    }
    .sidebar-logo-coleye {
        position: absolute;
        right: 30px;
        bottom: 30px;
        height: 112px;
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        /*filter:         drop-shadow(5px 5px 5px #222);*/
        filter:         drop-shadow(0px 2px 3px rgba(0,0,0,.4));
        z-index: 100000;
    }




    /*this is to change the default bootstrap navbar (vertical center, colors etc)*/
    /*see http://stackoverflow.com/questions/24127521/change-bootstrap-navbar-background-color-and-font-color*/
    /*see http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/#/*/
    /*das ging so lange nicht bis ich #custom-bootstrap-menu vor .navbar-default gesetzt habe*/    
    #custom-bootstrap-menu.navbar-default {
        background-color: #fff;
        border-color: #fff;
        top: 10px;
    }



    .videoPositionBlog {
        margin-top: 20px;
    }


    /* main content (hier noch als marketing) -------------------------------------------------- */

    /*font awesome customization*/
    /*hier dem hintergrund kreis farbe geben (vor allem wenn icon fa-inverse mit wei� oben drauf)*/
    .fa-circle.color {
        color: #009933;
    }
    /*wenn so direkt angew�hlt sind generell all fa-circle in der farbe*/
    .fa-circle {
        color: #737373;
    }
    /*standard style kann farbe vergeben und die position justieriern von den icons*/
    .fa-standard-style {
        color: #4d4d4d;
        padding-top: 50px;
    }

    .marketing-background {
        position: relative;
        width: 100%;
        background: #f2f2f2;
        /*hier -> {padding-top:150px; im zusammenspiel mit .navbar-wrapper {margin-bottom: -70px;} damit scroll smooth ist*/
        padding-top: 150px;
        /*margin-top: 50px;*/
        z-index: 170;

    }
    .container .marketing {
        z-index: 150;
        /*padding-top: 150px;*/
    }

    .featurette-heading {
        font-size: 40px;
        text-align: left;
    }
    /*    .featurette-subTitle {
            font-size: 30px;
            text-align: left;
        }*/
    /*    h2 a:link {
            text-decoration: none; -> ist um den unterstrich wegzukriegen
            text-decoration: none;
            color: red;
        }*/
    .lead.lead-justify {
        text-align: justify;
    }


    /*    .iframe {
            width: 100px;
        }*/

    /*map gr��er machen*/
    /*    #map { 
            height: 800px;
            margin-bottom: 20px;
    
            height: 100%;
            position:absolute; 
            width:100%; 
            height: calc(100% - 50px);
            height: auto;
            margin: 0px auto;
        }*/

    /*    .blog-video-teaser {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            object-fit: cover;
        }*/
    /*        .blog-video-teaser {
                padding-top: 50px;
                height: 100%;
                width: auto;
            }*/

    /*    .col-md-5 .blog-video-teaser {
            object-position: 50% 50%;
            object-fit: fill;
        }*/
    .video-fit {
        object-fit: cover;
        box-shadow: 0 2px 3px rgba(0,0,0,.4);
        /*position: absolute;*/
        /*margin: auto;*/
        /*padding-bottom:100px !important;*/
        /*max-height: 500px;*/
    }
    .video-fit2 {
        object-fit: cover;
    }
    #videoElement {
        box-shadow: 0 2px 3px rgba(0,0,0,.4);
    }
    .image-fit {
        width: 100%;
        box-shadow: 0 2px 3px rgba(0,0,0,.4);
    }

    hr.featurette-divider {
        border-color: #cccccc;
    }
    /*zum div row featurette.. da kann ich das doch eher ändern*/
    /*    .test-height {
            height: 500px;
        }*/

    /*    .row.featurette {
            height:150px;
        }*/

    .footer-padding {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    /*    .footer-logo {
            position: absolute;
            
        }*/

}




@media (min-width: 1200px) {
    .featurette-heading {
        /*margin-top: 0px;*/
        /*margin: auto;*/
        /*margin-top: 120px;*/
    }
    .navbar-brand {
        display: inline;
        position: absolute;
        left: 200px;
        /*font-family: 'Open Sans', sans-serif;*/
        font-variant: small-caps;
    }
}

@media (min-width: 900px) {
    video{
        width:100%;
        height: auto;
    }
}

@media (min-width: 1500px) {
    .carousel-inner > .item > img {
        /*width: 100%;*/
        width: 100%;
        height: auto;
        /*height: 500px;*/
        /*    margin: 0px auto;*/
    }}

@media (min-width: 1500px) {
    .imageheader > .item > img {
        /*width: 100%;*/
        width: 100%;
        height: 100px;
        /*height: 500px;*/
        /*    margin: 0px auto;*/
    }}



/*image soll an bestimmter min-h�he bleiben*/
/*@media (max-width: 500px) {
    .item{
        width:500px;
    }
}*/


/*jasny off canvas*/
.navbar-toggle {
    /*position: absolute;*/
    float: right;
    margin-right: 15px;
    z-index: 50000;
}

@media (min-width: 0) {
    .navbar-toggle {
        display: block; /* force showing the toggle */
    }
}

@media (min-width: 992px) {
    .navbar {
        right: auto;
        background: none;
        border: none;
    }
    .navbar-logo {
        position: absolute;
        left: -50px;
        bottom: -60px;
        height: 150px;
        /*box-shadow: 0 2px 3px rgba(0,0,0,.4);*/
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        /*filter:         drop-shadow(5px 5px 5px #222);*/
        filter:         drop-shadow(0px 2px 3px rgba(0,0,0,.4));
    }
}









/*
 * Off Canvas (http://getbootstrap.com/examples/offcanvas/offcanvas.css)
 * --------------------------------------------------
 */
/*@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%;  6 columns 
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%;  6 columns 
  }

  .row-offcanvas-right.active {
    right: 50%;  6 columns 
  }

  .row-offcanvas-left.active {
    left: 50%;  6 columns 
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;  6 columns 
  }
}*/