html * {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: rgb(200, 200, 200);
  margin: 0;
}

.wrapper {
  padding-top: 2.5rem;
  width: 1024px;
  height: 2000px;
  background-color: white;
  margin: 0 auto;
}
/* Global styles end */



/* Header styles */
header > nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 0 2.5rem;
}

.navbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  position: relative;
}

.navbar a {
  color: black;
  text-decoration: none;
}

.navbar a:hover {
  color: red;
}

.navbar-left {
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.navbar-left a {
  line-height: 25px;
  font-size: 22px;
  padding: 2rem 2rem 0 0;
}

.navbar-left li:hover > ul {
  height: 2.5rem;
}

.navbar-dropdown {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 100%;
  left: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: height ease-out 100ms;
  -o-transition: height ease-out 100ms;
  -moz-transition: height ease-out 100ms;
  transition: height ease-out 100ms;
  width: 400px;
}


.navbar-dropdown a {
  padding: 0 1.8rem 0 0;
}

.navbar-right {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: .5rem;
}

.navbar-right a {
  line-height: 13px;
  font-size: 12px;
}

.navbar-social {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 1rem;
}



/* Hero area */
.hero {
  border-bottom: red 2rem solid;
  position: relative;
  height: 440px;
  overflow: hidden;
}

.hero > div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.hero img {
  min-width: 100%;
}

#slideshow > div { 
  position: absolute; 
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#sammlung{
  position: relative;
  top: -29px;
  bottom: 0;
  left: 160px;
  right: 0;
  font-size: 22px;
}
/* Hero area end */

/* Header styles end */


/* Website body */
.body {
  padding-top: 70px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}


/* Sidebar styles */
.sidebar {
  -webkit-box-flex: 1;
  -webkit-flex: auto 0 0;
     -moz-box-flex: 1;
      -ms-flex: auto 0 0px;
          flex: auto 0 0;
}

.sidebar-nav {
  border-left: 2.5rem solid yellow;
  padding: 1rem 0 3rem 0;
}

.sidebar-nav li {
  padding: 0.4rem 1rem 0.4rem 0.5rem;
}

.sidebar-nav a {
  line-height: 25px;
  font-size: 22px;
  color: black;
  text-decoration: none;
}

.sidebar-nav a:hover {
  color: red;
}

.sidebar-nav .nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  position: relative;
}

.sidebar-nav li:hover > ul {
  height: 230px;
}

.sidebar-nav-dropdown {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 100%;
  top: -0.5rem;
  height: 0;
  background-color: white;
  margin: 0.5rem;
  padding: 0;
  overflow: hidden;
  -webkit-transition: height 300ms ease-out;
  -o-transition: height 300ms ease-out;
  -moz-transition: height 300ms ease-out;
  transition: height 300ms ease-out;
  z-index: 1;
}

.sidebar-info {
  padding-left: 2.5rem;
}

.opening-hours {
  padding: 0.5rem;
  width: 190px;
  height: auto;
  margin: 20px 0 35px 0;  
}

.opening-hours h5 {
  margin: 20px 0 5px 0;
  font-size: 16px;
}

.opening-hours p {
  line-height: 16px;
  font-size: 14px;
  margin: 0;
}


.current {
  width: 180px;
  height: auto;
  background-color: yellow;
  margin-left: 0.5rem;
  padding: 0.5rem;
}

.current a {
  display: block;
  text-decoration: none;
  height: 100%;
  width: 100%;
}

.current h1 {
  margin-top: 0;
  font-size: 25px;
  font-weight: normal;
  color: red;
}

.current h2 {
  margin-top: 0;
  font-size: 25px;
  font-weight: normal;
  color: red;
}

.current p {
  text-decoration: none;
  color: black;
  font-size: 11px;
}
/* Sidebar styles end */


/* Main content styles */
main {
  height: 1000px;
  margin-top: 30px;
  margin-left: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  /*-webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;*/
}

.central-content{
  width: 600px;
  font-size: 13px;
 }

 .central-content h3{
  color: red;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 15px;
 }

 .central-content h4{
  color: red;
 }

.central-content-left{
  /*background-color: lightgray;*/
  width: 450px;
  float: left;
  font-size: 13px;
}

 .central-content-left h3{
  color: red;
  margin-top: 15px;
  margin-bottom: 5px;
 }

.central-content-right{
  float: left;
  /*background-color: gray;*/
  width: 200px;
  margin-left: 50px;
  font-size: 13px;
}

.presse-content-top{
  width: 750px;
  /*background-color: lightgray;*/
  margin-top: 0px;
  margin-bottom: 100px;
  height: 250px;
}

.presse-content-top img{
  -webkit-box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 2px 1px rgba(0, 0, 0, 0.2);
}

.presse-content-top a{
  color: red;
  /*margin-top: 45px;*/
  /*margin-bottom: 5px;*/
  font-size: 19px;
  text-decoration: none;
 }


