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

	html{
		font-size: 5px; /* important for detecting active media-query */
	}

	.container{
		max-width: 1140px;
	}

	.pseudo-container{
		padding: 0 calc(50% - 570px)
	}

	.xl-12{
		width: 100%;
	}

	.xl-10{
		width: 83.333333%;
	}

    .xl-9{
        width: 75%;
    }

	.xl-8{
		width: 66.66667%;
	}

	.xl-7{
		width: 58.33333%;
	}

	.xl-6{
		width: 50%;
	}

	.xl-5{
		width: 41.66667%;
	}

	.xl-4{
		width: 33.33333%;
	}

	.xl-3{
		width: 25%;
	}

.xl-1{
	width: 8.33333%;
}

.xl-11{
	width: 91.666667%;
}

	.xl-2{
		width: 16.666667%;
	}

    .grid > *.xl-inverse{
        float: right;
    }

	.xl-cleaner{
		clear: both;
		height: 0;
		line-height: 0;
		font-size: 0;
	}

	.xl-spacer{
		height: 10px;
	}

    .image-wrapper.xl-a-r img{
        margin: 0 0 0 auto;
    }

    .image-wrapper.xl-a-c img{
        margin: 0 auto;
    }

    .image-wrapper.xl-a-l img{
        margin: 0 auto 0 0;
    }

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

	.xl-block{
		display: block !important;
	}

	.xl-inline-block{
		display: inline-block !important;
	}

	.xl-inline{
		display: inline !important;
	}

    .table.xl-responsive{
        display: block;
        margin: 0 -10px;
        width: auto;
    }

    .table.xl-responsive .tr{
        display: block;
        float: left;
        position: relative;
        padding: 0 10px;
        width: 25%;
    }

    .table.xl-responsive .th{
        display: none;
    }

    .table.xl-responsive .td{
        display: block;
        border-bottom: none;
        width: auto;
    }

    .table.xl-responsive .td:last-child{
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .xl-a-r{
        text-align: right !important;
    }

    .xl-a-l{
        text-align: left !important;
    }

    .xl-a-c{
        text-align: center !important;
    }

	.xl-a-t{
		vertical-align: top !important;
	}

	.xl-a-m{
		vertical-align: middle !important;
	}

	.xl-a-b{
		vertical-align: bottom !important;
	}

    .xl-f-r{
        float: right;
    }

    .xl-f-l{
        float: left;
    }

}

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

	html{
		font-size: 4px; /* important for detecting active media-query */
	}

	.l-12{
		width: 100%;
	}

	.l-10{
		width: 83.333333%;
	}

    .l-9{
        width: 75%;
    }

	.l-8{
		width: 66.66667%;
	}

	.l-7{
		width: 58.33333%;
	}

	.l-6{
		width: 50%;
	}

	.l-5{
		width: 41.66667%;
	}

	.l-4{
		width: 33.33333%;
	}

	.l-3{
		width: 25%;
	}

.l-1{
	width: 8.33333%;
}

