/*startPage*/

#startPage{
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
}

#startPage .bkg {
  width: 996px;
  height: 650px;
  position: absolute;
  top: 0;
  left: 0;
}

#startPage .logo {
  width: 200px;
  height: 51px;
  position: absolute;
  top: 84px;
  left: 84px;
}

#startPage .bigTitle {
  width: 565px;
  color: black;
  position: absolute;
  top: 199px;
  left: 84px;
  font-size: 36px;
}

#startPage .littleTitle {
  width: 470px;
  color: black;
  position: absolute;
  top: 230px;
  left: 84px;
  font-size: 24px;
}

#startPage .button {
  width: 156px;
  border-color: #004F71;
  color: #004F71;
  position: absolute;
  top: 326px;
  left: 84px;
}

#startPage .copyright {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
}

/**/

/*General Styles*/

.page .logo {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 9px;
  color: white;
}

.brandon-reg {
  font-family: "Brandon-reg";
}

.brandon-light {
  font-family: "Brandon-light";
}

.georgia {
  font-family: Georgia;
  font-size: 12px;
  line-height: 20px;
}

.page .header {
  width: 828px;
  position: absolute;
  top: 36px;
  left: 84px;
  display: flex;
  justify-content: space-between;
}

.page .header p {
  font-size: 10px;
  letter-spacing: 1px;
  color: white;
  opacity: .4;
}

.page .header.blue p {
  color: #002A3A;
}

.page .header .active {
  opacity: 1;
  /*border-bottom: 1px solid white;*/
}

.page .header.blue .active {
  /*border-color: #002A3A;*/
}

.page .bigTitle {
  font-size: 48px;
  letter-spacing: 3.6px;
  line-height: 52px;
}

.page .littleTitle {
  font-size: 24px;
  letter-spacing: 2.4px;
  line-height: 52px;
}

.page .button {
  height: 36px;
  font-size: 10px;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  cursor: pointer;
}

/**/

/* instructionPage */

#instructionPage {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#instructionPage .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#instructionPage .fac {
  width: 275px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#instructionPage ul {
  padding-left: 20px;
  margin-top: 12px;
  margin-bottom: 12px;
}

#instructionPage .instructionFrame {
  position: absolute;
  top: 166px;
  width: calc(50% + 10px);
  height: 332px;
  right: 80px;
  border: 0px;
}

/*introPage*/

#introPage {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#introPage .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#introPage .fac {
  width: 515px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#introPage .click {
  width: 240px;
  position: absolute;
  top: 259px;
  border-color: white;
}

#introPage .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#introPage .click.one,
#introPage .reveal.one {
  left: 84px;
}

#introPage .click.two,
#introPage .reveal.two {
  left: 360px;
}

#introPage .reveal {
  width: 240px;
  position: absolute;
  top: 305px;
}

/**/

/*theBasics*/

#theBasics {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#theBasics .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#theBasics .fac {
  width: 515px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#theBasics .click {
  width: 240px;
  position: absolute;
  top: 217px;
  border-color: white;
}

#theBasics .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#theBasics .click,
#theBasics .reveal {
  left: 84px;
}

#theBasics .reveal {
  width: 240px;
  position: absolute;
  top: 263px;
}

#theBasics .image {
  width: 324px;
  height: 418px;
  position: absolute;
  right: 84px;
  top: 120px;
}

/**/

/*stayingCourse*/

#stayingCourse {
  background-image: url(../img/bkgd_kayakers.jpg);
  background-size: 100%;
}

#stayingCourse .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #64CCC9;
}

#stayingCourse .fac {
  width: 485px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#stayingCourse .click {
  width: 158px;
  position: absolute;
  top: 239px;
  border-color: white;
}

#stayingCourse .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#stayingCourse .click.one,
#stayingCourse .reveal.one {
  left: 84px;
}

#stayingCourse .click.two,
#stayingCourse .reveal.two {
  left: 307px;
}

#stayingCourse .click.three,
#stayingCourse .reveal.three {
  left: 530px;
}

#stayingCourse .click.four,
#stayingCourse .reveal.four {
  left: 753px;
}

#stayingCourse .reveal {
  width: 158px;
  position: absolute;
  top: 285px;
}

#stayingCourse .reveal.one {
  width: 150px;
}

#stayingCourse .reveal.two p,
#stayingCourse .reveal.three p {
  margin-bottom: 5px;
}

#stayingCourse .reveal.three img {
  width: 151px;
  height: 24px;
  display: block;
  text-align: center;
}

/**/

/*strengthenIdentity*/

#strengthenIdentity {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#strengthenIdentity .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#strengthenIdentity .fac {
  width: 460px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#strengthenIdentity .click {
  width: 240px;
  position: absolute;
  border-color: white;
}

#strengthenIdentity .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#strengthenIdentity .click.one,
#strengthenIdentity .click.two,
#strengthenIdentity .num.one,
#strengthenIdentity .num.two {
  top: 238px;
}

#strengthenIdentity .click.three,
#strengthenIdentity .click.four,
#strengthenIdentity .num.three,
#strengthenIdentity .num.four {
  top: 356px;
}

#strengthenIdentity .click.one,
#strengthenIdentity .reveal.one,
#strengthenIdentity .click.three,
#strengthenIdentity .reveal.three {
  left: 84px;
}

#strengthenIdentity .click.two,
#strengthenIdentity .reveal.two,
#strengthenIdentity .click.four,
#strengthenIdentity .reveal.four {
  left: 424px;
}

#strengthenIdentity .click.three {
  letter-spacing: .5px;
}

#strengthenIdentity .num {
  width: 30px;
  height: 36px;
  font-size: 49px;
  color: #009CDE;
  opacity: .5;
  position: absolute;
  line-height: 40px;
  text-align: right;
}

#strengthenIdentity .num.one,
#strengthenIdentity .num.three {
  left: 43px;
}

#strengthenIdentity .num.two,
#strengthenIdentity .num.four {
  left: 384px;
}

#strengthenIdentity .reveal {
  width: 240px;
  position: absolute;
}

#strengthenIdentity .reveal.one,
#strengthenIdentity .reveal.two {
  top: 284px;
}

#strengthenIdentity .reveal.three,
#strengthenIdentity .reveal.four {
  top: 402px;
}

/*policy*/

#policy {
}

#policy .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#policy .fac {
  width: 405px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#policy .click {
  width: 400px;
  text-transform: uppercase;
  position: absolute;
  text-align: center;
  border-color: #002A3A;
  color: #002A3A;
}

#policy .click.clicked {
  background-color: rgba(0,156,222,.4);
}

#policy .click{
  left: 84px;
}

#policy ul.reveal {
  left: 104px;
}

#policy .reveal.three {
  left: 84px;
  top: 425px;
}

#policy .click.one {
  top: 269px;
}

#policy .reveal {
  width: 405px;
  top: 340px;
  position: absolute;
  color: #888B8D;
}

#policy .coverpage {
  position: absolute;
  right: 20px;
  top: 166px;
}

#policy .coverpage img {
  width: 450px;
}

/**/

/*buildingAbbott*/

#buildingAbbott {
  background-color: white;
}

#buildingAbbott .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildingAbbott .fac {
  width: 835px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildingAbbott .button {
  width: 240px;
  position: absolute;
  top: 238px;
  border-color: #002A3A;
  color: #002A3A;
  background-color: white;
}

#buildingAbbott .button.clicked {
  background-color: #5BC2E7;
}

#buildingAbbott .button.one {
  left: 84px;
}

#buildingAbbott .button.two {
  left: 505px;
}

#buildingAbbott .container {
  width: 388px;
  position: absolute;
  top: 309px;
  display: flex;
  justify-content: flex-start;
}

#buildingAbbott .container.one {
  left: 77px;
}

#buildingAbbott .container.two {
  left: 499px;
}

#buildingAbbott .container img {
  margin-right: 12px;
  flex-shrink: 0;
}

#buildingAbbott .container.one img {
  width: 200px;
  height: 273px;
}

#buildingAbbott .container.two img {
  width: 188px;
  height: 275px;
}

#buildingAbbott .container p {
  color: #888B8D;
}

/**/

/*abbottRole*/

#abbottRole {
  background-color: white;
}

#abbottRole .littleTitle {
  position: absolute;
  top: 92px;
  left: 84px;
  color: #009CDE;
}

#abbottRole .fac {
  width: 335px;
  position: absolute;
  top: 153px;
  left: 84px;
  color: #888B8D;
}

#abbottRole .fac p {
  margin-bottom: 10px;
}

#abbottRole .fac2 {
  width: 492px;
  position: absolute;
  top: 103px;
  right: -22px;
  color: #888B8D;
  padding-right: 220px;
  box-sizing: border-box;
}

#abbottRole .text {
  width: 292px;
  position: absolute;
  top: 166px;
  right: 179px;
  color: #888B8D;
}

#abbottRole .two {
  margin: 29px 0 32px 0;
}

#abbottRole .text .title {
  color: #009CDE;
  font-size: 16px;
  letter-spacing: 1.6px;
}

#abbottRole > .image {
  width: 492px;
  height: 389px;
  position: absolute;
  top: 166px;
  right: 14px;
}

#abbottRole .click {
  position: absolute;
  right: 74px;
  width: 94px;
  top: 124px;
  cursor: pointer;
}

/**/

/*brandDrag*/

#brandDrag {
  background-color: white;
}

#brandDrag .littleTitle {
  width: 400px;
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
  line-height: 29px;
}

#brandDrag .fac {
  width: 360px;
  position: absolute;
  top: 187px;
  left: 84px;
  color: #888B8D;
  z-index: 1;
}

#brandDrag .image {
  width: 339px;
  height: 402px;
  position: absolute;
  top: 105px;
  right: 155px;
}

#brandDrag .drags {
  width: 390px;
  position: absolute;
  top: 254px;
  left: 76px;
}

#brandDrag .drags .drag {
  width: 127px;
  height: 63px;
  cursor: pointer;
  position: absolute;
}

#brandDrag .drags .one,
#brandDrag .drags .two,
#brandDrag .drags .three {
  top: 0;
}

#brandDrag .drags .four,
#brandDrag .drags .five,
#brandDrag .drags .six {
  top: 63px;
}

#brandDrag .drags .seven,
#brandDrag .drags .eight,
#brandDrag .drags .nine {
  top: 126px;
}

#brandDrag .drags .ten,
#brandDrag .drags .eleven{
  top: 189px;
}

#brandDrag .drags .one,
#brandDrag .drags .four,
#brandDrag .drags .seven {
  left: 0;
}

#brandDrag .drags .two,
#brandDrag .drags .five,
#brandDrag .drags .eight {
  left: 127px;
}

#brandDrag .drags .three,
#brandDrag .drags .six,
#brandDrag .drags .nine {
  left: 254px;
}

#brandDrag .drags .ten {
  left: 64px;
}

#brandDrag .drags .eleven {
  left: 191px;
}

#brandDrag .submit,
#brandDrag .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#brandDrag .submit {
  right: 84px;
}

#brandDrag .reset {
  right: 277px;
}

