/*
Theme Name: dr. Hermann Boglárka
Theme URI: http://kovacskriszti.com/drhermannb
Author: Petho-Kovacs Krisztina
Author URI: http://kovacskriszti.com
Description: Basic Theme by Petho-Kovacs Krisztina
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dr. Hermann Boglarka fogszabalyozas
*/

*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    background: #faf7f2;
}

.content-box {
    width: 84%;
    margin: 0 auto;
    max-width: 1300px !important;
}

.content-p p {
    margin-bottom: 1rem;
}

.service-box-container {
    margin-top: 2rem;
}

.service-box-container > div {
   background-color: #b6c5ba;
   margin: 50px 50px 0 0;
   padding: 0;
}

.service-box-container p {
    position: relative;
    min-width: 300px;
    min-height: 200px;
}

.service-box-container img {
    position: absolute;
    min-width: 300px;
    left: -30px;
    top: -30px
}

.service-box-container span {
    padding: 150px 0 30px 0;
    display: inline-block;
}

.comparison {
    width: 25%;
    height: 200px;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin: 0 0.5rem;
}

.comparison img {        
    display: block;
    width:100%;
    height:200px; 
    object-fit:cover;
}

.comparison .after {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
}

.comparison .after:before {
    position: absolute;
    bottom: 30px;
    right: 30px;
    content: "Utána";
    font-style: italic;
    color: #fff;
}

.comparison .before {
    position: relative;
    z-index: 2;
    border-right: 2px solid white;
    overflow: hidden;
    width: 50%;
    height: auto;
}

.comparison .before:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    opacity: 0.3;
    width: 20px;
    height: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=1);
    /* IE6-9 */
}

.comparison .before:before {
    position: absolute;
    bottom: 30px;
    left: 30px;
    content: "Előtte";
    font-style: italic;
    color: #fff;
}

.comparison.light .before:before,
.comparison.light .after:before {
    color: #b8ccc0;
}

.comparison .hand {
    content: '';
    background: #fff;
    width: 12px;
    height: 50px;
    position: absolute;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 3;
    top: 50%;
    margin-left: -7px;
    margin-top: -25px;
    cursor: ew-resize;
    pointer-events: none;
}

.comparison .hand:after {
    position: absolute;
    top: 50%;
    right: -15px;
    margin-right: -3px;
    margin-top: -6px;
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
}

.comparison .hand:before {
    position: absolute;
    top: 50%;
    left: -15px;
    margin-left: -3px;
    margin-top: -6px;
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #fff;
}

.compare {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 0 auto;
}

.compare-c {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-right: 1rem;
}

.comparing {
    margin: 0 auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.c {
    width: 25.5%;
    padding: 0.5rem 0.15rem 0.5rem 1rem;
    margin: 0 auto;
}

.c h5 {
    padding: 0.4rem 0 0.2rem 0.5rem;
    letter-spacing: 0.5px;
    font-weight: bolder;
    color: #b8ccc0;
}

.c p {
    padding-left: 0.5rem;
    font-size: smaller;
}

ul.list {
    margin: 1rem 0;
    padding: 0 2rem 0 1rem;
}

ul.list li {
    position: relative;
    margin: 1rem 0;
}

ul.list li:before {
    content: '';
    width: 13px;
    height: 13px;
    background: url(../img/dot.svg) no-repeat;
    position: absolute;
    top: 10px;
    left: -22px;
}

@media screen and (min-width: 2200px) {
    .hero-content {
        background-size: cover!important;
    }
}

@media screen and (max-width: 1499px) and (min-width:1301px) {
    .hero-content {
        background-size: cover !important;
    }

    .place .row .col-1-2:nth-of-type(2) {
        margin: -10rem -3rem 0 0 !important;
    }

    #service1 h3 {
        margin: 1.5rem 0 1rem 0 !important;
    }

    #service5 .service-text,
    #service6 .service-text,
    #service7 .service-text {
        max-width: 45% !important;
    }

    .service-text {
        margin: 1rem 0 0 5rem !important;
    }

    .textwidget-inverse .col-1-2 img {
        max-width: 500px !important;
    }

    .foot-services {
        padding: 0.5rem 0 0 8rem;
    }

    .profile-photo {
        height: 400px !important;
        width: auto;
        margin: 3rem 0 0 4rem !important;
    }

    .profile-photo2 {
        height: 700px !important;
        width: auto;
        margin: 3rem 5rem 0 1rem;
    }

    .profile-text2 {
        padding: 3rem 0 2rem 0 !important;
    }

    .textwidget .col-1-2 img {
        max-width: 500px !important;
        height: auto;
        margin-left: 2.5rem;
        position: absolute;
    }

    #entry {
        right: 5% !important;
    }

    .button-main {
        margin: 1.2rem 0 0 0 !important;
    }

    #service2 h3:after,
    #service3 h3:after,
    #service4 h3:after {
        left: 68% !important;
    }

    .smile {
        margin-top: 6rem !important;
    }
}

@media screen and (max-width: 1300px) {
    .content-box {
        padding: 0 5px;
        max-width: 1300px;
    }

    body {
        background-size: 1300px auto;
    }
}

@media screen and (max-width:768px) {
    header {
        text-align: center;
    }

    .hero-content .content-box,
    #footer-menu .content-box {
        width: 100% !important;
    }

    .content-box {
        width: 94%;
    }

    #main-page {
        padding: 2rem 0 2rem 0;
    }

    nav ul li {
        margin: 0 0 0 0 !important;
    }

}

#top {
    margin: 0 0 0 0;
    overflow: hidden;
    background: #f0efe3;
    padding: 2rem 0 1.5rem 0;
}

#contact-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: small;
    width: 100%;
    margin-right: 3rem;
}

#contact-info li {
    margin-left: 4rem;
    font-weight: 300;
    display: inline-block;
    position: relative;
}

#contact-info li a {
    color: #010101 !important;
    list-style-type: none;
    text-decoration: none;
}

#contact-info li .instagram {
    width: 15px;
    height: 15px;
    display: inline-block;
}

#contact-info li .fo {
    width: 100px;
    height: 20px;
    background: url(../img/fo_logo.svg) center left no-repeat;
    background-size: contain;
    position: absolute;
    top: -5px;
    left: -90px;
}

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

    #contact-info li:nth-of-type(1) {
        padding-bottom: 1rem;
    }

    #contact-info li .fo {
        left: 0;
    }
}

#contact-info li:nth-of-type(2):before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../img/address2.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    top: -5px;
    left: -28px;
}

#contact-info li:nth-of-type(3):before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(../img/mobile2.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    top: -5px;
    left: -28px;
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#main-page {
    padding: 0 0 0 0;
}

#menu {
    padding: 0 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
}

nav ul {
    float: right;
    display: block;    
}

nav ul li {
    float: left;
    margin: 0 .75rem 0 .75rem;
}

nav ul li a {
    text-decoration: none !important;
    color: #010101;
    display: block;
    padding: 0.55rem 0 0.3rem 0;
    position: relative;
    list-style-type: none;
    text-decoration: none;
}

