body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}
*{padding:0;margin:0;text-size-adjust:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;box-sizing:border-box;}
*{box-sizing:border-box;}
html,
body{margin:0;padding:0;font-family: 'Arial', 'Helvetica',sans-serif;font-style:normal;color:#000000;font-weight:normal;}
html { width: 100%;}
body {width: 100%; }
body {
	background-color:#e9e5eb;
}
h1 {
	color: #86328a;
    text-transform: uppercase;
    padding-bottom: 30px;
    margin-top: 50px;
}
h2 {
	color: #ffffff;
    padding-bottom: 30px;
    padding-top:50px;
    font-size:2em;
}
h3 {
	border-bottom: 2px solid #86328a;
	padding-bottom:5px;
	margin-bottom: 20px;
    margin-top:50px;
    font-size:1.5em;
    color:#000000;
    display:inline-block;
}
img {
	display:block;
}
header {
	border-bottom: 3px solid #86328a;
	position:fixed;
	background-color:#ffffff;
	width:100%;
	height:80px;
	z-index:1;
}
#container {
	padding-top:80px;
	padding-bottom: 120px;
}
#container .ce_text {
	max-width: calc(100% - 500px);
}
#container .full-width .ce_text {
	width:100%;
	max-width:100%;
}
.logo-header,
.logo{
	font-family: 'Lato', sans-serif;
}
span.kosten-rechner {
	font-size: 50px;
	font-weight: bold;
	padding-top:10px;
}
.spruch {
	font-size:20px;
	text-transform:uppercase;
	padding-bottom:50px;
	padding-top:10px;
}
#container .spruch p {
	padding-left: 0.1em;
	font-size: 1.05em;
}
.logo-header span,
.logo span{
	float:left;
	clear:left;
	text-decoration:none;
	color:#000000;
	width:100%;
}
/*.mod_article,*/
#container {
	min-height:100vh;
}
.logo-header,
/*.logo,*/
header .inside,
.mod_article,
.max-width {
	max-width:1440px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
}
.ce_image {
	position: absolute;
    right: -100px;
    top: 10px;
    width: 500px;
}
.mod_article {
	position:relative;
}
.element .ce_image{
  transform: translateX(100%);
  opacity:0;
}
#ueber-mich.element .ce_image,
#article-2.element .ce_image{
  transform: translateX(100%);
  transition: all 1s ease-in-out;
}
#ueber-mich.element.in-viewport-once .ce_image,
#article-2.element.in-viewport-once .ce_image{
  transform:translateX(0);
	transition: all 1s ease-in-out;
	position:fixed;
	z-index:100;
}
.element.was-in-viewport .ce_image{
	opacity:0;
}
.element.in-viewport .ce_image{
	opacity:1;
	  transform:translateX(0);
	position:fixed;
	z-index:100;
	        -webkit-transition: opacity .8s ease-in-out;
        -moz-transition: opacity .8s ease-in-out;
        -ms-transition: opacity .8s ease-in-out;
        -o-transition: opacity .8s ease-in-out;
        transition: opacity .8s ease-in-out;
}
/*.element.was-in-viewport .ce_image{
	z-index:2;
}*/
.ul-large p,
#container ul li{
	line-height:2em;
	font-size:1.5em;
	color:#000000;
}
#container ul li a {
	color:#000000;
	text-decoration:none;
}
#container ul li a:hover {
	border-bottom: 2px solid #86328a;
}
#container .sub ul li {
	line-height:1.5em;
	font-size:1.1em;
}
#container p {
	font-size:1.1em;	
}
#container .sub ul ul {
	margin-left:30px;
	list-style:none;
	/*margin-top:-0.5em;*/
	margin-bottom:0.5em;
}
/*#ueber-mich ul li:before,
#container .article-wrapper ul li:before {
	content:'●';
	color:#86328a;
	line-height:2em;
	padding-right:10px;
}*/
#container .article-wrapper ul ul li:before {
	content:'';
	color:#86328a;
	line-height:1.5em;
	padding-right:10px;
}
.footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	border-top: 1px solid #86328a;
	height:50px;
	background-image:url('https://www.kosten-rechner.at/files/images/boden.jpg');
	background-size: 100% 50px;
}
.footer img{
	width: 100%;
	display:none;
}
.article-bg{
	background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 12%, rgba(0,0,0,0.0) 25%, rgba(233,229,235,0) 100%);
	border-top:2px solid #86328a;
}
.article-bg .mod_article {
	/*min-height:400px;*/
	min-height:calc(100% - 300px);
	padding-bottom:150px;
}
.article-bg .mod_articlelast {
	min-height:calc(100% - 100px);
}
span.pdca {
	font-size: 1.5em;
	padding-right: 20px;
	font-weight: bold;
	margin-left: -30px;
    position: absolute;
}
#pdca-zyklus .ce_text.ul-large.first p {
	margin-left: 30px;
	margin-bottom: 15px;
}
span.pdca.p {
	color:#1ba1a6;
}
span.pdca.d {
	color:#e73278;
}
span.pdca.c {
	color:#ef8e23;
}
span.pdca.a {
	color:#7abe47;
}
.logo {
	float:left;
	padding-right:30px;
}
header nav {
	padding-top: 40px;
	padding-left: 120px;
}
header nav ul li {
	display:inline-block;
	color:#000000;
	margin-top:3px;	
}
header nav ul li a,
header nav ul li strong{
	font-weight:normal;
	text-decoration:none;
	padding-right:25px;
	text-transform:uppercase;
}
header nav ul li a{
	color:#000000;
}
header nav ul li a:hover,
header nav ul li strong{
	color:#86328a;
}
.zitat-wrapper {
	position:relative;
}
p.zitat {
	padding-left: 50px;
	padding-right: 30px;
}
span.zeichen {
	color:#86328a;
	font-weight:bold;
	font-size: 60px;
	position: absolute;
}
span.zeichen.first {
	bottom: -39px;
}
span.zeichen.last {
	right: 0;
	top: -16px;
}
footer nav {
	float:right;
}
footer nav ul li {
	display:inline-block;
	color:#ffffff;
	margin-top:3px;
}
footer nav ul li a,
footer nav ul li strong{
	color:#ffffff;
	font-weight:normal;
	text-decoration:none;
	padding-left:25px;
}
footer nav ul li a{
	text-decoration:none;
}
footer nav ul li:hover,
footer nav ul li strong{
	text-decoration:underline;
}
.ce_text ul {
	padding-left: 25px;
	list-style-type: none;
}
#article-2 .ce_text ul {
	padding-left: 0;
}
.a-black a {
	color:#000000;
	text-decoration:none;
}
.a-color a,
.kontakt a {
	color:#86328a;
	text-decoration:none;
}
.a-black a:hover,
.a-color a:hover,
.kontakt a:hover {
	text-decoration:underline;
}
.box {
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #d1d1d1;
	margin-top:50px;
}
/*.box figure {
	width:180px;
	float:left;
}*/
#ueber-mich .ce_text.box {
	max-width: 600px;
}
.box figure {
	display:none;
}
.box.schmal {
	float:left;
}
.box.schmal .box-text {
	float:left;
	padding-right:30px;
}
.box.schmal .box-text h3 {
	width: calc(100% + 40px);
}
.box.no-headline {
	padding-top:10px;
}
.box-text {
/*	padding-left:200px;*/
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
}
.box h3 {
	margin-top: 10px;
	font-size: 1.2em;
	margin-bottom: 10px;
}
.box ul li:before {
	content:'●';
	color:#86328a;
	padding-right:10px;
	position: absolute;
	margin-left: -20px;
}
.box-text h3 {
	width: calc(100% + 20px);
	margin-left: -10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #86328a;
	margin-top: 0;
	padding-top: 10px;
	color: #ffffff;
}
#ueber-mich .box figure {
	display:none;
}
#ueber-mich .box-text {
/*	padding-left:20px;*/
	padding-bottom:15px;
}
#kontakt .ce_text.kontakt {
	float:left;
	padding-right:150px;
}
a.werbegut {
	color: #ffffff;
	text-decoration: none;
	margin-top: 5px;
	float: right;
	font-size: 0.8em;
}
@media only screen and (max-width:1300px) {
	.ce_image {
	    right: -80px;
	    width: 350px;
	}
	#container .ce_text {
	    max-width: calc(100% - 260px);
	}
	.ul-large p, #container ul li {
	    line-height: 1.8em;
	    font-size: 1.3em;
	}
}
@media only screen and (max-width:1100px) {
	span.kosten-rechner {
	    font-size: 33px;
	    padding-top: 31px;
	}
	#container .spruch p {
	    font-size: 0.7em;
	}
}
@media only screen and (max-width:1000px) {
	#container .ce_image {
	    top: 100px;
	}
	h1 {
		font-size:1.2em;
	}
	h2 {
		font-size: 1.5em;
	}
	h3 {
		font-size: 1.2em;
	}
}
@media only screen and (max-width:900px) {
	.ce_image {
	    right: -80px;
	    width: 200px;
	}
	#container .ce_text {
	    max-width: calc(100% - 110px);
	}
	.ul-large p, #container ul li {
	    line-height: 1.5em;
	    font-size: 1.1em;
	}
}
@media only screen and (max-width:790px) {
	header .logo {
		padding-bottom: 8px;
	}
	header nav {
		background-color: #e9e5eb;
		z-index: 1;
		margin-top: 9px;
		float: left;
		border-bottom: 1px solid #ffffff;
		padding-left: 20px;
		width: calc(100% + 40px);
		margin-left: -20px;
		padding-bottom: 10px;
		font-size: 0.9em;
		padding-top:15px;
	}
	header nav ul li a, header nav ul li strong {
    padding-right: 21px;
	}
}
@media only screen and (max-width:600px) {
	#container .ce_image {
	    right: -30px;
	    width: 100px;
	}
	#container .ce_text {
	    max-width: calc(100% - 60px);
	}
	.ul-large p, #container ul li {
	    line-height: 1.5em;
	    font-size: 1.1em;
	}
	footer {
		font-size:0.9em;
	}
	footer nav {
	    float: left;
	}
	footer nav ul li a, footer nav ul li strong {
	    padding-right: 15px;
	    padding-left:0;
	}
}
@media only screen and (max-width:420px) {
	span.kosten-rechner {
	    font-size: 25px;
	}
	header .logo {
	    padding-bottom: 19px;
	}
	header nav ul li {
		display:block;
		line-height:1.8em;
	}
	#wrapper #container .ce_image {
	    top: 60px;
	    right:-20px;
	}
	#wrapper #container .ce_text {
	    max-width: 100%;
	}
	#wrapper #container .ce_text.spruch {
		max-width: calc(100% - 58px);	
	}
}
@media only screen and (max-width:790px) {
	/* BUTTON */
.button {
    width: 50px;
    height: 50px;
    margin: 0 0 15px 10px;
    cursor: pointer;
    position: absolute;
    right: 5px;
    z-index: 200;
}
	.button span {
	    height: 2px;
	    display: block;
	    position: absolute;
	    top: 22.5px;
	    left: 10%;
	    right: 10%;
	    background-color: #86328a;
	    -webkit-transition: background 0.15s linear 0.15s;
	    -o-transition: background 0.15s linear 0.15s;
	    transition: background 0.15s linear 0.15s;
	}
	.button span::before {
	    top: -10px;
	    -webkit-transition: top 0.15s linear 0.15s, -webkit-transform 0.15s linear;
	    transition: top 0.15s linear 0.15s, -webkit-transform 0.15s linear;
	    -o-transition: top 0.15s linear 0.15s, transform 0.15s linear;
	    transition: top 0.15s linear 0.15s, transform 0.15s linear;
	    transition: top 0.15s linear 0.15s, transform 0.15s linear, -webkit-transform 0.15s linear;
	}
	.button span::after {
	    bottom: -10px;
	    -webkit-transition: bottom 0.15s linear 0.15s, -webkit-transform 0.15s linear;
	    transition: bottom 0.15s linear 0.15s, -webkit-transform 0.15s linear;
	    -o-transition: bottom 0.15s linear 0.15s, transform 0.15s linear;
	    transition: bottom 0.15s linear 0.15s, transform 0.15s linear;
	    transition: bottom 0.15s linear 0.15s, transform 0.15s linear, -webkit-transform 0.15s linear;
	}
	.button span::before, .button span::after {
	    content: "";
	    width: 100%;
	    height: 2px;
	    display: block;
	    position: absolute;
	    left: 0;
	    background-color: #86328a;
	}
	body.open .button span {
	    -webkit-transition: background 0.15s linear;
	    -o-transition: background 0.15s linear;
	    transition: background 0.15s linear;
	    background: none;
	}
	body.open .button span::before {
	    top: 0px;
	    -webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: top 0.15s linear, -webkit-transform 0.15s linear 0.15s;
	    transition: top 0.15s linear, -webkit-transform 0.15s linear 0.15s;
	    -o-transition: top 0.15s linear, transform 0.15s linear 0.15s;
	    transition: top 0.15s linear, transform 0.15s linear 0.15s;
	    transition: top 0.15s linear, transform 0.15s linear 0.15s, -webkit-transform 0.15s linear 0.15s;
	    background-color: #86328a;
	}
	body.open .button span::after {
	    bottom: 0px;
	    -webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    -webkit-transition: bottom 0.15s linear, -webkit-transform 0.15s linear 0.15s;
	    transition: bottom 0.15s linear, -webkit-transform 0.15s linear 0.15s;
	    -o-transition: bottom 0.15s linear, transform 0.15s linear 0.15s;
	    transition: bottom 0.15s linear, transform 0.15s linear 0.15s;
	    transition: bottom 0.15s linear, transform 0.15s linear 0.15s, -webkit-transform 0.15s linear 0.15s;
	    background-color: #86328a;
	}
/* BUTTON ENDE */

/* NAV */
	header nav{
		display:none;
		margin-top:0;
	}
/* NAV ENDE */
}
/* FORMULAR */
.formular {
    margin-bottom:10px;
    line-height:36px;
    padding:2px;
}
fieldset {
    border:none;
}
.formular input,
.formular textarea,
.formular button {
    border: 1px solid #d1d1d1;
}
.formular input:focus,
.formular input:hover,
.formular textarea:focus,
.formular textarea:hover {
    border: 1px solid #86328a;
}
.formular textarea {
    max-width: 100%;
	width: 400px;
    min-height: 250px;
    height: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}
