.Mailinglist_CommonWrapper {
  background-color: transparent;
}

body.mailing-list-page {
  background-image: url(./images/wallows_BG_Desktop.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

@font-face {
  font-family: "ArialNarrowOSBoldItalic";
  src: url('./fonts/ArialNarrowOSBoldItalic/font.woff2') format('woff2'), url('../fonts/ArialNarrowOSBoldItalic/font.woff') format('woff');
}

@font-face {
  font-family: "ArialNarrowOSRegular";
  src: url('./fonts/ArialNarrowOSRegular/font.woff2') format('woff2'), url('../fonts/ArialNarrowOSRegular/font.woff') format('woff');
}

@font-face {
  font-family: "ArialNarrowOSBold";
  src: url('./fonts/ArialNarrowOSBold/font.woff2') format('woff2'), url('../fonts/ArialNarrowOSBold/font.woff') format('woff');
}

@font-face {
  font-family: "ArialNarrowOSItalic";
  src: url('./fonts/ArialNarrowOSItalic/font.woff2') format('woff2'), url('../fonts/ArialNarrowOSItalic/font.woff') format('woff');
}

.wallows_logo_white {
  width: 11.77vw;
  margin: 0 auto;
  padding-top: 8.22vw;
}

.onemore_image {
  width: 41.25vw;
  margin: 0 auto;
  padding: 2.08vw 0;
}

img {
  width: 100%;
  height: auto;
}

.wallows_logo_white img:hover {
  opacity: 0.5;
}

.DateDetails {
  font-family: "ArialNarrowOSRegular";
  font-size: 1.30vw;
  line-height: 1.61vw;
  width: 22.18vw;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}

.presale_details {
  font-family: "ArialNarrowOSBold";
  font-size: 0.67vw;
  line-height: 0.8vw;
  width: 34.3vw;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  padding: 2.08vw 0;
}

.joinText {
  font-size: 1.32vw;
  line-height: 1.68vw;
  color: #FFFFFF;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 700;
  padding: 9.22vw 0 1.68vw 0;
}

.plain-ml-wrapper {
  max-width: 90%;
  margin: 0 auto;
  padding-bottom: 9.21vw;
}

form#mlistFormOne {
  width: 22.9vw;
  margin: 0 auto;
}

.plain-ml-wrapper #mlform,
.plain-ml-wrapper #secondform {
  margin: 0px auto;
  text-align: center;
  padding: 0.37vw 0px;
  transition: all .5s ease-in-out;
  color: #FFFFFF;
}

.plain-ml-wrapper #mlform .message-header {
  font-size: 25px;
  text-transform: uppercase;
}

.plain-ml-wrapper #mlform input {
  width: 100%;
  height: 2.08vw;
  box-sizing: border-box;
  border-radius: 0 !important;
}

.plain-ml-wrapper form#mlistFormOne div.fieldWrap,
.plain-ml-wrapper form#mlistFormTwo div.fieldWrap {
  position: relative;
  font-size: 1.04vw;
}

.plain-ml-wrapper form#mlistFormTwo div {
  margin-bottom: 0.8vw;
}

.plain-ml-wrapper form#mlistFormTwo div.birthday {
  margin-bottom: 0;
}

.plain-ml-wrapper form#mlistFormOne>div {
  margin-bottom: 0;
}

.plain-ml-wrapper form#mlistFormTwo .postal_country {
  font-size: 0;
}





.plain-ml-wrapper input:focus,
*:focus {
  outline: none;
}

.plain-ml-wrapper input#submit {
  color: #fff;
  background-color: #FFFFFF;
  border: none;
  font-size: 1.02vw;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  cursor: pointer;
  display: inline-block;
  border: transparent;
  color: #fff;
  /* border-bottom: 1px solid; */
  text-transform: uppercase;
  font-family: "ArialNarrowOSRegular";
  font-size: 0;
  padding: 0;
  background: url(./images/wallows_submit.svg) no-repeat scroll center top / cover;

}

.plain-ml-wrapper #mlistFormTwo input#submit {
  padding: 0.7vw 0.7vw;
  font-size: 1vw;
  background: transparent;
  border: 0.05vw solid #fff !important;
}

