/* Reset CSS
 * --------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
   padding: 0;
   margin: 0;
}

a {
   text-decoration: none;
}

table {
   border-spacing: 0;
}

fieldset, img {
   border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var {
   font-weight: normal;
   font-style: normal;
}

strong {
   font-weight: bold;
}

ol, ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

caption, th {
   text-align: left;

}

h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   font-size: 100%;
   margin: 0;
   padding: 0;
   color: #444;
}

q:before, q:after {
   content: '';
}

abbr, acronym {
   border: 0;
}

/* The New C21 Page Specific
 * --------------------------------------- */
html, body {
   width: 100%;
   height: 100%;
   padding: 0;
   background: #252526;
}

.feature {
   position: relative;
}

.feature-intro {
   background: #252526;
}

.feature-old-logo {
   background: transparent;
}

.feature-new-wordmark {
   background: #beaf87;
}

.feature-mission {
   background: #252526;
}

.feature-pioneer {
   background: #beaf87;
}

.feature-out-with-the-old {
   background: #beaf87;
}

.feature-gold-standard {
   background: #beaf87;
}

.feature-signage {
   background: #beaf87;
}

.feature-cards {
   background: #808285;
}

.feature-totes {
   background: #beaf87;
}

.feature-own-it {
   background: #252526;
}

.feature-flyers {
   background: #252526;
}

.feature-posters {
   background: #252526;
}

.feature-agent-flyers {
   background: #252526;
}

.feature-interior {
   background: #beaf87;
}

.feature-brochure {
   background: #252526;
}

.feature-before-after {
   background: #252526;
}

.feature-from-cara {
   background: #252526;
}

.feature-footer {
   background: #252526;
}

.feature-old-logo {
   width: 100%;
   height: 100%;
}

.feature-old-logo .fp-bg {
   width: 100%;
   height: 100%;
   background: #252526 url(images/old-logo.svg) center center no-repeat;
   background-size: 50%;
}

.feature-push {
   width: 100%;
   height: 100%;
}

.feature-new-wordmark {
   width: 100%;
   height: 100%;
}

#loader {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 2;
   background: #252526;
   display: flex;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}

#loader-box {
   position: relative;
   margin-left: 15%;
   margin-top: 10%;
   margin-bottom: 10%;
}

#loader-text {
   width: 35%;
}

#loader-bar {
   margin-top: 20%;
   padding: 1%;
   padding-left: 2.5%;
   background: #beaf87;
}

#loader-msg {
   width: 28%;
}

#loader-arrow {
   margin-left: 1%;
   width: 0.6%;
}

.image-center-block {
   display: block;
   margin-right: auto;
   margin-left: auto;
   max-width: 100%;
}

.scroll-notice {
   position: absolute;
   bottom: 10px;
   left: 50%;
   width: 90px;
   margin-left: -45px;
}

.placeholder-message {
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   text-align: center;
}

.feature {

}

.feature-intro {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
}

.feature-mission {
}

.feature-out-with-the-old .lot-changed {
   background: #252526;
   /*margin-top: 100px;*/
   padding-top: 20%;
}

.feature-out-with-the-old .lot-changed .profile {
   position: relative;
   background: #808285;
   margin-top: -30px;
   margin-bottom: 20%;
   font-size: 0;
}

.feature-out-with-the-old .lot-changed .profile p {
   font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
   -moz-font-feature-settings: 'ccmp=0,liga=0,locl=0,ordn=0,sups=0';
   color: rgb(37, 37, 38);
   line-height: 1.714;
   font-size: 14px;
}

.feature-out-with-the-old .together {
   position: relative;
   width: 60%;
   padding-top: 5%;
   padding-left: 20%;
   padding-right: 20%;
   font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
   -moz-font-feature-settings: 'ccmp=0,liga=0,locl=0,ordn=0,sups=0';
   font-size: 14px;
   color: rgb(128, 130, 133);
   font-weight: bold;
   line-height: 1.714;
}

