body {
  margin: 0;
  font-family: Sans-Serif;
  font-size: 12px; }

a {
  color: #7f5bbd;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

header {
  background: url("../img/theme.jpg");
  background-position: center center;
  background-size: cover; }
  header .logo-line {
    border-bottom: 1px solid #333;
    background: #724b9c;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    header .logo-line .logo {
      width: 19rem; }
      header .logo-line .logo h1 {
        margin: 4px 0 0 0; }
        header .logo-line .logo h1 span {
          display: none; }
      header .logo-line .logo h2 {
        font-size: 24px;
        text-align: right;
        margin: -20px 1em 0 0;
        font-weight: 300;
        font-family: "Great Vibes";
        color: white; }
    header .logo-line .customer-ratings {
      width: 300px;
      color: #333;
      display: flex;
      align-items: center; }
      header .logo-line .customer-ratings img {
        margin: 3px;
        height: 55px; }
      header .logo-line .customer-ratings .rating {
        margin: 1ex 1ex 0 0; }
        header .logo-line .customer-ratings .rating strong {
          letter-spacing: -0.1ex;
          font-weight: normal;
          vertical-align: center;
          font-size: 2em; }
      header .logo-line .customer-ratings .ratingsfigure {
        flex: 1 0 auto;
        padding-right: 1ex;
        color: white;
        text-align: right; }
        header .logo-line .customer-ratings .ratingsfigure figure {
          display: block;
          margin: 1ex 1ex 0.5ex 1ex; }
          header .logo-line .customer-ratings .ratingsfigure figure .starsbar {
            display: flex;
            color: #f8ed28; }
            header .logo-line .customer-ratings .ratingsfigure figure .starsbar span {
              display: block;
              width: 61px;
              font-size: 9px;
              letter-spacing: 1px;
              line-height: 9px;
              padding-right: 3px; }
            header .logo-line .customer-ratings .ratingsfigure figure .starsbar .bar {
              flex: 1 0 auto;
              margin-top: 4px;
              height: 2px;
              background: rgba(0, 0, 0, 0.1); }
              header .logo-line .customer-ratings .ratingsfigure figure .starsbar .bar .filler {
                height: 2px;
                background: whitesmoke; }
        header .logo-line .customer-ratings .ratingsfigure a {
          font-size: 12px;
          color: inherit;
          font-style: italic; }
  header .impression {
    display: flex;
    margin: auto;
    max-width: 1100px;
    padding: 1ex;
    display: flex;
    justify-content: center; }
    header .impression .questions {
      margin: 2em 0 2em 0;
      /* background: rgba(0, 0, 0, 0.3);
      border : 2px solid whitesmoke;
      transform: rotate(-3deg);*/
      border-radius: 10px;
      color: white;
      font-size: 110%;
      display: flex;
      flex-direction: column;
      align-items: center; }
      header .impression .questions ul {
        margin: auto;
        list-style-image: url("../img/ruit-list.png"); }
        header .impression .questions ul li {
          margin: 1ex 0; }
    header .impression .card-carousel {
      flex: 1 0 auto; }

h3.slogan {
  font-size: 30px;
  font-family: "Great Vibes";
  font-weight: normal;
  margin: 4px 1em; }

.container {
  max-width: 1100px;
  margin: auto; }

nav {
  color: yellow;
  text-shadow: 1px 1px 1px #333;
  border-bottom: 1px solid #333;
  border-top: 1px solid #333;
  background: #724b9c; }
  nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    nav .container .logo {
      height: 50px;
      margin: 3px; }
    nav .container ul {
      margin: 0;
      padding: 0;
      display: flex;
      list-style: none; }
      nav .container ul.menu li {
        font-size: 25px;
        padding: 1ex 20px;
        margin: 0 3px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 0, 0.4) 15px, 15px, rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 0, 0.4) 15px, 15px, rgba(255, 255, 255, 0)); }
        nav .container ul.menu li:hover {
          cursor: pointer;
          color: #cccc00;
          background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 0, 0.5) 15px, 16px, rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 0, 0.5) 15px, 16px, rgba(255, 255, 255, 0)); }
      nav .container ul.download-apps img {
        height: 1.6rem;
        margin: 5px; }

.main-container {
  max-width: 1100px;
  margin: auto;
  display: flex; }
  .main-container main {
    flex: 1 1 auto; }
  .main-container aside {
    margin-left: 1em;
    width: 250px;
    background-image: linear-gradient(to right, #724b9c, 3px, rgba(255, 255, 255, 0) 20%); }

footer {
  color: white;
  padding: 1ex;
  border-top: 1px solid #3c2852;
  background-image: linear-gradient(#724b9c, 3px, #666 80%); }
  footer .copyright {
    font-size: 90%;
    display: flex;
    justify-content: center; }
    footer .copyright p {
      padding: 3px 2em;
      border-top: 1px solid white;
      margin: 1em 3px 2px 3px; }

#approot {
  width: 100%;
  position: relative; }