@charset "UTF-8";
/* CSS Document */

/* PORTFOLIO Pages CSS */

.prev-next {
	list-style: none;
	display: flex;
    justify-content: space-between;
}
.prev-next li {
	font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
    font-weight: 600;
    font-size: 4em;
	color: #aaa;
}
.prev-next li a {
	text-decoration: none;
	font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
    font-weight: 600;
	color: #777;
}

.brand-add-border {
	border: 1px solid #000;
}
.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 36px;
}
.flex-item img {
	display: block;
	width: 100%;
	height: auto;
}
.flex-container a:hover img {
	opacity: 0.2;
	filter: alpha(opacity=20);
	}
.flex-container a, .flex-container a:hover {
    text-decoration: none;
}
.flex-item div {
    position: absolute;
    top: -500px;
    right: 0;
    height: 0;
    color: #000;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
    font-weight: 600;
    font-size: 1.3em;
    -webkit-transition: visibility 0s, opacity 0.5s linear; 
    transition: visibility 0s, opacity 0.5s linear;
    text-shadow: 0 0 4px #fff;
}
.flex-item:hover {
    cursor: pointer;
}
.flex-item:hover div {
    width: 100%;
    visibility: visible;
    opacity: 1;
}
main h1, main h2 {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 3em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.5em;;
	color: #000;
	margin-bottom: 30px;
	padding: 0 48px;
}
.portfolio-item img {
	width: 100%;
}
blockquote {
	border-left: 3px solid #000;
	margin: 30px 48px;
	padding-left: 30px;
	font-family: 'Oswald', sans-serif;
	font-style: oblique;
	font-weight: 300;
	font-size: 1.2em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.5em;;
	color: #000;
}

/* CASE STUDIES pages CSS */

/* ABOUT pages CSS */

main h2 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-style: italic;
	font-size: 1.5em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.5em;;
	color: #000;
	padding: 0 48px;
}
main p {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1.2em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.5em;;
	color: #000;
	margin-top: 30px;
	padding: 0 48px;
}
main ol li, main ul li {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1.2em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.2em;;
	color: #000;
	margin: 10px 0 0 100px;
}

/* Services Page Animation */

@keyframes services_animation {
  from {color: rgba(0,0,0,0);}
  to {color: rgba(0,0,0,1);}
}
main ul#services-anim {
	position: relative;
	top: -404px;
	list-style-image: url(../images/ellojeo-list-image.png);
	z-index:100;
}
main ul li.services-anim-item {
	color: rgba(0, 0, 0,0);
  	animation-name: services_animation;
  	animation-duration: 4s;
  	animation-delay: 4s;
	animation-fill-mode: forwards;
}

/* CONTACT page CSS */

.contact-form {
	background-color: #99D26E;
	color: #000;
	padding: 48px;
}
.contact-form h2 {
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 3em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.25em;;
	color: #000;
	margin-bottom: 30px;
	margin-top: 30px;
	padding: 0;
}
.contact-form p {
	padding: 0;
}
.form-content h2 {
	font-family: 'Oswald', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 3em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.25em;;
	color: #000;
	margin-bottom: 30px;
	margin-top: 30px;
	padding: 0;
}
.form-content p {
	padding: 0;
}
.form-group {
	margin-bottom: 30px;
}
.form-group label {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1.2em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.25em;;
	color: #000;
	margin-bottom: 10px;
}
.form-control {
	width: 100%;
}
.form-control--wrapper input, .form-control--wrapper textarea {
    font-size: 1em;
	min-height: 1.75em;
	font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
    font-weight: 300;
	padding: 5px;
	margin-top: 3px;
    margin-bottom: 5px;
}
textarea {
	height: 13em;
}
.form-pagination button {
	padding: 10px 20px;;
}
span.error {
	font-family: 'Spartan', 'Trebuchet MS', Arial, 'sans-serif';
    font-weight: 600;
	padding: 5px;
	color: #662D91;
	font-style: oblique;
}
main h5 {
	font-family: 'Oswald', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1em;
	letter-spacing: .04em;
	text-align: left;
	line-height: 1.25em;;
	color: #000;
	margin-top: 30px;
}

/* --------------------- @media breakpoints ----------------------------- */


@media (min-width:860px){
	
	/* PORTFOLIO Pages CSS */
	
	.flex-container {
		margin-bottom: 70px;
	}
	.flex-item img {
		max-width: 384px;
	}

	.flex-item div {
		position: relative;
		top: -128px;
		right: 0;
	}
	main h1 {
		padding: 0;
	}
	.contact-form {
		padding: 80px;
	}
	.form-control {
		width: 50%;
	}
	blockquote {
	margin: 30px 150px;
}

}

@media (min-width: 1280px) {


}

@media (min-width: 1500px) {
	
	.page-title {
		margin-left: 230px;
		color: #662D91;
	}
	
}