/* # Minimalist custom framework
================================================== */

/* # Font sizes
============== */
html {
  font-size: 62.5%;
  font-size: calc(0.625em);
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body {
  font-size: 1.4em;
  background-color: #c3c6c7;
  color: #64696a;
  font-family: 'lato_light', Arial, sans-serif;
  line-height: 1.2;
}

a {
  color: #15abd2;
}

a:hover,
a:focus,
a:active {
  color: #64696a;
}

p, 
ul, 
ol, 
dl, 
blockquote, 
pre, 
td, 
th, 
label, 
textarea, 
caption, 
details, 
figure {
	margin: .75em 0 0;
	line-height: 1.5;
}

/* # Soft reset
============== */
strong {
	font-weight: bold;
}

p:first-child, 
h1:first-child, 
h2:first-child {
	margin-top: 0;
}

img, 
table, 
td, 
blockquote, 
code, 
pre, 
textarea, 
input, 
video {
	max-width: 100%;
}

a img {
	border: 0; 
}

body > script {
	display: none !important; 
}

/* # Switching box model
============== */
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	            box-sizing: border-box;
}

/* # Hidden content
============== */
.desktop-hidden {
	display: none;
}

/* # "Mod"
============== */

.mod {
  overflow: hidden;
}

/* # "Line"
============== */
.clearfix:after,
.line:after,
.mod:after,
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* # Basic layout
============== */
.nofloat {
	float: none;
}

.left { 
	float: left; 
}

.right { 
	float: right; 
}

.midcenter { 
	position: absolute; 
	left: 0; 
	right: 0; 
	top: 0; 
	bottom: 0; 
	margin: auto; 
}

.center { 
	margin-left: auto; 
	margin-right: auto; 
}

.txtleft {
    text-align: left;
}

.txtright {
    text-align: right;
}

.txtcenter { 
	text-align: center; 
}

.btn { 
	cursor: pointer; 
}

/* # Css Tables
============== */
.row { 
	display: table; 
	table-layout: fixed; 
	width: 100%; 
}

.row > *,
.col { 
	display: table-cell; 
	vertical-align: top; 
}

.inbl {
  display: inline-block;
  vertical-align: top;
}

/* # Width helpers
============== */
.w10    { 
	width: 10%; 
}

.w20    { 
	width: 20%; 
}

.w25    { 
	width: 25%; 
}

.w30    { 
	width: 30%; 
}

.w33    { 
	width: 33.3333%; 
}

.w40    { 
	width: 40%; 
}

.w50    { 
	width: 50%; 
}

.w60    { 
	width: 60%; 
}

.w66    { 
	width: 66.6666%; 
}

.w70    { 
	width: 70%; 
}

.w75    { 
	width: 75%; 
}

.w80    { 
	width: 80%; 
}

.w90    { 
	width: 90%; 
}

.w100   { 
	width: 100%; 
}

.w50p {
	width: 50px;
}

.w80p {
	width: 80px;
}

.w100p {
	width: 100px;
}

.w150p {
	width: 150px;
}

.w200p {
	width: 200px;
}

.w300p {
	width: 300px;
}

.w400p {
	width: 400px;
}

.w500p {
	width: 500px;
}

.w600p {
	width: 600px;
}

.w700p {
	width: 700px;
}

.w800p {
	width: 800px;
}

.w960p { 
	max-width: 960px; 
	margin: 0 auto; 
}

.mw960p {
	max-width: 960px;
}

.w1140p {
	width: 1140px;
}

.mw1140p {
	max-width: 1140px;
	margin: 0 auto; 
}

.wauto {
	width: auto;
}

/* # Spacing helpers
============== */
.m-reset,
.ma0 {
  margin: 0;
}

.p-reset,
.pa0 {
  padding: 0;
}

.ma1,
.mas {
  margin: 10px;
}

.ma2,
.mam {
  margin: 20px;
}

.ma3,
.mal {
  margin: 30px;
}

.pa1,
.pas {
  padding: 10px;
}

.pa2,
.pam {
  padding: 20px;
}

.pa3,
.pal {
  padding: 30px;
}

.mt0,
.mtn {
  margin-top: 0;
}

.mt1,
.mts {
  margin-top: 10px;
}

.mt2,
.mtm {
  margin-top: 20px;
}

.mt3,
.mtl {
  margin-top: 30px;
}

.mr0,
.mrn {
  margin-right: 0;
}

.mr1,
.mrs {
  margin-right: 10px;
}

