/**
 * grade-D.css
 *
 * This file styles to mobile portrait pages
 *
 * @author    Mark de Mol
 * @version   1.0
 */

 
@media (max-width:499px),(max-device-width:499px) and (orientation:portrait)
{
	h1 {
		font-size: 24px;
	}
	.imageblock .margin > .padding > .article.item-image > .margin > .padding h1, .imageblock .margin > .padding > .article.item-image > .margin > .padding h1.written{
		font-size:36px!important;
		line-height:50px!important;
	}
	.product-name-detail {
		padding-bottom: 10px;
	}
	#devicegrade { 
		z-index:40;
	}
	
	#devicegrade > div:after { 
		content: "D";
	}
		
	/*
	* 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:100%;
	}
	
	.group.width-70{
		width:100%;
	}
	
	.group.width-66{
		width:100%;
	}
	
	.group.width-65{
		width:100%;
	}
	
	.group.width-60{
		width:100%;
	}
	
	.group.width-55{
		width:100%;
	}
	
	.group.width-50{
		width:100%;
	}
	
	.group.width-45{
		width:100%;
	}
	
	.group.width-40{
		width:100%;
	}
	
	.group.width-35{
		width:100%;
	}
	
	.group.width-33{
		width:100%;
	}
	
	.group.width-30{
		width:100%;
	}
	
	.group.width-25{
		width:100%;
	}
	
	.group.width-20{
		width:50%;
	}
	
	.group.width-15{
		width:50%;
	}
	
	.group.width-10{
		width:50%;
	}
	
	/*
	* width of all the articles withing the groups
	*/
	.group > .margin > .padding .article.width-100 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-95 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-90 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-85 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-80 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-75 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-70 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-66 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-65 {
		width:100%;
	}

	.group > .margin > .padding .article.width-60 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-55 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-50 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-45 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-40 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-35 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-33 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-30 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-25 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-20 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-15 {
		width:100%;
	}
	
	.group > .margin > .padding .article.width-10 {
		width:100%;
	}
	
	/*
	* custom
	*/
	
	.top-menu > div > div.group > .margin > .padding > .widget-default-embed {
		border-bottom: none;
	}

	.article.catalogus-list .article.recipe-view > .margin > .padding .title p {
		display: none;
	}
	
	.row .textblock-variable a {
		display: none;
	}

	.article.item-image.imageblock > .margin > .padding .item-image-wrapper .image {
		height: auto;
	}

	.article.item-image.imageblock > .margin > .padding .item-image-wrapper .image > img {
		border-radius: 5px 5px 0 0;
	}

	.article.item-image.imageblock > .margin > .padding .item-image-wrapper {
		height: auto;
	}

	.article.item-image.imageblock > .margin > .padding .item-image-wrapper .item-image-text {
		margin: 20px 25px;
	}

	.article.item-image.imageblock > .margin > .padding .item-image-wrapper .item-image-text p:after {
		display: none;
	}
	/*===================================================================
		RECIPES
	===================================================================*/
	.article.item-catalogus-detail .related .image img,
	.article.catalogus-list .article.vacancies-view > .margin > .padding > a > .image > img,
	.article.catalogus-list .article.recipe-view > .margin > .padding > a > .image > img {
		border-radius: 3px 0 0 3px;
	}
	/*===================================================================
		IMAGEBLOCK
	===================================================================*/
	.row.imageblock	.group > .margin > .padding .article.width-75,
	.group.width-75.imageblock {
		width: 100%;
	}
	.imageblock .margin > .padding > .article:first-child.item-image > .margin > .padding > .item-image-wrapper {
		border-radius: 5px;
	}
	.imageblock .margin > .padding > .article:nth-last-child(2).item-image > .margin > .padding > .item-image-wrapper {
		border-radius: 0 0 5px 5px; 
	}
	.imageblock .margin > .padding > .article:first-child.item-text > .margin {
		border-radius: 5px 5px 0 0;
	}
	.imageblock .margin > .padding > .article:nth-last-child(2).item-text > .margin {
		border-radius: 5px;
	}
	.imageblock .margin > .padding > .article.item-image:not(.width-100) > .margin > .padding > .item-image-wrapper.text-location-1 > .item-image-text {
		border-radius: 0;
	}
	.imageblock .margin > .padding > .article.item-image [rel="button"] {
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}
	.imageblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper {
		height: 220px;
	}		
	.row.imageblock > div > .group > .margin, .row > div > .group.imageblock > .margin {
		padding: 5px 15px;
	}	
	.row.imageblock > div > .group > .margin > .padding:hover,
	.row > div > .group.imageblock > .margin > .padding:hover {
    	box-shadow: none;
	}
	.row.imageblock > div > .group > .margin > .padding .article:hover,
	.row > div > .group.imageblock > .margin > .padding .article:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.23);
		border-color: rgba(0, 0, 0, 0.12);
	}
	.imageblock .margin > .padding > .article:nth-last-child(2).item-text > .margin {
		height: 73px;
		padding: 10px;
	}
	.imageblock .margin > .padding > .article.item-text > .margin > .padding:after {
		display: none;
	}
	.imageblock .margin > .padding > .article.item-text strong, .imageblock .margin > .padding > .article.item-text p {
		color: #fff;
	}
	.imageblock .margin > .padding > .article.item-text strong, .imageblock .margin > .padding > .article.item-text h2 {
		line-height: 20px;
		font-size: 14px;
	}
	.imageblock .margin > .padding > .article.item-image > .margin > .padding h2.written, 
	.imageblock .margin > .padding > .article.item-image > .margin > .padding h3.written, 
	.imageblock .margin > .padding > .article.item-image > .margin > .padding h4.written {
		font-size: 24px;
		line-height: 40px;
	}	
	.imageblock .margin > .padding > .article.item-text [rel="button"] {
		bottom: 10px;
		right: 10px;
		font-size: 12px;
	}
	.imageblock .margin > .padding > .article.item-image > .margin > .padding h1.normal {
		font-size: 36px!important;
		line-height: 50px!important;
		padding-bottom: 5px;
	}
	.imageblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper.text-location-1 > .item-image-text {
		padding: 10px;
	}


	/*===================================================================
		TEXTBLOCK
	===================================================================*/
	.textblock .margin > .padding > .article {
		padding: 5px 15px;	
	}
	.textblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper {
		height: 73px;
	}
	.textblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper > .image {
		width: 97px;
		height: 73px;
		float: left;
	}
	.textblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper > .image > img {
		border-radius: 5px 0 0 5px;
	}	
	.textblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper > .item-image-text {
		width: calc(100% - 97px);
		height: 73px;
		padding: 10px;
		float: left;
		margin: 0;
	}
	.textblock .margin > .padding > .article.item-image > .margin > .padding > .item-image-wrapper > .item-image-text:after {
		display:none;
	}
	.textblock .margin > .padding > .article strong, .textblock .margin > .padding > .article h2 {
		line-height: 16px;
		font-size: 14px;
	}
	.textblock .margin > .padding > .article strong, .textblock .margin > .padding > .article p {
		color: transparent;
	}
	.textblock .margin > .padding > .article.item-text > .margin > .padding:after {
		content: none;
	}
	.textblock .margin > .padding > .article.item-text > .margin {
		padding: 10px;
		height: 73px;
	}
	.textblock .margin > .padding > .article [rel="button"] {
		bottom: 10px;
		right: 10px;
		font-size: 12px;
	}

	.article.news-recent-list.news-home > .margin > .padding > .left-top > .title > h2,
	.article.recent-agenda-list.agenda-home > .margin > .padding > .left-top > .title > h2,
	.recent-catalogus-wrap.image-view.products-home > .margin > .padding > .left-top > .title > h2,
	.recent-catalogus-wrap.recept-view.recepten-home > .margin > .padding > .left-top > .title > h2 {
		font-size: 26px;
		line-height: 34px;
		text-align: center;
	}

	.footer .group > .margin > .padding .article.width-20 ul {
		display: none;
	}

	/*==================================================================
		Sidebar menu list
	==================================================================*/
	.row.content > div > .group > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding {
		padding: 0;
	}
	.row.content > div > .group > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .group-name {
		cursor: pointer;
		margin-bottom: 0;
		padding: 10px 20px;
	}
	.row.content > div > .group > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .menu {
		display: none;
		padding: 0 20px 10px 20px;
	}
	.row.content > div > .group > .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 > .margin > .padding > .widget-menu-list.sidebar > .margin > .padding > .group-name.is-active:after {
		content: "\f078";
	}

	/*===========================
		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,
	.choose-subscribe-option > .article.item-catalogus-subscriptions-list.sub-articles-holder > .margin > .padding > .subarticle.subscriptions-col {
		width: 100%;
	}
	.choose-subscribe-option.first-item > button,
	.choose-subscribe-option > button {
		width: calc(100% - 30px);
		margin-bottom: 15px;
		text-align: center;
		position: relative;
		top: 0;
		left: 15px;
	}

	/* shopping cart */
	#cart-sidebar > .items > .item > .left {
		margin: auto;
		position: absolute;
		top: 50%;
		left: 0;
		transform: translate(0%,-50%);
		display: inline-block;
	}
	#cart-sidebar > .items > .item > .right {
		float: right;
	}

	/* search filters */
	.row.filter > div > .group > .margin > .padding > .article.filter-text > .margin > .padding,
	.row.filter .sort-wrap .select-clone-value {
		border: 2px solid #0098ff;
		border-radius: 3px;
		font-weight: 700;
	}
	.row.filter > div > .group > .margin > .padding > .article.filter-text > .margin > .padding,
	.row.filter .sort-wrap .select-clone-value,
	.sort-wrap .select-clone-value:after {
		color: #0098ff;
	}
	.sort-wrap .select-clone-value:after {
		font-weight: 500;
	}
	.sort-wrap .select-clone-value:after,
	.row.filter > div > .group > .margin > .padding > .article.filter-text > .margin > .padding,
	.row.filter .sort-wrap .select-clone-value {
		transition: .15s ease-in-out;
	}
	.select-clone-value:after {
		right: 15px;
	}
	.row.filter > div > .group > .margin > .padding > .article.filter-text > .margin > .padding:hover,
	.row.filter .sort-wrap .select-clone-value:hover {
		background-color: #0098ff;
		border: 2px solid #0098ff;
	}
	.row.filter > div > .group > .margin > .padding > .article.filter-text > .margin > .padding:hover,
	.row.filter .sort-wrap .select-clone-value:hover,
	.sort-wrap .select-clone-value:hover:after {
		color: #fff;
	}
}