nav ul li a:hover,
#footer-menu ul li a:hover {
    border-bottom: 1px solid #010101;
    transition: 0.2s ease;
}

#logo {
    width: 200px;
    height: 100px;
    margin: 0 0 0 0;
    display: inline-block;
    padding-top: 0.8rem;
}

#logo img {
    padding: 0.5rem 0 0.5rem 0;
}

#logo a {
    width: 150px;
    height: auto;
    display: inline-block;
}

.hero-content {
    width: auto;
    height: 750px;
    background: url(../img/drhb-cover.jpg) top left no-repeat;
    background-size: cover;
    margin-top: 8rem;
}

.hero-text {
    margin-top: 2rem;
    margin-left: 0;
    max-width: 40%;
    padding: 2rem 0;
    text-shadow:1px 2px 4px #fff;
}

.button-main,
.button-main.transparent:hover {
    display: inline-block;
    margin: 1rem 0 0 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase !important;
    background: #b8ccc0;
    padding: 0.75rem 1rem 0.75rem 1rem;
    border: 1px solid #b8ccc0;
    border-radius: 50px;
    filter: drop-shadow(0px 6px 13px #b8ccc0);
    letter-spacing: 1px;
    margin-top: 2rem;
    text-shadow: none;
}

.button-main:hover,
.button-main.transparent {
    background: none;
    border: 1px solid #242020;
    color: #242020;
    filter: none;
    margin-top: 2rem;
}

.button-main.transparent {
    font-weight: bold;
    border-width: 2px;
}

.column-2,
.column-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: hidden;
    padding: 0 0 0 0;
}

.column-2 > div {
    width: 48%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}

.column-3 > div {
    width: 33.333%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}

footer {
    padding: 3vw 0 2vw 0;
    display: block;
    overflow: hidden;
    clear: both;
}

.front-page h1 {
    position: absolute;
    visibility: hidden
}

.content-404 {
    padding: 15rem 0 5rem 0;
    text-align: center;
}

.instagram {
    background: url(../img/instagram.png) center center no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    display: block;
}

.book-time {
    background: url(../img/idopont-foglalas.png) center center no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    display: block;
}

.about {
    margin: 2rem 0 0 0;
    padding: 4rem 0 10rem 0;
    position: relative;
}

.about-text {
    padding: 0 1rem 1rem 0;
}

.certs-container {
overflow-x: scroll;
padding: 2rem 0;
display: flex;
}

.certs {
    flex-flow: row nowrap;
    display: flex;
}

.certs div {
    margin : 0 2rem 0 0;
    min-width: 20rem;
    filter: drop-shadow(0px 6px 13px grey);
}

.certs div:last-of-type {
    margin: 0;
}

.portrait,
#service1 {
    width: 40%;
}

.portrait img {
    margin: 0rem 0 0 5rem;
    width: auto;
    height: 650px;
    display: block;
    object-fit: cover;
}

#green1 {
    width: 500px;
    height: 800px;
    background-color: #b6c5ba;
    position: absolute;
    top: -2rem;
    right: -5rem;
    z-index: -1;
}

.place,
.portrait,
#service2 h3,
#service3 h3,
#service4 h3,
.service-text h3,
.testimonial h2,
.testi-text,
#service-intro .content-box {
    position: relative;
}

.portrait {
    float: right;
}

#green2 {
    width: 100%;
    height: 300px;
    background-color: #b6c5ba;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.textwidget,
.textwidget-inverse {
    padding: 3rem 0 3rem 0;
    position: relative;
}

.row,
#service5,
#service6,
#service7,
.testi-pictures {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.elem-with-shadow {
    padding-bottom: 2rem;
}

.col-1-2 {
    width: 50%;
    position: relative;
}

.col-1-2 img {
    width: 100%;
    height: auto;
    display: block;
}

.textwidget .col-1-2 img {
    max-width: 500px;
    height: auto;
    margin-left: 5.5rem;
    position: absolute;
}

.textwidget-inverse {
    margin: 1rem 0 1rem 0;
}

.textwidget-inverse .col-1-2 img {
    max-width: 550px;
    width: auto;
    position: absolute;
    margin-right: 6.5rem;
    z-index: 1;
}

.about:after {
    content: '';
    width: 100%;
    height: 760px;
    background: url(../img/lines1.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -6rem;
    left: 0;
    padding: 6rem 0 3rem 0;
    z-index: -2;
}

@media screen and (max-width: 768px) {
    .about:after {
        background-image: none;
    }
}

.place-photo {
    padding-top: 4rem;
}

.place .row .col-1-2:nth-of-type(2) {
    margin: -11rem 0 0 -1rem;
}

.place {
    margin-bottom: 6rem;
    overflow: hidden;
    clear: both;
    padding-bottom: 8rem;
}

.place:after {
    content: '';
    width: 100%;
    height: 960px;
    background: url(../img/lines2.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -3rem;
    left: 0;
    padding: 6rem 0 0 0;
    z-index: -2;
}

@media screen and (max-width: 768px) {
    .place:after {
        background-image: none;
    }
}

#services {
    margin: 4rem 0 4rem 0;
    background: #f0ebe3;
    padding: 6rem 0;
}

.types {
    margin: 2rem 0;
}

#service1,
#service2,
#service3,
#service4 {
    background: #e3d9ce;
    padding: 1rem 1.3rem;
    display: block;
}

#serviceother {
    width: 58%;
    margin-left: 1rem;
}

#service2,
#service3 {
    margin-bottom: 1rem;
}

#service2 h3:after,
#service3 h3:after,
#service4 h3:after {
    content: '';
    width: 45px;
    height: 2px;
    background: #242020;
    position: absolute;
    bottom: 33px;
    left: 58%;
}

#service5,
#service6,
#service7 {
    color: #242020;
    background: #e3d9ce;
    padding: 1rem 1.3rem;
    margin: 1rem 0.25rem 0 0;
}

.service-text h3,
.testimonial h2,
.testi-text {
    display: inline-block;
}

.service-text h3:after {
    content: '';
    width: 45px;
    height: 2px;
    background: #242020;
    position: absolute;
    bottom: 23px;
    right: -16%;
}

#service5 div,
#service6 div,
#service7 div {
    max-width: 60%;
}

.service-text {
    margin: 2rem 0 0 3rem;
    text-decoration: none !important;
    color: #242020;

}

.testimonial {
    margin: 6rem 0 4rem 0;
    text-align: center;
    padding: 2rem 0 2rem 0;
    background: url(../img/lines3.svg) center center no-repeat;
    background-size: cover;
    overflow: hidden;
    clear: both;
}

@media screen and (max-width: 768px) {
    .testimonial {
        background-image: none;
    }
}

.testimonial h2:after {
    content: '';
    width: 550px;
    height: 300px;
    background: url(../img/smile.svg) center center no-repeat;
    position: absolute;
    bottom: -4rem;
    right: -16rem;
    padding: 6rem 0 3rem 0;
    z-index: -1;
}

