@charset "utf-8";
/* CSS Document */

body{
 background-color:#000000;
 margin:0; padding:0;    
 font-family: "Inter", Helvetica, sans-serif, serif;
 color:#BBCEFF;
 font-size:18px;    
}

h1{
  text-align: center;
  font-family: "Inter Tight",sans-serif;
  color:#FFFFFF;
  font-size:3.0em;    
  font-weight:600;    
  margin:0 auto;
  line-height:1.0em;    
}
h2{
  font-family: "Inter Tight",sans-serif;
  color:#FFFFFF;
  text-align:center;
  font-size:2.0em;      
  line-height:1.0em;        
  font-weight:600;    
  margin:0;    
}

.h2break{
  display:block;    
}

.spacer.twenty{ padding:20px 0px;}

.sub{
  font-family: "Inter Tight",sans-serif;	
  text-align:center; 
  padding:10px 0px; 
  font-size:1.3em;    
  font-weight:500;	
  color:#53aaf3;
}

.blurb{
  color:#FFFFFF;
  max-width:800px; margin:0 auto;
  text-align:center;	
}


.fixedwidth{
  width:100%;
  max-width:1200px;
  position:relative;
  margin:0 auto;    
}

.block{
  padding:50px 20px; 
  position:relative;
  overflow:hidden;    
}
.block.light{
  background-color:#061847;    
}
.block.white{
  background-color:#FFFFFF;    
}
.block.white .mmi-logo{
   filter: invert(1);   
}

#top-branding.block{
 padding:50px 20px 0px 20px;    
}
#top-branding.dark{
  background-color:rgba(0,0,0,.5);
}


.block.white h1, .block.white h2{
  color:#021034;    
}
.block.white .sub{
  color:#184BCB;    
}
.block.white .features-list .feature-title{
  color:#184BCB;    
}
.block.white .features-list li p{
  color:#021034;    
}

.video-embed{  
  margin:20px auto 0 auto;
  width:90%;
  max-width:650px; 
  border:3px solid #FFFFFF;    
  border-radius:10px;
  overflow:hidden;    
}

.small{
  padding:10px 0px;    
  text-align:center;    
  font-size:.8em;
  color:#ef3c96;
  max-width:600px;
  margin: 0 auto;	
}
.medium{
  padding:20px 0px;
  text-align:center;
  font-size:1.3em;
  color:#779BF6;    
}

.offer{
  padding:20px 0px; 
  
}
.offer span{
  vertical-align: middle;	
  display:inline-block;	
}

.logos{
  color:#FFFFFF;  
  vertical-align:middle; 
  text-align:center; 
  padding-bottom:40px;	
}
.logos img{ display:inline-block; vertical-align: middle; max-height:80px; width:auto;  }
.logos span{ font-size:2.0em; padding:0px 20px; }

.row{ display:flex; padding:40px 0px; gap:10%; align-items: center; }
.col{
  
}

.logo-list{ list-style:none; margin:0; padding:10px 10px;  text-align:center; }
.logo-list li{ display:inline-block; padding:10px 20px; vertical-align: middle; }
.logo-list li img{
  filter:grayscale();  	
  max-width:160px; height:auto;
  display:block;	
  transition:all .4s;	
}
.logo-list li img:hover{
  filter:none;	
}


.company-name{ font-weight:bold; }
.company-logo{ max-height:35px; width:auto; display:inline-block; margin-left:10px; }
.company-logo.light{ filter: brightness(0) invert(1); }

.cta{
  text-align:center;  
  padding:20px 0px;    
}
.button{
  display:inline-block;    
  text-decoration:none;  
  color:#021034;
  background-color:#fde541;
  border-radius:30px;
  padding:15px 30px;
  font-family:"Inter",sans-serif;    
  font-weight:600;    
  font-size:1.0em; 
  transition:all .25s;    
  border:1px solid #021034;
  overflow:hidden;
  position:relative;    
  z-index:1;    
}
.button:before{
    content:'';
    position:absolute;
    bottom:0; left:0;
    width:0%; height:100%;
    background-color:#FFFFFF;
    border-radius:30px;
    z-index:-2;
    transition:all .35s ease-out;    
}


