.possibilities {
  .top-content {
    max-width: 740px;

    h2 {
        font-family: MARTIN;
        text-transform: uppercase;
        font-size: 3.4375rem;
        line-height: 60px;
        line-height: 3.75rem;
        letter-spacing: 0.1rem;
        font-weight: normal;
        color: var(--ccc-theme-color);
        margin: 0 0 32px;        
    }
  }
 


  .map-content {
    display: flex;
    flex-direction: row;

    @media only screen and (max-width: 767px) and (min-width: 1px) {
      flex-direction: column;
    }

    .map-left {
      display: inline-flex;
      flex-direction: column;
      width: 702px;
      width: fit-content;
      margin-top: 65px;

      @media only screen and (max-width: 767px) and (min-width: 1px) {
        width: 100%;
        position: relative;
        z-index: 6;
        margin-top: 0px;
      }

      h3 {
        margin-bottom: 30px;
        font-family: 'BioRhyme';
        color:var(--ccc-theme-color,var(--ccc-district-color));

        @media only screen and (max-width: 1023px) and (min-width: 768px) {
          font-size:2.rem;
          margin-bottom: 12px;
        }
      }

      .map-row {
        display: flex;
        flex-direction: row;

        @media only screen and (max-width: 1024px) and (min-width: 1px) {
          flex-direction: column;
        }

        .map-nav {
          display: inline-flex;
          flex-direction: column;
          margin-right: 40px;

          @media only screen and (max-width: 767px) and (min-width: 1px) {
            margin-right: 0;
          }

          .tablet-show {
            display: none;
          }

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            .tablet-show {
              display: block;
              font-family: Gibson;
              
              font-weight: 900;
              font-size:.9375rem;
              color: #0165a5;
              margin: 30px 0 20px 0;
            }
          }

          .tablet-dd {
            position: relative;

            #tablet-map-dd {
              display: none;
            }

            @media only screen and (max-width: 1024px) and (min-width: 1px) {
              #tablet-map-dd {
                display: flex;
                flex-direction: row;
                position: relative;
                border: 2px solid #444444;
                padding: 15px 45px;
                height: 55px;
                width: calc(100% - 50px);
                font-size:1.125rem;
                letter-spacing: 0;
                background: var(--ccc-white);
                cursor: pointer;

                &:before {
                  position: absolute;
                  content: "";
                  top: 50%;
                  left: 20px;
                  width: 16px;
                  height: 16px;
                  border-radius: 100%;
                  transform: translate(0, -50%);
                }

                &:after {
                  position: absolute;
                  content: "";
                  top: 50%;
                  right: 20px;
                  width: 20px;
                  height: 20px;
                   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMjAgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTI0Mi4wMDAwMDAsIC04NzA3LjAwMDAwMCkiIHN0cm9rZT0iIzQ0NDQ0NCIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBvbHlsaW5lIHBvaW50cz0iMTI0MyA4NzA4IDEyNTEuOTMxOTIgODcxOCAxMjYwLjg2Mzg0IDg3MDgiPjwvcG9seWxpbmU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) 50% no-repeat;
                  transform-origin: 50% 0;
                  transform: translate(0, -50%);
                }

                &.open:after {
                  transform: rotate(180deg) translate(0, -50%);
                }

                &.dot-1 {
                  color: var(--ccc-color-hw);

                  &:before {
                    background: var(--ccc-color-hw);
                  }
                }

                &.dot-2 {
                  color: var(--ccc-color-ht);

                  &:before {
                    background: var(--ccc-color-ht);
                  }
                }

                &.dot-3 {
                  color:  var(--ccc-color-kk);

                  &:before {
                    background:  var(--ccc-color-kk);
                  }
                }

                &.dot-4 {
                  color: var(--ccc-color-mx);

                  &:before {
                    background: var(--ccc-color-mx)
                  }
                }

                &.dot-5 {
                  color: var(--ccc-color-oh);

                  &:before {
                    background: var(--ccc-color-oh);
                  }
                }

                &.dot-6 {
                  color: var(--ccc-color-rd);

                  &:before {
                    background: var(--ccc-color-rd);
                  }
                }

                &.dot-7 {
                  color: var(--ccc-color-ww);

                  &:before {
                    background: var(--ccc-color-ww);
                  }
                }
              }
            }
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              #tablet-map-dd {
                width: 100%;
              }
            }
          }

          ul {
            flex-direction: column;
            margin: 50px 0 0 0;
            padding: 0;
            list-style: none;

            @media only screen and (min-width: 1025px) {
              display: flex !important;
                margin: 0px 0 0 0;
            }

            @media only screen and (max-width: 1024px) and (min-width: 1px) {
              display: block;
              border: 2px solid #fff;
              background: var(--ccc-white);
              z-index: 9;
              position: absolute;
              top: 53px;
              left: 0;
              width: calc(100% - 50px);
              margin: 0;
              padding: 0 20px;
              overflow: hidden;
              transition: 0.5s ease-in-out;
              max-height: 0;
              z-index: -1;

              &.open {
                padding: 20px;
                max-height: 800px;
                border: 2px solid #444;
                z-index: 22;
              }
            }
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              width: 100%;
            }

            li {
              display: inline-flex;
              width: 100%;
              margin-bottom: 25px;

              @media only screen and (max-width: 1024px) and (min-width: 1px) {
                margin-bottom: 15px;

                &:last-child {
                  margin-bottom: 0;
                }
              }

              button {
                position: relative;
                padding: 0 0 0 30px;
                font-family: Gibson;
                font-size:1.25rem;
                text-align: left;
                background: transparent;
                border: 1px solid transparent;
                color: var(--ccc-black);
                cursor: pointer;
                white-space: nowrap;

                @media only screen and (max-width: 1024px) and (min-width: 1px) {
                  font-size:1rem;
                }

                &:before {
                  position: absolute;
                  content: "";
                  top: 50%;
                  left: 0;
                  width: 10px;
                  height: 10px;
                  border-radius: 100%;
                  transform: translate(0, -50%);
                }

                span {
                  position: relative;

                  &:after {
                    display: none;
                    position: absolute;
                    content: "";
                    bottom: 0;
                    /*left: 30px;*/
                    left: 0;
                    width: 0;
                    height: 2px;
                    transition: .4s;
                  }
                }

                &:focus {
                  outline: none;
                  border: 1px solid #0165a5;
                  box-shadow: 0 0 4px 0 #53b2ff;
                  border-radius: 3px;
                }

                &:focus:active,
                &:focus.active-link {
                  border: 1px solid transparent;
                  box-shadow: none;
                }

                &.active span:after,
                &:hover span:after {
                  /*width: calc(100% - 30px);*/
                  width: 100%;
                }

                &.map-school-rd-color:before,
                &.map-school-rd-color span:after {
                  background: var(--ccc-color-rd);
                
                }

                &.map-school-kk-color:before,
                &.map-school-kk-color span:after {
                  background:  var(--ccc-color-kk);
                }

                &.map-school-mx-color:before,
                &.map-school-mx-color span:after {
                  background: var(--ccc-color-mx);

                }

                &.map-school-oh-color:before,
                &.map-school-oh-color span:after {
                  background: var(--ccc-color-oh);
                }

                &.map-school-ht-color:before,
                &.map-school-ht-color span:after {
                  background: var(--ccc-color-ht);

                }

                &.map-school-hw-color:before,
                &.map-school-hw-color span:after {
                  background: var(--ccc-color-hw);
               
                }

                &.map-school-ww-color:before,
                &.map-school-ww-color span:after {
                  background: var(--ccc-color-ww);
                }

                &.map-school-rd-color.active,
                &.map-school-rd-color:hover {
                  color:var(--ccc-color-rd);
               
                }

                &.map-school-kk-color.active,
                &.map-school-kk-color:hover {
                  color:  var(--ccc-color-kk);
                }

                &.map-school-mx-color.active,
                &.map-school-mx-color:hover {
                  color: var(--ccc-color-mx);
                 ;
                }

                &.map-school-oh-color.active,
                &.map-school-oh-color:hover {
                  color: var(--ccc-color-oh);
                }

                &.map-school-ht-color.active,
                &.map-school-ht-color:hover {
                  color:var(--ccc-color-ht);
                }

                &.map-school-hw-color.active,
                &.map-school-hw-color:hover {
                  color:var(--ccc-color-hw);
               
                }

                &.map-school-ww-color.active,
                &.map-school-ww-color:hover {
                  color: var(--ccc-color-ww);
                }
              }
            }
          }
        }

        .map-cnt {
          display: inline-flex;
          flex-direction: column;
          position: relative;
          width: 460px;

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            width: 390px;
            margin-top: 90px;

            .tablet-hide {
              display: none;
            }
          }
          @media only screen and (max-width: 767px) and (min-width: 1px) {
            width: 100%;
            margin-top: 40px;
          }

          .map {
            position: relative;
            width: 460px;
            height: 585px;
            background: url("../images/map-bg.png") 50% no-repeat;
            border: 2px solid #979797;
            background-size: cover;

            @media only screen and (max-width: 1024px) and (min-width: 1px) {
              width: 390px;
              height: 498px;
            }
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              width: 280px;
              height: 365px;
              margin: 0 auto;
            }

            button {
              position: absolute;
              width: 24px;
              height: 24px;
              max-width: 24px;
              z-index: 5;
              padding: 0;
              border-radius: 100%;
              text-indent: -9999px;
              transition: .4s;
              transform-origin: 50%;
              cursor: pointer;
              border: none;

              @media only screen and (max-width: 1024px) and (min-width: 1px) {
                width: 20px;
                height: 20px;
                max-width: 20px;
              }
              @media only screen and (max-width: 767px) and (min-width: 1px) {
                width: 15px;
                height: 15px;
                max-width: 15px;
              }

              img {
                display: none;
              }

              &:before {
                display: none;
                position: absolute;
                content: "";
                top: -3px;
                left: -3px;
                width: calc(100% + 6px);
                height: calc(100% + 6px);
                border-radius: 100%;
                background: #0065aa;
                z-index: 1;
              }

              &:after {
                position: absolute;
                content: "";
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 100%;
                z-index: 2;
              }

              &.active {
                transform: scale(2);

                @media only screen and (max-width: 767px) and (min-width: 1px) {
                  transform: scale(1.6);
                }

                &:before {
                  top: -2px;
                  left: -2px;
                  width: calc(100% + 4px);
                  height: calc(100% + 4px);
                }

                img {
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 8px;
                  height: 15px;
                  transform: translate(-50%, -50%);
                  z-index: 6;

                  @media only screen and (max-width: 767px) and (min-width: 1px) {
                    width: 5px;
                  }
                }
              }

              &:hover {
                background: #0065aa;
              }
            }


            .map-school-pin {
              --ccc-map-top: 0;
              --ccc-map-left: 0;
              --ccc-map-top-tablet: 0;
              --ccc-map-left-tablet: 0;
              --ccc-map-top-mobile: 0;
              --ccc-map-left-mobile: 0; 
              
              top:var(--ccc-map-top);
              left:var(--ccc-map-left);

              @media only screen and (max-width: 1024px) and (min-width: 1px) {
                top:var(--ccc-map-top-tablet) !important;
                left:var(--ccc-map-left-tablet) !important;
              }
              @media only screen and (max-width: 767px) and (min-width: 1px) {
                top:var(--ccc-map-top-mobile) !important;
                left:var(--ccc-map-left-mobile) !important;
              }
              
            }

            .map-school-pin.map-school-hw-color {
                --ccc-map-top: 250px;
                --ccc-map-left: 330px;
                --ccc-map-top-tablet: 209px;
                --ccc-map-left-tablet: 280px;
                --ccc-map-top-mobile: 155px;
                --ccc-map-left-mobile: 200px;
               &:after {
                background: var(--ccc-color-hw)
              }
            }

            .map-school-pin.map-school-ht-color {
                --ccc-map-top: 138px;
                --ccc-map-left: 275px;
                --ccc-map-top-tablet: 118px;
                --ccc-map-left-tablet: 234px;
                --ccc-map-top-mobile: 87px;
                --ccc-map-left-mobile: 166px;
               &:after {
                background: var(--ccc-color-ht)
              }
            }


            .map-school-pin.map-school-kk-color {
                --ccc-map-top: 390px;
                --ccc-map-left: 298px;
                --ccc-map-top-tablet: 330px;
                --ccc-map-left-tablet: 252px;
                --ccc-map-top-mobile: 242px;
                --ccc-map-left-mobile: 180px;
               &:after {
                background: var(--ccc-color-kk)
              }
            }

            .map-school-pin.map-school-mx-color {
                --ccc-map-top: 249px;
                --ccc-map-left: 240px;
                --ccc-map-top-tablet: 212px;
                --ccc-map-left-tablet: 203px;
                --ccc-map-top-mobile: 155px;
                --ccc-map-left-mobile: 145px;
               &:after {
                background: var(--ccc-color-mx)
              }
            }

            .map-school-pin.map-school-oh-color {
                --ccc-map-top: 480px;
                --ccc-map-left: 380px;
                --ccc-map-top-tablet: 405px;
                --ccc-map-left-tablet: 320px;
                --ccc-map-top-mobile: 295px;
                --ccc-map-left-mobile: 233px;
               &:after {
                background: var(--ccc-color-oh)
              }
            }            

            .map-school-pin.map-school-rd-color {
                --ccc-map-top: 448px;
                --ccc-map-left: 180px;
                --ccc-map-top-tablet: 380px;
                --ccc-map-left-tablet: 150px;
                --ccc-map-top-mobile: 275px;
                --ccc-map-left-mobile: 109px;
               &:after {
                background: var(--ccc-color-rd)
              }
            } 

             .map-school-pin.map-school-ww-color {
                --ccc-map-top: 140px;
                --ccc-map-left: 112px;
                --ccc-map-top-tablet: 120px;
                --ccc-map-left-tablet: 95px;
                --ccc-map-top-mobile: 88px;
                --ccc-map-left-mobile: 67px;
               &:after {
                background: var(--ccc-color-ww)
              }
            } 





          }

          p {
            font-family: Gibson;
            font-size:1rem;
            color: #0165a5;
            margin: 20px 0 0 0;
            line-height: 200% !important;
          }
        }
      }
    }

    .map-right {
      padding-left: 90px;
      margin-top: 85px;
      /* 50px; */

      @media only screen and (max-width: 1024px) and (min-width: 1px) {
        padding-left: 0;
        position: relative;
        left: -20px;
        min-width: calc(100% - 375px);
        margin-top: 260px;
      }
      @media only screen and (max-width: 767px) and (min-width: 1px) {
        margin-top: 0;
        left: 0;
        width: 100%;
      }

      .school-cnt {
        display: none;
      }

      .map-school-hw 
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-ht
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-kk 
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-mx
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-oh
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-rd      
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .map-school-ww      
       {
        .top-box {
          background-image:var(--ccc-map-background-image-top);
          &:before {
            background:var(--ccc-map-background-color-top-before);
            @media only screen and (max-width: 767px) and (min-width: 1px) {
              background-image:var(--ccc-map-background-image-top-before);
            }
          }
          &:after {
            background:var(--ccc-map-background-color-top-after);
          }
        }
        .bottom-content:before {
          background-image:var(--ccc-map-background-image-top);
        }
      }

      .top-box {
        position: relative;
        padding: 20px 20px 20px 0;
        min-height: 585px;
        max-height: 585px;

        @media only screen and (max-width: 1024px) and (min-width: 1px) {
          min-height: 0;
          padding: 20px 0;
        }
        @media only screen and (max-width: 767px) and (min-width: 1px) {
          padding: 20px;
          background-image: transparent !important;
        }

        &:before {
          position: absolute;
          content: "";
          top: 43px;
          left: -90px;
          width: 90px;
          height: 100%;
          transform: skewY(-44deg);

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            top: 17px;
            width: 50px;
            left: -50px;
            transform: skewY(-34deg);
          }
          @media only screen and (max-width: 767px) and (min-width: 1px) {
            top: -300px;
            left: -20px;
            width: calc(100% + 40px);
            height: calc(100% + 300px);
            transform: skew(0deg);
            clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
          }
        }

        &:after {
          position: absolute;
          content: "";
          top: 0;
          left: 100%;
          width: 100vh;
          height: 100%;

          @media only screen and (max-width: 767px) and (min-width: 1px) {
            display: none;
          }
        }

        .name {
          position: relative;
          z-index: 6;
          font-family: BioRhyme;
          font-size:1.875rem;
          color: var(--ccc-white);

          @media only screen and (max-width: 1280px) and (min-width: 1px) {
            font-size:1.3rem;
          }
        }

        .address {
          position: relative;
          z-index: 6;
          font-family: Gibson;
          font-size: 1.25rem;
          color: var(--ccc-white);

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            font-size:1rem;
            margin-top: 10px;
          }
        }

        img {
          position: relative;
          z-index: 6;
          margin: 20px 0;

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            max-width: 300px;
          }
        }

        .caption {
          position: relative;
          z-index: 6;
          font-family: 'Open Size';
          font-style: italic;
          font-size: 1rem;
          color: var(--ccc-white);
          margin: 0;

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            font-size: 1rem;
          }
        }
      }

      .bottom-content {
        position: relative;
        padding: 10px 20px 10px 40px;
        margin-top: 30px;

        @media only screen and (max-width: 1024px) and (min-width: 1px) {
          padding: 10px 0 10px 75px;
        }
        @media only screen and (max-width: 767px) and (min-width: 1px) {
          padding: 10px 0 10px 25px;
        }

        &:before {
          position: absolute;
          content: "";
          top: 0;
          left: 0;
          width: 4px;
          height: 100%;

          @media only screen and (max-width: 1024px) and (min-width: 1px) {
            left: 55px;
          }
          @media only screen and (max-width: 767px) and (min-width: 1px) {
            left: 0px;
          }
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            margin: 0 0 20px 0;

            @media only screen and (max-width: 1024px) and (min-width: 1px) {
              font-size:1rem;
            }

            a {
              text-decoration: underline;

              @media only screen and (max-width: 1024px) and (min-width: 1px) {
                font-size:1rem;
              }

              &:hover {
                color: var(--ccc-color-district);
              }

              &:focus {
                outline: none;
                border: 1px solid #0165a5;
                box-shadow: 0 0 4px 0 #53b2ff;
                border-radius: 3px;
              }

              &:focus:active,
              &:focus.active-link {
                border: none;
                box-shadow: none;
              }
            }
          }
        }
      }
    }
  }

  .btns-cnt {
    display:flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;


    margin: 80px auto 0 auto;
    width: calc(100% + 792px);
    min-width: calc(100% + 792px);
    margin-left: -792px;    

    a {
      max-width: 320px;
    }

    @media only screen and (max-width: 1023px) and (min-width: 1px) {
      width: calc(100% + 365px);
      min-width: calc(100% + 365px);
      margin-left: -365px;
    
    }
    @media only screen and (max-width: 767px) and (min-width: 1px) {
      flex-direction: column;
      margin: 50px auto 0 auto;
      width: 100%;
      min-width: 100%;
      margin-left: 0;
      align-items: center;
      gap: 5px;

      a:first-child {
        margin: 0 0 20px 0;
      }
      a:last-child {
        margin: 0;
      }
    }
  }

  @media only screen and (max-width: 1023px) and (min-width: 1px) {
    h2 {
      font-size:2rem;
    }
  }

  @media only screen and (max-width: 767px) and (min-width: 1px) {
    h2 {
      font-size:1.5rem;
    }
  }
}

