/*
 * =======================================================================================
 *
 *	Theme Name:   OrthoPraxis
 *	Theme URI:    http://www.orthopraxis-graefelfing.de
 *
 *	Description:  Orthopädische Praxisklinik in Gräfelfing, Dr. Pfleghar
 *
 *	Author:       creativ3 werbeagentur gmbh
 *	Author URI:   http://www.creativ3.de
 *
 *	Version:      1.0
 *
 * =======================================================================================
 */





/*######################################################################################*/
/*	NORMAL DESKTOP VIEW
/*######################################################################################*/


/*======================================================================================*/
/*	General
/*======================================================================================*/


* {
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0px auto;
    background: #E9E9E9;
    border-top: 10px solid #024489;
    
    text-align: center;
    
    color: #343434;
    font-size: 100%;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}


/*D */

.op-operative-therapie .column{
	margin-bottom: 0px !important;
}

.op-schulter .column,
.op-schulter .column #output{
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}
.op-schulter article:nth-child(2),
.op-schulter article:nth-child(2) .et_pb_section{
	padding-top: 0px !important;
}
.op-schulter #rightblock,
.op-schulter #rightblock p:last-child{
	margin-bottom:0px;
}

.op-huefte .column-desc-container .column.oth-column-1 div, 
.op-huefte .column-desc-container .column.oth-column-2 div{
	height: 90px !important;
}
.op-huefte #rightblock{
	margin-bottom: 0px;
}
.op-huefte article:nth-child(2),
.op-huefte article:nth-child(2) .et_pb_section{
	padding-top: 0px !important;
}

@media only screen and (max-width: 1000px) {
	.op-huefte #et_builder_outer_content .et_pb_module img{
		width: 100% !important;
		margin: 0 0 4px 0 !important;
	}
}

@media only screen and (max-width: 400px) {
	.op-knie-2 #columns-container div div.column.oth-column-1 div:nth-child(2){
		height: 185px !important;
	} 
}
.op-knie-2 #columns-container div div.column.oth-column-2 div:nth-child(2){
	height: 90px !important;
}

.op-knie-2 #rightblock{
	margin-bottom: 0px;
}
@media only screen and (min-width: 400px) {
	.op-line-break{
		display:none;
	}
}

/*======================================================================================*/
/*	Text Formats, Images, Videos and Others
/*======================================================================================*/

/* Headlines */
h1 {
    color: #7e7e7e; 
    font-size: 1.6rem; 
    font-weight: 700; 
    line-height: 150%;
    margin: 0 0 40px 0; 
    font-family: 'Open Sans Condensed', sans-serif;  
}

h2 {
    color: #024489;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 150%;
    margin: 0 0 20px 0;
    font-family: 'Open Sans Condensed', sans-serif;
}

h3, h4, h5, h6 {
    color: #024489;
    font-size: 1.0rem;
    font-weight: 700;
    line-height: 150%;
    margin: 0 0 20px 0;
    font-family: 'Open Sans Condensed', sans-serif;
}


/* Alignment */
.alignleft {
    text-align: left;
}

.aligncenter {
    text-align: center;
}

.alignright {
    text-align: right;
}


/* Hyperlinks */
section#main a,
section#widgets a {
    color: #024489;
    font-weight: 600;
    text-decoration: none;
}

section#main a:hover,
section#widgets a:hover {
    text-decoration: underline;
}


/* Absatz */
p {margin: 0 0 20px 0;}

p.wp-caption-text {
    font-size: 0.8rem;
}


/* Fettschrift */
strong, b {font-weight: 600;}


