/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

[transition-style="in:circle:center"] {
/*   --transition__duration: 5s; */
  
  background-color: transparent;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}


@font-face {
  font-family: 'Futura Std';
  src: url(//21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/raw_assets/public/nfc-theme/fonts/FuturaStd-Medium.otf) format("opentype");
}

@font-face {
  font-family: 'Bradley Hand';
  src: url(//21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/raw_assets/public/nfc-theme/fonts/BRADHI.ttf);
}

.dnd_area-row-0-hidden{
  display: none!important;
}

.dnd-section .dnd-column{
  padding: 0 !important;
}

html{
  overflow:hidden;
}

body{
  animation: fade-and-slide-up .5s ease-out forwards;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 1rem 1rem;
  overflow: hidden;
  line-height: 0 !important;
  --msg-input-width: 60%;
}

.row-fluid-wrapper{
  height: 100vh;
/*   padding: 0 50px; */
}

h1{
/*   font-size: 3rem; */
}

@keyframes fade-and-slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.show{
  display: initial;
/*   visibility: visible !important; */
}

.hide{
  display: none !important;
/*   visibility: hidden !important; */
/*   transition: 2s; */
/*   animation: fadeOut 4s; */
}

.hideBtn{
  visibility: hidden !important;
}

.showBtn{
  visibility: visible !important;
}

/* mobile */
@media (min-width: 300px) and (max-width: 700px) {
  
  .android{
/*     padding-bottom: 5rem !important; */
    padding-bottom: max(5rem, env(safe-area-inset-bottom)) !important;
/*     padding-bottom: env(safe-area-inset-bottom)!important; */ */
  }
  
  .iphone{
/*     padding-bottom: 5rem !important; */
    padding-bottom: max(5rem, env(safe-area-inset-bottom)) !important;
/*     padding-bottom: env(safe-area-inset-bottom)!important; */ */
  }
  
  html {
    height: -webkit-fill-available;
  }
  
  body{
/*     min-height: 100vh; */
/*     min-height: -webkit-fill-available; */
/*     height: 100vh !important; */
    height: 100% !important;
    position: fixed !important;
  }
  .btn{
    width: 130px !important;
  }
  
  .share-modal-content{
    width: 90vw !important;
  }
  
  .genImg{
      max-width: 100vw !important;
  }
  
  .greetings-wrapper{
    overflow-x: hidden !important;
    margin: 0 auto !important;
  }
  .greetings-container{
    height: 400px !important;
    width: 300px!important;
  }

  .card-bg{
    height: 400px !important;
    width: 300px !important;
  }
  
/*   MFS */  
  .mfs-card-img{
    height: 215px !important;
    width: 265px!important;
    margin-top: -25px!important;
  }
  
/*   LSH */
  .lsh-card-logo{
    margin-top: 50px!important;
    width: 100px!important;
  }
  
  .lsh-card-img{
    height: 200px !important;
    width: 200px !important;
    margin-top: -90px !important;
  }
  
  .msg-input, .msg-dropdown{
/*     width: 300px !important;
    margin: 20px auto !important; */
    width: 100% !important;
    margin-bottom: 20px !important;
/*     font-size: 1rem !important; */
    font-size: 0.8rem !important;
    height: 40px !important;
  }
  
  .input-wrapper, .btn-wrapper{ 
    margin: 0 auto !important;
    margin-top: 10px !important;
  }
}

/* Mobile to Tablet */
@media (min-width: 300px) and (max-width: 900px) {
  body{
    -webkit-overflow-scrolling: touch !important;
  }
  .modal{
    height: 90vh !important;
  }
  .modal-fullscreen{
    width: 90vw !important;
  }
  .btn-close{
    margin: 0px 0px 0px 0 !important;
    padding-bottom: 20px !important;
    width: 20px !important;
  }
}

/* Mobile to desktop */
@media (min-width: 300px) and (max-width: 700px) {
  .mfs-logo{
    width: 100px !important;
  }

  .lsh-logo{
    height: 70px !important;
  }
}
@media (min-width: 1000px) and (max-width: 1600px) {
  .msg-input, .msg-dropdown{
    font-size: 1rem !important;
  }
}

.logo{
  margin: 20px 0px 0px 30px;
  z-index: 2;
  position: relative;
}

.mfs-logo{
  width: 130px;
}

.lsh-logo{
  height: 100px;
}

.title{
  padding: 10px 0px;
}

.title h3{
  color: var(--secondary-brand-color);
}

.genImg{
  max-width: 500px;
  margin: 0 auto;
}

.next-button{
  width: auto;
  max-width: 250px;
  display: flex;
/*   width: var(--msg-input-width); */
  justify-content: space-between;
}
.next-button h2{
  color: var(--main-brand-color) !important;
  cursor: pointer;
  text-decoration: none !important;
  font-family: "Nunito" !important;
}

.next-button h2:hover{
  opacity: 0.6;
/*   transition: 0.5s; */
}

.bar-wrapper{
  display: flex;
}

.bar{
/*   width: 65px; */
  margin-top: auto;
  margin-bottom: auto;
/*   height: 5px; */
  width: 15px;
  height: 15px;
/*   background: var(--main-brand-color); */
  margin-right: 5px;
  
  border-radius: 50px;
  background: transparent;
  border: 2px solid var(--main-brand-color);
  display: flex;
  justify-content: center;
}

.bar-active{
  background: var(--main-brand-color);
  border-radius: 50px;
  height: 7px;
  margin: auto;
  width: 7px;
}


/* MFS */
.mfs-bg{
 background: url('https://21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/MFS%20LSH%20XMAS%202023/static%20graident%20orange.png') !important;
/*   -webkit-transform: scaleX(-1);
  transform: scaleX(-1); */
}


.mfs-header-font{
  font-family: "Nunito-ExtraBold" !important;
}

.mfs-card-img{
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    height: 265px;
    margin-top: -35px;
    width: 355px;
}

/* LSH */
.lsh-bg{
 background: url('https://21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/MFS%20LSH%20XMAS%202023/lsh%20loading%20page%20graident.png') !important;
/*   -webkit-transform: scaleX(-1);
  transform: scaleX(-1); */
}

.lsh-header-font{
  font-family: "FuturaStd-ExtraBold" !important;
}

.lsh-card-logo{
  position: relative;
  z-index: 1;
  margin-right: 0px;
  margin-top: 65px;
  width: 120px;
}

.lsh-card-img{
    height: 250px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: -110px;
    right: 0;
    width: 250px;
}

.card-bg{
  height: 500px;
  width: 400px;
}

.card-pos {
    position: absolute;
}

.msg-input{
  display: block;
  width: var(--msg-input-width);
  height: 50px;
/*   margin: 20px auto !important; */
  border-radius: 0.75rem;
  border-style: none;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  font-style: italic;
  color: black;
  border: 2px solid var(--main-brand-color);
}

.msg-input:focus, .msg-dropdown:focus {
  outline: none !important;
  border: 2px solid var(--secondary-2-brand-color) !important;
}

.msg-dropdown{
    border-radius: 0.75rem;
    border-style: none;
    border: 2px solid var(--main-brand-color);
    color: #000;
    display: block;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    height: 50px;
    line-height: 1.75rem;
    padding-left: 1rem;
    text-align: left;
    width: var(--msg-input-width);
  
  /* Arrow */
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.7rem top 50%;
  background-size: 1.65rem auto;
}

.mfs-dropdown-arrow{
    /* Arrow */
  background-image: url("https://21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/MFS%20LSH%20XMAS%202023/angle-down-solid.svg");
}

.lsh-dropdown-arrow{
  background-image: url("https://21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/MFS%20LSH%20XMAS%202023/lsh-angle-down-solid.svg");
}

https://21698896.fs1.hubspotusercontent-na1.net/hubfs/21698896/MFS%20LSH%20XMAS%202023/lsh-angle-down-solid.svg

.msg-dropdown:after {
    content: '\f078' !important;
    font: normal normal normal 17px/1 FontAwesome;
    color: orange  !important;
    right: 11px;
    top: 6px;
    height: 34px;
    padding: 15px 0px 0px 8px;
/*     border-left: 1px solid #0ebeff; */
    position: absolute;
    pointer-events: none;
}

.card-msg{
/*     left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 106%;
    right: 0;
    color: white;
    width: 70%; */
  
    color: #fff;
    margin-top: 99%;
    margin-left: 35%;
    width: 100%;
    text-align: left;
}

.bradley{
  font-family: Bradley Hand!important;
  font-size: 1.3rem!important;
  margin-bottom: 20px !important;
  font-weight: 700 !important;
}

.ig-btn{
  height: 45px;
  padding-top: 7px;
/*   background: #f09433; 
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);  */
}

@keyframes fadeOut {
   0% {opacity: 1;}
   100% {opacity: 0;} 
} 

@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;} 
} 

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}



