/* Template for Schwyter.AG © admotion */


:root { 
    --ganzhellbraun: #eae7e3;
    --braun: #735c3f;
    --hellbraun: #bf9a65;
    --gruen: #93a500;
    --hellgruen: #cbd298;
}


html 
{
   height:			100%;
}


body
{
    height:         auto;
    margin:			0px;
    padding:		0px;
    font-family:    "bio-sans", sans-serif;
    font-weight:	300;
    font-size:		19px;
    line-height:	160%;
    letter-spacing:	0.03em;
    color:          var(--braun);
    position:       relative;
}




#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }


header { background: #ffffff; position: relative; z-index: 2; }

#logo { width: 300px; padding: 30px 30px 20px 20px; }
#menu { position: absolute; right: 0; z-index: 999; }

#showbox { position: relative; }

#slogan { display: none; }

#titelbild p { margin: 0px; }

#schwyter-ag #content { padding: 0px; }


#schwyter-ag #border-middle { display: none; }

#icons { display: flex; flex-wrap: wrap; gap: 13px; position: absolute; bottom: 20px; left: 20px; }
#phone { width: 40px; height: 40px; background: var(--hellbraun) url(../images/phone.png) no-repeat scroll center center; background-size: 20px 20px; transition: .3s ease-out; }
#email { width: 40px; height: 40px; background: var(--hellbraun) url(../images/mail.png) no-repeat scroll center center; background-size: 20px 16px; transition: .3s ease-out; }

#socialmedia-footer { width: 20px; position: absolute; right: 20px; top: 30px; }
.facebook { width: 11px; margin: 0px auto; }
.instagram { width: 20px; margin: 0px auto; }
.linkedin { width: 18px; margin: 0px auto; }

#socialmedia { border-bottom: 1px solid var(--braun); padding: 10px 0px 7px 0px; }
#socialmedia .socialmedia { display: flex; flex-wrap: wrap; }

.cls-1 { fill: var(--braun);}
#socialmedia-footer .cls-1 { fill: #ffffff; }

#phone:hover { background-color: var(--braun); }
#email:hover { background-color: var(--braun); }

#content { position: relative; }
.blog-item { margin: 0px 20px; position: relative; padding: 20px 0px; }
.inhalt { padding: 40px 0px 0px 0px; }

.com-content-article__body { margin: 0px 20px; padding: 40px 0px; }

.newsflash figure { margin-bottom: 20px; }

.items-leading .item-content { background: #ffffff; }
.einleitung { background: var(--ganzhellbraun); position: relative; z-index: 3; font-size: 21px; line-height: 160%; }
.einleitung .item-content { background: none; }


#container-testimonials { background: var(--ganzhellbraun); }
#testimonials { padding: 30px 20px; position: relative; }


#googlemap { position: relative; z-index: 10; }

.back-to-top { font-size: 0; background: url(../images/totop.png) no-repeat scroll 0 0; background-size: 30px 19px; width: 30px; height: 19px; bottom: 20px; right: 15px; position: fixed; left: 50%; margin: 0px 0px 0px -15px; }


footer { background: var(--gruen); color: #ffffff; }
#footer { padding: 30px 20px; position: relative; }
#footer a { color: #ffffff; }

#adresse { margin: 0px 0px 40px 0px; }
#sitemap { display: none; }
#sitemap ul { margin: 0px; padding: 0px; }
#sitemap li { margin: 0px; padding: 0px 0px 15px 0px; list-style: none; line-height: 160%; }
#sitemap { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; }

#container-bottom { background: var(--hellgruen); color: #ffffff; }
#bottom { padding: 10px 20px; }
#bottom p { margin: 0px; }
#bottom a { color: #ffffff; }

#copyright { margin: 0px 0px 10px 0px; }

h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 35px; line-height: 120%; font-weight: 300; letter-spacing: 0.0em; } 
h2 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 30px; line-height: 120%; font-weight: 600; letter-spacing: 0.02em; } 
h3 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 23px; line-height: 120%; font-weight: 600; letter-spacing: 0.02em; } 
h4 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 21px; line-height: 120%; font-weight: 600; letter-spacing: 0.02em; } 

p + h2 { padding: 30px 0px 0px 0px; }
p + h3 { padding: 30px 0px 0px 0px; }


.page-header h2 { font-weight: 300; margin: 0px 0px 10px 0px; }
.wf-columns { gap: 0; }

