@media only screen and (max-width: 600px) {
	#hero-left{
			display: block;
			max-height: 400px;
			padding-bottom: 0px;
			margin-bottom: 0px;
	}
	#hero-right{
			margin-top: 210px;
			height: 300px;
			clear: left;
	}
	#hero1{
			padding-top: -30px;
			background-color: rgb(4, 30, 66);
			color: #FFFFFF;
			min-height: 410px;
			max-height: 570px;
			margin-bottom: 20px;
	}
	#hero1-text-container{
			float: left;
			margin-left: 20px;
			margin-top: 10px;
			margin-bottom: -10px;
	}
	#hero-title{
			font-size: 30px;
			font-weight: 300;
	}
	#hero-subtitle{
			color: #FFD500;
	}

	#hero1-img-container{
			clear: left;
			width: 50%;
			margin: -50px 0px 0px 12px;
	}
	
	#hero1-img{
			margin-top: 0px;
			object-fit: contain;
			width: 190%;
	}

	#hero2{
			width: 48%;
			max-height: 390px;
			float: left;
			background-color: #FFD500;
			margin-right: 2%;
	}
	#hero2-text-container{
			min-height: 200px;
			margin-left: 4px;
			margin-top: 4px;
	}
	#hero2-header{
			height: 130px;
			font-weight: 300;
			font-size: 26px;
	}
	#hero2-text{
			display: none;
	}
	#hero2-img-container{
			height: 340px;
			margin-top: -20px;
	}
	#hero2-img{
			margin-left: 40px;
			width: 50%;
	}
	#hero3{
			width: 48%;
			max-height: 390px;
			float: left;
			background-color: #A9ADD3;
			margin-left: 2%;
	}
	#hero3-text-container{
			min-height: 200px;
			margin-left: 4px;
			margin-top: 4px;
	}
	#hero3-header{
			height: 130px;
			font-weight: 300;
			font-size: 26px;
	}
	#hero3-text{
			display: none;
	}
	#hero3-img-container{
			margin-top: -20px;
			height: 300px;
	}
	#hero3-img{
			width: 100%;
	}
	
	#hero-carousel {
			margin-top: -30px;
			opacity: 0;
	}
	
	#hero-carousel-circles {
			text-align: center;
			color: grey;
			font-size: 30px;
	}

	.btn-hero::before{
			margin-left: -20px !important;
			margin-right: 20px !important;
	}

	.btn-hero:hover:before{
			background-color: white;
			border-color: white;
	}

	.btn-hero{
			margin-left: -8px !important;
			padding-top: 4px !important;
			max-height: 28px !important;
	}
	
	.btn--yellow{
			min-width: 150px;
			width: 150px;
			margin-left: 0px;
			margin-right: 0px;
			padding-left: 0px !important;
			padding-right: 0px !important;
	}
	
	.btn--blue{
			min-width: 150px;
			width: 150px;
			margin-left: 0px;
			margin-right: 0px;
			padding-left: 0px !important;
			padding-right: 0px !important;
	}
}

@media only screen and (min-width: 600px) {
	.layout {
			width: 100%;
			display: flex;
	}

	#hero-left{
			min-width: 55%;
			margin: 20px 0px 20px 20px;
	}
	.hero-left-med{
			max-width: 55% !important;
	}
	#hero-right{
			flex-grow: 1;
			margin: 20px 20px 20px 20px;
	}
	#hero1{
			min-height: 540px;
			background-color: rgb(4, 30, 66);
			color: #FFFFFF;
	}
	#hero1-text-container{
			float: left;
			width: 40%;
			margin-left: 20px;
			margin-top: 130px;
	}
	#hero-title{
			font-size: 36px;
			font-weight: 370;
	}
	#hero-subtitle{
			color: #FFD500;
	}

	#hero1-img-container{
			float: left;
			margin-right: -10px;
			width: 50%;
			padding: 0px 0px 0px 0px;
	}
	#hero1-img{
			margin-top: 100px;
			object-fit: contain;
			min-width: 200px;
			max-width: 110%;
			transform: translate(16px, 16px);
	}
	.hero1-img-med{
			transform: translate(0px, 80px) !important;
	}

	#hero2{
			flex-grow: 1;
			min-height: 220px;
			background-color: #FFD500;
			margin-bottom: 20px;
			padding: 20px 20px 20px 20px;
	}
	#hero2-text-container{
			float: left;
			width: 65%;
			margin-right: -20px;
	}
	#hero2-text {
			font-size: 16px;
			margin-bottom: 16px;"
	}
	.hero2-text-med {
			display: none;
	}
	.hero2-button-med{
			margin-left: 10px;
			margin-top: 40px;
			margin-left: -10px;
	}
	#hero2-header{
			font-size: 23px;
	}
	#hero2-img-container{
			float: left;
			width: 35%;
			padding: 0px 0px 0px 0px;
	}
	#hero2-img{
			float: right;
			object-fit: contain;
			max-width: 55%;
			margin-right: 13%;
			margin-top: -4%;
	}
	.hero2-img-med{
			transform: translate(40px, 0px) !important; 
			max-width: 80px !important;
	}
	#hero3{
			flex-grow: 1;
			min-height: 220px;
			background-color: #A9ADD3;
			padding: 20px 20px 20px 20px;
	}
	#hero3-text-container{
			float: left;
			width: 65%;
			margin-right: -20px;
	}
	#hero3-text {
			font-size: 16px;
			margin-bottom: 16px;"
	}
	.hero3-text-med {
			display: none;
	}
	
	#hero3-header{
			font-size: 23px;
			line-height: 1.6;
	}
	#hero3-img-container{
			float: left;
			width: 35%;
			padding: 0px 0px 0px 0px;
	}
	#hero3-img{
			float: right;
			object-fit: contain;
			max-width: 120%;
			margin-right: -20%;
			margin-top: -10%;
	}
	.hero3-img-med{
			transform: translate(40px, 0px) !important; 
			max-width: 160px !important;
	}
	.hero3-button-med{
			margin-left: -10px;
			margin-top: 20px;
	}
	
	#hero-carousel {
			position: absolute; 
			bottom: 0; 
			width: 100%; 
			height: 50px;
			opacity: 0;
	}
	
	#hero-carousel-circles {
			color: white;
			font-size: 30px;
			margin-left: 20px;
	}

	.btn-hero::before{
			margin-left: -20px !important;
			margin-right: 20px !important;
	}

	.btn-hero:hover:before{
			background-color: white;
			border-color: white;
	}

	.btn-hero{
			padding-top: 8px !important;
			max-height: 40px !important;
	}
}