@font-face {font-family:'Open Sans';font-style:normal;font-weight:300;src:url('../fonts/open-sans-300.woff2') format('woff2'), url('../fonts/open-sans-300.woff') format('woff');}
@font-face {font-family:'Open Sans';font-style:italic;font-weight:300;src:url('../fonts/open-sans-300-italic.woff2') format('woff2'), url('../fonts/open-sans-300-italic.woff') format('woff');}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:400;src:url('../fonts/open-sans-400.woff2') format('woff2'), url('../fonts/open-sans-400.woff') format('woff');}
@font-face {font-family:'Open Sans';font-style:italic;font-weight:400;src:url('../fonts/open-sans-400-italic.woff2') format('woff2'), url('../fonts/open-sans-400-italic.woff') format('woff');}
@font-face {font-family:'Open Sans';font-style:normal;font-weight:700;src:url('../fonts/open-sans-700.woff2') format('woff2'), url('../fonts/open-sans-700.woff') format('woff');}
@font-face {font-family:'Open Sans';font-style:italic;font-weight:700;src:url('../fonts/open-sans-700-italic.woff2') format('woff2'), url('../fonts/open-sans-700-italic.woff') format('woff');}

html {width:100%;height:100%;margin:0;}
*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-text-size-adjust:none;-moz-text-size-adjust: none;}

body,h1,h2,h3,h4,h5,h6,p,table,td,form,img,ul,ol,li,dl,dt,dd {margin:0;padding:0;border:0;}

