/*header styles*/
@media only screen and (min-width: 1200px) {
	.header .top-menu-container ul li a{
	 	color: #fff;
	}
	.scrolled .top-menu-container ul li a,
	.scrolled{
		color: #000;
	}
}

.hero{
	position: relative;
	height: 100vh;
	min-height: 800px; /* height it needs to function */
	/* max-height: 1200px; */
	background-color: #ff0033;
}

.hero .container{
	height: 100%;
}
.hero .container [class*="col-"]{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hero{
	--title-size: 64px;
	--gap-size: 12px;
	--bg-color: #000;
	--color: #fff;
	--offset: calc(var(--title-size) / 6.4);
	--spread: calc(var(--title-size) / 9.1);
	/* --mg-bottom: 25px; */
	--mg-bottom: 50px;
}

.hero .content-container,
.hero .image-container{
	padding-top: calc(var(--header-height));
}
p{
	/* font-size: 20px; */
	margin-bottom: 25px;
}

.hero .button-container{
	margin-top: 30px;
}
.hero .button-container li{
	list-style-type: none;
	float: left;
	display: block;
}
.hero .button-container li:nth-child(odd){
    clear: left;
}
.hero .button-container li a{
	font-size: 20px;
	margin-right: 25px;
	margin-top: 20px;
	/* margin-bottom: 10px; */
}

/* BOXXED */
.hero .button-container li:nth-child(odd) a{
	display: inline-block;
	text-decoration: none;
	background-color: #000;
	color: #fff;
	padding: 15px;
	border-radius: 2px;
}
.hero .button-container li:nth-child(odd) a:hover{
	background-color: #fff;
	color: #000;
}


/* UNDERLINE */
.hero .button-container li:nth-child(even) a{
	display: inline-block;
	border-bottom: 2px solid #fff;
	color: #fff;
	/* font-size: 20px; */
	text-decoration: none;
	padding: 15px 0;
}
.hero .button-container li:nth-child(even) a:hover,
.hero .button-container li:nth-child(even) a:active
{
	border-color: #000;
	color: #000;
}




.hero .button-container a::after{
	content: " >"
}

.hero .image-container{
	/* overflow: none; */
	max-height: 100%;
	position: relative;
	overflow: hidden;
}
.hero .image-container img{
	width: 85%;
	float: right;
	/* max-height: 100%; */
}



@media only screen and (max-width: 1000px) {
	.hero{
		min-height: 800px;
		height: 100vh;
	}

	.hero{
		--title-size: 48px;
		--gap-size: 8px;
		--offset: calc(var(--title-size) / 6.4);
		--spread: calc(var(--title-size) / 9.1);
		--mg-bottom: calc(12.5px - var(--gap-size));
	}


	.hero .content-container{
		position: relative;
		top: 150px;
		left: 25px;
		width: calc(100vw - 25px - 25px);
		min-width: auto;
		max-width: 500px;
		z-index: 10;
	}

	.hero .content-container .title{
		font-size: 32px;
		font-weight: 600;
	}
	.hero .content-container .title span{
		display: inline-block;
		padding: 8px;
		margin: 5px 0;
	}
	.hero .content-container .subtitle{
	}
	.hero .content-container .subtitle p{
		font-size: 15px;
	}
	.hero .button-container li{
		float: left;
		width: 50%;
	}

	.hero .button-container a{
		font-size: 14px;
		padding-bottom: 5px;
		padding-top: 5px;
		margin-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
	}





















}