/*!
 *
 * mmBase.css
 * Copyright 2017 Zoom Advertising
 * Design/Code by @m2robinson.
 * Version: 0.1
 *
 */


body {
    position: relative;
    height: 100%;
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
}

/* Responsive Images 
============================================================ */
img.responsive  { width:100%; height:auto; }

/* Typography 
============================================================ */

body, p, .default { font-size:14px; line-height:18px; font-weight:normal; font-style:normal; }

.jumbo      { font-size:48px; line-height:60px; font-weight:normal; }
h1, .h1     { font-size:36px; line-height:48px; font-weight:normal; }
h2, .h2     { font-size:30px; line-height:36px; font-weight:normal; }
h3, .h3     { font-size:24px; line-height:30px; font-weight:normal; }
h4, .h4     { font-size:18px; line-height:24px; font-weight:normal; }
h5, .h5     { font-size:14px; line-height:28px; font-weight:normal; }
h6, .h6     { font-size:12px; line-height:18px; font-weight:normal; }

h1, h2, h3, h4, h5, h6, .jumbo { margin: 24px 0; }

.center         { text-align:center; }
.flush-left     { text-align:left; }
.flush-right    { text-align:right; }
.justify        { text-align:justify; }
.bold, strong   { font-weight:bold; }
.bolder         { font-weight:bolder; }
.italic, i      { font-style:oblique; }
.roman          { font-weight:normal; }
.caps           { text-transform: uppercase; }
.sans           { font-family: Helvetica, Arial, sans-serif; }
.serif          { font-family: Times New Roman, Times serif; }
.mono           { font-family: Andale Mono, Courier New, monospace; }
.small           { font-size:.75em; }
.code {
    font-family: Andale Mono, Courier New, monospace;
    padding: 0 6px;
    color: #789;
    background-color: #eee;
    font-weight: normal;
    font-style: normal;
}

/* Links and buttons 
============================================================ */

