/* Template for gestaltungen.ch */

:root {
    --tuerkies: #65afc2;
    --orange: #eb9b1d;
}


html 
{
   height:			100%;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	'Open Sans';
    font-weight:	400;
    font-size:		18px;
    line-height:	160%;
    letter-spacing:	0.01em;
    color:         #777777;
    background:     url(../images/background.jpg) repeat scroll 0 0;
}




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


#top { background: var(--tuerkies); padding: 10px 0px; color: #ffffff; gap: 30px; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; font-weight: 700; text-align: center; border-top: 3px solid #98c2cf; }
#menu { display: none; }


#telefon a { color: #ffffff; background: url(../images/phone.png) no-repeat scroll 0 2px; background-size: 10px 14px; padding: 0px 0px 0px 18px; }
#email a { color: #ffffff; background: url(../images/email.png) no-repeat scroll 0 5px; background-size: 14px 9px; padding: 0px 0px 0px 24px; }
#location { color: #ffffff; background: url(../images/location.png) no-repeat scroll 0 5px; background-size: 10px 13px; padding: 0px 0px 0px 20px; display: inline-block; }

#header { background: #303030; justify-content: center; align-items: center; padding: 50px 0px; }
#logo { width: 350px; margin: 0px auto;}
#logo p { margin: 0px; }

#container-menu { background: #2a2a2a; padding: 0px; box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15); border-top: 3px solid #252525; padding: 15px 0px 5px 0px; }

#text a { font-weight: 700;}




#container-bottom { background: #2a2a2a; padding: 20px; }
#container-bottom p { margin: 0px; }
#impress { margin-top: 10px; }
#socialmedia { margin-top: 10px; }


.socialmedia { display: flex; flex-wrap: wrap; gap: 7px; }
.socialmedia img { width: 25px; }


