/*-------------------------------------------------------
TOP
-------------------------------------------------------*/
#top {
    margin: 50px 0;
  }
  /*-------------------------------------------------------
  GUIDE
  -------------------------------------------------------*/
  #guide .container {
    background: #f3f3f3;
  }
  .one,
  .two,
  .three,
  .four {
    padding: 0 20px;
  }

  #guide{
    margin-bottom: 50px;
  }
  /*-------------------------------------------------------
  TABS
  -------------------------------------------------------*/
  .tabs a {
    width: 33.33%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 15px white solid;
    color: black;
    transition: 0.3s all ease;
  }
  .last {
    border-right: 15px white solid;
  }
  .tabs a:hover {
    text-decoration: none !important;
    background: #003964;
    opacity: 0.7;
    color: white;
    transition: 0.3s all ea;
  }
  .tabs .actives:hover {
    opacity: 1;
  }
  .tabs .actives {
    background: #003964;
    color: white !important;
  }
  .tabs {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 50px;
  }
  /*-------------------------------------------------------
  ONE
  -------------------------------------------------------*/
  .one img {
    width: 100%;
  }
  .one ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
  }
  .one li {
    margin: 12px 0;
    cursor: pointer;
  }
  li .active {
    background-image: url("/wp-content/themes/lg/img/primal/blue_arrow.png");
    background-position: right top;
    background-repeat: no-repeat;
    color: var(--orange) !important;
    padding: 5px 10px;
    padding-right: 20px;
  }
  li:hover a {
    background-image: url("/wp-content/themes/lg/img/primal/blue_arrow.png");
    background-position: right top;
    background-repeat: no-repeat;
    color: var(--orange) !important;
    padding: 5px 10px;
    padding-right: 20px;
  }
  /*-------------------------------------------------------
  TWO
  -------------------------------------------------------*/
  .carcass img {
    position: absolute;
  }
  .topside {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/topside_cut.png");
    height: 106px;
    width: 96px;
    margin-top: 40px;
    margin-left: 10px;
    position: absolute;
  }
  .silverside {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/silverside_cut.png");
    height: 141px;
    width: 115px;
    margin-top: 40px;
    margin-left: 10px;
    position: absolute;
    display: none;
  }
  .knuckle {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/knuckle_cut.png");
    height: 106px;
    width: 89px;
    margin-top: 70px;
    margin-left: 67px;
    position: absolute;
    display: none;
  }
  .rump {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/rump_cut.png");
    height: 59px;
    width: 89px;
    margin-top: 170px;
    margin-left: 17px;
    position: absolute;
    display: none;
  }
  .striploin {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/striploin_cut.png");
    height: 128px;
    width: 65px;
    margin-top: 220px;
    margin-left: 44px;
    position: absolute;
    display: none;
  }
  .forerib {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/forerib_cut.png");
    height: 88px;
    width: 72px;
    margin-top: 330px;
    margin-left: 42px;
    position: absolute;
    display: none;
  }
  .fillet {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/fillet_cut.png");
    height: 121px;
    width: 30px;
    margin-top: 186px;
    margin-left: 60px;
    position: absolute;
    display: none;
  }
  .brisket {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/brisket_cut.png");
    height: 113px;
    width: 51px;
    margin-top: 387px;
    margin-left: 168px;
    position: absolute;
    display: none;
  }
  .legmutton {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/legmutton_cut.png");
    height: 130px;
    width: 71px;
    margin-top: 393px;
    margin-left: 112px;
    position: absolute;
    display: none;
  }
  .chuck {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/chuck_cut.png");
    height: 124px;
    width: 81px;
    margin-top: 406px;
    margin-left: 42px;
    position: absolute;
    display: none;
  }
  .blade {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/chuck_cut.png");
    height: 124px;
    width: 81px;
    margin-top: 406px;
    margin-left: 42px;
    position: absolute;
    display: none;
  }
  .legshin {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/shin_cut.png");
    height: 87px;
    width: 97px;
    margin-top: 479px;
    margin-left: 180px;
    position: absolute;
    display: none;
  }
  .clod {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/clod_cut.png");
    height: 100px;
    width: 160px;
    margin-top: 500px;
    margin-left: 38px;
    position: absolute;
    display: none;
  }
  .flank {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/flank_cut.png");
    height: 193px;
    width: 104px;
    margin-top: 213px;
    margin-left: 103px;
    position: absolute;
    display: none;
  }
  .trim {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/trim_cut.png");
    height: 598px;
    width: 268px;
    margin-top: 5px;
    margin-left: 10px;
    position: absolute;
    display: none;
  }
  .hindquarter {
    background-image: url("/wp-content/themes/lg/img/primal/Cuts/hindquartershin_cut.png");
    height: 82px;
    width: 59px;
    margin-top: 6px;
    margin-left: 73px;
    position: absolute;
    display: none;
  }
  /*-------------------------------------------------------
  THREE
  -------------------------------------------------------*/
  
  li .activec {
    background-image: url("/wp-content/themes/lg/img/primal/blue_arrow.png");
    background-position: right top;
    background-repeat: no-repeat;
    color: var(--orange) !important;
    padding: 5px 10px;
    padding-right: 20px;
  }
  .three ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
  }
  .three li {
    margin: 12px 0;
    cursor: pointer;
  }
  
  .cut-silverside,
  .cut-knuckle,
  .cut-rump,
  .cut-striploin,
  .cut-forerib,
  .cut-fillet,
  .cut-brisket,
  .cut-legmutton,
  .cut-chuck,
  .cut-blade,
  .cut-legshin,
  .cut-clod,
  .cut-flank,
  .cut-trim,
  .cut-diced {
    display: none;
  }
  
  /*-------------------------------------------------------
  FOUR
  -------------------------------------------------------*/
  .spec p {
    font-size: 16px;
    line-height: 21px;
  }
  .spec {
    margin-top: 20px;
  }
  .spec h3 {
    font-size: 22px;
    margin-bottom: 30px;
  }
  .spec img {
    cursor: pointer;
    border: 2px solid #003964;
    margin: 5px 0;
  }
  .modal img {
    width: 100%;
  }
  .spec {
    display: none;
  }
  .spec-topside-1 {
    display: block;
  }
  .thumb {
    width: 134px;
  }
  /*-------------------------------------------------------
  RESPONSIVE
  -------------------------------------------------------*/
  @media (max-width: 767px) {
    #guide .container {
      max-width: 100%;
    }
  }
  @media (max-width: 600px) {
    .one img {
      width: 100px !important;
    }
    .one {
      flex: 0 0 20%;
    }
  }
  @media (max-width: 440px) {
    .one img {
      width: 150px !important;
    }
    .one {
      flex: 0 0 100%;
      max-width: 100% !important;
    }
    .two {
      height: 700px;
      max-width: 100%;
      flex: 0 0 100%;
    }
  }

  #hero{
    height: 620px;
    background-size: cover;
    position: relative;
    z-index: 0;
}

#hero::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.45)
}

#hero h1{
    text-align: center;
    font: normal normal bold 61px/68px futura-pt;
    color: var(--white);
    background: var(--darkBlue);
    width: fit-content;
    padding: 20px 35px;
    margin: 0 auto 30px;;
}

#hero p{
    text-align: center;
    color: var(--white);
    font: normal normal normal 19px/28px futura-pt;
    width: 600px;
    margin: 0 auto;
}

#hero .content{
    top: 50%;
    transform: translateY(-40%) translateX(-50%);
    left: 50%;
    position: absolute;
}

@media(max-width:1670px){
    #hero h1{
        width: fit-content;
    }
}

@media(max-width:1200px){
    #hero h1{
        font: normal normal bold 45px/55px futura-pt;
    }
}

@media(max-width:767px){
    #hero h1{
        font: normal normal bold 45px/55px futura-pt;
        width: 100%;
    }
    #hero .content{
        width: 100%;
        padding: 0 15px;
    }
    #hero p{
        width: fit-content;
    }   
}

@media(max-width:576px){
    #hero h1{
        font: normal normal bold 35px/45px futura-pt;
        width: 100%;
    }
}