/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Saira', sans-serif;
   font-weight:		300;
   font-size:		16px;
   color:			#2a2f2f;
   line-height:		1.8;
   letter-spacing:	0.02em;
}


#system-message { margin: 0px; }
/* bootstrap import */

img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ul.unstyled, ol.unstyled { list-style: none;}
.visually-hidden {display: none;}
* {box-sizing: border-box;}
/* ---------------------------------- */


:root {
    --braun: #b09660;
    --grau: #2a2f2f;
}

    #desktop { display: none; }
    #mobile { display: block; }   

.mceContentBody {background: #eee;}

header { width: 100%; position: fixed; top: 0; background: white; box-shadow: 0 0 30px rgba(0,0,0,0.15); padding: 40px 40px; transition: 0.3s ease; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; z-index: 998;}
.scrolled header {padding: 20px 40px;}
#logo { width: 200px; transition: 0.3s ease;}
.scrolled #logo { width: 160px; transition: 0.3s ease;}

#inhalt { width: 100%; padding: 0 40px;  }
#inhalt img { border-radius: 3px; box-shadow: 0 0 30px rgba(0,0,0,0.15);  }

.blog-item {margin: 0;}


#showbox-container { width: 100%; height: 40vh; position: relative; z-index: 10; margin-top: 80px;}
#showbox  {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
#showbox::after  {width: 100%; height: 50%; position: absolute;content: ''; left: 0; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);  }
#showbox img {width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: top center;}
#titel  {  position: absolute; left: 40px; bottom: 75px; animation: fadeIn 2s ease-out;}
#scrolldown  {  position: absolute; left: 0px; width: 100%; bottom: 0px;}

@keyframes fadeIn{
    0% {opacity: 0;transform: translateY(4em); }
    100% {opacity: 1;transform: translateY(0em); }
}

.anker {position: absolute; margin-top: -150px;}


#container-footer { width: 100%;  padding: 0 40px 40px;  }
#footer { width: 100%; margin: 0 auto; background: var(--grau);color: white; padding: 40px;border-radius: 3px; box-shadow: 0 0 30px rgba(0,0,0,0.15); font-size: 16px; }
#footer a { color: white; }
#footer a:hover { color: var(--braun); }

#inhalt li::marker {color: var(--braun);}
#inhalt ul {margin: 0; padding-left: 15px;}


#copyright { font-size: 13px; left: 40px; position: absolute; margin-top: -32px;}


h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 40px; line-height: 130%; font-weight: 600; color: #fff;}
h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 600; }
h3 { margin: 0px 0px 0px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 600; }


a { text-decoration: none; outline: none; color: var(--braun);  }
a:hover { text-decoration: none; color: var(--braun); }
a:focus { text-decoration: none; outline: none; }

p {margin: 0; }

strong {font-weight: 600;}

#webdesign  { margin-top: 0px; background: var(--braun) url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px; border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }


.clear { line-height: 0; }

#scrollup {
    display: none;
    position: fixed;
    bottom: 40px; border-radius: 3px;
    right: 5px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--grau);
    color: white;
    cursor: pointer;
    padding: 7px 2px;
    width: 30px;
}
#scrollup:hover { background-color: var(--braun);}


 /* -------  Show on scroll ----------*/

.blog-item {
  opacity: 0; padding: 40px 0;
  -webkit-transform: translateY(4em);
          transform: translateY(4em);
  -webkit-transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out,
              -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
  will-change: transform, opacity;
}

.blog-item.is-visible {
  opacity: 1; -webkit-transform: translateY(0em);
          transform: translateY(0em); }




@media(min-width:460px)
{
}


@media(min-width:660px){
        #showbox-container { height: 60vh;}

}



@media(min-width:768px){

    
    

}

@media(min-width:960px){
body { font-size: 20px;}
h1 { font-size: 64px;}
h2 { font-size: 40px }
h3 {font-size: 25px; }
    .wf-columns .wf-column {position: relative;}
    .wf-columns .wf-column img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
    .blog-item {margin: 75px 0;}


}



@media(min-width:1250px){
    #desktop { display: flex; }
    #mobile { display: none; }

    #showbox-container { height: 100vh;margin: 0;}

    #inhalt { width: 100%; padding: 0 150px;  }
    #logo { width: 300px; }
    #titel  { left: 150px; bottom: 150px;}
    .blog-item {margin: 150px 0;}
    .items-leading {margin: 0 150px;}
    #container-footer { width: 100%;  padding: 0 75px 75px;  }


    header {padding: 40px 75px; }
    .scrolled header {padding: 20px 75px;}
    footer div.wf-column:nth-child(2) {text-align: right;}
    
    .wf-columns-gap-large {gap: 4rem;}
    
    #webdesign  { margin-top: 18px;}
    #scrollup { bottom: 75px; right: 35px; }
    
    #copyright { font-size: 13px; left: 75px; position: absolute; margin-top: -32px;}

}


@media(min-width:1650px){
        .items-leading {margin: 0 300px;}

}