/* UNIVERSAL BOOTSTRAP CONTENT TYPES DOCUMENTATION CSS */



#hero-image {
    padding: 0;
    margin-bottom: 40px;
}


/* Two column layout styles */




@media screen and (min-width: 990px) {  
  .twoCol #main-wrapper {
      display: flex;
      flex-direction: row;
      gap: 2%;
	}
	.twoCol #main {
    	width: 70%;
	}
	.twoCol #sidebar-col {
    	width: 30%;
      	margin-top: 2em;
	}
}

/* @media screen and (max-width: 767px) { */

@media screen and (max-width: 989px) {  
  .twoCol #main-wrapper{
  flex-direction: column;
  }
	.twoCol #main {
    	width: 100%;
	}
	.twoCol #sidebar-col {
    	width: 100%;
      	margin-top: 2em;
	}
}

/* Universal BS - Hero image */   

#hero-image {
  	padding: 0;
}
  
.single-hero-image {
   height: 500px!important;
   display: block!important;
   background-size: cover!important;
   background-position: top center!important;
}
.single-hero-overlay {
   background-image: linear-gradient(rgba(70, 130, 180, .8), rgba(178, 34, 34, .8));
}
.single-hero-caption {
   font-size: 3rem;
   text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, .7);
   font-weight: 600;
   bottom: 0;
   top: 24vh;
}
   
@media screen and (max-width: 767px) {
.single-hero-caption {
   font-size: 1.5rem;
   text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, .7);
}
}

svg.three-d-text {
	font-family: 'Inter Medium', sans-serif;
	position: absolute; 
	top: 25vh;
}
svg.three-d-text text {
	text-transform: uppercase;
	animation: stroke 10s;
	animation-fill-mode: forwards;
	stroke-width: 1.5;
	stroke: #000000;
	font-size: 3.5rem;
}
@keyframes stroke {
	0%   {
		fill: rgba(0,0,0,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(0,0,0,0); stroke: rgba(255,255,255,1); }
	80%  {fill: rgba(0,0,0,0); stroke: rgba(255,255,255,1); stroke-width: 3; }
	100% {
		fill: rgba(255,255,255,1); stroke: rgba(255,255,255,1); 
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}   iphone 6