.page-width--medium {
  /*max-width:1200px;*/
  max-width:1160px;
  margin:0 auto;
}
main#MainContent { position:relative; }
.pos-rel { position:relative; }
.section-scroll-id { position:absolute; top:-90px; visibility:hidden; opacity:0; }
@media(max-width:991px){
  .section-scroll-id { top:-70px; }
}
@media(max-width:749px){
  .section-scroll-id { top:-60px; }
}
@media(max-width:350px){
  .section-scroll-id { top:-70px; }
}
.main-page-wrapper {
  .main-page-grid {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    @media(max-width:991px){ gap:20px; }
    @media(max-width:749px){ gap:30px; }
    > .main-page-left {
      flex:0 0 49%; width:49%;
      @media(max-width:991px){
        flex:0 0 100%; width:100%;
      }
    }
    > .main-page-right {
      flex:0 0 51%; width:51%; padding:0 0px 0 60px;
      @media(max-width:991px){
        flex:0 0 100%; width:100%; padding:0;
      }
    }
  }
}

.page-main-info {
  border-radius: 20px;
  background: #85ACA6;
  background: linear-gradient(135deg, rgba(133, 172, 166, 1) 0%, rgba(109, 152, 186, 1) 100%);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
  padding:20px 30px 30px;
  @media(max-width:991px){
    background: #85ACA6;
    background: linear-gradient(0deg, rgba(133, 172, 166, 1) 0%, rgba(109, 152, 186, 1) 100%);
  }
  @media(max-width:749px){
    padding:15px 20px;
    border-radius:10px;
  }
  .page-header {
    color: #FFF;
    font-family: 'Ubuntu';
    font-size: 43px;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
    text-transform: capitalize;
    margin:0 0 35px;
    @media(max-width:749px){
      font-size:23px; line-height:30px;
      margin-bottom:15px;
    }
  }
  .page-information {
    color: #FFF;
    font-family: "CommutersSans";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    > p:last-child { margin-bottom:0; }
    @media(max-width:749px){
      font-size:12px; line-height:17px;
    }
  }
}
.tutorial-slider-wrapper {
  position:relative;
  padding:0;
  /*&:before {
    content:'';
    position:absolute;
    top:0; bottom:0;
    left:0px; width:50px;
    background: #ffffff;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 100%);
    z-index:1;
  }
  &:after {
    content:'';
    position:absolute;
    top:0; bottom:0;
    right:0px; width:50px;
    background: #ffffff;
    background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 100%);
    z-index:1;
  }*/
  .tutorial-slider {
    margin:0; padding:0; list-style-type:none;
    .slick-slide {
      .slider-inner {
        height:125px; width:100%;
        display:flex;
        align-items:center; justify-content:center;
        @media(max-width:749px){ height:55px; }
        img {
          width:auto;
          max-height:125px;
          max-width:90%;
          @media(max-width:749px){
            max-height:55px; max-width:75px;
          }
        }
      }
    }
  }
}

/***** Sticky Tab CSS *****/
.tutorial-tab-section {
  position:sticky;
  top:130px; z-index:1;
  left:0; right:0;
  @media(max-width:991px){ top:120px; }
}
@media(max-width:749px){
  .page-width.tab-container {
    padding-left:0 !important; padding-right:0 !important;
  }
}
.tutorial-tab-section .color-scheme-1 { padding:10px 0; }
.sticky-tab-wrapper {
  border-radius: 20px;
  background: #6D98BA;
  padding:7px;
  display:flex;
  /*align-items:center;*/
  justify-content:space-between;
  @media(max-width:749px){
    border-radius:0;
    padding:3px;
  }
  .sticky-tab-link {
    max-width:154px;
    color: #FFF;
    text-align: center;
    font-family: 'Ubuntu';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
    text-decoration:none;
    background-color:#6D98BA;
    transition:all 0.3s;
    display:flex; border-radius:15px;
    align-items:center; justify-content:center;
    padding:11px 20px;
    @media(max-width:991px){
      font-size:16px; line-height:19px;
    }
    @media(max-width:749px){
      font-size:12px; line-height:15px;
      padding:5px 10px;
      border-radius:5px;
      max-width:85px;
    }
    @media(max-width:500px){
      font-size:10px; line-height:13px;
      padding:5px 7px;
    }
    &:hover, &.active {
      background-color:#fff;
      color:#304E55;
    }
  }
}

