/*********************** MARGINS ***********************/

.neg-marg-top-1 {
	margin-top: -2rem;
}

/*********************** TYPE EFFECTS ***********************/

.whistle-grad-text {
  background: var(--gt-grad-whistle);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.whistle-gold-text {
  background: var(--gt-grad-gold-whistle);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.horizon-grad-text {
  background: var(--gt-grad-horizon);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blue-grad-text {
  background: var(--gt-blue-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-grad-text {
  background: var(--gt-grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-glow {
	text-shadow: 0 0 8px rgba(255, 255, 255, .85);
}

.hidden-text {
	height: 0;
	width: 0;
	opacity: 0;
}


/*********************** BACKGROUNDS ***********************/

.bg-half-techgold-grad {
	background: linear-gradient(top, white 0%, white 50%, #BFB37C 50%, #B3A369 100%);
  background: -moz-linear-gradient(top, white 0%, white 50%, #BFB37C 50%, #B3A369 100%);
  background: -webkit-linear-gradient(top, white 0%, white 50%, #BFB37C 50%, #B3A369 100%);
}

.bg-topgap-techgold-grad {
	background: linear-gradient(top, white 0%, white 20%, #BFB37C 20%, #B3A369 100%);
  background: -moz-linear-gradient(top, white 0%, white 20%, #BFB37C 20%, #B3A369 100%);
  background: -webkit-linear-gradient(top, white 0%, white 20%, #BFB37C 20%, #B3A369 100%);
}

.bg-half-techgold-grad.bg-stripes::after ,
.bg-topgap-techgold-grad.bg-stripes::after {
    content: ' ';
    background: url('../images/stripes-bg-tile-white.svg');
    background-repeat: repeat;
    background-size: auto;
    background-repeat: repeat;
    background-size: auto .9rem;
    border: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .2;
}

.z-top {
	position: relative;
	z-index: 9999;
}


.bg-topgap:before {
	background: #fff;
	width: 100%;
	height: 35%;
  content: "";
  position: absolute;
  top: 0;
}
/***********************Graphic Accents ***********************/


.colorbar {
  content: ' ';
  background: url('../images/colorbar.png');
  background-repeat: repeat-x;	
  background-size: auto 100%;  
  min-height: 4px;
}

.icon {
	max-width: 65px;
	padding: 0 .5rem;
}

.chevron-icon {
	content: url("../images/chevron-gold.svg");
	width: 10px;
	float: left;
	top: 0;
	bottom: 0;
	margin: auto;
	margin-right: .5rem;
}
  
/*********************** ANIMATIONS ***********************/


.animation-container {
		overflow: hidden;
		max-height: 100%;
		max-width: 100%;
		position: relative;
}

.whistle-gradient-drift {
	background: var(--gt-grad-whistle);
	width: 200%;
	height: 100%;
  top: 0;
  position: absolute;	
	animation: driftright 8s ease-in-out infinite alternate;
} 
   
@keyframes driftright {
    0% { left: 0%; opacity: 1;}
    35% { left: -50%; opacity: 1;}
    70% { left:  -100%; opacity: 1;}
    100% { left:  0%; opacity: 1;}
}
	
	
	

/*********************** RESPONSIVE VIDEO ***********************/

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*********************** BUZZGOLD CORNERS ***********************/

.corner-frame {
	display: flex;
	flex-direction: row;
	justify-content: flex-center;
	width: 100%;
}

.corner-frame .frame-left {
	border-top: 4px solid #ebb211;
	border-left: 4px solid #ebb211;
	content: " ";
	padding: 1rem;
    flex: 1 0px;
 	margin-top: 1rem;   
}

.corner-frame .frame-right {
	border-top: 4px solid #ebb211;
	border-right: 4px solid #ebb211;
	content: " ";
	padding: 1rem;
    flex: 1 0px;
	margin-top: 1rem;
}

.corner-frame .frame-bot-left {
	border-bottom: 4px solid #ebb211;
	border-left: 4px solid #ebb211;
	content: " ";
	padding: 1rem;
    flex: 1 0px;
 	margin-top: 1rem;   
}

.corner-frame .frame-bot-right {
	border-bottom: 4px solid #ebb211;
	border-right: 4px solid #ebb211;
	content: " ";
	padding: 1rem;
    flex: 1 0px;
	margin-top: 1rem;
}

.corner-frame .frame-content {
	padding: 0 2rem;
}

.corner-left-small, .corner-right-small {
	margin-bottom: 2rem;
}


.corner-left-small {
	position: relative;
	height: 0;
	width: 0;
	margin-top: 1rem;
}

.corner-left-small::before {
    content: "";
    position: absolute;
    height: 1.75rem;
    width: 1.75rem;
    display: inline-block;
    top: -10px;
    left: -20px;
    border-top: 4px solid #ebb211;
    border-left: 4px solid #ebb211;
    margin-top: 5px;
}

.corner-right-small:after {
    content: "";
    position: relative;
    display: inline-block;
    top: 16px;
    left: -3px;
    height: 1.5rem;
    width: 1.5rem;
    border-bottom: 4px solid #ebb211;
    border-right: 4px solid #ebb211;
    margin-top: 5px;
}


.corners-top {
	display: inline-block;
	position: relative;
	padding: 0 1.5rem;
}

.corners-top:before {
    content: "";
    position: absolute;
    height: 1.75rem;
    width: 1.75rem;
    top: -20px;
    left: 0;
    border-top: 4px solid #ebb211;
    border-left: 4px solid #ebb211;
    margin-top: 5px;
}

.corners-top:after {
    content: "";
    position: absolute;
    bottom: -10px;
	left: 93%;
    height: 1.5rem;
    width: 1.5rem;
    border-bottom: 4px solid #ebb211;
    border-right: 4px solid #ebb211;
    margin-top: 5px;	
}


.buzzline-vert::before {
	position: absolute;
	left: 0;
    width: 2px;
    display: inline-block;
    content: " ";
    padding: 3rem .5rem;
    height: 100%;
    border-left: 1.5px dotted #EEB211;
}

.colorline {
  content: ' ';
  background-image: url('../images/colorbar.png');
  background-repeat: repeat-x;
  background-position: center; 
  background-size: 50% auto;
  border: 0;
  width: 100%;
  height: .25rem;
}

.display-5 {
	font-size: 3.7rem;
}

.gold-dash {
    border-bottom: 2px solid #ebb211;
    width: 100%;	
    height: 1px;
    margin-bottom: 10px;
}

 /*********************** TRANSITION GRAPHICS ***********************/
 
 .white-notch {
	 width: 0;
	 height: 0;
	 margin: 0 auto;
	 border-top: 40px solid #ffffff;
	 border-left: 70px solid transparent;
	 border-right: 70px solid transparent;
	 position: relative;
	 transform: 
 }
 

 /*********************** POSITIONING ***********************/
 
.position-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	margin-bottom: 3rem;
}


 /*********************** OVERLAY SYSTEM ***********************/
 
.overlay-wrapper {
	position: relative;
}

.overlay-half {
	width: 50%;	
}

.overlay-third {
	width: 30%;
}

.overlay-top {
	position: absolute;
	top: 0;
	z-index: 999;
}

.overlay-bottom {
	position: absolute;
	bottom: 0;
	z-index: 999;
}

.overlay-left{
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	z-index: 999;
}

.overlay-right {
	position: absolute;
	right: 0;
	z-index: 999;
}

.overlay-white {
	background: rgba(255, 255, 255, .75);
}

.hover-slide-left {
	width: 125%;
	transition: 0.5s ease-in-out;	
}

.hover-slide-left:hover {
	transform: translate(-2rem);
	background: rgba(255, 255, 255, .9);
}


 /*********************** WIDTHS ***********************/

.w-30 {
	width: 30%;
}

.w-40 {
	width: 40%;
}

 /*********************** WIDTHS ***********************/
 
 
 
 /*********************** CINEMAGRAPH ***********************/
  
div.sprite {
  margin: 0 auto;
  width: 100%;
  height: 0;
  padding-bottom: 40%;
  background-position: 0%;
  display: block;
}

	div.sprite30 {
	    background-image: url("../images/gt_sprite.jpg");
	  background-size: 3000%;
	  animation: loop30 5s steps(30) infinite;
	}        
	    @keyframes loop30 {
	        0% {background-position: 0%;}
	        30% {background-position: 0%;}                    
	        100% {background-position: -3000%;}
	    }

	div.sprite20 {
	    background-image: url("../images/ants_sprite.jpg");
	  background-size: 2000%;
	  animation: loop20 3s steps(20) infinite;
	}       
	    @keyframes loop20 {
	        0% {background-position: 0%;}                  
	        100% {background-position: -2000%;}
	    }
	
	div.sprite10 {
	    background-image: url("../images/eclipse_sprite.jpg");
	  background-size: 1000%;
	  animation: loop10 2.5s steps(10) infinite;
	}       
	    @keyframes loop10 {
	        0% {background-position: 0%;}
	        40% {background-position: 0%;}                   
	        100% {background-position: -1000%;}
	    }

 /*********************** OVERLAYS ***********************/
 
.overlay-outter-wrapper {
	position: relative; 
 }
 
.overlay-inner-wrapper {
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  margin: auto;
	top: 50%;
	transform: translateY(-50%); 
	padding: 2rem;   
	min-height: 30%;
	min-width: 50%;
}

.overlay-center {
	top: 50%;
	transform: translateY(-50%);	
}

.overlay-left {
	left: 0;
	right: auto;
}

.overlay-right {
	right: 0;
	left: auto;
}

.overlay-top {
	top: 0;
	bottom: auto;
	transform: none;
}

.overlay-bottom {
	top: auto;
	bottom: 0;
	transform: none;
}


@media (max-width: 768px) {
	.overlay-white {
		padding: .5rem !important;
	}
	.overlay-third h2 a {
		font-size: 1.5rem;
	}
	.border-left-md {
		border-left: 1px solid #dee2e6 !important;
	}
}

@media (max-width: 576px) {
	.overlay-relative-small {
	  position: relative;
	}
	.overlay-third {
		width: 100%;
		position: relative;
		padding: 1rem;
		display: flex;
	}
	.hover-slide-left {
		max-width: 100%;
	}
	.hover-slide-left:hover {
		transform: translate(0rem);
	}
	.overlay-white {
		padding: .25rem 2rem !important;
		border-bottom: 1px solid var(--gt-pimile);
	}
	.overlay-white:hover {
		background: var(--gt-pimile-light) !important;
	}
	.brand-intro.text-right {
		text-align: left !important;
	}
}


 /*********************** HEIGHT TOOLS ***********************/
 
 .h-15 {
	height: 15%;
 }