/*! GRIDLING
 * ---------------------------------------------
 * Version: 1.2.1
 * Copyright (c) 2017 N. Talbot; Dual licensed: MIT/GPL
 *
 * Description:
 * ---------------------------------------------
 * Gridling is a lightweight CSS layout tool for building responsive websites fast.
 *
 * Inspired by the Twitter Bootstrap framework, simple row and column classes are used
 * to convert design layouts into a grid of halves, thirds, quarters and fifths.
 * Gridling also includes breakpoint variables that can be reused throughout your project
 * to handle all media queries, its system is adaptable and highly customisable.
 *
 * Features:
 * ---------------------------------------------
 * 1. Grid system
 * 2. Spacing utilties (Padding and Margin)
 * 3. Media breakpoint variables
 *
 * More information:
 * ---------------------------------------------
 * http://gridling.naashdev.net
 * By Nathan Talbot
 */

.grid {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.grid:before,
.grid:after {
	content: "";
	display: table;
}

.grid:after {
	clear: both;
}

.grid-lg {
	max-width: 1400px;
}

.row:before,
.row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

.col {
	width: 100%;
	float: left;
}

.m-b-1 {
	margin-bottom: 10px;
}

.m-b-2 {
	margin-bottom: 20px;
}

.m-b-3 {
	margin-bottom: 30px;
}

.m-b-4 {
	margin-bottom: 40px;
}

.m-b-5 {
	margin-bottom: 50px;
}

.m-b-6 {
	margin-bottom: 60px;
}

.m-b-7 {
	margin-bottom: 70px;
}

.m-b-8 {
	margin-bottom: 80px;
}

.m-b-9 {
	margin-bottom: 90px;
}

.m-b-10 {
	margin-bottom: 100px;
}

.m-b-11 {
	margin-bottom: 110px;
}

.m-b-12 {
	margin-bottom: 120px;
}

.m-t-1 {
	margin-top: 10px;
}

.m-t-2 {
	margin-top: 20px;
}

.m-t-3 {
	margin-top: 30px;
}

.m-t-4 {
	margin-top: 40px;
}

.m-t-5 {
	margin-top: 50px;
}

.m-t-6 {
	margin-top: 60px;
}

.m-t-7 {
	margin-top: 70px;
}

.m-t-8 {
	margin-top: 80px;
}

.m-t-9 {
	margin-top: 90px;
}

.m-t-10 {
	margin-top: 100px;
}

.m-t-11 {
	margin-top: 110px;
}

.m-t-12 {
	margin-top: 120px;
}

.p-b-1 {
	padding-bottom: 10px;
}

.p-b-2 {
	padding-bottom: 20px;
}

.p-b-3 {
	padding-bottom: 30px;
}

.p-b-4 {
	padding-bottom: 40px;
}

.p-b-5 {
	padding-bottom: 50px;
}

.p-b-6 {
	padding-bottom: 60px;
}

.p-b-7 {
	padding-bottom: 70px;
}

.p-b-8 {
	padding-bottom: 80px;
}

.p-b-9 {
	padding-bottom: 90px;
}

.p-b-10 {
	padding-bottom: 100px;
}

.p-b-11 {
	padding-bottom: 110px;
}

.p-b-12 {
	padding-bottom: 120px;
}

.p-t-1 {
	padding-top: 10px;
}

.p-t-2 {
	padding-top: 20px;
}

.p-t-3 {
	padding-top: 30px;
}

.p-t-4 {
	padding-top: 40px;
}

.p-t-5 {
	padding-top: 50px;
}

.p-t-6 {
	padding-top: 60px;
}

.p-t-7 {
	padding-top: 70px;
}

.p-t-8 {
	padding-top: 80px;
}

.p-t-9 {
	padding-top: 90px;
}

.p-t-10 {
	padding-top: 100px;
}

.p-t-11 {
	padding-top: 110px;
}

.p-t-12 {
	padding-top: 120px;
}

@media screen and (min-width: 768px) {

.c-1-2 {
	width: 50%;
}

.c-1-3 {
	width: 33.333333333%;
}

.c-2-3 {
	width: 66.666666666%;
}

.c-1-4 {
	width: 25%;
}

.c-3-4 {
	width: 75%;
}

.c-1-5 {
	width: 20%;
}

.c-2-5 {
	width: 40%;
}

.c-3-5 {
	width: 60%;
}

.c-4-5 {
	width: 80%;
}

.r-g-1 {
	margin-left: -10px;
}

.r-g-1 > .col {
	padding-left: 10px;
}

.r-g-2 {
	margin-left: -20px;
}

.r-g-2 > .col {
	padding-left: 20px;
}

.r-g-3 {
	margin-left: -30px;
}

.r-g-3 > .col {
	padding-left: 30px;
}

.r-g-4 {
	margin-left: -40px;
}

.r-g-4 > .col {
	padding-left: 40px;
}

.r-g-5 {
	margin-left: -50px;
}

.r-g-5 > .col {
	padding-left: 50px;
}

.r-g-6 {
	margin-left: -60px;
}

.r-g-6 > .col {
	padding-left: 60px;
}

.r-g-7 {
	margin-left: -70px;
}

.r-g-7 > .col {
	padding-left: 70px;
}

.r-g-8 {
	margin-left: -80px;
}

.r-g-8 > .col {
	padding-left: 80px;
}

.r-g-9 {
	margin-left: -90px;
}

.r-g-9 > .col {
	padding-left: 90px;
}

.r-g-10 {
	margin-left: -100px;
}

.r-g-10 > .col {
	padding-left: 100px;
}

.r-g-11 {
	margin-left: -110px;
}

.r-g-11 > .col {
	padding-left: 110px;
}

.r-g-12 {
	margin-left: -120px;
}

.r-g-12 > .col {
	padding-left: 120px;
}

}

@media screen and (max-width: 1024) and (min-width: 768px) {

.md-1-2 {
	width: 50%;
}

.md-1-3 {
	width: 33.333333333%;
}

.md-2-3 {
	width: 66.666666666%;
}

.md-1-4 {
	width: 25%;
}

.md-3-4 {
	width: 75%;
}

.md-1-5 {
	width: 20%;
}

.md-2-5 {
	width: 40%;
}

.md-3-5 {
	width: 60%;
}

.md-4-5 {
	width: 80%;
}

.md-g-1 {
	margin-left: -10px;
}

.md-g-1 > .col {
	padding-left: 10px;
}

.md-g-2 {
	margin-left: -20px;
}

.md-g-2 > .col {
	padding-left: 20px;
}

.md-g-3 {
	margin-left: -30px;
}

.md-g-3 > .col {
	padding-left: 30px;
}

.md-g-4 {
	margin-left: -40px;
}

.md-g-4 > .col {
	padding-left: 40px;
}

.md-g-5 {
	margin-left: -50px;
}

.md-g-5 > .col {
	padding-left: 50px;
}

.md-g-6 {
	margin-left: -60px;
}

.md-g-6 > .col {
	padding-left: 60px;
}

.md-g-7 {
	margin-left: -70px;
}

.md-g-7 > .col {
	padding-left: 70px;
}

.md-g-8 {
	margin-left: -80px;
}

.md-g-8 > .col {
	padding-left: 80px;
}

.md-g-9 {
	margin-left: -90px;
}

.md-g-9 > .col {
	padding-left: 90px;
}

.md-g-10 {
	margin-left: -100px;
}

.md-g-10 > .col {
	padding-left: 100px;
}

.md-g-11 {
	margin-left: -110px;
}

.md-g-11 > .col {
	padding-left: 110px;
}

.md-g-12 {
	margin-left: -120px;
}

.md-g-12 > .col {
	padding-left: 120px;
}

}

@media screen and (min-width: 1025) {

.lg-1-2 {
	width: 50%;
}

.lg-1-3 {
	width: 33.333333333%;
}

.lg-2-3 {
	width: 66.666666666%;
}

.lg-1-4 {
	width: 25%;
}

.lg-3-4 {
	width: 75%;
}

.lg-1-5 {
	width: 20%;
}

.lg-2-5 {
	width: 40%;
}

.lg-3-5 {
	width: 60%;
}

.lg-4-5 {
	width: 80%;
}

.lg-g-1 {
	margin-left: -10px;
}

.lg-g-1 > .col {
	padding-left: 10px;
}

.lg-g-2 {
	margin-left: -20px;
}

.lg-g-2 > .col {
	padding-left: 20px;
}

.lg-g-3 {
	margin-left: -30px;
}

.lg-g-3 > .col {
	padding-left: 30px;
}

.lg-g-4 {
	margin-left: -40px;
}

.lg-g-4 > .col {
	padding-left: 40px;
}

.lg-g-5 {
	margin-left: -50px;
}

.lg-g-5 > .col {
	padding-left: 50px;
}

.lg-g-6 {
	margin-left: -60px;
}

.lg-g-6 > .col {
	padding-left: 60px;
}

.lg-g-7 {
	margin-left: -70px;
}

.lg-g-7 > .col {
	padding-left: 70px;
}

.lg-g-8 {
	margin-left: -80px;
}

.lg-g-8 > .col {
	padding-left: 80px;
}

.lg-g-9 {
	margin-left: -90px;
}

.lg-g-9 > .col {
	padding-left: 90px;
}

.lg-g-10 {
	margin-left: -100px;
}

.lg-g-10 > .col {
	padding-left: 100px;
}

.lg-g-11 {
	margin-left: -110px;
}

.lg-g-11 > .col {
	padding-left: 110px;
}

.lg-g-12 {
	margin-left: -120px;
}

.lg-g-12 > .col {
	padding-left: 120px;
}

}

@media screen and (min-width: 1600px) {

.xl-1-2 {
	width: 50%;
}

.xl-1-3 {
	width: 33.333333333%;
}

.xl-2-3 {
	width: 66.666666666%;
}

.xl-1-4 {
	width: 25%;
}

.xl-3-4 {
	width: 75%;
}

.xl-1-5 {
	width: 20%;
}

.xl-2-5 {
	width: 40%;
}

.xl-3-5 {
	width: 60%;
}

.xl-4-5 {
	width: 80%;
}

.xl-g-1 {
	margin-left: -10px;
}

.xl-g-1 > .col {
	padding-left: 10px;
}

.xl-g-2 {
	margin-left: -20px;
}

.xl-g-2 > .col {
	padding-left: 20px;
}

.xl-g-3 {
	margin-left: -30px;
}

.xl-g-3 > .col {
	padding-left: 30px;
}

.xl-g-4 {
	margin-left: -40px;
}

.xl-g-4 > .col {
	padding-left: 40px;
}

.xl-g-5 {
	margin-left: -50px;
}

.xl-g-5 > .col {
	padding-left: 50px;
}

.xl-g-6 {
	margin-left: -60px;
}

.xl-g-6 > .col {
	padding-left: 60px;
}

.xl-g-7 {
	margin-left: -70px;
}

.xl-g-7 > .col {
	padding-left: 70px;
}

.xl-g-8 {
	margin-left: -80px;
}

.xl-g-8 > .col {
	padding-left: 80px;
}

.xl-g-9 {
	margin-left: -90px;
}

.xl-g-9 > .col {
	padding-left: 90px;
}

.xl-g-10 {
	margin-left: -100px;
}

.xl-g-10 > .col {
	padding-left: 100px;
}

.xl-g-11 {
	margin-left: -110px;
}

.xl-g-11 > .col {
	padding-left: 110px;
}

.xl-g-12 {
	margin-left: -120px;
}

.xl-g-12 > .col {
	padding-left: 120px;
}

}

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

.sm-1-2 {
	width: 50%;
}

.sm-1-3 {
	width: 33.333333333%;
}

.sm-2-3 {
	width: 66.666666666%;
}

.sm-1-4 {
	width: 25%;
}

.sm-3-4 {
	width: 75%;
}

.sm-1-5 {
	width: 20%;
}

.sm-2-5 {
	width: 40%;
}

.sm-3-5 {
	width: 60%;
}

.sm-4-5 {
	width: 80%;
}

.sm-g-1 {
	margin-left: -10px;
}

.sm-g-1 > .col {
	padding-left: 10px;
}

.sm-g-2 {
	margin-left: -20px;
}

.sm-g-2 > .col {
	padding-left: 20px;
}

.sm-g-3 {
	margin-left: -30px;
}

.sm-g-3 > .col {
	padding-left: 30px;
}

.sm-g-4 {
	margin-left: -40px;
}

.sm-g-4 > .col {
	padding-left: 40px;
}

.sm-g-5 {
	margin-left: -50px;
}

.sm-g-5 > .col {
	padding-left: 50px;
}

.sm-g-6 {
	margin-left: -60px;
}

.sm-g-6 > .col {
	padding-left: 60px;
}

.sm-g-7 {
	margin-left: -70px;
}

.sm-g-7 > .col {
	padding-left: 70px;
}

.sm-g-8 {
	margin-left: -80px;
}

.sm-g-8 > .col {
	padding-left: 80px;
}

.sm-g-9 {
	margin-left: -90px;
}

.sm-g-9 > .col {
	padding-left: 90px;
}

.sm-g-10 {
	margin-left: -100px;
}

.sm-g-10 > .col {
	padding-left: 100px;
}

.sm-g-11 {
	margin-left: -110px;
}

.sm-g-11 > .col {
	padding-left: 110px;
}

.sm-g-12 {
	margin-left: -120px;
}

.sm-g-12 > .col {
	padding-left: 120px;
}

}

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