/* blaue Schrift */
span.blue {color: #024489;}


/* verlinkte Bilder */
a img {border: none;}


/* Auflistungen */
article ul {
    margin: 0 0 25px 15px;
}

article ol {
    margin: 0 0 25px 15px;
}

article ul ul,
article ol ol,
article ul ol,
article ol ul {
    margin: 10px 0 10px 0;
}

article li {
    margin: 0 0 5px 0;
}


/* Buttons Block */
a.button,
p.button a,
a.wp-block-button__link,
.wp-block-button__link.has-background,
.wp-block-button.is-style-outline a.wp-block-button__link {
    border: none;
    border-radius: 0;
    cursor: pointer;
    margin: 0 0 20px 0;
    padding: 10px 25px 10px 25px;
    background: #024489;
    border: 2px solid #024489;
    
    color: #fff !important; 
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    font-family: 'Open Sans', sans-serif;   
}

.wp-block-button.is-style-outline a.wp-block-button__link {
    color: #024489 !important;
    background: #fff;
}

a.button:hover,
p.button a:hover,
a.wp-block-button__link:hover {
    background: #91C1D9; 
    border: 2px solid #91C1D9 !important;
    text-decoration: none !important;
}

.wp-block-button.is-style-outline a.wp-block-button__link:hover {
    background: #fff;
    text-decoration: none !important;
}


/* horizontale Linie */

hr,
hr.wp-block-separator {
    border: 0;
    padding: 0;
    height: 1px;
    margin: 40px 0 40px 0;
    border-bottom: 3px solid #E9E9E9;
}

.wp-block-columns + hr.wp-block-separator {
    margin: 0 0 40px 0;
}


/* Textmarkierung */
::selection {background: #91C1D9; color: #fff;}
::-moz-selection { background: #91C1D9; color: #fff;}


/* Bild-Ausrichtungen */
img.alignleft {
    float: left;
    margin: 0 25px 25px 0;
}

img.alignright {
    float: right;
    margin: 0 0 25px 25px;
}

img.aligncenter {
    margin: auto;
    display: block;
}


/* Bild-Größenverhältnisse */
img.size-full,
img.size-large {
    width: 100%;
    height: auto;
}

img.size-medium {
    width: 50%;
    height: auto;
}

img.size-thumbnail {
    width: 31.111%;
    height: auto;
}

.wp-block-image img {
    height: auto;
}


/* Bildergalerie anpassen */
.gallery {
    width: 100%;
    height: auto;
}

.gallery-item {
    float: left;
    width: 30%;
    margin: 0 3% 20px 0;
}

.gallery img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-caption {
    margin-left: 0;
    font-size: 0.8rem;
}
.no-margin-bottom{
	margin-bottom: 0px !important;
}

@media only screen and (min-width: 1000px) { 
	.no-margin-bottom-desktop{
		margin-bottom: 0px !important;
	}
}


/* Responsive Videos */

.wp-block-embed {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
  }
  
  .wp-block-embed iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
  }




/*======================================================================================*/
/*	Forms
/*======================================================================================*/

fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

    legend {display: none;}
    
    label  {display: block;}
    
    form p {margin: 0 0 12px 0;}
    
    
    /* Eingabefelder */
    select,
    textarea,
    input {
        margin: 0;
        padding: 6px 2% 6px 2%;
        width: calc(96% - 2px);
        border: 1px solid #B3B3B3;
        
        color: #343434;
        font-size: 0.9rem;
        font-weight: 400;
        font-family: 'Open Sans', sans-serif;    
    }
    
    select {
        width: calc(100% - 2px);
    }
    
    textarea {
        height: 150px;
        overflow: auto;
    }

    input[type=checkbox],
    input[type=radio] {
        width: auto;
        margin: 0 10px 10px 0;
    }
    
    select:focus,
    textarea:focus,
    input:focus{
        color: #024489;
        border: 1px solid #024489;   
    }
    
    /* Schaltflächen */
    input[type=submit],
    button[type=submit] {
        width: 100%;
        border: none;
        cursor: pointer;
        margin: 20px 0 20px 0;
        padding: 8px 25px 8px 25px;
        background: #024489;
        
        color: #fff; 
        font-size: 0.9rem;
        font-weight: 400;
        font-family: 'Open Sans', sans-serif;   
    }
    
    input[type=submit]:hover,
    button[type=submit]:hover {
        background: #91C1D9;    
    }
    
    
/* Plugin adjustments: Contact Form 7 */

.wpcf7-list-item {
    margin-left: 0 !important;
}        

img.ajax-loader {
    width: 16px !important;
    height: auto !important;
}

.wpcf7 form .wpcf7-response-output {
    border: none !important;
    width: 95%;
    margin: 0 !important;
    padding: 10px 2.5% 10px 2.5% !important;

    color: #fff !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: green;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    background: red;
}

.wpcf7-not-valid-tip {
    color: red !important;
}





/*======================================================================================*/
/*	Site Structure
/*======================================================================================*/

/*  Header Area ------------------------------------------------------------------------*/

#termin-button {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 10;
    width: 85px;
}

    #termin-button a {
        position: relative;
        width: calc(100% -20px);
        height: 100%;
        display: block;
        padding: 10px;
        background: #024489;

        color: #fff;
        font-size: 12px;
        text-decoration: none;
    }

    #termin-button a:hover {
        background: #91C1D9;
    }


