/* Farben */

.gruen { color:#93ac78; }
.blue { color:#739cb4; }
.fontcolor { color:#7b736a; }
.lightblue { color:#e1e9ee; }
.hovercolor { color:#3c5d70; }
.brown { color: #6d6359; }

/* im template head.css untergebracht */
div.authorcopy { position:absolute;width:100%;right:-95%;background-color:transparent;transform-origin: top left;transform:rotate(-90deg);}.authorcopy span, p.authorcopy { font-size:9px; font-weight:normal; color:#666; padding:4px 5px;}


/* background-sizes: contain, cover, poster */

.btn-xs, .btn-group-xs > .btn { font-size: 13px; margin: 0 2px; color:#739cb4; }
.modal-backdrop { background: none; }
div.logo img { height:auto; max-width:120px; }
.nopadding { padding-left:0px; padding-right:0; }
.alert-danger { padding:10px 20px 20px 40px; }
strong { color:#93ac78; }
section.ehepost img { max-width:100%; }

body.impulse { 
background: transparent url('../../media/bg-paper.jpg') repeat-y;
background-size:100%;
}
h3 { font-weight:700; color:#739cb4; margin-bottom:4px; }
h2 { font-weight:normal; color:#6d6359; font-size:1.8em; margin:10px 0 30px 0; }
.inhalt p, .inhalt pre, .inhalt li { margin: 0.7em 0 1.0em 0; font-size: 14px; line-height: 25px; }
.inhalt ul, .inhalt ul li { list-style: none; margin: 0; padding: 0 0 0 10px; }
.inhalt ul li::before {font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    content: "\f105";
    color: #93ac78;
    margin-left: -12px;
    padding-right: 6px;
}

.screenshots figcaption .caption-content {
    position: absolute;
    top: 30%;
    left: 20%;
    margin-top: -20px;
    margin-left: -10%;
    width: 80%;
    -webkit-transform: translate(0px, 15px);
    -ms-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.screenshots figcaption .caption-content p {
    margin-bottom: 0;
    text-transform: none;
    font-weight: 200;
    font-size: 0.9em;
	line-height:1.3em;
}

.screenshots figcaption .caption-content h3 {
    margin: 1em 0;
    font-size: 1.1em;
	line-height:1.3em;
	color:#FFF;
}
.screenshots figcaption .caption-content a:hover, .screenshots figcaption .caption-content a:focus {
    color: #FFF;
}


/* ==========================================================================
Buttons
========================================================================== */

#accordion .panel-heading h4 { text-transform:uppercase; font-weight:500; font-size:1.4em; }
#accordion .panel-body h4 { font-family:'JennaSue_2018','Abel', sans-serif; font-size:2.4em; margin: 0em 0; }
#accordion .panel-body strong { color:#93ac78; }


/* ==========================================================================
Buttons
========================================================================== */

.ehe-btn {
    display: inline-block;
    width:43%; text-align:center;
    margin: 0 20px 10px 0;
    padding: 6px 30px;
    border-radius: 0px;
    background-color: #93ac78;
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-decoration: none;
}

.ehe-btn:hover, .ehe-btn:focus {
    background-color: #9cb5c0;
    color: #FFF;
}

.ehe-btn.light {
    padding: 4px 38px;
    background-color: #FFF;
    border: 2px solid #739cb4;
    color: #739cb4;
}

.ehe-btn.light:hover, .ehe-btn.light:focus {
    background-color: #9cb5c0;
    color: #fff;
}


/* ==========================================================================
Navi
========================================================================== */

.overlay { background-color: rgba(255, 255, 255, 0.4); }
.overlay ul li a:hover, .overlay ul li a:focus { border-color: #FFF; color: #FFF; background-color: #739cb4; }

/* ==========================================================================
Sections
========================================================================== */

section { padding-top:0px; padding-bottom:0px;  }
section .container { padding-top:10px; padding-bottom:10px;  }
section.hero .container, section.nohero .container { padding-top:0px;padding-bottom:0px; }
section.hero .container .col-md-9, section.nohero .container .col-md-9 { margin-top:40px; }
section.hero #top1 {padding-top: 60px; }
section.hero { color:#7b736a;padding: 0px 0 60px 0; }
section.nohero { color:#7b736a;padding: 0px 0 0px 0; }
section.hero h1 { margin:130px 0 0 -7px; padding:0; font-family: 'Special light',sans-serif; font-size: 8em; color:#93ac78; letter-spacing:-2px; line-height:0.5em !important; }
section.hero h3 { margin: 20px 0 30px 0; padding:0; font-family: 'Special regular',sans-serif; font-size: 1.8em; line-height:1em;letter-spacing:-1px; }
section.hero p { margin: 0 0 30px 0; padding:0; font-size: 1.2em; font-weight:200; line-height:1.7em; padding-right:25%; }

section#mehrerfahren { padding-left:15px; padding-right:15px;  }
section#mehrerfahren .container { padding-top:110px; padding-bottom:40px;  }

section#schraeg h1 { 
font-family:'JennaSue_2018','Abel', sans-serif; 
font-size:3.8em; 
color:#739cb4;  
text-align:center;
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.showcase-wrap {position: relative; padding: 40px 0 40px; min-height: 500px; }

section.showcase .device {left: 0%;}
section.showcase img.knopf { position:absolute; top:-40px;right:-100px; }
section.showcase h1 { font-family:'JennaSue_2018','Abel', sans-serif; font-size:3.8em; color:#FFF; }


section.footer { padding-top:30px; padding-bottom:30px;}
section.footer .col-md-2 { padding-left:0px; }
section.footer .col-md-5.text2 { padding-right:0px; }
section.footer .col-md-5 p { font-size:13px;line-height:20px; }

section.bottom_section { background-color:#739cb4; }
section.bottom_section p,
section.bottom_section p a { font-size:13px;line-height:15px; color:#FFF; }


/* ==========================================================================
Formular
========================================================================== */


section h1, #ehepost-form h4 { font-family:'JennaSue_2018','Abel', sans-serif; font-size:3.8em; color:#739cb4; }
section#ehepostform { padding:30px 15px 0 15px; }
#ehepostform h4 { margin: 0.33em 0; }
#ehepostform p { font-size: 13px; line-height: 20px; }
#ehepostform button { margin:30px 10px 0 0; float:left; }
#ehepostform .formtitle h1 { display:block;width:auto;float:left;margin-top:10px;margin-right:20px; }
#ehepostform .kosten { font-family: 'Special light',sans-serif; font-size: 1.6rem; color:#93ac78; margin-top:20px; }
#yform-ehepost-form-field-5 { width:320px; height:60px; background-color: #FFF;font-size:18px; }
#ehepostform div.alert-primary { background-color:#e2eaef; }
#submitmit, #submitohne { float:right;text-align:right; }

#yform-ehepost-form-vorname { width:47.5%; float:left; margin-right:5%;}
#yform-ehepost-form-name { width:47.5%; float:right; }
#yform-ehepost-form-plz { width:30%; float:left; margin-right:5%; }
#yform-ehepost-form-ort { width:65%; float:right; }
#yform-ehepost-form-datenschutz { padding-top:40px; }


/* Cookie-Banner */

.iwcc-background {background: transparent !important;}
.iwcc-wrapper {
background: #EFEFEF !important;
max-width: 50em !important;
max-height: 60vh !important;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}
.iwcc-wrapper-inner {padding: 1.5em !important;}
.iwcc-cookiegroups {padding-top: 0.5em !important;}
.iwcc-sitelinks {text-align: left !important;}
.iwcc-sitelinks a {width:auto;}
.iwcc-save-selection {background: #FFF !important;}
.iwcc-save-selection:hover { background: #999 !important; }
.iwcc-accept-all {color: #fff !important;}
.iwcc-show-box { margin-left:15px;background:#EFEFEF;float:right;color:#888 !important;}


@media screen and (max-width:992px){
#headernotch { padding-top: 1.5em; }
#footernotch { padding-bottom: 1.5em; }
}


/* ==========================================================================
Responsive
========================================================================== */


@media screen and (min-width:992px){

.container, .inhalt {
    max-width: 980px; margin:0px auto; padding:30px 0;
}

.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    background: #93ac78;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: transparent;
}

.overlay nav {
    position: relative;
    top: 32%;
    height: 60%;
    text-align: center;
    font-size: 54px;
    margin-left:12%;
    }
    
.overlay ul li a {
    display: block;
    padding: 40px 20px; min-width: 20px;
    border: none;
    border-radius: 0px;
    background-color: transparent;
    color: #93ac78;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 15px;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.overlay ul li a:hover, .overlay ul li a:focus {
    border-color: #739cb4;
    color: #739cb4;
    background-color: transparent
}
}





/* *******************************************************
Custom, iPhone Retina
******************************************************** */

@media only screen and (min-width : 320px) {  
/* ----- */

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 300px;
    background: rgb(40, 70, 102) url('../../media/paper19_blau_top.jpg') left -0px no-repeat;
    background-size: cover;
    color: #fff;
}
section h1, #ehepost-form h4 { margin: 0.2em 0 0 0; font-size:4.2em; }

section.hero .container .col-md-9, section.nohero .container .col-md-9 {margin-top:25px; }
}
section.hero h1 { margin: 40px 0 0 -7px; font-size: 4em; }
h2 { font-size: 1.6em; line-height:1.4em; margin: 10px 0 30px 0; }
section.hero p { padding-right: 0%; line-height:1.5em; }

section.showcase img.knopf {top:-80px;right:20px; width:140px;height:auto;}
section#mehrerfahren .container { padding-top: 20px;}
section.bistuemer { padding-left:15px; padding-right:15px; }
.showcase-wrap .col-md-7 { margin-left:15px; margin-right:15px; }


#schraeg{
background:url('../../media/paper19_blau_bg.jpg') 50% 0 repeat-y fixed;
background-size:poster;
}
#dieapp{
background:url('../../media/photocaseu8fithd457034212.jpg') 50% 0 no-repeat fixed;
background-size:200%;
}


/* ----- */
}

/* *******************************************************
Extra Small Devices, Phones
******************************************************** */

@media only screen and (min-width : 480px) {
/* ----- */

.hero {
    position: relative;
    padding: 50px 0 50px 0;
    min-height: 350px;
    background: rgb(40, 70, 102) url('../../media/paper19_blau_top.jpg') center -60px no-repeat;
    background-size: 200%;
    color: #fff;
}

h1 {margin: 0.4em 0;font-size: 2em;}
section.hero p { padding-right:50%;margin: 0 0 0px 0; }
section.hero h2 { font-size: 1.5em; line-height:1.4em; margin: 10px 0 30px 0; padding-right:50%;}
#dieehepost{padding-left:0px; padding-right:0px;}
.ehe-btn { width: 43%; }
section#ehepostform {padding: 30px 0px 0 0px;}
section.bistuemer {padding-left: 0px;padding-right: 0px;}
.showcase-wrap .col-md-7 { margin-left:0px; margin-right:0px; }
section#mehrerfahren { padding-left:0px; padding-right:0px;  }
/* ----- */
}


/* *******************************************************
Small devices (landscape phones, 576px and up)
******************************************************** */

@media only screen and (min-width: 576px) {
/* ----- */

section.hero .container .col-md-9, section.nohero .container .col-md-9 {margin-top:40px; }



/* ----- */
}

 
 
/* *******************************************************
Medium devices (tablets, 768px and up)
******************************************************** */

@media only screen and (min-width : 768px) {
/* ----- */
        

/* ----- */
}



/* *******************************************************
Medium Devices, Desktops - 
--- ab hier Menu normal
******************************************************** */

@media only screen and (min-width : 992px) {
/* ----- */

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 300px;
    background: rgb(40, 70, 102) url('../../media/paper19_blau_top.jpg') left -70px no-repeat;
    background-size: cover;
    color: #fff;
}
section.hero h1 { margin:80px 0 0 -7px; font-size: 8em; }
section h1, #ehepost-form h4 { margin: 0.7em 0; font-size:4.2em; }
h2 { font-size:1.8em; margin:10px 0 10px 0; }
section.showcase img.knopf {top:-50px;right:0px; width:200px;height:auto;}
section.hero p { padding-right:25%; }
section#top1 .container {padding-left:0px; padding-right:0px;}
section#mehrerfahren .container {padding-top: 110px;padding-bottom: 40px;}
section.bistuemer { padding-left:0px; padding-right:0px; }
.showcase-wrap .col-md-7 { margin-left:0px; margin-right:0px; }
.screenshots figcaption .caption-content h3 {font-size: 1.0em;}
.screenshots figcaption {padding: 15% 0;}
.screenshots figcaption .caption-content {top: 15%;}


#schraeg{
background:url('../../media/paper19_blau_bg.jpg') 50% 0 repeat-y fixed;
background-size:100%;
}
#dieapp{
background:url('../../media/photocaseu8fithd457034212.jpg') no-repeat center center fixed;
background-size:110%;
}


/* ----- */
}


/* *******************************************************
Large Devices, Wide Screens
******************************************************** */

@media only screen and (min-width : 1200px) {
/* ----- */

.screenshots figcaption .caption-content h3 {font-size: 1.1em;}
.screenshots figcaption {padding: 25% 0;}
.screenshots figcaption .caption-content {top: 30%;}

/* ----- */
}
    


/* *******************************************************
Angeber-Breite
******************************************************** */

@media only screen and (min-width : 1400px) {
/* ----- */

.hero {
    position: relative;
    padding: 60px 0 60px 0;
    min-height: 300px;
    background: rgb(40, 70, 102) url('../../media/paper19_blau_top.jpg') 0 -200px no-repeat;
    background-size: 100%;
    color: #fff;
}

#schraeg{
background:url('../../media/paper19_blau_bg.jpg') 50% 0 repeat-y fixed;
background-size:110%;
}
#dieapp{
background:url('../../media/photocaseu8fithd457034212.jpg') no-repeat center center fixed;
background-size:110%;
}

/* ----- */
}


/* *******************************************************
Angeber-Breite
******************************************************** */

@media only screen and (max-width : 980px) {
/* ----- */

#dieehepost, #mehrerfahren { background-size:auto 120% !important; background-position:top left !important; }

/* ----- */
}