@charset "UTF-8";
	
  article.colbased
	{
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 10px;
		padding-bottom: 40px;
		width: 100%;
		display: block;
	}
  article.colbased .contentcols
	{
  	text-align: center;
	}
  article.colbased .inline-columns
	{
  	height: 100%;
		/*
		text-align: center;
		*/
	}

  article.colbased .contentcols article,
  article.colbased .captionside.outer,
  article.colbased .contentside.outer
	{
		padding: 20px;
		width: auto;
		display: inline-block;
  	height: 100%;
	}
  article.colbased .captionside.outer,
  article.colbased .contentside.outer
	{
  	vertical-align: top;
		box-sizing: border-box;
		height: 100%;
  }
  
  article.colbased.c2 .captionside.outer,
  article.colbased.c2 .contentside.outer
  {
  	width: 50%;
  }
  article.colbased.reverse .contentside.outer 
  {
		position: relative;
		left: -50%;
	}
  article.colbased.reverse .captionside.outer 
  {
		position: relative;
		left: 50%;
	}
  article.colbased.bottom .contentside.outer,
  article.colbased.bottom .captionside.outer
  {
  	vertical-align: bottom;
  }
  
  article.colbased.c2 article
	{
  	width: calc(50% - 100px);
  }
  article.colbased.c3 article
	{
  	width: calc(33% - 90px);
  	margin-right: 30px;
  }
	article.colbased.c4 article 
	{
	  width: calc(25% - 90px);
	  margin-right: 20px;
	}
  article.colbased article .contentelements article
	{
  	width: 100%;
  }

	article.centercontent .contentelements
	{
		display: inline-block;
		text-align: center;
	}
	
  article.rollup div.artdetail
	{
		height: 0;
		display: none;
	}
  article.rollup.open div.artdetail
	{
		height: auto;
		display: revert;
  }	
	article.rollup h1.itemhead
	{
		font-weight: normal;
		cursor: pointer;
	}
	
	article.rollup h1.itemhead:before
	{
		content: "▶ ";
		padding-right: 20px;
	}
	article.rollup.open h1.itemhead:before
	{
		content: "▼ ";
		padding-right: 20px;
	}

	article.carousel
	{
		height: 500px;
		overflow: hidden;
	}

	article.carousel div.carouselitems.outer
	{
		display: block;
		position: relative;
	}


	article.carousel ul.carouselselector
	{
		position: absolute;
	  bottom: 20px;
	  text-align: center;
	  width: 100%;	
	  padding: 10px;
	  /*
	  background-color: var(--bgcolor);
	  */
	  z-index: 1000;
	}	
	article.carousel ul.carouselselector li
	{
		display: inline-block;
		list-style: inside;
		cursor: pointer;
		padding: 5px;
	}
	article.carousel ul.carouselselector li.flipleft,
	article.carousel ul.carouselselector li.flipright
	{
		padding-left: 20px;
		padding-right: 20px;
	}
	
	article.carousel ul.carouselselector li:before
	{
		content: "●";
	}
	article.carousel ul.carouselselector li.flipright:before
	{
		content: "▶";
	}
	article.carousel ul.carouselselector li.flipleft:before
	{
		content: "◀";
	}
	article.carousel div.carouselitem.outer
	{
		position: relative;
		display: inline-block;
		width: 0;
		top: 0;
		left: 0;
		opacity: 0;
	}
	article.carousel div.carouselitem.outer.selected
	{
		width: 100%;
		opacity: 1;
		transition: opacity 0.7s;
	}
	article.carousel div.carouselitem.inner
	{
		padding-left: 40px;
		padding-right: 40px;
		display: none;
	}
	div.carouselitem.outer.selected div.carouselitem.inner
	{
		display: revert;
	}
	article.carousel ul.carouselselector li.selectoritem.selected
	{
		font-size: larger;
	}

	article.carousel .carousel-outeroverlay 
	{
		width: 160px;
		height: 100%;
		opacity: 0;
		transition: opacity 0.7s;
		position: absolute;
		z-index: 1000;
	}
	article.carousel .carousel-overlay 
	{
		width: 60px;
		height: 100%;
		background-color: var(--buttonbgcolor);
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
	}
	article.carousel .carousel-outeroverlay.left-overlay 
	{
		left: 0;
	}
	article.carousel .carousel-outeroverlay.right-overlay 
	{
		right: 0;
	}
	article.carousel .carousel-outeroverlay.left-overlay .carousel-overlay
	{
		left: 0;
		background-image: url('/images/arrowleft.png');
	}
	article.carousel .carousel-outeroverlay.right-overlay .carousel-overlay
	{
		right: 0;
		background-image: url('/images/arrowright.png');
	}
	
	article.carousel .carousel-outeroverlay:hover
	{
		opacity: 0.3;
	} 


	
	@media (max-width: 1000px)
	{
		article.colbased article,
		article.colbased .inline-columns .captionside.outer,
		article.colbased .inline-columns .contentside.outer
		{
			width: auto !important;
			padding: 10px;	
		}
		article.colbased .inline-columns
		{
			text-align: center;
		}
		article.carousel ul.carouselselector
		{
			display: none;
		}
	}