/* OVERALL */

/*@font-face {
    font-family: Kievit;
    src: url(../font/KievitOT-Regular.otf);

}
@font-face {
    font-family: Kievit;
    src: url(../font/KievitOT-ExtraBold.otf);
	font-weight: bold;
}*/

*{padding:0; margin:0;}
html, body{
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 12px;
	color:#303030;
}
a, a:hover{text-decoration:none; outline:0;}
/*h1,h2,h3,h4,h5,h6 {font-family: "Arial black", arial;}
h1{
	font:bold 18px 'Arial black',arial; 
	color:#303030; 
}*/
.clearer{clear:both;}


/* BOXES */
#santander-calc-wrapper{
	position:relative;
	color: #303030;
	width: 223px;
    height: 600px;
}
#santander-calc-wrapper.calc-type-4,
#santander-calc-wrapper.calc-type-5{
    height: 660px;
}
#calc-icon-container-wrapper{
	display: none;
}

#santander-calc-wrapper .abs{position:absolute;}
#santander-calc{
	padding:0px;
	background-color: #fff;
	border-radius:0px;
	-moz-border-radius:5px; 
	-webkit-border-radius:5x; 
	-khtml-border-radius:5px; 
	top:0px;
	left:0px;
	box-sizing: border-box;
	overflow:hidden;
}
#calc-icon{
	width:60px;
	height:60px;
	margin: 0;
	background-size:contain!important;
}

#calc-icon-container{
	background: #ec0000;
	padding: 5px;
	margin:20px auto;
	border-radius: 50%;
	width: 60px;
	height: 60px;
}
#santander-calc-wrapper.calc-type-2 #calc-icon-container{
	visibility: hidden;
	height: 20px;
} /* FRITID */
 
#loading-content-wrapper{
	padding:0;
}#loading-content-wrapper.loading{display:none;}
#slider-container{
	padding:10px;
	margin-bottom:0;
}

/* Santander graphic block*/

.santander-block{
	position: relative;
	background: transparent;
	margin-bottom: 55px;
	margin-top: 20px;
}
	.santander-block:before,
	.santander-block:after {
		content: "";
		position: absolute;
		background: #ec0000;
	}
	.santander-block:before{
	    top: 50%;
	    left: 0;
	    bottom: 0%;
	    width: 10%;
	}
	.santander-block:after{
		width: 90%;
		right: 0;
		bottom: 0;
		top: 0;
	}

/* Info overlay */
#info-icon{
	__display:none;
	padding:2px 6px;
	background:#e0e0e0;
	color:#888;
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -khtml-border-radius:2px; 
}
#info-overlay{
	padding:10px;
    background: rgba(0,0,0,0.8);
	__color:#303030;
	color:#fff;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	-khtml-border-radius:0px; 
	z-index:101;
	z-index:99999;
	display:none;

	top: 40px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
/*#info-overlay h4{font:bold 12px arial;}*/
#info-overlay p{margin-bottom:10px;}
#info-overlay #overlay-close-btn{
	color: #fff;
    float: right;
    background: black;
    margin: 0;
    box-sizing: border-box;
    padding: 5px 10px;
}

#info-overlay #overlay-main-content{
	font-size: 11px;
	top: 0%;
	position: relative;
}

/* CONTENT */
#santander-calc h2{
/*font:bold 12px arial;*/ 
margin-bottom:16px; color:#303030;
}

#slider-container {padding: 0 30px;}

#santander-calc .slider-wrapper{
	position:relative;
	height:55px;
	margin: 0;
	font-size: 13px;
	margin: 0;
}

	#santander-calc .slider-wrapper.fixed{}
	#santander-calc .slider-wrapper.fixed .slider,
	#santander-calc .slider-wrapper.fixed .ajd-btn{
	}
	#santander-calc .slider-wrapper.active{}



	/* Adjustments buttons */
	#santander-calc #slider-container .slider-wrapper .ajd-btn {
		position: absolute;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		font-size: 14px;
		background-color: transparent;
		padding: 0;
		margin: 0;
		top: 24px;
		width: 10px;
		height: 10px;
	}

	#santander-calc #slider-container .slider-wrapper .ajd-btn::before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		color: #303030;
		font-weight: bold;
	}
	#santander-calc #slider-container .slider-wrapper .ajd-btn.plus::before {content: "+";}
	#santander-calc #slider-container .slider-wrapper .ajd-btn.minus::before {content: "-";}

		/* Adjustments buttons - position */
		#santander-calc #slider-container .slider-wrapper .ajd-btn.minus{left: -21px;}
		#santander-calc #slider-container .slider-wrapper .ajd-btn.plus{right: -21px;}

#santander-calc .slider-wrapper .label{
	margin-bottom: 9px;
}

#santander-calc .slider-wrapper .slider{
	margin-top:5px;
	height: 10px;
	letter-spacing: 0.5px;
	border-radius: 5px;
}


