/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  font-family: "EgyptianHeadline", "Georgia", serif;
  color: #333333;
  width: 100%;
  height: 100%;
  overflow: hidden;
  letter-spacing: 1px;
  -webkit-perspective: 1000px;
  /* <-NB */
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
  height: auto;
  background: none repeat scroll 0% 0% #F8F8F8; }

h2.carousel-item--head {
  border-top: 2px solid #ff8280;
  font-family: "EgyptianHeadline", "Georgia", serif;
  width: 100%;
  display: block;
  font-size: 22px;
  font-size: 1.5rem;
  color: #ff8280;
  padding-bottom: 0.175rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem 1rem;
  background-color: #DFDFDF; }

h3.carousel-item--subhead {
  width: 100%;
  display: block;
  color: #ff8280;
  margin-bottom: 0.825rem;
  font-size: 18px;
  font-size: 1.125rem; }

p.carousel-item--fact-copy {
  margin-bottom: 0.835rem;
  padding: 0 0.5rem;
  color: #575757; }

p.carousel-item--fact-copy--init {
  font-weight: 500;
  margin-bottom: 0.835rem;
  margin-top: 1rem;
  padding: 0 0.5rem;
  font-size: 1.05rem; }

p.carousel-item--source-copy {
  display: block;
  /* width: 97.5%; */
  /* border-top: 1px solid #f4f4f4; */
  padding-top: .75rem;
  text-align: left;
  text-decoration: none;
  position: relative;
  bottom: 1rem;
  color: #575757;
  font-size: 0.75rem;
  padding: 0.875rem 0.5rem;
  background-color: #DFDFDF;
  bottom: 0;
  font-family: "TextSans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
  p.carousel-item--source-copy span {
    width: 75%;
    display: block;
    font-weight: 600;
    widows: 3; }
  p.carousel-item--source-copy a.carousel-item--source-link {
    display: inline;
    color: #ff8280;
    border-bottom: 1px dotted #ff8280;
    text-decoration: none; }
  p.carousel-item--source-copy a:visited.carousel-item--source-link {
    display: inline;
    color: #a35757;
    border-bottom: 1px dotted #a35757;
    text-decoration: none; }

.carousel-item--footer {
  display: block;
  overflow: auto;
  position: relative;
  display: block; }

div.carousel-wrap {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: auto; }

div.carousel-content {
  box-sizing: border-box;
  float: left;
  width: 50%;
  position: relative;
  height: inherit; }

#carousel {
  box-sizing: border-box;
  width: 100%;
  position: relative;
  list-style: none;
  overflow: hidden;
  background: #f8f8f8;
  height: inherit;
  display: -moz-deck;
  display: -webkit-box;
  display: box; }

li {
  display: block;
  max-width: 620px;
  width: 100%;
  position: relative;
  float: left;
  background: #f8f8f8;
  height: inherit; }

.thrones {
  background-image: url(../images/thrones.png);
  background: url(../images/smil/thrones/thrones-05.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 100% 0%; }

.shakespeare {
  background-image: url(../images/shakespeare.png);
  background-repeat: no-repeat;
  background-size: 45%;
  background-position: 100% 20%; }

.everest {
  background-image: url(../images/everest.png);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 100% 30%; }

.whale {
  background-image: url(../images/whale.png);
  background-image: url(../images/smil/whale/whale-new-04.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 100% 90%; }

.bolt {
  background-image: url(../images/whale.png);
  background-image: url(../images/smil/bolt/bolt-03.svg);
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: 85%; }

.galaxy {
  background-image: url(../images/smil/galaxy/galaxy.svg);
  background-repeat: no-repeat;
  background-size: 37%;
  background-position: 95%; }

.vegas {
  background-image: url(../images/smil/vegas/vegas.svg);
  background-repeat: no-repeat;
  background-size: 41%;
  background-position: 95% 100%; }

.letter {
  background-image: url(../images/smil/stamp/stamp.svg);
  background-repeat: no-repeat;
  background-size: 41%;
  background-position: 95% 100%; }

.phone {
  background-image: url(../images/phone.svg);
  background-repeat: no-repeat;
  background-size: 41%;
  background-position: 95% 100%; }

/* li[rel='2'], li[rel='4'], li[rel='6'], li[rel='8'], li[rel='10'] {
    background: #B6C2CB;
}*/
#li:not(.active) {
  display: none; }

svg, image {
  width: 100%;
  height: 15rem;
  display: inline-block; }

@media screen and (min-width: 620px) {
  div.carousel-wrap {
    width: 620px;
    height: auto; }

  ul.carousel {
    height: auto;
    max-width: 620px; }

  div.carousel-content {
    width: 50%; }

  svg, image {
    width: 100%;
    height: 15rem;
    display: inline-block; } }
@media screen and (max-width: 460px) {
  div.carousel-wrap {
    width: 100%; }

  ul.carousel {
    height: auto;
    max-width: 460px; }

  div.carousel-content {
    width: 100%;
    height: inherit; }

  li {
    background-image: url(); }

  .whale {
    background-position: 40% 60%;
    background-size: 100%; }

  .thrones {
    background-size: 45%;
    background-position: center bottom; }

  .everest {
    background-size: 50%;
    background-position: bottom; }

  .shakespeare {
    background-size: 60%;
    background-position: 50% 80%; }

  .bolt {
    background-size: 60%;
    background-position: 40% 100%; }

  .galaxy {
    background-size: 50%;
    background-position: 50% 95%; }

  .vegas {
    background-size: 60%;
    background-position: center bottom; }

  .letter {
    background-size: 60%;
    background-position: center bottom; }

  .phone {
    background-size: 50%;
    background-position: 50% 90%; }

  p.carousel-item--source-copy span {
    width: 65%; }

  svg, image {
    width: 100%;
    height: 12rem;
    display: inline-block; } }
@media screen and (max-width: 380px) {
  div.carousel-wrap {
    width: 100%; }

  div.carousel-content {
    width: 100%;
    height: inherit; }

  ul {
    max-width: 380px; }

  p.carousel-item--source-copy span {
    width: 65%; } }
@media screen and (max-width: 300px) {
  div.carousel-wrap {
    width: 300px; }

  div.carousel-content {
    width: 100%;
    height: inherit; }

  ul.carousel {
    max-width: 300px; }

  p.carousel-item--source-copy span {
    width: 50%; } }
@keyframes next-in {
  0% {
    transform: translate(0, 0);
    -moz-transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0); } }
@keyframes next-out {
  0% {
    transform: translate(0, 0);
    -moz-transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0); } }
@-webkit-keyframes next-in {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -webkit-filter: blur(2px); }
  100% {
    transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -webkit-filter: blur(0px); } }
