/* This CSS file is part of the HTML5 / CSS3 tutorial on http://www.lingulo.com */

/* GLOBAL */

  #cookieNotice              {position:fixed;bottom: 0px;width: 100%;background-color:#d4d0d1;padding:10px 0 10px 0;height:auto;text-align:center; font-size: 14px; line-height: 140%;z-index: 5000}
  #cookieNoticeCloser        {color:transparent;position:absolute;right:10px;width:15px;height:15px;cursor:pointer}
  #cookieNoticeCloser:before {content:'';position:absolute;width:5px;height:20px;background-color:#fff;left:7px;top:0px;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
  #cookieNoticeCloser:after  {content:'';position:absolute;width:5px;height:20px;background-color:#fff;left:7px;top:0px;transform:rotate(45deg);-webkit-transform:rotate(45deg);}

/* Cookie-Banner*/
#cookiebanner{width:100%;background-color:#fff;position:fixed;bottom:0;left:0;padding-bottom:5px;box-shadow:0 1px 4px rgba(10,10,10,.4);opacity:.95;z-index:8600000000;font-family: 'Roboto', sans-serif, Arial;}
    #cookiebanner a{text-decoration:none}
    #cBanner{width:100%;padding-left:2%;margin-top:1%; text-align: center}
    #text_banner{width:calc(80% - 110px);float:left; color:#005A79; font-size:14px;font-family:arial; line-height: 140%; text-align: left}
    #link_banner{text-decoration:none;color:#005A79}
    #link_banner:hover{text-decoration:underline;color:#CBB816}
    #buttons_banner{width:20%;float:right;padding-bottom:1%; text-align: right; margin-right: 30px;padding-right: 20px; }
    #button_einverstanden{background-color:#005A79;border-width:0;border-radius:5px;font-size:14px;font-family:'Roboto', sans-serif, Arial;color:#fff;padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px; display:inline-block; margin: 5px 5px 5px 5px}
    #button_einverstanden:hover{cursor:pointer;background-color:#CBB816}
    #button_nein{background-color:#005A79;border-width:0;border-radius:5px;font-size:14px;font-family:'Roboto', sans-serif, Arial;color:#fff;padding-left:20px;padding-right:20px;padding-top:12px;padding-bottom:12px; display:inline-block; margin: 5px 5px 5px 5px}
    #button_nein:hover{cursor:pointer;background-color:#CBB816}
    #co_wieder{position:fixed;bottom:0;right:0;background-color:#fff;padding:5px;z-index:8500000000;display:none}
    #co_wieder:hover{cursor:pointer}
    #text_wieder{color:#5a6e8c;font-size:12px;font-family:'Roboto', sans-serif, arial}
    #coo_logo{float:left;margin:0;padding:0;margin-right:20px}
    #coo_links{width:100px;font-size:12px;float:left}
    #coo_links img{width:50px;margin-bottom:5px}
    #cb_link{color:#00be50}#cBG{position:fixed;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,.2);z-index:8400000000;display:none}
    @media only screen and (min-width:1200px){.mob_span{display:none}}
    @media only screen and (max-width:1199px){.desk_span{display:none}
        #coo_links{width:100%}#cb_link{position:absolute;top:20px;left:110px;font-size:16px;margin-left:20px}
        #cookiebanner{bottom:0;left:0;padding-bottom:5px;padding-left: 10px}
        #coo_img_text{float:left;width:100%}
        #text_banner{color:#005A79;font-size:14px;width:calc(100% - 70px)}
        #buttons_banner{width:98%;float:right;padding:20px 0 10px 20px; text-align: right; margin-left: 20px}
        #button_einverstanden{float:right;background-color:#005A79;border-width:0;border-radius:10px;font-size:14px;color:#fff;margin-right:20px;padding: 10px 8px}
        #button_nein{float:right;background-color:#005A79;border-width:0;border-radius:10px;font-size:14px;color:#fff;padding: 10px 8px}
        #text_wieder{color:#005A79;font-size:10px}
        #coo_logo{float:left;margin:0;padding:0;margin-right:10px}#coo_logo img{width:48px;float:left}}
/* Cookie-Banner Ende*/

body
{
        
        background:#fff;
        font-family: 'Roboto', sans-serif;
        color:#005A79;
        letter-spacing: 0.02em;
        box-sizing: border-box;
}

input
{
        font-family: 'Roboto', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:250px;
        background: #EBE8DE;
        border-radius:5px;
}

input[type=submit]
{
        width:auto;
        padding: 5px 18px;
        line-height:25px;
        text-shadow:none;
        cursor:pointer;
        box-shadow: none;
        background: #005A79;
        color: #fff;
}

p
{
        margin:5px 0;
        line-height:160%;
}

a
{
        text-decoration:none;
        color:inherit;
        transition: color .5s ease;
}

strong
{
        font-weight:bold;
}

b
{
        font-weight:bold;
}

figcaption strong
{
        border-bottom: 1px solid #D6D0C1;
        padding-bottom:10px;
        margin: 10px 0;
        display:block;
}

figcaption
{
        line-height: 160%;
        font-size:14px;
        width:220px;
}

hr
{
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}

h1.seitenueberschrift
{
        font-family: 'Roboto', sans-serif;
        font-weight:600;
        color:#005A79; 
        margin: 0 auto; 
		text-align: center;
        font-size: 80px;
        line-height: 120%;
        position: relative;
        top: 150px;
        z-index: 50
}

h2.name_kunde
{
        font-family: 'Roboto', sans-serif;
        font-weight:600;
        color:#005A79; 
        margin: 0 auto; 
		text-align: center;
        font-size: 25px;
        line-height: 120%;
        position: relative;
        top: 180px;
        z-index: 50
}

.slider_kunde
{
	position: relative; 
	margin: 0 auto; 
	top: 220px; 
	left: 0px; 
	width: 910px; 
	height: 500px; 
	overflow: hidden; 
	visibility: hidden;
}

.kein_link
{
	color:#a81d1e
}

.gruen_bold
{
	color: #849839;
	font-weight: bold
}

.text_pfeil
{
	text-align: center; font-weight: bold; padding-top: 20px
}

.facebook
{
	display: inline-block
}


/* HEADER */

header
{
        position:relative;
        top: 0px;
        width: 100%;
        margin: 0 auto ;
        background: #fff;
        z-index: 900
}

header div
{
        width: auto; 
        display: flex;
        background: #fff;
}

header div img
{
        margin: 0 auto;
        position: relative;
}

header h1
{
        margin:35px 0 0 0;
        font-weight:600;
        font-size:55px;
        color:#e56038;
        font-family: 'Roboto', cursive;
}

header p
{
        font-family: 'Roboto', sans-serif;
        font-size:16px;
        color: #4A463B;
        margin-left:132px;
}

header nav
{
        background: #fff;
        margin: 0 auto;
        position: relative;
        padding-top: 20px;
        text-align: center;
        
}

nav
{
        margin: 0 auto;
        position: relative;
        bottom:0;
        text-align: center
}

nav ul
{
        list-style:none;
}

nav ul li
{
        display:inline-block;
        padding:3px 15px;
        line-height: 180%;
}

nav ul li a
{
        font-family: 'Roboto', sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
        color: #CBB816;
        letter-spacing: 0.1em;
}

nav ul li a:hover
{
        color:#005A79;
}

nav ul li a:active
{
        color:#005A79;
}

nav ul li a div
{		
		 
		width: 30px; 
		height: 30px; 
		overflow: hidden;
		transition: all 0s ease; 
		background: url("../images_header/facebook.png") no-repeat; 
		background-position: 0px 0px; 
		cursor: pointer;
		
}

nav ul li a div:hover
{		
		background-position: -40px 0px; 
		
}

nav ul li a div:active
{		
		background-position: -40px 0px; 
		
}

figure.headerbild
{
	position: relative; 
	top: 150px; 
	display: flex; 
	justify-content: center;
}

figure.headerbild img
{
	display: block; 
	position: relative; 
	height: auto; 
	max-height:450px; 
	width: 100%; 
	max-width: 1180px
}

#mobileMenu
{
        position: relative;
        top: 120px;
        left: 0;
        width: 100%;
        display: none;
        font-family: 'Roboto', sans-serif;
}

#mobileMenu ul li
{
        display:block;
        background-color: #fff;
        color: #a9a1a3;
        padding: 12px 0;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.1em;
}

#mobileMenu ul li a:hover
{
        color:#005A79;
}

#mobileMenu ul li a:active
{
        color:#005A79;
}

#mobileMenu ul li a div
{		
		 
		width: 30px; 
		height: 30px; 
		overflow: hidden;
		transition: all 0s ease; 
		background: url("../images_header/facebook.png") no-repeat; 
		background-position: 0px 0px; 
		cursor: pointer;
		
}

#mobileMenu ul li a div:hover
{		
		background-position: -40px 0px; 
		
}

#mobileMenu ul li a div:active
{		
		background-position: -40px 0px; 
		
}

.toggleMobile
{
        display: none;
}

.nach_unten_schmal a
{
        font-family: 'Roboto', sans-serif;
        transition: all .25s ease;
        color: #a9a1a3;
        
}

.nach_unten_schmal a:hover
{
        color:#005A79;
}

.nach_unten_schmal a:active
{
        color:#005A79;
}

#facebook_small
{ 		display: none
}

/* 3 COLUMNS */





/* BUTTONS */

.button
{
        padding:7px 14px;
        border: 1px solid #c3532e;
        background-image: linear-gradient(bottom, #E56038 0%, #ff8c66 100%);
        background-image: linear-gradient(to bottom, #ff8c66 0%, #E56038 100%);
        background-color: #eb653c;
        color: #EBE8DE;
        text-shadow: 1px 1px 0px #ff8155;
        text-decoration:none;
        border-radius:5px;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
}

.button:hover
{
        background:none #EBE8DE;
        border-color: #EBE8DE;
        text-shadow:none;
        color: #4A463B;
}



/* SPACER */

#spacer
{
        width:auto;
        height:70px;
        background-color:#e56038;
        position:relative;
        font-family: 'Open Sans', sans-serif;
        color:#fff;
        font-size:18px;
}

#spacer p
{
        margin-top:22px;
        width:auto;
        position:absolute;
        left:50%;
        margin-left:-450px;
}

#spacer .search
{
        margin-top:15px;
        width:auto;
        position:absolute;
        right:50%;
        margin-right:-480px;
}
/* nach unten */

.nach_unten
{		
		margin: 200px auto 0;
		position:relative;
		padding-bottom: 150px;
}

.nach_unten div
{		
		margin: 0 auto; 
		position: relative; 
		width: 50px; 
		height: 55px; 
		overflow: hidden; 
		background: url("../images/pfeil_unten.png") no-repeat; 
		background-position: -50px 0px; 
		cursor: pointer;
		
}

.nach_unten div:hover
{
		background-position: -100px 0px;
		
}

.nach_unten_schmal
{		
		margin: 100px auto 0;
		position:absotute;
		
}

.nach_unten_schmal div
{		
		margin: 0 auto; 
		position: relative; 
		width: 50px; 
		height: 55px; 
		overflow: hidden; 
		background: url("../images/pfeil_unten.png") no-repeat; 
		background-position: -50px 0px; 
		cursor: pointer;
		
}

.nach_unten_schmal div:hover
{
		background-position: -100px 0px;
		
}



/* FIVE COLUMNS */

#five_columns, #text_columns
{
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:1180px;
        margin:0 auto;
}

#five_columns h2
{		font-family: 'Roboto', sans-serif;
        color:#005A79; 
        margin: 100px 0 100px 0; 
		text-align: center;
        font-size: 40px;
        border-top: 1px solid #005A79;
        border-bottom: 1px solid #005A79;
        padding: 30px 0 10px 0;
        line-height: 120%

}

#text_columns h2
{
        background-position: center top; 
        margin-top: 100px; 
        width: 100%;
        height: 60px; 
        text-align: center;
       
}

#five_columns div.flex3
        {
                max-width: 1180px;
                margin: 0 auto
        }

#five_columns .img-item
{
        float:left;
        width: 230px;
        overflow: hidden;
        margin: 25px auto 0 auto;
        padding-left: 3px
        
}

#five_columns .img-item a
{
        position:relative;
        display:block;
}

#five_columns .thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: #fff url(img/zoom.png) center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
        opacity:0.5;
}

#five_columns .thumb-screen:hover
{
        opacity:0;
}

#five_columns div article figure.thumb-screen-logo
{
        overflow: hidden;
        width:230px;
        height:230px;
        display: table-cell; 
        vertical-align: middle
}


.thumb-screen-logo:hover
{
     /*   background-position: 0px 0px; */
     	left: -230px
}

#five_columns figcaption
{
        font-size:14px;
        width:200px;
}

/* THREE COLUMNS */

#three_columns
{
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:1180px;
        margin:0 auto;
}

#three_columns h2
{		font-family: 'Roboto', sans-serif;
        color:#CBB816; 
        margin: 100px 0 100px 0; 
		text-align: center;
        font-size: 40px;
        border-top: 1px solid #005A79;
        border-bottom: 1px solid #005A79;
        padding: 30px 0 10px 0;
        line-height: 120%

}


#three_columns div.flex3
        {
                max-width: 710px;
                margin: 0 auto
        }
        
#three_columns div article figure img
        {
                width: 230px;
                height: 230
        }

#three_columns .img-item
{
        float:left;
        width: 230px;
        margin: 0 auto;
        padding-left: 3px
        
}

#three_columns .img-item a
{
        position:relative;
        display:block;
}

#three_columns .thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: #005A79 center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
        opacity:0;
        font-family: 'Roboto', sans-serif;
        color: #fff;
        text-align: center;
        padding-top: 50%;
        box-sizing: border-box;
}

#three_columns .thumb-screen:hover
{
        opacity:0.8;
}

#three_columns figcaption
{
        font-size:14px;
        width:200px;
}

/* TWO Columns Text */

#two_columns_text
{
        
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:1180px;
        margin:0 auto;
}

#two_columns_text h2
{		font-family: 'Roboto', sans-serif;
        color:#CBB816; 
        margin: 100PX 0 100px 0; 
		text-align: center;
        font-size: 40px;
        border-top: 1px solid #005A79;
        border-bottom: 1px solid #005A79;
        padding: 30px 0 10px 0;
        line-height: 120%

}

#two_columns_text h3
{		font-family: 'Roboto', sans-serif;
        margin-bottom: 25px;
		color:#005A79;
		font-size: 20px;
		line-height: 160%;
		
}

#two_columns_text h4
{		font-family: 'Roboto', sans-serif;
        color:#005A79;
		font-size: 16px;
		line-height: 160%;
		text-align: left;
		margin-bottom: 16px
}

#two_columns_text div
{
        line-height:25px;
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:920px;
        margin:0 auto;
        
}

#two_columns_text article.column1, #two_columns_text article.column2
{
        margin: 0px 14px 30px 14px;
        font-size:14px;
        float:left;
        width:auto;
        width: 430px;
        text-align: center;
        
}

#two_columns_text h4.column2
{		margin-left: 30px
}

.column1, .column2
{
	text-align: left;
	list-style-type: none
}

li.column1
{
	text-align: left;
	list-style-type: disc;
	margin-left: 12px
}

li.column2
{
	margin-left: 30px;
	list-style-type: disc
}






/* TWO Columns Bilder */
#two_columns, #text_columns
{
       
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:570px;
        margin:0 auto;
}

#two_columns h2
{		font-family: 'Roboto', sans-serif;
        font-weight:600;
        color:#005A79;
        background-position: center top; 
        margin: 50px 0 0 0; 
        width: 100%; 
        text-align: left;
        font-size: 25px;
        padding: 10px 10px 0 10px;
}

#text_columns h2
{
        background: url("../images/kunden_kirschgruen.png") no-repeat; 
        background-position: center top; 
        margin-top: 100px; 
        width: 100%; 
        text-align: center;
       
}

#two_columns h3
{		font-family: 'Roboto', sans-serif;
        font-weight:600;
        color:#005A79;
    font-size: 20px;
    width: 100%
}

#two_columns h4
{		font-family: 'Roboto', sans-serif;
        font-weight:600;
        color:#005A79;
        margin: 20px 0 10px 0;
    font-size: 18px
}

#two_columns .img-item
{
        /* float:left;*/
        margin: 20px 10px 20px 10px;
       /* max-width: 570px;
        width: 100% */
}

#two_columns .img-item a
{
        position:relative;
        display:block;
}

#two_columns a img 
{
        position:relative;
        display:block;
        width: 100%;
        height:100%;
        max-width: 570px
}

#two_columns img 
{
        
        width: 100%;
        
}

#two_columns p 
{
        
        width: 100%;
        height:100%;
        max-width: 570px;
}

#two_columns p.max-width
{
        max-width: 1180px;
}

#two_columns ul 
{
        
        width: 100%;
        height:100%;
        max-width: 560px;
    line-height: 160%;
    padding: 0 5px 0 5px
}

#two_columns ul.max-width 
{
    max-width: 1140px;
    margin: 0 20px 0 20px;
}

#two_columns ul li.max-width 
{
    max-width: 1140px;
    padding: 0 20px 0 0;
}

#two_columns ul li
{
        line-height: 160%;
        list-style-type: disc
}

#two_columns .thumb-screen
{
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background: #000 url(img/zoom.png) center center no-repeat;
        z-index:99;
        opacity: 0;
        transition: opacity .5s ease;
}

#two_columns .thumb-screen:hover
{
        opacity:0.5;
}

#two_columns .thumb-screen p
{
        color: #fff;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        padding-top: 70px
}

#two_columns figcaption
{
        font-size:14px;
        width: 100%;
}

/* TWO COLUMNS */

#text_columns article.column1, #text_columns .column2
{
        margin: 70px 10px;
        font-size:14px;
        float:left;
        width:auto;
        max-width: 570px;
}

#text_columns .column2
{
        margin: 120px 0;
}

.row
{
        position:relative;
        margin: 40px 0 0 50px;
        float:right;
        width:350px;
}

.row img
{
        float:left;
}

.row p
{
        margin-left: 100px;
}

.rocket, .clock
{
        top:0;
        left:0;
        position:absolute;
        height: 80px;
}

.rocket:hover
{
        opacity:0;
        transition: opacity 0.4s ease 0.2s;
        animation-name: stylie-transform-keyframes;
        animation-duration: 700ms;
        animation-delay: 0ms;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        transform-origin: 0 0;
}

.clock:hover
{
        animation-name: stylie-transform2-keyframes;
        animation-duration: 100ms;
        animation-delay: 0ms;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transform-origin: 0 0;
}



/* FOOTER */

footer
{
        position:relative;
        clear:both;
        width:auto;
        background:#CBB816;
        height: 20px
}

footer h2
{		
		font-family: 'Roboto', sans-serif;
        font-weight: 600;
        color:#fff;
        background-position: center top; 
        margin: 50px 0 50px 0; 
        width: 100%; 
        text-align: center;
        font-size: 40px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 10px 0 10px 0;
        line-height: 120%
	
}

#footer
{
        line-height:25px;
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:1180px;
        margin:0 auto;
}




#footer div
{
        font-family: 'Roboto', sans-serif;
        color: #fff;
        clear:both;
        width:auto;
        max-width:920px;
        margin:0 auto;
        
}

#footer article.column1, #footer article.column2
{
        margin: 0px 7px 30px 7px;
        font-size:14px;
        float:left;
        width:auto;
        width: 290px;
        text-align: center;
        
}

#footer article p.column1, #footer article p.column2
{
	text-align: left
}


footer .wrapper
{
        margin: 0 auto;
        padding-top:30px;
        width:auto;
        max-width:1180px;
        font-size:14px;
}

footer .wrapper .column
{
        font-family: 'Roboto', sans-serif;
        color:#ababab;
        float:left;
        width:280px;
        margin-right:20px;
}

footer .wrapper .column.midlist ul li
{
        display:block;
        width:auto;
        padding:0 0 10px 25px;
        margin-bottom:10px;
        border-bottom: 1px solid #444444;
        background:url(img/arrowright2.png) left 6px no-repeat;
}

footer .wrapper .column.midlist ul li a:hover
{
        color:#fff;
}

footer .wrapper .column.rightlist ul li
{
        display:block;
        width:auto;
        margin-bottom:15px;
}

footer .wrapper .column.rightlist ul li a span
{
        margin-left:95px;
        display:block;
}

footer .wrapper .column.rightlist ul li a img
{
        transition: border .25s ease;
        float:left;
        border:3px solid #444444;
}

footer .wrapper .column.rightlist ul li a img:hover
{
        border-color: #5e5e5e;
}

footer .wrapper .column h4
{
        font-size: 16px;
        color: #fff;
        border-bottom: 1px solid #444444;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
}

#copyright
{
        background: #1D1D1D;
        height:70px;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
}
#copyright .wrapper
{
        font-family: 'Roboto', sans-serif;
        padding-top:25px;
        color: #5e5e5e;
        font-size:14px;
        position:relative;
}
#copyright .wrapper .social
{
        position:absolute;
        right:0;
        top:25px;
}
#copyright .wrapper .social a
{
        transition: opacity .25s ease;
        opacity: 0.3;
        margin-left: 12px;
        display:block;
        float:left;
}
#copyright .wrapper .social a:hover
{
        opacity: 0.7;
}
#copyright .wrapper a
{
        color: #ABABAB;
}

#copyright .wrapper a:hover
{
        color: #fff;
}


/* SKIPLINK */
.go-top
{
        position: fixed;
        bottom: 2em;
        right: 2em;
        text-decoration: none;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: 1em;
        display: none;
}

.go-top:hover
{
        background-color: rgba(0, 0, 0, 0.6);
}


/* SLIDESHOW */
/* Prevent the slideshow from flashing on load */
.slidesjs-container
{
        border-top: 1px #d6d0c1 solid;
}
#slides
{
        display: none
}

/* Center the slideshow */
.container
{
        width:auto;
        margin: 0 auto 0 auto;
       /*  position:relative; */
        
}

/* Show active item in the pagination */
.slidesjs-pagination .active
{
        color:red;
}

#slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p  .responsive_button
{
        display:none;
        color:#000;
}


/* MISC */
.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}



