body  {font-size:  1em} /*seems to be needed to retain proper size of simulator elements when 
truist.com css is applied */ 

h2 {
margin:0em 0em 0em 1.5em;
font-size:2em;}
.close {display: none}

 .message { 
          color: fff;
          z-index: 918000;
          text-align: left;
          height: 100%;
          width: 200px;
          background: rgba(0, 0, 0, 0.8);
          position: relative; 
        }

.message p, .message button {
            padding-left:100px;
            padding-top: 100px;
            font-family: graphik, arial;
          }
.message button {margin-left: 100px; background: #b0e0e2}

.congratulations { 
  position: absolute;
  top:190px;
  left:67;
  width:250px;
  z-index: 5;
  text-align: center;
  color: #fff;
  }
  .desktop .congratulations {margin-top:20pxv;left:0;width: 100%; text-align: center;}

.simulator .card-body {-ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0;}

.transcripts-sims .accordion .btn {font-size: 2rem; background: transparent; text-align: center; 
  border: 2px solid #2e1a47; color: #2e1a47;
   padding: 10px 20px; width: auto; margin-top: 15px;
    font-size: 1.8rem; 
    border-radius: 5px; 
    text-decoration: none;}
.transcripts-sims .accordion .btn:hover {background: #2e1a47; color: #fff; text-decoration: none;}
.transcripts-sims .accordion .btn:focus {background: #2e1a47; color: #fff; text-decoration: none;}

.simulator-container .container  {
        width: 70%;
        padding: 2rem 0;
        display: flex;
        padding:2em;
        color: #12161a;
        font-weight: 300;
    }
.simulator-container .container p 
        {
          line-height: 1.7em;
          font-size: 1.1em;
        }

.simulator-container  h3 
        {
          padding: 1rem 0 0 3rem;
          font-weight: 600;
          font-size: 2.4rem;
          color:#2d1a45;
        }
.simulator-container .container  
        {
        width: 100%;
        padding: 2rem 0;
        display: flex;
        color: #707070;
        font-weight: 400;
        }

.simulator-container #disclosures {font-size: .8em}

.simulator-container .device-shell button 
        {
        
        position:absolute;
        cursor: hand!important;


        }

.simulator-container #disclosures {font-size: .8em}
.simulator-container .lg-container 
        {
        margin: 0 0 0 2rem; 
        padding: 0;
        }

.device-shell
         {
        width:374px;
/*        height:793px;
*/        
margin-bottom:2em;
}
.desktop .device-shell { margin-bottom: 6em; } 
.simulator-container .screen {
        position: relative; 
        height: 800px;
        top:8px;
               }


.simulator-container .screen div {

overflow: hidden;
height:99.7%;

}

.iphone-shell {position: absolute!important; z-index: 2000}

.simulator-container .device-shell img 
        {
        position: absolute;
        top:0px;
           width:94%;
        float:left;
        height:98%;
      
        }
.mob  .device-shell img {      border-radius:5%; }



.simulator-container .mob .device-shell img 
{left:11px;}


.simulator-container .lg-image 
        {
        display: block;
        object-fit: scale-down;
        }
/* destop overrdies */ 

.desktop .screen {
         top:32px;

               }

.desktop {
          position: relative;
          text-align:center; 
          margin:0 2em 0 5em ;
          width:1100px!important;
          }
.desktop .iphone-shell 
    {
    display: none;

    }
.desktop .device-shell img 
    {
    border-radius: 0!important; 
    float:none!important;
    height: auto;
    width: 100%;
    left:0;

    }
 .desktop .device-shell
    {
    width:900px;


    }
    .laptop {left:-61px; margin-top: 16px;
      width:1065px;
       height: 478px;position: absolute; z-index: 2000}
.desktop .device-shell div  {padding:0px;
/*  border-style: solid;
  border-color: #000;
  border-width: 10px 8px 24px 4px;*/ 
  height:421px; /* this is the fold */
/*  border-radius: 1%;
*//*  background: none;
*/  overflow: hidden;
  width:100%;
}


.desktop .help-text {
    float:none;
    position: relative;
    left:0; /*centers it under laptops */ 
    top:0; 
    margin-left: 0;
    width: 100%;
    padding-bottom:75px;  
	max-width: 903px;
}
.desktop .help-text img {display: none}
}


@keyframes button-pulse {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  40% {
    transform: scale(1.15, 1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

/*------------------------------------------------*\
  Sonar
\*------------------------------------------------*/
@-webkit-keyframes sonar {
  from {
    box-shadow: 0 0 0 0 # ee, 0 0 4px 2px rgba(0, 0, 0, 0.9);
  }
  to {
    box-shadow: 0 0 0 10px rgba(255, 147, 223, 0), 0 0 4px 2px rgba(0, 0, 0, 0.9);
  }
}

@-webkit-keyframes sonar:focus; {
  from {
    box-shadow: 0 0 0 0 # ee, 0 0 4px 2px rgba(0, 0, 0, 1);
  }
  to {
    box-shadow: 0 0 0 10px rgba(1, 1, 1, 0), 0 0 4px 2px rgba(0, 0, 0, 1);
  }
}

@keyframes sonar {
  from {
    box-shadow: 0 0 0 0 #a0f86b, 0 0 4px 2px rgba(0, 0, 0, 0.9);
  }
  to {
    box-shadow: 0 0 0 10px rgba(255, 147, 223, 0), 0 0 4px 2px rgba(0, 0, 0, 0.9);
  }
}
.simulator-container .sonar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #a0f86b;
        border: 2px solid #a0f86b;
        opacity: .6;
        filter: alpha(opacity=70);  /* Opacity for IE8 and lower */
          zoom: 1;  /* Fix for IE7 */
        -webkit-animation: sonar 800ms ease-out infinite;
        animation: sonar 800ms ease-out 10;
       border: solid 1px #242424;
        }





.simulator-container .sonar:focus {border:solid 5px white;
 outline:none; opacity:.8 ;width:75px; 
 height:75px;
 margin-left:-5px;
 margin-top:-5px;
box-shadow: 0 0 4px 0 #242424;
}
.simulator-container .sonar:hover {opacity:.75;}
/*------------------------------------------------*\
  Uninteresting stuff
\*------------------------------------------------*/
*,
*:before,
*:after {
  box-sizing: border-box;
}

 .simulator-container a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 0 ;

}

.simulator-container a:hover {
  background-color: #ddd;
  color: black;
}



.simulator-container .next {
  background-color: #4CAF50;
  color: blue;
}

.simulator-container .round {
  border-radius: 50%;
}

.simulator-container .active 
        {
        display:block!important;
        }
.simulator-container .active-page
       {
        display: inline-block!important;
        }
.simulator-container #page  {
        position: relative!important; top:0%;
        }
.simulator-container button  {
         border:none;
        background: none;
        cursor: pointer;
        z-index: 2600;
        }

.message button {background: #b0e0e2; color:#2e1a47;padding:1em 2em;opacity: 10}
        .simulator-container .help-text button  
        {
/*          display: none;
*/          background: none;
          color:#0067bd;
          font-weight: bold;
          white-space: nowrap!important;
          width: 100%;
          text-align: left!important;
          left:0;

        }
 .simulator-container .backer
        {
          background: transparent;
            /*color:#0067bd;
            font-weight: bold;
            white-space: nowrap!important;
            width: 100%;
            text-align: left!important;
            left:0;
            padding-left:0;*/background: transparent;
    text-align: center;
    border: 2px solid #2e1a47!important;
    color: #2e1a47!important;
    padding: 10px 20px;
    width: auto!important;
    margin-top: 5px;
    font-size: 1.8rem;
    border-radius: 5px;
    text-decoration: none;
    float: left;
}


            
          }
  .simulator-container a:hover.previous, .simulator-container a:hover.backer     
        {
          background: none;
          color: #034379;
        }

.simulator-container .help-text button    {
               font-size: 1.5em;
              }


.simulator-container .tryme img {
        position: absolute; 
      
        z-index: 10000;
        height:55px;
      border: none!important;
        width: auto;
        }

 .help-text   {
              background: #f7f7f7;
              position: relative; 
              text-align: left;
            border: solid 1px #b8b8b8;
              width:100%;
              padding: 2em 1em 1em 2em;
              margin:0 0em 0em  2em;
              border-radius:6px;
/*              box-shadow: 1px 1px 3px 3px #e0e0e0;*/
              text-align: center;
              min-height: 175px;



             }

 .help-text img {
              height:150px;
              position:absolute;
              left:-22px;
              top:0;

              }

 .help-text h3
            {
              margin:0 ;
              padding:5px 0 0 0 ;  
              width: 100%;
              font-size: 1.6em;
              position:relative;
              top:-5px;
              text-align: left;
            }

.help-text p {
              margin:0 .5em .5em 0em; 
              text-align: left;
              } 

.desktop .help-text p {
              font-size: 1.3em} 



@media only screen and (min-width: 800px) {
  body {

  }
   
.help-text {
 position: absolute; top: 50px; left: 370px; width:80%;

        }

}


@media only screen and (min-width: 801px) {
.mob #copy { float:left;
    width:40%;
    font-size: 1.1em;
    min-width: 200px;
  }

.mob .lg-container {  
  max-width: 375px;
  position: relative;
  float:right;
}



}

@media only screen and (max-width: 1190px) {

  #copy {  width:32%; padding:0; font-size: 1em}
.help-text b {position: relative;left: 0  }

}

@media only screen and (min-width: 1000px) {
  .message {display: none;}

}
@media only screen and (max-width: 800px) {


  .simulator-container .device-shell img {border-radius: 0}
  .iphone-shell {display: none}


  .mob  .help-text h3
            {
              margin:0 ;
              padding:5px 0 0 15px ;  
            }
.help-text img {display: none}
  #header {  text-align: center;}
    #copy {  width:22%; padding:0; font-size: .9em}
.help-text {
  position: relative;
  z-index: 800;
            margin:.5em 0 2em 0;
            width: 100%;
            height:100px;
            padding: 12px 10px 10px 15px;
            }

           
/*a.s {font-size: 1.3em}
*/.help-text p {padding:5px 0 0 15px ;}
body {margin:0;padding: 0}
.help-text button {top:0px;}
.tryme img {
      
        height:40px;
        margin-top: 5px;
        }

}

@media only screen and (max-width: 500px) {

.mob .simulator-container  .tryme img {
        height:30px;
        margin-top: 10px;
        margin-left:-20px;
      }
  
.mob .simulator-container  .lg-container, .mob .simulator-container .screen,  .mob .simulator-container .device-shell  
          {
          padding:0;
          margin: 0 auto;
          width: 100%;
          background: none;

          }
.mob .simulator-container .container {
          padding:0;
          margin: 0 auto;
          width: 100%;
        }
.mob .simulator-container .screen { position: relative;
       left: 20px;z-index: 9;top:-60px;


  
     }
.mob .simulator-container  .help-text {
  position: relative;
  z-index: 800;
            margin:0;
            width: 100%;
            height:auto;
            padding: 2px 10px 10px 5px;
            border-radius:0px;
             min-height: auto;
            }
.mob .simulator-container .help-text h3 { position: relative; left:65px; top:0px;}
.mob .simulator-container .help-text h3.one  {left:0!important;}
.mob .simulator-container .device-shell img {border: solid 2px black}
.mob .simulator-container .help-text button {
        z-index: 2500;
        position: absolute;
        margin:0 auto;
        padding: 0;
        top:3px;
        left:10px;
        text-align: left;
        font-size: 1.5em
         }
}

.help-text :focus {
    outline: 2px solid blue!important;  
    
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}