/*
	Crimson
    Version: 2.0
	Website: http://crimson.se
    Copyright: Crimson Färglabb AB
*/

/* GENERAL
/*------------------------------------------------------ */

@font-face {
	font-family: "Abril Text";
	src: url(Abril_Text_Bold.woff);
	font-weight: bold;
}

@font-face {
	font-family: "Abril Text";
	src: url(Abril_Text_Regular.woff);
	font-weight: normal;
}

@font-face {
	font-family: "Abril Text";
	src: url(Abril_Text_Italic.woff);
	font-weight: normal;
	font-style: italic;
}

html { height: 100%; min-height: 100% }
body { font: 1em "myriad-pro", "helvetica neue", arial, sans-serif; line-height: 1.5; color: #333; background: #1e1e1e; margin: 0; padding: 0;}

:focus {
    outline:0;
}

.hidden {
    display: none;
}

button {
	font-family: inherit;
}
#debugFrame {
	position: fixed;
	top:0px;
	left: 0px;
	width: 150px;
	height:30px;
	font-family: Arial;
	font-size: 0.6rem;
	z-index: 100;
	background-color: white;
}
/* -----> Positions and displays */
.invisible { display: none !important }

/* -----> Clears */
.clear { clear: both; height: 0 }
.clearfix:after { content: ""; display: table; clear: both }

