@font-face {font-family: 'DINPro';
            src: url('../fonts/DINPro.otf');
}

@font-face {font-family: 'DINPro-Medium';
            src: url('../fonts/DINPro-Medium.otf');
}

@font-face {font-family: 'ParaType - DIN Condensed Light';
            src: url('../fonts/ParaType-DIN-Condensed-Light.otf');
}

@font-face {font-family: 'ParaType - DIN Condensed';
            src: url('../fonts/ParaType-DIN-Condensed.otf');
}

#waterform {
	margin: 0 auto;
	max-width: 700px;
	font-family: 'DINPro';
	color: #0D0855;
}

#waterform .row {
	min-height: 185px;
}

#waterform .col-70 {
	display: inline-block;
	vertical-align: top;
	width: 63%;
	margin-right: 8%;
}

#waterform .col-30 {
	display: inline-block;
    vertical-align: top;
    width: 28%;
    background: #D8D8D8;
    padding: 15px 20px 3px;
    border-radius: 5px;
}

#waterform .slider-tag {
	top: -6px;
    left: -12px;
    position: relative;
	font-weight: 700;
}

#waterform .slider-container {
	position: relative;
	margin: 20px 0;
}

#waterform .slider-container span.notch {
	position: absolute;
	border-left: 3px solid #8FCA43;
	top: -4px;
	height: 20px;
}

#waterform .slider-container span span.notch-label {
	width: 90px;
    display: block;
    position: absolute;
    text-align: center;
    top: 40px;
    left: -40px;
}

#waterform .slider-container.notch-4 span.notch:nth-of-type(1),
#waterform .slider-container.notch-5 span.notch:nth-of-type(1)  {
	left: 0%;
}

#waterform .slider-container.notch-4 span.notch:nth-of-type(2) {
	left: 33.3%;
}

#waterform .slider-container.notch-4 span.notch:nth-of-type(3) {
	left: 66.6%;
}

#waterform .slider-container.notch-4 span.notch:nth-of-type(4),
#waterform .slider-container.notch-5 span.notch:nth-of-type(5) {
	left: 100%;
}

#waterform .slider-container.notch-5 span.notch:nth-of-type(2) {
	left: 25%;
}

#waterform .slider-container.notch-5 span.notch:nth-of-type(3) {
	left: 50%;
}

#waterform .slider-container.notch-5 span.notch:nth-of-type(4) {
	left: 75%;
}

#waterform #products-frame {
	position: relative;
	border: 3px solid #8FCA43;
	padding: 40px 0px;
	min-height: 320px;
	overflow: hidden;
	z-index: 2;
}

#waterform #products-frame .inner {
	position: absolute;
    width: 100%;
    height: 100%;
	right: -700px;
	z-index: 1;
	transition: all 0.2s ease-in-out;
}

#waterform #products-frame .inner.view {
	right: 0px;
	top: 15px;
} 

#waterform .product-frame.col-33 {
	width: 32%;
	display: inline-block;
	vertical-align: top;
}

#waterform .product-frame.col-50 {
	width: 49%;
	display: inline-block;
	vertical-align: top;
}

#waterform .product-frame {
	text-align: center;
}

#waterform .product-frame img  {
	width: 100%;
    height: auto;
    max-width: 300px;
}

#waterform .product-frame.col-33 img {
    max-width: 200px;
}

#waterform .product-frame.col-50 img {
    max-width: 300px;
}

#waterform .product-frame .product-name {
	text-align: center;
	font-weight: 700;
}

#waterform a.product-link {
	background: #8FCA43;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 5px 10px;
    margin: 1px 2px;
	z-index: 10;
}

#waterform button {
	border: 0;
	background: #0D0855;
	color: #ffffff;
	text-transform: uppercase;
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 10px 20px;
	z-index: 10;
}

#waterform button#submit-results {
	top: 19px;
	font-family: 'ParaType - DIN Condensed';
	font-size: 18px;
}

#waterform button#clear-results {
	top: -19px;
	font-family: 'ParaType - DIN Condensed';
	font-size: 18px;
}

#waterform .slider-container .slider {
    overflow: initial;
}

#waterform .ui-slider .ui-slider-handle {
	border: 0;
	background: #0D0855;
	border-radius: 0;
}

#waterform .ui-widget-content {
    border: 0;
    background: #D8D8D8;
    height: 12px;
	border-radius: 0;
}

#waterform .ui-slider .ui-slider-handle:before,
#waterform .ui-slider .ui-slider-handle:after {
	content: none;
}

#waterform .ui-slider .ui-slider-handle {
    width: 1.7em;
    height: 1.7em;
	
}

#waterform .ui-slider-horizontal .ui-slider-handle {
    top: -.5em;
    margin-left: -.6em;
}

@media screen and (max-width: 690px) {

	#waterform .col-70,
	#waterform .col-30	{
		display: block;
		width: 100%;
		padding: 0;
	}
	
	#waterform .col-70 {
		margin-bottom: 75px;
	}

	#waterform .col-30	{
		width: 94%;
		padding: 6px 10px 1px;
		margin-bottom: 30px;
		font-size: 13.5px;
	}
	
	#waterform .slider-tag {
		left: 0px;
	}
	
	#waterform .slider-container {
		position: relative;
		margin: 20px 5px 45px 18px;
		width: 85%;
	}
	
	#waterform .slider-container span span.notch-label {
		font-size: 12px;
	}
	
	#waterform #products-frame {
		overflow-y: auto;
	}

}
	
@media screen and (max-width: 490px) {
	
	#waterform .product-frame.col-50,
	#waterform .product-frame.col-33 {
		width: 100%;
		display: block;
		margin-bottom: 10px;
	}
	
	#waterform .product-frame.col-50:last-of-type,
	#waterform .product-frame.col-33:last-of-type {
		margin-bottom: 40px;
	}

}