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

@media only screen

{

main, header, footer	{	width:			100%;			}

}

/* Tablet mode */

@media only screen and (max-width: 850px)

{

.logo-img		{	width:			36px;
				height:			65px;			}

.title-img		{	width:			100%;			}

.cart-img		{	width:			32px;
				height:			32px;			}


.header-menu a		{	height:			30px;
				line-height:		26px;			}

.footer-menu a		{	height:			30px;
				line-height:		30px;			}

.search			{	width:			40%;
				min-width:		200px;
				height:			70px;			}

.search-form 		{	margin:			21px 0 0;		}

.sidebar-left,
.sidebar-right		{	float:			none;
				display:		block;
				font-size:		14pt;
				padding:		20px 5px;
				margin:			30px auto 40px;		}

.sidebar-left		{	transform:		rotate(-1deg);		}
.sidebar-right		{	transform:		rotate(1deg);		}
	
.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		22pt;			}

.media-list		{	padding:		15px 15px 50px !important; }

h1			{	margin-top:		40px;			}

}


@media only screen and (max-width: 700px)

{




.float-left-large	{	float:			none;
				display:		block;
				margin-left:		auto !important;
				margin-right:		auto !important;	}

}


/* Phone mode */

@media only screen and (max-width: 560px)

{

.title			{	display:		none;			}
.title-mobile		{	display:		inline-block;		}

nav			{	flex-wrap:		wrap;			}

.header-menu ul		{	width:			100%;			}

.search			{	width:			100%;
				height:			36px;			}

.search-form 		{	margin:			5px 0;			}

.sidebar-left,
.sidebar-right		{	max-width:		65vw;			}

footer			{	max-width:		400px;			}

.float-left		{	float:			none;
				display:		block;
				margin-left:		auto !important;
				margin-right:		auto !important;	}

h1			{	margin-top:		30px;			}

blockquote		{	padding:		15px;			}

}


@media only screen and (max-width: 460px)

{

.sidebar-left,
.sidebar-right		{	font-size:		13pt;
				padding:		15px 5px;
				max-width:		75vw;
				min-width:		200px;			}

.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		20pt;			}

h1			{	margin-top:		20px;			}

}


@media only screen and (max-width: 360px)

{

.sidebar-left,
.sidebar-right		{	font-size:		12pt;			}

.sidebar-left::before,
.sidebar-right::before,
.sidebar-left::after,
.sidebar-right::after	{	font-size:		18pt;			}

}