/* WALDO FORM //////////////////////////////////////////////////////*/

/*TYPOGRAPHY*/
    /*size*/
        .simform input { font-size: 40px; }
        .questions li > span label { font-size: 36px; }
        form input[type=submit], #btn-continue, button#mobile-submit { font-size: 20px; }
        #mobile-form-wrap form input, #mobile-form-wrap form label, #mobile-form-wrap form select { font-size: 14px; }
        #mobile-form-wrap h1, .terms, .simform .error-message { font-size: 14px; }
    /*font-weight*/
        .questions li > span label, #mobile-form-wrap form label, form input[type=submit], #btn-continue, button#mobile-submit, #mobile-form-wrap h1.strong { font-weight:700; }
        .terms, .simform input { font-weight:400; }
        .terms a, #mobile-form-wrap h1 { font-weight:500; }

        #mobile-form-wrap h1 { line-height: 20px; }
    /*colour*/
        .questions li > span label, .terms, .terms a, #mobile-form-wrap form label, form input[type=submit], #btn-continue, button#mobile-submit { color:#fff }
        .simform input, #mobile-form-wrap form input, #mobile-form-wrap form select { color:#282828 }
        .simform .error-message { color: #b1d0ff; }
        #naughty .simform .error-message { color: #ffb1c3; }
        ::-webkit-input-placeholder { color: #838383; }
        ::-moz-placeholder { color:#838383; }
        :-ms-input-placeholder { color:#838383 }
        input:-moz-placeholder { color:#838383 }
    /*special*/
        .questions li > span label, form input[type=submit], #btn-continue, button#mobile-submit { letter-spacing: 3px; }
        .questions li > span label, .terms, .simform .error-message, #mobile-form-wrap form input, #mobile-form-wrap form label, #mobile-form-wrap form select, form input[type=submit], #btn-continue, button#mobile-submit { text-transform: uppercase; }
        .terms, #mobile-form-wrap form label { letter-spacing:0.1em; }
        .terms a { text-decoration: underline; }
        form input[type=submit], #btn-continue, button#mobile-submit { text-align: center; }


        .signup {
            max-width: 530px;
            height: auto;
            margin: 0 auto;
            padding: 0;
            -webkit-border-radius: 4px;
            border-radius: 4px;
            position: relative;
        }

        .signup .wld-component {height: 100%;}
        .signup .wld-form {height: 100%;flex-direction: column;}
        .signup .wld-form__fields {margin: 0 0 6px 0;}
        .signup .wld-form__actions {justify-content: space-between;}
        .wld-fieldgroup {align-self: center;display: none;}
        .wld-fieldgroup--active {display: block;}

        /* add space between date pickers */
        .wld-input + .wld-input {
        }

        #signup-dobday {
        width: 33%;
        display:inline-block;
        }
        #signup-dobmonth {
        width: 33%;
        display:inline-block;
        }
        #signup-dobyear {
        width: 33%;
        display:inline-block;
        }

        .wld-input--select,
        .wld-input--text {
            width: 100%
        }


        /* confirmation fields */
        .wld-field--confirm {
            display: flex;
        }

        .wld-field--confirm .wld-field__input {
            flex: 0;
            order: 0;
        }

        .wld-field--confirm .wld-field__caption {
           font-size: 15px;
           line-height: 17px;
           color:#fff;
        order: 1;
        flex: 1;
        margin: 0 0 0 8px;
        }

        .wld-field:not(.wld-field--confirm) .wld-field__caption {
        text-transform: uppercase;
        color:#fff;
        letter-spacing: 0.1em;
        font-weight: 700;
        font-size:28px;
        }

        /*--Tooltips--*/
        .wld-field. wld-field--confirm {

        }
        /* GENERAL INPUT STYING
        ------------------------------------------------ */
        .wld-input {
            font: inherit;
        }
        .wld-input--text,.wld-input--select,#dobday,#dobmonth,#dobyear {display: block;
            color: #666;
            background: #fff;
            width: 100%;
            height: 65px;
            border: 0;
            box-shadow: none;
            -webkit-border-radius: 0px;
            border-radius: 0px;
            appearance:none;
            -moz-appearance:none; /* Firefox */
            -webkit-appearance:none; /* Safari and Chrome */
            font-size: 16px;
            font-family: "Open sans", sans-serif;
            font-weight: 400;
            padding: 0;
            margin: 0;
            text-indent: 15px;
        }

        .wld-input--select {

        }

        .wld-button {
          position: absolute;
          top: 3.5em;
          right: 0px;display: block;
          padding: 7px;
          width: 5em;
          height: 6em;
          border: none;
          background: none;
          color: rgba(0,0,0,0.4);text-align: center;
          z-index: 9999;
          cursor: pointer;
          -webkit-transition: -webkit-transform 0.3s,opacity .3s;
          transition: transform 0.3s,opacity .3s;
          -webkit-transform: translateX(-20%);
          -ms-transform: translateX(-20%);
          transform: translateX(-20%);
          -webkit-tap-highlight-color: rgba(0,0,0,0);
        }

        .wld-button::after {
          position: absolute;
        top: 0.3em;width: 85%;height: 70%;
        content: url(../_img/arrow.svg);
        text-transform: none;
        font-style: normal;
        speak: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }

        .wld-button {
          display: none;
        }

        /* Placeholder Styling */
        input::-webkit-input-placeholder {
            color: #666;
            opacity: 1;
        }
        input:-moz-placeholder { /* Firefox 18- */
            color: #666;
            opacity: 1;
        }
        input::-moz-placeholder {  /* Firefox 19+ */
            color: #666;
            opacity: 1;
        }
        input:-ms-input-placeholder {
            color: #666;
            opacity: 1;
        }

        /* ERRORS
        ------------------------------------------------ */
        .wld-error-overlay {
      color: #b1d0ff;
        margin-top: 12px;
        }

/*BACKGROUNDS*/
    form input:focus, form select:focus, input, #mobile-form-wrap form select { background-color: rgba(255,255,255,0.9); }

/*GENERAL*/
    .signup { width: 70%; position: relative; margin: 0vh auto 0 auto; }
    .questions li > span label { display:block; }

/*STEPS VISIBILITY*/
    .questions li { z-index:90; float: left; visibility:hidden;height:0; -webkit-transition:visibility 0 0.4s,height 0 .4s; transition:visibility 0 0.4s,height 0 .4s; width: 100%; }
    .questions li.current,.no-js .questions li { visibility:visible; height:auto; -webkit-transition:none; transition:none; }

/*CONTROLS & PROGRESS*/
    .simform .number { display: none!important; }
    .simform .progress{ width:0; height:5px; background: rgba(232,6,131, 0.9); -webkit-transition:width .4s ease-in-out; transition:width .4s ease-in-out; }
/*INPUT STYLES*/
    .simform ol { margin:0; padding:0; list-style:none; position:relative; }/*remove number at front*/
    .questions input:focus,.simform button:focus { outline:none }
    .simform input { display:block; width: 100%; height: 88px; padding: 0 1EM 0 1em; border:none; opacity:0; -webkit-transition:opacity .3s; transition:opacity .3s; margin-top: 1em; margin-bottom: 1em; border-radius: 0; }
    input#dobday,input#dobmonth { width:25%; display:inline-block }
    input#dobyear { width:50%; display:inline-block }
    .simform .current input,.no-js .questions input { opacity:1 }

/*RADIO STYLES*/
    input[type=radio] { display:none }
    label.male, label.female { display:inline-block; position:relative; height:88px; width:50%; cursor:pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
    label.male { margin-left: 0%; background:url(../_img/male.svg) rgba(255,255,255,0.9) no-repeat; background-position: center; }
    label.male:hover { background:url(../_img/malewhite.svg) rgba(255,255,255,0.9) no-repeat; background-position: center; }
    label.female { background:url(../_img/female.svg) rgba(255,255,255,0.9) no-repeat; background-position: center; }
    label.female:hover { background:url(../_img/femalewhite.svg) rgba(255,255,255,0.9) no-repeat; background-position: center; }
    label.male:hover, label.female:hover { background-color: rgba(232,6,131,0.9); }

/*TERMS*/
    .terms, .terms:hover { transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out; }
    .terms { position: absolute; top: 245px; opacity: 0.5; }
    .terms:hover { opacity: 1; }

/*ERROR*/
    .simform .error-message,.simform .final-message { position:absolute; top: 185px; visibility:hidden; opacity:0; -webkit-transition:opacity .4s; transition:opacity .4s }
    .error-message.show,.final-message.show { visibility:visible; opacity:1 }

/*FIXES*/
    *,:after,:before { box-sizing:border-box }
    .clearfix:before,.clearfix:after { content:''; display:table }
    .clearfix:after { clear:both }
    input[type=text]::-ms-clear { display:none }


/* MOBILE FORM //////////////////////////////////////////////////////*/

#mobile-form-wrap { width: 100%; margin-bottom:20px; position:relative; display:none;}
#mobile-form-wrap form input, #mobile-form-wrap label { width:100%; }
#mobile-form-wrap form input { height:40px; margin:0; border:none; border-radius:0; padding:0 3%; box-sizing: border-box; }

#mobile-form-wrap form label {
    line-height:28px;
    margin-top: 8px; }
#mobile-form-wrap form select { -webkit-appearance:none; -moz-appearance:none; border:none; border-radius:0; height:40px; padding:0 3%; box-sizing: border-box; }
    form select#gender { width:100%; }
    form select.day { width:26%; }
    form select.month { width:46%; }
    form select.year { width:28%; }
#secondstep { margin-top:5px; display:none }

form input[type=submit], #btn-continue, button#mobile-submit { background:#E80683; display: block; margin: 20px auto; width: auto; min-width: 80%; padding: 18px; cursor:pointer; border:none; }
#naughty form input[type=submit], #naughty #btn-continue, #naughty button#mobile-submit { background:#ff5d83; display: block; margin: 20px auto; width: auto; min-width: 80%; padding: 18px; cursor:pointer; border:none; }
#btn-continue { width: 80%; }







/*.simform button { display: none!important; }*/


.simform {
    font-size: 2.35em
}
.simform .next {
    position: absolute;
    right: 0;
    bottom: 45px;
    display: block;
    padding: 0;
    width: 2em;
    border: none;
    height: 88px;;
    background: none;
    opacity: 0;
    color: rgba(0, 0, 0, 0.4);
    text-align: center;
    z-index: 9999;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.3s, opacity .3s;
    transition: transform 0.3s, opacity .3s;
    -webkit-transform: translateX(-20%);
    -ms-transform: translateX(-20%);
    transform: translateX(-20%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.simform .next::after {
    position: absolute;
/*    background: red;*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    left: 0;
    top: 15%;
    width: 85%;
    height: 70%;
    content: url(../_img/arrow.svg);
    text-transform: none;
    font-style: normal;
    speak: none;
    z-index: 99999;
}
.simform .next.show {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    pointer-events: auto
}

/* MEDIA QUERIES //////////////////////////////////////////////////////*/

/* Mobiles */
@media screen and (max-width:736px) {
    #mobile-form-wrap { display:block; }
    /*.signup { display:none }*/
}


        @media screen and (max-width: 736px){
           .signup {width:100%; max-width:100%;}
           .wld-input--text, .wld-input--select { height: 40px; padding: 0;}
           .wld-field {margin: 12px 0;}
           .wld-field:not(.wld-field--confirm) .wld-field__caption {
           text-transform: uppercase;
           color:white;
           letter-spacing: 0.1em;
           font-weight: 700;
           font-size: 15px
           }
           .wld-button {
           background: #E80683;
            display: block;
            font-size: 19px;
            color:#fff;
            margin: 10px auto;
            width: 100%;text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 3px;
            cursor: pointer;
            border: none;
            -webkit-transform: none;
            -ms-transform: none;
            transform: none;
            position: inherit;
            height:50px;
        }
        .wld-button:after {
           visibility: hidden;
        }
        }

@media screen and (max-width: 950px) {
/*TYPOGRAPHY*/
    .simform input { font-size: 30px; }
    .questions li > span label { font-size: 28px; }
    .terms, .simform .error-message { font-size: 12px; }
label.male, label.female { }
.terms { top: 205px; }
.simform .error-message,.simform .final-message { top: 160px; }
    .simform .next::after { top: 28%; }
}