/*
    Purecss custom snippets
*/

/* Visibility */

/* hidden-sm */
@media screen and (max-width: 40em) {
    
    .visible-md-only {
        display: none !important;
    }

    .visible-lg-only {
        display: none !important;
    }

    .visible-xl-only {
        display: none !important;
    }

    .visible-md {
        display: none !important;
    }

    .visible-lg {
        display: none !important;   
    }

    .visible-xl {
        display: none !important;   
    }
}

/* hidden-md */
@media screen and (min-width:40em) and (max-width:70em) {
    
    .visible-sm-only {
        display: none !important;
    }

    .visible-lg-only {
        display: none !important;
    }

    .visible-xl-only {
        display: none !important;
    }

    .visible-lg {
        display: none !important;   
    }

    .visible-xl {
        display: none !important;
    }

    .hidden-md {
        display: none !important;
    }
}

/* hidden-lg */
@media screen and (min-width:70em) and (max-width:100em) {

    .visible-sm-only {
        display: none !important;
    }

    .visible-md-only {
        display: none !important;
    }

    .visible-xl-only {
        display: none !important;
    }

    .visible-xl {
        display: none !important;   
    }

    .hidden-md {
        display: none !important;
    }

    .hidden-lg {
        display: none !important;
    }
}

/* hidden-xl */
@media screen and (min-width:100em) {

    .visible-sm-only {
        display: none !important;
    }

    .visible-md-only {
        display: none !important;
    }

    .visible-xl-only {
        display: none !important;
    }

    .hidden-md {
        display: none !important;
    }

    .hidden-lg {
        display: none !important;
    }

    .hidden-xl {
        display: none !important;
    }
}


/* Offsets */

.offset-sm-1 {
    margin-left: 8.3333%;
    *margin-left: 8.3023%;
}

.offset-sm-2 {
    margin-left: 16.6667%;
    *margin-left: 16.6357%;
}

.offset-sm-3 {
    margin-left: 25%;
    *margin-left: 24.9690%;
}

.offset-sm-4 {
    margin-left: 33.3333%;
    *margin-left: 33.3023%;
}

.offset-sm-5 {
    margin-left: 41.6667%;
    *margin-left: 41.6357%;
}

.offset-sm-6 {
    margin-left: 50%;
    *margin-left: 49.9690%;
}

.offset-sm-7 {
    margin-left: 58.3333%;
    *margin-left: 58.3023%;
}

.offset-sm-8 {
    margin-left: 66.6667%;
    *margin-left: 66.6357%;
}

.offset-sm-9 {
    margin-left: 75%;
    *margin-left: 74.9690%;
}

.offset-sm-10 {
    margin-left: 83.3333%;
    *margin-left: 83.3023%;
}

.offset-sm-11 {
    margin-left: 91.6667%;
    *margin-left: 91.6357%;
}

.offset-sm-12 {
    margin-left: 100%;
}

@media screen and (min-width: 40em) {

	.offset-md-1 {
        margin-left: 8.3333%;
        *margin-left: 8.3023%;
    }

    .offset-md-2 {
        margin-left: 16.6667%;
        *margin-left: 16.6357%;
    }

    .offset-md-3 {
        margin-left: 25%;
        *margin-left: 24.9690%;
    }

    .offset-md-4 {
        margin-left: 33.3333%;
        *margin-left: 33.3023%;
    }

    .offset-md-5 {
        margin-left: 41.6667%;
        *margin-left: 41.6357%;
    }

    .offset-md-6 {
        margin-left: 50%;
        *margin-left: 49.9690%;
    }

    .offset-md-7 {
        margin-left: 58.3333%;
        *margin-left: 58.3023%;
    }

    .offset-md-8 {
        margin-left: 66.6667%;
        *margin-left: 66.6357%;
    }

    .offset-md-9 {
        margin-left: 75%;
        *margin-left: 74.9690%;
    }

    .offset-md-10 {
        margin-left: 83.3333%;
        *margin-left: 83.3023%;
    }

    .offset-md-11 {
        margin-left: 91.6667%;
        *margin-left: 91.6357%;
    }

    .offset-md-12 {
        margin-left: 100%;
    }
}

