/* Template for Linth Energie © admotion */


html 
{
   height:			100%;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	'Rubik';
    font-weight:	300;
    font-size:		17px;
    line-height:	160%;
    letter-spacing:	0.03em;
}




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




#top { height: 40px; background: #fec800; }

#header { background: url(../images/Showbox/diverses.jpg) no-repeat scroll center center; background-size: cover; height: 300px; position: relative; }
#elektro #header { background: url(../images/Showbox/elektro.jpg) no-repeat scroll center center; background-size: cover; }
#elektrokontrollen #header { background: url(../images/Showbox/elektrokontrollen.jpg) no-repeat scroll center center; background-size: cover; }
#gebaeudeautomation #header { background: url(../images/Showbox/gebaeude.jpg) no-repeat scroll center center; background-size: cover; }
#photovoltaik #header { background: url(../images/Showbox/photovoltaik.jpg) no-repeat scroll center center; background-size: cover; }
#e-mobilitaet #header { background: url(../images/Showbox/emobilitaet.jpg) no-repeat scroll center center; background-size: cover; }
#sicherheitsanlagen #header { background: url(../images/Showbox/sicherheit.jpg) no-repeat scroll center center; background-size: cover; }
#telematik #header { background: url(../images/Showbox/telematik.jpg) no-repeat scroll center center; background-size: cover; }
#referenzen #header { background: url(../images/Showbox/referenzen.jpg) no-repeat scroll center center; background-size: cover; }
#ueber-uns #header { background: url(../images/Showbox/ueber-uns.jpg) no-repeat scroll center center; background-size: cover; }


