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-family: 'Graphik Web', arial;
 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 Web', 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;
 font-family: 'Graphik Web', arial;
}
.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: -45px;
 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: 420px;
 /* this is the fold */
 /*  border-radius: 1%;
*/
 /*  background: none;
*/
 overflow: hidden;
 width: 100%;
}
.desktop .help-text {
 float: none;
 position: relative;
 left: 10px;
 /*centers it under laptops */
 top: 0;
 margin-left: 0;
 width: 100%;
 padding-bottom: 75px;
}
.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 rgba(255, 147, 223, 0), 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 rgba(255, 147, 223, 0), 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;
 font-family: 'Graphik Web', arial;
}
.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 (max-width:19200px) {
 .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;
}