.testi-text {
    background: #fff;
    padding: 3rem 2.5rem 0 2.5rem;
    max-width: 55%;
    max-height: 500px;
    margin: 5rem 2rem 0 0;
    font-family: 'butler', serif;
    font-weight: 400;
    font-size: 1.3rem;
}

.testi-pictures {
    display: flex;
    max-width: 36%;
    padding: 1rem;
    margin: 2rem 0 0 0;
}

.testi-text:before {
    content: '';
    width: 650px;
    height: 400px;
    background: url(../img/quote.svg) no-repeat;
    position: absolute;
    top: -3rem;
    left: 1rem;
}

.testi-text .my_carousel {
    overflow: hidden;
    clear: both;
}

#testi1 {
    width: 270px;
    height: auto;
    display: block;
    margin: 2rem 0 0 1rem;
    z-index: 0;
}

#testi2 {
    width: 380px;
    height: auto;
    display: block;
    margin: -10.5rem 0 0 5rem;
    padding-bottom: 2rem;
}

img.cert {
    margin-top: 2rem;
    filter: drop-shadow(0px 6px 13px grey);
    height: 400px;
} 

#brown1 {
    width: 500px;
    height: 800px;
    background-color: #e1d0ba;
    position: absolute;
    top: -0.5rem;
    right: -1rem;
    z-index: -1;
}

.process {
    margin: 8rem 0;
    padding: 6rem 0 4rem 0;
    background: #fff;
}

.steps {
    margin: 3rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.step {
    width: 320px;
    height: 320px;
    padding: 4rem 1rem;
    margin: 1rem 1rem 3rem 1rem;
    background: url(../img/circle.svg) center center no-repeat;
    display: inline-block;
    text-transform: uppercase;

}

.step h4 {
    display: inline-block;
    line-height: 1.3;
}

.cta {
    margin: 4rem 0;
    padding: 1.5rem;
    background: url(../img/fogaszati-szures-budapest-dr-hermann-boglarka-ctabg.png) center center no-repeat;
    background-size: cover;
}

.frame {
    margin: 1.5rem;
    padding: 5rem 0 4rem 0;
    border: 3px solid #fff;
}

#form {
    margin: 6rem 0;
    padding: 4rem 0;
    position: relative;
}

#form:after {
    content: '';
    width: 100%;
    height: 760px;
    background: url(../img/lines4.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 6rem 0 3rem 0;
    z-index: -2;
}

@media screen and (max-width: 768px) {
    #form:after {
        background-image: none;
    }
}

#logo-footer {
    text-align: center;
    margin: 0 auto !important;
}

#logo-footer img {
    width: 250px;
    height: auto;
    margin: 0 auto;
    padding: 2rem 0;
}

footer,
#copyright {
    background: #f0ebe3;
    padding: 6vw 0 4vw 0;
}

#footer-menu {
    overflow: hidden;
    clear: both;
}

#footer-menu ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 1rem 0 1rem 0;
}

#footer-menu ul li a {
    margin: 0 3.5rem 0 0.5rem;
    text-transform: uppercase;
}


#contact {
    margin: 1rem 0 0.5rem 0;
    max-width: 50%;
}

.contact-dets {
    display: flex;
    flex-wrap: nowrap;
    margin: 0 1rem 0 0;
    justify-content: flex-start;
    text-align: left !important;
}

.foot-services {
    padding: 0.5rem 0 0 8rem;
    margin: 0.4rem 0 0 0;
}

.foot-services ul {
    margin-top: 1.5rem;
}

.foot-services ul li {
    margin-bottom: 1.5rem;
}

.inner-page .hero-content {
    display: none;
}

.inner-header {
    display: block;
    overflow: hidden;
    clear: both;
    margin: 6rem 0 0 0;
}

.inner-header.blog-header {
    height: auto;
}

.inner-cover {
    position: relative;
    background-size: cover;
    background-position: top left;
    height: 400px;
}

.inner-cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.inner-text {
    text-align: center;
    margin-top: 6rem;
}

.smile {
    margin-top: 6rem;
}

#certifications .my_carousel {
    margin: 2rem 0;
}

#certifications .item img {
    width: auto;
    height: 200px;
    margin: 0 auto;
}

#biography {
    margin: 6rem 0;
}

#biography .column-2 {
    justify-content: flex-start;
}

.profile-text {
    padding: 3rem 1rem 2rem 0;
}

.profile-photo {
    height: 350px;
    width: auto;
    margin: 2rem 0 0 7rem;
}

.profile-photo2 {
    height: 800px;
    width: auto;
    margin: 3rem 5rem 0 1rem;
}

.profile-text2 {
    padding: 6rem 0 2rem 0;
}

.place2 {
    margin: 4rem 0;
    background: #f0ebe3;
    padding: 5rem 0;
}

.place2 .row {
    margin-top: 2rem;
    position: relative;
}

.place-text,
.left {
    padding: 2rem 4rem 0 0;
}

.place-photo2 {
    padding: 3rem 0 2rem 1rem;
    z-index: 1;
}

#green3 {
    width: 80%;
    height: 780px;
    background-color: #b6c5ba;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.textwidget .col-1-2 {
    padding-top: 2rem;
}

.content-p ul,
.left ul {
    margin: 1.5rem 0;
}

.content-p ul li,
.left ul li {
    padding: 0.5rem 0 0.5rem 1rem;
    position: relative;
    line-height: 1.2;
}

.content-p ul li:before,
.left ul li:before {
    content: '';
    width: 13px;
    height: 13px;
    background: url(../img/dot.svg) no-repeat;
    position: absolute;
    top: 13px;
    left: 2px;
}

.right {
    width: auto;
    height: 900px;
    margin-left: 5.5rem;
}

.theprocess {
    background: #f0ebe3;
    margin: 6rem 0;
    padding: 6rem 0 6rem 0;
    position: relative;
}

.theprocess .process {
    margin: 4rem 0 2rem 0;
    padding: 1rem 0 0 0;
}

.theprocess:after {
    content: '';
    width: 100%;
    height: 560px;
    background: url(../img/lines4.svg) center left no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 6rem 0 3rem 0;
    z-index: 0;
}

@media screen and (max-width: 768px) {
    .theprocess:after {
        background-image: none;
    }
}

#divider1 {
    width: 100%;
    height: 360px;
    background: url(../img/lines6.svg) center left no-repeat;
    background-size: cover;
    margin-top: -16rem;
}

#gyakori {
    background: #b8ccc0;
    margin: 6rem 0 6rem 0;
    padding: 4rem 0 4rem 0;
}

#gyakori-qa {
    padding: 0 0 1rem 0;
}

#gyakori-qa > div {
    padding: 1rem 0 0.5rem 0;
    border-bottom: 1px solid #242020;
}

.faq-page {
    cursor: pointer;
    transition: 0.4s;
    position: relative;
}


.faq-page:hover {
    font-weight: bolder;
    font-size: 24px;
    transition: 0.6s;
}


