﻿.membpricingPage .panel-title button {
    background-color    :transparent;
    border              :none;
    display             :block;
    width               :100%;
    text-align          :left;
    padding             :1vw;
    font-size           :x-large;
}

.membpricingPage .panel-body > p {
    font-size           :medium;
}

.membpricingPage ul li {
    padding             :5px;
}

.membPriceTBL, .comparisonTable {
    table-layout        :fixed;
    width               :100%;
    font-size:large;
}

.membPriceTBL {
    color:white;
}

.membPriceTBL > tbody > tr > td, .comparisonTable > tbody > tr > td {
    padding             :5px;
    padding-top         :12px;
}

.membPriceTBL > tbody > tr > td:last-child, .membPriceTBL > thead > tr > th:last-child  { 
    text-align          :right;
}

.sidebarImage {
    height:300px;
    text-align:center;
    background-position:center center;
    background-size:cover;
}

 .comparisonTable {
     margin-top         :20px;
 }

 .comparisonTable td:nth-child(1n+2) {
     font-size          :2vw;
 }

 .comparisonTable td:first-child, .comparisonTable th:first-child {
     width              :20%;
 }

 .comparisonTable th:first-child {
     font-size          :x-large;
 }

 .comparisonTable td:nth-child(1n+2) {
     text-align         :center;
 }
 
.comparisonTable thead th {
    padding             :1vw;
    font-size           :large;
    text-align          :center;
    /*position            :relative;*/
}

.comparisonTable thead th > button {
    width:90%;
}

.comparisonTable thead th > button, .comparisonTable thead th > span {
    padding             :10px;    
    letter-spacing      :0.2vw;
    font-variant-caps   :all-petite-caps;
}

 .comparisonTable thead th:nth-child(1n+2) > button {
     border             :none!important;
     display            :table-cell;
     border-radius      :10px;
     white-space        :normal;
     box-shadow         :1px 1px 2px rgba(255, 255, 255, 0.5) inset, 
                        -1px -1px 2px rgba(0, 0, 0, 0.5) inset;
     transition-duration:500ms;
 }

 .comparisonTable thead th:nth-child(1n+2) > button:hover, .comparisonTable thead th:nth-child(1n+2) > button:active {
     background-color:forestgreen;
     transition-duration:500ms;
 }

table.greenBGList {
     list-style:none;
 }

 table.greenBGList td {
     padding:10px;
 }
  table.greenBGList li:before{
      background:black;
  }

 table.greenBGList td:first-child{
     margin:15px 10px;
     display:inline-flex;
     color:black;
     font-weight:bold;
     padding:2px 1rem 2px 1rem;
     min-width:2rem;
     border-radius:50%;
     background:white;
 }

 .pricingDiv {
     font-family:'NeuronBold';
     min-height:70vh;
 }

 .pricingDiv > div:first-child {
     position:absolute;
     top:0;
     bottom:0;
     right:0;
     background-size:20% 100%;
     background-size:cover;
     background-repeat:no-repeat;
     width:50vw;
     z-index:01;
 }

 .pricingDiv > div:last-child {
     z-index:2;
     padding:10px;
 }

 .pricingDiv > div:nth-child(2) > div {

     width:auto;
     float:right;
     background-color:white;
     padding:20px;
     z-index:2;
 }

  .pricingDiv table {
      width:100%;
      table-layout:fixed;
      letter-spacing:0.25vw;
  }

  .pricingDiv table td {
      padding:10px 2vw;
  }

  .pricingDiv table td:first-child, .pricingDiv table thead tr:last-child th:first-child {
      text-align:center;
      width:20%;
  }

  .pricingDiv table td:last-child, .pricingDiv table thead tr:last-child th:last-child {
      text-align:right;
      width:20%;
  }

  .pricingDiv table > tbody {
      letter-spacing:0.05vw;
  }

  /*.pricingDiv table thead tr:last-child th:last-child {
      width:20%;
  }*/

  .pricingDiv table thead tr:last-child > th:nth-child(2), .pricingDiv table tbody td:nth-child(2) {
      width:70%;
  }

  .pricingDiv table th {
      padding:10px;
      text-align:center;
  }

  .pricingDiv table > thead > tr:last-child {
    border-bottom:2px solid rgba(0,0,0,0.15);
  }

  .panel-collapse > .panel-body > img {
      float:right;
      max-width:20vw;
      max-height:200px;
  }

  .membpricingPage.sidebar > div, .membpricingPage.sidebar > div > h3 {
      color:white;
      padding:10px;
  }

  .membpricingPage.sidebar > div:first-child {
      border-bottom-left-radius:10px;
      border-top-left-radius:10px;      
      /*margin-bottom:20px;*/
  }

  .membpricingPage.sidebar > div {
      margin-top:20px;
  }

  .membpricingPage.sidebar > div:nth-child(2) {
      border-top-left-radius:10px;
  }

  .modal-content {
      overflow:hidden;
  }

  .mainSide h2 {
      color:var(--main-dk-green);
  }

  .mainSide h3 {
      color:var(--main-lt-green);
  }


