/* intro */

.intro-infographic {
    background: #F0EEEE;
    padding: 260px 0 185px;
    position: relative;
    /* background: #F0EEEE url(../build/img/intro-top3.png) no-repeat top 50px center / 1484px 318px; */
    background: #F0EEEE;
}
.intro-infographic .container {
    position: relative;
    z-index: 2;
}

.plane-1 {
    position: absolute;
    top: 215px;
    right: -150px;
    animation: plane1 25s linear infinite;
}

@keyframes plane1 {
    0%   {transform: translateX(0); opacity: 1; }
    95%   {transform: translateX(-150vw); opacity: 1; }
    100% {transform: translateX(-150vw); opacity: 0; }
}

.plane-2 {
    position: absolute;
    top: 80px;
    left: -165px;
    animation: plane2 35s linear infinite;
}

@keyframes plane2 {
    0%   {transform: translateX(0); opacity: 1; }
    95%   {transform: translateX(150vw); opacity: 1; }
    100% {transform: translateX(150vw); opacity: 0; }
}

.infographic-wrapper {
    position: relative;
    overflow: hidden;
}
.infographic-wrapper .container {
    max-width: 1200px;
}

.intro-infographic > a{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    bottom: 80px;
    width: 29px;
    height: 47px;
    background: url(../build/img/arrow-sd.svg) no-repeat center center / 100% 100%;
    animation: arrowDown 1s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

@keyframes arrowDown {
    0%   {transform: translate(-50%, 0px);  }
    70%   {transform: translate(-50%, 10px); }
    100%   {transform: translate(-50%, 0px); }
}

.intro-infographic-title {
    font-size: 75px;
    line-height: 1.33;
    font-weight: 300;
    margin-bottom: 40px;
}
.intro-infographic-title strong {
    font-weight: 900;
    color: #a5cd39;
}

.intro-infographic-text-left {
    font-size: 30px;
    line-height: 1.33;
    font-weight: 300;
    padding-right: 20px;
}

.intro-infographic-text-left strong {
    color: #a5cd39;
    font-weight: 700;
}

.container.container-md {
    max-width: 1000px;
}
.container.container-intro-middle {
    max-width: 1300px;
    width: 100%;
}

.intro-infographic-text-right {
    font-size: 18px;
    font-weight: 300;
    padding-left: 20px;
}

.intro-middle {
    margin-bottom: 100px;
}

.intro-top {
    background-size: contain !important;
    padding-bottom: 30%;
}

.infographic-1-hold {
    background: #13BDCE;
    padding: 135px 0 250px;
    position: relative;
}

.infographic-main-title {
    color: #fff;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 700;
    margin-bottom: 135px;
}

.container.container-md {
    max-width: 900px;
}
.container.container-xs {
    max-width: 480px;
}

.orn-1-top {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* width: 1034px;
    height: 383px;
    background: url(../build/img/orn-1-top.svg) no-repeat center center / 100% 100%; */
}

.text-simple {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}

.ts-11 {
    margin-bottom: 15px;
}

.orn-1-bottom {
    position: absolute;
    bottom: 0;
    left: calc((100vw - 1050px) / 2);
    /* width: 519px;
    height: 281px;
    background: url(../build/img/orn-1-bottom.svg) no-repeat center center / 100% 100%; */
}

.digit-lg {
    font-weight: 900;
    font-size: 150px;
    line-height:1;
    color: #fff;
    text-shadow: 10px 4px 0px #1ca7b8;
}

.infographic-1-img {
    margin-top: -55px;
}

.ts-12 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    text-align: center;
    bottom: 50px;
}

.infographic-2-hold {
    background: #3A546B;
    position: relative;
}

.infographic-2-section-1-hold {
    min-height: 100vh;
}

.infographic-main-title-hold {
    padding-top: 130px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 25;
}
.infographic-main-title-hold.trig {
    position: fixed;
}
.infographic-main-title-3-hold {
    padding-top: 130px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 25;
}
.infographic-main-title-3-hold.trig {
    position: fixed;
}

.infographic-gap {
    min-height: 500px;
}
.infographic-gap.gap-smaller {
    min-height: 300px;
}

.infographic-2-section-1 {
    position: relative;
    padding-top: 395px;
    transition: opacity 0.2s;
}
.infographic-2-section-1.trig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.infographic-2-section-1.fadeout {
    opacity: 0;
}

.c-skyblue {
    color: #13BDCE;
}
.c-blue {
    color: #3A546B;
}


.money-label {
    color: #fff;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 700;
    transition: 0.4s;
}

.money-middle {
    color: #13BDCE;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 700;
    text-align: center;
}

.ts-21 {
    margin-bottom: 20px;
}

.money-left {
    padding-left: 40px;
}
.money-left.fadeout {
    opacity: 0;
    transform: translateX(-200px);
}

.money-right {
    text-align: right;
    padding-right: 40px;
}
.money-right.fadeout {
    opacity: 0;
    transform: translateX(200px);
}

.container.container-money {
    max-width: 950px;
}

.arrow-money {
    margin-bottom: 30px;
}

.ts-22 {
    margin-bottom: 100px;
}

