@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: "Montserrat", sans-serif; font-size: 16px; color: var(--black); line-height: 2; background: url(../images/body-bg.jpg) repeat; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); transition: var(--transition); }
a:hover { color: #74af52; }
p { margin-bottom: 30px; }
p a { text-decoration: underline; color: blue; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; font-family: 'Fraunces', sans-serif; }
h1 { font-size: 110px; }
h2 { font-size: 90px; line-height: 1; }
h3 { margin-bottom: 20px; font-size: 24px; }
h4 { margin-bottom: 20px; font-size: 20px; }

/* global */
.centered { padding-right: calc((100% - 660px)/ 2); padding-left: calc((100% - 660px)/ 2); }
.centeredxl { padding-right: calc((100% - 960px)/ 2); padding-left: calc((100% - 960px)/ 2); }
 
/* wrapper */
.wrapper { width: 100%; position: relative; overflow: hidden; }

/* hero */
.hero { padding-top: 20px; padding-bottom: 20px; margin-bottom: 50px; width: 100%; overflow: hidden; position: relative; min-height: 100svh; display: flex; align-items: center;  }
.hero .block { width: 100%; position: relative; }
.hero .heading { position: absolute; left: 0; top: 50%; z-index: 2; transform: translateY(-50%); max-width: 590px; width: 100%; }
.hero .logo { margin-top: -20px; position: relative; display: block; z-index: 2; width: 210px; height: 41px; }
.hero .logo svg { width: 210px; height: 41px; display: block; fill: #569041; }
.hero h1 { line-height: 1; }
.hero h1 span { color: #8cdd60; }
.hero .heroImg { margin-left: auto; max-width: 660px; width: 100%; position: relative; }
.hero .heroImg:before { position: absolute; left: -5px; top: 50%; transform: translateY(-50%); z-index: 1; content: ''; width: 220px; height: 376px; background: url(../images/hero-bg.png) no-repeat; background-size: cover; }
/* .hero .heroImg:after { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: url(../images/hero-bg1.png) no-repeat; background-size: contain; animation: roundImg 20s infinite linear;  } */
.hero .aniImg { animation: roundImg 80s infinite linear; }
.hero .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero .thyroid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 25%; z-index: 1; }
.hero .thyroid img { animation: heartbeat 3s infinite ease-in-out; }
.hero .leftTop { position: absolute; left: 5%; top: 8%; width: 89px; }
.hero .leftTop img { animation: heartbeat 3s infinite ease-in-out; }
.hero .leftBottom { position: absolute; left: 10%; bottom: 15%; width: 45px; transition-delay: 0.9s; }
.hero .leftBottom img { animation: heartbeat 3s infinite ease-in-out; animation-delay: 0.3s; }
.hero .rightTop { position: absolute; right: 10%; top: 12%; width: 45px; transition-delay: 0.5s; }
.hero .rightTop img { animation: heartbeat 3s infinite ease-in-out; animation-delay: 0.3s; }
.hero .rightBottom { position: absolute; right: -80px; bottom: 0; width: 200px; transition-delay: 0.8s; }
.hero .rightBottom img { animation: heartbeat 3s infinite ease-in-out; animation-delay: 0.6s; }

@keyframes roundImg {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-60deg);
    };

    100% {
        transform: rotate(-45deg);
    };
}

@keyframes heartbeat {
    0% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.9);
    }
}

@keyframes thyroidAni {
    0% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(0.9);
    }
  }

