@CHARSET "UTF-8";

/* 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,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{font-family:inherit;font-weight:200;font-size:100%;line-height:1em;color:#333;margin:0;padding:0;border:0;vertical-align:baseline}html{height:100%;line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}img,object,embed{max-width:100%}img{height:auto;}*{outline:0}
html {
    font-size: 100%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
    overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust:     100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
*,
*:before,
*:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
    -moz-box-sizing:    border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
    box-sizing:         border-box;
}

@font-face {
    font-family:'Conv_segoeui';
    src: url('fonts/segoeui.eot');
    src: local('☺'),
	url('fonts/segoeui.woff') format('woff'),
	url('fonts/segoeui.otf') format('opentype'),
	url('fonts/segoeui.svg#segoeui') format('svg');
    font-weight:normal;
    font-style:normal;
}


body { font-size: 100%; font-family: Conv_segoeui, Tahoma, sans-serif; letter-spacing: 1px; background: #fff; color: #333; text-align: left; overflow: hidden; }

#page { width:100%; margin:0; border:none; }

header { position: fixed; left: 0; top: 0; width: 100%; height: 10vh; background: #fff; text-align: left; z-index: 1; }

#wortmarke { position: relative; display: block; margin-left: 6rem; }
#wortmarke h1 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight: bold; float: left; color: #333; font-size: 1.2em; line-height: 2em; margin: 0; margin-right: 1em;  }
#wortmarke h2 { font-size: .8em; line-height: 2em; padding-top: .6em; }

#navi_desktop { position:absolute; top: .6em; right: 6em; }
#navi_desktop li { list-style-type: none; float:left; margin: 0 0 0 1em; }
#navi_desktop li a { font-size: .8em; }





/* MENÜ */

#nav_mobile { display: none; position: fixed; top: 0; right: 0; z-index: 1; }

.navibox { background: #fff; height: 100%; position: fixed; top: 0; right: -100vW; bottom: 0; width: auto; z-index: 1000; transition: right 500ms; }

.navi { list-style: none; margin: 30% 0 0 0; font-size: 1em; }
.navi li { text-align: right; margin: 1.5em 2em; }

.nav-trigger { position: absolute; clip: rect(0, 0, 0, 0); }

label[for="nav-trigger"] { cursor: pointer; position: absolute; top: .5em; right: 1em; z-index: 1001; width: 1.8em; height: 1.8em; }

label[for="nav-trigger"] span,
label[for="nav-trigger"] span:before,
label[for="nav-trigger"] span:after { position: absolute; top: 1em; height: .2em; width: 1.8em; background: #000; display: block; content: ''; transition: all 250ms ease-in-out; }

label[for="nav-trigger"] span:before { top: -.55em; right: 0; }
label[for="nav-trigger"] span:after { right: 0; bottom: 0; top: .55em; }

.nav-trigger:checked ~ label[for="nav-trigger"] span { background-color: transparent; }
.nav-trigger:checked ~ label[for="nav-trigger"] span:before,
.nav-trigger:checked ~ label[for="nav-trigger"] span:after { top: 0; }
.nav-trigger:checked ~ label[for="nav-trigger"] span:before { transform: rotate(45deg); }
.nav-trigger:checked ~ label[for="nav-trigger"] span:after { transform: rotate(-45deg); }
.nav-trigger:checked ~ .navibox { right: 0; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1); }









h1, h2, h3 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-weight: bold; }


a,
h2 a:hover,
h3 a:hover { color: #333; text-decoration: none; }
a:hover,
.aktiv { color: #333; text-decoration: none; background: #f90; }


#inhalt { position: relative; font-size: 1em; height: 90vh; margin-top: 10vh; margin-left: 10px; }




/* SLIDER */

.mCSB_draggerRail { width: 100%; height: 1em; }
.mCSB_dragger_bar { background: #f90; height: .8em; border-radius: .4em; margin: 0; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 1em; left: 0; }
.mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; }
.mCSB_scrollTools { position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; }
.mCSB_scrollTools .mCSB_draggerContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; }
.mCustomScrollBox { position: relative; height: 100%; max-width: 100%; outline: none; direction: ltr; }
.mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; z-index: 1; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; height: 100%; left: 0; }











.frame { line-height: 100%; overflow: hidden; }
.frame ul { list-style: none; margin: 0; padding: 0; height: 100%; display: inline-block; }
.frame ul li { float: left; height: 100%; margin: 0 1px 0 0; padding: 0; cursor: pointer; }
.scrollbar { position: absolute; bottom: 0; margin: 0 0 1em 0; height: .8em; background: transparent; line-height: 0; width: 100%; }
.scrollbar .handle { width: 100px; height: 100%; background: #f90; cursor: pointer; border-radius: .8em; }
.scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }





/* PROJEKTE */

#projekte { height: 90vh; display: none; }
#projekte li { position: relative; list-style-type: none; margin: 0; padding: 0; float: left; background: #fff; }

.bilder { display: inline-block; position: relative; }
.bilder li { list-style-type: none; margin-right: 1em; }
.bilder li .bild { height: 300px; }
.bilder li img { max-height: 100%; max-width: none; margin-right: 10px; }

