/*
	 * Theme Name: MVIM
	 *
	 * assets/css/front-page.css | Home
	 *
	 */


	 #main.front-page .banner {
	 	position: relative;
	 	width: 100%;
	 	height: 399px;
	 	background-color: #ffffff;
	 	border-bottom: 1px solid #e1e1e1;
	 	overflow: hidden;
	 }

	 #main.front-page .banner img {
	 	width: 100%;
	 	height: 100%;
	 	object-fit: cover;
	 }

	 #main.front-page .banner nav {
	 	position: absolute;
	 	width: 100%;
	 	z-index: 9;
	 	display: flex;
	 	flex-direction: row;
	 	justify-content: space-between;
	 	top: calc(50% - 30px);
	 }

	 #main.front-page .banner .button {
	 	width: 60px;
	 	height: 60px;
	 	background-color: rgb(0, 0, 0, 0.3);
	 	border-radius: 5px;
	 	justify-content: center;
	 	align-items: center;
	 	color: #ffffff;
	 	font-size: 30px;
	 	margin: 0px 30px;
	 	opacity: 0;
	 	transition: opacity 400ms;
	 }

	 #main.front-page .banner:hover .button {
	 	opacity: 1;
	 }

	 #main.front-page .banner .button:hover {
	 	background-color: rgb(0, 0, 0, 0.5);
	 }

	 #main.front-page .banner .background {
	 	position: absolute;
	 	left: 0px;
	 	width: 100%;
	 	height: 399px;
	 }

	 #main.front-page .banner .foreground {
	 	position: absolute;
	 	left: 0px;
	 	right: 0px;
	 	width: 1055px;
	 	height: 399px;
	 	margin: auto;
	 }

	 #main.front-page .banner > div {
	 	z-index: 4;
	 	opacity: 0;
	 	transition: opacity 400ms;
	 }

	 #main.front-page .banner > div.transitioning {
	 	z-index: 6;
	 	opacity: 1;
	 }

	 #main.front-page .banner > div.active {
	 	z-index: 5;
	 	opacity: 1;
	 }	 

	 #main.front-page .banner > div .foreground {
	 	opacity: 0;
	 }

	 #main.front-page .banner > div.active .foreground {
	 	opacity: 1;
	 }

 	 #main.front-page .banner > div.transitioning .lettering {
	 	opacity: 1;
	 	transition: opacity 800ms linear 800ms;
	 }

	 #main.front-page .banner div.transitioning .text {
	 	opacity: 1;
	 	transition: opacity 800ms linear 1800ms;
	 }

	 #main.front-page .columns {
	 	padding: 50px 0px;
	 	display: flex;
	 	flex-direction: row;
	 	justify-content: space-between;
	 	flex-wrap: wrap;
	 }

	  #main.front-page .columns > div {
	  	flex-grow: 1;
	  	flex-basis: 0;
	  	margin-right: 60px;
	  }

	  #main.front-page .columns > div:last-child {
	  	margin-right: 0px;
	  }

	  #main.front-page .columns .title {
	  	display: flex;
	  	flex-direction: row;
	  	justify-content: flex-start;
	  	align-items: top;
	  }

	  #main.front-page .columns .title a {
	  	font-family: 'Coda';
	  	font-weight: bold;
	  	text-transform: uppercase;
	  	font-size: 16px;
	  	line-height: 18px;
	  	color: #d4b98c;
	  	letter-spacing: 1px;
	  }

  	  #main.front-page .columns .title i {
  	  	font-size: 22px;
  	  	padding-right: 8px;
  	  	display: inline-block;
	  }

	  #main.front-page .columns .title > div:first-child {
	  	margin-right: 6px;
	  }

	  #main.front-page .columns .title > div:last-child {
	  	flex-grow: 1;
	  }

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

	#main.front-page .banner {
	 	height: calc(100vw * 0.378);
	 }

	 #main.front-page .banner .background {
	 	height: 100%;
	 }

	 #main.front-page .banner .foreground {
	 	width: 98%;
	 	height: 100%;
	 	margin: 0% 1%;
	 }

	 #main.front-page .banner .foreground img {
	 	object-fit: fill;
	 	height: auto;
	 }

	#main.front-page .columns {
		flex-direction: column;
	}
		
	#main.front-page .columns > div {
	  	margin-right: 20px !important;
	 }

	 #main.front-page .columns > div {
	 	margin-bottom: 40px;
	 }


	 #main.front-page .columns > div:last-child {
	 	margin-bottom: 0px;
	 }

	 #main.front-page .banner nav {
	 	top: calc(50% - 15px);
	 }

	 #main.front-page .banner .button {
	 	width: 30px;
	 	height: 30px;
	 	font-size: 15px;
	 	margin: 0px 15px;
	 }


}