#brandDrag .drop {
  width: 430px;
  height: 125px;
  position: absolute;
  right: 95px;
}

#brandDrag .drop.top {
  top: 108px;
}

#brandDrag .drop.middle {
  top: 242px;
}

#brandDrag .drop.bottom {
  top: 377px;
}

#brandDrag .feedback {
  position: absolute;
}

#brandDrag .feedback.leftSide {
  width: 340px;
  height: 252px;
  top: 254px;
  left: 76px;
  background-color: white;
}

#brandDrag .feedback.leftSide .response {
  width: 200px;
  height: 63px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  left: 130px;
  color: #E4002B;
}

#brandDrag .feedback.leftSide .response.seven {
  top: 0;
}

#brandDrag .feedback.leftSide .response.six {
  top: 63px;
}

#brandDrag .feedback.leftSide .response.four {
  top: 126px;
}

#brandDrag .feedback.leftSide .response.five {
  top: 189px;
}

#brandDrag .feedback .response img {
  width: 25px;
  height: 25px;
  margin-right: 12px;
  flex-shrink: 0;
}

#brandDrag .feedback.rightSide {
  width: 580px;
  height: 477px;
  top: 105px;
  right: 0;
  background-color: white;
}

#brandDrag .feedback.rightSide .response {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 17px;
  position: absolute;
  color: #00B140;
}

#brandDrag .feedback.rightSide .response.top {
  width: 75px;
  top: 101px;
  left: 216px;
}

#brandDrag .feedback.rightSide .response.middle {
  width: 335px;
  top: 231px;
  left: 92px;
}

#brandDrag .feedback.rightSide .response.bottom {
  bottom: 35px;
  left: 111px;
}

#brandDrag .feedback.rightSide .bkg {
  width: 339px;
  height: 402px;
  margin-left: 86px;
}

#brandDrag .feedback .icon {
  width: 127px;
  height: 63px;
  position: absolute;
}

#brandDrag .feedback.leftSide .icon {
  left: 0;
}

#brandDrag .feedback.leftSide .icon.seven {
  top: 0;
}

#brandDrag .feedback.leftSide .icon.six {
  top: 63px;
}

#brandDrag .feedback.leftSide .icon.four {
  top: 126px;
}

#brandDrag .feedback.leftSide .icon.five {
  top: 189px;
}

#brandDrag .feedback.rightSide .icon.eight {
  top: 40px;
  right: 260px;
}

#brandDrag .feedback.rightSide .icon.one {
  top: 170px;
  left: 80px;
}

#brandDrag .feedback.rightSide .icon.eleven {
  top: 170px;
  right: 152px;
}

#brandDrag .feedback.rightSide .icon.nine {
  bottom: 112px;
  left: 2px;
}

#brandDrag .feedback.rightSide .icon.two {
  bottom: 112px;
  left: 129px;
}

#brandDrag .feedback.rightSide .icon.three {
  bottom: 112px;
  right: 198px;
}

#brandDrag .feedback.rightSide .icon.ten {
  bottom: 112px;
  right: 73px;
}

/**/

/*elementsScroll*/

#elementsScroll {
  background-color: white;
}

#elementsScroll .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#elementsScroll .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#elementsScroll .scroll {
  width: 882px;
  height: 335px;
  position: absolute;
  top: 215px;
  left: 84px;
  overflow-x: scroll;
  overflow-y: hidden;
}

#elementsScroll .scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#elementsScroll .scroll::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #F5F5F5;
}

#elementsScroll .scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #009CDE;
  cursor: pointer;
}

#elementsScroll .scroll img {
  width: 1432px;
  height: 316px;
}

/**/

/*signatureClick*/

#signatureClick {
  background-color: white;
}

#signatureClick .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#signatureClick .fac {
  width: 570px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
  z-index: 1;
}

#signatureClick > .image,
#signatureClick .reveal .image {
  width: 425px;
  height: 237px;
  position: absolute;
  top: 238px;
  user-select: none;
  right: 45px;
}

#signatureClick .click {
  width: 240px;
  position: absolute;
  border-color: #002A3A;
  color: #002A3A;
  left: 84px;
}
#signatureClick > .click.active {
  background-color: rgba(0,156,222,.4);
}
#signatureClick > .click.clicked:not(.active) {
    opacity: .4;
}

#signatureClick .click.one {
  top: 238px;
}

#signatureClick .click.two {
  top: 286px;
}

#signatureClick .click.three {
  top: 334px;
}

#signatureClick .click.four {
  top: 382px;
}

#signatureClick .click.five {
  top: 430px;
}

#signatureClick .click.six {
  top: 478px;
}

#signatureClick .click.seven {
  top: 524px;
}

#signatureClick .reveal {
  width: 576px;
  height: 470px;
  background-color: white;
  position: absolute;
  top: 105px;
  right: 0;
  box-sizing: border-box;
  padding-top: 11px;
}

#signatureClick .reveal p {
  color: #009CDE;
  width: 490px;
}

#signatureClick .reveal.one p {
  margin-bottom: 55px;
}

#signatureClick .reveal.two p {
  margin-bottom: 8px;
}

#signatureClick .reveal.three p {
  margin-bottom: 56px;
}

#signatureClick .reveal.four p {
  margin-bottom: 49px;
  width: 450px;
}

#signatureClick .reveal.five p {
  margin-bottom: 57px;
}

#signatureClick .reveal.six p {
  margin-bottom: 42px;
}

#signatureClick .reveal.seven p {
  margin-bottom: 76px;
}

#signatureClick .reveal.one img:not(.click) {
  width: 424px;
}

#signatureClick .reveal.two img:not(.click) {
  width: 532px;
  margin-left: -22px;
}

#signatureClick .overlayText {
  color: #afafaf;
  position: absolute;
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  /* border: 1px solid red; */
  padding: 2px;
}

#signatureClick .reveal.two .overlayText[type="pc"] {
  left: -3px;
  top: 96px;
}
#signatureClick .reveal.two .overlayText[type="web"] {
  left: -3px;
  top: 347px;
}
#signatureClick .reveal.two .overlayText[type="ad"] {
  left: 370px;
  top: 347px;
}


#signatureClick .reveal.two .squish.h1 {
  position: absolute;
    left: -16px;
    top: 119px;
  width: 55px;
  height: 55px;
}


#signatureClick .reveal.two .squish.h2 {
  position: absolute;
    left: 268px;
    top: 271px;
  width: 55px;
  height: 55px;
  animation-delay: .7s;
}

#signatureClick .reveal.two .squish.h3 {
  position: absolute;
    left: 450px;
    top: 281px;
  width: 40px;
  height: 40px;
  animation-delay: 0.9s;
}

#signatureClick .reveal.two .squish.h4 {
  position: absolute;
    left: -8px;
    top: 376px;
  width: 40px;
  height: 40px;
  animation-delay: 1.1s;
}

#signatureClick .reveal.two .squish.h5 {
  position: absolute;
    left: 315px;
    top: 377px;
  width: 40px;
  height: 40px;
  animation-delay: 1.3s;
}

#signatureClick .reveal.two .squish.h6 {
  position: absolute;
    left: 437px;
    top: 438px;
  width: 48px;
  height: 48px;
  animation-delay: 1.5s;
}

#signatureClick .reveal.two .showWrong {
  transform: scale(1, 0.67);
  width: 100%;
  height: 100%;
}

#signatureClick .reveal.two .h3 .showWrong {
  transform: scale(1, 0.8);
}

#signatureClick .reveal.six img:not(.click) {
  width: 551px;
  margin-left: -7px;
}

#signatureClick .reveal.three img:not(.click) {
  width: 426px;
}

#signatureClick .reveal.four img:not(.click) {
  width: 448px;
  margin-left: -5px;
  margin-top: 3px;
}
#signatureClick .reveal.four .response img {
  width: 28px;
}

#signatureClick .reveal.four .showRight {
  width: 55px;
  height: 55px;
  top: 130px;
  left: 11px;
}

#signatureClick .reveal.four .showWrong {
  width: 41px;
  height: 41px;
  top: 132px;
  left: 245px;
  animation-delay: 1.1s;
}

#signatureClick .reveal.five img:not(.click) {
  width: 523px;
  margin-left: -20px;
}

#signatureClick .reveal.five .squish.h1 {
  position: absolute;
  top: 110px;
  left: 2px;
  width: 70px;
  height: 70px;
}

#signatureClick .reveal.five .showRight {
  transform: scale(1, 0.78);
  width: 70px;
  height: 70px;
  top: 0px;
  left: 0px;
}

#signatureClick .reveal.five .squish.h2 {
  position: absolute;
  top: 100px;
  left: 261px;
  width: 90px;
  height: 90px;
  animation-delay: 1.1s;
}

#signatureClick .reveal.five .showWrong {
  transform: scale(1, 0.67);
  width: 90px;
  height: 90px;
}

#signatureClick .reveal.six img:not(.click) {
  width: 551px;
  margin-left: -7px;
}

#signatureClick .reveal.seven img:not(.click) {
  width: 528px;
  margin-left: -10px;
}

#signatureClick .reveal img.click {
  width: 87px;
  height: 25px;
  position: relative;
  margin-bottom: -25px;
  margin: 0 0 -25px 0;
    left: 400px;
    top: -10px;
  display: block;
  cursor: pointer;
}

#signatureClick .reveal .response {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  line-height: 28px;
  position: absolute;
}

#signatureClick .reveal.four .response {
  top: 422px;
}

#signatureClick .reveal.four .response.one {
  left: 10px;
  width: 196px;
  color: #00B140;
}

#signatureClick .reveal.four .response.two {
  left: 243px;
  width: 200px;
  color: #E4002B;
}

#signatureClick .response img {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  flex: 0 0 28px;
}

#signatureClick .reveal img.click {
  width: 87px;
  height: 25px;
  position: relative;
  margin-bottom: -25px;
  margin: 0 0 -25px 0;
  left: 400px;
  top: -10px;
  display: block;
  cursor: pointer;
}

#signatureClick .reveal.four img.click {
  left: 346px;
  top: -30px;
}
#signatureClick .reveal.six img.click {
  left: 451px;
  top: -25px;
}

#signatureClick .popup .overlayText {
  color: #afafaf;
  position: absolute;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 1);
  /* border: 1px solid red; */
  padding: 2px;
}

#signatureClick .popup.two .overlayText[type="pc"] {
  left: 19px;
  top: 14px;
}
#signatureClick .popup.two .overlayText[type="web"] {
  left: 19px;
  top: 393px;
}
#signatureClick .popup.two .overlayText[type="ad"] {
  left: 662px;
  top: 393px;
}

/**/

/*signatureQuiz*/

#signatureQuiz {
  background-color: white;
}

#signatureQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#signatureQuiz .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#signatureQuiz .miniLabels {
  width: 828px;
  position: absolute;
  top: 210px;
  left: 84px;
  color: #888B8D;
  display: flex;
  justify-content: space-between;
}

#signatureQuiz .miniLabels p {
  font-size: 10px;
  letter-spacing: 1px;
}

#signatureQuiz .miniLabels p:nth-child(1) {
  width: 154px;
}