::placeholder {
  color: #fff;
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: #fff;
}

.email.fieldWrap {
  display: inline-block;
  width: 20vw;
  vertical-align: top;
  margin-right: 0.4vw;
}

.plain-ml-wrapper .submit {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0 !important;
  width: 2.08vw;
}

.plain-ml-wrapper #mlform input#email {
  border: 0.07vw solid #fff;
  text-align: left;
}

.plain-ml-wrapper #mlform .terms,
#secondform .terms {
  color: #FFFFFF;
  text-transform: uppercase;
  font-size: 0.73vw;
  text-decoration: underline;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
}

.plain-ml-wrapper #mlform #terms .terms-message,
.plain-ml-wrapper #secondform #terms .terms-message {
  width: 100%;
  color: #3A4045;
  margin: 0px auto;
  text-decoration: none;
}

.plain-ml-wrapper #mlform p.terms-message a,
.plain-ml-wrapper #secondform p.terms-message a {
  color: #070707;
  text-decoration: none;
}

.plain-ml-wrapper #mlform p.terms-message a:hover,
.plain-ml-wrapper #secondform p.terms-message a:hover {
  color: #1B214E;
  text-decoration: underline;
}


/* first form style ends */

.plain-ml-wrapper .singleStepForm .name {
  display: block
}

.plain-ml-wrapper .singleStepForm .name div {
  display: inline-block;
  width: 49%;
}

.plain-ml-wrapper .singleStepForm .name input {
  width: 100%;
  padding: 0px 0.37vw;
  font-size: 1.04vw;
}

.plain-ml-wrapper .singleStepForm input#goptin {
  width: 15px;
  height: 15px;
}

.plain-ml-wrapper .singleStepForm select {
  width: 100%;
  height: 3.29vw;
  padding: 0px 0.37vw;
  color: #fff;
  font-size: 1.04vw;
  border: 0.05vw solid #fff;
  background: #fff;
  cursor: pointer;
}

.plain-ml-wrapper #secondform {
  width: 22.9vw;
  text-align: center;
}

.plain-ml-wrapper #secondform .name {
  display: block
}

.plain-ml-wrapper #secondform .birthday div {
  display: inline-block;
  width: 48%;
}

.plain-ml-wrapper #secondform .birthday .dobDay {
  margin-left: 2%;
}

.plain-ml-wrapper #secondform .name input {
  width: 100%;
  padding: 0px 0.37vw;
  font-size: 1.04vw;
}

.plain-ml-wrapper #secondform input#goptin {
  width: 15px;
  height: 15px;
}



.plain-ml-wrapper #secondform input:not([type="submit"]) {
  width: 100%;
  background: transparent;
  color: #fff;
  height: 2.56vw;
  padding: 0px 0.37vw;
  border: 0.05vw solid #fff;
}

.plain-ml-wrapper #secondform input[type="checkbox"] {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.plain-ml-wrapper #secondform .globaloptin {
  width: 100%;
  margin: 0px auto;
  text-align: justify;
  margin-top: -2vw;
}

.plain-ml-wrapper #secondform .welcome {
  text-transform: uppercase;
  font-size: 1.04vw;
  width: 85%;
  margin: 0 auto;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
  padding-bottom: 2vw;
  padding-top: 2vw;
}

#mlistFormTwo .submit {
  margin-top: 1vw;
}

.plain-ml-wrapper #thankyou {
  text-align: center;
  text-transform: uppercase;
  color: #FFF;
  padding: 0;
  font-size: 1.30vw;
  line-height: 1.61vw;
  width: 100%;
  margin: 0px auto;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
  height: 100vh;
  width: 19.2vw;
}
div#thankyou.fadeIn{
  display: flex;
  align-items: center;
  justify-content: center;
}

.plain-ml-wrapper input {
  color: #fff;
  padding: 0;
  box-sizing: border-box;
  border: none !important;
  border-bottom: 0.05vw solid #fff !important;
  background: transparent;
  font-size: 1.04vw;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}
