/* Reset */
h1, h2, h3, h4, h5, h6, p, blockquote, pre { display: inherit; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-margin-after: 0;
	-webkit-margin-before: 0;
    -webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select, label { cursor: pointer; outline: none; border-radius: 0; }
b, strong, em { font-weight: bold; }
pre, i { font-style: italic; }
sup { font-size: smaller; vertical-align: top; }
a {  text-decoration: none; }
a, input[type="submit"], input[type="button"], svg * { transition: all 0.4s; outline: 0; }
a, label, input { cursor: pointer; }
img { width: auto; height: auto; max-width: 100%; }
.clear { clear: both; }

/* Custom fonts */
@font-face {
	font-family: 'lovesignia';
	src: url( '../fonts/lovesignia/lovesignia.eot?10013098' );
	src: url( '../fonts/lovesignia/lovesignia.eot?10013098#iefix' ) format( 'embedded-opentype' ),
	   url( '../fonts/lovesignia/lovesignia.woff2?10013098' ) format( 'woff2' ),
	   url( '../fonts/lovesignia/lovesignia.woff?10013098' ) format( 'woff' ),
	   url( '../fonts/lovesignia/lovesignia.ttf?10013098' ) format( 'truetype' ),
	   url( '../fonts/lovesignia/lovesignia.svg?10013098#lovesignia' ) format( 'svg' );
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Allura';
	src: url( '../fonts/allura/allura-regular.ttf' ) format( 'truetype' );
	font-weight: normal;
	font-style: normal;
}
  
@font-face {
	font-family: 'Callie Hand';
	src: url( '../fonts/callie-hand/callie-hand.otf' ) format( 'opentype' );
	font-weight: normal;
	font-style: normal;
}
  
@font-face {
	font-family: 'Calluna';
	src: url( '../fonts/calluna/calluna-regular.otf' ) format( 'opentype' );
	font-weight: normal;
	font-style: normal;
}
  
@font-face {
	font-family: 'Greatvibes';
	src: url( '../fonts/greatvibes/greatvibes-regular.ttf' ) format( 'truetype' );
	font-weight: normal;
	font-style: normal;
}

/* Icons */
[class^="icon-"], [class*=" icon-"] { display: inline-block; vertical-align: middle; }
[class^="icon-"]:before, [class*=" icon-"]:before { font: 18pt 'lovesignia', sans-serif; color: #64605e; speak: none; width: 1em; text-align: center; transition: all 0.4s; }
[class^="icon-"]:hover:before, [class*=" icon-"]:hover:before { color: #653231; }
.icon-pinterest:before { content: '\f0d2'; }
.icon-instagram:before { content: '\f16d'; }
.icon-facebook:before { content: '\f09a'; }
.icon-magnifying-glass:before { content: '\e800'; }
.icon-heart-empty:before { content: '\e801'; }
.icon-infinity:before { content: '\e802'; }

/* General */
body { min-width: 300px; height: 100%; color: #777; font: 13px/18px 'Lato', 'Arial', sans-serif; }
.container { margin: auto; max-width: 960px; }
h2 { font: 300 18px/22px 'Lato', 'Arial', sans-serif; color: #555454; text-transform: uppercase; margin: 0 5px 18px; }
h2:before { font-size: 15pt; counter-increment: items; content: counter( items )'.'; padding: 0 5px 0 0; display: inline-block; vertical-align: text-bottom; color: #f05f73; }
h4 { text-transform: uppercase; font: 300 16pt/1.2 'Open Sans', 'Arial', sans-serif; color: #afafaf; text-align: center; padding: 0 0 8px; }
hr { margin: 20px auto; border: 0; height: 1px; background: #e6e6e6; max-width: 400px; }
	
/* Header */
header { text-align: center; }
#nav { background: #F0F0F0; height: 30px; }
header > a { display: inline-block; margin: 24px auto; }

/* Banner */
#banner { background: url( '../images/bg/bg-main.jpg' ) no-repeat; background-size: 100% 100%; height: 23.5vw; max-height: 300px; }

/* Main */
#left { width: 25%; float: left; box-sizing: border-box; padding: 10px 0; }
#left b { font: bold 12px/18px 'Lato', 'Arial', sans-serif; color: #000; text-transform: uppercase; }
#right { counter-reset: items; width: 75%; float: right; box-sizing: border-box; border-left: 1px solid #e1e1e1; padding: 10px 0 0 5px; }

/* Products */
#products { text-align: left; font-size: 0; }
#products > div { cursor: pointer; transition: all 0.4s; display: inline-block; vertical-align: top; width: calc( ( 100% - 40px ) / 4 ); margin: 0 5px 10px; background: #f7f7f7; }
#products > div.selected { color: #FFF; background: #F05F73; }
#products img { display: block; }
#products div div { padding: 10px; position: relative; z-index: 1; font-size: 12pt; }
#products a { position: absolute; display: block; top: 0; right: 3px; z-index: 2; }
#products a:before { font-size: 10pt; }
#products > div.selected a:before { color: #FFF; }

/* Engraving */
.line.padding { padding: 0 0 0 166px; }
.line > label[for="font-selection"] { line-height: 74px; }
.line > label[for="font-text"] { line-height: 16px; }
.line > label[for="font-selection"] + div { font-size: 0; }
.font, button { background: #f9f9f9; box-shadow: 0 0 3px #CCC; display: inline-block; vertical-align: top; padding: 15px; transition: all 0.4s; cursor: pointer; text-align: center; width: 140px; margin: 0 4px 8px; }
.line button { border: 0; width: 40px; height: 40px; margin: 0 4px; padding: 0; outline: 0; }
.line button:before { line-height: 40px; font-size: 10pt; }
.font.selected { background: #F05F73; color: #FFF; }
.font div { font: 9pt 'Lato', 'Arial', sans-serif; color: #a8a8a8; }
.font p { margin: 8px 0 0; display: block; font-size: 19pt; color: #000; }
.font.selected p { color: #FFF; }
#engraving [data-id="1"], #order-summary [data-id="1"] { font-family: 'Allura', 'Arial', sans-serif; }
#engraving [data-id="2"], #order-summary [data-id="2"] { font-family: 'Callie Hand', 'Greatvibes', sans-serif; }
#engraving [data-id="3"], #order-summary [data-id="3"] { font-family: 'Calluna', 'Arial', sans-serif; }
#engraving [data-id="2"] span, #order-summary [data-id="2"] span { font-family: 'Greatvibes', 'Arial', sans-serif; }
.preview { line-height: 26px; font-size: 20pt; }

/* Jewellery views */
#jewellery-views { font-size: 0; text-align: center; }
#jewellery-views a { display: inline-block; vertical-align: top; width: 120px; height: 120px; margin: 0 13px; position: relative; z-index: 1; }
#jewellery-views a:before { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba( 255, 255, 255, 0.8 ); content: '\e800'; font: 24pt/120px 'lovesignia', sans-serif; color: #F05F73; speak: none; text-align: center; transition: all 0.4s; }
#jewellery-views a:hover:before { opacity: 1; }

/* Order summary */
#order-summary .line { margin: 0 0 10px; }
#order-summary .line div:not( .preview ) { line-height: 26px; font-size: 11pt; }
#order-summary .price { font-weight: bold; }
#order-summary .price div { color: #F05F73; }

/* Personal details */
#personal-details { padding: 0 0 20px; }
#personal-details button { border: 0; outline: 0; display: block; margin: auto; background: #F05F73; color: #FFF; width: 195px; text-transform: uppercase; font: 300 14px/22px 'Lato', 'Arial', sans-serif; padding: 10px 0; }
#personal-details button:hover { background: #f0909d; }

/* Payment */
#payment { display: none; background: #f4f4f4; padding: 20px; font-size: 0; text-align: center; }
#payment h2 { text-align: left; }
#payment a { display: inline-block; vertical-align: middle; margin: 0 10px; }
.paypal { background: url( '../images/icons/logo-paypal.png' ) no-repeat left center; height: 60px; width: 141px; }

/* Forms */
.line { margin: 0 0 19px; text-align: left; }
.line:after { clear: both; display: block; content: ' '; }
.line > label { font-size: 11pt; display: block; width: 149px; float: left; line-height: 26px; text-align: right; padding: 0 20px 0 0; }
.line > label span { display: block; color: #b1b0b0; font-size: 9pt; line-height: 1; }
.line > *:not( label ) { float: left; width: calc( 100% - 169px ); }
.line div label:before { margin: -3px 4px 0 0; content: ' '; background: #faf1ec; text-align: center; line-height: 10px; font-size: 14pt; display: inline-block; vertical-align: middle; width: 10px; height: 10px; border: 1px solid #653231; border-radius: 7px; }
input[type="radio"]:checked + label:before { content: '\2022'; }
.line div label { display: inline-block; vertical-align: middle; margin: 0 10px 0 0; }
.line input[type="radio"] { display: none; }
[type="text"], select, textarea { color: #000; max-width: 537px; padding: 6px 7px; font: 9pt/1.2 'Lato', 'Arial', sans-serif; border: 1px solid #e8e8e8; background: #f9f9f9; box-sizing: border-box; }
select { max-width: 120px; }
[type="text"] { max-width: 260px; }
textarea { max-width: 537px; height: 120px; }
input[type="submit"], input[type="reset"] { -webkit-appearance: none; background: #653231; border: 0; color: #FFF; text-transform: uppercase; font-weight: 700; padding: 5px 25px 5.5px; }

/* Message */
#message ul { border: 1px solid #FF1000; background: #ffd2d2; padding: 10px 20px; margin: 0 0 20px; color: #FF1000; }

/* Social media */
#social-media { text-align: center; margin: 0 0 20px; }
#social-media .container div { padding: 20px 0; border-top: 1px solid #afafaf; border-bottom: 1px solid #afafaf; font-size: 0; }
#social-media a { display: inline-block; vertical-align: middle; margin: 0 4px; width: 36px; height: 36px; border-radius: 50px; background: #969696; }
#social-media a:hover { background: #F05F73; }
#social-media a:before { color: #FFF; line-height: 36px; }

/* Footer */
footer { background: #DDD; color: #777; padding: 15px 0; font-size: 0; text-align: center; }
footer .container > img { display: block; float: left; }
footer a { margin: 30px 0 0; color: #777; font-size: 11px; display: inline-block; vertical-align: middle; text-transform: uppercase; line-height: 21px; padding: 0 7px; border-right: 1px solid #c7c7c7; border-left: 1px solid #FFF; }
footer a:hover { color: #f05f73; }
footer a:first-of-type { border-left: 0; }
footer a:last-of-type { border-right: 0; }
footer .container > p { font-size: 11px; margin: 20px auto; text-transform: uppercase; text-align: center; }

@media (max-width: 990px) {
	h2 { text-align: center; }
	
	#left, #right { float: none; width: 100%; box-sizing: border-box; padding: 10px; border: 0; }
}

@media (max-width: 740px) {
	.font { width: 120px; margin: 8px 4px 4px; }
	.font div { display: none;}
	
	.line > label { width: 120px; }
	.line.padding { padding: 0 0 0 140px; }
}

@media (max-width: 460px) {
	.font { width: calc( ( 100% - 24px ) / 3 ); box-sizing: border-box; padding: 15px 5px; }
	.font p { font-size: 15pt; }
	
	.line { margin: 0 0 8px; }
	.line label, .line > *:not( label ) { float: none; width: 100%; }
	.line label { text-align: left; padding: 0; }
	.line > label[for="font-text"] { margin: 0 0 8px; }
	.line > label[for="font-selection"] { line-height: 26px; }
}

@media (max-width: 370px) {
	.font { padding: 15px 3px; margin: 8px 3px 4px; }
	.font p { font-size: 13pt; }
}