#signatureQuiz .miniLabels p:nth-child(2) {
  width: 234px;
}

#signatureQuiz .miniLabels p:nth-child(3) {
  width: 159px;
}

#signatureQuiz .miniLabels p:nth-child(4) {
  width: 178px;
}

#signatureQuiz .quiz {
  width: 828px;
  height: 242px;
  position: absolute;
  top: 228px;
  left: 76px;
  display: flex;
  justify-content: space-between;
}

#signatureQuiz .quiz .choice {
  cursor: pointer;
  position: relative;
}

#signatureQuiz .choice.selected {
  opacity: 1;
}

#signatureQuiz .choice.notSelected:after {
  content: '';
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}

#signatureQuiz .quiz .choice.one {
  width: 175px;
  height: 242px;
  background: url("../img/11_quiz1.png") center / 100% 100% no-repeat;
}

#signatureQuiz .quiz .choice.two {
  width: 262px;
  height: 242px;
  background: url("../img/11_quiz2.png") center / 100% 100% no-repeat;
}

#signatureQuiz .quiz .choice.three {
  width: 177px;
  height: 242px;
  background: url("../img/11_quiz3.png") center / 100% 100% no-repeat;
}

#signatureQuiz .quiz .choice.four {
  width: 178px;
  height: 242px;
  background: url("../img/11_quiz4.png") center / 100% 100% no-repeat;
}

#signatureQuiz .quiz .choice.one.selected {
  background-image: url("../img/11_quiz1_selected.png");
}

#signatureQuiz .quiz .choice.two.selected {
  background-image: url("../img/11_quiz2_selected.png");
}

#signatureQuiz .quiz .choice.three.selected {
  background-image: url("../img/11_quiz3_selected.png");
}

#signatureQuiz .quiz .choice.four.selected {
  background-image: url("../img/11_quiz4_selected.png");
}

#signatureQuiz .quiz .submit {
  width: 156px;
  position: absolute;
  bottom: -85px;
  right: 3px;
  border-color: #002A3A;
  color: #002A3A;
}

#signatureQuiz .click {
  width: 87px;
  height: 25px;
  position: absolute;
  top: 470px;
  cursor: pointer;
}

#signatureQuiz .click.one {
  left: 84px;
}

#signatureQuiz .click.two {
  left: 268px;
}

#signatureQuiz .click.three {
  right: 370px;
}

#signatureQuiz .click.four {
  right: 176px;
}

#signatureQuiz .responses {
  width: 828px;
  position: absolute;
  top: 469px;
  left: 76px;
  display: flex;
  justify-content: space-between;
  background-color: white;
}

#signatureQuiz .responses .response {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 17px;
}

#signatureQuiz .response.one {
  width: 169px;
  margin-left: 6px;
}

#signatureQuiz .response.two {
  width: 250px;
  margin-left: 6px;
  margin-right: 6px;
}

#signatureQuiz .response.three {
  width: 177px;
}

#signatureQuiz .response.four {
  width: 172px;
  margin-left: 6px;
}

#signatureQuiz .response img {
  width: 25px;
  height: 25px;
  margin-right: 12px;
  flex-shrink: 0;
}

#signatureQuiz .response.one p,
#signatureQuiz .response.two p,
#signatureQuiz .response.four p {
  color: #E4002B;
}

#signatureQuiz .response.three p {
  color: #00B140;
}

#signatureQuiz .bottomText {
  width: 460px;
  color: #888B8D;
  position: absolute;
  bottom: 35px;
  left: 268px;
  text-align: center;
}

#signatureQuiz .popup.three .scrollingWindow {
  width: 600px;
  left: 149px;
}

/**/

/*fullestLogo*/

#fullestLogo {
  background-color: #004F71;
}

#fullestLogo .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#fullestLogo .full {
  width: 336px;
  height: 310px;
  position: absolute;
  top: 134px;
  right: 84px;
}

#fullestLogo .fac {
  width: 357px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: white;
}

#fullestLogo .fac p {
  margin-bottom: 10px;
}

#fullestLogo .click {
  width: 165px;
  position: absolute;
  top: 311px;
  left: 84px;
  border-color: white;
  color: white;
}

#fullestLogo .text {
  width: 357px;
  position: absolute;
  top: 383px;
  left: 84px;
  color: white;
}

#fullestLogo .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#fullestLogo .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 130px;
  right: 337px;
}

#fullestLogo .popup .container {
  width: 325px;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
  color: #888B8D;
}

#fullestLogo .popup .container ul {
  margin-left: 18px;
}

#fullestLogo .popup .container ul li {
  margin-bottom: 10px;
}

#fullestLogo .popup .container ul li:last-child {
  margin-bottom: 0;
}

/**/

/*sonicVideo*/

#sonicVideo {
  background-image: url(../img/13_sonic_bkgd.png);
  background-size: 100%;
}

#sonicVideo .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#sonicVideo .fac {
  width: 267px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#sonicVideo .fac p {
  margin-bottom: 10px;
}

#sonicVideo .video {
  width: 240px;
  position: absolute;
}

#sonicVideo .container {
  width: 204px;
  position: absolute;
}

#sonicVideo .container.one {
  top: 119px;
  right: 336px;
}

#sonicVideo .container.two {
  top: 119px;
  right: 84px;
}

#sonicVideo .container.three {
  top: 240px;
  right: 336px;
}

#sonicVideo .container.four {
  top: 240px;
  right: 84px;
}

#sonicVideo .container .click {
  width: 204px;
  color: white;
  border-color: white;
  margin-bottom: 12px;
}

#sonicVideo .container .text {
  font-size: 12px;
}

#sonicVideo .popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

#sonicVideo .popup video {
  width: 775px;
  height: 436px;
}

#sonicVideo .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 85px;
  right: 87px;
}

/**/

/*signatureEnd*/

#signatureEnd {
  background-color: white;
}

#signatureEnd .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#signatureEnd .logos {
  width: 251px;
  height: 241px;
  position: absolute;
  top: 175px;
  left: 84px;
}

#signatureEnd .text {
  width: 324px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#signatureEnd .text p {
  color: #009CDE;
  margin-bottom: 12px;
}

#signatureEnd .text .line {
  width: 60px;
  height: 1px;
  background-color: #002A3A;
  margin-bottom: 14px;
}

/**/

/*typographyIntro*/

#typographyIntro {
  background-color: white;
}

#typographyIntro .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#typographyIntro .fac {
  width: 615px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#typographyIntro .button {
  width: 240px;
  position: absolute;
  top: 238px;
  border-color: #002A3A;
  color: #002A3A;
}

#typographyIntro .button.clicked {
  background-color: #5BC2E7;
}

#typographyIntro .button.one {
  left: 84px;
}

#typographyIntro .button.two {
  left: 505px;
}

#typographyIntro .reveal {
  position: absolute;
  top: 300px;
}

#typographyIntro .reveal.one {
  width: 340px;
  height: 182px;
  left: 84px;
}

#typographyIntro .reveal.two {
  width: 351px;
  height: 221px;
  left: 505px;
}

#typographyIntro .text {
  width: 330px;
  position: absolute;
  top: 488px;
  left: 84px;
  color: #888B8D;
}

/**/

/*typographyInfo*/

#typographyInfo {
  background-color: white;
}

#typographyInfo .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#typographyInfo .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#typographyInfo > .image {
  width: 828px;
  height: 381px;
  position: absolute;
  top: 203px;
  left: 84px;
}

#typographyInfo .click {
  width: 87px;
  height: 25px;
  position: absolute;
  top: 120px;
  right: 81px;
  cursor: pointer;
}

#typographyInfo .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  z-index: 3;
}

/**/

/*typographyExample*/

#typographyExample {
  background-color: white;
}

#typographyExample .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#typographyExample .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#typographyExample .image {
  width: 828px;
  height: 359px;
  position: absolute;
  top: 221px;
  left: 85px;
}

#typographyExample .click {
  width: 87px;
  height: 25px;
  position: absolute;
  top: 165px;
  right: 167px;
  cursor: pointer;
}

#typographyExample .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  z-index: 3;
}

#typographyExample .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 60px;
  right: 14px;
}

#typographyExample .popup .big {
  width: 976px;
  height: 423px;
  margin-top: 91px;
}

/**/

/*modulateTypography*/

#modulateTypography {
  background-color: white;
}

#modulateTypography .littleTitle {
  width: 200px;
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
  line-height: 30px;
}

#modulateTypography .fac {
  width: 215px;
  position: absolute;
  top: 189px;
  left: 84px;
  color: #888B8D;
}

#modulateTypography > .image {
  width: 620px;
  height: 476px;
  position: absolute;
  top: 111px;
  right: 50px;
}

#modulateTypography .click {
  width: 87px;
  height: 25px;
  position: absolute;
  cursor: pointer;
}

#modulateTypography .click.one {
  top: 159px;
  left: 334px;
}

#modulateTypography .click.two {
  top: 159px;
  left: 467px;
}

#modulateTypography .click.three {
  top: 77px;
  right: 310px;
}

#modulateTypography .click.four {
  top: 201px;
  right: 112px;
}

#modulateTypography .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

/**/

/*typographyEnd*/

#typographyEnd {
  background-color: white;
}

#typographyEnd .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#typographyEnd .fac {
  width: 324px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#typographyEnd .letters {
  width: 322px;
  height: 198px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#typographyEnd .text {
  width: 324px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#typographyEnd .text p {
  color: #009CDE;
  margin-bottom: 12px;
}

#typographyEnd .text .line {
  width: 60px;
  height: 1px;
  background-color: #002A3A;
  margin-bottom: 14px;
}

/**/

/*colorIntro*/

#colorIntro {
  background-color: white;
}

#colorIntro .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#colorIntro .fac {
  width: 233px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
  z-index: 1;
}

#colorIntro .image {
  width: 545px;
  height: 289px;
  position: absolute;
  top: 221px;
  right: 70px;
}

#colorIntro .click {
  width: 240px;
  position: absolute;
  border-color: #002A3A;
  color: #002A3A;
  left: 84px;
}

#colorIntro .click.active {
  background-color: rgba(0,156,222,.4);
}

#colorIntro .click.clicked:not(.active) {
    opacity: .4;
}

#colorIntro .click.one {
  top: 238px;
}

#colorIntro .click.two {
  top: 286px;
}

#colorIntro .click.three {
  top: 334px;
}

#colorIntro .click.four {
  top: 382px;
}

#colorIntro .click.five {
  top: 430px;
}

#colorIntro .click.six {
  top: 478px;
}

#colorIntro .reveal {
  width: 615px;
  height: 470px;
  background-color: white;
  position: absolute;
  top: 105px;
  right: 0;
  box-sizing: border-box;
  padding: 18px 0 0 16px;
}

#colorIntro .reveal p {
  width: 515px;
  color: #888B8D;
}

#colorIntro .reveal .title {
  margin-bottom: 9px;
}

#colorIntro .reveal.one .text {
  margin-bottom: 9px;
}

#colorIntro .reveal.two .text {
  margin-bottom: 9px;
}

#colorIntro .reveal.three .text {
  margin-bottom: 9px;
}

