/**
 * style.css
 * Copyright 2019 Christian Urban <info@maio31.de>
 * Stylesheet: maio31
 * Theme: maio31
 * Raster: 900/20/12(55):880
 */

* { padding: 0; margin: 0; border: 0; box-sizing: border-box; }

.mod_cookiebarOpener { display: none; }

html { font-size: 10px; }

ol, ul, li { list-style-type: none; }

.center { margin: auto; }

img { min-width: 100%; }

body 
{
	//background: url(/files/theme_maio31/assets/190924_maio31_21.png);	
	//background: url(http://maio31/files/maio31/images/monika_urban/monika-urban_3_Q90.jpg) top center;
	font: 500 1rem 'Exo 2';
	font-family: 'Exo 2.0', 'Exo 2', sans-serif;
	width: 100%; height: 100%;
	position: absolute;
	background-attachment: fixed !important;
	background-size: cover !important;
}

	#wrapper 
	{
		height: 100vh;
		display: grid;
		grid-template-rows: minmax(auto, max-content) auto minmax(auto, max-content);
		position: relative;
	}
	
		#wrapper > .background-image 
		{
			position: fixed;
		}
		
			#wrapper > .background-image img
			{
				min-height: 100vh;
				min-width: 100vw;
				object-fit: cover;
			}
	
		#wrapper > header, #wrapper > footer, #wrapper > #container > main > .inside > .mod_article:not(.comments), .comments > .block_wrapper > .ce_comments > *
		{
			display: grid;
		    grid-template-columns: minmax(3vw, 1fr) minmax(auto, 1600px) minmax(3vw, 1fr);
		}
	
			#wrapper > header > *, #wrapper > footer > *, #wrapper > #container > main > .inside > *:not(.comments) > *, .comments > .block_wrapper > .ce_comments > * > *
			{
			    grid-column: 2/3;
			}
		
			#wrapper > footer > *, 
			#wrapper > #container > main > .inside > *:not(.comments) > *, 
			.comments > .block_wrapper > .ce_comments > * > *
			{
				margin: 0 15.5rem;
			}
	
		/***** HEADER *****/
		#wrapper > header 
		{
			padding: 2.5rem 0;
		    grid-row: 1/2;
		}
		
			#wrapper > header > .inside 
			{
				margin: 0;
			}
			
			#wrapper > header > .inside > * { float: right; }
			
			#wrapper > header > .inside > nav,
			#wrapper > header > .inside > a:first-of-type { float: left; }
			
				/***** Logo *****/
				#wrapper > header > .inside > a:first-of-type 
				{
					//margin: 0 0 0 -15.5rem;
					margin-right: 2.9rem;
				}
				
				#wrapper > header > .inside > #openinput
				{
					height: 1.3rem;
					width: 1.3rem;
					margin: 1.4rem 0 1.3rem 0;
					background: url(/files/theme_maio31/assets/search_235.png) no-repeat;
				}
				
				#wrapper > header > .inside > a.projects
				{ 
					//float: right;
					margin-right: 10.3rem; 
				}
					
					header > .inside > a > .logo
					{
						width: 12.6rem; height: 4rem;
						text-align: left;
						background-image: url(/files/theme_maio31/assets/logo_235.png);
						background-repeat: no-repeat;
					}
				
					/***** Timeline *****/
					header > .inside > a > .change
					{
						margin: .9rem 0 .9rem 1.5rem;
						width: 2.2rem; height: 2.2rem;
						background-image: url(/files/theme_maio31/assets/change_235.png);
						background-repeat: no-repeat;
					}
					
					header > .inside > a > .cart
					{
						margin: .9rem 0 .9rem 1.5rem;
						width: 2.2rem; height: 2.2rem;
						background-image: url(/files/theme_maio31/assets/cart_235.png);
						background-repeat: no-repeat;
					}
			
				/***** Navigation *****/
				#wrapper > header > .inside > nav.mod_navigation {}
				
					#wrapper > header > .inside > nav.mod_navigation > ul {}
					
						#wrapper > header > .inside > nav.mod_navigation > ul > li 
						{ 
							float: left;
							//height: 1.8rem;
							list-style-type: none;
							text-align: center;
							padding: 1rem 0 1.2rem 0;
							margin-left: calc(1rem + 0.75vw);
						}
						
							#wrapper > header > .inside > nav.mod_navigation > ul > li.first
							{
								margin-left: 0;
							}
						
							#wrapper > header > .inside > nav.mod_navigation > ul > li > a
							{
								text-decoration: none;
								text-align: center;
							}
			
				/***** Suche *****/
				#wrapper > header > .inside > .ce_form 
				{
					//float: right;
				}
				
					#wrapper > header > .inside > .ce_form > form
					{
						//height: 2rem;
						margin: 0; padding: 1rem 0;
					}
							
						header > div.inside > div.ce_form > form > div.formbody {}
						
							header > div.inside > div.ce_form > form > div.formbody > div.widget
							{
								padding-left: 1.8rem;
								margin: 0.4rem auto 0 auto;
								background: url(/files/theme_maio31/assets/search_235.png) no-repeat;
							}
						
								header > div.inside > div.ce_form > form > div.formbody > div.widget > input
								{
									width: 5.5rem;
									background-color: rgba(255,255,255,0) !important;
									margin-top: -0.4rem;
									transition-property: width;
									transition-duration: 2s;
									transition-delay: 0s;
								}
				
							#wrapper > header > .inside > .ce_form > form > div.formbody > div.widget > input:hover,
							#wrapper > header > .inside > .ce_form > form > div.formbody > div.widget > input:focus
							{
								width: 20rem;
							}
				
		
		/***** CONTENT *****/
		#wrapper > #container 
		{
			position: relative;							/* ↓ padding-bottom verschoben zum footer ↓ */
		    grid-row: 2/3;
		}
		
			#wrapper > #container > .main  {}
			
				#wrapper > #container > #main > .inside {}
				
					/* HOME INSTAGRAM */
					#wrapper > #container > main > .inside > .mod_cfg_instagram
					{
						display: grid;
						grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
						grid-gap: 5rem;
						margin: 5rem 15.5rem;
						height: calc(100vh - 210px - 10rem);
						overflow: hidden;
						position: fixed;
						width: calc(100vw - 31rem);
					}
					
						#wrapper > #container > main > .inside > .mod_cfg_instagram > .item 
						{ 
							grid-column: auto; 
							margin: 0; 
							opacity: 1;
						}
					
						#wrapper > #container > main > .inside > .mod_cfg_instagram > .item:hover { opacity: .75; }
					
							#wrapper > #container > main > .inside > .mod_cfg_instagram > .item img { min-width: auto; }
					/* HOME INSTAGRAM */
				
					#wrapper > #container > main > .inside > .bg_space,
					#wrapper > #container > #main > .inside .article_stage > .block_wrapper
					{
					    width: 100%;
					    height: calc(100vh - 210px);
					    clear: both;
					    position: relative;
					    display: flex;
					    align-items: center;
					    justify-content: center;
					}
					
					.theme_article #wrapper > #container > main > .inside > .bg_space
					{
						height: calc(100vh - 268px);
					}
					
					#wrapper > #container > #main > .inside .article_stage > .block_wrapper
					{
						height: calc(100vh - 37rem);
						min-height: 30vw;
					}
					
						#wrapper > #container > main > .inside > .bg_space > .logo590
						{
							//background-image: url(/files/theme_maio31/assets/home_logo_235.png); 
							//width: 59rem;
							//height: 18.7rem;
							//position: relative;
							max-width: calc(100% - 20vw);
						}
						
					#wrapper > #container > main > .inside > .timeline
					{
						max-width: 100vw;					/* 100vw */
						height: 4.3rem;
						clear: both;
						position: relative;
						overflow: hidden;
					}
					
						#wrapper > #container > main > .inside > .timeline > canvas
						{
							margin: 0;
						}
					
					#wrapper > #container > main > .inside > .title
					{
						text-align: center;
						background: rgba(255,255,255,1);
						width: 100%;
						padding: 4rem 0 4.5rem 0;
					}
			
					#wrapper > #container > #main > .inside > .mod_article { padding: 5rem 0; }
					#wrapper > #container > #main > .inside > .mod_article.row3 { padding-bottom: 2rem; }
					
						#wrapper > #container > #main > .inside > .mod_article:not(.comments) > .block_wrapper 
						{
							//width: 93rem;
							//margin: 0 auto;
						}
						
							#wrapper > #container > #main > .inside .ce_headline + .mod_iso_productlist { margin-top: 1.5rem; }
						
							/***** TwoRow / row3 *****/
							#wrapper > #container > #main > .inside .row3 > *
							{
							    display: grid;
							    grid-template-columns: repeat(3, minmax(20rem, 1fr));
							    /* grid-template-columns: repeat(3, 1fr); */
							    grid-gap: 3rem;
							}
						
							/***** row4 ++ *****/
							#wrapper > #container > #main > .inside .mod_iso_productlist > .product_list,
							#wrapper > #container > #main > .inside .mod_article > .block_wrapper > .mod_cfg_instagram
							{
							    display: grid;
							    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
							    /* grid-template-columns: repeat(3, 1fr); */
							    grid-gap: 3rem;
							}
						
							/***** TwoRow / row3 *****/
							#wrapper > #container > #main > .inside .mod_iso_checkout
							{
							    display: grid;
							    grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 3fr);
							    grid-gap: 3rem;
							}
							
								#wrapper > #container > #main > .inside .mod_iso_checkout .error
								{
									grid-area: 1 / 1 / auto / -1;
								}
							
								/* .mod_iso_checkout > form { grid-column: 2/4; } */
							
							#wrapper > #container > #main > .inside .tworow > *:not(.product)
							{
							    display: grid;
							    grid-template-columns: repeat(2, minmax(35rem, 1fr));
							    grid-gap: 3em;
							}
							
							#wrapper > #container > #main > .inside .tworow.tw33 > .product > form > .formbody
							{
							    display: grid;
							    grid-template-columns: repeat(3, 1fr);
							    grid-template-rows: repeat(3, auto) 1fr;
							    grid-template-areas:	'name		image	image'
							    						'offer		image	image'
							    						'options	image	image'
							    						'submit		image	image';
							    grid-gap: 1.3em 3em;
							}
							
								#wrapper .tworow.tw33 > .product > form > .formbody > .name 			{ grid-area: name; }
								#wrapper .tworow.tw33 > .product > form > .formbody > .offer			{ grid-area: offer; }
								#wrapper .tworow.tw33 > .product > form > .formbody > .submit_container { grid-area: submit; }
								#wrapper .tworow.tw33 > .product > form > .formbody > .options			
								{ 
									grid-area: options; 
									display: grid;
									grid-gap: 2.5rem;
									grid-template-areas:	'opt_first'
															'opt_second'
															'opt_third';
								}
									#wrapper .tworow.tw33 > .product > form > .formbody > .options > .accessories			{ grid-area: opt_third; }
									#wrapper .tworow.tw33 > .product > form > .formbody > .options > .color_selection		{ grid-area: opt_second; }
									#wrapper .tworow.tw33 > .product > form > .formbody > .options > .wood_selection		{ grid-area: opt_first; }
								
								#wrapper .tworow.tw33 > .product > form > .formbody > .image_container	{ grid-area: image; }
							
							#wrapper > #container > #main > .inside .tworow > .block_wrapper > div:nth-child(2n+0),
							#wrapper > #container > #main > .inside .row3 > .block_wrapper > div:nth-child(3n+0)
							{
								padding: 0;
							}
							/***** TwoRow *****/
						
						/***** ContentCenter *****/
						#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper 
						{
							text-align: center;
						}
						
						#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > *
						{
							margin-left: auto; margin-right: auto;
						}							
							
							#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > div.time_tags {
								max-width: fit-content;
								max-width: -moz-fit-content;
								margin: 3.4rem auto 0 auto;
							}
							
								#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > div.time_tags > div.box {
									border-top: 1px solid rgb(77,77,77);
									float: left;
									margin-right: 3px;
									padding-top: .7rem;
								}
								
									#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > div.time_tags > div.box > span {
										font-size: 1.1rem;
										text-align: center;
										min-width: 100%;
										display: inline-block;
										color: rgb(255,255,255);
									}
						/***** ContentCenter *****/
						
						/***** Gallery *****/
						#wrapper > #container > #main > .inside > .mod_article.gallery > .block_wrapper li
						{
							margin: .7rem 0 2.7rem 0;
						}
						
						#wrapper > #container > #main > .inside > .mod_article.gallery > .block_wrapper li:last-child
						{
							margin: .7rem 0 0 0;
						}
						/***** Gallery *****/
						
						/***** Content Nav *****/
						#wrapper > #container > #main > .inside > .mod_article > .block_wrapper > div > nav
						{
							margin-bottom: 3rem;
						}
							
							#wrapper > #container > #main > .inside > .mod_article > .block_wrapper > div > nav li
							{
								line-height: 2.5rem;
							}
						/***** Content Nav *****/ 
						
					/***** Comments *****/
					#wrapper > #container > #main > .inside > .mod_article.comments 
					{
						padding-bottom: 0;
					}
					
						#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper {}
						
							#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments {}
							
								#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments > .first_block 
								{
									text-align: center;
									padding-bottom: 5rem;
								}
							
										#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments > .first_block .grey.line
										{
											margin: 2.2rem auto;
											max-width: 30rem;
										}
								
								#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments > .last_block 
								{
									padding: 5rem 0;
								}
									
									#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments > .last_block > .form {}
								
										#wrapper > #container > #main > .inside > .mod_article.comments > .block_wrapper > .ce_comments > .last_block > .form > p
										{
											text-align: center;
										}
					/***** Comments *****/
					
					/***** Article Timeline *****/
					#wrapper > #container > #main > .inside > .mod_article.article_timeline {} 
					
						#wrapper > #container > #main > .inside > .mod_article.article_timeline .element:not(:first-of-type) 
						{
							margin-top: 5rem;
						} 
						
						#wrapper > #container > #main > .inside > .mod_article.article_timeline .element h2.name 
						{
							margin-top: 1rem;
						} 
						
						#wrapper > #container > #main > .inside > .mod_article.article_timeline .element img
						{
							margin-top: .7rem;
						} 
					/***** Article Timeline *****/
					
					/***** Shop *****/
					#wrapper .inside > .mod_article .mod_iso_productlist > .product_list > .product .overview_sidebyside_box
					{
						display: flex;
						justify-content: space-between;
						margin: 1rem 0 .5rem 0;
					}
					
					#wrapper .inside > .mod_article .mod_iso_productlist > .product_list > .product .details > a
					{
						width: auto;
						padding: .7rem 1.3rem;
						margin-top: 1.3rem;
						text-align: center;
						display: inline-block;
					}
					/***** Shop *****/
					
						/***** Shop description *****/
						#wrapper .inside > .mod_article.description .mod_iso_productreader > .product > .description
						{
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							column-gap: 3rem;
							grid-template-rows: auto;
						}
							
							#wrapper .inside > .mod_article.description .mod_iso_productreader > .product > .description > h2
							{
								grid-column: 1/-1;	
							}
						/***** Shop description *****/
					
					/***** Shop gallery *****/
					#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product 
					{
						display: grid;
    					grid-template-columns: repeat(2, 1fr);
    					grid-gap: 3rem;
					}
					
						#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product > figure:nth-child(5n+3)
						{
							grid-column: 1/3;
						}
						
						#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product > .description
						{
							display: flex;
    						align-items: center;
						}
						
							#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product > .description > p
							{
								padding: calc(3rem + 3vw);
								font-size: calc(1.8rem + .8vw);
								line-height: calc(2.3rem + .8vw);
								font-weight: 100;
								text-align: justify;
								-moz-hyphens: auto;
								-epub-hyphens: auto;
								-o-hyphens: auto;
								-webkit-hyphens: auto;
								-ms-hyphens: auto;
								hyphens: auto;
							}
					/***** Shop gallery *****/
					
								/***** Search *****/
								#wrapper > #container > #main > .inside > .mod_article > .block_wrapper > .mod_search > div
								{
									padding: 1.5rem 0;
								}
								
								#wrapper > #container > #main > .inside > .mod_article > .block_wrapper > .mod_search > .odd
								{
									border: 0 solid rgb(77,77,77);
									border-width: 2px 0 2px 0;
								}
								/***** Search *****/
		
		/***** FOOTER *****/
		#wrapper > #container {}
		
		#wrapper > footer 
		{
			width: 100%;
			padding: 5rem 0;
		    grid-row: 3/4;
		}
			
			#wrapper > footer > .inside {}
			
				#wrapper > footer > .inside ul > li
				{
					float: left;
					margin-right: calc(1rem + 0.75vw);
				}
			
				#wrapper > footer > .inside ul > li.last
				{
					margin-right: 0;
				}
			
				#wrapper > footer > .inside nav
				{
					float: right;
				}
				
