.hero {
	position: relative;
}

.hero * {
	color: #fff;
}

.hero-img {
	position: relative;
	height: 100%;
	width: 100%;
	z-index: 1;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
	pointer-events: none;
}

.hero-blend {
    mix-blend-mode: multiply;
    opacity: 1;
}

.hero-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 3;
	pointer-events: none;
	opacity: 1;
}

.hero.bg-aegean .hero-overlay,
.hero.bg-aegean .hero-bg-overlay {
	background-color: #a9cbca;
}

.hero.bg-black .hero-overlay,
.hero.bg-black .hero-bg-overlay {
	background-color: #000;
}

.hero.bg-blush .hero-overlay,
.hero.bg-blush .hero-bg-overlay {
	background-color: #f5c69f;
}

.hero.bg-dust .hero-overlay,
.hero.bg-dust .hero-bg-overlay {
	background-color: #b8b4b1;
}

.hero.bg-graphite .hero-overlay,
.hero.bg-graphite .hero-bg-overlay {
	background-color: #565b6e;
}

.hero.bg-orange .hero-overlay,
.hero.bg-orange .hero-bg-overlay {
	background-color: #f4927d;
}

.hero.bg-sand .hero-overlay,
.hero.bg-sand .hero-bg-overlay {
	background-color: #f6eae1;
}

.hero.bg-steal .hero-overlay,
.hero.bg-steal .hero-bg-overlay {
	background-color: #adb5c1;
}



html.loaded .hero-bg-overlay  {
	animation: hero-bg-hide 3s ease 4s forwards;
}

@keyframes hero-bg-hide {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.hero-circle-wrap {
	position: absolute;
	z-index: 4;
}

.hero-circle-wrap.top {
	top: 0;
	right: 0;
}

.hero-circle-wrap.bot {
	bottom: 0;
	left: 0;
}

.hero-circle-wrap.bot .hero-circle-ico {
	background-position: bottom left;
}

/*
.hero .hero-circle-wrap.bot .hero-circle-ico {
	transform: rotate(-95deg);
    transform-origin: left bottom;
}
*/

/*
.hero .hero-circle-wrap.bot.aos-animate .hero-circle-ico {
	transform: rotate(0deg);
}
*/

.hero-circle-wrap.top .hero-circle-ico {
	background-position: top right;
}

.hero-circle-ico {
	height: 50vw;
    width: 50vw;
}

.hero .hero-circle-ico {
	transition-delay: 2s;
	transition-duration: 2s;
}

.hero-circle-ico.blur {
	opacity: 0.5;
}

.hero-semicircle-wrap {
	position: absolute;
	z-index: 5;
}

/*
.hero-semicircle-wrap {
    top: 0;
    left: 0;
	height: 100%;
	width: 100%;
}
*/

.hero-semicircle-wrap.top {
    top: -15vw;
    right: -10vw;
}

.hero-semicircle-wrap.bot {
	bottom: -15vw;
	left: -10vw;
}

.hero-semicircle-ico {
    height: 55vw;
    width: 100vw;
}

.hero-semicircle-wrap svg {
	height: 55vw;
    width: 100vw;
}

.hero-bg-cut-oval {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 3;
}

.hero-bg-cut-oval-ico {
	position: absolute;
	height: 200%;
	width: 200%;
	transform: translate(-50%,-50%);
	background-size: 200%;
}

.hero-bg-cut-oval-ico.top {
	top: 30%;
	left: 60%;
/*	background-image: url(../img/svg/Orbis-upOrange-1.svg);*/
}

.hero-bg-cut-oval-ico.bot {
	top: 70%;
	left: 40%;
/*	background-image: url(../img/svg/Orbis-DownSteal-1.svg);*/
}

.hero.bg-aegean .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upAegean-1.svg);
}

.hero.bg-aegean .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downAegean-1.svg);
}

.hero.bg-black .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upBlack-1.svg);
}

.hero.bg-black .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downBlack-1.svg);
}

.hero.bg-blush .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upBlush-1.svg);
}

.hero.bg-blush .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downBlush-1.svg);
}

.hero.bg-dust .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upDust-1.svg);
}

.hero.bg-dust .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downDust-1.svg);
}

.hero.bg-graphite .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upGraphite-1.svg);
}

.hero.bg-graphite .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downGraphite-1.svg);
}

.hero.bg-orange .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upOrange-1.svg);
}

.hero.bg-orange .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downOrange-1.svg);
}

.hero.bg-sand .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upSand-1.svg);
}

.hero.bg-sand .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downSand-1.svg);
}

.hero.bg-steal .hero-bg-cut-oval-ico.top {
	background-image: url(../img/svg/Orbis-upSteal-1.svg);
}