header {
    position: relative;
    width: 90%;
    margin: 0px auto;
    background: #fff;
    padding: 0 5% 0 5%;
}

    #header-container {
        width: 100%;      
        margin: 0px auto;
        max-width: 1000px;
        display: inline-block;
    }
    
        #logo {
            position: relative;
            width: 100%;
            height: auto;
            max-width: 500px;
            margin: 30px auto 0 auto;         
        }
        
            #logo img {
                width: 100%;
                height: auto;
            }
        
        
        /* ---------- Navigation ---------- */
        
        /* Responsive Menübuttons */
        .menu-open,
        .menu-close {
            display: none;
        }           
            
        nav#main {
            float: left;
            width: 100%;
            margin: 30px auto 0 auto;
            border-top: 5px solid #91C1D9;
        }
        
            /* 1st Level */
        
            nav#main ul {
                position: relative;
                float: left;
                width: 100%;
                list-style: none;

                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                justify-content: space-between;
            }           
            
                nav#main ul li {
                    float: left;
                    width: 20%;
                }
                
                    /* Standard Link */
                    nav#main ul li a {
                        float: left;
                        width: 100%;    
                        height: 40px;                    
                        display: block;
                        padding: 10px 0 0 0;
                        
                        color: #7e7e7e; 
                        font-size: 1.2rem;
                        font-weight: 700;
                        text-decoration: none;
                        font-family: 'Open Sans Condensed', sans-serif;
                    }
                    
                    /* MouseOver und Aktiv Effekt */
                    nav#main ul li a:hover,
                    nav#main ul li.current-menu-item > a,
                    nav#main ul li.current-menu-ancestor > a,
                    nav#main ul li.current-page-ancestor > a {
                        color: #024489;
                    }
                    
                    /* Übersicht Link */
                    nav#main ul li.overview a {
                        display: none;
                    }
                    
            /* 2nd Level */
            
            nav#main ul li ul {
                display: none;
            }
            
            nav#main ul li:hover ul {
                position: absolute;
                z-index: 10;
                width: 20%;
                display: block;
                margin: 50px 0 0 0;
            }                  
            
                nav#main ul li ul li {
                    width: 100%;
                } 
                
                    /* Standard Link */
                    nav#main ul li ul li a {
                        height: auto;
                        margin: 0 0 2px 0;
                        padding: 10px 0 10px 0;
                        background: rgba(145, 193, 217, 0.8);
                        
                        color: #fff;
                        font-size: 1.0rem;
                    }
                    
            /* 3rd Level */
            
            nav#main ul li:hover ul li ul {
                position: relative;
                margin: 0;
                width: 100%;
            }
            
                /* Standard Link */
                nav#main ul li ul li ul li a {
                    padding: 6px 0 6px 0;
                    background: rgba(126, 126, 126, 0.8);
                    
                    color: #fff;
                    font-size: 0.9rem;   
                }
                
                
                