/* IDs für Anker */
#ueber_mich
{
	
}

#angebot
{
	
}

#prana_healing
{
	
}

#superbrain
{
	
}

#aetherische_oele
{
	
}

#raindrop
{
	
}

#ganzheitliches_kompetenztraining
{
	
}

#bunte_intelligenz
{

}

#freude_am_lernen
{

}

#preis
{

}

#kontakt
{

}

#downloads
{

}


#top
{

}

/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */

@media (max-width: 1215px)
{
        
        .container .button
        {
                display:none;
        }
        
        #two_columns figcaption
{
        font-size:14px;
        width:auto;
}
        
       
}

@media (max-width: 1179px)
{
        #slider_content1, #slider_content2, #slider_content3
        {
                width:auto;
                margin-right:50px;
        }
        #slider_content1 h2, #slider_content2 h2, #slider_content3 h2
        {
                font-size:18px;
        }
        #slider_content1 p, #slider_content2 p, #slider_content3 p
        {
                font-size:14px;
        }
        #slider_content1 p .responsive_button, #slider_content2 p .responsive_button, #slider_content3 p  .responsive_button
        {
                display:inline;
        }
        .container .button
        {
                display:none;
        }
        
        #two_columns .img-item
        {
        float: none;
        display: flex;
        justify-content:center;
        margin: 20px 10px
        }
    #two_columns .einspaltig
        {
        float: none;
        justify-content:center;
        margin: 20px 10px
        }    
    
          #three_columns .img-item
        {
        
                width: 230px;
                /*float:none;*/
                margin: 0 auto;
                padding-left: 3px
        }
        
        #five_columns div.flex3, #three_columns div.flex3
        {
                max-width: 710px;
                margin: 0 auto
        }
        
         #five_columns .img-item
        {
        
                width: 230px;
                /*float:none;*/
                margin: 25px auto 0 auto;
                padding-left: 3px
        }
        
      

        
        #five_columns figcaption, #three_columns figcaption
		{
        font-size:14px;
        width:200px;
        margin: 0 auto;
        padding-left: 3px
		}
		
		#two_columns figcaption
{
        font-size:14px;
        width:auto;
}
        
        /*figcaption
		{
        line-height: 25px;
        font-size:14px;
        width:480px;
        margin: 0 auto
		}*/
        
       
}

