@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.cleaner {clear: both;}
img, figure {pointer-events: none;}
.notsafe {pointer-events: auto !important;}
body {font: 400 14px/20px 'Open Sans', sans-serif; color: #1a1a19;}


/* ALLGEMEIN */
.col1 {width: 50%; float: left; padding: 0 8% 0 0;}
.col2 {width: 50%; float: left; padding: 0 0 0 8%;}
h1, h2 {color: #151a50; font-size: 25px; text-transform: uppercase; margin: 0 0 10px 0; line-height: 27px;}

h3, h4, #haus-verkaufen h2 {color: #0f5da2; font-size: 20px; text-transform: uppercase; margin: 0 0 30px 0;}
footer h2 { color: #FFF; }
p {margin-bottom: 15px;}
strong {font-weight: 700;}
a {color: #a31320; text-decoration: underline;}

/* PAGINATION + LEITFADEN */
#haus-verkaufen, #stadt, #spezial, #checkliste {position: relative;}
#haus-verkaufen .number, #spezial .number {position: absolute; top: 10%; left: 0;}
#stadt .number, #checkliste .number {position: absolute; top: 10%; right: 0;}
.number {background: #a31320; color: #fff; font-size: 43px; text-align: center; font-weight: 700; width: 50px; padding: 25px 0;}
.wrap {width: 90%; margin-left: 5%; padding: 8% 0;}
#haus-verkaufen .wrap, #spezial .wrap {border-right: 6px solid #a31320; border-bottom: 6px solid #a31320;}
#stadt .wrap, #checkliste .wrap {border-left: 6px solid #a31320;}
.container {
	padding: 2% 5%;
}


/* POPUP */
.overlay {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; overflow: scroll;}
.overlay:target {visibility: visible; opacity: 1;z-index: 9999;}
.popup {margin: 70px auto; padding: 3%; width: 70%; position: relative; transition: all 2s ease-in-out; background: #fff; color: #5a5a5a;}
.popup .close {position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #9e1623;}
.popup .content {max-height: 30%; overflow: auto;}
#hierhin {width: 0; height: 0; position: fixed; top: 0; left: 0;}
.popup h2 {margin-left: 0; color: #9e1623; padding-top: 15px; margin-bottom: 10px;}
.popup p a {text-transform: none; color: #9e1623;}


/* HEADER */
header {background: #a31320; margin-top: 50px; position: relative;}
header img {width: 60%; height: auto; display: block;}
.top {position: fixed; top: 0; left: 0; height: 50px; width: 100%; background: #045fb2; z-index: 9999; padding: 1% 4%;}
.slogan {border: 6px solid #181e54; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 8%; font-weight: 700; font-size: 21px; text-transform: uppercase; color: #fff; line-height: 30px; padding: 3% 3% 3% 8%; width: 35%;}
.big, .small {font-size: 36px; font-weight: 400;}
.small {font-size: 18px;}
.sidenav {display: block; height: 100%; width: 0; position: fixed; z-index: 99; top: 0; right: 0; background-color: #045fb2; overflow-x: hidden; transition: 0.5s; padding-top: 15px;}
.sidenav a {padding: 5%; text-decoration: none; font-size: 15px; color: #fff; display: block; transition: 0.3s; text-transform: uppercase}
.sidenav a:hover, .offcanvas a:focus { color: #161b52;}
.sidenav .closebtn {position: absolute; top: 0;right: 25px; font-size: 36px;margin-left: 50px;}
.icon {color: #fff; font-size: 22px;}
.sub {float: left;}
.sub a {color: #fff; text-decoration: none; text-transform: uppercase;}
.sub li {display: inline; margin-right: 10px;}
.main {float: right;}
.main .icon {margin-left: 10px; cursor: pointer;}


/* SECTION I - HAUS VERKAUFEN */
ul.list li {background: url(../images/check.png) no-repeat top left; padding-left: 60px; margin-bottom: 30px;}


/* SECTION II - STADT */
#stadt .col2 {text-align: center;}
#fakten {background: url(../images/immobilienmarkt-plochingen.jpg),url("../images/transparent.gif") no-repeat; background-position: center; background-size: cover; padding: 8% 12%;}
.box {width: 33.333%; float: left; background: rgba(167,22,37,0.9); text-align: center; color: #fff; text-transform: uppercase; padding: 1.5%;}
.box:nth-of-type(even) {background: rgba(4,95,178,0.9);}
.inner {font-size: 16px; font-weight: 700; border: 1px solid #fff; padding: 15%;}
.inner span {font-size: 43px;}


/* SECTION III - SPEZIAL */
.eins {background: #a71625;}
.zwei {background: #b21e2d;}
.drei {background: #be2131;}
.vier {background: #cb2234;}
.fuenf {background: #d72134;}
.info {padding: 4.5% 4% 2% 2%; color: #fff;}
.pos {float: left; width: 20%; text-align: center; color: #fff; font-size: 43px; font-weight: 700; padding-top: 2.5%;}
.inhalt {float: right; width: 75%;}
.inhalt p a {font-weight: 700; text-decoration: none; color: #fff; text-transform: uppercase;}
h5 {text-transform: uppercase; font-weight: 700; margin-bottom: 10px;}


/* SECTION IV - CHECKLISTE */
.col3 {width: 60%; margin-left: 20%; text-align: center;}
a.download {background: #a71625; text-transform: uppercase; font-weight: 700; font-size: 18px; padding: 10px 20px; color: #fff; text-decoration: none;}
ul.check li {list-style: disc; margin: 0 0 20px 30px;}


/* SECTION V - FOOTER */
footer {background: #a71625; position: relative; color: #fff;}
footer p a, footer h3, footer h4 {color: #fff;}
footer h3, footer h4 {margin-left: 0;}
.contact {width: 50%; padding: 6% 5% 6% 12%;}
.experte {background: url(../images/beratung-beim-immobilienverkauf-plochingen.jpg) no-repeat; background-position: center; background-size: cover; width: 50%; height: 100%; position: absolute; right: 0; top: 0;}
a.formular {background: #fff; text-transform: uppercase; font-weight: 700; font-size: 15px; padding: 5px 10px; color: #045fb2; text-decoration: none !important;}
.lp-tpl .contact {
	padding: 6% 5% 6% 10%;
}
.lp-tpl .col1 {
	padding: 0;
}

.logo {
	padding: 20px;
	border: 2px solid #FFF;
	margin: 15px 0 25px 0;
	width: 100%;
	max-width: 300px;
	height: auto;
	background: #FFF;
}
.profilbild {
	float: left; 
	margin: 0 20px 0 0;
	width: auto;
	height: auto;
}
.profilname {
	float: left;
}
a.lp {
	color: #FFF;
	background: #a31320;
	padding: 10px;
	text-decoration: none;
	display: inline-block;
	margin: 10px 0 0 0;
}
.ivd {
	margin: 15px 0 0 0;
	background: #FFF;
	padding: 10px;
	border: 2px solid #a71625;
}
.lpages {
	width: 50%;
	padding: 20px;
	background: #FFF;
}
.lpages li {
	display: inline-block;
	margin: 0 20px 0 0;
}

@media screen and (max-width: 960px) {
    .top {padding: 1.5% 4%;}
    a.download {font-size: 12px;}
}

@media screen and (max-width: 870px) {
    header img {width: 50%;}
    .slogan {right: 4%; font-size: 15px; width: 50%;}
    .big, .small {font-size: 22px;}
    .small {font-size: 15px;}
}

@media screen and (max-width: 768px) {
    .slogan {border: none;}
    .inner span {font-size: 30px;}
    .info {padding: 4.5% 4% 2% 2%;}
    a.download {padding: 10px 10px;}
}

@media screen and (max-width: 635px) {
    .slogan {position: static; width: 80%; padding: 3% 3% 3% 12%; top: 0; -webkit-transform: translateY(-0); -ms-transform: translateY(-0); transform: translateY(-0);}
    header img {width: 100%;}
    .col1, .col2 {width: 100%; float: none; padding: 0 8%;}
    .col1 {margin-bottom: 40px;}
    #haus-verkaufen .number, #spezial .number, #stadt .number, #checkliste .number {top: 20px;}
    .box {width: 50%; float: none; margin-left: 25%;}
    .col3 {width: 80%; margin-left: 10%;}
    .contact {padding: 6% 5% 6% 5%;}
}

@media screen and (max-width: 485px) {
    .top {padding: 3% 4%;}
    .number {font-size: 20px; width: 25px; padding: 15px 0;}
    .box {width: 80%; margin-left: 10%;}
    .contact {width: 100%; padding: 6% 5% 6% 12%;}
    .experte {width: 100%; height: 300px; position: static;}
}

@media screen and (max-width: 420px) {
    .top {height: 80px;}
    .sub, .main {float: none; text-align: center;}
    .main {margin-top: 10px;}
}