@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.csslider {
    perspective: 1300px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    width: 80%;
    margin: 0 auto;
}
.comparison {
    display: block;
    width: 80%;
    margin: 0 auto;
    height: auto;
    padding-bottom: 3em;
}
.comparison > p {
    width: 75%;
    display: block;
    margin: 1em auto;
    text-align: center;
    line-height: 1.5em;
}
.comparison > p:first-child {
    padding-top: 2em;
}
.csslider > input {
    display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
    margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
    margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
    margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
    margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
    margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
    margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
    margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
    margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
    margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
    margin-left: 0%;
}
.csslider > ul {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    font-size: 0;
    line-height: 0;
    border: thin solid #ddd;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: inherit;
    grid-area: 1 / 1 / 4/ 4;
}
.csslider > ul > li {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
    vertical-align: top;
    box-sizing: inherit;
    white-space: normal;
}
.csslider > ul > li.scrollable {
    overflow-y: scroll;
}
.csslider > .navigation {
    position: absolute;
    z-index: 10;
    -moz-user-select: none;
    grid-area: 1 / 4 / 4 / 7;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    left: -1em;
}
.csslider > .navigation > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/* grid areas */

.csslider > .navigation div > label:first-child {
    grid-area: 2;
}
.csslider > .navigation div > label:nth-child(2) {
    grid-area: 2;
}
.csslider > .navigation div > label:nth-child(3) {
    grid-area: 4;
}
.csslider > .navigation div > label:nth-child(4) {
    grid-area: 4;
}
.csslider > .navigation div > label:nth-child(5) {
    grid-area: 5;
}
.csslider > .navigation div > label:nth-child(6) {
    grid-area: 6;
}
.csslider > .navigation div > label:nth-child(7) {
    grid-area: 5;
}

/* end grid areas */

.csslider > .navigation label {
    position: relative;
    display: inline-block;
    margin-bottom: 5.5em;
    margin-left: 2em;
    margin-right: 4em;
    width: 4.65em;
    height: 4.7em;
}
.csslider > .navigation label:hover:after {
    opacity: 1;
}
.csslider > .navigation label:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -6px;
    margin-top: -6px;
    padding: 6px;
    opacity: 0;
}
div > label > img {
    border: thin solid #ddd;
    width: 204%;
}
.resultsub {
    display: block;
    margin: 1em auto;
    width: 15em;
    max-width: 100%;
    padding: 1em;
    color: #fff;
    border-style: double;
    background-color: #d7187d;
}
.resultsub:hover {
    color: #fff;
}

/* sub button */

.sub-button {
    display: block;
    margin: 1em auto 0 auto;
}

/* end sub button */


/* media queries */

@media screen and (max-width: 900px) {
    .comparison {
        height: auto;
        width: 100%
    }
    .csslider {
        display: block;
        width: 100%;
    }
    .csslider > .navigation {
        display: block;
        margin: 0 auto;
        top: 8em;
        width: 100%;
        text-align: center;
    }
    div > label > img {
        width: 154%;
    }
    .csslider > .navigation > div {
        display: block;
        width: 105%;
        margin: 0 auto;
        position: relative;
        top: 30em;
    }
    .csslider > .navigation label {
        margin-bottom: .6em;
        margin-left: auto;
        margin-right: 3em;
    }
    .resultsub {
        margin-top: 2em;
    }
}

/* end media queries */


/* New stuff */

/* ----------
variables
---------- */
#main {
  font-family: "Montserrat", sans-serif; }
  #main > p {
    text-align: center; }
  @media screen and (min-width: 900px) {
    #main {
      width: 80%;
      display: block;
      margin: auto; } }

.tab {
  overflow: hidden; }

@media screen and (min-width: 900px) {
  .tab {
    width: 100%;
    height: 75%;
    z-index: 1;
    padding-top: 1em; } }

.tab .comparison button.slidelinks {
  background: none;
  display: inline-block;
  border: none;
  outline: none;
  cursor: pointer; }
  .tab .comparison button.slidelinks:not(:last-child) {
    margin-right: -3em; }
  .tab .comparison button.slidelinks img {
    width: 75%;
    height: 75%; }

.slidecontent {
  display: none;
  text-align: center; }

@media screen and (min-width: 1280px) {
  div.juxtapose {
    width: 450px !important;
    height: 450px !important;
    display: inline-block; } }

@media screen and (max-width: 1280px) {
  div.juxtapose {
    width: 450px !important;
    height: 450px !important;
    margin: 0 auto; } }

@media screen and (max-width: 640px) {
  div.juxtapose {
    width: 320px !important;
    height: 320px !important; } }

.slidetext h2 {
  color: #d7187d;
  font-weight: 400;
  font-size: 2rem; }

.slidetext ul {
  list-style: none;
  padding: 0;
  text-align: left; }
  .slidetext ul li {
    position: relative;
    padding-left: 1em; }
    @media screen and (min-width: 640px) {
      .slidetext ul li {
        margin-bottom: 1em; } }
    .slidetext ul li:after {
      content: '';
      width: .5em;
      height: .5em;
      background: #000;
      display: block;
      position: absolute;
      transform: rotate(45deg);
      top: .7em;
      left: 0; }

@media screen and (min-width: 1280px) {
  .slidetext {
    width: 600px;
    margin-left: 1em;
    display: inline-block;
    position: relative;
    vertical-align: top; }
    .slidetext ul {
      -webkit-margin-before: 0; } }

@media screen and (max-width: 1280px) {
  .slidetext {
    padding: 1em;
    text-align: center; } }