/* I made this framework for use on my own projects. */
/* It provides some generic base CSS, responsive grids and some included brand colours. c: */
html {-webkit-font-smoothing: antialiased; margin: 0; height: 100%; width: 100%;}
body {color: #6a6a6a; overflow-x: hidden; margin: 0; /* font-size: 0.8em; */ line-height: 1.5; height: 100%; width: 100%;}
h1, h2, h3, h4, h5, h6, ul, al, li, p, form {margin: 0; padding: 0;}
table {border-collapse: collapse; border-spacing: 0;}
ul {list-style-type: none;}
a {text-decoration: none; color: inherit;}
a:hover {cursor: pointer;}
b, strong {font-weight: 700;}
/**/
.center, .center-vertical, .center-horizontal {position:absolute; box-sizing: border-box; display: none;}
/*Row containers for responsive columns*/
.row-left {width: 100%; display: table; }
.row-right {width: 100%;}
.row-left ::after, .row-right ::after, clearfix ::before, clearfix ::after{content: " "; display: table; clear: both;}
/*Responsive column system*/
.col {content: " "; display: inline; min-height: 1px; height: 100%; position: relative; box-sizing: border-box; overflow: hidden; }
.row-left > .col {float: left;}
.row-right > .col {float: right;}
/*s = small (mobile), m = medium (tablet), l = large (desktop). Use unit-s-* to apply to all sizes.*/
.row-left > .unit-s-1 { width: 8.33333333%; }
.row-left > .unit-s-2 { width: 16.66666667%; }
.row-left > .unit-s-3 { width: 25%; }
.row-left > .unit-s-4 { width: 33.33333333%; }
.row-left > .unit-s-5 { width: 41.66666667%; }
.row-left > .unit-s-6 { width: 50%; }
.row-left > .unit-s-7 { width: 58.33333333%; }
.row-left > .unit-s-8 { width: 66.66666667%; }
.row-left > .unit-s-9 { width: 75%; }
.row-left > .unit-s-10 { width: 83.33333333%; }
.row-left > .unit-s-11 { width: 91.66666667%; }
.row-left > .unit-s-12 { width: 100%; }

.row-left > .offset-s-1 { margin-left: 8.33333333%; }
.row-left > .offset-s-2 { margin-left: 16.66666667%; }
.row-left > .offset-s-3 { margin-left: 25%; }
.row-left > .offset-s-4 { margin-left: 33.33333333%; }
.row-left > .offset-s-5 { margin-left: 41.66666667%; }
.row-left > .offset-s-6 { margin-left: 50%; }
.row-left > .offset-s-7 { margin-left: 58.33333333%; }
.row-left > .offset-s-8 { margin-left: 66.66666667%; }
.row-left > .offset-s-9 { margin-left: 75%; }
.row-left > .offset-s-10 { margin-left: 83.33333333%; }
.row-left > .offset-s-11 { margin-left: 91.66666667%; }
	
.row-right > .unit-s-1 { width: 8.33333333%; }
.row-right > .unit-s-2 { width: 16.66666667%; }
.row-right > .unit-s-3 { width: 25%; }
.row-right > .unit-s-4 { width: 33.33333333%; }
.row-right > .unit-s-5 { width: 41.66666667%; }
.row-right > .unit-s-6 { width: 50%; }
.row-right > .unit-s-7 { width: 58.33333333%; }
.row-right > .unit-s-8 { width: 66.66666667%; }
.row-right > .unit-s-9 { width: 75%; }
.row-right > .unit-s-10 { width: 83.33333333%; }
.row-right > .unit-s-11 { width: 91.66666667%; }
.row-right > .unit-s-12 { width: 100%; }

.row-right > .offset-s-1 { margin-right: 8.33333333%; }
.row-right > .offset-s-2 { margin-right: 16.66666667%; }
.row-right > .offset-s-3 { margin-right: 25%; }
.row-right > .offset-s-4 { margin-right: 33.33333333%; }
.row-right > .offset-s-5 { margin-right: 41.66666667%; }
.row-right > .offset-s-6 { margin-right: 50%; }
.row-right > .offset-s-7 { margin-right: 58.33333333%; }
.row-right > .offset-s-8 { margin-right: 66.66666667%; }
.row-right > .offset-s-9 { margin-right: 75%; }
.row-right > .offset-s-10 { margin-right: 83.33333333%; }
.row-right > .offset-s-11 { margin-right: 91.66666667%; }
@media (min-width: 768px) {
.row-left > .unit-m-1 { width: 8.33333333%; }
.row-left > .unit-m-2 { width: 16.66666667%; }
.row-left > .unit-m-3 { width: 25%; }
.row-left > .unit-m-4 { width: 33.33333333%; }
.row-left > .unit-m-5 { width: 41.66666667%; }
.row-left > .unit-m-6 { width: 50%; }
.row-left > .unit-m-7 { width: 58.33333333%; }
.row-left > .unit-m-8 { width: 66.66666667%; }
.row-left > .unit-m-9 { width: 75%; }
.row-left > .unit-m-10 { width: 83.33333333%; }
.row-left > .unit-m-11 { width: 91.66666667%; }
.row-left > .unit-m-12 { width: 100%; }

.row-left > .offset-m-0 { margin-left: 0; }
.row-left > .offset-m-1 { margin-left: 8.33333333%; }
.row-left > .offset-m-2 { margin-left: 16.66666667%; }
.row-left > .offset-m-3 { margin-left: 25%; }
.row-left > .offset-m-4 { margin-left: 33.33333333%; }
.row-left > .offset-m-5 { margin-left: 41.66666667%; }
.row-left > .offset-m-6 { margin-left: 50%; }
.row-left > .offset-m-7 { margin-left: 58.33333333%; }
.row-left > .offset-m-8 { margin-left: 66.66666667%; }
.row-left > .offset-m-9 { margin-left: 75%; }
.row-left > .offset-m-10 { margin-left: 83.33333333%; }
.row-left > .offset-m-11 { margin-left: 91.66666667%; }
	
.row-right > .unit-m-1 { width: 8.33333333%; }
.row-right > .unit-m-2 { width: 16.66666667%; }
.row-right > .unit-m-3 { width: 25%; }
.row-right > .unit-m-4 { width: 33.33333333%; }
.row-right > .unit-m-5 { width: 41.66666667%; }
.row-right > .unit-m-6 { width: 50%; }
.row-right > .unit-m-7 { width: 58.33333333%; }
.row-right > .unit-m-8 { width: 66.66666667%; }
.row-right > .unit-m-9 { width: 75%; }
.row-right > .unit-m-10 { width: 83.33333333%; }
.row-right > .unit-m-11 { width: 91.66666667%; }
.row-right > .unit-m-12 { width: 100%; }

.row-right > .offset-m-0 { margin-right: 0; }
.row-right > .offset-m-1 { margin-right: 8.33333333%; }
.row-right > .offset-m-2 { margin-right: 16.66666667%; }
.row-right > .offset-m-3 { margin-right: 25%; }
.row-right > .offset-m-4 { margin-right: 33.33333333%; }
.row-right > .offset-m-5 { margin-right: 41.66666667%; }
.row-right > .offset-m-6 { margin-right: 50%; }
.row-right > .offset-m-7 { margin-right: 58.33333333%; }
.row-right > .offset-m-8 { margin-right: 66.66666667%; }
.row-right > .offset-m-9 { margin-right: 75%; }
.row-right > .offset-m-10 { margin-right: 83.33333333%; }
.row-right > .offset-m-11 { margin-right: 91.66666667%; }
}
@media (min-width: 1200px) { 
.row-left > .unit-l-1 { width: 8.33333333%; }
.row-left > .unit-l-2 { width: 16.66666667%; }
.row-left > .unit-l-3 { width: 25%; }
.row-left > .unit-l-4 { width: 33.33333333%; }
.row-left > .unit-l-5 { width: 41.66666667%; }
.row-left > .unit-l-6 { width: 50%; }
.row-left > .unit-l-7 { width: 58.33333333%; }
.row-left > .unit-l-8 { width: 66.66666667%; }
.row-left > .unit-l-9 { width: 75%; }
.row-left > .unit-l-10 { width: 83.33333333%; }
.row-left > .unit-l-11 { width: 91.66666667%; }
.row-left > .unit-l-12 { width: 100%; }

.row-left > .offset-l-0 { margin-left: 0; }
.row-left > .offset-l-1 { margin-left: 8.33333333%; }
.row-left > .offset-l-2 { margin-left: 16.66666667%; }
.row-left > .offset-l-3 { margin-left: 25%; }
.row-left > .offset-l-4 { margin-left: 33.33333333%; }
.row-left > .offset-l-5 { margin-left: 41.66666667%; }
.row-left > .offset-l-6 { margin-left: 50%; }
.row-left > .offset-l-7 { margin-left: 58.33333333%; }
.row-left > .offset-l-8 { margin-left: 66.66666667%; }
.row-left > .offset-l-9 { margin-left: 75%; }
.row-left > .offset-l-10 { margin-left: 83.33333333%; }
.row-left > .offset-l-11 { margin-left: 91.66666667%; }

.row-right > .unit-l-1 { width: 8.33333333%; }
.row-right > .unit-l-2 { width: 16.66666667%; }
.row-right > .unit-l-3 { width: 25%; }
.row-right > .unit-l-4 { width: 33.33333333%; }
.row-right > .unit-l-5 { width: 41.66666667%; }
.row-right > .unit-l-6 { width: 50%; }
.row-right > .unit-l-7 { width: 58.33333333%; }
.row-right > .unit-l-8 { width: 66.66666667%; }
.row-right > .unit-l-9 { width: 75%; }
.row-right > .unit-l-10 { width: 83.33333333%; }
.row-right > .unit-l-11 { width: 91.66666667%; }
.row-right > .unit-l-12 { width: 100%; }

.row-right > .offset-l-0 { margin-right: 0; }
.row-right > .offset-l-1 { margin-right: 8.33333333%; }
.row-right > .offset-l-2 { margin-right: 16.66666667%; }
.row-right > .offset-l-3 { margin-right: 25%; }
.row-right > .offset-l-4 { margin-right: 33.33333333%; }
.row-right > .offset-l-5 { margin-right: 41.66666667%; }
.row-right > .offset-l-6 { margin-right: 50%; }
.row-right > .offset-l-7 { margin-right: 58.33333333%; }
.row-right > .offset-l-8 { margin-right: 66.66666667%; }
.row-right > .offset-l-9 { margin-right: 75%; }
.row-right > .offset-l-10 { margin-right: 83.33333333%; }
.row-right > .offset-l-11 { margin-right: 91.66666667%; }
}

/*Brand colors*/
.brand-facebook{ color: #3B5998;}
.brand-twitter{ color: #00ACED;}
.brand-pinterest{ color: #CB2027;}
.brand-google-plus{ color: #DD4B39;}
.brand-tumblr{ color: #2C4762;}
.brand-instagram{ color: #675144;}
.brand-instagram-light{ color: #fff0cf;}
.brand-deviantart{ color: #506256;}
.brand-deviantart-light{ color: #B3C432;}
.brand-skype{ color: #00AFF0;}
.brand-blogger{ color: #F26300;}
.brand-wordpress{ color:#21759B;}
.brand-youtube{ color: #C4302B;}
.brand-itunes{ color: #2b5ac4;}
.brand-rss{ color: #FF7900;}