#colorIntro .reveal.four .text {
  margin-bottom: 9px;
}

#colorIntro .reveal.five .text {
  margin-bottom: 30px;
}

#colorIntro .reveal.six .text {
  margin-bottom: 30px;
}

#colorIntro .reveal .title {
  color: #009CDE;
  margin-bottom: 5px;
  letter-spacing: 1.4px;
}

#colorIntro .reveal img {
  width: 545px;
  height: 289px;
}

#colorIntro .reveal.one img {
  margin-left: -15px;
}

#colorIntro .reveal.two img {
  margin-left: -15px;
}

#colorIntro .reveal.three img {
  margin-left: -15px;
}

#colorIntro .reveal.four img {
  margin-left: -15px;
}

#colorIntro .reveal.five img {
  margin-left: -15px;
}

#colorIntro .reveal.six img {
  margin-left: -15px;
}

/**/

/*usingColors*/

#usingColors {
  background-color: white;
}

#usingColors .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#usingColors .fac {
  width: 239px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#usingColors .fac p {
  margin-bottom: 10px;
}

#usingColors .image {
  width: 513px;
  height: 419px;
  position: absolute;
  top: 151px;
  right: 80px;
}

#usingColors .click {
  width: 87px;
  height: 25px;
  position: absolute;
  top: 120px;
  right: 81px;
  cursor: pointer;
}

#usingColors .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  z-index: 3;
}

#usingColors .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 135px;
}

#usingColors .popup .blocker {
  width: 730px;
  height: 570px;
  margin-top: 10px;
  background-color: white;
}

#usingColors .popup .big {
  width: 686px;
  height: 560px;
  position: absolute;
  top: 17px;
  left: 155px;
}

/**/

/*colorQuiz*/

#colorQuiz {
  background-color: white;
}

#colorQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#colorQuiz .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#colorQuiz .quiz {
  width: 828px;
  height: 362px;
  position: absolute;
  top: 200px;
  left: 84px;
  display: flex;
  justify-content: space-between;
}

#colorQuiz .quiz .choice {
  cursor: pointer;
  position: relative;
}

#colorQuiz .choice.selected {
  opacity: 1;
}

#colorQuiz .choice.notSelected:after {
  content: '';
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}

#colorQuiz .quiz .choice.one {
  width: 222px;
  height: 272px;
  background: url("../img/23_color1.png") center / contain no-repeat;
}

#colorQuiz .quiz .choice.two {
  width: 203px;
  height: 272px;
  background: url("../img/23_color2.png") center / contain no-repeat;
}

#colorQuiz .quiz .choice.three {
  width: 211px;
  height: 272px;
  background: url("../img/23_color3.png") center / contain no-repeat;
}

#colorQuiz .quiz .choice.four {
  width: 176px;
  height: 272px;
  background: url("../img/23_color4.png") center / contain no-repeat;
}

#colorQuiz .quiz .choice.one.selected {
  background-image: url("../img/23_color1_selected.png");
}

#colorQuiz .quiz .choice.two.selected {
  background-image: url("../img/23_color2_selected.png");
}

#colorQuiz .quiz .choice.three.selected {
  background-image: url("../img/23_color3_selected.png");
}

#colorQuiz .quiz .choice.four.selected {
  background-image: url("../img/23_color4_selected.png");
}

#colorQuiz .quiz .submit {
  width: 156px;
  position: absolute;
  bottom: 0;
  right: 3px;
  border-color: #002A3A;
  color: #002A3A;
}

#colorQuiz .click {
  width: 87px;
  height: 25px;
  position: absolute;
  left: 3px;
  bottom: calc(0% - 30px);
  cursor: pointer;
}

#colorQuiz .one .click {
  left: 4px;
}

#colorQuiz .two .click,
#colorQuiz .three .click {
  left: 0px;
}


#colorQuiz .response {
  position: absolute;
  display: flex;
  top: calc(100% + 0px);
  left: 0;
  width: calc(100% + 10px);
  padding-right: 20px;
  padding-top: 5px;
  box-sizing: border-box;
  background-color: #FFF;
}

#colorQuiz .one .response {
  left: 4px;
}

#colorQuiz .response img {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  margin-right: 8px;
  flex-shrink: 0;
}

#colorQuiz .response.one p,
#colorQuiz .response.three p,
#colorQuiz .response.four p {
  color: #E4002B;
}

#colorQuiz .response.two p {
  color: #00B140;
}

#colorQuiz .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#colorQuiz .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
}


/**/

/*colorEnd*/

#colorEnd {
  background-color: white;
}

#colorEnd .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#colorEnd .image {
  width: 324px;
  height: 218px;
  position: absolute;
  top: 166px;
  left: 80px;
}

#colorEnd .text {
  width: 324px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#colorEnd .text p {
  color: #009CDE;
  margin-bottom: 12px;
}

#colorEnd .text .line {
  width: 60px;
  height: 1px;
  background-color: #002A3A;
  margin-bottom: 14px;
}

/**/

/*imageryIntro*/

#imageryIntro {
  background-color: white;
}

#imageryIntro .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#imageryIntro .fac {
  width: 325px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#imageryIntro .reveal.image {
  width: 408px;
  height: 235px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#imageryIntro .clicks {
  width: 72px;
  height: 8px;
  position: absolute;
  top: 413px;
  right: 252px;
  display: flex;
  justify-content: space-between;
}

#imageryIntro .clicks .click.clicked:not(.active) {
  width: 8px;
  height: 8px;
  border-radius: 20px;
  background-color: #888B8D;
  border-color: #888b8d;
  cursor: pointer;
  opacity: .4;
}
#imageryIntro .clicks .click {
  width: 8px;
  height: 8px;
  border-radius: 20px;
  border: #009CDE solid 2px;
  background-color: #FFF;
  cursor: pointer;
  opacity: .4;
}

#imageryIntro .clicks .click.active {
  background-color: #009CDE;
  opacity: 1;
}

#imageryIntro .reveal.text {
  width: 385px;
  position: absolute;
  top: 433px;
  left: 504px;
  color: #888B8D;
}

#imageryIntro .reveal.text p {
  color: #009CDE;
  margin-bottom: 5px;
  letter-spacing: 1.4px;
}

#imageryIntro .reveal.text ul {
  margin-left: 18px;
}

#imageryIntro .reveal.text ul li {
  margin-bottom: 5px;
}

/**/

/*imageryQuiz*/

#imageryQuiz {
  background-color: white;
}

#imageryQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#imageryQuiz .fac {
  width: 395px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#imageryQuiz .choices {
  width: 828px;
  height: 200px;
  position: absolute;
  top: 259px;
  left: 84px;
  display: flex;
  justify-content: space-between;
}

#imageryQuiz .choices .choice {
  width: 268px;
  height: 200px;
  cursor: pointer;
  position: relative;
}

#imageryQuiz .choices .choice.one {
  background: url("../img/17_quiz1.png") center / contain no-repeat;
}

#imageryQuiz .choices .choice.two {
  background: url("../img/17_quiz2.png") center / contain no-repeat;
}

#imageryQuiz .choices .choice.three {
  background: url("../img/17_quiz3.png") center / contain no-repeat;
}

#imageryQuiz .choices .choice.one.selected {
  background-image: url("../img/17_quiz1_selected.png");
}

#imageryQuiz .choices .choice.two.selected {
  background-image: url("../img/17_quiz2_selected.png");
}

#imageryQuiz .choices .choice.three.selected {
  background-image: url("../img/17_quiz3_selected.png");
}

#imageryQuiz .choice.selected {
  opacity: 1;
}

#imageryQuiz .choice.notSelected {
  opacity: .5;
}

#imageryQuiz .submit {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  top: 495px;
  right: 84px;
}

#imageryQuiz .responses {
  width: 828px;
  position: absolute;
  top: 468px;
  left: 84px;
  display: flex;
  justify-content: space-between;
}

#imageryQuiz .responses .response {
  display: flex;
  justify-content: space-between;
}

#imageryQuiz .responses .response {
  width: 268px;
}

#imageryQuiz .response img {
  width: 25px;
  height: 25px;
  margin-right: 12px;
  flex-shrink: 0;
}

#imageryQuiz .response.one {
  color: #00B140;
}

#imageryQuiz .response.two,
#imageryQuiz .response.three {
  color: #E4002B;
}

/**/

/*imageryIconography*/

#imageryIconography {
  background-color: white;
}

#imageryIconography .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#imageryIconography .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#imageryIconography .button {
  width: 240px;
  position: absolute;
  top: 217px;
  border-color: #002A3A;
  color: #002A3A;
}

#imageryIconography .button.clicked {
  background-color: #5BC2E7;
}

#imageryIconography .button.one {
  left: 84px;
}

#imageryIconography .button.two {
  left: 505px;
}

#imageryIconography .click {
  width: 87px;
  height: 25px;
  position: absolute;
  bottom: 76px;
  cursor: pointer;
}

#imageryIconography .click.one {
  left: 84px;
}

#imageryIconography .click.two {
  left: 505px;
}

#imageryIconography .reveal {
  position: absolute;
  top: 261px;
}

#imageryIconography .reveal.one {
  left: 84px;
}

#imageryIconography .reveal.two {
  left: 505px;
}

#imageryIconography .reveal p {
  width: 340px;
  color: #888B8D;
}

#imageryIconography .reveal.one p {
  margin-bottom: 7px;
}

#imageryIconography .reveal.two p {
  margin-bottom: 28px;
}

#imageryIconography .reveal.one img {
  width: 176px;
  height: 223px;
  margin-left: -7px;
}

#imageryIconography .reveal.two img {
  width: 305px;
  height: 224px;
  margin-left: -7px;
}

/**/

/*imageryEnd*/

#imageryEnd {
  background-color: white;
}

#imageryEnd .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#imageryEnd .imagery {
  width: 443px;
  height: 300px;
  position: absolute;
  top: 166px;
  left: 79px;
}

#imageryEnd .text {
  width: 324px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#imageryEnd .text p {
  color: #009CDE;
  margin-bottom: 12px;
}

#imageryEnd .text .line {
  width: 60px;
  height: 1px;
  background-color: #002A3A;
  margin-bottom: 14px;
}

/**/

/*brandVoiceIntro*/

#brandVoiceIntro {
  background-image: url(../img/29_brandvoice_bkgd.jpg);
  background-size: 100%;
}

#brandVoiceIntro .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#brandVoiceIntro .fac {
  width: 345px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#brandVoiceIntro .click {
  width: 240px;
  border-color: white;
  position: absolute;
  left: 84px;
}

#brandVoiceIntro .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#brandVoiceIntro .click.one {
  top: 280px;
}

#brandVoiceIntro .click.two {
  top: 398px;
}

#brandVoiceIntro .reveal {
  width: 240px;
  position: absolute;
  left: 84px;
}

#brandVoiceIntro .reveal.one {
  top: 326px;
}

#brandVoiceIntro .reveal.two {
  top: 444px;
}

/**/

/*whatIsBrandVoice*/

#whatIsBrandVoice {
  background-image: url(../img/30_brandvoice_bkgd.jpg);
  background-size: 100%;
}

