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

.grid-content { margin: 1.5em 0 3em 0; }

@media screen and (max-width: 60em) {
   .grid-content { margin-top: 0; }
}

.grid-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
}

.mix,
.gap {
    display: inline-block;
    vertical-align: top;
}

.mix {
    background: #fafafa;
    border-radius: 2px;
    margin-bottom: 1.2rem;
    border: solid 1px #f7f7f7;
    position: relative;
}

.mix:before {
    /*content: ''; */
    display: inline-block;
    padding-top: 56.25%;
}


.mix,
.gap {
    width: calc(100%/1 - (((1 - 1) * 1.2rem) / 1));
}

@media screen and (min-width: 600px) {
    .mix,
    .gap {
        width: calc(100%/2 - (((2 - 1) * 1.2rem) / 2));
    }
}

@media screen and (min-width: 1024px) {
    .mix,
    .gap {
        width: calc(100%/3 - (((3 - 1) * 1.2rem) / 3));
    }
}


/* 4 column */
.grid-items-stencil .mix,
.grid-items-stencil .gap {
    width: calc(100%/1 - (((1.3 - 1) * 1.2rem) / 1));
}

.grid-content.filter-open .grid-items-stencil .mix,
.grid-content.filter-open .grid-items-stencil .gap {
   width: calc(100%/1 - (((1 - 1) * 1.2rem) / 1));
}



@media screen and (min-width: 800px) {
    .grid-items-stencil .mix,
    .grid-items-stencil .gap {
        width: calc(100%/3 - (((2 - 1) * 1.2rem) / 2));
    }
}

@media screen and (min-width: 1024px) {
    .grid-items-stencil .mix,
    .grid-items-stencil .gap,
    .grid-items-lesson .mix,
    .grid-items-lesson .gap,
    .grid-items-tutorial .mix,
    .grid-items-tutorial .gap {
        width: calc(100%/4 - (((3 - 1) * 1.2rem) / 3));
    }
}




.sidebar { display: none; }
.grid-filters { width: 165px; float: left; }
.grid-items { /*float: left; */ }

.grid-items .mix {
    /*width: 33%;
    display: inline-block;
    vertical-align: top;
    background-color: #f7f7f7;
    border: solid 5px #FFF;
    border-bottom: solid 10px #fff;
    position: relative;
    transition: opacity .3s;*/
}

.grid-items .mix:hover {
   box-shadow: 0px 0px 15px 0px rgba(0,0,0,.1);
   transition: box-shadow .5s;
}

.grid-items .mix a {
   outline: none;
}

.grid-items .mix:hover a { opacity: 1 !important;  }
.grid-items .mix:hover { opacity: .85; }

.grid-items .mix img {
	width: 100%;
}

.grid-items .mix h3 {
	margin: 0px 0 9px;
    text-transform: capitalize;
    font-weight: 100 !important;
    width: 100%;
    display: block;
    left: 0;
}

.grid-items.grid-items-stencil .mix h3 { margin: 0; }

