/*
Theme Name: Web Spinner UK
Protected by Web Spinner UK
Custom Build for Client: Web Spinner UK
Author: Sami Swain
Author URI: https://www.webboss.co.uk
Template: webboss
Version: 7.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */

@font-face {
    font-family: 'UKNumberPlate';
    font-style: normal;
    font-weight: normal;
    src: local('UKNumberPlate'), url('UKNumberPlate.woff') format('woff');
}

#valuation-form {
    margin-top: 30px;
}

#valuation-form .valuation-form-block {
    position: relative;
    clear: both;
    display: none;
}

#valuation-form.step-1 .valuation-form-block.step-1 {
    display: block;
}

#valuation-form.step-2 .valuation-form-block.step-2 {
    display: block;
}

#valuation-form.step-3 .valuation-form-block.step-3 {
    display: block;
}

#valuation-form.step-4 .valuation-form-block.step-4 {
    display: block;
}

#valuation-form .valuation-form-block.step-1 .registration-number {
    width: 430px ;
    height: 90px ;
    font-size: 75px ;
    line-height: 60px ;
    text-align: center ;
    border: 6px solid #000 ;
    -webkit-border-radius: 12px ;
    -moz-border-radius: 12px ;
    border-radius: 20px ;
    border-width: 3px ;
    padding-left: 45px ;
    background: #eeda0c url(./GB-plate.png) no-repeat left -6px ;
    text-transform: uppercase ;
    color: #555;
    font-family: "UKNumberPlate";
}

#valuation-form .valuation-form-block.step-1 .registration-number-placeholder {
    color: #000000;
    position: absolute;
    z-index: 1000;
    font-size: 24px;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    text-align: center;
    top: 34px;
    left: 32%;
}

#valuation-form .valuation-step-title h1 {
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    text-transform: none;
    text-align: center;
}

#valuation-form .valuation-step-form {
    width: 100%;
    margin: 0 auto;
    clear: both;
    margin-top: 45px;
}

#valuation-form .valuation-form-block.step-1 .valuation-step-form {
    position: relative;
    text-align: center;
}

.valuation-form-block .help-container {
    display: none;
    padding: 0;
    width: 500px;
    margin: 0 auto;
    font-size: 13px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #efefef;
    color: #4d4d4d;
    font-family: "Open Sans",sans-serif;
}
.valuation-form-block .help-container .help-tip-container {
    padding: 6px 0px 6px 15px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 98%;
    font-weight: bold;
    text-align: center;
}
.valuation-form-block .help-container .help-tip-container:before {
    content: '';
    width: 1px;
    height: 1px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: 0px;
    border-bottom: 0px solid transparent;
    border-top: 12px solid #efefef;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

#valuation-form .submit-step {
    background-color: #29125a;
    color: #fff;
    border-radius: 100px;
    border-width: 4px !important;
    font-size: 20px;
    width: 200px;
    text-align: center;
    padding-left: 12px;
    height: 90px;
    margin-top: 0;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    border: 6px solid #000;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: inline-block;

    -webkit-backface-visibility: hidden;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: pulsate;
    -webkit-animation-iteration-count: infinite;
    -ms-backface-visibility: hidden;
    -ms-animation-duration: 3s;
    -ms-animation-delay: 1s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    -ms-animation-name: pulsate;
    -ms-animation-iteration-count: infinite;
    -o-backface-visibility: hidden;
    -o-animation-duration: 3s;
    -o-animation-delay: 1s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    -o-animation-name: pulsate;
    -o-animation-iteration-count: infinite;
    backface-visibility: hidden;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-name: pulsate;
    animation-iteration-count: infinite;

}

#valuation-form .submit-step .chevron {
    display: block;
    position: relative;
    top: 4px;
    font-size: 36px;
    width: 26px;
    float: right;
    line-height: 13px;
    font-family: "Open Sans",sans-serif;
}


#valuation-form .center-get-valuation-btn {
    width: 70%;
    margin: 0 auto;
}

#valuation-form .valuation-form-block.step-4 {

}

#valuation-form .valuation-conditions h2 {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    text-decoration: none;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

#valuation-form .valuation-conditions h3 {
    font-size: 15px;
    line-height: 1.02857143;
    margin: 0;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
    color: #000;
    font-weight: 500;
}

#valuation-form .valuation-conditions li {
    font-weight: 600;
    margin-top: 2px;
    padding-left: 7px;
    padding: 0px;
    position: relative;
    right: 20px;
}

#valuation-form .valuation-conditions ul {
    padding-top: 0;
    margin-left: 0;
    padding-left: 20px;
    list-style-image: url(tick-green.png);
    font-family: "Open Sans",sans-serif;
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 20px;
    box-sizing: border-box;
    line-height: 1.42857143;
}

#valuation-form .valuation-form-block.step-4 .your-valuation {
    display: inline-block;
    margin: 0;
    padding: 0;
    top: 0;
    width: 400px;
    vertical-align: top;
}
#valuation-form .valuation-form-block.step-4 .valuation-conditions {
    margin: 0;
    padding: 0;
    margin-left: 30px;
    width: auto;
    position: absolute;
    display: inline-block;
}