.notfall { font-weight: 600; font-size: 19px; line-height: 170%; margin: 30px 0px 0px 0px; color: #00355f; }
.notfall td { padding: 10px 0px; }
.notfall img { width: 40px; padding: 10px 0px 0px 0px; }

#icons { display: none; }


#logo { position: relative; z-index: 9999; padding: 100px 0px 0px 20px; }
#logo img { width: 250px; }

#lead { font-weight: 600; font-size: 19px; line-height: 170%; position: relative; z-index: 999; padding: 0px 0px 10px 0px; }

#einleitung { margin: 0px 20px; position: relative; z-index: 9999; }
#einleitungicon { background: #fec800; width: 60px; height: 40px; padding: 10px 0px; text-align: center; margin: 35px 0px 0px 0px; }
#einleitungicon img { height: 40px; }

#einleitungtitel { margin: 20px 0px 0px 0px; }

#container-menu { display: none; position: fixed; top: 40px; right: 0px; left: 0px; padding: 30px; background: #00355f; z-index: 9999; }
#menulogo { width: 170px; }

#menuadresse { color: #ffffff; display: none; }
#menuadresse a { color: #ffffff; }


.overlay-dunkel { background: #00355f; mix-blend-mode: multiply; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; }
.overlay-hell { background: #0094bc; position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: .6; z-index: 0; }

.moduletable { z-index: 1; position: relative; }

#lead { padding: 0px 0px 20px 0px; }

.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; }




#inhalt { position: relative; }

#content { margin: 0px 20px; position: relative; }


#einstiegsbild p { margin: 0px; }


#vorteile { background: #fec800; padding: 20px 20px 10px 20px; }
#vorteile ul { margin: 0px 0px 10px 0px; padding: 0px; }
#vorteile li { margin: 0px; padding: 0px 0px 0px 20px; line-height: 170%; list-style: none; background: url(../images/list.svg) no-repeat scroll 0 12px; background-size: 5px 5px; font-weight: 600; }



#text { padding: 30px 0px 0px 0px; }
#text ul { margin: 0px 0px 10px 0px; padding: 0px; }
#text li { margin: 0px; padding: 0px 0px 0px 20px; line-height: 170%; list-style: none; background: url(../images/list.svg) no-repeat scroll 0 11px; background-size: 4px 4px; }






figure { margin: 0px; padding: 0px; }


#more { background: url(../images/more.jpg) no-repeat scroll center center; background-position: cover; padding: 50px 30px 50px 30px; margin: 50px 0px 50px 0px; position: relative; }
#overlay-more { background: #0094BC; opacity: .8; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.more-text { position: relative; z-index: 999; }
.more-button { margin: 20px 0px 0px 0px; position: relative; z-index: 999; }
.more-button a { background: #fec800; display: inline-block; padding: 15px 50px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.1em; transition: .3s ease-out; color: #00355f; }
.more-button:hover a { background: #0094bc; color: #ffffff; }







#container-interesse { background: rgb(0,148,188,.1); padding: 30px 20px; text-align: center; }


.icon { background: #fec800; width: 70px; height: 40px; padding: 15px 0px; text-align: center; position: absolute; right: 20px; top: 20px; }
.icon img { height: 40px; }




#container-team { margin: 0px 20px; padding: 30px 0px; font-size: 19px; font-weight: 600; line-height: 170%; }
#team-text { margin: 0px 0px 30px 0px; }

#angebote { margin: 30px 20px 0px; background: url(../images/more.jpg) no-repeat scroll center center; background-position: cover; position: relative; padding: 30px 20px; }


#formular { background: url(../images/kontakt.jpg) no-repeat scroll center center; background-position: cover; position: relative; margin: 0px 20px; padding: 30px; }
#formular h2 { color: #ffffff; }
#googlemap { margin: 0px 20px; height: 500px; overflow: hidden; position: relative; }
#route { position: absolute; bottom: 20px; left: 20px; z-index: 999; }
#route a { background: #fec800; display: inline-block; padding: 15px 50px; text-transform: uppercase; font-weight: 500; letter-spacing: 0.1em; margin: 40px 0px 0px 0px; transition: .3s ease-out; color: #00355f !important; }
#route:hover a { color: #ffffff !important; background: #0094bc; }



footer { background: #00355f; }
#footer { margin: 0px 20px; color: #ffffff; padding: 20px 0px; }
#footerlogo { width: 300px; margin: 0px 0px 40px 0px; }
#adresse { margin: 0px 0px 40px 0px; }
#impress { margin: 0px 0px 40px 0px; }





#footer a { color: #ffffff; }
#impress { color: rgb(255,255,255,.4); }
.copyright { font-size: 15px; margin: 20px 0px 0px 0px; }



h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 27px; line-height: 130%; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
h2 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 25px; line-height: 140%; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #00355f; }
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 140%; font-weight: 600; letter-spacing: 0.03em; color: #000000; }
h4 { margin: 0px; padding: 0px; font-size: 25px; line-height: 140%; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; }
h5 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 18px; line-height: 140%; font-weight: 600; letter-spacing: 0.03em; color: #ffffff; }

#container-interesse h2 { margin: 0px 0px 20px 0px; }
#angebote h3 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 25px; line-height: 140%; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #ffffff; text-align: center; }
#vorteile h3 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 22px; line-height: 140%; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #00355f; }

#impressum h3:first-of-type { padding: 0px; }
#impressum h3 { padding: 20px 0px 0px 0px; }
#datenschutz h3 { padding: 20px 0px 0px 0px; }


a { text-decoration: none; outline: none; color: #0094bc; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; outline: none; }


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

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







@media(min-width:550px)
{
    #logo { padding: 100px 0px 0px 30px; }
    
    #content { margin: 0px 30px; }
    #vorteile { padding: 30px 30px 20px 30px; }
    
    .uk-scope .uk-accordion-content { padding: 30px; }

	.icon { right: 30px; top: 30px; }

    #einleitung { margin: 0px 30px; }
	#container-interesse { padding: 30px 30px; }

	#container-team { margin: 0px 30px; }
	
	#angebote { margin: 30px 30px 0px; padding: 30px 30px; }
	
    #formular { margin: 0px 30px; }
    #googlemap { margin: 0px 30px; }
    #route { left: 30px; bottom: 30px; }
    
	#footer { margin: 0px 30px; }
}




@media(min-width:750px)
{
    #einleitung { margin: 0px auto; width: 600px; }
    #lead { margin: 0px auto; width: 600px; padding: 0px 0px 20px 0px; }

    #content { margin: 0px auto; width: 600px; }
    
    #logo { margin: 0px auto; width: 600px; padding: 90px 0px 0px 0px; }
    #logo img { width: 250px; }

    #einstieg { position: relative; }
    
    #text { padding: 50px 0px 0px 0px; }

    #vorteile { padding: 40px 40px 30px 40px; }

	#container-interesse { padding: 50px 0px; }
    #interesse { margin: 0px auto; width: 600px; }

	.uk-scope .uk-child-width-1-3\@l > * { width: 50%; }
	
    #container-team { margin: 0px auto; width: 600px; }
	
    #angebote { margin: 50px auto 20px; width: 540px; }

	#footer { margin: 0px auto; width: 600px; }
}




@media(min-width:1050px)
{
    #header { height: 500px; }

    #container-menu { padding: 150px; width: 800px; left: auto; }
    #menuadresse { display: block; position: absolute; right: 150px; bottom: 150px; width: 350px; }
    #menulogo { display: none; }
    #logo { width: 900px; padding: 70px 0px 0px 0px; }
    
    #content { width: 900px; }
    
    #einleitung { margin: 0px auto; width: 900px; position: absolute; left: 50%; margin: 0px 0px 0px -450px; top: 325px; }
    #lead { margin: 0px auto; width: 900px; padding: 80px 0px 80px 0px; }
    #einleitungicon { width: 80px; height: 60px; float: left; margin: 7px 40px 0px 0px; }
    #einleitungicon img { height: 60px; }
    #einleitungtitel { width: 750px; margin: 0px 0px 0px 0px; float: left; }

    
    #einstieg { padding: 0px 0px 200px 0px; }
    #einstiegsbild { padding: 0px 100px 0px 0px; }
    #vorteile { position: absolute; right: 0; bottom: 50px; width: 550px; padding: 40px 40px 30px 40px; z-index: 999; box-sizing: border-box; }
    #text { padding: 0px; }
    #referenzen #text { padding: 100px 0px 0px 0px; }
    #jobs #text { padding: 100px 0px 0px 0px; }
    #ueber-uns #text { padding: 100px 0px 0px 0px; }
    #partner #text { padding: 100px 0px 0px 0px; }
    #error-404 #text { padding: 100px 0px 0px 0px; }

    .inhalt-left { float: left; width: 45%; }
    .inhalt-right { float: right; width: 45%; }
    .uk-scope .uk-accordion-content { padding: 40px; }
    .uk-scope .uk-accordion-title { padding: 20px 30px; }

    #interesse { width: 900px; }
    
    #container-angebote { position: relative; margin: -150px 0px 0px 0px; }
    #angebote { width: 600px; padding: 70px 50px 70px; margin: 0px auto; }
	#balken-angebote { position: absolute; top: 0; width: 900px; margin: 150px 0px 0px -450px; left: 50%; height: 79px; background: url(../images/balken.svg) no-repeat scroll 0 0; background-size: 56px 79px; }
	
	#container-team { width: 700px; padding: 100px 0px 150px 0px; position: relative; }
	#balken-team { position: absolute; bottom: 0; width: 900px; margin: 0px 0px 0px -450px; left: 50%; height: 79px; background: url(../images/balken-gelb.svg) no-repeat scroll right bottom; background-size: 56px 79px; }
    
    #more { padding: 50px 30px 50px 30px; margin: 90px 0px 130px 0px; }
    .more-text { float: left; width: 45%; }
    .more-button { float: right; width: 41%; margin: 46px 0px 0px 0px; }

    #container-kontakt { display: flex; flex-wrap: wrap; }
    #googlemap { width: 50%; float: left; margin: 0px; height: 600px; }
    #formular { width: 50%; float: left; box-sizing: border-box; margin: 0px; }
    #formular { padding: 0px 50px; height: 600px; position: relative; top: 0px; bottom: 0px; left: 0px; display: flex; justify-content: center; align-content: center; align-items: center; z-index: 111; box-sizing: border-box; }

	#footer { width: 900px; padding: 40px 0px 40px 0px; }
    #footerlogo { width: 300px; margin: 0px 0px 40px 0px; }
    #adresse { float: left; width: 300px; margin: 0px 50px 0px 0px; }
    #impress { float: left; width: 270px; }    

    h1 { font-size: 37px; color: #ffffff; }
}



@media(min-width:1350px)
{
    #logo { width: 1200px; padding: 80px 0px 0px 0px; }
    
    #einleitung { width: 1200px; margin: 0px 0px 0px -600px; top: 320px; }
    #einleitungicon { margin: 13px 40px 0px 0px; width: 100px; height: 80px; }
    #einleitungicon img { height: 80px; }
    #einleitungtitel { width: 1060px; }
    
    #lead { margin: 0px auto; width: 1200px; padding: 100px 0px 100px 0px; }
    
    #content { width: 1200px; }
    #einstiegsbild { padding: 0px 100px 0px 0px; }
    
    .more-text { width: 68%; }
    .more-button { width: 32%; margin: 20px 0px 0px 0px; }
    
	#container-interesse { padding: 100px 0px; }
    #interesse { width: 1200px; }
    .icon { width: 100px; height: 70px; margin: 0px 0px 0px -50px; }
    .icon img { height: 70px; }
   	
    .uk-scope .uk-child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
	.uk-slider-nav { margin: 40px 0px 0px 0px !important; }

    
	#container-team { width: 970px; padding: 100px 0px 150px 0px; position: relative; }
	#team-text { margin: 0px 0px 80px 0px; }
	#balken-team { width: 1200px; margin: 0px 0px 0px -600px; }
	
    #angebote { width: 850px; padding: 70px 50px 70px; }
	#balken-angebote { width: 1200px; margin: 150px 0px 0px -600px; }

        
    #formular { padding: 0px 100px; height: 800px; position: relative; top: 0px; bottom: 0px; left: 0px; display: flex; justify-content: center; align-content: center; align-items: center; z-index: 111; box-sizing: border-box; }
    #googlemap { height: 800px; }
    #route { left: 50px; bottom: 50px; }
    
    
	#footer { width: 1200px; padding: 70px 0px 70px 0px; }
    #footerlogo { float: left; width: 300px; margin: 0px 100px 0px 0px; }
    #adresse { float: left; width: 300px; margin: 15px 0px 0px 0px; }
    #impress { float: left; width: 270px; margin: 15px 0px 0px 0px; }    

    h1 { font-size: 48px; }
}




@media(min-width:1650px)
{
    #logo { width: 1500px; }
    
    #einleitung { width: 1500px; margin: 0px 0px 0px -750px; }
    #lead { width: 1500px; }
    #einleitungtitel { width: 1000px; }
    
	#balken { position: absolute; top: 0; width: 1500px; margin: 0px 0px 0px -600px; left: 0%; height: 79px; background: url(../images/balken.svg) no-repeat scroll top; background-size: 56px 79px; }
	
    #content { width: 1500px; }
    
    #einstiegsbild { padding: 0px 150px 0px 0px; }

    #ueber-uns #container-team { padding: 0px 0px 200px 0px; }
    #jobs #container-team { padding: 0px 0px 200px 0px; }
    
    .more-text { width: 70%; }
    .more-button { width: 27%; }
   
	#container-interesse h2 { margin: 0px 0px 50px 0px; }
    #interesse { width: 1500px; }
	
    #container-angebote { margin: -150px 0px 0px 0px; }
    #angebote { width: 950px; padding: 70px 150px 100px; }
	#balken-angebote { width: 1500px; margin: 150px 0px 0px -750px; }

	#container-team { width: 1250px; padding: 100px 0px 200px 0px; }
	#balken-team { width: 1500px; margin: 0px 0px 0px -750px; }
    
    #formular { padding: 0px 150px; }
    
    
	#footer { width: 1500px; }
    #footerlogo { margin: 0px 180px 0px 0px; }
    #adresse { margin: 15px 240px 0px 0px; }
    #impress { float: left; width: 270px; }    
    
    h2 { font-size: 32px; }
    h4 { font-size: 32px; }

    #angebote h3 { font-size: 32px; }
    .uk-scope .uk-h2, .uk-scope h2 { font-size: 24px; }
}


@media(min-width:2250px)
{
    #logo { width: 300px; padding: 85px 0px 0px 60px; margin: 0px; }
    #einleitung { top: 135px; }
    #einleitungicon { float: none; }
    #einleitungtitel { float: none; width: 1500px; margin: 50px 0px 0px 0px; }

    h1 { font-size: 55px; }
}