/*
Theme Name: Lélek rendje
Theme URI: http://kovacskriszti.com/sajat-theme
Author: Petho-Kovacs Krisztina
Author URI: https://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: lelek-rendje
*/

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

body {
    background: rgba(244, 226, 211, 0.4);
}

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

.hero-content .content-box {
    width: 95% !important;
}

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

    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;
}
}

header {
    position: relative;
    overflow: hidden;
    clear: both;
}
.inner-page header {
    overflow: visible!important;
    z-index:3;
}

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

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

#menu {
    background: #FAE5DC;
    padding: 0.7rem 0 0.7rem 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

nav ul {
    float: right;
    display: block;
    margin: 1rem 0 1rem 1rem;
}

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

nav ul li :nth-of-type(4) {
    margin: 0 0 0 0 !important;
}

nav ul li a {
    text-decoration: none !important;
    text-transform: uppercase !important;
    color: #260708;
    display: block;
    padding: 0.6rem 1.2rem 0.6rem 1.2rem;
    position: relative;
    list-style-type: none;
    text-decoration: none;
}

nav ul li a:hover, #footer-menu ul li a:hover {
    font-weight:bolder;
    transition: 0.2s ease;
}

#logo {
    width: 80px;
    height: 80px;
    margin: 0 0 0 6rem;
    display: inline-block;
}
 #szomatologo {
    width: 160px;
    height: 60px;
    margin: 1rem 4rem 0 1rem;
    display: inline-block;
     float: right;
}

#logo img, #szomatologo img {
    padding: 0.2rem 0 0.5rem 0;
}

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

.my_carousel {
    position: absolute;
    top: 5.8rem;
    left: 0;
}

.item {
    max-height: 800px;
    width: auto;
}

.item img {
    width: 100%;
    height: auto;

}

.picture-one img,
.picture-two img,
.cs-picture-one img,
.e-picture-one img {
    width: 100%;
    height: auto;
    border-radius: 30px;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border: 3px solid rgba(255, 255, 255, 0.5);
    margin-top: 3rem;
}

.border {
    background-color: rgba(255, 255, 255, 0.6);
    margin: 1rem;
    padding: 1rem 2rem 2rem 2rem;

}

.hero-text {
    padding: 3rem 0 0 0;
}

.cta-buttons {
    margin-top: 1.5rem;
}

.button-main {
    display: inline-block;
    margin: 2rem 0.5rem;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    text-transform: uppercase !important;
    background: #260708;
    padding: 0.6rem 1rem 0.6rem 1rem;
    border: 1px solid #260708;
}

.button-main:hover,
.button-white:hover {
    background: none;
    border: 1px solid #260708;
    color: #260708;

}

.button-secondary {
    display: inline-block;
    margin: 2rem 0.5rem;
    color: #260708;
    text-decoration: none;
    border-radius: 30px;
    text-transform: uppercase !important;
    background: none;
    border: 1px solid #260708;
    padding: 0.6rem 1rem 0.6rem 1rem;
}

#where .cta-buttons .button-secondary {
    margin: 2rem 0.5rem;
}

.button-pink {
    display: inline-block;
    margin: 2rem 0.5rem;
    color: #260708;
    text-decoration: none;
    border-radius: 30px;
    text-transform: uppercase !important;
    background: #efc8be;
    border: 1px solid #efc8be;
    padding: 0.6rem 1rem 0.6rem 1rem;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);

}

.button-secondary:hover {
    border: 1px solid #f5d2bf;
    background: #f5d2bf;
}

.button-pink:hover {
    border: 1px solid #efc8be;
    background: #fff;
}

.events-intro,
#choose {
    padding: 8rem 2rem 16rem 2rem;
    background: url(/wp-content/themes/lelek-rendje/img/events_intro_bg.png) center center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    clear: both;
}

.layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(245, 210, 191, 0.9);
    z-index: 0;
    padding: 3rem 0 5rem 0;

}


.button-white {
    display: inline-block;
    margin: 2rem 1.5rem 0.5rem;
    color: #260708;
    text-decoration: none;
    border-radius: 30px;
    text-transform: uppercase !important;
    background: #fff;
    padding: 0.6rem 1rem 0.6rem 1rem;
    border: 1px solid #fff;
    font-size: 17px;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

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

}

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

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

#about-intro {
    background: #fff;
    padding: 6vw 0 8vw 0;

}

#about-intro .column-2 {
    padding: 6rem 0 10rem 0;
    position: relative;
}

.text .upper-text {
    position: relative;
}

.text .upper-text p:after {
    content: "";
    position: absolute;
    top: 14px;
    display: inline-block;
    width: 400px;
    height: 10px;
    vertical-align: middle;
    left: 67%;
    border-top: 1px solid #260708;
    display: none;
}

.text .button-secondary {
    margin-top: 1.5rem;
}

.picture {
    position: relative;
    padding-left: 10%;
    padding-bottom: 10%;
}

.r-picture {
    position: relative;
    padding-right: 10%;
    padding-bottom: 5%;
}

.picture-one {
    width: auto;
    height: 200px;
    position: absolute;
    top: -10%;
    right: 2%;

}

.picture-two {
    width: 350px;
    height: auto;
    position: absolute;
    top: 60%;
    left: 7%;
}

#about-intro .picture-two {
    display: none;
}

