@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Oswald:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

.fll{
float: left;
}

.flr{
float: right;
}
.hidden{
	display:none;
}
.cf:before, .cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.clear{
clear: both;
height: 0;
width: 0;
display: block;
visibility: hidden;
}

body{
	font-family: 'Open Sans';
    font-size: 15px;
}

.wrapper{
	margin: auto;
	max-width: 1000px
}

#header{
    background-color: #009ada;
    box-shadow: 0 0 5px 5px #000000;
}
#header #logo{
	max-width: 175px;
}
#header #navigation{
	margin: 19px 10px;
	color: #FFFFFF;
}
#header #navigation a{
    color: #FFFFFF;
	list-style: none;
    display: inline-block;
	text-decoration: none;
}
#header #navigation a li{
    color: #FFFFFF;
    font-size: 18px;
    margin: 0 20px;
    padding: 15px 5px;
}
#header #navigation a li.red{
    background-color: #e3001b;
}
#header #navigation #socials{
	text-decoration: none;
	list-style: none;
    display: inline-block;
}
#header #navigation #socials img{
	width: 25px;
}
#header #navigation #socials a img{
	margin: 7px 10px;
}
#header #submenu{
    width: 1000px;
    margin-top: 115px;
    position: absolute;
    color: #FFFFFF;
    font-size: 17px;
}
#header #submenu span{
	font-weight: 600;
    margin-right: 20px;
    margin-left: -55px;
}
#header #submenu a{
    color: #FFFFFF;
    list-style: none;
    display: inline-block;
    text-decoration: none;
    margin: 0 16px;
}

#slider{
	background-position: top center;
	background-image: url(http://afd-mh-fraktion.de/img/header.png);
	background-size: cover;
}
#slider::after{
	content: '';
	background-position: top center;
	background-image: url(http://afd-mh-fraktion.de/img/header.png);
	background-size: cover;
}
#slider #content{
    max-width: 400px;
    margin-left: -58px;
}
#slider #content h1{
	margin-top: 200px;
    font-family: 'Oswald', sans-serif;
    font-size: 47px;
    font-weight: 500;
    max-width: 425px;
    line-height: 52px;
    color: #FFFFFF;
}
#slider #content span{
    margin: 24px 0;
    height: 3px;
    width: 175px;
    background-color: #e3001b;
    display: block;
}
#slider #content h2{
    margin-bottom: 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 33px;
    font-weight: 400;
    max-width: 315px;
    line-height: 50px;
    color: #FFFFFF;
}
#slider #content button{
    min-width: 196px;
    font-size: 15px;
    font-weight: 600;
    padding: 5px 5px;
    margin: 2px;
    border: 2px solid #FFFFFF;
    background-color: transparent;
    color: #FFFFFF;
	box-sizing: border-box;
	cursor: pointer;
}
#slider #content button:hover{
    background-color: #FFFFFF;
    color: #000000;
}
#slider #person{
    margin-top: 40px;
    width: 670px;
    display: block;
    margin-right: -87px;
}
#info-box{
	padding-top: 60px;
    background-repeat: no-repeat;
    background-image: url(http://afd-mh-fraktion.de/img/info-box.png);
    background-size: cover;
    background-position: 0 285px;
    margin-bottom: 415px;
	position: relative;
}
#info-box #welcome{
	border: 5px solid #000000;
    max-width: 300px;
    padding: 50px 20px 175px;
    font-size: 30px;
    background-color: #FFFFFF;
    margin-bottom: -180px;
}
#info-box #welcome p{
    margin-bottom: 80px;
}
#info-box #welcome img{
	width: 340px;
    margin-top: 157px;
    margin-left: -20px;
}
#info-box #statistica{
	width: 650px;
    margin-right: -30px;
}
#info-box #statistica h3{
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
	margin-bottom: 5px;
}
#info-box #statistica #statistica-bars{
	margin: 85px 0 37px 115px;
}
#info-box #statistica #statistica-bars .statistica{
	margin: 10px 0;
	color: #FFFFFF;
}
#info-box #statistica #statistica-bars .statistica b{
	margin-bottom: 5px;
    display: block;
}
#info-box #statistica #statistica-bars .statistica .progress-bar{
background-color: #FFFFFF;
    width: 424px;
    height: 15px;
    border-radius: 8px;
    display: inline-block;
    margin-right: 20px;
}
#info-box #statistica #statistica-bars .statistica .progress-bar .progress{
    background-color: #03374F;
    height: 15px;
    border-radius: 8px;
}
#info-box #statistica #statistica-bars .statistica span{
    font-size: 22px;
    font-weight: 600;
}
#info-box::before{
    content: '';
    background-repeat: no-repeat;
    background-image: url(http://afd-mh-fraktion.de/img/skyline.png);
    background-size: cover;
    background-position: 0 -31px;
    height: 300px;
    position: absolute;
    bottom: -415px;
    width: 100%;
}
#info-buttons{
    position: absolute;
    bottom: -90px;
    margin-left: 495px;
}
#info-buttons button{
	margin: 0 10px;
	color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 25px 20px;
    font-size: 18px;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(1,106,194,1) 35%, rgba(1,123,195,1) 100%);
	cursor: pointer;
}


