* {
      box-sizing: border-box;
    }

    body {
      background-color: #F3F3F4;
    }

    a:link {
      text-decoration: none;
    }

    a:visited {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    a:active {
      text-decoration: underline;
    }

    .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100px;
      margin: auto;
      background-color: #2c3e50;
      z-index: 7;
    }
    .menu li {
      float: left;
      width: 20%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .menu a {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-decoration: none;
      position: relative;
      font-size: 18px;
      z-index: 9;
    }
    a.active1 {
      background-color: #456252;
      pointer-events: none;
    }
    a.active2 {
      background-color: #bf764c;
      pointer-events: none;
    }
    li.slider {
      width: 25%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #e74c3c;
      z-index: 8;
      transition: left 0.4s, background-color 0.4s;
    }
    .menu li:nth-child(1):hover ~ .slider,
    .menu li:nth-child(1):focus ~ .slider,
    .menu li:nth-child(1):active ~ .slider {
      left: 0;
      background-color: #3498db;
    }
    .menu li:nth-child(2):hover ~ .slider,
    .menu li:nth-child(2):focus ~ .slider,
    .menu li:nth-child(2):active ~ .slider {
      left: 25%;
      background-color: #9b59b6;
    }
    .menu li:nth-child(3):hover ~ .slider,
    .menu li:nth-child(3):focus ~ .slider,
    .menu li:nth-child(3):active ~ .slider {
      left: 50%;
      background-color: #e67e22;
    }
    .menu li:nth-child(4):hover ~ .slider,
    .menu li:nth-child(4):focus ~ .slider,
    .menu li:nth-child(4):active ~ .slider {
      left: 75%;
      background-color: #16a085;
    }

    /* Create three equal columns that floats next to each other */
    .columnA {
      float: left;
      padding: 15px;
    }
    .columnA2 {
      float: left;
      margin:2%;
      border-radius: 10px;
      padding:10px 20px 10px 20px;
    }
    .columnA2s{
      width: 80%;
      float: left;
      margin:2%;
      border-radius: 10px;
      padding:10px 20px 10px 20px;
      cursor: pointer;
    }
    .columnA2back{
      width: 10%;
      margin:2%;
      border-radius: 10px;
      padding:10px 20px 10px 20px;
      cursor: pointer;
      text-align: center;
    }
    .columnB {
      float: left;
      width: 100%;
      padding: 15px;
    }
    .columnC {
      display:flex;
      flex-wrap:wrap;
      background-color: #823b93;
      float: left;
      width: 100%;
      padding: 15px;
      left: 15px;
      right: 15px;
    }
    .columnD {
      width: 100%;
    }
    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    @media only screen and (max-device-width: 480px) {
      .columnA {
        width: 100%;
      }
      .columnA2s{
        width: 100%;
        float: left;
        margin:2%;
        border-radius: 10px;
        padding:10px 20px 10px 20px;
      }
      .columnA2back{
        width: 100%;
        margin:2%;
        border-radius: 10px;
        padding:10px 20px 10px 20px;
      }
      .columnB {
        width: 100%;
      }
      .columnC {
        width: 100%;
      }
      .columnD {
        width: 100%;
        margin:0%;
      }
    }
    select[disabled='disabled'] {
    color: #000;
    background-color: #efefef;
    }

    .fa-chevron-circle-right{
      color: #7536c2;
    }

    .fa-search{
      color: #ffff;
    }