body{ padding: 0; margin: 0; font-size: 20px; line-height: 30px; font-weight: 600; font-family: 'Nunito Sans', 'Nunito', sans-serif; color: white }
form{ padding: 0; margin: 0; display: block }
input{ font-family: 'Nunito', 'Nunito Sans', sans-serif; color: white; outline: none; border: 0; position: relative; z-index: 15 }
input::placeholder{ color: rgba(255, 255, 255, 0.75) }

.page{ min-height: 100%; overflow: hidden }
.container{ max-width: 1300px; margin: 0 auto }

.flex{ display: flex }
.grow{ flex-grow: 1 }

a{ text-decoration: none; color: inherit }




/* Forms */
.btn{ outline: none; font-size: 20px; line-height: 30px; display: flex; align-items: center; justify-content: center; padding: 11px 29px; border-radius: 100px; cursor: pointer }
.btn.blue{ background: rgba(255, 255, 255, 0.2); padding: 8px 26px }
.btn.outline{ background: transparent; border: 2px solid #8CF982; color: #8CF982; transition: box-shadow 0.3s }
.btn.outline:hover{ box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.3) }
.btn.arrow{ display: flex; align-items: center }
.btn.arrow .ico{ width: 9px; height: 14px; margin-left: 15px; background: url("../svg/arrow-right.svg") no-repeat center / contain }




/* Text Blocks */
.t0{ font-size: 15px; line-height: 22px; font-weight: 600 }
.t1{ font-size: 17px; font-weight: 700 }
.t2{ font-size: 14px; font-weight: 700; line-height: 40px; letter-spacing: 0.02em; text-transform: uppercase }
.t3, .t4{ font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 800; line-height: 40px }
.t4{ line-height: 30px; letter-spacing: normal; text-transform: none; font-weight: 600 }
.t5{ font-size: 19px; line-height: 29px }
.t6{ font-size: 24px; line-height: 30px; font-weight: 400 }
.t7{ font-size: 18px; line-height: 40px; font-weight: 400 }

h1, h2, h3{ margin: 0; font-size: 60px; line-height: 80px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase }
h2{ font-size: 48px; text-transform: none }
h3{ font-size: 28px; line-height: 35px; text-transform: none }
p{ margin: 0; font-size: 18px; line-height: 30px; font-weight: 400 }

.center{ text-align: center }
h1.center{ display: block }


.cw{ color: white }
.cw80{ color: rgba(255, 255, 255, 0.8) }
.cw50{ color: rgba(255, 255, 255, 0.5) }