.faq-body {
    padding: 1rem;
    display: none;
    transition: 0.6s;
}

.faq-page:after {
    content: '>';
    height: 20px;
    width: 25px;
    color: #242020;
    transform: rotate(90deg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 20px;
}

.active:after {
    content: '';
    height: 20px;
    width: 25px;
    color: #242020;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 4px;
    right: 20px;
    transform: rotate(180deg);
}

.white-bg-left {
    background: #fff;
    padding: 2rem 4rem 3rem 5rem;
    margin: 0 -7.5rem 2rem -5rem;
}


.white-bg-right {
    background: #fff;
    padding: 2rem 3rem 3rem 6rem;
    margin: 0 -6rem 2rem -6rem;
}

.white-bg-left .button-main,
.white-bg-right .button-main {
    margin-top: 1.5rem;
}

.service {
    width: auto;
    height: 700px;
    background: url(../img/fogszabalyozas-budapest-dr-hermann-boglarka-cover.png) top left no-repeat;
    background-size: cover;
    margin-top: 6rem;
    overflow: hidden;
    clear: both;
}

#service-text {
    margin-top: 6rem;
    width: 40%;
    padding: 1rem 0;
}


#green4 {
    width: 50%;
    height: 450px;
    background-color: #b6c5ba;
    position: absolute;
    top: 3rem;
    left: -4rem;
    z-index: -1;
}

.service-text2 {
    margin: 1rem 0 2rem 2rem;
    padding: 3rem 3rem 3rem 2rem;
}

.service-photo img {
    max-width: 500px;
    height: auto;
    padding: 1rem;
    margin: 0 0 0 -2rem;
}

.partners {
    margin: 4rem 0;
}

.partner-logo {
    width: 20%;
    margin: 3rem auto 4rem auto;
    text-align: center;
}

.partner-logo img {
    width: auto;
    height: 120px;
    display: inline-block;
    padding: 1rem;
}

.types {
    padding: 4rem 0 2rem 0;
    background: #f0ebe3;
}

.brown {
    margin: 3rem 0 6rem 0;
    padding: 3rem 0 4rem 0;
    background: #e1d0ba;
}

.white {
    margin: 3rem 0 6rem 0;
    padding: 3rem 0 4rem 0;
    background: #fff;
}

.pic-right {
    width: 250px;
    height: auto;
    float: right;
    margin: -8rem 2rem 0 0;
}

.pic-left {
    width: 250px;
    height: auto;
    float: left;
    margin: -10rem 0 0 0;
}

.col-2-1 {
    width: 65%;
}

.col-2-2 {
    width: 29%;
    margin: 0 0 0 3rem;
    background: url(../img/fogszabalyozas-budapest-dr-hermann-boglarka07.png) top left no-repeat;
    background-size: cover;
}

#care {
    margin: 4rem 0;
    padding: 4rem 0;
    background: #b8ccc0;
}

#care .row {
    margin: 4rem 0;
}

.col-2-1 ul {
    margin: 1.5rem 0;
}

.col-2-1 ul li {
    margin: 1rem 0;
}

#ablauf {
    margin: 4rem 0;
    padding: 10rem 0;
    background: url(../img/lines7.svg) center center no-repeat;
    background-size: cover;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    #ablauf {
        background-image: none;
    }
}

.how {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 1rem 0;
    vertical-align: middle;
}

.how:nth-of-type(1) {
    margin-top: 2rem;
}

.how h4 {
    background: url(../img/dot.svg) center center no-repeat;
    background-size: contain;
    border-radius: 50%;
    padding: 1rem;
}

.how p {
    padding: 1rem 1rem 0 1rem;
}

#before-after {
    margin: 0rem 0;
    padding: 2rem 0;
}

#portfolio {
    background: #fff;
    padding: 4rem 0;
}

#blog-list .row {
    border-bottom: 1px solid #242020;
    margin: 0 4rem 2rem 0;
    padding-bottom: 2rem;
}

#blog-list img {
    max-width: 450px;
}

#blog-list a {
    color: black;
}

#price-list,
#blog-list {
    margin: 2rem 0;
}

#price-list .content-box,
#blog-list .content-box {
    padding: 4rem 0 0 3rem;
    background: #fff;
    margin-top: -4rem;
}

#price-list .content-box:last-child,
#blog-list .content-box:last-child {
    padding-bottom: 2rem;
}

#price-list ul {
    padding: 0 2rem 0 1rem;
}

#price-list ul li {
    display: table;
    padding: 0 0 1rem 0;
    position: relative;
}

#price-list ul li span {
    display: table-cell;
}

#price-list ul li span:first-child { 
    position: relative;
    overflow: hidden;      
    line-height: 1.5;
}

#price-list ul li span:first-child:after { /* DASHES */
    content: "";
    position: absolute;
    bottom: 0.25rem;         
    margin-left: 0.5rem;        
    width: 100%;
    border-bottom: 1px dashed #000;
}

#price-list ul li span + span {     
    text-align: right;
    width: 1%;          
    vertical-align: bottom;       
    padding-left: 0.5rem;
     white-space: nowrap;    
     line-height: 1.5;
  }

#price-list ul li:before {
    content: '';
    width: 13px;
    height: 13px;
    background: url(../img/dot.svg) no-repeat;
    position: absolute;
    top: 10px;
    left: -22px;
}

.divider {
    height: 800px;
    background: url(../img/lines4.svg) center center no-repeat;
    background-size: cover;
    margin-top: -18rem;
}

.contact-data {
    margin: 4rem 0;
    padding: 6rem 0;
    background: #fff;
}

.contact-data .row div {
    width: 33%;
}

.contact-data .row img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 4rem auto 2rem auto;
}

#maps {
    margin: 4rem 0;
    padding: 2rem 0;
}

#maps-text ul {
    padding: 1rem 0;
    line-height: 1.2;
}

#maps-text ul li {
    padding: 0 0 1rem 0;
}
#maps-pic {
    padding:1rem 0 1rem 0;
    margin-bottom: 1rem;
}

#time {
    margin: 0 0 8rem 0;
}

#time .content-box {
    position: relative;
}

#entry {
    width: 400px;
    height: auto;
    position: absolute;
    right: 15%;
    margin-top: -6rem;
    z-index: 2;
}

#frame {
    border: 2px solid #242020;
    padding: 1rem;
    margin: -1rem 0 0 -1rem;
    width: 100%;
    height: 310px;
    position: absolute;
    z-index: 1;
}

#ordination {
    background: #b8ccc0;
    padding: 2.5rem;
}

.my_carousel .nav {
    display: none !important;
}

#signup-form {
    margin: 0;
    padding: 2rem 0;
    overflow: hidden;
}

#signup-form p,
.wpcf7-form p,
.wpcf7-response-output,
.wpcf7-form-control-wrap {
    font-size: 16px;
    font-family: 'butler', serif;
}

input[type="email"],
input[type="text"],
input[type="tel"] {
    content: "";
    display: inline-block;
    width: 90%;
    height: 2rem;
    color: none;
    border: solid 1px #fff;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
    background: #fff;
    font-size: 1rem;
    border-radius: 0;
}

