/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  scroll-behavior:smooth;
}

h2 { font-size: 2.5em;}


h3 { font-size: 1.5em;}

quote {
  font-size: 1.2em;
}

small {
  font-size: 90%;
}

p {
  font-size: 1.1em;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

.btn-white {
  border: solid 1px #FBFCFB;
  color: #FBFCFB;
  font-weight: bold;
  padding: .5em 1.5em;
  border-radius: 200px;
  text-decoration: none;
}

.btn-white:hover {
  border: solid 1px #FBFCFB;
  background-color: #FBFCFB;
  color: #444;
  font-weight: bold;
  padding: .5em 1.5em;
  border-radius: 200px;
  text-decoration: none;
  transition: 500ms;
}

.curve {
  max-width: 100%;
}

.svg-container {
  position: relative;
  padding-top: 18.12%;
  margin-top: -9.5vw;
  z-index: 1;
}

section {
  padding-bottom: 9.5vw;
  position: relative;
}

.fill-offwhite { fill: #FBFCFB;}
.bg-offwhite { background-color: #FBFCFB;}

.fill-grey { fill: #444;}
.bg-grey { background-color: #444; color: #FBFCFB;}

.fill-orange { fill: #FEB442;}
.bg-orange { background-color: #FEB442;}

.fill-green { fill: #8FD5C1;}
.bg-green { background-color: #8FD5C1;}

.fill-cream { fill: #DFD2C9;}
.bg-cream { background-color: #DFD2C9;}

.bg-grey a {
  color: #FBFCFB;
}

a {
  color: rgb(100, 66, 254);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.foto1 {
  background-image: url(../img/foto1.png);
  background-size: cover;
}

.foto2 {
  background-image: url(../img/foto2.png);
  background-size: cover;
}

.foto3 {
  background-image: url(../img/foto3.png);
  background-size: cover;
}

.foto4 {
  background-image: url(../img/foto4.png);
  background-size: cover;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   body {
     font-family: 'Raleway', sans-serif;
   }

   .paolav {
    /* width: 120%;
    transform: rotate(-5deg);
    margin-left: -10%; */
    max-width: 80%;
   }

   svg {
     height: 100%;
     display:block;
     width: 100%;
     position: absolute;
     top:0;
     left:0;
   }
   .svg-wrapper {
     width: 200px;
     height: 200px;
     position: relative;
     margin: 60px auto;
   }

   .svg-small {
      width: 80px;
      height: 80px;
      position: relative;
      margin: 0;
    }

   .words {
     height: 42px;
     margin: 0 14px;
   }
/* ==========================================================================
   Helper classes
   ========================================================================== */
    .m0{ margin:0 }
    .mt0{ margin-top:0 }
    .mr0{ margin-right:0 }
    .mb0{ margin-bottom:0 }
    .ml0{ margin-left:0 }
    .mx0{ margin-left:0; margin-right:0 }
    .my0{ margin-top:0; margin-bottom:0 }

    .m1  { margin:        .25rem }
    .mt1 { margin-top:    .25rem }
    .mr1 { margin-right:  .25rem }
    .mb1 { margin-bottom: .25rem }
    .ml1 { margin-left:   .25rem }
    .mx1 { margin-left:   .25rem; margin-right: .25rem }
    .my1 { margin-top:    .25rem; margin-bottom: .25rem }


    .m2{ margin: .5rem }
    .mt2{ margin-top: .5rem }
    .mr2{ margin-right: .5rem }
    .mb2{ margin-bottom: .5rem }
    .ml2{ margin-left: .5rem }
    .mx2{ margin-left: .5rem; margin-right: .5rem }
    .my2{ margin-top: .5rem; margin-bottom: .5rem }

    .m3{ margin: 1rem }
    .mt3{ margin-top: 1rem }
    .mr3{ margin-right: 1rem }
    .mb3{ margin-bottom: 1rem }
    .ml3{ margin-left: 1rem }
    .mx3{ margin-left: 1rem; margin-right: 1rem }
    .my3{ margin-top: 1rem; margin-bottom: 1rem }

    .m4{ margin: 2rem }
    .mt4{ margin-top: 2rem }
    .mr4{ margin-right: 2rem }
    .mb4{ margin-bottom: 2rem }
    .ml4{ margin-left: 2rem }
    .mx4{ margin-left: 2rem; margin-right: 2rem }
    .my4{ margin-top: 2rem; margin-bottom: 2rem }

    .m5  { margin:        4rem }
    .mt5 { margin-top:    4rem }
    .mr5 { margin-right:  4rem }
    .mb5 { margin-bottom: 4rem }
    .ml5 { margin-left:   4rem }
    .mx5 { margin-left:   4rem; margin-right: 4rem }
    .my5 { margin-top:    4rem; margin-bottom: 4rem }

    .mxn1{ margin-left: -.25rem; margin-right: -.25rem; }
    .mxn2{ margin-left: -.5rem; margin-right: -.5rem; }
    .mxn3{ margin-left: -1rem; margin-right: -1rem; }
    .mxn4{ margin-left: -2rem; margin-right: -2rem; }
    .mxn5{ margin-left: -4rem; margin-right: -4rem; }

    .myn1{ margin-top: -.25rem; margin-bottom: -.25rem; }
    .myn2{ margin-top: -.5rem; margin-bottom: -.5rem; }
    .myn3{ margin-top: -1rem; margin-bottom: -1rem; }
    .myn4{ margin-top: -2rem; margin-bottom: -2rem; }
    .myn5{ margin-top: -4rem; margin-bottom: -4rem; }

    .mtn1{ margin-top: -.25rem }
    .mtn2{ margin-top: -.5rem }
    .mtn3{ margin-top: -1rem }
    .mtn4{ margin-top: -2rem }
    .mtn5{ margin-top: -4rem }

    .mtn70 { margin-top: -70px; }

    .mrn1{ margin-right: -.25rem }
    .mrn2{ margin-right: -.5rem }
    .mrn3{ margin-right: -1rem }
    .mrn4{ margin-right: -2rem }
    .mrn5{ margin-right: -4rem }

    .mbn1{ margin-bottom: -.25rem }
    .mbn2{ margin-bottom: -.5rem }
    .mbn3{ margin-bottom: -1rem }
    .mbn4{ margin-bottom: -2rem }
    .mbn5{ margin-bottom: -4rem }

    .mln1{ margin-left: -.25rem }
    .mln2{ margin-left: -.5rem }
    .mln3{ margin-left: -1rem }
    .mln4{ margin-left: -2rem }
    .mln5{ margin-left: -4rem }

    .ml-auto{ margin-left:auto }
    .mr-auto{ margin-right:auto }
    .mx-auto{ margin-left:auto; margin-right:auto; }

    .p0{ padding:0 }
    .pt0{ padding-top:0 }
    .pr0{ padding-right:0 }
    .pb0{ padding-bottom:0 }
    .pl0{ padding-left:0 }
    .px0{ padding-left:0; padding-right:0 }
    .py0{ padding-top:0;  padding-bottom:0 }

    .p1  { padding:        0.25rem; }
    .pt1 { padding-top:    0.25rem; }
    .pr1 { padding-right:  0.25rem; }
    .pb1 { padding-bottom: 0.25rem; }
    .pl1 { padding-left:   0.25rem; }
    .px1 { padding-left:   .25rem; padding-right: .25rem }
    .py1 { padding-top:    .25rem; padding-bottom: .25rem }

    .p2{ padding: .5rem }
    .pt2{ padding-top: .5rem }
    .pr2{ padding-right: .5rem }
    .pb2{ padding-bottom: .5rem }
    .pl2{ padding-left: .5rem }
    .py2{ padding-top: .5rem; padding-bottom: .5rem }
    .px2{ padding-left: .5rem; padding-right: .5rem }

    .p3{ padding: 1rem }
    .pt3{ padding-top: 1rem }
    .pr3{ padding-right: 1rem }
    .pb3{ padding-bottom: 1rem }
    .pl3{ padding-left: 1rem }
    .py3{ padding-top: 1rem; padding-bottom: 1rem }
    .px3{ padding-left: 1rem; padding-right: 1rem }

    .p4{ padding: 2rem }
    .pt4{ padding-top: 2rem }
    .pr4{ padding-right: 2rem }
    .pb4{ padding-bottom: 2rem }
    .pl4{ padding-left: 2rem }
    .py4{ padding-top: 2rem; padding-bottom: 2rem }
    .px4{ padding-left: 2rem; padding-right: 2rem }

    .p5{ padding: 4rem }
    .pt5{ padding-top: 4rem }
    .pr5{ padding-right: 4rem }
    .pb5{ padding-bottom: 4rem }
    .pl5{ padding-left: 4rem }
    .py5{ padding-top: 4rem; padding-bottom: 4rem }
    .px5{ padding-left: 4rem; padding-right: 4rem }

   .list-style-none{ list-style:none }

   .text-transform-none{ text-transform:none }
   .text-decoration-none{ text-decoration:none }
   .text-decoration-none-hover:hover{ text-decoration:none }
   .underline{ text-decoration:underline }
   .underline-hover:hover { text-decoration:underline }
   .first-underline::first-letter { text-decoration: underline; }

   .italic{ font-style:italic }
   .capitalize { text-transform: capitalize; }
   .uppercase { text-transform: uppercase; }
   .lowercase { text-transform: lowercase; }


   .thin { font-weight: 300; }
   .regular { font-weight: normal; }
   .medium { font-weight: 500; }
   .bold{ font-weight: bold; }

   .left-align{ text-align:left }
   .center{ text-align:center }
   .right-align{ text-align:right }
   .justify{ text-align:justify }
   .center-last{ text-align-last:center }

   .inline{ display:inline }
   .block{ display:block }
   .inline-block{ display:inline-block }
   .table{ display:table }
   .table-cell{ display:table-cell }

   .overflow-hidden{ overflow:hidden }
   .overflow-scroll{ overflow:scroll }
   .overflow-auto{ overflow:auto }
   .overflow-y-scroll{ overflow-y:scroll }

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

   .left{ float:left }
   .right{ float:right }


   .fit{ max-width:100% }

   .col{
     float:left;
     box-sizing:border-box;
   }

   .col-right{
     float:right;
     box-sizing:border-box;
   }

   .col-1{ width:8.33333%;}
   .col-2{ width:16.66667%;}
   .col-3{ width:25%;}
   .col-4{ width:33.33333%;}
   .col-5{ width:41.66667%;}
   .col-6{ width:50%;}
   .col-7{ width:58.33333%;}
   .col-8{ width:66.66667%;}
   .col-9{ width:75%;}
   .col-10{ width:83.33333%;}
   .col-11{ width:91.66667%;}
   .col-12{ width:100%;}

.flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }

@media (min-width: 640px){
  .sm-px0 { padding-left: 0; padding-right: 0;}
  .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  .sm-flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
}

@media (min-width: 832px){
  .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
}

@media (min-width: 1024px){
  .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
}

.flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
.flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }

.items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start }
.items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end }
.items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center }
.items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline }
.items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch }

.self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start }
.self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end }
.self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center }
.self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline }
.self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch }

.justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start }
.justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end }
.justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center }
.justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between }
.justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around }