#service-intro {
    background: #fae5dc;
    padding: 6vw 0 4vw 0;
}

.subpage-list {
    margin: 2rem 0 2rem 0;
    padding: 4rem 0 2rem 0;
}


.square {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
}

.subpage-thumbnail {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    display: block;
    padding: 1rem;
    margin-right: 2rem;
    border: 5px solid #fff;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

.subpage-item {
    width: 350px;
    height: auto;
    position: relative;
    margin: 0 1rem 4rem 1rem;
    padding: 0 2rem 0 2rem;

}

.subpage-title {
    margin: 2rem 0 4rem 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    font-size: 1.3rem;
    background: #efc8be;
    border-radius: 30px;
    text-decoration: none !important;
    display: inline-block;
    padding: 0.6rem 1rem 0.8rem 1rem;
    border: 1px solid #efc8be;
    color: #260708 !important;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

#request {
    background: #fff;
    padding: 2vw 0 6vw 0;
}

.r-picture-one {
    width: auto;
    height: 180px;
    position: absolute;
    top: -15%;
    left: 15%;
}

.r-picture-two {
    width: 400px;
    height: auto;
    position: absolute;
    top: 45%;
    left: 5%;
}
.white-lotus {
    width: 650px;
    height: auto;
    position: absolute;
    top: -5%;
    left: -2%;
}
.white-lotus img {
    width:100%;
    height: auto;
    display: block;
}

#request .column-2:nth-of-type(1) {
    padding: 8rem 0 4rem 0;
}

#request .column-2:nth-of-type(2) .text {
    margin-top: 3rem;
}

.metamorf {
    width: auto;
    height: 450px;
    margin-top: 0;
    margin-left: 3rem;
    border-radius: 30px;


}

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.cta-buttons .button-white {
    margin: 0 auto;
}

#choose .layer p {
    padding: 0 6rem 0 6rem;
}

.vertical {
    position: relative;
    overflow: hidden;
    clear: both;
}

.line {
    content: "";
    position: absolute;
    top: 15%;
    display: inline-block;
    height: 60px;
    vertical-align: middle;
    left: 50%;
    border-left: 2px solid #260708;
    margin-top: 1.2rem;
}

.testimonials {
    background: url(/wp-content/themes/lelek-rendje/img/lotus_bg.png) top center no-repeat;
    background-size: cover;
    padding: 6vw 0 8vw 0;

}

.testi {
    margin: 4rem 15rem 2rem 15rem;
}

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

#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;
}

.footer-icon {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-right: 0.5rem;
}

.legal {
    margin-top: 1rem;
}

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

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

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

.testimonial-slider-wrapper {
    display: flex;
    overflow: hidden;
}

.testimonial-item {
    flex: 0 0 100%;
    display: none;
}

.testimonial-item:first-child {
    display: block;
}


.inner-page {
    padding: 1vw 0 10vw 0;
    background: rgba(244, 226, 211, 0.4);
    position: relative;
}

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

#about-introduction {
    padding: 2vw 0 4vw 0;
}

#about-introduction .column-2 {
    padding: 4rem 0 12rem 0;
}

#about-introduction .column-2:nth-of-type(2) {
    margin-top: 2rem;
    padding: 4rem 0 14rem 0;
}

#about-introduction .text .upper-text p:after {
    width: 300px;
    left: 42%;
}

.r-picture-one {
    position: absolute;
    top: -5%;
    right: 2%;
    z-index: 2;

}

.r-picture img,
.m-picture img,
#morning .picture-one img,
#morning .picture-two img,
.cs-picture-one img,
.cs-picture-two img,
.cs-picture-three img,
.e-picture-one img,
.contact-img img,
.szom-picture-one img {
    border-right: 5px solid #efc8be;
    border-top: 5px solid #efc8be;
    border-bottom: 5px solid #efc8be;
    background-color: 5px solid #efc8be;
    border-radius: 70px;
    padding: 10px;
}

.s-header-pic img,
.service-img {
    border-left: 5px solid #efc8be;
    border-top: 5px solid #efc8be;
    border-bottom: 5px solid #efc8be;
    background-color: 5px solid #efc8be;
    border-radius: 70px;
    padding: 10px;
}

.a-picture-one {
    width: 420px;
    height: 520px;
    position: absolute;
    top: -5%;
    right: 22%;
    z-index: 2;

}

.a-picture-two {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 87%;
    left: 2%;
    z-index: 3;
}

.pink-lotus, .rose-tree {
    position: relative;
    margin-top: 8rem;
}

.pink-lotus img  {
    position: absolute;
    width: 400px;
    height: 500px;
    bottom: -5%;
    right: -2%;
}
.rose-tree img {
    position: absolute;
    width: 400px;
    height: 500px;
    top: -280px;
    right: 45%;
    
}

#journey {
    background-color: rgba(250, 229, 220, 0.5);
    border: 1px solid rgba(250, 229, 220, 0.5);
    border-radius: 20px;
    padding: 6vw 0 6vw 0;
    margin: 0 3rem 0 3rem;

}

#journey .text .upper-text p:after {
    left: 25% !important;
}

#timeline {
    margin-top: 3rem;
    background-color: #fff;
    padding: 4rem 2rem 4rem 2rem;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

