@import url("../fonts/fonts.css");

*
{
	margin:0;
	padding:0
}

body
{
	-moz-background-clip:border;
	-moz-background-origin:padding;
	-moz-background-size:auto auto;
	background-attachment:scroll;
	background-repeat:repeat-x;
	background-color:gray;
	font-family:'SourceSansProRegular'
}

img
{
	border:none
}

p
{
	margin-bottom:15px
}

a
{
	text-decoration:none
}

h1
{
	font-family:'SourceSansProBold';
	font-weight:400;
	font-size:28px;
	line-height:1;
	margin-bottom:15px
}

#headerContent
{
	width:100%;
	margin:0 auto;
	text-align:center;
	position:relative
}

#headerContent p
{
	margin-bottom:3px;
	line-height:1
}

#contentBox a
{
	color:#fff
}

#contentBox a:hover
{
	text-decoration:underline
}

#contentBox.oneColumn p
{
	width:495px;
	max-width:100%
}

#contentBox a.orange
{
	color:#F1DD9D
}

#contentBox ul
{
	list-style-type:none;
	display:block;
	margin-bottom:30px
}

#contentBox li
{
	margin-top:15px;
	padding-left:9px;
	background:url(../images/list.png) no-repeat
}

#contentBox ul.narrowList li
{
	margin-top:0
}

#contentBox img
{
	padding-bottom:15px
}

p.orange,span.orange
{
	color:#f1dd9d
}

span.whiteUnderlined
{
	color:#fff;
	text-decoration:underline
}

.contentSmall
{
	font-size:9.5px;
	line-height:12px
}

#image img
{
	border:none
}

ul#menu li
{
	font-family:'SourceSansProSemibold';
	padding:0;
	padding-bottom:5px;
	font-size:14px
}

ul#menu li a:link,a:visited
{
	text-decoration:none;
	padding:0 0 0 20px;
	color:#404040
}

ul#menu li a:hover,ul#menu li.menuaktiv a
{
	padding-top:2px;
	text-decoration:none;
	color:gray;
	background:url(../images/arrow.png) no-repeat
}

#bubbleWrap
{
	position:absolute;
	z-index:6;
	left:0;
	top:185px;
	width:220px;
	color:#666
}

#bubbleWrapBlack
{
	position:absolute;
	z-index:6;
	left:0;
	top:185px;
	width:220px;
	color:#000
}

#bubbleWrap.bubblePraxis
{
	left:401px;
	top:460px;
	width:600px
}

.bubble
{
	position:absolute;
	background:url(../images/bg_whiteTransp.png);
	padding:10px
}

.clear
{
	clear:both
}

span.tab
{
	display:inline-block;
	width:60px
}

p.impressumText
{
	position:absolute;
	width:340px;
	top:36px;
	right:30px;
	font-size:9px
}

div.hoverImage
{
	float:left;
	padding-right:12px;
	padding-bottom:12px
}

div.hoverImage.second
{
	padding-right:0
}

div.hoverImage img
{
	display:block
}

div.hoverImage img.bigImage
{
	display:none;
	position:absolute;
	width:720px;
	height:500px;
	left:402px;
	top:0
}

div.hoverImage:hover img.bigImage
{
	display:none
}


@media screen and (max-width : 1154px) {
    #bubbleWrap.index
    {
        left: 35px;
    }
}

#contentBox.leistungen
{
	max-width:685px;
	width:685px;
	padding-right:0
}

#contentBox.leistungen ul
{
	margin-bottom:20px
}

#contentBox.leistungen p
{
	margin-bottom:10px
}

#contentBox.patienteninformationen img
{
	height:270px;
	margin-right:10px
}

.Hymne
{
	max-width:100%
}

.movies
{
	display:block;
	width:150px;
	overflow:hidden;
	float:left;
	margin-right:15px;
	min-height:200px
}

.movies img
{
	padding-bottom:5px!important
}

.aga-instructor
{
	position:absolute;
	bottom:5px;
	right:20px
}

#contentBox
{
	background:#404040;
	padding:35px;
	color:#fff;
	font-size:13px;
	line-height:1.45
}

#contentBox:after
{
	content:'';
	display:block;
	clear:both
}

#wrapper
{
	margin:0 auto;
	background:#FFF
}

.headerHeadline
{
	padding-top:28px;
	font-size:31px;
	color:#404040;
	font-family:'SourceSansProBold'
}

.headerSecond
{
	font-size:19px;
	color:gray;
	font-family:'SourceSansProBold'
}

.headerSubline
{
	font-size:19px;
	color:gray
}

.menu-icon
{
	cursor:pointer;
	display:inline-block;
	padding:28px 20px;
	position:absolute;
	top:-90px;
	right:24px;
	z-index:99;
	user-select:none
}

.menu-icon .navicon
{
	background:#333;
	display:block;
	height:2px;
	position:relative;
	transition:background .2s ease-out;
	width:18px
}

.menu-icon .navicon:before,.menu-icon .navicon:after
{
	background:#333;
	content:'';
	display:block;
	height:100%;
	position:absolute;
	transition:all .2s ease-out;
	width:100%
}

.menu-icon .navicon:before
{
	top:5px
}

.menu-icon .navicon:after
{
	top:-5px
}

hr
{
	height:0;
	border:2px solid #fff;
	margin:35px
}

.menu-btn
{
	display:none
}

.menu-btn:checked ~ ul#menu
{
    display: block;
    padding: 35px;
    list-style-type: none;
    position: absolute;
    background: white;
    width: calc(100% - 70px);
    top: -80px
}

.menu-btn:checked ~ .menu-icon .navicon
{
	background:transparent
}