#valuation-form .valuation-form-block.step-2 .submit-step,
#valuation-form .valuation-form-block.step-3 .submit-step {
    margin-top: 30px;
    height: 50px;
    width: 300px;
    text-align: left;
    border: 0;
}

#valuation-form .valuation-form-block.step-2 .submit-step .chevron,
#valuation-form .valuation-form-block.step-3 .submit-step .chevron {
    top: 0px;
}

#valuation-form .valuation-form-block.step-1 .plate-position {
    display: inline-block;
}

#valuation-form .valuation-form-block.step-1 .submit-position {
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
}

#valuation-form .valuation-form-row {
    clear: both;
    width: 70%;
    margin: 0 auto;
}

#valuation-form .valuation-form-row-label {
    float: left;
    width: 30%;
    margin-top: 25px;
}

#valuation-form .valuation-form-row-label.one-line {
    float: none;
    width: 100%;
}

#valuation-form .valuation-form-row-label label {
    font-family: "Open Sans",sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    color: #000;
    margin-bottom: 0;
    vertical-align: middle;
    margin-top: 0;
}

#valuation-form .valuation-form-row-input {
    float: left;
    width: 70%;
    margin-top: 25px;
}

#valuation-form .valuation-form-row-input.one-line {
    margin-top: 0;
    width: 100%;
    float: none;
}

#valuation-form .valuation-form-row-input p {
    margin: 0;
}


#valuation-form .valuation-form-block.step-2 .radio-container {
    display: inline-block;
    width: auto;
    padding: 0px;
    margin-right: 15px;
}

.custom-radio:checked,
.custom-radio:not(:checked) {
    position: absolute;
    left: -9999px;
}
.custom-radio:checked + label,
.custom-radio:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
.custom-radio:checked + label:before,
.custom-radio:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #bbb6b6;
    border-radius: 100%;
    background: #fff;
}
.custom-radio:checked + label:after,
.custom-radio:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #29125a;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.custom-radio:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.custom-radio:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


#valuation-form .large-input {
    padding: 9px 20px;
    box-sizing: border-box;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#valuation-form .long-input {
    min-width: 400px;
}

.valuation-label-details {
    font-weight: normal;
    font-size: 14px;
    margin-left: 7px;
}

#valuation-form .valuation-form-block.step-4 .container-with-arrow {
    min-height: 245px;
    width: 100%;
    background-color: #29125a;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 60px;
    padding: 0;
    padding-top: 45px;
    position: relative;
    text-align: center;
}


#valuation-form .valuation-form-block.step-4 .container-with-arrow p {
    display: contents;
}

#valuation-form .valuation-form-block.step-4 .print-link {

}

#valuation-form .valuation-form-block.step-4 .print span {
    /*font-family: "Open Sans",sans-serif;
    padding-top: 5px*/
}

#valuation-form .valuation-form-block.step-4 .print span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAolBMVEWAgID////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////T0Eo3AAAANXRSTlMAT4+/f89vX9/vPxDCpyID/cXSYdv7IbL3cNNzqddbBHcK4avk6OYe9B3pGzcvWk3LxhVOE2KI7q8AAACVSURBVHhejdBHEsIwDEBRKQY7gTR6771X3f9qJIzlmAADb+X5C2ksSIWBMIImaJWqY3R9rl4NDOmaqv6sPSEaA2HU20J0YBLPnJxWDGUqQQ7SW8V+9KEO/RHXjxPGBYvk6k2LxtzlmvtFUqMFESlJKX4tAVaIaxWitpFbxJ2+w553HezrHHnZ6dclz2S5cL1i5nZPwgMZhBCQf9BFWgAAAABJRU5ErkJggg==");
    display: inline-block;
    width: 21px;
    height: 21px;
    float: right;
    margin-right: 20px;
}

#valuation-form .valuation-form-block.step-4 .your-valuation-amount {
    color: #fff;
    font-size: 80px;
    line-height: 0.8em;
    font-weight: normal;
    font-family: "Open Sans",sans-serif;
    margin-top: 20px;
    margin-bottom: 20px;
}

#valuation-form .valuation-form-block.step-4 .your-valuation-txt {
    padding-bottom: 20px;
    font-size: 20pt;
    line-height: .8em;
    color: #fff;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
}

#valuation-form .valuation-form-block.step-4 .your-valuation-guaranteed {
    font-size: 16px;
    vertical-align: middle;
    margin-top: 0;
}