h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 40px; line-height: 120%; font-weight: 800; letter-spacing: 0.0em; text-transform: uppercase; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.15); } 
h2 { margin: 0px 0px 15px 0px; padding: 30px 0px 0px 0px; font-size: 25px; line-height: 120%; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; } 
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 19px; line-height: 120%; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } 
h4 { margin: 0px 0px 10px 0px; padding: 0px 0px 10px 0px; font-size: 14px; line-height: 120%; font-weight: 400; letter-spacing: 0.03em; text-transform: uppercase; color: #aaaaaa; } 

h1 + h2 { padding: 0px; }


.oben h3 { margin: 0px; }
.oben h3 + h4 { padding: 10px 0px 0px 0px !important; }


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


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

.clear { line-height: 0; }

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


#content { margin: 0px 30px; text-align: center; padding: 30px 0px; }




.mod-articlesnews__item { background: #eeeeee; border: 1px solid #e5e5e5; transition: .3s ease-out; }


.newsflash { margin: 25px 0px 40px 0px; }

.service .newsflash { display: grid; grid-template-columns: 1fr; gap: 30px; }
.service .mod-articlesnews__item { padding: 20px; border-top: 3px solid #e5e5e5; }
.service .mod-articlesnews__item:hover { border-top: 3px solid var(--orange); }
.service .mod-articlesnews__item h4 { border-bottom: 3px solid #eeeeee; }
.service .mod-articlesnews__item:hover h4 { border-bottom: 3px solid #e5e5e5; }


.oben { padding: 20px 20px 20px 20px; border-top: 3px solid #e5e5e5; }


.internet .newsflash { display: grid; grid-template-columns: 1fr; gap: 30px; }
.internet .mod-articlesnews__item h4 { padding: 0px; margin: 0px; }
.internet ul { background: #f7f7f7; margin: 0px; padding: 7px 0px 0px 0px; border-top: 1px solid #e5e5e5; }
.internet li { list-style: none; border-bottom: 1px solid #e5e5e5; margin: 0px; padding: 10px 0px; }
.internet .mod-articlesnews__item:nth-child(2) .oben { background: var(--tuerkies); border-top: 3px solid #98c2cf; }
.internet .mod-articlesnews__item:nth-child(2) .oben h3,
.internet .mod-articlesnews__item:nth-child(2) .oben h4 { color: #ffffff; }


.drucksachen .newsflash { display: grid; grid-template-columns: 1fr; gap: 30px; }
.drucksachen .mod-articlesnews__item h4 { padding: 0px; margin: 0px; }
.drucksachen ul { background: #f7f7f7; margin: 0px; padding: 7px 0px 0px 0px; border-top: 1px solid #e5e5e5; }
.drucksachen li { list-style: none; border-bottom: 1px solid #e5e5e5; margin: 0px; padding: 10px 0px; }
.drucksachen .mod-articlesnews__item:nth-child(3) .oben,
.drucksachen .mod-articlesnews__item:nth-child(8) .oben { background: var(--tuerkies); border-top: 3px solid #98c2cf; }
.drucksachen .mod-articlesnews__item:nth-child(3) .oben h3,
.drucksachen .mod-articlesnews__item:nth-child(8) .oben h3,
.drucksachen .mod-articlesnews__item:nth-child(3) .oben h4,
.drucksachen .mod-articlesnews__item:nth-child(8) .oben h4 { color: #ffffff; }




.mod-articlesnews__item img { width: 25px; }


.preis { color: var(--tuerkies); }
.zahl { font-weight: 700; font-size: 35px; }



.button { margin: 20px 0px 0px 0px; background: var(--tuerkies); color: #ffffff; text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; font-weight: 800; display: inline-block; padding: 10px 20px; box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); transition: .3s ease-out; }
.button:hover { background: var(--orange); }




.col-form-label { display: none; }
.col-sm-9 { width: 100%; }
.form-control { border: 1px solid #bebebe; border-radius: 0px; padding: 10px; font-family: 'Open Sans'; font-weight: 400; font-size: 15px; line-height: 160%; letter-spacing: 0.01em; }
.btn-primary { border-radius: 0px; border: 0px; margin: 20px 0px 0px 0px; background: var(--tuerkies); color: #ffffff; text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; font-weight: 800; display: inline-block; padding: 10px 20px; box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); transition: .3s ease-out; }
.btn-primary:hover { background: var(--orange); }





.responsiveContainer { position: relative; padding-bottom: 50%; height: 0; overflow: hidden; }
.responsiveContainer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.uk-scope .uk-accordion { border-top: 1px solid #bebebe; margin-top: 20px; }
.uk-scope .uk-accordion-title { color: #777777; margin: 0px; padding: 15px 0px 12px 0px; font-size: 15px; line-height: 120%; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; border-bottom: 1px solid #bebebe; transition: .3s ease-out; background: url(../images/open.png) no-repeat scroll right center; background-size: 15px 15px; }
.uk-scope .uk-accordion > :nth-child(n+2) { margin: 0px; }
.uk-scope .uk-accordion-title:hover { color: var(--tuerkies); }
.uk-scope .uk-open .uk-accordion-title { color: var(--tuerkies); background: url(../images/close.png) no-repeat scroll right center; background-size: 15px 15px; }
.uk-scope .uk-accordion-content { margin-top: 10px; }
.uk-scope .uk-accordion-title::before { display: none; }


.uk-scope .uk-subnav-pill > .uk-active > a { background: var(--tuerkies); color: #ffffff; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; font-weight: 800; display: inline-block; padding: 10px 20px; box-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25); transition: .3s ease-out; }







@media(min-width:800px)
{
    #container-menu { padding: 0px; }

    #top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
    #menu-small { display: none; }
    #menu { display: block; }
    #content { margin: 0px auto; width: 700px; padding: 70px 0px; }

    .rsform { margin: 0px auto; width: 700px; }

    .service .newsflash { grid-template-columns: 1fr 1fr; }
    .internet .newsflash { grid-template-columns: 1fr 1fr; }
    .drucksachen .newsflash { grid-template-columns: 1fr 1fr; }


    #container-bottom { padding: 20px 0px; }
    #bottom { margin: 0px auto; width: 700px; display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between; }
    #impress { margin-top: 0px; }
    #socialmedia { margin-left: auto; margin-top: 0px; }

    .responsiveContainer { padding-bottom: 40%; }

    h1 { margin: 0px 0px 50px 0px; font-size: 50px; } 
}



@media(min-width:1100px)
{
    #header { padding: 100px 0px; }
    #content { width: 1000px; }

    #bottom { width: 1000px; }

    .service .newsflash { grid-template-columns: 1fr 1fr 1fr; }
    .internet .newsflash { grid-template-columns: 1fr 1fr 1fr; }
    .drucksachen .newsflash { grid-template-columns: 1fr 1fr 1fr 1fr; }

    .responsiveContainer { padding-bottom: 30%; }
}



@media(min-width:1400px)
{
    #content { width: 1300px; }

    #bottom { width: 1300px; }

    .service .newsflash { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .drucksachen .newsflash { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

}