.plain-ml-wrapper #secondform select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.plain-ml-wrapper #secondform select {
  color: #fff;
  font-size: 1.04vw;
  border: none;
  border-bottom: 0.05vw solid #fff;
  background: transparent;
  width: 100%;
  height: 2.56vw;
  padding: 0px 0.37vw;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  background: url(./images/wallows_white_arrow.svg) no-repeat right center;
  background-position: 95% 50%;
  background-size: 0.9vw;
  padding-right: 3vw;
  cursor: pointer;
}


option {
  background-color: #c55541;
}

.plain-ml-wrapper #secondform input#goptin {
  vertical-align: middle;
}

.plain-ml-wrapper #secondform .globaloptin {
  font-size: 11px;
}

.plain-ml-wrapper #terms {
  position: relative;
  margin-bottom: 0;
}

.plain-ml-wrapper .fadeOut {
  display: none;
}

.plain-ml-wrapper .fadeIn {
    display: block;
   
}

.plain-ml-wrapper #mlform p.terms-message a,
.plain-ml-wrapper .singleform p.terms-message a {
  color: #fff;
}

.plain-ml-wrapper #mlform p.terms-message a:hover {
  color: #fff;
  opacity: .5
}

div.plain-ml-wrapper {
  position: relative;
}

div.plain-ml-wrapper span#secondFormClose {
  position: absolute;
  right: 36%;
  font-size: 2vw;
  cursor: pointer;
  font-family: "ArialNarrowOSBold";
}

div.plain-ml-wrapper span#secondFormClose:hover {
  opacity: 0.5;
}

.plain-ml-wrapper span.input-error {
  background: none;
  color: red;
  position: absolute;
  bottom: unset;
  top: -1vw;
  left: 0;
  padding: 0 0;
  text-transform: uppercase;
  font-size: 0.8vw;
  font-family: "ArialNarrowOSBold";
}

input#submit:hover {
  opacity: .5;
}

/** custom checkbox **/


.globaloptin input[type="checkbox"] {
  opacity: 0;
}

.globaloptin label {
  position: relative;
  display: inline-block;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;

  /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
  padding-left: 1.61vw;
  /* vertical-align: middle; */
}

.globaloptin label::before,
.globaloptin label::after {
  position: absolute;
  content: "";

  /*Needed for the line-height to take effect*/
  display: inline-block;
}

/*Outer box of the fake checkbox*/
.globaloptin label::before {
  height: 1.17vw;
  width: 1.17vw;
  border: 1px solid;
  left: 0px;

  /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
     *to vertically center it.
     */
  top: -1px;
}

/*Checkmark of the fake checkbox*/
.globaloptin label::after {
  height: 0.37vw;
  width: 0.66vw;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  left: 0.29vw;
  top: 0.29vw;
}

/*Hide the checkmark by default*/
.globaloptin input[type="checkbox"]+label::after {
  content: none;
}

/*Unhide on the checked state*/
.globaloptin input[type="checkbox"]:checked+label::after {
  content: "";
}

/*Adding focus styles on the outer-box of the fake checkbox*/
.globaloptin input[type="checkbox"]:focus+label::before {
  outline: rgb(59, 153, 252) auto 0.37vw;
}

/** custom checkbox ends **/


/** label css **/

.plain-ml-wrapper label:not(.goptin_checkbox) {
  -webkit-transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.7s;
  transition: all 0.3s ease-in;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  left: 50%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.88vw;
}

.plain-ml-wrapper label.moveUp {
  background-color: #fff;
  position: absolute;
  top: -8px;
  transform: translateX(-50%) scale(.9);
}

.plain-ml-wrapper #mlform #terms .terms-message,
.plain-ml-wrapper #secondform #terms .terms-message,
p.terms-message-2.fadeIn {
  font-size: 0.73vw;
  background: #fff;
  color: #fff;
  padding: 0.5vw;
  margin-top: 0.5vw;
  font-family: "ArialNarrowOSRegular";
  font-style: normal;
  font-weight: 400;
}