.menu-btn:checked ~ .menu-icon .navicon:before
{
	transform:rotate(-45deg)
}

.menu-btn:checked ~ .menu-icon .navicon:after
{
	transform:rotate(45deg)
}

.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after
{
	top:0
}

ul#menu
{
	display:none;
	transition:display .2s ease-out
}

@media only screen and (max-width: 939px) {
    video{
        width:100%;
        height:auto;
    }

    #header
    {
        background:#FFF;
        height:163px;
        width:100%;
        margin:0
    }

    img.logo
    {
        display:block;
        position:absolute;
        top:10px;
        right:10px;
        z-index:20;
        width:80px
    }

    .headerHeadline
    {
        width:80%;
        font-size:20px
    }

    .headerSecond
    {
        width:80%;
        font-size:16px
    }

    .headerSubline
    {
        width:80%;
        font-size:16px
    }

    #image
    {
        position:initial;
        width:100%
    }

    #image img
    {
        width:100%;
        max-width:100%
    }

    #wrapper
    {
        position:relative;
        width:100%;
        margin-top:29px
    }

    #contentBox
    {
        padding:35px;
        font-size:13px;
        line-height:1.45
    }

    div.hoverImage
    {
        display:none
    }

    #image
    {
        position:initial;
        margin-top:-17px;
        width:100%
    }

    .mobile::before
    {
        display:block;
        content:"";
        clear: both;
    }

    .mobile
    {
        display:block
    }

    .desktop
    {
        display:none
    }

    #contentBox.praxis
    {
        max-width:100%;
        height:auto
    }

    #contentBox.praxis img
    {
        max-width:100%
    }

    #contentBox.leistungen
    {
        max-width:calc(100% - 35px);
        width:calc(100% - 35px);
        padding-right:0
    }

    figure
    {
        display:block;
        padding:0 10px;
        text-align:center
    }

    div.columnLeft
    {
        column-count:1
    }

    #contentBox.praxis
    {
        padding:35px;
        width:100%;
        max-width:100%
    }

    p.anfahrtPrint
    {
        position:initial;
    }
}

@media only screen and (min-width: 940px ) {
    video{
        width:720px;
        height:auto;
    }
    img.logo
    {
        display:block;
        position:absolute;
        top:20px;
        right:20px;
        z-index:20
    }
    
    .headerHeadline
    {
        width:80%;
        font-size:24px
    }
    
    .headerSecond
    {
        width:80%;
        font-size:16px
    }
    
    .headerSubline
    {
        width:80%;
        font-size:16px
    }
    
    #header
    {
        background:#FFF;
        height:163px;
        width:100%;
        margin:0
    }
    
    #image
    {
        position:absolute;
        z-index:5;
        top:-17px;
        left:-17px;
        width:calc(100% - 520px);
        max-width:390px
    }
    
    ul#menu
    {
        margin:0;
        padding:0;
        list-style:none;
        padding:24px;
        width:120px;
        z-index:15;
        top:230px;
        left:140px
    }
    
    div.columnLeft
    {
        column-count:2
    }
    
    .mobile
    {
        display:none
    }

    .desktop
    {
        display:block;
        margin: 0 auto;
        max-width: 1106px;
        background: #404040;
        color: white;
        padding: 8px;
        font-size: 14px;
        text-align: center
    }

    .desktop a
    {
        color: white
    }

    .desktop p
    {
        margin-bottom:0
    }
    
    div.hoverImage:hover img.bigImage
    {
        display:block
    }
    
    #wrapper
    {
        position:relative;
        width:100%;
        margin-top:29px
    }
    
    #contentBox
    {
        padding:35px;
        font-size:13px;
        line-height:1.45
    }
    
    figure
    {
        padding:0 10px;
        text-align:center
    }
    
    .menu-icon
    {
        top:-90px;
        right:-12px
    }
    
    #wrapper
    {
        position:relative;
        width:100%;
        max-width:1122px;
        height:560px;
        margin-top:29px
    }
    
    #contentBox
    {
        position:absolute;
        width:55%;
        max-width:650px;
        min-height:450px;
        max-height:470px;
        left:auto;
        right:17px;
        top:-17px;
        padding:35px;
        font-size:13px;
        line-height:1.45;
        overflow: auto;

        /*position: absolute;
    width: 650px;
    height: 450px;
    right: 17px;
    top: -17px;*/
    }
    
    #header
    {
        background:#FFF;
        height:123px;
        width:100%;
        margin:0
    }
    
    ul#menu
    {
        display:block;
        margin:0;
        padding:0;
        list-style:none;
        width:120px;
        position:absolute;
        z-index:15;
        top:230px;
        left:140px
    }
    
    ul#menu
    {
        display:block
    }
    
    .menu-icon
    {
        display:none
    }
    
    figure
    {
        display:table-cell;
        padding:0 10px;
        text-align:center
    }
    
    ul#menu
    {
        top:230px;
        left:140px;
        padding:35px;
        list-style-type:none
    }
    
    img.logo
    {
        display:block;
        position:absolute;
        top:20px;
        right:110px;
        z-index:20
    }
    
    .headerHeadline
    {
        width:100%;
        font-size:31px
    }
    
    .headerSecond
    {
        width:100%;
        font-size:19px
    }
    
    .headerSubline
    {
        width:100%;
        font-size:19px
    }
    
    #image
    {
        position:absolute;
        z-index:5;
        top:-17px;
        left:-17px;
        width:390px
    }
    
    #contentBox.praxis
    {
        padding:0;
        width:720px;
        max-width:720px;
        height:500px;
        overflow:hidden
    }

    p.anfahrtPrint
    {
        position:absolute;
        bottom:-10px;
        left:10px
    }
}