#timeline ul {
    margin: 2rem 0 0 2rem;
    border-left: 2px solid #f5d2bf;
    padding: 0 0 1rem 0.8rem;
}

#timeline ul:before {
    position: absolute;
}

#timeline ul li {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 0.5rem;
}

#timeline ul li:before {
    background: #f5d2bf;
    content: "";
    position: absolute;
    top: 7px;
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border-radius: 50%;
    line-height: 1;
    left: -23px;
}

#mission {
    margin-top: 3rem;
    background-color: #f5d2bf;
    padding: 6rem 2rem 12rem 2rem;
}

#mission .column-2 {
    padding: 4rem 0 6rem 0;
}

#mission .column-2:nth-of-type(2) {
    margin-left: 4rem;
}

.m-picture,
.pink-tree {
    position: relative;
    margin-left: 4rem;
}

.m-picture-one {
    width: 420px;
    height: 480px;
    position: absolute;
    top: -5%;
    right: 3%;
    z-index: 2;

}

.m-picture-two {
    width: 350px;
    height: 550px;
    position: absolute;
    top: 40%;
    left: 15%;
    z-index: 3;
}

.mission-text {
    z-index: 2;
}

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

.pink-tree {
    position: absolute;
    bottom: -30%;
    left: -20%;
    z-index: 1;
}

.pink-tree img {
    width: 650px;
    height: 550px;

}

.cta .upper-text p:after {
    display: none;
}

.cta,
.gallery {
    background-color: #f4d9d2;
    padding: 4rem 4rem 4rem 4rem;
}

.gallery-line {
    margin: 0 -8rem 0 -8rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: 8px solid #efc8be;
}

.gallery-line img {
    width: 20%;
    height: auto;
}

#services-header {
    background: #f4e2d3;
    padding: 0 0 8vw 0;
}

#services-header .column-2 {
    padding: 4rem 0 8rem 0;
    justify-content: flex-start !important;

}

.s-header-pic {
    position: relative;
    display: block;
    width: 400px;
    padding-bottom: 20rem;
}

.s-header-pic img {
    width: 370px;
    height: 480px;
    margin: 2rem 0 0 7rem;
    position: absolute;
    z-index: 2;
}

.box {
    position: relative;
    display: inline-block;
}

.s-header-text {
    position: absolute;
    left: 37%;
    background-color: #fff;
    padding: 4rem 1rem 4rem 5rem;
    border-radius: 30px;
    z-index: 1;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);

}

#morning {
    background-color: #f5d2bf;
    padding: 4rem 0 4rem 0;
}

#morning .text {
    padding: 4rem 0 4rem 0;
}

#morning .text .upper-text p:after {
    left: 77%;
}

#morning .picture .picture-one {
    top: 5%;
}

#morning .picture-two {
    width: 450px;
    height: auto;
    position: absolute;
    top: 65%;
    left: 15%;
}

#theservices {
    background-color: #fae5dc;
    padding: 6rem 0 4rem 0;
}

.services,
.basic-content {
    margin: 6rem 0 2rem 0;
}

.services a {
    text-decoration: none !important;
    color: #260708 !important;
}

.servicee {
    margin: 0 0 4rem 0;
    background: #fff;
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 30px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

.service-img {
    width: 300px;
    height: auto;
    position: relative;
    margin: 0;
    padding: 1rem;
    text-decoration-line: none !important;
    border-radius: 20px;
}

.service-number {
    left: 3% !important;
    font-size: 2rem !important;
    border-radius: 20% !important;
    padding: 0.5rem !important;
}

.service-title {
    margin: 1.5rem 0 1rem 2rem;
    text-decoration: none !important;
    position: relative;
    max-width: 70%;

}

.service-title h5 {
    background: #f5d2bf;
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    display: inline-block;
}

.service-intro .button-pink {
    margin: 1rem 0 1rem 0;
}

#gyakori-qa {
    margin: 2.5rem 0 0 0;
}

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

}


.faq-page:hover {
    background-color: #F9F9F9;
}


.faq-body {
    margin: 0.5rem 0 1.5rem 0;
    display: none;
    transition: 0.6s;
}

.faq-page:before {
    content: '+';
    height: 20px;
    width: 20px;
    color: #f2afa2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    left: -25px;
}

.active:before {
    content: '-';
    height: 20px;
    width: 20px;
    color: #000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    left: -25px;
}

#csaladallitas-intro {
    margin-top: -0.5rem;
    background: rgba(244, 226, 211, 0.4);
}

#csaladallitas-intro .text,
#event-intro .text {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    background: #fff;
    border-radius: 30px;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

.csaladall-header {
    margin: 3rem 1rem 4rem 3rem;
    width: 80%;
}

.events-header {
    margin: 3rem 1rem 4rem 3rem;
    width: 65%;
}

.events-header p {
    padding-right: 2rem;
}

.cs-picture,
.e-picture {
    width: 40%;
    height: auto;
    position: relative;
}

.cs-picture-one,
.e-picture-one,
.szom-picture-one {
    position: absolute;
    margin-top: -0.5rem;
    right: 0.5rem;
}



.space {
    margin-bottom: 1rem;
}

.cs-picture-one img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    margin-top: 1rem;
}

.e-picture-one img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    margin-top: 2.5rem;
    margin-left: -0.5rem;
}

.szom-picture-one img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    margin-top: 3.5rem;
    margin-left: -1.5rem;
}

