/* SASS Variables
-------------------------------------------------- */
/* SASS Mixins
-------------------------------------------------- */
@media only screen and (min-width: 320px) {
  .viewport-xs {
    display: inline; } }
@media only screen and (min-width: 768px) {
  .viewport-xs {
    display: none; } }

@media only screen and (min-width: 320px) {
  .viewport-sm {
    display: none; } }
@media only screen and (min-width: 768px) {
  .viewport-sm {
    display: inline; } }

/* Keyframes
-------------------------------------------------- */
@-webkit-keyframes content-fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes pulse-background-1 {
  0% {
    background-color: #C0CFD6; }
  12.5% {
    background-color: #F2F9FE; }
  25% {
    background-color: #214B98; }
  37.5% {
    background-color: #4E6B8A; }
  50% {
    background-color: #121B21; }
  62.5% {
    background-color: #F8F8F8; }
  75% {
    background-color: #CFCFCF; }
  87.5% {
    background-color: #7E7E7E; }
  100% {
    background-color: #171717; } }
@keyframes pulse-overlay-1 {
  0%, 83.33%, 100% {
    background-color: #F8F8F8; }
  16.67% {
    background-color: #7E7E7E; }
  50% {
    background-color: #171717; } }
@keyframes pulse-overlay-2 {
  0%, 83.33%, 100% {
    background-color: #F8F8F8; }
  16.67% {
    background-color: #7E7E7E; }
  50% {
    background-color: #171717; } }
@keyframes pulse-overlay-3 {
  0%, 83.33%, 100% {
    background-color: #4E6B8A; }
  16.67% {
    background-color: #121B21; }
  50% {
    background-color: #F2F9FE; } }
@keyframes pulse-overlay-4 {
  0%, 83.33%, 100% {
    background-color: #F8F8F8; }
  16.67% {
    background-color: #171717; }
  50% {
    background-color: #CFCFCF; } }
@keyframes pulse-overlay-5 {
  0%, 83.33%, 100% {
    background-color: #CFCFCF; }
  16.67% {
    background-color: #F8F8F8; }
  50% {
    background-color: #7E7E7E; } }
@keyframes pulse-overlay-6 {
  0%, 83.33%, 100% {
    background-color: #CFCFCF; }
  16.67% {
    background-color: #F8F8F8; }
  50% {
    background-color: #7E7E7E; } }
@keyframes pulse-overlay-7 {
  0%, 83.33%, 100% {
    background-color: #F2F9FE; }
  16.67% {
    background-color: #FDFEFE; }
  50% {
    background-color: #121B21; } }
@keyframes pulse-overlay-8 {
  0%, 83.33%, 100% {
    background-color: #CFCFCF; }
  16.67% {
    background-color: #F8F8F8; }
  50% {
    background-color: #7E7E7E; } }
@keyframes pulse-background-2 {
  0% {
    background-color: #E7DDD2; }
  12.5% {
    background-color: #E3CCCF; }
  25% {
    background-color: #7E0217; }
  37.5% {
    background-color: #AD9C92; }
  50% {
    background-color: #9B8C8D; }
  62.5% {
    background-color: #586654; }
  75% {
    background-color: #C0CFD6; }
  87.5% {
    background-color: #817E84; }
  100% {
    background-color: #574E56; } }
@keyframes pulse-overlay-9 {
  0%, 83.33%, 100% {
    background-color: #7E0217; }
  16.67% {
    background-color: #E7DDD2; }
  50% {
    background-color: #E3CCCF; } }
@keyframes pulse-overlay-10 {
  0%, 83.33%, 100% {
    background-color: #586654; }
  16.67% {
    background-color: #9B8C8D; }
  50% {
    background-color: #AD9C92; } }
@keyframes pulse-overlay-11 {
  0%, 83.33%, 100% {
    background-color: #AD9C92; }
  16.67% {
    background-color: #9B8C8D; }
  50% {
    background-color: #586654; } }
@keyframes pulse-overlay-12 {
  0%, 83.33%, 100% {
    background-color: #E7DDD2; }
  16.67% {
    background-color: #E3CCCF; }
  50% {
    background-color: #7E0217; } }
@keyframes pulse-overlay-13 {
  0%, 83.33%, 100% {
    background-color: #C0CFD6; }
  16.67% {
    background-color: #AD9C92; }
  50% {
    background-color: #574E56; } }
@keyframes pulse-overlay-14 {
  0%, 83.33%, 100% {
    background-color: #817E84; }
  16.67% {
    background-color: #574E56; }
  50% {
    background-color: #E7DDD2; } }
@keyframes pulse-overlay-15 {
  0%, 83.33%, 100% {
    background-color: #9B8C8D; }
  16.67% {
    background-color: #7E0217; }
  50% {
    background-color: #AD9C92; } }
@keyframes pulse-overlay-16 {
  0%, 83.33%, 100% {
    background-color: #E3CCCF; }
  16.67% {
    background-color: #E7DDD2; }
  50% {
    background-color: #7E0217; } }
@keyframes pulse-overlay-17 {
  0%, 83.33%, 100% {
    background-color: #7E0217; }
  16.67% {
    background-color: #E3CCCF; }
  50% {
    background-color: #E7DDD2; } }
@keyframes pulse-overlay-18 {
  0%, 83.33%, 100% {
    background-color: #574E56; }
  16.67% {
    background-color: #817E84; }
  50% {
    background-color: #E3CCCF; } }
@keyframes pulse-overlay-19 {
  0%, 83.33%, 100% {
    background-color: #E3CCCF; }
  16.67% {
    background-color: #574E56; }
  50% {
    background-color: #E7DDD2; } }
@keyframes pulse-color {
  0% {
    color: #E7DDD2; }
  12.5% {
    color: #E3CCCF; }
  25% {
    color: #7E0217; }
  37.5% {
    color: #AD9C92; }
  50% {
    color: #9B8C8D; }
  62.5% {
    color: #586654; }
  75% {
    color: #C0CFD6; }
  87.5% {
    color: #817E84; }
  100% {
    color: #574E56; } }
/* General
-------------------------------------------------- */
html {
  font-size: 18px; }

body {
  font-family: "stevie-sans", helvetica, arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  line-height: 1.6rem;
  letter-spacing: 0.025em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  color: #4d4d4d;
  overflow: hidden;
  overflow-y: auto; }

a, button,
a:hover,
button:hover,
a:visited,
button:visited,
a:active,
button:active,
a:focus,
button:focus {
  color: #4d4d4d;
  text-decoration: none; }

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: block; }

@media only screen and (min-width: 320px) {
  .container {
    margin-right: 20px;
    margin-left: 20px; } }
@media only screen and (min-width: 768px) {
  .container {
    margin-right: auto;
    margin-left: auto; } }

.logo-small,
.page-title,
.container.contact {
  animation-name: content-fade-in;
  animation-duration: 0.3s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s; }

#image-swapper,
.container {
  animation-name: content-fade-in;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s; }

.title {
  animation-name: content-fade-in;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s; }

/* Frame
-------------------------------------------------- */
@media only screen and (min-width: 320px) {
  .frame-container .frame {
    position: fixed;
    background-color: #e5e5e5; } }
@media only screen and (min-width: 768px) {
  .frame-container .frame {
    z-index: 0; } }

.frame-container:hover .frame {
  animation: pulse-background-2 10s infinite alternate;
  color: #fff; }

.frame-container.aw-2015:hover .frame {
  animation: pulse-background-1 10s infinite alternate;
  color: #fff; }

.frame-top {
  top: 0;
  width: 100%;
  height: 20px; }

.frame-right {
  right: 0;
  width: 20px;
  height: 100%; }

.frame-bottom {
  bottom: 0;
  width: 100%;
  height: 20px; }

.frame-left {
  left: 0;
  width: 20px;
  height: 100%; }

.frame-right .menu-icon {
  position: fixed;
  right: 4px;
  font-size: 1em;
  top: calc(50% - 9px);
  color: #ffffff; }

/* Fullscreen Modal
-------------------------------------------------- */
.modal-fullscreen {
  background: transparent; }

.modal-fullscreen .modal-content {
  background: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none; }

.modal-backdrop.modal-backdrop-fullscreen {
  background: #4d4d4d; }

.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .90;
  filter: alpha(opacity=95); }

/* Menu
-------------------------------------------------- */
.menu-frame-container .frame {
  position: absolute;
  background-color: #ffffff; }

.menu-frame-container:hover .frame {
  animation: pulse-background-2 5s infinite alternate; }

.menu-frame-container.aw-2015:hover .frame {
  animation: pulse-background-1 5s infinite alternate; }

.menu-frame-container .frame-right .menu-icon.close-icon {
  color: #4d4d4d; }

.menu-frame-container:hover .frame-right .menu-icon.close-icon {
  color: #ffffff; }

nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  nav ul {
    padding: 0;
    list-style: none;
    text-align: center; }
  nav li {
    margin: 45px 0; }
  nav a, nav button,
  nav a:hover,
  nav button:hover,
  nav a:visited,
  nav button:visited,
  nav a:active,
  nav button:active,
  nav a:focus,
  nav button:focus {
    color: #ffffff;
    text-decoration: none; }

/* Image Swapper
-------------------------------------------------- */
#image-swapper {
  position: relative; }
  #image-swapper img {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
  #image-swapper img.active {
    z-index: 3; }

/* Logo & Page Title
-------------------------------------------------- */
.title {
  position: fixed;
  z-index: -150;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white; }

.logo {
  position: fixed;
  z-index: 10;
  width: 260px;
  height: 56px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }
  .logo img {
    width: 100%;
    height: 100%; }

@media only screen and (min-width: 320px) {
  .logo-small {
    position: fixed;
    width: 86px;
    height: 18.5px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0; } }
@media only screen and (min-width: 768px) {
  .logo-small {
    top: 35px;
    z-index: -100; } }
.logo-small img {
  width: 100%;
  height: 100%; }

@media only screen and (min-width: 320px) {
  .page-title {
    position: fixed;
    z-index: 0;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center; } }
@media only screen and (min-width: 768px) {
  .page-title {
    z-index: -100;
    bottom: auto;
    top: 50%;
    color: #4d4d4d; } }

/* Collections
-------------------------------------------------- */
.collection-grid {
  padding: 0 !important; }

.collection img {
  width: 960px;
  height: 1200px;
  max-width: 100%;
  height: auto; }

@media only screen and (min-width: 320px) {
  .color-overlay {
    content: "";
    display: block;
    margin-bottom: 20px; } }
@media only screen and (min-width: 768px) {
  .color-overlay {
    margin-bottom: 0px; } }

.color-overlay.last {
  margin-bottom: 0px; }

.color-overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: inherit; }

/* Collections: Autumn Winter 2015
-------------------------------------------------- */
.color-overlay.aw-2015-look-1:hover {
  animation: pulse-overlay-1 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-1.png), pointer; }

.color-overlay.aw-2015-look-2:hover {
  animation: pulse-overlay-2 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-2.png), pointer; }

.color-overlay.aw-2015-look-3:hover {
  animation: pulse-overlay-3 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-3.png), pointer; }

.color-overlay.aw-2015-look-4:hover {
  animation: pulse-overlay-4 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-4.png), pointer; }

.color-overlay.aw-2015-look-5:hover {
  animation: pulse-overlay-5 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-5.png), pointer; }

.color-overlay.aw-2015-look-6:hover {
  animation: pulse-overlay-6 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-6.png), pointer; }

.color-overlay.aw-2015-look-7:hover {
  animation: pulse-overlay-7 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-7.png), pointer; }

.color-overlay.aw-2015-look-8:hover {
  animation: pulse-overlay-8 4s infinite;
  cursor: url(../img/cursor/aw-2015-look-8.png), pointer; }

/* Collections: Autumn Winter 2016
-------------------------------------------------- */
.color-overlay.aw-2016-look-1:hover,
.color-overlay.aw-2016-look-1:focus {
  animation: pulse-overlay-9 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-1.png), pointer; }

.color-overlay.aw-2016-look-2:hover {
  animation: pulse-overlay-10 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-2.png), pointer; }

.color-overlay.aw-2016-look-3:hover {
  animation: pulse-overlay-11 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-3.png), pointer; }

.color-overlay.aw-2016-look-4:hover {
  animation: pulse-overlay-12 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-4.png), pointer; }

.color-overlay.aw-2016-look-5:hover {
  animation: pulse-overlay-13 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-5.png), pointer; }

.color-overlay.aw-2016-look-6:hover {
  animation: pulse-overlay-14 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-6.png), pointer; }

.color-overlay.aw-2016-look-7:hover {
  animation: pulse-overlay-15 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-7.png), pointer; }

.color-overlay.aw-2016-look-8:hover {
  animation: pulse-overlay-16 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-8.png), pointer; }

.color-overlay.aw-2016-look-9:hover {
  animation: pulse-overlay-17 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-9.png), pointer; }

.color-overlay.aw-2016-look-10:hover {
  animation: pulse-overlay-18 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-10.png), pointer; }

.color-overlay.aw-2016-look-11:hover {
  animation: pulse-overlay-19 4s infinite;
  cursor: url(../img/cursor/aw-2016-look-11.png), pointer; }

/* Collection Modals
-------------------------------------------------- */
.image-container {
  display: flex;
  justify-content: center; }

.image-container img {
  height: 100vh;
  z-index: 0;
  cursor: url(../img/cursor/close.png), pointer; }

.modal .logo-small {
  z-index: 1; }

.look-information {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translate(-50.15%, 0%);
  color: #ffffff;
  text-align: center; }

/* Contact
-------------------------------------------------- */
.contact {
  height: calc(100% - 40px);
  margin-top: 20px; }
  .contact p {
    margin-bottom: 30px; }
  @media only screen and (min-width: 320px) {
    .contact p.address {
      margin-top: 30px; } }
  @media only screen and (min-width: 768px) {
    .contact p.address {
      margin-top: 120px; } }
  @media only screen and (min-width: 320px) {
    .contact p.copyright {
      margin-top: 60px;
      margin-bottom: 60px; } }
  @media only screen and (min-width: 768px) {
    .contact p.copyright {
      margin-top: 120px; } }

/*# sourceMappingURL=style.css.map */