/***** Page Grid *****/
.gray-box {
  border-radius: 20px;
  background: #DCE1E2;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16) inset;
  padding:32px 40px;
  @media(max-width:749px){
    padding:20px; border-radius: 10px;
  }
  &.left-box {
    .img-outer {
      max-height:62px; display:block; font-size:0; line-height:0;
      margin-bottom:15px;
      > img { width:auto; max-height:62px; }
      @media(max-width:749px){
        max-height:34px; margin-bottom:12px;
        > img { max-height:34px; }
      }
      
    }
    .title {
      margin:2px 0 15px;
      color: #304E55;
      font-family: 'Ubuntu';
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 34px;
      /* text-transform: capitalize; */
      @media(max-width:749px){
        font-size:19px; line-height:23px; margin-bottom:13px; margin-top:0;
      }
    }
    .description {
      color: #304E55;
      font-family: "CommutersSans";
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      > p:first-child { margin-top:0; }
      > p:last-child { margin-bottom:0; }
      @media(max-width:749px){
        font-size:12px; line-height:17px;
      }
    }
  }
}
.gray-box1 {
  border-radius: 20px;
  background: #DCE1E2;
  padding:20px;
  @media(max-width:749px){
    padding:15px 13px 13px;
    border-radius: 10px;
  }
  &.right-box {
    .title {
      margin:0 0 17px;
      color: #304E55;
      font-family: 'Ubuntu';
      font-size: 30px;
      font-style: normal;
      font-weight: 700;
      line-height: 34px;
      /* text-transform: capitalize; */
      @media(max-width:749px){
        font-size:19px; line-height:23px; margin-bottom:15px;
        padding-left:5px; padding-right:5px;
      }
      + .info-show-hide { border-radius:0 0 15px 15px; }
      + .expandcollapse-wrapper { border-radius:0 0 15px 15px; }
      /*+ .bigger-image-wrapper { border-radius:0 0 15px 15px; }*/
      @media(max-width:749px){
        + .info-show-hide { border-radius:0 0 10px 10px; }
      }
    }
    .description {
      color: #304E55;
      font-family: "CommutersSans";
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin:10px 0 20px;
      @media(max-width:749px){
        font-size:11px; line-height:16px;
        padding-left:5px; padding-right:5px;
        margin-bottom:10px;
      }
      > p:first-child { margin-top:0; }
      > p:last-child { margin-bottom:0; }
      + .info-show-hide { border-radius:0 0 15px 15px; }
      + .expandcollapse-wrapper { border-radius:0 0 15px 15px; }
      @media(max-width:749px){
        + .info-show-hide { border-radius:0 0 10px 10px; }
      }
    }
    .species-lists {
      .species-items {
        padding:0; margin:0; list-style-type:none;
        .species-item {
          display:flex;
          gap:10px 50px;
          align-items:center;
          min-height:100px;
          border:4px solid #fff;
          background-color:#fff;
          border-radius:15px;
          margin-bottom:20px;
          padding:0 26px;
          transition:all 0.3s;
          @media(max-width:1199px){
            gap:10px 20px;
            padding:0 15px;
          }
         @media(max-width:749px){
           gap:10px 60px;
           margin-bottom:10px;
           min-height:50px;
           border-width:2px;
           border-radius:5px;
         }
         @media(max-width:374px){
           gap:10px 20px;
         }
          &.clickable {
            cursor:pointer;
          }
          &:last-child { margin-bottom:0; }
          &.clickable.active, &.clickable:hover {
            border-color:#6D98BA;
          }
          .image {
            flex:0 0 135px;
            width:135px;
            font-size:0; line-height:0;
            display:flex;justify-content:center;
            align-items:center;
            img { width:auto; }
            @media(max-width:1199px){
              flex:0 0 105px; width:105px;
            }
            @media(max-width:749px){
              flex:0 0 65px; width:65px;
            }
          }
          .text {
            flex-grow:1;
            color: #304E55;
            font-family: 'Ubuntu';
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 23px;
            text-transform: capitalize;
            @media(max-width:749px){
              /*font-size:14px; line-height:16px;*/
              font-size:12px; line-height:14px;
            }
          }
        }
      }
    }
    .bigger-image-wrapper {
      background-color:#fff;
      margin:0 -15px -15px;
      border-radius:0 0 15px 15px;
      overflow:hidden;
      .bigger-image-inner { text-align:center; }
      &.no-header { margin:-15px; border-radius:15px; }
      @media(max-width:749px){
        margin:0 -9px -9px; border-radius:0 0 10px 10px;
        &.no-header { margin:-9px -9px; }
      }
      .visit-link-button-wrapper {
        display: flex; justify-content: center; margin-block: 10px 30px;
      }
    }
    
    .info-show-hide {
      background-color:#fff;
      margin:0 -15px -15px;
      padding:15px; border-radius:15px 15px;
      &.no-header { margin:-15px; }
      @media(max-width:749px){
        padding:10px; border-radius:10px;
        margin:0 -9px -9px;
        &.no-header { margin:-9px -9px; }
      }
      .info-show-hide-items {
        padding:0; margin:0; list-style-type:none;
        display:flex; flex-wrap:wrap;
        gap:15px 0;
        @media(max-width:749px){
          gap:10px 0;
        }
        .info-item {
          flex:0 0 100%; width:100%;
          background-color:#DCE1E2;
          border-radius:10px;
          padding:8px;
          @media(max-width:749px){
            padding:5px; border-radius:5px;
          }
          .info-top {
            display:flex;
            gap:0 20px;
            align-items:center;
            @media(max-width:749px){ gap:0 10px; }
            .top-left {
              flex:0 0 285px;
              width:285px;
              border-radius:10px;
              overflow:hidden;
              font-size:0; line-height:0;
              @media(max-width:1199px){
                flex:0 0 210px; width:210px;
              }
              @media(max-width:749px){
                flex:0 0 170px; width:170px;
                border-radius:5px;
              }
              @media(max-width:374px){
                flex:0 0 130px; width:130px;
              }
            }
            .top-right {
              flex-grow:1;
              display:flex;
              justify-content:center;
              flex-direction:column;
              gap:20px 0;
              @media(max-width:1199px){
                gap:15px 0;
              }
              @media(max-width:749px){
                gap:10px 0;
              }
              @media(max-width:374px){
                gap:7px 0;
              }
              .heading {
                color: #304E55;
                text-align: center;
                font-family: 'Ubuntu';
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 23px;
                text-transform: capitalize;
                max-width:142px;
                margin:auto;
                @media(max-width:749px){
                  font-size: 14px; line-height: 16px;
                  max-width:85px;
                }
                @media(max-width:374px){
                  max-width:none;
                }
              }
              .info-expcoll-btn {
                display:block;
                width:24px; height:24px;
                margin:auto; cursor:pointer;
                @media(max-width:749px){
                  width:15px; height:15px;
                  > svg { width:15px; height:15px;}
                }
                > .expand-icon { display:none; }
                &.active {
                  > .expand-icon { display:block; }
                  > .collapse-icon { display:none; }
                }
              }
            }
          }
          .info-bottom {
            color: #304E55;
            font-family: "CommutersSans";
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            display:none;
            padding:26px 26px 16px;
            @media(max-width:749px){
              font-size: 11px;
            }
            > p:first-child { margin-top:0; }
            > p:last-child { margin-bottom:0; }
            @media(max-width:1199px){ padding:15px; }
          }
        }
      }
    }
    .expandcollapse-wrapper {
      background-color:#fff;
      border-radius:15px;
      margin:0 -15px -15px;
      padding:15px;
      &.no-header { margin:-15px; }
      @media(max-width:749px){
        margin:0 -9px -9px;
        padding:10px; border-radius:10px;
        &.no-header { margin:-11px -9px -9px; }
      }
      .expcoll-list {
        margin:0; padding:0; list-style-type:none;
        display:flex; flex-direction:column; gap:15px 0;
        @media(max-width:749px){ gap:10px 0; }
        .expcoll-item {
          background-color:#DCE1E2;
          padding:0px 0px;
          border-radius:10px;
          @media(max-width:749px){
            border-radius:5px;
          }
          .expcoll-box {
            .expcoll-head {
              padding:20px 60px 20px 30px;
              cursor:pointer;
              position:relative;
              color: #304E55;
              font-family: 'Ubuntu';
              font-size: 20px;
              font-style: normal;
              font-weight: 400;
              line-height: 23px;
              @media(max-width:749px){
                padding:15px 45px 15px 20px;
                font-size: 14px; line-height:16px;
              }
              &:before {
                content:'';
                position:absolute;
                top:50%; right:30px;
                transform:translateY(-50%);
                width:24px; height:24px;
                background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M11.9993%200C5.50443%200%200.242188%205.26224%200.242188%2011.7571C0.242188%2018.2519%205.50443%2023.5142%2011.9993%2023.5142C18.4941%2023.5142%2023.7564%2018.2519%2023.7564%2011.7571C23.7564%205.26224%2018.4941%200%2011.9993%200ZM18.826%2013.0845C18.826%2013.3974%2018.57%2013.6534%2018.2571%2013.6534H13.8956V18.0149C13.8956%2018.3278%2013.6396%2018.5838%2013.3267%2018.5838H10.6719C10.359%2018.5838%2010.103%2018.3278%2010.103%2018.0149V13.6534H5.74147C5.42858%2013.6534%205.17258%2013.3974%205.17258%2013.0845V10.4297C5.17258%2010.1168%205.42858%209.86078%205.74147%209.86078H10.103V5.49928C10.103%205.18639%2010.359%204.93039%2010.6719%204.93039H13.3267C13.6396%204.93039%2013.8956%205.18639%2013.8956%205.49928V9.86078H18.2571C18.57%209.86078%2018.826%2010.1168%2018.826%2010.4297V13.0845Z%22%20fill%3D%22%23304E55%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
                background-size:100%;
                @media(max-width:749px){
                  width:15px; height:15px;
                }
              }
            }
            .expcoll-details {
              color: #304E55;
              font-family: "CommutersSans";
              font-size: 13px;
              font-style: normal;
              font-weight: 400;
              line-height: 20px;
              padding:0 30px 30px;
              display:none;
              @media(max-width:749px){
                padding:0 20px 15px;
                font-size: 11px;
              }
              > p:first-child { margin-top:0; }
              > p:last-child { margin-bottom:0; }
            }
            &.open {
              .expcoll-head {
                &:before {
                  background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M12%200C5.50476%200%200.242188%205.26257%200.242188%2011.7578C0.242188%2018.2531%205.50476%2023.5156%2012%2023.5156C18.4952%2023.5156%2023.7578%2018.2531%2023.7578%2011.7578C23.7578%205.26257%2018.4952%200%2012%200ZM5.74181%2013.6542C5.4289%2013.6542%205.17288%2013.3982%205.17288%2013.0853V10.4303C5.17288%2010.1174%205.4289%209.86139%205.74181%209.86139H18.2582C18.5711%209.86139%2018.8271%2010.1174%2018.8271%2010.4303V13.0853C18.8271%2013.3982%2018.5711%2013.6542%2018.2582%2013.6542H5.74181Z%22%20fill%3D%22%23304E55%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
                  background-size:100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
@media(max-width:749px){
  #hazard-section-outer .gray-box1.right-box .species-lists .species-items .species-item .image img { max-height:32px; }
}
.page-grid-outer {
  .page-grid-wrapper {
    display:flex;
    flex-wrap:wrap;
    gap:30px; align-items: flex-start;
    > div {
      width:calc(50% - 15px);
      flex: 0 0 calc(50% - 15px);
    }
    @media(max-width:991px){
      flex-direction:column;
      gap:20px;
      > div { width:100%; flex:0 0 100%; }
    }
  }
}

/***** Footer CSS *****/
.shopify-section-group-footer-group .footer.color-scheme-2{ background-color:#fff; }