.content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start }
.content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end }
.content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center }
.content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between }
.content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around }
.content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch }
.flex-auto{
  -webkit-box-flex:1;
  -webkit-flex:1 1 auto;
      -ms-flex:1 1 auto;
          flex:1 1 auto;
  min-width:0;
  min-height:0;
}
.flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none }

.order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 }
.order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 }
.order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 }
.order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 }
.order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 }

.relative{ position:relative }
.absolute{ position:absolute }
.fixed   { position:fixed }
.sticky  { position: -webkit-sticky;
           position: -moz-sticky;
           position: -ms-sticky;
           position: -o-sticky;
           position: sticky; }
.height0 { height: 0px; }
.height-focus:focus { height: auto; }
.height100 { height: 100%; }
.height-auto { height: auto; }
.max-height0 { max-height: 0; }
.max-height500 { max-height: 500px; }
.max-height1000 { max-height: 1000px; }
.min-height500 { min-height: 500px; }
.height200 {height: 200px;}
.width100 { width: 100%; }

.top-0{ top:0 }
.right-0{ right:0 }
.bottom-0{ bottom:0 }
.left-0{ left:0 }

.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1{ bottom:1rem; }
.left-1 { left: 1rem; }

.top-3 { top: 3rem; }
.right-3 { right: 3rem; }
.bottom-3{ bottom:3rem; }
.left-3 { left: 3rem; }

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }
.z6 { z-index: 6; }
.z7 { z-index: 7; }
.z8 { z-index: 8; }
.z9 { z-index: 9; }
.z10 { z-index: 10; }
.zmax { z-index: 2000; }