.wpcf7-textarea {
    content: "";
    display: inline-block;
    width: 100%;
    color: none;
    border: solid 1px #fff;
    margin-top: 0.3rem;
    margin-bottom: 1rem;
    background: #fff;
    font-size: 1rem;
    border-radius: 0;
}

input[type="checkbox"],
.wpcf7-list-item label input[type="checkbox"] {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    vertical-align: middle;
    cursor: pointer;
    background: #fff !important;
    color: #242020;
    border: 1px solid #242020;
    -webkit-appearance: checkbox;
    margin-left: 0;
}

.check p {
    font-size: 12px !important;
    text-align: left;
    padding: 0rem 0.2rem 0.5rem 0rem;
}

/* Initial state of the animated element */
.animate-text {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s ease;
}

/* State of the element when it's visible */
.animate-text.visible {
    opacity: 1;
    transform: translateX(0);
}

.animate-text {
    transform: translateX(20px);
    /* Less movement */
    transition: all 0.2s ease;
    /* Faster animation */
}

.impresszum {
    margin: 8rem 0;
    overflow: hidden;
}

.impresszum ul li {
    padding: 1rem 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.impresszum p {
    padding: 0.25rem 1rem;
}

.page {
    margin-top: 4rem;
}

.advs ul {
    padding-bottom: 1rem;    
}
.advs ul li {
    padding:0.5rem 0 0.5rem 1rem;
   margin:0.5rem 0 0.5rem 0;
}
.advs ul li:nth-of-type(1), .advs ul li:nth-of-type(3) {
   background:rgba(184, 204, 192, 0.6);
}
.advs ul li:nth-of-type(2), .advs ul li:nth-of-type(4) {
   background: rgba(240, 235, 227, 0.6);
}

@media screen and (max-width: 1400px) and (min-width: 1300px) {

    .hero-text {
        max-width: 50%;
    }

}

@media screen and (max-width: 1299px) and (min-width: 1180px) {
    
    .hero-text {
        max-width: 50%;
    }

}

@media screen and (max-width: 1179px) and (min-width: 1050px) {

    .hero-text {
        max-width: 40%;
    }

}

@media screen and (max-width: 1049px) and (min-width: 769px) {

    .hero-text {
        max-width: 40%;
    }

}

@media screen and (max-width: 1299px) and (min-width: 1180px) {

    #contact-info,
    #contact-info li {
        margin: 0 auto;
    }

    #footer-menu ul {
        margin: 1rem 0 0 0rem;
    }

    #footer-menu ul li a {
        margin: 0 0.6rem 0.5rem 0.6rem;
        text-transform: uppercase;
    }

    #footer-menu ul {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;
        overflow: hidden;
        clear: both;
    }

    .textwidget,
    .textwidget-inverse,
    .testimonial {
        padding: 2rem 0 2rem 0;
    }

    .hero-text {
        margin-top: 3rem;
        margin-left: 0;
    }
    .hero-content {
    width: auto;
    height: 550px;
    }

    .portrait img {
        margin: 0rem 0 0 3.5rem;
        height: 700px;
    }

    .about-text {
        padding: 0 1rem 1rem 0;
    }

    .place {
        margin-bottom: 0;
    }

    .place .row .col-1-2:nth-of-type(2) {
        margin: 0 0 0 0;
    }

    .place .col-1-2 {
        width: 100%;
    }

    .place:after {
        height: 460px;
        bottom: -1rem;
    }

    .types {
        margin: 0 0 0 0;
        padding: 4rem 0 2rem 0;
    }

    #service1 {
        height: auto;
    }

    #serviceother {
        width: 58%;
        margin-left: 0.9rem;
    }

    #service2 h3:after,
    #service3 h3:after,
    #service4 h3:after {
        height: 1px;
        left: 58%;
    }

    #service5 div,
    #service6 div,
    #service7 div {
        max-width: 55%;
    }

    .service-text {
        margin: 1rem 0 0 2rem;
        text-decoration: none !important;
    }

    .testi-pictures {
        margin: 2rem 0 0 0;
        padding: 0;
    }

    #services {
        margin: 4rem 0 0 0;
    }

    .textwidget .col-1-2 img {
        max-width: 450px;
        margin: 2rem 0 0 6rem;
        padding-left: 1rem;
    }

    #brown1 {
        width: 400px;
        right: -3rem;
    }

    .step {
        width: 250px;
        height: 250px;
        padding: 3.5rem 1rem;
    }

    .steps {
        margin: 0 auto;
    }

    .process {
        margin: 8rem 0 0 0;
        padding: 3rem 0 2rem 0;
    }

    .foot-services {
        padding: 0 0 0 7rem;
    }

    .profile-text {
        padding: 1rem 1rem 2rem 0;
    }

    . {
        height: 400px;
        width: auto;
        margin: 1rem 0 0 3.5rem;
    }

    .profile-photo2 {
        height: 700px;
        width: auto;
        margin: 1rem 4rem 0 0;
    }

    .profile-text2 {
        padding: 1rem 0 2rem 0;
    }

    #divider1 {
        width: 100%;
        height: 460px;
        background: url(../img/lines6.svg) center left no-repeat;
        background-size: cover;
        margin-top: -10rem;
    }

    .theprocess {
        margin: 1rem 0;
        padding: 4rem 0;
    }

    .theprocess .process,
    .place2 {
        margin: 3rem 0 1rem 0;
    }

    .place-text,
    .left {
        padding: 1rem 2rem 0 0;
    }

    .right img {
        margin: 4rem 0 0 0 !important;
        width: 500px;
        height: auto;
    }

    #green3 {
        width: 80%;
        height: 640px;
        padding-top: 1rem;
    }

    .theprocess:after {
        bottom: -3.5rem;
    }

    .frame {
        padding: 3rem 0 3rem 0;
    }

    #gyakori {
        background: #b8ccc0;
        margin: 2rem 0 4rem 0;
        padding: 3rem 0 3rem 0;
    }

    .textwidget-inverse .col-1-2 img {
        max-width: 450px;
        margin-top: 2rem;
    }

    #service-text {
        margin-top: 30%;
        width: 100%;
    }

    #service-intro {
        margin: -6rem 0;
        padding: 0 0 4rem 0;
    }

    .service-text2 {
        margin: 1rem 0 2rem 2rem;
        padding: 1rem 0rem 3rem 1rem;
    }

    .service-photo img {
        max-width: 450px;
        height: auto;
        padding: 1rem;
        margin: 0 auto 0 auto;
    }

    .service-photo img {
        margin-left: -4rem;
    }

    #green4 {
        width: 50%;
    }

    #care .row .col-2-1 {
        width: 60%;
    }

    .col-2-2 {
        background-size: contain;
    }

    #ablauf {
        padding: 4rem 0;
    }

    .how h4 {
        padding: 2rem 1rem;
    }

    .inner-text {
        margin-top: -8rem;
    }

    #before-after {
        margin: 0rem 0;
        padding: 2rem 0;
    }

    #price-list {
        margin: 0 0 0 0;
    }

    #testi1 {
        margin: 2rem 0 0 0rem;
    }

    #testi2 {
        margin: -12rem 0 0 1rem;
    }

    .divider {
        height: 500px;
    }

    .contact-data {
        margin: 2rem 0;
        padding: 3rem 0;
    }

    #maps {
        margin: 2rem 0;
        padding: 0;
    }

    #entry {
        right: 0;
        top: 0;
        padding: 1rem;
    }
}