#whatIsBrandVoice .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
}

#whatIsBrandVoice .fac {
  width: 347px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#whatIsBrandVoice .click {
  width: 200px;
  border-color: white;
  position: absolute;
  top: 280px;
}

#whatIsBrandVoice .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#whatIsBrandVoice .click.one {
  left: 84px;
}

#whatIsBrandVoice .click.two {
  left: 324px;
}

#whatIsBrandVoice .reveal {
  width: 200px;
  position: absolute;
  top: 325px;
}

#whatIsBrandVoice .reveal.one {
  left: 84px;
}

#whatIsBrandVoice .reveal.two {
  left: 324px;
}

/**/

/*brandVoiceClick*/

#brandVoiceClick {
  background-color: white;
}

#brandVoiceClick .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#brandVoiceClick .fac {
  width: 325px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
  z-index: 1;
}

/*#brandVoiceClick .image {
  width: 515px;
  height: 259px;
  position: absolute;
  top: 238px;
  right: 84px;
}*/

#brandVoiceClick .click {
  width: 240px;
  position: absolute;
  border-color: #002A3A;
  color: #002A3A;
  left: 84px;
}

#brandVoiceClick .click.active {
  background-color: rgba(0,156,222,.4);
}

#brandVoiceClick .click.clicked:not(.active) {
    opacity: .4;
}

#brandVoiceClick .click.one {
  top: 238px;
}

#brandVoiceClick .click.two {
  top: 286px;
}

#brandVoiceClick .click.three {
  top: 334px;
}

#brandVoiceClick .click.four {
  top: 382px;
}

#brandVoiceClick .click.five {
  top: 430px;
}

#brandVoiceClick .reveal {
  width: 525px;
  height: 470px;
  background-color: white;
  position: absolute;
  top: 166px;
  right: 0;
  box-sizing: border-box;
  padding: 18px 0 0 16px;
}

#brandVoiceClick .reveal img {
  margin-bottom: 10px;
}

#brandVoiceClick .reveal.one img {
  width: 430px;
  height: 186px;
}

#brandVoiceClick .reveal.two img {
  width: 430px;
  height: 187px;
}

#brandVoiceClick .reveal.three img {
  width: 430px;
  height: 189px;
}

#brandVoiceClick .reveal.four img {
  width: 430px;
  height: 188px;
}

#brandVoiceClick .reveal.five img {
  width: 430px;
  height: 190px;
}

#brandVoiceClick .reveal p {
  width: 430px;
  color: #009CDE;
}

#brandVoiceClick .reveal .title.blue {
  color: #002A3A;
}

#brandVoiceClick .reveal .title.gray {
  color: #888B8D;
  margin-bottom: 5px;
}

/**/

/*brandVoiceStyle*/

#brandVoiceStyle {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#brandVoiceStyle .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#brandVoiceStyle .fac {
  width: 490px;
  position: absolute;
  top: 166px;
  left: 84px;
}

#brandVoiceStyle .click {
  width: 200px;
  border-color: white;
  position: absolute;
  top: 258px;
}

#brandVoiceStyle .click.clicked {
  background-color: rgba(255,255,255,.4);
}

#brandVoiceStyle .click.one {
  left: 84px;
}

#brandVoiceStyle .click.two {
  left: 324px;
}

#brandVoiceStyle .reveal {
  width: 200px;
  position: absolute;
  top: 303px;
  margin-left: 18px;
}

#brandVoiceStyle .reveal.one {
  left: 84px;
}

#brandVoiceStyle .reveal.two {
  left: 324px;
}

#brandVoiceStyle .reveal li {
  margin-bottom: 5px;
}

/**/

/*brandVoiceQuiz*/

#brandVoiceQuiz {
  background-color: white;
}

#brandVoiceQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#brandVoiceQuiz .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#brandVoiceQuiz .choices {
  width: 828px;
  height: 297px;
  position: absolute;
  top: 230px;
  left: 84px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

#brandVoiceQuiz .choices .choice.one {
  width: 262px;
  height: 213px;
  cursor: pointer;
  position: relative;
  background: url("../img/32_review1.png") center / contain no-repeat;
}

#brandVoiceQuiz .choices .choice.two {
  width: 214px;
  height: 297px;
  cursor: pointer;
  position: relative;
  background: url("../img/32_review2.png") center / contain no-repeat;
}

#brandVoiceQuiz .choices .choice.three {
  width: 342px;
  height: 214px;
  cursor: pointer;
  position: relative;
  background: url("../img/32_review3.png") center / contain no-repeat;
}

#brandVoiceQuiz .choices .choice.one.selected {
  background-image: url("../img/32_review1_selected.png");
}

#brandVoiceQuiz .choices .choice.two.selected {
  background-image: url("../img/32_review2_selected.png");
}

#brandVoiceQuiz .choices .choice.three.selected {
  background-image: url("../img/32_review3_selected.png");
}

#brandVoiceQuiz .choice.selected {
  opacity: 1;
}

#brandVoiceQuiz .choice.notSelected:after {
  content: '';
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
  position: absolute;
}

#brandVoiceQuiz .submit {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  top: 530px;
  left: calc(50% + 250px);
}

#brandVoiceQuiz .response {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  width: calc(100% + 10px);
  padding-right: 30px;
  display: flex;
  background-color: #fff;
  min-height: 35px;
  line-height: 16px;
  box-sizing: border-box;
}

#brandVoiceQuiz .response img {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    margin-right: 5px;
}

#brandVoiceQuiz .response img {
  width: 25px;
  height: 25px;
  margin-right: 12px;
  flex-shrink: 0;
}

#brandVoiceQuiz .response.three {
  color: #00B140;
}

#brandVoiceQuiz .response.two,
#brandVoiceQuiz .response.one {
  color: #E4002B;
}

#brandVoiceQuiz .response.one {
  margin-left: 3px;
}

#brandVoiceQuiz .response.two,
#brandVoiceQuiz .response.three {
  margin-left: 5px;
}

#brandVoiceQuiz .click {
  width: 87px;
  height: 25px;
  position: absolute;
  right: 7px;
  top: calc(0% - 30px);
  cursor: pointer;
}

#brandVoiceQuiz .zoomedIn.three > div {
    width: 916px;
    margin-top: 20px;
    margin-left: 20px;
}

/**/

/*brandVoiceEnd*/

#brandVoiceEnd {
  background-color: white;
}

#brandVoiceEnd .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#brandVoiceEnd .imagery {
  width: 447px;
  height: 361px;
  position: absolute;
  top: 166px;
  left: 79px;
}

#brandVoiceEnd .text {
  width: 324px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#brandVoiceEnd .text p {
  color: #009CDE;
  margin-bottom: 12px;
}

#brandVoiceEnd .text .line {
  width: 60px;
  height: 1px;
  background-color: #002A3A;
  margin-bottom: 14px;
}

/**/

/*resourcesPage*/

#resourcesPage {
  background-color: white;
}

#resourcesPage .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#resourcesPage .fac {
  width: 350px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#resourcesPage .fac > *{
  margin-bottom: 15px;
}

#resourcesPage .image {
  width: 441px;
  height: 352px;
  position: absolute;
  top: 168px;
  right: 84px;
}

/**/

/*bringingItTogether*/

#bringingItTogether {
  background-image: url(../img/gradient1.png);
  background-size: 100%;
}

#bringingItTogether .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#bringingItTogether .fac {
  width: 364px;
  position: absolute;
  top: 166px;
  left: 84px;
}

/**/

/*buildStep1*/

#buildStep1 {
  background-color: white;
}

#buildStep1 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep1 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep1 .fac {
  width: 400px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep1 .drag {
  width: 293px;
  height: 34px;
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep1 .drag.hidden {
  visibility: hidden;
}

#buildStep1 .drag.dropped {
  z-index: 1 !important;
}

#buildStep1 .drag.one {
  top: 259px;
}

#buildStep1 .drag.two {
  top: 305px;
}

#buildStep1 .drag.three {
  top: 351px;
}

#buildStep1 .drag.four {
  top: 397px;
}

#buildStep1 .blocker {
  width: 358px;
  height: 126px;
  position: absolute;
  top: 281px;
  left: 71px;
}

#buildStep1 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep1 .dropArea .step1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep1 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep1 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep1 .submit,
#buildStep1 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep1 .submit {
  right: 84px;
}

#buildStep1 .reset {
  right: 252px;
}

/**/

/*buildStep2*/

#buildStep2 {
  background-color: white;
}

#buildStep2 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep2 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep2 .fac {
  width: 400px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep2 .drag {
  cursor: pointer;
  position: absolute;
}

#buildStep2 .drag.one {
  width: 95px;
  height: 37px;
  top: 259px;
  left: 84px;
}

#buildStep2 .drag.two {
  width: 95px;
  height: 37px;
  top: 259px;
  left: 215px;
}

#buildStep2 .drag.three {
  width: 37px;
  height: 37px;
  top: 259px;
  left: 345px;
}

#buildStep2 .drag.four {
  width: 95px;
  height: 37px;
  top: 332px;
  left: 84px;
}

#buildStep2 .drag.five {
  width: 95px;
  height: 37px;
  top: 332px;
  left: 215px;
}

#buildStep2 .drag.six {
  width: 37px;
  height: 37px;
  top: 332px;
  left: 345px;
}

#buildStep2 .blocker {
  width: 358px;
  height: 288px;
  position: absolute;
  top: 220px;
  left: 71px;
}

#buildStep2 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep2 .dropArea .step1,
#buildStep2 .dropArea .step2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep2 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep2 .dropArea .drop {
  width: 95px;
  height: 33px;
  position: absolute;
  top: 89px;
  border: 1px dashed black;
  z-index: 3;
}

#buildStep2 .dropArea .drop.one {
  left: 12px;
}

#buildStep2 .dropArea .drop.two {
  left: 111px;
}

#buildStep2 .dropArea .drop.three {
  right: 17px;
}

#buildStep2 .submit,
#buildStep2 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep2 .submit {
  right: 84px;
}

#buildStep2 .reset {
  right: 252px;
}

/**/

/*buildStep3*/

#buildStep3 {
  background-color: white;
}

#buildStep3 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep3 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep3 .fac {
  width: 470px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep3 .drag {
  width: 163px;
  height: 38px;
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep3 .drag.hidden {
  visibility: hidden;
}

#buildStep3 .drag.one {
  top: 259px;
}

#buildStep3 .drag.two {
  top: 305px;
}

#buildStep3 .drag.three {
  top: 351px;
}

#buildStep3 .drag.four {
  top: 397px;
}

#buildStep3 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep3 .dropArea .step1,
#buildStep3 .dropArea .step2,
#buildStep3 .dropArea .step3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep3 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep3 .dropArea .drop {
  width: 95px;
  height: 33px;
  position: absolute;
  top: 89px;
  border: 1px dashed black;
  z-index: 3;
}

#buildStep3 .dropArea .drop.one {
  left: 12px;
}

#buildStep3 .dropArea .drop.two {
  left: 111px;
}

#buildStep3 .dropArea .drop.three {
  right: 17px;
}