.feature-gold-standard p {
   font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
   -moz-font-feature-settings: 'ccmp=0,liga=0,locl=0,ordn=0,sups=0';
   font-size: 22px;
   color: #252526;
   font-weight: bold;
   line-height: 1.714;
   text-align: center;
   padding-top: 25%;
   padding-bottom: 20%;
}

.feature-gold-standard .seal {
   padding-top: 17%;
   padding-bottom: 12%;
   background: #252526;
}

.feature-gold-standard .texture {
   background: #252526;
}

.feature-signage {
   font-size: 0;
}

.feature-cards {
   padding-top:10%;
}

.feature-totes {

}

.feature-totes .tote-1 {
   background: #beaf87;
   background: -moz-linear-gradient(left, #beaf87 75%, #beaf87 75%, #a29275 75%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, #beaf87 75%, #beaf87 75%, #a29275 75%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, #beaf87 75%, #beaf87 75%, #a29275 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   font-size: 0;
}

.feature-totes .tote-2 {
   background: #a29275;
   background: -moz-linear-gradient(left, #a29275 40%, #a29275 40%, #252526 40%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, #a29275 40%, #a29275 40%, #252526 40%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, #a29275 40%, #a29275 40%, #252526 40%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   font-size: 0;
}

.feature-totes .tote-3 {
   background: #beaf87;
   background: -moz-linear-gradient(left, #e6e7e8 75%, #e6e7e8 75%, #808285 75%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left, #e6e7e8 75%, #e6e7e8 75%, #808285 75%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right, #e6e7e8 75%, #e6e7e8 75%, #808285 75%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   font-size: 0;
}

.feature-own-it {
   padding-top: 20%;
   padding-bottom: 20%;
}

.feature-flyers {

}

.feature-posters {

}

.feature-agent-flyers {
   height: 75%;
   width: 100%;
}

.feature-interior {
   width: 100%;
   height: 100%;
}

.feature-brochure {

}

.feature-before-after {

}

.feature-from-cara {
   position: relative;
   padding-top: 20%;
   padding-bottom: 20%;
}

.feature-footer {

}

.ba-slider .resize {
   width: 30%;
}

.ba-slider .handle {
   left: 30%;
   background: #beaf87;
}

.ba-slider .handle:after { /* Big orange knob  */
   position: absolute;
   top: 50%;
   width: 110px;
   height: 34px;
   margin: -17px 0 0 -55px;

   font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
   content: '← Slide →';
   /*color: white;*/
   font-weight: normal;
   font-size:16px;
   text-align: center;
   line-height: 38px;
   /*letter-spacing: 2px;*/

   color: #252525;

   background: #beaf87; /* @orange */
   border: 1px solid #beaf87; /* darken(@orange, 5%) */
   //border-radius: 50%;
   border-radius: 0;
   transition: all 0.3s ease;

   box-shadow: none;
   /*box-shadow: 0 2px 6px rgba(0, 0, 0, .3),*/
   /*inset 0 2px 0 rgba(255, 255, 255, .5),*/
   /*inset 0 60px 50px -30px #beaf87; !* lighten(@orange, 20%)*!*/
}

.ba-slider .handle.ba-draggable:after {
   width: 106px;
   height: 30px;
   margin: -15px 0 0 -53px;
   line-height:35px;
   font-size:15px;
}

#intro-text {
   width: 30%;
   top: 40%;
   position: relative;
}

#old-logo-logo {
   width: 50%
}

#new-logo-logo {
   width: 60%;
   top: 40%;
   position: relative;
}

#mission-text {
   width: 50%;
}
#mission-wrap {
   padding-top:15%;
   padding-bottom:15%;
}

#out-with-the-old-message {
   padding-top: 20%;
   padding-bottom: 20%;
   padding-left: 25%;
   padding-right: 25%;

   text-align: center;
   font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
   -moz-font-feature-settings: 'ccmp=0,liga=0,locl=0,ordn=0,sups=0';
   font-size: 28px;
   color: #252526;
   font-weight: normal;
   line-height: 1.714;

}

