body {
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  width: 100vw;
  overflow-x: hidden;
}

header {
  background-color: #e5cbc8;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 50px;
}


button {
  background-color: #e5cbc8;
  color: #2b3b5a;
  border: none;
  font-size: 20px;
  text-decoration: none;
}

 .button-active {
     color: #e5cbc8;
     background-color: #2b3b5a;
}
nav {
     margin-top: 20px;
     padding: 1em;
     background-color: #e5cbc8;
     color: #2b3b5a;
     font-size: 14px;
}
 nav .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 nav .container object {
     width: 8em;
     padding: 1em 0.5em;
}
 nav .container .login-button, nav .container .menu-button {
     text-transform: uppercase;
     letter-spacing: 0.1em;
     padding: 1em 1.25em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}
 .nav-menu {
     background-color: #e5cbc8;
     color: #3a3b41;
     display: none;
     justify-content: center;
}
 .nav-menu .container {
     padding: 0.5em;
     display: flex;
}
 .nav-menu .container ul {
     list-style: none;
}
 .nav-menu .container ul li {
     padding: 0.25em 2em;
     font-size: 14px;
     text-align: left;
}
 .nav-menu .container ul li:first-child {
     text-transform: uppercase;
     color: #f3f0f1;
     letter-spacing: 0.05em;
     font-size: 14px;
     text-align: left;
}
 .hide {
     display: none;
}


 .login-form {
     background-color: #e5cbc8;
     padding: 1em 0 0;
     color: #3a3b41;
     display: none;
}
 .login-form .container {
     padding: 0 0.5em;
}
 .login-form h4 {
     font-weight: 400;
     font-size: 14px;
}
 .login-form input {
     width: calc(100% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .login-form .sign-in-button {
     background-color: #2b3b5a;
     color: #e5cbc8;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 100%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}


.jumbotron {
  display: flex;
  align-items: center;
  background-image: url("imgs/jumbo.jpg");
  background-size: cover;
  height: 850px;
}

h1 {
  font-family: 'Petit Formal Script', cursive;
  color: #2b3b5a;
}

p, h3 {
  color: #2b3b5a;
}

.group {
  color: #2b3b5a;
  background-color: rgba(255,255,255,0.7);
  padding: 1em;
  text-align: center;
}

.florist {
  width: 90%;
  margin: 20px 10px;
}

.rec {
  text-align: center;
}

.show {
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: .25em .5em;
}

 .product-card {
     margin: 1em 0;
     width: 30%;
}

.product-card p {
   color: #e5cbc8;
}

 .product-card .florist-3, .product-card .florist-1, .product-card .florist-2, .product-card .florist-4, .product-card .florist-5, .product-card .florist-6  {
     background-size: cover;
     background-position: center;
     height: 15em;
     transition: 0.2s;
}
 .product-card .florist-1 {
     background-image: url("imgs/florist1.jpg");
}
 .product-card .florist-2 {
     background-image: url("imgs/florist2.jpg");
}
 .product-card .florist-3 {
     background-image: url("imgs/florist3.jpg");
}
 .product-card .florist-4 {
     background-image: url("imgs/florist4.jpg");
}
 .product-card .florist-5 {
     background-image: url("imgs/florist5.jpg");
}
 .product-card .florist-6 {
     background-image: url("imgs/florist6.jpg");
}

 .product-card .photo-active {
     filter: blur(3px);
     transition: 0.2s;
}

.product-details {
  height: 4em;
}

 .product-card .product-details {
     margin-top: -5px;
     background-color: #e5cbc8;
     display: flex;
     justify-content: space-between;
}
 .product-card .product-details h4, .product-card .product-details p {
     padding: 0.7em 1.25em;
}
 .product-card .product-details div {
     display: flex;
}
 .product-card .product-details .more-details-button {
     background-color: #2b3b5a;
     padding: 0.75em 1.25em;
     cursor: pointer;
     width: 1em;
     transition: 0.1s;
}
 .product-card .product-details .more-details-button img {
     position: relative;
     left: -3.5em;
}


 .product-card .product-details .more-details-button .rotate {
     transition: 0.1s;
     transform: rotate(90deg);
}
 .product-card .shoe-details {
     display: none;
     background-color: #2b3b5a;
     color: #e5cbc8;
}
 .product-card .shoe-details .active {
     background-color: #e5cbc8;
     color: #2b3b5a;
}
 .product-card .size-chart, .product-card p {
     padding: 1em 1.25em;
}
 .product-card .size-chart ul, .product-card p ul {
     list-style: none;
     display: flex;
     justify-content: space-around;
     margin-top: 1em;
}
 .product-card .size-chart ul li, .product-card p ul li {
     padding: 0.5em;
     background-color: #2b3b5a;
     width: 100%;
     text-align: center;
     margin-right: 2px;
}
 .product-card .buy-now-button {
     background-color: #e5cbc8;
     text-align: center;
     padding: 0.75em;
     cursor: pointer;
}



.rec-form {
     background-color: #e5cbc8;
     padding: 1em 0 0;
     color: #2b3b5a;
     display: none;
}
 .rec-form .container {
     padding: 0 0.5em;
}
 .rec-form h4 {
     font-weight: 400;
}
 .rec-form input {
     width: calc(98% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .rec-form .sign-in-button {
     background-color: #e5cbc8;
     color: #2b3b5a;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 90%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}

 .shopping-cart {
     background-color: #966567;
     position: absolute;
     top: 60px;
     right: 0;
     width: 25%;
     z-index: 99;
     box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.5);
     display: none;
     height: 3.5em;
}
 .shopping-cart .container {
     display: flex;    
}

 .shopping-cart .container .cart object {
 	height: 45px;
}

 .shopping-cart .container h4 {
 	padding-top: 6px;
}

footer {
  margin-top: 1em;
  background-color: #e5cbc8;
  padding: 20px;
}

.contact {
  margin: 1em;
}

 .contact-form {
     background-color: #e5cbc8;
     padding: 1em 0 0;
     color: #2b3b5a;
     display: none;
}
 .contact-form .container {
     padding: 0 0.5em;
}
 .contact-form h4 {
     font-weight: 400;
}
 .contact-form input {
     width: calc(100% - 1em);
     border: none;
     height: 2em;
     margin: 0.5em 0;
     font-size: 1em;
     padding: 0 0.5em;
}
 .contact-form .sign-in-button {
     background-color: #e5cbc8;
     color: #2b3b5a;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     text-align: center;
     width: 100%;
     height: 2.5em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     cursor: pointer;
}


/*Media queries*/
@media screen and (max-width: 765px) {
 .product-card {
     margin: 1em 0;
     width: 100%;
}

}

@media screen and (max-width: 600px) {

.logo {
  width: 200px;
}

nav {
	  padding-top: 60px;
	}
	.shopping-cart {
	  width: 100%;
	  top: 0;
	  position:fixed;
	}
}