.border{
  border-style:solid;
  border-width: 1px;
}

.border-top{
  border-top-style:solid;
  border-top-width: 1px;
}

.border-right{
  border-right-style:solid;
  border-right-width: 1px;
}

.border-bottom{
  border-bottom-style:solid;
  border-bottom-width: 1px;
}

.border-left{
  border-left-style:solid;
  border-left-width: 1px;
}

.border1{
  border-style:solid;
  border-width: 3px;
}

.border-top1{
  border-top-style:solid;
  border-top-width: 3px;
}

.border-right1{
  border-right-style:solid;
  border-right-width: 3px;
}

.border-bottom1{
  border-bottom-style:solid;
  border-bottom-width: 3px;
}

.border-left1{
  border-left-style:solid;
  border-left-width: 3px;
}

.box-shadow-none { box-shadow: 0 0 0; }
.box-shadow-inset-none { box-shadow: inset 0 0 0; }
.border-none{ border:0 }
.border-dashed { border-style: dashed; }

.rounded{ border-radius: 3px }
.circle{ border-radius:50% }

.rounded-top{ border-radius: 3px 3px 0 0 }
.rounded-right{ border-radius: 0 3px 3px 0 }
.rounded-bottom{ border-radius: 0 0 3px 3px }
.rounded-left{ border-radius: 3px 0 0 3px }

