/*
Theme Name: Nati Jóga
Theme URI: http://kovacskriszti.com/nati-joga
Author: Petho-Kovacs Krisztina
Author URI: http://kovacskriszti.com
Description: Nati Joga 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: Nati Jóga
*/

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

.content-box {
    margin: 0 auto;
    max-width: 1300px;
}

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

#main-page {
    padding: 0 0 10vw 0;
    background: url(/wp-content/themes/natijoga/img/header-bg.png) center center no-repeat;
    background-size: cover;

}

nav {
    padding-top: 45px;
}

nav ul {
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: block;
    margin: 0 4rem;
}

nav ul li:nth-of-type(2) {
    flex-grow: 1;
    /* a varázslat */
}

nav ul li a,
.button-main a {
    text-decoration: none !important;
    text-transform: uppercase;
    color: #f2e4e9;
}
nav ul li a{
    letter-spacing: 0;
}
nav ul li a:hover, .current-menu-item > a:hover, footer a:hover {
  letter-spacing: 1px;
border-bottom: 1px solid #590a2f;
}

.inner-page nav ul li a {
    color: #590a2f !important;
}

#logo {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 0;
    margin-top: 10px;
    margin-left: -50px;
    display: inline-block;
}

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

@media only screen and (max-width: 900px) {
    #logo {
        position: relative;
    }

    #menu {
        display: none;
    }

    nav ul {
        display: block;
    }

    nav ul li {
        padding: 10px 0;
        border-bottom: solid 1px #ddd;
    }

    #hamburger {
        height: 40px;
        width: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        top: 40px;
        right: 15px;
        margin: 0;
        position: absolute;
        cursor: pointer;
        z-index: 2;
        padding: 10px;
    }

    #hamburger span {
        height: 3px;
        width: 20px;
        z-index: 32;
        transition: background .3s;
        -webkit-transition: background .3s;
        background: #590a2f;
    }

    #hamburger.collapse {
        justify-content: center;
    }

    #hamburger.collapse span:nth-of-type(1) {

        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    #hamburger.collapse span:nth-of-type(3) {
        margin-top: -3px;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    #hamburger.collapse span:nth-of-type(2) {
        display: none;
    }
}

#hero-header {
    padding: 5vw 0 4vw 0;

}

.button-main {
    border: 2px solid #fdd6e3;
    color: #fdd6e3;
    display: inline-block;
    padding: 0.5rem 1.2rem 0.4rem 1.2rem;
    margin-top: 0.8rem;
    border-radius: 15px;
    text-decoration: none !important;
    text-transform: uppercase;
     
}

.button-main:hover,
.blog-text .button-secondary:hover {
    border: 2px solid #fdd6e3;
    background: #fdd6e3;
    color: #947c5f;
    
}

.button-secondary {
    border: 2px solid #590a2f;
    background: #590a2f;
    color: #fdd6e3;
    display: inline-block;
    padding: 0.5rem 1.2rem 0.4rem 1.2rem;
    margin-top: 0.8rem;
    border-radius: 15px;
    text-decoration: none !important;
    text-transform: uppercase;
    
}

.button-secondary:hover,
.two:hover {
    border: 2px solid #590a2f;
    background: none;
    color: #590a2f!important;
}

#pitch {
    background: #590a2f;
    padding: 20px 18px;
    margin: -1.5rem 8rem 0 8rem;
}

#quote {
    background: #fee9f0;
    color: #590a2f;
    font-family: 'Branch', sans-serif;
    font-size: 54px;
    letter-spacing: 1.1;
    line-height: 0.8;
    max-width: 80%;
    margin: -3rem 0 0 -6rem;
    padding: 9rem 8rem 7rem 9vw;
    z-index: -1;
    position: absolute;
}

#quote,
#mitten {
    overflow: hidden;
    clear: both;
}

#quote p {
    max-width: 80%;
}

#video {
    max-width: 80%;
    margin-left: 40%;
    padding: 18rem 8rem 7rem 0rem;
    z-index: 0;
    color: #590a2f;

}

.column-2,
.column-3 {
    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 {
    width: 33.333%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
}

#aboutme,
#hatha,
#testimonials {
    max-height: 900px;
    background: #ebebeb;
    margin-bottom: 6rem;

}

