@charset "utf-8";
/* CSS Document */

/* reset */

@media screen and (min-width: 760px) {
body,
html { height: 100%; }
.show-smart { display: none; }
.show-desk { display: block; }
.show-desk-inline { display: inline-block; }



/*************************************************************/
/* body bild Slider */
/*************************************************************/

#wrapper { background: transparent }
.body-index1,
.body-index2,
.body-index3 { background-position: center center; background-repeat: no-repeat; position: fixed; top: 0; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; width: 100%; }
.body-index1 { z-index: 1; }
.body-index2 { z-index: 2; opacity: 0; -webkit-animation-name: bodysliderA; -moz-animation-name: bodysliderA; -ms-animation-name: bodysliderA; -o-animation-name: bodysliderA; animation-name: bodysliderA; -webkit-animation-duration: 25s; -moz-animation-duration: 25s; -ms-animation-duration: 25s; -o-animation-duration: 25s; animation-duration: 25s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.body-index3 { z-index: 3; opacity: 0; -webkit-animation-name: bodysliderB; -moz-animation-name: bodysliderB; -ms-animation-name: bodysliderB; -o-animation-name: bodysliderB; animation-name: bodysliderB; -webkit-animation-duration: 25s; -moz-animation-duration: 25s; -ms-animation-duration: 25s; -o-animation-duration: 25s; animation-duration: 25s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }
/*************************************************************/
/* Header */
/*************************************************************/	
header { height: 150px; width: 100%; position: absolute; margin: 0; padding: 0; background-color: rgba(0,0,0,0.5); opacity: 1.0; z-index: 100; }
.sprachwahl { position: absolute; top: 12px; right: 4%; }
.sprachwahl img { height: 24px; width: 24px; margin-left: 10px }
#kontakt-top {position:absolute; top: 45px; right: 4%;}
#kontakt-top a,
#kontakt-top a:visited,
#kontakt-top a:active {color: #999; font-size: 14px;}
#kontakt-top a:hover {color: #0ff; font-size: 14px;}


header a { text-decoration: none; }
header a:hover { text-decoration: none; }
#logo_home { position: relative; margin: 22px auto 0px auto; height: 75px; width: 320px; background-image: url(../img/logo_silverhill05.png); background-repeat: no-repeat; }
.logo_bild { height: 75px; width: 320px; }
.spacer-header { height: 23px; }
.menu_body { position: relative; background-color: rgba(0,0,0,0.0); opacity: 1; margin: 0; padding: 0; height: 30px; width: 100%; }
.menu_innerblock { display: block; margin: 0; padding: 0; width: 100%; }
.sticky_nav { display: block; width: 100%; height: 30px; margin-left: auto; margin-right: auto; position: fixed; top: 0px; z-index: 999; box-shadow: 0 1px 3px rgba(51,51,51,0.3); background-color: rgba(0,0,0,1);}
.menu-trigger { display: none; }
#menu { margin: 0; padding: 0 4%; display: inline-block; width: 100%; }
#menu > ul { padding: 0; margin: 0; width: 100%; list-style: none; display: inline; background-color: rgba(0,0,0,0.0); border: none; }
#menu > ul > li { display: inline-block; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2); padding: 0; margin: 0 -3px 0 -2px; width: 20.1%; text-align: center; background-color: transparent; }
#menu > ul > li:first-child { margin: 0 -3px 0 0;border-left: 1px solid rgba(255,255,255,0.4);}
#menu > ul > li:nth-child(4) { border-right: 1px solid rgba(255,255,255,0.0);}
#menu > ul > li:nth-child(5) { margin: 0 0 0 -3px; border-right: 1px solid rgba(255,255,255,0.4);border-left: 1px solid rgba(255,255,255,0.4);}
#menu > ul > li.show-smart { display: none; }
#menu li.has-submenu1 span,
#menu li.has-submenu2 span { border: none; padding: 4px 0; cursor: pointer; }
#menu li.has-submenu1 span:after,
#menu li.has-submenu2 span:after { display: none; }
#menu li.has-submenu1 span.open:after,
#menu li.has-submenu2 span.open:after { display: none; }
#menu > ul > li > a { font-family: 'Roboto', sans-serif; font-weight: 300; display: block; text-decoration: none; margin: 0; padding: 4px 0; color: #fff; font-size: 20px; line-height: 22px; border: none; }
#menu > ul > li > span { font-family: 'Roboto', sans-serif; font-weight: 300; display: block; text-decoration: none; margin: 0; padding: 4px 0 4px 0; color: #fff; font-size: 20px; line-height: 22px; border: none; }
#menu ul > li:hover { color: #0FF; background-color: rgba(0,0,0,0.0); border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2); padding: 0; }
#menu ul > li:first-child:hover {border-left: 1px solid rgba(255,255,255,0.4);} /* */
#menu ul > li:nth-child(4):hover { border-right: 1px solid rgba(255,255,255,0.0);} /* */
#menu ul > li:nth-child(5):hover {border-right: 1px solid rgba(255,255,255,0.4);border-left: 1px solid rgba(255,255,255,0.4);} /* */

#menu ul > li > a:hover { color: #0FF; background-color: rgba(0,0,0,0.0); padding: 4px 0; } /* */
#menu ul > li > span:hover { color: #0FF; background-color: rgba(0,0,0,0.0); padding: 4px 0 4px 0; } /* */
#menu ul ul.sub-menu1,
#menu ul ul.sub-menu2 { display: none; position: absolute; list-style: none; text-decoration: none; text-align: left; top: 30px; left: 0; width: 100%; background-color: rgba(248,248,248,0.93);border: none; padding: 0; margin: 0; opacity: 1; }


#menu ul > li > ul li { display: block; width: 100%; margin: 0; padding: 0; text-align: left; height: auto; }
#menu ul > li > ul li a { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 20px; line-height: 22px; text-align: left; text-decoration: none; color: #000; display: block; padding: 10px 4%; margin:0; position: relative; border: none; border-bottom: 1px solid #ccc;background-color: rgba(230,230,230,0.0); } 
#menu ul > li > ul li a:hover { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 20px; line-height: 22px; text-decoration: none; background-color: rgba(0,0,0,0.4); color: #0FF; display: block; padding: 10px 4%; margin:0; position: relative; border: none; border-bottom: 1px solid #999; overflow-x: hidden; overflow-y: hidden; }
    
/*#menu ul ul > li { position: relative; } 
#menu ul ul > li a { padding: 10px 15px 10px 10px; height: auto;background-color: rgba(230,230,230,0.0);color: #000; }*/

#menu > ul > li span.current,
#menu > ul > li a.current { background-color: rgba(0,0,0,0.0); color: #0FF; }

/********************************************************/
/** Clearglas für Slider Startseite                    **/
/********************************************************/

.clearglas { position: relative; ; margin: 0; padding: 0 0 0 0; background: transparent; width: 100%; height: 600px; }
.clearglastext { width: 100%; height: auto; margin: 0 auto; text-align: center; padding-top: 0; }
.clearglas h1 { color: #fff; font-size: 60px; font-weight: 100; }
.clearglas a img { margin-top: 0px; height: 30px; width: 100px; -webkit-transition-property: width, height; /* Safari */ -webkit-transition-duration: 0.5s; /* Safari */ transition-property: width, height; transition-duration: 0.5s; }
.clearglas a img:hover { height: 39px; width: 130px }
.einblenden { -webkit-animation: fadein 7s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 7s; /* Firefox < 16 */ -ms-animation: fadein 7s; /* Internet Explorer */ -o-animation: fadein 7s; /* Opera < 12.1 */ animation: fadein 7s; }
h1.einblenden {color: #fff; font-size: 60px; font-weight: 100;}

/********************************************************/
/** Artikel                                            **/ 
/********************************************************/

.spacer-article { display: block; height: 150px; width: 100%; margin: 0; padding: 0; background:url(../img/page_background1.jpg); background-size:cover; background-repeat:no-repeat; }
#article-body { position: relative; padding: 0; margin: 0; background-color: #fff; height: auto; width: 100%; }
article { background-color: #fff; height: auto; width: 100%; padding: 70px 4%; }


article a,
article a:visited,
article a:active {text-decoration:none;font-family:'Roboto',sans-serif;color:#0cF;}
article a:hover {color:#0cF;text-decoration:none;}

.blau,
article a.blau,
article a.blau:visited {color: #0cF;text-decoration:none;}

.schwarz,
article a.schwarz,
article a.schwarz:visited,
article a.schwarz:active {color:#000;text-decoration:none;}
article a.schwarz:hover {color:#0cF;text-decoration:none;}

.must { color: red; font-weight: bolder }


/********************************************************/
/** Text und Bildabschnitte mit Unterkapitel           **/
/********************************************************/

/* Hintergrundbilder 1:gross  2:klein */
.bgimg1 { height: 400px; max-height: 700px; }
.bgimg2 { height: 400px; max-height: 700px; }
.bgimg {/*position:fixed;*/ opacity: 1; background-attachment: local; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; /*-moz-background-size: cover; */
-o-background-size: cover; height: 100%; width: 100%; }
#bildtextabschnitte { list-style-type: none; }

	
.textpart { background-color: #fff; width: 100%; padding: 70px 4% 100px 4%; height: auto; }

article p,
.textpart p { font-size: 22px; line-height: 30px; text-align:justify;}

.textpart a:visited,
.textpart a:active {text-decoration:none;font-family:'Roboto',sans-serif;color:#0cF;}
.textpart a:hover {color: #0cF;text-decoration:none;}

.textpart a.blau,
.textpart a.blau:visited {color:#0cF; text-decoration:none;}

.schwarz,
.textpart a.schwarz,
.textpart a.schwarz:visited,
.textpart a.schwarz:active {color: #000;text-decoration: none;}
.textpart a.schwarz:hover {color: #0cF;text-decoration: none;}


article ul li,
.textpart ul li { font-size: 22px; margin-left: 23px; font-family: 'Roboto', sans-serif;font-weight: 300;line-height: 30px;}

h3 		{ text-align:center;}
h3.kb_ueberschrift {text-align:center;margin-bottom:40px;}
.textleft {text-align:left;}

/***********************************************************/    
/* Projekt und Lifestyle  */
/***********************************************************/
a.more-button { text-decoration: none; margin: 5px 0; color: #fff; font-size: 16px; font-weight: 300; }
a.more-button div { background-color: #555; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); padding: 0; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; transition: all ease 0.3s; }

a.more-button > div > p,
a.more-button { font-size: 16px; font-weight: 300;color: #fff;padding:5px 10px;}
a.more-button > div > p:hover,
a.more-button:hover { text-decoration: none; color: #000; }
a.more-button > div > p:active,
a.more-button:active { color: #000; }
a.more-button > div > p:visited,
a.more-button:visited { color: #fff }

a.more-button div:hover { color: #000; background-color: #fff; box-shadow: 4px 5px 20px rgba(0,0,0,0.4); }
a.more-button div:active { color: #000; background-color: #555; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
a.more-button div:visited { color: #fff; }




/***********************************************************/    
/* lightGallery  */
/***********************************************************/

/*lightGallery a img:hover { opacity: 0.6; }*/
.spacer-gallery { display: none; }
.lightgallery-container {width: auto; height: 246px; overflow:hidden;}
/***********************************************************/    
/* Bilder  */
/***********************************************************/ 

article img.kb_left { /* Kapitel Bilder in Projekt und Lifestyle */ float: left; width: 40.1%; height: auto; margin-top: 70px; margin-bottom: 25px; margin-left: 0; margin-right: 50px; }
.textpart img.right,
article img.right { float: right; width: 40.1%; height: auto; margin-left: 30px; margin-right: 0; margin-top: 8px; margin-bottom: 15px; }
.textpart img.left,
article img.left { float: left; width: 40.1%; height: auto; margin-top: 8px; margin-bottom: 15px; margin-left: 0; margin-right: 30px; }
.textpart img.klein,
article img.klein { display: block; max-width: 120px; height: auto; margin: 20px auto 25px auto;}
.textpart img.gross,
article img.gross { display: block; width: 100%; height: auto; margin: 20px auto 25px auto; }
img.align_gr_center { display: block; width: 100%; height: auto; margin: 0 auto 15px auto; }
/*************************************************************/	
/* Kontakt Formular */	
/*************************************************************/

#kontaktformular fieldset { text-align: left; height: auto; width: 100%; padding: 15px 0 15px 0; background-color: #fff; border: transparent; }
#kontaktformular label { text-align: left; display: block; color: #000; font-weight: 300; font-size: 20px; width: 100%; padding: 5px 5px 5px 0; }
#kontaktformular input,
#kontaktformular input#name,
#kontaktformular input#email,
#kontaktformular input#betreff,
#kontaktformular input#message,
#kontaktformular select,
#kontaktformular textarea { display: block; padding: 5px; width: 100%; font-size: 20px; background-color: rgba(230,230,230,1); color: #000; }
#kontaktformular textarea { height: 220px }
#delivery_box { margin-top: 20px }
#delivery_box input { display: inline; width: auto; padding: 5px 15px; margin-bottom: 5px }
#kontaktformular input#verifyemail { visibility: hidden; display: none }
#kontaktformular label[for='verifyemail'] { visibility: hidden; display: none }
/*************************************************************/	
/* Footer Items */	
/*************************************************************/
footer { width: 100%; position: relative; background-color: #000; height: 480px; z-index: 50; padding: 0px 0px 0 0px; }
.footercontent { width: 100%; margin: 0 auto; padding: 20px 35px 20px 35px }
.footercontent p { font-size: 14px; line-height: 20px; color: #fff }
#designer,
#designer:visited  {text-decoration:none;font-size: 14px; line-height: 20px; color: #666 }
#designer:hover {text-decoration:none; font-size:14px;color:#0FF;}
.footernav { float: right; margin-top: 0px; }
ul.nebennav { list-style-type: none; }
ul.nebennav li { display: block; height: auto; text-align: right; text-decoration: none; margin: 0; padding: 3px 0; }
ul.nebennav li a { text-decoration: none; font-size: 18px; font-weight: 300; color: #fff; opacity: 1.0; }
ul.nebennav li a:hover { text-decoration: none; color: #0FF; }
.googlekarte { width: 100%; height: 200px; }
.googlekarte iframe { width: 100%; }
.googlekarte_glas {position:relative; z-index: 999;background:transparent; height:200px; margin:-203px 5% 0 20%; width:75%}
.show-smart { display: none; }
.show-desk { display: block; }
.show-desk-inline { display: inline-block; }
/* scrollicon  Item   */
.scrollicon { text-align: center; text-decoration: none; width: 50px; height: 50px; border-radius: 2px; background-color: #fff; border: 2px solid #333; opacity: 0.7; position: fixed; z-index: 999; bottom: 20px; right: 4%; display: none; cursor: pointer; -webkit-transition: transform ease 0.8s; -moz-transition: transform ease 0.8s; -o-transition: transform ease 0.8s; transition: transform ease 0.8s; }
.scrollicon img { position: absolute; margin-top: 14px; left: 10px; }
}

@media screen and (min-width: 1024px) {
.sprachwahl { position: absolute; top: 12px; right: 2%; }
#kontakt-top {position:absolute; top: 45px; right: 2%;}
.menu_innerblock { display: block; margin: 0 ; padding: 0;/* width: 1024px;*/ }
#menu { padding: 0 40px; }
#menu ul li ul li a { text-align: center; }
article,
.textpart { display: block; /*width: 1024px; */margin: 0 0; padding-left: 40px; padding-right: 40px; }
.footercontent {/* width: 1024px;*/ margin: 0 0; padding: 20px 35px 20px 35px }

}
@media screen and (min-width: 1041px) {
.menu_innerblock { display: block; margin: 0 auto; padding: 0;width: 1024px;}
article,
.textpart { display: block; width: 1024px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
.footercontent { width: 1024px; margin: 0 auto; padding: 20px 35px 20px 35px }	
}

@keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}

/* Firefox < 16 */
/*@-moz-keyframes fadein { from {opacity: 0;}to{ opacity: 1;}
}*/

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein { from {
opacity: 0;
}
to { opacity: 1; }
}

/* Opera < 12.1 */
/*@-o-keyframes fadein { from {opacity: 0;}to{ opacity: 1;}
}*/

@keyframes bodysliderA { 0% {
opacity: 0;
}
30% {
opacity: 0;
}
33% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes bodysliderA { 0% {
opacity: 0;
}
30% {
opacity: 0;
}
33% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes bodysliderB { 0% {
opacity: 0;
}
63% {
opacity: 0;
}
66% {
opacity: 1;
}
97% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes bodysliderB { 0% {
opacity: 0;
}
63% {
opacity: 0;
}
66% {
opacity: 1;
}
97% {
opacity: 1;
}
100% {
opacity: 0;
}
}