@media all and (max-width: 1210px) 
{
	#wrapper > footer > *, 
	#wrapper > #container > main > .inside > *:not(.comments) > *, 
	.comments > .block_wrapper > .ce_comments > * > *
	{
		margin: 0;
	}
	
	#wrapper > header > .inside > a.projects { margin-right: 0; }
	
	/* HOME INSTAGRAM */
	#wrapper > #container > main > .inside > .mod_cfg_instagram
	{
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		margin: 5vh 3vw;
		width: 94vw;
		grid-gap: calc(3vh + 1vw);
		height: calc(100vh - 210px - 10vh);
	}
}

@media all and (min-aspect-ratio: 3/1)
{
	#wrapper > #container > main > .inside > .mod_cfg_instagram
	{
		grid-template-columns: repeat(auto-fill, minmax(40vh, 1fr));
		margin: 2vh 3vw;
		height: calc(100vh - 200px - 4vh);
		width: 94vw;
	}
}

@media all and (max-aspect-ratio: 5/4)
{
	body.theme_shopproductdetails { background-image: url(/files/maio31/shop/Design/Sunlounger_Studio_44_bright500.webp) !important; }
}

@media all and (max-width: 880px)
{
	/* #wrapper > #container > #main > .inside .mod_iso_checkout, */
	#wrapper > #container > #main > .inside .row3 > *,
	#wrapper > #container > #main > .inside .mod_iso_productlist > .product_list,
	#wrapper > #container > #main > .inside .tworow > .block_wrapper,
	#wrapper > #container > #main > .inside .tworow.tw33 > .product > form > .formbody
	{
	    /* grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); */
	    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
	}
	
		#wrapper > #container > #main > .inside .mod_iso_checkout > form { grid-column: unset; }
}