.not-rounded{ border-radius:0 }


.invisible{ visibility: hidden; }
.visible-hover:hover{ visibility: visible; }
.invisible-label label{ visibility: hidden; }

/* Content isn't displayed on the screen, but is announced to screen reader users */
.hide{
  position:absolute !important;
  height:1px;
  width:1px;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
}

@media (max-width: 640px){
  .xs-hide{ display:none !important }

  .paolav {
    width: 80%;
    /* -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
    margin-left: -3%; */
   }

   .words {
     height: 20px;
   }

   .paola-link {
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 580px;
    height: 70px;
    display: block;
    margin: auto;
    max-width: 66%;
   }
}

@media (min-width: 640px) and (max-width: 832px){
  .sm-hide{ display:none !important }
}

@media (min-width: 832px) and (max-width: 1024px){
  .md-hide{ display:none !important }
}

@media (min-width: 1024px){
  .lg-hide{ display:none !important }
}

.display-none{ display:none !important }

@media (max-width: 640px){
  .xs-display-none{ display:none !important }
}

@media (min-width: 640px) and (max-width: 832px){
  .sm-display-none{ display:none !important }
}

@media (min-width: 832px) and (max-width: 1024px){
  .md-display-none{ display:none !important }
}

@media (min-width: 1024px){
  .lg-display-none{ display:none !important }
}


/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

@media (max-width: 640px){
  .foto-mobile.foto1,
  .foto-mobile.foto2,
  .foto-mobile.foto3,
  .foto-mobile.foto4 {
    background-size: cover;
    height: 300px;
    width: 50%;
    background-position: center;
  }
  .xs-mb20 { margin-bottom: 20px; }
  .xs-mt200 { margin-top: 200px; }
  .xs-inline { display: inline; }
  .xs-col { float:left; box-sizing:border-box; }
  .xs-col-right { float:right; box-sizing:border-box; }

  .xs-col-1  { width:8.33333%; }
  .xs-col-2  { width:16.66667%; }
  .xs-col-3  { width:25%;}
  .xs-col-4  { width:33.33333%; }
  .xs-col-5  { width:41.66667%; }
  .xs-col-6  { width:50%; }
  .xs-col-7  { width:58.33333%; }
  .xs-col-8  { width:66.66667%; }
  .xs-col-9  { width:75%; }
  .xs-col-10 { width:83.33333%; }
  .xs-col-11 { width:91.66667%; }
  .xs-col-12 { width:100%; }

  .xs-center { text-align:center; }

  .xs-pt4 { padding-top: 2rem; }
}

