@font-face {
  font-family: "OpenSansCondensed";
  src: url("fonts/OpenSansCondensed.eot") format("embedded-opentype"),
    url("fonts/OpenSansCondensed.otf") format("opentype"),
    url("fonts/OpenSansCondensed.svg") format("svg"),
    url("fonts/OpenSansCondensed.ttf") format("truetype"),
    url("fonts/OpenSansCondensed.woff") format("woff"),
    url("fonts/OpenSansCondensed.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

html { background-color: #C42FE3; }
html { background-image: -ms-linear-gradient(315deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-image: -webkit-gradient(linear,315deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-image: -webkit-linear-gradient(315deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-image: -moz-linear-gradient(315deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-image: -o-linear-gradient(315deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-image: linear-gradient(135deg, #6546DA 0%, #B560D2 85%, #EC72C4 100%); }
html { background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-attachment: fixed; }
html { position: fixed; width: 100%; height: 101%; overflow: hidden; }

body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 75px 0 0; }
body { text-align: center; }
body { overflow: auto; }

* { margin: 0; padding: 0;  list-style: none; outline: none; }
* { color: #fff; font-family: 'OpenSansCondensed', tahoma; font-size: 20px; font-weight: 100; }

a { color: #fff; text-decoration: none; }

button, label { cursor: pointer; }

.header { position: absolute; top: 0; right: 0; width: 100%; }
/* .header { background-image: url('img/top.png'); background-size: 1500px; background-position: 30px -435px; background-repeat: no-repeat; } */
.header { text-align: right; }

.header li { display: none; margin: 30px 0 0; }
.header li a { padding: 25px 20px; }

.header .inherit { display: inherit; }

.header .logo { position: absolute; top: 0; left: 0; width: 90%; padding: 20px 0% 60px 10%; }
.header .logo { background-image: url('img/top.png'); background-size: 1500px; background-position: -30px -497px; background-repeat: no-repeat; }
.header .logo { color: #6546DA; font-size: 36px; text-align: left; /* text-shadow: -2px 0 1px #6546DA; */ }
.header .logo img { display: inline; width: 50px; vertical-align: middle; }
.header .logo img { color: red; font-size: 76px; line-height: 1; text-align: left; }

.header .menu { display: none; }
.header .menu { position: fixed; top: 30px; right: 0; margin-right: 30px; padding: 0 15px 5px; background-color: rgba(255,255,255,.5); border-radius: 5px; }
.header .menu { box-shadow: 0 0 20px rgba(0,0,0,.125); }
.header .menu { font-size: 46px; line-height: 1; }

.cookie.link { position: fixed; right: 10px; bottom: 10px; width: 30px; height: 20px; border-radius: 10px; opacity: 0.25; }
.cookie.link { background-image: url('img/cookie.png'); background-size: cover; background-repeat: no-repeat; }
.cookie.link:hover { box-shadow: 0 0 20px rgba(0,0,0,.125); opacity: .75; }

.cookie.box { position: fixed; right: 10px; bottom: 10px; width: 133px; height: 30px; padding: 15px 70px 25px 10px; }
.cookie.box { background-color: #eb5232; background-image: url('img/cookie.png'); background-size: 70px; background-position: right; background-repeat: no-repeat; }
.cookie.box { border-radius: 10px; visibility: hidden; opacity: 0; z-index: 99; }
.cookie.box { text-align: left; }

.cookie.box, .cookie.box a { font-size: 14px; }
.cookie.box a { display: inline-block; text-decoration: underline; }

.cookie.box:target { visibility: visible; opacity: 1; box-shadow: 0 0 20px rgba(0,0,0,.125); }

.headline { position: relative; float: left; width: 100%; padding: 700px 0 50px; }
.headline { background-image: url('img/meine-epa-elektronische-patientenakte.png'); background-size: 350px auto; background-position: center 50px; background-repeat: no-repeat; }
.headline span { position: absolute; bottom: 50px; left: 0; width: 100%; margin-top: 0px; }
.headline span { font-size: 26px; }
.headline span strong { font-size: 46px; }

.headline span a { display: inline-block; margin-top: 16px; padding: 5px 20px 7px; background-color: rgba(255,255,255,.5); border: 0px; border-radius: 5px; }
.headline span a { box-shadow: 0 0 20px rgba(0,0,0,.125); }
.headline span a { text-shadow: 1px 1px 2px rgba(0,0,0,.25); }

/* .headline:hover ~ .header .logo { color: #6546DA; text-shadow: 0 0 1px #6546DA; } */

.subline { display: inline-block; width: 90%; padding: 53px 5% 0; }
.subline { font-size: 36px; }

.subline.b { padding: 53px 0 20px; font-weight: bold; }
.subline.s { font-size: 28px; }

.img { display: inline-block; width: 250px; margin: 20px 0; vertical-align: middle; }
.img.fl { float: left; }
.img.fr { float: right; }

.section { display: inline-block; padding: 0; margin: 0; vertical-align: middle; }
.main { width: 80%; padding: 0 10%; }

.text { padding: 0 10%; }
.text span { float: left; width: 100%; padding-bottom: 20px; font-weight: bold; }

.classic { display: inline-block; width: 80%; padding: 40px 10%; }

.bg { background-color: rgba(255,255,255,.125); }
.bs { box-shadow: 0 0 20px rgba(0,0,0,.125); }

.slider { position: relative; top: 0; left: 0; width: 100%; height: 300px; overflow: hidden; }
.slider .slide { position: absolute; top: -100%; left: 0; width: 100%; height: 100%; }

.slider .slide1:target,
.slider .slide2:target,
.slider .slide3:target { top: 0; }

.slider .arrow { position: relative; top: 280px; }
.slider .arrow { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; border-radius: 100%; z-index: 99; }

.section .radio { display: none; }

.section .li { float: left; width: 100%; margin: 5px 0; padding: 0; background-color: rgba(255,255,255,.5); }
.section .li { border: 0px; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,.125); }

.section .li.faq { width: 90%; max-height: 0; margin: 0; padding: 0 5%; overflow: hidden; }
.section .li.faq { font-style: italic; }

.section .li .label { float: left; width: 90%; padding: 7px 5% 10px; }

.section .radio1:checked ~ .li1,
.section .radio2:checked ~ .li2,
.section .radio3:checked ~ .li3,
.section .radio4:checked ~ .li4,
.section .radio5:checked ~ .li5,
.section .radio6:checked ~ .li6,
.section .radio7:checked ~ .li7,
.section .radio8:checked ~ .li8,
.section .radio9:checked ~ .li9,
.section .radio10:checked ~ .li10 { max-height: 5000px; margin: 5px 0; padding: 10px 5%; background-color: rgba(236,114,196,.5); }

.section.msg,
.section.contact.form { display: inline-block; float: none; margin-bottom: 50px; vertical-align: top; }

.section.contact.form input,
.section.contact.form textarea { display: inline-block; width: 80%; margin-bottom: 10px; padding: 10px; background-color: transparent; }

.section.contact.form input,
.section.contact.form textarea { background-color: rgba(255,255,255,.5); border: 0px; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,.125); }

.section.contact.form button { float: right; margin-right: 8%; padding: 5px 20px 7px; }
.section.contact.form button { background-color: rgba(255,255,255,.5); border: 0px; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,.125); }

.box { display: inline-block; max-width: 240px; margin: 20px; padding: 10px; border: 5px solid #fff; }
.box { background-color: rgba(255,255,255,.25); border-radius: 10px; vertical-align: top; transform: scale(1); }
.box span { display: inline-block; width: 100px; height: 100px; margin: 10px; border: 5px solid #fff; border-radius: 100%; }
.box span { font-size: 46px; line-height: 100px; }
.box strong { font-size: 24px; }

.box:hover { transform: scale(1.05); }

.steps { float: left; padding: 0 10px; }
.steps li { width: 46%; }
.steps li span, .steps li span a { font-size: 12px;}

.steps .head { float: left; width: 100%; margin-bottom: 10px; padding: 30px 0 20px; border-bottom: 0px dashed #fff; }
.steps .head { font-size: 28px; }

.steps .tl { float: right; padding-left: 5px; border-left: 5px solid rgba(255,255,255,.5); }
.steps .tr { float: left; padding-right: 5px; border-right: 5px solid rgba(255,255,255,.5); }

/* .steps .step1:after { position: absolute; height: 130px; margin: 0px 0 0 20px; border: 10px solid rgba(255,255,255,.25); content: ''; }
.steps .step2:after { position: absolute; height: 160px; margin: 0px 0 0 20px; border: 10px solid rgba(255,255,255,.5); content: ''; } */

.footer { float: left; width: 80%; padding: 0 10% 20px; }

.footer li { display: inline-block; width: 40%; margin-bottom: 20px; vertical-align: top; }
.footer li ul li { width: 100%; margin: 0; font-size: 14px; }
.footer li ul li a { font-size: 14px; }

.footer li ul .head { width: auto; margin-bottom: 5px; padding: 0 10px 5px; border-bottom: 1px solid #fff; clear: both; }

.footer.links { width: 100%; padding: 0 0 20px; }
.footer.counter { padding: 0 10% 40px; font-size: 14px; }

.footer.copy, .footer.copy a { font-size: 12px; }
.footer.copy a .design { display: inline-block; float: none; width: auto; margin: 0; }
.footer.copy a .design { font-size: 12px; color: #5091c3; }

.footer.seo { font-size: 10px; }

/* .login { background-image: url('img/login.pn'); }
.timeline { background-image: url('img/timeline.png'); }
.data { background-image: url('img/data.png'); }
.provider { background-image: url('img/provider.png'); }
.dokument { background-image: url('img/dokument.png'); }
.medication { background-image: url('img/medication.png'); } */

.transition { transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; }
.touch { background-color: #fff; }

@media only screen and (min-width: 768px) and (orientation: portrait) {
	body { height: 100%; padding: 0; }

	.header { position: fixed; top: 0; right: 30px; }
	.header li { display: inline-block; }
	.header .logo { padding: 30px 160px 80px 76px; background-position: 0 -460px; font-size: 48px; }
	.header .menu { display: none; }

	.headline { height: 100%; padding: 0; background-size: 450px auto; background-position: 74% 62%; }
	.headline span { position: absolute; bottom: 50px; left: 50px; width: 445px; margin-top: 0px; }
	.headline span { text-align: left; }

	.subline { width: 60%; padding: 53px 20%; }

	.img.digitalization { width: 750px; height: 400px; }
	.img.goodbye { width: 300px; }

	.section.main { width: 60%; padding: 0 20%; }

	.section.text { width: 40%; background-size: 300px auto; }

	.section.text.fl { padding: 50px 5% 50px 5%; }
	.section.text.fr { padding: 50px 5% 50px 5%; }

	.login, .data, .dokument { background-position: 80% center; }
	.timeline, .provider, .medication { background-position: 20% center; } 

	.steps { width: 80%; padding: 0 10%; }
	.steps li { width: 40%; }

	.steps .tl { padding-left: 5%; border-left: 10px solid rgba(255,255,255,.5); }
	.steps .tr { padding-right: 5%; border-right: 10px solid rgba(255,255,255,.5); }

	.section.msg,
	.section.contact.form { width: 35%; padding: 0 5%; }

	.footer li { width: 20%; }
	.footer li ul li { width: 80%; margin: 0 10%; }
	
	.hide { top: -500px; }
	
	.responsive { display: none; }
}

@media only screen and (min-width: 768px) and (orientation: landscape) {
	body { height: 100%; padding: 0; }

	.header { position: fixed; top: 0; right: 30px; }
	.header li { display: inline-block; }
	.header .logo { width: auto; padding: 30px 160px 80px 76px; background-position: 0 -460px; font-size: 48px; }
	.header .menu { display: none; }

	.cookie.link { right: 50px; bottom: 50px; }
	.cookie.box { right: 50px; bottom: 50px; }

	.headline { height: 100%; padding: 0; background-size: 450px auto; background-position: 74% 62%; }
	.headline span { position: absolute; bottom: 50px; left: 50px; width: 480px; margin-top: 0px; }
	.headline span { text-align: left; }

	.subline { width: 60%; padding: 53px 20%; }

	.img.digitalization { width: 750px; height: 400px; }
	.img.goodbye { width: 300px; }

	.section.main { width: 60%; padding: 0 20%; }

	.section.text { width: 40%; background-size: 300px auto; }

	.section.text.fl { padding: 50px 5% 50px 5%; }
	.section.text.fr { padding: 50px 5% 50px 5%; }

	.login, .data, .dokument { background-position: 80% center; }
	.timeline, .provider, .medication { background-position: 20% center; } 

	.steps { width: 80%; padding: 0 10%; }
	.steps li { width: 40%; }

	.steps .tl { padding-left: 5%; border-left: 10px solid rgba(255,255,255,.5); }
	.steps .tr { padding-right: 5%; border-right: 10px solid rgba(255,255,255,.5); }

	.section.msg,
	.section.contact.form { width: 35%; padding: 0 5%; }

	.footer li { width: 20%; }
	.footer li ul li { width: 80%; margin: 0 10%; }
	
	.hide { top: -500px; }
	
	.responsive { display: none; }
}

.tl { text-align: left; }
.tr { text-align: right; }

.res { text-align: center !important; }

.reader { display: none; }
.bold { font-weight: bold; }
.underline { text-decoration: underline; }