@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

:root{
	--ysnRed: #892636;
	--ysnGrey: #d9e2e4;
	--ysnCream: #e7eced;
}	

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Roboto", sans-serif;
    background:#fff;
    display: flex;
    flex-direction: column;
}

a{
	text-decoration:none;
	color:#000;	
}
a:hover{
	color:var(--ysnRed);
}

#wrapper{
    width:80%;
    max-width:1500px; 
    margin:auto;
    min-height: 100vh;          /* fill screen height */
    display: flex;
    flex-direction: column;     /* stack header/content/footer vertically */
    background:#fff;
}

#hText{
	padding-left:7%;
	font-size:1.3em;
}


/* HEADER LAYOUT FIXES */
#header {
    background: var(--ysnCream);
    padding: 20px;                 /* put padding back */
    display: flex;
    align-items: center;
    border-radius: 0 0 3px 3px;
}

/* In the header, don't force 33%/66% widths */
#header .third {
    width: auto;
    display: block;
}

#header #hText {
    width: auto;
    flex: 1;                       /* take remaining space */
    padding-left: 7%;              /* keep your existing spacing */
}

/* Login box sits on the right */
#header .loginBox {
    margin-left: 20px;
    margin-right: 40px;   /* move button left */
}

/* Make sure login button looks like a pill button */
.loginBtn {
    padding: 8px 16px;
    background: var(--ysnRed);
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    border: 1px solid #d2d2d2;
    display: inline-block;
}

.loginBtn:hover {
    background: var(--ysnGrey);
    color: #000;
}

.loginBtn:hover {
    background: #6f1f2c;   /* slightly darker red */
    color: #fff;
}


/* END HEADER LAYOUT FIXES */

#content{
    padding:20px;
    flex: 1;          /* this pushes footer to the bottom */
}

#footer{
    background:var(--ysnCream);
    padding:20px; 
    border-radius:3px 3px 0 0;
}

.ssImg{
	width:100%;
}
.imageSwell{
	width:100%;
  transition: transform 0.25s ease-in-out;   /* smooth animation */
  transform-origin: center;	
}
.productDiv:hover .imageSwell {
    transform: scale(1.15);  /* adjust as desired */
    cursor:pointer;
}

.ib{
	display:inline-block;
}

.flx{
	display:flex;
}

.half{
	width:50%;
	display:inline-block;
	vertical-align:top;	
}
.third{
	width:33%;
	display:inline-block;
	vertical-align:top;	
}
.twoThirds{
	width:66%;
	display:inline-block;
	vertical-align:top;	
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

.hideMe{
	display:none;
}

.btn{
	width:100px;
	color:#fff;
	background:var(--ysnRed);
	height:30px;
	border:1pt solid #efefef;
	border-radius:3px;	
	line-height:30px;
	text-align:center;
	display:inline-block;	
	z-index:10;
}

.btn:hover{
	cursor:pointer;
	background:var(--ysnGrey);
	color:#000;
}

.bld{
	font-weight:bold;
}

.ctr{
	text-align:center;
}

.clr{
	clear:both;
}

.clr5{
	clear:both;
	height:5px;
}	

.clr10{
	clear:both;
	height:10px;
}	

.clr20{
	clear:both;
	height:20px;
}	

.clr200{
	clear:both;
	height:200px;
}	

.clr100{
	clear:both;
	height:100px;
}	

.iImage{
	width:50%;		
	display: block;
  margin: 0 auto; 	
}

.productDiv{
	padding:10px;
	background: var(--ysnCream);
	width:33%;
	display:inline-block;
	vertical-align:top;		
	margin: 10px;
	border-radius:3px;
  overflow: hidden;
  position: relative;	
}

.tBorder{
	border:1pt solid var(--ysnGrey);
	border-radius:6px;
	width:33%;
	margin:5px;
	padding:10px;
	vertical-align:top;
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 211, 211, 211, .8 ) 
                url("../images/loading.gif") 
                50% 50% 
                no-repeat;
    background-size:140px;            
}

* {
    box-sizing: border-box;
}

.footerCol{
	width:33%;
	display:inline-block;
	vertical-align:top;
}
.footerCol a {
    display: block;    
    color: #333;
    padding: 4px 0;
    font-size: 0.95em;
}
.footerCol a:hover {
		color:var(--ysnRed);
}	
.footerTitle{
	color:var(--ysnRed);
}
.footerItem {
    margin: 10px 0;
    font-size: 0.95em;
}

#orderHeader{
	text-align:center;
	color:var(--ysnRed);
}

#orderHeader svg {
    transition: transform 0.2s ease;
}

#orderHeader:hover svg {
    transform: translateX(4px);
}

@keyframes breathe {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

#orderHeader:hover ~ .flx .productDiv .imageSwell {
    animation: breathe 1s ease-in-out infinite;
}

@media only screen and (max-width : 768px) {
		.half{
			width:100%;
			display:block;
		}
		.third{
			width:100%;
			display:block;
		}
		.twoThirds{
			width:100%;
			display:block;
		}
    #wrapper{
        width: 100%;
        max-width: none;   /* stop limiting width */
        margin: 0;         /* remove centering */
        border: 0;
    }

    #header{
        display: block;
        width: 100%;
        margin: 0;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    #content{
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    #footer{
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
		.flx{
			display:block;
		}
		.tBorder{				
				width:calc(100% - 10px);
		}
		.iImage{
			width:20%;	
			margin-left:40%;
		}

		.productDiv{
			width:100%;
			display:block;
			margin:0 0 10px 0;
		}		
		
		.footerCol{
				margin-bottom:10px;
				width:100%;
				display:block;
		}
		

}