﻿.mobile-only {
	display:none;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 1024px) {
	.layout {
		width: 100%;
		
	}
	img.tree {
		
	}

}

@media only screen and (max-width : 768px) {
	html, body {
		font-size:16px;
	}
	h1, .buttons .submit, h2 {
		line-height: 24px  !important;
		font-size: 18px  !important;
	}
	.header-container {
	padding: 10px  !important;
	}
	
	#ElementsContainer {
		padding-top: 1em;
	}
	html body .col, #ElementsContainer, .decorations .col {
		width: 100%;
		display: block;
	}
	#CanvasContainer{
		display:block;
		width: 100%;
	}
	#CanvasContainer img {
		width:400px;
	}
	.form-container .col-right {
		padding-left: 0px;
	}

	.form-container .col-left {
		padding-right: 0px;
	}
	div#LeftElements, div#RightElements  {
		display:table-cell;
		width:50%;
	}
	.layout {
		padding: 5px;
	}
	.form-row {
		padding: 0px;
	}


	#CanvasContainer {
		
	}
	.mobile-only {
		display: block;
	}
	button.mobile-only {
		display:inline-block;
	}
	
	.big-img-container, .big-img {
		height: 80px;
		width: 80px;
	}
		
	.small-img, .small-img-container {
		height: 24px;
		width: 24px;
		text-align: center;
		
	}
	.small-img-container {
		margin: 4px;
	}
	.large-img, .large-img-container {
		height: 150px;
		width: 150px;
		text-align: center;
		
	}
	.smaller-img, .smaller-img-container {
		height: 60px;
		width: 60px;
		text-align: center;
		
	}
	.presents-img, .presents-img-container {
		height: 100px;
		width: 100px;
		text-align: center;
		
		
	}
	.presents-img-2, .presents-img-2-container {
		height: 65px;
		width: 65px;
		text-align: center;
		
	}
	.middle-img, .middle-img-container {
		height: 50px;
		width: 50px;
		text-align: center;
		
	}
	html body .xmas-template {
		width:80px;
		
		height:80px;
		
	}
	html body .col-full .copy-container {
		margin-right:0px;
	}
	.separator { display: none }
	
	.mobile-selection { display: block; }
	
	.desktop-selection { display: none }
}


@media only screen and (max-width : 414px) {
	/*html body div#LeftElements, html body div#RightElements {
		display: block !important;
		width: 100% !important;
	}*/
}


