/*
 * Checkout CSS
 * Author: Shopaccino
 * Link: https://shopaccino.com/
*/

@import url('https://fonts.googleapis.com/css?family=Muli:400,700');
html, body, button, input, select, textarea, p {
	font-family: 'Muli', sans-serif;
}
body {
	font-size:14px;
	background-color: #fff;
	word-wrap: break-word;
	line-height:1.6;
	font-weight:400;
	line-height:1.6;
}
body,p,b,strong {color:#505b5f;}
.body-container {
	width:100%;
	padding-right:15px;
	padding-left:15px;
	margin:0 auto;
	max-width:1140px;
}
.container {width:100%;background:none;}

    .text-cyan, .text-cyan strong {color: #31acda;}
    .bg-white { background-color: #ffffff;}
    .bg-light { background-color: #f8f8f8;}
    .my-4 {margin-top: 1.5rem !important;   margin-bottom: 1.5rem !important;}
    .p-3 {   padding: 1rem !important;}
    @media only screen and (min-width: 576px) {
        .text-sm-left {
            text-align: left !important;
        }
        .text-sm-right {text-align: right !important;}
        .d-flex {
            display: -ms-flexbox !important;
            display: flex !important;
        }
        .align-items-center {
            -ms-flex-align: center !important;
            align-items: center !important;
        }
    }
    
    .m-0 {margin: 0 !important;}
    .p-0 {padding: 0 !important;}
    .ml-3, .mx-3 {margin-left: 1rem !important;}
    .pb-4, .py-4 {padding-bottom: 1.5rem !important;}
    .pt-3, .py-3 {padding-top: 1rem !important;}
.text-primary, .btn-link, a  {
    color: #2198a1;
}

/* =================================================
    Links
   ================================================= */
	a, .btn-link,.text-primary {}
	a:focus {outline:none;}
	a:active, a:hover {outline:0; text-decoration:none;}

/* ===================================================
    Typography
   =================================================== */
	h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin-bottom:15px; margin-top:15px; line-height:1.5; color:#444; font-weight:700;}
	h1, .h1 {font-size: 2em;}
	h2, .h2 {font-size: 1.8em;}
	h3, .h3 {font-size: 1.5em;}
	h4, .h4 {font-size: 1.3em;}

/* =================================================
    Header
    ================================================= */
	header {border-bottom:solid 1px #ddd;}
	#logo { margin:1em 0;}
	#logo img {
		max-width:200px;
		margin:0 auto;
	}

/* ===================================================
    Global settings
    =================================================== */
	.clear {clear:both;}
	.font600 {font-weight:600;}
        .font400 {font-weight:400;}
	.text-black {color:#1e1e1c;}
        .text-dark {color:#1e1e1c;}
	.text-uppercase {text-transform:uppercase;}
	.page { padding-top:0.6em}

	.bg-gray{background-color:#eee;}
	.bg-gray-light {background-color:#f6f6f6;}

	.border-gray { border:solid 1px #ddd;}
	.border-solid { border-top:solid 1px #ddd; min-height:2px;}
	.border-dashed { border-top:dashed 1px #ccc; min-height:2px; margin:0.5em 0;}
	.border-none {border:none;}

	.well { background-color: #ffffff; box-shadow:none; border:solid 1px #dddddd;}
	hr { border-color:#ccc;}
        
	.flexcontainer {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	.lg-col {
	   /* This will be twice as big as the small item. */
	   -webkit-flex: 2 0 0; 
	   flex: 2 0 0; 
	}
	.sm-col {
	   -webkit-flex: 1 0 0;
	   flex: 1 0 0;
	}
	.margin0 { margin:0;}.margin0auto { margin:0 auto;}.marginbottom0 { margin-bottom:0;}.margintop10{ margin-top:10px;}.margintop15 { margin-top:1em;}.marginbottom10{ margin-bottom:10px;}.marginbottom15 { margin-bottom:1em;}
	.paddingtop15 { padding-top:1em;}.paddingbottom15 { padding-bottom:1em;}
	.field__input, .btn, .summary-details img  {border-radius:0;}
        
        .page-section { background-color: #f5f5f5;}
        
        @media screen and (min-width: 1024px) {
            .row-flex, .row-flex > div[class*='col-'] {  
               display: -webkit-box;
               display: -moz-box;
               display: -ms-flexbox;
               display: -webkit-flex;
               display: flex;
               flex:1 1 auto;
           }
           .row-flex > div[class*='col-'] {
                    margin:-.2px; /* hack adjust for wrapping */
           }

           .row-flex > div[class*='col-'] > div {
                   width:100%;
                   align-items: center;
           }
        }

/*	=================================================
	Checkout Pages
	================================================= */
        .checkout-page {
            background-image: linear-gradient(left, #f5f5f5 50%, #fff 50%);
            background-image: -o-linear-gradient(left, #f5f5f5 50%, #fff 50%);
            background-image: -moz-linear-gradient(left, #f5f5f5 50%, #fff 50%);
            background-image: -webkit-linear-gradient(left, #f5f5f5 50%, #fff 50%);
            background-image: -ms-linear-gradient(left, #f5f5f5 50%, #fff 50%);
        }
        .checkout-page .flexcontainer { background-color: #f5f5f5;}
        .checkout-hold { padding:1em 0;}
	.checkout-hold { padding-right:2em; background-color: #f5f5f5;}
        
	.blocksummary { border-left:solid 1px #ddd; padding-left:1.8em; max-width:300px; background-color: #fff;}
        .form-horizontal .radio, .form-horizontal .radio-inline { padding-top:0;}

        .stepwizard { margin-top: 10px;}
        .stepwizard-step p {margin-top: 5px; font-size: 12px; line-height: 1.4; color: #888;}
        .stepwizard-row {display: table-row;}
        .stepwizard {display: table; width: 100%; position: relative;}
        .stepwizard-row:before, .stepwizard-step.active:before, .stepwizard-step.done: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;}
        .stepwizard-step .btn-circle {
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-size: 13px;
            border-radius: 15px;
            background-color: #aaa;
            color: #fff;
            font-weight: bold;
            display: inline-block;
            z-index: 99;
            position: relative;
        }
        .stepwizard-step.done .btn-circle { background-color: #5cb85c; color: #fff;}
        .stepwizard-step.done p, .stepwizard-step.done a, .stepwizard-step.done a:hover {color: #5cb85c;}
        .stepwizard-step.done a:hover { border-bottom: solid 1px;}
        .stepwizard-step.done:before {
            background-color: #5cb85c;
            left: 0;
        }

        .stepwizard-step.active .btn-circle {background-color: #1f97a0; color: #fff;}
        .stepwizard-step.active p {color: #1f97a0;}
        .stepwizard-step.active:before {
            background-color: #1f97a0;
            left: 0;
        }

        @media only screen and (max-width: 991px) {
          .body-container {}
          .checkout-page {
                background-color: #fff;
                background-image: linear-gradient(left, #f5f5f5 50%, #f5f5f5 50%);
                background-image: -o-linear-gradient(left, #f5f5f5 50%, #f5f5f5 50%);
                background-image: -moz-linear-gradient(left, #f5f5f5 50%, #f5f5f5 50%);
                background-image: -webkit-linear-gradient(left, #f5f5f5 50%, #f5f5f5 50%);
                background-image: -ms-linear-gradient(left, #f5f5f5 50%, #f5f5f5 50%);
            }
        }
        @media only screen and (max-width: 640px) {
          .body-container { padding-left: 10px; padding-right: 10px;}
          .login-ship-details {padding: 1em;}
          .checkout-review { margin-bottom: 3em;}
        }
        @media only screen and (max-width: 521px) {
           .stepwizard-step p { font-size: 11px;}
        }

        .couponcodepanel { background: #f0f8ff;}
        .couponcodepanel input , .couponcodepanel button, .couponcodepanel button:hover { background-color: #ffffff !important; color: #000 !important;}
/* ========= login shipping panel ==========*/
        .alreadyaccount {
            float:right;
            padding:0.5em;
            padding-right: 1.5rem;
            margin-top:1.5rem;
            position: relative;
            z-index: 99;
        }
        .box-heading{
            position: relative;
            overflow: visible;
            border: 1px solid #ccc;
            padding: 1em 1.5em 1.3em 1.5em;
            margin-bottom: 1em;
            background-color:#fff;
        }
        .box-border {border:none; border-radius:5px; padding:0.5em 2em 1.5em 1.5em; border: solid 1px #ddd; margin-bottom:2em;}
        .login-ship-details {padding:1em 1.4em; border:solid 1px #ddd; min-height:270px;
        border-radius:2px; background-color: #fff;}
        .login-ship-details .edit-link {padding:4px 10px;}
        .btn-social {
            position: relative;
            padding-left: 45px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height:25px;
            margin-bottom:8px;
            text-align:center;
        }
        .btn-social > :first-child {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            line-height: 34px;
            font-size: 1.6em;
            text-align: center;
            border-right: 1px solid rgba(0,0,0,0.2);
            padding: 3px 8px;
        }
        .fa {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .fa-facebook-f::before, .fa-facebook::before {content: "\f09a";}
        .btn-google {color: #fff;background-color: #dd4b39;border-color: rgba(0,0,0,0.2);}
        .btn-google:hover {color: #fff;background-color: #c23321;border-color: rgba(0,0,0,0.2);}
        .fa-google::before {
                content: "\f1a0";
        }
        .checkout{padding-bottom:2.5em; padding-bottom:2em;}
        .checkout input[type=text], .checkout textarea, .checkout select, .checkout .form-control {
                min-height:40px;
                background:none;
                border-color:#aec2c8;
                background-color: #fff;
        }
        .checkout input[type=text]:focus, .checkout textarea:focus, .checkout select:focus, .checkout .form-control:focus {
            border-color:#2198a1;
            border-width: 2px;
            outline: none;
        }
        .checkout .btn {/*min-height:40px;*/}
        .checkout .billing-address {
                margin-top:0.5em;
        }
        #PaymentSummary { margin-top:1em;}
        #divother {display:block;}
        #divother label {width:100%}

        .divider-or-line {
            display: block;
            text-align: center;
            color: #2d2d2d;
            margin: 0 0 20px;
            font-size: 13px;
            font-weight: 400;
            position: relative;
            height: 1px;
            background: #d0d0d0;
            margin-top: 10px;
        }
        .divider-or-line .divider-or-txt {
            position: absolute;
            top: -15px;
            background: #eee;
            color: #2d2d2d;
            font-size: 13px;
            padding: 5px 10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 15px;
        }
        
        .btn-login-google img, .btn-facebook img {max-height: 55px;}


/* ========= Summary Details ==========*/
        .summary-details {padding-bottom:1em; clear:both; margin-top:2.4rem; margin-bottom:2em; background-color: #fff; border-radius:3px;}
        .summary-details img {border-radius:3px; width:70px; border:solid 1px #ddd; margin-top:4px;}
        .summary-details h3 {border-bottom:solid 1px #aec2c8; margin-top:0; padding:0.6em 0.5em; text-align:center;}
        .summary-details hr {margin:10px 0;}
        .summary-details .desc {padding-left:8px;}
        .summary-details .grand-total {text-align:right; font-weight:bold; font-size:120%;}
        .secure-logos {text-align:center; padding:2em 0; padding-bottom: 0; background-color: #fff; border-top: solid 1px #ddd;}
        .secure-logos img { margin-bottom: 15px;}
        .use-coupon {text-align:left;}
        .apply-coupon-block {
            background-color:#fffaf4;
            padding:1em;
            font-size: 12px;
            margin-top:0.5em;
            margin-bottom:0.8em;
            border: dashed 1px #f89821;
            border-radius:6px;
            color: #fff;
            
        }
        .apply-coupon-block .btn-link { font-family: 11px !important; font-weight: bold;}
	
/*  ========= Review & Pay ==========*/	
    .reviewpay {}
    .accordion-summary { font-weight:bold; border-bottom:solid 1px #ddd;}
    .accordion-summary a { color:#333}

/*  =================================================
    Form Elements Styles
    ================================================= */
        input[type=text], select, textarea, .form-control, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
                border-radius: 3px;
                min-height:35px;
                color:inherit;
                box-shadow: none;
                background:none;
                border:solid 1px #a4b7bd;
        }
        .field-form-hold { margin:0 -8px;}
        .field {width: 100%;float: left; padding: 8px;}
        .field--show-floating-label .field__input {
                padding-top: 21px;
                padding-bottom: 7px;
                padding-left:10px;
        }
        .field--show-floating-label .field__label {opacity: 1;}
        @media (min-width: 500px) {
          .field--quarter {width: 25%;}
          .field--three-quarters {width: 75%;}
          .field--third {width: 33.33333%;}
          .field--half {width: 50%;}
          .field--two-thirds {width: 66.66667%;}
        }
        .field__input-wrapper {position: relative;}
        .field__label {
                margin: 10px 2px;
                /*display: block;*/
                font-size: 0.9em;
                position: absolute;
                z-index: 0;
                top: 0;
                width:auto;
                margin-top: 0px;
                padding: 0 10px;
                color: #aaaaaa;
                -webkit-transform: translateY(3px);
                          transform: translateY(3px);
                opacity: 0;
                -webkit-transition: all .2s ease-out;
                transition: all .2s ease-out;
                font-weight:normal;
        }
        .field .field--active .field__input {
                background: red;
                -webkit-transition: opacity 0s !important;
                transition: opacity 0s !important;
        }
        .field__input {
          border-radius: 2px;
          display: block;
          width: 100%;
          padding: 14px 10px;
          color: inherit;
          font: inherit;
          margin: 0;
          -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
          border:solid 1px;
          line-height: normal;
          /*box-shadow: 0 0 0 1px #D9D9D9;*/
          -webkit-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
          border:solid 1px #aec2c8;
            position: relative;
            z-index: 1;
        }
        .field--show-floating-label .field__label { z-index: 2;}
        .field__input:focus {
                /*box-shadow: 0 0 0 1px #3f88bc;*/
                border-color:#333;
                outline: none;
        }
        .field__input--select {}
        .field__input-wrapper--select:after {
                /*position:absolute;
                right:0;
                top:12px;
                line-height:25px;
                font-family: "FontAwesome";
                content: "\f0d7";
                font-size:18px;
                color:#bbb;
                z-index:0;
                border-left:solid 1px #ccc;
                padding:0 11px 0 8px;*/
        }
        .checkout select {background: url("../img/icon-carat-dn1.png") #fff no-repeat right center;}
        .field__input-wrapper--select {background: url("../img/icon-carat-dn1.png") no-repeat right center;}
        .field__input-wrapper--select-none {background:none;}

        .select-style {
                padding: 0;
                margin: 0;
                border-radius: 2px;
                overflow: hidden;
                background-color: #bbb;
                background: url("../img/arrow-down-dark.gif") no-repeat 90% 50%;
        }
        .select-style select {
                box-shadow: none;
                background-color: transparent;
                background-image: none;
                -webkit-appearance: none;
                   -moz-appearance: none;
                                appearance: none;
                                height: 40px;
        }
        .select-style select:focus {outline: none;}
        .select-style option { padding:5px; border-bottom:1px solid gray;}

        /*---Payment Selection---*/
        .radio-block {border:solid 1px #ddd; padding:12px 15px 12px 15px; position:relative; margin-bottom:-1px; border-radius:4px;background-color:#fff;}
        .radio-block:hover {background-color:#fff;border:solid 1px #ddd; }
        .radio-block label {width:100%; color:#000;}
        .radio-block small {color:#bbb;}
        .radio-block label img {max-height:30px; margin-right:1px;}
        .radio-block label .cart-payment-li,.radio-block label .cart-payment-logo-1 {}
        @media only screen and (max-width : 767px) {
            .cart-payment-logo { margin-bottom: 0.5em; margin-top: 0.7em;}
        }
        @media only screen and (min-width : 768px) {
            .radio-block label .cart-payment-name { float: left;}
            .radio-block label .cart-payment-logo {float:right;}    
        }
        .radio-block ul.list-inline { margin: 0; padding: 0;}
        .radio-block li { padding:0;}
        .cart-payment-li, .cart-payment-logo-1 { margin-top: 6px;}
        .cart-payment-li ul {}
        /**/

        .checkbox {padding-left: 20px;}
        .checkbox label {
                display:inline-block;
                vertical-align:middle;
                position:relative;
                padding-left:15px;
        }
        .checkbox label::before {
                content: "";
                display: inline-block;
                position: absolute;
                width: 24px;
                height: 24px;
                left: 0;
                margin-left: -20px;
                border: 2px solid #1f97a0;
                border-radius: 2px;
                -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
                -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
                transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }
        .checkbox label::after {
                display: inline-block;
                position: absolute;
                width: 22px;
                height: 22px;
                left: 0;
                top: 0;
                margin-left: -20px;
                padding-left: 4px;
                font-size: 15px;
        }
        .checkbox input[type="checkbox"],
        .checkbox input[type="radio"] {
                opacity: 0;
                z-index: 1;
        }
        .checkbox input[type="checkbox"]:focus + label::before,
        .checkbox input[type="radio"]:focus + label::before {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
        }
        .checkbox input[type="checkbox"]:checked + label::after,
        .checkbox input[type="radio"]:checked + label::after {
                font-family: "FontAwesome";
                content: "\f00c";
                font-size:15px;
                color:#1f97a0;
        }
        .checkbox input[type="checkbox"]:indeterminate + label::after,
        .checkbox input[type="radio"]:indeterminate + label::after {
                display: block;
                content: "";
                width: 10px;
                height: 3px;
                background-color: #555555;
                border-radius: 2px;
                margin-left: -16.5px;
                margin-top: 7px;
        }
        .checkbox input[type="checkbox"]:disabled + label,
        .checkbox input[type="radio"]:disabled + label {
                opacity: 0.65;}
        .checkbox input[type="checkbox"]:disabled + label::before,
        .checkbox input[type="radio"]:disabled + label::before {
                background-color: #eeeeee;
                cursor: not-allowed;}
        .checkbox.checkbox-circle label::before {border-radius: 50%; }
        .checkbox.checkbox-inline {margin-top: 0;}

        .radio label {
                display: inline-block;
                vertical-align: middle;
                position: relative;
                padding-left: 30px;
        }
        .radio > label::before {
                content: "";
                display: inline-block;
                position: absolute;
                width: 20px;
                height: 20px;
                left: 0;
                border: 2px solid #1f97a0;
                border-radius: 50%;
                -webkit-transition: border 0.15s ease-in-out;
                -o-transition: border 0.15s ease-in-out;
                transition: border 0.15s ease-in-out;
        }
        .radio > label::after {
                display: inline-block;
                position: absolute;
                content: " ";
                width: 10px;
                height: 10px;
                left: 5px;
                top: 5px;
                border-radius: 50%;
                background-color:#1f97a0;
                -webkit-transform: scale(0, 0);
                -ms-transform: scale(0, 0);
                -o-transform: scale(0, 0);
                transform: scale(0, 0);
                -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
                -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
                -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
                transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }
        .radio input[type="radio"] {opacity: 0;z-index: 1;}
        .radio input[type="radio"]:focus + label::before {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
                 outline:none;
        }
        .radio input[type="radio"]:checked + label::after {
                -webkit-transform: scale(1, 1);
                -ms-transform: scale(1, 1);
                -o-transform: scale(1, 1);
                transform: scale(1, 1); 
        }
        .radio input[type="radio"]:disabled + label {opacity: 0.65;}
        .radio input[type="radio"]:disabled + label::before {cursor: not-allowed;}
        .radio.radio-inline {margin-top: 0;}
        /*.radio-info input[type="radio"] + label::after {background-color: #5bc0de;}
        .radio-info input[type="radio"]:checked + label::before {border-color: #5bc0de;}
        .radio-info input[type="radio"]:checked + label::after {background-color: #5bc0de;}*/
        .error { color:#cd4548}
        label.error {
                color: #cd4548;
                display:block;
                font-weight:normal;
                font-family:Arial, Helvetica, sans-serif;
                letter-spacing:0;
                font-size:12px; 
                line-height:18px;
                margin-top: 2px;
                padding: 0 3px 0 0;
        }
        input.error, textarea.error, select.error {border-color: #b7484a;}
        .checkout-footer { border-top:solid 1px #ddd; padding:8px 2px; text-align:center; color:#ccc;}
        .checkout-footer a { font-size:13px;}
        .btn-reviewpay { padding:0.7em 1em}
        
        @media only screen and (min-width:767px) {
           .add-address-hold .child:nth-child(2n+1){clear:left}
        }
        
    /*	=================================================
        Media CSS
        ================================================= */
        @media only screen and (max-width : 991px) {
                .lg-col { padding:0; border:none;}
                .checkout-hold { padding:0;}
                .accordion-summary {text-align:left; margin:0 auto; position:relative; z-index:2; cursor:pointer; font-size:110%;}
                .accordion-summary, .summary-open, .summary-close {
                        display:block;
                        background-color:#777777;
                        padding:6px 1em;
                        color:#ffffff;
                }
        }
        @media only screen and (max-width : 980px) {
            .summary-details {background-color:#f9f9f9; margin-top:0; padding: 1.5em;}
            .summary-open {}.summary-close {}
            .summary-details {
                    display:none;
                    position:relative;
                    z-index:1;
                    border:none;
                    -webkit-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.3);
                    -moz-box-shadow: 0 6px 4px -4px rgba(0,0,0,0.3);
                    box-shadow: 0 6px 4px -4px rgba(0,0,0,0.2);
                    margin:0 auto;
                    margin-bottom: 1em;
            }
            .summary-details td { vertical-align:top;}
            .summary-open img
            {
                -webkit-transform: translateY(-25%) rotateX(180deg);
                transform: translateY(-25%) rotateX(180deg);
                -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
                transition: transform 0.5s, opacity 0.5s;
                position: relative;
                top: 8px;
            }
            .summary-close .img
            {
                -webkit-transform: translateY(-25%) rotateX(0deg);
                transform: translateY(-25%) rotateX(0deg);
                -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
                transition: transform 0.5s, opacity 0.5s;
            }
        }
        @media only screen and (max-width : 767px) {
                .checkout-footer {background-color: #f5f5f5;}
                .checkout-footer a { border-bottom:solid 1px;}
        }
        @media only screen and (max-width : 640px) {
                #logo img { max-width:150px;}
                .alreadyaccount {float:none; padding:0; margin-bottom:0; margin-top: 0;}
                .checkout-hold .breadcrumb {margin-top: 0.5em; margin-bottom:0.2em;}
                .checkout{padding-bottom:0; padding-bottom:2em;}
                .radio-block input[type="radio"]:checked + label {}
                /*#btnStoreOrder { position: fixed; left: 0; bottom:0; width: 100%; z-index: 9; border-radius:0 }*/
        }
        @media only screen and (max-width : 540px) {
                .checkout-hold .breadcrumb { display:none;}
                .accordion-summary, .summary-details { margin-left:-15px; margin-right:-15px; border-right:none; border-left:none;}
                .summary-details .desc{ font-size: 12px; padding: 0;}
                .summary-details img { width:auto; max-width: 50px; }
                .summary-details .border-dashed { margin:0.5em 0;}
                #PaymentSummary { padding-top:0;}
        }
        @media only screen and (max-width : 480px) {
                /*.checkout button { position:fixed; bottom:0; left:0; width:100%; z-index:3; border-radius:0; padding:1em 1em;}*/
                .checkout-hold {}
                .checkout { padding:0.6em;}
                .summary-details {font-size: 12px;}
        }
        
        /* =================================================
            Fancy Addition Css
        ================================================= */
        .btn,
        .ripple,
        .breadcrumb li a,
        .edit-link
        {
                position:relative;overflow:hidden
        }
        .btn:after,
        .ripple:after,
        .breadcrumb li a:after,
        .edit-link:after
        {
                content:"";
                display:block;
                position:absolute;
                width:100%;
                height:100%;
                top:0;
                left:0;
                pointer-events:none;
                background-image:radial-gradient(circle,#000 10%,transparent 10.01%);
                background-repeat:no-repeat;
                background-position:50%;
                transform:scale(10,10);
                opacity:0;
                transition:transform .5s,opacity 1s;
        }
        .btn:active:after,
        .ripple:active:after,
        .breadcrumb li a:active:after,
        .edit-link:active:after
        {
                transform:scale(0,0);opacity:.2;transition:0s;
        }

        .footer-links ul { margin-bottom:0;}
        .ccinfo-hold { border: solid 1px #ddd; font-size: 12px; border-radius: 6px; max-width: 450px; color:#353535;}
        .ccinfo-hold h4 { margin-top: 0; padding-left: 1em; background-color: #f5f5f5; line-height: 40px; border-radius:6px 6px 0 0;}
        .ccinfo-hold .ccinfo-fields { padding: 1em;}
        .ccinfo-hold .form-group { margin-bottom: 10px;}
        .ccinfo-hold .form-group input { width: 100%;}

        .mobile-otp .otp__input {
            max-width: 60px;
            float: left;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            color: #333;
            cursor: text;
            outline: 0;
            padding: 10px 10px;
            margin-right: 10px;
            text-align: center;
            height: 45px;
        }
        .mobile-otp .otp__input:last-child { margin-right: 0;}
        .mobile-otp .otp__input:first-child {}
        .mobile-otp button {padding: 10px 2em;height: 45px;}
        
        @media only screen and (min-width : 768px) {
            .chkout-socialhold {
                position: relative;
                padding-left: 2.5em;
                border-left: dashed 1px #333;
                border-left-color: rgb(51, 51, 51);
                border-color: rgba(0,0,0,0.3);
                padding: 0.6em 0 1em 2.5em;
                margin-top: 0;
                margin-left: 1.5em;
                max-width:300px;
            }
            .chkout-socialhold:before {
                position: absolute;
                left: -18px;
                top: 32%;
                width: 35px;
                height: 35px;
                padding: 8px;
                content: 'OR';
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                border-radius: 48%;
                background-color: #ddd;
                color: #000;
                display: inline-block;
                text-align: center;
                font-weight: 600;
            }
            .chkout-socialhold .btn { text-align: left; margin-bottom: 1.5em;}
        }
        
        @media only screen and (max-width : 767px) {
            .chkout-socialhold {
                border: none;
                border-top-color: currentcolor;
                border-top-style: none;
                border-top-width: medium;
                padding: 2em 1.5em;
                margin: 0 auto;
                margin-top: 0px;
                margin-bottom: 0px;
                margin-top: 2.5em;
                margin-bottom: 2em;
                margin-top: 3em;
                border-top: dashed 1px #333;
                max-width: 450px;
                background-color: #f1f1f1;
                position: relative;
            }
            
            .chkout-socialhold:before {
                position: absolute;
                left: -18px;
                top: 34%;
               width: 35px;
                height: 35px;
                padding: 8px;
                content: 'OR';
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                border-radius: 48%;
                background-color: #ddd;
                color: #000;
                left: 50%;
                margin-left: -10px;
                top: -20px;
            }
        }
        
        .radio-block {border:solid 1px #ddd; padding:12px 15px 12px 15px;}

        .deliverypickup-panel .nav-tabs { border-bottom:none; vertical-align: top; }
        .deliverypickup-panel .nav-tabs > li > .hiddenradio, .deliverypickup-panel .nav-tabs > li > .hiddenradio:hover {margin: 0; padding: 0;border: solid 1px #ddd; border-bottom: none; border-radius: 4px 4px 0 0; }
        .deliverypickup-panel .nav-tabs > li > .hiddenradio a {line-height: 35px; color: #333; border-radius: 4px 4px 0 0; display: inline-block; padding:8px 1.5em;}
        .deliverypickup-panel .nav-tabs > li.active > .hiddenradio { background-color: #1f97a0; border-radius:4px 4px 0 0;}
        .deliverypickup-panel .nav-tabs > li.active > .hiddenradio a{color: #fff;}
        .deliverypickup-panel .nav-tabs > li > .hiddenradio span{ margin-bottom: 0;}
        .deliverypickup-panel .nav-tabs > li.active > .hiddenradio{ border: none;}
        .deliverypickup-panel .tab-pane { padding: 15px; border:solid 2px #1f97a0;}
        
       .deliverytabicon {background-image: url("../img/deliveryselection.png");margin-right: 10px;float: left;}
       .deliverypickup-panel .nav-tabs > li.active > .hiddenradio a .homeicon-sprite {
            background-position: -36px -37px;
            width: 36px;
            height: 36px;
            display: inline-block;
        }
        .homeicon-sprite {
            background-position: -36px 0;
            width: 36px;
            height: 36px;
            display: inline-block;
        }
      .deliverypickup-panel .nav-tabs > li.active > .hiddenradio a .pickup-sprite {
            background-position: 0 0;
            width: 36px;
            height: 36px;
            display: inline-block;
        }
        
        .deliverypickup-panel .radio-block:hover {background-color:#fff; border-color:#ccc; box-shadow: 0 0 6px 4px rgba(201,201,201,0.1)}
        .deliverypickup-panel .add-address-hold .active{
            border-color: #1f97a0;
            box-shadow: 0 0 6px 4px rgba(201,201,201,0.1)
         
        }
        .deliverypickup-panel .add-new-address { border: dashed 1px;display: inline-block; padding: 6px 10px; border-radius: 3px; font-size: 16px; margin-bottom: 1em;}
        .pickup-sprite {
            background-position: 0 -37px;
            width: 36px;
            height: 36px;
            display: inline-block;
        }

        /* HIDE RADIO */
        .deliverypickup-panel .nav-tabs > li > .hiddenradio [type=radio] {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
        }
       /* IMAGE STYLES */
        .deliverypickup-panel .nav-tabs > li > .hiddenradio [type=radio] + img {}
        /* CHECKED STYLES */
        .deliverypickup-panel .nav-tabs > li > .hiddenradio [type=radio]:checked + img {}
        
        
       @media only screen and (max-width : 640px) {
        .deliverypickup-panel .nav-tabs > li { width: 50%;}
        .deliverypickup-panel .nav-tabs > li > a { padding-left: 10px; padding-right: 10px;}
        
       }
       
       

       .rewardpointsection {/*position:absolute; margin-top:-140px !important; width:60%;*/}
       .btn-bordered { background: none; color: #286090;}
       @media (max-width: 767px){
        .use-coupon .btn-bordered {min-height: 45px; }
        .use-coupon .field {}
       }
       @media (max-width: 499px){
            .rewardpointsection .field--two-thirds {width: 66.66667%;}
            .rewardpointsection .field--third {width: 33.33333%;}
        }