.product-item .main-image{
	position: relative;
}

.callout{
	background-color: white;
    color: #7C7C7C;
    padding: 1.5vw 2vw;
    border-radius: 15px;
    border: 2px solid #7C7C7C;
    min-width: 28%;
    position: absolute;
}

.callout-relative{
	position: relative !important;
	left: unset !important;
    right: unset !important;
    bottom: unset !important;
    top: unset !important;
    max-width: 70%;
    float: right;
}

.callout-outside-title-wrapper h2 sup{
	line-height: 1;
    font-size: 0.6em;
}

.callout-outside-title-wrapper{
	position: absolute;
	max-width: 40%;
	width: 40%;
}

.callout-outside-image-wrapper{
	position: absolute;
}

.callout-outside-title-wrapper h2{
	margin-top: 0px;
    font-size: min(2.5vw, 49px);
    margin-bottom: 1.7vw;
}

.callout h3{
	font-size: min(1.5vw, 32px);
	margin: 0 0 10px 0;
}

.callout ul{
	font-size: min(1.5vw, 32px);
    line-height: min(2vw, 38px);
	margin: 0;
	padding: 0 0 0 20px;
}

.callout li{
	padding-bottom: max(0.5vw, 7px);
}

.callout li:last-child{
	padding-bottom: 0px;
}

.callout-large ul{
	font-size: min(2vw, 32px);
	line-height: min(2vw, 32px);
	font-weight: bold;
}

.callout-large li{
	padding-bottom: 1vw;
}

.supporting-text{
	color: #7C7C7C;
	font-size: min(2vw, 40px);
}

.supporting-text .supporting-item{
	margin-bottom: 20px;
}

.divider{
	margin: 30px 0;
	height: 2px;
	width: 100%;
	background-color: #7C7C7C;
}

.product-1{
    margin-top: -9.2vw;
}

.product-1 .callout{
    bottom: -2.9vw;
    left: 10%;
}

.product-2{
	margin-top: -16vw;
}


.product-2 .main-image{
	text-align: right;
}

.product-2 .main-image img{
	position: relative;
    right: 10%;
    z-index: 1;
}


.product-2 .callout{
	text-align: left;
    right: 13%;
    bottom: -10.8vw;
    min-width: 25%;
}


.product-3 .main-image img{
	position: relative;
	z-index: 1;
}


.product-3 .callout{
	left: 5.5vw;
    top: 39%;
}

.product-3{
	margin-top: -3vw;
}

.product-1 .main-image{
	left: -2vw;
	position: relative;
	z-index: 1;
}

.product-1 .main-image img{
	z-index: 1;
	position: relative;
}

.product-4{
	margin-top: -15vw;
}

.product-4 .main-image img{
	z-index: 1;
	position: relative;
}

.product-5{
	margin-top: -5vw;
}

.product-5 .main-image{
	text-align: right;
}

.product-5 h2{
	color: white;
	font-size: min(4.5vw, 80px);
	line-height: min(4.8vw, 86px);
	font-weight: bold;
	position: absolute;
	left: 0%;
	bottom: 8%;
	text-transform: uppercase;
	margin: 0;
	text-align: left;
}

.product-4 .callout{
	left: 41vw;
	top: 35%;
	max-width: 520px;
}

.resource-tile-container{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 50px;
}

.resource-tile-container img{
	max-width: 100%;
	display: block;
}

.resource-tile-container a{
	display: block;
}


.resource-tile-container h5{
	color: white;
	font-weight: normal;
	text-align: center;
	font-size: min(1.7vw, 30px);
	margin: 15px 0 0 0;
}
.resource-tile-container .resource{
	flex: 0 0 31%;
}

.product-resources h4{
	color: white;
	text-transform: uppercase;
	font-size: min(2.5vw, 44px);
	margin: 0 0 30px 0;
}

.product-resources{
	margin-top: 1vw;
}

h1{
	color: white;
    width: 36vw;
    font-weight: bold;
    font-size: min(3.1vw, 65px);
    line-height: min(3.3vw, 68px);
    text-transform: uppercase;
    padding: 50px 0 0 0;
    margin: 0;
}

h1 img{
	display: block;
	margin-bottom: 25px;
}

h1 .h1-text{
	max-width: 29vw;
	display: block;
}

h1 sup{
	line-height: 1;
    font-size: 0.5em;
    position: relative;
    top: -12px;
}

.inline-main-h2 h2{
	color: B8B8B8;
	font-size: min(5vw, 92px);
    line-height: min(5vw, 95px);
	position: relative;
	font-weight: 300;
	margin: 0;
	text-transform: uppercase;
}

.inline-main-h2.inline-bold h2{
	font-weight: bold;
	color: white;
	margin-bottom: 60px;
}