@-webkit-keyframes next-out {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -webkit-filter: blur(2px); }
  100% {
    transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -webkit-filter: blur(0px); } }
.carousel > li.next-in {
  animation: next-in 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-animation: next-in 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-animation: next-in 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1); }

.carousel > li.next-out {
  animation: next-out 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -webkit-animation: next-out 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-animation: next-out 0.5s forwards cubic-bezier(0.39, 0.575, 0.565, 1); }

.nav__next {
  right: 0;
  bottom: 0;
  display: block;
  vertical-align: top;
  width: 7rem;
  font-weight: bold;
  text-decoration: none;
  -webkit-border-radius: 1000px;
  -webkit-border-radius: 62.5rem;
  border-radius: 1000px;
  border-radius: 62.5rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 18px;
  line-height: 1.125rem;
  height: 30px;
  height: 1.875rem;
  padding: 0 10px;
  padding: 0.2rem 0.625rem;
  margin-right: 10px;
  margin-right: 0.625rem;
  line-height: 28px;
  line-height: 2rem;
  height: 2.25rem;
  position: absolute;
  padding-right: 38px;
  padding-right: 2.375rem;
  color: #fff;
  position: absolute;
  display: block;
  margin: 8px;
  margin: 0.6rem;
  font-size: 13px;
  font-weight: normal;
  background: #ff8280;
  color: #ffffff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "TextSans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }

.nav__next:hover {
  background: #a35757;
  text-decoration: none;
  cursor: pointer; }

.nav__next:focus {
  outline: 0;
  background: #ff8280; }

.nav__next:active {
  background: #ff8280; }

.nav__next:active {
  outline: none; }

i.i-plus-white {
  background-image: url(../images/arrow.svg);
  background-position: 0 0;
  width: 24px;
  width: 1.5rem;
  height: 24px;
  height: 1.5rem;
  vertical-align: middle;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: contain;
  float: right;
  right: 0.5rem; }

/*# sourceMappingURL=style.css.map */