/* $phone:            "screen and (max-width: 640px)";
$tablet:           "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up:    "screen and (min-width: 641px)";
$pocket:           "screen and (max-width: 1007px)";
$lap:              "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up:       "screen and (min-width: 1008px)";
$desk:             "screen and (min-width: 1240px)";
$widescreen:       "screen and (min-width: 1500px)"; */

.product_bottom_content {
  background: #fff;
  clear: both;
  /* margin: 50px 0; */
  margin: 0;

  .text_content_section {
    padding:55px 50px 55px;
    h2 {
      font-size:45px;
      letter-spacing:4.5px;
      line-height:70px;
      font-weight:300;
      font-family:"Averta";
      text-align:center;
      margin:0;
      text-transform:uppercase;

      span {
        display:block;
      }
    }
  }
  .notes_with_overlay_section {
    .notes_with_overlay_section--image {
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      padding:176px 109px 134px;

      @media screen and (max-width: 1007px) {
        padding:100px 30px;
      }

    .notes_with_overlay_section--content {
      width:100%;
      max-width:812px;
      background:#fff;
      text-align:left;
      padding: 50px 50px 59px;

      &.left_block {
        margin-right:auto;
      }
      &.right_block {
        margin-left:auto;
      }

      h4 {
        font-size:35px;
        letter-spacing:0.17px;
        line-height:45px;
        font-family:"Canela", serif;	
        margin-bottom:35px;
        font-weight:normal;
      }
      .notes_with_overlay_section--table {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #000;
        margin-bottom: 45px;

        .table_block {
          width:33.333%;

          &:not(:last-child) {
            border-right:1px solid #000;
          }

          .table_block--title {
            border-top:1px solid #000;
            border-bottom:1px solid #000;
            padding:5px 0 5px 30px ;
            font-weight:bold;
            font-size:13px;
            line-height:20px;
            letter-spacing:1.3px;
            font-family:"Averta";

            .mobile {
              display:none;
            }

            @media screen and (max-width: 640px) {
              padding-left:15px;
            }

        }
        .table_block--text {
          padding:15px 30px 25px;
          font-size:13px;
          line-height:20px;
          letter-spacing:0.07px;
          font-family:"Averta";

          @media screen and (max-width: 640px) {
            padding:10px 15px 20px;
          }
      }
    }
  }
  .skin_list {

    display: flex;
    justify-content: flex-start;

    ul {
      width:33.33%;

      &:not(:first-child) {
        padding-left:30px;
      }
      li {
        list-style:none;
        position:relative;
        font-size:11px;
        line-height:20px;
        letter-spacing:1.1px;
        text-transform:uppercase;
        margin-bottom:12px;

        &:before {
          content:" ";
          width:11px;
          height:11px;
          border:1px solid #000;
          border-radius:50%;
          margin-right:15px;
          display:inline-block;
          background:#fff;
        }

        &.full:before {
          background:#000;
        }

      }
    }
  }
}
}
}
}


@media screen and (max-width: 1007px) {
  .breadcrumbs_container {
    display:none;
  }
  .Product__InfoWrapper {
    background:transparent;
  }
  .product_bottom_content {
    background:transparent;
    margin: 0;

    .text_content_section {
      padding: 0 0 50px;
      max-width: 500px;
      margin:0 auto;

      h2 {
        font-size: 20px;
        letter-spacing: 2.5px;
        line-height: 30px;
      }
    }
    .mobile_img {
      display:block;
    }
    .notes_with_overlay_section  {
      .notes_with_overlay_section--image {
        padding: 0;
        background:none !important;

        .notes_with_overlay_section--content {
          max-width: 100%;
          padding: 16px;
          display: flex;
          flex-wrap: wrap;
          margin:0 auto;

          h4 {
            text-align:center;
            width:100%;
          }
          .notes_with_overlay_section--table {
            display: flex;
            flex-direction: column;
            margin-bottom:0;
            border:none;
            width:65%;
            justify-content: flex-start;

            .table_block {
              max-width: 70%;
              width: 100%;
              display: flex;
              padding: 15px;

              &:not(:last-child) {
                border-bottom: 1px solid #000;
                border-right:0;
              }

              .table_block--title {
                padding: 0;
                border: none;
                font-size: 10px;
                min-width: 40px;

                .mobile {
                  display:inherit;
                }
                .desktop {
                  display:none;
                }
              }
              .table_block--text {
                padding: 0;
                padding-left:10px;

                br {
                  display:none;
                }
              }
            }
          }
          .skin_list {
            width:35%;
            flex-direction: column;

            ul {
              width:100%;
              padding:0 !important;
            }
          }
        }
      }
    }
  }
}