#box{
	padding: 25px 0 50px;
}
#box a{
	font-weight: 600;
    color: #009ada;
    text-decoration: none;
}

#fraktion{
    background-color: #0278AA;
    text-align: center;
    padding: 50px 0;
}
#fraktion .wrapper{
	max-width: 1300px;
}
#fraktion h3{
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
	text-align: left;
	color:  #FFFFFF;
}
#fraktion .fraktion-content-box{
    background-color: #FFFFFF;
    padding: 15px 20px;
    width: 31%;
    margin: 1%;
    box-sizing: border-box;
    text-align: left;
}
#fraktion .fraktion-content-box h4{
	font-family: 'Oswald', sans-serif;
	font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
	margin-top: 15px;
    margin-bottom: 5px;
	text-align: left;
}
#fraktion .fraktion-content-box span{
    font-size: 15px;
    font-weight: 600;
    color: #4e4e4e;
    margin-bottom: 5px;
    display: block;
    min-height: 20px;
}
#fraktion .fraktion-content-box p{
	height: 244px;
	overflow: hidden;
}
#fraktion .fraktion-content-box i{
    color: #1f78aa;
    font-weight: 600;
	cursor: pointer;
}

#partei .wrapper .content,
#politik .wrapper .content,
#mitwirken .wrapper .content{
    padding: 20px 20px;
    max-width: 640px;
    margin: 15px auto;
}
#mitwirken .wrapper .content{
    background-color: #FFFFFF;
}
#partei .wrapper .content h3,
#politik .wrapper .content h3,
#mitwirken .wrapper .content h3{
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}
#partei .wrapper .content a,
#politik .wrapper .content a,
#mitwirken .wrapper .content a{
	font-weight: 600;
    color: #009ada;
    text-decoration: none;
}
#mitwirken .wrapper .content .mitwirken-box{
	max-width: 96%;
    display: inline-block;
    padding: 2%;
    box-shadow: 0 0 5px #d2d2d2;
    border-radius: 5px;
}
#mitwirken .wrapper .content .mitwirken-box h4{
	font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}
#mitwirken .wrapper .content .mitwirken-box button{
    margin: 15px 0;
    width: 100%;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 25px 20px;
    font-size: 18px;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(1,106,194,1) 35%, rgba(1,123,195,1) 100%);
    cursor: pointer;
}



#inhalt{
	padding-top: 20px; 
	padding-bottom: 20px; 
    background-image: url(https://www.afd-mh-fraktion.de/img/background.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}



#news{
    background-color: #0278AA;
    text-align: center;
    padding: 50px 0;
}
#news #news-box{
    background-color: #FFFFFF;
    max-width: 600px;
    margin: auto;
    padding-bottom: 35px;
}
#news #news-box h3{
	font-family: 'Oswald', sans-serif;
	text-align: left;
    font-size: 31px;
    font-weight: 500;
    margin-left: 35px;
    padding-top: 20px;
	margin-bottom: 20px;
}
#news #news-box img{
	max-width: 800px;
    border-bottom: 1px solid #000000;
    margin-bottom: 15px;
}

#kontakt{
	background-image: url('https://afd-mh-fraktion.de/img/contact-background.jpg');
	background-position: center center;
	background-size: cover;
}
#kontakt #contact-box{
	max-width: 50%;
}
#kontakt h3{
	margin-left: 40px;
	font-family: 'Oswald', sans-serif;
	text-align: left;
    font-size: 31px;
    font-weight: 500;
    padding-top: 20px;
	margin-bottom: 20px;
}
#kontakt form{
    padding: 25px 35px;
    margin-top: 20px;
    margin: auto;
    box-sizing: border-box;
}
#kontakt form input{
    padding: 10px 15px;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
	border: 2px solid #1f78aa;
}
#kontakt form textarea{
    padding: 10px 15px;
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
	border: 2px solid #1f78aa;
    resize: none;
    min-height: 125px;
	font-family: 'Open Sans';
}
#kontakt form input[type="submit"]{
    min-width: 196px;
    font-size: 15px;
    font-weight: 600;
    padding: 5px 5px;
    margin: 2px;
	border: 2px solid #1f78aa;
    background-color: transparent;
    color: #000000;
    box-sizing: border-box;
    cursor: pointer;
}
#kontakt form input[type="submit"]:hover{
    background-color: #FFFFFF;
    color: #000000;
}
#kontakt .error{
    color: #d61818;
    margin-top: -6px;
    margin-bottom: 10px;
}