#aboutme .main-img img,
#hatha .main-img img,
.timeline .main-img img {
    max-height: 900px;
    margin: -3rem 1rem -2rem -1rem;
}

#aboutme .main-text,
#hatha .main-text,
#newsletter .main-text,
#testimonials .main-text,
.timeline .main-text,
#cv .main-text,
#kindwords .main-text,
#onthe .main-text,
#newsletter-contact .main-text {
    padding: 4rem 4rem 3rem 2rem;
    margin: 0 0 0 1rem;
}

#aboutme .button-secondary {
    margin-top: 1.4rem;
    color: #ebebeb;
}

#yoga {
    max-height: 900px;
    overflow: hidden;
    clear: both;
    background: #fee9f0;
    margin-bottom: 6rem;
}

#yoga .main-img img,
#testimonials .main-img img {
    max-height: 900px;
    margin: -7rem -1rem -2rem 3rem;
}

#yoga .main-text {
    padding: 4rem 2rem 3rem 6rem;
    margin: 0 0 0 1rem;
}

.main-text {
    position: relative;
}

#star {
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 114px;
    height: 89px;
    right: 5%;
}

#yoga ul {
    margin-left: 3rem;
}

#yoga ul li {
    position: relative;
}

#yoga ul li:before {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/wp-content/themes/natijoga/img/star3.svg);
    top: 1px;
    width: 15px;
    height: 20px;
    left: -24px;

}

.faq-page:before {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/wp-content/themes/natijoga/img/star3.svg);
    top: 8px;
    width: 15px;
    height: 20px;
    left: -24px;

}

.active:before {
    transform: rotate(45deg);
}

#hatha .button-secondary,
.two {
    border: 2px solid #590a2f;
    color: #590a2f;
    background: none;
}

#hatha .button-secondary:hover, .two:hover {
    border: 2px solid #590a2f;
    color: #ebebeb!important;
    background: #590a2f;
}

#hatha .main-text {
    padding: 4rem 4rem 2rem 2rem;
    margin: 0 0 0 1rem;
}

#collage,
#collage-second {
    background: url(/wp-content/themes/natijoga/img/mandala.svg) center right no-repeat;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-top: 2rem;
    padding-left: 6rem;
    margin-bottom: 6rem !important;
}

.first img {
    max-width: 350px;
    height: auto;
    border: 5px solid #fdd6e3;

}

.second img {
    max-height: 650px;
    width: auto;
    border: 5px solid #fdd6e3;
    margin-top: 4rem;
    margin-left: -5rem;

}

.third img {
    max-height: 470px;
    width: auto;
    border: 5px solid #fdd6e3;
    margin-top: -3rem;
    margin-left: -8rem;
}

.first,
.second,
.third {
    display: inline-block;
    position: relative;
    margin-top: 3rem;
}

.first:after {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/wp-content/themes/natijoga/img/star2.svg);
    top: -40px;
    width: 58px;
    height: 50px;
    right: -70px;

}

.second:after {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/wp-content/themes/natijoga/img/star2.svg);
    top: 400px;
    width: 58px;
    height: 50px;
    left: -160px;
}

.first p {
    position: absolute;
    top: -60px;
    left: 30px;
}

.second p {
    bottom: -80px;
    right: 100px;
    position: absolute;
}

.third p {
    bottom: -120px;
    left: -50px;
    position: absolute;
    background: url(/wp-content/themes/natijoga/img/blob.svg) center center no-repeat;
    background-size: cover;
    padding: 0 20px 20px 20px;
}

.tag {
    margin-left: 45%;

}

.third:after {
    content: "";
    position: absolute;
    display: inline-block;
    background: url(/wp-content/themes/natijoga/img/star2.svg);
    bottom: -50px;
    width: 58px;
    height: 50px;
    right: 150px;

}

#newsletter {
    max-height: 900px;
    overflow: hidden;
    clear: both;
    background: #fee9f0;
    margin-bottom: 6rem;
    margin-top: 8rem;

}

#newsletter .main-img img {
    max-height: 900px;
    margin: 0 1rem -5rem -1rem;
}

input[type="email"],
input[type="text"] {
    content: "";
    display: inline-block;
    width: 100%;
    height: 2rem;
    color: #590a2f;
    border-bottom: solid 2px #590a2f;
    border-top: solid 1px #fee9f0;
    border-left: solid 1px #fee9f0;
    border-right: solid 1px #fee9f0;
    margin-top: -10rem;
    margin-bottom: 0.5rem;
    background: #fee9f0;
    font-size: 20px;
}