@media all and (max-width: 750px) 
{
	header > .inside > a > .logo
	{
		width: 3rem;
		background-image: url(/files/theme_maio31/assets/logo_235_symbol.png);
	}
	
	#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > div.time_tags
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	#wrapper > #container > #main > .inside > .mod_article.content_center > .block_wrapper > div.time_tags > div.box 
	{
		margin-bottom: 2rem;
	}
	
	#wrapper > #container > #main > .inside .mod_iso_checkout
	{
	    grid-template-columns: 1fr;
	}
}

@media all and (max-width: 590px)
{
	#wrapper > header > .inside > #openinput { display: inline-block; }
	#wrapper > header > .inside > .ce_form { display: none; }
	
	#wrapper > #container > #main > .inside .row3 > *,
	#wrapper > #container > #main > .inside .mod_iso_productlist > .product_list,
	#wrapper > #container > #main > .inside .tworow > .block_wrapper,
	#wrapper > #container > #main > .inside .tworow.tw33 > .product > form > .formbody,
	#wrapper .inside > .mod_article.description .mod_iso_productreader > .product > .description,
	#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product/*,
	#wrapper > #container > #main > .inside .mod_iso_checkout*/
	{
	    grid-template-columns: 1fr;
	}
	
		#wrapper .inside > .mod_article.description .mod_iso_productreader > .product > .description > div + div
		{
			margin-top: 2rem;
		}
	
		#wrapper .inside > .mod_article.gallery .mod_iso_productreader > .product > figure:nth-child(5n+3)
		{
			grid-column: unset;
		}
	
	
	#wrapper > #container > #main > .inside .tworow.tw33 > .product > form > .formbody
	{
		
		grid-template-rows: 	auto;
		grid-template-areas:	'image'
								'name'
								'offer'
								'options'
								'submit';
	}
	
	#wrapper > footer > .inside > *
	{
		display: flex;
	    justify-content: center;
	    float: unset !important;
	}
	
	#wrapper > footer > .inside nav
	{
		margin-top: 3rem;
	}
	
	#wrapper > #container > main > .inside > .bg_space 
	{
		width: 100%;
		height: calc(100vh - 256px);
	}
	
	/* HOME INSTAGRAM */
	#wrapper > #container > main > .inside > .mod_cfg_instagram
	{
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		margin: 2vh 3vw;
		width: 94vw;
		grid-gap: calc(1vh + 2vw);
		height: calc(100vh - 210px - 4vh);
	}
}

@media all and (max-width: 500px)
{
}

@media all and (max-width: 400px)
{
	body header .unnecessary { display: none; }
}