@charset "utf-8";
/* CSS Document */
@media screen and (max-width:2560px) {
    form .row .row.collapse .column, form .row .row.collapse .columns {
    padding: 0;
    }
    .row .row.collapse {
    width: auto; 
    max-width: none;
    }
    .column, .columns {
    position: relative; 
    float: left;margin-left: 30px;
    }
    .box {
    }

    .formtop {
        margin-top: 0px !important;
    }

    .formrow {
        margin-top: 10px !important;
    }

    .box h1 {
        margin-left: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #2da4da;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
    }

    .box p {
        font-size: 14px;
        text-align: center;
    }

    .box .group {
        position: relative;
        margin-bottom: 35px;
        margin-left: 20px;
    }

    .box .inputMaterial {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100%;
        max-width: 450px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
        box-shadow: inset 0 1px 2px rgba(53, 49, 49, 0.36);
        color: rgba(0,0,0,.75);
        margin: 0 0 1rem;
        box-sizing: border-box;
        transition: box-shadow .45s,border-color .45s ease-in-out;
    }

    .box .inputMaterialPC {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
        text-align: center;
    }

    .box .inputMaterialYN {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 340px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
    }

    .box .postcode {
        width: 100px !important;
        float: left;
    }

    .box .yourname {
        width: 340px !important;
        display: table-cell;
    }

    .postcode {
        width: 100px !important;
        float: left;
    }

    .yourname {
        width: 340px !important;
        display: table-cell;
        float: right;
    }

    .box .inputMaterial:focus {
        outline: none;
    }

    /* LABEL ======================================= */

    .box label {
        color: #999;
        font-size: 18px;
        font-weight: normal;
        position: absolute;
        pointer-events: none;
        left: 15px ;
        top: 25px ;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 430px;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 90px;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    /* active state */
    .box .inputMaterial:focus ~ .bar:before, .box .inputMaterial:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialPC:focus ~ .bar:before, .box .inputMaterialPC:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialYN:focus ~ .bar:before, .box .inputMaterialYN:focus ~ .bar:after {
        width: 100%;
    }

    /* active state */
    .box .inputMaterial:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialPC:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialYN:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
}

@media screen and (max-width:980px) {
    .box .inputMaterial {
        width: 370px !important;
    }

    .box .inputMaterialPC {
        width: 80px !important;
    }

    .postcode {
        width: 80px !important;
    }

    .box .inputMaterialYN {
        width: 280px !important;
    }

    .yourname {
        width: 280px !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 70px;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 270px;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .box label { 
        left: 10px; 
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }
}

@media screen and (max-width:800px) { 
    .formtop {
    margin-top: 20px !important;
}
    .box .inputMaterial {
        width: 340px !important;
    }

    .box .inputMaterialPC {
        width: 85px !important;
    }

    .postcode {
        width: 85px !important;
    }

    .box .inputMaterialYN {
        width: 230px !important;
    }

    .yourname {
        width: 230px !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 330px;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 60px;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 230px;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .box label { 
        left: 10px; 
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px;
        font-size: 14px;
        color: #000 !important;
    }
}

@media screen and (max-width:640px) {
    .box {
    }

    .formtop {
        margin-top: 40px !important;
    }

    .formrow {
        margin-top: 10px !important;
    }

    .box h1 {
        margin-left: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #2da4da;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
    }

    .box p {
        font-size: 14px;
        text-align: center;
    }

    .box .group {
        position: relative;
        margin-bottom: 35px;
        margin-left: 20px;
    }

    .box .inputMaterial {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 450px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
    }

    .box .inputMaterialPC {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 100px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
        text-align: center;
    }

    .box .inputMaterialYN {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 340px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
    }

    .box .postcode {
        width: 100px !important;
        float: left;
    }

    .box .yourname {
        width: 340px !important;
        display: table-cell;
    }

    .postcode {
        width: 100px !important;
        float: left;
    }

    .yourname {
        width: 340px !important;
        display: table-cell;
        float: right;
    }

    .box .inputMaterial:focus {
        outline: none;
    }

    /* LABEL ======================================= */

    .box label {
        color: #999 !important;
        font-size: 18px ;
        font-weight: normal ;
        position: absolute;
        pointer-events: none;
        left: 15px;
        top: 10px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
        margin-left: 0px !important;
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px !important;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px !important;
        font-size: 14px;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px !important;
        font-size: 14px;
        color: #000 !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 430px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 90px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 330px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    /* active state */
    .box .inputMaterial:focus ~ .bar:before, .box .inputMaterial:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialPC:focus ~ .bar:before, .box .inputMaterialPC:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialYN:focus ~ .bar:before, .box .inputMaterialYN:focus ~ .bar:after {
        width: 100%;
    }

    /* active state */
    .box .inputMaterial:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialPC:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialYN:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
}

@media screen and (max-width:480px) {
    .box {
    }

    .formtop {
        margin-top: 40px !important;
    }

    .formrow {
        margin-top: 10px !important;
    }

    .box h1 {
        margin-left: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #2da4da;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
    }

    .box p {
        font-size: 14px;
        text-align: center;
    }

    .box .group {
        position: relative;
        margin-bottom: 35px;
        margin-left: 20px;
    }

    .box .inputMaterial {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 320px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
    }

    .box .inputMaterialPC {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 80px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
        text-align: center;
    }

    .box .inputMaterialYN {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 220px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 3rem !important;
        border-radius: 10px !important;
    }

    .box .postcode {
        width: 80px !important;
        float: left;
    }

    .box .yourname {
        width: 220px !important;
        display: table-cell;
    }

    .postcode {
        width: 80px !important;
        float: left;
    }

    .yourname {
        width: 220px !important;
        display: table-cell;
        float: right;
    }

    .box .inputMaterial:focus {
        outline: none;
    }

    /* LABEL ======================================= */

    .box label {
        color: #999 ;
        font-size: 14px ;
        font-weight: normal ;
        position: absolute ;
        pointer-events: none ;
        left: 15px ;
        top: 10px ;
        transition: 0.2s ease all ;
        -moz-transition: 0.2s ease all ;
        -webkit-transition: 0.2s ease all ;
        margin-left: 0px  
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 310px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 70px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 210px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 23px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    /* active state */
    .box .inputMaterial:focus ~ .bar:before, .box .inputMaterial:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialPC:focus ~ .bar:before, .box .inputMaterialPC:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialYN:focus ~ .bar:before, .box .inputMaterialYN:focus ~ .bar:after {
        width: 100%;
    }

    /* active state */
    .box .inputMaterial:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialPC:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialYN:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
}

@media screen and (max-width:414px) {
    .box {
    }

    .formtop {
        margin-top: 20px !important;
    }

    .formrow {
        margin-top: 10px !important;
    }

    .box h1 {
        margin-left: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #2da4da;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
    }

    .box p {
        font-size: 14px;
        text-align: center;
    }

    .box .group {
        position: relative;
        margin-bottom: 35px;
        margin-left: 20px;
    }

    .box .inputMaterial {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 270px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
    }

    .box .inputMaterialPC {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 270px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
        text-align: center;
    }

    .box .inputMaterialYN {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 270px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
    }

    .box .postcode {
        width: 100px !important;
        float: left;
    }

    .box .yourname {
        width: 270px !important;
        display: table-cell;
    }

    .postcode {
        width: 100px !important;
        float: left;
    }

    .yourname {
        width: 270px !important;
        display: table-cell;
        float: left;
    }

    .box .inputMaterial:focus {
        outline: none;
    }

    /* LABEL ======================================= */

    .box label {
        color: #999 ;
        font-size: 14px ;
        font-weight: normal ;
        position: absolute ;
        pointer-events: none ;
        left: 15px ;
        top: 10px ;
        transition: 0.2s ease all ;
        -moz-transition: 0.2s ease all ;
        -webkit-transition: 0.2s ease all ;
        margin-left: 0px  
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 260px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 90px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 260px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    /* active state */
    .box .inputMaterial:focus ~ .bar:before, .box .inputMaterial:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialPC:focus ~ .bar:before, .box .inputMaterialPC:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialYN:focus ~ .bar:before, .box .inputMaterialYN:focus ~ .bar:after {
        width: 100%;
    }

    /* active state */
    .box .inputMaterial:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialPC:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialYN:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
}

@media screen and (max-width:360px) {
    .box {
    }

    .formtop {
        margin-top: 20px !important;
    }

    .formrow {
        margin-top: 10px !important;
    }

    .box h1 {
        margin-left: 20px;
        font-size: 24px;
        font-weight: 500;
        color: #2da4da;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
    }

    .box p {
        font-size: 14px;
        text-align: center;
    }

    .box .group {
        position: relative;
        margin-bottom: 35px;
        margin-left: 20px;
    }

    .box .inputMaterial {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 250px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
    }

    .box .inputMaterialPC {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 250px;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
        text-align: center;
    }

    .box .inputMaterialYN {
        font-size: 18px;
        padding-left: 10px !important;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 250px !important;
        border: none;
        border-bottom: 1px solid #757575;
        height: 2.5rem !important;
        border-radius: 10px !important;
    }

    .box .postcode {
        width: 100px !important;
        float: left;
    }

    .box .yourname {
        width: 250px !important;
        display: table-cell;
    }

    .postcode {
        width: 100px !important;
        float: left;
    }

    .yourname {
        width: 250px !important;
        display: table-cell;
        float: left;
    }

    .box .inputMaterial:focus {
        outline: none;
    }

    /* LABEL ======================================= */

    .box label {
        color: #999 ;
        font-size: 14px ;
        font-weight: normal ;
        position: absolute ;
        pointer-events: none ;
        left: 15px ;
        top: 10px ;
        transition: 0.2s ease all ;
        -moz-transition: 0.2s ease all ;
        -webkit-transition: 0.2s ease all ;
        margin-left: 0px  
    }

    /* active state */
    .box .inputMaterial:focus ~ label, .box .inputMaterial:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialPC:focus ~ label, .box .inputMaterialPC:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    .box .inputMaterialYN:focus ~ label, .box .inputMaterialYN:valid ~ label {
        top: -10px !important;
        font-size: 14px !important;
        color: #000 !important;
    }

    /* BOTTOM BARS ================================= */
    .box .bar {
        position: relative;
        display: block;
        width: 240px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .box .bar:before, .box .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .postcode .bar {
        position: relative;
        display: block;
        width: 90px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .postcode .bar:before, .postcode .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    .yourname .bar {
        position: relative;
        display: block;
        width: 240px !important;
        margin-left: auto;
        margin-right: auto;
    }

        .yourname .bar:before, .yourname .bar:after {
            content: '';
            height: 2px;
            width: 0;
            bottom: 18px;
            position: absolute;
            background: #009688;
            transition: 0.2s ease all;
            -moz-transition: 0.2s ease all;
            -webkit-transition: 0.2s ease all;
        }

    /* active state */
    .box .inputMaterial:focus ~ .bar:before, .box .inputMaterial:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialPC:focus ~ .bar:before, .box .inputMaterialPC:focus ~ .bar:after {
        width: 100%;
    }

    .box .inputMaterialYN:focus ~ .bar:before, .box .inputMaterialYN:focus ~ .bar:after {
        width: 100%;
    }

    /* active state */
    .box .inputMaterial:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialPC:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }

    .box .inputMaterialYN:focus ~ .highlight {
        -webkit-animation: inputHighlighter 0.3s ease;
        -moz-animation: inputHighlighter 0.3s ease;
        animation: inputHighlighter 0.3s ease;
    }
}