/* MOBILE */

.content p {
    text-align: justify;
}

.main-menu-button-inner {
    width: 29px;
    height: 22px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.main-menu-button-inner span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #6B1A69;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.main-menu-button-inner span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.main-menu-button-inner span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.main-menu-button-inner span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.menu-open .main-menu-button-inner span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 5px;
}

.menu-open .main-menu-button-inner span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.menu-open .main-menu-button-inner span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 20px;
    left: 5px;
}

.main-menu-mask,
.main-menu-button,
.main-menu-top,
.mobile {
    display: none;
}

@media screen and (max-width: 1450px) {
    .header-left {
        width: 250px;
        padding-right: 10px;
    }
    .main-menu a {
        font-size: 1.7rem;
        padding: 10px 12px;
    }
}


/* 1450 px */

@media screen and (max-width: 1300px) {
    .home-slide-text {
        right: -5%!important;
    }
    .research-entries .content-link-button a {
        width: 140px;
    }
    .re-title {
        width: calc(100% - 140px)
    }
}


/* 1300 px */

@media screen and (max-width: 1200px) {
    .main-menu-mask,
    .main-menu-button,
    .main-menu-top {
        display: block;
    }
    .main-menu-mask {
        position: absolute;
        display: none;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 100;
    }
    body.menu-open .main-menu-mask {
        display: block;
    }
    header {
        position: sticky;
        width: 100%;
        padding: 15px 0 20px 0;
        text-align: right;
        z-index: 101;
    }
    header .wrapper {
        align-items: center;
    }
    .header-left {
        width: 150px;
        padding: 0;
    }
    .header-logo {
        padding: 0;
    }
    .header-right {
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .header-right-top {
        margin-bottom: 0;
        margin-right: 30px;
    }
    .header-right-bottom {
        gap: 0;
    }
    .main-menu-button {
        display: inline-block;
        z-index: 999;
    }
    .main-menu-button-inner {
        width: 29px;
        height: 22px;
        position: relative;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    .main-menu-button-inner span {
        display: block;
        height: 2px;
        width: 100%;
        background-color: #000000;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    .main-menu-corner {
        width: 100%;
        padding: 0 20px;
    }
    .main-menu {
        display: block;
        position: fixed;
        top: 0;
        right: -300px;
        width: 100%;
        max-width: 300px;
        min-width: 300px;
        height: 100vh;
        margin-top: 0;
        margin-right: 0;
        padding-top: 80px;
        background-color: #fff;
        box-shadow: 0 0 5px #b0b0b0;
        -webkit-transition: right 0.25s ease-in-out;
        transition: right 0.25s ease-in-out;
        overflow-y: auto;
        z-index: 101;
    }
    .main-menu-button-inner span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
    .main-menu-button-inner span:nth-child(2) {
        top: 10px;
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
    .main-menu-button-inner span:nth-child(3) {
        top: 20px;
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
    .menu-open .main-menu {
        right: 0;
        overflow-y: scroll;
        -webkit-transition: right 0.25s ease-in-out;
        transition: right 0.25s ease-in-out;
        overflow: scroll;
    }
    .menu-open .main-menu-button-inner span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: -3px;
        left: 8px;
    }
    .menu-open .main-menu-button-inner span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    .menu-open .main-menu-button-inner span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 17px;
        left: 8px;
    }
    .menu-open .main-menu-button {
        position: relative;
    }
    .main-menu ul {
        flex-wrap: wrap;
        gap: 0;
    }
    .main-menu li {
        width: 100%;
        text-align: left;
    }
    .home-large-text,
    .hs3-1 {
        font-size: 5.4rem;
    }
    .hs3-2 img {
        height: auto;
        bottom: 0;
        top: unset;
        width: 50%;
    }
    .hs3-2,
    .hs3-3-2 h3 {
        font-size: 3.5rem;
    }
    .main-menu li ul {
        position: relative;
        background-color: #f4f4f4;
        width: 100%;
        box-shadow: 0 0 0;
    }
    .main-menu li ul a {
        font-size: 2rem;
    }
}


/* 1200 px */

@media screen and (max-width: 1024px) {
    html {
        font-size: 47%;
    }
    .main-menu a {
        font-size: 2.2rem;
        padding: 15px 12px;
        width: 100%;
    }
    a.header-donate {
        padding: 10px 14px 10px 38.4px;
        font-size: 2.2rem;
    }
    a.header-donate:before {
        width: 18px;
        height: 17px;
        left: 14px;
    }
    .home-slide-text {
        padding: 32px;
    }
    .home-slide-link:before {
        content: '';
        width: 36px;
        height: 36px;
        margin-right: 16px;
        background: black url(images/arrow-white.png) no-repeat 13.6px center;
        background-size: 12px auto;
    }
    .hs3-2 a {
        padding: 8px 16px 8px 40px;
        background: #00afd7 url(images/icon-play.png) no-repeat 20px center;
        background-size: 12px auto;
    }
    .footer-social {
        gap: 20px;
    }
    .footer-social a {
        width: 40px;
        height: 40px;
    }
    .hs3-3 {
        padding: 30px 0;
    }
    .home-section-2 {
        padding: 30px 0;
    }
    .hs3-3-text .wrapper {
        padding: 0;
    }
    .content-link-button a,
    span.content-link-button {
        padding: 12px 18px 12px 18px;
    }
    .be-text {
        width: 58%;
    }
    .be-image {
        width: 40%;
    }
    .content p,
    .content li {
        font-size: 2rem;
    }
    .hs3-1 {
        padding: 16px 0 64px 0;
    }
    .hs3-3-photo:nth-child(2) {
        margin-top: 90px;
    }
    .hs3-3-photo:nth-child(4) {
        margin-top: 70px;
    }
}


/* 1024 px */

@media screen and (max-width: 768px) {
    .home-slide-heading-large {
        font-size: 3.6rem;
    }
    .hs2-row {
        flex-wrap: wrap;
        margin-bottom: 8%;
    }
    .hs2-row-main {
        width: 100%;
        text-align: center;
    }
    .hs2-row-text {
        width: 100%;
        margin-top: 5%;
    }
    .hs2-row-main img {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: auto;
    }
    .content-2col {
        flex-wrap: wrap;
        flex-direction: column;
    }
    .content-2col-text {
        width: 100%;
        margin-bottom: 5%;
    }
    .content-2col-image {
        width: 100%;
    }
    .flex {
        flex-wrap: wrap;
    }
    .col-left {
        flex-basis: 100%;
        order: 2;
        max-width: 300px;
        margin: auto;
    }
    .col-right {
        flex-basis: 100%;
        padding-bottom: 40px;
        text-align: center;
    }
}


/* 768 px */

@media screen and (max-width: 650px) {
    .wide-wrapper .wrapper {
        width: 100%;
    }
    .home-slide-image {
        left: unset;
        width: 100%;
    }
    .home-slide-text {
        position: relative;
        width: 100%!important;
        right: 0!important;
        padding-right: 0!important;
        transform: unset;
        padding: 3%;
    }
    .home-slide-link-container {
        margin-top: 2%;
    }
    .hs3-2 .wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: 30px auto 0;
        padding-bottom: 0;
    }
    .hs3-2 h3 {
        width: 100%;
        text-align: center;
    }
    .hs3-2 a {
        margin: auto;
    }
    .hs3-2 img {
        position: relative;
        width: 80%;
        order: 2;
        margin: 5% auto 0;
    }
    .home-large-text,
    .hs3-1 {
        font-size: 3.6rem;
    }
    .footer-text {
        padding: 0 5%;
    }
    .hs3-3-photo {
        width: 22%;
        padding-bottom: 22%;
    }
    .blog-entry-2col {
        flex-wrap: wrap;
    }
    .be-text {
        width: 100%;
        margin-bottom: 3%;
    }
    .be-image {
        width: 100%;
        max-width: 300px;
    }
    .blog-entry {
        padding-bottom: 40px;
        margin-bottom: 40px;
    }
    .research-entry {
        flex-wrap: wrap;
    }
    .re-title {
        width: 100%;
        margin-bottom: 5%;
    }
    .blog-nav-link {
        width: 49%;
    }
    a.blog-nav-link {
        gap: 10px;
    }
    .home-section-2 {
        padding: 30px 0;
    }
    .hs3-1 {
        padding: 0;
    }
    .hs3-3 {
        padding: 30px 0;
    }
    .home-section-3 {
        overflow: hidden;
    }
    .hs3-3-photos .wrapper {
        flex-wrap: wrap;
    }
    .hs3-3-photo {
        width: 48%;
        padding-bottom: 48%;
    }
    .hs3-3-photos:after {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% + 120px);
        height: 53%;
        left: -50px;
        top: 30%;
        background: url(images/bg-line.png) no-repeat left top;
        background-size: auto 250px;
    }
    .hs3-3-photos:before {
        content: '';
        display: block;
        position: absolute;
        width: calc(100% + 120px);
        height: 37%;
        right: -50px;
        bottom: -6%;
        background: url(images/bg-line.png) no-repeat left 64% top;
        background-size: auto 250px;
        z-index: -1;
    }
    .hs3-3-photo:nth-child(2) {
        margin-top: 100px;
    }
    .hs3-3-photo:nth-child(4) {
        margin-top: 80px;
    }
    .home-slide-link {
        height: 24px;
    }
    .home-slide-link:before {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        background-position: 8px center;
        background-size: 9px auto;
    }
    .header-search .search-form {
        padding: 6px 12px;
    }
    .search-form-text {
        font-size: 17px;
    }
    .language-options a,
    .language-options span {
        margin: 0 6px;
    }
    .header-right-top {
        gap: 15px;
        margin-right: 15px;
    }
}


/* 650 px */

@media screen and (max-width: 450px) {
    .home-slide-heading-large {
        font-size: 3.2rem;
    }
    .home-slide-link:before {
        content: '';
        width: 30px;
        height: 30px;
        margin-right: 10px;
        background: black url(images/arrow-white.png) no-repeat 12.6px center;
        background-size: 8px auto;
    }
    .header-right-top {
        gap: 10px;
    }
    .page-header {
        flex-wrap: wrap;
        margin-bottom: 4em;
    }
    .page-heading {
        width: 100%;
        margin-bottom: 0.4em;
    }
    .header-search .search-form {
        width: 100%;
    }
    .search-form-text {
        width: calc(100% - 39px);
    }
    .header-left {
        width: 120px;
    }
    a.header-donate {
        font-size: 1.6em;
        padding: 10px 8px 10px 34px;
    }
    a.header-donate:before {
        width: 15px;
        height: 13px;
        left: 12px;
    }
}


/* 450 px */

@media screen and (max-width: 375px) {
    html {
        font-size: 40%;
    }
    .header-left {
        width: 100px;
    }
    .language-options a,
    .language-options span {
        margin: 0 0px;
    }
}


/* 375 px */