.hero {
	 height: 80vh;
	 position: relative;
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: center;
}
 .hero .relative {
	 position: relative;
	 height: 100%;
}
 .hero .hero-title-wrapper {
    max-width: 700px;
    padding-top: 40vh;
    padding-left: 3vw;
}
 .hero .hero-title-wrapper h1 {
	 font-size: 60px;
	 line-height: 1.3;
	 font-weight: 400;
	 color: #fff;
	 background: linear-gradient(90deg, #e95214, #cf3c00);
	 position: relative;
}
 @media only screen and (max-width: 800px) {
	 .hero .hero-title-wrapper h1 {
		 line-height: 60px;
	}
}
 .hero .hero-title-wrapper h1:after {
	 content: '';
	 background: #e95214;
	 position: absolute;
	 width: 100%;
	 left: -100%;
	 top: 0;
	 bottom: 0;
}
 .hero .hero-title-wrapper h1 span {
	 font-weight: bold;
}
 .hero .hero-subtitle {
	 color: #fff;
	 position: absolute;
	 bottom: 0;
	 left: 3vw;
}
 .hero .bg-img {
	 position: absolute;
	 width: 646px;
	 background-image: url(../images/hero-pattern.svg);
	 background-repeat: no-repeat;
	 background-size: contain;
	 z-index: 9;
	 right: 0;
	 top: 50%;
	 transform: translate(0, -30%);
	 height: 100%;
}
 @media only screen and (max-width: 800px) {
	 .hero .bg-img {
		 right: 50%;
		 top: 50%;
		 transform: translate(58%, -30%);
	}
}

 @media only screen and (max-width: 600px) {
 
	.hero .hero-title-wrapper {
	    padding-top: 30vh;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    padding-bottom: 60px;
	    z-index: 2;
	}

	.hero .hero-title-wrapper h1 {
        font-size: 34px;
        line-height: 1.2;
        padding: 20px 10px;
	}

	.hero .bg-img {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: auto;
	    transform: none;
	    opacity: 0.3;
	    top: auto;
	    z-index: 1;
	}

	.hero .wrap.relative {
	    position: relative;
	}

	.intro h2 {
    font-size: 30px;
}

 }