.check,
.wpcf7-list-item-label {
    font-size: 12px !important;
    text-align: left;
    margin-top: 2rem;
    padding: 0.3rem 0.2rem 0.5rem 0.2rem;
}

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: #fee9f0;
    color: #590a2f;
    border: 1px solid #590a2f;
    -webkit-appearance: checkbox;
}

.wpcf7-response-output {
    text-align: center !important;
    margin-left: 10rem !important;
    margin-right: auto;
}

.wpcf7-spinner::before,
.wpcf7-spinner {
    display: none;
}

#testimonials .main-img img {
    max-height: 900px;
    margin: 0 -1rem -2rem 3rem;
}

.star {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 60px;
    height: 65px;
    margin: 2rem auto 2rem auto;
}

.post-horizontal {
    margin: 4rem 4rem 0 0;
}

.post-vertical {
    margin: 4rem 0 0 2rem;
}

.post-text p {
    color: #590A2F !important;
    margin-top: 0.5rem;
}

#blog .button-secondary {
    margin-top: 2rem;
    margin-left: 65%;
}

.post-image,
.teaser-img {
    display: block;
}

.post-image img,
.postimage img,
.teaser-img img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
}

#blog {
    margin-bottom: 6rem;
}

#subscribe {
    background: #ebebeb;
    padding: 5rem 0 4rem 0;
}

#subscribe-form {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    color: #590a2f;

}

#subscribe-form input[type="email"],
#subscribe-form input[type="text"] {
    content: "";
    display: inline-block;
    width: 600px;
    height: 2rem;
    border-bottom: solid 2px #590a2f;
    border-top: solid 2px #590a2f;
    border-left: solid 2px #590a2f;
    border-right: solid 2px #590a2f;
    margin-top: -10rem;
    margin-bottom: 0.5rem;
    background: #ebebeb;
    font-size: 20px;
    color: #590a2f;
}

footer {
    margin-top: 4rem;
    background: #fee9f0;
    padding: 5rem 0 4rem 0;
}

#copyright {
    font-size: 14px;
    background: #fee9f0;
}

.social ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    overflow: hidden;

}

.social li {
    display: inline-block;
    padding-top: 0.6rem;
}

.social li a {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 0.5rem;

}

.facebook {
    background: url(/wp-content/themes/natijoga/img/facebook.svg) center center no-repeat;
}

.instagram {
    background: url(/wp-content/themes/natijoga/img/instagram.svg) center center no-repeat;
}

.youtube {
    background: url(/wp-content/themes/natijoga/img/youtube.svg) center center no-repeat;
    padding-top: 0.5rem;
}

footer .column-3 {
    padding-left: 6rem;
}

.inner-page {
    padding: 1vw 0 0.8vw 0;
}

.inner-page {
    background: #fee9f0 !important;
    padding-bottom: 0 !important;

}

.inner-page #hero-header {
    display: none;
}

.inner-page #menu {
    padding-bottom: 50px;
}

.start-star {
    display: inline-block;
    width: 68px;
    height: 54px;
    padding-bottom: 0.5rem;
}

#whoiam,
#classes-intro {
    overflow: hidden;
    clear: both;
    padding: 8vw 0 4vw 0;
    margin-bottom: 6rem;
}

#intro-text {
    margin-top: 4rem;
}

#intro-img {
    position: relative;
    padding: 2rem;
    margin-top: -2rem;
}

#grey {
    background: #ebebeb;
    width: 680px;
    height: 700px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    margin-top: 3rem;
}

#portrait {
    height: 680px;
    width: auto;
    margin-left: 3rem;
}

#grey-star {
    width: 158px;
    height: 114px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#welcome-video {
    background: #fee9f0;
    overflow: hidden;
    clear: both;
    padding: 6vw 0 8vw 0;
    margin-bottom: 6rem;
}

.video-box {
    text-align: center;
    background: #ebebeb;
    max-width: 840px;
    max-height: 473px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    padding: 1rem;
    margin: 2rem auto 2rem auto;
}

#welcome-video p {
    margin: 3rem 4rem 0 4rem;
}

#cv {
    overflow: hidden;
    clear: both;
    background: #ebebeb;
    margin: 4rem 0 6rem 0;

}