.plain-ml-wrapper #mlform p.terms-message a,
.plain-ml-wrapper #secondform p.terms-message a,
p.terms-message-2 a {
  color: #fff;
  text-decoration: underline;
}

.globaloptin input[type="checkbox"]:focus+label::before {
  outline: none;
}

.Mailinglist_CommonWrapper .consent-placeholder {
  position: relative;
  margin: 1vw auto 0;
  display: block;
}

.Mailinglist_CommonWrapper #mlistFormTwo .consent-placeholder {
  margin: 0.3vw auto 0;
}

.plain-ml-wrapper label:not(.goptin_checkbox) {
  position: static;
  transform: none;
}

.plain-ml-wrapper #mlistFormTwo .submit {
  width: 10vw;
  display: block;
  margin: 0 auto;
  margin-top: 1.2vw;
}



.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked),
.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked {
  position: absolute;
  left: 0px;
  width: 1.28vw;
  height: 1.28vw;
  z-index: 10;
  top: 0px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  -webkit-appearance: none;
  padding: 0;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked)+label:before,
.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:before {
  content: "";
  position: absolute;
  left: 0px;
  top: auto;
  width: 1.09vw;
  height: 1.09vw;
  border: 0.05vw solid #fff;
  background: transparent;
  border-radius: 0px;
  box-sizing: border-box;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"].errored:not(:checked)+label:before {
  border-color: red;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder input[type="checkbox"]+label {
  display: inline-block;
  box-sizing: border-box;
  line-height: 0.677vw;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.55vw;
  padding-left: 0.6vw;
  width: 20vw;
  vertical-align: top;
  font-weight: 400;
  position: static;
  transform: none;
  pointer-events: auto;
  font-family: "ArialNarrowOSBold";
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:after {
  content: "\2713";
  position: absolute;
  top: 0.1vw;
  line-height: 1;
  left: 0.25vw;
  font-size: 1vw;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:after {
  color: #ffffff;
}

.Mailinglist_CommonWrapper .consent-placeholder span.input-error {
  color: red;
  position: absolute;
  top: -0.9vw;
  left: 0;
  bottom: auto;
}

.Mailinglist_CommonWrapper .secondform .consent-placeholder {
  margin: 2vh auto;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder label a,
.Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder label span {
  color: #fff;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder label a {
  text-decoration: underline;
  position: relative;
  z-index: 10;
}

.Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder label a:hover {
  opacity: 0.5;
}

@media only screen and (max-width: 1024px) and (orientation:portrait) {
  /* body.mailing-list-page {
    background-image: url(./images/wallows_BG_Mobile.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
  } */
  .Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder input[type="checkbox"]+label {
      font-size: 2.4vw;
      line-height: 3.46vw;
      padding-left: 6vw;
      width: 86vw;
  }
  .Mailinglist_CommonWrapper .plain-ml-wrapper #mlistFormTwo.mlform .consent-placeholder input[type="checkbox"]+label {
      padding-left: 10vw;
      width: 80vw;
  }
  .Mailinglist_CommonWrapper #mlistFormTwo .consent-placeholder {
      margin: 3.3vw auto 0;
  }

  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked),
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked,
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked)+label:before,
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:before {
    width: 5.6vw;
    height: 5.6vw;
    border: 0.26vw solid #fff;
  }

  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:after {
    top: 0.4vw;
    left: 1.5vw;
    font-size: 4.15vw;
  }
  .plain-ml-wrapper span.input-error {   
      top: -3vw;  
      font-size: 3.8vw;
  }
  .Mailinglist_CommonWrapper .consent-placeholder span.input-error {   
    top: -4.4vw;
  }
}

@media only screen and (max-height: 1366px) and (min-width: 1024px) and (orientation: portrait) {
  .Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder input[type="checkbox"]+label {
      font-size: 2.68vw;
      padding-left: 5.54vw;
  }

  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:after {
    top: 0.3vw;
    left: 1vw;
    font-size: 4vw;
  }

  .Mailinglist_CommonWrapper .consent-placeholder {
    position: relative;
    margin: 2vh auto;
  }

  .Mailinglist_CommonWrapper .consent-placeholder span.input-error {
    top: -4.5vw;
  }

  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked)+label:before,
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked+label:before,
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:not(:checked),
  .Mailinglist_CommonWrapper .plain-ml-wrapper .consent-placeholder input[type="checkbox"]:checked {
    width: 5.28vw;
    height: 5.28vw;
  }
  .Mailinglist_CommonWrapper .plain-ml-wrapper #mlistFormTwo.mlform .consent-placeholder input[type="checkbox"]+label {
     padding-left: 8vw;
  }

}