.button:hover{
  color:#021034!important;
    &:before{  width:100%;   }    
}

.cta .button{
  margin:0px 10px;    
}
.button.secondary{
  background-color:transparent;    
  border:1px solid #FFFFFF;
  color:#FFFFFF;    
}

#combo-block{
  border-top:5px solid #184BCB;
  border-bottom:5px solid #ef3c96;
  overflow:hidden;    
}
#combo-block .features-list li .feature-title{
 padding-bottom:12px;    
}

.faq{
  list-style:none;
  margin:0; padding:20px 0 0 0;	
}
.faq li{
  padding:14px;	
  border:1px solid #222222;
  border-radius:10px;
  margin-bottom:6px;	
}
.faq .faq-question{
  font-size:1.2em;
  font-weight:600;
  padding-bottom:6px;
  color:#FFFFFF;	
}
.faq .faq-answer{
  color:#53aaf3;	
}


.features-list{
  list-style:none;
  margin:0; padding:0;    
}
.features-list .feature-title{
  color:#57b2ff;
  font-size:1.1em;
  font-weight:600;	
  font-family: "Inter Tight",sans-serif;
  line-height:1.0em;    
  position:relative;
}
.features-list > li{
  padding-bottom:30px;    
}
.features-list li p{    
  margin:0;    
  padding:10px 0px 10px 0;   
  box-sizing:border-box;
  color:#FFFFFF;  
  position:relative;
  /*max-width:400px;    */
}
.features-list .feature-title span{
  display:block;
  font-size:.7em;
  font-weight:400;	
  color:#C554FF;	
}

.features-list li ul{
  margin:0; 
  padding-top:10px;
  padding-left:20px;	
  list-style:disc;	
  color:#FFFFFF;	
}

.feature-icon{
  width:100%; max-width:90px;	  
}

.features.logo{
  max-height:50px; width:auto;
  padding-bottom:20px;    
}

.product-image{
  width:100%;
  height:auto;
  max-width:600px;  
}

#mmi-block .features-list li { text-align: center; }

/*#bonzo-block .features-list li .feature-title{  color:#ed3c96;    }*/

.features-list.horiz{
  padding-top:30px;    
  display:flex; 
  flex-wrap: wrap;            
  gap:1.5%; 
}
.features-list.horiz li{
  flex:21%;    
}

.features-list.special li{
  text-align:center;	
  color:#FFFFFF;
  font-size:1.1em;
  border:1px solid rgba(255,255,255,.3);
  padding:15px;
display: flex;              /* make the box a flex container */
  align-items: center;        /* vertical centering */
  justify-content: center; 	
  border-radius:15px;	
  margin-bottom:4px;	
}



#top{
 	
 background-image:url("../images/mmione_header_bg.jpg");
 background-repeat:no-repeat;
 background-position: center bottom;         
 background-size: 80%;
 opacity:0;
 transition:all .5s;    
}
#top.on{
  opacity:1;    
}

.callout{
  border:1px solid #C554FF;
  border-radius:15px;
  background-color:rgba(0,0,0,.4);	
  width:100%; max-width:850px;
  margin:0 auto;	
  box-sizing:border-box;
  padding:13px;	
}

#testimonials{
 /*background-image: url("../images/pattern_huge.png");*/
 background-repeat: no-repeat;
 background-position:bottom left;
 background-size:50%;    
 background-color:rgba(0,0,0,.5);    
    
}



.quote-list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:20px;    
}
.quote-list li{
  background-color: #061847;
  box-sizing:border-box;
  border-radius:20px;
  padding:30px;  
  flex-grow: 1;    
  flex-basis: 0;          
}
.quote-list li .quote{
  font-style:italic;
  font-size:1.2em; 
  color:#FFFFFF;    
}
.quote-list li .quote-div{
  width:100%;
  margin: 0 auto;
  height:1px;
  padding-top:10px;
  margin-bottom:10px;    
  border-bottom:1px solid #184BCB;    
}
.quote-list li .quote-sig{
  display:flex; gap:20px;
  align-items: center;    
}
.quote-list li .quotesig-name{
  color:#FFFFFF;    
}
.quote-list li .quotesig-company{
  font-size:.8em;    
}
.quote-list li .quotesig-avatar{
  background-color:#000000;    
  width:40px; height:40px;
  border-radius:50%;
  overflow:hidden;    
  position:relative;
}
.quote-list li .quotesig-avatar span{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
}