.sec img {
    max-height: 900px;
    width: auto;
    margin: 0 -1rem -3rem 0;
}

.two {
    margin-left: 2rem;
}

.sectext {
    padding-top: 4rem;
}

#kindwords {
    max-height: 900px;
    overflow: hidden;
    clear: both;
    background: #fee9f0;
    margin: 0 0 8rem 0;
}

#kindwords .main-img img {
    max-height: 1000px;
    width: auto;
    margin: -2rem -1rem -3rem -1rem;
}

.red-star {
    display: inline-block;
    width: 500px;
    height: 500px;
    position: absolute;
    left: 0;
    top: -8%;
}

.table-image {
    max-width: 700px;
    height: auto;
    display: inline-block;
    margin: 5rem 0 0 0;

}

#grey-bg {
    background: #ebebeb;
    width: 820px;
    height: 540px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    margin: 9rem 0 0 -3rem;

}

#classes-rn {

    position: relative;
}

.click-here {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.click {
    text-decoration: none !important;
    color: #590a2f !important;
    border-bottom: 4px solid #590a2f;

}

#onthe {
    overflow: hidden;
    clear: both;
    background: #fee9f0;
    margin: 4rem 0 4rem 0;

}

#gallery {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 6rem 0 6rem 0;
}

#gallery img {
    max-width: 25%;
    height: auto;
}

#blog-teaser {
    margin: 2rem 0 2rem 0;
    background: #ebebeb;
    padding: 4rem 0 4rem 0;
}

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


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


#qa {
    margin: 8rem 0 8rem 0;

}

#gyakori {
    margin-top: 2rem;
    margin-left: 2rem;
}

#newsletter-contact {
    overflow: hidden;
    clear: both;
    margin-bottom: 4rem;
    margin-top: 4rem;

}

#newsletter-contact .main-img {
    margin: 2rem 0 2rem 0;
    max-width: 680px;
    height: auto;

}

#newsletter-contact .main-img img {
    width: 100%;
    height: auto;
    margin: 0 0rem -3rem 0rem;
}

#newsletter-contact input[type="email"],
#newsletter-contact input[type="text"] {
    background: #fff !important;
    border-left: none;
    border-right: none;
    border-top: none;
}

#socialmedia {
    overflow: hidden;
    clear: both;
    margin: 6rem 0 6rem 0;

}

.social-text {
    padding: 4rem 2rem 2rem 0;
    margin: 0 0 0 1rem;
}

.social-gal-one {
    max-width: 49%;
    height: auto;
    padding: 20px 10px 0 0;
}

.social-gal-two {
    max-width: 49%;
    height: auto;
    padding: 20px 0 0 10px;
}

.social-gal img {
    max-width: 100%;
    height: auto;

}

#social-img {
    margin-top: 2rem;
    margin-left: 2rem;
}

#blog-page {
    background: #590a2f;
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
    margin-bottom: -4rem;
}

.blog-text {
    padding: 3rem 0 2rem 3rem;
    margin: ;
    color: #fff !important;
    text-decoration: none !important;
}

.blog-text .button-secondary {
    border: 2px solid #fff;
    color: #fff;
    margin-top: 2rem;
}

.white-star {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 4%;
    top: 34%;
}

#post-grid {
    margin-top: 6rem;
    padding-bottom: 6rem;
}

.griditemleft {
    margin-right: 0;
    margin-bottom: 4rem;
}

.griditemright {
    margin-bottom: 4rem;

}

.postimage img {
    padding: 0 15%;

}

.posttext {
    padding: 4% 15%;

}

#singlepost {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 4rem;
}

.single-page {
    width: 80%;
    padding-right: 80px;
}

aside {
    width: 18%;
    margin: -1rem 0 0 5px;
}

.details {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 0rem;
    font-size: 16px;
}

.small-cat,
.small {
    margin: -1rem 0.5rem 3rem 0;
}

aside .decor {
    margin-bottom: 0.5rem;
}

.button-widget {
    text-transform: uppercase;
    font-size: small;
    font-weight: bold;
    text-decoration: none;
    color: #590a2f;
    margin-bottom: 2rem;
}

#more {
    margin-top: 2rem;
}

.widget ul li {
    position: relative;
    margin-left: 0.5rem;
}