.safari {
  .possibilities .map-content .map-right .top-box .caption {
    font-family: Gibson;
    font-style: italic;
  }
}


/* .possibilities .map-content .map-left .map-row .map-cnt .map .map-school-rd-color {
    top: 448px;
    left: 180px;
}

@media only screen and (max-width: 767px) and (min-width: 1px) {
    .possibilities .map-content .map-left .map-row .map-cnt .map .map-school-rd-color {
        top: 275px;
        left: 109px;
    }
}

.possibilities .map-content .map-left .map-row .map-cnt .map .map-school-kk-color {
    top: 390px;
    left: 300px;
}

@media only screen and (max-width: 767px) and (min-width: 1px) {
    .possibilities .map-content .map-left .map-row .map-cnt .map .map-school-kk-color {
        top: 242px;
        left: 180px;
    }
}

.possibilities .map-content .map-left .map-row .map-cnt .map .map-school-oh-color {
    top: 480px;
    left: 380px;
}

@media only screen and (max-width: 767px) and (min-width: 1px) {
    .possibilities .map-content .map-left .map-row .map-cnt .map .map-school-oh-color {
        top: 295px;
        left: 233px;
    }
}  */

.tablet-dd ul.reveal.on {
    height: 500px !important;
    z-index: 10;
    padding: 20px;
    border: 2px solid #444;
    z-index: 22;
    max-height: fit-content;
}