.xs-1-2 {
	width: 50%;
}

.xs-1-3 {
	width: 33.333333333%;
}

.xs-2-3 {
	width: 66.666666666%;
}

.xs-1-4 {
	width: 25%;
}

.xs-3-4 {
	width: 75%;
}

.xs-1-5 {
	width: 20%;
}

.xs-2-5 {
	width: 40%;
}

.xs-3-5 {
	width: 60%;
}

.xs-4-5 {
	width: 80%;
}

.xs-g-1 {
	margin-left: -10px;
}

.xs-g-1 > .col {
	padding-left: 10px;
}

.xs-g-2 {
	margin-left: -20px;
}

.xs-g-2 > .col {
	padding-left: 20px;
}

.xs-g-3 {
	margin-left: -30px;
}

.xs-g-3 > .col {
	padding-left: 30px;
}

.xs-g-4 {
	margin-left: -40px;
}

.xs-g-4 > .col {
	padding-left: 40px;
}

.xs-g-5 {
	margin-left: -50px;
}

.xs-g-5 > .col {
	padding-left: 50px;
}

.xs-g-6 {
	margin-left: -60px;
}

.xs-g-6 > .col {
	padding-left: 60px;
}

.xs-g-7 {
	margin-left: -70px;
}

.xs-g-7 > .col {
	padding-left: 70px;
}

.xs-g-8 {
	margin-left: -80px;
}

.xs-g-8 > .col {
	padding-left: 80px;
}

.xs-g-9 {
	margin-left: -90px;
}

.xs-g-9 > .col {
	padding-left: 90px;
}

.xs-g-10 {
	margin-left: -100px;
}

.xs-g-10 > .col {
	padding-left: 100px;
}

.xs-g-11 {
	margin-left: -110px;
}

.xs-g-11 > .col {
	padding-left: 110px;
}

.xs-g-12 {
	margin-left: -120px;
}

.xs-g-12 > .col {
	padding-left: 120px;
}

}