/* 
 ** Generic Styles
 */
 body {
 	background-color: #3f2021;
 }
.btn-creme {
    background-color: #F1F1DE;
    color: #000;
    padding: 0.5em 1.5em;
    border-radius: 0;
}
.btn-black {
    background-color: #000;
    color: #f1f1de;
    padding: 0.5em 1.5em;
    border-radius: 0;
    transition: all .333s ease;
}
.btn-black:hover {
	color: #fff;
	border-radius: 3px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
}
h2 {
	font-size: 36px;
	line-height: 1.2em;
	text-transform: uppercase;
}
.container-large {
	max-width: 1600px;
	margin: 0 auto;
}
.home h2 {
    line-height: 1em;
}
@media screen and (min-width: 1200px) {
	h2 {
		font-size: 40px;
	}
}


/* 
 ** Intro Header
 */
#headline {
    position: absolute;
    padding: 1em;
    top: 10vh;
}
#headline h1 {
    color: #fff;
    font-size: 40px;
}
#headline .cta-link {
    text-align: center;
    position: absolute;
    top: 60vh;
    color: #fff;
    text-align: left;
}
#video_container {
    max-height: 80vh;
}
@media screen and (min-width: 768px) {
	#headline {
	    left: 14vw;
	    width: 430px;
	}
	#headline .cta-link {
	    text-align: left;
	    position: initial;
	    top: initial;
	}
}


/* 
 ** CTA Cards
 */
#cta-cards .cta-card {
	height: 400px;
	background-size: cover;
	padding: 1.5em;
    margin: 2em auto;
    text-align: center;
    background-position: top;
    width: 100%;
}
#cta-cards .cta-card-title {
    position: relative;
    bottom: -4.75em;
    font-size: 36px;
    color: #fff;
}
#cta-cards .cta-card-description {
	display: none;
}
#cta-cards .cta-card-button {
	display: inline-block;
    position: relative;
    top: 10em;
    font-size: 1em;
    text-transform: uppercase;
}
#cta-cards .cta-card.right .cta-card-title {
	bottom: -6em;
}
#cta-cards .cta-card.right .cta-card-button {
	top: 12.5em;
}
@media screen and (min-width: 992px) {
 	 #cta-cards {
	 	height: 300px;
	 }
	#cta-cards .cta-card {
		position: absolute;
	    bottom: -14em;
	    margin: 0;
	}
	#cta-cards .cta-card.left {
		border-right: solid 4px #3f2020;
	}
	#cta-cards .cta-card-title {
		font-size: 40px;
		color: #fff;
		position: initial;
		bottom: 0;
	}
	#cta-cards .cta-card-description {
		display: block;
		color: #fff;
	    position: absolute;
	    bottom: 5em;
	    padding: 0 9em 0 0;
	    text-align: left;
	}
	#cta-cards .cta-card-button {
		position: absolute;
	    bottom: 2em;
	    top: initial;
	    display: block;
	}
	#cta-cards .cta-card.right .cta-card-button {
		top: initial;
	}
	#cta-cards .col-md-5 {
		padding-left: 0;
		padding-right: 0;
	}
	#cta-cards .cta-card-title {
	    text-align: left;
	}
 }

@media screen and (max-width: 992px) {
	#cta-cards .cta-card {
	    max-width: 360px;
	}
}



/* 
 ** Promo Section
 */
#promo-section {
	color: #fff;
	text-align: left;
	height: 80vh;
    background-size: cover;
    background-position: right;
}
.promo-description {
	display: none;
}
#promo-button {
    text-align: left;
    margin: 1em auto;
    position: relative;
    top: calc(80vh - 14em);
}

@media screen and (min-width: 340px) {
	#promo-button {
	    top: calc(80vh - 12em);
	}
}
@media screen and (max-width: 768px) {
	#promo-section .promo-title {
	    margin-top: 5vh;
	}
}
@media screen and (min-width: 768px) {
	#promo-section {
		padding: 10vh 0;
		text-align: center;
	}
	#promo-button {
	    text-align: center;
        position: initial;
		top: 0;
	}
}

@media screen and (min-width: 992px) {
	.promo-description {
		display: block;
		text-align: center;
	}
}


/* 
 ** Service Section
 */
 #service-section-intro {
    padding: 1em;
}
#service-section .service-subtitle {
	font-size: 14px;
	color: #F1F1DE;
	text-transform: uppercase;
	letter-spacing: 5px;
}
#service-section .service-title {
	font-size: 40px;
	color: #fff;
    margin: 0.25em 0 0.5em;
}
#service-button {
    text-transform: uppercase;
    font-size: 1em;
    margin: 1.2em;
}
#service-section-content {
    margin: 2em 0;
}
.service-section-card {
    overflow: hidden;
    display: block;
    background-size: cover;
    height: 304px;
    margin: 0.5em;
}
.service-section-card {
	transition: all .333s ease;
	color: #fff;
}
.service-section-card:hover {
	text-decoration: none;
}
.service-title-card {
    transition: all .21s ease;
    text-align: left;
    position: relative;
    top: 12em;
    background-color: rgba(0,0,0,0.4);
    display: inline-block;
    padding: 0.5em 1.5em 0.5em 1em;
    left: 0;
    float: left;
}
.service-title-card:before {
	font-family: "icomoon";
    font-size: 3.2rem;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 1rem;
    content: "\e602";
}
.service-section-card:hover .service-title-card {
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	text-decoration: none;
	letter-spacing: 1px;
}
.service-section-card img {
	width: 100%;
}
#service-section .col-md-4,
#service-section .col-md-8 {
	padding-left: 0;
	padding-right: 0;
}
.service-description {
    display: none;
}
@media screen and (min-width: 768px) {
	.service-description {
	    display: block;
	}
}

