@media (max-width: 1230px){	#logo{left: 0px;} }
@media (max-width: 1000px){	#logo{height: 190px;} }
@media (max-width: 800px){	#logo{height: 160px;} }
@media (max-width: 600px){	#logo{height: 130px;} }
@media (max-width: 400px){	#logo{height: 100px;} }

@media (max-width: 1200px){ body{font-size:12px;} }
@media (max-width: 768px){ 	body{font-size:10px;} }

@media (max-width: 1200px){ #areas .area > p.large{font-size:1.5em;} }
@media (max-width: 1000px){ #areas .area > p.large{font-size:1.4em;} }
@media (max-width: 800px){ 	#areas .area > p.large{font-size:1.3em;} }
@media (max-width: 600px){ 	#areas .area > p.large{font-size:1.1em;} }
@media (max-width: 400px){ 	#areas .area > p.large{font-size:0.9em;} }

@media (max-width: 1000px){	#page_index header{height: 400px;} }
@media (max-width: 800px){	#page_index header{height: 360px;} }
@media (max-width: 600px){	#page_index header{height: 320px;} }
@media (max-width: 400px){	#page_index header{height: 280px;} }

@media (max-width: 1000px){ header{height: 310px;} }
@media (max-width: 800px){	header{height: 270px;} }
@media (max-width: 600px){	header{height: 230px;} }
@media (max-width: 400px){	header{height: 190px;} }

@media (max-width: 1000px){	hr{height: 35px;background-size: auto 35px;} }
@media (max-width: 800px){	hr{height: 30px;background-size: auto 30px;} }
@media (max-width: 600px){	hr{height: 25px;background-size: auto 25px;} }
@media (max-width: 400px){	hr{height: 20px;background-size: auto 20px;} }

@media (max-width: 1000px){	h2.home_sep{padding-top: 35px;background-size: auto 35px;} }
@media (max-width: 800px){	h2.home_sep{padding-top: 30px;background-size: auto 30px;} }
@media (max-width: 600px){	h2.home_sep{padding-top: 25px;background-size: auto 25px;} }
@media (max-width: 400px){	h2.home_sep{padding-top: 20px;background-size: auto 20px;} }

@media (max-width: 1000px){	.pu #calendarWrap{height: 190px;} }
@media (max-width: 800px){	.pu #calendarWrap{height: 160px;} }

@media (max-width: 1200px){	#beau_prods td{font-size:13px;padding:5px;} }
@media (max-width: 1000px){ #beau_prods td{font-size:12px;padding:4px;} }
@media (max-width: 800px){ 	#beau_prods td{font-size:11px;padding:3px;} }
@media (max-width: 600px){ 	#beau_prods td{font-size:8px;padding:2px;} }
@media (max-width: 400px){ 	#beau_prods td{font-size:6px;padding:1px;} }

@media (max-width: 600px){
	
	#signup_pu form{
		width: 200px;
	}
	
	#cookie, #custom_message{
		width: 290px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
	}
	
	#copy{
		text-align: center;
		float: none;
	}
	
	footer{
		text-align: center;
	}
	footer #links,
	footer #signup,
	footer #n9{
		float:none;
		width: 100%;
		padding: 0;
	}
	footer #links li,
	footer #signup{
		text-align: center;
	}
	#home_social,
	#home_blog{
		float:none;
		width: 100%;
	}
	
	body{
		height: auto;
	}
	
	#page_main{
		font-size: 10px;
	}
	
	.template1 #page_right,
	.template1 #page_main{
		float: none;
		width: 100%;
		clear: both;
	}
	
	.template2 #page_right,
	.template2 #page_main{
		float: none;
		width: 100%;
		clear: both;
	}
	
	.template3 #page_right,
	.template3 #page_main{
		float: none;
		width: 100%;
		clear: both;
	}
	
	#page_wrap{
	}
	
	footer #signup form input{
		margin: 10px auto;
	}

	#basket th, #basket td {
    	padding: 0.5rem !important;
	}
	#page_checkout #main {
		max-width: 94%;
	}
}

@media (max-width: 1000px){ 	
	
	#mob_phone,
	#mob_menu{
		display:block;
	} 
	
	#choose,
	#home_col_calendar .pu{
		display:none;
	}
	
	.date_picker{
		display:block;
	}
	
	#top_bar {
		display: block;
		background: #4192C7;
		position: fixed;
		width: 60%;
		right: 0px;
		top: 0px;
		height: 100%;
		z-index: 10;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		padding-top: 50px;
		font-size: 2em;
		line-height: 300%;
		overflow: hidden;
		-webkit-transition: right 0.3s; /* For Safari 3.1 to 6.0 */
		transition: right 0.3s;
	}
	
	#top_bar.hide{
		right: -60%;
	}
	
	#main_nav{
		height: auto;
		line-height: 120%;
		float:none !important;
		margin-left: 0 !important;
	}
	#blog_nav_link,
	#main_nav li{
		display: block;
		margin-left:0;
		padding: 5px 0;
		border-bottom: 1px solid #fff;
	}
	
	#main_nav ul,
	#blog_nav_link{
		float:none !important;
	}
	
	#top_bar > .centered > * {
		float:none;
		margin-left: 0;
	}
	
	#header_social,
	#header_basket {
		text-align: center;
	}
	
	#page_title{
		width: 96%;	
	}
	
	#steps_nav {
		margin: 1em 0;
	}
	
	.step_nav{
		float:none;
		clear:both;
		width: 100%;
		margin: 1px 0;
	}
	
	.step_nav > span{
		margin-top:0;
		width: 10%;
		line-height: 25px;
		height: 25px;
		font-size: 14px;
		background-size: auto 25px;
	}
	
	.step_nav > div.step_nav_title{
		height: auto;
		width: 89%;
	}
	
	.step_nav > div.step_nav_title span{
		float:left;
	}
	
	.step_nav > div.step_nav_title br{
		display:none;
	}
	
	.step_nav a{
		float:right;
	}
	
	.step .cell_layout{
		padding: 1em;
	}
	.box_body {
	    height: 65%;
	}
	#info_box, #preview_box, #step_box, .step, .info_box {
		float:none;
		width: 100%;
		margin-bottom: 1em;
		position: relative;
		top: auto;
		left: auto;
		height: 300px;
	}
	#zoom_button, #compare_button {
		margin-top: 1rem;
	}
	
	#choose_photos{
		white-space: nowrap;
	}
	
	.choose_photo{
		display: inline-block;
		height: 100px;
		margin: 5px 0;
	}
	
	.choose_photo img{
		width: auto;
		height: 100%;
	}
	
	.choose_photo.portrait{
		width: auto;
	}
	
	#preview_box{
		margin: 1em 0;
	}
	
	#choose_types .cell_layout > ul > li{
		
	}

	#choose_types > div > ul {
		padding-left: 0px;
		margin: .5rem 0;
	}
	
	#choose_types ul ul{
		display: inline-block;
	}
	
	#choose_types ul ul li{
		display: block;
		font-size: .8rem;
		margin-bottom: .25rem;
		padding: .75rem 0;
	}
	
	#choose_types ul input.choose_type{
		vertical-align: middle;
		margin:0;
	}
	#choose_types ul input.choose_frame{
		vertical-align: middle;
		margin:0 0 0 0.5em;
	}
	#choose_types > .cell_layout > ul > li .type_label {
	    padding: 15px 15px;
	}
	
	#customer_checkout .three_cols{
		width: 100%;
		clear:both;
		float:none;
		margin:0 0 3em 0;
	}
	
	#card_details{
		max-width: 90%;
	}
	
	form label{
		float:none;
		width: 100%;
		display: block;
	}
	form textarea, form select, form input{
		float:none;
		width: 100%;
	}
}