/* **************************** CONTENT GENERAL **************************** */
/* see frontpage.css for declarations specifically relating to the front page */
/* most general content declarations can be found in ../editor-style-shared.css */
#content {
  margin-top: 0px;
  margin-bottom: 0px; }

/*HT changed*/
/* easy sidebar column support */
.content_main {
  float: left;
  width: 100%; }

/*HT changed*/
.front-page .content_main {
  float: none;
  width: 100%; }

.content_side {
  float: right;
  width: 28%; }

/* when there's no sidebar */
.stretch .content_main,
.content_main.stretch {
  float: none;
  width: 100%; }

.stretch .content_side,
.content_side.stretch {
  display: none; }

a.post-edit-link {
  text-transform: uppercase;
  font-size: .85em;
  color: #000;
  text-decoration: none;
  padding: 3px;
  margin: -3px; }

a.post-edit-link:hover {
  text-decoration: none !important;
  background-color: #000;
  color: #fff; }

a.post-edit-link:active {
  top: 1.5px; }

/* **************************** CONTENT FEATURE **************************** */
/* ***************************** BREADCRUMBS ****************************** */
.breadcrumbs {
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 25px; }

.breadcrumbs a {
  text-decoration: none;
  vertical-align: middle; }

.breadcrumbs a:hover {
  text-decoration: underline; }

.breadcrumbs .trail-end {
  vertical-align: middle; }

.breadcrumbs .sep {
  color: transparent;
  text-indent: -9999px;
  background-image: url("images/arrow.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  display: inline-block; }

/* **************************** DROPDOWN CONTENT *************************** */
.dropdown_content_heading {
  cursor: pointer;
  margin: 15px 0;
  max-width: 94%;
  /* stop dropdown arrow from being off content canvas */ }

.dropdown_content {
  display: none;
  margin: 0 0 15px 0; }

.dropdown_content_heading *:first-child {
  display: inline-block;
  /* make the :after arrow display at the end of the text, not the end of the line */
  position: relative;
  color: #ec5a1f;
  max-width: 100%;
  /* IE8 needs this for long headings */ }

.dropdown_content_heading *:first-child:after {
  content: "";
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 8px solid #000;
  border-top-color: inherit;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  right: -25px;
  top: 26%;
  -webkit-transition: -webkit-transform 0.3s ease-in;
  -moz-transition: -moz-transform 0.3s ease-in;
  -ms-transition: -ms-transform 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-in;
  transition: transform 0.3s ease-in; }

.dropdown_content_heading.active *:first-child:after {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); }

.dropdown_content_heading:hover *:first-child {
  color: #56585f; }

/* ****************************** GREYSCALE IMAGES ****************************** */
/* we have one method to support Firefox, Chrome, Safari, and IE6-9, and SVG's for IE10+ */
/* FIREFOX, CHROME, SAFARI, IE8-9 */
.greyscale-image-img {
  display: block;
  margin: 0 auto;
  /* greyscale */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome, Safari */
  /* opacity & transition */
  opacity: .5;
  -webkit-transition: all .6s ease;
  -moz-transition: all .6s ease;
  transition: all .6s ease;
  -webkit-backface-visibility: hidden;
  /* fix for potential transition flickering */
  backface-visibility: hidden; }

/* remove greyscale & opacity effect on hover  */
a:hover .greyscale-image-img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
  opacity: 1; }

/* old-IE opacity backup */
.greyscale-image-img {
  -ms-filter: "gray progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }

a:hover .greyscale-image-img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

/* IE10+ */
.greyscale-image-svg {
  display: none;
  text-align: center; }

/* wrapper required for IE8 to listen to display none */
.greyscale-image-svg svg {
  opacity: .5;
  transition: all .6s ease;
  backface-visibility: hidden;
  /* fix for potential transition flickering */
  margin: 0 auto; }

.greyscale-image-svg svg image {
  opacity: 1;
  transition: all .6s ease;
  backface-visibility: hidden; }

/* on hover, remove the opacity on the SVG and completely hide the greyscale overlay */
a:hover .greyscale-image-svg svg {
  opacity: 1; }

a:hover .greyscale-image-svg svg image {
  opacity: 0; }

/* FINALLY... show the correct item for the correct browser, by switching it around to the SVG if we're in IE & have support for both opacity & SVG filters */
.Explorer.mod-svgfilters.mod-opacity .greyscale-image-img {
  display: none; }

.Explorer.mod-svgfilters.mod-opacity .greyscale-image-svg {
  display: block; }

/* ********************************* CLIP PATHS ********************************* */
/*
	see http://caniuse.com/#feat=css-clip-path for latest clip-path support
	- as of writing, no support in IE at all, not even listed at https://status.modern.ie/
	- chrome uses -webkit-clip-path with an inline shape (also supports #anchor for inline but not external)
	- firefox only supports url(#anchor) (both inline and external)
	- safari uses -webkit-mask with an external url
	- use clip-path & mask for future compatibility
	and, be careful in chrome if combining backface-visibility, 3D transforms and clip-paths
*/
.home_page_section.panels .wrapper:nth-of-type(odd) .image {
  background-position: center left;
  -webkit-clip-path: polygon(0px 0px, 0px 65px, 110px 175px, 587px 175px, 420px 0px);
  /* Chrome */
  clip-path: polygon(0px 0px, 0px 65px, 110px 175px, 587px 175px, 420px 0px);
  /* FUTURE COMPAT */
  clip-path: url(clip-left.svg#svgClip);
  /* Firefox*/
  -webkit-mask: url(clip-left.svg);
  /* Safari */
  mask: url(clip-left.svg);
  /* FUTURE COMPAT */ }

.home_page_section.panels .wrapper:nth-of-type(even) .image {
  background-position: center right;
  -webkit-clip-path: polygon(0px 0px, 170px 175px, 587px 175px, 587px 110px, 477px 0px);
  /* Chrome */
  clip-path: polygon(0px 0px, 170px 175px, 587px 175px, 587px 110px, 477px 0px);
  /* FUTURE COMPAT */
  clip-path: url(clip-right.svg#svgClip);
  /* Firefox */
  -webkit-mask: url(clip-right.svg);
  /* Safari */
  mask: url(clip-right.svg);
  /* FUTURE COMPAT */ }

/* ***************** BACKUPS FOR NON SUPPORT ***************** */
/*	IE, at least up to 11, has no support for clip paths/masks at all, and has no public plans yet
	to support them. Modernizr doesn't help here, because IE technically supports them, just not 
	their application to elements. doi. So we're going to resort to browser detection...
*/
/* reduce widths because we can't overlap */
.mod-no-svgclippaths .home_page_section.panels .link,
.Explorer .home_page_section.panels .link {
  width: 98%; }

/* install triangles to at least still look decent */
.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(odd):before,
.Explorer .home_page_section.panels .wrapper:nth-of-type(odd):before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  border-bottom: 110px #fff solid;
  border-right: 110px transparent solid; }

.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(odd) .title:after
.Explorer .home_page_section.panels .wrapper:nth-of-type(odd) .title:after
.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(even) .title:before
.Explorer .home_page_section.panels .wrapper:nth-of-type(even) .title:before {
  display: none; }

.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(odd) .title,
.Explorer .home_page_section.panels .wrapper:nth-of-type(odd) .title {
  right: 0;
  padding-right: 20px; }

.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(even) .title,
.Explorer .home_page_section.panels .wrapper:nth-of-type(even) .title {
  left: 0;
  padding-left: 20px; }

/*.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(odd):after,
.Explorer .home_page_section.panels .wrapper:nth-of-type(odd):after {
	content: ""; position: absolute; z-index: 1;
	top: 0; right: 0;
	border-top: 185px #fff solid;
	border-left: 170px transparent solid;
}

.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(even):before,
.Explorer .home_page_section.panels .wrapper:nth-of-type(even):before {
	content: ""; position: absolute; z-index: 1;
	bottom: 0; left: 0;
	border-bottom: 185px #fff solid;
	border-right: 170px transparent solid;
}*/
.mod-no-svgclippaths .home_page_section.panels .wrapper:nth-of-type(even):after,
.Explorer .home_page_section.panels .wrapper:nth-of-type(even):after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  border-top: 110px #fff solid;
  border-left: 110px transparent solid; }

/* ************************ The end, thanks for visiting! *********************** */

/*# sourceMappingURL=content.css.map */