.orn-2-top {
    position: absolute;
    /* width: 519px;
    height: 386px;
    background: url(../build/img/orn-2-top.svg) no-repeat center center / 100% 100%; */
    top: 0;
    left: calc((100vw - 1050px) / 2);
    transition: opacity 0.2s;
}

.orn-2-top.trig {
    position: fixed;
}
.orn-2-top.fadeout {
    opacity: 0;
}

.sea-hold {
    position: relative;
    height: 100vh;
}

.sea {
    position: relative;
    height: 100vh;
}
.sea.trig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.sea.fadeout{
    opacity: 0;
    visibility: hidden;
}

.wave-1 {
    position: absolute;
    width: calc(100% + 200px);
    bottom: 0;
    left: -100px;
    height: 386px;
    background: url(../build/img/wave-1.png) repeat center center / 306px 386px;
    z-index: 1;
    animation: wave 4s 1s linear infinite;
}

.wave-2 {
    position: absolute;
    width: calc(100% + 200px);
    bottom: -20px;
    left: -100px;
    height: 386px;
    background: url(../build/img/wave-2.png) repeat center center / 306px 386px;
    z-index: 2;
    animation: wave 4s linear infinite;
}
.sea-trigger {
    position: absolute;
    top: -300px;
}

.infographic-2-section-3-hold {
    min-height: 100vh;
    background: #31a9ec;
    position: relative;
    z-index: 18;
}

.infographic-3-section-1 {
    padding-top: 360px;
    transition: 0.3s;
}

.infographic-3-section-1.trig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.infographic-3-section-1.fadeout {
    opacity: 0;
    visibility: hidden;
}

.infographic-2-section-3-bottom {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}