#footer{
	padding: 40px 0 20px;
	box-shadow: 0 0 5px #000000;
    background-color: #1f78aa;
}
#footer span{
	font-size: 20px;
    color: #FFFFFF;
}
#footer #footer-socials{
	margin-left: 30px;
}
#footer #footer-socials img{
	width: 24px;
}
#footer #contact{
    width: 260px;
    margin-right: -55px;
}
#footer #contact h3{
	font-family: 'Oswald', sans-serif;
	color: #FFFFFF;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 25px;
}
#footer #contact p{
    color: #FFFFFF;
    margin-bottom: 5px;
}
#footer #contact a{
    color: #FFFFFF;
    margin-bottom: 5px;
	display: block;
}

#footer #rechtliches{
	color: #FFFFFF;
}
#footer #rechtliches a{
	color: #FFFFFF;
	text-decoration: none;
}

@media only screen and (max-width: 1175px){
	.wrapper{
		max-width: inherit;
		width: 92%;
	}
	#slider{
		overflow: hidden;
	}
	#header #submenu{
		width: 92%;
	}
	#header #submenu span{
		margin-left: 0;
	}
	#slider #content{
		margin-left: 0;
	}
	#info-box #statistica{
		margin-right: 0;
	}
	#info-box #statistica #statistica-bars{
		margin: 85px 0 37px 40px;
	}
	#footer #contact{
		margin-right: inherit;
	}
}
@media only screen and (max-width: 1090px){
	#info-box #welcome{
		max-width: inherit;
		width: 94%;
	}
	#info-box #welcome p{
		margin-bottom: 10px;
	}
	#info-box #welcome img{
		margin: 0;
	}
	#info-box #statistica{
		width: 93%;
		margin-right: 4%;
	}
	#fraktion .fraktion-content-box{
		width: 48%;
	}
}
@media only screen and (max-width: 980px){
	#info-box #welcome{
		padding: 50px 20px 220px;
		margin-bottom: -200px;
	}
	#politik .wrapper .content{
		max-width: inherit!important;
	}
	#fraktion .wrapper{
		max-width: inherit;
	}
	#news #news-box{
		max-width: inherit;
	}
	#kontakt #contact-box{
		max-width: 100%;
	}
}
@media only screen and (max-width: 785px){
	#fraktion .fraktion-content-box {
		width: 98%;
	}
	#info-box #welcome {
		padding: 50px 20px 275px;
		margin-bottom: -235px;
	}
	
}
@media only screen and (max-width: 625px){
	#info-box #welcome{
		width: 90%;
	}
	#info-box #welcome {
		padding: 50px 20px 325px;
		margin-bottom: -295px;
	}
	#info-box #statistica #statistica-bars{
		margin: 85px 0 37px 0;
	}
}
@media only screen and (max-width: 550px){
	iframe{
		width: 100%;
	}
	#footer .fll{
		width: 100%;
	}
	#footer .flr{
		width: 100%;
	}
	#footer #rechtliches{
		margin-top: 10px;
	}
}
@media only screen and (max-width: 490px){
	#header #logo{
		max-width: 130px;
	}
	#header #navigation{
		margin: 5px 0;
	}
	#header #submenu{
		margin-top: 85px;
	}
	#header #submenu .flr{
		margin-top: 10px;
	}
	#info-box #welcome{
		padding: 50px 20px 360px;
		margin-bottom: -335px;
	}
	#info-box #statistica #statistica-bars .statistica .progress-bar{
		width: 100%;
	}
	#info-box{
		margin-bottom: 255px;
	}
}
@media only screen and (max-width: 440px){
	#header #navigation{
		display: none;
	}
}
@media only screen and (max-width: 418px){
	#info-box #welcome {
		width: 84%;
		padding: 50px 20px 435px;
		margin-bottom: -420px;
	}
	#info-box #welcome img{
		width: 100%;
	}
}
@media only screen and (max-width: 390px){
	#info-box #welcome {
		padding: 50px 20px 495px;
		margin-bottom: -458px;
	}
}
@media only screen and (max-width: 325px){
	#info-box #welcome{
		margin-bottom: -488px;
	}
}
@media only screen and (max-width: 320px){
	#info-box #welcome {
		margin-bottom: -525px;
		padding: 50px 20px 535px;
	}
	
}