body {font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";padding: 0; margin: 0;} 

.logo {float: left;padding: 5px; margin-left: 40px;margin-top: 20px;cursor: pointer;}

.logo form {margin-left:40px; margin-top: 40px;}


.header{width: 100%;
margin-left: auto;
margin-right: auto;}

.searchicon {display: none;}


.clearfix{clear:both;}

.headernav {float: right; margin-top: 50px;margin-left:px;transform: skewX(-10deg);}

button  {background-size: contain background-color:#F05A28; border: none; font-size: 15px;padding: -0px -0px; cursor: pointer;margin: auto;}


#main-navigation {text-align: center; margin-top: 20px;margin-bottom: 60px; padding:40px; margin-right: auto; margin-left: auto; word-spacing: 40px;font-size: 20px; transform: skewX(-10deg);cursor: pointer; }

#main-navigation li {padding:15px 50px ;}

#main-navigation ul  { margin:0px;}



h1 {color: whitesmoke;font-size: 100px;margin-left: -0px;margin-top: -5px;}

.wrapper p {margin-top: -40px;position: absolute; display: table; padding: -20px; margin-bottom: 5px; margin-right: 365px;max-height: 100px;line-height: 40px;}





#valueproposition {color: whitesmoke;height:911px; background-image: url("images/heroblackjordan1.jpg"); background-repeat: no-repeat; background-size: cover;
background-position:-100px;margin: 0px; padding: 60px;margin-bottom: 5px;position: relative;}

.valueproposition {background-color: black; width: auto; display: table; padding: 10px;margin-right: 10px; position: absolute; left: 0; left:50px;top: 50%; transform: translateY(-50%);}

#valueproposition p {color:dimgray;transform: skewX(-2deg); color:whitesmoke; width: 80%;font-size: 18px;text-align: left; }




.Searchbar input[type=text] {
  padding: 6px;
  margin-top:8px;
  font-size: 17px;
  border-width:1px;
  border-style: solid;
  border-color:darkgray;
  
  
}

.Searchbar button {
  float:left;
  margin-top: -23px;
  margin-right: 30px;
  margin: -0px 0px
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.Searchbar form {
	float:left;
  padding: 4px;
  border: none;
	padding-top: -40px;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  
	
	}



li {padding:15px 15px; text-align: center; background-color:#F05A28; display: inline-block; color:ghostwhite; }



.columns li {transform: skewX(-10deg);cursor: pointer;margin-right: 0px;}




ul {display: inline-block; vertical-align: bottom;}


header form {float: right;}

#brands { max-width: 100%;text-align: center;width: 100%;
margin-left: auto;
margin-right: auto;}

.columns{display: inline-block;color: ghostwhite; width: 29%;margin-left: 2%;margin-right: 2%;margin-top: 50px;position: relative;}

.columns img {width:100%; height:auto;}

.columns p {text-align: center; color: dimgrey;margin-top: 50px;}

.columns ul {position: absolute;top: 0px;right: 0px;margin: 0px;right:1%}




#footer li {text-align: center; display: block; border: none; margin-top: 15px;margin-bottom: 15px; padding: 3px;margin-right:2%; cursor: pointer;}

#footer footnote {width: 100%; height:auto; margin-right:auto;}

#footer ul {text-align: center; vertical-align:top; width: 29%;margin-left: 2%;margin-right: auto;padding: 0px;}

#footer {background-color:#F05A28; color:ghostwhite;}

#social {text-align:center; margin-top: 20px; margin-bottom: 20px; }


form { font-size: 25px;text-align: center; margin-top: 60px;color:#F05A28;}

form p {background-color:#EFEFEF;}

#favorite {background-color:#EFEFEF;padding-top: 20px;  }

select {font-size: 15px; color: #F05A28;text-align: center;}

input {font-size: 20px; margin-top: 10px; margin-left: 60px;margin-bottom: 40px;color: #F05A28;text-align: center;cursor: pointer;}






@media screen and (max-width: 1400px) {
	
	.searchicon {display: block; }
	
	.Searchbar input {display: none; float:right;}
	
	
	#main-navigation { display: none;}
	
	#valueproposition p { color:whitesmoke; width: 80%;font-size: 18.5px;text-align: left; line-height: 40px; }

		
		
	
	
}

@media screen and (max-width: 1400px) {
	
	.headernav {float: left; padding-bottom: 40px;}
}


@media screen and (max-width: 880px) {
	
	
	#footer {width: 100%; display:block;}
	
	#footer li{ padding: 0px;}
	
	
	.footnote bold, .footnote, .bold  {float:none;width: 100%;padding: 0px;margin-left: -18px;}
	
	#footer ul {width: 100%; display:grid; text-align:center;margin-top: -10px;margin-right: 0px; padding-top: 20px;padding-bottom: 20px;}
	
	.columns {width: 66%;}
	
	




}

@media screen and (max-width: 862px) {
	
	.footnote bold, .footnote, .bold  {text-align: center; float:none;width: 100%;padding: 0px;margin-left: -18px;}
	
}


@media screen and (max-width: 600px) {
	
	.logo img {width: 50%;}
	.Searchbar {text-align: right;}
	
	.footnote bold, .footnote, .bold  {float:none;width: 100%;padding: 0px;margin-left: -10px;}
	
	#footer li{ padding: 0px;text-align:center;}
	
	#footer ul {width: 100%; display:grid; text-align:center;}
	
	.searchicon {text-align: right;display:block; }
  }
  .Searchbar input[type=text] {
	  border: 1px solid #ccc;}

	  
  
  }

@media screen and (max-width: 598px) {
	
	.footnote bold, .footnote, .bold  {float:none;width: 100%;padding: 0px;margin-left: -15px;}

@media screen and (max-width: 588px) {
	
	#valueproposition p {font-size: 18px; margin-right: 5px; display: table; padding: 5px; line-height:24px;}
	
	#footer li{ padding: 0px;}
	
	.footnote bold, .footnote, .bold  {text-align: center; float:none;width: 100%;padding: 0px;margin-left: -15px;}
	
}
	
@media screen and (max-width: 580px) {
	
	#valueproposition p {font-size: 16px; margin-right: 10px; display: table; padding: 10px; line-height:20px;}
	
	.columns {width: 66%;}
	
	#footer li{ padding: 0px;}
	
	
	@media screen and (max-width: 578px) {
		
		.headernav {padding-left: 0px; padding-right: 0px;margin: -10px; margin-top: 20px; margin-left: -20px;}
		
		
		
	
	}
	
	
	@media screen and (max-width: 426px) {
		
		#valueproposition p {width: 60%;}
	
	@media screen and (max-width: 406px) {
		
		
		.searchicon {display:block; width: 0px; margin-top: -60px; left: 5px; margin-left: -10px;cursor: pointer;}
		
		
		
		.logo {width: 100px; float: left;padding: 0px;margin-left: 0px; cursor: pointer;}
		
		
		h1 {color: whitesmoke;display:inline-block;padding-bottom: 40px; font-size: 30px;;width: 20px;}
			
		
	}
	
	
	
	@media screen and (max-width: 398px) {
		
	.logo {float: left;padding: 0px;margin-left: 0px; cursor: pointer;}
		
			
		
	}
	
	


@media screen and (max-width: 350px) {
	
	
	.headernav li {padding: 0px; margin-right: -10px;}
	
	
	

	
	#valueproposition p {font-size: 1px; margin-right: 20px; display: table; padding: 10px; line-height:20px;}
	

	
	.columns {width: 66%;}
	
	.columns li {display: block;padding: 5px 15px; right: 1px;margin-right: 0px;}
	
	.footnote bold, .footnote, .bold  {float:none;width: 100%; padding: 10px; margin: 0px;}
	
	#footer ul {width: 100%; display:grid; text-align:center;}
	
	.searchicon {display:block; width: 0px; left: 5px; margin-left: -10px;cursor: pointer;}
	
	.logo img {width: 50%;}
	
	.logo {width: 50%;float: left;padding: 0px;margin-left: 0px; cursor: pointer;}
	
	#valueproposition {height:100px;}
	
	h1 {color: whitesmoke;display:inline-block;padding-bottom: 40px; font-size: 30px;;width: 20px;}
	
	.footnote bold, .footnote, .bold  {text-align: center; float:none;width: 100%;padding: 0px;margin:0px;}
	
	
	@media screen and (max-width: 330px) {
		
		.headernav li {padding:15px 5px; background-color:#F05A28; display: inline-block; color:ghostwhite; font-size: 12px;}
		
		
		@media screen and (max-width: 600px) {
			
		#valueproposition p { color:whitesmoke; width: 80%;font-size: 18px;text-align: left; line-height: 40px; }
		
	
	
	
	
	
	
}