a {
    color: #579;
    font-weight: normal;
    text-decoration: none;
	transition: color .5s;
}
a:hover { color:#ace; }

button, .button {
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
	transition: background-color .5s;
    background-color: #999;
    color: #fff;
    border-radius: 6px;
    border: none;
}
button:hover, .button:hover { background-color:#666; }

/* Lists 
============================================================ */

.buttons      { display:block; list-style:none; margin:0; padding:0; text-align:center; }
.buttons li   { display:inline-block; padding:0; margin:0; }
.buttons a    { display:block; }

/* Forms 
============================================================ */

input, textarea {
	margin: 6px 0;
	padding: 6px 9px;
	width: 94%;
	color: #666;
	background: #fff;
	border: none;
    font-size: 12px;
}


/* Grid (mobile first)
============================================================
breaks:
default (xs/mobile) < 624px
sm - 624-743px
md - 744-995px
lg - 996-1235px
xl > 1235px 
============================================================ */

.full       { width:100%; padding:0; margin:0; }
.row        { display:block; padding:24px; margin:0 auto; }
.row .row   { padding:0; }
.column,
.columns    { width:100%; padding:12px 0; margin:0; }

/* test backgrounds for grid */
.testmode .full     { background-color:#ccc; color:#579; }
.testmode .row      { background-color:#ddd; }
.testmode .column,
.testmode .columns  { background-color:#eee; }
.testmode .testbox  { display:block; border:1px solid #ccc; background-color:#fff; text-align:center; padding:6px 0; }

/* clearfix */
.row:after, .row:before  { content:" "; display:table; clear:both; }

/* extra small screens only */
@media only screen and (max-width: 623px) {
    
    .break-xs       { display:block; width:100%; height:1px; font-size:1px; color:transparent; clear:both; }
    .hide-xs        { display:none !important; }
    .clear-xs       { clear:both; }
    .clear-left-xs  { clear:left; }
    .clear-right-xs { clear:right; }

}

/* small screens and up */
@media only screen and (min-width: 624px) {

    .row        { width:600px; padding:0 12px; }
    .row .row   { padding:0; }
    .column,
    .columns    { position:relative; float:left; padding:0 12px; }
    .padded     { padding-top:12px; padding-bottom:12px; }

}

/* small screens only */
@media only screen and (min-width: 624px) and (max-width: 743px) {

    .one,
    .one-sm     { width:26px; }
    .two,
    .two-sm     { width:76px; }
    .three,
    .three-sm   { width:126px; }
    .four,
    .four-sm    { width:176px; }
    .five,
    .five-sm    { width:226px; }
    .six,
    .six-sm     { width:276px; }
    .seven,
    .seven-sm   { width:326px; }
    .eight,
    .eight-sm   { width:376px; }
    .nine,
    .nine-sm    { width:426px; }
    .ten,
    .ten-sm     { width:476px; }
    .eleven,
    .eleven-sm  { width:526px; }
    .twelve,
    .twelve-sm  { width:576px; }

    .offset-one,
    .offset-one-sm     { margin-left:50px; }
    .offset-two,
    .offset-two-sm     { margin-left:100px; }
    .offset-three,
    .offset-three-sm   { margin-left:150px; }
    .offset-four,
    .offset-four-sm    { margin-left:200px; }
    .offset-five,
    .offset-five-sm    { margin-left:250px; }
    .offset-six,
    .offset-six-sm     { margin-left:300px; }
    .offset-seven,
    .offset-seven-sm   { margin-left:350px; }
    .offset-eight,
    .offset-eight-sm   { margin-left:400px; }
    .offset-nine,
    .offset-nine-sm    { margin-left:450px; }
    .offset-ten,
    .offset-ten-sm     { margin-left:500px; }
    .offset-eleven,
    .offset-eleven-sm  { margin-left:550px; }
    
    .break-sm       { display:block; width:100%; height:1px; font-size:1px; color:transparent; clear:both; }
    .hide-sm        { display:none !important; }
    .clear-sm       { clear:both; }
    .clear-left-sm  { clear:left; }
    .clear-right-sm { clear:right; }

} 

/* medium screens and up */
@media only screen and (min-width: 744px) {

    .row        { width:720px; }

}

/* medium screens only */
@media only screen and (min-width: 744px) and (max-width: 995px) {

    .one,
    .one-md     { width:36px; }
    .two,
    .two-md     { width:96px; }
    .three,
    .three-md   { width:156px; }
    .four,
    .four-md    { width:216px; }
    .five,
    .five-md    { width:276px; }
    .six,
    .six-md     { width:336px; }
    .seven,
    .seven-md   { width:396px; }
    .eight,
    .eight-md   { width:456px; }
    .nine,
    .nine-md    { width:516px; }
    .ten,
    .ten-md     { width:576px; }
    .eleven,
    .eleven-md  { width:636px; }
    .twelve,
    .twelve-md  { width:696px; }

    .offset-one,
    .offset-one-md     { margin-left:60px; }
    .offset-two,
    .offset-two-md     { margin-left:120px; }
    .offset-three,
    .offset-three-md   { margin-left:180px; }
    .offset-four,
    .offset-four-md    { margin-left:240px; }
    .offset-five,
    .offset-five-md    { margin-left:300px; }
    .offset-six,
    .offset-six-md     { margin-left:360px; }
    .offset-seven,
    .offset-seven-md   { margin-left:420px; }
    .offset-eight,
    .offset-eight-md   { margin-left:480px; }
    .offset-nine,
    .offset-nine-md    { margin-left:540px; }
    .offset-ten,
    .offset-ten-md     { margin-left:600px; }
    .offset-eleven,
    .offset-eleven-md  { margin-left:660px; }

    .break-md       { display:block; width:100%; height:1px; font-size:1px; color:transparent; clear:both; }
    .hide-md        { display:none !important; }
    .clear-md       { clear:both; }
    .clear-left-md  { clear:left; }
    .clear-right-md { clear:right; }

} 

/* large screens and up */
@media only screen and (min-width: 996px) {

    .row        { width:960px; padding:0 18px; }
    .column,
    .columns    { padding:0 18px; }
    .padded     { padding-top:18px; padding-bottom:18px; }

}

/* large screens only */
@media only screen and (min-width: 996px) and (max-width: 1235px) {

    .one,
    .one-lg     { width:44px; }
    .two,
    .two-lg     { width:124px; }
    .three,
    .three-lg   { width:204px; }
    .four,
    .four-lg    { width:284px; }
    .five,
    .five-lg    { width:364px; }
    .six,
    .six-lg     { width:444px; }
    .seven,
    .seven-lg   { width:524px; }
    .eight,
    .eight-lg   { width:604px; }
    .nine,
    .nine-lg    { width:684px; }
    .ten,
    .ten-lg     { width:764px; }
    .eleven,
    .eleven-lg  { width:844px; }
    .twelve,
    .twelve-lg  { width:924px; }

    .offset-one,
    .offset-one-lg     { margin-left:80px; }
    .offset-two,
    .offset-two-lg     { margin-left:160px; }
    .offset-three,
    .offset-three-lg   { margin-left:240px; }
    .offset-four,
    .offset-four-lg    { margin-left:320px; }
    .offset-five,
    .offset-five-lg    { margin-left:400px; }
    .offset-six,
    .offset-six-lg     { margin-left:480px; }
    .offset-seven,
    .offset-seven-lg   { margin-left:560px; }
    .offset-eight,
    .offset-eight-lg   { margin-left:640px; }
    .offset-nine,
    .offset-nine-lg    { margin-left:720px; }
    .offset-ten,
    .offset-ten-lg     { margin-left:800px; }
    .offset-eleven,
    .offset-eleven-lg  { margin-left:880px; }

    .break-lg       { display:block; width:100%; height:1px; font-size:1px; color:transparent; clear:both; }
    .hide-lg        { display:none !important; }
    .clear-lg       { clear:both; }
    .clear-left-lg  { clear:left; }
    .clear-right-lg { clear:right; }

} 

/* extra large screens */
@media only screen and (min-width: 1236px) {

    .row        { width:1200px; }

    .one,
    .one-xl     { width:64px; }
    .two,
    .two-xl     { width:164px; }
    .three,
    .three-xl   { width:264px; }
    .four,
    .four-xl    { width:364px; }
    .five,
    .five-xl    { width:464px; }
    .six,
    .six-xl     { width:564px; }
    .seven,
    .seven-xl   { width:664px; }
    .eight,
    .eight-xl   { width:764px; }
    .nine,
    .nine-xl    { width:864px; }
    .ten,
    .ten-xl     { width:964px; }
    .eleven,
    .eleven-xl  { width:1064px; }
    .twelve,
    .twelve-xl  { width:1164px; }

    .offset-one,
    .offset-one-xl     { margin-left:100px; }
    .offset-two,
    .offset-two-xl     { margin-left:200px; }
    .offset-three,
    .offset-three-xl   { margin-left:300px; }
    .offset-four,
    .offset-four-xl    { margin-left:400px; }
    .offset-five,
    .offset-five-xl    { margin-left:500px; }
    .offset-six,
    .offset-six-xl     { margin-left:600px; }
    .offset-seven,
    .offset-seven-xl   { margin-left:700px; }
    .offset-eight,
    .offset-eight-xl   { margin-left:800px; }
    .offset-nine,
    .offset-nine-xl    { margin-left:900px; }
    .offset-ten,
    .offset-ten-xl     { margin-left:1000px; }
    .offset-eleven,
    .offset-eleven-xl  { margin-left:1100px; }

    .break-xl       { display:block; width:100%; height:1px; font-size:1px; color:transparent; clear:both; }
    .hide-xl        { display:none !important; }
    .clear-xl       { clear:both; }
    .clear-left-xl  { clear:left; }
    .clear-right-xl { clear:right; }

}