.widget ul li a:before {
    content: '-';
    height: 5px;
    width: 8px;
    color: #590a2f;
    position: absolute;
    top: 4px;
    left: -10px;
}

#blogpost-text {
    margin-left: 2rem;
    padding: 4rem 0 0 2rem;
}

.follow {
    position: relative;
}

.insta {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 30px;
    left: 50px;
    display: inline-block;
}
.instagram-feed {
    margin: 2rem 0 2rem 0;
}
#sb_instagram {
    height: 100%!important;
}
.slide-in-left {
    animation: slideInLeft 2s forwards;
}
@keyframes slideInLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


@media screen and (max-width: 1459px) and (min-width: 1300px) {
    #quote {
        margin: -3rem 0 0 -2rem;
    }
}

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

    .content-box {
        width: 96%;
        margin: 0 auto;
    }

}


@media screen and (max-width: 1299px) and (min-width: 1181px) {
    #quote {
        margin: -3rem 0 0 -1rem;
    }

    #yoga .main-text {
        padding: 4rem 2rem 3rem 2rem;
    }

    #collage,
    #collage-second {
        justify-content: space-evenly;
        padding-left: 2rem;
    }

    .second img {
        max-height: 550px;
        margin-left: -3rem;
    }

    .third img {
        max-height: 390px;
    }

    .star {
        margin: 0.5rem auto 0.5rem auto;
    }

    #blog .button-secondary {
        margin-left: 41%;
    }

    #intro-text {
        margin-left: 2rem;
    }

    #portrait {
        margin-left: 2.5rem;
    }

    #gallery {
        width: 100%;
        height: auto;
    }

    #qa {
        padding-left: 4rem;
    }

    #single-post {
        padding-left: 2rem;
    }
}

@media screen and (max-width: 1180px) and (min-width: 1025px) {
    #quote {
        margin: -3rem 0 0 -2rem;
    }

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

    #star {
        width: 94px;
        height: 69px;
    }

    #hatha .main-text {
        padding: 4rem 4rem 3rem 2rem;
    }

    #yoga .main-text {
        padding: 4rem 2rem 3rem 2rem;
    }

    #collage,
    #collage-second {
        padding: 0 0 0 0;
        justify-content: space-evenly;
    }

    .first img {
        max-width: 300px;
        margin-left: 4rem;
    }

    .second img {
        max-height: 600px;
    }

    .third img {
        max-width: 420px;
    }

    #portrait {
        max-height: 550px;
        margin-left: 2rem;
    }

    .start-star {

        margin-bottom: 1rem;
    }

    #grey {
        width: 580px;
        height: 540px;
    }

    #intro-img {
        margin-top: 0;
    }

    .red-star {
        left: -10%;
        top: -37%;
    }

    #grey-star {
        width: 138px;
        height: 94px;
    }

    #cv .main-text {
        padding: 2rem 3rem 3rem 1rem;
    }

    #collage,
    #collage-second {
        justify-content: space-evenly;
        padding-left: 4rem;
    }

    #kindwords {
        margin-top: 4rem;
    }

    .table-image {
        margin: 3rem 0 0 0;
    }

    #grey-bg {
        margin: 6rem 0 0 -3rem;
    }

    .click-here {
        margin-top: 6rem;
        margin-bottom: 4rem;
    }

    #onthe .main-text {
        padding: 4rem 3rem 3rem 1rem;
    }

    #qa {
        margin: 4rem 0 6rem 0;
    }

    #blogpost-text {
        padding: 2rem 0 0 1rem;
    }

    .white-star {
        top: 14%;
    }

    .postimage img {
        padding: 0 10% 0 0;
    }

    .posttext {
        padding: 4% 10% 0 0;
    }

    #social-img {
        margin-top: 4rem;
    }

    .social-gal-one,
    .social-gal-two {
        padding-top: 30px;
    }
}

@media screen and (max-width: 1024px) and (min-width: 821px) {
    #logo {
        margin-left: 0px !important;
        left: 46% !important;
    }

    #quote {
        margin: -3rem 0 0 -2rem;
    }

    nav ul {
        margin: 0 0 0 2rem;
    }

    nav ul li {
        display: block;
        margin: 0 4rem 2rem 0;
    }


    #star {
        width: 94px;
        height: 69px;
    }

    #hatha .main-text {
        padding: 4rem 4rem 3rem 2rem;
    }

    #yoga .main-text {
        padding: 4rem 2rem 3rem 2rem;
    }

    #collage,
    #collage-second {
        padding: 0 0 0 0;
        justify-content: space-evenly;
    }

    .first img {
        max-width: 100%;
        height: auto;
        margin-left: 4rem;
    }
    
