/* ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>< */
/*                                                                                                        */
/*                                             Digifianz 2023                                             */
/*                                                                                                        */
/* ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>< */

/*
                                                   • • •                                                  
*/
 
/* ========================================================================================= VARIABLES */

 /* [px] - Container max width w/o paddings */

/* ---------------------- Fonts */





/* ========================================================================================= COLORS */

/* ---------------------- Primary / Corp Colors */

 /* Digi color */
 /* Green */

/* ---------------------- Secondary Colors */

 /* Dark Green */
 /* Yellow */
 /* Violet */
 /* Dark blue */
 /* Light blue */
 /* Turquoise */

/* ---------------------- System Colors */

 /* Green */
 /* Magenta */

/* ---------------------- Grayscale ( from darker to lighter ) */















/* ========================================================================================= */

   /* Headings color */
        /* Body text color */
        /* Labels color */
        /* Inputs Placeholder color */
        /* Line based elements */
        /* Inputs Background color */

        /* General Elements Background color */


/* ---------------------- Gradients */

  /* Digi - Violet */

  /* Violet - D.blue */

  /* Digi - Yellow */

  /* Green - D.blue */

  /* Turquoise - L.blue */

  /* Yellow - Violet */


/* ========================================================================================= FIXES */

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

body { max-width: 100vw; overflow-x: hidden !important; }

html, body { margin: 0; padding: 0; scroll-behavior: smooth; } 

