@charset "utf-8";
/* CSS Document */

.Nav{
    display: flex;
    flex-direction: row;

    background-color:#212121; 
}

.Left{
    margin-left: auto;
}
    
.Login{
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 15px;
	height: max-content;
    background-color:#212121;
    transition: background-color .75s ease, color 1s; 
    color:whitesmoke;        
    text-decoration: none; 
    justify-self: flex-end;
}

.Login:hover{
    background-color: darkgray;
    color: black;
}

.Title{
    color: whitesmoke;
    text-decoration: none;
    font-size: 18px;
    align-self:center;
	margin-left: auto;
	margin-right: auto;
}

.Title2{
    color: whitesmoke;
    text-decoration: none;
    font-size: 18px;
    align-self:center;
	margin-left: auto;
	margin-right:auto;
}

.Title:hover{
    text-decoration: underline;
}

.Title2:hover{
    text-decoration: underline;
}

.DropdownMenus{
    transition: width 2s, height 2s, display 1s;
    width: 300px;
    height:225px;
    background-color:#ECECEC;
    border:1px solid black;
    float: right;
    position: relative;
    text-align: center;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Textbox{
    margin: 15px;
    border: 1px solid black;
    /*height:10vh;*/
    
}

.LoginButton{
    width:75px;
    height:35px;
}

.Product{
    border: 1px solid black;
    width:16vw; /*150px*/
    height:16vw; /*175px*/
    padding:5px 15px 90px;
    margin:7px;
    background-color: hsla(0,0%,91%,0.53);
}

.Product:hover{
	background-color: #585858;
}

.ProductImage{
    max-width:100%;
    max-height:95%;
    border:1px solid black;
    padding:0px;
    margin:0px;
	cursor: pointer;
}

.ProductButtons{
    border: 1px solid #343a40;
    border-radius: 5px;
    color:#343a40;
	background-color:#BCBCBC;
    transition: color .5s, background-color .5s;
    padding:5% 10%;
    margin-top:5px;
    width:auto;
    height:auto;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
}

.ProductButtons:hover{
    background-color:#860E10;
    color:#f8f9fa;
}

.ProductList{
    text-align: center;
    padding:0px;
    margin:10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.form{
    width:100vw;
}

.Hello{
    color:white;
    display: none;
    align-self: center;
}

.Invisible{
    visibility: hidden;
}

.Icon{
    display:none;
    background: none;
    border:none;
    color:white;
    width:5vw;
    font-size:2.25vw;
    transition: color .5s ease;
}

.Icon:hover{
    color:#ACACAC;
    cursor:pointer;
}

.SettingsButton{
    width: 100%;
    padding: 4% 0%;
    border: 1px solid black;
    background-color:rgba(221,221,221,1.00);
    text-decoration: none;
	color:black;
	transition: color .5s, background-color .5s;
}

.SettingsButton:hover{
	background-color: #860e10;
	color: #f8f9fa;
}

.Mflex{
    display:flex;    
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
}

.ImgCol{
    margin:10px;
    padding:10px;
    border: 1px solid #343a40;
    border-radius: 5px;
   
    
}

.CartMenu{
    float:right;
    width:600px;
    height:550px;
    display:none;
    background-color:#ECECEC;
    flex-flow:column;
    text-align: center;
    overflow:auto;
}

.ConfirmDiv{
	display: none;
	width: 350px;
	height: 300px;
	background-color: #ECECEC;
	float: right;
    flex-flow: column;
	text-align: center;
}

.ConfirmButtons{
	transition: color .5s, background-color .5s;
}

.ConfirmButtons:hover{
	background-color: #860e10;
	color: #f8f9fa;
}

.PurchaseButton{
	width:100%; 
	height:max-content;
	margin-top:auto; 
	margin-bottom:10px; 
	padding:5px 0px; 
	transition: color .5s, background-color .5s;
}

.PurchaseButton:hover{
	background-color: #860e10;
	color: #f8f9fa;
}

.CloseButton{
	align-self:center; 
	width:125px;
	transition: color .5s, background-color .5s;
}

.CloseButton:hover{
	background-color: #860e10;
	color: #f8f9fa;
}