#portrait {
        max-height: 550px;
        margin-left: 2rem;
    }

    .start-star {
        margin-bottom: 1rem;
    }

    #grey {
        width: 580px;
        height: 540px;
    }

    #intro-img {
        margin-top: 0;
    }

    .red-star {
        left: -10%;
        top: -37%;
    }

    #grey-star {
        width: 138px;
        height: 94px;
    }

    #cv .main-text {
        padding: 2rem 3rem 3rem 1rem;
    }

    #collage,
    #collage-second {
        justify-content: space-evenly;
        padding-left: 4rem;
    }

    .tag {
        margin: -2rem auto 0 auto;
        text-align: center;
    }

    .first:after {
        right: 74%;
        top: -80px;
    }

    
    #collage-second .second img {
        max-width: 100%;
        height: auto;
        margin: -6rem 0 0 10rem;
    }

    .third img {
        max-height: 400px;
        width: auto;
        margin: -4rem 0 0 10rem;
    }

    .third p {
        position: absolute;
        background: url(/wp-content/themes/natijoga/img/blob.svg) top center no-repeat;
        background-size: 100%;
    }

    #kindwords {
        margin-top: 4rem;
    }

    .table-image {
        margin: 3rem 0 0 0;
    }

    #grey-bg {
        margin: 6rem 0 0 -3rem;
    }

    .click-here {
        margin-top: 6rem;
        margin-bottom: 4rem;
    }

    #onthe .main-text {
        padding: 4rem 3rem 3rem 1rem;
    }

    #qa {
        margin: 4rem 0 6rem 0;
    }

    #blogpost-text {
        padding: 2rem 0 0 1rem;
    }

    .white-star {
        top: 14%;
    }

    .postimage img {
        padding: 0 10% 0 0;
    }

    .posttext {
        padding: 4% 10% 0 0;
    }

    #social-img {
        margin: 4rem auto 0 auto;
    }

    .social-gal-one,
    .social-gal-two {
        padding-top: 30px;
    }

    .column-2,
    .column-3,
    .column-3 > div,
    .column-2 > div,
    #aboutme > div,
    #aboutme,
    #collage,
    #collage-second,
    .first,
    .second,
    .third,
    #blog,
    .post-horizontal,
    .post-vertical,
    footer,
    footer > div,
    #onthe,
    #blog-page,
    #newsletter-contact,
    #socialmedia {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;

    }

    #aboutme,
    #yoga,
    #hatha,
    #newsletter,
    #testimonials,
    #cv,
    #kindwords {
        max-height: 100%;
        width: auto;
    }

    #aboutme .main-img img,
    #yoga .main-img img,
    #hatha .main-img img,
    #newsletter .main-img img,
    #testimonials .main-img img,
    .timeline .main-img img,
    .sec img,
    #kindwords .main-img img {
        max-height: 100%;
        width: auto;
        margin: 0 auto;
    }

    #aboutme .main-text,
    #hatha .main-text,
    #newsletter .main-text,
    #testimonials .main-text,
    .timeline .main-text,
    #cv .main-text,
    #kindwords .main-text,
    #onthe .main-text {
        padding: 3rem 4rem 3rem 2rem;
    }

    #yoga .main-text {
        padding: 3rem 2rem 3rem 2rem;
    }

    .tag {
        margin: 0 auto;
        text-align: center;
    }

    #star {
        width: 94px;
        height: 69px;
    }

    #logo {
        margin-top: 30px;
        margin-left: -50px;
    }

    #hamburger {
        margin-top: 30px;
        color: #fdd6e3;
    }

    .insta {
        top: 5px;
    }

    #quote {
        margin: -3rem 0 0 -2rem;
        padding: 6rem 8rem 4rem 9vw;
    }

     .second img {
        max-width: 100%;
        height: auto;
        margin: -12rem 0 0 14rem;
    }

  
    .post-vertical {
        margin: 4rem 0;
    }

    #blog .button-secondary {
        margin: -3rem 0 0 0 !important;
        text-align: center !important;
    }

    #newsletter,
    #kindwords {
        margin-top: 16rem !important;
    }

    footer .column-3 {
        padding-left: 0;
    }

    #contact,
    #footer-menu,
    .legal {
        margin-bottom: 2rem;
    }

    #logo {
        margin-bottom: 1rem;
    }

    #whoiam {
        padding: 2vw 0 4vw 0;
    }

    #intro-img,
    #classes-intro,
    .teaser-text .button-secondary,
    #newsletter-contact .main-text {
        margin-top: 2rem !important;
    }

    #portrait {
        height: 100%;
        width: auto;
        margin: 0 auto;
    }

    #grey {
        width: 1000px;
        height: 1200px;
        margin: 3rem auto;
    }

    .table-image {
        margin: 2rem 0 0 0;
    }

    .red-star {
        width: 200px;
        height: 200px;
        top: -2%;
    }

    #grey-bg {
        width: 1000px;
        height: 500px;
        margin: 9rem 0 0 -2.5rem;
    }

    #blogpost-text {
        margin-left: 0;
        padding: 3rem 4rem 2rem 2rem;
    }

    .blog-text {
        margin: 0 0 1rem 0.3rem !important;
    }

    .posttext {
        padding: 4% 0 4% 0;
    }

    .postimage img {
        width: 100;
        height: auto;
        padding: 0;
    }

    #newsletter-contact .main-text {
        margin: 2rem 0 0 1rem;
        padding: 3rem 4rem 3rem 2rem;
    }


}

