@require '../fonts.styl';

html, body {
  padding: 0;
  margin: 0;
  background: #FFFFFF;
}

.Layout {
  position: relative;
  font-family: "Proxima Nova";
  lost-center: 1280px;
  padding: 0 16px;
}

.Row {
  margin: 64px 0;
}

.RowSmall {
  margin: 16px 0;
}

.Half {
  lost-column: 1/2 0;
}

.Quarter {
  lost-column: 1/4 0;
}

.Third {
  lost-column: 1/3 0;
}

.One {
  lost-column: 1 0;
}

.TwoThird {
  lost-column: 2/3 0;
}

.ThreeQuarter {
  lost-column: 3/4 0;
}

.Section {
  lost-utility: clearfix;
}

.List {
  lost-masonry-wrap: no-flex;

  &Item {
    lost-masonry-column: 1/4;
  }
}

.WhiteBg {
  background: #fff;
}


.Dropzone {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  lost-align: center;
}

.Image {
  position: relative;
  width: 24%;
  padding: 0 0 16%;
  display: inline-block;
  margin-right: 1%;
  background-size: cover;
  background-position: center center;
}

.Nav {
  width: 100%;
  padding: 24px 0 0;
  font-size: 15px;
  color: #555;

  &Part {
    display: inline-block;
    vertical-align: top;
    min-width: 85px;
    box-sizing: border-box;
    padding: 0 16px 0 0;
    letter-spacing: 1px;

    &:last-of-type {
      width: 50%;

    }
  }

  &ActiveItem {
    display: inline-block;
    border-bottom: 1px solid #555;
    color: #00f;
    cursor: pointer;
    padding: 4px 0;
    font-size: 13px;
    text-transform: lowercase;
  }

  &Item {
    padding: 4px 0;
    color: #999;
    cursor: pointer;
    //transition: background .5s;
    text-transform: lowercase;
    opacity: 0;
    transition: opacity .5s;
    font-size: 13px;

    &Show {
      opacity: 1;
    }

    &:hover {
      color: #000;
    }
  }
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) and (orientation:portrait){
  .Half, .Quarter, .ThreeQuarter, .Third, .TwoThird {
    position: static;
    width: 100%;
    float: none;
  }

  .Title {
    font-size: 7.5vw;
    text-align: center;
  }
}