/***
User Profile Sidebar by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

/***
Content
***/
.content {
    padding: 30px 0;
}

/***
Pricing table
***/
.pricing {
  position: relative;
  margin-bottom: 15px;
  border: 3px solid #eee;
}

.pricing-active {
  border: 3px solid #262248;
  margin-top: -10px;
  box-shadow: 7px 7px rgba(172, 10, 0, 0.2); 
}

.pricing:hover {
  border: 3px solid #262248;
}

.pricing:hover h4 {
  color: #262248;
}

.pricing-head {
  text-align: center;
}

.pricing-head h3,
.pricing-head h4 {
  margin: 0;
  line-height: normal;
}

.pricing-head h3 span,
.pricing-head h4 span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  font-style: italic;
}

.pricing-head h3 {
  font-weight: 300;
  color: #fafafa;
  padding: 12px 0;
  font-size: 27px;
  background: #262248;
  border-bottom: solid 1px #8C3A31;
}

.pricing-head h4 {
  color: #697D9E;
  padding: 5px 0;
  font-size: 54px;
  font-weight: 300;
  background: #C8D6E2;
  border-bottom: solid 1px #f5f9e7;
}

.pricing-head-active h4 {
  color: #262248;
}

.pricing-head h4 i {
  top: -8px;
  font-size: 28px;
  font-style: normal;
  position: relative;
}

.pricing-head h4 span {
  top: -10px;
  font-size: 14px;
  font-style: normal;
  position: relative;
}

/*Pricing Content*/
.pricing-content li {
  color: #888;
  font-size: 12px;
  padding: 7px 15px;
  border-bottom: solid 1px #CC9595;
}

/*Pricing Footer*/
.pricing-footer {
  color: #777;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  padding: 0 20px 19px;
}

/*Priceing Active*/
.price-active,
.pricing:hover {
  z-index: 9;
}

.price-active h4 {
  color: #262248;
}

.no-space-pricing .pricing:hover {
  transition: box-shadow 0.2s ease-in-out;
}

.no-space-pricing .price-active .pricing-head h4,
.no-space-pricing .pricing:hover .pricing-head h4 {
  color: #262248;
  padding: 15px 0;
  font-size: 80px;
  transition: color 0.5s ease-in-out;
}

.yellow-crusta.btn {
  color: #FFFFFF;
  background-color: #941e27;
}
.yellow-crusta.btn:hover,
.yellow-crusta.btn:focus,
.yellow-crusta.btn:active,
.yellow-crusta.btn.active {
    color: #FFFFFF;
    background-color: #9C2B34;
}
.modal-header-primary {
    color:#fff;
    padding:7px 12px;
    border-bottom:1px solid #eee;
    background-color: #262248;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
}
.stepwizard-step p {
    margin-top: 10px;    
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;     
    width: 100%;
    position: relative;
}
#btn-comp 
{
  width: 44%!important;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
    
}

.stepwizard-step {    
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
form input[type="text"], form textarea
{
  color: #000;
}
.openpay div.logo {
    font-size: 12px;
    font-weight: 400;
 
}
.openpay div.shield {
    background-image: url("../security.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    font-size: 12px;
    font-weight: 400;
    margin-left: 20px;
    padding: 20px 0 0 40px;
    width: 200px;
}
.card-expl {
    float: left;
    height: 80px;
    margin: 20px 0;
    width: 800px;
}
.card-expl div {
    background-position: left 45px;
    background-repeat: no-repeat;
    height: 70px;
    padding-top: 10px;
}
.table2 > tbody > tr > td {
     vertical-align: middle;
}
.modal.large {
    width: 50%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}
#planes{
  width: 80%;
}

@media only screen and (max-width : 1200px) {
   #primary .modal-dialog
      {
        width: 65%;
      }
      #lastbar a
      {
        width: 100%;
      }
      #planes
      {
        max-width: 80%;
      }

}

@media only screen and (max-width : 979px) {
   #primary .modal-dialog
      {
        width: 65%;
      }
      #lastbar a
      {
        width: 100%;
      }
      #planes
      {
        max-width: 80%;
      }

}

@media only screen and (max-width : 767px) {
    #primary .modal-dialog
      {
        width: 65%;
      }
      #lastbar a
      {
        width: 100%;
      }
      #planes
      {
        max-width: 80%;
      }

}

@media only screen and (max-width : 480px) {
    #primary .modal-dialog
      {
        width: 95%;
        margin-left: 1px;
      }
   
        #lastbar a
      {
        width: 100%;
      }
      #plan
      {
        width: 120%;
        margin-left: -45px;
      }


}

@media only screen and (max-width : 320px) {
    #primary .modal-dialog
      {
        width: 95%;
        margin-left: 2%;
      }
    #planes{
        width: 110%;
      }
        #lastbar a
      {
        width: 80%;
      }
       #plan
      {
        width: 160%;
        margin-left: -60px;
      }

}