// Screen resolutions
$small_phone:	576px;
$phone: 		720px;
$table: 		940px;
$small_desktop:	1140px;

// Mobile first responsive
@mixin for($media) {
  @if $media == tiny-screens {
    @media screen and (min-width: $small_phone) { @content; }
  }
  @else if $media ==screens-tiny {
    @media screen and (max-width: $small_phone) { @content; }
  }
  @if $media == small-screens {
    @media screen and (min-width: $phone) { @content; }
  }
  @else if $media ==screens-small {
    @media screen and (max-width: $phone) { @content; }
  }

  @else if $media == medium-screens {
    @media screen and (min-width: $table) { @content; }
  }
  @else if $media == screens-medium {
    @media screen and (max-width: $table) { @content; }
  }

  @else if $media == large-screens {
    @media screen and (min-width: $small_desktop) { @content; }
  }
  @else if $media == screens-large {
    @media screen and (max-width: $small_desktop) { @content; }
  }
}


@mixin border-radius($radius: 2px) {
  -webkit-border-radius:  $radius;
  -moz-border-radius: $radius;
  border-radius:  $radius;
}

// Center block
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Clearfix
@mixin clearfix() {
  content: "";
  display: table;
  clear: both;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
  clear: both;
}

/* ------------------------------------------------------ */
.lg-on {
  #wpadminbar {
    z-index: 0;
  }
}
.gallery-one * {
  box-sizing: border-box;
}

.gallery-one {
  width: 100%;
  display: block;
  &:after {
    @include clearfix();
  }
  a {
    border: 0px none;
    &:hover {
      border: 0px none;
    }
  }
  .media-item {
    float: left;
  }
  .thumb {
      > a {
        line-height: 0px;
      }
      a {
        display: block;
      }
      img {
        width: 100%;
        height: auto;
      }
  }
}


.s-gird-view {
  margin-left: -10px;
  margin-right: -10px;
}

.gallery-one[class*="sg-l-"] .media-item,
.gallery-one[class*="sg-m-"] .media-item,
.gallery-one[class*="sg-s-"] .media-item{
  float: left;
  padding: 10px;
}


@include for( small-screens ) {
  @for $i from 1 through 12 {
    .gallery-one.sg-l-#{$i} {
      .media-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}

@media screen and (min-width: $small_phone) and (max-width: $phone) {
  @for $i from 1 through 12 {
    .gallery-one.sg-m-#{$i} {
      .media-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}

@include for( screens-tiny ){
  @for $i from 1 through 12 {
    .gallery-one.sg-s-#{$i} {
      .media-item {
        width: (100% / $i);
        &:nth-child( #{$i}n+1 ) {
          clear: left;
        }
      }
    }
  }
}


/* Slider */
.s-slider {
  background: #F5F5F5;
}