:root {
	--portfolio_grey: rgba(180,180,180,0);
	
	--industrial_page_bg: rgba(255,164,82,1.0);
	--industrial_font_color: rgba(255,255,255,0.8);
	--industrial_sq_bg: rgba(182,123,75,1.0);
	
	--jewelry_page_bg: rgba(113,37,57,1.0);
	--jewelry_font_color_b: rgba(255,255,255,0.8);
	--jewelry_sq_bg: rgba(113,37,57,1.0);
	--jewelry_font_color: rgba(227,208,191,1.0);
	
	--peltre_page_bg: rgba(60,144,181,1.0);
	--peltre_font_color: rgba(0,81,141,1.0);
	
	--nuts_page_bg: rgba(214,160,133,1.0);
	--nuts_font_color: rgba(255,255,255,1.0);
	
	--brass_page_bg: rgba(199,123,67,1.0);
	
	--wits_page_bg: rgba(172,0,40,1.0);
	
	--transitions_page_bg: rgba(220,200,203,1.0);
	--transitions_font_color: rgba(255,255,255,1.0);
	
	--ceramics_body_bg: rgba(255,255,255,1.0);
	--ceramics_page_bg: rgba(211,118,52,1.0);
	--ceramics_font_color: rgba(50,50,50,1.0);
}

body#jewelry #header .icons a {
	font-size: 1.5em;
}

body#industrial {
	background: var(--portfolio_grey);
}

	body#industrial #header a, body#industrial #header strong, body#industrial #header b {
		color: var(--industrial_font_color);
		font-size: 2.4em;
		font-weight: 500;
	}

body#jewelry {
	background: var(--portfolio_grey);
	color: var(--jewelry_font_color);
}
	
	body#jewelry #header a, body#jewelry #header strong, body#jewelry #header b {
		color: var(--jewelry_font_color);
		font-size: 2.4em;
		font-weight: 500;
	}

	body#jewelry h1, body#jewelry h2, body#jewelry h3, body#jewelry h4, body#jewelry h5 {
		color: var(--jewelry_font_color);
	}	

body#ceramics {
	background: var(--ceramics_body_bg);
	color: var(--ceratmics_font_color);
}

header.main > :last-child {
  margin: 0 0 0em 0; }

#industrial #header, #jewelry #header, #ceramics #header {
	border-bottom: none;
	padding-bottom: 0.5em;
	margin-bottom: 0;
}

    body#industrial #main > .inner > section,
    body#jewelry #main > .inner > section,
    body#ceramics #main > .inner > section  {
    	padding: 0em 0 2em 0;
    	border-top: none;
    }
      