@media screen and (max-width: 1179px) and (min-width: 769px) {
    #footer-menu ul {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;
        overflow: hidden;
        clear: both;
        margin: 1rem 0 0 0rem;
    }

    #footer-menu ul li a {
        margin: 0 1rem 0 1rem;
        text-transform: uppercase;
    }

    #footer-menu ul li {
        padding: 0.5rem 0;
    }

    #contact {
        margin: 1rem 0 0.5rem 0;
        width: 100%;
    }

    #contact-info {
        margin: 0 auto;
    }

    #contact-info li {
        margin: 0 2rem 1rem 1rem;
    }

    #contact-info li:last-of-type {
        display: none;
    }

    .textwidget,
    .textwidget-inverse {
        padding: 2rem 0 2rem 0;
    }

    .testimonial {
        padding: 4rem 0 2rem 0;
    }

    .hero-content {
        margin-left: -8rem;
         width: auto;
    height: 550px;
    }

    .hero-text {
        margin-top: 10rem;
        margin-left: 5rem;
    }

    #green1 {
        width: 330px;
        height: 700px;
        right: -3.5rem;
    }

    .portrait img {
        margin: 0rem 0 0 3.5rem;
        height: 600px;
    }

    .about-text {
        padding: 0 1rem 1rem 0;
    }

    .place {
        margin-bottom: 0;
    }

    .place .row .col-1-2:nth-of-type(2) {
        margin: 2rem 0 0 0;
    }

    .place .col-1-2 {
        width: 100%;
    }

    .place:after {
        height: 460px;
        bottom: -1rem;
    }

    .types {
        margin: 0 0 0 0;
        padding: 2rem 0 2rem 0;
    }

    #service1 {
        height: auto;
    }

    #serviceother {
        width: 57%;
        margin-left: 0.9rem;
    }
    #service1 h3 {
      padding:  0.7rem 0 0.5rem 0;
        margin: 0.3rem 0 0 0;
    }

    #service2 h3:after,
    #service3 h3:after,
    #service4 h3:after {
        height: 1px;
        left: 88%;
        bottom: 28px;
    }

    #service5 img,
    #service6 img,
    #service7 img {
        width: auto;
        height: 200px;
    }

    #service5 div,
    #service6 div,
    #service7 div {
        max-width: 54%;
        padding-left: 30px;
        padding-top: 0;
        padding-bottom: 1rem;
        margin-top: 0.2rem;
    }

    .service-text {
        margin: 1rem 0 0 1rem;
        text-decoration: none !important;
    }

    .service-text h3:after {
        bottom: 18px;
        right: -17%;
        width: 35px;
        height: 1px;
    }

    #service1,
    #service2,
    #service3,
    #service4 {
        padding: 0.5rem 1.3rem;
    }

    .testimonial h2:after {
        bottom: -5rem;
        right: -18rem;
    }

    .testi-text {
        font-size: 20px;
    }

    .testi-pictures {
        margin: 2rem 0 0 0;
        padding: 0;
    }

    #services {
        margin: 2rem 0 0 0;
    }

    .textwidget .col-1-2 img {
        max-width: 420px;
        margin: 2rem 0 0 3rem;
        padding-left: 2rem;
    }

    #brown1 {
      width: 350px;
    right: -2rem;
    height: 480px;
    top: 2rem;
    }

    .step {
        width: 210px;
        height: 210px;
        padding: 3rem 1rem;
    }

    .steps {
        margin: 0 auto;
    }

    .process {
        margin: 8rem 0 0 0;
        padding: 3rem 0 2rem 0;
    }

    .foot-services {
        padding: 0 0 0 7rem;
    }

    .profile-text {
        padding: 1rem 1.5rem 2rem 0;
    }

    .profile-photo {
        height: 300px;
        width: auto;
        margin: 1rem 0 0 1rem;
    }

    .profile-photo img {
        padding-left: 1rem;
    }

    .profile-photo2 {
        height: 500px;
        width: auto;
        margin: 1rem 0 0 0;
    }

    .profile-text2 {
        padding: 1rem 0 2rem 2.5rem;
    }

    #divider1 {
        width: 100%;
        height: 300px;
        background: url(../img/lines6.svg) center left no-repeat;
        background-size: cover;
        margin-top: -10rem;
    }

    .theprocess {
        margin: 1rem 0;
        padding: 4rem 0;
    }

    .theprocess .process {
        margin: 3rem 0 1rem 0;
    }

    .place2 {
        margin: 3rem 0 4rem 0;
    }

    .place-text,
    .left {
        padding: 0 2rem 0 0;
    }

    .white-bg-left {
        padding: 2rem 5rem 3rem 5rem;
    }

    .right img {
        margin: 4rem 0 0 0 !important;
        width: 400px;
        height: auto;
    }

    .textwidget .right {
        margin: 0 auto !important;
    }

    #green3 {
        width: 80%;
        height: 550px;
        padding-top: 1rem;
    }

    .theprocess:after {
        bottom: -3.5rem;
    }

    .frame {
        padding: 3rem 0 3rem 0;
    }

    #gyakori {
        background: #b8ccc0;
        margin: 2rem 0 4rem 0;
        padding: 3rem 0 3rem 0;
    }

    .textwidget-inverse .col-1-2 img {
        max-width: 380px;
        margin-top: 2rem;
        padding-right: 3rem;
        margin-left: -1rem !important;
    }

    .service {
        width: auto;
        height: 600px;
        margin-left: -4rem;
    }

    .service h1 {
        margin: 0 0 0 4rem;
    }

    #service-text {
        margin-top: 8%;
        width: 100%;
        margin-left: 4rem;
    }

    #service-intro {
        margin: -6rem 0;
        padding: 0 0 4rem 0;
    }

    .service-text2 {
        margin: 1rem 0 2rem 0;
        padding: 1rem 0 3rem 0;
    }

    .service-photo img {
        max-width: 380px;
        height: auto;
        padding: 1rem;
        margin: 0 auto 0-4rem;
    }


    .pic-right {
        width: 200px;
        height: auto;
    }

    .pic-left {
        width: 200px;
        margin: -9rem 0 0 2rem;
    }

    #green4 {
        width: 36%;       
    height: 480px;   
    top: 0rem;
    left: -0.5rem;
      }

    #care .row .col-2-1 {
        width: 60%;
    }

    .col-2-2 {
        background-size: contain;
    }

    #ablauf {
        padding: 4rem 0;
    }

    .how h4 {
        padding: 2rem 1rem;
    }

    .inner-text {
        margin-top: 8rem;
    }

    .below {
        margin-top: -4rem;
    }

    #before-after {
        margin: 0rem 0;
        padding: 2rem 0;
    }

    #price-list {
        margin: 0 0 0 0;
    }

    #price-list ul li:before {
        top: 10px;
    }

    .smile {
        margin-top: 8rem;
    }

    #price-list .content-box {
        margin-top: -4rem;
    }

    #testi1 {
        margin: 3rem 0 0 0;
    }

    #testi2 {
        margin: -10rem 0 0 1.5rem;
        padding-bottom: 0;
    }

    .divider {
        height: 500px;
    }

    .contact-data {
        margin: 2rem 0;
        padding: 3rem 0;
    }

    .contact-data .row div {
        width: 100%;
    }

    .contact-data .row img {
        width: 80px;
        height: 80px;
        display: block;
        margin: 3rem auto 2rem auto;
    }

    #maps {
        margin: 2rem 0;
        padding: 0 0 2rem 0;
    }

    #entry {
        right: 0;
        top: 1rem;
        width: 200px;
    }

    .container {
        width: 280px;
        height: 200px;
    }
}

