/*
Theme Name: Crownhairdirect
Theme URI: Crownhairdirect
Description: Copyright 2015.
Author:  Click Partners (admin@clickpartners.com.au)
Author URI: http://www.clickpartners.com.au
Version: 1.0
*/

::selection {background: #333; color: #fff; /* Safari */}
::-moz-selection {background: #333; color: #fff; /* Firefox */}


@font-face {
    font-family: 'HelveticaNeueLTStdLtCn';
    src: url('fonts/HelveticaNeueLTStdLtCn.eot');
    src: url('fonts/HelveticaNeueLTStdLtCn.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdLtCn.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdLtCn.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdLtCn.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdLtCn.svg#HelveticaNeueLTStdLtCn') format('svg');
}

@font-face {
    font-family: 'HelveticaNeueLTStdMdCn';
    src: url('fonts/HelveticaNeueLTStdMdCn.eot');
    src: url('fonts/HelveticaNeueLTStdMdCn.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdMdCn.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdMdCn.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdMdCn.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdMdCn.svg#HelveticaNeueLTStdMdCn') format('svg');
}

@font-face {
    font-family: 'HelveticaNeueLTStdBdCn';
    src: url('fonts/HelveticaNeueLTStdBdCn.eot');
    src: url('fonts/HelveticaNeueLTStdBdCn.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdBdCn.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdBdCn.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdBdCn.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdBdCn.svg#HelveticaNeueLTStdBdCn') format('svg');
}

@font-face {
    font-family: 'HelveticaNeueLTStdBlkCn';
    src: url('fonts/HelveticaNeueLTStdBlkCn.eot');
    src: url('fonts/HelveticaNeueLTStdBlkCn.eot') format('embedded-opentype'),
         url('fonts/HelveticaNeueLTStdBlkCn.woff2') format('woff2'),
         url('fonts/HelveticaNeueLTStdBlkCn.woff') format('woff'),
         url('fonts/HelveticaNeueLTStdBlkCn.ttf') format('truetype'),
         url('fonts/HelveticaNeueLTStdBlkCn.svg#HelveticaNeueLTStdBlkCn') format('svg');
}


html, body, .mainbox {height: 100%; margin: 0;}
body > .mainbox {height: auto; min-height: 100%;}


/* Reset */
body {margin: 0; color: #31312e; font: 18px/23px 'HelveticaNeueLTStdLtCn';}
img {border: 0;}
ul, ol {margin: 0; padding: 0;}
ul li {list-style: none;}
ol li {list-style: inside decimal;}
h1, h2, h3, h4, h5, h6 {margin: 30px 0 20px; font-weight: normal;}
h1 {font-size: 36px; margin: 0 0 20px;}
h2 {font-size: 30px;}
p {margin: 0 0 20px;}
p {margin: 10px 0;}
a, input, textarea {outline: none;}
textarea {resize: none; overflow: auto;}
input::-moz-focus-inner {border: 0; padding: 0;}
a {color: #333;}
a:hover {text-decoration: none;}
.inline {display: inline-block;}
.clear {clear: both; display: block;}
.wrapper {margin: 0 auto; width: 974px;}
b {font-weight: normal; font-family: 'HelveticaNeueLTStdBdCn';}
.pagetitle {color: #893d49; font-size: 28px; line-height: 30px; text-align: center; margin: 0 0 40px;}


/* CSS3 */
.button, .product_list li a, .product_list li a:after {
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}


/* Button */
.button {
	cursor: pointer; 
	-webkit-appearance: none; 
	display: block; 
	text-decoration: none; 
	border: 0; 
	background: #8f91d8;
	padding: 19px 0 11px;
	color: #fff !important; 
	font: 24px/24px 'HelveticaNeueLTStdLtCn'; 
	text-transform: uppercase; 
	text-align: center;
}
.button:hover {background: #784049;}



/* Header */
header {background: #f1deda url('images/header.jpg') center top no-repeat; float: left; width: 100%; height: 640px;}
header .text {float: right; width: 500px; margin: 115px 0 0; text-align: center;}
header h1 {color: #873e49; font: 39px/44px 'HelveticaNeueLTStdBdCn'; margin: 0; text-transform: uppercase;}
header h2 {color: #ff5e80; font: 100px/90px 'HelveticaNeueLTStdBlkCn'; margin: 0; text-transform: uppercase;}
header .for {background: url('images/dot.png') 0 10px repeat-x; color: #873e49; font-size: 31px; line-height: 30px; text-align: center; letter-spacing: 1px;
	margin: 0 100px 10px;}
header .for span {background: #f0ddd7; padding: 0 12px;}



/* Description site */
.description_site {float: left; width: 100%; background: #8f91db; padding: 30px 0 20px; color: #fff; text-align: center; font-size: 22px; line-height: 32px;}
.description_site b {text-transform: uppercase; display: block; margin: 0 0 5px;}
.description_site a {color: #fff; text-decoration: none; background: #ff5e80; display: inline-block; padding: 2px 10px 0;}


/* Ratewrap */
.ratewrap {width: 360px; margin: 0 auto 20px; text-align: center; background: url('images/dot2.png') 0 7px repeat-x; height: 14px;}
.ratewrap .inline {background: #fff; padding: 0 10px;}
.ratewrap .rating {display: inline-block; padding: 0; background: url('images/star.png') 0 0 repeat-x; width: 48px; height: 14px;}



/* Brands */
.brands_wrap {float: left; width: 100%; background: #fff; padding: 30px 0 10px;}
.brands_wrap .pagetitle {margin: 0 0 10px;}
.brands_wrap .entry {color: #ff5e7f; font-size: 23px; line-height: 26px; margin: 0 0 40px; text-align: center;}
.brands_wrap .brands {float: left; width: 100%; text-align: justify;}
.brands_wrap .brands:after {display: inline-block; content: ""; width: 100%;}
.brands_wrap .brands img {display: inline-block; margin: 0 0 10px;}



/* Our products */
.our_products {float: left; width: 100%; padding: 50px 0; background: #ffeeea;}
.our_products .ratewrap .inline {background: #ffeeea;}

.product_list {float: left; width: 100%; text-align: center;}
.product_list li {float: left; width: 32.5%; margin: 0 1.25% 20px 0; font: 32px/30px 'HelveticaNeueLTStdBdCn'; text-transform: uppercase;}
.product_list li a {display: block; position: relative; color: #fff; text-decoration: none; background: #ff5e80; height: 60px; padding-top: 40px;
	overflow: hidden;}
.product_list li span {padding-left: 60px; position: relative; z-index: 2;}
.product_list li span:before {content: ""; background: url('images/sprite.png') no-repeat; display: block; position: absolute; left: 0; width: 43px;
	top: -4px; height: 43px;}

.product_list li.tapes span:before {background-position: -20px -122px; height: 32px;}
.product_list li.glues span:before {background-position: -20px 0; top: -6px;}
.product_list li.solvents {margin: 0; font-size: 25px;}
.product_list li.solvents a {padding-top: 24px; height: 76px;}
.product_list li.solvents span:before {background-position: -20px -62px; top: 5px;}

.product_list li a:after {display: block; content: ""; position: absolute; left: -100%; top: -100%; width: 100%; height: 100%; background: #8f91db;}
.product_list li:hover a:after {left: 0; top: 0;}




/* Content */
section {float: left; width: 100%;}

section .description .name {font: 70px/60px 'HelveticaNeueLTStdBdCn'; color: #fd5d7f; text-transform: uppercase; margin: 0 0 20px;}
section .description .name span {display: block; font-size: 44px; line-height: 48px; color: #873e49 !important;}
section .description .entry {margin: 0 0 20px;}
section .description .button {width: 344px;}
section .image img {max-width: 100%; display: block; margin: 0 auto;}

.section1 {padding-top: 60px;}
.section1 .image {float: left; width: 540px; text-align: center;}
.section1 .description {float: right; width: 350px; margin: 0 50px 0 0;}


.section2 {background: #ff5e80; padding-top: 65px; position: relative; overflow: hidden;}
.section2 .image {float: right; width: 540px; text-align: center; position: relative;}
.section2 .image img {position: relative; z-index: 10;}
.section2 .description {float: left; width: 344px; margin: 30px 0 0;}
.section2 .description .name {color: #fff;}

.section2 .image:after {
	content: "";
	background: #fff5f4;
	width: 400px; height: 150%;
	transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	position: absolute;
	right: 50px;
	top: -150px;
}


.section3 {padding-top: 50px;}
.section3 .image {float: left; width: 440px; text-align: center;}
.section3 .description {float: right; width: 450px; margin: 30px 50px 0 0;}





/* Footer */
footer {background: #ffeeea; float: left; width: 100%; color: #b39c96; height: 90px; font: 13px/30px Arial;}
footer .copyright {float: left; width: 100%; margin: 30px 0 0; text-align: center;}










/* CSS3 */
.bord5 {border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.shadow {box-shadow: 0 0 5px #333; -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333;}
.bord5, .shadow {behavior: url(PIE.htc); position: relative;}