@media (max-width: 915px)
{
        #boxcontent article
        {
                float: none;
                margin: 30px auto 0 auto;
                width: 60%;
        }
        #spacer
        {
                font-size:15px;
        }
        #spacer .search
        {
                margin-top:19px;
                margin-right:-385px;
        }
        #spacer p
        {
                margin-left:-370px;
        }
        input
        {
                padding:4px;
                font-size:14px;
        }
        input[type="submit"]
        {
                padding: 1px 14px;
        }
        

        
        #five_columns, #three_columns
        {
                width: 100%;
        }
        #five_columns .img-item:nth-of-type(3), #five_columns .img-item:nth-of-type(4)
        {
                margin-top: 25px;
        }
        #text_columns article.column1, #text_columns .column2
        {
                float:none;
                max-width: 500px;
                margin: 50px 30px 0 30px;
        }
        .column2 .row
        {
                float:none;
                margin:0 0 40px 50px;
        }
        footer .wrapper .column
        {
                font-size: 12px;
                width: 230px;
        }
        
        figcaption
{
        font-size:14px;
        width:auto;
        margin: 0 auto
}
        
        #two_columns .img-item
        {
        float: none;
        display: flex;
        justify-content:center;
        margin: 20px 10px
        }
        
        #five_columns div.flex3, #three_columns div.flex3
        {
                max-width: 710px;
                margin: 0 auto
        }
        
        #two_columns_text div
		{
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:710px;
        margin:0 auto;
        }
        
        #two_columns_text article.column1, #two_columns_text article.column2
		{
        margin: 0px 14px 30px 14px;
        font-size:14px;
        float:left;
        width:auto;
        width: 327px;
        text-align: center;
        
		}
       
        #footer div
{
        font-family: 'Roboto', sans-serif;
        color: #fff;
        clear:both;
        width:auto;
        max-width:710px;
        margin:0 auto;
        
}

  		#footer article.column1, #footer article.column2
		{
        margin: 0px 7px 30px 7px;
        font-size:14px;
        float:left;
        max-width: 340px;
        text-align: center;
        
		}

      
}

