/**
 * grade-B.css
 *
 * This file styles to mobile portrait pages
 *
 * @author    Mark de Mol
 * @version   1.0
 */
 
@media (max-width: 1000px),(max-device-width:1000px) and (orientation:portrait),(max-device-width:767px) and (orientation:landscape)
{

	#devicegrade { 
		z-index:20;
	}
	  
	#devicegrade > div:after { 
		content: "B";
		width:100%;
		height:100px;
	} 
	
	/*
	* width of all the groups
	*/ 
	.group.width-100{
		width:100%;
	}
	
	.group.width-95{
		width:100%;
	}
	
	.group.width-90{
		width:100%;
	}
	
	.group.width-85{
		width:100%;
	}
	
	.group.width-80{
		width:100%;
	}
	
	.group.width-75{
		width:75%;
	}
	
	.group.width-70{
		width:70%;
	}
	
	.group.width-66{
		width:66.6%;
	}
	
	.group.width-65{
		width:65%;
	} 
	
	.group.width-60{
		width:60%;
	}
	
	.group.width-55{
		width:55%;
	}
	
	.group.width-50{
		width:50%;
	}
	
	.group.width-45{
		width:45%;
	}
	
	.group.width-40{
		width:40%;
	}
	
	.group.width-35{
		width:35%;
	}
	
	.group.width-33{
		width:33.3%;
	}
	
	.group.width-30{
		width:30%;
	}
	
	.group.width-25{
		width:25%;
	}
	
	.group.width-20{
		width:25%;
	}
	
	.group.width-15{
		width:25%;
	}
	
	.group.width-10{
		width:25%;
	}
	
	
	/*
	* custom
	*/
	.top-menu > div > div.group > .margin > .padding {
		flex-wrap: wrap;
	}
	
	.top-menu > div > div.group > .margin > .padding > .widget-default-embed {
		width: 100%;
		border-bottom: 1px solid #ebeae9;
		margin: 0;
		align-self: normal;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.top-menu > div > div.group > .margin > .padding > .widget-default-embed > .margin > .padding > * {
		width: 49px;
		display: grid;
	}
	
	.top-menu > div > div.group > .margin > .padding > .slide-menu .open-root {
		display: block;
	}

	.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root {
		position: fixed;
		width: 300px;
		background: #fff;
		left: -300px;
		top: 0;
		bottom: 0;
		visibility: hidden;
		transition-property: left, visibility;
		transition-delay: 0s, 0.1s;
		transition-duration: 0.3s, 0s;
		transition-timing-function: ease-out;
		overflow-y: auto;
		z-index: 1000;
		max-width: 100%;
	}
	.top-menu > div > div.group > .margin > .padding > .slide-menu .open-root.open + .slide-menu-root {
		left: 0;
		visibility: visible;
		transition-delay: 0s, 0s;
		transition-timing-function: ease-in;
	}
	
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root h2 {
		padding: 11px 20px 11px calc(100% - 280px);
		margin: 0;
	}
	
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root > .controls {
		display: block;
	}
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root > ul {
		padding: 0;
		margin: 0;
	}
	.row.top-menu > div > div.group > .margin > .padding >.article > .margin > .padding .slide-menu-root > ul > li {
		display: block;
	}
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root > ul > li > .menu-name {
		padding: 11px 20px 11px calc(100% - 260px);
		display: block;
		font-weight: normal;
		line-height: 20px;
		transition-property: background, color;
		transition-duration: 0.25s;
	}
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root .menu-name:hover {
		background: #ebeae9;
		color: #c40049;
	}
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root .menu-name i {
		float: right;
		font-size: 20px;
	}
	.slide-menu > .controls::after,
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu > li > .menu-name::after {
		content: "";
		clear: both;
		display: block;
	}
	.row.top-menu > div > div.group > .margin > .padding > .slide-menu .slide-menu-root > ul > li > .menu-name > i.fa-chevron-right {
		display: inline;
	}
	.slide-menu-root > ul > li > .slide-menu-child > .controls > .back {
		display: inline-block;
	}
	.top-menu > div > div.group > .margin > .padding > .slide-menu li > .slide-menu-child {
		top: 0;
	}
	.top-menu > div > div.group > .margin > .padding > .slide-menu .overlay {
		top: 0;
	}

	.top-menu .article.widget-default-search > .margin > .padding > .search-wrap {
		height: 40px;
	}
	.top-menu .article.widget-default-search > .margin > .padding > .search-wrap > .search-icon {
		line-height: 45px;
	}

	.top-menu .article.menuShoppingCart-wrap > .margin > .padding > .cart {
		display: none;
	}

	.row > div > .group > .margin > .padding > .article.menuShoppingCart-wrap {
		margin-right: 0;
	}

	.filter > div > .group > .margin > .padding > .sorting-text {
		width: 110px;
	}

	.item-form .input-wrap {
		width: 100%;
		padding-right: 0;
	}

	.top-menu > div {
		padding: 0;
	}

	.top-menu > div > .group > .margin > .padding > .menuShoppingCart-wrap {
		padding: 0 15px;
	}

	.top-menu > div > div.group > .margin > .padding > .slide-menu {
		padding-left: 15px;
	}


	/*===================================================================
		IMAGEBLOCK
	===================================================================*/
	.group.width-50.imageblock { 
		width: 100%
	}
	.imageblock .margin > .padding > .article.item-image [rel="button"] {
		padding: 8px;
	}

	/*===================================================================
		TEXTBLOCK
	===================================================================*/
	.group.width-50.textblock { 
		width: 100%
	}

	/*===================================================================
		Footer
	===================================================================*/
	.row.footer {
		padding-bottom: 70px;
	}

	.phone-portrait-menu {
		display: block;
	}

	.app-logged-out .phone-portrait-menu .article.menuShoppingCart-wrap > .margin > .padding > .profile.logged-out,
	.app-logged-in .phone-portrait-menu .article.menuShoppingCart-wrap > .margin > .padding > .profile.logged-in {
		display: none;
	}

	.footer > div > .group > .margin > .padding {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40px;
	}

	.footer .group > .margin > .padding .article.width-20 {
		width: 33.333%;
	}

	/* .article-main-container > div > .group > .margin > .padding > .article.item-text > .margin > .padding table td{
		float: left;
	
	}*/
	.scroll-div {
		display: none;
	}

	.footer > div > .group > .margin > .padding {
		padding: 0;
	}
	.footer .group > .margin > .padding .article.item-text {
		width: 100%;
	}
	.footer > div > .group > .margin > .padding > .article > .margin > .padding {
		padding: 15px;
		border-bottom: 1px solid #696158;
	}
	.footer > div > .group > .margin > .padding > .article.item-text:last-child > .margin > .padding {
		border-bottom: none;
	}

	.footer .group > .margin > .padding .article.item-text h2 {
		font-size: 18px;
	}
	.footer .group > .margin > .padding .article.item-text h2::after {
		content: "\f107";
		float: right;
		font-family: "Font Awesome 5 Pro";
		font-weight: 300;
	}
	.footer .group > .margin > .padding .article.item-text h2.open::after {
		content: "\f106";
	}
	.footer > div > .group > .margin > .padding > .article > .margin > .padding > h2 {
		font-size: 18px;
	
	}
	.footer .group > .margin > .padding .article.item-text ul {
		display: none;
	}

	/*===================================================================
		ALTERNATIVE FIXED MOBILE TOP MENU
	===================================================================*/
	.top-menu  {
		position: initial;
	}
	.top-menu + * {
		margin-top: 0px;
	}
	body.menulock .top-menu {
		position: fixed;
	}	
	body.menulock .top-menu > div > div.group > .margin > .padding > .widget-default-embed {
		display: none;
	}
	body.menulock .top-menu > div > div.group > .margin > .padding {
		height: 46px;
	}
	body.menulock .top-menu + * {
		margin-top: 89px;
	}

	.article.widget-menu-list.width-50 {
		width: 66%;
	}

	.article.item-text.sidebar {
		clear: both;
	}

	/*===========================
		Subscriptions
	===========================*/
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-products > .single-item,
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-shops > .single-item {
		width: 50%;
		float: left;
	}
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-products > .single-item > .margin > .padding > .image > img {
		width: auto;
		display: block;
		margin: auto;
	}
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-products > .single-item > .margin > .padding > .image,
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-products > .single-item > .margin > .padding > .image > img {
		height: 100px;
	}
	.article.widget-default-embed.subscriptions > .margin > .padding > .article.shortcode-item > .margin > .padding > .items-holder.main-shops > .single-item > .margin > .padding > .image {
		height: 160px;
	}

	/* default top menu */
	.top-menu > div > .group > .margin > .padding > .article.widget-default-search > .margin > .padding > .search-wrap:before {
		position: absolute;
		content: "";
		width: 40px;
		height: 50px;
		z-index:20;
		cursor: pointer;
	}
	.row.top-menu > div > .group > .margin > .padding > .widget-default-search {
		width: auto;
		max-width: 40px;
		right: 100px;
	}
	.row.top-menu > div > .group > .margin > .padding > .menuShoppingCart-wrap {
		right: 0;
	}
	.row.top-menu > div > .group > .margin > .padding > .widget-default-search,
	.row.top-menu > div > .group > .margin > .padding > .menuShoppingCart-wrap {
		margin-left: 0;
		margin-right: 0;
		position: absolute;
	}
	.top-menu .article.widget-default-search > .margin > .padding > .search-wrap > .search-icon {
		padding-left:0;
	}
	.top-menu > div > .group > .margin > .padding > .article.widget-default-search:not(.extended) > .margin > .padding > .search-wrap > .input-search-wrap > input[type="text"] {
		padding: 10px 0;
		font-size: 0;
		border: none;
	}
	.top-menu > div > div.group > .margin > .padding {
		display: block;
		height: 70px;
		padding-top: 15px;
	}
	.top-menu > div > div.group > .margin > .padding > .widget-default-embed {
		position: absolute;
		height: 40px;
		border-bottom: 0;
	}
	.row > div > div.group > .margin > .padding > .article.slide-menu {
		line-height: 45px;
		height: 40px;
		position: relative;
	}
	.top-menu > div > div.group > .margin > .padding > .widget-default-embed > .margin > .padding > * {
		width: 70px;
	}
	.article.widget-default-search > .margin > .padding > .search-wrap > .search-icon > i {
		font-size: 25px;
		margin-top: 0;
	}
	.top-menu > div > div.group > .margin > .padding > .slide-menu .open-root .fa-bars {
		font-size: 27px;
	}
	body.menulock .top-menu > div > div.group > .margin > .padding {
		padding-top: 5px;
	}
	body.menulock .row > div > .group > .margin > .padding > .article.menuShoppingCart-wrap > .margin > .padding {
		padding-top: 0;
	}
	body.menulock .top-menu > div > div.group > .margin > .padding > .widget-default-embed {
		display: block;
	}
	body.menulock .top-menu > div > div.group > .margin > .padding > .widget-default-embed > .margin > .padding {
		text-align: center
	}
	body.menulock .top-menu > div > div.group > .margin > .padding > .widget-default-embed > .margin > .padding > * {
		display: inline-block;
		width: 60px;
	}
	body.menulock .top-menu > div > .group > .margin > .padding > .article.widget-default-search > .margin > .padding > .search-wrap::before {
		height: 43px;
	}
	body.menulock .top-menu .article.widget-default-search > .margin > .padding > .search-wrap > .search-icon > i {
		line-height: 40px;
	}
	/* custom fix for service pages */
	.group.width-50.service-column {
		width: 60%;
	}
	.group.width-25.service-column {
		width: 40%;
	}
	.group.width-25.service-column.service-menu {
		width: 100%;
	}

	/*==================================================================
		Sidebar menu list
	==================================================================*/
	.row.content > div > .group.width-25.service-column.service-menu > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding {
		padding: 0;
	}
	.row.content > div > .group.width-25.service-column.service-menu > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .group-name {
		cursor: pointer;
		margin-bottom: 0;
		padding: 10px 20px;
	}
	.row.content > div > .group.width-25.service-column.service-menu > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .menu {
		display: none;
		padding: 0 20px 10px 20px;
	}
	.row.content > div > .group.width-25.service-column.service-menu > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .group-name:after {
		font-family: "Font AweSome 5 Pro";
		content: "\f054";
		float: right;
	}
	.row.content > div > .group.width-25.service-column.service-menu > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .group-name.is-active:after {
		content: "\f078";
	}

}