html {font-size: 16px; height: 100%; width: 100% }

body  {
  -webkit-font-smoothing: antialiased;
  font-family:"Apercu Light", Calibri, sans-serif; font-size-adjust:0.508; font-weight:200; 
  -moz-osx-font-smoothing: grayscale;
  color: #888;
  background-color: #f8f8f8;
  letter-spacing: 0.0618em;
  line-height: 1.3em;
  text-rendering: optimizeSpeed;
  height: 100%;
  max-width: 100%;

}

.swiper-container,#swiper-padding,.work-item,.print,p img,#map-wrapper,.text {transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;}

a, a:active {color: #333; text-decoration: none; outline: none;  transition: color 0.2s ease; }
a:hover { border: none; color: #888;}

#ie8message a {color: #888; border-bottom: 1px solid}

ul {list-style-type: none;}

h1,h2,h3 {color: #333}
h1 {font-weight: normal; margin-bottom: 2.6em; display: inline-block; padding-bottom: 0}
h2 {font-weight: normal;  }
h3 {font-weight: normal; }

.fixed-wrapper {position: absolute;}

.page-wrapper {text-align: center;  padding-top: 6.4em; max-width: 100%;height: 100%}


.text { max-width: 48em; width: 100%; display: inline-block; padding: 0 3.2em 1.9em 3.2em; margin-top: -5px;  color: #888;  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.text2 { margin-bottom: 1.4em}





/*---------- MENUS ----------*/

.main {top: 0px;}
.shop {bottom: 0px;}

header {  
width: 100%;
z-index: 100;
position: fixed;
left: 0px;
top: 0px;
  transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}

.default {
  top: 0;
}
.fixed {
  top: -3.2em;
}


.menu,.menu-background {
  position: absolute;  
  height: 3.2em;
  text-align: center;
  top: 0px;
  width: 100%;

}
.menu {
  z-index: 100; 
  text-align: center;
  padding: 0.9em 1.2em;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.menu-background {
  z-index: 50; 
  background-color: #ffffff;
  opacity: 1;
}

.menu ul  {width: 100%; display: block;  -moz-box-sizing: border-box;
    box-sizing: border-box; display: inline-block; opacity: 1.5; }
.menu li {display: inline-block;}
.menu li a, #pandn a {border-bottom: none; color: #333;  transition: color 0.2s ease; }
.menu li a:not(.active a) {}
.menu li a:hover, #pandn a:hover {color: #888;}
.active a {color: #333;}

.index { position: absolute; width: 10em; left: 50%; margin-left: -5em}
.index-1 { position: absolute; width: 2em; left: 50%; margin-left: -1em; font-size: 0}

.info {float: left; width: 3.2em; text-align: left}
.shop {float: right; width: 3.2em; text-align: right }





#top,#bottom {width: 100%; height: 5.2em; position: fixed}
 
#top {top: 0;  z-index: 1;}
#bottom {bottom: 0; z-index: 1;}

#top:hover ~ header {top: 0; }
header:hover {top: 0}

#bottom:hover ~ footer {bottom: 0; }
footer:hover {bottom: 0}

/*---------- HOME PAGE ----------*/

.home {padding-top: 3.2em}

.swiper-container {
  width: 89.625em; max-width: 100%;
  height: 100%; position: relative; z-index: 10;   

} 

#swiper-padding {
  padding: 0;
  margin-bottom: 3.2em;
  height: 85%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 

}

.swiper-slide {
  overflow: hidden; 
  position: relative;
  min-height: 100%;

}    

.swiper-slide img {
    position: absolute;
    height: auto;
    min-width: 89.625em;
    max-width: 100%;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}


.arrow-left,.arrow-right {
position: absolute; 
z-index: 9999; 
top: 50%; margin-top: -0.8em;
padding: 0; 
border-radius: 50%; 
background-color: white;
opacity: 0.9;
line-height: 2.4em;
height: 2.4em; width: 2.4em;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family:'Calibri Light';
  vertical-align: text-top;
display: none;
}

.arrow-left {left: 1.6em;}
.arrow-right {right: 1.6em;}

#captions { 
width: 100%;  
margin-bottom: 2.4em; 
margin-top: 0.8em; 
padding: 0 1.6em;
min-height: 1.6em;
text-align: center;
-moz-box-sizing: border-box;
box-sizing: border-box; 
}

p.capt {
    width: 100%; 
    text-align: center;
    position: relative;
    z-index: 99;
    padding: 0;
    height: 1.6em;
-moz-box-sizing: border-box;
box-sizing: border-box; 
}

.d1 {display: block}
.d2,.d3,.d4 {display: none}



#container-work {
  padding: 0em 1.6em 0 1.6em;  
  text-align: left; 
  display: block;
  max-width: 96em;
  margin: 0 auto;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 

  }

.work-item,.large {
  -moz-box-sizing: border-box; box-sizing: border-box; 
  width: 20%; 
  display: inline-block; 
  padding: 0 1.6em 2.4em 1.6em; 
  vertical-align: top;
}

.small {
  width: 16.65%;   
  display: inline-block; 
  padding: 0 1.6em 2.4em 1.6em; 
  vertical-align: top;
}

.work-item img {width: 100%; height: auto; margin: 0; display: block;}
.work-item h3 { padding-top: 0.8em; height:1.6em;}

.work-item p {color:#888; display: none}
.work-item p,.work-item h3 {transition: color 0.2s ease;}
.work-item:hover h3 {color: #888;}
.work-item:hover p {color: #aaa;}


.labels {
  position: relative;
  height:3.9em;
}







/*---------- INFO ----------*/


#map-wrapper {display: inline-block; padding: 0 3.2em 3.2em 3.2em;-moz-box-sizing: border-box;
    box-sizing: border-box; }
#map-canvas {height: 600px; }


 

/*---------- SHOP ----------*/



a.img-link {border-bottom: none; display: block; }

a.img-link {text-align: center}

#container-shop {text-align: center; padding: 0em 1.6em 3.2em 1.6em;  display: inline-block;-moz-box-sizing: border-box;
    box-sizing: border-box; width: 100%; max-width: 96em;}

.print {display: inline-block; vertical-align: middle; padding: 0 1.6em; margin-bottom: 1.6em;-moz-box-sizing: border-box;
    box-sizing: border-box; text-align: center}

.print:hover h3 {color:#888;}
.print:hover {color:#aaa;}




.print img {padding-bottom: 0.8em; width: 100%}
#buy,#price { display:inline-block;}







/*---------- PROJECTS ----------*/

.project {padding: 6.4em 0 0 0; margin-bottom: 10em}



.project img{
  padding: 0 1.6em 1.6em 1.6em;
  margin:0 ;
width: 100%; max-width: 1127.2px;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
}



#map-wrapper {width: 100%; max-width: 1126px;}


.text div:empty {display: none}
.text p:empty {display: none}

#price {padding-top: 1.3em; margin-bottom: 1.3em}

#description2 {margin-bottom: 0}

footer {
  position: fixed;
  bottom:0em;
  left: 0px;
  width: 100%;
  height: 3.2em;
  z-index: 100;
    transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
}

.defaultF {
  bottom: -3.2em;
}
.fixedF {
  bottom: 0em;
}

#pandn,#pandn-background {
  bottom: 0px; 
  width: 100%;
  position: absolute;
  left: 0px;
  height: 3.2em;
}

#pandn { 
  z-index: 100;
  height: 3.2em;
  text-align: center;
  padding-top:0.9em; 
 -moz-box-sizing: border-box;
  box-sizing: border-box;}

#pandn-background{
  z-index: 50; 
  background-color: #ffffff;
  opacity: 0.9
}


#pagenav {}
#pagenav_mob {display: none}



#prev,#next {padding:0em 1.2em 0em 1.2em; bottom: 1em; border-bottom: none; color: #333; position: absolute; }
#prev {left: 0; }
#next {right: 0; }



#basket {border-bottom: none; color: #333; display: inline-block; position: absolute; left: 0px; width: 7em; left: 50%; margin-left: -3.5em; }


/*---------- MEDIA QUERIES ----------*/


@media only screen and (max-width : 1400px) {
  .work-item,.large {width: 25%}
  .small {width:20%;}
}

@media only screen and (max-width : 1150px) {
  .work-item,.large {padding: 0em 0.8em 1.6em 0.8em;}
  .small {padding: 0em 0.8em 0 0.8em;}
  #container-shop,#container-work {padding: 0 0.8em}
    #swiper-padding {padding: 0; margin-bottom: 1.6em}
    .home {padding-top: 3.2em}
}

@media only screen and (max-width : 1023px) {
  .work-item,.large {width: 33.3%; padding: 0em 0.8em 1.6em 0.8em;}
    .small {width: 25%;padding: 0em 0.8em 0em 0.8em;}
  #container-work {padding: 0 0.8em; }


}

@media only screen and (max-height : 600px) {
html {font-size: 12px;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;} 
}


@media only screen and (max-height : 840px) {
.swiper-slide img{min-width: 68em}
}

@media only screen and (max-width : 600px) {
html {font-size: 12px;-webkit-text-size-adjust: none;-webkit-font-smoothing: antialiased;} 

#container-work {padding: 0 0.4em}
.swiper-slide img {min-width: 60em}
.swiper-container {height: 100%}
#swiper-padding {height: 30em; margin-bottom: 0.4em}

#pagenav {display: none}
#pagenav_mob {display: block}


#description2 {margin-top: 1.2em;margin-bottom: 0em}
	
.project {padding:0; padding-top: 6.4em;}

.project img{padding: 0.4em 0.8em;}

.text { padding:0 0.8em 1.9em 0.8em; }
	.text2 {margin-bottom: 1.8em}
	
.labels {text-align: center}

.work-item,.large {width: 50%; padding: 0.4em}
.small {width: 33.3%}
.work-item p {display: none}
.work-item img {margin: 0 0 0.4em}
.work-item h3 {padding-top: 0.4em; }



.info-container {margin: 0.8em;}
.info-container p { padding: 0 1.6em;}


.menu {padding: 0.9em 0.8em;}
.menu ul {padding: 0 0 0 0}
.info {width: 2.4em;}



#prev,#next { }

}

@media only screen and (min-height : 1100px) {
#swiper-padding {height: 70%}
}