@media (max-width: 765px)
{
        .container
        {
                
        }
        #facebook_big
		{
		display: block
		}
        
        header
{

        height: 130px;
}
    
        
        h1.seitenueberschrift
{
        font-family: 'Roboto', sans-serif;
        color:#005A79; 
        margin: 0 auto; 
		text-align: center;
        font-size: 70px;
        line-height: 120%;
        position: relative;
        top: 80px;
        z-index: 50
}

        figure.headerbild
{
	position: relative; 
	top: 100px; 
	display: flex; 
	justify-content: center;
}

h2.name_kunde
{
        font-family: 'Roboto', sans-serif;
        color:#005A79; 
        margin: 0 auto; 
		text-align: center;
        font-size: 20px;
        line-height: 120%;
        position: relative;
        top: 100px;
        z-index: 50
}

.slider_kunde
{
	position: relative; 
	margin: 0 auto; 
	top: 140px; 
	left: 0px; 
	width: 910px; 
	height: 500px; 
	overflow: hidden; 
	visibility: hidden;
}

li.column2
{
	margin-left: 30px;
	list-style-type: disc
}

#two_columns_text h4.column2
{		margin-left: 0px
}


        
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        

        
        .toggleMobile
        {
                position: absolute;
                top: 10px;
                right: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menutext
        {		font-size: 14px;
        		color: #a9a1a3;
        		top: 0;
        		letter-spacing: 0.08em
        }
        
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #a9a1a3;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 20px;
        }
        .toggleMobile span.menu2
        {
                top: 34px;
        }
        .toggleMobile span.menu3
        {
                top: 48px;
        }
        .toggleMobile.active span.menu1
        {
                top: 34px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
        header h1
        {
                font-size:40px;
        }
        header p
        {
                margin-left: 60px;
                font-size:14px;
        }
        
        section.container
        {
        	top: 120px
        }
        
        #spacer
        {
                height:100px;
        }
        #spacer p
        {
                text-align:center;
                position:static;
                margin: 0 auto;
                padding:15px 0 7px 0;
        }
        #spacer .search
        {
                text-align:center;
                position:static;
                margin: 0 auto;
        }
        
        figcaption
{
        font-size:14px;
        width:480px;
        margin: 0 auto
}

       
        #five_columns div.flex3, #three_columns div.flex3
        {
                max-width: 480px;
                margin: 0 auto
        }
        
        #two_columns figcaption
{
        font-size:14px;
        width:auto;
}
        
        #two_columns_text div
		{
        
        clear:both;
        width:auto;
        max-width:480px;
        margin:0 auto;
        }
        
        #two_columns_text article.column1, #two_columns_text article.column2
		{
        margin: 0px 7px 30px 7px;
        font-size:14px;
        float:left;
        width:480px;
        
        text-align: center;
        
		}
		
		li.column1
{
	text-align: left
}

		li.column2
{
	margin-left: 0px;
	list-style-type: disc
}
    
        
        #footer div
{
        
        font-family: 'Roboto', sans-serif;
        color: #fff;
        clear:both;
        width:auto;
        max-width:480px;
        margin:0 auto;
        
}

  		#footer article.column1, #footer article.column2
		{
        margin: 0px 7px 30px 7px;
        font-size:14px;
        float:left;
        max-width: 320px;
        text-align: center;
        
		}
		
		#projekte_in_kirschgruen
		{
		height: 130px
		}
		
		
		
		#kunden_kirschgruen
		{
		height: 80px
		}
}

@media (max-width: 500px)
{
		
		#facebook_small
		{display: block
		}
        
        header
        {
        	
            height: 100px;
            
        } 
        
        header img
        {	
        	z-index: 800
        }
               
        #spacer
        {
                height:auto;
                padding-bottom:15px;
        }
        
        #facebook_big
		{
		display: none
		}
        
        h1.seitenueberschrift
{
        font-family: 'Roboto', sans-serif;
        color:#005A79; 
        margin: 0 auto; 
		text-align: center;
        font-size: 40px;
        line-height: 120%;
        position: relative;
        top: 50px;
        z-index: 50
}

figure.headerbild img
{
	display: block; 
	position: relative; 
	height: auto; 
	max-height:122px; 
	width: 100%; 
	max-width: 320px
}

		figcaption
{
        
        font-size:14px;
        width:230px;
        margin: 0 auto
}
        
       #five_columns div.flex3, #three_columns div.flex3
        {
                max-width: 230px;
                margin: 0 auto
        }
        
        #five_columns .img-item
        {
         height: auto;
         margin: 25px auto 0 auto;
         padding-left: 0px
        }
        
#five_columns div article figure.thumb-screen-logo
        {
                        height: auto;
                
        }

        
       	#three_columns .img-item,
        {
        
        }
                
       
        
        
        #five_columns h2, #three_columns h2
        {
                width: 100%;
                margin: 50px 0;
        }
        
        #two_columns h2
        {
                width: 100%;
        }
        
        #two_columns figcaption
{
        line-height: 25px;
        font-size:14px;
        width:100%;
        margin: 0 auto
}

        
        #two_columns_text h2
		{
			width: 100%;
			text-align: center
		}
        
        #two_columns_text div
		{
        
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:auto;
        max-width:290px;
        margin:0 auto;
        }
        
        #two_columns_text article.column1, #two_columns_text article.column2
		{
        margin: 0px 0px 30px 0px;
        font-size:14px;
        float:left;
        width:100%;
        text-align: center;
		}
li.column2
{
	margin-left: 0px;
	list-style-type: disc
}		
		
		
		#footer div
		{
        
        font-family: 'Roboto', sans-serif;
        clear:both;
        width:100%;
        max-width:290px;
        margin:0 auto;
        }
        
        #footer article.column1, #footer article.column2
		{
        margin: 0px 7px 30px 7px;
        font-size:14px;
        float:left;
        width:100%;
        text-align: center;
		}

        
        .column2 .row
        {
                margin: 0 0 40px 10px;
                width:auto;
        }
        footer .wrapper
        {
                width:auto;
        }
        footer .wrapper .column
        {
                margin: 0 auto 15px auto;
                max-width:300px;
        }
        input
        {
                width:auto;
        }
        
.nach_unten
{		
		margin: 200px auto 0;
		position:absotute;
		padding-bottom: 150px;
}

        #mobileMenu
        {
                display: block;
                z-index: 99;
                top: 100px;
                position: relative;
        }
        .toggleMobile
        {
                
                top: 10px;
                right: 10px;
                /*display: block;*/
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menutext
        {		font-size: 14px;
        		color: #a9a1a3;
        		top: 0;
        }
        
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #a9a1a3;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 20px;
        }
        .toggleMobile span.menu2
        {
                top: 34px;
        }
        .toggleMobile span.menu3
        {
                top: 48px;
        }
        .toggleMobile.active span.menu1
        {
                top: 34px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
               /* display:none;*/
        }
        header h1
        {
                font-size:40px;
        }
        header p
        {
                margin-left: 60px;
                font-size:14px;
        }
        
        
        
         section.container
        {
        	top: 130px
        }
        
        .flexibel
{
	clear: both;

}

		#projekte_in_kirschgruen
		{
		height: 0px
		}
		
	
		
		#kunden_kirschgruen
		{
		height: 90px
		}
		
		#projekte_in_kirschgruen
{
	height: 130px
}

}

/* KEYFRAMES */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}

/* IDs für Anker */