#out-with-the-old-changed {
   width: 40%;
   margin-left: 10%;
   position: relative;
   z-index: 2;
}

#out-with-the-old-patch {
   position: absolute;
   right: 10%;
   margin-top: -8%;
   width: 25%;
}

#out-with-the-old-profile-lg {
   width: 30%;
}

#out-with-the-old-profile-xs {
   display: none;
}

#out-with-the-remodel-text {
   width: 30%;
   right: 10%;
   bottom: 30%;
   position: absolute;
}

#remodel-lg {
   display: block;
   margin: auto;
   width: 100%;
}

#remodel-xs {
   display: none;
}

#out-with-the-old-around-world {
   width: 30%;
   margin-left: 10%;
   margin-right: 10%;
   position: relative;
   float: left;
}

#out-with-the-old-together {
   float: left;
   width: 50%;
   padding-bottom: 160px;
}

#out-with-the-old-pioneer-xs {
   display: none;
}

#out-with-the-old-pioneer-lg {
   display: block;
   width: 50%;
}

#gold-standard-simple-timeless-lg {
   width: 33%;
}

#gold-standard-simple-timeless-xs {
   display: none;
}

#gold-standard-seal {
   width: 20%;
}

#flyers-wrap {
   padding: 10% 0;
   width:100%;
   position:relative;
}

#own-it-own {
   width: 36%;
}

#own-it-agent {
   width: 30%;
   margin-top: 10%;
}

#feature-agent-flyers-bgf {
   width: 50%;
   height: 100%;
   background: url(images/flyrer.jpg?v=20180228) center center no-repeat;
   background-size: cover;
}

#feature-agent-flyers-title {
   width: 5%;
   margin-left: 50%;
   position: absolute;
   left: 10%;
   top: 5%;
}

#feature-agent-flyers-options {
   width: 30%;
   margin-left: 50%;
   position: absolute;
   left: 10%;
   top: 40%;
}

#posters-title {
   width: 17%;
}

#flyers-title {
   width: 10%;
   right: 10%;
   position: absolute;
}

#flyers-flyers {
   width: 90%;
}

#interior-text {
   width: 30%;
   position: absolute;
   left: 10%;
   top: 40%;
}

#interior-bg {
   width: 50%;
   margin-left: 50%;
   height: 100%;
   background: url(images/interior.jpg?v=20180228) center center no-repeat;
   background-size: cover
}

#brochure-wrap {
   padding: 15% 0;
   width:100%;
   position:relative;
}

#brochure-text {
   width: 10%;
   position: relative;
   left: 17%;
}

#brochure-brochure {
   width: 80%;
}

#cara-container {
   left: 10%;
   width: 30%;
   position: absolute;
   padding-top: 8%;
}

#cara-signature {
   width: 35%;
}

#cara-title {
   width: 60%;
   margin-top: -0.5%;
}

#cara-blurb-xs {
   display: none;
}

#cara-blurb-lg {
   width: 40%;
   margin-left: 50%;
   float: left;
}

#signage-a {
   width: 50%;
   margin-bottom: 0;
   display: inline-block;
}

#signage-b {
   width: 50%;
   margin-bottom: 0;
   display: inline-block;
}

#totes-tote-1 {
   width: 33%;
   margin-left: 57%;
}

#totes-tote-2 {
   width: 33%;
   margin-left: 24%;
}

#totes-tote-3 {
   width: 33%;
   margin-left: 57%;
}

#footer-content {
   padding-left: 40%;
   /*margin-top: 11%;*/
}

#footer-headquarters {
   width: 30%;
}

#footer-address {
   width: 30%;
   margin-left: 10%;
}

#footer-legal {
   color: #808285;
   font-size: 10px;
   padding-top: 5%;
   font-family: sans-serif;
}

#footer-legal p {
   padding: 30px;
}

