@charset "UTF-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700|Droid+Sans:regular,bold); 

*{padding:0;margin:0;}

html{
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
}

body{
padding-bottom:1.5em;
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */

}

body{font:0.8em 'Droid', sans-serif;color:#555455;line-height:1.4}

/* Headlines
--------------------------------------------- */
h1{ margin:10px 0 10px 50px;
	font:2em 'Gentium';
	font-weight:700;
	color:#41575f;
	padding-top:70px;
	}
	
h2{	margin:10px 0 16px 50px;
	font:1.6em 'Gentium';
	font-weight:400;
	color:#41575f;
	font-weight:400;
	}	
	
h3{ margin:25px 0 10px 103px;
	font:1.4em 'Gentium';
	color:#41575f;
	font-weight:400;
	}	
	
h4{ margin:25px 0px 10px 5px;
	padding-top:360px;
	font:1.4em 'Gentium';
	color:#41575f;
	font-weight:400;
	}	
.wrapper{max-width:1101px;min-height:700px;padding:140px 0px 0px;margin:auto;background:url(../img/coaching-in-kiel-header.jpg) top left no-repeat;background-color:#fff;}

/* --- wrapper Nav --- */
#wrapperNav {
	z-index:1000!important;
	float:right;
	margin: -130px 9px 0 0;
	max-width: 70%;
	
}
#wrapperNav ul li {
	float: left;
	list-style: none;
	position: relative;
}	
#wrapperNav ul li a {
	padding:0px 7px;
	display: block;
	font-weight: bold;
	font-size: 0.8em;
	color: #41575f!important;
	text-decoration:none;
	text-transform: uppercase;
	font-weight: normal;
}
#wrapperNav a:hover {
	color: #a3d0c2!important;
	text-decoration: none;
}


.top-container {
    font-size: 0;
	margin-left:50px;/*fix white space*/
}
.top-container > div {
    font-size: 12px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 49%;
	padding:0px 20px 20px 0px;
    box-sizing: border-box;
    text-align: left;
}
.container {
    font-size: 0;
	margin-left:50px; /*fix white space*/
}
.container > div {
    font-size: 12px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 32.67%;
	padding:0px 30px 20px 0px;
    box-sizing: border-box;
    text-align: left;
}
.container h2{	margin:14px 0 20px 0px;
	font:1.6em 'Gentium';
	font-weight:700;
	color:#41575f;
	}
	

#dieBox
{
width: 280px;
height: 78px;
}

#dieBox img
{
display:block;
margin: 0px auto auto;
}

.container p {padding:20px 0 20px 0px;}

.innenContainer {
    font-size: 0;
	margin-left:50px;/*fix white space*/
}
.innenContainer > div {
    font-size: 12px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 49%;
	padding:0px 20px 20px 0px;
    box-sizing: border-box;
    text-align: left;
}

.innenContainer img {
	padding:0px 30px 0px 110px;
}
.innenContainer h2{	margin:14px 0px -5px 0px;
	font:1.6em 'Gentium';
	font-weight:400;
	color:#41575f;
	}
	
.containerFullWidth {
    font-size: 0;
	margin-left:50px; /*fix white space*/
}
.containerFullWidth > div {
    font-size: 12px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 100%;
	padding:0px 30px 20px 0px;
    box-sizing: border-box;
    text-align: left;
}	
	




