/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}

@charset "UTF-8";

/* Kleine Monitore*/

body { background: none repeat scroll 0 0 #fff; margin:0; padding:0; font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif; color:#888; }
img { max-width:100%; width:auto\9; height:auto; vertical-align:middle; border:0; -ms-interpolation-mode:bicubic; }

#maincontainer { margin:0 auto; width:90%; /*border:1px solid red;*/ }
.wrapper { width:100%; margin:0 auto; /*border:1px solid green;*/ }
.wrapper:after{display:table;content:"";clear:both;}
.center { display: flex; align-items: center; justify-content: center; }

#logo { width:100%; }

/*slider*/
.sliderbox {position:relative;}
#slider_nav { margin:0; margin-bottom:1em; padding:0; list-style-type: none; overflow:hidden; display:none; font-size:0.6em; line-height:1.1em; }
#slider_nav  li { margin:0; padding:0; display:inline-block; text-align:center; }
#slider_nav li a { background:#666; display:block; padding:0px 4px; text-decoration:none; color:#fff; border-radius:10px; }
#slider_nav li.current a { background-color:#fff; }
.slider_offstage {visibility:hidden;display:none;}
.slider_default {visibility:visible;}
.slider { z-index:3; position:absolute; left:0px; top:93%; width:100%; height:2em; }

.pull { display:block; float:right; }
/* navigation */
#navigation { font-weight:400; font-size:1.2em; letter-spacing:0.1em; line-height:2.5em; color:#666; vertical-align:middle; z-index:100; background:0; border-bottom:2px solid #fff; }
#navigation div.mainnavigation { display:block; border-top:2px solid #d2d2d2; }
#navigation div.mainnavigation a { color:#666; }
#navigation div.mainnavigation a:hover { color:#000; }
#navigation div.mainnavigation span.menu_item { padding-left:5%; }
nav { height:0; overflow:hidden; transition:height .2s ease-in-out; }
.nav-toggle { display:block; cursor:pointer; text-decoration:none; }
#nav-open:target .nav-closed { display:block; }
.nav-closed, #navi-closed:target .nav-closed, #nav-open:target .nav-open { display:none; }

/*font*/
h1 { color:#b29146; font-size:30px; font-weight:300; padding:0 0 10px 0; }
.intro p { font-size:1.5em; font-weight:300; padding:0 0 1em 0; }
h2 { color:#b29146; font-size:30px; font-weight:300; padding:0 0 0.5em 0; }
.surfaces p { font-size:1.5em; font-weight:300; padding:0 0 1em 0; }
.surfaces h2 { padding:1em 0 0.5em 0; }
.description p { font-size:1.5em; font-weight:300; padding:0 0 2em 0; }
.impressum p { font-size:1.5em; font-weight:300; padding:0 0 1em 0; }
/*.impressum p a { text-decoration:none; color:#436dba; }*/
/*.impressum p a { text-decoration:none; color:#ff9900; }*/
.impressum p a { text-decoration:none; color:#00b0dc; }
.impressum p strong { font-weight:500; }
.impressum ul { list-style:disc; font-size:1.5em; font-weight:300; padding:0 0 1em 1em; }
.disclaimer h2 { margin:1em 0 0 0; }
/*content*/
.intro { padding:1.2em 0 1.2em; }
.fotos { margin:0 0 1em 0; }
.hochformat { width:25%; float:left; }
.querformat { width:50%; float:left; }
.grey { background:#eceded; }
.surfaces { width:80%; }
.surfaces h2, .surfaces p { text-align:center; width:100%; }

.texturemini { display:block; }
.texturemidi { display:none; }
.texturelarge { display:none; }

/* surfaces*/
.surfaces span { display:inline-block; width:50px; height:50px; border-radius:25px; margin:1em; }

.s001 { background-image: url('../images/s_001.jpg'); }
.s002 { background-image: url('../images/s_002.jpg'); }
.s003 { background-image: url('../images/s_003.jpg'); }
.s004 { background-image: url('../images/s_004.jpg'); }
.s005 { background-image: url('../images/s_005.jpg'); }
.s006 { background-image: url('../images/s_006.jpg'); }
.s007 { background-image: url('../images/s_007.jpg'); }
.s008 { background-image: url('../images/s_008.jpg'); }
.s009 { background-image: url('../images/s_009.jpg'); }
.s010 { background-image: url('../images/s_010.jpg'); }
.s011 { background-image: url('../images/s_011.jpg'); }
.s012 { background-image: url('../images/s_012.jpg'); }
.s013 { background-image: url('../images/s_013.jpg'); }
.s014 { background-image: url('../images/s_014.jpg'); }
.s015 { background-image: url('../images/s_015.jpg'); }
.s016 { background-image: url('../images/s_016.jpg'); }
.s017 { background-image: url('../images/s_017.jpg'); }
.s018 { background-image: url('../images/s_018.jpg'); }
.s019 { background-image: url('../images/s_019.jpg'); }
.s020 { background-image: url('../images/s_020.jpg'); }
.s021 { background-image: url('../images/s_021.jpg'); }
.s022 { background-image: url('../images/s_022.jpg'); }
.s025 { background-image: url('../images/s_025.jpg'); }
.s026 { background-image: url('../images/s_026.jpg'); }

/* footer */
.footer { margin-top:2em; }
.footer .wrapper { background:#eceded; text-align:center; padding:1.5em 0; }
.footer .wrapper p { padding-bottom:1em; }
.footer .wrapper p a { color:#666; }
.footer .wrapper p a:hover { color:#000; }

@media screen and (max-width: 766px) {
#nav-open:target nav { height:13em; }
}

@media only screen and (max-width : 767px) and (orientation : landscape ) {

#logo { width:60%; }
.pull { display:none; }   
/* navigation */
#navigation { display:table; font-size:1.2em; letter-spacing:0; line-height:2.5em; color:#666; vertical-align:middle; z-index:100; background:#eceded; border-bottom:2px solid #fff; width:100%; }
#navigation div.mainnavigation { display:table-cell; float:none; width:auto; text-align:center; border-top:0; }
#navigation div.mainnavigation div.spacer { height:2.5em; width:100%; border-left:2px solid #fff; }
#navigation div.mainnavigation a { color:#666; }
.nav-toggle {display:none !important;}
nav { display:block !important; height:auto; }
/*Content*/
.intro { width:80%; float:right; }
.texture { width:5em; }
    
.texturemini { display:none; }
.texturemidi { display:block; }
.texturelarge { display:none; }
    
/* footer */
.footer { margin-top:3em; }
.footer .wrapper { padding:0.5em 0; }
.footer .wrapper .right p { float:right; text-align:right; padding-right:1em; width:25%; }
.footer .wrapper .left p { float:left; text-align:left; padding-left:1em; width:25%; }
.footer .wrapper:after{display:table;content:"";clear:both;}
    
}

/* DESKTOP */
@media only screen and (min-width : 768px) {

#logo { width:60%; }
.pull { display:none; }
/* navigation */
#navigation { display:block; font-size:1.2em; letter-spacing:0; line-height:2.5em; color:#666; vertical-align:middle; z-index:100; background:#eceded; border-bottom:2px solid #fff; }
#navigation div.mainnavigation { display:block; float:left; width:25%; text-align:center; border-top:0; }
#navigation div.mainnavigation div.spacer { height:2.5em; width:100%; border-left:2px solid #fff; }
#navigation div.mainnavigation a { color:#666; }
.nav-toggle {display:none !important;}
nav { display:block !important; height:auto; }
    
/*Font*/
h1 { font-size:36px; }
.intro p { font-size:1.8em; font-weight:300; }
/*Content*/
.intro { width:80%; float:right; padding:1em 0 1em 0; }
.left { float:left; }
.right { float:right; }

.texturemini { display:none; }
.texturemidi { display:block; }
.texturelarge { display:none; }
    
/* footer */
.footer { margin-top:3em; }
.footer .wrapper { padding:0.75em 0 0.25em; }
.footer .wrapper .right p { /*float:right;*/ text-align:right; padding-bottom:0.5em; padding-right:1em; }
.footer .wrapper .left p { float:left; text-align:left; padding-bottom:0.5em; padding-left:1em; }
.footer .wrapper:after{display:table;content:"";clear:both;}
    
}   

/* DESKTOP ab 1010px */
@media only screen and (min-width: 1010px)  {
    
/*Font*/
h1 { font-size:48px; padding:20px 0; }
.intro p { font-size:1.8em; font-weight:300; }
/*Content*/
.intro { width:80%; float:right; }
.fotos { width:55%; margin:0 0 2em 0; }
.description { width:40%; margin:1em 0 0 0; }
    
.texturemini { display:none; }
.texturemidi { display:none; }
.texturelarge { display:block; }


.surfaces span { width:80px; height:80px; border-radius:40px; margin:0.75em; }
    
.impressum { width:48%; }

}

/* DESKTOP ab 1500px */
@media only screen and (min-width: 1500px)  {

.surfaces span { width:102px; height:102px; border-radius:51px; margin:1.5em; }

}

/* DESKTOP ab 2000px */
@media only screen and (min-width:2000px)  {

#maincontainer { width:1900px; }
 
}