@media screen and (min-width: 769px) {
    .is-mobile {
        display: none;
    }

    .is-hidden-mobile {
        display: inherit;
    }
}

@media screen and (max-width: 768px) {
    .is-mobile {
        display: inherit;
    }

    .is-hidden-mobile {
        display: none;
    }

    #top {
        padding: 1rem 0;
    }

    #logo {
        padding-top: 1.2rem;
        width: 200px;
    }

    #contact-info {
        display: inline-block;
        width: 100%;
        margin-right: 0;
        text-align: left;
        line-height: 1.2;
    }

    header {
        text-align: center;
    }

    .column-2,
    .column-3,
    .column-3 > div,
    .column-2 > div,
    #footer-menu ul {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;
        overflow: hidden;
        clear: both;
    }

    .hero-content {
        margin: 5rem 0 2rem 0;
        text-align: left;
        padding: 0;
        width: 100%;
        height: 425px;
        background-position: center;
        background-size: cover;
    }

    .hero-text {
        max-width: 100%;
        padding: 1rem 0.5rem 0 0.5rem;
        margin: 13rem 0 0 0.5rem;
    }

    #logo-footer img {
        width: 200px;
        height: auto;
    }

    footer {
        background: #f0ebe3;
        padding: 8vw 0 4vw 0;
    }

    #footer-menu ul {
        margin: 0 0 0 -0.4rem;
    }

    #footer-menu ul li,
    #copyright {
        text-align: left !important;
        padding-bottom: 0.2rem;
    }
    
    .foot-services ul {
    margin-top: 0.5rem;
}

    #footer-menu ul li a {
        margin: 0 0.5rem 0 1rem;
        text-transform: uppercase;
    }

    .foot-services ul li {
        margin-bottom: 0.5rem;
    }

    #contact-details {
        padding: 0 0 4rem 0;
    }

    .contact-data {
        margin: 2rem 0 2rem 0;
        padding: 3rem 0;
    }

    .contact-data .row div,
    #service1,
    .about-text,
    .col-1-2 {
        width: 100%;
    }

    .contact-data .row img {
        width: 50px;
        height: 50px;
        display: block;
        margin: 2rem auto 1rem auto;
    }

    .row,
    #service5,
    #service6,
    #service7,
    .testi-pictures {
        display: block;
        overflow: hidden;
        clear: both;
    }

    .about {
        padding: 2rem 0 0 0;
    }

    .portrait {
        width: 100%;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .portrait img {
        margin: 0 auto 0 auto;
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        padding: 1rem;
    }

    #green1 {
        width: 600px;
        height: 100%;
        background-color: #b6c5ba;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .place-photo {
        padding-top: 1rem;
    }

    .place .row .col-1-2:nth-of-type(2) {
        margin: 2rem 0 0 0;
    }

    .place-text,
    .left {
        padding: 2rem 1rem 0 0;
    }

    .place {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #services {
        margin: 0;
        background: #f0ebe3;
        padding: 2rem 0 0 0;
    }

    .types {
        margin: 2rem 0;
        padding: 2rem 0 2rem 0;
    }

    #serviceother {
        width: 100%;
        margin-left: 0rem;
    }
        #service2,
    #service3 {
        margin: 1rem 0;
    }

    #service1 h3:after, 
    #service2 h3:after,
    #service3 h3:after,
    #service4 h3:after,
    #service5 h3:after,
    #service6 h3:after,
    #service7 h3:after {
        display: none;
    }

    #service5 div,
    #service6 div,
    #service7 div,
    #contact {
        max-width: 100%;
    }

    .service-text {
        margin: 2rem 0 0 0;
    }

    .testimonial {
        margin: 0;
        padding: 2rem 0 0 0;
        overflow: hidden;
    }

    .testimonial h2:after {
        width: 200px;
        height: 800px;
        left: 8rem;
        bottom: -3rem;
    }

    .testi-text {
        padding: 2rem 1rem 0 1rem;
        max-width: 100%;
        max-height: 500px;
        margin: 2rem auto 0 auto;
        font-size: 20px !important;
    }

    .testi-text:before {
        width: 350px;
        height: 400px;
        top: -1rem;
    }

    .testi-pictures {
        display: flex;
        max-width: 100%;
        padding: 0;
        margin: 1rem auto 0 auto;
    }

    #testi1 {
        display: none;
    }

    #testi2 {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        padding: 1rem 0;
    }

    .textwidget .col-1-2 img {
        max-width: 100%;
        height: auto;
        margin-left: auto;
        position: static;
        padding: 1rem;
        background: #fff;
    }

    .textwidget-inverse .col-1-2 img {
        position: static;
        background: #fff;
    }

    #brown1 {
        width: 100%;
        height: 380px;
        background-color: #e1d0ba;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
    }

    .steps {
        margin: 1rem 0;
    }

    .process {
        margin: 2rem 0;
        padding: 2rem 0 0 0;
        background: #fff;
    }

    .cta {
        margin: 0;
        padding: 0.5rem;
        overflow: hidden;
    }

    .frame {
        margin: 0.1rem;
        padding: 3rem 0.5rem;
    }

    #form {
        margin: 2rem 0 0 0;
        padding: 0;
    }

    #contact-info li {
        margin-left: 0.5rem;
        margin-right: 1rem;
        padding: 0.3rem 0;
        font-weight: 300;
        display: block;
    }

    #biography {
        margin: 0 0 2rem 0;
    }

    .profile-text {
        padding: 1rem 1rem 2rem 0;
    }

    .profile-photo {
        height: auto;
        width: 100%;
        margin-left: auto;
    }

    .profile-photo2 {
        height: 500px;
        width: 100%;
        margin: 2rem auto 1rem auto;
    }

    .profile-text2 {
        padding: 2rem 0 2rem 0;
    }

    .place2 {
        margin: 1rem 0 0 0;
        background: #f0ebe3;
        padding: 3rem 0;
    }

    .place2 .row {
        margin-top: 0;
    }

    .button-main {
        font-size: 16px;
    }

    #divider1 {
        width: 100%;
        height: 300px;
    }

    #green3 {
        width: 100%;
        height: 370px;
        background-color: #b6c5ba;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        margin-top: 2rem;
    }

    .place-photo2 img {
        padding: 0.2rem 1rem 0 0.3rem;
    }

    .textwidget .col-1-2,
    .left {
        padding-top: 0;
        margin-top: 1rem;
    }

    .white-bg-left,
    .white-bg-right {
        background: #fff;
        padding: 1.5rem 0.5rem 3rem 0.75rem;
        margin: 0 auto;
    }

    .textwidget-inverse .col-1-2 img {
        max-width: 100%;
        margin-right: 0;
        z-index: 1;
        padding: 1rem;
    }

    .theprocess {
        background: #f0ebe3;
        margin: 0;
        padding: 3rem 0 3rem 0;
        position: relative;
    }

    .theprocess .process {
        margin: 2rem 0 1rem 0;
    }

    .step {
        width: 270px;
        height: 270px;
        padding: 4rem 1rem;
        margin: 1rem 1rem 1rem 1rem;
        background: url(../img/circle.svg) center center no-repeat;
        display: inline-block;
        text-transform: uppercase;
    }

    #gyakori {
        background: #b8ccc0;
        margin: 0;
        padding: 3rem 0 2rem 0;
    }

    .faq-page {
        width: 95%;
        line-height: 1.3;
    }

    .faq-page:after {
        top: 1px;
        right: -12px;
    }

    .inner-header {
        margin: 15rem 0 0 0;
    }

    .textwidget.below {
        padding-top: 2rem;
    }

    .textwidget,
    .textwidget-inverse {
        padding: 0;
        position: relative;
    }

    .textwidget-inverse h2 {
        margin: 2rem 0 1rem 0;
    }

    .container {
        width: 100%;
        height: 250px;
    }

    .service-photo img {
        padding: 1rem;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    #service-intro {
        margin: 2rem 0;
        padding: 0;
    }

    .service {
        width: auto;
        height: 660px !important;
    }

    #service-text {
        margin-top: -2rem;
        width: 100%;
        padding: 3.5rem 0 0 0;
    }

    #green4 {
        width: 100%;
        height: 445px;
        background-color: #b6c5ba;
        position: absolute;
        top: 0;
        left: 0;
    }

    .service-text2 {
        margin: 0 0 2rem 2rem;
        padding: 2rem 3rem 0 6rem;
    }

    .partners {
        margin: 2rem 0;
    }

    .partner-logo {
        width: 100%;
        margin: 1rem auto 0 auto;
        text-align: center;
        padding: 0 1rem;
    }

    .partners h2,
    .partners p,
    .cta h2,
    .cta p,
    .cta,
    .frame .content-box,
    #form p,
    #form h2 {
        text-align: left !important;
    }

    .cta .button-main {
        margin-left: 0 !important;
    }

    .brown {
        margin: 1rem 0 2rem 0;
        padding: 3rem 0 2rem 0;
    }

    .white {
        margin: 1rem 0 2rem 0;
        padding: 3rem 0 2rem 0;
    }

    .pic-right,
    .pic-left {
        width: 98%;
        height: auto;
        float: none;
        margin: 0 auto 2rem auto;
        padding: 1rem;
        background: #fff;
    }

    .col-2-1 {
        width: 100% !important;
    }

    .col-2-2 {
        width: 100%;
        height: 300px;
        margin: 1rem auto;
        background-size: contain;
    }

    #care {
        margin: 0;
        padding: 2rem 0;
    }

    #care .row {
        margin: 0 auto;
    }

    #ablauf {
        margin: 4rem 0 2rem 0;
        padding: 4rem 0 2rem 0;
    }

    .how p {
        padding: 1rem 0 0 0;
    }

    .how h4 {
        background: none;
    padding: 1rem 0.4rem;
}