#valuation-form .valuation-form-block.step-4 .tick {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 7px;
  /*  background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM0QTA4ODIwMUQ1QTExRTQ5MkU1RUY4NDQ1NDdFRENEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM0QTA4ODIxMUQ1QTExRTQ5MkU1RUY4NDQ1NDdFRENEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzRBMDg4MUUxRDVBMTFFNDkyRTVFRjg0NDU0N0VEQ0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzRBMDg4MUYxRDVBMTFFNDkyRTVFRjg0NDU0N0VEQ0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4h0dq4AAAA4UlEQVR42mJsaGhgIAY0aJ3PBlLbGq4Z3mciUoMtkJoMxOeBbH4mIjSwA6lZQMwIxNOANn0kxqYqINYA4ttA3AQSYCJgixaQqgDi/0CcDrTlB15NQA0gudlAzAbE84Ea9sPkmKAKuIBYBE1fBhBbAfFLIC5FlmACaQDSm4F4H5AtCjVEGki1Q9XkA215h6IJiPmBWA6IdYF4L1TjVCDmg8bLSnSnMwEFnwNpByC+A9V4Hoj9gfgLEGdi8y/ET9cMnyJplIbK1QLFH+HUhEXjaWgKYMCrCU1jApD9F5cmgAADAHHsSVOjcwabAAAAAElFTkSuQmCC") no-repeat center 50%;*/
  background: #fff url("tick-green.png") no-repeat center 50%;
    display: inline-block;
    background-color: #f8f8f8
}

#valuation-form .valuation-form-block.step-4 .tick-container {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 12px;
    display: inline-block;
}

#valuation-form .valuation-form-block.step-4 .tick-text {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    margin-left: 10px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-family: "Arial Rounded MT Bold","Arial Rounded MT",Arial,sans-serif;
}

#valuation-form .valuation-form-block.step-4 .transaction-fee {
    font-size: 8pt;
    font-weight: normal;
    font-family: "Open Sans",sans-serif;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 1165px) {
    #valuation-form .valuation-form-block.step-1 .registration-number-placeholder {
        left: 22%;
    }
}

@media screen and (max-width: 910px) {
    /* Ipad pro */
    #valuation-form .valuation-form-block.step-2 .submit-step {
        width: 100%;
    }
}

@media screen and (max-width: 760px) {
    #valuation-form .valuation-form-block.step-1 .registration-number {
        width: 100%;
    }
    #valuation-form .valuation-form-block.step-1 .submit-position {
        width: 100%;
        margin-left: 0;
    }
    .valuation-form-block .help-container {
        width: 100%;
    }
    #valuation-form .submit-step {
        width: 100%;
    }

    #valuation-form .valuation-form-block.step-3 .submit-step {
 		width: 100%;
    }

    #valuation-form .valuation-form-block.step-4 .valuation-conditions {
    	position: relative;
    	margin-top: 40px;
	}

	#valuation-form .valuation-form-block.step-4 .print-link {
		display: none;
	}
}

@media screen and (max-width: 450px) {
    #valuation-form .valuation-form-block.step-1 .registration-number-placeholder {
        left: 40px;
        top: 20px;
    }
    #valuation-form .valuation-form-row {
        width: 100%;
    }

	#valuation-form .valuation-form-block.step-4 .your-valuation {
		width: 100%;
	}

	#valuation-form .valuation-form-block.step-4 .your-valuation-txt {
		padding-bottom: 0px;
	}

	#valuation-form .valuation-form-block.step-4 .your-valuation-amount {
		font-size: 50px;
	}

	#valuation-form .valuation-form-block.step-4 .tick-text {
		height: auto;
		font-size: 14px;
	}
	#valuation-form .valuation-form-block.step-4 .transaction-fee {
		margin-top: 20px;
		line-height: 1;
	}
	#valuation-form .valuation-form-block.step-4 .container-with-arrow {
		padding-right: 5px;
		padding-left: 5px;
	}
	#valuation-form .valuation-form-block.step-4 .tick-container {
		margin-top: 0;
		margin-bottom: 0;
	}
	#valuation-form .long-input {
		min-width: 0;
    	width: 100%;
	}
	#valuation-form .valuation-form-row-label label {
	    font-size: 15px;
	}
	.valuation-label-details {
		font-size: 10px;
	}
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(1)
    }

    15% {
        -webkit-transform: scale(1.03)
    }

    30% {
        -webkit-transform: scale(1)
    }

    45% {
        -webkit-transform: scale(1.03)
    }

    60% {
        -webkit-transform: scale(1)
    }

    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes pulsate {
    0% {
        -moz-transform: scale(1)
    }

    15% {
        -moz-transform: scale(1.03)
    }

    30% {
        -moz-transform: scale(1)
    }

    45% {
        -moz-transform: scale(1.03)
    }

    60% {
        -moz-transform: scale(1)
    }

    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes pulsate {
    0% {
        -ms-transform: scale(1)
    }

    15% {
        -ms-transform: scale(1.03)
    }

    30% {
        -ms-transform: scale(1)
    }

    45% {
        -ms-transform: scale(1.03)
    }

    60% {
        -ms-transform: scale(1)
    }

    100% {
        -ms-transform: scale(1)
    }
}

@-o-keyframes pulsate {
    0% {
        -o-transform: scale(1);
    }

    15% {
        -o-transform: scale(1.03);
    }

    30% {
        -o-transform: scale(1);
    }

    45% {
        -o-transform: scale(1.03);
    }

    60% {
        -o-transform: scale(1);
    }

    100% {
        -o-transform: scale(1);
    }
}

@keyframes pulsate {
    0% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.03)
    }

    30% {
        transform: scale(1)
    }

    45% {
        transform: scale(1.03)
    }

    60% {
        transform: scale(1)
    }

    100% {
        transform: scale(1)
    }
}