.possibilities  {

  .school-cnt {
       --ccc-map-background-image-top: linear-gradient(270deg, var(--ccc-map-background-color-top-after) 0%, var(--ccc-map-background-color-top-before) 100%);
       --ccc-map-background-image-top-before:  linear-gradient(0deg, var(--ccc-map-background-color-top-before) 0%, var(--ccc-map-background-color-top-after) 100%);
       --ccc-map-background-image-bottom-before:var(--ccc-map-background-image-top-before);
  }

  .map-school-hw{

      --ccc-map-background-color-top-before:#C04D00;
      --ccc-map-background-color-top-after:#EC7700;
    }

  .map-school-ht {
      --ccc-map-background-color-top-before:#124734;
      --ccc-map-background-color-top-after:#4C9C2E;
    }

  .map-school-kk {
      --ccc-map-background-color-top-before:#572A31;
      --ccc-map-background-color-top-after:#A32035;
  }


  .map-school-mx {
      --ccc-map-background-color-top-before:#83332E;
      --ccc-map-background-color-top-after:#E1251B;
  }

  .map-school-oh {
      --ccc-map-background-color-top-before:#3D1152;
      --ccc-map-background-color-top-after:#592C82 ;

   }

  .map-school-rd {
      --ccc-map-background-color-top-before:#B16D03;
      --ccc-map-background-color-top-after:#F5A800 ;

   }

  .map-school-ww {
     --ccc-map-background-color-top-before:#007580;
     --ccc-map-background-color-top-after:#00A5B5;

    }
  
}