@-webkit-keyframes myanimation { from { left: 0%; } to { left: 50%; } } .checkout-wrap { color: #444; font-family: 'PT Sans Caption', sans-serif; margin: 40px auto; max-width: 1200px; position: relative; } ul.checkout-bar { margin: 0 20px; } ul.checkout-bar li { color: #ccc; display: block; font-size: 15px; font-weight: 600; padding: 14px 20px 14px 80px; position: relative; } ul.checkout-bar li:before { -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background: #ddd; border: 2px solid #FFF; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 700; left: 20px; line-height: 37px; height: 35px; position: absolute; text-align: center; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); top: 4px; width: 35px; z-index: 3; } ul.checkout-bar li.active { color: #8bc53f; font-weight: bold; } ul.checkout-bar li.active:before { background: #8bc53f; z-index: 5; } ul.checkout-bar li.visited { background: #ECECEC; color: #57aed1; z-index: 5; } ul.checkout-bar li.visited:before { background: #57aed1; z-index: 5; } ul.checkout-bar li:nth-child(1):before { content: "1"; } ul.checkout-bar li:nth-child(2):before { content: "2"; } ul.checkout-bar li:nth-child(3):before { content: "3"; } ul.checkout-bar li:nth-child(4):before { content: "4"; } ul.checkout-bar li:nth-child(5):before { content: "5"; } ul.checkout-bar li:nth-child(6):before { content: "6"; } ul.checkout-bar a { color: #57aed1; font-size: 16px; font-weight: 600; text-decoration: none; } @media all and (min-width: 800px) { #product_pdf_button{ display:none; } .checkout-bar li.active:after { -webkit-animation: myanimation 3s 0; background-size: 35px 35px; background-color: #8bc53f; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); content: ""; height: 15px; width: 100%; left: 50%; position: absolute; top: -50px; z-index: 0; } .checkout-wrap { margin: 80px auto; } ul.checkout-bar { -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); background-size: 35px 35px; background-color: #EcEcEc; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); border-radius: 15px; height: 15px; margin: 0 auto; padding: 0; position: relative; width: 100%; } ul.checkout-bar:before { background-size: 35px 35px; background-color: #57aed1; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); border-radius: 15px; content: " "; height: 15px; left: 0; position: absolute; width: 10%; } ul.checkout-bar li { display: inline-block; margin: 50px 0 0; padding: 0; text-align: center; width: 19%; } ul.checkout-bar li:before { height: 45px; left: 40%; line-height: 45px; position: absolute; top: -65px; width: 45px; z-index: 2; } ul.checkout-bar li.visited { background: none; } ul.checkout-bar li.visited:after { background-size: 35px 35px; background-color: #57aed1; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); content: ""; height: 15px; left: 50%; position: absolute; top: -50px; width: 100%; z-index: 2; } } table#cart thead th{ font-weight: 600; font-size: 16px; border-top:0px; } table#cart tbody td { font-size: 14px; } table#cart tbody td h4 { text-align: left; font-weight: 600; font-size: 16px; } table#cart tbody td p { text-align: justify; padding-right: 10px; line-height: 18px; font-size: 14px; } table#cart tbody td button.btn-danger{ font-size: 13px; } table#cart tbody td button.btn-danger{ background: #de0519; border-radius: 5px; font-size: 13px; } table#cart tbody td button.btn-danger:hover{ background: #ee3207; } table#cart td a.btn-warning{ background: #e89116; border-radius: 5px; font-size: 14px; color: #ffffff; } table#cart td a.btn-warning:hover{ background: #bd740d; } table#cart td a.btn-block{ background: #398439; border-radius: 5px; font-size: 14px; } table#cart td a.btn-block:hover{ background: #269c26; } @media screen and (max-width: 600px) { table#cart tbody td .form-control { width: 20%; display: inline !important; } table#cart tbody td.actions { text-align: center; } .actions .btn { width: 36%; margin: 0.5em 0; margin-top:-30px; } .actions .btn-info { float: left; } .actions .btn-danger { } table#cart thead { display: none; } table#cart tbody td { display: block; padding: .6rem; min-width: 320px; } table#cart tbody tr td:first-child { background: #333; color: #fff; } table#cart tbody td:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 8rem; } table#cart tbody td.actions:before { content: attr(data-th); font-weight: bold; display: inline-block; width: 100%; } table#cart tfoot td { display: block; } table#cart tfoot td .btn { display: block; } } @media screen and (max-width: 800px) { #product_gallery{ display:none; } #product_pdf_iframe{ display:none; } .cd-form{ padding-left: 15% !important; padding-right: 15% !important; } } .menu-cart-badge { background-color: red; border-radius: 10px; color: white; display: inline-block; font-size: 12px; line-height: 1; padding: 3px 7px; text-align: center; vertical-align: middle; white-space: nowrap; } .shopping-cart { background: white; width: 320px; position: absolute; top: 30px; right: -10px; border-radius: 3px; padding: 20px; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important; -webkit-transition: all .2s ease; transition: all .2s ease; opacity: 0; -webkit-transform-origin: right top 0; -webkit-transform: scale(0); transform-origin: right top 0; transform: scale(0); } .shopping-cart .lighter-text { color: #ABB0BE; } .shopping-cart .main-color-text { color: #ED1C24; } .shopping-cart #addtocart { width: 250px; } .shopping-cart.active { opacity: 1; -webkit-transform-origin: right top 0; -webkit-transform: scale(1); transform-origin: right top 0; transform: scale(1); z-index: 999999; padding-top: 10px; } .shopping-cart .shopping-cart-header { border-bottom: 1px solid #E8E8E8; padding-bottom: 45px; } .shopping-cart .shopping-cart-header .shopping-cart-total { float: right; font-size: 17px; } .shopping-cart .shopping-cart-items { padding-top: 20px; } .shopping-cart .shopping-cart-items li { margin-bottom: 18px; } .shopping-cart .shopping-cart-items img { float: left; margin-right: 12px; max-width: 70px; max-height: 70px; } .shopping-cart .shopping-cart-items .item-name { display: block; font-size: 16px; } .shopping-cart .shopping-cart-items .item-detail { display: block; font-size: 12px; text-overflow: ellipsis; overflow: hidden; } .shopping-cart .shopping-cart-items .item-price { color: #ED1C24; margin-right: 8px; } .shopping-cart .shopping-cart-items .item-quantity { color: #ABB0BE; } .shopping-cart:after { bottom: 100%; left: 89%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: white; border-width: 8px; margin-left: -8px; } .shopping-cart .cart-icon { color: #515783; font-size: 24px; margin-right: 7px; float: left; } .shopping-cart .button { background: #398439; color: white; text-align: center; padding: 12px; text-decoration: none; display: block; border-radius: 3px; font-size: 16px; margin: 25px 0 15px 0; text-transform: uppercase; } .shopping-cart .button:hover { background: #f87f1b; } .shopping-cart .button i { padding-left: 5px; } .cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher::after { clear: both; content: ""; display: table; } .cd-user-modal-container .cd-switcher { list-style-type: none; padding: 0; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #ED1C24; color: white; text-transform: uppercase; font-size: 17px; font-weight: 600; } .cd-user-modal-container .cd-switcher a.selected { background: #FFF; color: #505260; } @media only screen and (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher a { height: 70px; line-height: 70px; } } .cd-form { padding: 1.0em; } .cd-form .fieldset { position: relative; margin: 1.0em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* replace text with an icon */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } .cd-form label.cd-username { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-email.svg"); } .cd-form label.cd-phone { background-image: url("http://www.sdssolution.net/images/phone_icon_top.png"); } .cd-form label.cd-password { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 7px 20px 7px 50px; } .cd-form textarea.has-padding { padding: 9px 20px 9px 50px; border-radius: 10px; border: 1px #c1bebe solid !important; width: 100%; height: 150px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input[type=password] { /* space left for the HIDE button */ padding-right: 65px; } .cd-form input[type=submit] { padding: 16px 0; cursor: pointer; background: #398439; color: #FFF; font-weight: 600; font-size: 17px; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .no-touch .cd-form input[type=submit]:hover, .no-touch .cd-form input[type=submit]:focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* prevent click and touch events */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* triangle */ content: ''; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-bottom: 8px solid rgba(215, 102, 102, 0.9); border-left: 8px solid transparent; border-right: 8px solid transparent; } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media only screen and (min-width: 600px) { .cd-form { padding: 1.5em; } .cd-form .fieldset { margin: 1em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form input.has-padding { padding: 7px 20px 7px 50px; background: #f6f5f5; border-radius: 10px; border: 1px #c1bebe solid !important; } .cd-form textarea.has-padding { padding: 11px 20px 11px 50px; background: #f6f5f5; border-radius: 10px; border: 1px #c1bebe solid !important; width: 100%; height: 150px; } .cd-form input[type=submit] { padding: 11px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* form X button on top right */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/148866/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; } .cd-form .button { background: #398439; color: white; text-align: center; padding: 12px; text-decoration: none; display: block; border-radius: 3px; font-size: 16px; margin: 25px 0 15px 0; text-transform: uppercase; } .cd-form .button:hover { background: #f87f1b; } .cd-form .button i { padding-left: 5px; } .shopping-cart .clearfix:after { content: ""; display: table; clear: both; } .dot_red{ position: relative; top: -1.5px; color: #c20f1b; font-size: 40px; line-height: 1px; } .dot_red_summary{ position: relative; top: -2.2px; color: #c20f1b; font-size: 40px; line-height: 1px; }