@font-face{
    font-family:"DIN Next LT W04 Light";
    src:url("/fileadmin/templates/font/Alte-DIN-1451-Mittelschrift.ttf.woff");
    font-weight: 100;
}

@font-face{
    font-family:"DIN Next LT W04 Regular";
    src:url("/fileadmin/templates/font/Alte-DIN-1451-Mittelschrift.ttf.woff");
}
@font-face{
    font-family:"DIN Next LT W04 Medium";
    src:url("/fileadmin/templates/font/Alte-DIN-1451-Mittelschrift.ttf.woff");
    font-weight: medium;
}
@font-face{
    font-family:"DIN Next LT W04 Bold";
    src:url("/fileadmin/templates/font/Alte-DIN-1451-Mittelschrift.ttf.woff");
    font-weight: bold;
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
img,legend{border:0}
legend,td,th{padding:0}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,optgroup,strong{font-weight:700}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{box-sizing:content-box;height:0}
pre,textarea{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}

/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
html{color:#222;font-size:1em;line-height:1.4}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}
hr{display:block;height:1px;border-top:1px solid #ccc;margin:1em 0}
audio,canvas,iframe,img,svg,video{vertical-align:middle}

/* ==========================================================================
		Author's custom styles
		font-family:"DIN Next LT W04 Light";
		font-family:"DIN Next LT W04 Regular";
		font-family:"DIN Next LT W04 Medium";
		font-family:"DIN Next LT W04 Bold";
		grey: #93978b;
		brown: #a16317;
   ========================================================================== */

body {
	font-family:"DIN Next LT W04 Light";
	font-weight:normal;
	font-style:normal;	
	background:#fff;
	color:#222;
	box-sizing: border-box;
	padding:0;
	margin:0;
}

/* misc */
img, embed, object, video { max-width:100%; height:auto; width:100%; }
a { text-decoration:none; }
a:focus { outline:0; }
nav, ul { margin:0; padding:0; }
ul li { list-style:none; }
.centered { text-align:center; }
h1, h2, h3, h4, h5, strong, b { font-weight:normal; font-style:normal; }
span.upper { text-transform:uppercase; }
span.lower { text-transform:lowercase; }

/* layout boxes */
.pagewrap, .fullwidth, .contentbox { max-width:768px; margin:0 auto; }
.inner { padding:0 20px; }

/* header */
header#top { height:120px; position:relative; }
header.home { background:url('../img/header/cyel_mobile_header.jpg') no-repeat right top; background-size:145px 120px; }
header .logo { width:190px; position:absolute; top:20px; right:20px; }
header.home .logo { left:20px; }
header .jump_back { position:absolute; top:40px; left:20px; }

/* home teaser imgs */
main .fullwidth_img { position:relative; max-width:768px; height:0; padding-top:56.25%; /* img height 432px */ }
main .fullwidth_img.first { background:url('../img/home/lift.jpg') no-repeat 0 0; background-size:100%; padding-top:75%; /* img height 576px */ }
main .fullwidth_img.second { background:url('../img/home/meeting.jpg') no-repeat 0 0; background-size:100%; }
main .fullwidth_img.third { background:url('../img/home/tueren.jpg') no-repeat 0 0; background-size:100%; }
main .fullwidth_img.fourth { background:url('../img/home/treppenhaus.jpg') no-repeat 0 0; background-size:100%; }

main .fullwidth_img .claim { position:absolute; z-index:20; top:40px; right:20px; text-align:right; color:#fff; }
main .fullwidth_img.first .claim { top:20px }
main .fullwidth_img.second .claim:after,
main .fullwidth_img.third .claim:after,
main .fullwidth_img.fourth .claim:after { content:url('../img/svg/i_weiter.svg'); }

main .fullwidth_img .claim h1, main .fullwidth_img .claim h2 { font-family:"DIN Next LT W04 Bold"; text-transform:uppercase; padding:0; }
main .fullwidth_img .claim h1:before, main .fullwidth_img .claim h2:before { content: "_"; }
main .fullwidth_img .claim h1 { font-size:3em; line-height:1.1428; margin: 0; }
main .fullwidth_img .claim h2 { font-size:2em; line-height:1.1666; margin: 0 0 20px 0; }

main .fullwidth_img a.jump_page { display:block; position:absolute; z-index:30; width:100%; height:100%; top:0; }

/* content img 240px */
main .fullwidth_img.ceheader_240 { padding-top:31.25%; }
main .fullwidth_img.ceheader_240.product { background:url('../img/header/header_tueren.jpg') no-repeat 0 0; background-size:100%; }
main .fullwidth_img.ceheader_240.science { background:url('../img/header/header_meeting.jpg') no-repeat 0 0; background-size:100%; }
main .fullwidth_img.ceheader_240.cyel { background:url('../img/header/header_treppenhaus.jpg') no-repeat 0 0; background-size:100%; }
main .fullwidth_img.ceheader_240.news { background:url('../img/header/header_lift.jpg') no-repeat 0 0; background-size:100%; }

/* video teaser */
main .movie_img {	margin:35px 0 40px 0; }
video { margin: 30px 0; }

/* slider container */
main .slider-container.news { margin:55px 0 40px 0; }

/* content styles */
.contentbox h1 { font-family:"DIN Next LT W04 Medium"; font-size:1.75em; line-height:1.1428; color:#93978b; margin:35px 0; text-transform:uppercase; }
.contentbox h2 { font-family:"DIN Next LT W04 Medium"; font-size:1.5em; line-height:1.1666; color:#93978b; margin:0 0 40px 0; }
.contentbox h1:before, .contentbox h2:not(.first):before { content: "_"; }
.contentbox h3,
.contentbox h4 { font-family:"DIN Next LT W04 Medium"; font-size:1.375em; line-height:1.1666; color:#93978b; text-transform:uppercase; }
.contentbox h3 { margin:55px 0 30px 0; }
.contentbox h4 { margin:20px 0 5px 0; }
.contentbox h4:after { content: '\A _'; white-space: pre;}
.contentbox h4.name:before { content: '_'; }
.contentbox h4.name:after { content:''; }
.contentbox h5 { font-family:"DIN Next LT W04 Regular"; font-size:1.125em; line-height:1.6666; margin:20px 0; }

.contentbox p { font-size:1.125em; line-height:1.2222; margin:0 0 20px 0; }
.contentbox p.grey { color:#93978b; }
.contentbox strong, .contentbox b { font-family:"DIN Next LT W04 Regular"; }
.contentbox hr { display:block; height:1px; border:none; margin:0 0 40px 0; clear:both; }

.contentbox a { color:#a16317; }
.contentbox a.arrow:before, .contentbox a.internal-link:before { content: "›"; padding:0 5px 0 0; }
.contentbox a.arrow_back:before { content: "‹"; padding:0 5px 0 0; }
.contentbox a.phone { color:#222; }

.contentbox .ce-bodytext ul { font-size:1.125em; line-height:1.2222; margin:0 0 20px -10px; padding-left:20px; text-indent:-10px; }
.contentbox .ce-bodytext ul li { margin:0; padding:0; }
.contentbox .ce-bodytext ul li:before { content: '_'; padding:0 1px 0 0; }

.contentbox .accordion ul li { font-size:1.125em; line-height:1.2222; margin:0 0 0 20px; list-style:disc; }

.contentbox ul.ce-menu { font-size:1.125em; line-height:1.2222; margin:-20px 0 20px 0; padding-left:0; text-indent:0; }
.contentbox ul.ce-menu li:before { content: '›'; padding:0 1px 0 0; color:#a16317; }

.contentbox .impressions img { margin:20px 0; }

/* box > grey bg */
.conference .box { padding:20px; margin: 0 0 20px 0; background:#93978b; }
.conference .box h3 { margin:0 0 20px 0; color: #fff; }
.conference .box h3.internal { background:url('../img/svg/i_weiter.svg') no-repeat top right; background-size: 36px 36px; }
.conference .box h3.external { background:url('../img/svg/i_link_extern.svg') no-repeat top right; background-size: 36px 36px; }
.conference .box p { margin:0; }
.conference .box a { color: #fff; }

/* box > downloads */
.download_box {
	border-top: 1px solid #93978b;
	margin:35px 0;
}
.download {
	border-bottom: 1px solid #93978b;
	background: url('../img/svg/i_pdf.svg') no-repeat 0 20px;
	background-size:65px 85px;
	height: 125px;
}
.download span.title {
	font-family:"DIN Next LT W04 Medium";
	font-size:1.625em;
	line-height:1.2307;
	color:#a16317;
	text-transform:uppercase;
	padding:40px 0 0 100px;
	display: block;
}
.download span.size { padding: 0 0 20px 100px; color: #222; }

/* news listing */
.news_list .item { margin:0 0 40px 0; width: 90%; }
.news_list .item .date { display: inline-block; margin:0 0 15px 0; }
.news_list .item .date:before { content: '_ \A'; white-space: pre; }
.news_list .item h3 { margin:0 0 20px 0; }

/* news detail */
.news_detail .date { display:inline-block; margin:0 0 20px 0; }
.news_detail .date:before { content: '_ \A'; white-space: pre; }
.news_detail img { margin:0 0 20px 0; }

/* svg graphics */
img.i_funktion { margin:0 0 20px 0; }
img.i_asm { margin:20px 0 0 0; width:140px; }
img.i_encryption { margin:10px 0 0 0; width:81px; }
img.i_triple-a { margin:10px 0 0 0; width:57px; }
img.i_honeypot { margin:10px 0 0 0; width:75px; }
img.i_dummytraffic { margin:10px 0 0 0; width:140px; }

/* nav elements */
nav.pages { margin:40px 0 60px 0; }

header .jump_back, nav.pages .jump_back { display:inline-block; }
header .jump_back a, nav.pages .jump_back a {
	display: block;
	width:32px;
	height:32px;
	background:url('../img/svg/i_zurueck.svg') no-repeat 0 0;
	margin:0;
}
nav.pages .jump_back { width:50%; height:32px; }
header .jump_back { width:32px; height:32px; }

nav.pages .jump_top { display: inline-block; margin-left:-20px; }
nav.pages .jump_top a { display:block; margin:0 auto; width:32px; height:32px; background:url('../img/svg/i_top.svg') no-repeat 0 0; }

nav ul li { display:inline-block; }
nav ul li a { color:#a16317;}
nav ul li a.active { font-family:"DIN Next LT W04 Medium"; color:#a16317; }

nav.lang, nav.social { text-align:center; margin:0 0 60px 0;}
nav.meta { text-align:center; margin:0 0 20px 0; }
nav.meta ul { margin: 0 0 0 30px; }
nav.lang ul {	margin: 0 0 0 20px; }
nav.lang ul li { text-transform:uppercase; }
nav.meta ul li { text-transform:lowercase; }
nav.lang ul li, nav.meta ul li { color:#a16317;}
nav.lang ul li:after, nav.meta ul li:after { content:"|"; margin:0 10px; }
nav.lang ul li:last-child:after, nav.meta ul li:last-child:after { content: ""; }
nav.lang ul li.active a { font-family:"DIN Next LT W04 Medium"; color:#a16317; }
nav.lang ul li.passive { font-family:"DIN Next LT W04 Light"; color:#93978b !important; }

nav.social ul li { margin:0 5px; }
nav.social .linkedin, nav.social .twitter, nav.social .youtube { fill:#c7a174; }

/* footer */
footer .inner {
	height:232px;
	background:url('../img/footer/cyel_mobile_footer.jpg') no-repeat top right;
	background-size:203px 232px;
}

/* css slider defaults */
body { -webkit-animation:androidbugfix infinite 1s } /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack */
#slider { display:block; overflow:hidden; }
#slider-outer { max-width:768px; margin:0 auto; position:relative; padding:0; }
#slider-outer .slide-check { position:absolute; left:-9999px }

/* custom styles for sliding content */
#slider .slides > div > div { margin:0; padding:0 30px; text-align:center; }
#slider .slides > div:focus { outline: 0; }
#slider .slides span.date { font-size:.9375em; }
#slider .slides h3 { margin:20px 0; padding:0 30px; }
#slider .slides a { display: block; color: #222; }

#slider-outer .arrows {
	position:absolute;
	display: none;
	z-index:50; 
	top:calc(50% - 20px);
	background: url('../img/svg/i_slide_fwd.svg') no-repeat 0 0;
	cursor:pointer;
	width:20px;
	height:39px;
}
#slider-outer label { display:block; }

/* checked buttons/arrows - (% increment per slide) - move slides when checked */
#slider-outer #btn-1:checked ~ #slider .slides > div,
#slider #btn-goto-first:checked ~ #slider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
#slider-outer #btn-2:checked ~ #slider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }
#slider-outer #btn-3:checked ~ #slider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }
#slider-outer #btn-4:checked ~ #slider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }
#slider-outer #btn-5:checked ~ #slider .slides > div { -webkit-transform:translate(-400%,0); -ms-transform:translate(-400%,0); transform:translate(-400%,0) }
#slider-outer #btn-6:checked ~ #slider .slides > div { -webkit-transform:translate(-500%,0); -ms-transform:translate(-500%,0); transform:translate(-500%,0) }
#slider-outer #btn-7:checked ~ #slider .slides > div,
#slider #btn-goto-last:checked ~ #slider .slides > div { -webkit-transform:translate(-600%,0); -ms-transform:translate(-600%,0); transform:translate(-600%,0) }

/* slider on startpage > news */
main .slider-container.news .slides { width:300% } /* (slides x 100) */
main .slider-container.news .slides > div {
	width:33.3333%; /* (100 / slides) */
	display:table-cell;
	overflow:hidden;
	position:relative; 
	-webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
	-webkit-transition:-webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
/* news: ids of checked buttons/arrows */
main .slider-container.news #btn-goto-first:checked ~ #arrow-1, 
main .slider-container.news #btn-1:checked ~ #arrow-2, 
main .slider-container.news #btn-2:checked ~ #arrow-3,
main .slider-container.news #btn-3:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
	right:0; display:block;
}
/* news: ids of checked buttons/arrows - reposition/rotate '>' arrows to fake '<' arrows */
main .slider-container.news #btn-2:checked ~ #arrow-1, 
main .slider-container.news #btn-3:checked ~ #arrow-2, 
main .slider-container.news #btn-1:checked ~ #arrow-3 { /* #btn-1 always goes to last arrow */
	left:0; display:block; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1);
}

/* css accordion */
.accordion { position:relative; margin-bottom:10px; width:100%; overflow:hidden; }
.accordion input { position:absolute; opacity:0; z-index:-1; }
.accordion label { position:relative; display:block; padding:40px 60px 40px 20px; font-family:"DIN Next LT W04 Medium"; font-size:1.125em; text-transform:uppercase;
	color:#fff; background:#828a7c; line-height:1.2; cursor:pointer; }
.accordion .tab-content { max-height:0; overflow:hidden; background:#e0e2da; transition:max-height .35s; }
.accordion .tab-content p, .accordion .tab-content ul { margin:20px; }
.accordion .tab-content h4, .accordion .tab-content h5 { margin:20px 20px -20px 20px; }
.accordion .tab-content div.svg { margin: 0 20px; }
.accordion input:checked ~ .tab-content { max-height:1000em; }
.accordion label::after { position:absolute; right:20px; top:42px; display:block; width:32px; height:17px; }
.accordion input[type=checkbox] + label::after { content:url(../img/svg/i_aufklappen.svg); }
.accordion input[type=checkbox]:checked + label::after { content:url(../img/svg/i_zuklappen.svg); }

/* Helper classes */
.hidden{display:none!important}
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
.invisible{visibility:hidden}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}

/* max 568px */
@media only screen and (max-width : 568px) {
	main .fullwidth_img .claim h1 { font-size:1.75em; }
	main .fullwidth_img .claim h2 { font-size:1.5em; }
}

/* max 340px */
@media only screen and (max-width : 340px) {
	.contentbox h1 { font-size:1.5em; }
}