/* text side */
.textSide { margin-bottom: 80px; width: 100%; }
.textSide .byline { margin-bottom: 30px; text-align: center; text-transform: uppercase; line-height: 1.6; } 
.textSide .meta { margin-bottom: 30px; font-size: 14px; font-weight: 600; font-style: italic; } 
.textSide h2 { margin: 0 0 40px -150px; width: calc(100% + 300px); text-transform: uppercase; text-align: center; color: transparent; }
.textSide h2 span { color: transparent; text-shadow: #111 0 0 15px; transition: 1s; }
.textSide .animate { text-shadow: #111 0 0 15px; transition: 1s; }
.textSide .animated { text-shadow: none; color: #dbd7d7; }
.textSide .animated span { text-shadow: none; color: #74af52; }
.textSide .videoBlock { margin-top: 60px; margin-bottom: 30px; position: relative; width: calc(100% + 300px); transform: translateX(-150px); display: flex; justify-content: space-between; }
.textSide .videoText { width: 53%; align-self: center; }
.textSide .video { width: 45%; align-self: center; }
.textSide .video video { width: 100%; height: 500px; object-fit: cover; object-position: center top; display: block; transform: rotate(5deg); transition: var(--transition); border: 20px solid #8cdd60; }
.textSide .video video:hover { transform: rotate(0deg); }
.textSide .bottomArrow { position: absolute; right: 0; top: -40px; display: flex; align-items: flex-start; }
.textSide .arrowVideo { width: 100px; }
.textSide .arrowVideo img { transform: rotateX(180deg); }
.textSide .title { padding-bottom: 30px; font-size: 40px; font-weight: 700; position: relative; color: var(--black); line-height: 1; text-transform: uppercase; text-align: right; }
.textSide .title:after { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ''; width: 250px; height: 16px; background: url(../images/heading-line.png) no-repeat; background-size: contain; }
.textSide .blockquoteBlock { margin: 30px 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 1; background-image: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(116,175,82,1) 100%); }
.textSide .quoteImg { padding-top: 30px; align-self: flex-end; width: 27%; }
.textSide .quoteImg img { filter: grayscale(100%); }
.textSide .quoteText { padding: 30px 0; width: 70%; align-self: center; }
.textSide blockquote { padding: 40px 0 20px 0; position: relative; color: var(--white); font-size: 24px; font-family: 'Fraunces', sans-serif; line-height: 1.4; text-align: center; }
.textSide blockquote:before,
.textSide blockquote:after { content: ''; background-repeat: no-repeat; background-size: contain; }
.textSide blockquote:before { position: absolute; left: 0; top: 0; background-image: url(../images/quote-top.png); width: 60px; height: 40px; }
.textSide blockquote:after { display: inline-block; position: relative; bottom: -15px; background-image: url(../images/quote-bottom.png); width: 30px; height: 20px;}
.textSide .quoteText span { margin-top: 5px; text-align: center; font-family: "Montserrat", sans-serif; display: block; color: #a9ff5c; font-size: 16px; }
.textSide ul { margin-bottom: 30px; list-style: none; }
.textSide ul:last-child { margin-bottom: 0; }
.textSide li { padding-left: 28px; width: 100%; position: relative; }
.textSide li:before { position: absolute; left: 0; top: 12px; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #74af52; }
.textSide .audio { margin-bottom: 30px; width: 100%; } 
.textSide .image { margin-bottom: 30px; width: 100%; display: flex; justify-content: center; }
.textSide .reportImg { max-width: 350px; width: 100%; position: relative; }
.textSide .reportImg img { width: 100%; height: auto; }
.textSide .thyroidAni { position: absolute; left: 50%; top: 10px; width: 26px; transform: translateX(-50%); }
.textSide .thyroidAni img { animation: thyroidAni 3s infinite ease-in-out; } 
.textSide .popupInfo { width: 100%; position: relative; }
.textSide .shape { padding: 20px 10px 66px 32px; font-size: 14px; line-height: 1.6; text-align: center; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: absolute; right: -230px; top: -100px; width: 220px; height: 163px; background: url(../images/shape.png) no-repeat; background-size: contain; }
.textSide .shape span { margin-bottom: 5px; display: block; font-weight: 700; font-size: 16px; }
.textSide .shape2 { padding: 106px 50px 70px 70px; text-align: center; font-size: 14px; line-height: 1.6; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: absolute; right: -190px; top: 100px; width: 220px; height: 207px; background: url(../images/shape2.png) no-repeat; background-size: contain; }
.textSide .shape2 strong { font-size: 14px; }
.textSide .shape3 { padding: 25px 50px 86px 22px; font-size: 14px; line-height: 1.6; text-align: center; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; position: absolute; right: -300px; top: -100px; width: 300px; height: 223px; background: url(../images/shape3.png) no-repeat; background-size: contain; }
.textSide .shape3 span { margin-bottom: 5px; display: block; font-weight: 700; font-size: 16px; }
.textSide .gland { position: absolute; left: -120px; top: 0; width: 100px; }
.textSide .imageSlider { position: relative; width: 300px; height: 349px; }
.textSide .imageSlider .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 300px 100%; }
.textSide .imageSlider .background-img { background-image: url("../images/sad.png"); }
.textSide .imageSlider .foreground-img { background-image: url("../images/happiness.png"); width: 50%; }
.textSide .imageSlider .slider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: transparent; outline: none; margin: 0; transition: all 0.2s; display: flex; justify-content: center; align-items: center; }
.textSide .imageSlider .slider:hover { background: transparent; }
.textSide .imageSlider .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 349px; background: var(--black); cursor: pointer; }
.textSide .imageSlider .slider::-moz-range-thumb { width: 6px; height: 600px; background: white; cursor: pointer; }
.textSide .imageSlider .slider-button { pointer-events: none; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: white; left: calc(50% - 18px); top: calc(50% - 18px); display: flex; justify-content: center; align-items: center; }
.textSide .imageSlider .slider-button:after { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.textSide .imageSlider .slider-button:before { content: ""; padding: 3px; display: inline-block; border: solid #5D5D5D; border-width: 0 2px 2px 0; transform: rotate(135deg); }
.textSide .listBlock { margin-bottom: 30px; width: calc(100% + 300px); transform: translateX(-150px); position: relative; }
.textSide .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.textSide .list li { padding: 10px 20px; width: calc(50% - 100px); min-height: 70px; display: flex; align-items: center; gap: 15px; border-radius: 40px; line-height: 1.4; box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.1); background-color: var(--white); }
.textSide .list li::before { display: none; }
.textSide .list li:nth-child(odd) { flex-direction: row-reverse; text-align: right; }
.textSide .icon { width: 40px; }
.textSide .listImg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 140px; }
.textSide .listImg img { animation: heartbeat 3s infinite ease-in-out; }
.textSide .listBlock.withoutImg { width: 100%; transform: unset; }
.textSide .listBlock.withoutImg .list { justify-content: center; }
.textSide .listBlock.withoutImg .list li { width: calc(50% - 10px); }
.textSide .listBlock.withoutImg .list li:nth-child(odd) { flex-direction: unset; text-align: left; }
.textSide .weightBlock { width: 100%; max-width: 456px; }
.textSide .weightThyroid { margin: 0 auto 80px auto; position: relative; width: 100%; max-width: 120px; }
.textSide .weightThyroid:before,
.textSide .weightThyroid:after { position: absolute; top: 60px; content: ''; width: 60px; height: 56px; background-repeat: no-repeat; background-size: contain; }
.textSide .weightThyroid:before { left: -70px; background-image: url(../images/arrowLeft.png); }
.textSide .weightThyroid:after { right: -70px; background-image: url(../images/arrowRight.png); }
.textSide .balance { width: 100%; animation: tilt 2s infinite alternate ease-in-out; transform-origin: center; }
.textSide .stand { max-width: 250px; width: 100%; margin: -33px auto 0 auto; z-index: 1; position: relative; }
  
@keyframes tilt {
    0% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}

/* audio */
.music-player-container { display: inline-block; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.music-player-container h3 { margin-bottom: 0; text-align: center; width: 100%; }
.music-player-container .audioSub { width: 100%; text-align: center; }
.album { margin-bottom: 20px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65); width: 150px; height: 150px; position: relative; border-radius: 50%; }
.album-art { height: 150px; position: relative; width: 150px; z-index: 10; border-radius: 50%; overflow: hidden; }
.album-art:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0.3); }
.album-art img { filter: grayscale(100%); }
.audiobg { animation: spin 2s linear infinite; transition: all 500ms; background-image: url('../images/audio-bg.png'); background-position: center, center; background-size: cover, 40% auto; background-repeat: no-repeat; border-radius: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); position: absolute; left: 10px; top: 10px; width: 130px; height: 130px; z-index: 5; will-change: transform, left; display: flex; align-items: center; justify-content: center; }
.audiobg img { width: 25%; border-radius: 50%; }
.is-playing .audiobg { left: -15px; top: -15px; width: 180px; height: 180px; }
.music-player-controls { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; text-align: center; z-index: 11; }
[class^="control-"] { border-radius: 100%; display: inline-block; height: 44px; margin: 0 3px; width: 44px; }
[class^="control-"]:hover { cursor: pointer; }
.control-play { background: transparent url('../images/play-button.png') center / cover no-repeat; }
.is-playing .control-play { background: transparent url('../images/pause-button.png') center / cover no-repeat; }