@media screen and (min-width: 70em) {

	.offset-lg-1 {
        margin-left: 8.3333%;
        *margin-left: 8.3023%;
    }

    .offset-lg-2 {
        margin-left: 16.6667%;
        *margin-left: 16.6357%;
    }

    .offset-lg-3 {
        margin-left: 25%;
        *margin-left: 24.9690%;
    }

    .offset-lg-4 {
        margin-left: 33.3333%;
        *margin-left: 33.3023%;
    }

    .offset-lg-5 {
        margin-left: 41.6667%;
        *margin-left: 41.6357%;
    }

    .offset-lg-6 {
        margin-left: 50%;
        *margin-left: 49.9690%;
    }

    .offset-lg-7 {
        margin-left: 58.3333%;
        *margin-left: 58.3023%;
    }

    .offset-lg-8 {
        margin-left: 66.6667%;
        *margin-left: 66.6357%;
    }

    .offset-lg-9 {
        margin-left: 75%;
        *margin-left: 74.9690%;
    }

    .offset-lg-10 {
        margin-left: 83.3333%;
        *margin-left: 83.3023%;
    }

    .offset-lg-11 {
        margin-left: 91.6667%;
        *margin-left: 91.6357%;
    }

    .offset-lg-12 {
        margin-left: 100%;
    }
}

@media screen and (min-width: 100em) {
	
	.offset-xl-1 {
        margin-left: 8.3333%;
        *margin-left: 8.3023%;
    }

    .offset-xl-2 {
        margin-left: 16.6667%;
        *margin-left: 16.6357%;
    }

    .offset-xl-3 {
        margin-left: 25%;
        *margin-left: 24.9690%;
    }

    .offset-xl-4 {
        margin-left: 33.3333%;
        *margin-left: 33.3023%;
    }

    .offset-xl-5 {
        margin-left: 41.6667%;
        *margin-left: 41.6357%;
    }

    .offset-xl-6 {
        margin-left: 50%;
        *margin-left: 49.9690%;
    }

    .offset-xl-7 {
        margin-left: 58.3333%;
        *margin-left: 58.3023%;
    }

    .offset-xl-8 {
        margin-left: 66.6667%;
        *margin-left: 66.6357%;
    }

    .offset-xl-9 {
        margin-left: 75%;
        *margin-left: 74.9690%;
    }

    .offset-xl-10 {
        margin-left: 83.3333%;
        *margin-left: 83.3023%;
    }

    .offset-xl-11 {
        margin-left: 91.6667%;
        *margin-left: 91.6357%;
    }

    .offset-xl-12 {
        margin-left: 100%;
    }
}


/* List flex grid */