/*  Cover Area -------------------------------------------------------------------------*/

section#cover {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0px auto;
    max-width: 1920px;
    max-height: 550px;
}                     

    section#cover img {
        width: 100%;
        height: auto;
        display: block;
        max-width: 1920px;
        max-height: 550px;
        object-fit: cover;
    }
    
    
    /* Plugin Anpassungen: Simple Responsive Slider */
    
    .rslides_container {
        position: relative;
        margin: 0 !important;
    }
    
        .rslides_tabs {
            position: absolute;
            top: 0;
            width: 100% !important;
            z-index: 100;
            margin: 20px auto 0 auto !important;
        }
        
            .rslides_tabs li {
                margin: 0 8px 0 0 !important;
            }
        
                .rslides_tabs a {
                    width: 12px !important;
                    height: 12px !important;
                    box-shadow: none !important;
                    border-radius: 20px !important;
                    background: #7e7e7e !important;
                }
                
                .rslides_here a {
                    background: #fff !important;
                }
    
    
    
/*  Main Area --------------------------------------------------------------------------*/ 

section#main {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1000px;
    background: #fff;
    margin: 0 auto 0 auto;

    display: flex !important;
    flex-wrap: wrap;
    
    font-size: 0.9rem;
    text-align: left;
    line-height: 150%;
}

    article {
        width: 90%;
        display: inline-block;
        padding: 50px 5% 30px 5%;
    }
    
        .column {
            float: left;
            width: 31.111%;
            margin: 0 3.333% 0 0;
        }
        
        .column:nth-child(3n) {
            margin: 0 0 0 0;
        }
        
        #leftblock {
            float: left;
            width: 31.111%;
        }
        
        #rightblock {
            float: right;
            width: 65.555%;
        }

            #contactbox {
                width: 100%;
                height: auto;
                margin: 0 0 40px 0;
                padding: 10px 5% 10px 5%;
                background: #577899;

                color: #fff;
                font-weight: bold;
            }

                #contactbox tr {
                    vertical-align: middle;
                }

                #contactbox tr td {
                    padding: 5px;
                }

                #contactbox tr td a {
                    color: #fff !important;
                    text-decoration: none !important;
                }

                #contactbox tr td img {
                    width: 100%;
                    height: auto;
                    max-width: 24px;
                }

            #zert {
                width: 100%;
                height: auto;
                /*margin: 0 0 40px 0;  TP-68 */ margin: 0 0 0 0;

                color: #024489;
                font-weight: 700;
                font-size: 0.7rem;
                line-height: 140%;
            }

                #zert tr {
                    vertical-align: middle;
                }

                #zert td img {
                    width: 80px;
                    height: auto;
                }

        /* Columns Block */
        .wp-block-columns {
            display: flex;
            gap: 20px;
            margin-bottom: 0 !important;
        }

            .wp-block-column {
                margin-bottom: 20px !important;
            }
        
        
        /* Plugin Anpassungen (Accordion Shortcodes) */
        
        h3.accordion-title {        
            color: #343434;
            font-size: 0.9rem;
            text-transform: none;
            
            cursor: pointer;
            width: calc(96% - 2px);
            padding: 10px 2% 10px 2%;
            border: 1px solid #B3B3B3;
        }
        
        h3.accordion-title:hover,
        h3.accordion-title.open {
            color: #024489;
            border: 1px solid #024489;
        }
        
        h3.accordion-title:before,
        h3.accordion-title.open:before {
            position: relative;
            float: left;
            width: 10px;
            content: "+";
            display: block;
            margin: 0 10px 0 0;
        }
        
        h3.accordion-title.open:before {
            content: "-";
        }
        
        div.accordion-content {
            margin: 0 0 50px 0;
        }



/*  Aside (Widget) Area ----------------------------------------------------------------*/