#buildStep3 .whiteBkg {
  width: 420px;
  height: 433px;
  background-color: white;
  position: absolute;
  top: 80px;
  right: 35px;
}

#buildStep3 .submit,
#buildStep3 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep3 .submit {
  right: 84px;
}

#buildStep3 .reset {
  right: 252px;
}

/**/

/*buildStep4*/

#buildStep4 {
  background-color: white;
}

#buildStep4 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep4 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep4 .fac {
  width: 440px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep4 .drag {
  width: 163px;
  height: 108px;
  position: absolute;
  cursor: pointer;
}

#buildStep4 .drag.hidden {
  visibility: hidden;
}

#buildStep4 .drag.one {
  top: 259px;
  left: 84px;
}

#buildStep4 .drag.two {
  top: 259px;
  left: 259px;
}

#buildStep4 .drag.three {
  top: 379px;
  left: 84px;
}

#buildStep4 .drag.four {
  top: 379px;
  left: 259px;
}

#buildStep4 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep4 .dropArea .step1,
#buildStep4 .dropArea .step2,
#buildStep4 .dropArea .step3,
#buildStep4 .dropArea .step4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep4 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep4 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep4 .submit,
#buildStep4 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep4 .submit {
  right: 84px;
}

#buildStep4 .reset {
  right: 252px;
}

/**/

/*buildStep5*/

#buildStep5 {
  background-color: white;
}

#buildStep5 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep5 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep5 .fac {
  width: 440px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep5 .dragTitle {
  position: absolute;
  top: 235px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep5 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep5 .drag.hidden {
  visibility: hidden;
}

#buildStep5 .drag.one {
  width: 355px;
  height: 31px;
  top: 262px;
}

#buildStep5 .drag.two {
  width: 334px;
  height: 33px;
  top: 329px;
}

#buildStep5 .drag.three {
  width: 251px;
  height: 31px;
  top: 398px;
}

#buildStep5 .drag.four {
  width: 232px;
  height: 31px;
  top: 465px;
}

#buildStep5 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep5 .dropArea .step1,
#buildStep5 .dropArea .step2,
#buildStep5 .dropArea .step3,
#buildStep5 .dropArea .step4,
#buildStep5 .dropArea .step5 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep5 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep5 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep5 .submit,
#buildStep5 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep5 .submit {
  right: 84px;
}

#buildStep5 .reset {
  right: 252px;
}

/**/

/*buildStep6*/

#buildStep6 {
  background-color: white;
}

#buildStep6 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep6 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep6 .fac {
  width: 440px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep6 .dragTitle {
  position: absolute;
  top: 235px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep6 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep6 .drag.hidden {
  visibility: hidden;
}

#buildStep6 .drag.one {
  width: 198px;
  height: 31px;
  top: 262px;
}

#buildStep6 .drag.two {
  width: 204px;
  height: 31px;
  top: 322px;
}

#buildStep6 .drag.three {
  width: 185px;
  height: 28px;
  top: 391px;
}

#buildStep6 .drag.four {
  width: 199px;
  height: 29px;
  top: 458px;
}

#buildStep6 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep6 .dropArea .step1,
#buildStep6 .dropArea .step2,
#buildStep6 .dropArea .step3,
#buildStep6 .dropArea .step4,
#buildStep6 .dropArea .step5,
#buildStep6 .dropArea .step6 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep6 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep6 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep6 .submit,
#buildStep6 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep6 .submit {
  right: 84px;
}

#buildStep6 .reset {
  right: 252px;
}

/**/

/*buildStep7*/

#buildStep7 {
  background-color: white;
}

#buildStep7 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep7 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep7 .fac {
  width: 440px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep7 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep7 .drag.hidden {
  visibility: hidden;
}

#buildStep7 .drag.one {
  width: 295px;
  height: 33px;
  top: 235px;
}

#buildStep7 .drag.two {
  width: 305px;
  height: 33px;
  top: 304px;
}

#buildStep7 .drag.three {
  width: 277px;
  height: 33px;
  top: 373px;
}

#buildStep7 .drag.four {
  width: 279px;
  height: 33px;
  top: 442px;
}

#buildStep7 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep7 .dropArea .step1,
#buildStep7 .dropArea .step2,
#buildStep7 .dropArea .step3,
#buildStep7 .dropArea .step4,
#buildStep7 .dropArea .step5,
#buildStep7 .dropArea .step6,
#buildStep7 .dropArea .step7 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep7 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep7 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep7 .submit,
#buildStep7 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep7 .submit {
  right: 84px;
}

#buildStep7 .reset {
  right: 252px;
}

/**/

/*buildStep8*/

#buildStep8 {
  background-color: white;
}

#buildStep8 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#buildStep8 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#buildStep8 .fac {
  width: 475px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#buildStep8 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#buildStep8 .drag.hidden {
  visibility: hidden;
}

#buildStep8 .drag.one {
  width: 372px;
  height: 38px;
  top: 235px;
}

#buildStep8 .drag.two {
  width: 447px;
  height: 63px;
  top: 309px;
}

#buildStep8 .drag.three {
  width: 450px;
  height: 38px;
  top: 408px;
}

#buildStep8 .drag.four {
  width: 455px;
  height: 60px;
  top: 482px;
}

#buildStep8 .dropArea {
  width: 324px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#buildStep8 .dropArea .step1,
#buildStep8 .dropArea .step2,
#buildStep8 .dropArea .step3,
#buildStep8 .dropArea .step4,
#buildStep8 .dropArea .step6,
#buildStep8 .dropArea .step7,
#buildStep8 .dropArea .step8 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#buildStep8 .dropArea img {
  width: 324px;
  height: 433px;
}

#buildStep8 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#buildStep8 .submit,
#buildStep8 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#buildStep8 .submit {
  right: 84px;
}

#buildStep8 .reset {
  right: 252px;
}

/**/

/*emailStepsReview*/

#emailStepsReview {
  background-color: white;
}

#emailStepsReview .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#emailStepsReview .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#emailStepsReview .fac {
  width: 270px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#emailStepsReview .button {
  width: 150px;
  position: absolute;
  left: 84px;
  color: #004F71;
  border-color: #004F71;
}

#emailStepsReview .button.one {
  top: 259px;
}

#emailStepsReview .button.two {
  top: 334px;
}

#emailStepsReview .dropArea img {
  width: 324px;
  height: 433px;
}

#emailStepsReview .example {
  width: 251px;
  height: 335px;
  position: absolute;
  top: 166px;
  right: 84px;
}

#emailStepsReview .example.correct {
  right: 84px;
}

#emailStepsReview .example.user {
  right: 347px;
}

#emailStepsReview .example .miniLabel {
  font-size: 10px;
  letter-spacing: 1px;
  color: #888B8D;
  position: absolute;
  bottom: -18px;
  left: 0;
}

#emailStepsReview .example img {
  width: 251px;
  height: 335px;
}

#emailStepsReview .user.example .step1,
#emailStepsReview .user.example .step2,
#emailStepsReview .user.example .step3,
#emailStepsReview .user.example .step4,
#emailStepsReview .user.example .step8 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#emailStepsReview .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#emailStepsReview .popup .example.user {
  top: 25px;
  right: 29px;
}

#emailStepsReview .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 2px;
  right: 2px;
}

#emailStepsReview .feedback {
  width: 805px;
  max-height: 550px;
  min-height: 400px;
  background-color: white;
  box-sizing: border-box;
  padding: 24px;
  position: relative;
}

#emailStepsReview .feedback .container {
  width: 660px;
  display: flex;
  flex-wrap: wrap;
}

#emailStepsReview .feedback .step {
  width: 410px;
  margin-bottom: 17px;
}

#emailStepsReview .feedback .step:last-child {
  margin-bottom: 0;
}

#emailStepsReview .feedback .step .bubble,
#emailStepsReview .feedback .step .title {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  margin-bottom: 5px;
}

#emailStepsReview .feedback .step .bubble {
  width: 19px;
  height: 19px;
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 19px;
}

#emailStepsReview .feedback .step .title {
  color: #009CDE;
}

#emailStepsReview .feedback .step .text {
  color: #E4002B;
}

#emailStepsReview .user .bubble.incorrect,
#emailStepsReview .feedback .step .bubble.incorrect {
  background-color: #E4002B;
}

#emailStepsReview .user .bubble.correct,
#emailStepsReview .feedback .step .bubble.correct {
  background-color: #00B140;
}

#emailStepsReview .feedback .step .text.incorrect {
  color: #E4002B;
}

#emailStepsReview .feedback .step .text.correct {
  color: #00B140;
}

#emailStepsReview .bubble {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 10px;
  line-height: 15px;
}

#emailStepsReview .example.user .bubble {
  position: absolute;
  z-index: 2;
}

#emailStepsReview .example.user .bubble.one {
  top: 75px;
  left: -6px;
}

#emailStepsReview .example.user .bubble.two {
  top: 75px;
  left: -24px;
}

#emailStepsReview .example.user .bubble.three {
  top: 75px;
  left: 123px;
}

#emailStepsReview .example.user .bubble.four {
  top: 75px;
  right: 0px;
}

#emailStepsReview .example.user .bubble.five {
  top: 140px;
  left: 123px;
}

#emailStepsReview .example.user .bubble.six {
  top: 100px;
  left: -6px;
}

#emailStepsReview .example.user .bubble.seven {
  top: 237px;
  left: -6px;
}

#emailStepsReview .example.user .bubble.eight {
  top: 100px;
  left: -24px;
}

#emailStepsReview .example.user .bubble.nine {
  top: 197px;
  left: -6px;
}

/**/

/*printStep1*/

#printStep1 {
  background-color: white;
}

#printStep1 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep1 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep1 .fac {
  width: 440px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep1 .fac p{
  margin-bottom: 10px;
}

#printStep1 .drag {
  width: 213px;
  height: 75px;
  position: absolute;
  cursor: pointer;
}

#printStep1 .drag.hidden {
  visibility: hidden;
}

#printStep1 .drag.one {
  top: 290px;
  left: 84px;
}

#printStep1 .drag.two {
  top: 290px;
  left: 309px;
}

#printStep1 .drag.three {
  top: 377px;
  left: 84px;
}

#printStep1 .drag.four {
  top: 377px;
  left: 309px;
}

#printStep1 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep1 .dropArea .step1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep1 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep1 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#printStep1 .submit,
#printStep1 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep1 .submit {
  right: 84px;
}

#printStep1 .reset {
  right: 252px;
}

/**/

/*printStep2*/

#printStep2 {
  background-color: white;
}

#printStep2 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep2 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep2 .fac {
  width: 375px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep2 .drag {
  width: 163px;
  height: 109px;
  position: absolute;
  cursor: pointer;
}

#printStep2 .drag.hidden {
  visibility: hidden;
}

#printStep2 .drag.one {
  top: 238px;
  left: 84px;
}

#printStep2 .drag.two {
  top: 238px;
  left: 259px;
}

#printStep2 .drag.three {
  top: 359px;
  left: 84px;
}

