/* RESPONSIVE
/*------------------------------------------------------ */

/* -----> Max-width 1030px */

@media screen and (min-width: 801px) and (max-width: 1030px) {

	/* -----> Containers */
	.main-content { padding: 20px 0 30px 0 }
	.col-left { width: 64% }
	.col-right { width: 34% }

	/* -----> Header */
	.header .container { padding: 20px 0 }

	/* -----> Navigation */
	.headernav ul li.mainnav-li { margin: 0 0 0 25px }
	.mainnav.open:after { bottom: -25px }
	.mainnav.open:before { bottom: -24px }
	.subnav { top: 88px }

	.ladder-menu ul li { font-size: 0.875rem }

	/* -----> Start page/upload */
	.uploaderDiv { margin: 20px 0 }
	#icon { height: 170px }

	/* -----> Image preview */
	#preview-pane { margin-top: 20px }
	#myScene { height: 400px }
	.previewnav { top: 175px }

}


/* -----> Max-width 800px */

@media screen and (max-width: 800px) {

	/* -----> Positions and displays */
	.notdesktop { display: inline-block }
	.scrollblock { overflow: hidden }

	/* -----> Containers */
	.main-content { padding: 20px 0 }
	.col-left,
	.column-left,
	.column-right,
	.col-right { width: 100%; float: none }
	.col-right { text-align: center }
	.column-left { border-right: none; padding-top: 20px; text-align: center }
	.column-right { padding-bottom: 20px; border-bottom: 1px solid #d8d8d8; margin-bottom: 0px; text-align: center }
	.basketblock .col-right { text-align: left; padding-top: 20px }
	.container { padding: 0 }
	#login.userform {margin: 0 auto }

	/* White block w grey border */
	.borderblock { border-width: 1px 0 }

	/* -----> Text */
	.smallheader { margin: 0 0 10px 0 }
	.medheader { font-size: 0.875rem; margin: 20px 0 10px 0 }
	.bigheader { font-size: 1rem; margin: 20px 0 0 0 }
	.bigabrilheader { font-size: 1.5rem; margin: 20px 0 0 0 }
	.greyabrilheader { font-size: 1rem }


	/* POP-UPS
	/*------------------------------------------------------ */
	.popup { width: 80%; left: 0; top: 30px; margin: 0 5%; padding: 5% }

	/* -----> Price list */
	.pricelisttable { font-size: 0.75rem }
	.pricelistprice { width: 70px }

	#helpBlock { width: 280px; top: 20px; margin-left: -160px }
	#helpBlock { height: 400px }

	/* -----> Help popups when configurating image */
	#help_crop, #help_product, #help_surface, #help_border, #help_special, #help_quality {  width: 280px; top: 20px; margin-left: -160px }


	/* BUTTONS
	/*------------------------------------------------------ */
	.prodinfobtn { display: inline-block }
	.prodinfobtn.open:after { content: " "; bottom: auto; top: 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: transparent; border-top-color: #222; border-width: 8px; margin-left: -8px }

	/* HEADER
	/*------------------------------------------------------ */
	.header .container { padding: 15px 0 }
	.logo { height: 38px; background: url(../images/icons/retina/logo_mob.png) no-repeat; background-size: 196px 38px }
	.logo.crimson { width: 107px }
	.logo.service { width: 89px }


	/* NAVIGATION
	/*------------------------------------------------------ */
	.mobnavbtn { display: block }
	.headernav { display: none; background: #fff; margin: 0; padding: 10px 0; position: fixed; left: 10px; right: 10px; top: 56px; bottom: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll !important; z-index: 10000 }
	.headernav.open { display: block }

	.headernav ul li.mainnav-li { display: block; margin: 0; padding: 20px 20px 0 20px }

	/* Current menu item arrow */
	.mainnav:before { display: inline-block; content: " "; height: 11px; width: 11px; margin: 0 8px 0 0; background: url(../images/icons/icons-rightarrow.png) center center no-repeat; background-size: 6px 11px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease }
	.mainnav.open:after { display: none }
	.mainnav.open:before { bottom: 0; left: 0; border: 0; content: " "; height: 11px; width: 11px; position: static; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg) }
	.mainnav.open:before { border-color: transparent; border-bottom-color: transparent; border-width: 0; margin-left: 0 }

	/* Subnav */
	.subnav { width: 100%; position: static; -webkit-transform: none; -ms-transform: none; transform: none; z-index: 0; text-align: left }
	.headernav ul li .subnav li.subnav-li { display: block; font-size: 0.75rem; text-align: left; width: auto !important; background: #fff; margin: 10px 19px; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none }

	/* -----> Subnav content */
	.headernav h4 { display: none }

	/* Product info */
	.nav-prodinfo h5 { padding: 0; margin: 20px 0 10px 0; border-bottom: none }

	/* Close button */
	.menuclosebtn { text-align: left; margin: 20px 0 30px 0; font-size: 0.75rem }

	.ladder-menu ul { margin: 0 }
	.ladder-menu ul li { font-size: 0.75rem; font-weight: bold; margin: 0 }
	.menu-icon { display: none }


	#navContainer, #buttonTable { margin: 20px 10px }

	/* -----> Strip navigation */
	.arrowlink { font-size: 0.75rem }
	.arrowlink.bw { margin-left: 10px }

	.arrowlink.orderbtn { padding: 11px 30px 11px 10px; text-align: center }
	.arrowlink.orderbtn:hover { padding: 11px 30px 11px 10px }
	/* .stripitem .singleprice, .stripitem .total { display: block; margin: 0; text-align: center } */

	/*  START PAGE UPLOAD
	/*------------------------------------------------------ */
	.startblock-text { width: 90%; margin: 0 5%; float: none }
	.uploaderDiv { float: none; width: 100%; margin: 30px 0; padding: 20px 0 }
	#icon { height: 70px; background-size: 109px 70px }
	#drop p { font-size: 1rem; margin: 10px 20px 20px 20px }


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

	/* -----> Content panels */
	.content-editor { display: block }
	#preview-pane { width: 100%; margin: 20px 0 0 0 }
	#thumb-pane { background: transparent; border: 0; padding: 20px 0 0 0; margin-top: 0 }


	/* -----> Image preview */
	#preview-pane { margin-top: 20px }
	#myScene { height: 400px }
	.previewbtns { width: 60px }
	.previewnav { top: 175px }
	/* .previewbtns a { background: #eee url(../images/icons/retina/icons_preview.png) no-repeat; background-size: 30px 69px }
	.previewbtns a.zoom { height: 20px; margin: 0 0 5px 0; background-position: center 4px }
	.previewbtns a.prev360 { height: 20px; margin: 0 0 10px 0; background-position: center -20px }
	.previewbtns a.reset { background-position: center -52px } */

	/* -----> Image info (dark) box */
	.imginfobox { padding: 5px }
	#imgTitle { display: inline-block; max-width: 100%; max-height: 30px; word-wrap: break-word }

	/* -----> Image settings form */
	.imgsettings { padding: 20px 0 }	
	.settings { display: block; height: auto; padding: 10px 20px 0 20px }
	.setting { margin: 0 0 20px 0; width: 100%; height: auto }

	.quantity label { margin: 0 10px 0 0 }

	.pricebox { padding: 20px 10px 0 10px }
	.pricebox div { width: 50%; float: none }
	.pricebox div:nth-child(2) { text-align: left }
	.pricebox div:nth-child(3) { right: 10px; top: 30px }

	.nav-footer-strip .singleprice .sum { font-size: 0.75rem }
	.nav-footer-strip .total .sum { font-size: 0.75rem }


	/* -----> Uploaded images */
	#thumb-pane { padding: 20px 10px 0 10px; border-top: 1px solid #d8d8d8 }
	#thumb-pane h4 { margin: 0 0 5px 0 }
	#thumbTable { height: auto; padding: 10px 0; margin: 0 0 20px 0; overflow-x: scroll; -webkit-overflow-scrolling: touch; overflow-y: hidden; white-space: nowrap }
	.imgSubDiv { margin: 0 15px 0 0 }


	/* ORDER CONFIRMATION
	/*------------------------------------------------------ */
	#confirmPage { margin: 20px 10px }
	/*#userRegisterBlock { padding: 20px 10px }*/

	/* -----> Order summary/basket */
	.basketblock { padding: 20px 10px }
	.basketblock.clearfix { margin-top: 0 }
	.basketline { padding: 0 10px 30px 10px; margin: 0 -10px 30px -10px }

	/* Order specification */
	.orderspec th:nth-child(n+3),
	.orderspec td:nth-child(n+3) { text-align: right; width: 25% }

	/* FOOTER
	/*------------------------------------------------------ */
	.decorimg { height: 130px }
	footer .container { padding: 30px 20px; font-size: 0.875rem }
	.footercol { width: 46%; margin: 0 }
	.footercol:first-child { margin: 0 4% 0 0 }


	/*  PAGE LOADING - WAIT
	/*------------------------------------------------------ */

	#acceptBlock { width: 260px; }
	.waitBlock { width: 260px; height: 823px;}


}

/* -----> Max-width 400px */

@media screen and (max-width: 450px) {

	.previewsize { display: block }
	.footercol { width: 100%; margin: 0 }
	.footercol:first-child { margin: 0 0 10px 0 }

}