.banner {background-image: url(../images/banners/readymix.jpg);}

/* Intro ––––––––––––––– */
.intro .three-col .col3 {
	margin-top: -71px;
}

.intro .col3 .white{
	padding: 15px 20px;
	background: #FFF;
	margin-bottom: 3px;
	-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
}

.intro .col3 p.bs-en {margin-bottom: 10px;}

.intro .col3 ul {margin-bottom: 10px;}

.intro .col3 .bsi {position: absolute; top: 0; right: 0; width: 100px;}
.intro .col3 .bsi p {display: none;}


/* Main ––––––––––––––– */
#readymix_section .inner {margin-bottom: -25px;}
.main .col, .concrete-blocks .col{width: 31.5%; float: left; margin-right: 2.75%; position: relative;}
.main .col3, .concrete-blocks .col3{float: right; margin-right: 0;}

.mix {margin-bottom: 25px;}

.mix p {margin-top: 5px;}
.mix p.ideal {margin-top: 10px;}

.main .calc_title {margin-bottom: 15px;}

/* Concrete blocks ––––––––––––––– */
.concrete-blocks {background: #F6F6F6;}
.concrete-blocks .col2, .concrete-blocks .col3
{
	line-height: 0px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
}

/* Concrete Calc ––––––––––––––– */
#calc_cover {padding-top: 15px;}

body.calc_visible #calc_cover
{display: block;}

#calc_wrapper
{
	width: 100%;
	position: absolute;
	overflow: auto;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	top: 50%;
	margin-top: -187px;
}

#calc
{
	width: 90%;
	max-width: 650px;
	margin: 0 auto;
	position: relative;
	background: #FFF;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 55px;
	max-height: 100%;
	overflow: auto;
}

#calc .popup_close
{
	position: absolute;
	top: 25px;
	right: 25px;
	background-position: -30px 0px;
}

.calc_row
{
	padding-right: 200px;
	position: relative;
	margin-bottom: 15px;
}

.select-style
{
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	width: 180px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
	background-color: #E6E6E6;
}

.select-style::before
{
	display: block;
	content: " ";
	width: 14px;
	height: 8px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -4px;
	background: url(../images/general/arrows.png);
	background-image: url(../images/general/arrows.svg), none;
	background-position: 0 -108px;
}

.calc_row select
{
	position: relative;
	font-size: 13px;
	line-height: 38px;
	color: #333;
	padding: 0px 20px;
	width: 100%;
	border: none;
	box-shadow: none;
	background-color: transparent;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/*outline: none !important;*/
	cursor: pointer;
}

.calc_row input
{
	width: 100%;
	font-size: 13px;
	line-height: 38px;
	color: #333;
	padding: 0 20px;
	display: block;
	width: 100%;
	background: #F2F2F2;
	outline: none !important;
	border: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.calc_row a
{
	font-weight: 300;
	display: block;
	position: relative;
	text-decoration: none;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
	line-height: 38px;
	padding: 0 20px;
	font-size: 13px;
}

.calc_row a::before
{
	display: block;
	content: " ";
	width: 24px;
	height: 24px;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
	background: url(../images/general/arrows.png);
	background-image: url(../images/general/arrows.svg), none;
	background-position: 0 -60px;
}

.calc_row a#calc_calculate
{
	background: #333;
}

.calc_row a#calc_reset
{
	background: #808080;
	position: absolute;
	right: 0;
	top: 0;
	width: 180px;
}

#calc p
{
	font-size: 1.125em;
}

#calc p.success
{
	color: #00843F;
	margin-bottom: 10px;
}

#calc p.error
{
	color: #ea2323;
}
/*****************************************************************************************************
									RESPONSIVE
*****************************************************************************************************/
/* Relative Calc Wrapper ––––––––––––––– */
@media screen and (max-height: 560px) {	
#calc_wrapper {position: relative; margin-top: 0; top: auto;}

}
/* End Relative Calc Wrapper ––––––––––––––– */



@media screen and (max-width: 1060px) {	
.intro .col3 .bsi {width: 80px;}
}




/* iPad Landscape ––––––––––––––– */
@media screen and (max-width: 1024px) {	
.intro .three-col .col3 {margin-top: 0px;}

}
/* End iPad Landscape ––––––––––––––– */



/* iPad Landscape -1px ––––––––––––––– */
@media screen and (max-width: 1023px) {
/* Intro ––––––––––––––– */
.intro .three-col .col1 {width: 48%; margin-right: 0;}
.intro .three-col .col2 {width: 48%; float: right; margin-right: 0;}
.intro .three-col .col3 {padding-top: 25px; width: 100%; float: none; clear: both;}
.intro .col3 .text > p br {display: none;}
.intro .col3 ul {margin-bottom: 0;}
.intro .col3 .text > p.licence {display: none;}
.intro .col3 .bsi {width: 100px;}
.intro .col3 .bsi p {display: block; text-align: center;}

/* Main ––––––––––––––– */
.main .col{width: 49%; margin-right: 0; margin-bottom: 25px;}
.main .col2 {float: right;}
.main .col3 {float: none; clear: both;}

/* Concrete blocks ––––––––––––––– */
.concrete-blocks .col1 p {width: 49%;}
.concrete-blocks .col1 {width: 100%; float: none; margin-bottom: 25px;}
.concrete-blocks .col2, .concrete-blocks .col3 {width: 49%; margin-right: 2%;}
.concrete-blocks .col3 {margin-right: 0; float: right;}


}
/* End iPad Landscape -1px ––––––––––––––– */




/* iPad Portrait -1px ––––––––––––––– */
@media screen and (max-width: 767px) {	
/* Banner ––––––––––––––– */
.banner {background-image: url(../images/banners/mobile/readymix.jpg);}

/* Intro ––––––––––––––– */
.intro .three-col .col3 {padding-top: 0; margin-top: 25px;}

/* Main ––––––––––––––– */
.main .col1, .main .col2, .concrete-blocks .col{width: 100%; margin-right: 0; margin-bottom: 20px; float: none;}
.main .col3 {width: 100%;}

/* Concrete blocks ––––––––––––––– */
.concrete-blocks .col1 p {width: 100%;}
.concrete-blocks .col3 {margin-bottom: 0;}

}
/* End iPad Portrait -1px ––––––––––––––– */




/* Intro bsi ––––––––––––––– */
@media screen and (max-width: 550px) {	
.intro .col3 .bsi {position: relative; width: 100%; margin-top: 15px;}
.intro .col3 .bsi p {text-align: left;}
.intro .col3 .bsi p br {display: none;}

/* Concrete calc ––––––––––––––– */
#calc_wrapper, #calc {max-height: 100%;}
#calc {padding: 50px 30px 30px 30px;}
.calc_row {padding-right: 0;}
.calc_row .select-style {position: relative; width: 100%;}
.calc_row a#calc_calculate, .calc_row a#calc_reset {width: 100px; text-align: center;}
.calc_row a#calc_calculate {margin-bottom: 5px;}
.calc_row a::before {display: none;}

}
/* End Intro bsi ––––––––––––––– */