.hero.bg-steal .hero-bg-cut-oval-ico.bot {
	background-image: url(../img/svg/Orbis-downSteal-1.svg);
}



.hero-content-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.hero-content-wrap .container {
	height: 100%;
}

.hero-text-wrap {
	width: 100%;
	z-index: 100;
}

.hero-text {
	position: relative;
	padding: 0 25px;
}

.hero h1 {
	color: #fff;
	-webkit-text-fill-color: transparent; 
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	position: relative;
}

.hero h1 span {
	position: relative;
}

.hero h1 span::after {
	content: attr(data-text);
	position: absolute;
	color: #fff;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	overflow: hidden;
	-webkit-text-fill-color: #fff;
}

.hero .hero-text.aos-animate h1 span::after {
	opacity: 1;
	transition-duration: 2s;
	transition-delay: 3s;
}



/*
.hero h1 span {
	color: #fff;
	-webkit-text-fill-color: transparent; 
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	transition: 2s;
}
*/

.hero h2 {
	color: #fff;
	font-size: 5.5em;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%,-50%);
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	opacity: 0;
}

.hero h2 span {
	-webkit-text-fill-color: transparent; 
}

html.pg-loaded .hero h2 {
	opacity: 1;
}

.hero-text-left-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	pointer-events: none;
}

.hero-text-left {
	position: absolute;
	left: 100px;
	bottom: -25px;
	transform: rotate(-90deg);
    transform-origin: top left;
	opacity: 0.5;
	pointer-events: all;
}

.hero-sidetext-wrap .line {
	height: 1px;
	width: 15vh;
	background-color: #fff;
	align-self: center;
}

.hero-sidetext-wrap h4 {
	letter-spacing: 0.1em;
	margin-left: 15px;
}

.hero-text-right-wrap {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	pointer-events: none;
}

.hero-text-right {
    position: absolute;
	top: 0;
    right: 100px;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    width: 100vh;
    padding-left: 100px;
    overflow: hidden;
	pointer-events: all;
}

.hero-scroll-wrap {
    overflow: hidden;
	width: 270px;
}

.hero-scroll-wrap h6 {
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 0.6em;
    position: relative;
	margin: 0 20px;
}

/*
.hero-scroll-wrap h6::before, 
.hero-scroll-wrap h6::after {
    content: '';
    width: 200px;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 9px;
}

.hero-scroll-wrap h6::before {
	left: calc(100% + 10px);
}

.hero-scroll-wrap h6::after {
	right: calc(100% + 10px);
}*/

.hero-scroll-wrap .line {
	min-width: 200px;
    height: 1px;
	background: #fff;
	align-self: flex-end;
	margin-bottom: 2px;
}

.hero-text-right-wrap.aos-animate .hero-scroll-wrap .line:first-child {
	animation: anim-scroll 6s ease 5s infinite;
}

.hero-bg-blog {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(50% + 250px);
    z-index: 5;
    overflow: hidden;
    border-radius: 0 0 600px 0;
}

.hero-bg-blog-icon {
	position: absolute;
	bottom: 0px;
    right: 0;
    width: 250px;
    height: 500px;
/*	background-position: top right;*/
	background-position: bottom right;
	background-image: url(../img/svg/ico-blog-hero.svg);
}

