@charset "utf-8";
/* CSS Document */
.accordion	{ width: 100%;
			  max-width: 1080px;
			  height: 300px;
			  overflow: hidden;
			  margin: 2em auto;
			}
.accordion ul
			{  width: 100%;
			  display: table;
			  table-layout: fixed;
			  margin: 0;
			  padding: 0;
			}
.accordion ul li
			{ display: table-cell;
			  vertical-align: bottom;
			  position: relative;
			 width: 25%;
			 height: 300px;
			 background-repeat: no-repeat;
			 background-position: center center;
			 -moz-transition: all 1000ms ease;
			 -webkit-transition: all 1000ms ease;
			 -ms-transition: all 1000ms ease;
			 transition: all 1000ms ease;
			}
.accordion ul li div
			{ display: block;
			 overflow: hidden;
			 width: 100%;
			}
.accordion ul li div a
			{ display: block;
			 height: 300px;
			 width: 100%;
			 position: relative;
			 z-index: 3;
			 vertical-align: bottom;
			 padding: 15px 20px;
			 box-sizing: border-box;
			 color: #fff;
			 text-decoration: none;
			 font-family: Open Sans, sans-serif;
			 -moz-transition: all 200ms ease;
			 -webkit-transition: all 200ms ease;
			 -ms-transition: all 200ms ease;
			 transition: all 200ms ease;
			}
.accordion ul li div a *
			{  opacity: 0;
			 margin: 0;
			 width: 100%;
			 text-overflow: ellipsis;
			 position: relative;
			 z-index: 5;
			 white-space: nowrap;
			 overflow: hidden;
			 -moz-transform: translateX(-20px);
			 -ms-transform: translateX(-20px);
			 -webkit-transform: translateX(-20px);
			 transform: translateX(-20px);
			 -moz-transition: all 200ms ease;
			 -ms-transition: all 200ms ease;
			 -webkit-transition: all 400ms ease;
			 transition: all 400ms ease;
			}
.accordion ul li div a h2
			{ font-family: 'Righteous';
			 text-overflow: clip;
			 font-size: 1.5em;
			 text-transform: uppercase;
			 margin-bottom: 2px;
			 top: 0.5em;
			}
.accordion ul li div a p
			{  top: 0.5em;
			 left:1em;
			 font-size: 1.2em;
			 line-height:1.5em;
			 font-family: 'Righteous', sans-serif;
			}
.accordion ul li:nth-child(1)
			{ background-image: url("../../images/bad.jpg");
			}
.accordion ul li:nth-child(2)
			{  background-image: url("../../images/kueche.jpg");
			}
.accordion ul li:nth-child(3)
			{  background-image: url("../../images/wohnen.jpg");
			}
.accordion ul li:nth-child(4)
			{  background-image: url("../../images/terasse.gif");
			}
.accordion ul:hover li, .accordion ul:focus-within li
			{  width: 8%;
			}
.accordion ul li:focus
			{ outline: none;
			}
.accordion ul:hover li:hover, .accordion ul li:focus, .accordion ul:focus-within li:focus
			{  width: 60%;
			}
.accordion ul:hover li:hover a, .accordion ul li:focus a, .accordion ul:focus-within li:focus a
			{  background: rgba(0, 0, 0, 0.4);
			}
.accordion ul:hover li:hover a *, .accordion ul li:focus a *, .accordion ul:focus-within li:focus a *
			{ opacity: 1;
			-moz-transform: translateX(0);
			 -ms-transform: translateX(0);
			 -webkit-transform: translateX(0);
			 transform: translateX(0);
}
.accordion ul:hover li
			{  width: 8% !important;
			}
.accordion ul:hover li a *
			{  opacity: 0 !important;
			}
.accordion ul:hover li:hover
			{  width: 60% !important;
			}
.accordion ul:hover li:hover a
			{  background: rgba(0, 0, 0, 0.4);
			}
.accordion ul:hover li:hover a *
			{ opacity: 1 !important;
			 -moz-transform: translateX(0);
			 -ms-transform: translateX(0);
			 -webkit-transform: translateX(0);
			 transform: translateX(0);
			}
@media screen and (max-width: 736px) {
body		{  margin: 0;
			}
.accordion	{  height: auto;
			}
.accordion li
			{  margin: 2em 0;
			}
.accordion ul li a *
			{ opacity: 0 !important;
			}
..accordion ul li a *
			{ opacity: 0 !important;
			}
.accordion ul:hover li:hover
			{  width: 100% !important;
			}
.accordion ul:hover li, .accordion ul:focus-within li
			{  width: 100% !important;
			}

.accordion ul li
			{  position: relative;
			  display: table;
			  table-layout: fixed;
			  width: 100%;
			  -moz-transition: none;
			  -ms-transition: none;
			  -webkit-transition: none;
			  transition: none;
			}
}