/* 
 ** Info Cards
 */
.info-cards {
	background-color: #F1F1DE;
	padding: 1.5em;
	color: #000;
	text-align: left;
}
.info-cards .subtitle {
	font-size: 14px;
	letter-spacing: 5px;
	text-transform: uppercase;
}
.info-cards .title {
	font-size: 36px;
	text-align: left;
	line-height: 1.2em;
	margin: 0.25em 0;
}
.info-cards .btn {
	font-size: 0.9em;
	margin: 1.2em 0 0;
	text-transform: uppercase;
}

@media screen and (min-width: 768px) {
	.info-cards {
	    width: 500px;
	}
	.info-cards .title {
		font-size: 40px;
	}
}


/* 
 ** LXi Section
 */
#lxi-section{
 	background-size: cover;
 	background-position: center;
 }
#lxi-section:after {
	content: "";
	display: block;
	clear: both;
}
#lxi-section img {
	max-width: 100%;
	display: none;
}
.info-cards .description {
	display: none;
}
#lxi-section .info-cards {
    position: relative;
    right: 0;
    top: -9em;
    width: 90vw;
	max-width: 500px;
    float: right;
}
@media screen and (max-width: 767px) {
	#lxi-section {
	    padding: 4rem 0;
	    height: 60vh;
    	margin: 20vh 0 40vh;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	#lxi-section {
	    height: 60vh;
	}
}
@media screen and (min-width: 992px) {
	#lxi-section {
		background-image: none !important;
		height: 75vh;
	}
	#lxi-section img {
		border: none;
		max-width: 90vw;
		float: left;
		display: block;
	}
	#lxi-section .info-cards {
	    top: -36vh;
	    width: 500px;
	    left: initial;
	    float: right;
	}
}
@media screen and (min-width: 1200px) {
	#lxi-section {
	    padding-top: 0;
	    height: 40vw;
        max-height: 720px;
	}
	#lxi-section img {
		max-width: 58vw;
		float: left;
		border: none;
		display: block;
	}
	#lxi-section .info-cards {
		position: relative;
    	float: left;
    	right: initial;
	    left: -15em;
	    top: 4vw;
	    padding: 2.5em;
	    width: 500px;
	}

	.info-cards .description {
		display: block;
	}
}
@media screen and (min-width: 1600px) {
	#lxi-section img {
		max-width: 60vw;
	}
	#lxi-section .info-cards {
	    left: -15em;
	    top: 8em;
	}
}




/* 
 ** App Section
 */
 #app-section {
 	background-size: cover;
 	background-position: center;
 }
#app-section:after {
	content: "";
	display: block;
	clear: both;
}
#app-section img {
	max-width: 100%;
	display: none;
}
.info-cards .description {
	display: none;
}
#app-section .info-cards {
    position: relative;
    left: 0;
    top: -12em;
    width: 90vw;
	max-width: 500px;
}
@media screen and (max-width: 767px) {
	#app-section {
	    padding: 4rem 0;
	    height: 60vh;
	    margin: 20vh 0;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	#app-section {
		margin: 20vh 0 10vh;
	    height: 60vh;
	}
}
@media screen and (min-width: 992px) {
	#app-section {
		background-image: none !important;
		height: 75vh;
	}
	#app-section img {
		border: none;
		max-width: 90vw;
		float: right;
		display: block;
	}
	#app-section .info-cards {
	    top: -36vh;
	    width: 500px;
	    left: initial;
	    float: left;
	}
}
@media screen and (min-width: 1200px) {
	#app-section {
	    padding-bottom: 12em;
	    height: 55vw;
		max-height: 920px;
	}
	#app-section img {
		max-width: 58vw;
		float: right;
		border: none;
		display: block;
	}
	#app-section .info-cards {
		position: relative;
    	float: right;
    	left: initial;
	    right: -15em;
	    top: 4vw;
	    padding: 2.5em;
	    width: 500px;
	}
	.info-cards .description {
		display: block;
	}
}
@media screen and (min-width: 1600px) {
	#app-section img {
		max-width: 60vw;
	}
	#app-section .info-cards {
	    right: -15em;
	    top: 8em;
	}
}


/* 
 ** Contact Section
 */
#contact-section {
    padding: 10vh 0;
    background-position: bottom;
    background-size: cover;
}
#contact-section h2.title {
	text-align: left;
}
#contact-section a {
	color: #93272C;
}
#contact-section .description {
	margin-bottom: 2em;
}
.rfi {
    background-color: rgba(0,0,0,0.6);
    padding: 1em 0.5em;
}
.rfi label {
    color: #fff;
}
.form-note {
	color: #fff;
}

@media screen and (min-width: 992px) {
	.form-note {
	    position: initial;
	    top: 0;
	    left: 0;
	}
}