.shopContent {width:auto; min-height: 540px } .shopContent>#product { padding-top: 40px } .shopContent>#product .buttons input[type="submit"] { transition: background-color 0.5s ease, color 0.5s ease; background-color: #fff; height: 25px; text-align: center; color: #000; border: none; border-radius: 16px; font-size: 1.1em; display: inline; box-sizing: border-box; padding: 3px 15px; border-radius: 16px; height: 32px; line-height: 22px; border:2px solid #000 } .shopContent>#product .buttons input[type="submit"]:hover { background-color: #000; color: #FFF } /********************* CATEGORIES MENU *****************************/ /* #shopCategories {float:left;width:143px;border:1px solid #7c478c;min-height:488px;background-color:#b293b9} #shopCategories ul {margin:0px;padding:0px} #shopCategories li {list-style:none;margin:0px;padding:0px;border-bottom:1px solid #7c478c} #shopCategories li a {width:133px;display:block;padding:5px;background-color:#f3eff5;color:#7e4a8d} #shopCategories li a:hover {background-color:#d9cadd;color:#8b5d99} */ /******************** RIGHT COLUMN BOXES *******************************/ /* .rightSide {float:left;margin-left:20px} .rightSide .sideBox {width:162px;border:1px solid #7c478c;padding:10px;margin-bottom:20px} .rightSide .sideBox h3 {margin-bottom:10px} */ /******SIDE BOXES LEFT OR RIGHT****************/ #sideWrapper { width: 219px; float: right } #sideWrapper .sideBox { /*border: 1px solid #AAA; border-radius: 5px;*/ /*box-shadow: 5px 5px 5px #888;*/ margin: 0px 0px 5px 0px; padding: 5px } #sideWrapper li {list-style:none;margin:0px;padding:0px;} #sideWrapper ul {margin:5px 0px 0px 0px;padding:0px} /********************* SHOPPPING CART SIDE BOX *************************/ #shoppingCart {height:90px;position:relative} #shoppingCart .links {width:163px;} #shoppingCart .links .left {float:left} #shoppingCart .links .right {float:right} /********************* SPECIALS SIDE BOX *****************************/ #shopSpecials ul {padding:0px;} #shopSpecials li {list-style:none} /********************* PRODUCTS LIST *******************************/ .products { background-color: #fff; padding: 0px 20px } .product { /*box-shadow: 5px 5px 5px #eee;*/ border: 1px solid #ccc; box-sizing: border-box; background-color: #FFF; position: relative; height:auto;position: relative;border-radius: 5px; float:left;margin:30px 30px 0px 0px;text-align:center; } .product:last-child { margin-bottom: 30px } .product .thumb a { font-size: 18px; display: block } .product .thumb a img { height: auto; max-width: calc( 100% - 2px); } .products .product { font-size: 24px } .product .height-forcer { padding-top: calc( 90% + 190px ) } @media screen and (min-width: 1201px) { .product { width:calc( 33.33% - 20px ); } .product:nth-child( 3n + 0 ) { margin:30px 0px 0px 0px; } } @media screen and (max-width: 1200px) and ( min-width: 601px ) { .product { width:calc( 50% - 15px ); } .product:nth-child( 2n + 0 ) { margin:30px 0px 0px 0px; } .product .thumb a { font-size: 16px; display: block } .products .product { font-size: 20px } .products .product .button a { font-size: 0.8em } } @media screen and (max-width: 600px) { .product { width: 100%; margin-right: 0px !important } .product .thumb a { font-size: 14px; display: block } .products .product { font-size: 16px } .product .height-forcer { padding-top: calc( 90% + 180px ) } } .product .thumb { position: absolute; top: 0px; width: 100% } .product .thumb:after { content: " "; display: block; padding-top: 100% } .product .thumb img {border-width:0px; border-radius: 5px; height: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ) } .product .info {margin-top:8px;} .product .actions {position: absolute;bottom: 15px; right: 20px; } .products .product .body-text { position: absolute; bottom: 70px; left: 20px } .products:after { display: block; clear: both; content: " " } @media screen and (min-width: 1960px) { .products { padding: 0px 0px } } #portfolio_master_container .actions { text-align: right; width: calc( 100% - 15px ) } span.strike {text-decoration:line-through;color:#000} .special {color: #870e36; font-weight: bold } /********************* PRODUCT DISPLAY ****************************/ #product .links {text-align:center;} #product .links a {font-weight:bold} #product .links .left {float:left} #product .links .right {float:right} #product .form {margin-top:20px} #product .form .label {width:140px} #product .form .buttons {margin-left:140px} #product .form label {font-weight:bold} #product .form input.number {width:50px} #product .image {float:left;width:300px} #imageMenu {width:180px;overflow:hidden;margin:10px auto} #imageMenu ul {margin:0;padding:0} #imageMenu li {margin:0;padding:0 5px;float:left;list-style:none} #mainImage {position:relative;width:300px;height:200px} #imgMain {position:absolute;left:0;top:0;z-index:2} #imgMain2 {position:absolute;left:0;top:0;z-index:1} .checkout {margin: 10px 20px;} .codered { color: #AA0000 } #product select { width: 160px } #product #lofslidecontent45 { float: left; width: 48.9%; } #product .info {float:right; width: 48%; width: calc( 50.9% - 20px ); padding: 0px 5px 0px 0px; /*border:1px solid #AAA;border-radius: 5px;*/ min-height: 280px} #product .info h2 { padding: 10px 0px } #product .lof-navigator-outer { position: absolute; right: 20px; top: 20px; z-index: 10 } #product #lofslidecontent45 .arrow-left { left: 20px } #product #lofslidecontent45 .arrow-right { right: 20px } @media screen and (min-width: 801px) { #product .lof-navigator-outer { display: block; } #product #lofslidecontent45 .arrow-left { display: none } #product #lofslidecontent45 .arrow-right { display: none } } @media screen and (max-width: 800px) { #product .lof-navigator-outer { display: none; } #product #lofslidecontent45 .arrow-left { display: block; color: #fff; background-color: rgba( 100,100,100,0.5 ); border-radius: 5px; padding: 10px } #product #lofslidecontent45 .arrow-right { display: block; color: #fff; background-color: rgba( 100,100,100,0.5 ); border-radius: 5px; padding: 10px } } @media screen and (max-width: 800px) { #product #lofslidecontent45 { float: left; width: 100%; } #product .info {float:left; width: 100%; padding: 20px 20px 0px 20px } } /********************* STAGES MENU **************************************/ .stages {margin:0px 0px 20px 20px;} .stages ul {padding:0px;float:left} .stages li {list-style:none;margin-right:10px;float:left; } .stages li a, .stages li span {display:block;padding:5px 10px;border:none;background-color:#000; border-radius: 5px; box-shadow: none; color: #FFF } .stages li a:hover, .stages li a.selected, .stages li span.selected {background-color:#666;color:#FFF} .secure {float:right} fieldset { /*border-radius: 5px; box-shadow: 5px 5px 5px #888; border:1px solid #7c478c;*/ border: none } /********************* SHOPPING CART *********************/ .shoppingCart {} .shoppingCart .cartItem {border:1px solid #7c478c;padding:15px;margin-bottom:20px} .shoppingCart .cartItem .field {float:left;margin-left:10px;max-width:120px; width: 15%; width: calc( 16.7% - 10px ) } .shoppingCart .cartItem .thumb {margin-left:0px;border:1px solid #7c478c; width: 50px; height: 50px} .shoppingCart .cartItem .productName { max-width:220px; } .cartItem input { font-size:1em;height:auto; box-shadow: none } .cartItem input.number {width:55px;} .cartItem .value {margin-top:3px;display:block} .cartItem input[name="coupon_pin"] { width: 140px } .cartItem input[type="button"] { background-color: #000; color: #FFF; border: none; height: 28px; border-radius: 0px 5px 5px 0px } #shopPopupImage {border:1px solid #7c478c} /******************** CUSTOMER DETAILS ********************/ .customerDetails .box {width:45%;padding:10px;} .customerDetails .box legend {font-size:1.17em;font-weight:bold} .customerDetails .left {margin-right:auto; float:left; min-height: 420px } .customerDetails .right {margin-left:auto; margin-right: 5px; float:right; min-height: 420px} @media screen and (max-width: 600px) { .customerDetails .right {float:left;} } .customerDetails { max-width: 1400px; margin: 0px auto } .customerDetails .extra {margin-top: 10px; margin-right: 5px;} .customerDetails .top {} .customerDetails .top .box {height:150px} .customerDetails .bottom {margin-top:20px} div.controls { margin: 5px 0px 15px } label.error {display: block; color: red} /******************** ORDER CONFIRMATION ******************/ .orderConfirmation { max-width: 1400px; margin: 0px auto } .orderConfirmation legend {font-size:1.4em;font-weight:bold; padding: 0px} .orderConfirmation td, .orderConfirmation th {text-align:left} .orderConfirmation .col1 {width:250px;} .orderConfirmation .col2 {width:100px;text-align:right} .orderConfirmation .col3 {width:100px;text-align:right} .orderConfirmation .col4 {width:100px;text-align:right;} .orderConfirmation .colspan3 {width:450px} .orderConfirmation fieldset {padding:10px;margin-bottom:10px; } .orderConfirmation .total {padding:0px 14px;margin-bottom:10px;font-weight:bold} .orderConfirmation label {font-weight:bold} /*********************** PAYMENT *************************/ #payment {margin:0px 20px} /*********CART******************/ #shopping-cart-icon { position: absolute; right: 270px; top: 26px; z-index: 100; display: none } #shopping-cart-icon.active { display: block } #shopping-cart-icon a { display: inline-block; vertical-align: middle;} #shopping-cart-icon .cart-total { display: inline-block; color: #FFF; vertical-align: middle;} #shopping-cart-icon .icon:after { content: url(/images/cart.svg); width: 35px; display: block; } /* @media screen and (max-width: 1500px) { #shopping-cart-icon { right: 20px; } } */ @media screen and (max-width: 1200px) { #shopping-cart-icon { right: 90px; top: 15px; } } .checkout .buttons a.button { padding: 0px 8px 0px 8px; } .orderConfirmation #stripe { max-width: 450px; margin: 20px 0px } .orderConfirmation #stripe #card-element { border: 1px solid #AAA; padding: 4px; border-radius: 4px } .orderConfirmation #submit { margin-top: 20px } .orderConfirmation input[name="billing-name"] { height: 35px; box-shadow: none; border-radius: 4px; width: 100%; color: #32325d; font-size: 24px; padding-left: 4px } .orderConfirmation #billing-name-errors { margin-bottom: 15px} .orderConfirmation input[name="billing-name"]::-moz-placeholder { font-size: 24px } .orderConfirmation input[name="billing-name"]:-ms-input-placeholder { font-size: 24px } .orderConfirmation input[name="billing-name"]::-webkit-input-placeholder { font-size: 24px }