.intro {
	width: 100%;
	height: 580px;
	position: relative;
	background-size: cover;
	background-position: center;
}
.intro .overlay {
	display: block;
	background: #4F4138;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.74;
}
.intro .flex {
	justify-content: flex-end;
	position: relative;
	z-index: 2;
	color: white;
	padding-top: 111px;
}
.intro .flex .image-wrap {
	width: 310px;
	height: 389px;
	border: 10px solid white;
	transform: rotate(1deg);
	position: relative;
}
.intro .flex .image-wrap:before {
    content: "";
    display: block;
    background-image: url(../../assets/icons/utility/tape.png);
    background-size: contain;
    width: 172px;
    height: 95px;
    background-repeat: no-repeat;
    position: absolute;
    top: -43px;
    left: 11px;
    right: 0;
    margin: auto;
    z-index: 1;
}
.intro .flex .image-wrap img {
	    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;    
}
.intro .flex .right {
	    width: 519px;
    margin: 0 0 0 -3px;
}
.intro .flex .right h4 {
	    transform: rotate(-10deg);
    margin: 57px 0 31px 63px;
}
.intro .flex .right a {
	color: #F4EFE9;
	font-size: 13px;
	font-weight: 800;
}
.intro .flex .right ul  {
	border-top:1px solid white;
	list-style: none;
}
.intro .flex .right ul li {
	    border-bottom: 1px solid white;
    padding: 20px 20px 20px 127px;
	position: relative;
}
.intro .flex .right ul li::before {
  content: "";
  display: block;
  background-image: url(../../assets/icons/utility/bow.png);
  background-size: contain;
  width: 122px;
  height: 87px;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: -11px;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Initial visible dot on first li */
.intro .flex .right ul li.active::before {
  opacity: 1;
}
.intro .flex .right ul li a {
	    color: #F4EFE9;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
	transition: all 0.01s;
}
.intro .flex .right ul li a strong {
	    font-weight: 800;
    display: inline-block;
    margin-right: 13px;
}
.intro .flex .right ul li a:hover {
	text-decoration: underline;
	    font-style: italic;
}
.intro .flex .left {
	    width: 40%;
    text-align: center;
    padding: 165px 0 0;
}
.intro .flex .left h2 {
	font-weight: 100;
    font-family: 'Ethic Serif';
    letter-spacing: -0.01rem;
    margin: 0 0 9px;
}
.intro .flex .left h4 {
	font-family: 'HelveticaNeue';
	margin: 0;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05rem;
}
.intro .mobile-background {
	display: none;
}
@media all and (max-width:1380px) {
	.intro .flex .left {
		width: 35%;
	}
}
@media all and (max-width:1280px) {
	.intro .flex .right {
		width: 460px;
		margin: 0 0 0 -3px;
	}
	.intro .flex .right ul li {
		padding: 20px 20px 20px 83px;
	}
	.intro .flex .right h4 {
		margin: 57px 0 31px 33px;
	}
}
@media all and (max-width:1180px) {
	.intro .flex .left {
		width: 36%;
	}
	.intro .flex .right {
		width: 385px;
		margin: 0 0 0 -3px;
	}
	.intro .flex .right ul li {
		padding: 20px 20px 20px 32px;
	}
	.intro .flex .right h4 {
		margin: 57px 0 31px 61px;
	}
	.intro .flex {
		flex-wrap: nowrap;
	}
}
@media all and (max-width:830px) {
	.intro .flex {
		flex-wrap: nowrap;
		display: block;
		padding: 0;
	}
	.intro .flex .left {
		width: 100%;
		padding: 20px 0 0;
	}
	.intro .flex .image-wrap {
		margin: 23px auto 0;
	}
	.intro .flex .right {
		width: 100%;
		margin: 0;
	}
	.intro .flex .right h4 {
		margin: -25px 0 56px 61px;
	}
	.intro {
		width: 100%;
		height: 100%;
		position: relative;
		background-size: cover;
		background-position: center;
		padding: 0 0 30px;
	}
}
@media all and (max-width:600px) {
	.intro .flex .right h4 {
		margin: 1px 0 39px 35px;
	}
	.intro .flex .right ul li {
		padding: 20px 20px 20px 69px;
	}
	.intro .flex .image-wrap {
		width: 220px;
		height: 291px;
		border: 10px solid white;
		transform: rotate(1deg);
		position: relative;
	}
	.intro .mobile-background {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
		object-position: top center;
	}
	.intro .overlay {
		z-index: 1;
	}
	.intro {
		overflow: hidden;
	}
}