body {
  min-height: 100vh;
  margin: 0;
}

header {
  min-height: 50px;
  padding-bottom: 10px;
  background-color: #c2c9c3;
  text-align: center;
  color:black;
  padding-top: 10px;
}

#mwhite, #lwhite, #swhite, 
#swhiteLeather, #mwhiteLeather, #lwhiteLeather,
#smatteWhite, #mmatteWhite, #lmatteWhite{
	border:.25px solid black;
	box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav{
	text-align:center;
}

nav ul {
	list-style-type: none;
}

nav ul li{
	cursor: pointer;
	display:inline-block;
	margin-right: 10px;
	color: #5D695F;
}

nav ul li:hover{
	text-decoration: underline;
}

footer {
  min-height: 50px;
  display:flex;
  justify-content: center;
  background-color: #c2c9c3;
  color:black;
  margin-top: 20px;
  font-size: 110%;
}

footer span{
	align-content: center;
	padding-right:10px;
}

footer img{
	padding-top:5px;
}

/* The article fills all the space between header & footer */

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display:flex;
  flex-wrap:wrap;
  margin: 0 20px;
  align-items: center;
}

#header{
	width:90%;
	margin: 0 20px;
	/*border-bottom: 1px solid black;*/
}

#header>span{
	padding-top:20px;
	font-size: medium;
	display:block;
	font-weight:bold;
}


figure{
	cursor:pointer;
}

figure:hover {
  opacity: 50%;
}

figcaption{
	text-align: center;
	padding-bottom:15px;
}

figure a{
	text-decoration: none;
	color:black!important;
}

figure a:hover{
	text-decoration: none;
}

a {
	color: #5D695F;
	text-decoration: none;
}

a:visited{
	color: #5D695F;
}

a:hover{
	text-decoration: underline;
}

.colorOptions {
    display:inline-block;
    overflow:hidden;

}

.colorOptions>img {
    height: 35px;
    width:35px;
    cursor:pointer;
    margin: 2px;
}

#smallOptions>div, #hoop>div{
	  padding: 5px 10px 5px;
    background-color: lightgray;
    display: inline-block;
    margin: 4px;
    cursor:pointer;
}

.colorOptions>div.selected{
		cursor: default;
    border: solid 2px #66BCB0 !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

img.selected {
  border: 3px solid lightgrey !important;
  cursor: default;
  outline: solid 2px #66BCB0 !important;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

img:hover, .colorOptions>div:hover{
	opacity:50%;
}

li.selected{
	text-decoration:underline;
	cursor: default;
}

li.selected:hover{
	text-decoration: underline;
}

.selectedName{
	font-weight:bold;
}

.comingSoon{
	display:none;
}

#colors{
	width:48%;
}

#colors>div{
	padding-bottom: 10px;
}

#mockup{
	width:50%;
	text-align:center;
}


#categories{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#LoginInfo{
    position: absolute;
    right: 10;
    top: 10;
    color: black;
 }
 #LoginInfo > a{
 		color: black;
 }

 #LoginInfo > span{
 		cursor: pointer;
 }

 #LoginInfo > span:hover{
	text-decoration: underline;
}

@media screen and (max-width: 600px) {
	#colors{
		width:100%;
	}
	#mockup{
		width:100%;
		text-align:center;
		height: initial!important;
	}

	header{
		padding-top: 25px;
	}

	svg{
		margin-top:20px;
	}

}