/***************** FOR STYLE GUIDE PAGES *****************/

.pattern-diagram .container,
.pattern-diagram .container-fluid {
  border: 2px solid rgba(0,0,0,.2);
}

.pattern-diagram .row {
  border: 2px dashed rgba(0, 155, 255, .6);
}

.pattern-diagram div[class^="col"] {
  border: 1px dashed rgba(255, 0, 0, .6);
}

/*
div[class^="col"] {
  border: 1px dashed rgba(255, 0, 0, .6);
}
*/
/***************** ICONS *****************/

.fa, .far, .fas, .fab {
  padding: 0 .3rem;
  font-size: inherit;
  text-align: center;
  text-indent: 0;
}

.fa.gold,
.far.gold,
.fas.gold,
.fab.gold {
  color: var(--gt-gold);
}

.med-icon {
	font-size: 1.5rem;
}

.large-icon {
	font-size: 2rem;
}

.xl-icon {
	font-size: 3rem;
}

/***************** HR *****************/

hr {
  margin: .75rem 0;
}

hr.stripes {
  content: ' ';
  background: url('../images/stripes2.svg');
  background-repeat: repeat-x;
  background-size: auto 120%;
  height: 20px;
  border: 0;
}

.bg-primary hr.stripes {
  background: url('../images/stripes_white.svg');
}

hr.gray {
  border:0;
  border-top: 12px solid var(--gt-pimile-med);
}

hr.gold {
  border:0;
  border-top: 10px solid var(--gt-gold);
}

hr.gold-gradient-bar {
  border:0;
  height: 10px;
  background: var(--gt-gold-grad);
}

hr.light,
hr.white {
  border:0;
  border-top: 1px solid #FFF;
}

hr.buzzdots {
  border:0;
  border-top: 2px dotted var(--gt-buzzgold);
}

hr.gray-thin {
  border:0;
  border-top: 1px solid var(--gt-pimile-med);
}
/***************** IMAGES *****************/

img {
  width: 100%;
  height: auto;
  /*padding: .5rem 0;*/
}

img + *:first-of-type {
	margin-top: .5rem;
}

img.shadowframe {
	border: 8px solid #ffffff;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
}

img.whiteborderframe {
	border: 8px solid #ffffff;
}

/***************** DESIGN STYLES and EXTRA STUFF *****************/

.bg-tile {
	min-height: 10rem;
}

.bg-dotgrid {
  content: ' ';
  background-image: url('../images/dotgrid.svg');
  background-repeat: repeat;
  background-size: 12rem auto;
  width: 100%;
  border: 0;
}

.bg-hive {
  content: ' ';
  background: url('../images/hive.svg');
  background-repeat: repeat;
  background-size: 11rem auto;
  width: 100%;
  border: 0;
}

.bg-hive-white {
  content: ' ';
  background: url('../images/hive_white.svg');
  background-repeat: repeat;
  background-size: 11rem auto;
  width: 100%;
  border: 0;
}

.bg-stripes {
  content: ' ';
  background: url('../images/stripes-bg-tile.svg');
  background-repeat: repeat;
  background-size: auto .9rem;
  border: 0;
}

.bg-stripes-white {
  content: ' ';
  background-image: url('../images/stripes-bg-tile-white.svg');
  background-repeat: repeat;
  background-size: auto .9rem;
  border: 0;
}

.bg-stripes-fade {
  content: ' ';
  background: url('../images/stripes-bg-tile-fade2.svg');
  background-repeat: repeat-x;
  background-size: auto 30rem;
  border: 0;
}

.bg-stripe-light-2 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPjxwYXRoIGQ9J00tMiAxMEwxMCAtMlpNMTAgNkw2IDEwWk0tMiAyTDIgLTInIHN0cm9rZT0nI2YzZjBlZicgc3Ryb2tlLXdpZHRoPScxJy8+PC9zdmc+);
}

.bg-stripe-light {
    background-image: url('../images/stripes-seamless.svg');
    background-size: 50px 43.3px;
}

.bg-stripe-pimile {
    background-image: url('../images/stripes-seamless-pimile.svg');
    background-size: 40px auto;
}

.bg-rhombosia {
  background-image: url('../images/rhombosia-background.png');
  background-repeat: repeat;
	background-size: 80rem auto;
}

 .bg-rhombosia p {
	color: var(--gt-blktxt);
 }

