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

/*@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300);*/

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, center, dl, dt, dd, ol, ul, 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 { border: 0; font-size: 14px; font: inherit; vertical-align: baseline; margin: 0; padding: 0; line-height: 17px; outline:0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

ol, ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after { content: none }

table { border-collapse: collapse; border-spacing: 0 }

body { background: rgb(232,232,232); font-size: 13px; font-family: 'omnes-pro', Arial, sans-serif; letter-spacing: 0.3px; color: #000; 
-webkit-font-smoothing: antialiased;  
-webkit-text-size-adjust: 100%; 
/*font-smooth: always;
text-rendering: optimizeLegibility !important;*/
-moz-osx-font-smoothing: grayscale; 
}


body.ProjectPage { background: #fff; }
/* Main-Container Types */

.header-container { position:fixed; top: 0px; left: 0; z-index: 100; background: rgb(232,232,232); width: 100%; height: 117px; background: rgba(232,232,232,0.7);}
.header { max-width: 1065px; margin-left: auto; margin-right: auto; margin-top:30px; padding-left:15px; padding-right:15px;}
.logo { top: 20px; z-index:2000;  left: 20px; float: left; }
.logo a { display:block; width: 104px; height:40px; background-image:url(../images/kurzgestaltung-logo-vector-large.svg); }
.logo a:hover { background-image:url(../images/kurzgestaltung-logo-vector-large-red.svg); }

.nav, .navhide { font-size: 13px; margin-top: 26px; position: relative; float: right; }
.navhide { background: url(images/navhide.png) no-repeat center center; background-size: 10px 10px;  width:10px; height:20px; margin-left:20px; }
.navhide:hover { background: url(images/navhide-a.png) no-repeat center center; background-size: 10px 10px;  width:10px; height:20px; margin-left:20px; cursor:pointer; }
.navoff { background: url(images/navshow.png) no-repeat center center; background-size: 10px 10px;  width:10px; height:20px;}
.navoff:hover { background: url(images/navshow-a.png) no-repeat center center; background-size: 10px 10px;  width:10px; height:20px; cursor:pointer;}
.nav li {  font-size: 13px;  display: inline; text-transform: uppercase; margin-left: 7px; position:relative; line-height:11px; font-weight: 700; letter-spacing: 0.05px;  }
.nav li ul { display: none; position: absolute; left: -20px; top: 15px; background: rgb(232,232,232); padding: 10px 20px 20px;  }
.ProjectPage .nav li ul.subnav {background: #fff;} 
.nav li:hover ul { display: block; }
.nav li ul li { display: block; margin-left:0; line-height:20px; white-space:nowrap; font-weight: 400;  }
.nav li a.current, .nav li a.section, .nav a:hover { color: rgba(219,0,68,1); padding-bottom: 3px; }

.nav a { color: #000000; text-decoration: none; letter-spacing: 0.05ex; }

.whiteBG { background-color: rgba(255,255,255,0.7);}


.footer-container { width: 100%; height: 23px; float:left; }

footer { margin-left: auto; margin-right: auto; /*max-width: 1540px;*/ text-align: right; width: 100%; }

#bg { position: absolute; top: 0; left: 0; z-index: -1; max-width:100%; overflow:hidden;/*position: fixed; top: -50%; left: -50%; width: 100%; height: 100%;*/  }

#bg img { width: 100%; min-width: 1024px; }

/* ///// Content  Container*/
#content { margin-top: 160px; margin-bottom: 60px; max-width: 1065px; margin-left: auto; margin-right: auto; text-align: left; padding-left:15px; padding-right:15px; }
.HomePage #content, .IndexPage #content { margin-top: 107px; }
.ProjectPage #content { margin-top: 155px;}
#content .home, #content .index { margin-top: 42px; }
#content .project { margin-top: 31px; border-bottom: rgb(0,0,0) solid 5px; padding-bottom:25px; margin-bottom: 15px;  }
#content .content { margin-top: 51px; }
#content .basic div { width:100%;}
/*#home-wrapper,  .basic { margin-top: 115px; max-width: 1065px; margin-left: auto; margin-right: auto; text-align: left; }*/

/*#index-wrapper, #project-wrapper { margin-top: 110px; margin-left: auto; margin-right: auto; max-width: 1065px;   }*/
/* Tile Formats */

.home .grid-sizer, .projects1col .grid-sizer { width: 100%; }
.index .grid-sizer, .projects3col .grid-sizer, .content .grid-sizer { width: 312px;  }
.projects2col .grid-sizer { width: 525px; }

.project .projects1col, .project .projects2col, .project .projects3col { text-align: center;  }

.tile { float: left; }
.home .tile { margin-bottom: 32px; }
.content .tile { margin-bottom: 20px; }

.index .imgH { max-width: 312px; /*max-height: 444px;*/ position:relative; /* overflow: hidden;  background-color:#CCCCCC;*/ } /* horrizontale Bilder*/
.imgH img { max-height: 444px; max-width: 603px;   } /* horrizontale Bilder*/

.index .imgV { max-width: 312px; max-height: 908px; position:relative; /*overflow: hidden; background-color:#CCCCCC;*/ }/*  vertikale Bilder dopplete Höhe + 20px für Gutter/Margin*/
.imgV img { max-height: 908px; max-width: 603px; }

.index .tile { margin-bottom: 60px;}
/*.index .tile .info { position: absolute; opacity: 0; top: 0px; left: 0px; width: 100%; max-width: 302px; border: 5px solid rgb(219,0,68); margin-bottom: 20px; }
.index .tile a:hover { color: rgb(219,0,68); cursor:pointer; }*/
.index .tile .info { display:none;}

.index .tile a { display:block; padding-bottom:40px; border-bottom: 5px none; }
.index .tile a:hover {  color: rgb(219,0,68); cursor:pointer; border-bottom: 5px solid rgb(219,0,68); }

.home .tile .info { width: 100%; margin-bottom:12px; /*height:17px; */}
.home .tile { border-bottom: rgb(0,0,0) solid 5px;  margin-bottom: 54px; }
.home .tile a { color: #000; }
.home .tile a:hover {  color: rgb(219,0,68); }
.home .tile:hover  {  color: rgb(219,0,68); cursor:pointer; border-bottom: 5px solid rgb(219,0,68); }
.home .tile img { padding-bottom:40px; }

.tile img { display: block; width: 100%; }

.size1of1 { width: 100%; }
.size1of1 img { width: 100%; }
.ArticlePageHolder .size1of3 { width: 33.3333%; }


.size1of3 img {  position:relative;}
.size1of3h { width: 32%; }

.ProjectPage .size1of1 { width: 100%; margin-bottom: 15px; }
.ProjectPage .size1of2 {  max-width: 525px; margin-bottom: 15px;}
.ProjectPage .size1of3 { max-width: 312px; margin-bottom: 15px;} 



/* Typo Formats*/

h1, h2, p, ul, ol, li { text-align: left; }
h1/*, .article p*/ { font-weight: 700; }
h2/*, .article p, .article ul*/ { letter-spacing: 0.05ex; }
p, .article ul, .basic ul { font-weight: 400;  }
.pText p { padding-bottom:8px;}
.projectInfo a, .content a, .content a:visited { color: rgb(146,146,146); text-decoration: none; }
.index .tile a { color: #000; text-decoration:none;}
.content a:hover, .projectInfo a:hover { color: rgb(219,0,68); }

.article li, .basic li { list-style: none; padding-left: 10px; background: url(images/li-dot.png) no-repeat left 7px; }
.article .slider li { background: none; padding-left: 0px; }

.intro-text h1, h1 { font-weight: 300; font-size: 32px; line-height: 40px; max-width: 55%; /*min-height:62px; height:62px; */}
h1.title { font-weight: 700; text-transform: uppercase; }
h2.title, form h2, .article h2, .basic h2 { padding-top: 0px; text-transform: uppercase; font-weight: 700; }
h2.title .caption { font-weight:400; letter-spacing: 0.05ex;}
.home h2.title .caption { padding-left: 3px; }
p.caption { line-height: 20px; text-transform: uppercase; padding-bottom: 5px; }
p.info, .ProjectPage div.pText { padding-top: 16px; padding-bottom: 5px; padding-right: 10px; }

.index h2.title { padding: 0px 0px 10px; }
.index p.caption { padding-left: 10px; }

.article { padding-right: 10px; }
.article h2 { padding-bottom: 17px;}
.article h3, .basic h3 { font-weight: 600; padding-bottom: 17px; }
.article p { clear: both; }


/*//////// Project Page & Navigation */
.projectInfo { position:relative; }
.pInfo { float:left; max-width:50%;}

/*.pnav-wrapper { z-index: 10; height: 80px; }*/

.pNav { position:absolute; bottom:5px; right:0;  width: 50%;  }
.pNavBottom { position:relative; bottom:5px; right:0;  width: 100%;  }
#content a.prevBu, #content a.nextBu { width:30px; height: 19px; text-decoration: none; text-transform: uppercase; color: #000; font-weight: 700; line-height: 12px; float:right; text-align:right; clear: both; border:none; padding-top:1px; }
.prevBu span, .nextBu span { display:none; padding-right:20px;} 

.prevBu { background: url(images/leftButton.png) no-repeat right 4px; top: 0px; background-size: 11px 13px; }
.prevBu:hover { background: url(images/leftButton-a.png) no-repeat right 4px; top: 0px; background-size: 11px 13px; }

.nextBu { background: url(images/rightButton.png) no-repeat right 4px; top: 0px; background-size: 11px 13px; }
.nextBu:hover { background: url(images/rightButton-a.png) no-repeat right 4px; top: 0px; background-size: 11px 13px;}

/* ///////// Top Arrow Scroll */

.topBu { display:none; float: right;/* background: url(images/topButton.png) no-repeat center right;*/ width: 45px; height: 20px; cursor: pointer;  padding-top: 30px; margin-bottom: 0px; }

/* Colour Format & Overrides CMS */

.greyHeader { background:#B4B4B4; background-color: rgba(180,180,180,0.7);}
.grey, .grey .topBu, #dialog.grey { background-color:#B4B4B4; background-color: rgb(180,180,180); }

.nocol { background-color: transparent; }

/* Init for Fade In */

.transUI { opacity: 0; }



#Form_Form_CustomisedHeading { margin-bottom:22px;}





/* Reponsive Formats*/

@media only screen and (max-width: 768px) {

.header-container { height: 67px;  position: relative; }
.header { margin-top:15px;  }
.logo { left: 0;}
.navhide { margin-top:0; height: 10px; }
.navhide, .navhide:hover { background: url(images/navhide.png) no-repeat top right; background-size: 10px 10px;  width:30px; height:30px;  }
/*.navhide:hover { background: url(images/navhide.png) no-repeat top right; background-size: 10px 10px; width:30px; height:30px;}*/
.navoff, .navoff:hover { background: url(images/navshow.png) no-repeat top right; background-size: 10px 10px;   width:30px; height:30px;}
/* { background: url(images/navhide.png) no-repeat top right; background-size: 10px 10px;  width:30px; height:30px;}*/
.nav { position:absolute; left: 15px; top: 40px; width: calc(100% - 15px); background-color: #E8E8E8; padding-bottom:20px;}
.ProjectPage .nav { background-color:#fff;}
.nav li { display:block; float:none; line-height:25px; margin-left:0;}
.nav li:hover ul { display: none; }

.HomePage #content, .IndexPage #content { margin-top: 0px; }
#content .home, #content .index { margin-top: 32px; }
.intro-text h1, h1 { font-size:24px; line-height:28px; height:inherit; max-width:100%;}
.home .tile, .index .tile { margin-bottom:30px; border-bottom: 3px solid #000;}
.home .tile img/*, .index .tile img*/ { padding-bottom:20px; }
.index .tile a, .index .tile a:hover { padding-bottom:20px; border:none;}
 
.imgH img, .index .imgH { max-width: 758px; max-height: inherit; } 
.ProjectPage .size1of2 { max-width: 758px; margin-bottom: 15px;}
.ProjectPage .size1of3 { max-width: 758px; margin-bottom: 15px;} 

#content a.prevBu, #content a.nextBu { clear:none;}
#content a.prevBu { float:left;}

.ProjectPage #content { margin-top: 8px;}
#content .project { margin-top: 31px; padding-bottom:0; border-bottom: 3px solid #000; }
.pInfo { max-width:100%;}
.pNav { display:none; }
.project { margin-top: 0px; }
#content a.prevBu, #content a.nextBu { width:30px; height: 30px; }
.prevBu { background: url(images/leftButton.png) no-repeat left 4px; top: 0px; background-size: 11px 13px; }
.prevBu:hover { background: url(images/leftButton-a.png) no-repeat left 4px; top: 0px; background-size: 11px 13px; }

.projects2col .grid-sizer, .projects3col .grid-sizer, .index .grid-sizer, .content .grid-sizer { width: 100%;  }
.project .projects1col, .project .projects2col, .project .projects3col { margin-top: 15px;}


.IndexPage .size1of3 { width: 100%;  }
.ProjectPage .size1of1, .ProjectPage,  .ProjectPage .size1of3 { width: 100%; }
.index .tile .info { max-width: 728px; }


.ArticlePageHolder #content { margin-top:12px; }
#content .content { margin-top:15px;}
.ArticlePageHolder .size1of3, .ArticlePageHolder .size1of1 img  { width: 100%; }
.article { padding-bottom:30px; border-bottom: 3px solid #000; }
.article h2 { padding-bottom: 17px; }


}

@media only screen and (min-width: 769px) and (max-width: 1095px) {
	
.index .grid-sizer, .projects3col .grid-sizer, .content .grid-sizer  { width:312px; }
.imgH img, .index .imgH { max-width: 300px;}

.projects2col .grid-sizer { width:489px;  }
.ProjectPage .size1of2 {  max-width: 489px; margin-bottom: 15px;}
 
.ArticlePageHolder .size1of1 img  { width: 100%; }

}