/*--------------------------------------------------
	01. General Settings
---------------------------------------------------*/

.about_hover_sec h1 {
    text-align: center;
    color: #fff;
    font-family: 'basis_grotesque_promedium', sans-serif;
    margin-bottom: 25px;
    font-size: calc(1rem + 3.80vw);
    line-height: 110%;
    letter-spacing: 0px;
}


/*--------------------------------------------------
	Hover Reveal Image
---------------------------------------------------*/	
	
	.hover-reveal {
		position: fixed;
		width: 16vw;
		height: 24vw;
		pointer-events: none;
		opacity: 0;
		z-index:1;
	}
	
	.hover-reveal__inner, .hover-reveal__img {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.hover-reveal__img {
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
		width:100%;
		height: 100%;
		position:relative;
		display:block;
	}	
/*--------------------------------------------------
	Appearing Items
---------------------------------------------------*/	
	
	.has-hover-image {
		cursor:pointer;
		display:inline-block;
		position:relative;
	}
	
	span.has-hover-image::before {
		content: '';
		position: absolute;
		bottom: 1px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #fff;
		transform: scaleX(1);
		transform-origin: left;
		transition: transform .2s ease-out;
	}
	
	.light-content span.has-hover-image::before, .dark-section span.has-hover-image::before {
		background: rgba(255,255,255,1);
	}
	
	.light-content .light-section span.has-hover-image::before {
		background: rgba(0,0,0,1);
	}
  
    span.has-hover-image:hover::before {
		transform: scaleX(0);
		transform-origin: right;
	}
	
	span.has-hover-image .hover-reveal {
		width: 400px;
		height: 250px;
		left:0;
	}
	
	span.has-hover-image.vertical .hover-reveal {
		width: 300px;
		height: 400px;
		left:0;
	}