:root {
	--portfolio_grey: rgba(180,180,180,1.0);
	--overlay_grey: rgba(0,0,0,0.22);
	
	--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(255,255,255,1.0);
	--jewelry_header_color: rgb(255,255,255,1.0);
	--jewelry_header_font: rgb(128,128,128,1.0);
	--jewelry_accent_color: rgba(113,37,57,1.0);
	--jewelry_font_color: rgba(128,128,128,1.0);
	--jewelry_sq_bg: rgba(113,37,57,1.0);
	
	--ceramics_page_bg: rgba(255,255,255,1.0);
	--ceramics_header_color: rgb(255,255,255,1.0);
	--ceramics_accent_color: rgb(211,118,52,1.0);
	--ceramics_header_font: rgb(128,128,128,1.0);
	--ceramics_font_color: rgba(128,128,128,1.0);
	--ceramics_sq_bg: rgba(113,37,57,1.0);
}

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

/* topics */
body#industrial {
	background: var(--industrial_page_bg);
}

	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(--jewelry_page_bg);
	color: var(--jewelry_font_color);
}
	
	body#jewelry #header {
		background: var(--jewelry_header_color);
	}
	body#jewelry #header > * {
		margin-left: 1em;
	}
	
	body#jewelry #header a, body#jewelry #header strong, body#jewelry #header b {
		color: var(--jewelry_header_font);
		font-size: 2.1em;
		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_page_bg);
	color: var(--ceramics_font_color);
}
	
	body#ceramics #header {
		background: var(--ceramics_header_color);
	}
	
	body#ceramics #header > * {
		margin-left: 1em;	
	}
	
	body#ceramics #header a, body#ceramics #header strong, body#ceramics #header b {
		color: var(--ceramics_header_font);
		font-size: 2.1em;
		font-weight: 500;
	}

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

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

#industrial #header, #jewelry #header, #ceramics #header {
	border-bottom: solid 2px;
	padding-bottom: 1em;
	margin-bottom: 5em;
}
	
	#jewelry #header {
		border-color: var(--jewelry_accent_color);
	}
	
	#ceramics #header {
		border-color: var(--ceramics_accent_color);
	}

    body#industrial #main > .inner > section, 
    body#jewelry #main > .inner > section,
    body#ceramics #main > .inner > section {
    	padding: 0em 0 2em 0;
    	border-top: none;
    }
    
      
.topics {
  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%; }
  
  .topics 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.75em 0.75em;
  	position: relative;
  	width: 32%;
  	height: 32%;
  	box-sizing: border-box;
  }
  #industrial .topics article {
  	background: var(--industrial_sq_bg); }
  #jewelry .topics article {
  	background: var(--jewelry_sq_bg); }
  #ceramics .topics article {
  	background: var(--ceramics_sq_bg); }
  	
    .topics article > :last-child {
      margin-bottom: 0; }
    .topics article .image {
      display: block;
      margin: 0em 0 0em 0; }
      .topics article .image img {
        display: block;
        width: 100%; }
    .topics article .content {
    	padding: 0em 0 0 0em;
    	position: relative; 
    	height: 100%;}
    
    .topics article .content .rotover {
    	position: absolute;
    	top: 25%;
    	left: 30%;
    	transform-origin: left;
    	transform: rotate(-90deg) translate(-50%, 0%);
    	text-align: left;
    	vertical-align: top;
    	width: 80%;
    	height: 50%;
    }
    
    .topics article .content h1 {
    	font-size: 3.0em;
    	line-height: normal;
    	font-weight: 600;
    	margin-bottom: 0;
    	/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
    	color: #ffffff;
    	padding: 0;
    }
    
    body#jewelry .topics article .content h1.lightbg {
    	color: var(--overlay_grey);
    }
    body#ceramics .topics article .content h1.lightbg {
    	color: var(--overlay_grey);
    }
    body#industrial .topics article .content h1.lightbg {
    	color: var(--overlay_gray);
    }
    .topics article .content h2 {
    	font-size: 1.8em;
    	line-height: normal;
    	margin-bottom: 0;
    	font-weight: 500;
    	/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
    	color: #ffffff; 
    	padding: 0;}
  
    .topics article .content h2.lightbg {
    	color: var(--overlay_grey);
    }
    	
    .topics article .content h3 {
    	font-size: 1.5em;
    	line-height: normal;
    	margin-bottom: 0;
    	/*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);*/
    	color: #ffffff; 
    	padding: 0;}
    	
  @media screen and (min-width: 1481px) {
    .topics article:nth-child(3n + 1):before {
      /* display: none; */ }
    .topics article:nth-child(3n + 1):after {
      /* width: 100%; */ }
    .topics article:nth-last-child(1), .topics article:nth-last-child(2), .topics article:nth-last-child(3) {
      margin-bottom: 0; }
      .topics article:nth-last-child(1):before, .topics article:nth-last-child(2):before, .topics article:nth-last-child(3):before {
        height: 100%; }
      .topics article:nth-last-child(1):after, .topics article:nth-last-child(2):after, .topics article:nth-last-child(3):after {
        /* display: none; */ } }
  @media screen and (max-width: 1480px) {
    .topics article {
      width: calc(50% - 3em); }
      .topics article:nth-last-child(3) {
        margin-bottom: 6em; } }
  @media screen and (min-width: 481px) and (max-width: 1480px) {
    .topics article:nth-child(2n + 1):before {
      /* display: none; */ }
    .topics article:nth-child(2n + 1):after {
      width: 100%; }
    .topics article:nth-last-child(1), .topics article:nth-last-child(2) {
      margin-bottom: 0; }
      .topics article:nth-last-child(1):before, .topics article:nth-last-child(2):before {
        height: 100%; }
      .topics article:nth-last-child(1):after, .topics article:nth-last-child(2):after {
        /* display: none; */ } }
  @media screen and (max-width: 736px) {
    .topics {
      margin: 0 0 2em -4.5em;
      width: calc(100% + 4.5em); }
      .topics article {
        margin: 0 0 4.5em 4.5em;
        width: calc(50% - 4.5em); }
        .topics article:before {
          height: calc(100% + 4.5em);
          left: -2.25em; }
        .topics article:after {
          bottom: -2.25em;
          width: calc(100% + 4.5em); }
        .topics article:nth-last-child(3) {
          margin-bottom: 4.5em; } }
  @media screen and (max-width: 480px) {
    .topics {
      margin: 0 0 2em 0;
      width: 100%; }
      .topics article {
        margin: 0 0 4.5em 0;
        width: 100%; }
        .topics article:before {
          /* display: none; */ }
        .topics article:after {
          width: 100%; }
        .topics article:last-child {
          margin-bottom: 0; }
          .topics article:last-child:after {
           /* display: none; */ } }