/* =Navigation
-------------------------------------------------------------- */
/* clip skip link for screen readers */
.skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
#access {
    font-family:"Gentium", Gentium, Arial, sans-serif;
    overflow:visible;
    z-index:100;
}
/* style the main menu 8*/
.main-menu{
    background: #a3d0c2;
	height:45px; background:url('../img/navleiste.jpg') top center repeat;
    border-top: none;
}
/* get rid of padding and margin off all ul's (not sure about using * here, could be better) */
.main-menu, .main-menu * {
    margin:0px 0;
    padding:0;
    list-style:none;
}
/* position all dropdowns off screen */
.main-menu ul {
    position:absolute;
    top:-999em;
}
/* style the main nav list items */
.main-menu li {
    background: #a3d0c2;
	height:45px; background:url('../img/navleiste.jpg') top center repeat;
    clear: left;
    float:left;
    position:relative;
    width: 100%;
}
/* change the main nav list items on hover */ 
.main-menu li:hover {
    background-image: url('../img/menuBg.png'); 
    visibility:inherit; /* fixes IE7 'sticky bug' */
}
/* style all the links */
.main-menu a {
    font-size: 1.2em;
    color: #fff;
    display:block;
    padding: 10px 0;
	font-weight:700;
    text-decoration: none;
    text-indent: 5%;
    width: 100%;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* added style for Pufferfish ================================================*/
.main-menu .hasDrop a{
    width: 80%;
}
/* style the first drop */
.main-menu li li, .main-menu li li:hover{
    background: none;
    background-image: none;
}
/* add a larger text indent for the first drop links */
.main-menu li li a{
    text-indent: 22px;
}
/* add a larger text indent for the second drop links */
.main-menu li li li a{
    text-indent: 34px;
}
/* add a larger text indent for the third drop links */
.main-menu li li li li a{
    text-indent: 46px;
}
/* position first drop */
/* added style for Superfish =================================================*/
.sf-menu li:hover ul, .main-menu li.sfHover ul {
    top:auto; /* match top ul list item height */
    left: 0;
    position:relative;
}
/* make sure second drop is still off screen */
ul.main-menu li:hover li ul{
    position: absolute;
    top:-999em;
}
/* position second drop */
/* added style for Superfish =================================================*/
ul.sf-menu li li:hover ul, ul.main-menu li li.sfHover ul{
    left: 0;
    top:auto;
    position:relative;
}
/* make sure third drop is still off screen */
ul.sf-menu li li:hover li ul {
    position: absolute;
    top:-999em;
}
/* position third drop */
/* added style for Superfish=============== ==================================*/
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul{
    left: 0;
    top:auto;
    position:relative;
}
/* added style for Pufferfish ================================================*/
.main-menu a.menuDrop, .main-menu li.sfHover li a.menuDrop, .main-menu li li.sfHover li a.menuDrop{
    background: #a3d0c2;
    background-image: url('../img/drop.png'), linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop.png'), -o-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop.png'), -moz-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop.png'), -webkit-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop.png'), -ms-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(38,38,38)), color-stop(1, rgb(20,20,20)));
    background-repeat: no-repeat;
    background-position: center;
    border-left: 1px solid rgba(255,255,255,.175);
    display: block;
    font: 0/0 a;
    color:transparent;
    height: 37px;
    width: 20%;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;

}
.main-menu li.sfHover a.menuDrop, .main-menu li li.sfHover a.menuDrop, .main-menu li li li.sfHover a.menuDrop{
    background: #54777d;
    background-image: url('../img/drop-over.png'), linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop-over.png'), -o-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop-over.png'), -moz-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop-over.png'), -webkit-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop-over.png'), -ms-linear-gradient(bottom, rgb(38,38,38) 0%, rgb(20,20,20) 100%);
    background-image: url('../img/drop-over.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(38,38,38)), color-stop(1, rgb(20,20,20)));
    background-repeat: no-repeat;
    background-position: center;
}
.js .main-menu li li{
    position: relative;
}
.sf-sub-indicator{
    display: none;
}

