/*
Theme Name: ELLELL Landing Page 
Description: Responsive ELLELL-Theme 
Version: 13.0 / All rights reserved
Design, Framework, Programmierung: Lutz Lerchenfeld - ELLELL Webdesign(c)2021
https://www.ll-design.info
*/

/* DESKTOP SCREENS ###################################################### */
/* DESKTOP SCREENS ###################################################### */
/* DESKTOP SCREENS ###################################################### */
/* DESKTOP SCREENS ###################################################### */

html {
top:0;
left:0;
scroll-behavior: smooth;
}

a{text-decoration: none; color: #1B4D79;}
a:hover{text-decoration: none; color: #000;}

strong {font-weight: 700;}

/* Logo Header */
.logopunkt {
position: absolute;
background-color: #f39c12;
width: 17px;
height: 17px;
bottom: 70px;
margin-left: 5px;
padding: 0px;
border-radius: 50%;
}

body {
font-family: 'open sans', Arial, sans-serif;
font-weight: 400;
margin: 0px;
top: 0px;
left: 0px;
padding: 0px;
font-size:16px; 
line-height: 200%;
color:#4c4a4a;
box-sizing: border-box;
background-color: #fff; /* #f9f7f7*/
/*-webkit-hyphens: auto; 
-moz-hyphens: auto; 
-ms-hyphens: auto;*/
overflow: -moz-scrollbars-vertical;
overflow-x: hidden; overflow-y:scroll;
}

.display-desktop {display:block;}
.display-mobile {display:none;}  

p {hyphens: auto;}

* {
-webkit-hyphens: auto; /* Für Mozilla Browser */
-moz-hyphens: auto; /* Für Internet Explorer Browser */
-ms-hyphens: auto;
}

.portrait  {
position: relative;
width: 55%; 
padding: 0px 40px 10px 0px; 
height: auto; 
margin-top:-200px;
}

.img-res-01 {
width: 75%; 
height: auto;
display: block;
margin: auto;
}

h1  { 
font-size:22px; 
padding: 0px;
letter-spacing: 0px;
margin: 0px 0px 22px 0px;
font-family: 'montserrat', arial, sans serif;
font-weight:300; 
text-align: left;
line-height: 140%; 
color: #000;
}

h2   { 
font-size:46px;  
font-family: 'montserrat', arial, sans serif;
text-align: left;
padding: 0px 0px 0px 0px;
letter-spacing: 0px;
font-weight:300; 
line-height: 120%; 
color: #000;
-webkit-hyphens: none !important;
-moz-hyphens: none !important;
-ms-hyphens: none !important;
hyphens: none !important;
}

h3   { 
font-size:24px; 
padding: 0px;
letter-spacing: 1px;
margin: 0px 0px 22px 0px;
font-family: 'montserrat', arial, sans serif;
font-weight:300; 
line-height: 170%; 
text-align: left;
color: #000;
}

h4        {
font-size:18px; 
text-transform: uppercase;
padding: 0px;
letter-spacing: 1px;
margin: 0px 0px 0px 0px;
font-family: 'montserrat',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:400; 
line-height: 140%; 
text-align: left;
color: #000;;
}

h5        {
font-size:16px;  
font-family: 'montserrat', arial, sans-serif;
margin: 0 auto;  
text-align: left;
padding: 0px;
letter-spacing: 0px;
margin-top: 20px; 
font-weight:400; 
line-height: 120%; 
color: #000;
}

.info-top {
position:fixed;
top: 0px;
margin: 0 auto;
padding: 1px 0px 1px 60px;
width: 100%;
min-height: 30px;
color:#565555;
font-size: 14px;
line-height: 140%;
background-color: #fff;
border-bottom: 1px solid #cacaca;
box-sizing: border-box;
z-index:100;
-webkit-box-shadow: 0px 10px 16px 0px rgba(50, 50, 50, 0.12);
-moz-box-shadow:    0px 10px 16px 0px rgba(50, 50, 50, 0.12);
box-shadow:         0px 10px 16px 0px rgba(50, 50, 50, 0.12);
}

.info-top a:link{color:#565555;}
.info-top a:hover{color:#000;}

.flagge {
height: 50px;
margin: -5px 0px 0px 0px;
padding: 0px;
top: 0px;
right: 10px;
width: 50px;
float: right;
background-color: #fff;
position: fixed;
box-sizing: border-box;
}

.slider-wrapper{
width: 100%;
min-height:100px;
display: block;
margin: 0 auto;}
.slider-wrapper-phone{display: none;}

/* Zweispaltig Logo */
.zweispaltig-links-full-66{
position: absolute;
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;
font-size:14px; 
line-height: 170%;
float: left;
top: 0px;
padding: 310px 60px 30px 230px;
width: 100%;
min-height: 200px;
color: red;
box-sizing: border-box;
}
.zweispaltig-links-full-66 h3   { 
font-size:90px;  
font-family: 'montserrat', arial, sans serif;
text-align: left;
padding: 20px 0px 0px 0px;
letter-spacing: 1px;
font-weight:300; 
line-height: 100%; 
color: #fff;
/*text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);*/
}

/* Zweispaltig Claim */
.zweispaltig-rechts-full-33{
position: absolute;
float: left;
top: 0px;
color: #000;
padding: 160px 10px 0px 160px;
width: 100%;
min-height: 200px;
box-sizing: border-box;
}
.zweispaltig-rechts-full-33 h3   {
color: #fff;
/*text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);*/
}
/* ENDE HEADER */

section {
margin: 0px auto 0 auto;
padding: 0px;
width: 100%;
height: auto;	
background-color: #FDFDFD;
box-sizing: border-box;
margin-bottom: 0px;	
}

.zweispaltig-links-full-02{
position: relative;
background-color:#669933;
float: left;
padding: 60px 60px 60px 160px;
width: 50%;
min-height: 400px;
color: #fff;
box-sizing: border-box;

}
.zweispaltig-links-full-02 h2{color:#fff; font-weight: 300;}

.zweispaltig-rechts-full-02{
font-family: 'open sans', Arial, sans-serif;
font-weight: 400;
font-size:14px; 
line-height: 170%;
position: relative;
float: left;
top: 0px;
color: #000;
padding: 60px 60px 60px 60px;
width: 50%;
min-height: 400px;
background-color: #fff;
box-sizing: border-box;
}

/* FLEXBOX */
.flex-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: stretch;
}

.flex-items:nth-child(1) {
padding: 60px 60px 60px 60px;
color: #000;
box-sizing: border-box;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
} 

.flex-items:nth-child(2) {
padding: 60px 60px 60px 60px;
width: 50%;
box-sizing: border-box;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
/* ENDE FLEXBOX */

.zweispaltig-links-full{
position: relative;
font-family: 'open sans', Arial, sans-serif;
font-weight: 300;
font-size:16px; 
float: left;
top: 0px;
padding: 60px 80px 60px 60px;
width: 100%;
min-height: 150px;
color: #000;
box-sizing: border-box;
}

.zweispaltig-rechts-full{ 
float: left;
background-color:#d3d3d3;
top: 0px;
color: #000;
padding: 0px;
width: 100%;
overflow: hidden;
min-height: 150px;
box-sizing: border-box;
}

/* Footer  ###################################################### */
.footer{
display:block;
font-size: 14px;
margin: 0 auto;
color:#000;
font-family: open sans, arial; 
letter-spacing: 0px; 
line-height: 200%;
background-color:#f4f4f4;
min-height: 10px;
text-align:center;
width: 100%;
padding: 40px 20px 10px 20px;
box-sizing: border-box;
}

.footer a{
text-decoration: none;
color: blue;
}

.footer a:hover{
text-decoration: none;
color: #000;
}

.footer h3{
color: #fff;
}

.box-rechts p{ text-transform: none;} /* Popup ############# */
.box-links p{ text-transform: none;} /* Popup ############# */

.clear {clear:left;}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */


/* Button To Top */
.up{
position: fixed;
display:block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 30px;
width: 30px;
color: #000;
bottom: 25px;
right: 25px;
z-index: 30;
box-sizing: border-box;
}

/*.scrollToTop{
position:fixed;
font-size: 22px;
width: 40px;
text-align: center;
height: 40px;
padding: 4px 9px 10px 8px;
background-color:#fff;
color: #000;
border: 1px solid #000;
position: fixed;
right: 20px;
bottom: 20px;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}

.scrollToTop:hover{
position:fixed;
font-size: 22px;
width: 40px;
text-align: center;
height: 40px;
padding: 4px 9px 10px 8px;
background-color:#000;
color: #fff;
border: 1px solid #000;
position: fixed;
right: 20px;
bottom: 20px;
box-sizing: border-box;
transition: all 0.4s ease-in-out;
}*/

/* TABLET ###################################################### */
/* TABLET ###################################################### */ 
/* TABLET ###################################################### */ 
/* TABLET ###################################################### */ 
/* TABLET ###################################################### */   
   
@media screen and (min-width:851px) and (max-width:1100px){

.img-res-01 {
width: 90%; 
height: auto;
display: block;
margin: auto;
}

.zweispaltig-links-full-02{
padding: 60px 60px 60px 60px;
}

.flex-items:nth-child(2) {
padding: 60px 60px 60px 60px;
}
	
}
  
/* SMALL SMARTPHONE ###################################################### */
/* SMALL SMARTPHONE ###################################################### */
/* SMALL SMARTPHONE ###################################################### */
/* SMALL SMARTPHONE ###################################################### */
/* SMALL SMARTPHONE ###################################################### */

@media screen and (min-width:80px) and (max-width:850px){
	
body {
font-family: 'open sans', Arial, sans-serif;
font-weight: 400;
margin: 0px;
top: 0px;
left: 0px;
padding: 0px;
font-size:14px; 
line-height: 150%;
color:#000;
box-sizing: border-box;
background-color: #f9f7f7;
}

.info-top {
position:fixed;
top: 0px;
margin: 0 auto;
padding: 8px 0px 8px 20px;
width: 100%;
min-height: 30px;
color:#565555;
font-size: 14px;
line-height: 140%;
background-color: #fff;
border-bottom: 1px solid #cacaca;
box-sizing: border-box;
z-index:100;
}

.flagge {
height: 50px;
margin: 8px 0px 0px 0px;
padding: 0px;
top: 0px;
right: 20px;
width: 50px;
float: right;
background-color: #fff;
position: fixed;
box-sizing: border-box;
}

.logopunkt {
position: absolute;
background-color: #f39c12;
width: 10px;
height: 10px;
bottom: 50px;
margin-left: 1px;
padding: 0px;
border-radius: 50%;
}

.slider-wrapper{display: none;}
.slider-wrapper-phone{
width: 100%;
min-height:0px;
display: block;
margin: 0px auto 0 auto;}

.img-res-01 {
width: 80%; 
height: auto;
display: block;
margin: auto;
}

.display-desktop {display:none;}
.display-mobile {display:block;}

h1, h2, h3, h4, h5, h6 {text-align: left;}

h1  { font-size:20px; }
h2  { font-size:28px; }
h3  { font-size:16px; }

.flex-container {
display: flex;
width: 100%;
flex-direction: column;
flex-wrap: nowrap;
justify-content: normal;
align-items: normal;
align-content: stretch;
}

.flex-items:nth-child(1) {
width: 100%;
float: left;
padding: 20px;  
}

.flex-items:nth-child(2) {
width: 100%;
padding: 20px;
float: left;
}


/* Zweispaltig Claim */
.zweispaltig-rechts-full-33{
position: absolute;
float: left;
top: 0px;
color: #fff;
font-size:22px; 
padding: 150px 30px 0px 30px;
width: 100%;
line-height: 140%;
min-height: 200px;
box-sizing: border-box;
}
.zweispaltig-rechts-full-33 h3   {
color: #fff;
font-size:22px;
line-height: 140%;
/*text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);*/
}

/* Zweispaltig Logo */
.zweispaltig-links-full-66{
position: absolute;
font-family: 'montserrat', Arial, sans-serif;
font-weight: 400;
font-size:55px; 
line-height: 170%;
float: left;
top: 0px;
padding: 220px 60px 10px 30px;
width: 100%;
min-height: 200px;
color: #fff;
box-sizing: border-box;
}

/* Logo Header */
.logopunkt {
position: absolute;
background-color: #f39c12;
width: 14px;
height: 14px;
bottom: 40px;
margin-left: 5px;
padding: 0px;
border-radius: 50%;
}

.zweispaltig-links-full-66 h3   { 
font-size:100px;  
font-family: 'montserrat', arial, sans serif;
text-align: left;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-weight:300; 
font-size:55px; 
line-height: 100%; 
color: #fff;
/*text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);*/
}



.zweispaltig-rechts-full-02 h3 {color: #fff; line-height: 200%; padding: 0px;}
.zweispaltig-links-full-02 {width: 100%; min-height: 100px; padding: 30px 20px 20px 20px;}

.zweispaltig-links-full, .zweispaltig-links-full-03, .zweispaltig-rechts-full-02
{width: 100%; font-size:14px; min-height: 100px; padding: 20px 20px 20px 20px;}

.zweispaltig-links-full-03{width: 100%; min-height: 100px; padding: 0px;}
.zweispaltig-links-full h3 {font-size:16px; letter-spacing: 0px; width: 100%; padding: 20px 20px 20px 0px;}

.zweispaltig-rechts-full{width: 100%; text-align: left; min-height: 100px; padding: 20px 20px 20px 20px;}
.zweispaltig-rechts-full h3 {font-size:16px; text-align: left; letter-spacing: 0px; width: 100%; padding: 0px;}

.footer{
display:block;
font-size: 12px;
margin: 0 auto;
color:#000;
text-transform: uppercase; 
font-family: open sans, arial; 
letter-spacing:1px; 
line-height: 200%;
background-color:#f4f4f4;
min-height: 10px;
text-align:left;
width: 100%;
padding: 20px 20px 0px 20px;
box-sizing: border-box;
}
}

.up{
line-height: 200%;
}

/*@media screen and (min-width:451px) and (max-width:850px){
.slider-wrapper{
background: url("https://optimum-living.de/media/img/tablet-01.jpg") no-repeat ;
background-size: 100%; 
background-color: #494848;
margin-top: 30px;
margin-bottom: -20px;
width: 100%;
min-height: 500px;
} 
}

@media screen and (min-width:80px) and (max-width:450px){
.slider-wrapper{
background: url("https://optimum-living.de/media/img/phone-01.jpg") no-repeat ;
background-size: 100%; 
background-color: #494848;
margin-top: 30px;
margin-bottom: -20px;
width: 100%;
min-height: 300px;
} 
}*/