@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');

*, *:before, *:after {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background: #EEE;
}


#main {
  margin: 0 auto 1em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}


.page {
  padding:  1em;
  max-width: 700px;
  margin: auto;
}

.box {
  max-width: 700px;
  margin: auto;
}

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.product {
  margin: .5em;
  padding: 1em;
  word-wrap: break-word;
  background: #FFF;
  position: relative;

  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.product .favorite {
  font-size: 3em;
  line-height: 0;
  position: absolute;
  right: .3em;
  top: .5em;
  color: #EEE;
  text-shadow: 0 0 1px #333;
}

.product .favorite:hover,
.product .favorited {
  color: red;
}

@media (max-width: 1024px) {
  .product {
    flex: 1 2 45%;
  }
}

@media (max-width: 480px) {
  .product {
    flex: 1 1 100%;
  }
}


.product a {
  text-decoration: none;
  color: #333;
}

.product img {
  max-width: 100%;
  display: block;
  margin: auto;
}

.product .product-infos {
  text-align: center;
  padding: 1em;
}

.product .product-infos strong {
  display: block;
  margin-bottom: 1em;
}

.product .product-link {
  font-size: .8em;
  margin-top: 1em;
  display: inline-block;
}

.product .button {
  display: block;
  padding: 1em;
  background: #00153c;
  margin: 1em 0 0;
  border-radius:  5px;
  text-transform: uppercase;
  color: #FFF;
  font-weight:700;
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
}

.price small {
  vertical-align: top;
}



/* NAVBAR */

#navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFF;
  border-top: 1px solid #EEE;
  z-index: 1;
}

.nav-inner {
  max-width: 1000px;
  margin: auto;
  padding: 1em;
}

#navbar a {
  color: #333;
  text-decoration: none;
  font-size: .9em;
}

#header {
  text-align: center;
}

.message {
  font-size: .8em;
  margin: 0 1em 2em;
  display: none;
}

#logo {
  font-family: 'Dancing Script', serif;
  font-size: 3em;
  display: inline-block;
  padding: .3em;
  margin: 1em 0;
  text-decoration: none;
  color: #333;
}

#logo img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* THEME */

.theme-header {
  text-align: center;
  margin-bottom: 2em;
}

.theme-header h1 {
  font-variant: small-caps;
}



/* OVERLAY */

.overlay {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  top: 0;
  z-index: 1;
  overflow: auto;
}

.overlay.visible {
  display: block;
}

.overlay ul {
  max-width: 600px;
  margin: 4em auto;
  padding: 0;
  border-top: 1px solid #DDD;
}

.overlay li{
  list-style: none;
  margin: 0;
  padding: .5em;
  border: 1px solid #DDD;
  border-top: none;
  position: relative;
}

.overlay a {
  text-decoration: none;
  color: #333;
}

.overlay .close_overlay {
  position: fixed;
  right: 0;
  top: 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: .5em;
  padding: .3em;
  background: #ff0f3d;
  color: #FFF;
}

.overlay h3 {
  text-align: center;
}

/* FILTER */

#show_filters {
  display: inline-block;
  background: #3aeea2 url('/assets/imgs/filter.svg') no-repeat center;
  background-size: contain;
  width: 45px;
  height: 45px;
  line-height: 35px;
  text-indent: 1000%;
  cursor: pointer;
  border: 5px solid #3aeea2;
}




/* FAVORITES */

#show_favorites {
  display: inline-block;
  background: #3aeea2 url('/assets/imgs/favorite.svg') no-repeat center;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  font-weight: bold;
  background-size: contain;
  border: 5px solid #3aeea2;
  transition: 1s all ease-out;
}

#show_favorites.action {
  transition: 1s all ease-out;
  background-color: red;
  border-color: red;
}

#favorites a {
  display: flex;
  align-items: flex-start;
}

#favorites img {
  margin-right: 1em;
}

#favorites .remove_favorite {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.5em;
  line-height: .5em;
  padding: .3em;
  border: 1px solid #DDD;
  border-right: none;
  border-top: none;
}



/* FOOTER */

#footer {
  width: 100%;
  margin: 0 0 7em;
  text-align: center;
}

#footer a {
  display: block;
  padding: .5em 1em;
  margin: 0 1em;
  border: 1px solid #64bfb6;
  text-decoration: none;
  color: #64bfb6;
  text-transform: uppercase;
}

#footer .theend {
  display: none;
}

#footer .spinner {
  display: none;
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

#footer .spinner > div {
  width: 18px;
  height: 18px;
  background-color: #64bfb6;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

#footer .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

#footer .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* DETAILS PAGE */

#details {
  flex:  100%;
}

#details .details-inner {
  max-width: 750px;
  margin: 4em auto 2em;
  padding: 2em;
  background: #FFF;
}

#details .product-description {
  text-align: left;
}

#details .related-products .product {
  flex:  1 1 32%;
}