#try-demo p,

#try-demo input,

#try-demo label {

    font-family: "Jost", Sans-serif;

    font-weight: 400;

    font-size: 14px;

    color: #808995;

    display: block;

}



#try-demo p.input-wrapper {

    margin-bottom: 40px;

}



#try-demo p.input-wrapper input,

#try-demo p.input-wrapper input:focus {

    height: 50px;

    border: 1px solid #E0E5EB;

    border-radius: 7px;

    padding: 15px;

    font-size: 16px;

    font-weight: 400;

    color: #474C53;

    background: #fff;

    outline: none;

    transition: all 0.3s ease;

    width: 100%;

}



#try-demo p.input-wrapper input:focus,

#try-demo p.input-wrapper input:hover {

    border-color: #BAC1CB;

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02);

}



#try-demo p.input-wrapper input::-webkit-input-placeholder {

    /* Edge */

    color: #808995;

}



#try-demo p.input-wrapper input:-ms-input-placeholder {

    /* Internet Explorer 10-11 */

    color: #808995;

}



#try-demo p.input-wrapper input::placeholder {

    color: #808995;

}



#try-demo p.input-wrapper label {

    font-size: 14px;

    line-height: 18px;

    color: #B4B8C1;

    margin-bottom: 10px;

    display: block;

}



#try-demo p.text-wrapper {

    margin-top: -15px;

    font-size: 14px;

    line-height: 24px;

    color: #808995;

    margin-bottom: 58px;

}



#try-demo .checkbox-wrapper input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



#try-demo .checkmark {

    position: absolute;

    top: 5px;

    left: 0;

    height: 20px;

    width: 20px;

    background-color: #fff;

    border-radius: 5px;

    border: 2px solid #E0E5EB;

}



#try-demo .checkbox-wrapper:hover input~.checkmark {

    background-color: #fff;

    border-color: #BAC1CB;

}



#try-demo .checkbox-wrapper input:checked~.checkmark {

    background-color: #20DFFE;

    border: none;

}



#try-demo .checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



#try-demo .checkbox-wrapper input:checked~.checkmark:after {

    display: block;

}



#try-demo .checkbox-wrapper .checkmark:after {

    left: 7px;

    top: 2px;

    width: 7px;

    height: 13px;

    border: solid white;

    border-width: 0 2px 2px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

}



#try-demo p.checkbox-wrapper {

    position: relative;

    margin-bottom: 13px;

}



#try-demo p.checkbox-wrapper label {

    padding-left: 28px;

    line-height: 29px;

    cursor: pointer;

}



#try-demo input.mp-submit {

    width: 100%;

    background: #20DFFE;

    border-radius: 7px;

    transition: all 0.3s ease;

    font-size: 19px;

    margin-top: 37px;

    line-height: 24px;

    height: 55px;

    cursor: pointer;

    border: none;

    color: #fff;

    text-shadow: none;

}



#try-demo input.mp-submit:hover {

    background: #0ACFEF;

}



#try-demo p.checkbox-wrapper label a {

    text-decoration: none !important;

    color: #227EF6;

}



/* Errors */

.wn-form-message {

    font-size: 15px;

    font-weight: 400;

    position: relative;

    border-radius: 5px;

    padding: 12px;

    font-family: "Jost",

        Sans-serif;

    font-weight: 400;

}



.wn-form-message.wn-notice {

    background: #FEF0D7;

    color: #E48100;

}



.wn-form-message.wn-success {

    background: #E5F9EC;

    color: #4BC881;

}



.wn-form-message.wn-fail {

    background: #FCE8E8;

    color: #E54A4A;

}



span.wn-form-message-icon {

    line-height: 0;

    display: inline-block;

    position: absolute;

    top: 15px;

}



span.wn-form-message-content {

    display: inline-block;

    line-height: 1.25;

    padding-left: 22px;

}



/* Loading */

.submit-wrapper {

    position: relative;

    margin-bottom: 15px;

}



#try-demo input.mp-submit.loaded {

    padding-left: 8%;

}





.wn-loader {

    border: 3px solid #f3f3f3;

    border-radius: 50%;

    border-top: 3px solid #0ACFEF;

    width: 20px;

    height: 20px;

    -webkit-animation: spin 2s linear infinite;

    animation: spin 2s linear infinite;

    position: absolute;

    top: calc(50% - 10px);

    left: 33%;

    display: none;

}



/* Safari */

@-webkit-keyframes spin {

    0% {

        -webkit-transform: rotate(0deg);

    }



    100% {

        -webkit-transform: rotate(360deg);

    }

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}