.grid-items .mix h3 a { color: #1FC3DF; }

.grid-meta { padding: 10px 15px 20px 15px; text-align: left;}

.grid-meta .grid-title {
	font-size: 21px;
    line-height: 26px;
    margin-bottom: 5px;
}

.grid-items-stencil .grid-meta { padding: 5px 15px 10px 10px; }

.grid-meta h5 {
   margin-bottom: 10px;
   font-size: 20px;
   line-height: 25px;
}

.grid-type {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.grid-actions a {
    text-transform: uppercase;
    font-size: .75em;
    font-weight: 600;
    position: relative;
    top: -3px;
}

.grid-actions a i { font-size: 1.1em; }

.grid-detail-box {
	position: relative;
	margin-top: 10px;
}

.grid-grade {
    position: absolute;
    bottom: 18px;
    left: 15px;
    color: #ccc;
    text-transform: uppercase;
    font-size: .8em;
    border-radius: 2px;
    display: inline;
    font-weight: 500;
    padding: 0 5px;
    line-height: 15px;
    border: solid 1px #ccc;
}

.grid-type a {
	background-color: #1FC3DF;
    color: #fff;
    padding: 0px 5px;
    text-transform: uppercase;
    font-size: .8em;
    margin-right: 5px;
    border-radius: 2px;
}

.grid-detail {
	font-size: 12px;
    color: #bbb;
}

.grid-detail i { margin-right: 4px; width: 12px; }
.grid-detail.video-time i { font-size: 14px; }
.grid-detail.video-level i { position: relative; top: -1px; }

.grid-items-video .play-overlay {
   position: absolute;
    font-size: 70px;
    left: 38%;
    opacity: .5;
    color: #ddd;
    top: 40px;
    opacity: .3;
    pointer-events: none;
    pointer-events: none;
}

.grid-excerpt {
    font-size: .9em;
    line-height: 1.6em;
}


.mixitup-page-meta {
   width: 100%;
   text-align: center;
   margin-bottom: 1.5em;
   position: relative;
}

.mixitup-page-list {
   position: absolute;
   top: -3px;
   right: 0;
}

.mixitup-page-list,
.mixitup-page-stats { display: inline; }

.mixitup-page-stats { color: #ddd; }
.mixitup-page-stats b { color: #ccc; padding: 0 1px; }

.mixitup-page-meta.top-grid .mixitup-page-stats-disabled { display: none; }

button.mixitup-control {
    padding: 10px;
    border-radius: 50%;
    background: transparent;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 1em;
    line-height: 12px;
    font-weight: 700;
    color: #1FC3DF;
    cursor: pointer;
    margin-right: 5px;
}

.mixitup-page-list-disabled { display: none; }
button.mixitup-control.mixitup-control-disabled {
	opacity: .2;
}

.mixitup-control-prev,
.mixitup-control-next { display: none; }

button.mixitup-control.mixitup-control-active {
	background-color: #1FC3DF;
	color: #fff;
}

.grid-empty-message {
	display: none;
	text-align: center;
    position: relative;
    top: 10vw;
    color: #ccc;
}

#grid-mobile-button { display: none; }


/* lesson specific */
.lesson-type {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.lesson-detail-box {
	position: relative;
	margin-top: 10px;
}

.lesson-grade {
    position: absolute;
    bottom: 18px;
    left: 15px;
    color: #ccc;
    text-transform: uppercase;
    font-size: .8em;
    border-radius: 2px;
    display: inline;
    font-weight: 500;
    padding: 0 5px;
    line-height: 15px;
    border: solid 1px #ccc;
}

.lesson-type a {
	background-color: #1FC3DF;
    color: #fff;
    padding: 4px 5px;
    text-transform: uppercase;
    font-size: .8em;
    margin-right: 5px;
    border-radius: 2px;
}

.lesson-detail {
	font-size: 12px;
    color: #bbb;
}

.lesson-detail i { margin-right: 4px; width: 12px; }
.lesson-detail.lesson-time i { font-size: 14px; }
.lesson-detail.lesson-level i { position: relative; top: -1px; }

.lesson-time { bottom: 59px; }
.lesson-grades { bottom: 15px; }
.lesson-level { bottom: 37px; }

.lesson-excerpt { font-size: .9em; line-height: 1.5em;  }


@media screen and (max-width: 800px) {
   body.post-type-archive-lesson #content { padding-top: 10px; }
}

@media screen and (max-width: 500px) {

   body.archive #main { padding-top: 10px; }

   .grid-content {
      margin: 1em 0 3em 0;
    }

   .mixitup-page-meta { text-align: center; margin-bottom: 1em; }

   .grid-filters {
      position: absolute;
      left: -165px;
      margin-top: 2em;
      z-index: 5;
   }
   .grid-content.filter-open .grid-filters { position: relative; left: 0; }

   #grid-mobile-button {
      position: absolute;
      font-size: 1em;
      display: block;
      cursor: pointer;
      z-index: 1;
   }

   button.mixitup-control {
      width: auto;
      height: auto;
      margin-top: 6px;
      margin-right: 5px;
      padding: 3px 5px;
   }

   .grid-content.filter-open button.mixitup-control { display: none; }

   .grid-content.filter-open .grid-items {  }

   #grid-mobile-button:hover {
      opacity: .9;
   }

   .grid-items { }

   .mixitup-page-meta.top-grid .mixitup-page-list  { display: none; }
   .mixitup-page-meta.bottom-grid .mixitup-page-stats  { display: none; }



}