@media screen and (max-width: 640px) {
  .product_bottom_content .text_content_section {
    padding: 0 24px 30px;

    h2 {
      font-size: 16px;
      letter-spacing: 1.5px;
      line-height: 25px;
    }
  }
  .product_bottom_content .notes_with_overlay_section .notes_with_overlay_section--image .notes_with_overlay_section--content {
    h4 {
      font-size: 26px;
      line-height: 40px;
    }
    .notes_with_overlay_section--table {
      width: 62%;

      .table_block {
        max-width: 85%;
        padding: 10px 15px;
        align-items: center;

        &:first-child {
          padding-top:0;
        }
      }
    }
    .skin_list {
      width:38%; 

      ul li {
        margin-bottom: 8px;

        &:before {
          width: 9px;
          height: 9px;
          margin-right: 8px;
        }
      }
    }
  }
}
@media screen and (max-width:420px) {
  .product_bottom_content .notes_with_overlay_section .notes_with_overlay_section--image .notes_with_overlay_section--content .notes_with_overlay_section--table .table_block {
    padding: 5px 10px;

    .table_block--title  {
      font-size: 9px;
    }
    .table_block--text {
      padding-left: 4px;
      font-size: 11px;
      line-height: 17px;
    }
  }
  .product_bottom_content .notes_with_overlay_section .notes_with_overlay_section--image .notes_with_overlay_section--content .skin_list ul li {
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 20px;
  }
  .product_bottom_content .text_content_section h2 {
    font-size: 13px;
  }
}



.notes_with_overlay_section--content > h4{
  margin-top: 0;
}
.notes_with_overlay_section--content > div{
  margin-bottom: 0;
}
.custom-notes_with_overlay_section--table {
  margin-bottom: 45px;
  
  .header {
  	background: #000;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    
    > div {
      padding: 5px 10px;
    }

    > div:not(:only-child):first-child {
      width: 35%;
      border-right: 1px solid #fff;
    }

    > div:not(:only-child):last-child {
      width: 65%;
    }
  }
  
  .first-table {
  	display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    
    .subtable {
      width: 35%;
      border-right: 1px solid #000;
      display: flex;
      flex-wrap: wrap;
      
      @media screen and (max-width: 640px) {
      	width: 100%;
      }

      > div {
        width: 65px;
        font-size: 12px;
        border-bottom: 1px solid #000;
        padding: 5px;
        
        @media screen and (max-width: 640px) {
          width: 35%;
        }
        
        &:nth-child(even){
           width: calc(100% - 65px);
          
           @media screen and (max-width: 640px) {
            width: 65%;
          }
        }
        
        
      }

      .title {
        border-right: 1px solid #000;
        font-weight: 700;
      }
    }

    .content {
      width: 65%;
      border-bottom: 1px solid #000;
      padding: 5px;

      @media screen and (max-width: 640px) {  
        width: 100%;
      }

      h4 {
        margin: 0 0 10px 0!important;
        font-size: 16px!important;
        line-height: 1!important;
        padding-left: 5px;
        padding-top: 5px;
        
        @media screen and (max-width: 640px) {
              padding-left: 0;
           }
      }
      
      .image-with-text {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        
        img {
          display: block;
          width: 40%;
          padding-right: 10px;
          margin: 0;
        }
        
        ul {
          width: 60%;
          padding-left: 20px;
          margin: 0;
          font-size: 12px;
        }
      }
    }
  }
  
  .second-table {
    > div {
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      padding: 10px;
      display: flex;
      
      svg {
      	width: 20px;
        height: 20px;
        margin-top: 2px;
      }
      
      span {
      	width: calc(100% - 20px);
        padding-left: 10px;
      }
    }
  }
}




.mobile_img {
  display:none;
}





@media screen and (max-width: 1500px) and (min-width: 1008px) {
  /* .notes_with_overlay_section--content {
     padding: 30px !important;
     max-width: 520px !important;
   } */
   .notes_with_overlay_section--image {
     padding: 50px !important;
   }
   /* .text_content_section {
     padding: 50px !important;
   } */
   
 }