/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.modal-backdrop{
    display: none;
}

.bootstrap-iso .panel-no-border {
  border: none !important;
}

.bootstrap-iso .divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.m-left-5 {
  margin-left: 5px;
}

.m-bottom-5 {
  margin-bottom: 5px !important;
}

.m-top-10 {
  margin-top: 10px !important;
}

.m-bottom-10 {
  margin-bottom: 10px !important;
}

.p-left-5 {
    padding-left: 5px !important;
}

.p-left-10 {
    padding-left: 10px !important;
}

.p-left-15 {
    padding-left: 15px !important;
}

.p-right-5 {
    padding-right: 5px !important;
}

.p-right-10 {
    padding-right: 10px !important;
}

.p-right-15 {
    padding-right: 15px !important;
}

.p-bottom-5 {
    padding-bottom: 5px !important;
}

.p-bottom-10 {
    padding-bottom: 10px !important;
}

.p-bottom-15 {
    padding-bottom: 15px !important;
}

.p-top-5 {
    padding-top: 5px !important;
}

.p-top-10 {
    padding-top: 10px !important;
}

.p-top-15 {
    padding-top: 15px !important;
}

.sk-circle {
    width: 40px;
    height: 40px;
    position: relative;
  }
  .sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  }
  .sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg); }
  .sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg); }
  .sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg); }
  .sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg); }
  .sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg); }
  .sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg); }
  .sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg); }
  .sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg); }
  .sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg); }
  .sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg); }
  .sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
  .sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }
  .sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
  .sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }
  .sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s; }
  .sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s; }
  .sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s; }
  .sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s; }
  .sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s; }
  .sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s; }
  .sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s; }
  
  @-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    } 40% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  
  @keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    } 40% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }

.bs-wizard {margin-top: 5px;}

/*Form Wizard*/
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #999; font-size: 14px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #27ae60; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #2ecc71; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #27ae60;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/

.topidea-add-more-btn{float: right;}
.topidea_cart_remove_item_nav_cart{margin-top: 25px; margin-right: 8px;}

@media screen and (min-width: 320px) and (max-width: 768px){
    /*For mobile hamburger icon*/
    body #et_mobile_nav_menu{
        display: block !important;
        position: inherit !important; 
        background: transparent;
    }
    
    #page-container header .mobile_menu_bar{
        display: block !important;
    }
    
    body #et_mobile_nav_menu .mobile_menu_bar::before{
        color: #2ea3f2 !important;
    }/*End*/
}

@media only screen and (min-width: 480px) and (max-width: 653px){
    .topidea-checkout-btn, .topidea-clear-cart-btn, glyphicon-trash{width: 46%; margin-bottom: 5px !important;}
    /*.topidea-add-coupon-btn{margin-right: 15px;}*/
    .topidea-add-more-btn, .topidea-add-coupon-btn{width: 46%;}
    .topidea-screenshot-btn{width: 50% !important; margin-top: 10px; margin-right: 25%;}
}

@media only screen and (min-width: 360px) and (max-width: 374px){
    .col-xs-2{
        width: 15.84% !important;
    }
}

@media only screen and (max-width: 480px){
    #quick-order-form .col-md-2.pull-right{width: 100%;}
    .topidea-checkout-btn{ margin-right: 8px;}
    .m-left-5{display: grid !important}
    .btn{padding: 6px 5px !important;}
    .topidea-checkout-btn, .topidea-clear-cart-btn, glyphicon-trash{width: 46%; margin-bottom: 5px !important;}
    #et-top-navigation .top_links .menu li{padding-right: 23px;}
    .top_links>.inner_div>p{padding-right: 0px;}
    .topidea-add-coupon-btn{margin-right: 8px;}
    .topidea-add-more-btn, .topidea-add-coupon-btn{width: 46%;}
    #quick-order-form .col-md-2.pull-right{float: unset !important;text-align: center;}
    .topidea-shipping div.col-md-12{font-size: 96% !important;}
    .topidea-screenshot-btn{width: 50% !important; margin-top: 10px; margin-right: 25%;}
    
    /*For responsive Step 1-5*/
    .row.bs-wizard{ margin-right: -58px; margin-left: -50px;}
    .col-xs-offset-1{margin-left: unset !important;}
    
    /*For Step 1 Order Page*/
    #step1-1 {display: table;}
    #step1-2 {display: table;}
    #step1-3 {display: inline-table;}
    #step1-4 {display: table;}
    #step1-5 {display: table;}
    #step1-3 .bs-wizard-info{padding-right: 3px !important;}
    
    /*For Step 2 Cart Page*/
    #step2-1 {display: table;}
    #step2-2 {display: table;}
    #step2-3 {display: inline-table;}
    #step2-4 {display: table;}
    #step2-5 {display: table;}
    #step2-3 .bs-wizard-info{padding-right: 3px !important;}
    
    /*For Step 3 Checkout Page*/
    #step3-1 {display: table;}
    #step3-2 {display: table;}
    #step3-3 {display: inline-table;}
    #step3-4 {display: table;}
    #step3-5 {display: table;}
    #step3-3 .bs-wizard-info{padding-right: 3px !important;}
    
    /*For Step 4 Shipping Page*/
    #step4-1 {display: table;}
    #step4-2 {display: table;}
    #step4-3 {display: inline-table;}
    #step4-4 {display: table;}
    #step4-5 {display: table;}
    .topidea-shipping .col-md-12:first-child{padding-right: unset !important; padding-left: unset !important;}
    #step4-3 .bs-wizard-info{padding-right: 3px !important;}
    
    /*For Step 5 Payment Page*/
    #step5-1 {display: table;}
    #step5-2 {display: table;}
    #step5-3 {display: inline-table;}
    #step5-4 {display: table;}
    #step5-5 {display: table;}
    .topidea_checkout_payment .col-md-12{padding-right: 10px !important; padding-left: 10px !important;}
    #step5-3 .bs-wizard-info{padding-right: 3px !important;}
}

.default-address{
    color:white;
    background-color: #27ae60;
}