.l-11{
	width: 91.666667%;
}

	.l-2{
		width: 16.666667%;
	}

    .grid > *.l-inverse{
        float: right;
    }

	.l-cleaner{
		clear: both;
		height: 0;
		line-height: 0;
		font-size: 0;
	}

	.l-spacer{
		height: 10px;
	}

    .image-wrapper.l-a-r img{
        margin: 0 0 0 auto;
    }

    .image-wrapper.l-a-c img{
        margin: 0 auto;
    }

    .image-wrapper.l-a-l img{
        margin: 0 auto 0 0;
    }

	.l-nod{
		display: none !important;
	}

	.l-block{
		display: block !important;
	}

	.l-inline-block{
		display: inline-block !important;
	}

	.l-inline{
		display: inline !important;
	}

    .table.l-responsive{
        display: block;
        margin: 0 -10px;
        width: auto;
    }

    .table.lm-responsive .tr{
        display: block;
        float: left;
        position: relative;
        padding: 0 10px;
        width: 25%;
    }

    .table.lm-responsive .th{
        display: none;
    }

    .table.l-responsive .td{
        display: block;
        border-bottom: none;
        width: auto;
    }

    .table.l-responsive .td:last-child{
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .l-a-r{
        text-align: right !important;
    }

    .l-a-l{
        text-align: left !important;
    }

    .l-a-c{
        text-align: center !important;
    }

	.l-a-t{
		vertical-align: top !important;
	}

	.l-a-m{
		vertical-align: middle !important;
	}

	.l-a-b{
		vertical-align: bottom !important;
	}

    .l-f-r{
        float: right;
    }

    .l-f-l{
        float: left;
    }

}

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

	html{
		font-size: 3px; /* important for detecting active media-query */
	}

    .container{
        width: 95%;
    }

	.pseudo-container{
		padding: 0 2.5%;
	}

	.m-12{
		width: 100%;
	}

	.m-10{
		width: 83.333333%;
	}

    .m-9{
        width: 75%;
    }

	.m-8{
		width: 66.66667%;
	}

	.m-7{
		width: 58.33333%;
	}

	.m-6{
		width: 50%;
	}

	.m-5{
		width: 41.66667%;
	}

	.m-4{
		width: 33.33333%;
	}

	.m-3{
		width: 25%;
	}

.m-1{
	width: 8.33333%;
}

.m-11{
	width: 91.666667%;
}

	.m-2{
		width: 16.666667%;
	}

    .grid > *.m-inverse{
        float: right;
    }

	.m-cleaner{
		clear: both;
		height: 0;
		line-height: 0;
		font-size: 0;
	}

	.m-spacer{
		height: 10px;
	}

    .image-wrapper.m-a-r img{
        margin: 0 0 0 auto;
    }

    .image-wrapper.m-a-c img{
        margin: 0 auto;
    }

    .image-wrapper.m-a-l img{
        margin: 0 auto 0 0;
    }

	.m-nod{
		display: none !important;
	}

	.m-block{
		display: block !important;
	}

	.m-inline-block{
		display: inline-block !important;
	}

	.m-inline{
		display: inline !important;
	}

    .table.m-responsive{
        display: block;
        margin: 0 -10px;
        width: auto;
    }

    .table.m-responsive .tr{
        display: block;
        float: left;
        position: relative;
        padding: 0 10px;
        width: 33.33333%;
    }

    .table.m-responsive .th{
        display: none;
    }

    .table.m-responsive .td{
        display: block;
        border-bottom: none;
        width: auto;
    }

    .table.m-responsive .td:last-child{
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .m-a-r{
        text-align: right !important;
    }

    .m-a-l{
        text-align: left !important;
    }

    .m-a-c{
        text-align: center !important;
    }

	.m-a-t{
		vertical-align: top !important;
	}

	.m-a-m{
		vertical-align: middle !important;
	}

	.m-a-b{
		vertical-align: bottom !important;
	}

    .m-f-r{
        float: right;
    }

    .m-f-l{
        float: left;
    }

}

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

	html{
		font-size: 2px; /* important for detecting active media-query */
	}

    .container{
        width: 95%;
    }

	.pseudo-container{
		padding: 0 2.5%;
	}

	.s-12{
		width: 100%;
	}

	.s-10{
		width: 83.333333%;
	}

    .s-9{
        width: 75%;
    }

	.s-8{
		width: 66.66667%;
	}

	.s-7{
		width: 58.33333%;
	}

	.s-6{
		width: 50%;
	}

	.s-5{
		width: 41.66667%;
	}

	.s-4{
		width: 33.33333%;
	}

	.s-3{
		width: 25%;
	}

.s-1{
	width: 8.33333%;
}

