.pd-0 {padding: 0;}
.pd-1 {padding: 10px;}
.pd-2 {padding: 20px;}
.pd-3 {padding: 30px;}
.pd-4 {padding: 40px;}
.pd-5 {padding: 50px;}
.pd-6 {padding: 60px;}
.pd-7 {padding: 70px;}
.pd-8 {padding: 80px;}
.pd-9 {padding: 90px;}
.pd-10 {padding: 100px;}

.pd-t-0 {padding-top: 0;}
.pd-t-1 {padding-top: 10px;}
.pd-t-2 {padding-top: 20px;}
.pd-t-3 {padding-top: 30px;}
.pd-t-4 {padding-top: 40px;}
.pd-t-5 {padding-top: 50px;}
.pd-t-6 {padding-top: 60px;}
.pd-t-7 {padding-top: 70px;}
.pd-t-8 {padding-top: 80px;}
.pd-t-9 {padding-top: 90px;}
.pd-t-10 {padding-top: 100px;}

.pd-b-0 {padding-bottom: 0;}
.pd-b-1 {padding-bottom: 10px;}
.pd-b-2 {padding-bottom: 20px;}
.pd-b-3 {padding-bottom: 30px;}
.pd-b-4 {padding-bottom: 40px;}
.pd-b-5 {padding-bottom: 50px;}
.pd-b-6 {padding-bottom: 60px;}
.pd-b-7 {padding-bottom: 70px;}
.pd-b-8 {padding-bottom: 80px;}
.pd-b-9 {padding-bottom: 90px;}
.pd-b-10 {padding-bottom: 100px;}

.mr-0 {margin: 0;}
.mr-1 {margin: 10px;}
.mr-2 {margin: 20px;}
.mr-3 {margin: 30px;}
.mr-4 {margin: 40px;}
.mr-5 {margin: 50px;}
.mr-6 {margin: 60px;}
.mr-7 {margin: 70px;}
.mr-8 {margin: 80px;}
.mr-9 {margin: 90px;}
.mr-10 {margin: 100px;}

.mr-t-0 {margin-top: 0;}
.mr-t-1 {margin-top: 10px;}
.mr-t-2 {margin-top: 20px;}
.mr-t-3 {margin-top: 30px;}
.mr-t-4 {margin-top: 40px;}
.mr-t-5 {margin-top: 50px;}
.mr-t-6 {margin-top: 60px;}
.mr-t-7 {margin-top: 70px;}
.mr-t-8 {margin-top: 80px;}
.mr-t-9 {margin-top: 90px;}
.mr-t-10 {margin-top: 100px;}

.mr-b-0 {margin-bottom: 0;}
.mr-b-1 {margin-bottom: 10px;}
.mr-b-2 {margin-bottom: 20px;}
.mr-b-3 {margin-bottom: 30px;}
.mr-b-4 {margin-bottom: 40px;}
.mr-b-5 {margin-bottom: 50px;}
.mr-b-6 {margin-bottom: 60px;}
.mr-b-7 {margin-bottom: 70px;}
.mr-b-8 {margin-bottom: 80px;}
.mr-b-9 {margin-bottom: 90px;}
.mr-b-10 {margin-bottom: 100px;}