#footer-seal {
   width: 15%;
   position: absolute;
   bottom: 0;
   left: 15%;
   /*max-height: 100%;*/
}

.ba-slider-lg, .ba-slider-xs {
   pointer-events: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

@media screen and (min-width: 769px) {
   .ba-slider-xs {
      display: none !important;
   }
}

@media screen and (max-width: 768px) {
   .feature-interior {
      padding-top: 25%;
      height: auto;
   }
   .feature-cards {
      padding-top:20%;
      padding-bottom:20%;
   }

   #loader-text {
      width: 55%;
   }

   #loader-bar {
      margin-top: 20%;
      padding: 2%;
      padding-left: 4%;
      background: #beaf87;
   }

   #loader-msg {
      width: 68%;
   }

   #loader-arrow {
      margin-left: 2%;
      width: 1.7%;
   }

   #intro-text {
      width: 70%;
   }

   #old-logo-logo {
      width: 70%
   }

   #new-logo-logo {
      width: 80%;
   }

   #mission-wrap {
      padding-top:25%;
      padding-bottom:25%;
   }
   #mission-text {
      width: 80%;
   }

   .feature-out-with-the-old .lot-changed {
      padding-top: 100px;
   }

   .feature-out-with-the-old .lot-changed .profile {
      margin-top: 160px;
      margin-bottom: 35%;
      font-size: 0;
      text-align: center;
   }

   #out-with-the-old-changed {
      width: 70%;
      margin-left: 10%;
   }

   #out-with-the-old-message {
      padding-top: 30%;
      padding-bottom: 30%;
      padding-left: 15%;
      padding-right: 15%;
      text-align: center;
      font-family: 'Oakes-Semi-Bold', "Helvetica Neue", Arial, Helvetica, sans-serif;
      -moz-font-feature-settings: 'ccmp=0,liga=0,locl=0,ordn=0,sups=0';
      font-size: 19px;
      color: #252526;
      font-weight: normal;
      line-height: 1.714;
   }

   #out-with-the-old-patch {
      position: relative;
      right: auto;
      margin-top: -25%;
      width: 75%;
      z-index: 3;
      margin-bottom: 30px;
   }

   #out-with-the-old-profile-lg {
      display: none;
   }

   #out-with-the-old-profile-xs {
      display: block;
      margin-top: -3%;
      width: 100%;
   }

   #out-with-the-remodel-text {
      left: auto;
      right: auto;
      margin: auto;
      width: 90%;
      position: relative;
   }

   #remodel-lg {
      display: none;
   }

   #remodel-xs {
      display: block;
      margin: auto;
      width: 65%;
      margin-bottom: 3%;
   }

   #out-with-the-old-around-world {
      display: block;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      float: none;
   }

   #out-with-the-old-together {
      display: block;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      float: none;
      padding-bottom: 100px;
   }

   #out-with-the-old-pioneer-xs {
      display: block;
      width: 70%;
   }

   #out-with-the-old-pioneer-lg {
      display: none;
   }

   #gold-standard-simple-timeless-lg {
      display: none
   }

   #gold-standard-simple-timeless-xs {
      display: block;
      width: 55%;
   }

   .feature-gold-standard p {
      padding-top: 30%;
      padding-bottom: 26%;
   }


   .feature-out-with-the-old .together {
      width: 98%;
      padding-left: 0;
      padding-right: 0;
      padding-top: 60px;
   }

   #gold-standard-seal {
      width: 50%;
      margin-top: 60px;
      margin-bottom: 60px;
   }

   .feature-own-it {
      padding-top: 30%;
      padding-bottom: 30%;
   }

   #own-it-own {
      width: 65%;
   }

   #own-it-agent {
      width: 75%;
      margin-top: 15%;
   }

   .feature-agent-flyers {
      height: 75%;
      padding-top: 10%;
      padding-bottom: 10%;
   }

   #feature-agent-flyers-bgf {
      width: 100%;
      height: 60%;
   }

   #feature-agent-flyers-title {
      width: 20%;
      position: relative;
      margin-left: 10%;
      left: auto;
      top: auto;
      margin-top: 10%;
      margin-bottom: 10%;
      display: block;
   }

   #feature-agent-flyers-options {
      display: block;
      position: relative;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      left: auto;
      top: auto;
   }

   #posters-title {
      width: 65%;
   }

   #flyers-title {
      position: relative;
      left: auto;
      right: auto;
      width: 25%;
      margin-left: 10%;
      margin-right: 0;
   }

   #flyers-flyers {
      width: 100%;
   }

   #interior-text {
      display: block;
      margin: auto;
      width: 80%;
      position: relative;
      left: auto;
      top: auto;
      margin-bottom: 23%;
   }

   #interior-bg {
      width: 100%;
      margin-left: 0;
      padding-bottom: 90%;
   }

   #brochure-wrap {
      padding: 20% 0;
   }

   #brochure-text {
      width: 30%;
      position: relative;
      left: auto;
      margin-left: 10%;
   }

   #brochure-brochure {
      width: 100%;
   }

   .ba-slider-lg {
      display: none !important;
   }

   .feature-from-cara {
      padding-top: 30%;
      padding-bottom: 30%;
   }
   #cara-container {
      left: auto;
      width: 100%;
      position: relative;
      padding-top: 15%;
   }

   #cara-signature {
      width: 35%;
   }

   #cara-title {
      width: 60%;
      margin-top: -0.5%;
   }

   #cara-blurb-lg {
      display: none;
   }

   #cara-blurb-xs {
      display: block;
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      float: none;
   }

   #signage-a {
      width: 100%;
      display: block;
   }

   #signage-b {
      width: 100%;
      display: block;
   }

   #totes-tote-1 {
      width: 66%;
      margin-left: 24%;
   }

   #totes-tote-2 {
      width: 66%;
      margin-left: 12%;
   }

   #totes-tote-3 {
      width: 66%;
      margin-left: 24%;
   }

   #footer-content {
      padding-top: 10%;
      padding-left: 40%;
   }

   #footer-headquarters {
      width: 70%;
      display: block;
   }

   #footer-address {
      width: 70%;
      display: block;
      margin-left: 0;
      margin-top: 10%;
   }

   #footer-legal {
      color: #808285;
      font-size: 10px;
      padding-top: 5%;
      font-family: sans-serif;
   }

   #footer-legal p {
      padding: 0 10px 5px 5px;
   }

   #footer-seal {
      width: 30%;
      position: absolute;
      bottom: 0;
      left: 5%;
   }
   #flyers-wrap {
      padding: 25% 0;
   }

}

/* Tablet portrait */
@media screen and (max-width: 768px) and (min-width: 540px) {
   #out-with-the-old-changed {
      width: 50%;
   }

   #out-with-the-old-patch {
      position: relative;
      right: auto;
      margin-top: -15%;
      width: 55%;
      z-index: 3;
      margin-bottom: 30px;
   }

   #out-with-the-old-pioneer-xs {
      width: 55%;
   }

   #out-with-the-old-around-world {
      width: 55%;
      margin-left: 10%;
   }

   #remodel-xs {
      width: 55%;
   }

   #gold-standard-simple-timeless-lg {
      display: block;
      width: 55%;
   }

   #gold-standard-simple-timeless-xs {
      display: none;
   }

   #gold-standard-seal {
      width: 40%;
   }

   #feature-agent-flyers-title {
      width: 12%;
   }

   #feature-agent-flyers-options {
      width: 60%;
   }

   #posters-title {
      width: 45%;
   }

   #interior-text {
      width: 55%;
   }

   .feature-out-with-the-old .together {
      font-size: 18px;
   }

   #flyers-title {
      width: 17%;
   }

   #brochure-text {
      width: 20%;
   }

   #cara-signature {
      width: 25%;
   }
   #cara-title {
      width: 40%;
   }

}