#projekte.mitRand li:first-child { margin-left: 5.5em; }
#projekte li .titel { margin-top: .5em; }
#projekte li .titel h2 { font-size: .8em; margin: .5em 0; } 
#projekte li .titel p { font-size: .8em; line-height: 1em; }
#projekte li .subtitel p { font-size: .7em; line-height: 1em; }

#projekte li .text { display: none; position: absolute; width: 280px; height: auto; left: 6em; top: 6em; padding: 1em; margin: 0; background: #f9f9f9; color: #000; opacity: .9; }
#projekte li .text p { font-size: .7em; line-height: 1.2em; }


.btn_info { cursor: pointer; background: rgba(200, 200, 200, .5); width: 1.5em; height: 1.5em; color: white; padding: .5em .6em; border-radius: 50%; font-weight: bold; line-height: .5em; font-style: inherit; position: absolute; left: 0; bottom: 0;  margin: .5em; }



#loading { position: absolute; top: 50%; left: 50%; margin-left: -32px; margin-top: -32px; display: inline-block; width: 64px; height: 64px; }
#loading div { position: absolute; top: 27px; width: 11px; height: 11px; border-radius: 50%; background: #000; animation-timing-function: cubic-bezier(0, 1, 1, 0); }
#loading div:nth-child(1) { left: 6px; animation: loading1 0.6s infinite; }
#loading div:nth-child(2) { left: 6px; animation: loading2 0.6s infinite; }
#loading div:nth-child(3) { left: 26px; animation: loading2 0.6s infinite; }
#loading div:nth-child(4) { left: 45px; animation: loading3 0.6s infinite; }
@keyframes loading1 {
    0% {
	transform: scale(0);
    }
    100% {
	transform: scale(1);
    }
}
@keyframes loading3 {
    0% {
	transform: scale(1);
    }
    100% {
	transform: scale(0);
    }
}
@keyframes loading2 {
    0% {
	transform: translate(0, 0);
    }
    100% {
	transform: translate(19px, 0);
    }
}






#projekte li .textblock_erfolg,
#projekte li .textblock_impr { position: relative; margin: 0 3em 2em 0; width: 400px; }
#projekte li .textblock_impr { width: 300px; }
#projekte li .textblock_erfolg h2,
#projekte li .textblock_impr h2 { font-size: .9em; margin: 0; margin-bottom: .2em; float: left; }
#projekte li .textblock_erfolg h3,
#projekte li .textblock_impr h3 { font-size: .8em; font-weight: normal; line-height:1.2em; margin: 0 .8em 0 0; float:left; }
#projekte li .textblock_erfolg .preis { font-size: .8em; float: right; }
.clearer { width:100%; clear:both; }
#projekte li .textblock_erfolg p,
#projekte li .textblock_impr p { font-size: .8em; margin: 0; line-height: 1.2em; clear: both; }

#projekte li .textblock_impr small { font-family:Conv_segoeui, Tahoma, sans-serif; color: #000; font-size: .9em; line-height: 1em; margin: 0; }


#thumb { position:absolute; min-width:10px; height:10px; background:#f90; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }


#footer { background:#fff; width:100%; height:auto; position:fixed; bottom:0; }
#footer .widget_text { width:90%; margin:10px 80px; color:#999; font-size:11px; }





/*firefox zerschiesst die schrift*/
@-moz-document url-prefix() {
    body { font-family: Verdana, sans-serif; }

}

@media all
and (max-width: 1500px) {

}

@media all 
and (max-width: 1024px) 
{
    #mCSB_1_scrollbar_horizontal { opacity: 0; }
    
}

@media all 
and (max-width: 1024px) 
and (orientation: portrait)
{
    #wortmarke { margin-left: 1rem; }
    #navi_desktop { right: 1rem; }
    
    #projekte.mitRand li:first-child { margin-left: .5em; }
    
    #mCSB_1_scrollbar_horizontal { opacity: 1; }
    
}

@media all 
and (max-width: 1024px) 
and (orientation: landscape) 
{
    #wortmarke { margin-left: 1rem; }
    #navi_desktop { right: 1rem; }
    #inhalt { margin-top: 12vh; }
    
    #projekte.mitRand li:first-child { margin-left: .5em; }
}

@media all 
and (max-width: 812px) 
{
    #nav_mobile { display: initial; }

    #wortmarke { margin-left: 1rem; }

    #navi_desktop { display: none; }
    
    #projekte.mitRand li:first-child { margin-left: .5em; }
    
    #mCSB_1_scrollbar_horizontal { opacity: 0; }

}

@media all 
and (max-width: 440px) 
{
    #wortmarke h1 { float: none; }
    #wortmarke h2 { padding-top: 0; line-height: .1em; }

    .slide .titel,
    .slide .subtitel { width: 90vw; }
    
    #projekte.mitRand li:first-child { margin-left: 0; }
    #projekte li:last-child { margin-bottom: 3em; }
    .bilder li:last-child { margin-bottom: 0 !important; }
    #projekte li .text,
    #projekte li .textblock_erfolg,
    #projekte li .textblock_impr { left: 2.5vw; top: 2em; width: 92.5vw; }
    #projekte li .text { max-height: calc(80vh - 2em); overflow-y: scroll; }
    #projekte li .textblock_erfolg h3,
    #projekte li .textblock_impr h3 { float: none; margin: 0 .8em .5em 0; }

}