[class*="grid-"] {
    -ms-display: flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

[class*="grid-"] > li {
    padding: 0 0.625rem 1.25rem; 
}

.sm-grid-1 > li {
    width: 100%;
    list-style: none; 
}

.sm-grid-2 > li {
    width: 50%;
    list-style: none; 
}

.sm-grid-3 > li {
    width: 33.33333%;
    list-style: none; 
}

.sm-grid-4 > li {
    width: 25%;
    list-style: none; 
}

.sm-grid-5 > li {
    width: 20%;
    list-style: none; 
}

.sm-grid-6 > li {
    width: 16.66667%;
    list-style: none; 
}

.sm-grid-7 > li {
    width: 14.28571%;
    list-style: none; 
}

.sm-grid-8 > li {
    width: 12.5%;
    list-style: none; 
}

.sm-grid-9 > li {
    width: 11.11111%;
    list-style: none; 
}

.sm-grid-10 > li {
    width: 10%;
    list-style: none; 
}

.sm-grid-11 > li {
    width: 9.09091%;
    list-style: none; 
}

.sm-grid-12 > li {
    width: 8.33333%;
    list-style: none; 
}

@media only screen and (min-width: 40em) {

    .md-grid-1 > li {
        width: 100%;
        list-style: none; 
    }

    .md-grid-2 > li {
        width: 50%;
        list-style: none; 
    }

    .md-grid-3 > li {
        width: 33.33333%;
        list-style: none; 
    }

    .md-grid-4 > li {
        width: 25%;
        list-style: none; 
    }

    .md-grid-5 > li {
        width: 20%;
        list-style: none; 
    }

    .md-grid-6 > li {
        width: 16.66667%;
        list-style: none; 
    }

    .md-grid-7 > li {
        width: 14.28571%;
        list-style: none; 
    }

    .md-grid-8 > li {
        width: 12.5%;
        list-style: none; 
    }

    .md-grid-9 > li {
        width: 11.11111%;
        list-style: none; 
    }

    .md-grid-10 > li {
        width: 10%;
        list-style: none; 
    }

    .md-grid-11 > li {
        width: 9.09091%;
        list-style: none; 
    }

    .md-grid-12 > li {
        width: 8.33333%;
        list-style: none; 
    }
}

@media only screen and (min-width: 70em) {

    .lg-grid-1 > li {
        width: 100%;
        list-style: none; 
    }

    .lg-grid-2 > li {
        width: 50%;
        list-style: none; 
    }

    .lg-grid-3 > li {
        width: 33.33333%;
        list-style: none; 
    }

    .lg-grid-4 > li {
        width: 25%;
        list-style: none; 
    }

    .lg-grid-5 > li {
        width: 20%;
        list-style: none; 
    }

    .lg-grid-6 > li {
        width: 16.66667%;
        list-style: none; 
    }

    .lg-grid-7 > li {
        width: 14.28571%;
        list-style: none; 
    }

    .lg-grid-8 > li {
        width: 12.5%;
        list-style: none; 
    }

    .lg-grid-9 > li {
        width: 11.11111%;
        list-style: none; 
    }

    .lg-grid-10 > li {
        width: 10%;
        list-style: none; 
    }

    .lg-grid-11 > li {
        width: 9.09091%;
        list-style: none; 
    }

    .lg-grid-12 > li {
        width: 8.33333%;
        list-style: none; 
    }
}

@media only screen and (min-width: 100em) {

    .xl-grid-1 > li {
        width: 100%;
        list-style: none; 
    }

    .xl-grid-2 > li {
        width: 50%;
        list-style: none; 
    }

    .xl-grid-3 > li {
        width: 33.33333%;
        list-style: none; 
    }

    .xl-grid-4 > li {
        width: 25%;
        list-style: none; 
    }

    .xl-grid-5 > li {
        width: 20%;
        list-style: none; 
    }

    .xl-grid-6 > li {
        width: 16.66667%;
        list-style: none; 
    }

    .xl-grid-7 > li {
        width: 14.28571%;
        list-style: none; 
    }

    .xl-grid-8 > li {
        width: 12.5%;
        list-style: none; 
    }

    .xl-grid-9 > li {
        width: 11.11111%;
        list-style: none; 
    }

    .xl-grid-10 > li {
        width: 10%;
        list-style: none; 
    }

    .xl-grid-11 > li {
        width: 9.09091%;
        list-style: none; 
    }

    .xl-grid-12 > li {
        width: 8.33333%;
        list-style: none; 
    }
}

/* Responsive images */

.image {
  display: block;
  position: relative;
}

.image img {
  display: block;
  height: auto;
  width: 100%;
}

.image.is-square img,
.image.is-1by1 img,
.image.is-5by4 img,
.image.is-4by3 img,
.image.is-3by2 img,
.image.is-5by3 img,
.image.is-16by9 img,
.image.is-2by1 img,
.image.is-3by1 img,
.image.is-4by5 img,
.image.is-3by4 img,
.image.is-2by3 img,
.image.is-3by5 img,
.image.is-9by16 img,
.image.is-1by2 img,
.image.is-1by3 img {
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.image.is-square, .image.is-1by1 {
    padding-top: 100%;
}

.image.is-5by4 {
    padding-top: 80%;
}

.image.is-4by3 {
    padding-top: 75%;
}

.image.is-3by2 {
    padding-top: 66.6666%;
}

.image.is-5by3 {
    padding-top: 60%;
}

.image.is-16by9 {
    padding-top: 56.25%;
}

.image.is-2by1 {
    padding-top: 50%;
}

.image.is-3by1 {
    padding-top: 33.3333%;
}

.image.is-4by5 {
    padding-top: 125%;
}

.image.is-3by4 {
    padding-top: 133.3333%;
}

.image.is-2by3 {
    padding-top: 150%;
}

.image.is-3by5 {
    padding-top: 166.6666%;
}

.image.is-9by16 {
    padding-top: 177.7777%;
}

.image.is-1by2 {
    padding-top: 200%;
}

.image.is-1by3 {
    padding-top: 300%;
}

/* Centered columns */

.sm-centered {
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 40em) {

    .md-centered {
        margin-left: auto;
        margin-right: auto;
    }

}

@media only screen and (min-width: 70em) {

    .lg-centered {
        margin-left: auto;
        margin-right: auto;
    }

}

@media only screen and (min-width: 100em) {

    .xl-centered {
        margin-left: auto;
        margin-right: auto;
    }
    
}