@keyframes spin {
    0% {
        transform: rotate(0deg);
   }
    100% {
        transform: rotate(360deg);
   }
}

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }
.copyright { padding-bottom: 20px; font-size: 12px; text-align: center; color: var(--white); background-color: var(--black); }

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); opacity: 0; visibility: hidden; }
.share-btn.show { opacity: 1; visibility: visible; }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); }

/* animation */
@keyframes bounce {
    50% { transform: translate(-50%, -15px); }
}

@media screen and (max-width: 1260px)  {
    .textSide .shape3 { position: relative; right: unset; top: unset; margin: 0 auto; }
}

@media screen and (max-width: 1120px)  {
    .textSide .popupInfo { margin-bottom: 30px; display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
    .textSide .shape,
    .textSide .shape2,
    .textSide .gland { position: relative; left: unset; right: unset; top: unset; }
}

@media screen and (max-width: 1000px)  {
    h1 { font-size: 72px; }
    h2 { font-size: 60px; }

    .centeredxl { padding-left: 20px; padding-right: 20px; }

    .hero .logo { margin-top: -10px; width: 150px; height: 30px; }
    .hero .logo svg { width: 150px; height: 30px; }
    .hero .heroImg { margin: 0 auto; max-width: 480px; }
    .hero .heroImg:before { width: 190px; height: 320px; }
    .hero .thyroid { width: 22%; }
    .hero .leftTop { width: 70px; }
    .hero .rightBottom { width: 120px; right: -50px; }

    .textSide h2 { margin-left: 0; width: 100%; transform: unset; }
    .textSide .videoBlock { width: 100%; transform: unset; }
    .textSide .bottomArrow { right: 20px; }
    .textSide .arrowVideo { width: 80px; }
    .textSide .play { position: relative; top: 6px; }
    .textSide .title { font-size: 40px; }
    .textSide .title:after { width: 180px; height: 11px; } 
    .textSide .video video { height: 450px; border-width: 10px; }
    .textSide .quoteImg { width: 30%; }
    .textSide .quoteText { width: 68%; }
    .textSide blockquote { padding-top: 30px; font-size: 20px; }
    .textSide blockquote:before { width: 44px; height: 30px; }
    .textSide .quoteText span { font-size: 14px; }
    .textSide .listBlock { width: 100%; transform: unset; }
}

@media screen and (max-width: 700px)  {
    h1 { font-size: 60px; }
    h2 { font-size: 40px; }    
    h3 { font-size: 20px; }

    .centered { padding-left: 20px; padding-right: 20px; }

    .hero .heading { margin-bottom: 20px; position: relative; text-align: center; top: unset; left: unset; transform: unset; }
    .hero .heroImg:before { display: none; }
    .hero .logo { margin: 0 auto; width: 110px; height: 22px; }
    .hero .logo svg { width: 110px; height: 22px; }
    .hero .leftTop { width: 40px; top: 3%; }
    .hero .rightTop { right: 3%; top: 8%; width: 35px; }
    .hero .rightBottom { width: 80px; right: -30px; }
    .hero .leftBottom { bottom: 6%; }
    .hero .bg img { object-fit: contain; }

    .textSide { margin-bottom: 50px; }
    .textSide h2 { margin-bottom: 20px; }
    .textSide .list li { width: 100%; }
    .textSide .list li:nth-child(odd) { flex-direction: unset; text-align: left; }
    .textSide .listImg { display: none; }
    .textSide .videoBlock { margin-top: 0; display: block; }
    .textSide .videoText { margin-bottom: 50px; width: 100%; }
    .textSide .title { padding-bottom: 20px; text-align: center; font-size: 25px; }
    .textSide .title:after { width: 140px; height: 10px; }
    .textSide .video { margin-inline: auto; width: 100%; max-width: 320px; }
    .textSide .blockquoteBlock { padding-top: 30px; }
    .textSide blockquote { padding-top: 20px; font-size: 16px; }
    .textSide blockquote:before { width: 30px; height: 22px; }
    .textSide blockquote:after { width: 20px; height: 15px; }
    .textSide .quoteImg { padding-top: 0; margin: 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background-color: var(--white); }
    .textSide .quoteText { width: 100%; }
    .textSide .quoteText span { line-height: 1.6; }
    .textSide .audio { padding-left: 10px; padding-right: 10px; }
    .textSide .audio-img { margin-right: 10px; width: 70px; height: 70px; }
    .textSide .audio-text { width: calc(100% - 80px); }
    .music-player-container h3 { font-size: 16px; }
}