/*:: Less
----------------------------------------------- */
/* Light:300, Regular:400, Semibold:600 */
.transition-all {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.transition-all-fast {
-webkit-transition: all 0.0625s ease-out;
-moz-transition: all 0.0625s ease-out;
-ms-transition: all 0.0625s ease-out;
-o-transition: all 0.0625s ease-out;
transition: all 0.0625s ease-out;
}
.transition-all-slow {
-webkit-transition: all 0.75s ease-out;
-moz-transition: all 0.75s ease-out;
-ms-transition: all 0.75s ease-out;
-o-transition: all 0.75s ease-out;
transition: all 0.75s ease-out;
}
.transition-border {
-webkit-transition: border-color 0.25s ease-out;
-moz-transition: border-color 0.25s ease-out;
-ms-transition: border-color 0.25s ease-out;
-o-transition: border-color 0.25s ease-out;
transition: border-color 0.25s ease-out;
}
.transition-border-color-fast {
-webkit-transition: border-color 0.0625s ease-out;
-moz-transition: border-color 0.0625s ease-out;
-ms-transition: border-color 0.0625s ease-out;
-o-transition: border-color 0.0625s ease-out;
transition: border-color 0.0625s ease-out;
}
.transition-opacity {
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
.transition-background-color {
-webkit-transition: background-color 0.25s ease-out;
-moz-transition: background-color 0.25s ease-out;
-ms-transition: background-color 0.25s ease-out;
-o-transition: background-color 0.25s ease-out;
transition: background-color 0.25s ease-out;
}
.transition-color {
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
.transition-width {
-webkit-transition: width 0.25s ease-out;
-moz-transition: width 0.25s ease-out;
-ms-transition: width 0.25s ease-out;
-o-transition: width 0.25s ease-out;
transition: width 0.25s ease-out;
}
.transition-none {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.box-sizing {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
/*:: Universal
----------------------------------------------- */
:root {
--blue: #2c7da0;
--green: #278523;
--red: #cb433a;
--purple: #9656d2;
}
body {
color: #353224;
font-family: "proxima-nova", sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: 400;
text-rendering: optimizeLegibility;
background-color: #f8f8f7;
overflow-x: hidden;
}
@media all and (max-width:1023px) {
}
a {
color: #cb433a;
text-decoration: none;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
h1 {
font-size: 48px;
line-height: 1;
margin-bottom: 10px;
padding-top: 45px;
}
@media all and (max-width:767px) {
h1 {
font-size: 36px;
}
}
h2 {
font-size: 40px;
margin-bottom: 4px;
}
h3 {
font-size: 22px;
margin-bottom: 17px;
margin-top: 39px;
}
h2 + h3 {
margin-top: 32px;
}
.container {
background: white;
border: 2px solid #eae9e1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.rounded {
border-radius: 5px;
}
.stripe-shadow {
position: relative;
}
.stripe-shadow:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
padding: 0 7px 7px 0;
background: url(images/stripe-shadow.png) repeat 0 0;
z-index: -1;
}
.stripe-shadow.rounded:after {
border-radius: 7px;
}
.callout-strip {
background: white;
}
.callout-strip:after {
content: "";
background: transparent;
display: block;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
.button,
.st_sharethis {
display: inline-block;
height: 41px;
line-height: 41px;
padding: 0 20px;
background: white;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border: 2px solid #ccccc8;
text-transform: uppercase;
color: #cb433a !important;
white-space: nowrap;
font-size: 15px;
}
.button:hover,
.st_sharethis:hover {
border-color: #cb433a;
}
.button:active,
.st_sharethis:active {
background-color: #cb433a;
color: white !important;
}
.button.multiline,
.st_sharethis.multiline {
height: 29px;
line-height: 29px;
padding: 6px 20px;
}
button.button {
margin: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
label.button input {
position: absolute;
left: -1000em;
}
.mini-button {
height: 30px;
line-height: 26px !important;
border: 2px solid #eae9e1;
border-radius: 5px;
text-transform: uppercase;
color: #cb433a;
-webkit-transition: border-color 0.0625s ease-out;
-moz-transition: border-color 0.0625s ease-out;
-ms-transition: border-color 0.0625s ease-out;
-o-transition: border-color 0.0625s ease-out;
transition: border-color 0.0625s ease-out;
background: white;
cursor: pointer;
padding: 0 10px;
margin: 0;
}
.mini-button:hover {
border-color: #cb433a;
}
.mini-button:focus span {
border-color: #cb433a;
}
.mini-button i {
font-style: normal !important;
}
.st_sharethis .stButton .sharethis {
background-image: none;
font-size: 15px;
color: #cb433a;
padding: 0;
}
.st_sharethis .stButton .chicklets:hover {
opacity: 1;
}
.st_sharethis img {
display: none;
}
.to-top {
background: url(images/btn-bouy.png) no-repeat center center;
display: block;
height: 15px;
text-indent: -9999px;
width: 26px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
opacity: 0.4;
margin: 20px auto -15px auto !important;
}
.to-top:hover {
opacity: 1;
}
.awesome {
font-family: "FontAwesome";
}
.asterisk {
color: #cb433a;
}
.close-button {
text-indent: -1000em;
height: 24px;
width: 24px;
background: white url(images/jewel-close.png) no-repeat center center;
position: absolute;
top: -10px;
right: -10px;
box-shadow: 0 2px 4px rgba(117, 117, 102, 0.7);
border-radius: 24px;
-webkit-transition: all 0.0625s ease-out;
-moz-transition: all 0.0625s ease-out;
-ms-transition: all 0.0625s ease-out;
-o-transition: all 0.0625s ease-out;
transition: all 0.0625s ease-out;
z-index: 2;
}
.close-button:hover {
background-color: #f8f8f7;
}
.close-button:active {
box-shadow: none;
top: -6px;
}
@media all and (max-width:767px) {
.close-button.configure-close {
width: auto;
text-indent: 0;
padding: 0 12px 0 28px;
background-position: 10px center;
font-size: 13px;
line-height: 24px;
font-weight: 700;
}
}
.hide {
display: none;
}
body.default #content h1 {
color: #6b6b57;
line-height: 1;
margin-bottom: 1.5rem;
}
body.sorority #header #main h2 a {
background-image: url(images/logo-sorority.png);
}
body.sorority #content a,
body.sorority #main li.active a {
color: #9656d2;
}
body.sorority .button {
background-color: #9656d2;
border-color: #9656d2;
color: white !important;
}
body.sorority .button:hover {
background-color: #cb433a !important;
border-color: #cb433a !important;
}
body.fraternity #header #main h2 a {
background-image: url(images/logo-fraternity.png);
}
body.fraternity #content a,
body.fraternity #main li.active a {
color: #278523;
}
body.fraternity .button {
background-color: #278523;
border-color: #278523;
color: white !important;
}
body.fraternity .button:hover {
background-color: #cb433a !important;
border-color: #cb433a !important;
}
body.graduate #header #main h2 a {
background-image: url(images/logo-graduate.png);
}
body.graduate #content a,
body.graduate #main li.active a {
color: #2c7da0;
}
body.graduate .button {
background-color: #2c7da0;
border-color: #2c7da0;
color: white !important;
}
body.graduate .button:hover {
background-color: #cb433a !important;
border-color: #cb433a !important;
}
body.sorority #content a:hover,
body.fraternity #content a:hover,
body.graduate #content a:hover {
color: #cb433a;
}
.row {
max-width: 970px;
margin: 0 auto;
width: 95%;
}
.row .last {
margin-right: 0;
}
.col1,
.col2,
.col3,
.col4,
.col5 {
float: left;
margin-right: 35px;
}
.col1 {
width: 166px;
}
.col2 {
width: 367px;
}
.col3 {
width: 568px;
}
.col4 {
width: 769px;
}
.col5 {
width: 970px;
}
.push1 {
margin-left: 201px;
}
.push2 {
margin-left: 402px;
}
.push3 {
margin-left: 603px;
}
.push4 {
margin-left: 804px;
}
.pull1 {
margin-left: -201px;
}
.pull2 {
margin-left: -402px;
}
.pull3 {
margin-left: -603px;
}
.pull4 {
margin-left: -804px;
}
.outdated {
background: #cb433a;
color: white;
text-align: center;
}
.outdated .row {
padding: 20px 0;
}
.outdated .row h4 {
font-weight: bold;
}
.outdated .row a {
color: white;
text-decoration: underline;
}
.cf,
.row {
*zoom: 1;
}
.cf:before,
.cf:after,
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.cf:after,
.row:after {
clear: both;
}
.content-section {
max-width: 568px;
margin: 0 auto;
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: roboto-slab, serif;
}
/*:: Modal
----------------------------------------------- */
.transition-modal {
-webkit-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-moz-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-ms-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-o-transition: top 0.75s ease-out, opacity 0.75s ease-out;
transition: top 0.75s ease-out, opacity 0.75s ease-out;
}
.modal {
position: absolute;
z-index: 1100;
width: 568px;
top: -150%;
opacity: 0;
left: 50%;
margin-left: -284px;
background: white;
border-radius: 5px;
box-shadow: none;
-webkit-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-moz-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-ms-transition: top 0.75s ease-out, opacity 0.75s ease-out;
-o-transition: top 0.75s ease-out, opacity 0.75s ease-out;
transition: top 0.75s ease-out, opacity 0.75s ease-out;
}
.modal span.field-validation-error {
text-align: center;
color: #cb433a;
margin-bottom: 15px;
display: block;
}
.modal h3,
.modal .h3,
.modal h4,
.modal .h4 {
line-height: normal;
color: #2c7da0;
text-align: center;
}
.modal h3,
.modal .h3 {
font-size: 32px;
margin-bottom: 20px;
margin-top: 0;
}
.modal h4,
.modal .h4 {
font-size: 24px;
margin-bottom: 10px;
}
.modal p {
text-align: center;
color: #44442a;
margin-bottom: 25px;
}
.modal h3 + p {
margin-top: -10px;
}
.modal hr {
border-color: #eeeee9;
margin-bottom: 15px;
border-width: 0 0 1px 0;
border-style: solid;
}
.modal img {
display: block;
}
.modal ul {
margin-bottom: 25px;
float: left;
}
.modal li {
margin-bottom: 10px;
}
.modal li input {
text-align: center;
height: 40px;
line-height: 40px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
.modal li.controls {
height: 50px;
margin-bottom: 0;
padding-top: 20px;
}
.modal li.controls button {
display: block;
margin: 0 auto;
}
.modal .nest {
padding: 35px;
}
.modal.on {
opacity: 1;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}
.modal #modal-proof {
float: left;
margin: 0 0 25px 35px;
width: 300px;
}
.modal#camera-card-login {
width: 700px;
margin-left: -350px;
}
.modal#camera-card-login #proof-info {
float: left;
width: 295px;
color: #44442a;
}
.modal#camera-card-login #proof-info h4,
.modal#camera-card-login #proof-info .h4 {
text-align: left;
font-size: 48px;
margin-bottom: 10px;
}
.modal#camera-card-login #proof-info strong {
display: block;
font-weight: 300;
font-size: 26px;
margin: 15px 0 5px 0;
}
.modal#camera-card-login #proof-info li {
margin-bottom: 20px;
}
.modal#camera-card-login #proof-info a {
float: left;
margin-right: 15px;
}
.modal#camera-card-login #proof-info p {
text-align: left;
}
.modal#camera-card-login #proof-info span.st_sharethis {
float: left;
}
.modal#camera-card-login #proof-info #formToggler {
color: #44442a;
text-decoration: underline;
}
.modal#camera-card-login #proof-info #formToggler:hover {
color: #cb433a;
}
.modal#camera-card-login #proof-info h3 {
font-family: "proxima-nova", sans-serif;
color: #cb433a;
text-align: left;
font-size: 28px;
margin-bottom: 8px;
}
.modal#camera-card-login #proof-info .timer span {
font-weight: bold;
}
.modal .nest #optInLink {
color: #44442a;
text-decoration: underline;
line-height: 1.5;
margin-top: 16px;
}
.modal .nest .share_btn__holder {
position: relative;
float: right;
width: 50%;
text-align: left;
}
.modal .nest .share_btn__holder span {
display: inline-block;
font-weight: bold;
color: #7a7a72;
padding-left: 16px;
transform: translateY(-7px);
}
.modal .nest .share_btn {
display: inline-block;
text-align: center;
cursor: pointer;
white-space: nowrap;
padding: 0 16px 16px;
}
.modal .nest .share_btn svg {
fill: #7a7a72;
}
.modal#camera-card-login hr {
clear: both;
}
.modal#camera-card-login #changeCameraCard {
clear: both;
width: 100%;
}
.modal#camera-card-login #changeCameraCard ul {
float: none;
margin-bottom: 0;
}
.modal#gallery-modal img,
.modal#gallery-modal .nest {
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
max-width: 100%;
height: auto;
}
.modal#gallery-modal .nest {
background: transparent url(images/bg-gallery-image.png) repeat-x 0 0;
margin-top: -4px;
position: relative;
text-align: center;
}
.modal#gallery-modal h4 {
color: #44442a;
}
.modal#gallery-modal p {
color: #44442a;
margin-bottom: 32px;
}
.modal#gallery-modal a.controls {
position: absolute;
height: 80px;
width: 50px;
top: 191px;
text-indent: -1000em;
}
.modal#gallery-modal a.controls.next {
right: -48px;
background: url(images/btn-modal-next.png) no-repeat center center;
}
.modal#gallery-modal a.controls.next:hover {
padding-right: 5px;
right: -55px;
}
.modal#gallery-modal a.controls.prev {
left: -48px;
background: url(images/btn-modal-prev.png) no-repeat center center;
}
.modal#gallery-modal a.controls.prev:hover {
padding-left: 5px;
left: -55px;
}
.modal#gallery-modal.loading img,
.modal#gallery-modal.loading .nest {
opacity: 0;
}
.modal#cvn img {
margin: 0 auto;
}
@media all and (max-width:1023px) {
.modal#gallery-modal,
.modal#camera-card-login {
width: 480px;
margin-left: -240px;
}
.modal#gallery-modal .nest,
.modal#camera-card-login .nest {
*zoom: 1;
}
.modal#gallery-modal .nest #proof-info,
.modal#camera-card-login .nest #proof-info {
width: 45%;
padding-bottom: 35px;
}
.modal#gallery-modal .nest #modal-proof,
.modal#camera-card-login .nest #modal-proof {
float: right;
margin-left: 0;
width: 50%;
}
.modal#gallery-modal a.controls,
.modal#camera-card-login a.controls {
padding: 0 !important;
}
.modal#gallery-modal a.controls.next,
.modal#camera-card-login a.controls.next {
right: -45px !important;
}
.modal#gallery-modal a.controls.prev,
.modal#camera-card-login a.controls.prev {
left: -45px !important;
}
.modal .button {
white-space: normal;
height: auto;
line-height: 20px;
padding: 12px;
margin-bottom: 10px;
}
}
@media all and (max-width:767px) {
.modal#gallery-modal,
.modal#camera-card-login {
width: 360px;
margin-left: -180px;
}
.modal#gallery-modal .nest #modal-proof,
.modal#camera-card-login .nest #modal-proof,
.modal#gallery-modal .nest .share_btn__holder,
.modal#camera-card-login .nest .share_btn__holder,
.modal#gallery-modal .nest #proof-info,
.modal#camera-card-login .nest #proof-info {
width: 100%;
float: none;
}
.modal#gallery-modal a.controls,
.modal#camera-card-login a.controls {
top: 90px;
}
}
@media all and (max-width:479px) {
.modal#gallery-modal,
.modal#camera-card-login {
width: 300px;
margin-left: -150px;
}
.modal#gallery-modal .nest,
.modal#camera-card-login .nest {
padding: 15px;
font-size: 14px;
line-height: 1.5;
}
.modal#gallery-modal .nest #modal-proof,
.modal#camera-card-login .nest #modal-proof,
.modal#gallery-modal .nest #proof-info,
.modal#camera-card-login .nest #proof-info,
.modal#gallery-modal .nest .share_btn__holder,
.modal#camera-card-login .nest .share_btn__holder {
width: 100%;
float: none;
}
.modal#gallery-modal {
width: 250px;
margin-left: -125px;
}
}
#overlay {
background: url(images/bg-overlay.png) repeat 0 0;
position: fixed;
height: 100%;
width: 100%;
z-index: 1050;
display: none;
}
#overlayTop {
position: fixed;
height: 100%;
width: 100%;
z-index: 1150;
overflow: hidden;
}
#overlayTop:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url(images/bg-overlay.png) repeat 0 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*:: Opt-In SlideUp
----------------------------------------------- */
.opt_in_slider {
background: white url(images/top.png) repeat-x 0 0;
display: none;
position: fixed;
top: 10%;
left: 50%;
right: 0;
padding: 3em 3.5em;
z-index: 16000002;
text-align: center;
transform: translateX(-50%);
}
.opt_in_slider .close-x {
opacity: 0.7;
position: absolute;
color: #656456;
top: 24px;
right: 24px;
cursor: pointer;
}
.opt_in_slider .close-offer {
cursor: pointer;
text-align: center;
margin: 24px 0 0;
opacity: 0.7;
text-decoration: underline;
}
.opt_in_slider h2 {
font-weight: bold;
font-size: 20px;
line-height: 1.25;
color: #7bbedb;
margin-bottom: 12px;
}
.opt_in_slider p {
font-size: 15px;
line-height: 1.5;
margin: 0 15px 18px;
}
.opt_in_slider input {
text-align: left;
padding-left: 7px;
line-height: 40px;
box-sizing: border-box;
max-width: 200px;
width: 40%;
vertical-align: middle;
margin-bottom: 12px;
}
.opt_in_slider button {
vertical-align: middle;
margin-bottom: 12px;
float: none;
border: 1px solid #258122;
background: #258122;
color: white !important;
}
.opt_in_slider button:hover {
border: 1px solid #97ff94;
background: #97ff94 !important;
}
.opt_in_slider #optInFormMessage {
color: #cb433a;
font-size: 24px;
}
@media all and (max-width:767px) {
.opt_in_slider {
padding: 1em 1.5em;
transform: none;
left: 12px;
right: 12px;
}
.opt_in_slider h2 {
width: 70%;
}
.opt_in_slider input {
width: 100%;
vertical-align: middle;
margin-bottom: 12px;
}
}
/*:: Header
----------------------------------------------- */
#header {
position: sticky;
top: 0;
background: white;
z-index: 1000;
}
#header ul {
float: right;
}
#header ul li {
float: left;
}
#header #top {
line-height: 50px;
font-weight: 400;
color: #656456;
background: white url(images/top.png) repeat-x 0 0;
padding-top: 4px;
border-bottom: 1px solid #eeeee9;
text-transform: uppercase;
font-size: 14px;
position: absolute;
top: 0;
height: 50px;
left: 0;
width: 100%;
}
#header #top li {
padding-left: 20px;
position: relative;
}
#header #top li a {
color: #656456;
}
.no-touch #header #top li a:hover,
#header #top li a:hover {
color: #cb433a;
}
#header #top li ul {
position: absolute;
left: -1000em;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #eeeee9;
background: white;
border-radius: 0 0 5px 5px;
padding-bottom: 12px;
box-shadow: 1px 1px 0 #eeeee9;
text-align: right;
}
#header #top li ul li {
padding: 0 20px;
line-height: 25px;
float: none;
}
#header #top li ul li a {
font-weight: 400;
text-transform: capitalize;
white-space: nowrap;
}
.no-touch #header #top li:hover a,
.no-touch #header #top li.hover a,
.no-touch #header #top li:focus-within a {
color: #cb433a;
}
.no-touch #header #top li:hover ul,
.no-touch #header #top li.hover ul,
.no-touch #header #top li:focus-within ul {
left: auto;
z-index: 1100;
right: -21px;
}
.no-touch #header #top li:hover ul a,
.no-touch #header #top li.hover ul a,
.no-touch #header #top li:focus-within ul a {
color: #656456;
}
.no-touch #header #top li:hover ul a:hover,
.no-touch #header #top li.hover ul a:hover,
.no-touch #header #top li:focus-within ul a:hover {
color: #cb433a;
}
#header #top li:hover a,
#header #top li.hover a,
#header #top li:focus-within a {
color: #cb433a;
}
#header #top li:hover ul,
#header #top li.hover ul,
#header #top li:focus-within ul {
left: auto;
z-index: 1100;
right: -21px;
padding-top: 10px;
}
#header #top li:hover ul a,
#header #top li.hover ul a,
#header #top li:focus-within ul a {
color: #656456;
}
#header #top li:hover ul a:hover,
#header #top li.hover ul a:hover,
#header #top li:focus-within ul a:hover {
color: #cb433a;
}
#header #top p {
float: right;
opacity: 0.7;
}
#header #top #account-nav {
border-left: 1px solid #eeeee9;
margin-left: 20px;
}
#header #top #comp-nav,
#header #top #payment-nav {
border-left: 1px solid #eeeee9;
border-right: 1px solid #eeeee9;
padding-right: 20px;
}
#header #top #payment-nav {
border-right: none;
margin-left: 20px;
}
#header #top #nav-planner a {
background: url(images/planner-icon.png) no-repeat left center;
padding-left: 20px;
}
#header #top #nav-pay-fee a {
background: url(images/pay-icon.png) no-repeat left center;
padding-left: 15px;
}
#header #top #nav-cart a {
display: block;
white-space: nowrap;
}
#header #top #nav-cart span {
float: left;
text-indent: -1000em;
background: url(images/jewel-cart.png) no-repeat 0 18px;
width: 15px;
margin-right: 2px;
}
#header #top #phone {
background: url(images/jewel-phone.png) no-repeat 0 18px;
padding-left: 14px;
color: #353224;
font-weight: 600;
opacity: .9;
}
@media all and (max-width:767px) {
#header #top p,
#header #top ul {
display: none !important;
}
}
@media all and (max-width:1023px) {
#header #top li {
padding-left: 13px;
}
#header #top li ul li {
padding-left: 13px;
}
#header #top #account-nav {
margin-left: 13px;
}
#header #top #comp-nav,
#header #top #payment-nav {
padding-right: 13px;
}
#header #top #payment-nav {
margin-left: 13px;
}
}
@media all and (max-width:767px) {
#header #top .row {
display: none;
}
}
#header #main {
line-height: 90px;
border-bottom: 1px solid #eeeee9;
text-transform: uppercase;
font-size: 14px;
position: relative;
z-index: 1000;
margin-top: 55px;
}
#header #main.fixed {
background: white;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
line-height: 70px;
box-shadow: 0 1px 3px rgba(101, 100, 86, 0.2);
}
#header #main.fixed .row {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
#header #main.fixed .row h2 {
height: 80px;
margin: 0;
top: -5px;
}
.no-touch #header #main.fixed #store-nav li:hover a,
#header #main.fixed #store-nav li:hover a,
#header #main.fixed #store-nav li:focus-within a {
background-position: 15px 17px !important;
}
#header #main.fixed #store-nav li a {
background-position: 0 27px;
}
#header #main.fixed #search-toggle {
height: 70px;
background-position: 0 -100px;
z-index: 9999;
}
#header #main.fixed #search-toggle span {
background-position: 0 -10px;
height: 70px;
}
.no-touch #header #main.fixed li:hover a,
.no-touch #header #main.fixed li.hover a,
.no-touch #header #main.fixed li:focus-within a,
#header #main.fixed li:hover a,
#header #main.fixed li.hover a,
#header #main.fixed li:focus-within a {
margin-top: -1px;
padding-top: 1px;
line-height: 48px;
height: 48px;
margin-top: 9px;
}
.no-touch #header #main.fixed li:hover ul,
.no-touch #header #main.fixed li.hover ul,
.no-touch #header #main.fixed li:focus-within ul,
#header #main.fixed li:hover ul,
#header #main.fixed li.hover ul,
#header #main.fixed li:focus-within ul {
top: 58px;
}
.no-touch #header #main.fixed li:hover ul a,
.no-touch #header #main.fixed li.hover ul a,
.no-touch #header #main.fixed li:focus-within ul a,
#header #main.fixed li:hover ul a,
#header #main.fixed li.hover ul a,
#header #main.fixed li:focus-within ul a {
height: auto;
line-height: 25px;
margin-top: 0;
}
@media all and (max-width:1023px) {
#header #main.fixed #menu-toggle {
height: 70px;
}
}
@media all and (max-width:767px) {
#header #main.fixed {
top: 10px;
}
}
#header #main .row {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#header #main .row h2 {
position: absolute;
top: -10px;
left: 0;
z-index: 1000;
height: 110px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#header #main .row h2 a {
display: block;
text-indent: -1000em;
width: 220px;
height: 100%;
background: url(images/logo-default.png) no-repeat 0 0;
background-size: contain;
}
@media all and (max-width:767px) {
#header #main .row h2 a {
width: 180px;
}
}
#header #main li {
position: relative;
}
#header #main li a {
font-weight: 600;
color: #353224;
display: block;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
padding: 0 15px;
}
#header #main li ul {
position: absolute;
left: -1000em;
padding: 8px 0 7px 0;
border-radius: 0 5px 5px;
background: white;
min-width: 120%;
border: 1px solid #cb433a;
}
#header #main li ul li {
float: none;
width: 100%;
background: none !important;
padding: 0;
}
#header #main li ul li a {
background: none !important;
font-weight: 400;
white-space: nowrap;
line-height: 25px;
padding: 0 15px !important;
text-transform: capitalize;
opacity: 0.7;
margin-top: 0 !important;
}
.no-touch #header #main li ul li a:hover,
#header #main li ul li a:hover {
opacity: 1;
color: #cb433a;
}
.no-touch #header #main li ul li:hover,
#header #main li ul li:hover {
margin-top: 0;
height: auto;
}
.no-touch #header #main li:hover a,
.no-touch #header #main li.hover a,
.no-touch #header #main li:focus-within a,
#header #main li:hover a,
#header #main li.hover a,
#header #main li:focus-within a {
color: #cb433a;
line-height: 68px;
background: white;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #cb433a;
height: 54px;
margin-top: 10px;
border-radius: 5px 5px 0 0;
padding: 0 14px;
position: relative;
z-index: 1100;
}
.no-touch #header #main li:hover ul,
.no-touch #header #main li.hover ul,
.no-touch #header #main li:focus-within ul,
#header #main li:hover ul,
#header #main li.hover ul,
#header #main li:focus-within ul {
left: 0px;
top: 64px;
z-index: 1000;
}
.no-touch #header #main li:hover ul li a,
.no-touch #header #main li.hover ul li a,
.no-touch #header #main li:focus-within ul li a,
#header #main li:hover ul li a,
#header #main li.hover ul li a,
#header #main li:focus-within ul li a {
color: #353224;
border: none;
height: auto;
line-height: 25px;
padding: 0;
}
#header #main li:nth-last-child(-n+2) ul {
border-radius: 5px 0 5px 5px;
text-align: right;
}
.no-touch #header #main li:nth-last-child(-n+2):hover ul,
.no-touch #header #main li:nth-last-child(-n+2).hover ul,
.no-touch #header #main li:nth-last-child(-n+2):focus-within ul,
#header #main li:nth-last-child(-n+2):hover ul,
#header #main li:nth-last-child(-n+2).hover ul,
#header #main li:nth-last-child(-n+2):focus-within ul {
left: auto;
right: 0px;
}
#header #main #search-toggle {
float: right;
margin-left: 15px;
text-indent: -1000em;
width: 14px;
background: url(images/jewel-search.png) no-repeat 0 bottom;
position: relative;
}
#header #main #search-toggle span {
background: white url(images/jewel-search.png) no-repeat 0 0;
display: block;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
height: 90px;
}
.no-touch #header #main #search-toggle:hover span,
#header #main #search-toggle:hover span {
opacity: 0;
}
#header #main #search-toggle.on:after,
#header #main #search-toggle.on:before {
content: "";
width: 0px;
height: 0px;
border-style: solid;
position: absolute;
bottom: -1px;
left: 50%;
z-index: 100;
}
#header #main #search-toggle.on:after {
border-width: 0 10px 10px 10px;
border-color: transparent transparent white transparent;
margin-left: -10px;
}
#header #main #search-toggle.on:before {
border-width: 0 11px 11px 11px;
border-color: transparent transparent #eeeee9 transparent;
margin-left: -11px;
}
#header #main #store-nav li a {
background: url(images/jewel-nav.png) no-repeat 0 36px;
padding-left: 24px;
}
#header #main #store-nav li ul {
border-radius: 0 5px 5px;
text-align: left;
}
.no-touch #header #main #store-nav li:hover a,
.no-touch #header #main #store-nav li.hover a,
#header #main #store-nav li:hover a,
#header #main #store-nav li.hover a {
background: white url(images/jewel-nav.png) no-repeat 15px 25px;
padding-left: 39px;
}
.no-touch #header #main #store-nav li:hover ul,
.no-touch #header #main #store-nav li.hover ul,
#header #main #store-nav li:hover ul,
#header #main #store-nav li.hover ul {
left: 0px;
right: auto;
}
#header #main #menu {
display: inline;
}
#header #main #menu .more {
display: none;
}
#header #main #menu .top-menu {
display: none;
width: 100%;
}
#header #main #menu .top-menu ul li a,
#header #main #menu .top-menu #phone {
padding: 1.5em;
}
@media all and (max-width:1023px) {
#header #main #menu .top-menu {
display: block;
}
}
@media all and (max-width:1023px) {
#header #main #menu {
position: fixed;
width: 280px;
height: 100%;
top: 0;
background-color: white;
right: -280px;
overflow-y: auto;
z-index: 10000;
opacity: 0;
-moz-transition: right 0.25s cubic-bezier(1, 0, 0, 1), opacity 0.25s cubic-bezier(1, 0, 0, 1);
-o-transition: right 0.25s cubic-bezier(1, 0, 0, 1), opacity 0.25s cubic-bezier(1, 0, 0, 1);
-webkit-transition: right 0.25s cubic-bezier(1, 0, 0, 1), opacity 0.25s cubic-bezier(1, 0, 0, 1);
transition: right 0.25s cubic-bezier(1, 0, 0, 1), opacity 0.25s cubic-bezier(1, 0, 0, 1);
display: block;
}
.menu-open #header #main #menu {
right: 0;
opacity: 1;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.25);
}
#header #main #menu .more {
display: block;
position: absolute;
right: 0;
top: 0;
margin: 0;
color: #cb433a;
height: auto;
line-height: 1;
padding: 0.5em 0;
width: 2em;
text-align: center;
font-size: 2em;
z-index: 9999999;
cursor: pointer;
}
#header #main #menu ul {
width: 100%;
height: auto;
float: none;
margin: 0 !important;
padding: 0;
text-align: left !important;
opacity: 1;
min-width: 0;
background: transparent;
}
#header #main #menu ul li {
display: block;
float: none;
padding: 0;
margin: 0 !important;
height: auto;
border: 0;
border-radius: 0;
background: transparent;
}
#header #main #menu ul li a {
line-height: 1;
margin: 0;
height: auto;
opacity: 1;
padding: 1.5em !important;
display: block;
border: 0;
border-bottom: 1px solid #eeeee9;
border-radius: 0;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
#header #main #menu ul li a strong:before {
content: "(";
}
#header #main #menu ul li a strong:after {
content: ")";
}
#header #main #menu ul li ul {
width: auto;
height: auto;
float: none;
position: static;
border: 0;
border-radius: 0;
left: auto;
background: #eeeee9;
display: none;
}
#header #main #menu ul li ul li a {
padding: 1em 1.5em !important;
border: 0;
}
.no-touch #header #main #menu ul li ul li a:hover,
#header #main #menu ul li ul li a:hover {
background-color: #cb433a !important;
color: white;
}
.no-touch #header #main #menu ul li.hover a,
.no-touch #header #main #menu ul li:hover a,
#header #main #menu ul li:hover a,
#header #main #menu ul li.hover a {
background-color: transparent;
border-bottom-color: #cb433a;
}
#header #main #menu ul#store-nav > li > a {
padding-left: 3.5em !important;
background-position: 1.5em center;
}
#header #main #menu ul#comp-nav #nav-planner a {
padding-left: 3.25em !important;
background: url(images/planner-icon.png) no-repeat 1.5em center !important;
}
#header #main #menu ul#payment-nav #nav-pay-fee a {
padding-left: 3em !important;
background: url(images/pay-icon.png) no-repeat 1.5em center !important;
}
}
#header #main #mobile-pay-fee {
display: none;
}
@media all and (max-width:767px) {
#header #main {
top: 10px;
}
#header #main {
width: 100%;
background: white;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
line-height: 70px;
border-top: 1px solid #eeeee9;
box-shadow: 0 0 10px rgba(101, 100, 86, 0.2);
}
#header #main .row {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
#header #main .row h2 {
height: 80px;
margin: 0;
top: -5px;
}
.no-touch #header #main #store-nav li:hover a,
#header #main #store-nav li:hover a {
background-position: 15px 27px;
}
#header #main #store-nav li a {
background-position: 0 27px;
}
#header #main #search-toggle {
height: 70px;
background-position: 0 -100px;
}
#header #main #search-toggle span {
background-position: 0 -10px;
height: 70px;
}
#header #main .no-touch li:hover a,
#header #main .no-touch li.hover a,
#header #main li:hover a,
#header #main li.hover a {
border-radius: 0;
margin-top: -1px;
padding-top: 1px;
}
#header #main .no-touch li:hover ul,
#header #main .no-touch li.hover ul,
#header #main li:hover ul,
#header #main li.hover ul {
top: 54px;
}
#header #main #menu-toggle {
height: 70px;
}
#header #main #mobile-pay-fee {
display: block;
float: right;
background-color: #258122;
color: white;
border-radius: 5px;
height: 55px;
margin-top: 7px;
padding: 0 15px;
line-height: 56px;
}
}
@media all and (max-width:767px) {
#header #main {
margin-top: 0;
}
}
@media all and (max-width:479px) {
#header #main #mobile-pay-fee span {
display: none;
}
#header #main a#menu-toggle {
width: 70px;
margin-right: -15px;
}
}
#header .shade {
display: none;
position: fixed;
left: 0;
top: 0;
background: url(images/bg-overlay.png) repeat 0 0;
width: 100%;
height: 100%;
z-index: 9999;
}
@media all and (max-width:1023px) {
.menu-open #header .shade {
display: block;
}
}
#header #search {
width: 100%;
height: 0;
overflow: hidden;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
position: relative;
border-top: 1px solid white;
}
#header #search input {
width: 60%;
height: 40px;
line-height: 40px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
padding: 0 10px;
text-align: left;
font-size: 18px;
float: right;
}
#header #search button {
float: right;
height: 36px;
line-height: 36px;
margin-left: 10px;
}
#header #search.on {
height: 40px;
padding: 20px 0;
border-top: 1px solid #eeeee9;
}
#header #store-wide-promotion {
text-align: center;
height: auto;
line-height: 20px;
padding: 10px 0;
color: #5f604e;
border-top: 1px solid #eeeee9;
}
#header #store-wide-promotion strong {
font-weight: 600;
color: #278523;
}
@media all and (max-width:767px) {
#header #store-wide-promotion {
font-size: 0.875em;
line-height: 1.25;
}
}
#header a#menu-toggle {
position: relative;
width: 90px;
float: right;
height: 90px;
display: none;
}
#header a#menu-toggle span,
#header a#menu-toggle span:before,
#header a#menu-toggle span:after {
display: block;
position: absolute;
width: 18px;
height: 3px;
background: #353224;
text-indent: -10000em;
left: 50%;
margin: -2px 0 0 -9px;
top: 50%;
}
#header a#menu-toggle span:after,
#header a#menu-toggle span:before {
content: "";
margin-top: 0;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-webkit-transform-origin: center center;
transform-origin: center center;
}
#header a#menu-toggle span:before {
top: -6px;
}
#header a#menu-toggle span:after {
top: 6px;
}
#header a#menu-toggle:hover span,
#header a#menu-toggle:hover span:before,
#header a#menu-toggle:hover span:after {
background-color: #cb433a;
}
@media all and (max-width:1023px) {
#header a#menu-toggle {
display: block;
}
}
#header #nav-bump-out {
position: relative;
z-index: 10001;
}
#header #nav-bump-out ul {
background-color: white;
margin-top: -5px;
border: 1px solid #eeeee9;
}
#header #nav-bump-out ul a {
line-height: 58px;
}
#header #nav-bump-out #comp-nav {
border-bottom-right-radius: 5px;
}
#header #nav-bump-out #payment-nav {
border-bottom-left-radius: 5px;
}
#banner {
border-bottom: 1px solid #eeeee9;
}
#content.error-page {
text-align: center;
}
#content.error-page img {
display: inline-block;
margin-top: 45px;
}
#content.error-page h1 {
color: #2c7da0;
}
#content.error-page ul {
margin: 0;
list-style: none;
}
/*:: Promo & Footer
----------------------------------------------- */
#promos {
position: relative;
clear: both;
padding: 40px 0 35px 0;
}
#promos::before {
content: '';
position: absolute;
top: 2px;
left: 50%;
border-top: 2px solid #eae9e1;
width: 330px;
max-width: calc(100% - 50px);
transform: translateX(-50%);
}
#promos .container {
float: left;
width: 467px;
margin: 0;
padding: 35px 30px;
background-repeat: no-repeat;
background-position: right 0;
background-size: auto 100%;
min-height: 200px;
}
#promos .container h2,
#promos .container h3,
#promos .container h4,
#promos .container h5 {
font-size: 24px;
margin-block: 0 10px;
line-height: 1.2;
color: #4a4840;
}
#promos .container h2 a,
#promos .container h3 a,
#promos .container h4 a,
#promos .container h5 a {
color: inherit;
}
#promos .container p {
margin: 0;
max-width: 260px;
}
#promos .container a.cta {
display: inline-block;
text-transform: uppercase;
margin: 10px 0 0;
background: url(images/jewel-more.png) no-repeat right center;
padding-right: 18px;
}
#promos .container a.cta:hover {
padding-right: 23px;
}
#promos .container:last-child {
float: right;
}
@media all and (max-width:1023px) {
#promos {
margin: 0 auto;
}
#promos .container {
float: none !important;
width: 467px;
position: relative;
margin: 0 auto 30px;
}
}
@media all and (max-width:767px) {
#promos .container {
margin: 0 auto 25px;
float: none;
width: 60%;
min-width: 300px;
background-image: none !important;
padding: 30px;
height: auto;
min-height: 0;
}
#promos p {
display: none;
}
}
.callout-strip + #promos::before {
border-top: none;
}
#footer {
background: #eeeee9;
text-transform: uppercase;
}
#footer #footer-nav {
padding: 33px 0 32px;
}
#footer #footer-nav ul {
padding: 20px;
float: left;
width: 25%;
margin: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#footer #footer-nav ul li a {
font-size: 16px;
font-weight: 600;
color: #44442a;
display: block;
}
#footer #footer-nav ul ul {
padding: 5px 0 0 0 !important;
margin-top: 3px;
border-top: 1px solid rgba(68, 68, 42, 0.1);
float: none;
width: auto;
}
#footer #footer-nav ul ul a {
text-transform: capitalize;
font-size: 14px;
font-weight: 300;
}
#footer #footer-nav ul ul a:hover {
color: #cb433a;
}
#footer #footer-nav ul:first-child {
padding-left: 0;
}
#footer #footer-nav ul:last-child {
padding-right: 0;
}
@media all and (max-width:767px) {
#footer #footer-nav ul {
width: 50%;
text-align: center;
}
#footer #footer-nav ul:first-child {
padding-left: 20px;
}
#footer #footer-nav ul:last-child {
padding-right: 20px;
}
}
@media all and (max-width:479px) {
#footer #footer-nav ul {
width: 100%;
}
}
#footer #bottom {
border-top: 1px solid #d8d8cb;
height: 50px;
line-height: 50px;
font-size: 12px;
clear: both;
}
#footer #bottom p,
#footer #bottom ul,
#footer #bottom li {
float: left;
padding-right: 20px;
}
#footer #bottom p,
#footer #bottom a {
font-weight: 400;
color: #656456;
display: block;
}
#footer #bottom a:hover {
color: #cb433a;
}
#footer #bottom #socials {
float: right;
padding: 13px 0 0 0;
}
#footer #bottom #socials li {
padding: 0 0 0 10px;
}
#footer #bottom #socials a {
display: block;
height: 24px;
width: 24px;
text-indent: -1000em;
background-image: url(images/jewel-socials.svg);
background-size: auto 24px;
}
#footer #bottom #socials a.instagram {
background-position: -145px 0;
}
#footer #bottom #socials a.twitter {
background-position: -61px 0;
}
#footer #bottom #socials a.pinterest {
background-position: -91px 0;
}
@media all and (max-width:1023px) {
#footer #bottom {
height: auto;
line-height: normal;
padding: 15px 0;
}
#footer #bottom p,
#footer #bottom ul {
float: none;
padding: 10px 0;
text-align: center;
display: block;
clear: both;
width: 100%;
}
#footer #bottom ul li {
display: inline-block;
float: none;
padding: 0 10px;
white-space: nowrap;
}
#footer #bottom #socials {
padding: 10px 0;
}
#footer #bottom #socials li {
display: inline-block;
padding: 0 5px !important;
}
}
@media all and (max-width:767px) {
#footer #bottom ul li {
display: block;
padding: 4px 0;
}
}
/*:: Content
----------------------------------------------- */
form input,
form select {
border: 2px solid #eeeee9;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-radius: 5px;
}
form input:focus,
form select:focus {
border-color: #cb433a;
}
form textarea {
font-family: "proxima-nova", sans-serif;
font-size: 16px;
line-height: 24px;
border-radius: 5px;
border: 2px solid #eeeee9;
}
form ul.field-block {
float: left;
width: 100%;
margin-bottom: 15px;
list-style: none !important;
margin-left: 0 !important;
}
form ul.field-block li {
float: left;
width: 100%;
}
form ul.field-block span.field-validation-error {
color: #cb433a;
float: left;
clear: both;
margin: -5px 0 10px 170px;
}
form ul.field-block img {
float: left;
clear: both;
margin: 5px 0 15px 170px;
}
@media all and (max-width:1023px) {
form ul.field-block img {
margin-left: 0;
}
}
form ul.field-block a.info {
line-height: 32px;
font-size: 14px;
}
form ul.field-block label {
float: left;
clear: left;
width: 160px;
padding-right: 10px;
text-align: right;
height: 32px;
line-height: 32px;
margin-bottom: 5px;
}
form ul.field-block input,
form ul.field-block select {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
height: 32px;
line-height: 32px;
text-align: left;
float: left;
margin: 0 5px 5px 0;
padding: 5px;
color: #656456;
width: 300px;
}
form ul.field-block input.long,
form ul.field-block select.long {
width: 500px;
}
form ul.field-block input.short,
form ul.field-block select.short {
width: 100px;
}
form ul.field-block input.input-validation-error,
form ul.field-block select.input-validation-error {
color: #cb433a;
border-color: #cb433a;
}
form ul.field-block li.radio input.radio {
clear: left;
}
@media all and (max-width:1023px) {
form ul.field-block li.radio input.radio {
width: 20px !important;
}
}
form ul.field-block li.radio label {
clear: none;
width: auto;
margin: 0;
padding: 0;
}
form ul.field-block li.control button {
margin-left: 170px;
}
form ul.field-block input.radio {
width: auto;
}
@media all and (max-width:1023px) {
form ul.field-block label {
float: none;
display: block;
width: auto;
height: auto;
text-align: left;
}
form ul.field-block input,
form ul.field-block select,
form ul.field-block option {
width: 100% !important;
float: none !important;
}
form ul.field-block input.radio,
form ul.field-block select.radio,
form ul.field-block option.radio {
width: auto !important;
float: left !important;
}
form ul.field-block span.field-validation-error {
float: none;
display: block;
margin-left: 0;
}
}
@media all and (max-width:1023px) {
form#formBillingShipping {
max-width: 568px;
margin: 0 auto;
}
}
#content {
min-height: 450px;
}
#content h1,
#content h2 {
color: #6b6b57;
line-height: normal;
}
#content p.intro {
font-size: 22px;
color: #5f5f4d;
font-weight: 300;
margin-bottom: 6px;
}
#content #breadcrumbs {
float: left;
width: 100%;
padding-bottom: 12px;
margin: 0;
list-style: none;
}
#content #breadcrumbs li {
float: left;
font-size: 14px;
color: #44442a;
padding-right: 14px;
margin-right: 8px;
background: url(images/bg-breadcrumb.png) no-repeat right center;
}
#content #breadcrumbs li a {
color: #44442a;
}
#content #breadcrumbs li.current,
#content #breadcrumbs li.last {
padding-right: 0;
margin-right: 0;
background: none;
}
#content #breadcrumbs li.on {
font-weight: 600;
}
#content #breadcrumbs.checkout li a {
color: #cb433a;
}
@media all and (max-width:1023px) {
#content #breadcrumbs.checkout {
max-width: 568px;
margin-left: auto;
margin-right: auto;
float: none;
*zoom: 1;
}
}
#content img {
max-width: 100%;
height: auto;
}
#content p,
#content ul,
#content ol,
#content address,
#content table {
color: #6b6b57;
}
#content p {
margin-bottom: 15px;
}
#content ul,
#content ol,
#content address {
margin-bottom: 23px;
}
#content ul {
list-style-type: disc;
margin-left: 35px;
}
#content ol {
list-style-type: decimal;
margin-left: 35px;
}
#content em,
#content i {
font-style: italic;
}
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
color: #6b6b57;
}
#content strong,
#content b {
font-weight: bold;
}
#content .default h1 {
text-align: center;
}
#content .default .intro {
font-size: 22px;
margin: 0 auto 11px;
max-width: 568px;
}
#content .default .intro p {
margin-bottom: 0;
color: #5e5e4b;
font-weight: 300;
}
#content .default .content-section {
margin-bottom: 10px;
*zoom: 1;
}
#content .default .content-section h2 {
padding-top: 20px;
font-size: 28px;
}
#content .default .content-section p.sub-intro {
font-size: 20px;
color: #5e5e4b;
font-weight: 300;
margin-bottom: 10px;
}
#content .default .content-section img.left {
float: left;
margin: 7px 35px 20px -201px;
}
@media all and (max-width:1023px) {
#content .default .content-section img.left {
width: 50%;
margin-left: 0;
}
}
@media all and (max-width:479px) {
#content .default .content-section img.left {
width: 35%;
}
}
#content .default .content-section img.right {
float: right;
margin: 7px -201px 20px 35px;
}
@media all and (max-width:1023px) {
#content .default .content-section img.right {
width: 50%;
margin-right: 0;
}
}
@media all and (max-width:479px) {
#content .default .content-section img.right {
width: 35%;
}
}
#content .default .content-section img.full {
margin: 18px -201px 33px -201px;
}
#content .default .content-section h1 + img {
margin-top: 27px;
}
#content .default table {
width: 970px;
border-top: 1px solid #eeeee9;
margin: 0 0 15px -201px;
}
#content .default table td,
#content .default table th {
padding: 20px 20px 20px 0;
border-bottom: 1px solid #eeeee9;
}
#content .default table td:last-child,
#content .default table th:last-child {
padding-right: 0;
}
#content [class^="icon-"],
#content [class*=" icon-"] {
font-style: normal;
}
#anchor-linked .anchor-list {
font-size: 18px;
font-weight: 300;
margin: 0 auto 21px;
max-width: 568px;
}
#anchor-linked .anchor-list ul {
margin: 0;
list-style: none;
}
#anchor-linked .anchor-list li {
color: #44442a;
margin-bottom: 10px;
float: left;
width: 50%;
text-align: center;
}
@media all and (max-width:767px) {
#anchor-linked .anchor-list li {
width: 100%;
float: none;
}
}
#anchor-linked .content-section {
border-top: 2px solid #eae9e1;
padding: 36px 0 33px 0;
}
#anchor-linked .content-section h2 {
padding-top: 0;
}
#anchor-linked .content-section h3 {
font-family: "proxima-nova", sans-serif;
font-weight: 300;
font-size: 22px !important;
line-height: 25px;
color: #5e5e4b;
margin-bottom: 11px;
}
#anchor-linked .content-section .to-top {
margin: 0 auto -27px auto;
}
#content #testimonials .intro {
margin-bottom: 35px;
}
#content #testimonials .content-section {
border-top: 2px solid #eae9e1;
padding: 36px 0 0 0;
margin-bottom: 0;
}
#content #testimonials img.left {
margin: 0 20px 35px 0;
}
#content #testimonials img.right {
margin: 0 0 35px 20px;
}
#content #testimonials p.attribution {
font-style: italic;
font-size: 14px;
opacity: 0.8;
}
#content #testimonials p.attribution:before {
content: "-";
}
@media all and (max-width:1023px) {
#content #testimonials img.left,
#content #testimonials img.right {
width: auto;
}
}
@media all and (max-width:479px) {
#content #testimonials img.left,
#content #testimonials img.right {
max-width: 35%;
float: left;
margin-bottom: 10px;
}
}
#control-testimonials {
text-align: center;
padding-bottom: 35px !important;
}
#control-testimonials a {
display: inline-block;
margin: 5px 10px;
}
#sitemap ul {
clear: both;
}
#sitemap ul ul {
margin-bottom: 10px;
}
/*:: Composite Page
----------------------------------------------- */
@keyframes pulsate {
0% {
transform: scale(1);
opacity: 0.25;
}
50% {
transform: scale(1.8);
opacity: 1.0;
}
100% {
transform: scale(1);
opacity: 0.25;
}
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: scale(1);
opacity: 0.25;
}
50% {
-webkit-transform: scale(1.8);
opacity: 1.0;
}
100% {
-webkit-transform: scale(1);
opacity: 0.25;
}
}
@-moz-keyframes pulsate {
0% {
-moz-transform: scale(1);
opacity: 0.25;
}
50% {
-moz-transform: scale(1.8);
opacity: 1.0;
}
100% {
-moz-transform: scale(1);
opacity: 0.25;
}
}
@-ms-keyframes pulsate {
0% {
-ms-transform: scale(1);
opacity: 0.25;
}
50% {
-ms-transform: scale(1.8);
opacity: 1.0;
}
100% {
-ms-transform: scale(1);
opacity: 0.25;
}
}
@-o-keyframes pulsate {
0% {
-o-transform: scale(1);
opacity: 0.25;
}
50% {
-o-transform: scale(1.8);
opacity: 1.0;
}
100% {
-o-transform: scale(1);
opacity: 0.25;
}
}
#composite h1 {
font-size: 36px;
line-height: 44px;
margin-bottom: 20px;
padding-top: 45px;
}
#composite h2 {
font-size: 30px;
}
#composite a.bouy {
height: 15px;
width: 26px;
text-indent: -1000em;
background: url(images/btn-bouy.png) no-repeat 0 0;
opacity: 0.4;
display: block;
position: absolute;
left: 50%;
margin-left: -13px;
bottom: 20px;
}
#composite a.bouy:hover {
opacity: 1;
}
#composite #composite-design {
padding: 60px 0;
}
#composite #composite-design #tooltips {
position: relative;
}
#composite #composite-design #tooltips .tic {
position: absolute;
height: 12px;
width: 12px;
background-color: #278523;
border-radius: 20px;
cursor: pointer;
}
#composite #composite-design #tooltips .tic span {
display: block;
height: 10px;
width: 10px;
border-radius: 20px;
border: 1px solid #278523;
opacity: 0;
animation: pulsate 2s ease-out infinite;
-webkit-animation: pulsate 2s ease-out infinite;
-moz-animation: pulsate 2s ease-out infinite;
-ms-animation: pulsate 2s ease-out infinite;
-o-animation: pulsate 2s ease-out infinite;
}
#composite #composite-design #tooltips .tic.one {
top: 1.5%;
left: 96.4%;
}
#composite #composite-design #tooltips .tic.two {
top: 19%;
left: 29.2%;
}
#composite #composite-design #tooltips .tic.two span {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
}
#composite #composite-design #tooltips .tic.three {
top: 36.8%;
left: 49%;
}
#composite #composite-design #tooltips .tic.three span {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
}
#composite #composite-design #tooltips .tic.four {
top: 55%;
left: 30.6%;
}
#composite #composite-design #tooltips .tic.four span {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
}
#composite #composite-design #tooltips .tic.five {
top: 92%;
left: 71%;
}
#composite #composite-design #tooltips .tic.five span {
animation-delay: 1.6s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-ms-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
}
@media all and (max-width:1023px) {
.menu-open #composite #composite-design #tooltips .tic {
display: none;
}
}
#composite #composite-design #tooltips .tooltip {
position: absolute;
padding: 0px 20px 20px 20px;
border: 2px solid #2c7da0;
border-radius: 10px;
background: white;
box-shadow: 0 4px 6px rgba(117, 117, 102, 0.7);
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
width: 250px;
margin-left: -140px;
margin-top: 5px;
}
#composite #composite-design #tooltips .tooltip span {
position: absolute;
height: 22px;
width: 22px;
border-radius: 22px;
background: #2c7da0;
top: -11px;
left: 50%;
margin-left: -11px;
z-index: -1;
}
#composite #composite-design #tooltips .tooltip h6 {
color: #2c7da0;
font-size: 24px;
background: white;
padding-top: 13px;
line-height: normal;
}
#composite #composite-design #tooltips .tooltip p {
color: #a09f97;
}
#composite #composite-design #tooltips .tooltip img {
display: inline;
vertical-align: bottom;
}
#composite #composite-design #tooltips .tooltip:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background: #278523;
border: 4px solid white;
border-radius: 20px;
top: -9px;
left: 50%;
margin-left: -9px;
}
#composite #composite-design #tooltips .tooltip.one {
top: 1.5%;
left: 96.4%;
}
#composite #composite-design #tooltips .tooltip.two {
top: 19%;
left: 29.2%;
}
#composite #composite-design #tooltips .tooltip.three {
top: 36.8%;
left: 49%;
}
#composite #composite-design #tooltips .tooltip.four {
top: 55%;
left: 30.6%;
}
#composite #composite-design #tooltips .tooltip.five {
top: 92%;
left: 71%;
}
#composite #composite-design #tooltips .tooltip.large {
width: 330px;
margin-left: -180px;
}
#composite #composite-design #tooltips .tooltip.on {
z-index: 100;
opacity: 1;
}
#composite #composite-design img {
display: block;
}
@media all and (max-width:1023px) {
#composite #composite-design .col2,
#composite #composite-design .col3 {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
padding: 0;
margin: 0;
}
#composite #composite-design .col3 {
width: 60%;
}
#composite #composite-design .col2 {
width: 40%;
padding-left: 4%;
}
#composite #composite-design .col2 h1 {
padding-top: 15px;
}
#composite #composite-design #tooltips img {
display: block;
width: 100%;
}
}
@media all and (max-width:767px) {
#composite #composite-design .col2,
#composite #composite-design .col3 {
width: 100%;
clear: both;
float: none;
padding-left: 0;
}
#composite #composite-design .col2 h1,
#composite #composite-design .col3 h1 {
padding-top: 45px;
}
#composite #composite-design .one {
left: 57% !important;
}
#composite #composite-design .two {
left: 39% !important;
}
#composite #composite-design .three {
left: 55% !important;
}
#composite #composite-design .four {
left: 48% !important;
}
#composite #composite-design .five {
left: 48% !important;
}
#composite #composite-design #tooltips .tic,
#composite #composite-design #tooltips .tooltip {
display: none;
}
#composite #composite-design #tooltips .tooltip {
width: 210px;
margin-left: -120px;
}
#composite #composite-design #tooltips .tooltip.large {
width: 250px;
margin-left: -140px;
}
}
#composite #whats-included {
position: relative;
text-align: center;
padding: 61px 0 141px 0;
vertical-align: top;
}
#composite #whats-included .perk {
position: relative;
height: 321px;
padding-top: 191px;
margin-bottom: 40px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
margin: 0 10px 40px;
display: inline-block;
float: none;
vertical-align: top;
}
#composite #whats-included .perk h3 {
font-family: "proxima-nova", sans-serif;
font-size: 20px;
line-height: 25px;
color: #5f5f4d;
padding-bottom: 10px;
margin: 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
#composite #whats-included .perk h3 em {
display: block;
}
#composite #whats-included .perk img {
position: absolute;
opacity: 0;
transition: left 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275), top 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 200ms ease-out;
}
#composite #whats-included .perk p {
font-size: 14px;
line-height: 22px;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
}
#composite #whats-included .perk-1 img {
top: 140px;
left: -90px;
}
#composite #whats-included .perk-2 img {
top: 80px;
left: -30px;
}
#composite #whats-included .perk-3 img {
top: 50px;
}
#composite #whats-included .perk-4 img {
top: 80px;
left: 30px;
}
#composite #whats-included .perk-5 img {
top: 140px;
left: 90px;
}
#composite #whats-included.on .perk img {
opacity: 1;
top: 10px;
left: 0;
transition-delay: 300ms;
}
#composite #whats-included.on .perk h3,
#composite #whats-included.on .perk p {
opacity: 1;
transition-delay: 600ms;
}
#composite #whats-included .button {
position: absolute;
bottom: 70px;
left: 50%;
margin-left: -105px;
width: 210px;
height: auto;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#composite #sample-gallery {
text-align: center;
padding: 61px 0 56px 0;
position: relative;
}
#composite #sample-gallery ul {
clear: both;
width: 100%;
margin: 0;
padding-top: 10px;
list-style: none;
text-align: center;
}
#composite #sample-gallery ul li {
float: left;
margin: 0 14px 14px 0;
position: relative;
height: 118px;
width: 150px;
float: none;
margin: 0 4px 10px;
display: inline-block;
/* &:nth-child(6n) { margin-right: 0; }*/
}
#composite #sample-gallery ul li a {
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
opacity: 0;
transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
-webkit-transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
-moz-transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
-ms-transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
-o-transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease-out;
}
#composite #sample-gallery ul li a img {
display: block;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
opacity: 0.75;
}
#composite #sample-gallery ul li a:hover img {
opacity: 1;
}
#composite #sample-gallery ul .slot-1 a {
top: 90px;
left: -90px;
}
#composite #sample-gallery ul .slot-2 a {
top: 60px;
left: -60px;
}
#composite #sample-gallery ul .slot-3 a {
top: 30px;
left: -30px;
}
#composite #sample-gallery ul .slot-4 a {
top: 30px;
left: 30px;
}
#composite #sample-gallery ul .slot-5 a {
top: 60px;
left: 60px;
}
#composite #sample-gallery ul .slot-6 a {
top: 90px;
left: 90px;
}
@media all and (max-width:479px) {
#composite #sample-gallery ul li {
width: 130px;
height: 102px;
margin-bottom: 10px;
}
}
#composite #sample-gallery.on ul li a {
top: 0 !important;
left: 0 !important;
opacity: 1;
}
#composite #sample-gallery.on ul li.row-1 a {
transition-delay: .3s;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-ms-transition-delay: .3s;
-o-transition-delay: .3s;
}
#composite #sample-gallery.on ul li.row-2 a {
transition-delay: .6s;
-webkit-transition-delay: .6s;
-moz-transition-delay: .6s;
-ms-transition-delay: .6s;
-o-transition-delay: .6s;
}
#composite #sample-gallery.on ul li.row-3 a {
transition-delay: .9s;
-webkit-transition-delay: .9s;
-moz-transition-delay: .9s;
-ms-transition-delay: .9s;
-o-transition-delay: .9s;
}
#composite #sample-gallery.on ul li.row-4 a {
transition-delay: 1.2s;
-webkit-transition-delay: 1.2s;
-moz-transition-delay: 1.2s;
-ms-transition-delay: 1.2s;
-o-transition-delay: 1.2s;
}
#composite #sample-gallery.on ul li.row-5 a {
transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
-o-transition-delay: 1.5s;
}
#composite #sample-gallery.on ul li.row-6 a {
transition-delay: 1.8s;
-webkit-transition-delay: 1.8s;
-moz-transition-delay: 1.8s;
-ms-transition-delay: 1.8s;
-o-transition-delay: 1.8s;
}
#contact-us .intro,
#quote-request .intro {
margin-bottom: 41px !important;
}
#contact-us h2,
#quote-request h2 {
margin-bottom: 27px;
}
#contact-us form,
#quote-request form {
float: left;
margin-bottom: 33px;
width: 100%;
}
#contact-us form .field,
#quote-request form .field {
float: left;
margin: 0 0 15px 0;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#contact-us form .field.phone,
#quote-request form .field.phone {
width: 65%;
}
#contact-us form .field.email,
#quote-request form .field.email {
width: 50%;
padding-right: 2.5%;
}
#contact-us form .field.repeat,
#quote-request form .field.repeat {
padding-right: 0;
padding-left: 2.5%;
}
#contact-us form .field.subject,
#quote-request form .field.subject {
width: 100%;
}
#contact-us form .field.hear-of,
#quote-request form .field.hear-of {
width: 100%;
}
#contact-us form .field.organization,
#quote-request form .field.organization {
width: 60%;
padding-right: 2.5%;
}
#contact-us form .field.members,
#quote-request form .field.members {
padding-left: 2.5%;
width: 40%;
}
@media all and (max-width:479px) {
#contact-us form .field.organization,
#quote-request form .field.organization,
#contact-us form .field.members,
#quote-request form .field.members,
#contact-us form .field.phone,
#quote-request form .field.phone {
padding-left: 0;
padding-right: 0;
width: 100%;
}
}
#contact-us form label,
#quote-request form label,
#contact-us form .label,
#quote-request form .label {
clear: left;
color: #44442a;
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
padding-right: 25px;
}
#contact-us form .label,
#quote-request form .label {
float: left;
}
#contact-us form input,
#quote-request form input,
#contact-us form textarea,
#quote-request form textarea {
border: 2px solid #eeeee9;
background-position: 0 13px;
clear: left;
color: #353224;
font-family: "proxima-nova", sans-serif;
font-size: 16px;
font-weight: 300;
height: 38px;
padding: 6px 13px;
text-align: left;
width: 100%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#contact-us form input:focus,
#quote-request form input:focus,
#contact-us form textarea:focus,
#quote-request form textarea:focus {
border-color: #cb433a;
}
#contact-us form input.error,
#quote-request form input.error,
#contact-us form textarea.error,
#quote-request form textarea.error {
background: white url(images/bg-error.png) no-repeat 7px 7px;
padding-left: 21px;
border-color: #cb433a;
}
#contact-us form textarea,
#quote-request form textarea {
height: 100px;
resize: vertical;
}
#contact-us form .checkbox,
#quote-request form .checkbox {
clear: none;
text-align: left;
width: 100%;
}
#contact-us form .checkbox input,
#quote-request form .checkbox input {
background-position: 0 13px;
height: auto;
margin: 6px 5px 0 0 !important;
width: auto;
}
#contact-us form .checkbox.error,
#quote-request form .checkbox.error {
background: white url(images/bg-error.png) no-repeat 7px 7px;
padding-left: 21px;
}
#contact-us form .radio,
#quote-request form .radio {
clear: none;
float: left;
text-align: left;
width: auto;
}
#contact-us form .radio input,
#quote-request form .radio input {
background-position: 0 13px;
height: auto;
margin: 6px 2px 0 0 !important;
width: auto;
}
#contact-us form .radio.error,
#quote-request form .radio.error {
background: white url(images/bg-error.png) no-repeat 7px 7px;
padding-left: 21px;
}
#contact-us form select,
#quote-request form select {
font-family: "proxima-nova", sans-serif;
background-position: 0 13px;
border: 2px solid #eeeee9;
float: left;
color: #353224;
font-size: 16px;
height: 38px;
padding: 6px 6px 6px 13px;
width: 100%;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#contact-us form select:focus,
#quote-request form select:focus {
border-color: #cb433a;
}
#contact-us form select.error,
#quote-request form select.error {
background: white url(images/bg-error.png) no-repeat 7px 7px;
padding-left: 25px;
border-color: #cb433a;
}
@media all and (max-width:1023px) {
#contact-us form select,
#quote-request form select,
#contact-us form select option,
#quote-request form select option {
float: none;
width: 100%;
}
}
#contact-us form button,
#quote-request form button {
background: #cb433a;
border: none;
clear: both;
color: #f8f8f7;
cursor: pointer;
padding: 12px 23px;
width: 100px;
border-radius: 5px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#contact-us form .error-message,
#quote-request form .error-message {
clear: both;
color: #cb433a;
margin-bottom: 26px !important;
}
#contact-us form .error-message strong,
#quote-request form .error-message strong {
display: block;
font-size: 22px;
font-weight: 300 !important;
margin-bottom: 15px;
}
#contact-us .sidebar-section,
#quote-request .sidebar-section {
margin: 0 20px 41px 0;
float: left;
width: 290px;
padding: 20px;
}
#contact-us .sidebar-section h2,
#quote-request .sidebar-section h2 {
font-family: "proxima-nova", sans-serif;
font-size: 22px;
line-height: normal;
font-weight: 300;
color: #cb433a;
margin: 0;
}
#contact-us .sidebar-section ul,
#quote-request .sidebar-section ul {
list-style: none;
margin: 0;
}
#contact-us .sidebar-section address,
#quote-request .sidebar-section address {
margin: 0;
}
#contact-us .sidebar-section.last,
#quote-request .sidebar-section.last {
margin-right: 0;
}
@media all and (max-width:1023px) {
#contact-us .sidebar-section,
#quote-request .sidebar-section {
width: 100%;
margin: 0 auto 30px !important;
float: none;
max-width: 568px;
}
}
#contact-us .elsewhere,
#quote-request .elsewhere {
margin: 0 0 33px;
}
#contact-us .elsewhere a,
#quote-request .elsewhere a {
display: block;
margin-bottom: 5px;
}
#contact-us .elsewhere a:last-child,
#quote-request .elsewhere a:last-child {
margin-bottom: 0;
}
#contact-us .social .facebook a,
#quote-request .social .facebook a {
color: #3b5998 !important;
}
#contact-us .social .twitter a,
#quote-request .social .twitter a {
color: #4099ff !important;
}
/*:: Search Results
----------------------------------------------- */
#search-results h1 {
text-align: center;
color: #2c7da0;
}
#search-results .col3.push1 {
*zoom: 1;
max-width: 568px;
margin: 0 auto;
clear: both;
float: none;
width: 100%;
}
#search-results form.col3.push1 {
padding-bottom: 35px;
}
#search-results input,
#search-results button {
display: inline-block;
}
@media all and (max-width:767px) {
#search-results input,
#search-results button {
float: none;
display: block;
margin: 15px auto !important;
}
}
#search-results input {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
height: 45px;
line-height: 45px;
max-width: 434px;
width: 100%;
font-size: 16px;
padding: 0 10px;
text-align: left;
}
#search-results button {
margin-left: 10px;
width: 70px;
}
#search-results ul {
list-style: none;
margin: 0 0 70px 0;
text-align: center;
font-size: 18px;
line-height: 30px;
}
#search-results p {
line-height: 20px;
margin-bottom: 20px;
}
/*:: Home
----------------------------------------------- */
#banner.home {
height: 420px;
position: relative;
overflow: hidden;
background-color: white;
}
#banner.home .nav {
position: absolute;
height: 300px;
width: 50px;
top: 50%;
margin-top: -150px;
text-indent: -1000em;
opacity: 0;
background-color: #cccccc;
background-position: center center;
background-repeat: no-repeat;
}
#banner.home .nav.prev {
left: 0;
background-image: url(images/btn-banner-prev.png);
}
#banner.home .nav.next {
right: 0;
background-image: url(images/btn-banner-next.png);
}
#banner.home .slide {
height: 420px;
width: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
}
#banner.home .slide .slide-position {
max-width: 970px;
width: 90%;
margin: 0 auto;
background-repeat: no-repeat;
background-position: left bottom;
height: 100%;
position: relative;
}
#banner.home .slide .messaging {
margin-top: 93px;
float: left;
width: 68%;
}
#banner.home .slide h2 {
margin: 0 0 3px -5px;
font-size: 40px;
line-height: 0.9;
color: #6b6b57;
}
#banner.home .slide h2 a {
color: currentColor !important;
}
#banner.home .slide h2 a:hover {
color: #cb433a !important;
}
#banner.home .slide p {
font-size: 28px;
line-height: 1.25;
font-weight: 300;
color: #6b6b57;
max-width: 515px;
margin-bottom: 31px;
clear: both;
margin-top: .75em;
}
#banner.home .slide img {
position: absolute;
bottom: 0;
right: 0;
max-width: 30%;
height: auto;
}
#banner.home .slide.on {
opacity: 1;
}
#banner.home:hover .nav {
opacity: 0.3;
}
#banner.home:hover .nav:hover {
width: 60px;
opacity: 1;
}
@media all and (max-width:1023px) {
#banner.home {
height: 360px;
}
#banner.home .slide {
height: 360px;
}
#banner.home .slide .slide-position {
background-image: none !important;
}
#banner.home .slide h2 {
margin-right: -50%;
}
#banner.home .slide p {
font-size: 20px;
}
#banner.home .slide img {
max-width: none;
height: 90%;
width: auto;
right: 0;
}
#banner.home .nav,
#banner.home:hover .nav {
opacity: 1;
height: 50px;
top: auto;
bottom: 0;
margin-top: 0;
width: 50px;
}
}
@media all and (max-width:767px) {
#banner.home .slide img {
max-width: none;
height: 64%;
width: auto;
right: -10%;
}
#banner.home .nav,
#banner.home:hover .nav {
height: 40px;
width: 40px;
}
}
@media all and (max-width:479px) {
#banner.home {
height: 300px;
}
#banner.home .slide {
height: 300px;
text-align: center;
}
#banner.home .slide h2 {
font-size: 36px;
margin-right: 0;
}
#banner.home .slide p {
font-size: 18px;
margin-bottom: 20px;
}
#banner.home .slide .messaging {
margin-top: 60px;
width: auto;
}
#banner.home .slide .button {
white-space: normal;
height: auto;
line-height: 1.2;
padding: 10px 15px;
}
#banner.home .slide img {
display: none;
}
}
#banner.home .button {
color: white !important;
}
#banner.home .button:hover {
background-color: #cb433a !important;
border-color: #cb433a !important;
}
.transition-slide {
-webkit-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-moz-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-ms-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-o-transition: left 1.5s ease-out, opacity 1.5s ease-out;
transition: left 1.5s ease-out, opacity 1.5s ease-out;
}
html.csstransitions #banner.home .slide {
-webkit-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-moz-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-ms-transition: left 1.5s ease-out, opacity 1.5s ease-out;
-o-transition: left 1.5s ease-out, opacity 1.5s ease-out;
transition: left 1.5s ease-out, opacity 1.5s ease-out;
display: none;
}
html.csstransitions #banner.home .slide.on {
display: block;
}
html.csstransitions #banner.home .slide.stageRight {
left: -100%;
display: block;
}
html.csstransitions #banner.home .slide.stageLeft {
left: 100%;
display: block;
}
.home-promos {
display: flex;
gap: 35px;
padding: 35px 0;
}
.home-promos::before,
.home-promos::after {
content: none;
}
@media all and (max-width:1023px) {
.home-promos {
gap: 15px;
width: 720px;
margin: 0 auto;
}
}
@media all and (max-width:767px) {
.home-promos {
display: block;
width: auto;
}
}
@media all and (max-width:479px) {
.home-promos {
padding-top: 0;
}
}
.home-promos:has(.container + .container + .container + .container) {
gap: 15px;
}
.home-promos .container {
flex: 1 0 0%;
text-align: center;
padding-top: 205px;
background-repeat: no-repeat;
background-position: center 0;
}
.home-promos .container h2,
.home-promos .container h3 {
font-size: 24px;
line-height: 1.2;
margin-block: 0 10px;
}
.home-promos .container p {
padding: 0 30px 30px 30px;
}
.home-promos .container p a {
display: block;
text-transform: uppercase;
margin-top: 10px;
}
.home-promos .container p a span {
display: inline-block;
background: url(images/jewel-more.png) no-repeat right center;
padding-right: 18px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.home-promos .container p a:hover span {
padding-right: 23px;
}
@media all and (max-width:1023px) {
.home-promos .container h2,
.home-promos .container h3 {
margin-inline: 15px;
}
.home-promos .container p {
padding: 0 20px 30px;
}
}
@media all and (max-width:767px) {
.home-promos .container {
width: 300px;
margin: 15px auto !important;
}
.home-promos .container p {
padding: 0 30px 30px;
}
}
.Sorority h2 a,
.Sorority h3 a {
color: #9656d2 !important;
}
.Sorority .button {
background-color: #9656d2;
border-color: #9656d2;
}
.Fraternity h2 a,
.Fraternity h3 a {
color: #278523 !important;
}
.Fraternity .button {
background-color: #278523;
border-color: #278523;
}
.Graduate h2 a,
.Graduate h3 a {
color: #2c7da0 !important;
}
.Graduate .button {
background-color: #2c7da0;
border-color: #2c7da0;
}
.home h2 a:hover,
.home h3 a:hover {
color: #cb433a !important;
}
/*:: Store
----------------------------------------------- */
#store h1 {
text-align: center;
color: #6b6b57;
}
#store h1.no-intro {
margin-bottom: 50px;
}
#store div.intro {
max-width: 568px;
margin: 0 auto;
text-align: center;
padding: 0 0 34px 0;
font-size: 22px;
color: #5f5f4d;
font-weight: 300;
margin-bottom: 6px;
}
#store div.intro p {
margin-bottom: 0;
}
#store #lCol {
position: sticky;
top: 150px;
left: 0;
float: left;
width: 235px;
}
#store #lCol .container {
margin-bottom: 35px;
}
#store #lCol .widget {
padding: 25px;
}
#store #lCol .widget h2,
#store #lCol .widget h4 {
font-size: 20px;
font-family: "proxima-nova", sans-serif;
font-weight: 300;
color: #2c7da0;
margin: 0;
line-height: normal;
}
#store #lCol .widget h2 a,
#store #lCol .widget h4 a {
color: #cb433a;
}
#store #lCol .widget p {
margin-bottom: 0;
}
#store #lCol .widget ul {
margin: 0 0 0 15px;
padding-top: 5px;
}
#store #lCol .widget.login {
background: white url(images/bg-login-widget.png) no-repeat bottom right;
}
#store #lCol .widget.login p {
padding-right: 43px;
}
#store #lCol .widget.chat h2 a,
#store #lCol .widget.chat h4 a {
background: url(images/jewel-live-chat.png) no-repeat left center;
padding-left: 30px;
}
#store #lCol .filter legend {
height: auto;
line-height: 1;
font-size: 20px;
color: #2c7da0;
padding-left: 20px;
padding-top: 1em;
}
#store #lCol .filter ul {
padding: 17px 20px 10px 20px;
border-top: 1px solid #eae9e1;
margin: 0;
list-style: none;
}
#store #lCol .filter ul li {
float: left;
clear: left;
width: 100%;
padding-bottom: 6px;
}
#store #lCol .filter ul input {
margin: 3px 7px 0 0;
border-color: #eae9e1;
float: left;
width: auto;
padding: 0;
height: auto;
accent-color: #2c7da0;
}
#store #lCol .filter ul label {
color: #44442a;
font-size: 16px;
width: 171px;
float: left;
padding: 0;
line-height: 20px;
cursor: pointer;
}
#store #lCol .filter button {
display: none;
}
@media all and (max-width:1023px) {
#store #lCol {
width: 235px;
}
}
@media all and (max-width:767px) {
#store #lCol {
position: static;
float: none;
width: 100%;
margin: 10px auto 0;
clear: both;
max-width: 467px;
background: url(images/bg-promo.png) no-repeat center 0;
padding: 40px 0 35px;
}
}
#store #rCol {
float: right;
width: calc(100% - 255px);
}
#store #rCol h3.no-results {
margin: 0;
font-size: 32px;
font-family: "proxima-nova", sans-serif;
font-weight: 300;
color: #2c7da0;
padding: 25px;
text-align: center;
}
@media all and (max-width:767px) {
#store #rCol {
float: none;
width: 100%;
clear: both;
}
}
#store #items {
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
list-style: none;
margin: 0 0 12px 0;
}
#store #items li {
float: left;
width: 100%;
list-style: none;
margin: 0;
}
#store #items li ul {
float: left;
width: 100%;
margin-left: 0;
list-style: none;
}
#store #items li li {
margin: 0 20px 0 0;
width: 220px;
border: 2px solid #eae9e1;
background: white;
border-radius: 5px;
text-align: center;
padding-bottom: 55px;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#store #items li li .product-frame {
background: #eeeee9;
padding: 30px 0;
width: 100%;
}
#store #items li li .product-frame a {
display: block;
padding: 0 30px;
text-align: center;
}
#store #items li li img {
vertical-align: baseline;
}
#store #items li li h3 {
margin: 0;
}
#store #items li li h3 a {
font-family: "proxima-nova", sans-serif;
font-size: 22px;
color: #cb433a;
line-height: 30px;
display: block;
font-weight: 300;
}
#store #items li li h3 a:hover {
color: #2c7da0;
}
#store #items li li .product-description {
padding: 25px 30px 22px 30px;
position: relative;
}
#store #items li li .product-description .banner-sale {
background: url(images/bg-banner-sale.png) no-repeat 0 0;
height: 39px;
width: 96px;
position: absolute;
left: -8px;
text-indent: -1000em;
top: -22px;
}
#store #items li li .product-description p {
font-size: 14px;
margin-bottom: 0;
}
#store #items li li .price {
position: absolute;
bottom: 0;
height: 55px;
line-height: 55px;
border-top: 1px solid #eae9e1;
width: 100%;
font-size: 20px;
font-family: 300;
margin-bottom: 0;
}
#store #items li li.span2 {
width: 460px;
}
#store #items li li.span3 {
width: 700px;
margin-right: 0;
}
@media all and (max-width:1023px) {
#store #items {
margin-bottom: 12px;
}
}
@media all and (max-width:767px) {
#store #items {
padding-bottom: 1px;
}
#store #items li.item-row {
width: 100%;
float: none;
}
#store #items li.item-row ul {
float: none;
width: 100%;
}
#store #items li.item-row ul li {
width: 100%;
float: none;
display: block;
margin-bottom: 20px;
}
}
@media all and (max-width:479px) {
#store #items {
width: 300px;
margin-inline: auto;
}
#store #items li.item-row ul li .product-frame {
padding: 10px 0;
}
#store #items li.item-row ul li .product-frame a {
padding: 0 10px;
}
}
#store .loading #items {
opacity: 0.75;
}
#store .switching #items {
opacity: 0;
}
html.flexbox li.item-row ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
}
@media all and (max-width:767px) {
html.flexbox li.item-row ul {
display: block !important;
}
}
/*:: Loading Shade
-------------------------------------------------- */
.shade-overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
left: 0;
top: 0;
z-index: 9999;
}
/*:: Product
----------------------------------------------- */
#product {
padding: 35px 0;
}
#product.landscape #camera-card-image {
width: 360px !important;
overflow: hidden;
}
#product.landscape #product-detail-wrapper {
width: auto;
float: none;
margin-left: 390px;
}
#product.landscape #product-wrapper #product-configuration fieldset a.attribute-selector {
width: 99px;
font-size: 14px;
}
#product.landscape #product-wrapper #product-configuration fieldset a.attribute-selector i.no-preview-overlay {
height: 73px;
width: 91px;
line-height: 73px;
}
@media all and (max-width:767px) {
#product.landscape #product-wrapper #product-configuration fieldset a.attribute-selector {
width: 31%;
}
}
#product.landscape #product-wrapper #product-configuration #purchase p,
#product.landscape #product-wrapper #product-configuration #purchase label {
font-size: 18px;
}
@media all and (max-width:1023px) {
#product.landscape #product-wrapper #product-configuration #purchase p {
float: none;
width: auto;
display: block;
}
#product.landscape #product-wrapper #product-configuration #purchase label {
float: left;
}
#product.landscape #product-wrapper #product-configuration #purchase p,
#product.landscape #product-wrapper #product-configuration #purchase label,
#product.landscape #product-wrapper #product-configuration #purchase input,
#product.landscape #product-wrapper #product-configuration #purchase button {
font-size: 15px;
}
}
#product.landscape .configuring #cc-image-holder {
height: 288px !important;
text-align: center;
background: #eeeee9;
}
#product.landscape .configuring #cc-image-holder #user-image {
margin-top: -17px;
height: 315px;
}
#product.landscape .interacting #cc-image-holder {
text-align: left;
}
@media all and (max-width:767px) {
#product.landscape #camera-card-image {
float: none;
margin: 0 auto;
display: block;
}
#product.landscape #product-detail-wrapper {
margin-left: 0;
}
}
@media all and (max-width:479px) {
#product.landscape #camera-card-image {
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
-webkit-transform-origin: center center;
transform-origin: center center;
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
margin-left: -35px;
}
}
#product-wrapper {
padding: 35px;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
border-radius: 10px;
margin: 0 0 0 -35px;
width: 100%;
position: relative;
}
#product-wrapper .close-button {
opacity: 0;
cursor: default;
}
#product-wrapper #configure-tabs {
display: none;
height: 30px;
position: absolute;
top: -35px;
left: 0;
margin: 0;
list-style: none;
}
#product-wrapper #configure-tabs li {
float: left;
height: 35px;
line-height: 35px;
margin-right: 5px;
}
#product-wrapper #configure-tabs li strong {
padding: 0 10px 0 35px;
}
#product-wrapper #configure-tabs li a {
border-radius: 5px 5px 0 0;
display: block;
padding: 0 20px;
color: #353224;
background-color: #e3e3db;
background-repeat: no-repeat;
background-position: 10px center;
}
#product-wrapper #configure-tabs li a.on {
background-color: #eeeee9;
}
#product-wrapper #configure-tabs li a.completed {
background-image: url(images/jewel-complete.png);
padding-left: 30px;
}
#product-wrapper #configure-tabs li a.error {
color: #cb433a;
}
@media all and (max-width:1023px) {
#product-wrapper #configure-tabs {
top: -70px;
font-size: 14px;
}
#product-wrapper #configure-tabs li:first-of-type {
display: block !important;
float: none;
}
#product-wrapper #configure-tabs li:nth-of-type(2) {
margin-left: 10px;
}
#product-wrapper #configure-tabs li strong {
padding-left: 30px;
}
}
@media all and (max-width:767px) {
#product-wrapper #configure-tabs {
font-size: 12px;
top: -50px;
line-height: 20px;
}
#product-wrapper #configure-tabs li {
line-height: 20px;
height: 20px;
width: auto !important;
float: none;
display: inline;
margin: 0 !important;
}
#product-wrapper #configure-tabs li strong {
padding: 0 10px;
background: transparent;
}
#product-wrapper #configure-tabs li a {
padding: 0 10px 0 0;
background-color: transparent;
display: inline-block;
width: 25%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#product-wrapper #configure-tabs li a.on {
background: transparent;
font-weight: 900;
text-decoration: underline;
width: auto;
}
}
#product-wrapper #camera-card-image {
position: relative;
width: 300px;
float: left;
}
#product-wrapper #camera-card-image img {
display: block;
margin: 0 auto;
max-width: none;
}
#product-wrapper #camera-card-image #sample-text {
display: none;
padding-top: 15px;
}
#product-wrapper #camera-card-image #user-image {
display: none;
}
#product-wrapper #camera-card-image #default-image {
max-width: 100%;
}
#product-wrapper #camera-card-image #text-overlays {
position: absolute;
top: 0;
left: 0;
z-index: 110;
display: none;
width: 100%;
height: 100%;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay {
position: absolute;
white-space: nowrap;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Futura-Book {
font-family: "futura-pt";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Futura-Bold {
font-family: "futura-pt";
font-weight: 700;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Museo {
font-family: "museo-slab";
font-weight: 700;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Garamond {
font-family: "garamond-premier-pro-subhead";
font-weight: 700;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-FF-Meta {
font-family: "ff-meta-serif-web-pro";
font-weight: 500;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Skippy {
font-family: "skippy-sharp";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Jubilat {
font-family: "jubilat";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Nimbus {
font-family: "nimbus-sans-condensed";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-SchoolBook {
font-family: "schoolbook-web";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Reklame {
font-family: "reklame-script";
font-weight: 400;
}
#product-wrapper #camera-card-image #text-overlays .text-overlay.font-Sanvito {
font-family: "sanvito-pro";
font-weight: 400;
}
#product-wrapper #camera-card-image #image-overlays {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
}
#product-wrapper #camera-card-image #image-overlays img {
position: absolute;
top: 0;
left: 0;
}
#product-wrapper #camera-card-image #switch-proof {
display: none;
position: absolute;
background: white;
padding: 4px 8px 30px 8px;
line-height: normal;
border-radius: 5px;
border: 2px solid #ccccc8;
top: 0;
left: 10px;
}
#product-wrapper #camera-card-image #switch-proof i {
font-style: normal;
}
#product-wrapper #camera-card-image #custom-text-inputs {
margin: 35px 0 0 0;
display: none;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
list-style: none;
position: relative;
z-index: 10000;
}
#product-wrapper #camera-card-image #custom-text-inputs li {
padding: 0 0 5px 0;
float: left;
width: 100%;
}
#product-wrapper #camera-card-image #custom-text-inputs li.over label {
color: #cb433a;
}
#product-wrapper #camera-card-image #custom-text-inputs label {
float: left;
display: block;
font-size: 14px;
line-height: 34px;
clear: both;
width: 100px;
text-align: right;
padding-right: 10px;
}
#product-wrapper #camera-card-image #custom-text-inputs input {
text-align: left;
height: 30px;
line-height: 30px;
padding: 0 4px;
color: #656456;
float: left;
margin: 0;
width: 238px;
}
#product-wrapper #camera-card-image #custom-text-inputs input.uppercase {
text-transform: uppercase;
}
#product-wrapper #camera-card-image #custom-text-inputs.off {
opacity: 0;
}
#product-wrapper #camera-card-image #text-warning {
clear: both;
color: #cb433a;
margin: 0;
padding-top: 20px;
}
@media all and (max-width:767px) {
#product-wrapper #camera-card-image {
float: none;
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
#product-wrapper #product-detail-wrapper {
float: none;
margin-left: 340px;
}
@media all and (max-width:767px) {
#product-wrapper #product-detail-wrapper {
display: block;
width: 100% !important;
margin-left: 0;
}
}
#product-wrapper #product-details h1 {
font-size: 48px;
color: #6b6b57;
padding-top: 23px;
margin-bottom: 15px;
}
@media all and (max-width:767px) {
#product-wrapper #product-details h1 {
font-size: 36px;
}
}
#product-wrapper #product-details h2.price,
#product-wrapper #product-details h3.price {
font-family: "proxima-nova", sans-serif;
font-weight: 300;
font-size: 26px;
color: #44442a;
margin: 0 0 15px 0;
line-height: 1;
}
#product-wrapper #product-details p {
margin-bottom: 28px;
}
#product-wrapper #product-details #product-actions {
border-top: 2px solid #eae9e1;
padding-top: 35px;
}
#product-wrapper #product-details #product-actions .button,
#product-wrapper #product-details #product-actions .st_sharethis {
display: block;
float: left;
margin: 0 15px 30px 0;
}
#product-wrapper #product-details #product-actions .button {
float: none;
display: inline-block;
height: auto;
padding: 10px 20px;
line-height: 1.25;
white-space: normal;
background-color: #cb433a;
border-color: #cb433a;
color: white !important;
}
#product-wrapper #product-details #product-actions .button:hover {
background-color: #a6332c;
border-color: #a6332c;
}
#product-wrapper #product-details #product-actions .toggle-customize span {
background: white url(images/jewel-add.png) no-repeat 20px center;
padding-left: 40px;
}
#product-wrapper #product-details #product-actions .quickAdd p.error {
float: none;
font-size: 16px;
line-height: 25px;
margin: 0 0 15px 0;
color: #cb433a;
text-align: right;
}
#product-wrapper #product-details #product-actions .quickAdd p {
float: left;
line-height: 45px;
padding: 0;
font-size: 22px;
color: #5c5c48;
font-weight: 300;
}
#product-wrapper #product-details #product-actions .quickAdd button,
#product-wrapper #product-details #product-actions .quickAdd input,
#product-wrapper #product-details #product-actions .quickAdd label {
float: right;
}
#product-wrapper #product-details #product-actions .quickAdd input {
height: 45px;
line-height: 45px;
width: 50px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#product-wrapper #product-details #product-actions .quickAdd label {
line-height: 45px;
font-size: 22px;
font-weight: 200;
margin-right: 10px;
color: #5c5c48;
}
#product-wrapper #product-details #product-actions .quickAdd button {
margin-left: 10px;
}
@media all and (max-width:1023px) {
#product-wrapper #product-details #product-actions .quickAdd p {
float: none;
display: block;
}
#product-wrapper #product-details #product-actions .quickAdd input,
#product-wrapper #product-details #product-actions .quickAdd label {
display: inline;
float: none;
font-size: 14px;
}
#product-wrapper #product-details #product-actions .quickAdd button {
font-size: 13px;
}
}
#product-wrapper #product-details #product-options {
border-top: 2px solid #eae9e1;
padding-top: 35px;
clear: both;
}
#product-wrapper #product-details #product-options h3,
#product-wrapper #product-details #product-options h4 {
font-size: 22px;
font-family: "proxima-nova", sans-serif;
font-weight: 300;
color: #5e5e4b;
margin: 0 0 6px;
}
#product-wrapper #product-details #product-options ul {
list-style: none;
margin-left: 0;
}
#product-wrapper #product-details #product-options ul li {
float: left;
width: 189px;
}
#product-wrapper #product-details #product-options ul li a {
color: #9656d2;
background: url(images/jewel-bullet.png) no-repeat 0 center;
padding-left: 11px;
}
#product-wrapper #product-details #product-options ul li a.on {
color: #cb433a;
background-image: url(images/jewel-bullet-on.png);
cursor: default;
}
#product-wrapper #product-details #product-options ul li a:hover {
color: #cb433a;
}
#product-wrapper #product-configuration {
display: none;
}
#product-wrapper #product-configuration .panel {
padding-bottom: 0;
display: none;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
#product-wrapper #product-configuration .panel.error {
padding-bottom: 105px !important;
}
#product-wrapper #product-configuration fieldset {
display: none;
padding-bottom: 23px;
}
#product-wrapper #product-configuration fieldset legend {
font-size: 36px;
color: #2c7da0;
line-height: normal;
padding-top: 25px;
}
#product-wrapper #product-configuration fieldset p {
font-size: 22px;
color: #5c5c48;
font-weight: 300;
padding: 8px 0 44px 0;
margin-bottom: 0;
}
#product-wrapper #product-configuration fieldset hr {
clear: both;
margin: 0;
height: 0;
border: none;
}
@media all and (max-width:1023px) {
#product-wrapper #product-configuration fieldset hr {
display: none;
}
}
#product-wrapper #product-configuration fieldset a.attribute-selector {
float: none;
display: inline-block;
vertical-align: top;
width: 111px;
text-align: center;
color: #44442a;
font-size: 14px;
margin: 0 0 20px;
line-height: 16px;
}
#product-wrapper #product-configuration fieldset a.attribute-selector img {
display: block;
border-radius: 10px;
max-width: 100%;
background: white;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
border: 4px solid #eae9e1;
}
#product-wrapper #product-configuration fieldset a.attribute-selector span {
display: block;
padding: 0 3px 3px 0;
border-radius: 10px;
background: url(images/stripe-shadow.png) repeat 0 0;
width: 100%;
min-height: 50px;
margin-bottom: 5px;
}
#product-wrapper #product-configuration fieldset a.attribute-selector i.no-preview-overlay {
display: block;
background: white;
color: #5c5c48;
border: 4px solid #eae9e1;
margin-bottom: 0;
width: 100px;
height: 70px;
line-height: 70px;
border-radius: 10px;
font-style: normal;
font-size: 16px;
}
#product-wrapper #product-configuration fieldset a.attribute-selector.first {
margin-left: 0;
}
#product-wrapper #product-configuration fieldset a.attribute-selector.selected i.no-preview-overlay,
#product-wrapper #product-configuration fieldset a.attribute-selector.selected img {
border-color: #2c7da0;
}
#product-wrapper #product-configuration fieldset a.attribute-selector:active span {
padding: 3px 0 0 3px;
background: none;
}
#product-wrapper #product-configuration fieldset a.attribute-selector.off {
display: none;
}
#product-wrapper #product-configuration fieldset.on {
display: block;
}
#product-wrapper #product-configuration fieldset.error legend,
#product-wrapper #product-configuration fieldset.error p {
color: #cb433a !important;
}
#product-wrapper #product-configuration fieldset #purchase {
border-top: 2px solid #eae9e1;
padding-top: 36px;
clear: both;
float: left;
margin-top: 35px;
width: 100%;
}
#product-wrapper #product-configuration fieldset #purchase p {
float: left;
line-height: 45px;
padding: 0;
}
#product-wrapper #product-configuration fieldset #purchase p.error {
float: none;
font-size: 16px;
line-height: 25px;
margin: 0 0 15px 0;
color: #cb433a;
text-align: right;
}
#product-wrapper #product-configuration fieldset #purchase label {
float: right;
line-height: 45px;
font-size: 22px;
font-weight: 300;
margin-right: 10px;
color: #5c5c48;
}
#product-wrapper #product-configuration fieldset #purchase input {
float: right;
height: 45px;
line-height: 45px;
width: 50px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
border-color: #eae9e1;
font-size: 16px;
margin-bottom: 0;
}
#product-wrapper #product-configuration fieldset #purchase button {
float: right;
margin-left: 10px;
}
#product-wrapper #product-configuration fieldset #purchase.error {
padding-top: 25px;
}
#product-wrapper #product-configuration fieldset.review p {
padding-bottom: 24px;
}
#product-wrapper #product-configuration fieldset.review .review-configs {
margin: 0 0 12px 0;
padding: 0 5px 5px 0;
border-radius: 10px;
background: url(images/stripe-shadow.png) repeat 0 0;
}
#product-wrapper #product-configuration fieldset.review .review-nest {
background: white;
border-radius: 10px;
border: 2px solid #eae9e1;
padding: 20px;
}
#product-wrapper #product-configuration fieldset.review h6 {
font-size: 22px;
font-weight: 300;
color: #353224;
margin-bottom: 1px;
}
#product-wrapper #product-configuration fieldset.review ul {
margin: 0;
line-height: 25px;
list-style: none;
}
#product-wrapper #product-configuration .product-review #purchase {
bottom: 35px;
position: absolute;
right: 35px;
width: 635px;
}
#product-wrapper #product-configuration .configure-controls {
position: relative;
width: 100%;
border-top: 2px solid #eae9e1;
height: 86px;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
-ms-transition: opacity 0.25s ease-out;
-o-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
opacity: 0;
/* DEBUG THESE STYLES */
}
#product-wrapper #product-configuration .configure-controls.error {
height: 110px;
}
#product-wrapper #product-configuration .configure-controls.error p {
display: block;
}
#product-wrapper #product-configuration .configure-controls p {
float: none;
font-size: 18px;
line-height: 25px;
margin: 25px 0 0 0;
color: #cb433a;
text-align: right;
display: none;
}
#product-wrapper #product-configuration .configure-controls .button {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
display: block;
}
#product-wrapper #product-configuration .configure-controls .button.prev {
padding-left: 38px;
background: white url(images/jewel-prev.png) no-repeat 20px center;
}
#product-wrapper #product-configuration .configure-controls .button.advance,
#product-wrapper #product-configuration .configure-controls .button.next {
padding-right: 38px;
background: white url(images/jewel-next.png) no-repeat right center;
left: auto;
right: 0;
}
#product-wrapper #product-configuration .configure-controls .button.copy {
right: 116px;
left: auto;
}
#product-wrapper #product-configuration .configure-controls .button.off {
display: none;
}
#product-wrapper #product-configuration .configure-controls .button:active {
background-color: #cb433a;
}
#product-wrapper #product-configuration .configure-controls .tics {
text-align: center;
height: 6px;
width: 100%;
position: absolute;
bottom: 20px;
margin-bottom: 0;
line-height: 0;
z-index: 10;
}
#product-wrapper #product-configuration .configure-controls .tics li {
height: 6px;
width: 6px;
display: inline-block;
padding: 0 5px;
margin-top: -1px;
}
#product-wrapper #product-configuration .configure-controls .tics li a {
height: 6px;
width: 6px;
border-radius: 10px;
background: #bbbab0;
display: block;
border: 1px solid #eeeee9;
text-indent: -1000em;
}
#product-wrapper #product-configuration .configure-controls .tics li a.completed {
background-color: #278523;
}
#product-wrapper #product-configuration .configure-controls .tics li a.error {
background-color: #cb433a;
}
#product-wrapper #product-configuration .configure-controls .tics li.on a {
background: transparent;
border-color: #bbbab0;
}
#product-wrapper #product-configuration .configure-controls .tics li.on a.completed {
border-color: #278523;
background: transparent;
}
#product-wrapper #product-configuration .configure-controls .tics li.on a.error {
border-color: #cb433a;
background: transparent;
}
#product-wrapper #product-configuration .configure-controls .tics li.off {
display: none;
}
@media all and (max-width:1023px) {
#product-wrapper #product-configuration .configure-controls .tics {
margin-left: 0;
}
}
#product-wrapper.configuring {
background: #eeeee9;
}
#product-wrapper.configuring .close-button {
opacity: 1;
cursor: pointer;
}
#product-wrapper.configuring.has-tabs {
margin-top: 35px;
}
#product-wrapper.configuring #product-configuration .panel {
padding-bottom: 86px;
}
#product-wrapper.configuring #product-configuration .configure-controls {
opacity: 1;
}
#product-wrapper.configuring #camera-card-image #switch-proof {
top: -29px;
display: block;
}
#product-wrapper.configuring #camera-card-image #switch-proof:hover {
top: -40px;
border-color: #cb433a;
}
#product-wrapper.configuring #camera-card-image #sample-text {
display: block;
}
#product-wrapper.configuring #cc-image-holder {
overflow: hidden;
position: relative;
z-index: 10;
height: 378px;
}
#product-wrapper.configuring #cc-image-holder img {
margin-top: -22px;
height: 382px;
object-fit: contain;
}
@media all and (max-width:1023px) {
#product-wrapper {
margin-left: 0;
width: auto;
}
}
@media all and (max-width:479px) {
#product-wrapper {
padding: 20px 10px;
}
}
#recommendations {
padding-top: 63px;
text-align: center;
}
#recommendations .row {
padding-bottom: 70px;
vertical-align: top;
}
#recommendations h2 {
color: #2c7da0;
text-align: center;
font-size: 40px;
margin-bottom: 26px;
}
#recommendations .product {
margin: 0 1%;
vertical-align: top;
width: 22%;
float: none;
display: inline-block;
border: 2px solid #eae9e1;
border-radius: 5px;
text-align: center;
padding-bottom: 55px;
position: relative;
color: #44442a;
}
#recommendations .product .product-frame {
background: #eeeee9;
padding: 30px;
width: auto;
}
#recommendations .product .product-frame img {
max-width: 100%;
}
#recommendations .product .product-description {
padding: 25px 18px 22px;
position: relative;
}
#recommendations .product .product-description h3,
#recommendations .product .product-description h5 {
font-family: "proxima-nova", sans-serif;
font-size: 20px;
color: #cb433a;
line-height: 25px;
min-height: 50px;
display: block;
font-weight: 300;
margin: 0;
}
#recommendations .product .product-description h3 a,
#recommendations .product .product-description h5 a {
color: #cb433a;
}
#recommendations .product .product-description h3 a:hover,
#recommendations .product .product-description h5 a:hover {
color: #2c7da0;
}
#recommendations .product .product-description p {
font-size: 14px;
margin-bottom: 0;
}
#recommendations .product .price {
position: absolute;
bottom: 0;
height: 55px;
line-height: 55px;
border-top: 1px solid #eae9e1;
width: 100%;
font-size: 20px;
font-family: 300;
margin-bottom: 0;
}
@media all and (max-width:1023px) {
#recommendations .product .product-description h5 a {
font-size: 15px;
line-height: 20px;
min-height: 40px;
}
}
@media all and (max-width:767px) {
#recommendations .product {
width: 45%;
margin-bottom: 3%;
}
#recommendations .product .product-description h5 a {
font-size: 20px;
line-height: 25px;
min-height: 50px;
}
}
@media all and (max-width:479px) {
#recommendations .product {
width: 100%;
margin: 0 auto 20px;
}
}
@media all and (max-width:479px) {
#recommendations {
display: none;
}
}
/*:: Cart, Checkout & Account
----------------------------------------------- */
#retouch-larger img {
display: block;
margin: 0 auto;
}
#cart .col3,
#checkout .col3 {
float: left;
margin-right: 0;
width: 55%;
}
#cart .col3.last,
#checkout .col3.last {
float: right;
margin-left: 0;
width: 55%;
}
#cart .col2.last,
#checkout .col2.last {
float: right;
width: 42%;
}
#cart .row > .col2:first-child,
#checkout .row > .col2:first-child {
margin-right: 0;
}
@media all and (max-width:1023px) {
#cart .col2,
#checkout .col2,
#cart .col3,
#checkout .col3 {
float: none !important;
width: 100% !important;
}
}
@media all and (max-width:767px) {
#cart .col3,
#checkout .col3,
#cart .col2.last,
#checkout .col2.last {
float: none;
width: auto;
}
}
#cart .money,
#checkout .money {
text-align: right;
}
#cart .discount,
#checkout .discount {
color: #278523;
}
#cart .totals,
#checkout .totals {
color: #656456;
}
#cart table,
#checkout table {
width: 100%;
}
#cart table td,
#checkout table td,
#cart table th,
#checkout table th {
vertical-align: top;
text-align: left;
padding: 15px 15px 15px 0;
min-height: 30px;
}
#cart table td,
#checkout table td {
border-top: 1px solid #eeeee9;
}
#cart table td:first-child,
#checkout table td:first-child,
#cart table th:first-child,
#checkout table th:first-child {
padding-left: 15px;
}
#cart table input,
#checkout table input {
height: 20px;
line-height: 20px;
margin-bottom: 0;
padding: 3px;
color: #656456;
float: left;
}
#cart table select,
#checkout table select {
padding: 3px;
height: 30px;
}
#cart table .top th,
#checkout table .top th,
#cart table .top td,
#checkout table .top td {
border-top: 0 !important;
}
#cart table .field-validation-error,
#checkout table .field-validation-error {
color: #cb433a;
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
display: block;
}
#cart table strong,
#checkout table strong {
color: #656456;
font-weight: 400;
}
#cart #shopping-cart,
#checkout #shopping-cart,
#cart #order-status,
#checkout #order-status {
margin-bottom: 35px;
overflow-x: auto;
}
#cart #shopping-cart img.thumb,
#checkout #shopping-cart img.thumb,
#cart #order-status img.thumb,
#checkout #order-status img.thumb {
max-width: 60px;
display: block;
}
#cart #shopping-cart h4,
#checkout #shopping-cart h4,
#cart #order-status h4,
#checkout #order-status h4,
#cart #shopping-cart .h4,
#checkout #shopping-cart .h4,
#cart #order-status .h4,
#checkout #order-status .h4 {
margin-top: 0;
font-size: 16px;
line-height: 25px;
color: #656456;
}
#cart #shopping-cart h4 span,
#checkout #shopping-cart h4 span,
#cart #order-status h4 span,
#checkout #order-status h4 span,
#cart #shopping-cart .h4 span,
#checkout #shopping-cart .h4 span,
#cart #order-status .h4 span,
#checkout #order-status .h4 span {
font-size: 12px;
display: block;
opacity: 0.75;
color: #44442a;
}
#cart #shopping-cart .quantity-control,
#checkout #shopping-cart .quantity-control,
#cart #order-status .quantity-control,
#checkout #order-status .quantity-control {
float: left;
min-width: 85px;
}
#cart #shopping-cart .quantity-control button,
#checkout #shopping-cart .quantity-control button,
#cart #order-status .quantity-control button,
#checkout #order-status .quantity-control button {
margin-left: 8px;
visibility: hidden;
position: absolute;
left: -999999em;
}
@media all and (max-width:767px) {
#cart #shopping-cart .quantity-control button,
#checkout #shopping-cart .quantity-control button,
#cart #order-status .quantity-control button,
#checkout #order-status .quantity-control button {
position: static;
left: auto;
visibility: visible;
}
}
#cart #shopping-cart a.delete,
#checkout #shopping-cart a.delete,
#cart #order-status a.delete,
#checkout #order-status a.delete,
#cart #shopping-cart a.delete-retouching,
#checkout #shopping-cart a.delete-retouching,
#cart #order-status a.delete-retouching,
#checkout #order-status a.delete-retouching {
float: left;
padding-left: 5px;
color: #eae9e1;
}
#cart #shopping-cart a.delete i,
#checkout #shopping-cart a.delete i,
#cart #order-status a.delete i,
#checkout #order-status a.delete i,
#cart #shopping-cart a.delete-retouching i,
#checkout #shopping-cart a.delete-retouching i,
#cart #order-status a.delete-retouching i,
#checkout #order-status a.delete-retouching i {
font-size: 23px;
display: block;
margin-top: 3px;
}
#cart #shopping-cart a.delete:hover,
#checkout #shopping-cart a.delete:hover,
#cart #order-status a.delete:hover,
#checkout #order-status a.delete:hover,
#cart #shopping-cart a.delete-retouching:hover,
#checkout #shopping-cart a.delete-retouching:hover,
#cart #order-status a.delete-retouching:hover,
#checkout #order-status a.delete-retouching:hover {
color: #cb433a;
}
#cart #shopping-cart .no-value strong,
#checkout #shopping-cart .no-value strong,
#cart #order-status .no-value strong,
#checkout #order-status .no-value strong {
display: block;
height: 30px;
line-height: 30px;
width: 60px;
text-align: center;
float: left;
}
#cart #shopping-cart thead th,
#checkout #shopping-cart thead th,
#cart #order-status thead th,
#checkout #order-status thead th,
#cart #shopping-cart thead td,
#checkout #shopping-cart thead td,
#cart #order-status thead td,
#checkout #order-status thead td {
padding-bottom: 5px;
font-size: 20px;
font-weight: 300;
}
#cart #shopping-cart tbody tr.even td,
#checkout #shopping-cart tbody tr.even td,
#cart #order-status tbody tr.even td,
#checkout #order-status tbody tr.even td,
#cart #shopping-cart tbody tr.even th,
#checkout #shopping-cart tbody tr.even th,
#cart #order-status tbody tr.even th,
#checkout #order-status tbody tr.even th {
background: #f8f8f7;
}
#cart #shopping-cart tbody input,
#checkout #shopping-cart tbody input,
#cart #order-status tbody input,
#checkout #order-status tbody input {
width: 50px;
}
#cart #shopping-cart tbody .deletedItem p,
#checkout #shopping-cart tbody .deletedItem p,
#cart #order-status tbody .deletedItem p,
#checkout #order-status tbody .deletedItem p {
margin-bottom: 0;
color: #353224;
text-align: center;
}
#cart #shopping-cart tbody .deletedItem p span,
#checkout #shopping-cart tbody .deletedItem p span,
#cart #order-status tbody .deletedItem p span,
#checkout #order-status tbody .deletedItem p span {
display: none;
}
#cart #shopping-cart tfoot td,
#checkout #shopping-cart tfoot td,
#cart #order-status tfoot td,
#checkout #order-status tfoot td,
#cart #shopping-cart tfoot th,
#checkout #shopping-cart tfoot th,
#cart #order-status tfoot th,
#checkout #order-status tfoot th {
text-align: right;
}
#cart #shopping-cart tfoot th,
#checkout #shopping-cart tfoot th,
#cart #order-status tfoot th,
#checkout #order-status tfoot th {
font-weight: 600;
color: #656456;
font-size: 16px;
line-height: 30px;
border-top: 1px solid #eeeee9;
}
#cart #shopping-cart tfoot .inline-form,
#checkout #shopping-cart tfoot .inline-form,
#cart #order-status tfoot .inline-form,
#checkout #order-status tfoot .inline-form {
padding-left: 0;
}
#cart #shopping-cart tfoot .inline-form h6,
#checkout #shopping-cart tfoot .inline-form h6,
#cart #order-status tfoot .inline-form h6,
#checkout #order-status tfoot .inline-form h6,
#cart #shopping-cart tfoot .inline-form input,
#checkout #shopping-cart tfoot .inline-form input,
#cart #order-status tfoot .inline-form input,
#checkout #order-status tfoot .inline-form input,
#cart #shopping-cart tfoot .inline-form button,
#checkout #shopping-cart tfoot .inline-form button,
#cart #order-status tfoot .inline-form button,
#checkout #order-status tfoot .inline-form button,
#cart #shopping-cart tfoot .inline-form select,
#checkout #shopping-cart tfoot .inline-form select,
#cart #order-status tfoot .inline-form select,
#checkout #order-status tfoot .inline-form select {
margin: 0 5px 0 0;
display: inline-block;
float: left;
}
#cart #shopping-cart tfoot .inline-form h6,
#checkout #shopping-cart tfoot .inline-form h6,
#cart #order-status tfoot .inline-form h6,
#checkout #order-status tfoot .inline-form h6 {
width: 200px;
text-align: right;
}
#cart #shopping-cart tfoot .inline-form input,
#checkout #shopping-cart tfoot .inline-form input,
#cart #order-status tfoot .inline-form input,
#checkout #order-status tfoot .inline-form input {
text-align: left;
}
#cart #cart-totals,
#checkout #cart-totals {
margin-bottom: 35px;
}
#cart #cart-totals td,
#checkout #cart-totals td,
#cart #cart-totals th,
#checkout #cart-totals th {
text-align: right;
}
#cart #cart-totals th,
#checkout #cart-totals th {
border-top: 1px solid #eeeee9;
}
#cart #cart-totals .mini,
#checkout #cart-totals .mini {
border-top: 0;
font-size: 13px;
padding: 0 15px 5px 0;
}
#cart #cart-totals .mini a,
#checkout #cart-totals .mini a,
#cart #cart-totals .mini span,
#checkout #cart-totals .mini span {
margin-top: -10px;
}
#cart #cart-totals td.totals,
#checkout #cart-totals td.totals {
width: 110px;
}
#cart #cart-totals .toggler,
#checkout #cart-totals .toggler {
display: block;
}
#cart #cart-totals .appended-form input,
#checkout #cart-totals .appended-form input,
#cart #cart-totals .appended-form select,
#checkout #cart-totals .appended-form select,
#cart #cart-totals .appended-form label,
#checkout #cart-totals .appended-form label,
#cart #cart-totals .appended-form button,
#checkout #cart-totals .appended-form button {
float: left;
}
#cart #cart-totals .appended-form input,
#checkout #cart-totals .appended-form input {
width: 120px;
text-align: left;
margin-right: 5px;
}
#cart #cart-totals .appended-form label,
#checkout #cart-totals .appended-form label {
font-size: 13px;
height: 30px;
line-height: 30px;
margin-right: 10px;
}
#cart #cart-totals .appended-form select,
#checkout #cart-totals .appended-form select {
width: 100px;
margin-right: 5px;
}
#cart #cart-totals .appended-form button i,
#checkout #cart-totals .appended-form button i {
margin: 0;
}
#cart #cart-totals .appended-form .form-wrapper,
#checkout #cart-totals .appended-form .form-wrapper {
float: right;
}
#cart #cart-totals .appended-form input.input-append,
#checkout #cart-totals .appended-form input.input-append,
#cart #cart-totals .appended-form select.input-append,
#checkout #cart-totals .appended-form select.input-append {
margin-right: 0;
border-radius: 5px 0 0 5px;
}
#cart #cart-totals .appended-form input.input-append + button,
#checkout #cart-totals .appended-form input.input-append + button,
#cart #cart-totals .appended-form select.input-append + button,
#checkout #cart-totals .appended-form select.input-append + button {
border-radius: 0 5px 5px 0;
border-left: 0;
color: #cb433a;
}
#cart #cart-totals .appended-form input.input-append + button:hover,
#checkout #cart-totals .appended-form input.input-append + button:hover,
#cart #cart-totals .appended-form select.input-append + button:hover,
#checkout #cart-totals .appended-form select.input-append + button:hover {
background-color: #cb433a;
color: white;
-webkit-transition: all 0.0625s ease-out;
-moz-transition: all 0.0625s ease-out;
-ms-transition: all 0.0625s ease-out;
-o-transition: all 0.0625s ease-out;
transition: all 0.0625s ease-out;
}
#cart #cart-totals tr.grandTotal,
#checkout #cart-totals tr.grandTotal {
font-size: 20px;
}
#cart #cart-totals tr.grandTotal th,
#checkout #cart-totals tr.grandTotal th {
font-weight: 600;
color: #656456;
}
#cart #remove-discount,
#checkout #remove-discount {
color: #eae9e1;
padding: 0;
margin: 0;
background: transparent;
border: 0;
cursor: pointer;
font-size: 16px;
}
#cart #remove-discount:hover,
#checkout #remove-discount:hover {
color: #cb433a;
}
#cart .cart-wrapper,
#checkout .cart-wrapper {
clear: both;
}
@media all and (max-width:1023px) {
#cart .cart-wrapper > h2,
#checkout .cart-wrapper > h2 {
max-width: 538px;
margin-left: auto;
margin-right: auto;
float: none;
}
}
#cart #address-validation,
#checkout #address-validation {
padding-left: 170px;
}
#cart .address-choice,
#checkout .address-choice {
display: inline-block;
padding: 20px 0;
background: white;
border-radius: 5px;
cursor: pointer;
transition: all 0.25s ease-out;
border: 2px solid #cb433a;
text-transform: uppercase;
color: #cb433a !important;
white-space: nowrap;
font-size: 16px;
margin-right: 50px;
min-width: 295px;
text-align: center;
margin-bottom: 20px;
}
#cart .address-choice--chosen,
#checkout .address-choice--chosen {
background: #faffbd;
}
#cart .address-choice--large,
#checkout .address-choice--large {
min-height: 75px;
}
#cart .address-choice__header,
#checkout .address-choice__header {
font-size: 24px;
line-height: 150%;
color: #cb433a;
width: 295px;
text-align: center;
}
#cart .address-invalid,
#checkout .address-invalid {
opacity: 0.4;
cursor: not-allowed !important;
}
#cart .address-character-error,
#checkout .address-character-error {
border-color: #cb433a;
outline: none;
}
#cart .character-error,
#checkout .character-error {
display: none;
clear: both;
margin-left: 170px;
color: #cb433a;
font-size: 14px;
padding-bottom: 5px;
}
@media all and (max-width:767px) {
#cart #order-status table,
#checkout #order-status table,
#cart #order-status thead,
#checkout #order-status thead,
#cart #order-status tbody,
#checkout #order-status tbody,
#cart #order-status th,
#checkout #order-status th,
#cart #order-status td,
#checkout #order-status td,
#cart #order-status tr,
#checkout #order-status tr {
display: block;
}
#cart #order-status thead tr,
#checkout #order-status thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#cart #order-status tr,
#checkout #order-status tr {
border: 1px solid #cccccc;
}
#cart #order-status td,
#checkout #order-status td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eeeeee;
position: relative;
padding: 15px;
padding-left: 40%;
}
#cart #order-status td:before,
#checkout #order-status td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 0;
width: 40%;
padding: 15px;
white-space: nowrap;
}
#cart #order-status td:nth-of-type(1):before,
#checkout #order-status td:nth-of-type(1):before {
content: "Order No.";
}
#cart #order-status td:nth-of-type(2):before,
#checkout #order-status td:nth-of-type(2):before {
content: "Order Date";
}
#cart #order-status td:nth-of-type(3):before,
#checkout #order-status td:nth-of-type(3):before {
content: "Amount";
}
#cart #order-status td:nth-of-type(4):before,
#checkout #order-status td:nth-of-type(4):before {
content: "Status";
}
#cart #order-status td:nth-of-type(5):before,
#checkout #order-status td:nth-of-type(5):before {
content: "Shipped To:";
}
}
@media all and (max-width:767px) {
#cart table.cart-table,
#checkout table.cart-table {
display: block;
}
#cart table.cart-table thead,
#checkout table.cart-table thead {
display: block;
}
#cart table.cart-table thead tr,
#checkout table.cart-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#cart table.cart-table tbody,
#checkout table.cart-table tbody {
display: block;
}
#cart table.cart-table tbody tr,
#checkout table.cart-table tbody tr {
border: 1px solid #eeeee9;
display: block;
}
#cart table.cart-table tbody tr td,
#checkout table.cart-table tbody tr td {
display: block;
border: none;
border-bottom: 1px solid #eeeeee;
position: relative;
padding: 15px;
padding-left: 40%;
text-align: left;
}
#cart table.cart-table tbody tr td:before,
#checkout table.cart-table tbody tr td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 0;
left: 0;
width: 40%;
padding: 15px;
white-space: nowrap;
font-weight: 700;
}
#cart table.cart-table tbody tr td:first-of-type,
#checkout table.cart-table tbody tr td:first-of-type {
display: none !important;
}
#cart table.cart-table tbody tr td:nth-of-type(1):before,
#checkout table.cart-table tbody tr td:nth-of-type(1):before {
content: "";
}
#cart table.cart-table tbody tr td:nth-of-type(2):before,
#checkout table.cart-table tbody tr td:nth-of-type(2):before {
content: "Name";
}
#cart table.cart-table tbody tr td:nth-of-type(3):before,
#checkout table.cart-table tbody tr td:nth-of-type(3):before {
content: "Description";
}
#cart table.cart-table tbody tr td:nth-of-type(4):before,
#checkout table.cart-table tbody tr td:nth-of-type(4):before {
content: "Quantity";
}
#cart table.cart-table tbody tr td:nth-of-type(5):before,
#checkout table.cart-table tbody tr td:nth-of-type(5):before {
content: "Price";
}
#cart table.cart-table tbody tr td:nth-of-type(6):before,
#checkout table.cart-table tbody tr td:nth-of-type(6):before {
content: "Total";
}
#cart table.cart-table tfoot,
#checkout table.cart-table tfoot {
width: 100%;
display: table;
}
#cart table.cart-table tfoot tr td:first-child,
#checkout table.cart-table tfoot tr td:first-child {
padding: 15px 0;
}
#cart table.cart-table tfoot tr th,
#checkout table.cart-table tfoot tr th {
width: 40%;
text-align: left !important;
padding: 15px;
}
#cart table.cart-table tfoot tr td.totals,
#checkout table.cart-table tfoot tr td.totals {
text-align: left !important;
}
}
#cart .cart-alert {
text-align: center;
margin-bottom: 35px;
padding: 20px 40px;
}
#cart .cart-alert p {
margin-bottom: 0;
}
#cart .cart-alert.error {
border-color: #cb433a;
}
#cart .cart-alert.error p {
color: #cb433a;
}
#cart h1 {
text-align: center;
color: #2c7da0;
}
#cart i {
font-style: normal;
}
#cart #retouching {
margin: 0 0 35px 0;
}
#cart #retouching .info {
padding: 31px 35px 5px 35px;
}
#cart #retouching .action {
padding: 29px 35px 19px 35px;
border-width: 1px 0;
border-style: solid;
border-color: #eae9e1;
}
#cart #retouching .action .trigger-retouching {
margin-bottom: 10px;
color: #656456;
}
#cart #retouching .action .trigger-retouching:last-of-type {
margin-bottom: 0;
}
#cart #retouching .action .trigger-retouching label {
margin-right: 10px;
}
#cart #retouching .action .details {
float: left;
width: 100%;
margin-bottom: 20px;
position: relative;
background: #eeeee9;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#cart #retouching .action .details p.error {
color: #cb433a;
text-align: center;
display: block;
width: 100%;
margin-bottom: 8px;
}
#cart #retouching .action .details a.view-large-modal {
overflow: hidden;
float: left;
width: 150px;
height: 182px;
margin-right: 10px;
display: block;
}
#cart #retouching .action .details img {
margin-top: -17px;
display: block;
width: 100%;
}
#cart #retouching .action .details textarea {
float: right;
padding: 10px;
width: 48%;
display: block;
margin: 0;
height: 158px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
#cart #retouching .action .details textarea.error {
color: #cb433a;
border-color: #cb433a;
}
#cart #retouching .action .details p {
float: left;
height: 26px;
line-height: 26px;
margin-bottom: 0;
font-size: 14px;
}
#cart #retouching .action .details p span.error {
color: #cb433a;
}
#cart #retouching .action .details p.charcount {
float: right;
clear: right;
}
#cart #retouching .action .details p.retouching-disclaimer {
float: right;
clear: right;
}
#cart #retouching .action .details button {
float: left;
}
@media all and (max-width:1023px) {
#cart #retouching .action .details a.view-large-modal {
float: none;
margin: 0 auto 10px;
}
#cart #retouching .action .details textarea {
float: none;
width: 100%;
}
}
@media all and (max-width:767px) {
#cart #retouching .action .details a.view-large-modal {
float: left;
margin: 0 10px 0 0;
}
#cart #retouching .action .details textarea {
float: right;
width: 50%;
}
}
@media all and (max-width:479px) {
#cart #retouching .action .details a.view-large-modal {
float: none;
margin: 0 auto 10px;
}
#cart #retouching .action .details textarea {
float: none;
width: 100%;
}
}
#cart #retouching .action #apply-retouching {
margin-bottom: 10px;
}
#cart #retouching h2 {
color: #2c7da0;
font-size: 32px;
margin-top: 0;
line-height: normal;
margin: 25px 0 20px 35px;
}
#cart #retouching p.intro {
margin-bottom: 21px;
}
#cart #retouching ul {
float: left;
width: 100%;
list-style: none;
margin-left: 0;
}
#cart #retouching ul li {
float: left;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
background: url(images/jewel-bullet.png) no-repeat left 0.5em;
padding-left: 11px;
}
@media all and (max-width:479px) {
#cart #retouching ul li {
float: none;
width: 100%;
}
}
#checkout {
padding-top: 63px;
}
#checkout h2,
#checkout .h2 {
clear: both;
color: #2c7da0;
margin: 20px 0 15px 0;
float: left;
width: 100%;
}
#checkout .h2 {
font-size: 40px;
padding-top: 0;
}
#checkout #copyToShipping {
float: left;
clear: both;
margin: -15px 0 15px 170px;
}
#checkout #copyToShipping i {
font-style: normal;
}
#checkout ul#credit-information {
margin-left: 0;
}
#checkout-controls-top {
width: 100%;
border-bottom: 1px solid #eeeee9;
padding-bottom: 15px;
margin-bottom: 15px;
}
#checkout-controls-top a {
line-height: 45px;
margin-right: 15px;
}
#checkout-controls {
padding-bottom: 70px;
border-top: 1px solid #eeeee9;
padding-top: 15px;
clear: both;
}
#checkout-controls a {
line-height: 45px;
margin-right: 15px;
}
#thanks {
text-align: center;
}
#thanks h1 {
color: #2c7da0;
}
#thanks p.intro {
background: url(images/bg-promo.png) no-repeat center bottom;
padding-bottom: 34px;
margin-bottom: 35px;
}
#thanks p {
clear: both;
}
#account h1 {
color: #2c7da0;
text-align: center;
margin-bottom: 25px;
}
#account .validation-summary-errors {
clear: both;
text-align: center;
color: #cb433a;
}
#account .validation-summary-errors ul {
color: #cb433a;
list-style: none;
margin-left: 0;
}
#account p.intro {
margin-bottom: 35px;
text-align: center;
}
#account ul.field-block {
text-align: center;
margin: 0 0 60px 0;
list-style: none;
}
#account ul.field-block li {
margin: 0 0 10px 0;
}
#account ul.field-block label {
display: inline-block;
float: none;
}
#account ul.field-block input {
float: none;
text-align: center;
height: 46px;
width: 500px;
margin: 0;
}
#account ul.field-block .control {
padding-top: 10px;
}
#account ul.field-block .control button {
float: none;
margin: 0 10px 0 0;
}
#account ul.field-block .field-validation-error {
float: none;
margin: 0 auto;
display: block;
}
.order-information h6 {
font-size: 24px;
font-weight: 300;
margin-bottom: 5px;
}
.order-information ul {
margin-left: 0 !important;
list-style: none !important;
}
.order-information ul li {
background: url(images/jewel-bullet.png) no-repeat 0 center;
padding-left: 14px;
}
/*:: Day of Payment
----------------------------------------------- */
#main.day-of-payment,
#main.day-of-payment-thank-you {
clear: both;
padding-bottom: 36px;
max-width: 970px;
}
@media only screen and (max-width: 768px) {
#main.day-of-payment,
#main.day-of-payment-thank-you {
margin-top: 3em;
}
}
.container.day-of-payment *,
.container.day-of-payment-thank-you * {
box-sizing: border-box;
color: #44442a;
}
.container.day-of-payment,
.container.day-of-payment-thank-you {
background: none;
border: none;
/*Global Tools*/
/*Typography*/
}
.container.day-of-payment .row,
.container.day-of-payment-thank-you .row {
max-width: initial;
margin: initial;
margin-left: -18px;
margin-right: -18px;
width: initial;
position: relative;
}
.container.day-of-payment .light,
.container.day-of-payment-thank-you .light {
font-weight: 300;
}
.container.day-of-payment .regular,
.container.day-of-payment-thank-you .regular {
font-weight: 400;
}
.container.day-of-payment .semibold,
.container.day-of-payment-thank-you .semibold {
font-weight: 600;
}
.container.day-of-payment .bold,
.container.day-of-payment-thank-you .bold {
font-weight: 700;
}
.container.day-of-payment .extrabold,
.container.day-of-payment-thank-you .extrabold {
font-weight: 800;
}
.container.day-of-payment .hide,
.container.day-of-payment-thank-you .hide {
display: none !important;
}
.container.day-of-payment a,
.container.day-of-payment-thank-you a {
text-decoration: none;
color: #2c7da0;
}
.container.day-of-payment a:hover,
.container.day-of-payment-thank-you a:hover {
color: #278523;
}
.container.day-of-payment .btn,
.container.day-of-payment-thank-you .btn,
.container.day-of-payment .button,
.container.day-of-payment-thank-you .button {
display: inline-block;
cursor: pointer;
line-height: 1.2;
color: white;
background-color: #2c7da0;
padding: 12px 23px;
font-size: 1em;
font-weight: 600;
border-radius: 6px;
vertical-align: top;
margin-bottom: 1px;
}
.container.day-of-payment .btn:hover,
.container.day-of-payment-thank-you .btn:hover,
.container.day-of-payment .button:hover,
.container.day-of-payment-thank-you .button:hover {
background-color: #9656d2;
color: white;
}
p .container.day-of-payment .btn,
p .container.day-of-payment-thank-you .btn,
p .container.day-of-payment .button,
p .container.day-of-payment-thank-you .button {
margin-bottom: 0.25em;
}
.container.day-of-payment .btn:active,
.container.day-of-payment-thank-you .btn:active,
.container.day-of-payment .button:active,
.container.day-of-payment-thank-you .button:active {
color: white !important;
}
.container.day-of-payment .btn .fa,
.container.day-of-payment-thank-you .btn .fa,
.container.day-of-payment .button .fa,
.container.day-of-payment-thank-you .button .fa {
color: currentColor;
}
.container.day-of-payment .btn--spacer,
.container.day-of-payment-thank-you .btn--spacer {
margin-right: 5px;
}
.container.day-of-payment .btn--disabled,
.container.day-of-payment-thank-you .btn--disabled {
opacity: 0.4;
cursor: not-allowed !important;
}
.container.day-of-payment .btn--red,
.container.day-of-payment-thank-you .btn--red {
background-color: #cb433a;
}
.container.day-of-payment .btn--red:hover,
.container.day-of-payment-thank-you .btn--red:hover {
background-color: #cd746e;
}
.container.day-of-payment .btn--green,
.container.day-of-payment-thank-you .btn--green {
background-color: #278523;
}
.container.day-of-payment .js-error:focus,
.container.day-of-payment-thank-you .js-error:focus {
border-color: #cb433a !important;
}
.container.day-of-payment .normal-error,
.container.day-of-payment-thank-you .normal-error {
color: #cb433a;
font-weight: 500;
}
.container.day-of-payment button,
.container.day-of-payment-thank-you button {
border: none;
/*.transition(all @base-speed ease-out);*/
}
.container.day-of-payment :active,
.container.day-of-payment-thank-you :active {
outline: none;
}
.container.day-of-payment .bottom-1,
.container.day-of-payment-thank-you .bottom-1 {
margin-bottom: 12px;
}
.container.day-of-payment .bottom-2,
.container.day-of-payment-thank-you .bottom-2 {
margin-bottom: 24px;
}
.container.day-of-payment .bottom-3,
.container.day-of-payment-thank-you .bottom-3 {
margin-bottom: 36px;
}
.container.day-of-payment .bottom-4,
.container.day-of-payment-thank-you .bottom-4 {
margin-bottom: 48px;
}
.container.day-of-payment .bottom-5,
.container.day-of-payment-thank-you .bottom-5 {
margin-bottom: 60px;
}
.container.day-of-payment .bottom-6,
.container.day-of-payment-thank-you .bottom-6 {
margin-bottom: 72px;
}
.container.day-of-payment .top-2,
.container.day-of-payment-thank-you .top-2 {
margin-top: 24px;
}
.container.day-of-payment .red,
.container.day-of-payment-thank-you .red {
color: #cb433a;
}
.container.day-of-payment input[type="text"].ui-autocomplete-active,
.container.day-of-payment-thank-you input[type="text"].ui-autocomplete-active {
border-radius: 6px 6px 0 0;
}
.container.day-of-payment input[type="text"],
.container.day-of-payment-thank-you input[type="text"],
.container.day-of-payment input[type="number"],
.container.day-of-payment-thank-you input[type="number"],
.container.day-of-payment input[type="tel"],
.container.day-of-payment-thank-you input[type="tel"],
.container.day-of-payment select,
.container.day-of-payment-thank-you select,
.container.day-of-payment textarea,
.container.day-of-payment-thank-you textarea {
border: 2px solid #eae9e1;
border-radius: 6px;
background-color: white;
box-shadow: inset 2.5px 4.33px 0 0 #f5f5f4;
padding: 16px;
font-family: "proxima-nova", sans-serif;
font-size: 16px;
font-weight: 300;
/*.transition(border-color @base-speed ease-out);*/
width: 100%;
margin-bottom: 12px;
}
.container.day-of-payment input[type="text"]:focus,
.container.day-of-payment-thank-you input[type="text"]:focus,
.container.day-of-payment input[type="number"]:focus,
.container.day-of-payment-thank-you input[type="number"]:focus,
.container.day-of-payment input[type="tel"]:focus,
.container.day-of-payment-thank-you input[type="tel"]:focus,
.container.day-of-payment select:focus,
.container.day-of-payment-thank-you select:focus,
.container.day-of-payment textarea:focus,
.container.day-of-payment-thank-you textarea:focus {
border-color: #2c7da0;
}
.container.day-of-payment input[type="text"].lg,
.container.day-of-payment-thank-you input[type="text"].lg,
.container.day-of-payment input[type="number"].lg,
.container.day-of-payment-thank-you input[type="number"].lg,
.container.day-of-payment input[type="tel"].lg,
.container.day-of-payment-thank-you input[type="tel"].lg,
.container.day-of-payment select.lg,
.container.day-of-payment-thank-you select.lg,
.container.day-of-payment textarea.lg,
.container.day-of-payment-thank-you textarea.lg {
width: 80%;
}
.container.day-of-payment input[type="text"].md,
.container.day-of-payment-thank-you input[type="text"].md,
.container.day-of-payment input[type="number"].md,
.container.day-of-payment-thank-you input[type="number"].md,
.container.day-of-payment input[type="tel"].md,
.container.day-of-payment-thank-you input[type="tel"].md,
.container.day-of-payment select.md,
.container.day-of-payment-thank-you select.md,
.container.day-of-payment textarea.md,
.container.day-of-payment-thank-you textarea.md {
width: 60%;
}
.container.day-of-payment input[type="text"].sm,
.container.day-of-payment-thank-you input[type="text"].sm,
.container.day-of-payment input[type="number"].sm,
.container.day-of-payment-thank-you input[type="number"].sm,
.container.day-of-payment input[type="tel"].sm,
.container.day-of-payment-thank-you input[type="tel"].sm,
.container.day-of-payment select.sm,
.container.day-of-payment-thank-you select.sm,
.container.day-of-payment textarea.sm,
.container.day-of-payment-thank-you textarea.sm {
width: 40%;
}
.container.day-of-payment input[type="text"].xs,
.container.day-of-payment-thank-you input[type="text"].xs,
.container.day-of-payment input[type="number"].xs,
.container.day-of-payment-thank-you input[type="number"].xs,
.container.day-of-payment input[type="tel"].xs,
.container.day-of-payment-thank-you input[type="tel"].xs,
.container.day-of-payment select.xs,
.container.day-of-payment-thank-you select.xs,
.container.day-of-payment textarea.xs,
.container.day-of-payment-thank-you textarea.xs {
width: 20%;
}
.container.day-of-payment input[type="text"].error,
.container.day-of-payment-thank-you input[type="text"].error,
.container.day-of-payment input[type="number"].error,
.container.day-of-payment-thank-you input[type="number"].error,
.container.day-of-payment input[type="tel"].error,
.container.day-of-payment-thank-you input[type="tel"].error,
.container.day-of-payment select.error,
.container.day-of-payment-thank-you select.error,
.container.day-of-payment textarea.error,
.container.day-of-payment-thank-you textarea.error {
border-color: #cb433a;
}
.container.day-of-payment input[type="text"].sm-fixed,
.container.day-of-payment-thank-you input[type="text"].sm-fixed,
.container.day-of-payment input[type="number"].sm-fixed,
.container.day-of-payment-thank-you input[type="number"].sm-fixed,
.container.day-of-payment input[type="tel"].sm-fixed,
.container.day-of-payment-thank-you input[type="tel"].sm-fixed,
.container.day-of-payment select.sm-fixed,
.container.day-of-payment-thank-you select.sm-fixed,
.container.day-of-payment textarea.sm-fixed,
.container.day-of-payment-thank-you textarea.sm-fixed {
width: 180px;
}
.container.day-of-payment input[type="text"],
.container.day-of-payment-thank-you input[type="text"],
.container.day-of-payment input[type="number"],
.container.day-of-payment-thank-you input[type="number"],
.container.day-of-payment input[type="tel"],
.container.day-of-payment-thank-you input[type="tel"],
.container.day-of-payment select,
.container.day-of-payment-thank-you select {
text-align: left !important;
height: 38px;
line-height: 38px;
padding: 0 13px;
}
.form-inline .container.day-of-payment input[type="text"] + .btn,
.form-inline .container.day-of-payment-thank-you input[type="text"] + .btn,
.form-inline .container.day-of-payment input[type="number"] + .btn,
.form-inline .container.day-of-payment-thank-you input[type="number"] + .btn,
.form-inline .container.day-of-payment input[type="tel"] + .btn,
.form-inline .container.day-of-payment-thank-you input[type="tel"] + .btn,
.form-inline .container.day-of-payment select + .btn,
.form-inline .container.day-of-payment-thank-you select + .btn,
.form-inline .container.day-of-payment input[type="text"] ~ .btn,
.form-inline .container.day-of-payment-thank-you input[type="text"] ~ .btn,
.form-inline .container.day-of-payment input[type="number"] ~ .btn,
.form-inline .container.day-of-payment-thank-you input[type="number"] ~ .btn,
.form-inline .container.day-of-payment input[type="tel"] ~ .btn,
.form-inline .container.day-of-payment-thank-you input[type="tel"] ~ .btn,
.form-inline .container.day-of-payment select ~ .btn,
.form-inline .container.day-of-payment-thank-you select ~ .btn {
padding: 9px 18px 8px;
font-size: 16px;
}
.container.day-of-payment input[type="number"],
.container.day-of-payment-thank-you input[type="number"] {
-moz-appearance: textfield;
}
.container.day-of-payment input[type="number"]::-webkit-outer-spin-button,
.container.day-of-payment-thank-you input[type="number"]::-webkit-outer-spin-button,
.container.day-of-payment input[type="number"]::-webkit-inner-spin-button,
.container.day-of-payment-thank-you input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.container.day-of-payment textarea,
.container.day-of-payment-thank-you textarea {
line-height: 30px;
}
.container.day-of-payment label,
.container.day-of-payment-thank-you label {
line-height: 36px;
}
.container.day-of-payment label b,
.container.day-of-payment-thank-you label b {
color: #cb433a;
}
.container.day-of-payment label h3,
.container.day-of-payment-thank-you label h3 {
font-size: 24px;
margin: 0;
display: inline;
}
.container.day-of-payment label p,
.container.day-of-payment-thank-you label p {
line-height: 30px;
margin: 0;
}
.container.day-of-payment img,
.container.day-of-payment-thank-you img {
max-width: 100%;
height: auto;
}
.container.day-of-payment .italic,
.container.day-of-payment-thank-you .italic {
font-style: italic;
}
.container.day-of-payment .uppercase,
.container.day-of-payment-thank-you .uppercase {
text-transform: uppercase;
}
.container.day-of-payment .well,
.container.day-of-payment-thank-you .well,
.container.day-of-payment .outset,
.container.day-of-payment-thank-you .outset {
border: 2px solid #eae9e1;
border-radius: 6px;
}
.container.day-of-payment .padded,
.container.day-of-payment-thank-you .padded {
padding: 32px;
display: block;
}
.container.day-of-payment .padded :last-child,
.container.day-of-payment-thank-you .padded :last-child {
margin-bottom: 0;
}
.container.day-of-payment .well,
.container.day-of-payment-thank-you .well {
background: #f9f9f9;
}
.container.day-of-payment .outset,
.container.day-of-payment-thank-you .outset {
background-color: white;
position: relative;
}
.container.day-of-payment .outset:after,
.container.day-of-payment-thank-you .outset:after {
position: absolute;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
padding: 0 6px 6px 0;
background: url(img/bg-outset.png) repeat 0 0;
z-index: -1;
border-radius: 6px;
}
.container.day-of-payment #day-of-payment-form,
.container.day-of-payment-thank-you #day-of-payment-form {
width: 100%;
}
.container.day-of-payment .form-group,
.container.day-of-payment-thank-you .form-group {
margin: 1em 0;
}
.container.day-of-payment .form-group[class*="col-"],
.container.day-of-payment-thank-you .form-group[class*="col-"],
.container.day-of-payment .form-group.td,
.container.day-of-payment-thank-you .form-group.td {
margin-top: 0;
margin-bottom: 0;
}
.container.day-of-payment .form-group.has-error,
.container.day-of-payment-thank-you .form-group.has-error {
border-color: #cb433a;
}
.container.day-of-payment .form-group.has-error label,
.container.day-of-payment-thank-you .form-group.has-error label {
color: #cb433a;
font-weight: 600;
}
.container.day-of-payment .form-group.has-error input[type=text],
.container.day-of-payment-thank-you .form-group.has-error input[type=text],
.container.day-of-payment .form-group.has-error input[type=password],
.container.day-of-payment-thank-you .form-group.has-error input[type=password],
.container.day-of-payment .form-group.has-error input[type=tel],
.container.day-of-payment-thank-you .form-group.has-error input[type=tel],
.container.day-of-payment .form-group.has-error input[type=email],
.container.day-of-payment-thank-you .form-group.has-error input[type=email],
.container.day-of-payment .form-group.has-error input[type=datetime],
.container.day-of-payment-thank-you .form-group.has-error input[type=datetime],
.container.day-of-payment .form-group.has-error select,
.container.day-of-payment-thank-you .form-group.has-error select,
.container.day-of-payment .form-group.has-error textarea,
.container.day-of-payment-thank-you .form-group.has-error textarea,
.container.day-of-payment .form-group.has-error .well,
.container.day-of-payment-thank-you .form-group.has-error .well {
border-color: #cb433a;
}
.container.day-of-payment .form-group.has-error label.little-radio,
.container.day-of-payment-thank-you .form-group.has-error label.little-radio {
font-weight: 400;
}
.container.day-of-payment .form-group.has-error label.little-radio strong,
.container.day-of-payment-thank-you .form-group.has-error label.little-radio strong {
color: #cb433a !important;
}
.container.day-of-payment .form-group .help-block,
.container.day-of-payment-thank-you .form-group .help-block {
font-size: 13px;
color: #cb433a;
margin-top: -6px;
clear: both;
}
.container.day-of-payment .form-group .help-block ul,
.container.day-of-payment-thank-you .form-group .help-block ul {
margin: 0;
}
.container.day-of-payment .help-block.with-errors,
.container.day-of-payment-thank-you .help-block.with-errors {
display: none;
white-space: normal !important;
}
.has-error .container.day-of-payment .help-block.with-errors,
.has-error .container.day-of-payment-thank-you .help-block.with-errors {
display: block;
}
.container.day-of-payment h1,
.container.day-of-payment-thank-you h1,
.container.day-of-payment h2,
.container.day-of-payment-thank-you h2,
.container.day-of-payment h3,
.container.day-of-payment-thank-you h3,
.container.day-of-payment h4,
.container.day-of-payment-thank-you h4,
.container.day-of-payment h5,
.container.day-of-payment-thank-you h5,
.container.day-of-payment h6,
.container.day-of-payment-thank-you h6 {
line-height: 1.125;
}
.container.day-of-payment h1,
.container.day-of-payment-thank-you h1 {
font-size: 2.66667em;
margin-bottom: 12px;
font-size: 36px;
line-height: 44px;
font-weight: 600;
}
.container.day-of-payment h1 + ul,
.container.day-of-payment-thank-you h1 + ul,
.container.day-of-payment p + ul,
.container.day-of-payment-thank-you p + ul {
list-style-type: disc;
margin-left: 20px;
}
.container.day-of-payment h2,
.container.day-of-payment-thank-you h2 {
font-size: 1.66667em;
margin-bottom: 0.5em;
font-weight: 600;
}
.container.day-of-payment h3,
.container.day-of-payment-thank-you h3 {
font-size: 1.44444em;
margin-bottom: 12px;
margin-top: 0;
font-weight: 700;
}
.container.day-of-payment h4,
.container.day-of-payment-thank-you h4 {
font-size: 1.2em;
margin-bottom: 6px;
line-height: 1.5;
font-weight: 700;
}
.container.day-of-payment h4.purple,
.container.day-of-payment-thank-you h4.purple {
font-weight: 400;
}
.container.day-of-payment h5,
.container.day-of-payment-thank-you h5 {
font-size: 1em;
margin-bottom: 6px;
line-height: 1.5;
font-weight: 700;
}
.container.day-of-payment h6,
.container.day-of-payment-thank-you h6 {
font-size: 0.9em;
line-height: 1;
margin: 0 0 0.4em;
}
.container.day-of-payment b,
.container.day-of-payment-thank-you b,
.container.day-of-payment strong,
.container.day-of-payment-thank-you strong {
font-weight: 700;
}
.container.day-of-payment em,
.container.day-of-payment-thank-you em {
font-style: italic;
}
.container.day-of-payment p,
.container.day-of-payment-thank-you p,
.container.day-of-payment ul,
.container.day-of-payment-thank-you ul,
.container.day-of-payment ol,
.container.day-of-payment-thank-you ol,
.container.day-of-payment address,
.container.day-of-payment-thank-you address {
margin-bottom: 1.5em;
font-family: "proxima-nova", sans-serif;
font-weight: 300;
font-size: 18px;
color: #44442a;
}
.container.day-of-payment p,
.container.day-of-payment-thank-you p {
line-height: 1.66667;
}
.container.day-of-payment .text-left,
.container.day-of-payment-thank-you .text-left {
text-align: left !important;
}
.container.day-of-payment .text-center,
.container.day-of-payment-thank-you .text-center {
text-align: center !important;
}
.container.day-of-payment .text-right,
.container.day-of-payment-thank-you .text-right {
text-align: right !important;
}
.container.day-of-payment img,
.container.day-of-payment-thank-you img {
max-width: 100%;
height: auto;
}
.container.day-of-payment .due-date,
.container.day-of-payment-thank-you .due-date {
font-size: 1.66667em;
font-weight: 600;
line-height: 1.4;
}
.container.day-of-payment .balance-due,
.container.day-of-payment-thank-you .balance-due {
font-size: 2.66667em;
font-weight: 700;
line-height: 1.4;
}
.container.day-of-payment .security,
.container.day-of-payment-thank-you .security {
text-align: right;
font-size: 0.9em;
margin-top: 0.5em;
}
.container.day-of-payment .security .fa,
.container.day-of-payment-thank-you .security .fa {
font-size: 2.125em;
float: left;
margin: -0.125em 0.25em 0.125em 0;
}
.container.day-of-payment .notify-panel,
.container.day-of-payment-thank-you .notify-panel {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.container.day-of-payment .notify-panel p,
.container.day-of-payment-thank-you .notify-panel p,
.container.day-of-payment .notify-panel ul,
.container.day-of-payment-thank-you .notify-panel ul,
.container.day-of-payment .notify-panel li,
.container.day-of-payment-thank-you .notify-panel li {
font-size: 15px;
line-height: 25px;
font-weight: 400;
}
.container.day-of-payment .notify-panel--tip,
.container.day-of-payment-thank-you .notify-panel--tip {
background-color: white;
border-color: #7bbedb;
font-size: 15px;
}
.container.day-of-payment .notify-panel-warning,
.container.day-of-payment-thank-you .notify-panel-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.container.day-of-payment .notify-panel-danger,
.container.day-of-payment-thank-you .notify-panel-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.container.day-of-payment .org-code-search form,
.container.day-of-payment-thank-you .org-code-search form {
display: flex;
flex-direction: row;
}
.container.day-of-payment .org-code-search input,
.container.day-of-payment-thank-you .org-code-search input {
margin-right: -5px;
}
.container.day-of-payment .org-code-search button,
.container.day-of-payment-thank-you .org-code-search button {
color: white;
background-color: #2c7da0;
height: 38px;
padding: 0 12px;
margin-right: 5px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
cursor: pointer;
}
.container.day-of-payment .org-code-search button:hover,
.container.day-of-payment-thank-you .org-code-search button:hover {
background-color: #9656d2;
}
.container.day-of-payment .results-display p,
.container.day-of-payment-thank-you .results-display p {
margin: 0;
}
.container.day-of-payment .results-display p:last-child,
.container.day-of-payment-thank-you .results-display p:last-child {
margin-bottom: 24px;
}
.container.day-of-payment i,
.container.day-of-payment-thank-you i {
color: inherit;
}
.container.day-of-payment .error-message,
.container.day-of-payment-thank-you .error-message,
.container.day-of-payment .validation-summary-errors,
.container.day-of-payment-thank-you .validation-summary-errors {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
color: #8a6d3b !important;
background-color: #fcf8e3;
border-color: #faebcc;
}
.container.day-of-payment .error-message p,
.container.day-of-payment-thank-you .error-message p,
.container.day-of-payment .validation-summary-errors p,
.container.day-of-payment-thank-you .validation-summary-errors p,
.container.day-of-payment .error-message ul,
.container.day-of-payment-thank-you .error-message ul,
.container.day-of-payment .validation-summary-errors ul,
.container.day-of-payment-thank-you .validation-summary-errors ul,
.container.day-of-payment .error-message li,
.container.day-of-payment-thank-you .error-message li,
.container.day-of-payment .validation-summary-errors li,
.container.day-of-payment-thank-you .validation-summary-errors li {
font-size: 15px;
line-height: 25px;
font-weight: 400;
}
.container.day-of-payment .error-message i,
.container.day-of-payment-thank-you .error-message i,
.container.day-of-payment .validation-summary-errors i,
.container.day-of-payment-thank-you .validation-summary-errors i {
padding-right: 5px;
}
.container.day-of-payment .error-message ul,
.container.day-of-payment-thank-you .error-message ul,
.container.day-of-payment .validation-summary-errors ul,
.container.day-of-payment-thank-you .validation-summary-errors ul {
margin: 0;
}
.container.day-of-payment .validation-summary-errors ul li,
.container.day-of-payment-thank-you .validation-summary-errors ul li {
color: #8a6d3b !important;
}
.container.day-of-payment #validation-warning,
.container.day-of-payment-thank-you #validation-warning {
float: left;
padding: 5px;
}
.container.day-of-payment .js-open-chat,
.container.day-of-payment-thank-you .js-open-chat {
color: #2c7da0;
cursor: pointer;
}
.container.day-of-payment .js-open-chat:hover,
.container.day-of-payment-thank-you .js-open-chat:hover {
color: #258122;
}
@media all and (max-width:479px) {
.container.day-of-payment #day-of-payment-form *,
.container.day-of-payment-thank-you #day-of-payment-form * {
font-size: 13px;
line-height: 20px;
}
.container.day-of-payment h2,
.container.day-of-payment-thank-you h2 {
font-size: 1.5em;
}
.container.day-of-payment .js-confirm,
.container.day-of-payment-thank-you .js-confirm,
.container.day-of-payment .js-cancel,
.container.day-of-payment-thank-you .js-cancel {
padding: 12px 15px;
}
}
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),
.visually-hidden:not(caption) {
position: absolute !important;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem 1rem;
list-style: none !important;
margin-left: 0 !important;
}
.product-list > li {
width: 100%;
max-width: 100%;
flex-shrink: 0;
}
@media (min-width: 480px) {
.product-list > li {
flex: 0 0 auto;
max-width: calc(50% - 0.5rem);
}
}
@media (min-width: 768px) {
.product-list > li {
max-width: calc(25% - 0.75rem);
}
}
#rCol .product-list {
justify-content: flex-start;
}
@media (min-width: 768px) {
#rCol .product-list > li {
max-width: calc(50% - 0.5rem);
}
}
@media (min-width: 1024px) {
#rCol .product-list > li {
max-width: calc(33.333% - 0.75rem);
}
}
.product-list .product-card {
height: 100%;
}
.product-list .product-card:hover {
height: calc(100% + 10px);
}
.product-card {
position: relative;
display: flex;
flex-direction: column;
border: 2px solid #eae9e1;
border-radius: 5px;
text-align: left;
box-sizing: border-box;
}
.product-card:hover {
border-width: 5px;
margin: -5px;
}
.product-card__image {
position: relative;
flex-shrink: 0;
background-color: #eeeee9;
border-radius: 5px 5px 0 0;
}
.product-card__image::before {
content: '';
display: block;
padding-top: 110%;
}
.product-card__image img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.product-card__image-overlay-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #2c7da0;
color: white;
text-align: center;
font-weight: 700;
padding: .125rem;
box-sizing: border-box;
}
.product-card__content {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
padding: 1rem;
flex-grow: 1;
}
.product-card__content *:last-child {
margin-bottom: 0 !important;
}
.product-card__name {
margin: 0 0 1rem;
font-family: inherit;
line-height: 1.2;
}
.product-card__name a {
color: #2c7da0;
}
.product-card__name a:hover {
text-decoration: underline;
}
.product-card__name a::after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.product-card__price {
border-top: 2px solid #eae9e1;
margin: 1rem -1rem 0;
padding: 1rem 1rem 0;
font-size: 1.25rem;
color: #44442a !important;
}
.product-card__flag {
position: absolute;
top: 1rem;
left: -0.25rem;
z-index: 1;
background-color: #cb433a;
color: white;
padding: 0.125rem 0.5rem;
font-size: 0.75rem;
}
.store-category-header {
background-color: white;
padding: 3rem 0;
margin-bottom: 2.5rem;
font-size: 1.125rem;
}
.store-category-header h1 {
padding-top: 0;
margin-bottom: 0.5rem;
}
.store-category-header:has(h1 + .button) h1 {
margin-bottom: 1rem;
}
.store-category-header .button {
background-color: #cb433a;
border-color: #cb433a;
color: white !important;
}
.store-category-header .button:hover {
background-color: #a6332c;
border-color: #a6332c;
}
.store-category-header img {
display: block;
width: 100%;
}
.store-category-header .row {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
gap: 1rem;
}
.store-category-header .row::before,
.store-category-header .row::after {
content: none;
}
.store-category-header .row .col {
width: 100%;
max-width: 100%;
flex-shrink: 0;
}
@media (min-width: 768px) {
.store-category-header .row .col {
flex: 0 0 auto;
max-width: calc(50% - 0.5rem);
}
}
#store #items li .product-card__description ul,
#store #items li .product-card__description ol {
float: none;
margin-left: 1.5rem;
width: auto;
}
#store #items li .product-card__description ul li,
#store #items li .product-card__description ol li {
margin: 0;
width: auto;
border: none;
background: transparent;
text-align: unset;
padding-bottom: 0;
float: none;
list-style: inherit;
}
#store #items li .product-card__description ul {
list-style-type: disc;
}
#store #items li .product-card__description ol {
list-style-type: decimal;
}