/* CSS Responsive */

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

html {-webkit-text-size-adjust: none;}
.wrapper {width: auto; margin: 0 20px;}

/* Header */
header {height: 430px; background-size: cover;}
header .text {width: 380px; margin: 65px 0 0;}
header h1 {font: 26px/26px 'HelveticaNeueLTStdBdCn';}
header h2 {font: 74px/68px 'HelveticaNeueLTStdBlkCn';}
header .for {font-size: 28px; line-height: 26px; margin: 0 10px 10px;}

/* Brands */
.brands_wrap .brands {float: left; width: 100%; text-align: center; padding-bottom: 20px;}
.brands_wrap .brands:after {content: none;}
.brands_wrap .brands img {display: block; margin: 0 auto 10px;}

/* Our products */
.product_list li {font: 26px/30px 'HelveticaNeueLTStdBdCn';}
.product_list li.solvents a {padding-top: 26px; height: 74px;}
.product_list li.solvents {margin: 0; font-size: 18px; line-height: 24px;}

/* Content */
section .description .name {font: 60px/50px 'HelveticaNeueLTStdBdCn';}
section .description .name span {font-size: 34px; line-height: 38px;}
section .description .button {width: 100%;}

.section1 {padding: 40px 0; background: #fff url(../images/12yards.png) left bottom no-repeat; background-size: 50%;}
.section1 .image {display: none;}
.section1 .description {float: right; width: 45%; margin: 0;}


.section2 {background: #ff5e80; padding-top: 40px; position: relative; overflow: hidden;}
.section2 .image {width: 54%;}
.section2 .description {float: left; width: 40%; margin: 30px 0 0;}

.section2 .image:after {
	content: "";
	background: #fff5f4;
	width: 280px; height: 150%;
	right: 30px;
	top: -150px;
}


.section3 {padding: 40px 0 0;}
.section3 .image {float: left; width: 44%; text-align: center;}
.section3 .description {float: right; width: 55%; margin: 30px 0 0;}

}





@media screen and (max-width: 720px) {
/* Header */
header {background: #f1deda; height: auto; padding: 30px 0;}
header .text {float: right; width: 100%; margin: 0;}
header h1 {font: 22px/22px 'HelveticaNeueLTStdBdCn';}
header h2 {font: 54px/44px 'HelveticaNeueLTStdBlkCn';}
header .for {font-size: 24px; line-height: 26px; margin: 0 10px 10px;}

/* Description site */
.description_site {font-size: 18px; line-height: 22px; padding: 30px 0;}
.description_site b {margin: 0 0 15px;}

/* Ratewrap */
.ratewrap {width: 100%; margin: 0 0 20px;}

/* Brands */
.brands_wrap .brands img {max-width: 100%;}

/* Our products */
.product_list {float: left; width: 100%; text-align: center;}
.product_list li {float: none; width: 300px; margin: 0 auto 20px !important;}


/* Content */
section .description .name {font: 50px/40px 'HelveticaNeueLTStdBdCn';}
section .description .name span {font-size: 30px; line-height: 34px;}

.section1 {padding: 40px 0 0; background: #fff; background-size: 50%;}
.section1 .image {display: block; width: 100%;}
.section1 .description {float: right; width: 100%; margin: 0 0 30px;}

.section2 {padding-top: 40px; position: relative; overflow: hidden;}
.section2 .image {width: 100%;}
.section2 .description {float: left; width: 100%; margin: 0 0 30px; position: relative; z-index: 10;}

.section2 .image:after {
	width: 280px; height: 150%;
	right: 50%;
	margin-right: -140px;
	top: -20px;
}

.section3 {padding: 40px 0 0;}
.section3 .image {float: left; width: 100%; text-align: center;}
.section3 .description {float: right; width: 100%; margin: 0 0 30px;}



/* Footer */
footer {background: #ffeeea; float: left; width: 100%; color: #b39c96; height: auto; font: 13px/15px Arial; padding: 30px 0;}
footer .copyright {margin: 0;}

}



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

/* Our products */
.product_list li {width: 240px;}
.product_list li.solvents span {padding-left: 45px;}
}