@media only screen and (max-width: 1024px) and (orientation:portrait) {
    .wallows_logo_white {
        width: 44.53vw;
        margin: 0 auto;
        padding-top: 14.133vw;
    }
    .onemore_image {
      width: 90.6vw;
      margin: 0 auto;
      padding: 7.4vw 0;
  }
  .DateDetails {
      font-size: 5.33vw;
      line-height: 6.9vw;
      width: 90.6vw;
  }
  .presale_details {   
      font-size: 3.46vw;
      line-height: 4.26vw;
      width: 86.6vw;   
      padding: 3.73vw 0 9.8vw 0;
  }
  form#mlistFormOne {
      width: 91.6vw;
  }
  .email.fieldWrap {
      width: 78vw;
      margin-right: 1.4vw;
  }
  .plain-ml-wrapper .submit {
      width: 10.66vw;
  }
  .plain-ml-wrapper #mlform input {
      height: 10.66vw;
  }
  .plain-ml-wrapper input {
    font-size: 4.8vw;
    border-bottom: 0.26vw solid #fff !important;
  }
  .Mailinglist_CommonWrapper .consent-placeholder {
      margin: 4.7vw auto 0;
  }
  .plain-ml-wrapper #secondform {
      width: 90%;
  }
  div.plain-ml-wrapper span#secondFormClose {
      right: 7%;
      font-size: 9vw;
  }
  .plain-ml-wrapper #secondform .welcome {
      font-size: 4.04vw;
      width: 85%;
      padding-bottom: 4vw;
      padding-top: 6vw;
  }
  .plain-ml-wrapper #secondform input:not([type="submit"]) {
    height: 10vw;
    padding: 0px 0;
    border:0.26vw solid #fff;
  }
  .plain-ml-wrapper #secondform .name input {
      padding: 0px 0;
      font-size: 4.8vw;
  }
  .plain-ml-wrapper #secondform select {
      font-size: 4.8vw;
      border-bottom: 0.26vw solid #fff;
      width: 100%;
      height: 10vw;
      padding: 0px 0;
      background-size: 3.9vw;
      padding-right: 11vw;
  }
  .plain-ml-wrapper #mlistFormTwo .submit {
      width: 37vw;
      margin-top: 6.2vw;
  }
  .plain-ml-wrapper #mlistFormTwo input#submit {
      padding: 2.7vw 2.7vw;
      font-size: 5vw;
      border: 0.26vw solid #fff !important;
  }
  .plain-ml-wrapper #thankyou {
      font-size: 5.3vw;
      line-height: 6.9vw;
      width: 77.86vw;
  }
  .plain-ml-wrapper {    
      padding-bottom: 23.94vw;
  }
 
}

@media (min-width: 600px) and (max-width: 1024px) and (orientation: landscape){
  form#mlistFormOne {
    width: 23.9vw;
  }
  .email.fieldWrap {
    width: 20.7vw;
  }
  .plain-ml-wrapper #mlform input {
    height: 3.08vw;
  }
  .plain-ml-wrapper input#submit {
      background-size: 2.6vw;
      border-bottom: none !important;
  }
  .Mailinglist_CommonWrapper .consent-placeholder {
      margin: 1.5vw auto 0;
  }
  .Mailinglist_CommonWrapper .consent-placeholder span.input-error { 
    top: -1.3vw;
  }
  .plain-ml-wrapper #secondform .birthday div {
      width: 47.8%;
  }
  .Mailinglist_CommonWrapper .plain-ml-wrapper .mlform .consent-placeholder input[type="checkbox"]+label {
    line-height: 0.877vw;
  }
}