.mr2,
.mrm {
  margin-right: 20px;
}

.mr3,
.mrl {
  margin-right: 30px;
}

.mb0,
.mbn {
  margin-bottom: 0;
}

.mb1,
.mbs {
  margin-bottom: 10px;
}

.mb2,
.mbm {
  margin-bottom: 20px;
}

.mb3,
.mbl {
  margin-bottom: 30px;
}

.ml0,
.mln {
  margin-left: 0;
}

.ml1,
.mls {
  margin-left: 10px;
}

.ml2,
.mlm {
  margin-left: 20px;
}

.ml3,
.mll {
  margin-left: 30px;
}

.pt0,
.ptn {
  padding-top: 0;
}

.pt1,
.pts {
  padding-top: 10px;
}

.pt2,
.ptm {
  padding-top: 20px;
}

.pt3,
.ptl {
  padding-top: 30px;
}

.pr0,
.prn {
  padding-right: 0;
}

.pr1,
.prs {
  padding-right: 10px;
}

.pr2,
.prm {
  padding-right: 20px;
}

.pr3,
.prl {
  padding-right: 30px;
}

.pb0,
.pbn {
  padding-bottom: 0;
}

.pb1,
.pbs {
  padding-bottom: 10px;
}

.pb2,
.pbm {
  padding-bottom: 20px;
}

.pb3,
.pbl {
  padding-bottom: 30px;
}

.pl0,
.pln {
  padding-left: 0;
}

.pl1,
.pls {
  padding-left: 10px;
}

.pl2,
.plm {
  padding-left: 20px;
}

.pl3,
.pll {
  padding-left: 30px;
}

/* # IE bug fixing
============== */
.ie8 img {
	width: auto;
}

/* # Debug helper
============== */
.debug {
	background: pink;
	outline: 3px solid maroon;
}

/* # Viewport fixing
============== */
@-webkit-viewport {
	width: device-width;
	zoom: 1.0;
}

@-moz-viewport {
	width: device-width;
	zoom: 1.0;
}

@-ms-viewport {
	width: device-width;
	zoom: 1.0;
}

@-o-viewport {
	width: device-width;
	zoom: 1.0;
}

@viewport {
	width: device-width;
	zoom: 1.0;
}

/* # Media queries
============== */
@media print {
	p,
	blockquote {
		orphans: 2;
		widows: 2;
	}

	blockquote,
	ul,
	ol {
		page-break-inside: avoid;
	}

	h1,
	h2,
	h3,
	caption {
		page-break-after: avoid;
	}
}

@media (max-width: 768px) {
	/* quick reset in small resolution and less */

	.w600p,
	.w700p,
	.w800p,
	.w960p,
	.mw960p {
		width: auto;
		float: none;
	}

	/* layouts for small screens */

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

	.small-visible {
		display: block !important;
	}

	.small-no-float {
		float: none;
	}

	.small-inbl {
		display: inline-block;
		float: none;
		vertical-align: top;
	}

	.small-row {
		display: table !important;
		table-layout: fixed !important;
		width: 100% !important;
	}

	.small-col {
		display: table-cell !important;
		vertical-align: top !important;
	}

	/* you shall not pass */

	div,
	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		word-wrap: break-word;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
	
	  /* widths for small screens */

	.small-w25 {
		width: 25% !important;
	}

	.small-w33 {
		width: 33.3333% !important;
	}

	.small-w45 {
		width: 45% !important;
	}
	
	.small-w50 {
		width: 45% !important;
	}

	.small-w66 {
		width: 66.6666% !important;
	}

	.small-w75 {
		width: 75% !important;
	}

	.small-w100,
	.small-wauto {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
}

@media (max-width: 480px) {
  /* quick tiny resolution reset */
	.mod,
	.col,
	fieldset {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}

	.w300p,
	.w400p,
	.w500p {
		width: auto;
		float: none;
	}

	.row {
		display: block !important;
		width: 100% !important;
	}

	/* layouts for tiny screens */
	.tiny-hidden {
		display: none !important;
	}

	.tiny-visible {
		display: block !important;
	}
  
  /* widths for tiny screens */
	.tiny-w25 {
		width: 25% !important;
	}

	.tiny-w33 {
		width: 33.3333% !important;
	}

	.tiny-w50 {
		width: 50% !important;
	}

	.tiny-w66 {
		width: 66.6666% !important;
	}

	.tiny-w75 {
		width: 75% !important;
	}

	.tiny-w100,
	.tiny-wauto {
		display: block !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
	}
}