@media screen and (max-width: 768px) {
    #logo {
        margin-top: 1rem;
        left: 20px;
    margin-bottom: 1rem;

    }

    #quote {
        margin: -5rem 0 0 -2rem;
    }
    #main-page {
        padding: 0 0 18vw 0;
    }

    .column-2,
    .column-3,
    .column-3 > div,
    .column-2 > div,
    #aboutme > div,
    #aboutme,
    #collage,
    #collage-second,
    .first,
    .second,
    .third,
    #blog,
    .post-horizontal,
    .post-vertical,
    footer,
    footer > div,
    #onthe,
    #blog-page,
    #newsletter-contact,
    #socialmedia,
    #subscribe-form,
    #gallery {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-right: 0;
        display: block;

    }

    #aboutme,
    #yoga,
    #hatha,
    #newsletter,
    #testimonials,
    #cv,
    #kindwords {
        max-height: 100%;
        width: auto;
    }

    #aboutme .main-img img,
    #yoga .main-img img,
    #hatha .main-img img,
    #newsletter .main-img img,
    #testimonials .main-img img,
    .timeline .main-img img,
    .sec img,
    #kindwords .main-img img {
        max-height: 100%;
        width: auto;
        margin: 0 auto;
    }

    #aboutme .main-text,
    #hatha .main-text,
    #newsletter .main-text,
    #testimonials .main-text,
    .timeline .main-text,
    #cv .main-text,
    #kindwords .main-text,
    #onthe .main-text {
        padding: 2rem 4rem 3rem 0rem;
    }

    #yoga .main-text {
        padding: 2rem 2rem 3rem 0rem;
    }

    .tag {
        margin: 0 auto;
        text-align: center;
    }

    .first img,
    #newsletter-contact .main-img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .second img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    #collage-second .second img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .third img {
        max-height: 100%;
        width: auto;
        margin: 0 auto;
    }

    .third p {
        position: absolute;
        background: url(/wp-content/themes/natijoga/img/blob.svg) top center no-repeat;
        background-size: 100%;
        bottom: -80px;
    }

    #intro-img {
        margin-top: 2rem !important;
    }

    #subscribe-form input[type="email"],
    #subscribe-form input[type="text"] {
        width: 100%;
    }

    .first:after {
        right: 10px;
    }

    .third:after {
        bottom: -80px;
        right: 20px;
    }

    .insta {
        top: -10px;
        left: 10px;
    }
    .inner-page .insta {
        top:15px!important;
    }

    #pitch {
        background: #590a2f;
        padding: 16px;
        margin: -1.5rem 0rem 0 0rem;
    }

    #quote {

        font-size: 40px;
        max-width: 100%;
        margin: -4rem -1rem 0 -1rem;
        padding: 6rem 1rem 7rem 2.5rem;
        overflow: hidden;
        clear: both;
    }

    #quote p {
        max-width: 100%;
    }

    #video {
        max-width: 100%;
        margin-left: 0;
        padding: 13rem 2rem 8rem 0rem;
        z-index: 0;
        color: #590a2f;
    }
    .video-box {
      max-width: 100%;
    max-height: 100%;
    display: block;
    }

    #star {
        width: 84px;
        height: 59px;
    }

    #yoga ul {
        margin-left: 1.5rem;
    }

    #collage,
    #collage-second {

        padding-top: 0;
    }

    .first,
    .second,
    .third {
        margin-top: 0.5rem;
    }

    .star {
        width: 40px;
        height: 45px;
        margin: 1rem auto 1rem auto;
    }

    #blog {
        padding-top: 0rem;
    }

    .post-horizontal {
        margin: 2rem 1rem 0 0;
    }

    .post-vertical {
        margin: 2rem 0 0 0rem;
    }

    #blog .button-secondary {
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    footer .column-3 {
        padding-left: 0;
    }

    #contact,
    #footer-menu,
    .legal {
        margin-bottom: 2rem;
    }

    #intro-text {
        margin-top: 1rem;
    }

    #grey {
        width: 900px;
        height: 600px;
        display: inline-block;
        margin-top: 3rem;
    }

    #portrait {
        height: auto;
        width: 100%;
        margin-left: 0rem;
    }

    #grey-star {
        width: 128px;
        height: 84px;
    }

    #welcome-video p {
        margin: 2rem 0rem 2rem 0rem;
    }

    .two {
        margin-top: 1.5rem;
        margin-left: 0rem;
    }

    #kindwords .star {

        width: 40px;
        height: 45px;
        margin: 2rem auto 1rem auto;
    }

    .table-image {
        max-width: 100%;
        height: auto;
        display: inline-block;
        margin: 2rem 0 0 0;
    }

    #grey-bg {
        width: 820px;
        height: 250px;
        margin: 6rem 0 0 -3rem;
    }

    .click-here {
        margin-bottom: 3rem;
    }

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

    #classes-intro h2 {
        margin-top: 2rem;
    }

    #gallery img {
        max-width: 100%;
        height: auto;
    }

    #blogpost-text {
        margin-left: 0rem;
        padding: 2rem 0 0 0rem;

    }

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

    #gyakori {
        margin-top: 1rem;
        margin-left: 1rem;
    }

    .faq-page:before {
        top: 3px;
        width: 10px;
        height: 15px;
        left: -15px;
    }

    .blog-text {
        padding: 2rem 0 2rem 0rem;
    }

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

    #post-grid {
        margin-top: 2rem;
        padding-bottom: 2rem;
    }

    .postimage img {
        padding: 0;
    }

    .posttext {
        padding: 2rem 0 0 0.5rem;
    }

    .single-page {
        width: 100%;
        padding-right: 0;
    }

    .small-cat,
    .small {
        margin: 0.2rem 0.5rem 2rem 0;
    }

    aside {
        width: 100%;
        margin: 3rem 0 0 0;
    }

    .wp-block-image .aligncenter {
        margin-left: 0;
    }

    #newsletter-contact .main-text {
        margin-top: 3rem;
        padding: 2rem 4rem 0 0;
    }

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

    #social-img {
        margin-top: 0rem;
        margin-left: 0rem;
    }

    .social-gal-two,
    .social-gal-one {
        max-width: 100%;
        height: auto;
        padding: 20px 0 0 0;
    }

    .white-star {
        top: 4%;
    }

    .red-star {
        display: none;
    }
}
@media screen and (max-width: 1440px) and (min-width: 1025px) {
    #aboutme .main-img img{
        margin: 2.5rem 1rem -2rem -1rem;
    }
    #yoga .main-img img{
        margin: 0.5rem -1rem 0rem 3rem;
    }
    #hatha .main-img img{
        margin: 2rem 1rem 0rem -1rem;
    }
    #newsletter .main-img img{
        margin: 3rem 1rem 0rem -1rem;
    }
    #testimonials .main-img img {
        margin: 2rem -1rem -2rem 3rem;
    }
    #kindwords .main-img img {
     margin: 2rem -1rem -3rem -1rem;
    }
    .timeline .main-img img {
      margin: 3rem 1rem -2rem -1rem;
    }
    .sec img {
    margin: 4rem -1rem -3rem 0;
    }
}