.mainSide h4 {
    font-family:'NeuronBold';
    letter-spacing:0.5px;
} 


.membpricingPage ul li > a {
    color:white;
    text-decoration:none!important;
    transition-duration:500ms;
}

.membpricingPage ul li > a:hover {
    color:var(--warm-grey-2);
    transition-duration:300ms;
}

#membDetail td {
    padding:10px 1vw;
}

#membDetail .membDet_Features td:first-child {
    text-align:right;
    font-weight:bold;
    width:30%;
}

#membDetail .membDet_Features > tr {
    border-top:1px solid var(--warm-grey-2);
}

td.membDet_price {
    vertical-align:top;
}

.modal-body {
    overflow-y:scroll;
    max-height:50vh;
    padding:20px;
}

#feeModal h4 {
    padding:5px;
    font-weight:bold;
}

#feeModal .modalTBL {
    /*table-layout:fixed;*/
    /*width:100%;*/
    margin-left:auto;
    margin-right:auto;
    min-width:300px;
    width: 20vw;
}

#feeModal .modalTBL td {
    padding-bottom:5px;
}

#feeModal .modalTBL tbody > tr:last-child > td {    
    padding-bottom:30px;
}

#feeModal .modalTBL td:first-child {
    padding-left:5rem;
}

#feeModal .modalTBL td:first-child::after {
    content:"";
    display:block;
    border-bottom:1px dotted lightgrey;
    height:1px;
}

#feeModal .modalTBL td:last-child {
    text-align:right;
}

#feeModal .modalTBL th {
    font-size       :large;
    text-transform  :uppercase;
    letter-spacing  :1px;
}

@media (max-width: 767px) {
    .comparisonTable thead th {
          font-size:xx-small;
          letter-spacing:normal;
          vertical-align:auto!important;
    }

      .comparisonTable th:first-child {
          font-size:medium;
          color:var(--main-dk-green);
      }

      .comparisonTable th:nth-child(1n+2) {
          background-color:var(--main-dk-green);
      }

      .comparisonTable thead > tr > th >.greenBGColour {
          background:none;
          box-shadow:none!important;
          border-radius:0!important;
          height:100%!important;
          width:100%!important;
      }

      .comparisonTable td:first-child {
          font-size:xx-small;
      }
      .comparisonTable td:nth-child(1n+2){
          font-size:medium;
      }

      .comparisonTable td:first-child, .comparisonTable th:first-child {
          width:25%;
          font-family:'NeuronBold';
      }

      .FeatImg {
          float:right;
          width:100%;
          max-width:40%;
      }

      .pricingDiv table {
          font-size:small;
      }

      .pricingDiv > div:first-child {
          width:100%;
      }

      .membpricingPage {
          padding:0;
          overflow:hidden;
      }

      .membpricingPage .panel-title button {
          font-size:large;
          padding:5px;
      }

      .membpricingPage .panel-body > p {
          font-size:smaller;
          text-align:justify;
          letter-spacing:normal;
      }

      .membpricingPage.sidebar > div {
          border-radius:0!important;
          margin:0!important;
      }

      .panel-collapse > .panel-body > img {
          margin:5px;
          max-width:30vw;
      }

      #accordion a {
          font-size:x-small;
          font-weight:bold;
          padding:1px;
      }      

      .comparisonTable tbody > tr:nth-last-child(2) > td {
          font-family:'NeuronBold';
          font-size:12px;
      }

      .comparisonTable tbody > tr:not(:last-child) > td {
          border-left:1px solid rgba(0,0,0,0.05);
      }

    #feeModal .modalTBL {
        table-layout:fixed;
        width:100%;
        min-width:unset;
    }

    #feeModal .modalTBL td:first-child {
        padding-left:1rem;
        font-size:medium;
    }

    #feeModal .modal-body {
        padding:5px;
    }

    #feeModal .modalTBL th {
        font-size:medium;
    }
  }

@media (min-width: 768px) {      
      .membpricingPage.sidebar {
          font-size:large;
      }

    #feeModal {
        font-size:large;
    }
}

  @media (min-width: 768px) and (max-width: 991px) {
      .comparisonTable td:first-child {
          font-size:small;
      }

      .comparisonTable td:nth-child(1n+2) {
          font-size:xx-large;
      }

      .membpricingPage.sidebar {
          padding:0;
      }

      .membpricingPage.sidebar > div {
          border-radius:0!important;
      }

      .membpricingPage ul li {
          padding:2px;
          font-size:small;
          font-family:'NeuronBold';
          letter-spacing:1px
      }
  }

  @media (min-width: 1310px) { 
    .comparisonTable thead th {
        position            :relative;
    }

    .comparisonTable thead th:nth-child(1n+2) > button {
         position           :absolute;
         top:0;bottom:0;
    }
}