section#widgets {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1000px;
    background: #fff;
    margin: 40px auto 0 auto;

    display: flex;
    flex-wrap: wrap;
    
    font-size: 0.9rem;
    text-align: left;
    line-height: 150%;
}

    aside {
        width: 90%;
        display: inline-block;
        padding: 50px 5% 30px 5%;
    }

        .widget {
            float: left;
            width: 31.111%;
            margin: 0 3.333% 30px 0;
        }

        .widget:nth-child(3n) {
            margin: 0 0 30px 0;
        }



/*  Footer Area ------------------------------------------------------------------------*/

footer {
    position: relative;
    width: 90%;
    margin: 40px auto 0 auto;
    padding: 20px 5% 15px 5%;
    background: #024489;
}

    #footer-container {
        position: relative;
        width: 100%;      
        margin: 0px auto;
        max-width: 1000px;
        display: inline-block;
        
        text-align: left;
    }
    
        #copyright {
            float: left;
            
            color: #fff;
            font-size: 0.8rem;
        }
        
        nav#footer {
            float: right;            
        }        
        
            nav#footer ul {
                float: right;
                list-style: none;
            }
            
                nav#footer ul li {
                    float: left;
                }
                
                    nav#footer ul li a {
                        float: left;
                        display: block;
                        margin: 0 0 0 25px;
                        
                        color: #fff;
                        font-weight: 600;
                        font-size: 0.8rem;
                        text-decoration: none;
                    }
                    
                    nav#footer ul li a:hover,
                    nav#footer ul li.current-menu-item > a {
                        color: #91C1D9;
                    }



/*######################################################################################*/
/*	MOBILE VIEW (ab 1000 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 1000px) { 
  
#termin-button {
    width: 64px;
    top: auto;
    bottom: 20px;
    border: 1px solid #FFF;
}

    #termin-button a {
        font-size: 8px;
    }

/*  Main Area --------------------------------------------------------------------------*/

section#main {
    margin: 0px auto;
    top: 0;
}


/*  Aside (Widget) Area ----------------------------------------------------------------*/

section#widgets {
    margin: 0 auto;
    background: #E9E9E9;
}



/*  Footer Area ------------------------------------------------------------------------*/

footer {
    margin: 0 auto;
    padding: 30px 5% 15px 5%;
}

    #copyright {
        width: 100%;
    }

    nav#footer {
        float: left;
        width: 100%;
        margin: 20px 0 0 0;
    }
        nav#footer ul {
            float: left;
            width: 100%;
        }
        
            nav#footer ul li a {
                margin: 0 25px 0 0;
            }
        

        #main article p img /* TP-68 */ {
            width: 340px;
        }

} /* <--- END MEDIA */



/*######################################################################################*/
/*	MOBILE VIEW (ab 800 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 800px) {

body {
    border-top: 5px solid #024489;
}

    
/*  Header Area ------------------------------------------------------------------------*/

header {
    width: 100%;
    height: 70px;
    padding: 0;
}

    #logo {
        margin: 10px 0 20px 5%;
        max-width: 235px;
    }


/*  Navigation ---------- */


    /* Menü öffnen Button */
    .menu-open {
        position: absolute;
        top: 22px;
        right: 5%;
        margin: 0;
        padding: 0;
        width: 24px;
        height: 24px;
        display: block;
        cursor: pointer;
        background: #024489;
        transition: all ease 0.4s;
        background: url(img/icon-menu.png) no-repeat;
        background-size: 100% 100% !important;
    }

    .menu-open.is-open {
        background: url(img/icon-close.png) no-repeat;
    }
    
    