.title-subtitle h2{
	text-align: center;
	color: B8B8B8;
	font-size: min(5vw, 81px);
    line-height: min(5vw, 86px);
	flex: 1;
	display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
	font-weight: 300;
	margin: 0;
	text-transform: uppercase;
}

.title-subtitle h2::before{
    content: "";
    position: absolute;
    left: 3%;
    top: 0;
    height: 180%;
    width: 100%;
    background-color: white;
    -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(13deg);
}

.title-subtitle h2 .h2-text{
	position: relative;
	transform: translateY(-20%);
}

.item-text{
	position: relative;
}

.title-subtitle{
	display: flex;
}

@media screen and (max-width: 1860px) {
  .product-1{
    margin-top: -10.5vw;
   }
}

@media screen and (max-width: 1810px){

	.product-1 .callout{
		position: absolute;
	    bottom: -6%;
	    left: 10%;
	}

	.product-3 .callout{
		left: 7%;
	    top: 37%;
	}

	.product-4 .callout{
		left: 46vw;
	}

	.product-4{
		margin-top: -16vw;
	}

	.product-5{
		margin-top: -8vw;
	}

}

@media screen and (max-width: 1600px){
	.angle-bg-2{
		background: linear-gradient(140deg, white 70vw, rgba(68, 152, 211, 0) calc(70vw + 1px), rgba(60, 136, 198, 0) calc(129vw)), url('bottom-lighter-gradient.png');
		background-size: cover;
    	background-repeat: no-repeat;
    	background-position: top right;
	}
}

@media screen and (max-width: 1200px){

	.supporting-text{
		font-size: 27px;
	}
	.callout-outside-image-wrapper{
		position: relative;
		width: 100%;
		max-width: 100%;
	}
	.callout-outside-title-wrapper{
		position: relative;
		max-width: 100%;
	}
	.callout-relative{
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}
	.angle-bg{
		display: none;
	}
	.callout-outside-title-wrapper h2{
		font-size: 34px;
		margin-bottom: 15px;
	}
	.inline-main-h2.mobile-margin{
		margin-top: 30px;
	}
	.inline-main-h2.inline-bold h2{
		margin-bottom: 30px;
	}
	.inline-main-h2 h2{
		font-size: 50px;
        line-height: 53px;
	}
	.inline-main-h2 h2 br{
		display: none !important;
	}
	h1{
		width: 100%;
	    background-color: #5c9bf4;
	    left: -40px;
	    position: relative;
	    padding-left: 40px;
	    padding-right: 40px;
	    font-size: 50px;
	    line-height: 52px;
	    padding-bottom: 40px;
	    padding-top: 40px;
	}
	h1 .h1-text{
		max-width: 100%;
	}
	h1 br, h2 br{
		display: none !important;
	}
	.h1-text img{
		width: 150px;
	}
	.title-subtitle h2{
		width: 100%;
	    left: -40px;
        text-align: left;
        padding-left: 40px;
        font-size: 53px;
        line-height: 55px;
        padding-top: 30px;
        padding-right: 40px;
        justify-content: left;
	}

	.title-subtitle h2 .h2-text{
		transform: none !important;
	}


	.title-subtitle{
		display: block;
	}

	.product-item .callout br, .product-item h2 br{
		display: none !important;
	}

	.product-1, .product-2{
		margin-top: 0px;
	}
	.product-3, .product-4, .product-5{
		margin-top: 20px;
	}
	.product-1 .main-image{
		left: 0px;
		text-align: left;
	}
	.product-1 .main-image img{
		max-width: 100%;
	}
	.product-2 .callout{
		right: 0px;
   		bottom: 0px;
	}
	.product-2 .main-image{
		text-align: center;
	}
	.product-2 .main-image img{
		max-width: 300px !important;
		right: 0px;
	}
	.product-3 .callout{
		left: 0px;
		top: 0px;
	}
	.product-4 .main-image img{
		max-width: 100% !important;
	}
	.product-4 .callout{
		left: 0px;
	}
	.product-5 h2{
		position: relative;
	    left: 0px;
	    bottom: 0px;
	    font-size: 40px;
	    line-height: 43px;
	}
	.product-1 .callout{
		position: relative;
        bottom: 0px;
        left: 0px;
	}
	.callout{
		position: relative;
		padding: 20px 25px;
	}
	.callout h3{
		font-size: 25px;
		line-height: 30px;
	}
	.callout ul{
		font-size: 23px;
		line-height: 28px;
	}

}

@media screen and (max-width: 800px){
	.resource-tile-container{
		display: block;
	}
	.product-resources h4{
		font-size: 34px;
	}
	.resource-tile-container img{
		width: 100%;
	}
	.resource-tile-container h5{
		font-size: 24px;
	}
	.resource-tile-container .resource{
		margin-bottom: 25px;
	}
	.resource-tile-container .resource:last-child{
		margin-bottom: 0px;
	}
}