.cl{ color: #036BBC }
.cl80{ color: rgba(3, 107, 188, 0.8) }

.cg{ color: #8CF982 }
.cb{ color: #405D74 }

.z-a{ z-index: 15 }

.o0{ opacity: 0 }




/* Margins */
.t11{ margin-top: 11px }
.t25{ margin-top: 25px }
.t30{ margin-top: 30px }
.t35{ margin-top: 35px }
.t36{ margin-top: 36px }
.t45{ margin-top: 45px }
.t55{ margin-top: 55px }
.t63{ margin-top: 63px }
.t65{ margin-top: 65px }
.t78{ margin-top: 78px }
.b36{ margin-bottom: 36px }
.l10{ margin-left: 10px }
.l30{ margin-left: 30px }
.l35{ margin-left: 35px }
.l43{ margin-left: 43px }
.l45{ margin-left: 45px }
.l68{ margin-left: 68px }

.tb-35{ padding-top: 35px; padding-bottom: 35px }
.tb-65{ padding-top: 65px; padding-bottom: 65px }
.tb-69{ padding-top: 69px; padding-bottom: 69px }
.lr-26{ padding-left: 26px; padding-right: 26px }
.t-10{ padding-top: 10px }
.t-26{ padding-top: 26px }
.t-35{ padding-top: 35px }
.t-65{ padding-top: 65px }
.t-86{ padding-top: 86px }
.t-100{ padding-top: 100px }
.t-110{ padding-top: 110px }
.r-48{ padding-right: 48px }
.b-55{ padding-bottom: 55px }
.b-90{ padding-bottom: 90px }
.b-96{ padding-bottom: 96px }
.b-120{ padding-bottom: 120px }
.b-190{ padding-bottom: 190px }
.l-48{ padding-left: 48px }




/* Icons */
.nav .account{ width: 40px; height: 40px; background: url("../svg/account.svg") no-repeat center / contain }

.bl-icon-90, .bd-icon-110, .bb-icon-90, .bd-icon-100, .bb-icon-110{ width: 90px; height: 90px; background: #9EFF8B; background: linear-gradient(to bottom right, #9BFF92, #C7F000); position: absolute; border-radius: 30px; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25) }
.bl-icon-90 > div, .bd-icon-110 > div, .bb-icon-90 > div, .bd-icon-100 > div, .bb-icon-110 > div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -44%); /*width: 66%; height: 100%*/ width: 60px; height: 70px; display: block; z-index: 999 }
.bb-icon-90, .bb-icon-110, .bd-icon-100{ width: 100px; height: 100px; background: rgba(255, 255, 255, 0.14); box-shadow: none }
.bd-icon-100{ background: #0563B3; background: linear-gradient(to bottom right, #0176C8, #094795) }
.bb-icon-110{ width: 110px; height: 110px; box-shadow: none; border-radius: 40px }
.bd-icon-110{ width: 110px; height: 110px; border-radius: 40px; background: #0563B3; background: linear-gradient(to bottom right, #0176C8, #094795); box-shadow: none }
.bd-icon-110 > div{ width: 60%; height: 65% }
.bl-arrow{ width: 92px; height: 80px; background: url("../img/arrow-left.png?") no-repeat center / contain; position: absolute; display: block }
.bl-arrow.bottom{ transform: rotate(-90deg) }
.bl-arrow.top{ transform: rotate(90deg) }
.bl-arrow.min{ width: 65px; height: 56px }
.bl-round{ width: 303px; height: 303px; background: url("../img/round.png") no-repeat center / contain; position: absolute }

.megafon{ width: 15.6% }
.admitad{ width: 13.9% }
.bettilt{ width: 10.9% }
.moretv{ width: 16.1% }
.rucenter{ width: 11.7% }
.ntv{ width: 14.4% }
.tinkoff{ width: 11.2% }
.alfabank{ width: 15% }
.xbet{ width: 11.4% }
.favbet{ width: 19.1% }
.parimatch{ width: 11.3% }

.locationIco{ background: url("../img/location.png") no-repeat center / contain }
.compassIco{ background: url("../img/compass-g.png") no-repeat center / contain }
.targetingIco{ background: url("../img/targeting-g.png") no-repeat center / contain }
.phoneIco{ background: url("../img/phone-g.png") no-repeat center / contain }
.lockIco{ background: url("../img/lock-g.png") no-repeat center / contain }
.lightningIco{ background: url("../img/lightning-g.png") no-repeat center / contain }
.speedometerIco{ background: url("../img/speedometer-g.png") no-repeat center / contain; width: 70%; transform: translate(-49%, -47%) }
.aimIco{ background: url("../img/aim-g.png") no-repeat center / contain }
.timeIco{ background: url("../img/time-g.png") no-repeat center / contain }
.chequeIco{ background: url("../img/cheque-g.png") no-repeat center / contain }
.statIco{ background: url("../img/stat-g.png") no-repeat center / contain }
.messageIco{ background: url("../img/message-g.png") no-repeat center / contain }




/* Content Grid */
.max-470{ max-width: 470px }

.main{ min-height: 100%; display: flex; flex-direction: column; background: #0563B3; background: linear-gradient(to bottom left, #0176C8, #094795); position: relative; overflow: hidden }

.cookie{ padding: 5px 0; background: rgba(255, 255, 255, 0.16); position: relative; z-index: 999 }
.cookie .container{ display: flex; align-items: center }
.cookie .ico{ width: 70px; height: 70px; background: url("../img/cookie.png") no-repeat center / contain; margin-right: 20px }

.logo{ width: 155px }
.logo.big{ width: 195px }
.logo img{ width: 100%; height: auto }

.nav .container{ display: flex; align-items: center }
.nav .links{ display: flex; justify-content: flex-end }
.nav .links > a:not(:first-child){ margin-left: 25px }

.main .content{ display: flex }
.main .content .container{ display: flex }
.main .content .left{ display: flex; flex-direction: column; justify-content: center }
.main .content .right{ width: 53%; min-width: 53%; display: flex; position: relative }

.img-1{ width: 82%; margin-left: 13%; position: relative }
.img-1 .area{ position: absolute; left: 0; right: 0; bottom: -55px }
.img-1 .area::after{ content: ""; display: block; /*padding-left: 69vh; max-height: 565px*/ padding-bottom: 112% }
.img-1 > div:nth-child(1){ position: absolute; top: 0; left: 0; right: 0; bottom: -55px; background: url("../img/img-1.png") no-repeat bottom center / contain }
.img-1 .el-1{ top: -13px; right: 37px; transform: rotate(30deg) }
.img-1 .el-1 > div{ background: url("../img/lightning.png?") no-repeat center / contain }
.img-1 .el-2{ bottom: 30.64%; left: 76.5%; transform: rotate(15deg) }
.img-1 .el-2 > div{ background: url("../img/compas.png") no-repeat center / contain }
.img-1 .el-3{ bottom: 45.8%; /*right: 95%;*/ transform: rotate(11deg); left: -57px; right: auto }
.img-1 .el-3 > div{ background: url("../img/lock.png") no-repeat center / contain }
.img-ico > img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -44%); width: 60px; height: 70px; display: block; z-index: 999 }

.el-4{ top: 11px; /*right: calc(100% - 1px)*/ left: -100px }
.el-5{ top: 71.2%; left: 95.4% }
.el-6{ right: -200px; bottom: 283px }
.el-7{ right: 91.8%; top: 82.1% }
.el-8{ top: -44px; left: 50px; transform: rotate(-25deg) }
.el-8 > div{ background: url("../img/phone.png") no-repeat center / contain }

.partners{ background: white }
.partners .container > div{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center }
.partners .container img{ width: 100%; height: auto }

.millions{ display: flex; flex-direction: column; align-items: center; background: #0563B3; background: linear-gradient(to bottom left, #0176C8, #094795); position: relative; overflow: hidden }
.millions .bl-arrow{ position: relative }
.el-9{ transform: rotate(21deg); top: 8.4%; right: 17.8% }
.el-9 > div{ background: url("../img/stat.png") no-repeat center / contain }
.el-10{ transform: rotate(-46deg); top: 63%; right: 20.5% }
.el-10 > div{ background: url("../img/comment.png") no-repeat center / contain }
.el-11{ transform: rotate(42deg); top: 67.2%; left: 17% }
.el-11 > div{ background: url("../img/aim.png") no-repeat center / contain }
.hand-1{ width: 423px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 581px; background: url("../img/hand-1.png") no-repeat left center / contain }
.el-12{ transform: rotate(-31deg); top: 101px; left: 171px }
.el-12 > div{ background: url("../img/speedometr.png") no-repeat center / contain }
.hand-2{ width: 335px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 440px; background: url("../img/hand-2.png") no-repeat left center / contain }

.formats-block .tabs{ display: flex }
.formats-block .tabs > div{ padding: 15px 34px; border-radius: 30px 30px 0 0; background: #DCE7F2; color: #036BBC; cursor: pointer }
.formats-block .tabs .active{ background: #036CBC; background: linear-gradient(to top right, #094795, #0176C8); color: #8CF982; cursor: default }
.formats-block .content{ padding: 12px 90px 0 48px; background: #036CBC; background: linear-gradient(to top, #094795, #0176C8); border-radius: 30px }
.formats-block .tab-1, .formats-block .tab-2, .formats-block .tab-3{ display: flex }
.formats-block .tab-1-img > div{ width: 440px; position: relative }
.formats-block .tab-1-img > div > div:nth-child(1){ padding-bottom: 120% }
.formats-block .tab-1-img > div::before, .formats-block .tab-1-img > div::after{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0 }
.formats-block .tab-1-img > div::before{ background: url("../img/push-bg.png") no-repeat center bottom / contain }
.formats-block .tab-1-img > div::after{ background: url("../img/push-img.png") no-repeat center bottom / contain; left: 50px; right: 50px }
.formats-block .tab-1 > div:nth-child(2), .formats-block .tab-2 > div:nth-child(2), .formats-block .tab-3 > div:nth-child(2){ display: flex; justify-content: center; flex-direction: column }

.cards{ margin: 0 -45px; display: flex; flex-wrap: wrap }
.cards > div{ width: calc(100% / 3 - 90px); padding: 60px 45px 0 }
.card .bd-icon-110, .card .bb-icon-110{ position: relative }

.publishers{ background: #036CBC; background: linear-gradient(to top right, #094795, #0176C8) }

.card-contact{ background: #036CBC; background: linear-gradient(to top, #094795, #0176C8); border-radius: 30px; width: calc(640px - 140px); padding: 70px; display: flex; align-items: center; box-shadow: 0 15px 60px rgba(2, 114, 195, 0.5); flex-direction: column; margin-left: auto; margin-right: auto; position: relative }
.input{ padding: 16px 30px; font-size: 24px; line-height: 40px; font-weight: 700; border-radius: 12px; width: 100%; background: #4F97D0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) }
.submit{ padding: 12px 39px; font-size: 20px; line-height: 30px; font-weight: 700; border-radius: 100px; background: #BCF427; background: linear-gradient(to bottom right, #9BFF92, #C7F000); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.25); color: #07509F; cursor: pointer }

.hand-3{ position: absolute; left: 0; bottom: 0; background: url("../img/hand-3.png") no-repeat center / contain; width: 570px; height: 570px; transform: translate(-58%, 39%) }
.hand-4{ position: absolute; right: 0; bottom: 0; background: url("../img/hand-4.png") no-repeat center / contain; width: 570px; height: 570px; transform: translate(58%, 39%) }

.card-contact .bd-icon-100 > div{ width: 60%; height: 65% }
.el-13{ transform: rotate(-25deg); bottom: 75%; right: 120% }
.el-13 > div{ background: url("../img/lock-g.png") no-repeat center / contain }
.el-14{ transform: rotate(30deg); top: 61%; right: 126.2% }
.el-14 > div{ background: url("../img/lightning-g.png") no-repeat center / contain }
.el-15{ transform: rotate(-31deg); bottom: 71.7%; left: 118.7% }
.el-15 > div{ background: url("../img/lightning-g.png") no-repeat center / contain }
.el-16{ transform: rotate(30deg); top: 76.8%; left: 121.7% }
.el-16 > div{ background: url("../img/phone-g.png") no-repeat center / contain }

.footer{ padding: 80px 70px; background: #036CBC; background: linear-gradient(to bottom left, #094795, #0176C8) }
.footer .container{ display: flex }
.footer .left{ width: calc(40% - 20px); padding-right: 20px; display: flex; flex-direction: column }
.footer .right{ width: calc(60% - 20px); padding-left: 20px; display: flex; flex-direction: column }

.cols-f{ display: flex }
.cols-f > div:nth-child(1){ width: calc(34% - 50px); padding-right: 50px }
.cols-f > div:nth-child(2){ width: calc(66% - 50px); padding-left: 50px }
.links-f{ display: flex; flex-direction: column; font-size: 20px; line-height: 54px; font-weight: 800; letter-spacing: normal }

.footer .social{ display: flex; align-items: center }
.footer .social > div{ width: 70px; height: 70px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); display: flex; align-items: center; justify-content: center }
.footer .social > div:not(:first-child){ margin-left: 20px }
.footer .social > div:nth-child(1) > div{ width: 33px; height: 33px; background: url("../svg/inst.svg") no-repeat center / contain }
.footer .social > div:nth-child(2) > div{ width: 28px; height: 28px; background: url("../svg/fb.svg") no-repeat center / contain }
.footer .social > div:nth-child(3) > div{ width: 32px; height: 25px; background: url("../svg/tg.svg") no-repeat center / contain }

.wallets{ margin-top: 70px; width: 480px }
.wallets img{ width: 100%; height: auto }

.contact-error{ font-size: 20px; line-height: 30px; text-align: center; color: rgba(255, 138, 0, 1); margin-top: 21px; margin-bottom: -40px }
.contact-success{ font-size: 24px; line-height: 30px; text-align: center; color: #B4FA6E; display: flex; flex-direction: column; align-items: center }
.contact-success > div:nth-child(1){ width: 50px; height: 50px; background: url("../svg/success.svg") no-repeat center / contain; margin-bottom: 35px }

/*@media (max-height: 730px){
    .img-1 .el-1{ top: 30px }
}

@media (max-height: 700px){
    .img-1 .el-1{ top: 56px }
}

@media (max-height: 670px){
    .img-1 .el-1{ top: 92px; right: 53px }
}*/
@media (max-height: 820px){
    .img-1 .area{ top: 0; left: 50%; right: auto; transform: translateX(-50%) }
    .img-1 .area::after{ padding-bottom: 0; padding-left: 69vh }
}




/* Animations */
@keyframes arrow_left {
    0%{ transform: translateX(25%) }
    20%{ transform: translateX(-25%) }
    100%{ transform: translateX(25%) }
}
.anim_arl{ animation: arrow_left 4s infinite }

@keyframes arrow_bottom {
    0%{ transform: translateY(25%) rotate(-90deg) }
    80%{ transform: translateY(-25%) rotate(-90deg) }
    100%{ transform: translateY(25%) rotate(-90deg) }
}
.anim_arb{ animation: arrow_bottom 4s infinite }

@keyframes arrow_top {
    0%{ transform: translateY(-25%) rotate(90deg) }
    80%{ transform: translateY(25%) rotate(90deg) }
    100%{ transform: translateY(-25%) rotate(90deg) }
}
.anim_art{ animation: arrow_top 4s infinite }

@keyframes rotate_11 {
    0%{ transform: rotate(11deg) }
    12.5%{ transform: rotate(19deg) }
    25%{ transform: rotate(11deg) }
    37.5%{ transform: rotate(3deg) }
    50%{ transform: rotate(11deg) }
    62.5%{ transform: rotate(19deg) }
    75%{ transform: rotate(11deg) }
    87.5%{ transform: rotate(3deg) }
    100%{ transform: rotate(11deg) }
}
.animh_rotate_11:hover{ animation: rotate_11 0.3s }

@keyframes rotate_15 {
    0%{ transform: rotate(15deg) }
    12.5%{ transform: rotate(23deg) }
    25%{ transform: rotate(15deg) }
    37.5%{ transform: rotate(7deg) }
    50%{ transform: rotate(15deg) }
    62.5%{ transform: rotate(23deg) }
    75%{ transform: rotate(15deg) }
    87.5%{ transform: rotate(7deg) }
    100%{ transform: rotate(15deg) }
}
.animh_rotate_15:hover{ animation: rotate_15 0.3s }

@keyframes rotate_30 {
    0%{ transform: rotate(30deg) }
    12.5%{ transform: rotate(38deg) }
    25%{ transform: rotate(30deg) }
    37.5%{ transform: rotate(22deg) }
    50%{ transform: rotate(30deg) }
    62.5%{ transform: rotate(38deg) }
    75%{ transform: rotate(30deg) }
    87.5%{ transform: rotate(22deg) }
    100%{ transform: rotate(30deg) }
}
.animh_rotate_30:hover{ animation: rotate_30 0.3s }

@keyframes rotate_m25 {
    0%{ transform: rotate(-25deg) }
    12.5%{ transform: rotate(-17deg) }
    25%{ transform: rotate(-25deg) }
    37.5%{ transform: rotate(-33deg) }
    50%{ transform: rotate(-25deg) }
    62.5%{ transform: rotate(-17deg) }
    75%{ transform: rotate(-25deg) }
    87.5%{ transform: rotate(-33deg) }
    100%{ transform: rotate(-25deg) }
}
.animh_rotate_m25:hover{ animation: rotate_m25 0.3s }

@keyframes rotate_m31 {
    0%{ transform: rotate(-31deg) }
    12.5%{ transform: rotate(-21deg) }
    25%{ transform: rotate(-31deg) }
    37.5%{ transform: rotate(-41deg) }
    50%{ transform: rotate(-31deg) }
    62.5%{ transform: rotate(-21deg) }
    75%{ transform: rotate(-31deg) }
    87.5%{ transform: rotate(-41deg) }
    100%{ transform: rotate(-31deg) }
}
.animh_rotate_m31:hover{ animation: rotate_m31 0.3s }

@keyframes rotate_42 {
    0%{ transform: rotate(42deg) }
    12.5%{ transform: rotate(52deg) }
    25%{ transform: rotate(42deg) }
    37.5%{ transform: rotate(32deg) }
    50%{ transform: rotate(42deg) }
    62.5%{ transform: rotate(52deg) }
    75%{ transform: rotate(42deg) }
    87.5%{ transform: rotate(52deg) }
    100%{ transform: rotate(42deg) }
}
.animh_rotate_42:hover{ animation: rotate_42 0.3s }

@keyframes rotate_m46 {
    0%{ transform: rotate(-46deg) }
    12.5%{ transform: rotate(-36deg) }
    25%{ transform: rotate(-46deg) }
    37.5%{ transform: rotate(-56deg) }
    50%{ transform: rotate(-46deg) }
    62.5%{ transform: rotate(-36deg) }
    75%{ transform: rotate(-46deg) }
    87.5%{ transform: rotate(-56deg) }
    100%{ transform: rotate(-46deg) }
}
.animh_rotate_m46:hover{ animation: rotate_m46 0.3s }

@keyframes rotate_21 {
    0%{ transform: rotate(21deg) }
    12.5%{ transform: rotate(31deg) }
    25%{ transform: rotate(21deg) }
    37.5%{ transform: rotate(11deg) }
    50%{ transform: rotate(21deg) }
    62.5%{ transform: rotate(31deg) }
    75%{ transform: rotate(21deg) }
    87.5%{ transform: rotate(11deg) }
    100%{ transform: rotate(21deg) }
}
.animh_rotate_21:hover{ animation: rotate_21 0.3s }

@keyframes rotate_m25 {
    0%{ transform: rotate(-25deg) }
    12.5%{ transform: rotate(-15deg) }
    25%{ transform: rotate(-25deg) }
    37.5%{ transform: rotate(-35deg) }
    50%{ transform: rotate(-25deg) }
    62.5%{ transform: rotate(-15deg) }
    75%{ transform: rotate(-25deg) }
    87.5%{ transform: rotate(-35deg) }
    100%{ transform: rotate(-25deg) }
}
.animh_rotate_rm25:hover{ animation: rotate_m25 0.3s }

@keyframes rotate_30 {
    0%{ transform: rotate(30deg) }
    12.5%{ transform: rotate(40deg) }
    25%{ transform: rotate(30deg) }
    37.5%{ transform: rotate(20deg) }
    50%{ transform: rotate(30deg) }
    62.5%{ transform: rotate(40deg) }
    75%{ transform: rotate(30deg) }
    87.5%{ transform: rotate(20deg) }
    100%{ transform: rotate(30deg) }
}
.animh_rotate_r30:hover{ animation: rotate_30 0.3s }

@keyframes rotate_m30 {
    0%{ transform: rotate(-30deg) }
    12.5%{ transform: rotate(-20deg) }
    25%{ transform: rotate(-30deg) }
    37.5%{ transform: rotate(-40deg) }
    50%{ transform: rotate(-30deg) }
    62.5%{ transform: rotate(-20deg) }
    75%{ transform: rotate(-30deg) }
    87.5%{ transform: rotate(-40deg) }
    100%{ transform: rotate(-30deg) }
}
.animh_rotate_rm30:hover{ animation: rotate_m30 0.3s }

@keyframes rotate_0 {
    0%{ transform: rotate(0deg) }
    12.5%{ transform: rotate(10deg) }
    25%{ transform: rotate(0deg) }
    37.5%{ transform: rotate(-10deg) }
    50%{ transform: rotate(0deg) }
    62.5%{ transform: rotate(10deg) }
    75%{ transform: rotate(0deg) }
    87.5%{ transform: rotate(-10deg) }
    100%{ transform: rotate(0deg) }
}
.animh_rotate_r0:hover{ animation: rotate_0 0.3s }



.animh_zoom{ transition: transform 0.4s }
.animh_zoom:hover{ transform: scale(1.3) }




.underline_links > a{ position: relative; transition: color 0.2s }
.underline_links > a::after{ content: ""; position: absolute; bottom: 6px; left: 0; width: 0; height: 1px; background: #fff; transition: width 0.4s }
.underline_links > a:not(.cw):hover::after{ width: 100% }
.underline_links > a:not(.cw):hover{ color: #fff }




/* Animation Show Scroll */
[data-show]{ opacity: 0 }



@keyframes show_left-right {
    0%{ opacity: 0; transform: translateX(-100%) }
    100%{ opacity: 1; transform: translateX(0) }
}
@keyframes show_left-right_ym50 {
    0%{ opacity: 0; transform: translateX(-100%) translateY(-50%) }
    100%{ opacity: 1; transform: translateX(0) translateY(-50%) }
}
.anim_sh_lr{ animation: show_left-right 0.8s; opacity: 1; transform: translateX(0) }
.anim_sh_lr_ym50{ animation: show_left-right_ym50 0.8s; opacity: 1; transform: translateX(0) translateY(-50%) }



@keyframes show_top-bottom {
    0%{ opacity: 0; transform: translateY(-100%) }
    100%{ opacity: 1; transform: translateY(0) }
}
@keyframes show_top-bottom_x2 {
    0%{ opacity: 0; transform: translateY(-200%) }
    100%{ opacity: 1; transform: translateY(0) }
}
@keyframes show_top-bottom_150 {
    0%{ opacity: 0; transform: translateY(-150px) }
    100%{ opacity: 1; transform: translateY(0) }
}
.anim_sh_tb{ animation: show_top-bottom 0.8s; opacity: 1; transform: translateY(0) }
.anim_sh_tb_x2{ animation: show_top-bottom_x2 0.8s; opacity: 1; transform: translateY(0) }
.anim_sh_tb_150{ animation: show_top-bottom_150 0.8s; opacity: 1; transform: translateY(0) }



@keyframes show_bottom-top {
    0%{ opacity: 0; transform: translateY(100%) }
    100%{ opacity: 1; transform: translateY(0) }
}
@keyframes show_bottom-top_150 {
    0%{ opacity: 0; transform: translateY(150px) }
    100%{ opacity: 1; transform: translateY(0) }
}
.anim_sh_bt{ animation: show_bottom-top 0.8s; opacity: 1; transform: translateY(0) }
.anim_sh_bt_150{ animation: show_bottom-top_150 0.8s; opacity: 1; transform: translateY(0) }



@keyframes show_right-left {
    0%{ opacity: 0; transform: translateX(100%) }
    100%{ opacity: 1; transform: translateX(0) }
}@keyframes show_right-left_ym50 {
    0%{ opacity: 0; transform: translateX(100%) translateY(-50%) }
    100%{ opacity: 1; transform: translateX(0) translateY(-50%) }
}
.anim_sh_rl{ animation: show_right-left 0.8s; opacity: 1; transform: translateX(0) }
.anim_sh_rl_ym50{ animation: show_right-left_ym50 0.8s; opacity: 1; transform: translateX(0) translateY(-50%) }



@keyframes hide_right-left {
    0%{ opacity: 1; transform: translateX(0) }
    100%{ opacity: 0; transform: translateX(-100%) }
}
.anim_hide_rl{ animation: hide_right-left 0.8s; opacity: 0; transform: translateX(-100%) }



@keyframes show_scale {
    0%{ opacity: 0; transform: scale(0) }
    100%{ opacity: 1; transform: scale(1) }
}
@keyframes show_scale_r11 {
    0%{ opacity: 0; transform: scale(0) rotate(11deg) }
    100%{ opacity: 1; transform: scale(1) rotate(11deg) }
}
@keyframes show_scale_r15 {
    0%{ opacity: 0; transform: scale(0) rotate(15deg) }
    100%{ opacity: 1; transform: scale(1) rotate(15deg) }
}
@keyframes show_scale_r21 {
    0%{ opacity: 0; transform: scale(0) rotate(21deg) }
    100%{ opacity: 1; transform: scale(1) rotate(21deg) }
}
@keyframes show_scale_rm25 {
    0%{ opacity: 0; transform: scale(0) rotate(-25deg) }
    100%{ opacity: 1; transform: scale(1) rotate(-25deg) }
}
@keyframes show_scale_r30 {
    0%{ opacity: 0; transform: scale(0) rotate(30deg) }
    100%{ opacity: 1; transform: scale(1) rotate(30deg) }
}
@keyframes show_scale_rm31 {
    0%{ opacity: 0; transform: scale(0) rotate(-31deg) }
    100%{ opacity: 1; transform: scale(1) rotate(-31deg) }
}
@keyframes show_scale_r42 {
    0%{ opacity: 0; transform: scale(0) rotate(42deg) }
    100%{ opacity: 1; transform: scale(1) rotate(42deg) }
}
@keyframes show_scale_rm46 {
    0%{ opacity: 0; transform: scale(0) rotate(-46deg) }
    100%{ opacity: 1; transform: scale(1) rotate(-46deg) }
}
@keyframes show_scale_rm90 {
    0%{ opacity: 0; transform: scale(0) rotate(-90deg) }
    100%{ opacity: 1; transform: scale(1) rotate(-90deg) }
}
@keyframes show_scale_r90 {
    0%{ opacity: 0; transform: scale(0) rotate(90deg) }
    100%{ opacity: 1; transform: scale(1) rotate(90deg) }
}
@keyframes show_scale_hand3 {
    0%{ opacity: 0; transform: scale(0) translate(-58%, 39%) }
    100%{ opacity: 1; transform: scale(1) translate(-58%, 39%) }
}
@keyframes show_scale_hand4 {
    0%{ opacity: 0; transform: scale(0) translate(58%, 39%) }
    100%{ opacity: 1; transform: scale(1) translate(58%, 39%) }
}
.anim_scale{ animation: show_scale 0.8s; opacity: 1 }
.anim_scale_ar_left{ animation: show_scale 0.8s, arrow_left 4s infinite; opacity: 1 }
.anim_scale_ar_top{ animation: show_scale_r90 0.8s, arrow_top 4s infinite; opacity: 1 }
.anim_scale_ar_bottom{ animation: show_scale_rm90 0.8s, arrow_bottom 4s infinite; opacity: 1 }
.anim_scale_r11{ animation: show_scale_r11 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_r15{ animation: show_scale_r15 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_r21{ animation: show_scale_r21 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_rm25{ animation: show_scale_rm25 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_r30{ animation: show_scale_r30 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_rm31{ animation: show_scale_rm31 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_rm46{ animation: show_scale_rm46 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_r42{ animation: show_scale_r42 0.8s; opacity: 1; transform: scale(1) }
.anim_scale_hand3{ animation: show_scale_hand3 0.8s; opacity: 1; transform: scale(1) translate(-58%, 39%) }
.anim_scale_hand4{ animation: show_scale_hand4 0.8s; opacity: 1; transform: scale(1) translate(58%, 39%) }