/* -----> Containers */
.main-content { padding: 40px 0; background: #f5f5f5 }
.container { max-width: 880px; margin: 0 auto; padding: 0 10px }
.col-left { width: 66%; float: left }
.col-right { width: 32%; float: right }
.column-left {width: 50%; float: left ; border-right: 1px solid #d8d8d8; text-align: left}
.column-right {width: 45%; float: right; margin: 0px 0 20px 0; text-align: left }
/* #login.userform { margin: 0 0 } */


/* -----> Margins and paddings */
.nomargin { margin: 0 !important }
.mt0 { margin-top: 0 !important }
.mb0 { margin-bottom: 0 !important }
.mt20 { margin-top: 20px !important }
.mb20 { margin-bottom: 20px !important }
.mr20 { margin-right: 20px !important }
.mt30 { margin-top: 30px !important }
.mb40 { margin-bottom: 40px }
.pt20 { padding-top: 20px }
.pb20 { padding-bottom: 20px }
.pt40 { padding-top: 40px }
.pb40 { padding-bottom: 40px }

/* -----> Text */
p { margin: 0 0 1.2em 0 }
strong, b { font-weight: bold }
em, i { font-style: italic }
.nocaps { text-transform: none !important }
.textcenter,
.center { text-align: center }
.textright { text-align: right }

.fineprint { font-size: 0.75rem; font-style: italic; color: #666; margin: 20px 20px 0 20px }
.howto .fineprint { margin: 5px 0 0 }

h1, h2, h3, h4, h5 { font-weight: bold; text-rendering: optimizeLegibility }
.tinyheader { font-size: 0.75rem; font-weight: bold; margin: 0 0 15px 0 }
.smallheader { font-size: 0.938rem; margin: 0 0 20px 0 }
/*#userRegisterBlock h3 {font-size: 1rem; }*/
#userMiniBlock h3 { font-size: 1rem; text-align: center }
.medheader { font-size: 1rem; margin: 20px 0 10px 0 }
.bigheader { font-size: 1.25rem; margin: 30px 0 10px 0 }
.bigabrilheader { font-family: "Abril Text", serif; font-size: 1.75rem; margin: 40px 0 0 0; line-height: 1.3 }
.greyabrilheader { font-family: "Abril Text", serif; font-size: 1.25rem; font-weight: normal; margin: 10px 0 20px 0; line-height: 1.3; color: #5e5e5e; font-style: italic }

.qualityPopup { cursor: help; }

a { font-weight: bold; color: #29ccad; text-decoration: none; cursor: pointer }
a:hover { color: #333 }

/* -----> Elements */
canvas { -webkit-user-select: none; -moz-user-select: none; user-select: none }
table { table-layout: auto; border-collapse: collapse }

#klarna-checkout-container { /*border: solid #e0e0e0 thin;*/ background-color: #ffffff;}

/* POP-UPS
/*------------------------------------------------------ */


/* Overlay */
/* #waitDimmer { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; cursor: wait; background: rgba(0,0,0,0.3); overflow: hidden } */
#waitBlock { width: 100%; height: 100%; position: fixed; top:50%; left: 0; bottom: 0; z-index: 200; transform: translateY(-62.5px)}
#acceptBlock {font: 0.75rem "myriad-pro", "helvetica neue", arial, sans-serif; width: 530px; height: 300px; max-height: none; border: 1px solid #666; top:0; left:0; right: 0; bottom: 0; position: fixed;  margin: auto; padding: 20px; background: #fff; }
/* .waitBlock { width: 530px; height: 676px; border: 1px solid #666; top:0; left:0; right: 0; bottom: 0; position: absolute;  margin: 0 auto; padding: 20px; background: #fff; z-index: 1001 } */
.wb {display: none; z-index: 55}
.fix {position: fixed !important; z-index: 120;}
/* -----> Overlay
.bg-dimmer, 
#pageDimmer { display: none; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.3); width: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d }
.bg-dimmer { display: none; height: 100%; z-index: 100 }
#pageDimmer { height: 100%; z-index: 10 }
*/

.whiteOverlay { display: none; position: fixed; left: 0; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d }
.whiteOverlay.wTop { bottom: 0px; left: 0; z-index: 51; }
.whiteOverlay.wBottom { top: 0px; left: 0; z-index: 101; }


/* -----> Popups */
.popup {width: 500px; position: absolute; top: 40px; left: 50%; margin-left: -290px; background: #fff; padding: 40px; -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); box-shadow: 0 0 6px 0 rgba(0,0,0,0.2); }
.popup p { font-size: 0.75rem }
/* .popupheader { font-size: 0.625rem }
.popupheader img { float: right; cursor: pointer } */


/* -----> Price list */
 #priceListBlock { visibility: visible; display: none }

 productionTime,material,buyTerms p {line-height: 1.5}

.overlay-message-light {
	display:block;
	position:relative;
	z-index:110;
	background-color:#f0f0f0;
	color:#000;
	width:600px;
	height:400px;
	margin:0 auto;
	padding:40px;
	box-sizing:border-box;
	
	/* Align vertically */
	top: 33%;
	transform: translateY(-33%);
}

#overlay-ok-button {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 40px;
	right: 40px;
	cursor: pointer;
}

#overlay-ok-button:hover {
	color:#505050;
	cursor: pointer;
}

#helpBlock {
	visibility: hidden;
	width: 560px;
	border: 0px;
	position: absolute;
	top: 30px;
	left: 50%; 
	margin-left: -300px;
	background: #fff; padding: 20px;
	z-index: 20;
}

 #helpBlock {
  height: 400px;
 }



/* -----> Help popups when configurating image */
#help_crop, #help_product, #help_surface, #help_border, #help_special, #help_quality {
	visibility: hidden;
	width: 560px;
	height: auto;
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -280px;
	background: #fff;
	z-index: 201;
}

/* -----> Terms and conditions */
#terms_text {
	display: none;
	background: #f9f9f9;
	padding: 0px 10px 10px 10px;
	margin: 10px 10px 0px 10px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: 1px dashed #999999;
}



/* FORMS
/*------------------------------------------------------ */
input:focus, select:focus, textarea:focus { outline: none }

/* Placeholders */
input::-webkit-input-placeholder { color: #999 }
input:-moz-placeholder { color: #999 }
input::-moz-placeholder { color: #999 }
input::placeholder { color: #999 }

.bld {
    font-weight: bold;
}

input { color: #333; font: 0.75rem "myriad-pro", "helvetica neue", arial, sans-serif; line-height: 1.1; background: #fff; border: 1px solid #d8d8d8; border-radius: 4px; width: 100%; padding: 8px; resize: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select {  color: #333; font: 0.75rem "myriad-pro", "helvetica neue", arial, sans-serif; line-height: 1.1; background: #fff; border: 1px solid #d8d8d8; width: 100%; padding: 8px; resize: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(../images/icons/select-arrow.png) right 5px center no-repeat; background-size: 10px 16px }

.selection {
    font: 0.75rem "myriad-pro", "helvetica neue", arial, sans-serif;; line-height: 1.1;
}
.option {
    padding: 2px 2px 2px 5px;
    font-size: 0.75em;
}

.altered { color: #29ccad; font-weight: bold }
c { color: #29ccad; font-weight: bold }
.altered option { color: #333; font-weight: normal }

/* -----> Checkboxes */
.checkbox { display: inline-block; position: relative; width: 100% }
.checkbox input { opacity: 0; position: absolute; width: 100%; height: 100%; margin-left: -18px; cursor: pointer }
.checkbox span { float: left; width: 18px; height: 18px; border: 1px solid #d8d8d8; border-radius: 4px; }
.checkbox.altered span { border: 1px solid #29ccad; }
.checkbox.altered  {color: #000000; font-weight: normal }
.checkbox input:checked ~ span:after { content: ''; background: #29ccad; height: 12px; width: 12px; margin: 3px; float: left }
.intermediate input ~ span:after { content: ''; background: #cacaca; height: 12px; width: 12px; margin: 3px; float: left }
.checkboxtxt { font-size: 0.75rem; line-height: 22px; padding-left: 25px }

/* -----> Radio buttons */
.radio { position: relative; margin: 10px 20px 0 0 }
.radio::-moz-selection { background: transparent }
.radio::selection { background: transparent }

.radio input + span { background: white; content: ""; display: inline-block; margin: 0; border: 1px solid #d8d8d8; margin: 0 10px 0 0; padding: 0; vertical-align: top; width: 15px; height: 15px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden }
.radio div {display: inline-block; line-height: 1;}
.radio input + span::after { content: ""; display: block; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .1s; transition: -webkit-transform .1s; transition: transform .1s; transition: transform .1s, -webkit-transform .1s }
.radio input:checked + span::after { -webkit-transform: scale(1); transform: scale(1) }
.radio input { position: absolute; cursor: pointer; left: -20px; z-index: 1; width: 100%; height: 100%; opacity: 0 }

.radio input + span { border-radius: 100% }
.radio input + span::after { border-radius: 100%; margin: 2px; width: 11px; height: 11px }
.radio input:checked + span::after { background: #29ccad }

.altadress { display: none }
.radio.altadressopt input:checked .altadress { display: block }

/* -----> Labels */
.formfield { margin: 0 0 12px 0 }
label { display: block; font-size: 0.75rem; font-weight: bold; margin: 0 0 5px 0 }
.formfield label { margin: 0 0 2px 0 }

/* -----> Error message */
.formerror { position: relative; display: inline-block; background: #e9322d; font-size: 0.688rem; margin: 8px 0 0 0; padding: 5px; color: #fff; border: 1px solid #e9322d; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.formerror:after { content: " "; top: auto; bottom: 100%; left: 10px; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0,0,0,0); border-top-color: transparent; border-bottom-color: #e9322d; border-width: 6px; margin-left: -6px }

/* -----> User form general */
.userform { text-align: left; max-width: 225px; margin: 0 auto }
.userform:after { content: ""; display: table; clear: both }
.userform .btn { padding: 9px; line-height: 1; text-align: right }
.userform .redErr { color: red; font-size: 0.6rem; font-style: italic; margin-bottom: 3px }
.userform input:invalid { border: 1px solid #e9322d; color: #b94a48 }
.userform input:valid { color: green }
.userform input:disabled { background: #d8d8d8 }

.smallink { display: inline-block; float: right; text-align: right; font-size: 0.625rem; font-style: italic; color: #29ccad; text-decoration: none }
.pwform #terms_link { clear: right; margin-top: -12px }

#alternativAdr {margin-top: -30px; padding-bottom: 30px;}

/* BUTTONS
/*------------------------------------------------------ */
.btn { font-size: 0.75rem; font-weight: bold; padding: 10px 20px 8px 20px; border: 0; color: #fff; background: #29ccad; text-transform: uppercase; line-height: 1.4; margin: 0; display: inline-block; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; cursor: pointer }
.btn:hover { background: #333; color: #fff }
.btn:focus {outline: 0; }


.btnmr { margin-right: 5px }

.prodinfobtn { display: none; font-size: 0.563rem; padding: 8px 10px 6px 10px; background: #222; text-decoration: none; position: relative }
.prodinfobtn:after { content: " "; bottom: 100%; left: 50%; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(34, 34, 34, 0); border-bottom-color: #222; border-width: 8px; margin-left: -8px }

.largebtn { font-size: 1rem; max-width: 260px; padding: 15px 20px }

.settingsbtn { font-size: 1rem; text-transform: none; text-align: center; background: #e5c333; max-width: 260px; padding: 20px 30px }

.greybtn { background: #aaa }

.yellowbtn { background: #e5c333 }


.greenbtn { background: #390; font-size: 0.625rem; font-family: Arial, Helvetica, sans-serif }

.btn.smallbtn { padding: 8px; line-height: 1 }

/* -----> Disabled */
.disabled,
.disabled:hover { background: #666; color: #333; cursor: default }

/* -----> Next - Prev buttons */
#navContainer, #buttonTable { clear: both; border-top: 1px solid #d8d8d8; padding: 20px 0; margin: 20px 0 }
#nextButton,
#continueButton { float: right }


/* HEADER
/*------------------------------------------------------ */
.header { padding: 0 10px; background: #f5f5f5; position: relative }
.header .container { padding: 30px 0; border-bottom: 1px solid #ccc; display: flex }
.logo { height: 70px; background: url(../images/icons/logo.png) no-repeat; text-indent: -99999px }
.logo.crimson { width: 195px; background-position: left center; background-repeat: no-repeat }
.logo.service { width: 143px; background-position: right center }


/* NAVIGATION
/*------------------------------------------------------ */

/* -----> Mobile nav button */
.mobnavbtn { display: none; position: absolute; top: 0px ; right: 0px; width: 55px; height: 55px; background: url(../images/icons/retina/icons-mobnav.png) 20px 20px no-repeat; background-size: 22px 60px; text-indent: -99999px }
.mobnavbtn.open { background-position: 20px -22px }

/* -----> Header nav */
.headernav { margin: 25px 0 0 auto }
.headernav ul { margin: 0; padding: 0; line-height: 1 }
.headernav ul li.mainnav-li { display: inline-block; margin: 0 0 0 40px; padding: 0; font-size: 0.938rem }

/* Current menu item arrow */
.mainnav.open { position: relative; color: #222 }
.mainnav.open:after, 
.mainnav.open:before { left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none }
.mainnav.open:after { bottom: -36px; border-color: rgba(255, 255, 255, 0);	border-bottom-color: #fff; border-width: 9px; margin-left: -9px }
.mainnav.open:before { bottom: -35px; border-color: rgba(204, 204, 204, 0); border-bottom-color: #ccc; border-width: 10px; margin-left: -10px }

/* Subnav */
.subnav { width: 860px; position: absolute; top: 107px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 105; text-align: center; display:none }
.headernav ul li .subnav li.subnav-li { display: inline-block; font-size: 0.75rem; text-align: left; width: 90%; background: #fff; margin: 0 auto; padding: 5%; -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1); box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1) }

/* Subnav expandable content */
.expandbtn { display: block }
.expandbtn h5:after { display: inline-block; content: " "; height: 9px; width: 9px; margin: 0 0 0 5px; background: url(../images/icons/icons-rightarrow.png) center center no-repeat; background-size: 5px 9px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.expandbtn.open h5:after { -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg) }
.expandcnt { display: none }

/* -----> Subnav content */
.nav-prodinfo { max-width: 500px }
.headernav h4 { font-size: 1rem; margin: 0 0 10px 0 }

/* Price list */
.pricelisttable { width: 100%; font-size: 0.75rem }
.pricelisttable h5.smallheader { font-size: 0.813rem; margin: 20px 0 5px 0; }
.pricelistrow td {border-top: 1px solid #d8d8d8; padding: 8px 0 0 0;}
.pricelistrow td h6 {font-size: 0.9rem; line-height: 1.2; margin: 0 0 0 0;}
.pricelistrow td p {font-style: italic; margin-bottom: 0px;}
.pricelistrowend td { height: 6px; }
.pricelistprice { width: 90px; text-align: right }

/* Product info */
.nav-prodinfo h5 { font-size: 0.813rem; padding: 0 0 10px 0; margin: 30px 0 10px 0; border-bottom: 1px solid #d8d8d8 }

/* Close button */
.menuclosebtn { display: block; max-width: 100px; text-align: center; margin: 40px auto 0 auto; font-size: 0.875rem; font-style: italic }
.menuclosebtn:before { content: " "; display: inline-block; width: 10px; height: 10px; margin: 0 5px 0 0; background: url(../images/icons/retina/icons-mobnav.png) 0 -18px no-repeat; background-size: 10px 27px }

/* -----> 3 step menu */
.ladder-menu ul { margin: 0 -10px; padding: 0; list-style: none; text-align: center; display: flex }
.ladder-menu ul li { text-transform: uppercase; width: 33.33%; color: #d8d8d8; font-weight: 500; padding: 0 0 10px 0; margin: 0 10px; border-bottom: 4px solid #d8d8d8; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.menu-icon { display: block; margin: 0 auto 10px auto; width: 39px; height: 34px; background: url(../images/icons/icons_menu.png) no-repeat }
.menu-icon.step1 { background-position: 0 -34px }
.menu-icon.step2 { background-position: -40px -34px }
.menu-icon.step3 { background-position: -79px -34px }

/* Active tab */
#activeLadderStep .menu-icon.step1 { background-position: 0 0 }
#activeLadderStep .menu-icon.step2 { background-position: -40px 0 }
#activeLadderStep .menu-icon.step3 { background-position: -79px 0 }
#activeLadderStep { color: #29ccad; border-bottom: 4px solid #29ccad }

/* Hover state */
.ladder-menu ul li:hover,
#activeLadderStep:hover { color: #333; border-bottom: 4px solid #333 }
.ladder-menu ul li:hover .menu-icon.step1,
#activeLadderStep:hover  .menu-icon.step1 { background-position: 0 -68px }
.ladder-menu ul li:hover .menu-icon.step2,
#activeLadderStep:hover  .menu-icon.step2 { background-position: -40px -68px }
.ladder-menu ul li:hover .menu-icon.step3,
#activeLadderStep:hover  .menu-icon.step3 { background-position: -79px -68px }

/* -----> Footer navigation strip */
.nav-footer-strip { position: fixed; bottom: 0; width: 100%; background: #333; color: #fff; z-index: 100 }
.nav-footer-strip .container { display: flex; align-items: center }
.nav-footer-strip .stripitem { flex: 1 }
.stripitem:first-child { text-align: left; margin-right: auto }
.stripitem:nth-child(2) { justify-content: center; text-align: center }
.stripitem:last-child { text-align: right; margin-left: auto }
.stripitem .singleprice, .stripitem .total { margin: 0 }


/* Arrow buttons */
.arrowlink { display: inline-block; font-size: 0.875rem; padding: 10px; text-transform: uppercase; vertical-align: middle; position: relative }
.arrowlink.bw { background-position: left -30px; padding-left: 16px; margin-left: 0 }
.arrowlink.fw { background-position: right 6px; padding-right: 16px }
.arrowlink:hover { color: #d8d8d8 }

.arrowlink.bw:after { content: ""; position: absolute; left: 0; width: 16px; height: 20px; background: url(../images/icons/icons_prevnext_arrows.png) left -31px no-repeat; background-size: 6px 118px; -webkit-transform: translateZ(0); transform: translateZ(0) }
.arrowlink.fw:after { content: ""; position: absolute; right: 0; width: 16px; height: 20px; background: url(../images/icons/icons_prevnext_arrows.png) right 15px no-repeat; background-size: 6px 118px; -webkit-transform: translateZ(0); transform: translateZ(0) }
.arrowlink.bw:hover::after { background-position: left -102px; -moz-animation: bouncebw 1s infinite; -webkit-animation: bouncebw 1s infinite; animation: bouncebw 1s infinite }
.arrowlink.fw:hover::after { background-position: right -68px; -moz-animation: bouncefw 0.8s infinite; -webkit-animation: bouncefw 0.8s infinite; animation: bouncefw 0.8s infinite }

/* Orderbutton in strip */
.arrowlink.orderbtn { font-size: 0.75rem; padding: 13px 30px 13px 15px }
.arrowlink.fw:after { background-position: right -68px; margin-right: 15px }


/*  START PAGE / UPLOAD
/*------------------------------------------------------ */

/* -----> Intro text block */
.startblock-text { width: 48%; float: left }

/* How-to list */
ol.howto { list-style: none; padding: 0 }
ol.howto li { counter-increment: item; margin: 0 0 25px 0; padding: 6px 0 0 50px; position: relative }
ol.howto li:before { content: counter(item); display: block; position: absolute; top: 0; left: 0; width: 35px; height: 35px; background: #e5c332; color: #fff; font-weight: bold; text-align: center; line-height: 35px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px } 

/* -----> Upload drop box */
.uploaderDiv { width: 48%; float: right; margin: 30px 0 10px 0; padding: 50px 0; background: #f9f9f9; -webkit-box-shadow: 0 0 5 0 rgba(0,0,0,0.1); -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); box-shadow: 0 0 5px 0 rgba(0,0,0,0.1); text-align: center; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.uploaderDiv:hover { background: #fff }

#pageForm { width: 100%; height: 100%; text-align: center }

#drop { width: 100%; height: 100%; padding-top: 0 }

#icon { width: 215px; height: 138px; margin: 0 auto; background: url(../images/icons/icon_upload.png) bottom center no-repeat }

#drop p { font-size: 1.25rem; font-weight: bold; color: #29ccad; margin: 10px 20px 20px 20px }

/* #drop .btn { margin: 0 10px } */

#drop a.disabled { opacity: 0.2; pointer-events: none; cursor: default }

.uploadMore { display: block; max-width: 120px; background: #eee; padding: 5px; margin: 10px auto 0 auto; color: #29ccad }

#drop input { display: none }

/* Uploaded images box */
#pageForm ul { padding: 0; margin: 10px 0 20px 0; list-style: none }
#pageForm ul li { display: inline-block; background-color: #eee; padding: 15px; height: 52px; width: 280px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); position: relative }
#pageForm ul li input { display: none }

#pageForm ul li p {
    margin: 0;
    width: 160px; 
    overflow: hidden;
    white-space: nowrap;
    color: #333;
    font-size: 0.875rem;
    font-weight: bold;
    position: absolute;
    top: 22px;
    left: 90px;
    text-align: left;
}
#pageForm ul li i{
    font-weight: normal;
    font-style:normal;
    color:#888;
    display:block;
}
#pageForm ul li canvas {
    top: 15px;
    left: 20px;
    position: absolute;
}
#pageForm ul li span{
    width: 15px;
    height: 12px;
    background: url('../images/icons.png') no-repeat;
    position: absolute;
    top: 34px;
    right: 20px;
}
#pageForm ul li.working span { 
    height: 16px;
    background-position: 0 -50px;
}
#pageForm ul li.error p { color: red }


/* IMAGE PREVIEW/CONFIGURATOR 
/*------------------------------------------------------ */

/* -----> Don't know what this is */
#warningInfoContainer { position: absolute; visibility: hidden; width: 180px; height: 70px; border: solid 1px gray; padding: 1px; background-color: White; font-size: 12px; z-index: 10000 }
#imageInfoContainer { position: absolute; visibility: hidden; width: 250px; height: auto; border: solid 1px gray; padding: 2px; background-color: White; font-size: 12px; z-index: 10000 }

/* -----> Content panels */
.content-editor { display: -ms-flex; display: -webkit-flex; display: flex }
#preview-pane { width: 65.66%; margin: 20px 20px 0 0 }
#thumb-pane { flex: 1; padding: 20px 0 0 20px; margin-top: 20px }
#thumb-pane { transition: background-color .35s;}

/* -----> Image preview */
#previewBlock { display: block; position: relative; width: 100% }
.previewBlockBg { background: #efefef;}
#myScene { background: #efefef; min-height: 250px; height: 500px; position: relative;}

.previewbtns { width: 60px; position: absolute; top: 0; left: 0; z-index: 8; cursor: pointer }
.previewbtns div { display: block; width: 100%; height: 60px; font-size: 0.5rem; color: #222; text-transform: uppercase; text-align: center; line-height: 1.1; background: rgba(255,255,255,0.6) url(../images/icons/icons_preview.png) no-repeat; padding: 42px 0 0; outline: 1px solid #d8d8d8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: width 0.4s ease,height 0.4s ease,padding 0.4s ease; }
.previewbtns .saveimg { color: #fff; background: #29ccad url(../images/icons/check.png) center 10px no-repeat; background-size: 24px auto }
.previewbtns div.zoom { height: 24px; margin: 0 0 10px 0; background-position: center 4px }
.previewbtns div.prev360 { background-position: center 13px }
.previewbtns div.prev90 { background-position: center -152px; position: absolute; left: 62px; top: 0 }
.previewbtns div.prev360.set { background-color: #29ccad; opacity: 0.8 }
.previewbtns div.prevcrop { background-position: center -39px }
.previewbtns div.reset { background-position: center -94px }
.previewbtns div:hover { background-color: rgba(255,255,255,1) }
.previewbtns .saveimg:hover { background-color: #22aa91 }

#prevSave {
	display: none;
}

#prevCrop.set {
	display: none;
}
#prevRotate {
	width: 0px;
	overflow: hidden;
	white-space: nowrap;
	outline: 0px;
}
#prevRotate.set {
	width: 60px;
	outline: 1px solid #d8d8d8;
}
#resetCrop {
	height: 0px;
	overflow: hidden;
	white-space: nowrap;
	outline: 0px;
	padding: 0px;
}
#resetCrop.set {
	height: 60px;
	outline: 1px solid #d8d8d8;
	padding: 35px 0 0;
}

/*
#copybtn { width: 60px; position: absolute; top: 0; right: 0; z-index: 8; cursor: pointer }
#copybtn div { display: block; width: 100%; height: 60px; font-size: 0.5rem; color: #222; text-transform: uppercase; text-align: center; line-height: 1.1; background: rgba(255,255,255,0.6) url(../images/icons/icons_preview.png) no-repeat; padding: 42px 0 0; outline: 1px solid #d8d8d8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: width 0.4s ease,height 0.4s ease,padding 0.4s ease; }
#copybtn .copyimg { color: #fff; background: #390 url(../images/icons/plus.png) center 10px no-repeat; background-size: 24px auto }
*/


/* Prev/next image nav */
.previewnav { display:none; position: absolute; top: 220px; width: 40px; height: 40px; background: url(../images/icons/icons_imgnav_arrows.png) no-repeat; cursor: pointer; z-index: 8; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; /* -webkit-filter: drop-shadow(5px 5px 5px #000 ); filter: drop-shadow(5px 5px 5px #000) */ }
.previewnav.previmg { left: 0; background-position: 10px center }
.previewnav.previmg:hover { left: -4px }
.previewnav.nextimg { right: 0; background-position: right 10px center }
.previewnav.nextimg:hover { right: -4px }
.previewnav.show {
	display: block;
}


/* -----> Image info (dark) box */
.imginfo { background: #333; color: #fff; font-size: 0.75rem; display: flex; align-items: center }
.imginfobox { padding: 10px; flex: 1 }
.imginfobox:first-child { text-align: left; margin-right: auto }
.imginfobox:nth-child(2) { justify-content: center; text-align: center }
.imginfobox:last-child { text-align: right; margin-left: auto }
.imginfotext.first { overflow: hidden; max-height: 35px }
/* #imgTitle { display: inline-block; max-height: 35px; max-width: 153px; word-wrap: break-word; overflow: hidden } */

/* -----> Image settings form */
.settings { display: flex; flex-wrap: wrap; flex-direction: column; height: 260px; padding: 10px 0 0 }
.setting { margin: 10px 5%; width: 40%; height: 60px }
#img_quantity_all {width: 60px;}

.abtn {font-family: inherit; padding: 0px; border: none; background-color: transparent; font-weight: bold; color: #29ccad; text-decoration: none; cursor: pointer }
.abtn:focus {outline: 0; }

.info {cursor: help; display: inline-block; margin: 0 0 0 10px; width: 16px; height: 16px; background: url(../images/icons/icon_info.png) center center no-repeat; background-size: 15px 14px; vertical-align: text-top }

.quantity label { display: inline-block; margin: 30px 10px 0 0 }
.quantity input { display: inline-block; width: 55px }

.settings_all_images { padding: 0 0 20px 0 }
.settings_all_images_form { display: none; background: #fff; padding: 0 0 20px 0; border: 1px solid #d8d8d8; position: relative; z-index: 55 }

.pricebox { border-top: 1px solid #d8d8d8; padding: 25px 5%; position: relative }
.pricebox div { width: 33.33%; float: left }
.pricebox div:nth-child(3) { position: absolute; right: 5%; top: 23px; width: 50%; text-align: right }

.singleprice { font-size: 0.75rem }
.singleprice .sum { font-weight: bold }
.total { font-size: 0.75rem; font-weight: bold }
.total .sum { font-size: 1rem; font-size: 0.9rem }

/* OLD */
#menuContainer { display: none }

/* -----> Uploaded images */
#thumbTable { max-height: 1002px; padding: 10px 0 0 0; margin: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch }

.imgSubDiv { border: 1px solid #ccc; position: relative; width: 67px; height: 67px; display: inline-block; margin: 1px 5px; cursor: pointer }
.imgSubDummy { border: 1px solid #ccc; position: relative; width: 67px; height: 67px; display: inline-block; margin: 1px 5px; cursor: pointer }
.imgSubDiv .holder { position: absolute; width:100%; height: 100%; display: flex; align-items: center; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.imgSubDummy .holder { position: absolute; width:100%; height: 100%; display: flex; align-items: center; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
.imgSubDummy img { display: block; margin: auto; width: 50px; height: 50px;  }

.imgSubDiv:hover .deleteIcon { background: #fff url(../images/icons/image_unprocessed_red.png) center center no-repeat; background-size: 8px 8px; height: 20px; width: 20px; position: absolute; top: -5px; right: -5px; border: 1px solid #d8d8d8; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer }

.imgSubDiv:hover .copyIcon { background: #fff url(../images/icons/x_green.png) center center no-repeat; background-size: 10px 10px; height: 20px; width: 20px; position: absolute; top: -5px; left: -5px; border: 1px solid #d8d8d8; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; cursor: pointer }

/* Image processing */
.imgSubDiv.unprocessed { background: #fff }
.imgSubDiv img { display: block; margin: auto;  -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.5);  }

.imgSubDiv .holder:hover img {
	transform: scale(1.1);
}

.imgSubDiv .holder:hover,
.imgSubDiv.active .holder { background-color:#c0c0c0;}

.imgSubDiv .statusIcon { display: none; position: absolute; top: 0; left: 0; width: 100%; background: url(../images/icons/check.png) right bottom no-repeat;
	background-size: 10px 10px }
.imgSubDiv.unprocessed .statusIcon { display: none }
.imgSubDiv.processed .statusIcon { display: none }

/* Tooltips */
.tooltip { display: inline-block; overflow: hidden; position: absolute; z-index: 1; background: #600; color: #fff; font-size: 0.563rem; line-height: 1; text-transform: uppercase; text-align: center; height: 0; width: 80px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease }
.tooltip:after { content: ''; position: absolute; border: solid; border-width: 0 5px 5px; border-color: #600 transparent; display: block; width: 0; z-index: 1; top: -5px; right: 5px }
/*.deleteIcon:hover .tooltip { height: 9px; padding: 8px; overflow: visible } */

#uploadForm { display: none;}

/* ORDER CONFIRMATION
/*------------------------------------------------------ */

#imageConfirmTableContainerOuter { display: none }
#confirmPage { margin: 40px 0 20px 0; font-size: 0.75rem }
/*#userRegisterBlock { padding: 0 20px }
*/
#orderbtn, #nextTD { display: inline-block; float: right }

.userinfo { max-width: 360px; margin: 0 auto;}
.userinfo ul { margin: 10px 0; padding: 0; list-style: none }
.userinfo ul li { margin: 5px 0; position: relative; padding-left: 120px; word-wrap: break-word }
.userinfo span { display: block; font-weight: bold; position: absolute; top: 0; left: 0; width: 120px }

/* -----> LoginBlock (user information) */
#logInBlock { max-width: 300px; margin: 0 auto }
#loginTable { color: #d8d8d8; margin: 10px 0 }
.userlabel { font-weight: bold; padding-right: 15px }

.noaccountfound { background: #fff; padding: 30px }
.noaccountfound .btn { margin: 5px 5px 0 5px }

/* White block w grey border */
.borderblock { background: #fff; border: 1px solid #d8d8d8; overflow: hidden }
.borderblock_notop { border-top: 0px }

/* -----> Order summary/basket */
.basketblock { padding: 30px; border-top: 1px solid #d8d8d8; overflow: hidden }
.basketblock:first-of-type { border-top: 0 }
.basketline { padding-bottom: 30px; margin: 0 -30px 30px -30px; border-bottom: 1px solid #d8d8d8 }
/*.basketblock:last-of-type { padding-bottom: 0 } */


.basketblock h3 { font-size: 0.938rem; margin: 0 0 20px 0 }
.basketblock h4 { font-weight: normal}
.basketblock table { width: 100% }
.basketblock th,
.basketblock td { text-align: left; vertical-align: top; padding: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }


/* Alternative adress */
.altadress { margin: 20px; max-width: 300px }
.altadress .formfield { width: 100%; float: none; margin: 0 0 12px 0 }

/* Order summary */
.ordersummary { max-width: 350px }
.ordersummary ul { margin: 0px 0; padding: 0; list-style: none }
.ordersummary ul li { position: relative; word-wrap: break-word }
.ordersummary ul li.ordertotal { font-weight: bold; }
.ordersummary span { display: inline-block; font-weight: normal; width: 165px; }
.ordersummary span.pris { text-align:right; width: 100px; }
.ordersummary span.pris:before { content: "£ "; }
.ordersummary span.ordertotal { font-weight: bold; }
.ordersummary span.orderbig { font-size:1.2rem; }

/* Order specification */
.orderspec th:nth-child(n+3),
.orderspec td:nth-child(n+3) { text-align: right; width: 20% }
.orderspec th:nth-child(n+2),
.orderspec td:nth-child(n+2) { text-align: right; }
.orderspec td p {font-size: 0.6rem; font-style: italic; margin-top: -4px; margin-bottom: 0px; }
/*a.orderspec-showmore { display: block; margin: 5px 0 0 0 }*/

.orderSpecComplete { margin-top: 20px }
.mobscroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap }
.orderspec-complete { clear: both; width: auto; max-width: 1000px }
.orderspec-complete td { padding: 3px 5px }
.orderspec-complete th:nth-child(1),
.orderspec-complete td:nth-child(1) { min-width: 15%; padding-right: 10px }
.orderspec-complete th:nth-child(n+2),
.orderspec-complete td:nth-child(n+2) { text-align: right; width: 10% }

.basketblock .total { float: none; width: auto; clear: both; margin-top: 30px }

/* If Klarna is selected */
.klarnaopen { cursor: pointer; width: 40px; height: 40px; position: fixed; bottom: 70px; left: 50%; margin-left: -20px; z-index: 100; background: url(../images/icons/icons_arrow_down.png) center center no-repeat; -webkit-animation: scrolldown 2.5s ease-in-out infinite; animation: scrolldown 2.5s ease-in-out infinite }



/* FOOTER
/*------------------------------------------------------ */

/* -----> Decorative image */
.decorimg { clear: both; width: 100%; height: 400px; background: url(../images/icons/express_pano.jpg) center center no-repeat; background-size: cover }

footer .container {padding: 60px 20px 40px 20px;color: #fff;display: flex;flex-wrap: wrap }
.footercol { width: 33.33%; margin: 0 20px 0 0 }



/*  ANIMATIONS
/*------------------------------------------------------ */

/* -----> Loader */
#loader { z-index: position: fixed; width: 125px; height: 125px; margin: auto; top:0; left:0; right: 0; bottom: 0; transform:scale(0.6); -o-transform:scale(0.6); -ms-transform:scale(0.6); -webkit-transform:scale(0.6); -moz-transform:scale(0.6) }
.loader-dot { position: absolute; background: rgba(0,0,0,0); height: 22px; width: 22px; border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -webkit-animation: spinnfade 1.2s infinite normal, -moz-animation: spinnfade 1.2s infinite normal; -ms-animation: spinnfade 1.2s infinite normal; -o-animation: spinnfade 1.2s infinite normal; animation: spinnfade 1.2s infinite normal }

#loader-1 { left: 0; top: 51px; animation-delay: 0.45s; -o-animation-delay: 0.45s; -ms-animation-delay: 0.45s; -webkit-animation-delay: 0.45s; -moz-animation-delay: 0.45s }
#loader-2 { left: 15px; top: 15px; animation-delay: 0.6s; -o-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s }
#loader-3 { left: 51px; top: 0; animation-delay: 0.75s; -o-animation-delay: 0.75s; -ms-animation-delay: 0.75s; -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s }
#loader-4 { right: 15px; top: 15px; animation-delay: 0.9s; -o-animation-delay: 0.9s; -ms-animation-delay: 0.9s; -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s }
#loader-5 { right: 0; top: 51px; animation-delay: 1.05s; -o-animation-delay: 1.05s; -ms-animation-delay: 1.05s; -webkit-animation-delay: 1.05s; -moz-animation-delay: 1.05s }
#loader-6 { right: 15px; bottom: 15px; animation-delay: 1.2s; -o-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s }
#loader-7 { left: 51px; bottom: 0; animation-delay: 1.35s; -o-animation-delay: 1.35s; -ms-animation-delay: 1.35s; -webkit-animation-delay: 1.35s; -moz-animation-delay: 1.35s }
#loader-8 { left: 15px; bottom: 15px; animation-delay: 1.5s; -o-animation-delay: 1.5s; -ms-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s }

@keyframes spinnfade {
	0% { background: rgb(255,255,255) }
	100% { background: rgba(0,0,0,0) }
}
@-o-keyframes spinnfade {
	0% { background: rgb(255,255,255) }
	100% { background: rgba(0,0,0,0) }
}
@-ms-keyframes spinnfade {
	0% { background: rgb(255,255,255) }
	100% { background: rgba(0,0,0,0) }
}
@-webkit-keyframes spinnfade {
	0% { background: rgb(255,255,255) }
	100% { background :rgba(0,0,0,0) }
}
@-moz-keyframes spinnfade {
	0% { background: rgb(255,255,255) }
	100% { background: rgba(0,0,0,0) }
}

decline ul { padding-left: 20px; margin-bottom: 30px }

/* -----> Button arrow icon */

/* bounce forward */
@-webkit-keyframes bouncefw {
  0%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  56% {
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}
@keyframes bouncefw {
  0%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  56% {
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
}

/* bounce backwards */
@-webkit-keyframes bouncebw {
  0%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  56% {
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
}
@keyframes bouncebw {
  0%, 100% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  56% {
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
}

/*-----> Down scroll arrow */
@-webkit-keyframes scrolldown {
    0% {
        background-position: center center;
        opacity: 1;
    }
    20% {
        background-position: center 20px;
        opacity: 0;
    }
    21% {
        opacity: 0;
        background-position: center 0;
    }
    40% {
        background-position:  center center;
        opacity: 1;
    }
    100% {
        background-position:  center center;
        opacity: 1;
    }
}
@keyframes scrolldown {
    0% {
        background-position: center center;
        opacity: 1;
    }
    20% {
        background-position: center 20px;
        opacity: 0;
    }
    21% {
        opacity: 0;
        background-position: center 0;
    }
    40% {
        background-position:  center center;
        opacity: 1;
    }
    100% {
        background-position:  center center;
        opacity: 1;
    }
}


/*  RETINA IMAGES
/*------------------------------------------------------ */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {

	.logo { background: url(../images/icons/retina/logo.png) no-repeat; background-size: 337px 70px }
	.menu-icon { background: url(../images/icons/retina/icons_menu.png) no-repeat; background-size: 119px 102px }
	.previewbtns div { background: rgba(255,255,255,0.6) url(../images/icons/retina/icons_preview.png) no-repeat; background-size: 34px 189px }
	.previewnav { background: url(../images/icons/retina/icons_imgnav_arrows.png) no-repeat; background-size: 62px 36px }
	.klarnaopen { background: url(../images/icons/retina/icons_arrow_down.png) center center no-repeat; background-size: 36px 21px }

}