nav#main {
    position: absolute;
    top: 70px;
    margin: 0;
    z-index: 1000;
    border: none;
    display: none;
}


    /* 1st Level */

    nav#main ul li {
        width: 100%;
    }
    
        /* Standard Link */
        nav#main ul li a {
            width: 90%;
            height: auto;
            display: block;
            background: #024489;
            padding: 10px 5% 10px 5%;
            border-bottom: 1px solid #376EB4;
            
            color: #fff;
            text-align: left;
        }
        
        /* Letztes Linkelement in Liste */
        nav#main ul li:last-child a {
            border: none;
        }
        
        /* MouseOver */
        nav#main ul li a:hover {
            color: #fff;
        }

        /* Aktiv Effekt */
        nav#main ul li.current-menu-item > a,
        nav#main ul li.current-menu-ancestor > a {
            color: #91C1D9;
        }
        
        /* Übersicht Link */
        nav#main ul li.overview a {
            display: block;
        }
        
        /* Link wenn ein Submenü vorhanden ist */
        nav#main ul li a.has-sub:after {
            position: relative;
            float: right;
            width: 16px;
            height: 16px;
            content: "";
            margin: 4px 0 0 0;
            background: url(img/icon-arrow-down.png) no-repeat;    
        }
   
   
    /* 2nd Level */
        
    nav#main ul li:hover ul {
        position: relative;
        margin: 0;
        width: 100%;
        display: none;
    }
    
        /* Standard Link */
        nav#main ul li ul li a {
            margin: 0;
            width: 88%;
            padding: 10px 5% 10px 7%;
            background: #195AA0;
            
            color: #fff;
        }
        
        
    /* 3rd Level */
    
    /* Standard Link */    
    nav#main ul li ul li ul li a {
        width: 86%;
        padding: 10px 5% 10px 9%;
        background: #7e7e7e;
        border-bottom: 1px solid #929292;
    }


/*  Main Area --------------------------------------------------------------------------*/ 

.wp-block-columns {
    display: block;
    gap: 0;
}


/*  Aside (Widget) Area ----------------------------------------------------------------*/

.widget,
.widget:nth-child(3n) {
    width: 100%;
    margin: 0 0 30px 0;
    border-bottom: 3px solid #E9E9E9;
}

.widget:last-child {
    border: none;
}
           
} /* <--- END MEDIA */




/*######################################################################################*/
/*	MOBILE VIEW (ab 600 Pixel)
/*######################################################################################*/

@media only screen and (max-width: 600px) {
    
h1 {text-align: left;}

/*  Header Area ------------------------------------------------------------------------*/

#info {
    width: 100%;
    margin: 30px 0 0 0;
}



/*  Main Area --------------------------------------------------------------------------*/

.column {
    width: 100%;
    margin: 0 0 25px 0;
}

#leftblock,
#rightblock {
    float: left;
    width: 100%;
    margin: 0 0 25px 0;
}

/*  Footer Area ------------------------------------------------------------------------*/

nav#footer ul li {
    width: 100%;
}

nav#footer ul li a {
    margin: 0;
    width: 100%;
    padding: 6px 0 6px 0;
}

} /* <--- END MEDIA */



/*======================================================================================*/
/*  Sidebars
/*======================================================================================*/

/*  Information Sidebar ----------------------------------------------------------------*/

#sidebar-information {
    position: relative;
    display: inline-block;
    max-width: 1000px;
    width: 100%;
    margin: -180px 0 20px 0;
    background: #91C1D9;
}

#sidebar-information h3.widget-title {
	text-align: center;
	font-size: 1.4rem;
}

#sidebar-information .textwidget {
	text-align: center;
}

#sidebar-information .wrap > div {
    margin: 5px;
    padding: 10px;
    width: 30%;
    float: left;
    font-size: 0.8rem;
    font-weight: 400;
}

#sidebar-information .textwidget p.name {
	margin: 0 0 15px 0;
}

#sidebar-information .wrap .widget_text:last-child div .textwidget {
	position: relative;
	text-align: center;
}

#sidebar-information .wrap div:last-child  .textwidget p {
	margin: 0 0 10px 0;
}

#sidebar-information .wrap .widget_text:last-child div .textwidget .seigel > div {
	margin: 0 auto !important;
}