/*==========================
  — S U B T R A C T
  --------------------------
  Version 1
  ==========================*/

/*============================================================
  RESET THE CSS
  ============================================================*/
  *, *:before, *:after      { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
  html                      { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
  ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
  tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time,
  mark, audio, video
                            { margin:0; padding:0; border:0;font-size:100%; vertical-align:baseline; background:transparent; font:inherit; }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
                            { display:block; }
  body                      { line-height:1; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  ol, ul                    { list-style:none; }
  blockquote, q             { quotes:none; }
  blockquote:before, blockquote:after, q:before, q:after
                            { content:''; content:none; }
  a:hover, a:active         { outline:0; }
  ins                       { text-decoration:none; }
  del                       { text-decoration:line-through; }
  table                     { border-collapse:collapse; border-spacing:0; }

/*============================================================
  DEFAULT CLASSES
  ============================================================*/

  /* Display */
  .no-bg                    { background:none; }
  .no-display               { display:none; }
  .no-border                { border:0; }

  /* Margin */
  .no-margin                { margin:0; }
  .no-margin-top            { margin-top:0; }
  .no-margin-bottom         { margin-bottom:0; }
  .no-margin-left           { margin-left:0; }
  .no-margin-right          { margin-right:0; }

  .mtl                      { margin-top:4rem !important; }
  .mbl                      { margin-bottom:4rem !important; }
  .mbxl                      { margin-bottom:6rem !important; }

  /* Padding */
  .no-padding               { padding:0; }
  .no-padding-top           { padding-top:0; }
  .no-padding-bottom        { padding-bottom:0; }
  .no-padding-left          { padding-left:0; }
  .no-padding-right         { padding-right:0; }

  /* Position */
  .left                     { float:left; }
  .right                    { float:right; }
  .center                   { margin:0 auto; }

  /* Align Text */
  .text-left                { text-align:left; }
  .text-right               { text-align:right; }
  .text-center              { text-align:center; }

  /* Images */
  img.align-left            { float:left; margin:0 2.0rem 1.5rem 0; }
  img.align-right           { float:right; margin:0 0 1.5rem 2.0rem; }
  img.img-responsive        { max-width:100% !important; height:auto !important; }   /* Add .img-responsive class to make the images responsive. */

  /* Clearfix */
  .clearfix:before, .clearfix:after
                            { content:" "; display:table; }
  .clearfix:after           { clear:both; }
  .clear                    { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }

/*============================================================
  GRID - 1200px
  ============================================================*/
  .container                { margin:0 auto; width:1200px; }
  .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12
                            { display:inline; float:left; margin-left:10px; margin-right:10px; }
  .container .grid-1        { width:80px; }
  .container .grid-2        { width:180px; }
  .container .grid-3        { width:280px; }
  .container .grid-4        { width:380px;}
  .container .grid-5        { width:480px; }
  .container .grid-6        { width:580px; }
  .container .grid-7        { width:680px; }
  .container .grid-8        { width:780px; }
  .container .grid-9        { width:880px; }
  .container .grid-10       { width:980px; }
  .container .grid-11       { width:1080px; }
  .container .grid-12       { width:1180px; }

/*============================================================
  GRID - 960px
  ============================================================*/
  @media only screen and (min-width: 960px) and (max-width: 1199px) {

  .container                { width: 960px; }
  .container .grid-1        { width:60px; }
  .container .grid-2        { width:140px; }
  .container .grid-3        { width:220px; }
  .container .grid-4        { width:300px; }
  .container .grid-5        { width:380px; }
  .container .grid-6        { width:460px; }
  .container .grid-7        { width:540px; }
  .container .grid-8        { width:620px; }
  .container .grid-9        { width:700px; }
  .container .grid-10       { width:780px; }
  .container .grid-11       { width:860px; }
  .container .grid-12       { width:940px; }

  }

/*============================================================
  GRID - 720px
  ============================================================*/
  @media only screen and (min-width: 720px) and (max-width: 959px) {

  .container                { width:720px; }
  .container .grid-1        { width:40px; }
  .container .grid-2        { width:100px; }
  .container .grid-3        { width:160px; }
  .container .grid-4        { width:220px; }
  .container .grid-5        { width:280px; }
  .container .grid-6        { width:340px; }
  .container .grid-7        { width:400px; }
  .container .grid-8        { width:460px; }
  .container .grid-9        { width:520px; }
  .container .grid-10       { width:580px; }
  .container .grid-11       { width:640px; }
  .container .grid-12       { width:700px; }

  }

/*============================================================
  GRID - 719px and Below
  ============================================================*/
  @media only screen and (max-width: 719px) {

  .container                { width:90%; }
  .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12
                            { width:100%; margin:0; }
  .container .grid-1, .container .grid-2, .container .grid-3, .container .grid-4, .container .grid-5, .container .grid-6,
  .container .grid-7, .container .grid-8, .container .grid-9, .container .grid-10, .container .grid-11, .container .grid-12
                            { width:100%; }
.sm-mbxl { margin-bottom:2rem !important; }
.sm-mtl {  margin-top:2rem !important; }
.sm-no-margin-top { margin-top:0 !important; }

  }

/*============================================================
  CLEAR GRID POSITION
  ============================================================*/
.block { display:block; float: none; margin: 0 auto; }

.bg-yellow {
  background: #f7dc29;
}

.strong {
  font-weight: 600;
}