#santander-calc #monthly-cost {
	padding: 0 20px 20px;
	box-sizing: border-box;
}
	#santander-calc #monthly-cost .header,
	#santander-calc #monthly-cost .value{
		text-align: left;
	}

		#santander-calc #monthly-cost .header{
			font-size: 20px;
		}
		#santander-calc #monthly-cost .value{
			margin:0px auto;
			font-size: 40px;
			font-weight:bold;
			font-family: 'Open Sans', Arial, sans-serif;
			position:relative;
		}

		#santander-calc #monthly-cost .value .month-suffix{
			font-size: 12px;
			font-weight:bold;
			text-transform: lowercase;
			font-style: normal;
		}

/* Loader */
#santander-calc #overlay-loader{
	background:#fe0000;
	color:#666;
	text-align:center;
	background:url(/calc/img/ajax-loader-grey.gif) 50% 60px no-repeat;
}
#santander-calc #loading-content-wrapper.loading .slider-wrapper,
#santander-calc #loading-content-wrapper.loading #monthly-cost{display:none;}

#santander-calc .fees{
	text-align:left;
	padding: 0 20px;
} 
	#santander-calc .fees a{
		color: #fff;
	}
	.calc-bg-1 #santander-calc .fees a{
		color: #303030;
	}


/* Background*/
#santander-calc-wrapper.calc-bg-1 #santander-calc {background: #000;} /* solid colour */
#santander-calc-wrapper.calc-bg-2 #santander-calc {background-image:url(/calc/img/santander-bg/car-full.jpg);} /* image */
	#santander-calc-wrapper.calc-bg-2 #santander-calc:before{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0);
	}


/* ADJUSTMENTS */
#santander-calc-wrapper.calc-type-2  .slider-wrapper .label{
}

.calc-size-2 .ad-box{display:none;}
#santander-calc-wrapper.calc-size-2{width:212px;}

#santander-calc-wrapper.calc-color-2 #santander-calc .value{color:#000;}
#santander-calc-wrapper.calc-color-2 #santander-calc #monthly-cost .value{color:#444;}
#santander-calc-wrapper.calc-color-2 #santander-logo-2{background:url(/calc/img/santander-footer-grey.png) 50% 50% no-repeat #373737;}
#santander-calc-wrapper.calc-color-2 #sub-footer{background:#373737;}
#santander-calc-wrapper.calc-color-2 .ui-slider-horizontal .ui-slider-handle {background:url(/calc/img/slider-handle-grey.png) no-repeat;}

/* MOBILE */
@media only screen and (max-width: 300px) {  
	h1{display:none;}
	#santander-calc-wrapper #slider-wrapper .ui-slider-horizontal .ui-slider-handle { top: -6px; margin-left: -15px; background-position:50% 60%; width:30px; height:20px;}

}
/*JQUERY OVERRIDE*/

.ui-slider-horizontal {
	background: #c9cac5;
	border-radius: 0;
	border: none;
	
}
.ui-slider-horizontal .ui-slider-handle {
    top: -8px;
    margin-left: -9px;
	background: #fff;
	border: 4px solid #ec0000;
	width: 15px;
	height: 15px;
	border-radius: 50%;
    cursor: pointer;
    z-index: 100;

}
.ui-slider .ui-slider-range {
   background: #ec0000;
   border-radius: 5px;
}

/* VARIANT 2 (image bg)*/
#santander-calc-wrapper.calc-bg-2{
	position:relative;
	color: #fff;
}
#santander-calc-wrapper.calc-bg-2 #calc-icon{
	width:60px;
	height:60px;
	margin:0;
	background-size:contain!important;
}
#santander-calc-wrapper.calc-bg-2 .ui-slider-horizontal {
    __background: rgba(255,255,255,0.3);
    background: #e9ebe5;
}

#santander-calc-wrapper.calc-bg-2 #santander-calc #overlay-loader{
	color: #fff;
}

/* OVERRIDE FOR SANTANDER */

/* Ajd buttons*/
#calc-123456789 #santander-calc #slider-container .slider-wrapper  .ajd-btn{
	position: absolute;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}
#calc-123456789 #santander-calc #slider-container .slider-wrapper  .ajd-btn:before{
	position: relative;
	top: auto;
	left: auto;
	transform: none;
}

	#calc-123456789 #santander-calc #slider-container {padding: 0 20px;}
	#calc-123456789 .calc-bg-2 #santander-calc #slider-container .slider-wrapper .ajd-btn:before{color: #fff;} /* Calc with image background*/
#calc-123456789 #santander-calc #slider-container .slider-wrapper  .ajd-btn.minus{  
	left:-31px;
	top:18px;
	padding-left:15px;
}
#calc-123456789 #santander-calc #slider-container .slider-wrapper  .ajd-btn.plus{
	right:-31px;
	top:18px;
	padding-right:15px;
}


#calc-123456789 #santander-calc-wrapper.calc-bg-1 #santander-calc{
	background-color: #fff;
}


