/* Typography */

@font-face {
  font-family: "Raleway Light";
  src: url("../fonts/Raleway-Light.eot");
  src: url("../fonts/Raleway-Light.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Raleway-Light.woff2") format("woff2"), url("../fonts/Raleway-Light.woff") format("woff"),
    url("../fonts/Raleway-Light.svg#Raleway-Light") format("svg");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Raleway Light Italic";
  src: url("../fonts/Raleway-LightItalic.eot");
  src: url("../fonts/Raleway-LightItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Raleway-LightItalic.woff2") format("woff2"), url("../fonts/Raleway-LightItalic.woff") format("woff"),
    url("../fonts/Raleway-LightItalic.svg#Raleway-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Raleway Medium Italic";
  src: url("../fonts/Raleway-MediumItalic.eot");
  src: url("../fonts/Raleway-MediumItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Raleway-MediumItalic.woff2") format("woff2"), url("../fonts/Raleway-MediumItalic.woff") format("woff"),
    url("../fonts/Raleway-MediumItalic.svg#Raleway-MediumItalic") format("svg");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Raleway Medium";
  src: url("../fonts/Raleway-Medium.eot");
  src: url("../fonts/Raleway-Medium.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Raleway-Medium.woff2") format("woff2"), url("../fonts/Raleway-Medium.woff") format("woff"),
    url("../fonts/Raleway-Medium.svg#Raleway-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Playfair Display Bold";
  src: url("../fonts/PlayfairDisplay-Bold.eot");
  src: url("../fonts/PlayfairDisplay-Bold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PlayfairDisplay-Bold.woff2") format("woff2"), url("../fonts/PlayfairDisplay-Bold.woff") format("woff"),
    url("../fonts/PlayfairDisplay-Bold.svg#PlayfairDisplay-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Playfair Display Bold Italic";
  src: url("../fonts/PlayfairDisplay-BoldItalic.eot");
  src: url("../fonts/PlayfairDisplay-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2"),
    url("../fonts/PlayfairDisplay-BoldItalic.woff") format("woff"),
    url("../fonts/PlayfairDisplay-BoldItalic.svg#PlayfairDisplay-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Playfair Display Italic";
  src: url("../fonts/PlayfairDisplay-Italic.eot");
  src: url("../fonts/PlayfairDisplay-Italic.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PlayfairDisplay-Italic.woff2") format("woff2"),
    url("../fonts/PlayfairDisplay-Italic.woff") format("woff"),
    url("../fonts/PlayfairDisplay-Italic.svg#PlayfairDisplay-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Playfair Display Regular";
  src: url("../fonts/PlayfairDisplay-Regular.eot");
  src: url("../fonts/PlayfairDisplay-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2"),
    url("../fonts/PlayfairDisplay-Regular.woff") format("woff"),
    url("../fonts/PlayfairDisplay-Regular.svg#PlayfairDisplay-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

.playfair-bold {
  font-family: "Playfair Display Bold";
  font-size: 1.75em;
}

.playfair-italic {
  font-family: "Playfair Display Italic";
  font-size: 1.75em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display";
}

header a {
  color: #e2574c;
  text-decoration: none;
  font-family: "Raleway Medium";
  font-size: 0.8em;
  text-transform: uppercase;
}

header h1 {
  color: #e2574c;
  font-family: "Raleway Medium";
  font-size: 0.8em;
  text-transform: uppercase;
  margin-top: 10%;
  padding-right: 5%;
}

.hero-banner p {
  width: 100%;
  height: vh;
  text-transform: uppercase;
  text-align: center;
  font-family: "Raleway Medium";
  font-size: 1em;
}

.hero-banner h2 {
  text-align: center;
  font-family: "Playfair Display Regular";
  font-size: 2em;
}

.about {
  color: #2d2d2d;
}

.about p {
  color: #2d2d2d;
  text-align: center;
  font-family: "Raleway Medium";
  font-size: 0.75em;
}

.shop-grid {
  color: white;
  text-transform: uppercase;
  font-family: "Raleway Medium";
  font-size: 1.25em;
}

.featured {
  color: #2d2d2d;
  text-align: center;
}

.featured p {
  color: #969696;
  font-family: "Raleway Medium";
  text-transform: uppercase;
  font-size: 0.5em;
  margin-bottom: 25px;
}

.featured h3 {
  color: #e2574c;
  font-family: "Playfair Display";
  margin-bottom: 25px;
}

.featured h4 {
  color: #e2574c;
  font-family: "Raleway Medium";
  font-size: 0.6em;
  margin-top: 10px;
  /* cursor: pointer; */
}

#cart-button {
  font-family: "Raleway Medium";
}

.updates h2 {
  color: white;
  padding-top: 40px;
}

.updates p {
  color: white;
  font-family: "Raleway Light";
}

.subscribe-field {
  padding-bottom: 50px;
}

#email-field {
  color: #282828;
  font-family: "Raleway Light";
  font-size: 0.85em;
  text-indent: 5%;
}

#submit-button {
  color: white;
  font-family: "Raleway Medium";
  font-size: 0.85em;
}

.copyright {
  color: white;
  font-family: "Playfair Display Regular";
}

.contact-info {
  color: white;
  font-family: "Playfair Display Regular";
}

.contact-info a {
  color: white;
  font-family: "Playfair Display Regular";
}

.address {
  color: gray;
  font-family: "Playfair Display Regular";
}

footer {
  text-align: center;
}

.social-media {
  color: white;
  font-family: "Raleway Light";
}

.social-media-text {
  display: none;
}

a:hover {
  color: #b64036;
}

/* End of typography */

/* Elements */

html {
  scroll-behavior: smooth;
}

body {
  background-color: white;
  font-size: 16px;
  font-family: "Raleway Light";
  overflow-x: hidden;
  margin-top: 120px;
}

/* Header */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  top: 0%;
  z-index: 1;
  width: 100%;
  position: fixed;
  padding: 15px 0;
}

/* Left logo  */

.left-logo {
  display: flex;
  width: 50%;
  padding-left: 25px;
  max-height: 100px;
}

.left-logo img {
  width: 60%;
}

/* Right logo  */

.right-logo {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  position: relative;
}

.right-logo img {
  width: 70px;
}

.cart {
  display: flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #e2574c;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
  right: 20px;
  top: 0px;
}

.cart-text {
  font-family: "Raleway Light";
  position: absolute;
  top: 2px;
  color: white;
}

/* Navigation Menu */

.main-menu {
  display: flex;
  justify-content: center;
  width: 100%;
}

.main-menu ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

.main-menu li {
  display: flex;
  justify-content: center;
}

hr {
  display: block;
  margin-bottom: 10px;
  border-width: 1px;
  color: #e6e6e6;
  opacity: 50%;
  width: 100%;
}

/* Main */

.hero-banner {
  color: white;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/banner-girl.png),
    url(../images/flower-bkgd.jpg);
  background-position: left, center 50px, center;
  background-repeat: repeat, no-repeat, repeat;
  background-size: cover, contain, cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 50px;
}

/* About */

.about {
  text-align: center;
  margin: 40px 15px;
  line-height: 25px;
}

.about p {
  margin-top: 20px;
}

/* Shop Grid */

.shop-grid {
  display: flex;
  flex-wrap: wrap;
}

.mens {
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/mens-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 2%;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;
}

.trends {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 48%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/trends-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 175px;
  margin-right: 2%;
}

.glasses {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/glasses-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 175px;
}

.sale {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 48%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/sale-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 175px;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.bags {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/bags-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 175px;
  margin-top: 2%;
  margin-bottom: 2%;
}

.womens {
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/womens-category.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;
  height: 175px;
}

/* Featured */

.featured {
  margin-top: 50px;
}

#cart-button {
  background: black;
  color: white;
  border: none;
  height: 30px;
  width: 90px;
  border-radius: 25px;
}

/* Updates */

.updates {
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)), url(../images/wave-bkgd.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  height: 325px;
  width: 100%;
  text-align: center;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: space-around;
}

#email-field {
  width: 90%;
  height: 40px;
  border: white;
  border-radius: 50px;
}

.subscribe-container {
  width: 350px;
  margin: 0 auto;
}

.subscribe-field {
  position: relative;
}

#submit-button {
  background-color: #e2574c;
  width: 100px;
  height: 32px;
  border: none;
  border-radius: 50px;
  position: absolute;
  top: 5%;
  right: 6%;
}

input[type="submit"]:hover {
  cursor: pointer;
  text-decoration: none;
}

/* Footer */

footer {
  background-color: #242424;
  width: 100%;
  height: 275px;
  line-height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 25px;
  padding-bottom: 25px;
}

.contact-info {
  margin-top: 15px;
}

.address {
  margin-top: 15px;
  margin-bottom: 15px;
}

.social-media ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-between;
  width: 25%;
  margin: 0 auto;
}

/* Flickity Styling */

.carousel {
  height: 525px;
  margin-top: 50px;
  margin-bottom: 50px;
}

.carousel-cell {
  width: 100%;
  height: 725px;
}