/* ------------------------- all HTML--------------------------*/

body {
	background-color: #e7e7e7;
	margin: 0;

}

img{
	height: 200px;
	width: 200px;
	padding:5px;
	margin: 5px 5px;
}





/*------------------------------------------------------------*/
/* ------------------------- index.html--------------------------*/
/*------------------------------------------------------------*/
p #home{
	font-family: 'Nunito', sans-serif;
	font-size: 20pt;
	color: black;
}

a{
	font-family: 'Nunito', sans-serif;
	text-decoration: none;
	color:black;
	font-size: 20pt;
}

a:hover{
	font-family: 'Nunito', sans-serif;
	text-decoration: none;
	color:black;
	font-size: 25pt;
	transform:rotate(5deg);
	transition: 1s;

	
}

.wrapper{
	margin-left: 5%;
	margin-right: 5%;
}

.wrapper_header{
	width:90%;
	height:auto;
	margin-top: 2%;
	margin-left: 3%;
	margin-right: 3%;
}


#filters li {
		display:inline-block;
		list-style-type:none;
		font-size: 12pt;
		font-family: 'Nunito', sans-serif;
		margin: 5px 3px 5px 5px;

	}

/*----------------------------- button style -------------------------------*/

div#all{
	border: solid #f128c1 1px;
	margin-right: 4px;
	width:30px;
	

}

div#all:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
	transition:1s;
}

div#everyday{
	border: solid #f128c1 1px;
	margin-right: 4px;
	width:125px;
	
}


div#everyday:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
	transition:1s;

}

div#fancy{
		border: solid #f128c1 1px;
	margin-right: 4px;
	width:100px;
	
}


div#fancy:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
transition:1s;
}

div#single{
	border: solid #f128c1 1px;
	margin-right: 4px;
	width:105px;
	
}



div#single:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
transition:1s;
}

div#sporty{
		border: solid #f128c1 1px;
	margin-right: 4px;
	width:105px;
	
}


div#sporty:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
transition:1s;
}

div#winter{
	border: solid #f128c1 1px;
	margin-right: 4px;
	width:110px;

}


div#winter:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
transition:1s;
}

div#hide{
	
		border: solid #f128c1 1px;
	margin-right: 4px;
	width:70px;

}



div#hide:hover{
	background-color: #ffe900;
	opacity: 75%;
	border: solid #ff9000 1px;
transition:1s;
}



/*--------------------------- sock style---------------------------------*/



#single_purple_mid{
	height: 50px;
	width:50px;
	display:inline;

}

#single_purple_mid:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_black{
	height: 50px;
	width:50px;
	display:inline;
	

}

#single_black:hover{
	opacity: .65;
	transition:1.5s;
	

}

#single_striped_blue{
	height: 50px;
	width:50px;
	display:inline;


}

#single_striped_blue:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_stripe_stripe{
	height: 50px;
	width:50px;
	display:inline;
	

}

#single_stripe_stripe:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_striped_orange{
	height: 50px;
	width:50px;
	
	display:inline;
	

}

#single_striped_orange:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_green{
	height: 50px;
	width:50px;	
	display:inline;


}

#single_green:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_white_sport{
	height: 50px;
	width:50px;	
	display:inline;


}

#single_white_sport:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_black_argyle{
	height: 50px;
	width:50px;	
	display:inline;


}

#single_black_argyle:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_blue_argyle{
	height: 50px;
	width:50px;	
	display:inline;


}

#single_blue_argyle:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#single_black_long{
	height: 50px;
	width:50px;	
	display:inline;


}

#single_black_long:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}






#stripe1{
	height: 50px;
	width:50px;

	display:inline;
	


}

#stripe1:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid1{
	height: 50px;
	width:50px;
	display:inline;

}

#solid1:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb1{
	height: 50px;
	width:50px;
	display:inline;
	

}

#cb1:hover{
	opacity: .65;
	transition:1.5s;
	

}

#polkadot{
	height: 50px;
	width:50px;
	display:inline;


}

#polkadot:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#argyle1{
	height: 50px;
	width:50px;
	display:inline;
	

}

#argyle1:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#stripe2{
	height: 50px;
	width:50px;
	
	display:inline;
	

}

#stripe2:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}



#single_purple_high{
	height: 50px;
	width:50px;

	display:inline;
	


}

#single_purple_high:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}



#solid2{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid2:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb2{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb2:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#argyle2{
	height: 50px;
	width:50px;	
	display:inline;


}

#argyle2:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid3{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid3:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid4{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid4:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped3{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped3:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}


#solid5{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid5:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb3{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb3:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#argyle3{
	height: 50px;
	width:50px;	
	display:inline;


}

#argyle3:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped4{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped4:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid6{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid6:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb4{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb4:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#argyle4{
	height: 50px;
	width:50px;	
	display:inline;


}

#argyle4:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#misc1{
	height: 50px;
	width:50px;	
	display:inline;


}

#misc1:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid7{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid7:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped5{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped5:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid8{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid8:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb5{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb5:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid9{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid9:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#argyle5{
	height: 50px;
	width:50px;	
	display:inline;


}

#argyle5:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid10{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid10:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid11{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid11:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped6{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped6:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid12{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid12:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#cb6{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb6:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}
#solid13{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid13:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}
#misc2{
	height: 50px;
	width:50px;	
	display:inline;


}

#misc2:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid14{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid14:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped7{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped7:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid15{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid15:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}


#cb7{
	height: 50px;
	width:50px;	
	display:inline;


}

#cb7:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid16{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid16:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid17{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid17:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped8{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped8:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid18{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid18:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#striped9{
	height: 50px;
	width:50px;	
	display:inline;


}

#striped9:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid19{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid19:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#solid20{
	height: 50px;
	width:50px;	
	display:inline;


}

#solid20:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}

#misc3{
	height: 50px;
	width:50px;	
	display:inline;


}

#misc3:hover{
	opacity: .65;
	transition:1.5s;
	transform:rotate(6deg);

}