body, table, td, input, select, textarea, button {font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;color:#444;}

input, textarea, button {-moz-appearance:none;-webkit-appearance:none;appearance:none;}
input, textarea, button, select {border:0;outline:0;border-radius:0;}

img {max-width:100%;height:auto;}
a {border:0;outline:0;text-decoration:none;}

i, em {font-style:italic;}
b, strong {font-weight:700;}
u {text-decoration:underline;}
s {text-decoration:line-through;}

.clearfix:after, h1:after, .columns:after {content: ".";clear:both;display:block;visibility:hidden;height:0;font-size:0;}

/*-------------------------*/

/*BODY*/

body {background:#525252 url("img/bg.jpg") no-repeat center top fixed;background-size:cover;text-align:center;}

/*CONTAINER*/

#outerContainer {position:relative;height:100%;margin:0 auto;padding:0;text-align:left;}
#innerContainer {position:relative;margin:0;}
#mainPage {position:relative;padding:0 0 2px;background-color:rgba(255,255,255,0.9);}
#iheader, #content, #ifooter {margin:0 auto;}

/*TOPLINE*/

#topline {position:relative;min-height:24px;padding:8px 12px;background-color:#EF7D00;}
#topline, #topline a, #topline em {font-style:normal;font-size:12px;color:#FFF;text-transform:uppercase;letter-spacing:0.05em;text-decoration:none;}
#topline a:hover {text-decoration:underline;}

/*HEADER*/

#header {position:relative;background:url('img/line.png') repeat-x center bottom;}

#iheader {position:relative;min-height:160px;padding-top:41px !important;padding-bottom:46px !important;}

#logo {position:relative;}
#logo img {display:block;height:auto;}

#username {z-index:1;position:absolute;top:24px;right:24px;width:calc(50% - 24px);padding-right:48px;text-align:right;}
#username span {display:none;}
#username a {color:#444;text-decoration:none;}
#username a.logout {position:absolute;top:-8px;right:0px;display:block;width:36px;height:36px;background:#666 url('img/icons.png') -150px -6px no-repeat;border-radius:50%;transition:background-color 0.5s;}
#username a.logout:hover {background-color:#BBB;}

#icons {line-height:0;}
#icons a {display:inline-block;width:44px;height:44px;background:#EF7D00 url('img/icons.png') no-repeat;border-radius:50%;transition:background-color 0.5s;}
#icons a.home {background-position:-2px -2px;}
#icons a.projects {background-position:-50px -2px;}
#icons a.profile {background-position:-98px -2px;}
#icons a:hover {background-color:#F7BE7F;}
#icons a + a {margin:0 0 0 32px;}

/*CONTENT*/

#content {padding-top:32px !important;padding-bottom:64px !important;}

/*FOOTER*/

#footer {background-color:#444;margin:0 2px 0px;}
#ifooter {padding-top:20px !important;padding-bottom:20px !important;}
#ifooter a {display:inline-block;}
#footer #mint img {display:block;width:118px;height:78px;}
#footer #kreativpol a {padding:4px 8px;text-decoration:none;background-color:transparent;color:#FFF;font-size:16px;font-weight:700;transition:background-color 0.5s;}
#footer #kreativpol a i {padding-right:8px;font-size:0.8em;font-weight:400;}
#footer #kreativpol a:hover {color:#FFF;background-color:#EF7D00;}

/*BOTTOMLINE*/

#bottomline {display:block;text-align:center;font-size:0.9em;background-color:#444;margin:1px 2px 0;padding:8px 0;color:#BBB;}
#bottomline a {color:#BBB;text-decoration:none;padding:0 8px}
#bottomline a:hover {color:#FFF;text-decoration:underline;}

/* ELEMENTE ---------------------------------------------*/

/*HEADLINES*/

h1, h5, h6 {word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;}
h1 {margin:0 0 24px;font-size:28px;line-height:140%;font-weight:400;color:#444;text-transform:uppercase;}
h5 {margin:0 0 24px;font-size:28px;line-height:130%;font-weight:400;color:#EF7D00;}
h6 {margin:0 0 24px;font-size:20px;line-height:140%;font-weight:400;color:#444;text-transform:uppercase;position:relative;}
h5 span, h6 span {display:block;font-size:0.8em;text-transform:none;}
h6 b {display:block;margin-bottom:12px;font-weight:400;font-size:0.75em;line-height:130%;color:#EF7D00;text-transform:none;}
h6 em {padding-left:12px;font-style:normal;font-size:14px;font-weight:400;}
h6 a.back {position:relative;display:inline-block;width:2px;margin-right:44px;color:inherit;text-decoration:none;}
h6 a.back:before {content:"";display:block;position:absolute;top:-3px;left:0;width:36px;height:36px;border-radius:50%;background:#EF7D00 url("img/icons.png") -246px -6px no-repeat;transition:background-color 0.5s;}
h6 a.back:hover:before {background-color:#F7BE7F;}

/*FORMULAR*/

.form + .form {margin-top:24px;}
.form .formtitle {background-color:#DDD;padding:12px;font-size:16px;font-weight:700;}
.form .formbox {background-color:#DDD;padding:12px;}
.form .formtitle + .formbox,
.form .formbox + .formbox,
.form .formtitle + .message,
.form .formbox + .message {margin-top:2px;}
.form .formbox dl {width:100%;}
.form .formbox dl + dl {margin-top:8px;}
.form .formbox dt {display:block;font-size:0.9em;color:#666;}
.form .formbox dt:empty {margin-bottom:0px !important;}
.form .formbox dd {display:block;margin-top:4px;vertical-align:top;}
.form .formbox dt.ib, .formbox dd.ib {display:inline-block !important;vertical-align:baseline;padding-right:4px}
.form input.readonly {background-color:#EFEFEF;}

.form .message {display:none;}
.form .message .formbox {margin-bottom:2px;}
.form .message .formbox > div {padding:6px 12px;background-color:#FFF;color:#EF7D00;}
.form .message span {font-weight:700;}
.form .message ul {margin:0 0 0px 17px;padding:0 0 0 10px;list-style:circle;}
.form .message ul li {margin:4px 0 0;padding-left:4px;line-height:130%;}

/*FORMULARFELDER*/

input, select, textarea {padding:5px 7px;border:1px solid #BFBFBF;outline:0;}
input[type="text"], input[type="password"], textarea {width:100%;}
input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {border:1px solid #EF7D00;}

div.password {position:relative;margin:0;vertical-align:baseline;}
div.password input {padding-right:36px;}
div.password em {position:absolute;top:50%;right:6px;margin-top:-12px;width:24px;height:24px;cursor:pointer;background:url('img/icons.png') no-repeat;}
div.password em.text {background-position:-540px -12px;}
div.password em.text:hover {background-position:-588px -12px;}
div.password em.password {background-position:-444px -12px;}
div.password em.password:hover {background-position:-492px -12px;}

/*OVERBOX*/

.ob-container {display:none;z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;}
.ob-blocker {z-index:1;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);}
.ob-box {z-index:2;position:relative;width:848px;margin:50px auto 50px;padding:48px 16px 16px;background-color:#FFF;text-align:left;}
.ob-title {position:absolute;top:16px;left:16px;line-height:120%;font-size:14px;color:#444;font-weight:700;text-transform:uppercase;}
.ob-closer {position:absolute;top:12px;right:16px;width:24px;height:24px;background:url('img/icons.png') -636px -12px no-repeat;cursor:pointer;}
.ob-loader {display:none;z-index:20;position:absolute;top:48px;left:0;width:100%;height:100%;background:#FFF url('img/loading64.gif') center 30% no-repeat;}
.overbox {position:relative;display:none;}
.overbox .form_message {display:none;margin:0 0 20px;padding:10px;background-color:#FFF;border:1px solid #EF7D00;}
.overbox * + .form_message {margin-top:20px;}
.overbox .formbox {background-color:#EFEFEF;margin-top:2px;padding:16px;}
.overbox .formbox span.term {display:block;margin-bottom:8px;font-size:0.9em;}
.overbox .formbox span.term.error {color:#EF7D00;}
.overbox .buttons {position:relative;margin-top:12px;}

/*BUTTONS*/

.btn {display:inline-block;padding:11px 20px;background-color:#EF7D00 !important;color:#FFF;border:0;outline:0;text-decoration:none;font-size:14px;line-height:14px;cursor:pointer;transition:background-color 0.5s;}
input[type="submit"].btn, input[type="button"].btn {width:auto;height:32px;padding:7px 20px;border:0;}
.btn.icon {background:#EF7D00 url('img/btn_icons.png') 0 0 no-repeat;width:32px;height:32px;padding:0;line-height:32px;}
.btn.icon.edit {background-position:0 0;}
.btn.icon.delete {background-position:-96px 0;}
.btn.icon.add {background-position:-64px 0;}
.btn.icon.search {background-position:-128px 0;}
.btn.icon.refresh {background-position:-160px 0;}
.btn.icon.none {background-image:none;}
a.btn:hover {text-decoration:none;}
.btn:hover {background-color:#F7BE7F !important;}

/* SEITE: PROJEKTE ---------------------------------------------*/

#projects .projects {}
#projects .project {float:left;}
#projects .project .box {position:relative;cursor:pointer;overflow:hidden;}
#projects .project a {display:block;text-decoration:none;}
#projects .project .imgbox {position:relative;width:100%;}
#projects .project .img {position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:#FFF;overflow:hidden;}
#projects .project .img .title {
	z-index:2;position:absolute;top:0;left:0;width:100%;max-height:100%;padding:4px 8px;font-size:14px;font-weight:400;color:#FFF;overflow:hidden;background-color:rgba(0,0,0,0.5);
	word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;
	}
#projects .project .img img {z-index:1;display:block;margin:0 auto;position:relative;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);}
#projects .project .img span.dummy {display:block;width:100%;height:100%;background:url("img/images-dummy.png") center 60% no-repeat;}
#projects .project .info {height:34px;margin-top:1px;padding:4px 8px;text-align:right;color:#444;font-size:13px;background-color:#DDD;border-bottom:2px solid #EF7D00;}
#projects .project .info span {padding-left:8px;}
#projects .project .info span b {color:#EF7D00;font-size:16px;}
#projects .project .blocked, 
#projects .project .selected {z-index:4;position:absolute;left:12px;bottom:10px;width:48px;height:48px;background:#9CB935 url('img/icons.png') -338px -2px no-repeat;border:2px solid #FFF;border-radius:50%;}
#projects .project .blocked {width:32px;height:32px;background-color:#E2000B;background-position:-394px -10px;}
#projects .project .view {z-index:3;position:absolute;width:100%;height:calc(100% - 34px);top:-100%;left:0;background:rgba(255,255,255,0.75) url('img/images-hover.png') center 66% no-repeat;transition:top 0.5s;}
#projects .project .box:hover .view {top:0;}

/*PAGING*/

.paging {margin:40px 0 0;display:table;width:100%;}
.paging > span {display:table-cell;vertical-align:top;}
.paging span.prev {text-align:left;}
.paging span.select {width:100%;text-align:center;}
.paging span.select span {padding:6px 0;}
.paging span.select span i {display:inline-block;padding:0 8px;font-style:normal;}
.paging span.next {text-align:right;}
.paging a {display:block;width:36px;height:36px;overflow:hidden;background:#EF7D00 url("img/icons.png") -246px -6px no-repeat;text-decoration:none;border-radius:50%;transition:background-color 0.5s;}
.paging .next a {padding-left:0;padding-right:9px;background-position:-294px -6px;}
.paging a:hover {background-color:#F7BE7F;}
.paging a.passive {background-color:#DDD;}


/* SEITE: PROJEKT ---------------------------------------------*/

#project .images .boxes {}
#project .image {float:left;}
#project .image .box {position:relative;overflow:hidden;}
#project .image a {display:block;text-decoration:none;}
#project .image .imgbox {position:relative;width:100%;}
#project .image .img {position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.5);overflow:hidden;}
#project .image img {display:block;margin:0 auto;position:relative;top:50%;-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);}

#project .infobox {}
#project .info {float:left;}
#project .info .outer {padding:20px;background-color:#DDD;text-align:center;}
#project .info .inner {height:50px;padding-top:8px;color:#EF7D00;font-size:16px;background-color:#FFF;}
#project .info .inner span {padding-right:16px;}
#project .info .inner b {font-size:24px;}
#project .info.empty .inner {background-color:transparent;}

#project button[id|="selector"] {display:block;width:100%;height:50px;padding:0px 24px;border:0;font-size:18px;background-color:#EF7D00;color:#FFF;cursor:pointer;transition:background-color 0.5s;}
#project button[id|="selector"]:hover {background-color:#F7BE7F;}
#project button#selector-selected {color:#444;background-color:transparent;cursor:default;text-transform:uppercase;transition:none;}
#project button#selector-selected span {position:relative;padding-left:60px}
#project button#selector-selected span:after {content:"";display:block;position:absolute;top:-12px;left:0px;width:48px;height:48px;background:#9CB935 url('img/icons.png') -338px -2px no-repeat;border:2px solid #FFF;border-radius:50%;}

/* SEITE: PROFIL ---------------------------------------------*/

#profile #projects {margin-top:30px;}

/* SEITE: STARTSEITE ---------------------------------------------*/

#startpage #startbild {margin-bottom:40px;}
#startpage #startbild div {}
#startpage #startbild img {display:block;max-width:100%;}

/* SEITE: X ---------------------------------------------*/

/* Startseite/Profil */

#selectstatusbox .formbox {position:relative;}
#selectstatusbox .formbox.info:after,
#selectstatusbox .formbox.select:after,
#selectstatusbox .formbox.blocked:after {content:"";position:absolute;top:12px;right:10px;display:block;width:20px;height:20px;border:2px solid #FFF;border-radius:50%;background:#9CB935 url("img/icons.png") -688px -16px no-repeat;}
#selectstatusbox .formbox.blocked:after {background-color:#E2000B;background-position:-736px -16px;}
#selectstatusbox .formbox.info:after {background-color:#FFD101;background-position:-784px -16px;}
#selectstatusbox .formbox span {display:inline-block;width:57px;font-weight:700;}
#selectstatusbox .formbox i {display:none;}
#selectstatusbox .formbox.info i,
#selectstatusbox .formbox.select i,
#selectstatusbox .formbox.blocked i {display:inline;float:right;padding-right:26px;padding-top:3px;line-height:1.1em;font-size:0.9em;font-weight:700;color:#666;}
#selectstatusbox .formbox.class i {font-style:italic;font-weight:700;}
#selectstatusbox .formbox dl[class^="time"] {margin-top:8px;text-align:right;color:#888;}
#selectstatusbox .formbox dl[class^="time"] + dl[class^="time"] {margin-top:2px;}
#selectstatusbox .formbox dl[class^="time"] em {display:inline-block;width:28px;font-style:normal;font-size:0.9em;text-align:left;}
#selectstatusbox .formbox dl.time-2 {font-size:0.9em;}

#buttonbox .btn {display:block;width:100%;text-align:center;text-transform:uppercase;}
#buttonbox .btn + .btn {margin:8px 0 0;}

/* SEITE: IMPRESSUM ---------------------------------------------*/

#kpbox {margin-top:24px;padding-top:24px;border-top:2px solid #EF7D00;}

/* TEXT ---------------------------------------------*/

.text, .text table th, .text table td {
	font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;color:#444;
	word-break:break-word;word-wrap:break-word;overflow-wrap:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto;
	}

.text a {color:#EF7D00;text-decoration:none;outline:0;}
.text a:hover {text-decoration:underline;}

.text ol, .text ul {display:block;margin:0;padding:0 0 0 27px;text-align:left;overflow:hidden;}
.text ol {padding-left:36px;}
.text li {position:relative;padding-left:4px;}

.text table {text-align:left;width:100%;border-collapse:collapse;}
.text th, .text td {text-align:left;}

.text h2, .text h3 {line-height:130%;}
.text h2 {font-size:24px;font-weight:400;color:#EF7D00;}
.text h3 {font-size:20px;font-weight:400;color:#EF7D00;text-transform:uppercase;}
.text h4 {font-size:16px;font-weight:700;}

.text * + p {margin-top:8px;}
.text * + ul,
.text * + ol,
.text ul + *,
.text ol + * {margin-top:16px;}
.text ul ul, 
.text ol ol, 
.text ul ol, 
.text ol ul {margin:0;}
.text li + li {margin-top:4px;}
.text h2 + * {margin-top:28px;}
.text h3 + * {margin-top:20px;}
.text h4 + * {margin-top:12px;}
.text * + h2 {margin-top:36px;}
.text * + h3 {margin-top:28px;}
.text * + h4 {margin-top:20px;}

/* RD ---------------------------------------------*/

/*GRID (fix)*/

#outerContainer {min-width:320px;}
.columns {margin:0 -20px;}
div[class|="col"], .col {padding:0 20px;float:left;}
div[class|="col"] + div[class|="col"] {margin-top:32px;}
.subcolumns {margin:0 -20px 0;}
.scol {padding:0 20px;float:left;}
.scol + .scol {margin-top:24px;}
#projects .projects {margin:-40px -20px 0;}
#projects .project {margin-top:40px;padding:0 20px;}
#project .images > .boxes {margin:-12px -12px 0;}
#project .image {margin-top:12px;padding:0 12px;}
#project .infobox {margin:48px -20px 0;}

/*RD: START*/

#mainPage {margin:0;}
#outerContainer {max-width:480px;}
#iheader, #content, #ifooter {max-width:380px;padding:0 30px;}
#topline {text-align:center;}
#logo {padding-bottom:24px;}
#logo img {margin:0 auto;}
#icons {position:relative;text-align:center;}
.col, .col-2, .col-4, .col-3 {width:100%;}
.scol {width:100%;}
#projects .project {width:100%;}
#project .image {width:100%;}
#project .info {width:100%;padding:0 20px;}
#project .info + .info .outer {padding-top:0;}
#project .info.empty {display:none;}
#ifooter div {width:100%;display:block;text-align:center;}
#ifooter div + div#kreativpol {margin-top:20px;}

@media screen and (min-width:540px) and (max-width:599px) {
	#mainPage {margin:20px 0;}
	}
@media screen and (min-width:600px) {
	#outerContainer {max-width:800px;}
	#iheader, #content, #ifooter {max-width:760px;padding:0 40px;}
	#topline {text-align:left;}
	#username span {display:block;}
	#logo {padding-bottom:0;}
	#logo img {margin:0;}
	#icons {position:absolute;right:40px;bottom:18%;}
	div[class="col-3"] + div[class="col-3"] {margin-top:0;}
	.col-3 {width:50%;}
	#projects .project {width:50%;}
	#project .info {width:50%;}
	#project .info  {padding:0 0 0 20px;}
	#project .info + .info {padding:0 20px 0 0;}
	#project .info + .info + .info {padding:0 20px 0;width:100%;}
	#project .info + .info .outer {padding:20px;}
	#project .info + .info + .info .outer {padding-top:0;}
	#ifooter div {display:inline-block;vertical-align:middle;}
	#ifooter #mint {width:50%;text-align:left;}
	#ifooter #kreativpol {width:100%;text-align:right;margin-top:0 !important;}
	#ifooter div + div#kreativpol {width:50%;}
	}
@media screen and (min-width:600px) and (max-width:767px) {
	.scol {width:50%;}
	.scol + .scol {margin-top:0;}
	#project .images > .boxes {margin:-40px -20px 0;}
	#project .image {width:50%;margin-top:40px;padding:0 20px;}
	}
@media screen and (min-width:768px) {
	div[class|="col"] + div[class|="col"] {margin-top:0px;}
	.col-2 {width:33.3333333333%;}
	.col-4 {width:66.6666666667%;}
	#project .info {width:33.3333333333% !important;}
	#project .info + .info {padding-right:0;}
	#project .info + .info + .info {padding-left:0;}
	#project .info + .info + .info .outer {padding-top:20px;}
	#project .info.empty {display:block;}
	#profile .form .formbox dt {display:inline-block;width:35%;}
	#profile .form .formbox dd {display:inline-block;width:65%;margin-top:0;}	
	}
@media screen and (min-width:880px) {
	#mainPage {margin:40px 0;}
	}
@media screen and (min-width:1024px) {
	#outerContainer {max-width:920px;}
	#iheader, #content, #ifooter {max-width:1160px;padding:0 60px;}
	#icons {right:60px;top:80px;}
	div[class|="col"] + div[class|="col"] {margin-top:0px;}
	.col-4, .col-3 {width:66.6666666667%;}
	.col-2, .col-3 + .col-3 {width:33.3333333333%;}
	#projects .project {width:33.3333333333%;}
	}
@media screen and (min-width:1152px) {
	#outerContainer {max-width:1016px;}
	}
@media screen and (min-width:1280px) {
	#outerContainer {max-width:1160px;}
	#iheader, #content, #ifooter {max-width:1160px;padding:0 60px;}
	.form .formbox dt {display:inline-block;width:35%;}
	.form .formbox dd {display:inline-block;width:65%;margin-top:0;}	
	}

/*IMAGE SIZES*/

#logo img {max-width:240px;max-height:135px;}
#projects .project .box, #project .image .box {max-width:320px;}
#projects .project .imgbox, #project .image .imgbox {padding-top:56.25%;}/*(abh. von Bildhöhe (Seitenverhältnis): 100/imgW*imgH = 100/16*9 = 56.25)*/


/*COLORS*/