/*
  base.css - default styles for spotco web sites
*/

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
html, body {
  overflow-x: hidden;
}

@media screen and (min-width: 533px) {
  html {
    font-size: 18px
  }
}
@media screen and (min-width: 768px) {
  html {
    font-size: 19px
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 20px
  }
}

body {
  text-align: center;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: inherit;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.75rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.375rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.8rem; }

main p, main li {
  line-height: 1.5;
  margin: 1.5rem auto;
  text-transform: none;
  letter-spacing: normal;
}

main ul { 
   list-style-type: disc; 
   list-style-position: outside; 
   padding-left: 3em;
}

span { vertical-align: baseline; }

.info {
  text-align: left;
}

.info h3 {
  font-size: 1.375em;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: .25em;
}

.info h3 + p {
  margin-top: 0;
}

p:first-child, ul:first-child, li:first-child {
  margin-top: 0;
}

p:last-child, ul:last-child, li:last-child {
  margin-bottom: 0;
}

p.mice-type {
  font-size: .5em;
  line-height: 1.2;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
}

blockquote {
  text-align: center;
  font-size: 2em;
  line-height: 1;
  text-transform: none;
}

cite {
  display: block;
  font-family: inherit;
  font-size: .625rem;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
  padding-top: .375em;
}

img { outline: none; border: 0; vertical-align: middle; }

input, textarea, keygen, select, button { font-family: inherit; font-size: inherit; letter-spacing: inherit; }

em, i { font-style: italic; margin-right: .125em; font-synthesis: style; }

strong, b { font-weight: bold; }

sup { font-size:50%;vertical-align: revert; }

svg { max-width: 100%; pointer-events: none; }

a { color: #abd737; text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }

button, a {
  pointer-events: all;
}
button *, a * {
  pointer-events: none !important;
}

.caption { font-size: .8125em; padding-top: .5em; line-height: 1.2; text-align: right; position: relative; z-index:2; font-weight: bold; }


#header, #footer { width: 100%; }

.img-rollover { position: relative; display: inline-block; margin: 0 auto; }
.img-rollover img { transition: all .01s; }
.img-rollover > *:first-child { position: relative; width: 100%; height: 100%; opacity: 1; }
.img-rollover > *:last-child { position: absolute;top:0;left:50%;transform: translateX(-50%);width:100%;height:100%; opacity: 0; }
.img-rollover:hover > *:first-child { opacity: 0; }
.img-rollover:hover > *:last-child { opacity: 1; }

.nowrap { white-space: nowrap; }
.ib { display: inline-block; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.container {
  max-width: 54em;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5em;
  pointer-events: none;
  position: relative;
}
.container * {
  pointer-events: all;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.flex .col-full {
  flex: 0 0 100%;
}
.flex .col-1-2 {
  flex: 0 0 calc(50% - 1em);
}
.flex .col-1-3 {
  flex: 0 0 calc(33.333% - 1em);
}
.flex .col-2-3 {
  flex: 0 0 calc(66.666% - 1em);
}
.flex .col-1-5 {
  flex: 0 0 calc(20% - 1em);
}
.flex .col-2-5 {
  flex: 0 0 calc(40% - 1em);
}
.flex .col-3-5 {
  flex: 0 0 calc(60% - 1em);
}
@media (max-width: 767px) {
  .flex > * {
    flex: 0 0 100% !important;
  }
}
.w100 { width: 100%; height: auto; }
.h100 { height: 100%; width: auto; }

small, .small { display: block; font-size: .8em; line-height: 1.5; margin-top: .2em; }

@media only screen {
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: .375;
}

iframe#mediaplxpxl { opacity: 0; }

@-ms-viewport {
  width: device-width;
}
@media screen and (max-width: 400px) {
  @-ms-viewport {
    width: 320px;
  }
}
@media (min-width: 533px) {
  .visible-xs {
    display: none!important;
  }
}
@media (max-width: 532px) {
  .hidden-xs {
    display: none!important;
  }
  .hidden-mobile.visible-xs {
    display: block!important;
  }
}
@media (min-width: 768px) {
  .visible-mobile {
    display: none!important;
  }
}
@media (max-width: 767px) {
  .hidden-mobile {
    display: none!important;
  }
}
@media (min-width: 1024px) {
  .visible-tablet {
    display: none!important;
  }
}
@media (max-width: 1023px) {
  .hidden-tablet {
    display: none!important;
  }
}
@media (min-width: 1400px) {
  .hidden-wide {
    display: none!important;
  }
}
@media (max-width: 1399px) {
  .visible-wide {
    display: none!important;
  }
}
html:not(.touch).visible-touch,
html.touch.hidden-touch {
  display: none!important;
}
.open-container.open .hidden-open,
.open-container:not(.open) .visible-open {
  display: none!important;
}