@media only screen and (min-width: 1280px)
{
	.conversion-div
	{
		display: inline-block;
	}
	
	.step-1-layers, .step-2-layers
	{
		margin:auto !important;
	}
}

@media only screen and (max-width: 1366px)
{
	body
	{		
		display: grid;
		grid-template-columns: 100vw;
		grid-template-rows: 74px 70px 1fr 69px;
		grid-template-areas: 'header'
							 'titles'
							 'main'
							 'footer';
	}
	
	.title
	{
		padding: 12px 0 0 0;
	}
	
	.layers
	{
		/* margin: auto; */
	}
	
	.layers img
	{
		top: 2%;
		width: 470px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1279px)
{
	.step-1-layers
	{
		margin: 0 auto;
	}
	.step
	{
		overflow-x: hidden;
	}
	.layers
	{
		/* margin: auto; */
	}
	
	.layers img
	{
		top: 75px !important;
		width: 80% !important;
	}
}

/* @media only screen and (max-width: 360px) */
@media only screen and (max-width: 768px)
{
	body
	{
		grid-template-columns: 100vw;
		grid-template-rows: 50px 60px 1fr 50px;
		grid-template-areas: 'header'
							 'titles'
							 'main'
							 'footer';
	}
	
	
	.step-1, .step-4, .step-5
	{
		display: grid;
		grid-template-columns: 100vw;
		grid-template-rows: 1fr;
		grid-template-areas: 'layers'
	}

	.step-2, .step-3
	{
		display: grid;
		grid-template-columns: 100vw;
		grid-template-rows: 1fr 150px;
		grid-template-areas: 'layers'
							 'options';
	}
	
	header
	{
		padding: 3px 15px;
	}

	img.logo
	{
		display: none;
	}
	img.logo-small
	{
		display: block;
	}
	.title
	{
		padding: 12px 0 0 0;
	}
	h3
	{
		font-size: 1.8rem;
	}
	
	.step-1-layers
	{
		scroll-snap-type: y mandatory;
		scroll-padding-top: 10px;
		overflow-y: scroll;
	}
	.conversion-div
	{
		scroll-snap-align: start;
		width: 332px;
		height: 372px;
		margin: 10px;
	}
	.image-div
	{
		height: 180px;	
	}
	
	.layers
	{
		/* margin: 0 auto; */
	}
	.layers img
	{
		top:5px;
		left: 10%;
		width: 290px;
		height: auto;
	}
	
	.options
	{
		padding: 6px;
	}
	
	.options button
	{
		position: static;
		width: 67px;
		height: 24px;
		padding: 2px;
		margin: 0 2px 0 0;
		float:none;
	}
	
	.options ul
	{
		padding: 0px;
		margin: 3px 0 0 0;
		float:none;
	}
	
	li
	{
		display:inline-block;
		
	}
	
	
	footer button
	{
		text-indent: -99999px;
		min-width: inherit;
		padding: 0 !important;
		text-align: center;
		width: 35px;
		height: 35px;
	}
	button.next:before
	{
	    text-indent: 0px;
		font-size: 32px;
		font-size: 2rem;
		top: 0;
		right: 3px;
	}
	button.previous
	{
		right: 66px;
	}
	button.previous:before 
	{
		text-indent: 0px;
		font-size: 32px;
		font-size: 2rem;
		top: 0;
		left: 2px;
	}
	
	button.submit 
	{
		text-indent: -99999px;
		min-width: inherit;
		padding: 0 !important;
		text-align: center;
		width: 35px;
		height: 35px;
	}
		
	button.submit:before {
		text-indent: 0px;
		font-size: 26px;
		font-size: 1.625rem;
		top: 5px;
		right: 4px;
	}
	
	button.show
	{
		bottom: 6px;
	}


}