/* Made this file to merge the 2 conflicting files from Sarah */
/* Banner */
.home-banner-wrapper {
	padding-top: 1em;
	background-color: #fff;
}
.home-banner {
	text-align: center;
}
.home-banner .static {
	margin: 0 auto;
}
.line-container {
	margin-top: 14%;
	width: 69%;
	margin: 0 auto;
	position: relative;
	z-index: 10;
}
/* lolwut? */
.line-container .hide {	display: block!important; }
/* lolwut? */
.mobile-show { display: none; }

.fade-image {
	position: absolute;
	width: 100%;
	opacity: 0;
}
	.fade-image img { width: 100%; }

.line-drawing,
.fade-image {
	transition: opacity 1s;
}

.show {	opacity: 1; }

.main {
	position: relative;
	width: 100%;
	float: left;
}

.small-desktop { display: none; }

.computer-container {
	position: relative;
	height: 412px;
	margin: 2em auto 0;
	text-align: right;
}
	.computer-container svg {
		pointer-events: none;
		position: absolute;
		left: 0
	}

/* banner text pop outs*/
.computer-container .events,
.computer-container .video,
.computer-container .logo,
.computer-container .print,
.computer-container .marketing,
.computer-container .website {
	position: absolute;
}
.computer-container .events {
	width: 29%;
	right: 3em;
	z-index: 100;
	bottom: 48%;
}
.computer-container .video {
	width: 47%;
	/* For some reason, this one was overflowing and causing horizontal scrolling */
	right: 4em;
	z-index: 100;
	top: 11%;
}
.computer-container .logo {
	width: 27%;
	left: 2em;
	z-index: 100;
	top: 5%;
}
.computer-container .print {
	width: 32%;
	left: 2.5em;
	z-index: 100;
	bottom: 40%;
}
.computer-container .marketing {
	width: 45%;
	left: 3em;
	z-index: 100;
	bottom: 28%;
}
.computer-container .website {
	width: 38%;
	bottom: 22%;
	right: 2em;
	z-index: 100;
}

/* banner animations*/
@-webkit-keyframes scaleUp {
	from {
		transform: scale(0.0);
	}
	to {
		transform: scale(1.1);
	}
}
@-moz-keyframes scaleUp {
	from {
		transform: scale(0.0);
	}
	to {
		transform: scale(1.1);
	}
}
@keyframes scaleUp {
	from {
		transform: scale(0.0);
	}
	to {
		transform: scale(1.1);
	}
}

.computer-container .events,
.computer-container .video {
	transform: scale(0.0);
	transform-origin: left;
	-webkit-animation: scaleUp ease-in 1;
	   -moz-animation: scaleUp ease-in 1;
			animation: scaleUp ease-in 1;
	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}
.computer-container .logo,
.computer-container .print,
.computer-container .marketing {
	transform: scale(0.0);
	transform-origin: right;
	-webkit-animation: scaleUp ease-in 1;
	   -moz-animation: scaleUp ease-in 1;
			animation: scaleUp ease-in 1;
	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}
.computer-container .website {
	transform: scale(0.0);
	-webkit-animation: scaleUp ease-in 1;
	   -moz-animation: scaleUp ease-in 1;
			animation: scaleUp ease-in 1;
	-webkit-animation-fill-mode: forwards;
	   -moz-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
			animation-duration: 1s;
	transform-origin: bottom;
	-webkit-animation-delay: 2s;
			animation-delay: 2s;
}

/* responsive*/
@media (min-width: 48em) {
	.computer-container { height: 315px; }
}
@media (min-width: 62em) {
	.computer-container {
		height: 412px;
		margin-top: 3em;
	}
	/* .computer-container svg { display: none; } */
	.mobile-show { display: block; }
}
@media (min-width: 75em) {
	.computer-container { height: 499px; }
	.large-desktop { display: none;	}
	.small-desktop { display: block; }
}

/* Lines */
/* structure*/
.row.line {	margin-bottom: 1.5em; }
	.row.line svg { display: none; }
.right {
	float: right!important;
}
.footer img {
	width: 100%;
}
.negative-margin {
	margin-top: -7%;
}
.negative-margin2 {
	margin-top: -1%;
}
.negative-margin3 {
	margin-top: -16%;
}
.line-negative-margin {
	margin-top: -3%;
}
.row.line svg path:nth-child(1) {
	stroke: #e88140;
}

.row.line svg path:nth-child(2) {
	stroke: #000;
}
.in-front {
	z-index: 10;
}
/* responsive*/
@media (min-width: 62em) {
	.row.line {	margin-bottom: 0; }
		.row.line svg { display: block; }
}
 @media (max-width: 991px) {
	.mobile-show {
		display: block;
	}
	.negative-margin {
		margin-top: 0;
	}
	.line-negative-margin {
		margin-top: 0;
	}
	.negative-margin3 {
		margin-top: 0;
	}
}
 @media (max-width: 1199px) {
	.large-desktop {
		display: none;
	}
	.small-desktop {
		display: block;
	}
}
