/* ---------------------------------------------------
Title: IDEENWERKSTATT TINTIFAX - Layout CSS
Author: Pierpaolo Federici - IDEENWERKSTATT TINTIFAX
Published: 25.08.2015;

------------------- Color Palette --------------------

      brown       -      rgb(202,158,103);
      beige       -      rgb(247,240,232);

------------------------------------------------------



/*======================== BASIC ========================*/

//------------------- Fonts --------------------

@font-face {
  font-family: 'Open Sans';
  src: url(../fonts/OpenSans-Light.ttf);
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url(../fonts/OpenSans-Regular.ttf);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url(../fonts/OpenSans-Bold.ttf);
  font-weight: 700;
  font-display: swap;
}



body    {width: 100%; overflow-x: hidden; margin: 0; background: url('../images/bg-fingerabdruck.png') no-repeat 95% 35%; background-color: rgb(202,158,103); color: #573724; font: 13px/20px 'Open Sans', sans-serif;}
#wrapper{overflow-x: hidden;} /* trick ipad overflow-x */
p       {margin-bottom: 1rem; font-weight: 400;}
a       {color: #573724; text-decoration: none;}
a:hover {color: #573724; text-decoration: underline;}

.bold   {font-weight: bold;}
.center {text-align: center;}

.only-wide {display: none;}

#preload  {position: fixed; z-index: 1000; top:0; left:0; right:0; bottom:0; width: 100%; height: 100%; background-color: rgb(247,240,232);}
#loading  {position: absolute; background: url(../images/loader.gif) no-repeat center center; height: 168px; width: 174px; left: 50%; top: 50%; margin: -87px 0 0 -84px;
-webkit-animation-name: pulsate;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes pulsate {
  0% { -webkit-transform: scale(1); } 
  50% { -webkit-transform: scale(0.8); }
  100% { -webkit-transform: scale(1); }
}


/*======================== HEADER ========================*/
header {position: absolute; top: 0; width: 100%; text-align: center; z-index: 100;}

header .logo {width: 250px; margin-top: 20px;}



/*======================== SECTIONS ========================*/
#skew {
  position: relative;
  overflow: hidden;
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
  border-top: 270px solid #fff;
  height: 350px;
  width: 200%;
  left: -42%;
  margin-top:-25%;
  }

#skew .slideshow   {width:100%; height:320px; border: 15px solid rgb(247,240,232); overflow: hidden;}

#skew .slideshow li {position:absolute; width: 80%!important; height: 1000px!important; top:-100%!important; z-index: -1; background-position: center; background-size: cover;
                    -webkit-transform: rotate(15deg);
                    -moz-transform: rotate(15deg);
                    -ms-transform: rotate(15deg);
                    -o-transform: rotate(15deg);
                    transform: rotate(15deg);}

/* slide-show mobile*/
.slideshow li { display: none; }
.slideshow li.first { display: block; }
.slideshow li.bg {background-image: url('../images/bg-mob.jpg');}
.slideshow li.bg1 {background-image: url('../images/bg-mob1.jpg');}
.slideshow li.bg2 {background-image: url('../images/bg-mob2.jpg');}
.slideshow li.bg3 {background-image: url('../images/bg-mob3.jpg');}
.slideshow li.bg4 {background-image: url('../images/bg-mob4.jpg');}
.slideshow li.bg5 {background-image: url('../images/bg-mob5.jpg');}
.slideshow li.bg6 {background-image: url('../images/bg-mob6.jpg');}
.slideshow li.bg6a {background-image: url('../images/bg-mob6a.jpg');}
.slideshow li.bg6b {background-image: url('../images/bg-mob6b.jpg');}
.slideshow li.bg7 {background-image: url('../images/bg-mob7.jpg');}
.slideshow li.bg8 {background-image: url('../images/bg-mob8.jpg');}
.slideshow li.bg9 {background-image: url('../images/bg-mob9.jpg');}
.slideshow li.bg10 {background-image: url('../images/bg-mob10.jpg');}
.slideshow li.bg10a {background-image: url('../images/bg-mob10a.jpg');}
.slideshow li.bg10b {background-image: url('../images/bg-mob10b.jpg');}
.slideshow li.bg11 {background-image: url('../images/bg-mob11.jpg');}
.slideshow li.bg12 {background-image: url('../images/bg-mob12.jpg');}
.slideshow li.bg13 {background-image: url('../images/bg-mob13.jpg');}
.slideshow li.bg14 {background-image: url('../images/bg-mob14.jpg');}
.slideshow li.bg15 {background-image: url('../images/bg-mob15.jpg');}



.slidetext     {margin-top: 22%; color: #573724; width: 100%; height: 40px; margin-right: 40px; float: right;}
#spruch h3  {font-size: 2.2rem; background-color: transparent!important; width: 100%!important; text-align: right;}

#content {margin-top: 45%; background-color: rgb(247,240,232); padding: 50px 0;}
#content .container   {width: 95%;}

.contacts       {line-height: 23px; min-height: 220px; margin-top: 20px;}
.contacts h5    {margin-bottom: 1rem;}
.contacts div   {position: relative;}
.contacts span  {display:inline-block; position: absolute; left: 45px;}
.contacts em    {font-style: normal;}

.img-contact    {border: 10px solid #fff; margin:0;}
.img-contact img{float: left;}




/*======================== FOOTER ========================*/

footer {width: 100%; text-align: center; background-color: rgb(202,158,103); height: 50px; line-height: 50px; overflow: hidden;}
footer .toggler {cursor: pointer;}
#impressum {background-color: rgb(247,240,232); padding: 30px 0; position: relative; display: none;}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Larger than mobile */
@media (min-width: 400px) {
	
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {

  body {background-position: 95% 55%;}

  header .logo {width: 300px;}
  #skew{border-top: 350px solid #fff;}

  #content {margin-top: 30%;}

  .contacts em {display: none;}
  .contacts span {position: static;}

  .impr-left {border-right: 1px solid #573724; text-align: right; padding-right: 50px}
}

/* Larger than tablet */	
@media (min-width: 750px) {
  
  .only-mobile  {display: none;}
  .only-wide    {display: block;}

  .slideshow li.bg {background-image: url('../images/bg.jpg');}
  .slideshow li.bg1 {background-image: url('../images/bg1.jpg');}
  .slideshow li.bg2 {background-image: url('../images/bg2.jpg');}
  .slideshow li.bg3 {background-image: url('../images/bg3.jpg');}
  .slideshow li.bg3b {background-image: url('../images/bg3b.jpg');}
  .slideshow li.bg4 {background-image: url('../images/bg4.jpg');}
  .slideshow li.bg5 {background-image: url('../images/bg5.jpg');}
  .slideshow li.bg5b {background-image: url('../images/bg5b.jpg');}
  .slideshow li.bg6 {background-image: url('../images/bg6.jpg');}
  .slideshow li.bg7 {background-image: url('../images/bg7.jpg');}
  .slideshow li.bg8 {background-image: url('../images/bg8.jpg');}

  #spruch h3  {font-size: 2.6rem; margin-top: -10%;}

  #content {margin-top: 18%;}
  .contacts {margin-top: 0;}
  
  #skew     {left:-46%; border-top: 400px solid #fff;}

  #content .text::before   {content: ""; position: absolute; width: 1px; background-color: #573724; height: 100%; margin-left: -25px;}



}

/* Larger than desktop */
@media (min-width: 1000px) {
  header .logo {width: 340px;}
  #skew{left: -16%; border-top: 440px solid #fff;}
  #skew .slideshow li {width: 55%!important;}
  
  #spruch h3 {font-size:3rem; margin-top: -3%;}

  #content {margin-top: 25%;}

  .contacts em {display: inline-block;}
  .contacts span {position: absolute;}

}
	
/* Larger than Desktop HD */
@media (min-width: 1200px) {
  
}

/* Wide Screen */
@media (min-width: 1400px) {
  header .logo {width: 400px;}
  #skew{left: -15%; border-top: 650px solid #fff;}
}

/* Extra Wide Screen */
@media (min-width: 1400px) {
  header .logo {width: 400px;}
  #skew{border-top: 570px solid #fff;}
}