#printStep2 .drag.four {
  top: 359px;
  left: 259px;
}

#printStep2 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep2 .dropArea .step1,
#printStep2 .dropArea .step2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep2 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep2 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#printStep2 .submit,
#printStep2 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep2 .submit {
  right: 84px;
}

#printStep2 .reset {
  right: 252px;
}

/**/

/*printStep3*/

#printStep3 {
  background-color: white;
}

#printStep3 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep3 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep3 .fac {
  width: 375px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep3 .drag {
  position: absolute;
  cursor: pointer;
}

#printStep3 .drag.hidden {
  visibility: hidden;
}

#printStep3 .drag.one {
  width: 39px;
  height: 44px;
  top: 251px;
  left: 84px;
}

#printStep3 .drag.two {
  width: 39px;
  height: 44px;
  top: 251px;
  left: 159px;
}

#printStep3 .drag.three {
  width: 99px;
  height: 41px;
  top: 253px;
  left: 234px;
}

#printStep3 .drag.four {
  width: 68px;
  height: 68px;
  top: 238px;
  left: 369px;
}

#printStep3 .drag.five {
  width: 181px;
  height: 49px;
  top: 342px;
  left: 84px;
}

#printStep3 .drag.six {
  width: 118px;
  height: 30px;
  top: 353px;
  left: 301px;
}

#printStep3 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep3 .dropArea .step1,
#printStep3 .dropArea .step2,
#printStep3 .dropArea .step3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep3 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep3 .dropArea .drop {
  width: 109px;
  height: 50px;
  position: absolute;
  border: 1px dashed;
  z-index: 2;
}

#printStep3 .dropArea .drop.one {
  top: 1px;
  left: 1px;
  border-color: black;
}

#printStep3 .dropArea .drop.two {
  top: 1px;
  left: 114px;
  border-color: black;
}

#printStep3 .dropArea .drop.three {
  top: 1px;
  right: 1px;
  border-color: black;
}

#printStep3 .dropArea .drop.four {
  bottom: 19px;
  left: 1px;
  border-color: white;
}

#printStep3 .dropArea .drop.five {
  bottom: 19px;
  left: 114px;
  border-color: white;
}

#printStep3 .dropArea .drop.six {
  bottom: 19px;
  right: 1px;
  border-color: white;
}

#printStep3 .submit,
#printStep3 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep3 .submit {
  right: 84px;
}

#printStep3 .reset {
  right: 252px;
}

/**/

/*printStep4*/

#printStep4 {
  background-color: white;
}

#printStep4 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep4 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep4 .fac {
  width: 390px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep4 .drag {
  width: 175px;
  height: 38px;
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#printStep4 .drag.hidden {
  visibility: hidden;
}

#printStep4 .drag.one {
  width: 110px;
  height: 21px;
  top: 280px;
}

#printStep4 .drag.two {
  width: 110px;
  height: 19px;
  top: 330px;
}

#printStep4 .drag.three {
  width: 110px;
  height: 20px;
  top: 380px;
}

#printStep4 .drag.four {
  width: 110px;
  height: 19px;
  top: 430px;
}

#printStep4 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep4 .dropArea .step1,
#printStep4 .dropArea .step2,
#printStep4 .dropArea .step3,
#printStep4 .dropArea .step4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep4 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep4 .dropArea .drop {
  width: 160px;
  height: 38px;
  position: absolute;
  border: 1px dashed;
  z-index: 2;
}

#printStep4 .dropArea .drop.one {
  top: 1px;
  left: 4px;
  border-color: black;
}

#printStep4 .dropArea .drop.two {
  top: 1px;
  right: 4px;
  border-color: black;
}

#printStep4 .dropArea .drop.three {
  bottom: 19px;
  left: 4px;
  border-color: white;
}

#printStep4 .dropArea .drop.four {
  bottom: 19px;
  right: 4px;
  border-color: white;
}

#printStep4 .submit,
#printStep4 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep4 .submit {
  right: 84px;
}

#printStep4 .reset {
  right: 252px;
}

/**/

/*printStep5*/

#printStep5 {
  background-color: white;
}

#printStep5 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep5 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep5 .fac {
  width: 415px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep5 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#printStep5 .drag.hidden {
  visibility: hidden;
}

#printStep5 .drag.one {
  width: 437px;
  height: 41px;
  top: 236px;
}

#printStep5 .drag.two {
  width: 187px;
  height: 44px;
  top: 313px;
}

#printStep5 .drag.three {
  width: 273px;
  height: 43px;
  top: 393px;
}

#printStep5 .drag.four {
  width: 287px;
  height: 43px;
  top: 472px;
}

#printStep5 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep5 .dropArea .step1,
#printStep5 .dropArea .step2,
#printStep5 .dropArea .step3,
#printStep5 .dropArea .step4,
#printStep5 .dropArea .step5 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep5 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep5 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#printStep5 .submit,
#printStep5 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep5 .submit {
  right: 84px;
}

#printStep5 .reset {
  right: 252px;
}

/**/

/*printStep6*/

#printStep6 {
  background-color: white;
}

#printStep6 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep6 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep6 .fac {
  width: 355px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep6 .drag {
  width: 182px;
  height: 58px;
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#printStep6 .drag.hidden {
  visibility: hidden;
}

#printStep6 .drag.one {
  top: 236px;
}

#printStep6 .drag.two {
  top: 306px;
}

#printStep6 .drag.three {
  top: 376px;
}

#printStep6 .drag.four {
  top: 446px;
}

#printStep6 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep6 .dropArea .step1,
#printStep6 .dropArea .step2,
#printStep6 .dropArea .step3,
#printStep6 .dropArea .step4,
#printStep6 .dropArea .step5,
#printStep6 .dropArea .step6 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep6 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep6 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#printStep6 .submit,
#printStep6 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep6 .submit {
  right: 84px;
}

#printStep6 .reset {
  right: 252px;
}

/**/

/*printStep7*/

#printStep7 {
  background-color: white;
}

#printStep7 .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStep7 .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStep7 .fac {
  width: 395px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStep7 .drag {
  position: absolute;
  left: 84px;
  cursor: pointer;
}

#printStep7 .drag.hidden {
  visibility: hidden;
}

#printStep7 .drag.one {
  width: 465px;
  height: 68px;
  top: 236px;
}

#printStep7 .drag.two {
  width: 451px;
  height: 69px;
  top: 324px;
}

#printStep7 .drag.three {
  width: 462px;
  height: 84px;
  top: 410px;
}

#printStep7 .drag.four {
  width: 465px;
  height: 80px;
  top: 498px;
}

#printStep7 .dropArea {
  width: 339px;
  position: absolute;
  top: 80px;
  right: 84px;
}

#printStep7 .dropArea .step1,
#printStep7 .dropArea .step2,
#printStep7 .dropArea .step3,
#printStep7 .dropArea .step4,
#printStep7 .dropArea .step6,
#printStep7 .dropArea .step7 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStep7 .dropArea img {
  width: 339px;
  height: 454px;
}

#printStep7 .dropArea .drop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#printStep7 .submit,
#printStep7 .reset {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 80px;
}

#printStep7 .submit {
  right: 84px;
}

#printStep7 .reset {
  right: 252px;
}

/**/

/*printStepsReview*/

#printStepsReview {
  background-color: white;
}

#printStepsReview .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#printStepsReview .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#printStepsReview .fac {
  width: 270px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#printStepsReview .button {
  width: 150px;
  position: absolute;
  left: 84px;
  color: #004F71;
  border-color: #004F71;
}

#printStepsReview .button.one {
  top: 259px;
}

#printStepsReview .button.two {
  top: 334px;
}

#printStepsReview .dropArea img {
  width: 339px;
  height: 454px;
}

#printStepsReview .example {
  width: 250px;
  position: absolute;
  top: 170px;
  right: 84px;
}

#printStepsReview .example.correct {
  right: 84px;
}

#printStepsReview .example.user {
  right: 346px;
}

#printStepsReview .example .miniLabel {
  font-size: 10px;
  letter-spacing: 1px;
  color: #888B8D;
  position: absolute;
  bottom: -18px;
  left: 0;
}

#printStepsReview .example img {
  width: 250px;
  height: 334px;
}

#printStepsReview .user.example .step1,
#printStepsReview .user.example .step2,
#printStepsReview .user.example .step3,
#printStepsReview .user.example .step4,
#printStepsReview .user.example .step7 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#printStepsReview .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#printStepsReview .popup .example.user {
  top: 25px;
  right: 29px;
}

#printStepsReview .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 2px;
  right: 2px;
}

#printStepsReview .feedback {
  width: 805px;
  max-height: 550px;
  min-height: 400px;
  background-color: white;
  box-sizing: border-box;
  padding: 24px;
  position: relative;
}

#printStepsReview .feedback .container {
  width: 660px;
  display: flex;
  flex-wrap: wrap;
}

#printStepsReview .feedback .step {
  width: 410px;
  margin-bottom: 17px;
}

#printStepsReview .feedback .step:last-child {
  margin-bottom: 0;
}

#printStepsReview .feedback .step .bubble,
#printStepsReview .feedback .step .title {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  margin-bottom: 5px;
}

#printStepsReview .feedback .step .bubble {
  width: 19px;
  height: 19px;
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 19px;
}

#printStepsReview .feedback .step .title {
  color: #009CDE;
}

#printStepsReview .feedback .step .text {
  color: #E4002B;
}

#printStepsReview .user .bubble.incorrect,
#printStepsReview .feedback .step .bubble.incorrect {
  background-color: #E4002B;
}

#printStepsReview .user .bubble.correct,
#printStepsReview .feedback .step .bubble.correct {
  background-color: #00B140;
}

#printStepsReview .feedback .step .text.incorrect {
  color: #E4002B;
}

#printStepsReview .feedback .step .text.correct {
  color: #00B140;
}

#printStepsReview .bubble {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  text-align: center;
  color: white;
  font-size: 10px;
  line-height: 15px;
}

#printStepsReview .example.user .bubble {
  position: absolute;
  z-index: 2;
}

#printStepsReview .example.user .bubble.one {
    top: 263px;
    left: 117px;
}

#printStepsReview .example.user .bubble.two {
  top: 100px;
  left: 117px;
}

#printStepsReview .example.user .bubble.three {
    top: 26px;
    left: -7px;
}

#printStepsReview .example.user .bubble.four {
    top: 26px;
    left: -25px;
}

#printStepsReview .example.user .bubble.five {
    top: 9px;
    right: 117px;
}

#printStepsReview .example.user .bubble.six {
    top: 195px;
    left: -7px;
}

#printStepsReview .example.user .bubble.seven {
  top: 215px;
  left: -7px;
}

#printStepsReview .example.user .bubble.eight {
  top: 235px;
  left: -7px;
}

/**/

/*coverSlideQuiz*/

#coverSlideQuiz {
  background-color: white;
}

#coverSlideQuiz .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#coverSlideQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#coverSlideQuiz .fac {
  width: 450px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#coverSlideQuiz .choices {
  width: 838px;
  position: absolute;
  top: 240px;
  left: 79px;
  display: flex;
  justify-content: space-between;
}