.inner-text {
    margin-top: -5rem;
}

.port {
    margin-top: 1rem !important;
    text-align: left !important;
    margin-left: -10px;
    line-height: 1.19 !important;
}

.smile {
    margin-top: 22rem !important;
    text-align: left !important;
}

#before-after {
    margin: -2rem 0 2rem 0;
    padding: 0 0 2rem 0;
}

#portfolio {
    background: #fff;
    padding: 0 0 2rem 0;
    margin-top: 4rem;
}


#price-list .content-box:nth-of-type(1) {
    padding: 2rem 0 2rem 1rem;
    background: #fff;
    margin-top: -10rem;
}

#price-list .content-box {
    padding: 2rem 0 2rem 1rem;
    background: #fff;
    margin-top: -2rem;
}

.divider {
    height: 150px;
    margin-top: -8rem;
    background-image: none;
}

#maps {
    margin: 2rem 0;
    padding: 0 0 2rem 0;
}

#entry {
    width: 100%;
    height: auto;
    position: static;
    margin-top: -4rem;
}

#frame {
    display: none;
}

#ordination {
    background: #b8ccc0;
    padding: 1rem;
    margin-top: 2rem;
    border: 2px solid #242020;
    text-align: left !important;
}

#time {
    margin: 0 0 2rem 0;
}

#contact-info li:nth-of-type(1):before,
#contact-info li:nth-of-type(2):before,
#contact-info li:nth-of-type(3):before {
    display: none;
}

input[type="email"],
input[type="text"],
input[type="tel"] {
    width: 100%;
}

.animate-text {
    transform: translateX(20px);
    /* Less movement */
    transition: all 0.2s ease;
    /* Faster animation */
}

.impresszum {
    margin: 0;
    overflow: hidden;
}

.impresszum ul li {
    display: block;
}

.impresszum p {
    padding: 0.5rem 0;
}

.page {
    margin-top: 0;
}

.invisible {
    display: none;
}

.title {
    margin-top: 5rem !important;
}

.titles {
    margin-top: 5rem !important;
    margin-left: -15px;
}

.comparison {
    width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0 4rem 0;
}

.compare {
    display: block;
}

.comparing {
    margin: 0 auto;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    position: relative;
}

.c0 {
    width: 100%;
    padding: 0.5rem 0.15rem 0.5rem 1rem;
    margin: 0 auto;
    position: absolute;
    top: 13.2rem;
    left: 0;
    z-index: 3;
}

.c1 {
    width: 100%;
    padding: 0.5rem 0.15rem 0.5rem 1rem;
    margin: 0 auto;
    position: absolute;
    top: 28.2rem;
    left: 0;
    z-index: 3;
}

.c2 {
    width: 100%;
    padding: 0.5rem 0.15rem 0.5rem 1rem;
    margin: 0 auto;
    position: absolute;
    top: 43.2rem;
    left: 0.5rem;
    z-index: 3;
}

.c h5 {
    padding: 0.4rem 0 0 0.5rem;
}
}