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

.constrain{ width:100%; max-width:1000px; margin: 0 auto; border-radius:10px; overflow:hidden; border:3px solid #FFFFFF; box-sizing:border-box;  }
.fixedwidth{ width:100%; max-width:1000px; margin:0 auto; box-sizing:border-box; }
#framewrapper{ width:100%; height:0; padding-top:66.667%; position:relative;  }
iframe{ 
  width:100%; height:100%; position:absolute; top:0; left:0; border:none; overflow:hidden; 
  background-color: #021034;
  background-image:url("../inprocess/anims/refinderLO/titlescreen.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;    
}

.mmi-link{
  text-decoration:none;
  color:#021034;  
}
.mmi-link:hover #mmi-logo{
  color:#184BCB;    
}
#mmi-logo{
  font-size:3.0em;    
  color:#021034;
  transition:all .3s;        
}


body{
  background-color:#FFFFFF;    
  margin:0; padding:0; 
  font-family:"Roboto";  
  color:#252525;    
}

h1,h2,h3{
  font-family:"Round WEB",sans-serif;    
  color:#021034;
  margin:0;    
}

hr{
  border:none;
  border-bottom:1px solid #999999;    
}

#top{
  box-sizing:border-box;
  padding:20px;
  width:100%;  
  position:relative;
  margin:0 auto;
  background-color:#021034;
  background-image:url("graphbg.jpg");
  background-repeat:no-repeat;
  background-position: bottom center;
  background-size:cover;    
}

#top p{
  margin:0;    
}

.formitem{
  padding:10px 10px;      
}
.formitem label{
  color:#676767;
  font-size:.9em;
  display:block; 
  font-weight:700;
  padding-bottom:5px;    
}
.formitem input[type="text"],
.formitem input[type="number"]
{
  padding:10px 5px; 
  border-radius:5px;
  border:1px solid #9a9a9a;
  box-sizing:border-box;    
}
.formitem select{
  padding:10px 5px;
  border-radius:5px;
  border:1px solid #9a9a9a;    
  box-sizing:border-box;    
}
.formitem .postfix{
  color:#787878;
  padding-left:5px;    
}

#bps, #rate { width: 75px; }

.row{ display:flex; align-items: center; }
.col{
 width:50%;
 text-align:left;    
}
.col.two{
 text-align:right;      
}


.button{
  border:none;
  background-color:#A91796;
  color:#FFFFFF;
  padding:10px 12px;
  text-decoration: none;    
  border-radius:10px;
  font-size:1.1em;
  font-weight:700;    
  cursor: pointer;
  transition:all .25s;    
}
.button:hover{
  background-color:#FB5971;     
}

#btn-skip{
 background-color:transparent;
 border:2px solid #FFFFFF;
 position:absolute;
 right:10px; top:10px;
 box-shadow:0 0 5px 0  rgba(0,0,0,.4);      
 text-shadow:0 0 5px 0 rgba(0,0,0,.4);
 color:#E1E1E1;
 opacity:0;    
 pointer-events:none; 
 z-index:10;
 transition:opacity .5s;    
}
#btn-skip.on{  
  opacity:.5;
  pointer-events: all;    
}
#btn-skip.on:hover{
 opacity:1;
}




.title-section{
  background-color:#C8D7FF;    
  padding:15px 10px;
  border-radius:8px; 
  position:relative; 
  margin:0px 0px 5px 0px;    
}

.parameters{
  display:none; 
  background-color:#E6EDFF;
  border-radius:10px;    
}
.parameters .title-section{
  background-color:#184BCB;
  color:#DFE8FF;    
}
.parameters h3{ color:#FFFFFF; font-weight:normal; }


#btn-params{
  position:absolute;
  right:5px; top:5px;
  z-index:2;
  text-decoration: none;
  color:#2B4896;    
  display:inline-block;
  padding:3px;  
  border-radius:3px;    
  transition:all .25s; 
  font-size:1.2em;    
}
#btn-params:hover{
  opacity:.6;
  transform: rotate(60deg);    
}
#btn-lookup{
 position:absolute;
 right:15px; bottom:20px; 
 z-index:2;
 border:2px solid #FFFFFF;
}




.popup{
 position:absolute;
 bottom:-40px; left:1%; 
 background-color:#FFFFFF;
 padding:10px;
 border-radius:10px;
 opacity:0;
 pointer-events: none;    
 transition:all .5s;    
 width:98%;
 box-sizing: border-box;    
 z-index:3;     
}
.popup.on{
  pointer-events:all;
  opacity:1;
  bottom:10px;      
}

.error{
  position:absolute;
  width:80%;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
  background-color:#FFFFFF;
  border-radius:10px;
  z-index:4;     
  box-sizing:border-box;
  padding:20px;   
  opacity:0;
  pointer-events: none;      
  transition:all .3s;    
  box-shadow:0 0 5px 1px rgba(0,0,0,.4);
  border:4px solid #950204;    
}
.error.on{
  top:50%;    
  opacity:1;  
  pointer-events: all;    
}
.error #btn-errorclose{
  position:absolute;
  right:10px; top:10px;
  text-decoration: none;
  color:#950204;    
  font-size:1.2em;    
}
.error #btn-errorclose:hover{
  opacity:.7;    
}


#modal{
 width:100%;
 height:100%;
 position:absolute;
 z-index:2;
 background-color: rgba(2,16,52,0.70);    
 pointer-events: none;     
 top:0; left:0;
 opacity:0; 
 transition:all .3s;    
}
#modal.on{
  pointer-events:all;
  opacity:1;    
}
.button-row{
 padding:15px 10px; 
 text-align:center;    
}

#mmi-link{
  text-decoration:none;
  color:#021034;
  font-size:2.0em;    
}
#bottom{
 padding:10px;    
}


#loader{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);      
  width:150px;    
}
#loader img{
  position:relative;
  display:block;
  width:100%;
  height:auto;          
}

#loader{ display:none;	}
#loader.on{ display:block; }

@keyframes spinner {
from {transform:rotate(0deg); }	
to {transform: rotate(360deg);}
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width:700px) {
    .popup{ font-size:.85em; }       
    #btn-skip{
      font-size:.75em;
      padding:5px 5px;        
    }
}
/* controls when it switches to portrait aspect: */    
@media screen and (max-width:600px) {    
    #framewrapper{ padding-top:150%;   } 
    .popup.on{ bottom:5px; }
    #endscreen .row{ display:block; }
    #endscreen .col { width:100%;  text-align:left; }
    #endscreen .col.two{ padding-top:14px; }
}
@media screen and (max-width:400px) {    
     .popup{ font-size:.70em; }           
}