style.scss

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}
@mixin respond-to($mq) {
  @if $mq == middle {
    @media screen and (min-width: 25em) { @content }
  }
}
@mixin clear() {
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}
@font-face {
  font-family: 'Modernpics';
  src: url('fonts/modern-pictograms/modernpics.otf');
  font-weight: normal;
  font-style: normal;
}

*{
  @include vendorize(box-sizing, border-box);
}

[class*="fontawesome-"]:before {
  font-family: 'fontawesome', sans-serif;
  font-size: 1.5em;
}

.is_open {
 
}

.main-content {
  height: 200px;
  background: green;
}


.isNav {
	display: inline-block;
  cursor: pointer;
  @include respond-to (middle) {
    display: none;
  }
}

.nav {
	overflow: hidden;
  @include vendorize("transition", all .2s);
	@include clear();
  @include respond-to (middle) {
    height: auto !important;
  }
}

.nav li {
	padding: 5px 10px;
	background: #1570A6;
	margin-bottom: 2px;
	a {
		color: white;
		text-decoration: none;
    @include respond-to (middle) {
      &:hover {
        text-decoration: underline;
      }
      color: #000000;
    }
	}
  @include respond-to (middle) {
    width: 20%;
    float: left;
    padding: 0 2%;
    background: #FFFFFF;
    border-right: 1px solid #000000;
    
    &:last-child{
      border-right: 0px solid #000000;
    }
  }
}

.content {
  
}

.slide {
  position: relative;
  .slideUl {
    position: relative;
    overflow: hidden;
    li {
      position: absolute;
      left: 0;
      right: 0;
    }
    .currentSlide {
      position: relative;
    }
  }
  img {
    display: block;
    max-width: 100%;
  }
}

.slide_item {
  display: block;
}

.slide_control {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  margin-top: 1em;
  @include clear();
  @include respond-to (middle) {
    display: none;
  }
  &>div {
    float: left;
    width: 50%;
    padding: 1em;
  }
  .slide_prev {
    border-right: 1px solid black;
  }
  .slide_next {
    text-align: right;
  }
}

.slide_Mcontrol {
  display: none;
  @include respond-to (middle) {
    display: block;
    height: 100%;
    width: 5%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: .8;
    ul{
      height: 100%;
    }
    li {
      background: gray;
      text-align: center;
      padding-top: 2em;
      border-bottom: 1px solid black;
      &:last-child{
        border: none;
      }
    }
    .currentLi {
      color: #FFFFFF;
      background: #3382EF;
    }
  }
}

.shopping ul{
  overflow: hidden;
  li {
    float: left;
    width: 100%;
    @include respond-to (middle) {
      width: 50%;
    }
  }
}

.shopping img {
  width: 100%;
}

@include respond-to (middle) {
  body:after {
    content: 'middlescreen';
    display: none;
  }
}