@media (min-width: 640px){
  .sm-medium { font-weight: 500; }

  .sm-inline{ display:inline }
  .sm-block{ display:block }
  .sm-inline-block{ display:inline-block }
  .sm-table{ display:table }
  .sm-table-cell{ display:table-cell }

  .sm-left-align{ text-align:left }
  .sm-center{ text-align:center }
  .sm-right-align{ text-align:right }
  .sm-justify{ text-align:justify }

  .sm-border-none{ border:0 !important }

  .sm-left{ float:left }
  .sm-right{ float:right }

  .sm-mtn1{ margin-top: -.25rem }
  .sm-mtn2{ margin-top: -.5rem }
  .sm-mtn3{ margin-top: -1rem }
  .sm-mtn4{ margin-top: -2rem }
  .sm-mtn5{ margin-top: -4rem }

  .sm-mbn1{ margin-bottom: -.25rem }
  .sm-mbn2{ margin-bottom: -.5rem }
  .sm-mbn3{ margin-bottom: -1rem }
  .sm-mbn4{ margin-bottom: -2rem }
  .sm-mbn5{ margin-bottom: -4rem }

  .sm-col{
    float:left;
    box-sizing:border-box;
  }

  .sm-col-right{
    float:right;
    box-sizing:border-box;
  }

  .sm-col-1{ width:8.33333%;}

  .sm-col-2{ width:16.66667%;}

  .sm-col-3{ width:25%;}

  .sm-col-4{ width:33.33333%;}

  .sm-col-5{ width:41.66667%;}

  .sm-col-6{ width:50%;}

  .sm-col-7{ width:58.33333%;}

  .sm-col-8{ width:66.66667%;}

  .sm-col-9{ width:75%;}

  .sm-col-10{ width:83.33333%;}

  .sm-col-11{ width:91.66667%;}

  .sm-col-12{ width:100%;}

  .sm-column-count-2 { column-count: 2 }

  .sm-column-count-3 { column-count: 3 }

  .sm-inline { display: inline; }


  .sm-width-4 { width: 4rem; }

}
@media (min-width: 832px){

  .md-col{
    float:left;
    box-sizing:border-box;
  }

  .md-col-right{
    float:right;
    box-sizing:border-box;
  }

  .md-col-1{
    width:8.33333%;
  }

  .md-col-2{
    width:16.66667%;
  }

  .md-col-3{
    width:25%;
  }

  .md-col-4{
    width:33.33333%;
  }

  .md-col-5{
    width:41.66667%;
  }

  .md-col-6{
    width:50%;
  }

  .md-col-7{
    width:58.33333%;
  }

  .md-col-8{
    width:66.66667%;
  }

  .md-col-9{
    width:75%;
  }

  .md-col-10{
    width:83.33333%;
  }

  .md-col-11{
    width:91.66667%;
  }

  .md-col-12{
    width:100%;
  }

}
@media (min-width: 1024px){

  .lg-col{
    float:left;
    box-sizing:border-box;
  }

  .lg-col-right{
    float:right;
    box-sizing:border-box;
  }

  .lg-col-1{
    width:8.33333%;
  }

  .lg-col-2{
    width:16.66667%;
  }

  .lg-col-3{
    width:25%;
  }

  .lg-col-4{
    width:33.33333%;
  }

  .lg-col-5{
    width:41.66667%;
  }

  .lg-col-6{
    width:50%;
  }

  .lg-col-7{
    width:58.33333%;
  }

  .lg-col-8{
    width:66.66667%;
  }

  .lg-col-9{
    width:75%;
  }

  .lg-col-10{
    width:83.33333%;
  }

  .lg-col-11{
    width:91.66667%;
  }

  .lg-col-12{
    width:100%;
  }
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}