/* hide responsive menu */
#topnav_hamburger_icon,
#topnav_responsive_menu {
	display: none;
}

/******************************************************************************/
/* MEDIA QUERIES
/******************************************************************************/
@media only screen and (max-width: 850px)
{
	.site-subtitle {
		display: none;
	}
}

@media screen and (min-width: 850px)
{
	#mobilenav {
		display: none;
	}
}

@media screen and (max-width : 850px)
{
	#admin_user table {
		font-size: 0.8rem;
	}
	#admin_user th:not(.mobile),
	#admin_user td:not(.mobile) {
		display: none;
	}
	
	nav {
		justify-content: center !important;
	}
	form.product {
		width: 600px;
	}
	/*.box {
		position: absolute;
		top: 50px;
	}*/
	#indicators {
		display: none;
	}
	#carousel-control {
		margin-top: 80px;
	}
	#cat_parent {
		font-size: .8em;
	}
	#admin_product form.product select.cat_id {
		width: 100%;
	}
	
	/* disable horizontal and vertical scrolling */
	.container {
		position: relative;
		border-radius: 0;
		overflow-x: hidden;
		overflow-y: hidden;
		border-radius: 0;
	}
	
    .logo img,
	.subtitle,
	.horiznav,
	.search	{
		display: none;
	}
	
	header .title {
		font-size: 24px;
	}
	
	/* hide classic menu */
	nav.horiznav {
		display: none;
	}
	/* shows mobile nav */
	#mobilenav {
		display: block;
	}
	/* /* shows responsive menu and position at the right of the screen */ */
	/* #topnav_responsive_menu { */
		/* display: block; */
		/* position: absolute; */
		/* margin: 0; */
		/* left: 0; */
		/* top: 0; */
		/* width: 100vw; */
		/* height: 100vh; */

		/* z-index: 99; */

		/* transform-origin: 0% 0%; */
		/* transform: translate(-100vw, 0); */

		/* tra/nsition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); */
		/* transition: transform 330ms ease-in-out; */
	/* } */
  
	/* #topnav_responsive_menu ul { */
		/* display: flex; */
		/* flex-direction: column; */

		/* position: absolute; */
		/* margin: 0; */
		/* left: 0; */
		/* top: 0; */

		/* min-width: 35vw; */
		/* height: 100vh; */
		/* padding: 56px 0 0; */

		/* text-align: center; */

		/* background: #ededed; */
		/* list-style-type: none; */
		/* -webkit-font-smoothing: antialiased; */
	/* } */
  
	/* #topnav_responsive_menu li { */
		/* padding: 0 20px; */
		/* text-align: left; */
	/* } */
  
	/* #topnav_responsive_menu a { */
		/* fo/nt-size: 2rem; */
		/* white-space: nowrap; */
		/* color: #333; */
		/* text-decoration: none; */
	/* } */
  
	/* /* And let's slide it in from the right */ */
	/* #topnav_responsive_menu.open { */
		/* transform: none; */
		/* position: fixed; */
	/* } */
  
	/* /* ******************** HAMBURGER ICON ******************** */ */
	/* /* define size and position of the hamburger link */ */
	/* #topnav_hamburger_icon { */
		/* display: block; */
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		/* ma/rgin: 16px; */
		/* width: 33px; */
		/* height: 28px; */

		/* z-index: 100; */

		/* -webkit-user-select: none; */
		/* user-select: none; */
		/* cursor: pointer; */
	/* } */

	/* #topnav_hamburger_icon.open { */
		/* position: fixed; */
		/* top: 10px; */
		/* left: 10px; */
	/* } */
  
	/* /* define the style (size, color, position, animation, ...) of the 3 spans */ */
	/* #topnav_hamburger_icon span { */
		/* display: block; */
		/* position: absolute; */
		/* height: 4px; */
		/* width: 100%; */
		/* margin-bottom: 5px; */

		/* background: black; */
		/* border-radius: 3px; */

		/* z-index: 100; */

		/* opacity: 1; */
		/* left: 0; */

		/* -webkit-transform: rotate(0deg); */
		/* -moz-transform: rotate(0deg); */
		/* -o-transform: rotate(0deg); */
		/* transform: rotate(0deg); */
		/* -webkit-transition: 0.25s ease-in-out; */
		/* -moz-transition: 0.25s ease-in-out; */
		/* -o-transition: 0.25s ease-in-out; */
		/* transition: 0.25s ease-in-out; */
	/* } */
  
	/* /* set the 3 spans position to look like a hamburger */ */
	/* #topnav_hamburger_icon span:nth-child(1) { */
		/* top: 0px; */
		/* -webkit-transform-origin: left top; */
		/* -moz-transform-origin: left top; */
		/* -o-transform-origin: left top; */
		/* transform-origin: left top; */
	/* } */
	/* #topnav_hamburger_icon span:nth-child(2) { */
		/* top: 12px; */
		/* -webkit-transform-origin: left center; */
		/* -moz-transform-origin: left center; */
		/* -o-transform-origin: left center; */
		/* transform-origin: left center; */
	/* } */
	/* #topnav_hamburger_icon span:nth-child(3) { */
		/* top: 24px; */
		/* -webkit-transform-origin: left bottom; */
		/* -moz-transform-origin: left bottom; */
		/* -o-transform-origin: left bottom; */
		/* transform-origin: left bottom; */
	/* } */
  
	/* /* change color when opening the menu */ */
	/* #topnav_hamburger_icon.open span { */
		/* background: #333; */
	/* } */
  
	/* /* the first span rotates 45° \ */ */
	/* #topnav_hamburger_icon.open span:nth-child(1) { */
		/* width: 110%; */
		/* -webkit-transform: rotate(45deg); */
		/* -moz-transform: rotate(45deg); */
		/* -o-transform: rotate(45deg); */
		/* transform: rotate(45deg); */
	/* } */
  
	/* /* the second span disappears */ */
	/* #topnav_hamburger_icon.open span:nth-child(2) { */
		/* width: 0%; */
		/* opacity: 0; */
	/* } */
  
	/* /* the last span rotates -45° / */ */
	/* #topnav_hamburger_icon.open span:nth-child(3) { */
		/* width: 110%; */
		/* -webkit-transform: rotate(-45deg); */
		/* -moz-transform: rotate(-45deg); */
		/* -o-transform: rotate(-45deg); */
		/* transform: rotate(-45deg); */
	/* } */
	
	#mobilenav .open_menu {
		display: none;
	}
	#mobilenav .menu {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 450px;
		width: calc(100vw - 40px);
		height: 100%;
		-moz-transform: translate3d(-450px, 0, 0);
		-o-transform: translate3d(-450px, 0, 0);
		-ms-transform: translate3d(-450px, 0, 0);
		-webkit-transform: translate3d(-450px, 0, 0);
		transform: translate3d(-450px, 0, 0);
		-moz-transition: transform 0.35s;
		-o-transition: transform 0.35s;
		-webkit-transition: transform 0.35s;
		transition: transform 0.35s;
		overflow: hidden;
		background-color: #fff;
		z-index: 50;
	}
	#mobilenav .header {
		padding: 0 50px;
		height: 50px;
		display: -ms-flexbox;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-ms-flex-pack: space-around;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}
	#mobilenav .header i {
		font-size: 2rem;
		color: #333;
	}
	#mobilenav .header span {
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		width: 100%;
		cursor: pointer;
	}
	#mobilenav .menu .menu {
		-moz-transform: translate3d(480px, 0, 0);
		-o-transform: translate3d(480px, 0, 0);
		-ms-transform: translate3d(480px, 0, 0);
		-webkit-transform: translate3d(480px, 0, 0);
		transform: translate3d(480px, 0, 0);
	}
	#mobilenav .menu ul {
		height: 100%;
		list-style: none;
		padding-left: 0;
		overflow-y: auto;
	}
	#mobilenav .menu ul li a, nav .menu ul li label {
		display: block;
		text-align: left;
		padding: 0 15px;
		line-height: 47px;
		text-decoration: none;
		color: #333;
		cursor: pointer;
		font-size: 1rem;
		border-bottom: 1px solid #e8e8e8;
		position: relative;
	}
	#mobilenav .menu ul li a.chevron::after {
		content: "";
		position: absolute;
		display: inline-block;
		height: 10px;
		width: 10px;
		border-color: #333;
		border-style: solid;
		border-width: 1px 1px 0 0;
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 50%;
		margin-top: -5px;
		right: 16px;
	}
	#mobilenav .menu ul li .invisible {
		border-bottom: 0;
	}

	#mobilenav .open_menu.active ~ .menu {
		-moz-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	
	/* ******************** HAMBURGER ICON ******************** */
	/* define size and position of the hamburger link */
	#nav-hamburger-icon {
		display: block;
		position: absolute;
		top: 10px;
        left: 10px;
		width: 33px;
		height: 28px;
		z-index: 100;
		-webkit-user-select: none;
		user-select: none;
		cursor: pointer;
	}

	#nav-hamburger-icon.open {
		po/sition: fixed;
		top: 10px;
		left: 10px;
	}
  
	/* define the style (size, color, position, animation, ...) of the 3 spans */
	#nav-hamburger-icon span {
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		margin-bottom: 5px;

		background: black;
		border-radius: 3px;

		z-index: 100;

		opacity: 1;
		left: 0;

		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		-o-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
	}
  
	/* set the 3 spans position to look like a hamburger */
	#nav-hamburger-icon span:nth-child(1) {
		top: 0px;
		-webkit-transform-origin: left top;
		-moz-transform-origin: left top;
		-o-transform-origin: left top;
		transform-origin: left top;
	}
	#nav-hamburger-icon span:nth-child(2) {
		top: 12px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
	}
	#nav-hamburger-icon span:nth-child(3) {
		top: 24px;
		-webkit-transform-origin: left bottom;
		-moz-transform-origin: left bottom;
		-o-transform-origin: left bottom;
		transform-origin: left bottom;
	}
  
	/* change color when opening the menu */
	#nav-hamburger-icon.open span {
		background: #333;
	}
  
	/* the first span rotates 45° \ */
	#nav-hamburger-icon.open span:nth-child(1) {
		width: 110%;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
  
	/* the second span disappears */
	#nav-hamburger-icon.open span:nth-child(2) {
		width: 0%;
		opacity: 0;
	}
  
	/* the last span rotates -45° / */
	#nav-hamburger-icon.open span:nth-child(3) {
		width: 110%;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

/* @media screen and (min-width: 850px) and (max-width: 1600px) */
/* { */
	/* div.container { */
		/* border-radius: 0; */
	/* } */
	/* header .site-subtitle { */
		/* display: none; */
	/* } */
	/* #mobilenav { */
		/* display: block; */
	/* } */
	/* form.product { */
		/* width: 600px; */
	/* } */
	/* #back-top { */
		/* display: none !important; */
	/* } */
	/* #shop article.product { */
		/* float: left; */
		/* width: 100%; */
		/* padding: 40px 0 0 10px; */
	/* } */
/* } */
@media screen and (min-width: 320px) and (max-width : 640px)
{
	header .profile-menu > li > a {
		font-size: 1.2rem;
	}
	.jq-toast-wrap.bottom-right {
		right: 20px
	}
	#admin_product form.product select.cat_id {
		width: 100%;
	}
}

@media screen and (max-width: 1250px)
{
	/* disable horizontal and vertical scrolling */
	.container {
		margin: 0;
	}
}