#coverSlideQuiz .choices .choice {
  cursor: pointer;
  position: relative;
}

#coverSlideQuiz .choice.selected {
  opacity: 1;
}

#coverSlideQuiz .choices .choice.notSelected:after {
  /*opacity: .5;*/
  content: '';
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
  position: absolute;

}

#coverSlideQuiz .choices .choice.one {
  width: 182px;
  height: 137px;
  background: url("../img/52_cover1.png") center / contain no-repeat;
}

#coverSlideQuiz .choices .choice.two {
  width: 233px;
  height: 137px;
  background: url("../img/52_cover2.png") center / contain no-repeat;
}

#coverSlideQuiz .choices .choice.three {
  width: 232px;
  height: 137px;
  background: url("../img/52_cover3.png") center / contain no-repeat;
}

#coverSlideQuiz .choices .choice.four {
  width: 233px;
  height: 137px;
  background: url("../img/52_cover4.png") center / contain no-repeat;
}

#coverSlideQuiz .choices .choice.one.selected {
  background-image: url("../img/52_cover1_selected.png");
}

#coverSlideQuiz .choices .choice.two.selected {
  background-image: url("../img/52_cover2_selected.png");
}

#coverSlideQuiz .choices .choice.three.selected {
  width: 232px;
  height: 137px;
  background-image: url("../img/52_cover3_selected.png");
}

#coverSlideQuiz .choices .choice.four.selected {
  width: 233px;
  height: 137px;
  background-image: url("../img/52_cover4_selected.png");
}

#coverSlideQuiz .choice .click {
  width: 87px;
  height: 25px;
  position: absolute;
  left: 5px;
  bottom: calc(0% - 30px);
  cursor: pointer;
}

#coverSlideQuiz .response {
  position: absolute;
  display: flex;
  top: calc(100% + 0px);
  left: 0;
  width: calc(100% + 10px);
  padding-right: 20px;
  padding-left: 5px;
  padding-top: 1px;
  box-sizing: border-box;
  background-color: #FFF;
}

#coverSlideQuiz .choice.three .response,
#coverSlideQuiz .choice.four .response {
  left: 2px;
}

#coverSlideQuiz .response img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 8px;
}

#coverSlideQuiz .response.one p,
#coverSlideQuiz .response.two p,
#coverSlideQuiz .response.four p {
  color: #E4002B;
}

#coverSlideQuiz .response.three p {
  color: #00B140;
}

#coverSlideQuiz .submit {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 98px;
  right: 84px;
}

#coverSlideQuiz .bottomText {
  width: 360px;
  color: #888B8D;
  position: absolute;
  bottom: 35px;
  left: 318px;
  text-align: center;
}

#coverSlideQuiz .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#coverSlideQuiz .popup.one .image {
  width: 608px;
  height: 456px;
}

#coverSlideQuiz .popup.two .image {
  width: 775px;
  height: 456px;
}

#coverSlideQuiz .popup.three .image {
  width: 772px;
  height: 459px;
}

#coverSlideQuiz .popup.four .image {
  width: 775px;
  height: 452px;
}

#coverSlideQuiz .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
}

#coverSlideQuiz .popup.one .close {
  top: 104px;
  right: 219px;
}

#coverSlideQuiz .popup.two .close {
  top: 104px;
  right: 137px;
}

#coverSlideQuiz .popup.three .close {
  top: 106px;
  right: 136px;
}

#coverSlideQuiz .popup.four .close {
  top: 105px;
  right: 136px;
}

/**/

/*contentSlideQuiz*/

#contentSlideQuiz {
  background-color: white;
}

#contentSlideQuiz .label {
  position: absolute;
  top: 95px;
  left: 84px;
  font-size: 14px;
  color: #004F71;
  letter-spacing: 1.4px;
}

#contentSlideQuiz .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#contentSlideQuiz .fac {
  width: 450px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#contentSlideQuiz .choices {
  width: 838px;
  position: absolute;
  top: 240px;
  left: 79px;
  display: flex;
  justify-content: space-between;
}

#contentSlideQuiz .choices .choice {
  cursor: pointer;
  position: relative;
}

#contentSlideQuiz .choice.selected {
  opacity: 1;
}

#contentSlideQuiz .choices .choice.notSelected:after {
  position: absolute;
  content: '';
  background-color: rgba(255,255,255,0.5);
  width: 100%;
  height: 100%;
}

#contentSlideQuiz .choices .choice.one {
  width: 235px;
  height: 139px;
  background: url("../img/53_content1.png") center / contain no-repeat;
}

#contentSlideQuiz .choices .choice.two {
  width: 180px;
  height: 139px;
  background: url("../img/53_content2.png") center / contain no-repeat;
}

#contentSlideQuiz .choices .choice.three {
  width: 233px;
  height: 139px;
  background: url("../img/53_content3.png") center / contain no-repeat;
}

#contentSlideQuiz .choices .choice.four {
  width: 234px;
  height: 138px;
  background: url("../img/53_content4.png") center / contain no-repeat;
}

#contentSlideQuiz .choices .choice.one.selected {
  background-image: url("../img/53_content1_selected.png");
}

#contentSlideQuiz .choices .choice.two.selected {
  background-image: url("../img/53_content2_selected.png");
}

#contentSlideQuiz .choices .choice.three.selected {
  background-image: url("../img/53_content3_selected.png");
}

#contentSlideQuiz .choices .choice.four.selected {
  background-image: url("../img/53_content4_selected.png");
}

#contentSlideQuiz .choice .click {
  width: 87px;
  height: 25px;
  position: absolute;
  left: 5px;
  bottom: calc(0% - 30px);
  cursor: pointer;
}

#contentSlideQuiz .response {
  position: absolute;
  display: flex;
  top: calc(100% + 0px);
  left: 0;
  width: calc(100% + 10px);
  padding-right: 20px;
  padding-left: 5px;
  padding-top: 1px;
  box-sizing: border-box;
  background-color: #FFF;
}

#contentSlideQuiz .response img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-right: 8px;
}

#contentSlideQuiz .response.one p,
#contentSlideQuiz .response.two p,
#contentSlideQuiz .response.four p {
  color: #E4002B;
}

#contentSlideQuiz .response.three p {
  color: #00B140;
}

#contentSlideQuiz .submit {
  width: 156px;
  border-color: #002A3A;
  color: #002A3A;
  position: absolute;
  bottom: 98px;
  right: 84px;
}

#contentSlideQuiz .bottomText {
  width: 360px;
  color: #888B8D;
  position: absolute;
  bottom: 35px;
  left: 318px;
  text-align: center;
}

#contentSlideQuiz .popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

#contentSlideQuiz .popup.one .image {
  width: 782px;
  height: 462px;
}

#contentSlideQuiz .popup.two .image {
  width: 602px;
  height: 459px;
}

#contentSlideQuiz .popup.three .image {
  width: 775px;
  height: 462px;
}

#contentSlideQuiz .popup.four .image {
  width: 783px;
  height: 459px;
}

#contentSlideQuiz .popup .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
}

#contentSlideQuiz .popup.one .close {
  top: 103px;
  right: 133px;
}

#contentSlideQuiz .popup.two .close {
  top: 116px;
  right: 226px;
}

#contentSlideQuiz .popup.three .close {
  top: 104px;
  right: 137px;
}

#contentSlideQuiz .popup.four .close {
  top: 105px;
  right: 135px;
}

/**/

/*templatesScroll*/

#templatesScroll {
  background-color: white;
}

#templatesScroll .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#templatesScroll .fac {
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
}

#templatesScroll .scroll {
  width: 882px;
  height: 340px;
  position: absolute;
  top: 216px;
  left: 84px;
  overflow-x: scroll;
  overflow-y: hidden;
}

#templatesScroll .scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#templatesScroll .scroll::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #F5F5F5;
}

#templatesScroll .scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #009CDE;
}

#templatesScroll .scroll img {
  width: 2750px;
  height: 319px;
}

/**/

/*finalPage*/

#finalPage {
  background-image: url(../img/55_congrats.jpg);
  background-size: 100%;
}

#finalPage .littleTitle {
  position: absolute;
  top: 105px;
  left: 84px;
  color: #009CDE;
}

#finalPage .fac {
  width: 420px;
  position: absolute;
  top: 166px;
  left: 84px;
  color: #888B8D;
  line-height: 20px;
}

#finalPage .fac > * {
  margin-bottom: 14px;
}

#finalPage .complete {
  width: 630px;
  margin-top: 20px;
  font-size: 0px;
  text-transform: uppercase;
}

#finalPage .complete * {
  color: #002A3A;
  border-color: #002A3A;
}

#finalPage .complete a {
  display: inline;
  text-decoration: none;
}
#finalPage .complete .button {
  width: 200px;
  font-size: 10px;
  display: inline-flex;
  margin-right: 10px;
  font-weight: bold;
}
#finalPage a:visited,
#finalPage a:active {
  color: #002A3A;
}
/* global rules for the zoomed in, scrolling style popups added in 2021. */


.page .popup.zoomedIn {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,.7);
  z-index: 3;
}

.page .popup.zoomedIn .scrollingWindow {
  width: calc(100% - 90px);
  padding-right: 8px;
  box-sizing: border-box;
  position: absolute;
  top: 25px;
  left: 25px;
  height: calc(100% - 100px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.page .popup.zoomedIn .scrollingWindow.horizontal {
  width: calc(100% - 90px);
  padding-right: 8px;
  box-sizing: border-box;
  position: absolute;
  top: 25px;
  left: 25px;
  height: calc(100% - 100px);
  overflow-y: hidden;
  overflow-x: scroll;
}

.page .popup.zoomedIn .nonscrollingWindow {
  width: calc(100% - 25px);
  padding-right: 8px;
  box-sizing: border-box;
  position: absolute;
  top: 50px;
  left: 25px;
  height: calc(100% - 110px);
  overflow-y: hidden;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}


.page .popup.zoomedIn .scrollingWindow::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

.page .popup.zoomedIn .scrollingWindow::-webkit-scrollbar {
  width: 12px;
  height: 6px;
  background-color: #4c4c4c;
}

.page .popup.zoomedIn .scrollingWindow::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #009CDE;
  cursor: pointer;
}

.page .popup.zoomedIn .image {
  /*width: 495px;
  height: 629px;*/
  width: 100%;
  position: relative;
  height: auto;
  top: 0px;
  left: 0px;
}

.page .popup.zoomedIn .nonscrollingWindow .image {
  /*width: 495px;
  height: 629px;*/
  width: 100%;
  position: relative;
  height: auto;
  top: 0px;
  left: 0px;
}

.page .popup.zoomedIn .scrollingWindow.horizontal .image {
  /*width: 495px;
  height: 629px;*/
  width: auto;
  position: relative;
  max-height: 100%;
  top: 0px;
  left: 0px;
}

.page .popup.zoomedIn .close {
  width: 25px;
  height: 25px;
  cursor: pointer;
  position: absolute;
  top: 25px;
  right: 25px;
}