#csaladallitas-body {
    background: rgba(244, 226, 211, 0.4);
    padding: 4rem 2rem 8rem 2rem;
}

.description,
#organisation .text,
.i-table {
    margin-top: 2rem;
    background-color: #fff;
    padding: 4rem 2rem 4rem 3rem;
    border-radius: 30px;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

.description ul {
    margin: 1rem 0 0 1rem;
    ;
}

.description ul li {
    margin-bottom: 1rem;
    position: relative;
}

.description ul li:before {
    background: #f5d2bf;
    content: "";
    position: absolute;
    top: 7px;
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border-radius: 50%;
    line-height: 1;
    left: -23px;
}

#where {
    margin-top: 6rem;
}

.description .cta-buttons {
    margin-top: 0;
    justify-content: flex-start !important;
}

.description .button-pink {
    margin-right: 3rem !important;
}

#process {
    background: url(/wp-content/themes/lelek-rendje/img/rose_cover.png) center center no-repeat;
    background-size: cover;
    padding: 4rem 2rem 6rem 2rem;
}

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

.cs-picture-two {
    position: absolute;
    top: 40%;
    left: 13%;
}

.cs-picture-two img {
    width: 85%;
    height: auto;
    border-radius: 30px;
}

#organisation,
#gyakori,
#table {
    padding: 4rem 0 4rem 0;
    background: rgba(244, 226, 211, 0.4);
}

#organisation .text p {
    padding-right: 2rem;
}

#gyakori .text {
    padding-left: 1rem;
}

#faq-one,
#faq-two,
#faq-three,
#faq-four,
#faq-five,
#faq-six,
#faq-seven,
#faq-eight {
    margin: 0 0 1rem 1.5rem;
}

#event-intro {
    margin-bottom: 4rem;
}

.event-box {
    padding-top: 4vw;
}

.event {
    margin: 0 auto;
    overflow: hidden;
    clear: both;
    text-align: center;
}

.one-event {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding: 1.5rem 1rem 2.5rem 1rem;
    background-color: #fff !important;
    border-radius: 30px;
    filter: drop-shadow(1px 2px 8px var(--shadow-color));
    --shadow-color: hsl(8, 82%, 89%);
}

.one-event-text {
    margin-left: 2rem;
    text-align: left;
    padding: 1rem 2rem 0 0;

}

.one-event-img {
    width: 400px;
}


.one-event-img img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    clear: both;
}

/* .out-of-date * {
color: #999;
}

.out-of-date img {
    filter: grayscale(1);
    opacity: 0.5;
}

*/


.one-event.csaladallitas {
    background-color: #88c6bd;
}

.one-event.szomatodrama {
    background-color: #FAD2CC;
}

.one-event.meseallitas {
    background-color: #00FF00;
}

.one-event.default-class {
    background-color: #f4e2d3;
}

.white-background {
    background-color: #f4e2d3;
    margin-bottom: 4rem;
    padding: 1.5rem;
}

.event-box a,
.contact-texts li {
    text-decoration: none !important;
    color: #260708;
    margin: 1.5rem 0 0 0;
}

.excerpt {
    margin-top: 1rem;
}

.one-event h4 {
    margin-top: 0.3rem;
}

.blog-content {
    margin: -4rem 0 6rem 0;
}

.blog-content-img {
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.blog-content-text {
    margin: 2rem 0 2rem 0;
}

.blog-content-text .smaller {
    margin-bottom: 1rem;
}

#contact-details {
    padding: 2rem 0 6rem;
}

.contact-text {
    margin: 2rem 0 4rem 0;
}

.contact-texts li a,
.contact-texts p {
    text-decoration: none !important;
    color: #260708;
    margin: 0.3rem 0 0 1rem;
}

.contact-img img {
    width: 90%;
    height: auto;
    margin-left: 4rem;
}

.i-table {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 4rem;
}

.i-table h5 {
    margin-bottom: 1rem;
}

