/* Wide desktop size */
@media only screen and (min-width: 996px) {
	.editor.scene .grid-100s{
		width: calc(100% - 360px);
		max-width: calc(100% - 360px);
		float: left;
	}

	.editor.scene .grid-s{
		width: 320px;
		max-width: 320px;
		float: left;
	}

	main{
		min-height: calc(100vh - 330px);
	}

	body.book-mode main{
		min-height: initial;
	}
}

/* Normal desktop size */
@media only screen and (min-width: 768px) {
	.show-xs,
	.show-xs-inline,
	.show-m,
	.show-m-inline{
		display: none !important;
	}

	.ie .news .newslist-image-wrapper img{
		width: 223px;
	}
}

/* Tablet Portrait size to Base 996px  (ipad mini) */
@media only screen and (min-width: 768px) and (max-width: 995px) {

	/* general */
	h1,
	.callout-home em.callout h1,
	.callout-maps-home h1{
		font-size: 40px;
	}
	h2{
		font-size: 20px;
	}
	header nav ul li a {
		font-size: 14px;
		padding: 0px 6px;
	}

	nav.personal-menu ul li a {
		font-size: 14px;
		padding: 0px 5px;
	}

	.callout-bg {
		height: 400px;
		min-height: 400px;
	}
		.callout-bg.callout-shipping em{
			font-size: 30px;
		}
			.callout-bg em > .author {
				font-size: 20px;
			}
		.callout-home em{
			/*left: 50%;*/
			line-height: 1.5em;
		}

	.page.home.header{
		margin-bottom: -120px;
	}
		.page.home.header-content .title h1 {
			line-height: 1.33em;
		}

		.page.home .ribbon:after{
			height: 160px;
		}

	span.button, a.button, input.button, button.button{
		font-size: 20px;
	}
	.shipping ul {
		width: 75%;
	}

	/* shop */
	.shop.orderflow{
		font-size: 13px;
	}
		.shop.orderflow .step i.fa{
			font-size: 19px;
		}

	.shop.container .grid_8.prefix_2{
		padding: 0px;
		width: calc(100% - 16px);
		margin: 0px;
	}
		.shop.container .grid_8.prefix_2 table{
			margin: 0em auto;
		}

	/* editor */
	.editor .profile input{
		width: calc(90% - 26px);
	}
	.editor .profile select{
		width: calc(90%);
	}
	.editor .pages-wrapper {
		max-height: calc(100vh - 450px);
	}
		.editor.sorter .pages-wrapper {
			max-height: calc(100vh - 320px);
			padding: 0px 0px;
		}
	.editor .scenes-browser .scenes-grid-wrapper{
		max-height: calc(100vh - 250px);
	}
		.editor .scenes-browser .covers-grid-wrapper{
			max-height: calc(100vh - 310px);
		}

		.editor .scenes-browser .scene{
			margin-right: 10px;
			margin-bottom: 10px;
		}

	.editor .faces,
	.editor .bodies{
		text-align: left;
		width: 73px;
	}

	.canvas-wrapper canvas {
		max-width: 150px !important;
	}
	.editor .scenes-browser .filter-wrapper select {
		width: 205px;
	}
	.editor h1 {
		font-size: 32px;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	.editor .editor-info {
		min-height: 50px;
		line-height: 50px;
	}
		.editor .editor-info i.fa{
			top: 7px;
			left: 0px;
		}
	.editor.scene canvas{
		width: 566px;
		height: calc(100vh - 225px);
	}
	.editor.scene .scene-settings-wrapper{
		height: calc(100vh - 219px);
	}
	.editor.scene .settings-panel{
		height: calc(100vh - 219px);
	}
	.editor .faces span.face{
		margin: 0px 1px;
	}
		.editor .faces span.face label{
			height: 55px;
			width: 55px;
		}
	.editor .bodysample{
		/*width: 330px;*/
	}

	.books .book-item canvas{
		width: 112px;
		height: 159px;
	}
}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
	/* 996gs hotfix */
	.container .grid_1,
	.container .grid_2,
	.container .grid_3,
	.container .grid_4,
	.container .grid_5,
	.container .grid_6,
	.container .grid_7,
	.container .grid_8,
	.container .grid_9,
	.container .grid_10,
	.container .grid_11,
	.container .grid_12{
		margin: 0px auto;
		display: block;
	}

	/* general */
	.hidden-m{
		display: none !important;
	}

	.maps .grid-hw,
	.grid-fw{
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		padding: 0px;
		margin: 0px;
	}
		.maps .grid-hw,
		.grid-hw{
			position: relative;
			display: block;
			width: 100%;
			max-width: 100%;
			min-height: 200px;
			padding: 0px;
			margin: 0px;
			float: none;
		}

		span.button, a.button, input.button, button.button {
			padding: 0px 10px;
			font-size: 20px;
		}


	/* content */
	.page.home.header{
		margin-bottom: -120px;
	}

	.callout-maps-home h1,
	h1{
		font-size: 25px;
	}

	p{
		font-size: 4vw;
	}
	.shipping table td{
		font-size: 3.6vw;
	}

	.page.faq .faq-block h2,
	h2{
		font-size: 5vw;
		margin-top: 1em;
		margin-bottom: .5em;
	}
	.shipping hr {
		padding-top: .5em;
		margin-bottom: 1em;
	}

	header{
		min-height: auto;
	}
	.callout-bg{
		height: 250px;
		min-height: 250px;
	}

	.callout-bg em {
		font-size: 16px !important;
		line-height: 1.25em;
	}
		.callout-bg em > .author {
			margin-top: .75em;
			font-size: 16px;
		}

		.callout-home em{
			left: auto;
		}
		.callout-home{
			min-height: 75vw;
			height: 75vw;
		}
		.callout-books em{
			right: 20px;
			text-align: right;
		}

	.shipping ul,
	.callout-maps ul{
		width: 95%;
		font-size: 4vw;
	}
	main{
		min-height: 0px;
	}
	main#content.book-content{
		/*display: none;*/
	}

	canvas{
		max-width: 100%;
	}



	.profile .login-with-facebook{
		font-size: 16px;
	}
	.profile table td {
		font-size: 14px;
	}
	.profile table td:first-child {
		min-width: 105px;
	}
	.page.home.header-content .title{
		top: 25%;
	}
	.page.home.header-content .title h1{
		line-height: 1.3em;
		font-size: 20px;
	}
	.page.home.header-content .title p{
		font-size: 18px;
	}
	.page.home.header-content .title p.tryit{
		position: relative;
		padding-bottom: 0.75em;
	}

	.page.home li{
		font-size: 4vw;
	}
	.page.home .timeline:before{
		display: none;
	}
	.page.home .timeline .timeline-item.item-left .grid_6,
	.page.home .timeline .timeline-item.item-right .grid_6,
	.page.home .ribbon.ribbon-bottom:after{
		border: none;
	}
	.page.home .ribbon.ribbon-bottom:after{
		display: none;
	}


	.page.home .timeline .timeline-item.item-left .title{
		padding-right: 60px;
	}
	.page.home .timeline .timeline-item.item-left .title .number{
		right: 0px;
	}
	.page.home .timeline .timeline-item.item-right .title{
		padding-left: 60px;
	}
	.page.home .timeline .timeline-item.item-right .title .number{
		left: 0px;
	}
	.page.home .timeline .timeline-item .image{
		text-align: center;
	}
	.page.home .ribbon{
		top: 25px;
	}

	.container.defaultpage img{
		margin-bottom: 1em;
	}

	/* editor */

		header.book-header{
			position: relative;
		}
		.editor h1{
			font-size: 20px;
			margin-bottom: 1em;
		}
		.scene_editor_wrapper{
			height: auto;
			display: block;
			margin: 0em auto;
			width: calc(100vw - 110px);
		}
			.editor.scene canvas{
				width: calc(100vw - 116px);
				height: auto;
			}

		.editor .editor-info{
			min-height: auto;
			line-height: 1.33em;
		}
			.editor .editor-info span{
				font-size: 15px;
				padding: 5px;
			}
			.editor .editor-info .fa{
				display: none;
			}

		.editor .scenes-browser .scenes-grid-wrapper{
			max-height: 9000000vh;
			touch-action: initial !important;
			
		}
		.editor.scene .scenedata-form .grid-s{
			position: absolute;
			right: 0px;
			width: auto;
		}

		.editor.scene .scene-settings-wrapper{
			position: relative;
			height: 0px;
			width: 0px;
			display: block;
			margin: 0em;
		}
		.editor.scene .settings-panel{
			position: absolute;
			right: 0px;
			height: calc((100vw - 110px) * 1.41) ;
			max-height:  calc((100vw - 110px) * 1.41) ;
			width: 90px;
			padding: 0px 5px;
			transition: right 1s ease-out;
		}
			.editor.scene .fontbutton{
				zoom: 0.75;
			}
			.editor.scene .settings-panel:hover{

			}

		.editor.sceneselector{

		}
			.editor.sceneselector .grid-100s,
			.editor.sceneselector .grid-s{
				float: none;
				width: calc(100vw - 10px);
				max-width: calc(100vw - 10px);
			}

		.editor .scenes-browser .scene{
			margin: 1.5px;
		}
		.editor .scenes-browser h2{
			width: auto;
		}


		.editor.sorter .scenewrapper,
		.editor.editor-sidebar .scenewrapper{
			width: auto;
		}
		.editor .scenewrapper a canvas{
			width: 125px;
		}
		.editor .scenes-browser .filter-wrapper button {
			font-size: 15px;
			width: 125px;
		}
		.editor.sorter .scenewrapper span,
		.editor.editor-sidebar .scenewrapper span{
			width: 100%;
			font-size: 13px;
		}
		.editor.sceneselector .pages-wrapper{
			touch-action: initial !important;
			max-height: 10000em;
			padding: 5px;
		}
		.editor.sceneselector .editor-sidebar .scenewrapper{
			display: inline-block;
			float: none;
			margin-left: 1px;
		}
		.editor.sorter .pages-wrapper {
			max-height: 10000em;
			padding: 10px 0px;
		}
		.editor.sorter .pages-panel .button {
			font-size: 10px;
			line-height: 30px;
			height: 30px;
		}
		.editor .bg-blue.pages-panel{
			padding-top: 1em;
			padding-bottom: 1em;
			border-radius: 0px;
			margin-top: 1em;
		}

		.grid-50.profile.center{
			width: calc(100% - 20px);
			max-width: calc(100% - 20px);
			clear: both;
		}

		.grid-50.profile.center input[type='text']{
			width: 50%;
		}
		.grid-50.profile.center select{
			width: 40%;
		}
		.grid-50.profile.center br{
			display: none;
		}

		.editor .faces,
		.editor .bodies{
			text-align: left;
			width: 73px;
		}

		.editor .faces span.face label,
		.editor .bodies span.body_variation label{
			height: 52px;
			width: 52px;
			margin-bottom: 0.3em;
		}
		.editor .bodies span.body_variation label{
			height: 62px;
		}
			.editor .faces span.face label i.fa,
			.editor .bodies span.body_variation label i.fa{
				font-size: 36px;
				line-height: 55px;
			}


		.editor .bodysample{
			max-width: 100%;
			height: 45vh;
			margin-top: 0px;
		}
			.editor .bodysample > canvas{
				height: calc(45vh - 10px);
			}

		.callout-grey{
			padding: 1em;
		}

		footer nav ul li{
			display: block;
		}



		.overflow-black > div.book-preview-panel{
			top: 0px;
			transform: translateX(-50%);
		}

		.book-preview-panel .handles .page-indicator{
			font-size: 14px;
			width: 100px;
		}

		.history .item .button{
			float: right;
			position: relative;
			top: 1em;
		}

		/*orderdata*/
		.summary .orderdata-wrapper table{
			max-width: 90vw !important;
		}
				.summary .orderdata-wrapper table td{
					line-height: 1.33em;
				}
		/**/
		.cart table{
			max-width: 90vw;
			min-width: initial;
			width: 90vw;
		}
			.cart table td{
				vertical-align: middle;
			}
				.cart table input{

				}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {


}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {
	/* 996gs hotfix */
	.container {
		width: 100vw;
	}
    .container .grid_1,
    .container .grid_2,
    .container .grid_3,
    .container .grid_4,
    .container .grid_5,
    .container .grid_6,
    .container .grid_7,
    .container .grid_8,
    .container .grid_9,
    .container .grid_10,
    .container .grid_11,
    .container .grid_12	{
        width: 90vw;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .grid-100, .grid-50, .grid-100s, .grid-s{
    	padding: 0px 5px;
    }

	.hidden-m{
		display: none !important;
	}

	.hidden-xs{
		display: none !important;
	}
	.show-xs{
		display: block !important;
	}
	.show-xs-inline{
		display: inline-block !important;
	}

	/* content */

	.books .book-item a.start-preview{
		margin-bottom: 1em;
	}

	span.button, a.button, input.button, button.button{
		font-size: 12px;
		padding: 0px 5px;
	}
		a.button i.fa, span.button i.fa{
			left: 0px;
		}
	.cart .cartsum{
		font-size: 20px;
		font-size: 16px;
	}

	.cart .ajax-page,
	div.grid_12 > .cart,
	div.orderdata-wrapper{
		overflow-x: scroll;
	}
	.cart table td h2,
	.profile label,
	.profile .checkbox-group label,
	.profile input[type='text'],
	.profile input[type='password'],
	.profile select,
	.cart table td.price{
		font-size: 13px;
	}
	.shop.profile .method span{
		font-size: 16px;
		padding-bottom: 1em;
	}
	.cart table td.info, .cart span.info{
		font-size: 12px;
	}
	.cart table input{
		height: 40px;
		line-height: 40px;
		width: 20px;

		padding: 0px 5px;
		margin: 0px auto 0px auto;
		border: 3px solid #E5E5E5;

		min-width: 20px;
		font-size: 16px;

		font-weight: 500;
		color: #000000;
	}
	.book-wrap-panel{
		padding: 5px;
	}
	.book-wrap-panel-bg {
		width: calc(100vw - 45px);
		border-radius: 5px;
		padding: 10px;
	}
	.book-wrap-panel-content {
		height: calc(100% - 60px);
		width: calc(100% - 60px);
		right: 10px;
		padding: 20px;
		padding-left: 20px;
	}
	.book-wrap-panel-content img{
		display: none;
	}
	.book-wrap-panel-content .checkbox-group{
		left: 0px;
	}
	.thankyou-illustration{
		text-align: center;
	}
		.thankyou-illustration > *{
			display: inline-block;
			float: none;
		}
		.thankyou-illustration p.left{
			text-align: center !important;
		}
	.editor .editor-info span{
		font-size: 13px;
	}

	.book-preview-panel{
		height: auto;
		max-height: calc(100vh - 79px);
	}
	.book-preview-panel canvas{
		max-width: calc(100vw - 6px);
	}
	.book-preview-panel .handles .page-indicator{
		width: 80px;
	}

	.editor .scenes-browser .filter-wrapper input{
		margin-right: 8px;
	}

	.editor .scenes-browser .scene{
		width: 135px;
		height: 191px;
	}
}

/* Extra Small Mobile Portrait */
@media only screen and (max-width: 321px) {

		.scene_editor_wrapper{
			width: calc(100vw - 80px);
		}
			.editor.scene canvas{
				width: calc(100vw - 86px);
			}
		.editor.scene .settings-panel{
			height: calc((100vw - 80px) * 1.41) ;
			width: 60px;
		}
			.editor.scene .fontbutton{
				zoom: 0.60;
			}
}