figure { margin: 0px; padding: 0px; }
.button { color: var(--gruen); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; border-top: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); padding: 15px 20px; display: inline-block; margin-top: 30px; }

#more { padding: 30px 20px; position: relative; }

#more ul { margin: 0px; padding: 0px; display: flex; flex-wrap: wrap; gap: 20px; }
#more li { margin: 0px; padding: 0px; list-style: none; }
#more li a { color: var(--gruen); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; border-top: 2px solid var(--gruen); border-bottom: 2px solid var(--gruen); padding: 15px 20px; display: inline-block; }
#more li:hover a { color: var(--hellbraun); border-top: 2px solid var(--hellbraun); border-bottom: 2px solid var(--hellbraun); }
#more li.active { display: none; }

#newsletter .button { border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }

.uk-scope em { color: var(--braun); font-weight: 300; font-style: italic; }

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


p { margin: 0px 0px 10px 0px; }

.clear { line-height: 0; }
.p-sans p { margin: 0px; }

table { margin: 0px 0px 10px 0px; width: 100%; }

strong { font-weight: 600; }

.blog-items .line:first-child .blog-item { background: #ffffff; }


.line { position: relative; }
.line:first-child::before { display: none;}
.line::before { content: ""; position: absolute; top: 0; left: 0px; right: 0px; height: 1px; background: rgb(115,92,63,.15); }
.line:nth-child(2n)::before { left: 0px; right: 0px; }
.line:nth-child(3n)::before { left: 0px; right: 0px; }
.line:nth-child(4n)::before { left: 0px; right: 0px; }



.referenzen .uk-grid { position: relative; }
.referenzen .uk-grid::before { content: ""; position: absolute; top: 0; left: 0px; right: 0px; height: 1px; background: rgb(115,92,63,.15); }

.referenzen .uk-grid-margin:last-child .uk-grid::after { content: ""; position: absolute; bottom: 0; left: 0px; right: 0px; height: 1px; background: rgb(115,92,63,.15); }

.datum { font-style: italic; }
p.datum + h3 { padding-top: 10px; }



@media(min-width:550px)
{
    #logo { padding: 30px 30px 20px 30px; }
    #icons { bottom: 20px; left: 30px; }

    .blog-item { margin: 0px 30px; padding: 30px 0px; }
    .inhalt { padding: 40px 0px; }
    .com-content-article__body { margin: 0px 30px; padding: 40px 0px; }

    #more { padding: 50px 30px; }
    #testimonials { padding: 50px 30px; }

    #footer { padding: 30px; }
    #socialmedia-footer { right: 30px; }

    #bottom { padding: 10px 30px; }
}



@media(min-width:800px)
{    
    #logo { padding: 30px 30px 20px 41px; }
    #icons { bottom: 0px; left: 19px; border-right: 1px solid rgb(255,255,255,.25); padding: 0px 19px 17px 0px; }

    #showbox { z-index: 5; }

    #border-left { background: rgb(115,92,63,.15); width: 1px; height: 100%; position: absolute; bottom: 0; top: 0; left: 130px; z-index: 4; }
    #border-right { background: rgb(115,92,63,.15); width: 1px; height: 100%; position: absolute; bottom: 0; top: 0; right: 130px; z-index: 4; }

    .referenzen .uk-grid::before { left: -65px; right: -65px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after { left: -65px; right: -65px; }

    .items-leading { border-bottom: 50px solid #ffffff; }
    .blog-item { margin: 0px 130px; box-sizing: border-box; position: relative; padding: 0px; }
    .inhalt { padding: 40px 30px; }
    .com-content-article__body { margin: 0px 130px; padding: 30px 30px 40px 30px; box-sizing: border-box; position: relative; }

    .line { position: relative; }
    .line::before { content: ""; position: absolute; top: 0; left: 0px; right: 65px; height: 1px; background: rgb(115,92,63,.15); }

    .line:nth-child(1)::before { display: none; }
    .line:nth-child(3n+2)::before { left: 0px; right: 65px; }
    .line:nth-child(3n+3)::before { left: 195px; }
    .line:nth-child(3n+4)::before { right: 65px; }
    .line:nth-child(3n+5)::before { right: 0; left: 195px; }

    #more ul { display: flex; flex-wrap: wrap; gap: 30px; }
    
    .personen .newsflash { display: grid; grid-template-columns: 1fr 1fr 1fr; width: auto; gap: 0px; row-gap: 50px; }
    .newsflash { width: 50%; }

    #socialmedia { position: absolute; right: 90px; top: 50px; z-index: 999; width: 20px; border-bottom: none; padding: 0px; }
    .socialmedia { display: block; }
    .facebook { margin: 0px auto 14px; }
    .instagram { margin: 0px auto 10px; }
    .linkedin { margin: 0px auto; }
    
    
    #more { margin: 0px 130px; }

    #testimonials { margin: 0px 130px; padding: 50px 30px; border-left: 1px solid rgb(115,92,63,.15); border-right: 1px solid rgb(115,92,63,.15); }

    #slogan { display: block; position: absolute; bottom: 30px; left: 30px; width: 17px; }

    #footer { margin: 0px 130px; border-left: 1px solid rgb(255,255,255,.2); border-right: 1px solid rgb(255,255,255,.2); padding: 30px 0px; }
    #adresse { padding: 0px 30px; }
    #newsletter { padding: 0px 30px; }
    #socialmedia-footer { right: -40px; top: 40px; }

    #bottom { margin: 0px 130px; padding: 10px 30px; }

    h1 { margin: 0px 0px 40px 0px; padding: 0px; font-size: 40px; } 
}



@media(min-width:1000px)
{
    header { position: absolute; z-index: 9999; background: none; }
    #menu { position: absolute; right: 0; bottom: 0; top: 0; z-index: 999; border-left: 1px solid rgb(255,255,255,.25); width: 240px; padding: 30px 0px 0px 0px; }

    #logo { width: 300px; background: rgb(255,255,255,.7); padding: 30px 30px 20px 70px; margin-top: 40px; z-index: 999; }
    #icons { left: 27px; padding: 0px 20px 17px 0px; }
    #phone { width: 50px; height: 50px; }
    #email { width: 50px; height: 50px; }

    #verlauf { position: absolute; background: linear-gradient(180deg, #735c3f 0%, rgba(218, 218, 218, 0) 100% ); width: 100%; height: 300px; mix-blend-mode: multiply; }

    .referenzen .uk-grid::before { left: -80px; right: -80px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after  { left: -80px; right: -80px; }

    #border-left { left: 160px; }
    #border-right { right: 160px; }

    #content { padding: 0px 0px 100px 0px; }

    .items-leading { border-bottom: 70px solid #ffffff; }
    .about-leading { border-bottom: 0px solid #ffffff; }

    .line:nth-child(1)::before { display: none; }
    .line:nth-child(3n+2)::before { right: 80px; }
    .line:nth-child(3n+3)::before { left: 240px; }
    .line:nth-child(3n+4)::before { right: 80px; }
    .line:nth-child(3n+5)::before { left: 160px; right: 0; }


    .blog-item { margin: 0px 160px; }
    .inhalt { padding: 60px 50px 70px 50px; }


    .com-content-article__body { margin: 0px 160px; padding: 60px 50px 70px 50px; }

    #socialmedia { top: 72px; right: 110px; }

    #more { margin: 0px 160px; padding: 0px 50px; }
    #testimonials { margin: 0px 160px; padding: 70px 50px; }

    #footer { margin: 0px 160px; }
    #adresse { padding: 0px 30px 0px 50px; }
    #newsletter { padding: 0px 50px; }
    #socialmedia-footer { right: -50px; top: 45px; }

    #bottom { margin: 0px 160px; padding: 10px 50px; }
}




@media(min-width:1300px)
{
    #logo { width: 300px; padding: 30px 30px 20px 110px; margin-top: 60px; }
    #icons { left: 67px; }

    #border-middle { background: rgb(115,92,63,.15); width: 1px; position: absolute; bottom: 100px; top: 400px; right: 50%; z-index: 0; }
    #verlauf { height: 500px; }

    .com-content-article__body { padding: 90px 50px 100px 50px; margin: 0px 200px; }

    .referenzen .uk-grid::before { left: -100px; right: -100px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after  { left: -100px; right: -100px; }

    .blog-item { margin: 0px 200px; display: flex; flex-wrap: wrap; }
    .line:nth-child(2n) .blog-item { flex-direction: row-reverse; }
    .line:first-child .blog-item { padding: 70px 0px 100px 0px; }

    .page-header { position: absolute; left: -50px; writing-mode: sideways-lr; padding: 8px 0px 0px 0px; }
    .line:nth-child(2n) .blog-item .page-header { left: auto; right: -50px; }


    .about .line:first-child .blog-item { padding-top: 0px; }

    .references .inhalt { padding-top: 0px; }
    .references .line:first-child .blog-item { padding-top: 0px; padding-bottom: 0px; }
    .references p { margin: 0px; }


    .blog-items .inhalt { padding: 50px; }
    .blog-items.items-leading .inhalt { padding: 100px 50px 50px 50px; }

    .blog-items.items-leading .blog-item:last-child .inhalt { padding: 100px 50px 50px 50px; }
    .blog-items .blog-item:last-child .inhalt { padding: 50px 50px 100px 50px; }

    .item-image { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
    .item-content { flex: 1; }

    #socialmedia { top: 96px; }

    #border-left { left: 200px; }
    #border-right { right: 200px; }

    .line:nth-child(3n+2)::before { right: 100px; }
    .line:nth-child(3n+3)::before { left: 300px; }
    .line:nth-child(3n+4)::before { right: 100px; }
    .line:nth-child(3n+5)::before { left: 300px; }



    #bottom { margin: 0px 200px; display: flex; flex-wrap: wrap; justify-content: space-between; }
    #copyright { margin: 0px; }

    #socialmedia { right: 150px; }

    #more { margin: 0px 200px; }
    #testimonials { margin: 0px 200px; }

    #footer { margin: 0px 200px; display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0px; }

    #adresse { padding: 40px 30px 40px 50px; }
    #sitemap { display: block; border-left: 1px solid rgb(255,255,255,.2); padding: 40px 50px; margin: 0px; }
    #newsletter { border-left: 1px solid rgb(255,255,255,.2); padding: 40px 50px; }


    h1 { font-size: 50px; } 
}




@media(min-width:1600px)
{
    #logo { width: 400px; padding: 40px 40px 30px 120px; margin-top: 70px; }
    #icons { left: 107px; }

    .referenzen .uk-grid::before { left: -120px; right: -120px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after  { left: -120px; right: -120px; }

    #border-left { left: 240px; }
    #border-right { right: 240px; }

    .blog-item { margin: 0px 240px; }

    .line:nth-child(3n+2)::before { right: 120px; }
    .line:nth-child(3n+3)::before { left: 360px; }
    .line:nth-child(3n+4)::before { right: 120px; }
    .line:nth-child(3n+5)::before { left: 360px; }


    .com-content-article__body { margin: 0px 240px; }
    #socialmedia { right: 190px; }

    #more { margin: 0px 240px; }

    #testimonials { margin: 0px 240px; padding: 100px 50px; }

    #footer { margin: 0px 240px; grid-template-columns: 1fr 1fr 2fr; }
    #bottom { margin: 0px 240px; }


    h1 { font-size: 60px; } 
}




@media(min-width:1800px)
{
    #icons { left: 167px; }
    #menu { width: 300px; }

    .referenzen .uk-grid::before { left: -150px; right: -150px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after  { left: -150px; right: -150px; }

    #border-left { left: 300px; }
    #border-right { right: 300px; }

    .line:nth-child(3n+2)::before { right: 150px; }
    .line:nth-child(3n+3)::before { left: 450px; }
    .line:nth-child(3n+4)::before { right: 150px; }
    .line:nth-child(3n+5)::before { left: 450px; }



    .blog-item { margin: 0px 300px; }
    .com-content-article__body { margin: 0px 300px; }

    #socialmedia { right: 250px; }

    #more { margin: 0px 300px; }

    #testimonials { margin: 0px 300px; }

    #footer { margin: 0px 300px; }
    #bottom { margin: 0px 300px; }
}



@media(min-width:2100px)
{
    #icons { left: 267px; }
    #menu { width: 400px; }

    .referenzen .uk-grid::before { left: -200px; right: -200px; }
    .referenzen .uk-grid-margin:last-child .uk-grid::after  { left: -200px; right: -200px; }

    #border-left { left: 400px; }
    #border-right { right: 400px; }

    .line:nth-child(3n+2)::before { right: 200px; }
    .line:nth-child(3n+3)::before { left: 600px; }
    .line:nth-child(3n+4)::before { right: 200px; }
    .line:nth-child(3n+5)::before { left: 600px; }


    .text-left-abstand { padding: 100px 0px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; }

    .blog-item { margin: 0px 400px; }
    .com-content-article__body { margin: 0px 400px; }

    #socialmedia { right: 350px; }

    #more { margin: 0px 400px; }

    #testimonials { margin: 0px 400px; }

    #footer { margin: 0px 400px; }
    #bottom { margin: 0px 400px; }
}