.formular .widget-textarea {
    margin-top:10px;
    max-width: 100%;
	width: 400px;
}
.formular input,
.formular button{
    max-width: 100%;
	width: 400px;
    min-height: 33px;
    padding-left: 5px;
    padding-right: 5px;
}
.formular label {
    display: table-cell;
    font-weight: bold;
    text-transform: uppercase;
    color: #86328a;
}
.formular button {
    color:#86328a;
}
.explanation {
    padding-bottom: 20px;
    line-height: 1.5em;
    font-style: italic;
    color: #86328a;
    font-size:0.8em;
}
.explanation a {
	color:#86328a;
	text-decoration:none;
}
.explanation a:hover {
	text-decoration:underline;
}
.submit {
    transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    padding-top:1px;
    background-color:#f4f4f4;
    font-size:1em;
    font-weight:bold;
    font-family: 'Lato',sans-serif;
    text-transform:uppercase;
}
.submit:hover,
.submit:focus {
    background-color:#86328a;
    color:#ffffff;
    border:1px solid #86328a !important;
    cursor: pointer;
}
.formular input {
    border-radius: 0;
    height: auto;
    color:#000000;
    font-size:1em;
    font-weight:300;
    font-family: 'Lato',sans-serif;
}
/*.kontaktformular {
	margin:10px auto 0 auto;
	max-width: 400px;
	font-size:1.1em;
}*/
#kontakt h2 {
	margin-top:0;
	padding-top:0;
}
.widget-checkbox {
	font-size:1em;
	margin-bottom:12px;
}
.widget-checkbox label{
	text-transform:unset;
	font-weight:300;
	font-size:1em;
	line-height:1em;
}
.formular input.checkbox {
	float: left;
	width: 15px;
	margin-top: 1px;
	margin-right: 7px;
min-width: 10px;
}
.formular {
/*	margin:10px auto 0 auto;*/
    max-width: 100%;
	width: 400px;
}
.ce_text.kontakt {
	padding-bottom:50px;
	width:100%;
	min-width:100%;
}
#ctrl_5 {
	font-size:0.8em;
}
#ctrl_5 a {
	color:#86328a;
}
.ce_form {
	background-color: rgba(255,255,255,0.5);
	border: 2px solid #d1d1d1;
	margin-top:50px;
	padding-left:30px;
	padding-right:30px;
	float:left;
	max-width:100%;
}
.ce_form h2 {
    width: calc(100% + 60px);
    margin-left: -30px;
    padding-left: 33px;
    padding-right: 30px;
    background-color: #86328a;
    margin-top: 0;
    color: #ffffff;
    padding-top: 10px !important;
    padding-bottom: 12px;
    margin-bottom: 20px;
}
