/*
Description: Theme fuer segert.net - HTML5, CSS3
Author: Ralph Segert
Date: 05/2017
Author URI: http://segert.net
*/


* {
margin: 0;
padding: 0;
}


html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}


body {
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;  
background-color: #ddd;
}

a:focus {
outline: none;
}

img, fieldset {
border: 0;
}

img {
vertical-align: middle;
}

a {
border: 0;
text-decoration: none;
}


/* __ Boxen __ */


.wrapper {
margin: 0 auto; 
width: 100%;
max-width: 1200px;
}

.header {
margin: 0 auto; 
width: 100%; 
text-align: center;
background: url("images/bg-header@2x.png") center no-repeat;
background-size: cover;
min-height: 172px;
}

.main {
margin: 0 auto; 
float: left;
width: 100%;
background: #fff url("images/bg-ig-kompakt.jpg") center top no-repeat;
background-size: cover;
min-height: 1990px;
}


.footer {
float: left;
width: 100%;
color: #fff;
background-color: #04AA16;
text-align: center;
}

.nav-wrapper, .main-wrapper, .footer-wrapper {
margin: 0 auto; 
max-width: 1200px;
}

.main-wrapper, .footer-wrapper {
padding: 4% 10% 4% 10%;
}

.logo-image a {
display: none;
}

.main figure {
float: left;
text-align: center;
width: 100%;
margin-bottom: 6%;
}

.main figure img {
text-align: center;
width: 50%;
margin-right: 25%;
height: auto;
}

/* __ Hauptbereiche Content __ */


.main a {
color: #0533AD;
border-bottom: 1px dotted #444;
transition: .3s;
}

.main a:hover {
color: #000;
border-bottom: 1px solid #0533AD;
}

.main img {
width: 19%;
height: auto;
float: right;
margin-left: 6%;
margin-top: -2%;
}

.main h1 {
font-size: 160%;
padding: 2% 2% 2.5% 2%;
color: #04AA16;
text-align: center;
}

.main h2 {
font-size: 220%;
color: #000;
text-align: center;
padding: 0 2% 4.5% 2%;
}

.main h2 strong {
color: #04AA16;
}

.main h3 {
width: 100%;
padding: 5% 0 1% 32%;
font-size: 120%;
color: #000;
}

.main p {
font-size: 120%;
line-height: 1.7em;
padding: 0 0 1% 32%;
font-weight: bold;
}

.main span {
float: left;
width: 20%;
display: block;
color: #04AA16;
}

.main .firma {
margin-bottom: 1%;
font-style: italic;
}

.main .firma2 {
margin-top: 1%;
line-height: 2.2em;
}

.teaser {
float: left;
width: 100%;
border-radius: 0 16px 16px 0;
background: #04AA16 url("images/motiv-eins@2x.jpg") left no-repeat;
background-size: 31%;
margin-bottom: 1px;
}

.teaser2 {
background: #0067AB url("images/motiv-zwei@2x.jpg") left no-repeat;
background-size: 31%;

}

.teaser3 {
background: #04AA16 url("images/motiv-drei@2x.jpg") left no-repeat;
background-size: 31%;
}


.teaser h2 {
font-size: 180%;
color: #fff;
letter-spacing: 1px;
text-align: left;
margin-top: 3%;
padding: 3% 2% 3% 38%;
background: url("images/zahleins@2x.png") left no-repeat;
background-size: 9%;
background-position-x: 28.5%;
}

.teaser .h2 {
background: url("images/zahlzwei@2x.png") left no-repeat;
background-size: 9%;
background-position-x: 28.5%;
}

.teaser .h2b {
background: url("images/zahldrei@2x.png") left no-repeat;
background-size: 9%;
background-position-x: 28.5%;
}

.teaser:last-of-type {
margin-bottom: 4%;
}


.teaser ul {
font-size: 90%;	
padding: 0 3% 4% 38%;
}

.teaser li {
width: 100%;
color: #FFF;
padding-bottom: 1.5%;
line-height: 1.8em;
}

.teaser li:last-of-type {
padding-bottom: 5.5%;
}

.agb {
font-size: inherit;
}

.footer p {
font-size: 90%;
letter-spacing: 1px;
padding-bottom: 1%;
line-height: 1.9em;
}


.footer a {
color:#fff;
transition: .3s;
}


.footer a:hover {
color: #000;
}



/* __ Misc __ */


.cf:after {
content: "";
display: table;
clear: both;
}



/*Styles for screen 940px and lower*/
@media only screen and (max-width : 940px) {
	
	


	
}


/*Styles for screen 800px and lower*/
@media only screen and (max-width : 800px) {


.main {
background: none;
background-color: #fff;
min-height: 100%;
}


.header {
background: url("images/bg-header.png") center no-repeat;
background-size: 120%;
min-height: 130px;
}

.main-wrapper, .footer-wrapper {
padding: 4% 0 4% 0;
}

.main h2 {
font-size: 200%;
}


.teaser {
border-radius: 0;
background-size: 32%;
margin-left: -1px;
}

.teaser2, .teaser3 {
background-size: 32%;
}


.teaser h2 {
font-size: 140%;
padding-top: 2%;
background-size: 8%;
background-position-x: 30%;
}

.teaser .h2, .teaser .h2b {
background-size: 8%;
background-position-x: 30%;
}


.teaser ul {
font-size: inherit;	
padding: 0 2% 1% 36%;
}

.teaser li {
line-height: 1.6em;	
}

.main h3 {
padding: 5% 0 1% 15%;
}

.main p {
padding: 0 0 1% 15%;
}

}


/*Styles for screen 640px and lower*/
@media only screen and (max-width : 640px) {

body {
font-family: Arial, Helvetica, sans-serif; 
font-size: 110% 
}

.header {
background-size: 130%;
min-height: 70px;
}

.main h1 {
font-size: 130%;
}

.main h2 {
font-size: 140%;
}

.main figure img {
width: 66%;
margin-right: 17%;

}

.teaser {
background-size: 100%;
}

.teaser2 {
background-position-y: -24%;
}

.teaser3 {
background-position-y: 48%;
}


.teaser h2, .teaser .h2, .teaser .h2b {
font-size: 120%;
letter-spacing: 0;
margin-top: 0%;
padding: 8% 2% 8% 19%;
background-color: rgba(4,170,22,1);
background-size: 13%;
background-position-x: 3%;
}

.teaser .h2 {
background-color: rgba(0,103,171,1);
}


.teaser:last-of-type {
margin-bottom: 8%;
}

.teaser ul {
padding: 9% 2% 7% 9%;
background-color: rgba(256,256,256,0.75);
}

.teaser li {
color: #000;
padding-bottom: 4%;
}

.main span {
width: 28%;
}

.main h3 {
font-size: 100%;
padding: 4% 0 1% 5%;
}

.main p {
font-size: inherit;
padding: 0 0 1% 5%;

}

.footer p {
padding-top: 2%;
letter-spacing: 0;
padding-bottom: 2%;
line-height: 1.8em;
}

.main .firma2 {
margin-bottom: 5%;
}

}