/*Shazam*/

.fa-volume-xmark{
  font-size: 20px;
  margin: 15px;
} 

.shz {
  position: absolute;
  right: 0;
  top: 0;
  
  cursor: pointer;
  margin: 20px 30px 0 0;
  border-radius:50%;
  width: 50px;
  height: 50px;
  z-index: 2;
}

.shz-dark{
  background: var(--secondary-brand-color);
}

.shz-light{
  background: var(--main-brand-color);
}

.shz-equalizer-dark li{
  background: var(--main-brand-color);
}

.shz-equalizer-light li{
  background: var(--secondary-brand-color);
}

.volume-dark{
  color: var(--main-brand-color);
}

.volume-light{
  color: var(--secondary-brand-color);
}

.shz-partial-equalizer li{
    max-width:4px;
    height:100%;
    margin-right:2px;
    border-radius:3px
}

.grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    padding: 0;
    max-width: 1340px;
}
.grid>* {
    -webkit-box-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    min-width: 0;
}
.grid-vert-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.grid-space-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.shz-partial-equalizer{
    opacity:0;
    pointer-events:none;
	list-style:none;
    width:100%;
    height:100%;
    border-radius:5px
}
 .shz-partial-equalizer{
    display:flex
}
 .shz-partial-equalizer{
    opacity:1;
    -webkit-transition:opacity .5s cubic-bezier(.4,0,.2,1);
    transition:opacity .5s cubic-bezier(.4,0,.2,1);
    pointer-events:auto
}

 .shz-partial-equalizer li{
    -webkit-animation:equalizer .5s forwards ease-in-out infinite;
    -ms-animation:equalizer .5s forwards ease-in-out infinite;
    animation:equalizer .5s forwards ease-in-out infinite;
    -webkit-animation-direction:alternate;
    -ms-animation-direction:alternate;
    animation-direction:alternate
}
.shz-partial-equalizer li:nth-child(1){
    animation-duration:2s
}
.shz-partial-equalizer li:nth-child(2){
    animation-duration:1.6s
}
.shz-partial-equalizer li:nth-child(3){
    animation-duration:1.9s
}
.shz-partial-equalizer li:nth-child(4){
    animation-duration:1.5s
}
.shz-partial-equalizer li:nth-child(5){
    animation-duration:1.7s
}
.shz-partial-equalizer li:last-child{
    margin-right:0
}
@-webkit-keyframes equalizer{
    0%{
        height:5%
    }
    12%{
        height:10%
    }
    24%{
        height:40%
    }
    36%{
        height:15%
    }
    48%{
        height:25%
    }
    60%{
        height:30%
    }
    72%{
        height:20%
    }
    84%{
        height:35%
    }
    100%{
        height:5%
    }
}
@keyframes equalizer{
    0%{
        height:5%
    }
    12%{
        height:10%
    }
    24%{
        height:40%
    }
    36%{
        height:15%
    }
    48%{
        height:25%
    }
    60%{
        height:30%
    }
    72%{
        height:20%
    }
    84%{
        height:35%
    }
    100%{
        height:5%
    }
}
.shz-partial-equalizer.grid-vert-bottom li{
    animation-name:equalizer-bottom
}
@-webkit-keyframes equalizer-bottom{
    0%{
        height:5%
    }
    12%{
        height:40%
    }
    24%{
        height:100%
    }
    36%{
        height:30%
    }
    48%{
        height:55%
    }
    60%{
        height:80%
    }
    72%{
        height:60%
    }
    84%{
        height:35%
    }
    100%{
        height:5%
    }
}
@keyframes equalizer-bottom{
    0%{
        height:5%
    }
    12%{
        height:40%
    }
    24%{
        height:100%
    }
    36%{
        height:30%
    }
    48%{
        height:55%
    }
    60%{
        height:80%
    }
    72%{
        height:60%
    }
    84%{
        height:35%
    }
    100%{
        height:5%
    }
}
svg.shz-partial-equalizer-pause{
    display:none;
    margin:-10px 0 0 -9px;
    opacity:0;
    -webkit-transition:opacity .5s cubic-bezier(.4,.2,0,1);
    transition:opacity .5s cubic-bezier(.4,.2,0,1)
}