@media only screen and (min-width: 480px) {
    /* added style for Pufferfish ============================================*/
     .main-menu li a.menuDrop, .main-menu li.sfHover li a.menuDrop, .main-menu li li.sfHover li a.menuDrop{
        width: 12%;
     }
     /* added style for Pufferfish ===========================================*/
    .main-menu .hasDrop a{
        width: 86%;
    }
}
@media only screen and (min-width: 600px) {
    /* set height so content isn't pushed down */
    #access{
        float: left;
        height: 45px;
        width: 100%;
    }
    /* set height so content isn't pushed down add z-index to keep drops above content */
    .main-menu{
        height: 46px;
        z-index: 100;
    }
    /* restyle so main links are horizontally aligned */
    .main-menu li {
        clear: none;
        width: 18%; /* this will need to be adjusted for your needs */
    }

    }
    /* new style for drop list items */
    .main-menu li li{
        background: #a3d0c2;
        background-image: url('../img/navmobil.jpg');
        background-repeat: repeat;
        clear: left;
        width: 100%;
    }
    
    /* reset text indent on all drop a tags and set the width to 100% */
    .main-menu li li a, .main-menu li li li a, .main-menu li li li li a{
        text-indent: 12px;
        width: 100%;
    }
    /* reposision and style the first drop */
    /* added style for Superfish =============================================*/
    .sf-menu li:hover ul, .main-menu li.sfHover ul{
        background: #c0f5e5;
        left: auto;
        position: absolute;
        top: -1;
        width: 100%;
        z-index: 100;
    }
    /* reposision and style the second drop */
    /* added style for Superfish =============================================*/
    ul.sf-menu li li:hover ul, ul.main-menu li li.sfHover ul{
        background: #54777d;
        position: absolute;
        top: -1px;
        left:100%;
    }
    /* reposision and style the third drop */
    /* added style for Superfish =============================================*/
    ul.sf-menu li li li:hover ul, ul.main-menu li li li.sfHover ul{
        background: #54777d;
        position: absolute;
        top: -1px;
        left:100%;
    }
    /* added style for Pufferfish ============================================*/
     .main-menu li a.menuDrop, .main-menu li.sfHover li a.menuDrop, .main-menu li li.sfHover li a.menuDrop{
        width: 30%;
     }
     /* added style for Pufferfish ===========================================*/
    .main-menu .hasDrop a{
        width: 68%;
    }
}


}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
}



/* Links
--------------------------------------------- */
a {
	color: #9b100f;
	text-decoration: none;
} 
a:hover {
	color: #54777d!important;
	text-decoration: underline;
}

hr {margin-bottom:10px;}
 
/* --- header--- */
header { margin:0px; }






.mainContent{max-width:1050px;padding-right:10px;}
.mainContent p {margin:16px 0 20px 0px;}
.mainContent ul, ol {margin:0px 0 20px 65px;}

/* --- Footer --- */
#footer {max-width:1102px;height:50px;padding:0px 0px;margin-bottom:30px;margin:auto;background-color:#fff;color:#41575f !important;} 
#footerStart {max-width:1102px;height:50px;padding:0px 0px;margin-bottom:30px;margin-left:auto;margin-right:auto;background-color:#fff;color:#41575f !important;}

/* --- Footer Nav --- */
#footer_nav {
	margin: -20px 9px 0 0;
	max-width: 70%;
	float:right;
}
#footer_nav ul li {
	float: left;
	list-style: none;
	position: relative;
}	
#footer_nav ul li a {
	padding:0px 7px;
	display: block;
	font-weight: strong;
	font-size: 0.9em;
	color: #41575f !important;
	text-decoration:none;
	text-transform: uppercase;
	font-weight: normal;
}
#footer_nav a:hover {
	color: #a3d0c2!important;
	text-decoration: none;
}

.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

@media only screen and (max-width:768px) {
	body {background-color:#fff;}
	.wrapper{max-width:768px; padding:139px 0px 0px; margin:auto; background:url(../img/gutes-coaching.jpg) top center no-repeat;background-color:#fff;}
	header{display: !important;}
	.mainContent{width:100%;margin:auto;}
	.mainContent h1{font-size:1.6em;}
	.mainContent h2{font-size:1.4em;}
	#dieBox
{
width: 200px;
height: 78px;
}

#dieBox img
{
display:block;
margin: 0px auto auto;
}
}

@media (max-width: 480px) { /*breakpoint*/
    .container > div {
        display: block;
        width: 100%;
    }
	    .top-container > div {
        display: block;
        width: 100%;
    }
	
	    .innenContainer > div {
        display: block;
        width: 100%;
    }
	.innenContainer img {
	padding:0px 30px 0px 0px;
}
}

@media only screen and (max-width: 480px) {
	body{background:none;}
	.wrapper{max-width:480px; padding:139px 0px 0px; margin:auto; background:url(../img/logo-anke-brandt.jpg) top center no-repeat;background-color:#fff;}
	#wrapperNav {display:none;}
	header { margin:0px; }
	.mainContent{width:100%;margin-left:-2em;margin-top:12em;}
	.mainContent h1{font-size:1.8em;}
	.mainContent h2{font-size:1.4em;}
	.mainContent h3, h4{font-size:1.2em;}
	.mainContent p, ul, dl{font-size:1em;}
	#footer {width:100%;height:80px;padding:0px 0px;margin:auto;background-color:#8c1600;}
	#footer_nav {margin:0px 9px 0 0;
}
}