.presse-content{
  width: 800px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.presse-content-row{
  height: 150px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

}

.presse-content-column{
  -webkit-box-flex: 50%;
  -webkit-flex: 50% 1 1;
     -moz-box-flex: 50%;
      -ms-flex: 50% 1 1;
          flex: 50% 1 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
     -moz-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.presse-content-column p{
  margin-bottom: 0;
  margin-left: 20px;
}

.presse-content-row img{
  max-height: 120px;
  max-width: 170px;
  /*position: absolute;
  bottom: 0;*/
  /*left: 0;*/
  margin-bottom: 0px;
  margin-left: 20px;
}

.kunsthochdrei{
  width: 201px;
  height: 201px;
  background-color: yellow;
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  margin-top: 50px;
  float:left;
}

.kunsthochdrei img{
  margin-left: 80px;
  margin-top: 70px;
}

.ausstellung-kachel{
  float: left;
  margin-left: 40px;
  margin-bottom: 30px;
  margin-right:30px;
  max-width: 250px;
}

.ausstellung-kachel a{
  text-decoration: none;
  color: black;
}

.ausstellung-kachel img{
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  max-width: 200px;
}


.mediencamp-kachel{
  float: left;
  margin-left: 40px;
  margin-bottom: 40px;
  margin-right:30px;
  max-width: 340px;
}

.mediencamp-kachel a{
  text-decoration: none;
  color: black;
}

.mediencamp-kachel img{
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  max-width: 340px;
}


.video-kachel{
  float: left;
  margin-left: 40px;
  margin-bottom: 40px;
  margin-right:30px;
  max-width: 500px;
}



.video-kachel video{
  -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
  max-width: 455px;
}

/*.presse-content-small{
  position: relative;
  width: 200px;
  height: 150px;
  float:left;
  text-align: center;
}

.presse-content-big{
  position: relative;
  height: 150px;
  width: 200px;
  float:left;
  text-align: left;
  vertical-align: bottom;
}

.presse-content-big p{
  position: absolute;
  bottom: 0;
  vertical-align: bottom;
  margin-bottom:0px;
}
*/

.archiv{
  width: 320px;
  font-size: 13px;
}

.archiv span{
  color:red;
}

.fuehrungen{
  margin-bottom: 30px;
}

.fuehrungen span{
  color:red;
  font-size: 14px;
}


.fuehrungen-link{
  margin-bottom: 20px;
  background-color: red;
  padding: 5px;
  text-align: center;
}

.fuehrungen-link a{
  color:white;
  text-decoration: none;
}


.gruppenfuehrungen{
  margin-bottom: 20px;
  background-color: red;
  padding: 5px;
  text-align: center;
}

.gruppenfuehrungen a{
  color:white;
  text-decoration: none;
}

.mini-kunst{
  font-size: 12px;
  margin-top: 20px;
  background-color: lightgray;
  width: 227px;
  padding-top: 25px;
  padding-right:20px;
  padding-left:20px;
  padding-bottom: 20px;
}

.programmheft{
  margin-top: 20px; 
  width: 227px;
}

.programmheft a{
  text-decoration: none;
  color: black;
}

.bildunterschrift{
  font-size: 10px;
}

/* main content styles end */

/* Website body end */

 .kunstvermittlung-h {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-width: 439px;
        min-height: 201px;
        max-width: 439px;
        max-height: 201px;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
        background-image: url("../images/Programm Kachel 2_439x201.jpg");
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
                box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
      }

      .kunstvermittlung-h a {
        font-size: 20px;
        color: white;
        /*padding-right: 1rem;*/
        text-decoration: none;
        margin: 0.3rem;
      }

      .kunstvermittlung-h a:hover {
        color: yellow;
      }

      .kunstvermittlung-h .second {
        -webkit-box-flex: 1;
        -webkit-flex: auto 1 1;
           -moz-box-flex: 1;
            -ms-flex: auto 1 1;
                flex: auto 1 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
           -moz-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
      }

      .kunstvermittlung-h .left {
        -webkit-align-self: center;
            -ms-flex-item-align: center;
                    -ms-grid-row-align: center;
                align-self: center;
        -webkit-box-flex: 1;
        -webkit-flex: auto 1 1;
           -moz-box-flex: 1;
            -ms-flex: auto 1 1;
                flex: auto 1 1;
      }

      .kunstvermittlung-h .right {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
      }

      .kunstvermittlung-h .third {
        -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end;
        display: flex;
        flex-direction: column;
        text-align: right;
      }

      .kunstvermittlung-v {
        background-image: url("../images/Progback2.jpg");
        min-width: 227px;
        min-height: 439px;
        max-width: 227px;
        max-height: 439px;
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 2rem 0.5rem;
      }

      .kunstvermittlung-v a {
        font-size: 20px;
        color: white;
        padding-bottom: 1.3rem;
        text-decoration: none;
      }

      .kunstvermittlung-v .anmeldung {
        /*-webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end;*/
      }

/* Footer styles */
footer .copyright {
  text-align: center;
  font-size: 11px;
}
/* Footer styles end */