textarea{
  border:none;
  text-align: left;
  resize: none;
  overflow: hidden;
  height:14px;
  color:#212438;
  font-weight: 900;
  outline: none;
  background: transparent;
  line-height: 13px;
}
.text
{
text-align: left;
color:white;
font-weight: bolder;
}
.title {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
  font-size: .75em;
}
textarea::placeholder 
{
 font-family: Manrope;
 color:white;
 font-weight: normal;
 text-align: left;
}
table#Billformtable
{
  background-color: #8c9fff;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  border-radius: 30px;
  padding-left:20px;
}
.table-container 
{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
table#Billformtable td.text
{
  width:320px;
}
table#Billformtable td.UnitSelectedtext {
  max-width:260px;
  width:260px;
}
table#Billformtable textarea
{
  width:260px;
}
* {
    box-sizing: border-box;
  }
  .divcenter
  {
    height:300px;
    width:600px;
    background-color: #8c9fff;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 2em;
    align-items: center;
    padding:20px;
  }
  #overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }
  .columns {
    float: left;
    width: 33.3%;
    padding: 8px;
    /*transform:translate(50%,5%);*/
    transform:translate(30vw,5%);
  }
  .columns-offerings {
    float: left;
    width: 25%;
    padding: 8px;
    transform:translate(50%,5%);
  }
  
  .price {
    list-style-type: none;
  /*  border: 1px solid #eee;*/
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  
  .price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
  }
  
  .price .header {
/*    background-color: #111;*/
    color: white;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .price li {
    border-bottom: 1px solid #212438;
    border-left: 1px solid #212438;
    border-right: 1px solid #212438;
    border-top: 1px solid #212438;
    padding: 20px;
    text-align: center;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li.smaller
  {
height:1px;
border:none;
  }
  .bolder
  {
    font-weight: bolder;
  }
  .price .par1 {
    background-color:#2f3452;
  }
  .price .par2tint {
    background-color:#e8ebff;
    font-size: 20px;
  }
  .price .par2
  {
    background-color: rgba(104, 100, 209,.2);
    font-size: 20px;
  }
  .price .par3 {
    background-color:#6864d1;
    font-size: 20px;
  }
  .price .par4 {
    background-color:#ff5719;
  }
  .par4
  {
    background-color:#ff5719;
  }
  .price .par0 {
    background-color:#212438;
  }
  
  .button {
    background-color: rgba(104, 100, 209,1.0);
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border-radius: 47px;
    padding-bottom: 12px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    padding-top: 12px !important;
  }
  .smaller
  {
   padding-top: 8px !important;
   padding-bottom: 8px !important;
  }
  #extraspace
  {
    display:flex;
    height:130px;
    width:100%;
  }
  .centertext
  {
    text-align: center;
  }

  table#offering {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%; /* Set a maximum width for the table */
    margin: 20px auto; /* Center the table on the page */
}
#offering td.noleftborder
{
  border-left: none;
}
 #offering td {
    border: 1px solid lightgray;
    padding: 0px;
    text-align: left;
    padding-left:5px;
}
#offering td:nth-child(2), #offering th:nth-child(2) {
  background-color: rgba(104, 100, 209,.2);
}
#offering td.noborder
{
  border: none;
}

.main {
  position: relative;
  padding-left: 45px;
  cursor: pointer;
  font-size: 50px;
}
h1 {
  color: lightgray;
}
input[type=checkbox] {
  visibility: hidden;
}
.check {
  position: absolute;
  top: 25%;
  left: calc(50% - 10px);
  height: 25px;
  width: 25px;
  background-color: transparent;
}
.main input:active ~ .check {
  background-color: white;
}
.main input:checked ~ .check {
  background-color: transparent;
}
.check:after {
  content: "";
  position: absolute;
  display: none;
}
.main input:checked ~ .check:after {
  display: block;
}
.xstyle
{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  font-weight: 900;
  font-size: 20px;
}
.main .check:after {
  left:8px;
  bottom: 5px;
  width: 6px;
  height: 12px;
  border: solid green;
  border-width: 0 4px 4px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
  @media only screen and (max-width: 450px)
  {
 img.bklogo
 {
  width:unset;
  position: absolute;
  top:2vh;
  right:13vh;
 }
 img
 {
  max-height: 10%;
 }
 p.logo
 {
  display: unset;
 }
  }
  @media only screen and (max-width: 600px) {
    table#Billformtable td.text,table#NStoreformtable td.text
    {
      width:120px;
    }
    table#Billformtable td.UnitSelectedtext,table#NStoreformtable td.UnitSelectedtext
    {
      max-width:230px;
      width:230px;
    }
    table#Billformtable textarea,table#NStoreformtable textarea
    {
      width: 230px;
    }
    .columns {
      width: 100%;
      transform:unset;
    }
    .centernav
    {
     margin-left:unset;
    }
    .columns-offerings {
      width: 100%;
      transform:unset;
    }
    #extraspace
    {
        display: none;
    }
    .price li
    {
    height:70px;
    }
    li.smaller
    {
    height:1px;
    border:none;
    }
    #page-header p.tagline
    {
      left:25%;
      top:10vh !important;
    }
    .divcenter
    {
     height:200px;
     width:100%;
     font-size:1.1em;
    }
  }
  @media only screen and (min-width: 768px) 
  {
    #page-header p.tagline
    {
      left:25%;
      top:10vh !important;
    }
    .price li 
    {
    height:100px;
    }
    div.columns-offerings ul.price li.header
    {
    font-size: 16px;
    }
    .columns-offerings {
      width: 28%;
      transform:translate(30%,5%);
    }
    .centernav
    {
      margin-left: 10vh;
    }
  }
  @media only screen and (min-width: 850px) 
  {
    #page-header p.tagline
    {
      left:15%;
      top:25vh !important;
    }
    .price li 
    {
    height:100px;
    }
    li.smaller
    {
    height:1px;
    border:none;
    }
    .centernav
    {
      margin-left: 30vh;
    }
  }
  @media only screen and (min-width: 1200px) 
{
  #page-header p.tagline
  {
    left:20%;
    top:20vh !important;
  }
  .centernav
  {
    margin-left: 40vh;
  }
}
@media only screen and (min-width: 1500px) 
{
  .centernav
  {
    margin-left: 60vh;
  }
}

    @media screen and (orientation:landscape)  and (max-width:850px)
{
  #page-header p.tagline
  {
    top: 18vh;
  }
  }