.two_page {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 0em 0em;
  width: 100%; }
  
  .two_page article {
  	-moz-flex-grow: 0;
  	-webkit-flex-grow: 0;
  	-ms-flex-grow: 0;
  	flex-grow: 0;
  	-moz-flex-shrink: 1;
  	-webkit-flex-shrink: 1;
  	-ms-flex-shrink: 1;
  	flex-shrink: 1;
  	margin: 0 0 0 0;
  	position: relative;
  	width: 50%;
  	height: 100%;
  	aspect-ratio: 4/5;
  	box-sizing: border-box;
  }
	
	body#jewelry .two_page article {
		background: var(--jewelry_page_bg);
	}
	
	body#jewelry .two_page article.lightbg {
		background: #E0E0E0;
	}
	
	body#jewelry .two_page article.nuts {
		background: var(--nuts_page_bg);
	}
	body#jewelry .two_page article.nuts h1 {
	  	color: var(--nuts_font_color );
	  }
	  
	body#jewelry .two_page article.brass {
		background: var(--brass_page_bg);
	}
	
	body#jewelry .two_page article.peltre {
		background: var(--peltre_page_bg);
	}
	  body#jewelry .two_page article.peltre h1 {
	  	color: var(--peltre_font_color);
	  }
	 
	body#jewelry .two_page article.wits {
		background: var(--wits_page_bg);
	}
	
	body#jewelry .two_page article.transitions {
		background: var(--transitions_page_bg);
	}	
	  body#jewelry .two_page article.transitions h1,
	  body#jewelry .two_page article.transitions h2,
	  body#jewelry .two_page article.transitions h3,
	  body#jewelry .two_page article.transitions h4  {
	  	color: var(--transitions_font_color);
	  }
	
	.two_page article .content .title {
		font-weight: 600;
		font-size: 2em;
		line-height: 2em;
		text-transform: uppercase;
	}
	
	.two_page article .content .title.topleft {
		position: absolute;
		top: 20%;
		left: 0;
		text-align: right;
		transform-origin: left;
		vertical-align: middle;
		width: 45%;
		padding-right: 0.5em;
		padding-left: 0.5em;
		height: 2em;
	}

	.two_page article .content .title.botright {
		position: absolute;
		bottom: 20%;
		right: 0;
		text-align: left;
		transform-origin: right;
		vertical-align: middle;
		width: 45%;
		padding-right: 0.5em;
		padding-left: 0.5em;
		height: 2em;
	}
    
    .two_page article .content .title.botleft {
		position: absolute;
		bottom: 20%;
		left: 0;
		text-align: right;
		transform-origin: left;
		vertical-align: middle;
		width: 45%;
		padding-right: 0.5em;
		padding-left: 0.5em;
		height: 2em;
	}
	
    body#jewelry .title {    	
		background: var(--jewelry_page_bg);
		color: var(--jewelry_font_color);
    }
	
	.two_page article .content .caption p {
		font-size: 1.0em;
		font-weight: normal;
		line-height: 1.3;
		color: #000000;
		margin: 0 0 0 0;
	}
	
	.two_page article .content .caption.botleft {
		position: absolute;
		bottom: 4em;
		left: 0;
		text-align: left;
		transform-origin: bottom left;
		vertical-align: bottom;
		width: 55%;
		padding: 0 0 1em 2em;
		height: 3.3em;
	}
	
	.two_page article .content .caption.topleft {
		position: absolute;
		top: 2em;
		left: 0;
		text-align: left;
		transform-origin: top left;
		vertical-align: top;
		width: 55%;
		padding: 2em 0 0.5em 3em;
		height: 3.5em;
	}
	
	.two_page article .content .caption.botright {
		position: absolute;
		bottom: 4em;
		right: 0;
		text-align: left;
		transform-origin: bottom left;
		vertical-align: bottom;
		width: 55%;
		padding: 0 2em 2em 0;
		height: 3.3em;
	}
	
	.two_page article .content .caption.topright {
		position: absolute;
		top: 2em;
		right: 0;
		text-align: left;
		transform-origin: top right;
		vertical-align: top;
		width: 55%;
		padding: 2em 3em 0em 0;
		height: 3.3em;
	}
	
	.two_page article .content .caption.white {
		color: #ffffff;
	}
	
	.two_page article .content.momadesign:before {
		position: absolute;
		bottom: 4em;
		right: 4em;
		width: calc(100% - 4em);
		transform-origin: bottom right;
		content: "";
		z-index: 1;
		background-image: url("/images/jewelry/MOMADesignStore_logo.png");
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 35%;
		height: calc(100% - 4em);
	}
	
	.two_page article .content.momadesign.white:before {
		background-image: url("/images/jewelry/MOMADesignStore_logo_white.png");
		
	}
	
	.two_page article .content.momadesign.center:before {
		background-position: center bottom;
		right: 0em;
		left: 0em;
		width: 100%;
	}
	.two_page article .content .caption.lightbg, .two_page article .content .caption.lightbg p {
		color: #333333;
	}
	
	.two_page article .content .caption.darkbg, .two_page article .content .caption.darkbg p {
		color: #FFFFFF;
	}
	
	.two_page article .content.oneup {
		width:65%;
		margin: auto;
		padding-top: 15%;
	}
	.two_page article .content.oneup .image img {
		border: 5px solid #ffffff;
	}
	
	.two_page article .content.twoup {
		width:90%;
		margin: auto;
		padding-top: 15%;
	}
	
	.two_page article .content.twoup .image.left img,
	.two_page article .content.twoup .image.right img {
		border: 5px solid #ffffff;
	}
	
    .two_page article > :last-child {
      margin-bottom: 1em; }
    .two_page article .image {
      display: block;
      margin: 0em 0 0em 0; }
    .two_page article .image.center {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      height: 70%;
      text-align: center; }
    .two_page article .image img {
        display: block;
        width: 100%; }
    .two_page article .content {
    	padding: 0em 0 0 0em;
    	position: relative; 
    	height: 100%;}
    
    .two_page article .content h1, .two_page article .content h2,
    .two_page article .content h3, .two_page article .content h4 {
    	color: var(--jewelry_font_color);
    }
    
    #tableware .two_page article.tableware {
    	background: var(--ceramics_page_bg);
    	color: #ffffff;
    }
    
    .two_page article .content div.description {
    	background: #ffffff;
    	color: #000000;
    	padding: 3em 3em 3em 3em;
    	height: 28%;
    	font-size: 0.95em;
    	line-height: 1.5;
    	margin: 0;
    }
    	.two_page article .content div.description p {
    		margin: 0;
    		text-align: justify;
    	}
    	
    	.two_page article .content div.description h1,
    	.two_page article .content div.description h2,
    	.two_page article .content div.description h3,
    	.two_page article .content div.description h4 {
    		margin-bottom: 0.6em;
    	}
    	
    	#ceramics .two_page article.tableware .content h1, #ceramics .two_page article.tableware .content h2,
		#ceramics .two_page article.tableware .content h3, #ceramics .two_page article.tableware .content h4 {
			color: #ffffff;
		}
    	
    	#ceramics .two_page article .content h1, #ceramics .two_page article .content h2,
		#ceramics .two_page article .content h3, #ceramics .two_page article .content h4 {
			color: var(--ceramics_font_color);
		}
		
    .two_page article .content h1 {
    	font-size: 3.0em;
    	line-height: normal;
    	font-weight: 600;
    	margin-bottom: 0;
    	padding: 0;
    }
    	
    .two_page article .content h1.lightbg {
    	color: rgba(198,198,198,1.0);
    }
    
    .two_page article .content h2 {
    	font-size: 1.8em;
    	line-height: normal;
    	margin-bottom: 0;
    	font-weight: 500;
    	padding: 0;}
  
    .two_page article .content h2.lightbg {
    	color: rgba(198,198,198,1.0);
    }
    	
    .two_page article .content h3 {
    	font-size: 1.5em;
    	line-height: normal;
    	margin-bottom: 0;
    	padding: 0;}
	
	.two_page article, two_page article {
    	border-right: 1px solid var(--jewelry_font_color);
    }
  
  body#jewelry .two_page article.botnav {
  	background-color: transparent;
  }
  
  .two_page article.botnav {
  	aspect-ratio: 10/1;
  	box-sizing: border-box;
  	background-color: transparent;
  }
  
  .two_page article.botnav .content {
  	text-align: left;
  	font-size: 2em;
  	margin-left: 2em;
  	background-color: inherit;
  }
  
  .two_page article.botnav .content.right {
  	text-align: right;
  	margin-right: 2em;
  }
  
  .two_page article.botnav a.previous:before {
  	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	
	content: '\f053'; /* chevron-left */
	margin-left: -1em;
	padding-right: 1em;
	}
	
	.two_page article.botnav a.next:after {
  	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900; 
	
	content: '\f054'; /* chevron-right */
	margin-right: -1em;
	padding-left: 1em;
	}
  
  /* X-Large (Full Width) */
  @media screen and (min-width: 1481px) {
    .two_page article:nth-child(2n + 1):before {
      display: none; }
    .two_page article:nth-child(2n + 1):after {
      width: 100%;
      }
    .two_page article:nth-last-child(1), .two_page article:nth-last-child(2) {
      margin-bottom: 1em; }
      .two_page article:nth-last-child(1):before, .two_page article:nth-last-child(2):before {
        height: 100%; }
      .two_page article:nth-last-child(1):after, .two_page article:nth-last-child(2):after {
        /* display: none; */ } }
  
  /* Large */
  @media screen and (max-width: 1480px) {
    .two_page article {
      /* width: 50%; */ }
      .two_page article:nth-last-child(2) {
        margin-bottom: 1em; } }
	
  
  @media screen and (min-width: 737px) and (max-width: 1480px) {
    .two_page article:nth-child(2n + 1):before {
      display: none;
      font-size: small; }
    .two_page article:nth-child(2n + 1):after {
      width: 100%; }
    .two_page article:last-child {
      margin-bottom: 1em; }
      .two_page article:nth-last-child(1):before, .two_page article:nth-last-child(2):before {
        height: 100%; }
      .two_page article:nth-last-child(1):after, .two_page article:nth-last-child(2):after {
        display: none; } }
        
  @media screen and (min-width: 481px) and (max-width: 736px) {
    .two_page {
      margin: 0 0 0em 0em;
      width: 100%;
      font-size: x-small;}
      
     .two_page article {
        margin: 0 0 0em 0em;
        width: 100vw;
        height: 100%;
        border: 0px; }
    
     .two_page article .content.twoup {
     	padding-bottom: 2em;
     	height: 100vw;
     }
     
     .two_page article:before {
          height: calc(100%);
          left: 0em; }
     .two_page article:after {
     	  height: 100%; 
     	  margin-bottom: 1em; }
    }
          
  @media screen and (max-width: 480px) {
    .two_page {
    	margin: 0 0 0 0;
    	/* bigger bottom margin */
    	width: 100%;
    	font-size: xx-small; }
      
    .two_page article {
        margin: 0 0 0 0;
        width: 100%; }
    .two_page article:before {
          display: none; }
    .two_page article:after {
          width: 100%; }
    .two_page article:last-child {
          margin-bottom: 0em; }
     .two_page article:last-child:after {
     	  margin-bottom: 2em;
     	  display: none; } }