@media (max-width:768px){
  .xs-pd-0 {padding: 0;}
  .xs-pd-1 {padding: 10px;}
  .xs-pd-2 {padding: 20px;}
  .xs-pd-3 {padding: 30px;}
  .xs-pd-4 {padding: 40px;}
  .xs-pd-5 {padding: 50px;}
  .xs-pd-6 {padding: 60px;}
  .xs-pd-7 {padding: 70px;}
  .xs-pd-8 {padding: 80px;}
  .xs-pd-9 {padding: 90px;}
  .xs-pd-10 {padding: 100px;}

  .xs-pd-t-0 {padding-top: 0;}
  .xs-pd-t-1 {padding-top: 10px;}
  .xs-pd-t-2 {padding-top: 20px;}
  .xs-pd-t-3 {padding-top: 30px;}
  .xs-pd-t-4 {padding-top: 40px;}
  .xs-pd-t-5 {padding-top: 50px;}
  .xs-pd-t-6 {padding-top: 60px;}
  .xs-pd-t-7 {padding-top: 70px;}
  .xs-pd-t-8 {padding-top: 80px;}
  .xs-pd-t-9 {padding-top: 90px;}
  .xs-pd-t-10 {padding-top: 100px;}

  .xs-pd-b-0 {padding-bottom: 0;}
  .xs-pd-b-1 {padding-bottom: 10px;}
  .xs-pd-b-2 {padding-bottom: 20px;}
  .xs-pd-b-3 {padding-bottom: 30px;}
  .xs-pd-b-4 {padding-bottom: 40px;}
  .xs-pd-b-5 {padding-bottom: 50px;}
  .xs-pd-b-6 {padding-bottom: 60px;}
  .xs-pd-b-7 {padding-bottom: 70px;}
  .xs-pd-b-8 {padding-bottom: 80px;}
  .xs-pd-b-9 {padding-bottom: 90px;}
  .xs-pd-b-10 {padding-bottom: 100px;}

  .xs-mr-0 {margin: 0;}
  .xs-mr-1 {margin: 10px;}
  .xs-mr-2 {margin: 20px;}
  .xs-mr-3 {margin: 30px;}
  .xs-mr-4 {margin: 40px;}
  .xs-mr-5 {margin: 50px;}
  .xs-mr-6 {margin: 60px;}
  .xs-mr-7 {margin: 70px;}
  .xs-mr-8 {margin: 80px;}
  .xs-mr-9 {margin: 90px;}
  .xs-mr-10 {margin: 100px;}

  .xs-mr-t-0 {margin-top: 0;}
  .xs-mr-t-1 {margin-top: 10px;}
  .xs-mr-t-2 {margin-top: 20px;}
  .xs-mr-t-3 {margin-top: 30px;}
  .xs-mr-t-4 {margin-top: 40px;}
  .xs-mr-t-5 {margin-top: 50px;}
  .xs-mr-t-6 {margin-top: 60px;}
  .xs-mr-t-7 {margin-top: 70px;}
  .xs-mr-t-8 {margin-top: 80px;}
  .xs-mr-t-9 {margin-top: 90px;}
  .xs-mr-t-10 {margin-top: 100px;}

  .xs-mr-b-0 {margin-bottom: 0;}
  .xs-mr-b-1 {margin-bottom: 10px;}
  .xs-mr-b-2 {margin-bottom: 20px;}
  .xs-mr-b-3 {margin-bottom: 30px;}
  .xs-mr-b-4 {margin-bottom: 40px;}
  .xs-mr-b-5 {margin-bottom: 50px;}
  .xs-mr-b-6 {margin-bottom: 60px;}
  .xs-mr-b-7 {margin-bottom: 70px;}
  .xs-mr-b-8 {margin-bottom: 80px;}
  .xs-mr-b-9 {margin-bottom: 90px;}
  .xs-mr-b-10 {margin-bottom: 100px;}
}



.op1 {opacity:1;}
.op09 {opacity: 0.9;}
.op08 {opacity: 0.8;}
.op07 {opacity: 0.7;}
.op06 {opacity: 0.6;}
.op05 {opacity: 0.5;}
.op04 {opacity: 0.4;}
.op03 {opacity: 0.3;}
.op02 {opacity: 0.2;}
.op01 {opacity: 0.1;}

.xs-visible {visibility: hidden; display: none;}
.xs-invisible {visibility: visible;}

@media (max-width:768px){
  .xs-visible {visibility: visible; display: block;}
  .xs-invisible {visibility: hidden; display: none;}
}

.border-0 {border-width: 0;}
.border-1 {border-width: 1px;}
.border-2 {border-width: 2px;}
.border-3 {border-width: 3px;}
.border-4 {border-width: 4px;}


.btn {
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-light {color: #333 !important;}
.btn-bordered {
  background-color: transparent;
  border-width: 2px;
}
.btn-primary.btn-bordered {color: #007bff;}
.btn-primary.btn-bordered:focus, .btn-primary.btn-bordered:hover {color: white;}



body {
  font-family: Arial, sans-serif;
}

#brand-nav .navbar-brand {
  font-size: 1.125em;
  font-weight: 700;
}
  #brand-nav .navbar-brand img {
    margin: 0 15px 0 0;
  }
@media (max-width:768px){
  #brand-nav .navbar-brand, #brand-nav .navbar-text {
    margin: 0 auto;
    text-align: center;
  }
}

#blue-nav {
  font-size: 0.875em;
  font-weight: 700;
}
  #callphone {margin-right: 15px;}

#hello {
  background: #000 url(../i/hellobg2.jpg) center center no-repeat;
  background-size: cover;
  padding: 200px 0;
}
  .separ {
    background: #007bff;
    margin: 10px auto;
    width: 30px; height: 4px;
  }
@media (max-width:768px){
  #hello {padding: 80px 0 !important;}
}

#prices, #photos, #startadev {background: #EAEAEA;}
  #prices .card-footer {
    background: white;
    border-top: 2px solid #eaeaea;
  }
  #tools {
    background: #666 url(../i/toolsbg.png) center center no-repeat;
    background-size: cover;
  }
#about-tabs li {
  font-size: 0.865em;
  font-weight: 700;
}

#makeorder {
  background: #007AFF url(../i/makeorder.jpg) center left no-repeat;
  background-size: cover;
}


/* making cards responsive */
@media (max-width: 768px) {
  #whereItWorks .card-deck {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #whereItWorks .card-deck .card {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  #prices .card-deck {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #prices .card-deck .card {margin-bottom: 30px;}
  #pills-tabContent .card-deck {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  #pills-tabContent .card-deck .card {margin-bottom: 30px;}
}