.bg-rhombosia-color {
  background-image: url('../images/rhombosia-background-color.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  }

 .bg-cityscape {
	 background-image: url('../images/cityscape-gray-gold.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	content: ' ';
 }

 .bg-cityscape-white {
	 background-image: url('../images/cityscape-white.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	content: ' ';
 }

.bg-rhombosia-fade {
	background-image: url('../images/rhombalinefade.png');
  background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	content: ' ';
}

.bg-rhombosia-fade-color {
	background-image: url('../images/rhombalinefadecolor.png');
  background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	content: ' ';
}

.gold-underline {
	border-bottom: 1px dotted var(--gt-gold);
}

.gold-overline {
	border-top: 1px dotted var(--gt-gold);
}

.mt-1-neg {
	margin-top: -1rem;
}

.mt-2-neg {
	margin-top: -2rem;
}

.mt-2p5-neg {
	margin-top: -2.5rem;
}

.mt-3-neg,
.mt-3p5-neg {
	margin-top: -3.5rem;
}

.mt-4-neg {
	margin-top: -4rem;
}

.mt-5-neg {
	margin-top: -5rem;
}

.mb-2-neg {
	margin-bottom: -2rem;
}

.mb-3-neg {
	margin-bottom: -3.5rem;
}

@media (max-width: 575px) {
	.mt-3-neg {
	margin-top: 0;
}

	.mb-3-neg {
	margin-bottom: 0;
	}
}


/*** HEIGHT AND WIDTHS ***/

.h-115 {
	height: 115%;
}

.h-125 {
	height: 125%;
}

.h-150 {
	height: 150%;
}


/*** Z-INDEX ***/

.z-auto {
	z-index: auto;
}

.z-neg-1 {
	z-index: -1;
}

.z-0 {
	z-index: 0;
}

.z-1 {
	z-index: 1;
}

.z-2 {
	z-index: 2;
}

.z-99 {
	z-index: 99;
}

/******* OPACITY ******/

.opacity-80 {
	opacity: 0.8;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-20 {
	opacity: 0.2;
}


/*** Fun extras ***/

.bg-hexoutline {
  content: ' ';
  background-image: url('../images/tinyhexoutline.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  width: 3.5rem;
  height: 3.5rem;
}

.bg-hexoutline-med {
  content: ' ';
  background-image: url('../images/medhexoutline.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  width: 5rem;
  height: 5rem;
}

.bg-hexoutline-color {
  content: ' ';
  background-image: url('../images/medhexoutline-color.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  width: 3.5rem;
  height: 3.5rem;
}

.bg-angle-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}


.bg-angle {
  position: absolute;
  display: inline-block;
  padding-left: 40%;
  width: 50%;
  height: 100%;
  border-bottom: 1000px solid rgba(0, 0, 0, .05); /* borders are .6 ratio for 60deg angle */
  border-right: 600px solid transparent;  /* borders are .6 ratio for 60deg angle */
}

.bg-angle:before {
	display: inline-block;
	left: 0;
	content: " ";

	height: 100%;
	background: rgba(0, 0, 0, .05);
}


.bg-angle.dark-angle {
	border-bottom: 1000px solid rgba(0, 0, 0, .25); /* borders are .6 ratio for 60deg angle */
}

.rotate-90 {
	transform: rotate(-90deg);
	border: 1px dashed lime;
	height: auto;
	width: 100%;
}

.border-gold-grad {
	background: var(--gt-gold-grad);
	padding: .3rem;
	position: relative;
	z-index: 1;
}



/******* POSITIONING TOOLS ******/


.position-overlay-bottom {
	position: relative;
	z-index: 99999;
	margin-top: -.9rem;
}

.position-absolute-lg {
	position: absolute;
}

.position-relative-lg {
	position: relative;
}

@media (max-width: 991.98px) {
	.position-absolute-md {
	  position: absolute;
	}
	.position-relative-md {
		position: relative;
	}
}

@media (max-width: 767.98px) {
	.position-absolute-sm {
		position: absolute;
	}

	.position-relative-sm {
		position: relative;
	}
}


.position-absolute-vert-center {
	position: absolute;
	top: 50%;
  transform: translateY(-50%);
}

.position-absolute-horiz-center {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.position-absolute-center {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 50%;
  transform: translateY(-50%);
}

/******* CORNERS ******/

.corners {
  min-height: 75px;
  padding: 2.25rem;
}

.corners-repeated-lines {
	 mask-image: linear-gradient(135deg, transparent 1.25rem, gold 0), linear-gradient(-135deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(45deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(-45deg, transparent 1.25rem, gold 0);
	 mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
	 mask-repeat: no-repeat;
	 mask-size: 51% 51%;
	 -webkit-mask-image: linear-gradient(135deg, transparent 1.25rem, gold 0), linear-gradient(-135deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(45deg, transparent 0.5rem, gold 0, gold 0.75rem, transparent 0, transparent 1rem, gold 0, gold 1.25rem, transparent 0, transparent 1.5rem, gold 0), linear-gradient(-45deg, transparent 1.25rem, gold 0);
	 -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%;
	 -webkit-mask-repeat: no-repeat;
	 -webkit-mask-size: 51% 51%;
}

.corner-angles:before {
	content: "";
	display: inline-block;
	position: absolute;
	background: var(--gt-pimile);
	width: 30px;
	height: 30px;
	left: -2px;
	top: -2px;
	z-index: -1;
}

.corner-angles:after {
	content: "";
	display: inline-block;
	position: absolute;
	background: var(--gt-pimile);
	width: 30px;
	height: 30px;
	right: -2px;
	bottom: -2px;
	z-index: -1;
}


/******* dividers ******/

.side-lines {
	display: flex;
	justify-content: center;
}

.side-lines:before {
	height: 2px;
	width: 100%;
	display: block;
	content: "";
	position: absolute;
	background-color: var(--gt-pimile);
  top: .75rem;
  z-index: -1;
}

/******* EDITOR CLASSES ******/

.editor-gold-dots {
	border-bottom: 2px dotted #ebb211;
}

.editor-rhombosia-bg {
    background-image: url('../images/rhombosia-background.png');
    background-repeat: repeat;
	  background-size: 80rem auto;
    }

 .editor-gold-border {
    border: 1px solid #ebb211;
}


.overlay-left {
	position: absolute;
	z-index: 999;
	margin-left: -3rem;
	margin-top: 25%;
	border: 5px solid white;
	background: #FFF;
	height: 75%;
}