@font-face {
    font-family: 'titillium_bdbold';
    src: url('../fonts/titillium-bold-webfont.eot');
    src: url('../fonts/titillium-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/titillium-bold-webfont.woff') format('woff'),
         url('../fonts/titillium-bold-webfont.ttf') format('truetype'),
         url('../fonts/titillium-bold-webfont.svg#titillium_bdbold') format('svg');
    font-weight: normal;
    font-style: normal;
    }




@font-face {
    font-family: 'titilliumlight';
    src: url('../fonts/titillium-light-webfont.eot');
    src: url('../fonts/titillium-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/titillium-light-webfont.woff') format('woff'),
         url('../fonts/titillium-light-webfont.ttf') format('truetype'),
         url('../fonts/titillium-light-webfont.svg#titilliumlight') format('svg');
    font-weight: normal;
    font-style: normal;
    }




@font-face {
    font-family: 'titilliumthin';
    src: url('../fonts/titillium-thin-webfont.eot');
    src: url('../fonts/titillium-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/titillium-thin-webfont.woff') format('woff'),
         url('../fonts/titillium-thin-webfont.ttf') format('truetype'),
         url('../fonts/titillium-thin-webfont.svg#titilliumthin') format('svg');
    font-weight: normal;
    font-style: normal;
    }

body {
	font-family: 'titilliumlight';
	font-size: 1.5em;
	color: #000;
	background-color: #ededed;
	margin-top: 65px;
	margin-bottom: 65px;
	vertical-align: baseline;
	}
	
img { max-width: 100%; height: auto; }

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

h1 { font-family: 'titilliumlight'; text-transform: uppercase; }

#signetItems h3 { margin-left: auto; margin-right: auto; text-align: center; }
#signetItems img { margin-left: auto; margin-right: auto; display: block; }

#illustrationItems h3 { margin-left: auto; margin-right: auto; text-align: center; }
#illustrationItems img { margin-left: auto; margin-right: auto; display: block; }

#handarbeitItems h3 { margin-left: auto; margin-right: auto; text-align: center; }
#handarbeitItems img { margin-left: auto; margin-right: auto; display: block; }

#typografieItems h3 { margin-left: auto; margin-right: auto; text-align: center; }
#typografieItems img { margin-left: auto; margin-right: auto; display: block; }

b { font-family: 'titillium_bdbold'; text-transform: uppercase; }

p { margin-top: 20px; }

.left { float: left; }
.right { float: right; text-align: right; }
.center { text-align: center; }

.breadcrumb {
	padding-bottom: 0px;
	margin-bottom: 0px;
	background-color: #ededed;
	border-radius: 0px;
	text-transform: uppercase;
}

.panel {
	padding: 0px;
	margin: 0px;
	background-color: #ededed;
	border: 0px;
	}

.cat { text-align: right; margin-top: 40px; }

.portfolio-item { margin-bottom: 25px; margin-top: 25px; text-align: left; }

.portfolio-item img { margin-bottom: 20px; }

.portfolio-itemMin { margin-bottom: 25px; margin-top: 25px; text-align: left; }

.portfolio-itemMin img { margin-bottom: 15px; }

.accordion-inner { border-bottom: solid 1px #000; margin-top: 40px; text-align: left; }

ul.nav { float: right; margin-right: 15px; text-align: right; }

.navbar-default {
	background-color: #ededed;
	border: 0px;
	}

a:link, a:visited {
	font-family: 'titilliumlight';
	text-align: left;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
	}

a:hover, a:active {
	font-family: 'titilliumlight';
	text-align: left;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
	}

/* Mail + Social Media */

a:link.mail, a:visited.mail {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	}

a:hover.mail, a:active.mail{
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	}
	
a:link.xing, a:visited.xing {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	background-image:url(../images/derc_web_cv_socialmedia_pic-04.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	}

a:hover.xing, a:active.xing {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	background-image:url(../images/derc_web_cv_socialmedia_pic-04.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	}
	
a:link.linkedin, a:visited.linkedin {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	background-image:url(../images/derc_web_cv_socialmedia_pic-03.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	}

a:hover.linkedin, a:active.linkedin {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	background-image:url(../images/derc_web_cv_socialmedia_pic-03.png);
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 15px;
	}
	
a:link h4, a:visited h4 {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	}

a:hover h4, a:active h4 {
	font-family: 'titilliumlight';
	font-size: 1em;
	text-transform: none;
	}

a:link h3, a:visited h3 {
	font-family: 'titilliumlight';
	text-align: left;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
	}

a:hover h3, a:active h3 {
	font-family: 'titilliumlight';
	text-align: left;
	text-decoration: none;
	color: #000;
	text-transform: uppercase;
	}

h1 a:link, h1 a:visited {
	font-family: 'titilliumthin';
	color: #fff;
	background-color: #828183;
	padding: 10px;
	display: inline-block;
}
	
h1 a:hover, h1 a:active {
	font-family: 'titilliumthin';
	color: #fff;
	background-color: #000;
	padding: 10px;
	display: inline-block;
	}

.active { background-color: #000; }

#info { display: none; }

	
/* VIDEO */

.flex-video {
	position: relative;
	padding-top: 25px;
	padding-bottom: 67.5%;
	height: 0;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 16px;
	overflow: hidden;
	}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video iframe,
.flex-video object,
.flex-video embed {
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 15px;
	width: 100%;
	height: 100%;
	}
	
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}