#szomatotitle {
     width: 650px;
    height: auto;
    margin: 0 auto 0 auto;
    display: flex;
    justify-content: center;
    padding:4rem 0;
}

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

    header {
        text-align: center;
        background-color: #fae5dc;
    }

    #menu {
        margin-top: 0;
        padding: 0.3rem 0 0.3rem 0;

    }

    #logo {
        margin: 1rem 0 0 2rem;
    }

    .hero-content {
        position: static;
        transform: none;
        border: none;
        margin: 0 0 1.5rem 0;
        text-align: left;
        padding: 0 15px 15px 15px;
    }

    .my_carousel .item-list img {
        margin-top: 2.3rem;
    }

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

    .border {
        margin: 9rem auto 0 auto;
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }

    .cta-buttons {
        margin-top: 1rem;
    }

    .cta-buttons a {
        margin: 0 0 1.3rem 0;
    }

    .events-intro,
    #choose {
        padding: 8rem 1rem 10rem 1rem;
    }

    .layer {
        padding-left: 15px;
        padding-right: 15px;
    }

    #about-intro .column-2 {
        padding: 2rem 0 0 0;
    }

    .picture-one {
        width: 60%;
        height: auto;
        margin-top: -2rem;
    }

    .picture-two {
        width: 50%;
        height: auto;
        margin-top: 2rem;
    }

    .picture {
        padding: 8rem 0 26rem 0;
    }

    .picture-one {
        top: 0;
        right: 2%;
    }

    .picture-two {
        top: 23%;
        left: 4%;
    }

    #about-intro {
        padding: 6vw 0 14vw 0;
    }

    #service-intro {
        padding: 10vw 0 4vw 0;
    }

    .picture {
        padding: 6rem 0 4rem 0;
    }

    .subpage-list {
        margin: 0 auto;
        padding: 2rem 0 0 0;
    }

    .subpage-number {
        top: 0% !important;
        left: 7% !important;
        font-size: 2rem !important;
        border-radius: 20% !important;
        padding: 0.5rem !important;
    }

    .subpage-item {
        width: 350px;
        height: auto;
        position: relative;
        margin: 1rem 1rem 2rem 1rem;
        padding: 0 1rem 0 1rem;
        text-decoration-line: none !important;
    }

    .subpage-title {
        margin: 1.5rem 1rem 2rem 1rem;
        display: block;
    }

    #request .column-2:nth-of-type(1) {
        padding: 0 0 4rem 0;
    }

    .cta-buttons .button-white {
        margin: 0.5rem 0 0.5rem 0 !important;
    }

    #mission .column-2 {
        padding: 4rem 0 16rem 0;
    }

    .m-picture-one {
        width: 320px;
        height: 378px;
    }

    .r-picture-one {
        width: 65%;
        height: auto;
        padding-top: 2rem;
    }

    .r-picture-two {
        width: 55%;
        height: auto;
        padding-top: 2rem;
    }

    .metamorf {
        width: 50%;
        height: auto;
        margin: 1rem 0 0 1rem;
    }

    #request {
        background: #f4d9d5;
        padding: 12vw 0 8vw 0;
    }

    #request .cta-buttons {
        text-align: left !important;
        justify-content: flex-start;
    }

    .testimonials .content-box {
        margin-top: 2rem;
    }

    .vertical,
    .line {
        position: static;
        margin: 1rem 0;
        text-align: center !important;
    }

    .testi {
        margin: 1rem 1rem 2rem 1rem;
    }

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

    #footer-menu ul li,
    #copyright {
        text-align: left !important;
    }

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

    .content-box {
        width: 96%;
    }

    .inner-page #menu {
        margin: 0 0 2rem 0 !important;
    }

    #about-introduction .r-picture-one {
        padding-top: 0;
    }

    .r-picture {
        padding: 0 !important;
    }

    #about-introduction .column-2 {
        padding: 4rem 0 4rem 0;
    }

    #about-introduction .column-2:nth-of-type(2) {
        margin-top: 2rem;
        padding: 4rem 0 14rem 0;
    }

    .a-picture-one {
        width: 360px;
        height: 420px;
        top: -10%;
        right: 10%;
    }

    .a-picture-two {
        top: 67%;
        left: 10%;
    }

    .pink-lotus img {
        width: 300px;
        height: 400px;
        bottom: 40px;
        right: 10%;
    }

    #about-introduction .text .upper-text p:after {
        left: 42% !important;
    }

    #journey .text .upper-text p:after {
        left: 30% !important;
    }

    .m-picture-two {
        top: 65%;
        left: 5%;
    }

    .gallery {
        padding: 1rem 0 2rem 0;
        text-align: center !important;
    }

    .gallery-line {
        margin: 2rem 0 2rem 0;
    }

    .gallery .content-box {
        width: 100%;
    }

    .s-header-pic img {
        margin: 2rem 0 0 5rem;
    }

    .s-header-text {
        margin-top: 2rem;
        left: 40%;
        padding: 4rem 1.5rem 4rem 4rem;
    }

    #morning .text .upper-text p:after {
        left: 90%;
    }

    #morning .picture-two {
        top: 55%;
    }

    #morning .picture-one {
        width: 75%;
        height: auto;
    }

    .cs-picture-one img,
    .e-picture-one img {
        width: 80%;
        height: auto;
        border-radius: 30px;
        margin-left: 4rem;
        margin-top: 0;
    }

    .description .cta-buttons {
        margin-top: 2rem;
    }

    .picture {
        padding: 2rem 0 20rem 0;
    }

    .cs-text .picture {
        padding: 2rem 0 20rem 0;
    }

    .cs-picture-two {
        position: absolute;
        top: 58%;
        left: 5%;
    }

    .cs-picture-two img,
    .cs-picture-three img {
        width: 90%;
        height: 90%;
        border-radius: 30px;
        margin-left: 4rem;
    }

    .szom-picture-one img {
        margin-left: 0 !important;
    }

    #footer-menu ul {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;
        overflow: hidden;
        clear: both;
    }
    #szomatologo {
    width: 130px;
    height: 40px;
    margin: 0.2rem 0rem 0 1rem;
    display: inline-block;
     float: right;
}
        #szomatotitle {
    width: 400px;
    height: auto;
    margin: 0 auto;
   }
}


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


    header {
        text-align: center;
        background-color: #fae5dc;
    }

    #menu {
        margin-top: 0;
        padding: 0.3rem 0 0.3rem 0;

    }

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

    .hero-content {
        position: static;
        transform: none;
        border: none;
        margin: 5rem 0 1.5rem 0;
        text-align: left;
        padding: 0 15px 15px 15px;
    }

    .my_carousel .item-list img {
        margin-top: 6.3rem;
    }

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

    .border {
        margin: 0 auto;
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }

    .cta-buttons {
        margin-top: 1rem;
    }

    .cta-buttons a {
        margin: 0 0 1.3rem 0;
    }

    .events-intro,
    #choose {
        padding: 8rem 1rem 12rem 1rem;
    }

    .layer {
        padding-left: 15px;
        padding-right: 15px;
    }

    #about-intro .column-2 {
        padding: 2rem 0 0 0;
    }

    .picture-one,
    .picture-two {
        width: 80%;
        height: auto;
        margin: 3rem 0 4rem 0;
    }

    .r-picture-one,
    .r-picture-two {
        width: 95%;
        height: auto;
        margin: 2rem 0 4rem 0;
    }

    .picture {
        padding: 8rem 0 28rem 0;
    }

    .picture-one {
        top: 0;
        right: 2%;
    }

    .picture-two {
        top: 40%;
        left: 6%;
    }

    .r-picture-one {
        top: 0;
        left: 0%;
    }

    .r-picture-two {
        top: 40%;
        left: -2%;
    }

    #request .text {
        margin: 4rem 0 0 1rem;
    }

    .text .upper-text p:after {
        width: 300px;
        left: 95%;
    }

    #request .column-2:nth-of-type(2) > div {
        display: block;
        width: 100%;
    }

    #about-intro {
        padding: 6vw 0 14vw 0;
    }

    #service-intro {
        padding: 10vw 0 4vw 0;
    }

    .subpage-list {
        margin: 0 auto;
        padding: 2rem 0 0 0;
    }

    .subpage-item {
        width: 350px;
        height: auto;
        position: relative;
        margin: 1rem 0 1rem 0;
        padding: 0 1rem 0 1rem;
        text-decoration-line: none !important;
    }

    .subpage-number {
        top: 0% !important;
        left: 7% !important;
        font-size: 2rem !important;
        border-radius: 20% !important;
        padding: 0.5rem !important;
    }

    .subpage-title {
        margin: 1rem 0.5rem 1rem 0.5rem;
        display: block;
        font-size: 1rem;
    }

    #request .column-2:nth-of-type(1) {
        padding: 0 0 0 0;
    }

    .cta-buttons .button-white {
        margin: 1rem 0 1rem 0 !important;
    }

    .metamorf {
        width: auto;
        height: 400px;
        margin: 2rem 0;
    }

    .testi {
        margin: 4rem 2rem 2rem 2rem;
    }




    #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,
    #copyright {
        text-align: left !important;
    }

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

    .content-box {
        width: 96%;
    }

    .inner-page #menu {
        margin: 0 0 2rem 0 !important;
    }


    .r-picture {
        padding: 0 !important;
    }

    #about-introduction .r-picture-one {
        width: 96%;
        height: auto;
        margin: 0 0 2rem 1rem;
    }

    #about-introduction .column-2 {
        padding: 4rem 0 1rem 0;
    }

    #about-introduction .column-2:nth-of-type(2) {
        margin-top: 2rem;
        padding: 4rem 0 4rem 0;
    }

    .a-picture-one {
        width: 360px;
        height: 420px;
        top: -6%;
        right: 5%;
    }

    .a-picture-two {
        width: 320px;
        height: 400px;
        top: 57%;
        left: 4%;
    }

    .pink-lotus img {
        width: 250px;
        height: 400px;
        bottom: -65px;
        right: 7%;
    }

    #about-introduction .text .upper-text p:after {
        width: 130px;
        left: 65% !important;
    }

    #journey .text .upper-text p:after {
        left: 40% !important;
    }

    .m-picture-two {
        top: 47%;
    }

    .gallery {
        padding: 1rem 0 2rem 0;
        text-align: center !important;
    }

    .gallery-line {
        margin: -2rem 0 2rem 0;
    }

    .gallery .content-box {
        width: 100%;
    }

    #journey {
        padding: 6vw 0 2vw 0;
        margin: 0 1rem 0 1rem;
    }

    #mission {
        padding: 1rem 1rem 2rem 1rem;
    }

    .m-picture-one {
        width: 300px;
        height: 480px;
        right: 0;
    }

    .m-picture-two {
        width: 250px;
        top: 57%;
    }

    .pink-tree {
        bottom: -15%;
    }

    .pink-tree img {
        width: 450px;
    }

    .cta,
    .gallery {
        padding: 3rem 1rem 2rem 1rem;
    }

    .s-header-pic img {
        width: 320px;
        height: 400px;
        margin: 3rem 0 0 2rem;
    }

    .s-header-text {
        margin-top: 1rem;
        left: 43%;
        padding: 1.5rem 1rem 2rem 2rem;
    }

    #services-header {
        padding: 0 0 12vw 0;
    }

    #morning .text .upper-text p:after {
        width: 200px;
        left: 97%;
        margin-left: 1rem;
    }

    #morning .picture-two {
        width: 350px;
        height: auto;
        position: absolute;
        top: 48%;
        left: 10%;
    }

    .cs-picture-one,
    .e-picture-one {
        width: auto;
        height: 200px;
        position: absolute;
        top: 0;
        right: 0;
    }

    .cs-picture-one img,
    .e-picture-one img {
        width: 80%;
        height: auto;
        border-radius: 30px;
        margin-left: 4rem;
        margin-top: 0;
    }

    .description .cta-buttons {
        margin-top: 2rem;
    }

    .picture {
        padding: 2rem 0 20rem 0;
    }

    #csaladallitas-body {
        background: rgba(244, 226, 211, 0.4);
        padding: 4rem 0 8rem 0;
    }

    .cs-text .picture {
        padding: 2rem 0 20rem 0;
    }

    .cs-picture,
    .e-picture-one {
        width: 100%;
        position: relative;
        margin-left: 0;
    }

    .cs-picture-one img,
    .e-picture-one img {
        width: 85%;
        height: auto;
        border-radius: 30px;
        margin-left: 1rem;
        margin-top: 4rem;
    }

    .cs-picture-two {
        position: absolute;
        top: 55%;
        left: 8%;
    }

    .cs-picture-two img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        margin-left: 0;
    }

    .cs-picture-three img {
        width: 90%;
        height: 90%;
        border-radius: 30px;
        margin-left: 2rem;
    }

    .one-event {
        display: block;
    }

    .one-event-img {
        margin-left: 2rem;
    }

    .szom-picture-one img {
        margin-left: 0 !important;
    }
    #szomatologo {
    width: 130px;
    height: 40px;
    margin: 0.2rem 0rem 0 1rem;
    display: inline-block;
     float: right;
}
        #szomatotitle {
    width: 300px;
    height: auto;
    margin: 0 auto;
   }
}

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


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

    #menu {
        margin-top: 0;
        padding: 0.3rem 0 0.3rem 0;

    }

    #logo {
        margin: 0 0 0 2rem;
    }
    #szomatologo {
    width: 100px;
    height: 30px;
    margin: 0rem 0 0 0rem;
    display: inline-block;
     float: right;
}
    .hero-content {
        position: static;
        transform: none;
        border: none;
        margin: 0 0 1.5rem 0;
        text-align: left;
        padding: 0 15px 15px 15px;
    }

    .my_carousel .item-list img {
        margin-top: 1.5rem;
    }

    .hero-text {
        padding: 0.2rem 0 0 0;
    }

    .border {
        margin: 6rem auto 0 auto;
        padding: 1.5rem 0.5rem 1.5rem 0.5rem;
    }

    .cta-buttons {
        margin-top: 1rem;
    }

    .cta-buttons a {
        margin: 0 0 1.3rem 0;
    }

    .cta-buttons .button-secondary,
    #request .picture .r-picture-one {
        display: none;
    }

    .events-intro {
        padding: 8rem 1rem 14rem 1rem;
    }

    #choose {
        padding: 8rem 1rem 20rem 1rem;
    }

    .layer {
        padding: 3rem 15px 2rem 15px;
    }

    #choose .layer {
        padding: 3rem 5px 2rem 5px;
    }

    #choose .layer p {
        padding: 0 1rem 0 1rem;
    }

    #about-intro .column-2 {
        padding: 2rem 0 0 0;
    }

    .text .upper-text p:after {
        display: none;
    }

    .picture-one,
    .picture-two,
    .r-picture-one,
    .r-picture-two {
        position: static;
        width: 100%;
        height: auto;
    }

    #about-intro {
        padding: 6vw 0 14vw 0;
    }

    #service-intro {
        padding: 16vw 0 4vw 0;
    }

    .subpage-list {
        margin: 0 auto;
        padding: 2rem 0 0 0;
    }

    .subpage-item {
        text-decoration-line: none !important;
    }

    .subpage-number {
        top: 0% !important;
        left: 5% !important;
        font-size: 2rem !important;
        border-radius: 20% !important;
        padding: 0.5rem !important;
    }

    .subpage-title {
        margin: 1.5rem 2rem 2rem 2rem;
        display: block;
    }

    #request .column-2:nth-of-type(1) {
        padding: 0 0 0 0;
    }

    .cta-buttons .button-white {
        margin: 1rem 0 1rem 0 !important;
    }

    .metamorf {
        width: 100%;
        height: auto;
        margin: 1rem 0 0 0;
    }

    #request {
        background: #f4d9d5;
        padding: 2vw 0 12vw 0;
    }

    .testimonials .content-box {
        margin-top: 2rem;
    }

    .vertical,
    .line {
        position: static;
        margin: 1rem 0;
        text-align: center !important;
    }

    .testi {
        margin: 1rem 1rem 2rem 1rem;
    }

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

    #footer-menu ul li,
    #copyright {
        text-align: left !important;
    }

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

    .inner-page {
        padding-top: 16vw;
    }

    .inner-page #menu {
        margin: 0 0 4rem 0 !important;
        padding-bottom: 2rem;
    }

    .r-picture {
        padding: 0 !important;
    }

    #about-introduction .r-picture-one {
        width: 90%;
        height: auto;
        margin: 2rem 1rem 2rem 1rem;
    }

    #about-introduction .column-2 {
        padding: 4rem 0 1rem 0;
    }

    #about-introduction .column-2:nth-of-type(2) {
        margin-top: -1rem;
        padding: 0 0 4rem 0;
    }

    .a-picture-one {
        width: 360px;
        height: 420px;
        top: -6%;
        right: 5%;
    }

    .a-picture-two {
        width: 320px;
        height: 400px;
        top: 57%;
        left: 4%;
    }

    .pink-lotus img {
        width: 200px;
        bottom: -130px;
        right: 25%;
    }

    #about-introduction .text .upper-text p:after {
        width: 130px;
        left: 65% !important;
    }

    #journey .text .upper-text p:after {
        left: 40% !important;
    }

    #timeline {
        padding: 2rem 1rem 1rem 1rem;
    }

    .m-picture-two {
        top: 47%;
    }

    .gallery {
        padding: 1rem 0 2rem 0;
        text-align: center !important;
    }

    .gallery-line {
        margin: -2rem 0 2rem 0;
    }

    .gallery .content-box {
        width: 100%;
    }

    #journey {
        padding: 6vw 0 2vw 0;
        margin: 0 0.5rem 0 0.5rem;
    }

    #mission {
        padding: 1rem 1rem 0 1rem;
    }

    .m-picture-one {
        width: 100%;
        height: 600px;
        position: static;
        margin-top: 2rem;
    }

    .m-picture-two {
        width: 250px;
        top: 52%;
    }

    .pink-tree {
        margin-top: -3rem;
        position: static;
    }

    .pink-tree img {
        height: 150px;
    }

    .cta,
    .gallery {
        padding: 3rem 1rem 2rem 1rem;
    }

    #mission .column-2 {
        padding: 2rem 0 3rem 0;
    }

    #timeline ul {
        margin: 2rem 0 0 0.5rem;
        padding: 0 0 0.5rem 0.5rem;
    }

    #timeline ul li:before {
        left: -16px;
    }

    .gallery-line img {
        width: 100%;
        height: auto;
    }

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

    #services-header .column-2 {
        padding: 2rem 0 2rem 0;
    }

    .s-header-pic img {
        width: 100%;
        height: auto;
        margin: 0 auto !important;
        position: static;
    }

    .s-header-text {
        position: static;
        margin-top: 1rem;
        padding: 1rem 0.5rem 1rem 0.5rem;
    }

    .s-header-text h3,
    .s-header-text p {
        padding-left: 0.8rem;
        padding-right: 0.6rem;
    }

    #morning {
        padding: 2rem 0 2rem 0;
    }

    #morning .text {
        padding: 2rem 0 0 0;
    }

    #morning .picture-two {
        width: 100%;
        height: auto;
        position: static;
        margin-top: 2rem;
    }

    .s-header-pic {
        padding-bottom: 0;
    }

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

    .servicee {
        margin: 0 0 4rem 0;
        padding: 1rem 0.5rem 1rem 0.5rem;
        display: block;
    }

    .service-title {
        max-width: 90%;
        margin: 1.5rem 0 1rem 1.5rem;
    }


    .description .cta-buttons {
        margin-top: 2rem;
    }

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

    #csaladallitas-body {
        background: rgba(244, 226, 211, 0.4);
        padding: 2rem 0 4rem 0;
    }

    .csaladall-header,
    .events-header {
        margin: 2rem 1rem 3rem 1.5rem;
        width: 85%;
    }

    #csaladallitas-intro .text,
    #event-intro .text {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        clear: both;
    }

    .cs-text .picture {
        padding: 2rem 0 20rem 0;
    }

    .cs-picture,
    .e-picture {
        position: static;
        width: 100%;
        margin-left: 0;
    }

    .cs-picture-one,
    .e-picture-one,
    .szom-picture-one {
        width: 100%;
        height: auto;
        position: static;
        margin-left: 0;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .cs-picture-one img,
    .e-picture-one img,
    .szom-picture-one img {
        width: 100%;
        height: auto;
        border-radius: 30px;
        margin-left: 0;
    }

    .cs-picture-two {
        position: absolute;
        top: 35%;
        left: 8%;
    }

    .cs-picture-two img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        margin-left: 0;
        margin-top: 2rem;
    }

    .cs-picture-three,
    .cs-picture-two {
        position: static;
    }

    .cs-picture-three img {
        width: 100%;
        height: 100%;
        border-radius: 30px;
        margin-left: 0;
        margin-top: -2rem;
    }

    .description,
    #organisation .text {
        padding: 2rem 1rem 2rem 1.5rem;
    }

    #where {
        margin-top: 4rem;
    }

    #process {
        padding: 2rem 1rem 2rem 1.5rem;
    }

    #process .picture {
        padding: 2rem 0 0 0;

    }

    #organisation,
    #gyakori {
        padding: 2rem 0 2rem 0;
    }

    #gyakori .text {
        padding-left: 0.5rem;
    }

    #faq-one,
    #faq-two,
    #faq-three,
    #faq-four,
    #faq-five,
    #faq-six,
    #faq-seven,
    #faq-eight {
        margin: 0 0 1rem 1rem;
    }

    .one-event {
        display: block;
        overflow: hidden;
        clear: both;
    }

    .one-event-img {
        width: 100%;
    }

    .one-event-text {
        margin-left: 0.5rem;
        text-align: left;
        padding: 1rem 2rem 0 0;
    }

    .white-background {
        padding: 0.75rem;
    }

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

    .contact-img img {
        width: 90%;
        height: auto;
        margin-left: 1rem;
    }
        #szomatotitle {
    width: 300px;
    height: auto;
    margin: 0 auto;
            padding: 3rem 0;
   }
}