.hero-blog .hero-text-wrap {
    width: 60%;
    z-index: 100;
    left: 0;
	-webkit-transform: translate(0%, -50%);
    -moz-transform: translate(0%, -50%);
    -o-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.hero-blog .hero-text {
	padding: 0 50px;
}

.hero-blog.hero h1,
.hero-blog.hero h2 {
	position: relative;
	top: auto;
	left: auto;
	transform: translate(0,0);
	text-align: left;
	opacity: 1;
}

.hero-blog.hero h3 {
	padding-left: 100px;
}

.hero-blog .hero-sidetext-wrap .line {
    width: 300px;
}

.hero-blog .hero-sidetext-wrap h5 {
	color: #000;
	margin-left: 15px;
	letter-spacing: 0.1em;
}

.hero-blog .jointeam-hero-icon {
	position: relative;
	padding: 25%;
	background-position: left;
}

.hero-blog .jointeam-hero-title-wrap {
	position: absolute;
	bottom: 50px;
	right: 100px;
/*	width: 600px;*/
	width: 50%;
	background-color: rgba(255,255,255,0.8);
	padding: 50px;
	border-radius: 100px 0 0 0;
	z-index: 10;
}

/*
.hero-blog .jointeam-hero-title {
	position: relative;
	z-index: 11;
}
*/

.hero-blog .jointeam-hero-title h1 {
	font-size: 2em;
	font-family: 'Poppins-LightItalic';
	color: #000;
	-webkit-text-fill-color: #000;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000;
	text-transform: inherit;
	line-height: 150%;
}

.hero-blog .jointeam-hero-title h1 b,
.hero-blog .jointeam-hero-title h1 strong {
	font-family: 'Poppins-BoldItalic';
	text-transform: uppercase;
}

.jointeam-hero-extra-icon-wrap {
	position: absolute;
	bottom: -100px;
	right: 0;
}

.jointeam-hero-extra-icon {
	height: 450px;
	width: 450px;
	background-position: right;
	background-image: url(../img/svg/ico-jointteam-hero-1.svg);
}




@keyframes anim-scroll {
	0% {
		margin-left: 0px;
	}
	50% {
		margin-left: -205px;
	}
/*
	60% {
		margin-left: -205px;
	}
*/
	100% {
		margin-left: -0px;
	}
}





/* --------------------------
  Keyframes
--------------------------- */

@keyframes offset {

  100% {
    stroke-dashoffset: 0;
  }

}

/*
@keyframes fill-it {

  100% {
    fill: #ffffff;
  }

}
*/


/* --------------------------
  SVG Styles
--------------------------- */

.oval-1 {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 2942.80029296875;
  stroke-dashoffset: 2942.80029296875;
  
  animation: offset 5s linear 2s forwards;
}

.oval-2 {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 2942.57958984375;
  stroke-dashoffset: 2942.57958984375;
  
  animation: offset 5s linear 2s forwards;
}







/*========== RESPONSIVENESS ==================*/

@media screen and (max-width: 1320px) {
	
	.hero-bg-blog {
		border-radius: 0 0 500px 0;
	}
	
	.hero-blog .hero-text-wrap {
		width: 70%;
	}
	
	.hero-blog .jointeam-hero-title-wrap {
		padding: 25px 50px;
	}
	
	.jointeam-hero-extra-icon {
		height: 350px;
		width: 350px;
	}
	
}



@media screen and (max-width: 1024px) {
	
	.hero-text-left {
		left: 50px;
	}
	
	.hero-text-right {
		right: 50px;
		padding-left: 50px;
	}
	
	.hero-bg-blog {
		border-radius: 0 0 400px 0;
	}
	
	.hero-blog .hero-text-wrap {
		width: 80%;
	}

	.hero-blog.hero h3 {
		padding-left: 50px;
	}
	
	.hero-blog .jointeam-hero-title-wrap {
		bottom: 25px;
		right: 50px;
		padding: 25px;
		border-radius: 50px 0 0 0;
	}
	
	.jointeam-hero-extra-icon-wrap {
		bottom: -50px;
	}
	
	.jointeam-hero-extra-icon {
		height: 250px;
		width: 250px;
	}
	
	.hero-blog .jointeam-hero-title h1 {
		font-size: 1.5em;
	}
	
	.hero h1 span::after {
		display: none;
	}
	
	.hero h1 span {
		-webkit-text-fill-color: #fff;
	}
	
	.hero-bg-cut-oval {
		display: none;
	}
	
}



@media screen and (max-width: 768px) {
	
	.hero-text-left {
		left: 25px;
		width: 300px;
	}
	
	.hero-text-right {
		right: 25px;
		padding-left: 25px;
	}
	
	.hero-sidetext-wrap h4 {
		font-size: 1.4em;
	}

	.hero-scroll-wrap {
		width: 220px;
	}
	
	.hero-scroll-wrap .line {
		min-width: 165px;
	}
	
	@keyframes anim-scroll {
		0% {
			margin-left: 0px;
		}
		50% {
			margin-left: -180px;
		}
		100% {
			margin-left: -0px;
		}
	}
	
	.hero-bg-blog {
		width: 100%;
	}
	
	.hero-blog .hero-text-wrap {
		width: 100%;
	}
	
	.hero-blog .hero-text {
		padding: 0;
	}
	
	.hero-blog.hero h3 {
		padding-left: 25px;
	}
	
	.hero-bg-blog {
		border-radius: 0;
	}
	
	.hero-blog .hero-text-left {
		bottom: 25px;
		width: auto;
		left: 0;
		transform: rotate(0deg);
	}
	
	.hero-blog .hero-sidetext-wrap .line {
		width: 25px;
	}
	
	.jointeam-hero-extra-icon {
		display: none;
	}
	
	.hero-blog .jointeam-hero-title-wrap {
		bottom: 0;
		right: 0;
		width: 100%;
		border-radius: 0;
		padding: 25px;
	}
	
	.hero-blog.hero-jointeam .hero-text-left {
		display: none;
	}
	
}