@-webkit-keyframes wave {
    from { -webkit-transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { -webkit-transform: rotate(-360deg) translateX(5px) rotate(360deg); }
}

@-moz-keyframes wave {
    from { -moz-transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { -moz-transform: rotate(-360deg) translateX(5px) rotate(360deg); }
}

@-o-keyframes wave {
    from { -o-transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { -o-transform: rotate(-360deg) translateX(5px) rotate(360deg); }
}

@keyframes wave {
    from { transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { transform: rotate(-360deg) translateX(5px) rotate(360deg); }
}


.ship {
    position: absolute;
    width: 512px;
    height: 206px;
    background: url(../build/img/ship.svg) no-repeat center center / 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    top: -130px;
}

.sea-text {
    position: fixed;
    bottom: 40px;
    width: 100%;
    max-width: 400px;
    padding: 0 20px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.sea-text.trig {
    opacity: 1;
    visibility: visible;
}
.sea-text.fadeout {
    opacity: 0;
    visibility: hidden;
}

.sea-percent {
    color: #fff;
    font-weight: 900;
    font-size: 150px;
    line-height: 1;
}
.sea-percent span {
    font-size: 100px;
}

.ts-3 {
    margin-bottom: 20px;
}

.c-white {
    color: #fff;
}

.orn-3-top {
    position: fixed;
    top: 0;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    /* width: 1035px;
    height: 755px;
    height: 700px;
    background: url(../build/img/orn-3-top.svg) no-repeat center center / 100% 100%;
    opacity: 0;
    visibility: hidden; */
    z-index: 10;
    transition: 0.2s;
}
.orn-3-top.trig {
    opacity: 1;
    visibility: visible;
}
.orn-3-top.fadeout {
    opacity: 0;
    visibility: hidden;
}

.infographic-2-section-3-content {
    padding-top: 400px;
    position: relative;
    min-height: 100vh;
    background-size: cover ;
}

.infographic-2-section-3-content.trig {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    right: 0;
}

.infographic-2-section-3-content .container {
    position: relative;
    z-index: 4;
}

.orn-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url(../build/img/bg-23.svg) no-repeat center center;
    background-size: cover;
    z-index: 3;
}

.infographic-2-section-3-content.fadeout {
    opacity: 0;
    visibility: hidden;
}
.infographic-2-section-3-content:before {
    content: '';
    position: absolute;
    width: calc(100% + 200px);
    top: -60px;
    left: -100px;
    height: 386px;
    background: url(../build/img/wave-2.png) repeat center center / 306px 386px;
    z-index: 2;
    animation: wave 4s linear infinite;
}

.text-title {
    color: #fff;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 900;
}

.infographic-3-hold {
    background: #F0EEEE;
    min-height: 100vh;
    position: relative;
    z-index: 30;
}

.infographic-3-section-1-hold {
    min-height: 100vh;
    position: relative;
}

.mb10 {
    margin-bottom: 10px;
}

.container.container-smd {
    max-width: 700px;
}
.container.container-sm {
    max-width: 600px;
}

.circles ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.circles ul li {
    width: 50%;
    text-align: center;
    padding: 0 7%;
}

.ts-31 {
    margin-bottom: 45px;
}

.circle-icon {
    margin-bottom: 30px;
}

.circle-title {
    font-size: 45px;
    line-height: 1.3;
    font-weight: 900;
    margin-bottom: 30px;
}

.circle-text {
    font-size: 18px;
    line-height: 1.4;
}

.circle-text p {
    margin-bottom: 25px;
}
.circle-text p:last-child {
    margin-bottom: 0px;
}

.circle-text h5 {
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

.c-orange {
    color: #E96C30;
}

.c-green {
    color: #27B998;
}

.orn-33 {
    position: absolute;
    width: 1036px;
    height: 802px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(../build/img/orn-33.svg) no-repeat center center / 100% 100%;
}

.infographic-3-section-2 {
    padding-top: 370px;
    position: fixed;
    min-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.infographic-3-section-2.trig {
    opacity: 1;
    visibility: visible;
}
.infographic-3-section-2.fadeout {
    opacity: 0;
    visibility: hidden;
}

.thirds-question {
    color: #379ED8;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 45px;
}

.ts-s3e2-bottom {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.thrids ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.thrids ul li {
    width: 29%;
    margin-right: 6.5%;
    background: #13BDCE;
    text-align: center;
    position: relative;
}
.thrids ul li:nth-child(3n) {
    margin-right: 0%;
}

.third-block {
    height: 228px;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 900;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 8px 8px 0px 0px rgba(216,216,216,1);
    -moz-box-shadow: 8px 8px 0px 0px rgba(216,216,216,1);
    box-shadow: 8px 8px 0px 0px rgba(216,216,216,1);
}

.third-hover {
    position: absolute;
    padding: 20px 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 130%;
    color: #fff;
    font-size: 45px;
    line-height: 1.33;
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #4A4B4D;
    opacity: 0;
    visibility: hidden;
    -webkit-box-shadow: 10px 10px 0px 0px rgba(216,216,216,1);
    -moz-box-shadow: 10px 10px 0px 0px rgba(216,216,216,1);
    box-shadow: 10px 10px 0px 0px rgba(216,216,216,1);
    transition: 0.2s;
}
.third-hover span {
    padding-top: 10px;
    display: block;
    font-size: 18px;
    font-weight: 300;
}

.thrids ul li:hover .third-hover {
    opacity: 1;
    visibility: visible;
}

.third-hover.third-hover-yes {
    background: #A5CD39;
}

.c-dark {
    color: #131E27;
}

.infographic-4-hold {
    background: #A5CD39;
    position: relative;
    z-index: 35;
    min-height: 100vh;
}

.infographic-main-title-4-hold {
    padding-top: 130px;
}

.infographic-main-title p {
    margin-top: 30px;
    padding: 0 12%;
}

.infographic-main-title-4-hold {
    padding-top: 130px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.infographic-main-title-4-hold.trig {
    position: fixed;
}

.infographic-4-section-1 {
    padding-top: 300px;
    transition: 0.3s;
}
.infographic-4-section-1.trig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.infographic-4-section-1.fadeout {
    opacity: 0;
    visibility: hidden;
}

.carries {
    /* margin-bottom: 50px;
    transform: translateY(-50px);
    opacity: 0;
    transition: 0.3s; */
}

.carries ul li {
    margin-bottom: 50px;
    transform: translateY(-50px);
    opacity: 0;
    transition-duration: 0.3s;
    transition-delay: 0s;

}

.infographic-4-section-1.trig .carries ul li {
    transform: translateY(0px);
    opacity: 1;
    transition-duration: 0.3s;
}
.infographic-4-section-1.trig .carries ul li:nth-child(2) {
    transition-delay: 0.2s;
}
.infographic-4-section-1.trig .carries ul li:nth-child(3) {
    transition-delay: 0.4s;
}

.carries ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.carries ul li {
    width: 33.333%;
    text-align: center;
    position: relative;
}

.digit {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 75px;
    font-weight: 900;
    color: #fff;
    text-shadow: 3px 6px 0px #88aa36;

}
.mb40 {
    margin-bottom: 40px;
}

.infographic-4-section-2-hold {
    position: relative;
    min-height: 100vh;
}

.infographic-4-section-2 {
    position: fixed;
    min-height: 100vh;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 300px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.infographic-4-section-2.trig {
    opacity: 1;
    visibility: visible;
}
.infographic-4-section-2.fadeout {
    /* opacity: 0;
    visibility: hidden; */
}
.infographic-4-section-2.fadeout .container-sm {
    opacity: 0;
    visibility: hidden;
}
.infographic-4-section-2.fadeout .text-simple {
    opacity: 0;
    visibility: hidden;
}

.car {
    margin-bottom: 40px;
}

.car-hold img {
    height: 300px;
}
.car-hold {
    transform: translateX(-70vw);
    transition: 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.car-hold.drive-in {
    transform: translateX(0vw);
}
.car-hold.drive-out {
    transform: translateX(80vw);
    transition: 0.8s cubic-bezier(0.32, 0, 0.67, 0);
}

.infographic-4-section-3-hold {
    position: relative;
    min-height: 100%;
}
.infographic-4-section-3 {
    position: fixed;
    min-height: 100vh;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 300px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.infographic-4-section-3.trig {
    opacity: 1;
    visibility: visible;
}
.infographic-4-section-3.fadeout {
    opacity: 0;
    visibility: hidden;
}

.digit-4 {
    text-shadow: 10px 4px 0px #88aa36;
    margin-bottom: 60px;
}

.orn-41 {
    position: fixed;
    top: 0;
    right: calc((100vw - 1050px) / 2);
    transform: translateX(100%);
    /* width: 240px;
    height: 228px;
    background: url(../build/img/orn-41.svg) no-repeat center center / 100% 100%;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s; */
}
.orn-41.trig {
    opacity: 1;
    visibility: visible;
}

.ts-s4e3-bottom {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}
.ts-s4e2-bottom {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.infographic-5-hold {
    position: relative;
    background: #F0EEEE;
    z-index: 40;
}

.infographic-main-title-5-hold {
    padding-top: 130px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transition: 0.3s;
}

.infographic-main-title-5-hold.trig {
    position: fixed;
}
.infographic-main-title-5-hold.fadeout {
    opacity: 0;
    visibility: hidden;
}

.infographic-5-section-1 {
    padding-top: 380px;
}
.infographic-5-section-1.trig {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.infographic-5-section-1.fadeout {
    opacity: 0;
    visibility: hidden;
}

.s5e11 {
    margin-bottom: 30px;
}
.s5e11 svg {
   max-height: 137px;
   width: auto !important;
}
.s5e11 #calSm2 svg {
   max-height: 160px;
}

.s5e1-text {
    font-size: 75px;
    font-weight: 900;
    line-height: 1;
    color: #379ED8;
    margin-bottom: 30px;
    text-shadow: 3px 6px 0px #c4c4c6;
}
.s5e1-text span {
    color: #3A546B;
}

.infographic-1-img svg {
    max-width: 746px;
}

.s5e1-text-orange {
    color: #E96C30;
}
.s5e1-text-green {
    color: #A5CD39;
}

.mb30 {
    margin-bottom: 30px;
}
.mb20 {
    margin-bottom: 20px;
}

.infographic-5-section-2 {
    padding-top: 360px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform:translateY(30px);
    transition: 0.3s;
}
.infographic-5-section-2.trig {
    opacity: 1;
    visibility: visible;
    transform:translateY(0px);
}
.infographic-5-section-2.fadeout {
    opacity: 0;
    visibility: hidden;
}

.infographic-5-section-2-hold {
    min-height: 100vh;
}
.infographic-5-section-3-hold {
    min-height: 100vh;
    position: relative;
}


.infographic-5-section-3 {
    min-height: 100vh;
    padding-top: 360px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: 0.3s;

}
.infographic-5-section-3.trig {
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}
.infographic-5-section-3.fadeout {
    opacity: 0;
    visibility: hidden
}

.infographic-5-section-4-hold {
    min-height: 100vh;
    position: relative;
}


.infographic-5-section-4 {
    min-height: 100vh;
    padding-top: 360px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(30px);
    visibility: hidden;
    transition: 0.3s;

}
.infographic-5-section-4.trig {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.infographic-5-section-4.fadeout {
    opacity: 0;
    visibility: hidden;
}

.s5e42 {
    margin-top: -35px;
}

.infographic-last {
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
    z-index: 50;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.infographic-last-text {
    font-size: 18px;
    color: #fff;
    margin-bottom: 30px;
}

.infographic-last-title {
    font-size: 45px;
    line-height: 1.33;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 700;
}

.btn-blue,
.btn-blue:focus,
.btn-blue:active {
    background: #13BDCE;
    color: #fff;
    display: inline-block;
    border: none;
    font-size: 20px;
    font-weight: 700;
    outline: none;
    padding: 15px 45px;
    border-radius: 30px;
    line-height: 1.3;
    box-shadow: 5px 5px 0px #96bb37;
    transition: 0.2s;
}
.btn-blue:hover {
    background: #E96C30;
    color: #fff;
    text-decoration: none;
}

.orn-31 {
    position: fixed;
    top: 0;
    left: calc((100vw - 1250px) / 2);
    /* width: 211px;
    height: 507px;
    background: url(../build/img/orn-31.svg) no-repeat center center / 100% 100%;
    opacity: 0;
    visibility: hidden; */
    transition: 0.3s;
}
.orn-31.trig {
    opacity: 1;
    visibility: visible;
}
.orn-31.fadeout {
    opacity: 0;
    visibility: hidden;
}

.orn-43 {
    position: fixed;
    left: calc((100vw - 1150px) / 2);
    bottom: 0;
    /* width: 106px;
    height: 660px;
    background: url(../build/img/orn-43.svg) no-repeat center center;
    opacity: 0;
    visibility: hidden; */
    transition: 0.2s;
}
.orn-43.trig {
    opacity: 1;
    visibility: visible;
}
.orn-43.fadeout {
    opacity: 0;
    visibility: hidden;
}

.orn-51 {
    position: fixed;
    left: calc((100vw - 1150px) / 2);
    top: 0;
    width: 117px;
    height: 161px;
    /* background: url(../build/img/orn-51.svg) no-repeat center center;
    opacity: 0;
    visibility: hidden; */
    transition: 0.3s;
}

.orn-51.trig {
    opacity: 1;
    visibility: visible;
}

.orn-51.fadeout {
    opacity: 0;
    visibility: hidden;
}

.infographic-wrapper img {
    max-width: 100%;
}
.circle-icon svg {
   max-width: 211px;
}

.infographic-wrapper strong {
    letter-spacing: 0 !important;
    font-weight: 700 !important;
}

.car-hold {
    display: inline-block;
    position: relative;
}

.digit.car-digit {
    left: 38%;
    top: 32%;
}

#Stroke-3  {
    stroke-dasharray: 433;
    stroke-dashoffset: 433;
}
.circle-icon.trig #Stroke-3  {
    animation: icon1 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    -webkit-animation: icon1 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes icon1 {
    from {
        stroke-dashoffset: 433;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#Stroke-33  {
    stroke-dasharray: 185;
    stroke-dashoffset: 185;
}
.circle-icon.trig #Stroke-33  {
    animation: icon2 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    -webkit-animation: icon2 2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes icon2 {
    from {
        stroke-dashoffset: 185;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-1-top  {
    stroke-dasharray: 2511;
    stroke-dashoffset: 2511;
}
.infographic-1-hold.trig #orn-1-top  {
    animation: orn1top 1.5s ease-in-out forwards;
    -webkit-animation: orn1top 1.5s ease-in-out forwards;
}

@keyframes orn1top {
    from {
        stroke-dashoffset: 2511;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-1-bottom  {
    stroke-dasharray: 1074;
    stroke-dashoffset: 1074;
}
.infographic-1-hold.orn-bottom #orn-1-bottom  {
    animation: orn1bottom 1.5s ease-in-out forwards;
    -webkit-animation: orn1bottom 1.5s ease-in-out forwards;
}

@keyframes orn1bottom {
    from {
        stroke-dashoffset: 1074;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-2-top  {
    stroke-dasharray: 884;
    stroke-dashoffset: 884;
}
.trig-orn-2-top #orn-2-top  {
    animation: orn2top 1.5s ease-in-out forwards;
    -webkit-animation: orn2top 1.5s ease-in-out forwards;
}

@keyframes orn2top {
    from {
        stroke-dashoffset: 884;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-3-top  {
    stroke-dasharray: 2034;
    stroke-dashoffset: 2034;
}
.orn-3-top-trig #orn-3-top {
    animation: orn3top 1.5s ease-in-out forwards;
    -webkit-animation: orn3top 1.5s ease-in-out forwards;
}

@keyframes orn3top {
    from {
        stroke-dashoffset: 2034;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.fadeout #orn-3-top {
    opacity: 0;
    visibility: hidden;
}

#orn-31  {
    stroke-dasharray: 1264;
    stroke-dashoffset: 1264;
}
.orn-31-trig #orn-31 {
    animation: orn31 1.5s ease-in-out forwards;
    -webkit-animation: orn31 1.5s ease-in-out forwards;
}

.fadeout #orn-31 {
    opacity: 0;
    visibility: hidden;
}

@keyframes orn31 {
    from {
        stroke-dashoffset: 1264;
    }
    to {
        stroke-dashoffset: 0;
    }
}


#orn-41  {
    stroke-dasharray: 579;
    stroke-dashoffset: 579;
}
.orn-41-trig #orn-41 {
    animation: orn41 1.5s ease-in-out forwards;
    -webkit-animation: orn41 1.5s ease-in-out forwards;
}

.fadeout #orn-41 {
    opacity: 0;
    visibility: hidden;
}

@keyframes orn41 {
    from {
        stroke-dashoffset: 579;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-43  {
    stroke-dasharray: 752;
    stroke-dashoffset: 752;
}
.orn-43-trig #orn-43 {
    animation: orn43 1.5s ease-in-out forwards;
    -webkit-animation: orn43 1.5s ease-in-out forwards;
}

.fadeout #orn-43 {
    opacity: 0;
    visibility: hidden;
}

@keyframes orn43 {
    from {
        stroke-dashoffset: 752;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#orn-51  {
    stroke-dasharray: 255;
    stroke-dashoffset: 255;
}
.orn-51-trig #orn-51 {
    animation: orn51 1.5s ease-in-out forwards;
    -webkit-animation: orn51 1.5s ease-in-out forwards;
}

.fadeout #orn-51 {
    opacity: 0;
    visibility: hidden;
}

@keyframes orn51 {
    from {
        stroke-dashoffset: 255;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.money-move {
    animation: moneymove 1.5s ease-in-out infinite;
    -webkit-animation: moneymove 1.5s ease-in-out infinite;
}


@keyframes moneymove {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0px);
    }
}
.money-move2 {
    animation: moneymove2 2.5s ease-in-out infinite;
    -webkit-animation: moneymove2 2.5s ease-in-out infinite;
}


@keyframes moneymove2 {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.cloud {
    transition: 0.1s linear;
}

.cloud-1 {
    position: absolute;
    top: 50px;
    right: 10%;
} 

.cloud-2 {
    position: absolute;
    top: 50px;
    left: 15%;
} 
.cloud-3 {
    position: absolute;
    top: 175px;
    left: 25%;
} 

.cloud-4 {
    position: absolute;
    top: 300px;
    right: 25%;
} 

.cloud-5 {
    position: absolute;
    top: 230px;
    left: 11%
}
.cloud-6 {
    position: absolute;
    top: 350px;
    left: 22%
}
.cloud-7 {
    position: absolute;
    top: 220px;
    right: 38%
}

.cloud-8 {
    position: absolute;
    top: 300px;
    right: 11%
}




@media (min-width: 1023px) and (max-height:900px) {
    .ts-s4e2-bottom {
        bottom: 50px;
    }
    .thirds-question {
        font-size: 26px;
    }
    .infographic-3-section-2 {
        padding-top: 320px;
    }
    .orn-43 {
        display: none;
    }
    .orn-3-top {
        display: none;
    }
    .sea-percent {
        font-size: 100px;
    }
    .infographic-5-section-4 {
        padding-top: 320px;
    }
    .infographic-5-section-3 {
        padding-top: 320px;
    }
    .infographic-5-section-2 {
        padding-top: 280px;
    }
    .s5e1-text {
        font-size: 50px;
    }
    .infographic-main-title {
        font-size: 36px;
    }
    .infographic-main-title p {
        margin-top: 20px;
    }
    .text-simple {
        font-size: 16px;
    }
    .infographic-5-section-1 {
        padding-top: 300px;
    }
    .sea-percent span {
        font-size: 80px;
    }
}

@media (min-width: 1023px) and (max-height:800px) {
    .s5e11 #calSm2 svg {
        max-height: 114px;
    }
    .car-hold img {
        height: auto;
    }
    .circle-text h5 {
        font-size: 14px;
    }
    .thirds-question {
        margin-bottom: 30px;
    }
    .ts-s3e2-bottom {
        bottom: 40px;
    }
    .money-middle {
        font-size: 36px;
    }
    .arrow-money {
        margin-bottom: 20px;
    }
    .money-label {
        font-size: 36px;
    }
    .sea-percent span {
        font-size: 50px;
    }
    .sea-percent {
        font-size: 70px;
    }
    .wave-1 {
        bottom: -120px;
    }
    .wave-2 {
        bottom: -140px;
    }
    .infographic-2-section-3-content {
        padding-top: 325px;
    }
    .infographic-3-section-1 {
        padding-top: 340px;
    }
    .circle-text p {
        margin-bottom: 20px;
    }
    .circle-text {
        font-size: 16px;
    }
    .circle-title {
        font-size: 36px;
    }
    .circle-icon {
        margin-bottom: 20px;
    }
    .circle-icon img {
        max-height: 100px;
    }
    .infographic-4-section-1 {
        padding-top: 250px;
    }
    .infographic-4-section-2 {
        padding-top: 250px;
    }
    .infographic-4-section-3 {
        padding-top: 250px;
    }
    .digit-lg {
        font-size: 100px;
    }
    .infographic-5-section-3 {
        padding-top: 280px;
    }
    .infographic-5-section-4 {
        padding-top: 280px;
    }
    .s5e11 img,
    .s5e11 svg {
        max-height: 100px;
    }
    .s5e42 img,
    .s5e42 svg {
        max-height: 160px;
    }

    .infographic-5-section-1 {
        padding-top: 280px;
    }
    .sea-text {
        bottom: 30px;
    }
    .text-title {
        font-size: 36px;
    }
}

@media (min-width: 1023px) and (max-height:700px) {
    .s5e42 {
        margin-top: -20px;
    }
    .s5e42 img, .s5e42 svg {
        max-height: 120px;
    }
    .s5e11 #calSm2 svg {
        max-height: 82px;
    }
    .ts-s3e2-bottom {
        bottom: 20px;
    }
    .circle-title {
        margin-bottom: 10px;
    }
    .infographic-2-section-3-bottom {
        bottom: 70px;
    }
    .ship {
        width: 448px;
        height: 180px;
        top: -108px;
    }
    .orn-2-top {
        display: none;
    }
    .infographic-2-section-1 {
        padding-top: 300px;
    }
    .ts-22 {
        margin-bottom: 50px;
    }
    .sea-percent span {
        font-size: 40px;
    }
    .sea-percent {
        font-size: 50px;
    }
    .infographic-3-section-1 {
        padding-top: 320px;
    }
    .circle-text p {
        margin-bottom: 10px;
    }
    .circle-title {
        margin-bottom: 20px;
    }
    .infographic-3-section-2 {
        padding-top: 300px;
    }
    .third-block {
        height: 200px;
    }
    .thirds-question {
        font-size: 22px;
    }
    .third-block {
        font-size: 36px;
    }
    .carries {
        margin-bottom: 40px;
    }
    .digit {
        font-size: 50px;
    }
    .carries ul li img {
        max-height: 150px;
    }
    .car {
        margin-bottom: 40px;
    }
    .car img {
        max-height: 150px;
    }
    .digit-4 {
        margin-bottom: 40px;
        font-size: 80px;
    }
    .s5e11 {
        margin-bottom: 20px;
    }
    .s5e11 img,
    .s5e11 svg {
        max-height: 70px;
    }
}

@media (min-width: 1023px) and (max-height:600px) {
    .infographic-2-section-3-content {
        padding-top: 260px;
    }
    .infographic-2-section-3-content:before {
        height: 193px;
        background: url(../build/img/wave-2.png) repeat center center / 153px 193px;
    }
    .infographic-2-section-1 {
        padding-top: 260px;
    }
    .sea-percent span {
        font-size: 30px;
    }
    .sea-percent {
        font-size: 40px;
    }
    .ship {
        width: 256px;
        height: 103px;
        top: -52px;
    }
    .wave-1 {
        bottom: 20px;
        height: 193px;
        background: url(../build/img/wave-1.png) repeat center center / 153px 193px;
    }
    .wave-2 {
        bottom: 0px;
        height: 193px;
        background: url(../build/img/wave-2.png) repeat center center / 153px 193px;
    }
    .orn-31 {
        display: none;
    }
    .circle-text {
        font-size: 14px;
    }
    .circle-title {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .circle-icon img {
        max-height: 80px;
    }
    .circle-icon {
        margin-bottom: 10px;
    }
    .infographic-3-section-1 {
        padding-top: 280px;
    }
    .third-block {
        height: 200px;
    }
    .infographic-3-section-2 {
        padding-top: 270px;
    }
    .third-block {
        height: 150px;
        font-size: 30px;
    }
    .infographic-4-section-1 {
        padding-top: 200px;
    }
    .infographic-4-section-2 {
        padding-top: 200px;
    }
    .digit-4 {
        font-size: 60px;
    }
    .ts-s4e3-bottom {
        bottom: 60px;
    }
    .ts-s4e2-bottom {
        bottom: 60px;
    }
    .infographic-4-section-3 {
        padding-top: 200px;
    }
    .infographic-5-section-3 {
        padding-top: 230px;
    }
    .infographic-5-section-4 {
        padding-top: 230px;
    }
    .mb20 {
        margin-bottom: 15px;
    }
    .text-simple {
        font-size: 14px;
    }
    .s5e11 {
        margin-bottom: 15px;
    }
    .infographic-5-section-2 {
        padding-top: 240px;
    }
    .infographic-main-title {
        font-size: 30px;
    }
    .infographic-main-title p {
        margin-top: 10px;
    }
    .infographic-5-section-1 {
        padding-top: 250px;
    }
    .s5e1-text {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

@media (max-width: 1440px) {
    .cloud-8 {
        right: 2%;
    }
    .cloud-7 {
        right: 34%;
    }
    .cloud-6 {
        left: 14%;
    }
    .cloud-5 {
        left: 3%;
    }
    .cloud-4 {
        right: 15%;
    }
    .cloud-1 {
        right: 3%;
    }
    .cloud-2 {
        left: 6%;
    }
    .cloud-3 {
        left: 20%;
    }
}

@media (max-width: 1199px) {
    .plane-1 {
        top: 140px;
    }
    .plane-2 {
        top: 20px;
    }
    .intro-infographic {
        /* background: #F0EEEE url(../build/img/intro-top3.png) no-repeat top 50px center; */
        background-size: contain;
        padding: 220px 0 120px;
    }
    .intro-infographic-title {
        font-size: 65px;
    }
    .intro-infographic-text-right {
        font-size: 16px;
        padding-left: 0;
    }
    .intro-infographic-text-left {
        font-size: 26px;
    }
    .intro-infographic > a {
        bottom: 40px;
    }
}

@media (max-width: 1100px) {
    .orn-1-top {
        width: 950px;
        height: 350px;
    }
    .orn-2-top {
        display: none;
    }
    .orn-3-top {
        display: none;
    }
}

@media (max-width: 991px) {
    .cloud-8 {
        top: 200px;
    }
    .cloud-7 {
        top: 160px;
    }
    .cloud-6 {
        top: 270px;
    }
    .cloud-5 {
        top: 190px;
    }
    .cloud-4 {
        top: 230px;
    }
    .cloud-3 {
        top: 120px;
    }
    .cloud-1 {
        top: 25px;
    }
    .cloud-2 {
        top: 30px;
    }
    .plane-2 {
        max-width: 82px !important;
    }
    .plane-1 {
        max-width: 61px !important;
        top: 110px;
    }
    .thirds-question {
        font-size: 26px;
        margin-bottom: 35px;
    }
    .intro-infographic {
        padding: 170px 0 120px;
    }
    .intro-infographic-title {
        font-size: 55px;
    }
    .intro-infographic-text-left {
        padding-right: 0px;
        margin-bottom: 20px;
    }
    .intro-middle {
        margin-bottom: 70px;
    }
    .ts-s3e2-bottom {
        bottom: 40px;
    }
    
}

@media (max-width: 767px) {
    .cloud-6,
    .cloud-7,
    .cloud-8 {
        display: none;
    }
    .cloud-5 {
        top: 140px;
        width: 50px;
    }
    .cloud-4 {
        top: 100px;
        width: 80px;
    }
    .cloud-3 {
        top: 75px;
        width: 100px;
    }
    .cloud-2 {
        width: 100px;
    }
    .cloud-1 {
        width: 150px;
    }
    .plane-1 {
        top: 70px;
    }
    .circle-text h5 {
        font-size: 12px;
        line-height: 1.2;
    }
    .ts-s4e3-bottom {
        bottom: 40px;
    }
    .ts-s4e2-bottom {
        bottom: 40px;
    }
    .ts-s3e2-bottom {
        bottom: 20px;
    }
    .thirds-question {
        font-size: 18px;
        margin-bottom: 20px;
    }
    .infographic-gap {
        min-height: 300px;
    }
    .btn-blue, .btn-blue:focus, .btn-blue:active {
        font-size: 16px;
        padding: 15px 30px;
    }
    .infographic-last-title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .infographic-last-text {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .s5e42 {
        margin-top: 10px;
    }
    .infographic-5-section-4 {
        padding-top: 280px;
    }
    .infographic-5-section-3 {
        padding-top: 280px;
    }
    .infographic-5-section-2 {
        padding-top: 280px;
    }
    .mb20 {
        margin-bottom: 10px;
    }
    .s5e11 {
        margin-bottom: 10px;
    }
    .s5e1-text {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .infographic-5-section-1 {
        padding-top: 280px;
    }
    .infographic-main-title-5-hold {
        padding-top: 110px;
    }
    .digit-4 {
        margin-bottom: 40px;
    }
    .infographic-4-section-3 {
        padding-top: 210px;
    }
    .car {
        margin-bottom: 40px;
    }
    .car img {
        max-height: 100px;
    }
    .infographic-4-section-2 {
        padding-top: 210px;
    }
    .carries {
        margin-bottom: 40px;
    }
    .carries ul li img {
        max-height: 100px;
    }
    .digit {
        font-size: 30px;
    }
    .infographic-4-section-1 {
        padding-top: 210px;
    }
    .infographic-main-title-4-hold {
        padding-top: 110px;
    }
    .third-hover-yes .text-simple.c-dark {
        display: none;
    }
    .third-hover span {
        padding-top: 5px;
        font-size: 14px;
    }
    .third-hover {
        font-size: 24px;
    }
    .third-block {
        height: 100px;
        font-size: 22px;
    }
    .infographic-3-section-2 {
        padding-top: 290px;
    }
    .circles ul li {
        padding: 0px 3%;
    }
    .circle-text p {
        margin-bottom: 10px;
    }
    .circle-text {
        font-size: 14px;
    }
    .circle-title {
        font-size: 26px;
        margin-bottom: 5px;
    }
    .circle-icon {
        margin-bottom: 10px;
    }
    .circle-icon img {
        max-height: 60px;
    }
    .infographic-3-section-1 {
        padding-top: 290px;
    }
    .infographic-main-title p {
        margin-top: 15px;
        padding: 0px 0%;
    }
    .infographic-main-title-3-hold {
        padding-top: 110px;
    }
    .infographic-2-section-3-bottom {
        bottom: 60px;
    }
    .text-title {
        font-size: 26px;
    }
    .infographic-2-section-3-content {
        padding-top: 250px;
    }
    .infographic-2-section-3-content:before {
        height: 193px;
        background: url(../build/img/wave-2.png) repeat center center / 153px 193px;
    }
    .sea-text {
        bottom: 30px;
    }
    .ts-3 {
        margin-bottom: 10px;
    }
    .sea-percent span {
        font-size: 25px;
    }
    .sea-percent {
        font-size: 40px;
    }
    .ship {
        width: 256px;
        height: 103px;
        top: -52px;
    }
    .orn-3-top {
        display: none;
    }
    .wave-1 {
        height: 193px;
        background: url(../build/img/wave-1.png) repeat center center / 153px 193px;
    }
    .wave-2 {
        height: 193px;
        background: url(../build/img/wave-2.png) repeat center center / 153px 193px;
    }
    .ts-22 {
        margin-bottom: 50px;
    }
    .arrow-money {
        margin-bottom: 20px;
    }
    .orn-2-top {
        display: none;
    }
    .money-right {
        padding-right: 0px;
    }
    .money-left {
        padding-left: 0px;
    }
    .money-middle {
        font-size: 22px;
    }
    .money-label {
        font-size: 26px;
    }
    .infographic-2-section-1 {
        padding-top: 230px;
    }
    .infographic-main-title-hold {
        padding-top: 110px;
    }
    .infographic-1-img {
        margin-top: -20px;
    }
    .digit-lg {
        font-size: 65px;
    }
    .orn-1-bottom {
        display: none;
    }
    .text-simple {
        font-size: 14px;
    }
    .infographic-1-hold {
        padding: 80px 0;
    }
    .infographic-main-title {
        font-size: 22px;
        margin-bottom: 40px;
    }
    .orn-1-top {
        display: none;
    }
    .intro-infographic > a {
        bottom: 30px;
        width: 14px;
        height: 23px;
    }
    .intro-infographic-text-right {
        font-size: 14px;
        padding-left: 0px;
    }
    .intro-infographic-text-left {
        font-size: 18px;
        padding-right: 0px;
        margin-bottom: 20px;
    }
    .intro-middle {
        margin-bottom: 40px;
    }
    .intro-infographic-title {
        font-size: 26px;
        margin-bottom: 30px;
    }
    .intro-infographic {
        padding: 110px 0 90px;
        /* background: #F0EEEE url(../build/img/intro-top3.png) no-repeat top 50px center; */
        background-size: contain;
    }
}


.btn.hover-green:hover {
    color:#a6ce39;
    background:#fff;
}