body { color: #182F3C; font-family: 'Open Sans', sans-serif;;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

*::-webkit-scrollbar { width: 4px; }
*::-webkit-scrollbar-thumb { background-color: #EE5E60; border-radius: 5px; }

.section{ min-height: 85vh; padding: 0;}

img { max-width: 100%!important; object-fit: contain; }
video, iframe{ border-radius: 10px !important; overflow: hidden !important; }
.shadow video, .shadow iframe{ box-shadow: 0 0 20px rgba(50,50,50,.3); }

.hs_cos_wrapper_type_icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;}
.hs_cos_wrapper_type_icon svg { fill: currentColor; height: 1em; }


/* ========================================================================================= GENERAL */

.hs_cos_wrapper{ height: max-content; }
.box{ width: 100%; padding: 15px 5%; border-radius: 10px; background: #D9DBE9; }
.pos-rel{ position: relative; }
.pos-abs{ position: absolute; }
.bg-g1 { background-image: linear-gradient(121.52deg, #EE5E60   0%, #B47AEA 137.78%); }
.bg-g2 { background-image: linear-gradient(114.44deg, #B47AEA 0%, #02345B 100%); }
.bg-g3 { background-image: linear-gradient(114.44deg, #EE5E60   0%, #F9B642 100%); }
.bg-g4 { background-image: linear-gradient(114.44deg, #289888   0%, #02345B 100%); }
.bg-g5 { background-image: linear-gradient(114.44deg, #3DA5D9 42.71%, #ABDADC 100%); }
.bg-g6 { background-image: linear-gradient(114.44deg, #F9B642 30%, #B47AEA 100%); }
.bg-c1 { background-color: #EE5E60 }
.bg-c2 { background-color: #289888 }
.bg-s1 { background-color: #217252 }
.bg-s2 { background-color: #F9B642 }
.bg-s3 { background-color: #B47AEA }
.bg-s4 { background-color: #02345B }
.bg-s5 { background-color: #ABDADC }
.bg-s6 { background-color: #3DA5D9 }
.font2{ font-family: 'Poppins', sans-serif;; }
.text-c1,
.hover-c1:hover { color: #EE5E60 }
.text-c2,
.hover-c2:hover { color: #289888 }
.text-body { color: #4E4B66; }
.text-heading { color: #02345B; }
.ff-body { font-family: 'Open Sans', sans-serif;; }
.ff-heading { font-family: 'Poppins', sans-serif;; }
.container { display: block; width: 100%; padding: 0px; max-width: 1200px; margin: 0 auto; }
ul.no-style, 
ol.no-style { list-style: none; margin: 0; padding: 0; }
.dfz-hidden{ display: none!important; }
.dfz-nonvisible{ visibility: hidden!important; }
.panel{ display: none; }
.panel.active{ display: flex; height: 100vh; width: 80vw; background: #F7F7FC; overflow-y: scroll; padding: 20px; background-color: white;}
.divider .line{ border-bottom: 1px solid #182F3C33; width: 48%; }
.divider svg{ cursor: pointer; }
.divider svg.reverse{ transform: rotate(180deg); }

@media only screen and (max-width: 768px) { 
  .dfz-desktop { display: none!important; }
  .col{ width: 100%; }
}
@media only screen and (min-width: 769px) {
  .dfz-mobile { display: none!important; } 
  .col{ width: 49%; height: 100%; }
}


/* ========================================================================================= TYPOGRAPHY */

p { margin: 20px 0 0 0; font-size: 16px; line-height: 1.4; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }

a { text-decoration: none; }

sup, sub, SUP, SUB { position: relative; font-size: 75%; line-height: 0; 
  vertical-align: baseline; }

sup, SUP { top: -0.5em; }
sub, SUB { bottom: -0.25em; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; }


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Poppins', sans-serif;; color: #182F3C; font-weight: 900; }

.white{ color: #fff; }
.orange{ color: #EE5E60; }
.dark{ color: #182F3C; }
.green{ color: #43A597; }
.bold{ font-weight: bold; }

.sub-h {
  font-family: 'Poppins', sans-serif;;
  font-weight: 400;
}

/* ----------------------------- Headings */

h1, .h1 { font-size: 24px; line-height: 1.3; }
h2, .h2 { font-size: 22px; line-height: 1.4; }
h3{ font-size: 16px; line-height: 1.4; }
h4 { font-size: 18px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: 16px; line-height: 1.4; }

/* =========================================================================================== CTAS */

.btn{ appearance: none; border: 0px; cursor: pointer; transition: .3s; width: fit-content; }
.bt1{ background: transparent;  font-size: 16px; color: #EE5E60; }
.bt1 svg{ margin-left: 5px; }
.bt2{ background: #43A597; font-size: 16px; color: white; height: 50px; border-radius: 50px; display: flex; 
  justify-content: center; align-items: center; letter-spacing: 1px; }
.bt3{ background: transparent; font-size: 16px; color: #182F3C; text-decoration: underline; letter-spacing: 1px; }
.bt4 { font-family: 'Poppins', sans-serif;; font-weight: 600; text-decoration: none; text-align: center; letter-spacing: 0.75px;
  background: transparent; color: #43A597; padding: 20px 45px; border-radius: 50px; border: 2px solid #43A597; }
.bt4.active { background: #43A597; color: white; }
.bt5{ padding: 12px 30px; border-radius: 30px; background: #EE5E60 !important; color: white;
  font-weight: bold; }
.bt5:hover {background-color: #B82224 !important; color: white !important; }
.bt6 {background-color: #E58F90 !important; color: white !important;}
.bt6:hover {background-color: #B82224 !important; color: white !important; }
.bt7{ padding: 12px 30px; border-radius: 30px; background: white !important; color: #EE5E60; font-weight: bold;
border: 1px solid #EE5E60; min-width: 180px; }
.bt7:hover { background-color: #EE5E60 !important; color: white !important; border: 2px solid white; }

/* ========================================================================================= HELPERS */

/* Visibility
================================================================== */

.hidden { display: none !important; visibility: visible; }
.visible { display: block !important; }

/* Flexbox
================================================================== */

.block { display: block; }
.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.i-flex { display: inline-flex; }
.d-col { flex-direction: column; }
.d-col-rev { flex-direction: column-reverse; }
.d-row { flex-direction: row; }
.d-row-rev { flex-direction: row-reverse; }
.a-center { align-items: center; }
.a-start { align-items: flex-start; }
.a-end { align-items: flex-end; }
.a-revert { align-items: revert; }
.a-between { align-items: space-between; }
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-around { justify-content: space-around; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-revert { justify-content: revert; }
.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }

/* Text Align
================================================================== */

.tl { text-align: left    !important; }
.tc { text-align: center  !important; }
.tr { text-align: right   !important; }
.tj { text-align: justify !important; }


/* Margin and padding
================================================================== */
.w100 { width: 100%; }
.h100{ height: 100vh; }
.m0a  { margin: 0 auto !important; }
.ma  { margin: auto !important; }
.mtba { margin-top: auto !important; margin-bottom: auto !important; }
.mlra { margin-left: auto !important; margin-right: auto !important;  }
.mta { margin-top: auto !important; }
.mra { margin-right: auto !important; }
.mba { margin-bottom: auto !important; }
.mla { margin-left: auto !important; }


.m-0 { margin: 0px !important; }
.mtb-0 { margin-top: 0px !important; margin-bottom: 0px !important; }
.mlr-0 { margin-left: 0px !important; margin-right: 0px !important; }
.mt-0 { margin-top: 0px !important; }
.mr-0 { margin-right: 0px !important; }
.mb-0 { margin-bottom: 0px !important; }
.ml-0 { margin-left: 0px !important; }
.nmt-0 { margin-top: -0px !important; }
.nmb-0 { margin-bottom: -0px !important; }
.p-0 { padding: 0px !important; }
.ptb-0 { padding-top: 0px !important; padding-bottom: 0px !important; }
.plr-0 { padding-left: 0px !important; padding-right: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.pr-0 { padding-right: 0px !important; }
.pb-0 { padding-bottom: 0px !important; }
.pl-0 { padding-left: 0px !important; }

.m-10 { margin: 10px !important; }
.mtb-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.mlr-10 { margin-left: 10px !important; margin-right: 10px !important; }
.mt-10 { margin-top: 10px !important; }
.mr-10 { margin-right: 10px !important; }
.mb-10 { margin-bottom: 10px !important; }
.ml-10 { margin-left: 10px !important; }
.nmt-10 { margin-top: -10px !important; }
.nmb-10 { margin-bottom: -10px !important; }
.p-10 { padding: 10px !important; }
.ptb-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.plr-10 { padding-left: 10px !important; padding-right: 10px !important; }
.pt-10 { padding-top: 10px !important; }
.pr-10 { padding-right: 10px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pl-10 { padding-left: 10px !important; }

.m-20 { margin: 20px !important; }
.mtb-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.mlr-20 { margin-left: 20px !important; margin-right: 20px !important; }
.mt-20 { margin-top: 20px !important; }
.mr-20 { margin-right: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.ml-20 { margin-left: 20px !important; }
.nmt-20 { margin-top: -20px !important; }
.nmb-20 { margin-bottom: -20px !important; }
.p-20 { padding: 20px !important; }
.ptb-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.plr-20 { padding-left: 20px !important; padding-right: 20px !important; }
.pt-20 { padding-top: 20px !important; }
.pr-20 { padding-right: 20px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pl-20 { padding-left: 20px !important; }

.m-30 { margin: 30px !important; }
.mtb-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.mlr-30 { margin-left: 30px !important; margin-right: 30px !important; }
.mt-30 { margin-top: 30px !important; }
.mr-30 { margin-right: 30px !important; }
.mb-30 { margin-bottom: 30px !important; }
.ml-30 { margin-left: 30px !important; }
.nmt-30 { margin-top: -30px !important; }
.nmb-30 { margin-bottom: -30px !important; }
.p-30 { padding: 30px !important; }
.ptb-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.plr-30 { padding-left: 30px !important; padding-right: 30px !important; }
.pt-30 { padding-top: 30px !important; }
.pr-30 { padding-right: 30px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pl-30 { padding-left: 30px !important; }

.m-40 { margin: 40px !important; }
.mtb-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.mlr-40 { margin-left: 40px !important; margin-right: 40px !important; }
.mt-40 { margin-top: 40px !important; }
.mr-40 { margin-right: 40px !important; }
.mb-40 { margin-bottom: 40px !important; }
.ml-40 { margin-left: 40px !important; }
.nmt-40 { margin-top: -40px !important; }
.nmb-40 { margin-bottom: -40px !important; }
.p-40 { padding: 40px !important; }
.ptb-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.plr-40 { padding-left: 40px !important; padding-right: 40px !important; }
.pt-40 { padding-top: 40px !important; }
.pr-40 { padding-right: 40px !important; }
.pb-40 { padding-bottom: 40px !important; }
.pl-40 { padding-left: 40px !important; }

.m-50 { margin: 50px !important; }
.mtb-50 { margin-top: 50px !important; margin-bottom: 50px !important; }
.mlr-50 { margin-left: 50px !important; margin-right: 50px !important; }
.mt-50 { margin-top: 50px !important; }
.mr-50 { margin-right: 50px !important; }
.mb-50 { margin-bottom: 50px !important; }
.ml-50 { margin-left: 50px !important; }
.nmt-50 { margin-top: -50px !important; }
.nmb-50 { margin-bottom: -50px !important; }
.p-50 { padding: 50px !important; }
.ptb-50 { padding-top: 50px !important; padding-bottom: 50px !important; }
.plr-50 { padding-left: 50px !important; padding-right: 50px !important; }
.pt-50 { padding-top: 50px !important; }
.pr-50 { padding-right: 50px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pl-50 { padding-left: 50px !important; }



/* ========================================================================================= INPUTS */
input{ width: 100%; height: 45px; border-radius: 16px; border: 0px; padding: 0 20px;
  background-color: #EFF0F6; }


/* ========================================================================================= KEYFRAMES */
@keyframes fadein {
  0%{ opacity: 0; }
  100%{ opacity: 1; }
}


/* ========================================================================================= CARDS PANEL */
.card{ border-radius: 10px; overflow: hidden; }
.card.v1{ min-height: 300px; }
.shadow{ box-shadow: 0 0 20px rgba(50,50,50,.1); }


/* ========================================================================================= POPUP */
.dfz-popup.form-popup .form-wrapper {
    background-color: #fff;
    border-radius: 10px;
    margin: 0 auto;
    padding: 50px;
}

/* ========================================================================================= MODAL */
.modal{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  position: fixed; background: rgba(50,50,50,.6); top: 0; left: 0; z-index: 100; }
.modal.internal{ width: 80%; left: unset; right: 0; }
.modal-box{ width: 98%; max-width: 800px; background: white; border-radius: 10px;
  position: relative; padding: 20px; animation: fadein 1s forwards; 
  max-height: 80vh; overflow-y: scroll; }
.modal-box svg{ position: absolute; top: 20px; right: 20px; cursor: pointer; }
  background: rgba(50,50,50,.5); }
.close{ position: absolute; top: 20px; right: 20px; }

 /* ----------------------------------------------------- MACRO: Button variants */
/* color variables must be objects
 * with the color dark/light variants. */
 
 



  .btn.text.c1 {
    color: #EE5E60;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.c1:hover {
    color: #B82224;
  }


  .btn.text-icon.c1 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.c1 .hs_cos_wrapper_type_icon {
    color: #EE5E60;
    transition: .25s;
  }
  
  .btn.text-icon.c1:hover .hs_cos_wrapper_type_icon {
    color: #B82224;
  }
  
  .btn.primary.c1 {
    background: #EE5E60;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.c1:hover {
    background: #B82224;

    
  }

  .btn.secondary.c1 {
    border-color: #EE5E60;
    color: #EE5E60;
  }

  .btn.secondary.c1:hover {
    border-color: #B82224;
    color: #B82224;
  }

  .btn.invert.c1 {
    color: #EE5E60;
  }

  .btn.invert.c1:hover {
    color: #B82224;
  }

  .c1 .hs-form input[type='submit'] {
    background: #EE5E60;
    border: none;
    color: #FCFCFC;
    
  }

  .c1 .hs-form input[type='submit']:hover {
    background: #B82224;
  }




  .btn.text.c2 {
    color: #289888;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.c2:hover {
    color: #1F6A5F;
  }


  .btn.text-icon.c2 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.c2 .hs_cos_wrapper_type_icon {
    color: #289888;
    transition: .25s;
  }
  
  .btn.text-icon.c2:hover .hs_cos_wrapper_type_icon {
    color: #1F6A5F;
  }
  
  .btn.primary.c2 {
    background: #289888;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.c2:hover {
    background: #1F6A5F;

    
  }

  .btn.secondary.c2 {
    border-color: #289888;
    color: #289888;
  }

  .btn.secondary.c2:hover {
    border-color: #1F6A5F;
    color: #1F6A5F;
  }

  .btn.invert.c2 {
    color: #289888;
  }

  .btn.invert.c2:hover {
    color: #1F6A5F;
  }

  .c2 .hs-form input[type='submit'] {
    background: #289888;
    border: none;
    color: #FCFCFC;
    
  }

  .c2 .hs-form input[type='submit']:hover {
    background: #1F6A5F;
  }





  .btn.text.dark {
    color: #02345B;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.dark:hover {
    color: #011322;
  }


  .btn.text-icon.dark {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.dark .hs_cos_wrapper_type_icon {
    color: #02345B;
    transition: .25s;
  }
  
  .btn.text-icon.dark:hover .hs_cos_wrapper_type_icon {
    color: #011322;
  }
  
  .btn.primary.dark {
    background: #02345B;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.dark:hover {
    background: #011322;

    
  }

  .btn.secondary.dark {
    border-color: #02345B;
    color: #02345B;
  }

  .btn.secondary.dark:hover {
    border-color: #011322;
    color: #011322;
  }

  .btn.invert.dark {
    color: #02345B;
  }

  .btn.invert.dark:hover {
    color: #011322;
  }

  .dark .hs-form input[type='submit'] {
    background: #02345B;
    border: none;
    color: #FCFCFC;
    
  }

  .dark .hs-form input[type='submit']:hover {
    background: #011322;
  }





  .btn.text.g1 {
    color: #EE5E60;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.g1:hover {
    color: #8D4760;
  }


  .btn.text-icon.g1 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.g1 .hs_cos_wrapper_type_icon {
    color: linear-gradient(121.52deg, #EE5E60   0%, #B47AEA 137.78%);;
    transition: .25s;
  }
  
  .btn.text-icon.g1:hover .hs_cos_wrapper_type_icon {
    color: #8D4760;
  }
  
  .btn.primary.g1 {
    background: linear-gradient(121.52deg, #EE5E60   0%, #B47AEA 137.78%);;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.g1:hover {
    background: #8D4760;

    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .btn.secondary.g1 {
    border-color: #EE5E60;
    color: #EE5E60;
  }

  .btn.secondary.g1:hover {
    border-color: #8D4760;
    color: #8D4760;
  }

  .btn.invert.g1 {
    color: linear-gradient(121.52deg, #EE5E60   0%, #B47AEA 137.78%);;
  }

  .btn.invert.g1:hover {
    color: #8D4760;
  }

  .g1 .hs-form input[type='submit'] {
    background: linear-gradient(121.52deg, #EE5E60   0%, #B47AEA 137.78%);;
    border: none;
    color: #FCFCFC;
    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .g1 .hs-form input[type='submit']:hover {
    background: #8D4760;
  }




  .btn.text.g2 {
    color: #B47AEA;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.g2:hover {
    color: #624083;
  }


  .btn.text-icon.g2 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.g2 .hs_cos_wrapper_type_icon {
    color: linear-gradient(114.44deg, #B47AEA 0%, #02345B 100%);;
    transition: .25s;
  }
  
  .btn.text-icon.g2:hover .hs_cos_wrapper_type_icon {
    color: #624083;
  }
  
  .btn.primary.g2 {
    background: linear-gradient(114.44deg, #B47AEA 0%, #02345B 100%);;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.g2:hover {
    background: #624083;

    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .btn.secondary.g2 {
    border-color: #B47AEA;
    color: #B47AEA;
  }

  .btn.secondary.g2:hover {
    border-color: #624083;
    color: #624083;
  }

  .btn.invert.g2 {
    color: linear-gradient(114.44deg, #B47AEA 0%, #02345B 100%);;
  }

  .btn.invert.g2:hover {
    color: #624083;
  }

  .g2 .hs-form input[type='submit'] {
    background: linear-gradient(114.44deg, #B47AEA 0%, #02345B 100%);;
    border: none;
    color: #FCFCFC;
    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .g2 .hs-form input[type='submit']:hover {
    background: #624083;
  }




  .btn.text.g3 {
    color: #F9B642;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.g3:hover {
    color: #AC4843;
  }


  .btn.text-icon.g3 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.g3 .hs_cos_wrapper_type_icon {
    color: linear-gradient(114.44deg, #EE5E60   0%, #F9B642 100%);;
    transition: .25s;
  }
  
  .btn.text-icon.g3:hover .hs_cos_wrapper_type_icon {
    color: #AC4843;
  }
  
  .btn.primary.g3 {
    background: linear-gradient(114.44deg, #EE5E60   0%, #F9B642 100%);;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.g3:hover {
    background: #AC4843;

    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .btn.secondary.g3 {
    border-color: #F9B642;
    color: #F9B642;
  }

  .btn.secondary.g3:hover {
    border-color: #AC4843;
    color: #AC4843;
  }

  .btn.invert.g3 {
    color: linear-gradient(114.44deg, #EE5E60   0%, #F9B642 100%);;
  }

  .btn.invert.g3:hover {
    color: #AC4843;
  }

  .g3 .hs-form input[type='submit'] {
    background: linear-gradient(114.44deg, #EE5E60   0%, #F9B642 100%);;
    border: none;
    color: #FCFCFC;
    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .g3 .hs-form input[type='submit']:hover {
    background: #AC4843;
  }




  .btn.text.g4 {
    color: #02345B;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.g4:hover {
    color: #1A524C;
  }


  .btn.text-icon.g4 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.g4 .hs_cos_wrapper_type_icon {
    color: linear-gradient(114.44deg, #289888   0%, #02345B 100%);;
    transition: .25s;
  }
  
  .btn.text-icon.g4:hover .hs_cos_wrapper_type_icon {
    color: #1A524C;
  }
  
  .btn.primary.g4 {
    background: linear-gradient(114.44deg, #289888   0%, #02345B 100%);;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.g4:hover {
    background: #1A524C;

    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .btn.secondary.g4 {
    border-color: #02345B;
    color: #02345B;
  }

  .btn.secondary.g4:hover {
    border-color: #1A524C;
    color: #1A524C;
  }

  .btn.invert.g4 {
    color: linear-gradient(114.44deg, #289888   0%, #02345B 100%);;
  }

  .btn.invert.g4:hover {
    color: #1A524C;
  }

  .g4 .hs-form input[type='submit'] {
    background: linear-gradient(114.44deg, #289888   0%, #02345B 100%);;
    border: none;
    color: #FCFCFC;
    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .g4 .hs-form input[type='submit']:hover {
    background: #1A524C;
  }




  .btn.text.g5 {
    color: #3DA5D9;
    padding: 0;
    text-align: inherit;

  }

  .btn.text.g5:hover {
    color: #2C7296;
  }


  .btn.text-icon.g5 {
    color: #14142B;
    padding: 0;
    text-align: left;
    font-weight: 400;
    background: none;
  }

  .btn.text-icon.g5 .hs_cos_wrapper_type_icon {
    color: linear-gradient(114.44deg, #3DA5D9 42.71%, #ABDADC 100%);;
    transition: .25s;
  }
  
  .btn.text-icon.g5:hover .hs_cos_wrapper_type_icon {
    color: #2C7296;
  }
  
  .btn.primary.g5 {
    background: linear-gradient(114.44deg, #3DA5D9 42.71%, #ABDADC 100%);;
    border: none;
    color: #FCFCFC;
  }

  .btn.primary.g5:hover {
    background: #2C7296;

    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .btn.secondary.g5 {
    border-color: #3DA5D9;
    color: #3DA5D9;
  }

  .btn.secondary.g5:hover {
    border-color: #2C7296;
    color: #2C7296;
  }

  .btn.invert.g5 {
    color: linear-gradient(114.44deg, #3DA5D9 42.71%, #ABDADC 100%);;
  }

  .btn.invert.g5:hover {
    color: #2C7296;
  }

  .g5 .hs-form input[type='submit'] {
    background: linear-gradient(114.44deg, #3DA5D9 42.71%, #ABDADC 100%);;
    border: none;
    color: #FCFCFC;
    
    transition: none;
    animation: fadeBg ease-out .25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    
  }

  .g5 .hs-form input[type='submit']:hover {
    background: #2C7296;
  }



.btn.primary.white {
  background-color: rgba(255, 255, 255, 0.21);
  color: #FCFCFC;
}

.btn.primary.white:hover {
  background-color: #fff;
  border-color: transparent;
  color: #02345B;
}

.btn.secondary.white {
  border-color: #fff;
  color: #FCFCFC;
}
 
.btn.secondary.white:hover {
  background-color: rgba(255, 255, 255, 0.21);
}

.btn.contact-cta {border: inherit;}
.btn.contact-cta:hover, .btn.bt5:hover {background: #b82224;}


@media (max-width: 768px){
  .panel.active{ width: 100vw; }
  .dashboard{ padding: 80px 0 20px 0; }
  .bt7, .bt5{ padding: 8px 10px; min-width: unset !important; }
}

@media (min-width: 769px){
  .panel.active{ width: 80vw; position: relative; z-index: 5; }
  .grid{ display: grid; }
  .grid.v1{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; }
  .grid.v2{ grid-template-columns: .55fr .45fr; gap: 20px; }
  .grid.v3{ grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .grid.v4{ grid-template-columns: 1fr 1fr; gap: 20px; }
  .card.scroll{ height: 380px; overflow-y: scroll; }
}