.s-11{
	width: 91.666667%;
}

	.s-2{
		width: 16.666667%;
	}

    .grid > *.s-inverse{
        float: right;
    }

	.s-cleaner{
		clear: both;
		height: 0;
		line-height: 0;
		font-size: 0;
	}

	.s-spacer{
		height: 10px;
	}

    .image-wrapper.s-a-r img{
        margin: 0 0 0 auto;
    }

    .image-wrapper.s-a-c img{
        margin: 0 auto;
    }

    .image-wrapper.s-a-l img{
        margin: 0 auto 0 0;
    }

	.s-nod{
		display: none !important;
	}

	.s-block{
		display: block !important;
	}

	.s-inline-block{
		display: inline-block !important;
	}

	.s-inline{
		display: inline !important;
	}

    .table.s-responsive{
        display: block;
        margin: 0 -10px;
        width: auto;
    }

    .table.s-responsive .tr{
        display: block;
        float: left;
        position: relative;
        padding: 0 10px;
        width: 50%;
    }

    .table.s-responsive .th{
        display: none;
    }

    .table.s-responsive .td{
        display: block;
        border-bottom: none;
        width: auto;
    }

    .table.s-responsive .td:last-child{
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .s-a-r{
        text-align: right !important;
    }

    .s-a-l{
        text-align: left !important;
    }

    .s-a-c{
        text-align: center !important;
    }

	.m-a-t{
		vertical-align: top !important;
	}

	.m-a-m{
		vertical-align: middle !important;
	}

	.m-a-b{
		vertical-align: bottom !important;
	}

    .s-f-r{
        float: right;
    }

    .s-f-l{
        float: left;
    }

}

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

	html{
		font-size: 1px; /* important for detecting active media-query */
	}

    .container{
        width: auto;
        padding: 0 0.75em;
    }

	.pseudo-container{
		padding: 0 0.75em;
	}

	.xs-12{
		width: 100%;
	}

	.xs-10{
		width: 83.333333%;
	}

    .xs-9{
        width: 75%;
    }

	.xs-8{
		width: 66.66667%;
	}

	.xs-7{
		width: 58.33333%;
	}

	.xs-6{
		width: 50%;
	}

	.xs-5{
		width: 41.66667%;
	}

	.xs-4{
		width: 33.33333%;
	}

	.xs-3{
		width: 25%;
	}

.xs-1{
	width: 8.33333%;
}

.xs-11{
	width: 91.666667%;
}

	.xs-2{
		width: 16.666667%;
	}

    .grid > *.xs-inverse{
        float: right;
    }

	.xs-cleaner{
		clear: both;
		height: 0;
		line-height: 0;
		font-size: 0;
	}

	.xs-spacer{
		height: 10px;
	}

    .image-wrapper.xs-a-r img{
        margin: 0 0 0 auto;
    }

    .image-wrapper.xs-a-c img{
        margin: 0 auto;
    }

    .image-wrapper.xs-a-l img{
        margin: 0 auto 0 0;
    }

	.xs-nod{
		display: none !important;
	}

	.xs-block{
		display: block !important;
	}

	.xs-inline-block{
		display: inline-block !important;
	}

	.xs-inline{
		display: inline !important;
	}

    .table.xs-responsive{
        display: block;
        margin: 0 -10px;
        width: auto;
    }

    .table.xs-responsive .tr{
        display: block;
        float: left;
        position: relative;
        padding: 0 10px;
        width: 100%;
    }

    .table.xs-responsive .th{
        display: none;
    }

    .table.xs-responsive .td{
        display: block;
        border-bottom: none;
        width: auto;
    }

    .table.xs-responsive .td:last-child{
        margin-bottom: 20px;
        border-bottom: 1px solid #cccccc;
    }

    .xs-a-r{
        text-align: right !important;
    }

    .xs-a-l{
        text-align: left !important;
    }

    .xs-a-c{
        text-align: center !important;
    }

	.xs-a-t{
		vertical-align: top !important;
	}

	.xs-a-m{
		vertical-align: middle !important;
	}

	.xs-a-b{
		vertical-align: bottom !important;
	}

    .xs-f-r{
        float: right;
    }

    .xs-f-l{
        float: left;
    }

}