body, html {padding: 0; margin: 0; background-color: rgba(255, 255, 255, 1.00); font-size: 14px; scroll-behavior: smooth;}
* {box-sizing: border-box; border: none; font-family: 'Poppins', sans-serif; font-weight: 500; color: rgba(20, 20, 70, 1.00); outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; text-decoration: none;}
body:before {content: ''; width: 100%; height: 100vh; position: fixed; left: 0; top: 0px; z-index: 0;}
body {overflow-x: hidden;}
div, section, ul, li {position: relative; float: left;}
input {width: 100%; height: 50px; background-color: rgba(255, 255, 255, 1.00); padding: 0 24px; border-radius: 25px; font-size: 1rem; color: rgba(40, 40, 40, 1.00); box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.00), 0 8px 8px 0 rgba(0, 0, 0, 0.05); transition: all 0.3s linear;}
input:hover {box-shadow: inset 0 0 0 2px rgba(20, 20, 70, 1.00), 0 0 16px 0 rgba(0, 0, 0, 0.10);}
input:focus {background-color: rgba(255, 255, 255, 0.75); color: rgba(20, 20, 70, 1.00); box-shadow: inset 0 0 0 2px rgba(190, 30, 50, 1.00), 0 0 30px 0 rgba(40, 40, 40, 0.25);}
input::placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
input:-ms-input-placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
input::-ms-input-placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
input + .opt {position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-size: 0.9rem; color: rgba(40, 40, 40, 0.30); transition: all 0.3s;}
input:focus + .opt {color: rgba(40, 40, 40, 0.50);}
.l-lbl {width: 27%; padding: 10px 5px 0 0; color: rgba(0, 10, 40, 1.00);}
.l-lbl-ic {width: 73%}
.c-dd {width: calc(31% - 10px); margin: 0 5px 0 0;}
.c-mm {width: calc(31% - 10px); margin: 0 5px 0 0;}
.c-yyyy {width: calc(38% + 10px); margin: 0 0 0 0;}
input.msub[type=submit] {height: 50px; background: linear-gradient(90deg,#feae00 0%,#fe1c00 100%); border-radius: 5px; font-size: 1.2rem; color: rgba(255, 255, 255, 1.00); box-shadow: 0 0 0 0; transition: all 0.3s; overflow: hidden;}
input.msub[type=submit]:hover {box-shadow: 0 10px 20px 0 rgba(0, 10, 40, 0.25);}
input.msub[type=submit]:active {box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.25);}
input[type=radio] + .rad {position: relative; display: inline-block; height: 40px; padding: 10px 30px 0 0; margin: 0 10px; color: rgba(0, 10, 40, 1.00); font-weight: 700; cursor: pointer; transition: all 0.3s;}
input[type=radio] + .rad:hover {color: rgba(190, 30, 50, 1.00);}
input[type=radio] + .rad:before {content: ''; width: 20px; height: 20px; border-radius: 20px; position: absolute; top: 8px; right: 0px; box-shadow: inset 0 0 0 2px rgba(0, 10, 40, 0.50), inset 0 0 0 24px rgba(255, 255, 255, 1.00), inset 0 0 0 24px rgba(190, 30, 50, 1.00); transition: all 0.3s;}
input[type=radio] + .rad:hover:before {box-shadow: inset 0 0 0 2px rgba(190, 30, 50, 1.00), inset 0 0 0 6px rgba(255, 255, 255, 1.00), inset 0 0 0 24px rgba(0, 10, 40, 0.10);}
input[type=radio]:checked + .rad:before {box-shadow: inset 0 0 0 2px rgba(190, 30, 50, 1.00), inset 0 0 0 4px rgba(255, 255, 255, 1.00), inset 0 0 0 24px rgba(190, 30, 50, 1.00);}
select {width: 100%; height: 50px; background-color: rgba(255, 255, 255, 0.00); padding: 0 24px; border-radius: 25px; font-size: 1rem; color: rgba(40, 40, 40, 1.00); box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.00), 0 8px 8px 0 rgba(0, 0, 0, 0.05); -webkit-appearance: none; -moz-appearance: none; z-index: 5; cursor: pointer; transition: all 0.3s linear;}
select:hover {box-shadow: inset 0 0 0 2px rgba(20, 20, 70, 1.00), 0 0 16px 0 rgba(0, 0, 0, 0.10);}
select:focus {color: rgba(20, 20, 70, 1.00); box-shadow: inset 0 0 0 2px rgba(190, 30, 50, 1.00), 0 0 30px 0 rgba(40, 40, 40, 0.25);}
select + .s-arrow {display: block; width: 38px; height: 38px; background-color: rgba(205, 205, 216, 1.00); border-radius: 20px; position: absolute; top: 6px; right: 6px; z-index: 0; box-shadow: inset 0 0 0 0 rgba(250, 170, 0, 0.00); cursor: pointer; transition: all 0.3s;}
select + .s-arrow:after {content: ''; width: 6px; height: 6px; border-right: 2px solid; border-bottom: 2px solid; border-color: rgba(0, 10, 40, 0.50); position: absolute; right: 15px; top: 13px; transform: rotate(45deg); z-index: 1; transition: all 0.3s;}
select:hover + .s-arrow {background-color: rgba(20, 20, 70, 1.00);}
select:hover + .s-arrow:after {border-color: rgba(255, 255, 255, 1.00);}
select:focus + .s-arrow {background-color: rgba(190, 30, 50, 1.00);}
select:focus + .s-arrow:after {border-color: rgba(255, 255, 255, 1.00); top: 16px; transform: rotate(45deg) rotateZ(180deg);}
/* TEXTAREAS */
textarea {width: 100%; min-width: 100%; max-width: 100%; height: 200px; min-height: 200px; max-height: 200px; background-color: rgba(255, 255, 255, 1.00); padding: 20px 24px; border-radius: 25px; font-size: 1rem; color: rgba(40, 40, 40, 1.00); box-shadow: inset 0 0 0 2px rgba(40, 40, 40, 0.00), 0 8px 8px 0 rgba(0, 0, 0, 0.05); transition: all 0.3s linear;}
textarea:hover {box-shadow: inset 0 0 0 2px rgba(20, 20, 70, 1.00), 0 0 16px 0 rgba(0, 0, 0, 0.10);}
textarea:focus {background-color: rgba(255, 255, 255, 0.75); color: rgba(20, 20, 70, 1.00); box-shadow: inset 0 0 0 2px rgba(190, 30, 50, 1.00), 0 0 30px 0 rgba(40, 40, 40, 0.25);}
textarea::placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
textarea:-ms-input-placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
textarea::-ms-input-placeholder {color: rgba(40, 40, 40,0.75); opacity: 1;}
textarea + .opt {position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-size: 0.9rem; color: rgba(40, 40, 40, 0.30); transition: all 0.3s;}
textarea:focus + .opt {color: rgba(40, 40, 40, 0.50);}
/* OPEN ACCOUNT textarea LABELS */
textarea + .lbl {position: absolute; left: 10px; top: 11px; font-size: 1rem; color: rgba(40, 40, 40, 1.00); white-space: nowrap; transition: all 0.2s linear; z-index: -1;}
textarea:not(:placeholder-shown) + .lbl, textarea:focus + .lbl {background-color: initial; padding: initial; color: rgba(190, 30, 50, 1.00); left: initial; right: 5px; top: calc(100% - 22px); font-size: 0.85rem; z-index: 1;}
textarea:not(:placeholder-shown):not(:focus) + .lbl {color: rgba(0, 10, 40, 0.40);}
input[type=submit], button {cursor: pointer;}
h1, h2, h3, h4 {margin: 0;}
h1 {font-size: 2.5rem; font-weight: 500; color: rgba(20, 20, 70, 1.00); line-height: 3rem;}
h2 {font-size: 2rem; font-weight: 500; color: rgba(20, 20, 70, 1.00); line-height: 2.5rem;}
h3 {font-size: 1.5rem; font-weight: 500; color: rgba(20, 20, 70, 1.00); line-height: 2rem;}
h3.upper {font-size: 2.5rem; text-transform: uppercase;}
h3 > span:first-of-type {font-weight: 700; color: rgba(20, 20, 70, 1.00);}
h4.h-hilight {display: block; margin: 0 0 30px 0; font-size: 1.8rem; line-height: 1.8rem; font-weight: 700; color: rgba(190, 30, 50, 1.00); position: relative;}
h4.h-hilight:before {content: ''; width: 30px; height: 4px; background-color: rgba(190, 30, 50, 1.00); position: absolute; left: 0px; bottom: -15px;}
h4.h-lowlight {display: block; margin: 0 0 30px 0; font-size: 1.8rem; line-height: 1.8rem; font-weight: 300; color: rgba(20, 20, 70, 0.80); position: relative;}
h4.h-lowlight:before {content: ''; width: 30px; height: 2px; background-color: rgba(20, 20, 70, 0.40); position: absolute; left: 0px; bottom: -15px;}
h4.h-normallight {display: block; margin: 0 0 20px 0; font-size: 1.8rem; line-height: 1.8rem; font-weight: 700; color: rgba(20, 20, 70, 1.00); position: relative;}
.header-sep {width: 100%; height: 50px;}
.header-sep:before {content: ''; width: 180px; height: 2px; background-color: rgba(20, 20, 70, 1.00); border-radius: 2px; position: absolute; left: 50%; top: calc(50% + 5px); transform: translateX(-50%) translateY(-50%);}
p {line-height: 2rem; font-size: 1.1rem; display: block; position: relative; height: auto;}
b {font-weight: 700;}
.s-txt {font-size: 0.8rem;}
.b-txt {font-weight: 700;}
.opc-txt {opacity: 0.50;}
.txt-red {color: rgba(190, 30, 50, 1.00);}
section {width: 100%;}
section.starter {padding-top: 100px;}
section.transparent {padding: 80px 0;}
section.opaque {background-color: rgba(255, 255, 255, 0.75); padding: 80px 0;}
ul {list-style-type: none; padding: 0 0 0 20px;}
li{display: block; width: 100%; padding: 5px 0; }
li:before {content: ''; width: 8px; height: 4px;border-left: 2px solid; border-bottom: 2px solid; border-color: rgba(190, 30, 50, 1.00); position: absolute; left: -18px; top: 9px; transform: rotate(-45deg); font-size: 1.1rem;}
ul.ident li {padding: 5px 0 5px 10px;}
ul.ident li:before {display: none;}
span.item {width: 100%; display: inline-block; padding: 10px 10px; position: relative;}
span.item:before{content: ''; width: 8px; height: 4px;border-left: 2px solid; border-bottom: 2px solid; border-color: rgba(190, 30, 50, 1.00); position: absolute; left: -4px; top: 11px; transform: rotate(-45deg); font-size: 1.1rem;}
.bullet-tick {display: inline-block; width: 8px; height: 4px;border-left: 2px solid; border-bottom: 2px solid; border-color: rgba(190, 30, 50, 1.00); margin: 0 10px 0 0; transform: rotate(-45deg) translateY(-3px);}
.bullet-arrow {display: inline-block; width: 8px; height: 8px; border-right: 2px solid; border-top: 2px solid; border-color: rgba(190, 30, 50, 1.00); margin: 0 10px 0 0; transform: rotate(45deg) translateY(-3px);}
.bullet-numb-big {display: inline-block; width: 32px; height: 32px; background-color: rgba(0, 10, 50, 1.00); border-radius: 32px; line-height: 32px; font-size: 1.6rem; font-weight: 300; text-align: center; color: rgba(255, 255, 255, 1.00) !important; transform: translateY(-2px);}
/* GENEALS ----------------------------------------------------------------------------------------------------------------------*/
.g-btn {display: inline-block; position: relative; padding: 15px 50px; border-radius: 30px; background-color: rgba(20, 20, 70, 1.00); font-size: 1.2rem; color: rgba(255, 255, 255, 1.00); text-transform: uppercase; box-shadow: 0 1px 3px 0 rgba(0, 10, 40, 0.15); transition: all 0.3s;}
.g-btn:hover {background-color: rgba(255, 255, 255, 1.00); color: rgba(20, 20, 70, 1.00); box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);}
.g-btn:active {background-color: rgba(245, 245, 245, 1.00); box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.25);}
.g-link {display: inline-block !important; position: relative; color: rgba(20, 20, 70, 1.00) !important;}
.g-link:after {content: ''; width: 0%; height: 2px; border-radius: 2px; background-color: rgba(20, 20, 70, 1.00); position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); transition: all 0.3s;}
.g-link:hover:after {width: 100%;}
.g-link.red {color: rgba(190, 30, 50, 1.00) !important;}
.g-link.red:after {background-color: rgba(190, 30, 50, 1.00);}
/* HORIZONTAL SEPERATORS */
.hs-00 {width: 100%; height: 0px;}
.hs-10 {width: 100%; height: 10px;}
.hs-20 {width: 100%; height: 20px;}
.hs-30 {width: 100%; height: 30px;}
.hs-40 {width: 100%; height: 40px;}
.hs-100 {width: 100%; height: 100px;}
.hs-l {width: 100%; height: 1px; margin: 10px 0; background-color: rgba(0, 0, 0, 0.10);}
/* CONTAINERS */
.mc {width: 100%; max-width: 1200px; padding: 0 10px 0 10px; left: 50%; transform: translateX(-50%);}
.c-20 {width: calc(20% - 20px); margin: 0 10px;}
.c-25 {width: calc(25% - 20px); margin: 0 10px;}
.c-33 {width: calc(33.333333% - 20px); margin: 0 10px;}
.c-50 {width: calc(50% - 20px); margin: 0 10px;}
.c-66 {width: calc(66.666666% - 20px); margin: 0 10px;}
.c-75 {width: calc(75% - 20px); margin: 0 10px;}
.c-100 {width: calc(100% - 20px); margin: 0 10px;}
.c-100-f {width: 100%;}
.award-c img {max-width: calc(100% - 20px); margin: 0 10px;}
.c-32 {width: 32%}
.c-68 {width: 68%}
.c-flex {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
.c-img .bg-img {width: calc(100% - 40px); position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; opacity: 0.25}
/*ALIGNMENTS*/
.a-l {text-align: left;}
.a-c {text-align: center;}
.a-r {text-align: right;}
.go-r {float: right;}
.go-c {float: left; left: 50%; transform: translateX(-50%);}
.hi {display: none;}
.img-mob {width: calc(100% - 40px); max-width: 480px; left: 50%; transform: translateX(-50%); position: relative; float: left;}
.hidde-desk {display: none;}
/* GENEALS ----------------------------------------------------------------------------------------------------------------------*/
/* MAIN NAVIGATION */
.m-nav {width: 100%; height: 120px; background-color: rgba(0, 0, 0, 0.00); position: fixed; top: 0px; left: 0px; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.10), 0 0px 0px 0 rgba(0, 0, 0, 0.10), 0 0px 0px 0 rgba(0, 0, 0, 0.10); transition: all 0.3s; z-index: 9999;}
.m-nav.fix {height: 100px; background-color: rgba(255, 255, 255, 0.80); backdrop-filter: blur(5px); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05), 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 8px 8px 0 rgba(0, 0, 0, 0.05), 0 16px 16px 0 rgba(0, 0, 0, 0.05);}
.m-nav .mc {top: 50%; transform: translateX(-50%) translateY(-50%); padding-bottom: 20px; box-shadow: 0 1px 0 0 rgba(40, 40, 40, 0.05);}
.m-nav.fix .mc {padding-bottom: 0; box-shadow: 0 0 0 0 rgba(40, 40, 40, 0.00);}
.m-nav > label {display: none;}
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.nav-l-c {width: calc(100% - 150px);}
}}
.nav-l-c {position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-size: 1.2rem;}
.nav-l {position: relative; display: inline-block; padding: 10px 12px; text-transform: uppercase; font-weight: 700; color: rgba(20, 20, 70, 1.00);}
.nav-l small {color: rgba(20, 20, 70, 1.00); font-size: 1rem; font-weight: 700;}
.nav-l:hover, .nav-l:hover small {color: rgba(190, 30, 50, 1.00); transition: color 0.3s;}
.nav-l .ut {width: 100%; text-align: center; position: absolute; left: 0px; transform: translateY(-7px); color: rgba(20, 20, 70, 1.00); font-size: 1rem; font-weight: 500;}
.nav-l:hover, .nav-l:hover .ut {color: rgba(190, 30, 50, 1.00); transition: color 0.3s;}
.nav-l.dropd {padding-left: 30px; cursor: pointer;}
.nav-l.dropd > .arrow {background: none; width: 8px; height: 8px; position: absolute; left: 12px; top: 14px; transform: rotate(45deg); box-shadow: inset -2px -2px 0 0 rgba(20, 20, 70, 1.00); transition: all 0.3s;}
.nav-l.dropd:hover > .arrow {box-shadow: inset -2px -2px 0 0 rgba(190, 30, 50, 1.00); border-radius: 4px; background-color: rgba(190, 30, 50, 1.00); top: 16px;}
.nav-l.dropd > .dropd-c {opacity: 0.00; max-height: 0px; background-color: rgba(255, 255, 255, 1.00); padding: 10px 20px; border-radius: 5px; position: absolute; left: 0px; top: calc(100% + 30px); box-shadow: 0 1px 5px 0 rgba(40, 40, 40, 0.25); overflow: hidden; z-index: -1; transition: all 0.3s;}
.nav-l.dropd:hover > .dropd-c {opacity: 1.00; max-height: 300px; top: 100%;}
.nav-l.dropd > .dropd-c a {display: inline-block; width: 100%; padding: 15px 10px; text-transform: uppercase; color: rgba(20, 20, 70, 1.00); white-space: nowrap;}
.nav-l.dropd > .dropd-c a:last-child {box-shadow: none;}
.nav-l.dropd > .dropd-c a:hover {color: rgba(190, 30, 50, 1.00);}
.nav-hl {background: linear-gradient(90deg, rgba(190, 30, 50, 1.00) 0%, rgba(240, 60, 120, 1.00) 120%); white-space: nowrap; padding: 10px 30px; border-radius: 30px; color: rgba(255, 255, 255, 1.00); font-weight: 700; transition: all 0.3s;}
.nav-hl:hover {padding: 10px 40px; text-shadow: 0 1px 3px rgba(0, 20, 50, 0.50);}
.nav-hl-l {background-color: rgba(255, 255, 255, 1.00); white-space: nowrap; padding: 10px 30px; border-radius: 30px; color: rgba(190, 30, 50, 1.00); box-shadow: inset 0 0 0 3px rgba(190, 30, 50, 1.00); font-weight: 700; transition: all 0.3s;}
.nav-hl-l:hover {box-shadow: inset 0 0 0 50px rgba(190, 30, 50, 1.00); color: rgba(255, 255, 255, 1.00);}
.nav-l.desk {display: inline-block;}
.nav-l.mob {display: none; padding: 5px 15px; font-weight: 300;}
.nav-l.mob:nth-child(3) {box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.10)}
.nav-l a img {width: calc(50% - 12px); max-width: 200px; min-width: 160px; margin: 0 5px; display: inline-block;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* LANDING */
.hp-landing .mc {padding-right: 440px; padding-bottom: 80px;}
.cta-c {width: 100%; max-width: 600px; margin: 40px 0 0 0;}
.cta-c img {width: 100%; height: auto;}
.cta-c h1 {font-size: 3.0rem; font-weight: 700; line-height: 3.5rem; margin: 0 0 10px 0;}
.cta-c h2 {font-size: 2.5rem; font-weight: 300; line-height: 3.5rem;}
.form-c {width: calc(100% - 20px); max-width: 460px; background: linear-gradient(0deg, rgba(255, 255, 255, 1.00) 20%, rgba(230, 230, 240, 1.00) 160%); padding: 20px 40px 40px 40px; border-radius: 10px; position: absolute; right: 0px; margin: 40px 0 0 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 8px 8px 0 rgba(0, 0, 0, 0.02), 0 16px 16px 0 rgba(0, 0, 0, 0.02), 0 32px 32px 0 rgba(0, 0, 0, 0.02), 0 64px 64px 0 rgba(0, 0, 0, 0.02); animation: FormAnime 2s;}
@keyframes FormAnime {
0% {opacity: 0.00; transform: translateY(-50px); right: 0;}
50% {opacity: 0.00; transform: translateY(-50px); right: 0;}
100% {opacity: 1.00; transform: translateY(0px); right: 0;}
}
.form-c.fixed {max-width: initial; position: relative; right: initial; margin: 0 10px 40px 10px;}
.form-c .title {font-size: 2.2rem; font-weight: 300; text-align: center;}
.form-c .auth-submit-button {width: 100%; height: 60px; padding: 0; background: linear-gradient(90deg, rgba(190, 30, 50, 1.00) 0%, rgba(240, 60, 120, 1.00) 120%); border-radius: 30px; perspective: 100px; transition: all 0.3s;color:black!important}
.form-c .auth-submit-button:hover {background-color: rgba(255, 255, 255, 0.50); border-radius: 30px;}
.form-c .auth-submit-button:before {content: ''; width: calc(100% - 8px); height: calc(100% - 7px); border-radius: 30px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; opacity: 1.00; transition: all 0.3s;}
.form-c .auth-submit-button:hover:before {width: 0; height: 0px; opacity: 0.00; filter: blur(5px);}
.form-c .auth-submit-button span {width: 100%; background: -webkit-linear-gradient(0deg, rgba(190, 30, 50, 1.00) 0%, rgba(240, 60, 120, 1.00) 120%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; z-index: 2; transition: all 0.3s;}
.form-c .auth-submit-button:hover span {background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 1.00) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; text-transform: uppercase; transform: translateX(-50%) translateY(-50%) scale(1.3);}
.form-c .m-bt {width: 100%; height: 60px; padding: 0; background: linear-gradient(90deg, rgba(190, 30, 50, 1.00) 0%, rgba(240, 60, 120, 1.00) 120%); border-radius: 30px; perspective: 100px; transition: all 0.3s;}
.form-c .m-bt:hover {background-color: rgba(255, 255, 255, 0.50); border-radius: 30px;}
.form-c .m-bt:before {content: ''; width: calc(100% - 8px); height: calc(100% - 7px); background-color: rgba(255, 255, 255, 1.00); border-radius: 30px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 1; opacity: 1.00; transition: all 0.3s;}
.form-c .m-bt:hover:before {width: 0; height: 0px; opacity: 0.00; filter: blur(5px);}
.form-c .m-bt span {width: 100%; background: -webkit-linear-gradient(0deg, rgba(190, 30, 50, 1.00) 0%, rgba(240, 60, 120, 1.00) 120%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; z-index: 2; transition: all 0.3s;}
.form-c .m-bt:hover span {background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1.00) 0%, rgba(255, 255, 255, 1.00) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; text-transform: uppercase; transform: translateX(-50%) translateY(-50%) scale(1.3);}
.form-c form {width: 100%; display: block;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* HILIGHTS */
section.hilights .mc {background-color: rgba(255, 255, 255, 1.00); margin: 20px 0 0 0; border-radius: 10px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02), 0 4px 4px 0 rgba(0, 0, 0, 0.02), 0 8px 8px 0 rgba(0, 0, 0, 0.02), 0 16px 16px 0 rgba(0, 0, 0, 0.02), 0 32px 32px 0 rgba(0, 0, 0, 0.02), 0 64px 64px 0 rgba(0, 0, 0, 0.02);}
section.hilights .mc .item-c {width: 20%; padding: 70px 0 20px 0; text-align: center; font-size: 1.6rem; line-height: 1.3rem; font-weight: 700; color: rgba(200, 30, 50, 1.00); text-transform: uppercase;animation: ItemAnime; animation-duration: 450ms; animation-delay: calc(var(--animation-order) * 250ms); animation-fill-mode: both; animation-timing-function: ease-in-out; transition: all 0.3s; cursor: default;}
section.hilights .mc .item-c:hover {color: rgba(20, 20, 70, 1.00);}
section.hilights .mc .item-c .icon.small {width: 40px; height: 40px; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); filter: brightness(0); transition: all 0.3s;}
section.hilights .mc .item-c:hover .icon.small {filter: initial;}
section.hilights .mc .item-c span {font-size: 1.2rem; color: rgba(20, 20, 70, 1.00); font-weight: 300; transition: all 0.3s;}
section.hilights .mc .item-c:hover span {color: rgba(200, 30, 50, 1.00);}
@keyframes ItemAnime {
0% {background-color: rgba(255, 255, 255, 1.00); transform: rotateX(90deg) translateY(-20px) scale(2); opacity: 0.00;}
40% {transform: rotateX(00deg) translateY(0px) scale(0.8); opacity: 1.00;}
60% {transform: rotateX(00deg) translateY(0px) scale(1.1); opacity: 1.00;}
80% {transform: rotateX(00deg) translateY(0px) scale(0.9); opacity: 1.00;}
100% {transform: rotateX(00deg) translateY(0px) scale(1);}
}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* HILIGHTS BOX*/
.b-hlt-c {padding: 120px 20px 20px 20px; margin: 0 0 20px 0; text-align: center; transition: all 0.3s; perspective: 100px; overflow: hidden; cursor: default;}
.b-hlt-c.c-25, .b-hlt-c.c-20 {padding: 120px 10px 10px 10px;}
.b-hlt-c.c-20 {margin: 0 10px; perspective: 300px;}
.b-hlt-c:before {content:''; width: 20%; height: 100%; background-color: rgba(20, 20, 70, 0.00); position: absolute; left: -30%; top: 0px; transform: skew(-20deg); filter: blur(15px); transition: all 0.5s;}
.b-hlt-c:hover:before {width: 30%; background-color: rgba(20, 20, 70, 0.05); left: 90%; filter: blur(30px);}
.b-hlt-c:hover {background-color: rgba(255, 255, 255, 1.00); transform: scale(1.1); border-radius: 10px; box-shadow: 0 10px 40px 0 rgba(20, 20, 70, 0.10); z-index: 10;}
.b-hlt-c .icon {position: absolute; left: 50%; top: 20px; transform: translateX(-50%); transition: all 0.3s;}
.b-hlt-c:hover .icon {filter: brightness(0.1) hue-rotate(-130deg); animation: HilightIconsAnime 0.5s;}
.b-hlt-c .title {width: 100%; height: 50px; margin: 0 0 20px 0; transition: all 0.3s;}
.b-hlt-c .title span {width: calc(100% - 20px); position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 2rem; font-weight: 700; line-height: 2rem;}
.b-hlt-c:hover .title { color: rgba(200, 30, 50, 1.00);}
.b-hlt-c p {font-size: 1.2rem; padding: 0 40px;}
.b-hlt-c.c-25 p {font-size: 1.1rem; padding: 0 20px;}
.b-hlt-c.c-20 .g-btn {text-transform: none; font-size: 1rem; padding: 15px 25px;}
.s-hlt-c {width: 100%; min-height: 100px; padding: 10px 10px 10px 90px; margin: 0 0 20px 0; border-radius: 5px; background-color: rgba(200, 30, 50, 1.00); transition: all 0.3s; cursor: default !important;}
.s-hlt-c:hover {background-color: rgba(20, 20, 70, 1.00); cursor: pointer; box-shadow: 0 5px 20px 0 rgba(20, 20, 70, 0.50);}
.s-hlt-c .icon {position: absolute; left: 20px; top: 50%; transform: translateY(-50%); filter: grayscale(1) brightness(10); transition: all 0.3s;}
.s-hlt-c:hover .icon {transform: translateY(-50%) scale(1.3);}
.s-hlt-c p {width: calc(100% - 100px); margin: 0; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; line-height: 1.2rem; font-weight: 700; text-align: center; color: rgba(255, 255, 255, 1.00);}
@keyframes HilightIconsAnime {
0% {transform: translateX(-50%) rotateY(0deg);}
20% {transform: translateX(-50%) rotateY(-30deg);}
40% {transform: translateX(-50%) rotateY(20deg);}
60% {transform: translateX(-50%) rotateY(-20deg);}
80% {transform: translateX(-50%) rotateY(10deg);}
100% {transform: translateX(-50%) rotateY(0deg);}
}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* TABLE */
section.table {padding: 60px 0 60px 0; background-color: rgba(255, 255, 255, 1.00); box-shadow: 0 0 20px 0 rgba(20, 20, 70, 0.20);}
.tab-toggles-c {width: 100%;}
.tab-toggles-c .lbl-c {width: 100%; padding: 7px 20px 3px 20px; border-radius: 10px; box-shadow: inset 0 1px 3px 0 rgba(20, 20, 70, 0.20), 0 0 0 0 rgba(20, 20, 70, 0.10); transition: all 0.3s;}
.tab-toggles-c .lbl-c:hover {width: 100%; padding: 7px 20px 3px 20px; border-radius: 10px; box-shadow: inset 0 -1px 0 0 rgba(20, 20, 70, 0.15), 0 5px 15px 0 rgba(20, 20, 70, 0.10);}
.tab-toggles-c .lbl-c label {display: block; width: 20%; height: 50px; border-radius: 5px 5px 0 0; position: relative; float: left; font-size: 1.1rem; font-weight: bolder; line-height: 50px; text-align: center; color: rgba(20, 20, 70, 1.00); text-shadow: 0 1px rgba(255, 255, 255, 1.00); box-shadow: 0 0 0 0 rgba(20, 20, 70, 0.00); text-transform: uppercase; cursor: pointer; transition: all 0.3s;}
.tab-toggles-c .lbl-c label:hover {box-shadow: 0 3px 0 0 rgba(20, 20, 70, 1.00);}
input[type=radio]#fxmajors:checked ~ .lbl-c label:nth-child(1),
input[type=radio]#cryptos:checked ~ .lbl-c label:nth-child(2),
input[type=radio]#fxcrosses:checked ~ .lbl-c label:nth-child(3),
input[type=radio]#indices:checked ~ .lbl-c label:nth-child(4),
input[type=radio]#commodities:checked ~ .lbl-c label:nth-child(5) {color: rgba(200, 30, 50, 1.00); box-shadow: 0 3px 0 0 rgba(200, 30, 50, 1.00);}
.table-mc {width: 100%; overflow: hidden;}
.table-mc table {width: 100%;}
.table-mc table tr th {width: 25%; height: 50px; font-size: 1.2rem; font-weight: bold; color: rgba(80, 80, 80, 1.00);}
.table-ic {width: 500%; transition: all 0.3s;}
.table-ic table {position: relative; float: left; width: 20%; color: rgba(0, 10, 20, 1.00); font-size: 1.1rem; text-align: center;}
.table-ic table tr {box-shadow: 0 1px 0 0 rgba(20, 20, 70, 0.10);}
.table-ic table tr:last-child {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00);}
.table-ic table tr td:first-child { height: 40px; color: rgba(80, 80, 80, 1.00); font-weight: lighter;}
.table-ic table tr td:last-child {height: 40px; color: rgba(80, 80, 80, 1.00); font-weight: bolder;}
.table-ic table tr td {width: 25%; color: rgba(40, 170, 70, 1.00); font-weight: 300;}
.table-ic table tr td.red {color: rgba(240, 30, 40, 1.00); font-weight: 300;}
input[type=radio]#fxmajors:checked ~ .table-mc .table-ic {transform: translateX(0%);}
input[type=radio]#cryptos:checked ~ .table-mc .table-ic {transform: translateX(-20%);}
input[type=radio]#fxcrosses:checked ~ .table-mc .table-ic {transform: translateX(-40%);}
input[type=radio]#indices:checked ~ .table-mc .table-ic {transform: translateX(-60%);}
input[type=radio]#commodities:checked ~ .table-mc .table-ic {transform: translateX(-80%);}
.assets-t {width: 100%;}
.assets-t tr td {box-shadow: inset 0 0 0 1px rgba(20, 20, 70, 0.10); font-size: 1.4rem; padding: 20px; transition: all 0.3s; cursor: default;}
.assets-t tr td:hover {background-color: rgba(190, 30, 50, 1.00); color: rgba(255, 255, 255, 1.00); border-radius: 5px; transform: scale(1.2);}
.assets-t tr td:hover:not(:hover) {color: rgba(20, 20, 70, 0.20);}
.assets-t tr td.empty {display: none;}
.m-table {width: 100%;}
.m-table tr th {height: 50px; font-size: 1.2rem; font-weight: bold; color: rgba(80, 80, 80, 1.00);}
.m-table tr {box-shadow: 0 1px 0 0 rgba(20, 20, 70, 0.10);}
.m-table tr:last-child {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.00);}
.m-table tr td:first-child {height: 40px; color: rgba(80, 80, 80, 1.00); font-weight: 700;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* REASONS */
section.white {padding: 60px 0 40px 0; background-color: rgba(255, 255, 255, 1.00); background-image: url("../img/horns.jpg"); background-position: center top; background-repeat: no-repeat; text-align: center;}
section.white h1 { font-size: 3rem; text-align: center; margin: 0 0 40px 0;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* FAQS */
.faqs-c {padding: 0 20px; margin: 0 0 20px 0;}
.faq-c {display: block; padding: 10px; border-radius: 5px; margin: 10px 0; transition: all 0.3s; perspective: 100px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px rgba(20, 20, 70, 0.20);}
.faq-c:hover {box-shadow: 0 5px 10px 0 rgba(20, 20, 70, 0.20);}
.faq-c:before {content:''; width: 20%; height: 100%; background-color: rgba(20, 20, 70, 0.00); position: absolute; left: -30%; top: 0px; transform: skew(-20deg); filter: blur(15px); transition: all 0.5s;}
input[type="checkbox"]:checked + .faq-c:before {width: 30%; background-color: rgba(20, 20, 70, 0.05); left: 90%; filter: blur(30px);}
input[type="checkbox"]:checked + .faq-c {background-color: rgba(255, 255, 255, 1.00); padding: 20px; margin: 20px 0; transform: scale(1.05); border-radius: 10px; box-shadow: 0 10px 40px 0 rgba(20, 20, 70, 0.10);}
.faq-c .faq-q {display: block; width: 100%; padding: 0 0 0 14px; font-size: 1.2rem; position: relative; float: left; transition: all 0.3s;}
.faq-c .faq-q:before {content: ''; width: 8px; height: 8px; position: absolute; left: 2px; top: 8px; transform: rotate(-45deg); box-shadow: inset -3px -3px 0 0 rgba(20, 20, 70, 1.00); transition: all 0.3s;}
.faq-c:hover .faq-q:before {box-shadow: inset -3px -3px 0 0 rgba(190, 30, 50, 1.00);}
input[type="checkbox"]:checked + .faq-c .faq-q:before {left: 2px; top: calc(100% - 17px); transform: rotate(45deg); box-shadow: inset -3px -3px 0 0 rgba(190, 30, 50, 1.00)}
input[type="checkbox"]:checked + .faq-c .faq-q {color: rgba(190, 30, 50, 1.00); margin: 0 0 20px 0;}
.faq-c p {font-size: 0.9rem; line-height: 1rem; max-height: 0; padding: 0; margin: 0; color: rgba(40, 40, 40, 1.00); opacity: 0.00; transition: all 0.1s;}
input[type="checkbox"]:checked + .faq-c p {max-height: 600px; opacity: 1.00;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* EARNINGS TABLE */
.earnings-table {width: 100%;}
.earnings-table tr {padding: 20px 0; box-shadow: 0 1px 0 0 rgba(20, 20, 70, 0.20);}
.earnings-table tr th {font-size: 1.2rem; font-weight: 700; color: rgba(190, 30, 50, 1.00);}
.earnings-table tr th:first-of-type {text-align: left;}
.earnings-table tr td {padding: 15px 0; text-align: center;}
.earnings-table tr td:first-of-type {text-align: left;}
.earnings-table tr td:last-of-type {font-weight: 700;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
.mp-banner-btn {display: block; padding: 20px; margin: 0 10px 20px 10px; border-radius: 10px; text-align: center; line-height: 0; perspective: 300px; position: relative; float: left; box-shadow: 0 0 0 1px rgba(20, 20, 70, 0.10); overflow: hidden; cursor: pointer; transition: all 0.3s;}
.mp-banner-btn:hover {background-color: rgba(255, 255, 255, 1.00); transform: scale(1.1); box-shadow: 0 10px 40px 0 rgba(20, 20, 70, 0.10); z-index: 10;}
.mp-banner-btn:before {content:''; width: 20%; height: 100%; background-color: rgba(20, 20, 70, 0.00); position: absolute; left: -30%; top: 0px; transform: skew(-20deg); filter: blur(15px); transition: all 0.5s;}
.mp-banner-btn:hover:before {width: 30%; background-color: rgba(20, 20, 70, 0.05); left: 90%; filter: blur(30px);}
.mp-banner-btn .overflow {width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.80); padding: 60px 10px 10px 10px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.8); line-height: 1rem; z-index: 10; opacity: 0.00; transition: all 0.5s;}
.mp-banner-btn:hover .overflow {opacity: 1.00; transform: translateX(-50%) translateY(-50%) scale(1.0);}
.mp-banner-btn .overflow .icon {filter: grayscale(1);}
.mp-banner-btn .overflow .title {font-size: 1.1rem; font-weight: 300;}
.mp-banner-btn .overflow .cta-download {display: inline-block; position: relative; color: rgba(20, 20, 70, 1.00); font-size: 1.4rem; font-weight: 700; transition: all 0.3s;}
.mp-banner-btn:hover .overflow .cta-download {color: rgba(190, 30, 50, 1.00);}
.mp-banner-btn .overflow .cta-download:after {content: ''; width: 0%; height: 2px; border-radius: 2px; background-color: rgba(190, 30, 50, 1.00); position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); transition: all 0.3s;}
.mp-banner-btn:hover .overflow .cta-download:after {width: 100%;}
.mp-banner-btn img {width: 100%; transition: all 0.3s;}
.mp-banner-btn:hover img {filter: blur(5px); animation: MediaPackAnime 0.5s;}
@keyframes MediaPackAnime {
0% {transform: rotateY(0deg);}
20% {transform: rotateY(-20deg);}
40% {transform: rotateY(15deg);}
60% {transform: rotateY(-15deg);}
80% {transform: rotateY(10deg);}
100% {transform: rotateY(0deg);}
}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */
#FooterObject {width: 100%; height: 1000px; z-index: 1000;}
.footer-c {padding: 50px 0 0 0; background-color: rgba(20, 20, 70, 1.00);}
.footer-c * {color: rgba(255, 255, 255, 1.00);}
.footer-c .mc .c-25:last-child {text-align: center; margin: 40px 0; opacity: 0.50;}
.footer-c .mc .c-25:last-child p {padding-top: 20px; font-size: 0.9rem; font-weight: 300; line-height: 0.9rem;}
.footer-c .mc .c-25 {position: relative;}
.footer-c .mc .c-25 img {filter: grayscale(1) brightness(12);}
.footer-c .mc .c-25 a img {filter:initial; width: 32px; height: 32px; transition: all 0.3s;}
.footer-c .mc .c-25 a img:hover {transform: scale(1.5); filter: brightness(190%);}
.footer-c .mc .c-25 h3 {font-size: 1.4rem; font-weight: 300; color: rgba(255, 255, 255, 0.75);}
.footer-c .mc .c-25 .g-link {display: inline; margin: 5px 0; color: rgba(255, 255, 255, 1.00) !important;}
.footer-c .mc .c-25 .g-link:after {background-color: rgba(255, 255, 255, 1.00);}
.sub-footer-c {background-color: rgba(0, 0, 0, 0.20); padding: 50px 0; margin: 50px 0 0 0;}
.sub-footer-c .mc p b {font-size: 0.8rem; color: rgba(255, 255, 255, 0.75);}
.sub-footer-c .mc p {font-size: 0.8rem; color: rgba(255, 255, 255, 0.50);}
.sub-footer-c .mc p .g-link {color: rgba(255, 255, 255, 1.00) !important;}
.sub-footer-c .mc p .g-link:after {background-color: rgba(190, 30, 50, 1.00);}
/* ----------------------------------------------------------------------------------------------------------------------*/
.anchor {transform: translateY(-190px);}
/* ICONS */
.icon {display: inline-block; width: 80px; height: 80px; background-size: 80px; background-image: url('../img/sprt.png');}
.icon.white {filter: grayscale(1) brightness(8);}
.icon.small {width: 40px; height: 40px; background-size: 40px;}
.icon.small.leverage {background-position-y: -0px}
.icon.small.crypto-pairs {background-position-y: -40px}
.icon.small.currency-pairs {background-position-y: -80px}
.icon.small.stocks {background-position-y: -120px}
.icon.small.indices {background-position-y: -160px}
.icon.small.shield {background-position-y: -200px}
.icon.small.money-check {background-position-y: -240px}
.icon.small.low-spreads {background-position-y: -280px}
.icon.small.low-commission {background-position-y: -320px}
.icon.small.candles {background-position-y: -360px}
.icon.small.demo {background-position-y: -400px}
.icon.small.new-account {background-position-y: -440px}
.icon.small.cog {background-position-y: -480px}
.icon.small.earnings {background-position-y: -520px}
.icon.small.support {background-position-y: -560px}
.icon.small.withdraw {background-position-y: -600px}
.icon.small.manager {background-position-y: -640px}
.icon.small.no-fees {background-position-y: -680px}
.icon.small.support247 {background-position-y: -720px}
.icon.small.stats {background-position-y: -760px}
.icon.small.five-dollars {background-position-y: -800px}
.icon.small.referrals {background-position-y: -840px}
.icon.small.life-commission {background-position-y: -880px}
.icon.small.download {background-position-y: -920px}
.icon.small.month-pay {background-position-y: -960px}
.icon.small.percent-up {background-position-y: -1000px}
.icon.leverage {background-position-y: -0px}
.icon.crypto-pairs {background-position-y: -80px}
.icon.currency-pairs {background-position-y: -160px}
.icon.stocks {background-position-y: -240px}
.icon.indices {background-position-y: -320px}
.icon.shield {background-position-y: -400px}
.icon.money-check {background-position-y: -480px}
.icon.low-spreads {background-position-y: -560px}
.icon.low-commission {background-position-y: -640px}
.icon.candles {background-position-y: -720px}
.icon.demo {background-position-y: -800px}
.icon.new-account {background-position-y: -880px}
.icon.cog {background-position-y: -960px}
.icon.earnings {background-position-y: -1040px}
.icon.support {background-position-y: -1120px}
.icon.withdraw {background-position-y: -1200px}
.icon.manager {background-position-y: -1280px}
.icon.no-fees {background-position-y: -1360px}
.icon.support247 {background-position-y: -1440px}
.icon.stats {background-position-y: -1520px}
.icon.five-dollars {background-position-y: -1600px}
.icon.referrals {background-position-y: -1680px}
.icon.life-commission {background-position-y: -1760px}
.icon.download {background-position-y: -1840px}
.icon.month-pay {background-position-y: -1920px}
.icon.percent-up {background-position-y: -2000px}
.users.i30 {background-position-y: -0px; background-size: 30px;}
.commission.i30 {background-position-y: -30px; background-size: 30px;}
.earning.i30 {background-position-y: -60px; background-size: 30px;}
.wm-modal {display: block; width: 100vw; height: 100vh; background-color: rgba(20, 20, 70, 0.50); backdrop-filter: blur(5px); left: 50%; top: -110%; transform: translateX(-50%) translateY(-50%); position: fixed; z-index: 99999; transition: 0.6s; transition-delay: 0.3s}
.modal-c {display: block; width: calc(100vw - 20px); height: auto; max-width: 600px; background-color: rgba(20, 20, 70, 0.75); backdrop-filter: blur(5px); padding: 10px; border-radius: 5px; left: 50%; top: -110%; transform: translateX(-50%) translateY(-50%); line-height: 0; position: fixed; box-shadow: 0 40px 50px 0 rgba(20, 20, 70, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.20); z-index: 999999; transition: all 0.6s; transition-delay: 0.0s}
.modal-c img {width: 100%;}
.modal-c .btn-close {width: 60px; height: 60px; background-color: rgba(20, 20, 70, 1.00); border-radius: 30px; position: fixed; left: 50%; top: calc(100% + 0px); transform: translateX(-50%); cursor: pointer; box-shadow: 0 2px 2px 0 rgba(20, 20, 70, 0.20); opacity: 0.00; transition: all 0.3s;}
.modal-c .btn-close:hover {background-color: rgba(200, 30, 50, 1.00); box-shadow: 0 30px 30px 0 rgba(200, 30, 50, 0.75);}
.modal-c .btn-close span {position: absolute; left: 50%; top: 80px; transform: translateX(-50%); font-size: 1.2rem; color: rgba(255, 255, 255, 1.00); opacity: 0.00; transition: all 0.6s;}
.modal-c .btn-close:hover span {opacity: 1.00;}
.modal-c .btn-close:before,
.modal-c .btn-close:after {content: ''; width: 26px; height: 3px; border-radius: 2px; background-color: rgba(255, 255, 255, 1.00); position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all 0.6s;}
.modal-c .btn-close:after {transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
#ShowPopup:checked ~ .wm-modal {top: 50%; transform: translateX(-50%) translateY(-50%); transition-delay: 0.0s}
#ShowPopup:checked ~ .modal-c {top: 50%; transform: translateX(-50%) translateY(-50%); transition-delay: 0.3s}
#ShowPopup:checked ~ .modal-c .btn-close {top: calc(100% + 20px); opacity: 1.00;}
.modal-c .s-btn {width: 40px; height: 40px; background-color: rgba(20, 20, 70, 0.80); border-radius: 20px; position: absolute; left: 20px; bottom: 20px; transition: all 0.3s;}
.modal-c .s-btn:hover {background-color: rgba(20, 20, 70, 1.00);}
.modal-c .s-btn:nth-child(2) {left: 70px}
.modal-c .s-btn img {position: absolute; width: 18px; height: auto; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.modal-c .s-btn:nth-child(2) img {left: calc(50% - 2px)}
.wm-modal {animation: DELAY_WM_MODAL 3s}
.modal-c {animation: DELAY_WM_MODAL 3.2s}
@keyframes DELAY_WM_MODAL {
0% {top: -110%; transform: translateX(-50%) translateY(-50%);}
90% {top: -110%; transform: translateX(-50%) translateY(-50%);}
100% {top: 50%; transform: translateX(-50%) translateY(-50%);}
}
.modal-c .btn-close {animation: DELAY_BTN_CLOSE 6s}
@keyframes DELAY_BTN_CLOSE {
0% {top: calc(100% + 0px); opacity: 0.00;}
90% {top: calc(100% + 0px); opacity: 0.00;}
100% {top: calc(100% + 20px); opacity: 1.00;}
}
@media only screen and (max-width: 1250px) {
/* LANDING */
.form-c {
width: calc(100% - 80px);
max-width: 400px;
right: 20px
}
/* ----------------------------------------------------------------------------------------------------------------------*/
}
@media only screen and (max-width: 950px) {
/* LANDING */
.nav-l {padding: 10px 4px;}
/* ----------------------------------------------------------------------------------------------------------------------*/
}
@media only screen and (max-width: 850px) {
/* CONTAINERS */
.c-20 {width: calc(100% - 20px); text-align: center;}
.c-25 {width: calc(100% - 20px); text-align: center;}
.c-33 {width: calc(100% - 20px);}
.c-50 {width: calc(100% - 20px);}
.c-66 {width: calc(100% - 20px);}
.c-75 {width: calc(100% - 20px);}
.c-100 {width: calc(100% - 20px);}
.c-32 {width: 100%}
.c-68 {width: 100%}
.hp-landing .mc {padding: 0 10px 0 10px;}
.hs-100 {height: 60px;}
.m-nav {height: 120px;}
.m-nav > label {display: block; width: 30px; height: 30px; position: absolute; right: 20px; top: 20px; z-index: 5; cursor: pointer; transition: all 0.3s;}
.m-nav.fix > label {top: 30px;}
.m-nav > label > .mbtn-ic {width: 30px; height: 2px; background-color: rgba(20, 20, 70, 1.00); position: absolute; left: 0px; top: 50%; transform: translateY(-50%); transition: all 0.3s;}
.m-nav > label > .mbtn-ic:before, .m-nav > label > .mbtn-ic:after {content:''; width: 30px; height: 2px; background-color: rgba(20, 20, 70, 1.00); position: absolute; right: 0px; top: -11px; transition: all 0.3s;}
.m-nav > label > .mbtn-ic:after {top: initial; bottom: -11px;}
.m-nav > label:hover > .mbtn-ic {background-color: rgba(200, 30, 50, 1.00);}
.m-nav > label:hover > .mbtn-ic:before, .m-nav > label:hover > .mbtn-ic:after {background-color: rgba(200, 30, 50, 1.00); top: -13px;}
.m-nav > label:hover > .mbtn-ic:after {top: initial; bottom: -13px;}
input[type="checkbox"]:checked ~ label > .mbtn-ic {background-color: transparent; transform: rotateY(180deg);}
input[type="checkbox"]:checked ~ label > .mbtn-ic:before, input[type="checkbox"]:checked ~ label > .mbtn-ic:after {left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg);}
input[type="checkbox"]:checked ~ label > .mbtn-ic:after {bottom: initial; transform: translateX(-50%) translateY(-50%) rotate(-45deg);}
.m-nav .mc > a {position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.m-nav .mc > a img {height: 50px; transform: translateY(-25px); transition: all 0.3s;}
.m-nav.fix .mc > a img {transform: translateY(0px);}
.m-nav .mc .nav-l-c {width: 100%; height: 0; padding: 0 20px; background-color: rgba(255, 255, 255, 0.90); backdrop-filter: blur(10px); position: absolute; left: initial; right: 0; top: 50px; transform: none; text-align: center; overflow: hidden; z-index: 5; transition: all 0.3s;}
.nav-hl {display: inline-block; width: 100%; height: 50px; max-width: 200px; border-radius: 30px; padding: 12px 0; margin-top: 20px; font-size: 1.2rem; text-align: center;}
.nav-hl:hover {line-height: initial; padding: 12px 0;}
.nav-l.dropd > .arrow {top: 25px;}
.nav-l.dropd:hover > .arrow {top: 26px;}
input[type="checkbox"]:checked ~ .mc .nav-l-c {height: calc(100vh - 100px); padding: 20px 20px; backdrop-filter: blur(10px);}
.nav-l {width: 100% !important; position: relative; float: left; padding: 20px 15px; text-transform: uppercase;}
.nav-l.dropd:nth-child(1) {z-index: 3;}
.nav-l.dropd:nth-child(2) {z-index: 1;}
.nav-l.dropd:before {top: 22px;}
.nav-l.dropd:after {z-index: 5;}
.nav-l.dropd > .dropd-c {width: 100%; z-index: 2;}
.nav-l.desk {display: none;}
.nav-l.mob {display: block;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* CTA */
.cta-c {left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 480px; margin: 20px 0 0 0;}
.cta-c .hs-20 {height: 0px}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* FORM */
.form-c {position: relative; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 480px; margin: 20px 0 20px 0;}
.form-c.fixed {width: 100%; max-width: initial; position: relative; right: initial; margin: 0 0 40px 0; padding: 30px 20px;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* HILIGHTS */
section.hilights {width: calc(100% - 40px); margin: 0 20px;}
/* ----------------------------------------------------------------------------------------------------------------------*/
/* HILIGHTS */
.tab-toggles-c .lbl-c {width: 100%; padding: 7px 20px 3px 20px; border-radius: 10px; box-shadow: inset 0 1px 3px 0 rgba(20, 20, 70, 0.20), 0 0 0 0 rgba(20, 20, 70, 0.10); transition: all 0.3s;}
.tab-toggles-c .lbl-c:hover {width: 100%; padding: 7px 20px 3px 20px; border-radius: 10px; box-shadow: inset 0 -1px 0 0 rgba(20, 20, 70, 0.15), 0 5px 15px 0 rgba(20, 20, 70, 0.10);}
.tab-toggles-c .lbl-c label {display: block; width: 20%; height: 50px; border-radius: 5px 5px 0 0; position: relative; float: left; font-size: 1.1rem; font-weight: bolder; line-height: 50px; text-align: center; color: rgba(20, 20, 70, 1.00); text-shadow: 0 1px rgba(255, 255, 255, 1.00); box-shadow: 0 0 0 0 rgba(20, 20, 70, 0.00); text-transform: uppercase; cursor: pointer; transition: all 0.3s;}
.tab-toggles-c .lbl-c label:hover {box-shadow: 0 3px 0 0 rgba(20, 20, 70, 1.00);}
.tab-toggles-c .lbl-c label:nth-child(1),
.tab-toggles-c .lbl-c label:nth-child(2),
.tab-toggles-c .lbl-c label:nth-child(3) {width: 33.333333%;}
.tab-toggles-c .lbl-c label:nth-child(4),
.tab-toggles-c .lbl-c label:nth-child(5) {width: 50%;}
/* ----------------------------------------------------------------------------------------------------------------------*/
section.white {background-size: 90%;}
.center-mob {text-align: center;}
.assets-t tr td {box-shadow: inset 0 0 0 1px rgba(20, 20, 70, 0.10); font-size: 1.2rem; padding: 10px; transition: all 0.3s; cursor: default;}
.hidde-desk {display: block;}
.c-25.mp-banner-btn {width: calc(50% - 20px); margin: 0 10px 20px 10px;}
/* FOOTER */
.footer-c .mc .c-25 {width: 100%; text-align: center;}
.footer-c .mc .c-25 h3 {margin: 20px 0 0 0;}
.sub-footer-c .mc p {text-align: center;}
/* ----------------------------------------------------------------------------------------------------------------------*/
}
@media only screen and (max-width: 480px) {
section.hilights .mc .item-c:nth-child(1),
section.hilights .mc .item-c:nth-child(2),
section.hilights .mc .item-c:nth-child(3) {width: 33.333333%}
section.hilights .mc .item-c:nth-child(4),
section.hilights .mc .item-c:nth-child(5) {width: 50%}
.assets-t tr td {box-shadow: inset 0 0 0 1px rgba(20, 20, 70, 0.10); font-size: 1rem; padding: 10px 0; transition: all 0.3s; cursor: default;}
}
@media only screen and (max-width: 320px) {
.c-25.mp-banner-btn {width: calc(100% - 20px); margin: 0 10px 20px 10px;}
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, 1.00);
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background: rgba(0, 0, 0, 0.00);
}
::-webkit-scrollbar-thumb {
width: 8px;
margin: 0 1px;
border-radius: 10px;
background-color: rgba(0, 10, 40, 0.20);
transition: all 0.3s;
}
::-webkit-scrollbar-thumb:hover {
width: 10px;
height: 10px;
background-color: rgba(0, 10, 40, 0.40);
transition: all 0.3s;
}
.grecaptcha-badge {
visibility: hidden;
}