.spinning{
  animation: spin 60s linear infinite;
}

.ring-wrapper{
  position:absolute;  
  z-index:0;
  opacity:.10;    
}

.ring-wrapper.left{
  left:0; top:50%;
  transform: translate(-50%,-50%);
}
.ring-wrapper.right{
  right:0; top:50%;
  transform: translate(50%,-50%);
}


.ring{
  width:600px; height:auto; 
}

#demo-modal{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.9);
  z-index:20;    
  opacity:0;
  pointer-events: none;    
  transition:all .3s;     
}
#demo-modal.on{
  opacity:1;    
  pointer-events:all;    
}

#demo-container{
  position:absolute;
  top:10%;    
  left:50%; transform:translateX(-50%);
  background-color:#021034;
  width:90%; max-width:600px;
  height:auto;   
  overflow:hidden;    
  z-index:21;    
  border-radius:10px;    
  box-sizing:border-box;
  border:3px solid #FFFFFF; 
  display:none;
  padding:20px;    
}
#demo-modal.on #demo-container{
  display:block;
}

#demo-close{
  position: absolute;
  right:4px; top:4px;
  text-decoration:none;
  color:#FFFFFF;  
  font-size:1.2em;    
  opacity:.7;    
  transition:all .3s;    
}
#demo-close:hover{
  opacity:1;    
}



/*++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* error message for ssu pages */
#popup-error{ 
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:5%;
    z-index:100;
    background-color:#FFFFFF;
    border-radius:20px;
    padding:20px;
    box-sizing:border-box;
    border:2px solid #454545;
    box-shadow:0 0 10px 0px rgba(0,0,0,.4);    
}
.error-oops{
  font-weight:bold;
  text-align:center;
  font-size:1.6em;
  color:#021034;   
}
#popup-error p{
  text-align:center; 
  color:#1C3B8C;    
}
#btn-errorclose{
  position:absolute;
  top:10px; right:10px;
  z-index:2;    
  text-decoration:none;
  color:#A51517;  
  font-size:1.5em;    
}
#btn-errorclose:hover{
  color:#F75659;        
}
/* ###################### TOOLTIP ################################### */
*[rel~="tooltip"]{
  cursor:pointer;
}
.tippy-box[data-theme~='mmi'] {
  background: #021034;
  background: linear-gradient(0deg,#021034  0%, #052065 100%);    
  text-align:center;    
  color: #ffffff;
  font-weight:500;
  padding: 12px;
  box-shadow:0px 0px 3px 1px rgba(0,0,0,.25);
  border:2px solid #fff;
  border-radius:10px;    
}
.tippy-box[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(.3,1.15,.6,1.35);
}

.tippy-box[data-animation='tipanim'][data-state='hidden'] {
  opacity: 0;
  transform: translateY(-15%);
}


@keyframes spin {
    0%   { transform: rotate(0deg);  }
    100% { transform: rotate(360deg); }
}


@media only screen and (max-width: 800px){
    body{ font-size:15px;    }    
    .quote-list{ font-size:13px; display:block; }  
    .quote-list li{ margin: 0 auto 10px auto; width:100%; }
    .features-list.horiz{ 
    }
    .features-list.horiz li{
        padding-bottom:20px; 
        flex:48.5%;      
    }
    .h2break{ display:inline;}
    .h2break:before{ content:" ";}
    
}
@media only screen and (max-width: 750px){
    .row{ display:block; }    
    .col{ width:100%; max-width:500px; margin:0 auto;}  
	#bundle-block .product-image{ display:none; }
    .logos img{ max-height:40px; }
}