/*Hair Obsession Stylesheet*/
html {
	background-color: rgb(245,235,245);
}

body {
	margin: 0px;
	width: 100%;
}
	
viewport {
	min-width: 400px;
}
	
.top {
	width: 100%;
	position: fixed;
	padding: 10px;	
	height: 50px;
	background-color: rgb(75,75,75);
}	

.menContain {
	height: 100%;
	background-color: red;
	padding: auto;
}

.menu {
	z-index: 1;
	display: block;
	float:left;
	background-color: rgb(75,75,75) ;
	width: 25%;
	height: 100%;
	padding: auto;
}


a {
	text-decoration: none;
}

p.menit {
	font-size: 18px;
	color: white;
	text-align: center;
	height: 50px;
}

.menu:hover {
    animation-name: menhi;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

img.bg {
	padding-top: 50px;
	width: 100%;
	height: 100%;
}

img.content {
	width: 100%;
	height: 100%;
}

.soc {
    position: relative;
    left: calc(50% - 115px);

}

.content {
	z-index: -1;
	margin: auto;
	max-width: 991px;
	//border: 1px solid black;	
}

p.info {
	
	margin-left: 20px;
	font-size: 24px;	
	text.align: left;	
	color: rgb(90,90,105);
}

li {
    font-size: 22px;
    
}

div.info {
	z-index: -1;
	box-shadow: 0px 0px 5px 2px grey;
	background-color: white;
	width: 100%;
	height: 30px;
	border: 0px solid grey;
}

input {
	font-size: 14px;
	display: inline;
	width: 49.4%;
	height: 30px;
	border: 0px;
	padding: 0px;
	background-color: white;	
}

input:hover {
	size: 15px;
	background-color: rgb(200,200,200);
	color: rgb(240,240,240);
}

.split {
	margin: auto;
	max-width: 991px;
	box-shadow: 0px 0px 5px 2px grey;
}

.products {
	padding: auto;
	width: 100%;
	max-width: 991px;
	height: 750px;
	box-shadow: 0px 0px 5px 2px grey;
}


.heading {
	color: white;
	background-color: black;
	text-align: center;
	width: 40%;
	margin: auto;
}

.item {
	float: left;
	margin-left: 10px;
	margin-top: 80px;
	width: 300px;
	height: 270px;
	box-shadow: 3px 3px 3px 2px grey;
}

.book {
	border: 1px solid black;
	width: 500px;
	height: 500px;
}

.prodDet {
	margin-top: 2px;
	text-align: center;
	background-color: gray;
	color: white;
}

h2 {
	margin-left: 20px;
	font-size: 26px;
	color: rgb(50,50,80);
}

div.hair {
	max-width: 991px;
}

div.rest {
	max-width: 991px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #d1d1d5; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}


#argan_oil_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) 0px 0;
}

#artistique_youstyle_matt_style {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) -1206px 0;
}


#devine_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) 0px -275px;
}

#hannon_anti_friz_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) -300px -275px;
}

#hannon_anti_hair_loss_capsules {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) -601px -275px;
}

#hannon_firm_hold_hair_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) -902px -275px;
} 

#hannon_hair_growth_booster {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective1.png) -1203px -275px;
}

#hannon_long_hair_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) 0px 0;
}

#hannon_long_hair_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -300px 0;
}

#hannon_perfection_heat_protecter {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -601px 0;
}

#hannon_polish_wax {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -902px 0;
}

#hannon_scalp_therapy_treatment {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -1203px 0;
}


#hannon_sculpting_hair_gel {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) 0px -275px;
}

#hannon_spiker_gel_wax {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -300px -275px;
}

#hannon_styling_gel {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -601px -275px;
}

#hannon_super_hold_hair_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -902px -275px;
}

#hannon_super_shine_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective2.png) -1203px -275px;
}

#hannon_super_shine_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png) 0px 0px;
}

#icon_blue_chip_blow_wave_lotion {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png) -300px 0px;
}

#icon_clone_blow_style_lotion {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -601px 0px;
}

#icon_color_lock_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -902px 0px;
}

#icon_color_save_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -1203px 0px;
}

#icon_control_mist_hair_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  0px -275px;
}

#icon_cool_rave_gel {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -300px -275px;
}


#icon_frosted_gray_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -601px -275px;
}

#icon_frosted_gray_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -902px -275px;
}

#icon_frosted_gray_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective3.png)  -1203px -275px;
}

#icon_mint_masque {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  0px 0px;
}

#icon_pure_plasenta_plexx {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -300px 0px;
}

#icon_shaping_glaze_ {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -601px 0px;
}

#icon_shine_wax {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -1203px 0px;
}

#icon_silk_treatment_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  0px -275px;
}

#icon_spa_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -300px -275px;
}

#icon_spa_hydro {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -601px -275px;
}

#icon_spa_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -902px -275px;
}

#icon_spa_tangle_free {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective4.png)  -1203px -275px;
}

#icon_vibrant_red_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  0px 0px;
}

#indola_color_style_mousse {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -300px 0px;
}


#lizap_hair_mousse {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -601px 0px;
}

#matrix_total_results_brass_off_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -902px 0px;
}

#matrix_total_results_brass_off_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -1203px 0px;
}

#matrix_total_results_color_obsessed_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  0px -275px;
}

#matrix_total_results_color_obsessed_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -300px -275px;
}

#matrix_total_results_hello_blondie_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -601px -275px;
}

#matrix_total_results_hello_blondie_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -902px -275px;
}

#matrix_total_results_so_long_damage_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective5.png)  -1203px -275px;
}

#matrix_total_results_so_long_damage_shampoo {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective6.png)  0px 0px;
}

#pure_envy_biotin_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective6.png)  -300px 0px;
}

#pure_envy_creative_shine {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective6.png)  -601px 0px;
}

#pure_envy_de_friz_spray {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective6.png)  -902px 0px;
}

#pure_envy_kwik_silver_conditioner {	
	width: 160px;
	height: 245px;
	left: 100px;	
	background: url(images/collective6.png)  -1203px 0px;
}

#pure_envy_liquid_gold {	
	width: 160px;
	height: 244px;
	left: 100px;	
	background: url(images/collective6.png)  0px -291px;
}

#pure_envy_pure_gloss {	
	width: 160px;
	height: 244px;
	left: 100px;	
	background: url(images/collective6.png)  -300px -291px;
}

#pure_envy_pure_set {	
	width: 160px;
	height: 244px;
	left: 100px;	
	background: url(images/collective6.png)  -601px -291px;
}

#pure_envy_silk_serum {	
	width: 160px;
	height: 244px;
	left: 100px;	
	background: url(images/collective6.png)  -1203px -291px;
}


/*//////////////////////////////////////////////////////////////////*/
.cal {
	float: left;
	width: calc((100% - 163px)/2) ;
	height: 240px ;
}

@media screen and(max-width: 479px){
	.content {
		width: 100%;
	}
}

@media screen and (max-width: 948px){
	.item {
		width: 48%;
	}
}

@media screen and (max-width: 948px){
	.prod {
		width: 100%;
	}
}

@media screen and (max-width: 520px){
	.item {
		width: 100%;
	}
}

@media screen and (max-width: 520px){
	.prod {
		width: 100%;
	}
}

@keyframes menhi {
	from {background-color: rgb(75,75,75);}
	to {background-color: black;}
}

@keyframes fade {
	from {opacity: 0;}
	to {opacity: 1;}
}