/* CSS Document */
* {box-sizing: border-box; background-repeat:no-repeat;}


/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
span {font-family: "montserrat", sans-serif; font-weight:400; letter-spacing:1px;}
p {line-height:1.4em}
p, li, a, input, select, label, textarea, button {font-family: "montserrat", sans-serif; color:#646464; font-weight:normal; letter-spacing:0px;}
h1,h2,h3, h1 a, h2 a, h3 a {font-weight:normal; font-family: "montserrat", sans-serif; color:#646464; letter-spacing:0px;}
h4,h5,h6, h4 a, h5 a, h6 a {font-weight:normal; font-family: "montserrat", sans-serif; color:#646464;  letter-spacing:0px;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}


#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left; overflow:hidden;}
#container>div, header, footer, section {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1450px; max-width: 100%;}
.content {float: left; width: 80%; max-width: 100%; margin:0 10%; position:relative;}
.margin {padding:120px 0;}
.topMargin {padding:120px 0 0 0;}

.itemNo {position:absolute; right:0px; top:0px;  font-size:21px; font-weight: bold;  width:150px; text-align:right; padding-top:10px;}
.fadeIn {position:relative; -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:0.3s; -webkit-animation-fill-mode:forwards;}
.topTextWhite .fadeIn, .topText .fadeIn {position:relative; -webkit-animation-name: fadeInTTW; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:0.3s; -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes fadeIn {from {opacity:0; top:50px; } to {opacity:1; top:0px; }}
@-webkit-keyframes fadeInTTW {from {opacity:0; } to {opacity:1; }}
.fader, .footerFader {opacity:0;}

.fadeIn>.itemNo:before {-webkit-animation-name: lineGrow; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:1s; -webkit-animation-fill-mode:forwards;}
.fadeIn.process p:first-child:before {-webkit-animation-name: lineGrow; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-delay:1s; -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes lineGrow {from {width:0; } to {width:150px; }}
.right .itemNo {left:0px; text-align:left;}
.jobRight .itemNo {left:0px; text-align:left;}

.backgroundClarity {background-image:url("/wp-content/themes/ie/assets/background-clarity.jpg"); background-position:top center; background-size:contain;}

.copy {position:relative;}
.copy h1 {color:#646464; font-size:76px; font-weight:bold; padding-bottom:50px;}
.copy h1 span {font-weight:bold; font-size:20px; color:#cdcdcd;}
.copy h2 {color:#646464; font-size:30px; font-weight:bold; padding-bottom:30px;}
.copy h3 {color:#646464; font-size:30px; font-weight:300; padding-bottom:20px; padding-top:10px;}
.copy h4 {color:#36b2b0; font-size:20px; font-weight:700; padding-bottom:20px;}
.copy h5 {color:#cf3339; font-size:21px; font-weight:700; padding-bottom:50px;}
.copy p {font-size:18px; padding-bottom:20px;}
.copy p:last-child {padding-bottom:0px;}
.copy p a {color:#36b2b0;}
.copy ul {margin-bottom:20px; margin-left:10px;}
.copy ul li {list-style-type: '-'; font-size:18px; padding-left:10px; padding-bottom:5px;} 

.copy p:last-child, .copy h1:last-child, .copy h2:last-child, .copy h3:last-child, .copy h4:last-child, .copy h5:last-child, .copy h6:last-child {padding-bottom:0px;} 
.copy.white p, .copy.white p a, .copy.white h1, .copy.white h2, .copy.white h3, .copy.white h4, .copy.white h5, .copy.white h6 {color:#fff;}
.red.copy h4 {color:#cf3339; }

.itemNo:before {content:''; display:block; width:0px; padding-top:10px;}
.red .itemNo {color:#cf3339; }
.red .itemNo:before {border-top:1px solid #cf3339;}
.teal .itemNo {color:#36b2b0;}
.teal .itemNo:before {border-top:1px solid #36b2b0;}
.yellow .itemNo {color:#f5a700;}
.yellow .itemNo:before {border-top:1px solid #f5a700;}
.orange .itemNo {color:#f06b47;}
.orange .itemNo:before {border-top:1px solid #f06b47;}
.blue .itemNo {color:#00aadc;}
.blue .itemNo:before {border-top:1px solid #00aadc;}

.left {float:left; width:100%; margin-bottom:100px;}
.right {float:right; width:100%; margin-bottom:100px;}
.quarter {float:left; width:100%;}
.clear {clear:left;}
.itemSpacer {margin-top:90px;}
.noMargin {margin-bottom:0px;}

.left:last-child, .right:last-child {margin-bottom:0px;}

@media only screen and (min-width: 768px) {
.quarter {width:30%;}
.left {width:47.5%;}
.right {width:47.5%;}
.wide {width:70%;}
	
.itemNo {right:-110%;}
.right .itemNo {left:-110%; right:auto; }
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1400px) {
	.copy h2 {font-size:76px; padding-bottom:50px;} 
}


/* ----- Arrow for links ----- */
a.arrow {position: relative; display: inline-block; padding: 0px 40px 0px 0px;}
a.arrow:after, a.arrow:before {content: ""; display: block; position: absolute;}
a.arrow:before {top: 50%; right: 1px; transition:right 0.3s; width: 14px; height: 14px; transform-origin: 50% 50%; transform:  translate(0, -6px) rotate(45deg); box-shadow: inset -2px 2px 0 0 #36b2b0;}
a.arrow:after {top: 50%; right: 0px; transition:right 0.3s; width: 30px; height: 2px; transform:  translate(0.05px, -0.05px); background-color: #36b2b0;}
a.arrow:hover:before {right:-19px; transition:right 0.3s;}
a.arrow:hover:after {right:-20px; transition:right 0.3s;}
.red a.arrow:before {box-shadow: inset -2px 2px 0 0 #cf3339;}
.red a.arrow:after {background-color: #cf3339;}
.orange a.arrow:before {box-shadow: inset -2px 2px 0 0 #f06b47;}
.orange a.arrow:after {background-color: #f06b47;}
.yellow a.arrow:before {box-shadow: inset -2px 2px 0 0 #f5a700;}
.yellow a.arrow:after {background-color: #f5a700;}

.red a.arrow {color:#cf3339; font-weight:bold;}
.teal a.arrow {color:#36b2b0; font-weight:bold;}
.orange a.arrow {color:#f06b47; font-weight:bold;}
.yellow a.arrow {color:#f5a700; font-weight:bold;}


/* ----- Header ----- */
header {height:100px; position:relative; z-index:5; border-bottom:1px solid #646464;}
header a.logo {float:left; display:block; background-image:url("/wp-content/themes/ie/assets/ie-logo.png"); width:290px; height:49px; background-size:contain; margin-top:25px;}
.home header {border-bottom:1px solid #fff;}
.home header a.logo {background-image:url("/wp-content/themes/ie/assets/ie-logo-v2.png)");}

/* ----- Homepage ----- */
#scroller {height:100vh; width:100%; margin-top:-100px; position:relative; background-image:url("/wp-content/themes/ie/assets/homev2.jpg"); background-size:cover;}

img.compass {margin:200px 0 0 200px;}
#results {float:left; width:100%; margin-bottom:100px;}
.result {float:left;  width:100%;}
.result .resultHeadline {color:#f5a700; font-size:65px; font-weight:200; margin-bottom:10px; }
.result .resultHeadline span {font-weight:200;}
.result .resultSummary {color:#706f6f; font-size:25px; font-weight:400; margin-bottom:20px; width:80%; float:left; white-space: wrap;}
.result a {color:#f5a700; font-weight:bold; font-size:20px;}
#caseStudyFeed {float:left; width:100%;}
.caseStudyPreview {width:100%; float:left; margin-bottom:60px;}
.caseStudyPreview:last-child {margin-bottom:0px;}
.caseStudyPreview .copy {width:100%; float:left; white-space: wrap;}
.caseStudyPreview .copy a {font-size:18px; font-weight:bold; color:#36b2b0;}
.caseStudyPreview .imageWrapper {overflow:hidden; width:100%; height:160px; float:left; margin-bottom:20px; }
.caseStudyPreview .image {float:left; width:100%; height:160px; background-color:#f0f0f0; background-size:cover; background-position:center center;}

@media only screen and (min-width: 768px) {
	.result {width:50%; margin-bottom:50px;}
	.result:nth-child(2n+1) {clear:left;}
	.caseStudyPreview {float:left; width:47.5%;}
	.caseStudyPreview:nth-last-child(2) {margin-bottom:0px;}
	.caseStudyPreview:nth-child(2n+1) {clear:both;}
	.caseStudyPreview:nth-child(2n+0) {float:right;}
	.caseStudyPreview .imageWrapper {height:210px;}
	.caseStudyPreview .image {height:210px;}
	.caseStudyPreview .image a {height:210px;}
}

@media only screen and (min-width: 1024px) {
	.caseStudyPreview .copy {width:75%;}
	.caseStudyPreview .copy a {font-size:20px;}
	.caseStudyPreview .imageWrapper {height:290px;}
	.caseStudyPreview .image {height:290px;}
	.caseStudyPreview .image a {height:290px;}
}

@media only screen and (min-width: 1400px) {
	.result { width:25%; margin-bottom:0px;}
	.result:nth-child(2n+1) {clear:none;}
	.caseStudyPreview .imageWrapper {height:355px;}
	.caseStudyPreview .image {height:355px;}
	.caseStudyPreview .image a {height:355px;}
}

/* ----- Footer ----- */
footer {background-color:#646464; padding:70px 0;}
footer a.logo {background-image:url(/wp-content/themes/ie/assets/logo-footer.png); display:block; width:386px; height:49px; background-size:contain; float:left; max-width:100%; margin-bottom:40px;}
footer .copy {width:25%; margin-left:5%; float:right;}
footer .copy h4 {color:#fff; font-size:15px; font-weight:700; margin-bottom:10px;}
footer .copy p, footer .copy p a {font-weight:300; font-size:20px;}
footer ul#menu-footernav {margin-left:0px;}
footer ul#menu-footernav li {padding-left:0px;}
footer ul#menu-footernav li a { color:#fff; font-weight:300; font-size:20px;}

/* ----- Contact Form ----- */
#contactForm {float:right; width:100%; margin:0px; font-family: "montserrat", sans-serif;}
#contactForm .wpforms-field {padding:0 0 20px 0;}
#contactForm input[type=text] {background-color:#e2e2e2; color:#706f6f; font-size:20px; font-weight:bold; border:0px; border-radius:0px; max-width:100%; padding:25px 12px;}
#contactForm input[type=email] {background-color:#e2e2e2; color:#706f6f; font-size:20px; font-weight:bold; border:0px; border-radius:0px; max-width:100%; padding:25px 12px;}
#contactForm input[type=tel] {background-color:#e2e2e2; color:#706f6f; font-size:20px; font-weight:bold; border:0px; border-radius:0px; max-width:100%; padding:25px 12px;}
#contactForm textarea {resize:none; background-color:#e2e2e2; color:#706f6f; font-size:20px; font-weight:bold; border:0px; border-radius:0px; max-width:100%; padding:12px 12px;}
#contactForm .wpforms-error {margin-top:5px;}
#contactForm .wpforms-field-label {word-break: normal;}
#contactForm button[type=submit] {padding:0px; border:0px; background-color:transparent; color:#f5a700; font-size:20px; font-weight:bold; margin-top:20px; position: relative; display: inline-block; padding: 0px 40px 0px 0px;}
#contactForm button[type=submit]:hover {background:none;}
#contactForm button[type=submit]:before {content: ""; display: block; position: absolute; top: 50%; right: 0px;  transition:right 0.3s; width: 14px; height: 14px; transform-origin: 50% 50%; transform:  translate(0, -6px) rotate(45deg); box-shadow: inset -2px 2px 0 0 #f5a700;}
#contactForm button[type=submit]:after {content: ""; display: block; position: absolute; top: 50%; right: 0px;  transition:right 0.3s; width: 30px; height: 2px; transform:  translate(0.05px, -0.05px); background-color: #f5a700;}
#contactForm button[type=submit]:hover:before {right:-19px; transition:right 0.3s;}
#contactForm button[type=submit]:hover:after {right:-20px; transition:right 0.3s;}
.red #contactForm button[type=submit]:before {box-shadow: inset -2px 2px 0 0 #cf3339;}
.red #contactForm button[type=submit]:after {background-color: #cf3339;}
.orange #contactForm button[type=submit]:before {box-shadow: inset -2px 2px 0 0 #f06b47;}
.orange #contactForm button[type=submit]:after {background-color: #f06b47;}
.yellow #contactForm button[type=submit]:before {box-shadow: inset -2px 2px 0 0 #f5a700;}
.yellow #contactForm button[type=submit]:after {background-color: #f5a700;}
.teal #contactForm button[type=submit]:before {box-shadow: inset -2px 2px 0 0 #36b2b0;}
.teal #contactForm button[type=submit]:after {background-color: #36b2b0;}
.red #contactForm button[type=submit] {color:#cf3339; font-weight:bold;}
.teal #contactForm button[type=submit] {color:#36b2b0; font-weight:bold;}
.orange #contactForm button[type=submit] {color:#f06b47; font-weight:bold;}
.yellow #contactForm button[type=submit] {color:#f5a700; font-weight:bold;}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
#wpforms-form-39 {width:47.5%;}
}

/* ----- Testimonials Panel ----- */
#testimonials {float:left; width:100%; background-color:#706f6f; padding:60px 0; }
#testimonialScrollers {float:left; width:100%; position:relative;}
img.testimonialQuote {position:absolute; left:-80px; top:10px;}
.testimonialScroller p:first-child {font-size:24px; margin-bottom:40px;}
#testimonials .copy h2 {color:#fff;}
#testimonials .copy p {color:#fff;}

@media only screen and (min-width: 1024px) {
.testimonialScroller p:first-child {font-size:30px; margin-bottom:60px;}
#testimonials {padding:100px 0; }
}


@keyframes fadeIn {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;}}

/* ----- Services ----- */
.success {background-image:url("/wp-content/themes/ie/assets/background-success.jpg"); background-size:cover; background-position:center center;}
.stages {float:right; width:65%; display:flex; position:relative;}
.stage {float:left; position:relative; height:400px; cursor:pointer;}
.stage h3 {color:#fff; transform:rotate(180deg); position:absolute; bottom:0px; writing-mode: vertical-rl; height: 100%; border-left: 1px solid #fff; padding-left:15px; font-size:40px; font-weight:bold;}
.stage h4 {padding-bottom:5px; font-weight:bold;}
.stage span {color:#fff; position:absolute; left:10px; font-size:30px; font-weight:300; writing-mode: vertical-rl; transform:rotate(180deg); }
.stage.active {width:55%; transition:width 1s;}
.stage.active .copy {padding-left:90px; animation-name: fadeIn; animation-duration: 2s;  }
.stage.inactive {width:15%; transition:width 1s;}
.stage.inactive .copy {opacity: 0; transition: 0s;  }


#clients {float:left; width:100%; margin:70px 0;}
#clients .cycle-carousel-wrap {width:100%;}
.client {display:block; width:100%;}
.client a {display:block; width:80%; margin:0 10%; height:100px; background-size:contain; background-position:center center; filter:grayscale(0%);}
.client a:hover {filter:grayscale(100%);}

@media only screen and (min-width: 768px) {
.client {width:50%;}
}

@media only screen and (min-width: 1024px) {
.client {width:33.3333%;}
}

@media only screen and (min-width: 1400px) {
.client {width:25%;}
}
	


/* ----- Process ----- */
.process {background-image:url("/wp-content/themes/ie/assets/background-intelligence.jpg"); background-size:cover; background-position:center center;}
.processStages {float:left; width:100%; margin-top:50px;}
.processMenu {float:left; width:30%;}
.processMenuItem {font-size:30px; border-top:1px solid #646464; display:block; width:100%; cursor:pointer; padding:10px 0;}
.processMenuItem span {width:50px; display:inline-block;}
.processMenuItem.active {color:#cf3339;}
.processStage {float:right; width:50%;}
.processCopy h3 {font-weight:700;}
.processCopy {display:none;}
.processCopy.active {display:block;} 


.processMenuItem.active {position: relative; display: inline-block; }
.processMenuItem.active:after, .processMenuItem.active:before {content: ""; display: block; position: absolute;}
.processMenuItem.active:before {top: 50%; right: 1px; transition:right 0.3s; width: 14px; height: 14px; transform-origin: 50% 50%; transform:  translate(0, -6px) rotate(45deg); box-shadow: inset -2px 2px 0 0 #cf3339;}
.processMenuItem.active:after {top: 50%; right: 0px; transition:right 0.3s; width: 30px; height: 2px; transform:  translate(0.05px, -0.05px); background-color: #cf3339;}


/* ---- About Us ---- */

.team {background-image:url("/wp-content/themes/ie/assets/background-meet-the-team.jpg"); background-size:cover; background-position:center center;}

.staffInfos {float:left; width:100%; padding-bottom:60px;}
.staffInfos .staffPhoto {filter:grayscale(0%) brightness(1);}
.staffInfos .staffInfo {width:100%;}
.staffPhotos {display:none; float:right; width:100%; position:relative;}
.staffPhoto {cursor:pointer;  filter:grayscale(60%) brightness(0.8); float:left; width:100%; margin-bottom:30px;   position:relative;}
.staffPhoto .staffImage {float:left; width:100%; padding-top:100%;  display:block; background-size:cover; background-position:center center; margin-bottom:20px;}


@media only screen and (min-width: 768px) {
.staffInfos {width:100%;}
.staffInfos .staffInfo {width:50%;}
.staffInfos .staffPhoto {display:none;}
.staffInfo {display:none; float:left; }
.staffInfo.active {display:block;}
.staffPhotos {display:block; width:100%; margin-top:60px;}
	.staffPhoto {width:30%; margin-left:5%; margin-bottom:5%;}
.staffPhoto:nth-child(3n+1) {margin-left:0%;}
.staffPhoto.active {filter:grayscale(0%);}
.staffPhoto:hover {filter:grayscale(0%);}
}

@media only screen and (min-width: 1024px) {
.staffInfos {width:30%; margin-top:60px; padding-bottom:0px;}
.staffInfos .staffInfo {width:100%;}
.staffPhotos {width:65%; margin-top:0px;}
.staffPhoto {width:47.5%; margin-left:5%; margin-bottom:5%;}
.staffPhoto:nth-child(3n+1) {margin-left:5%;}
.staffPhoto:nth-child(2n+1) {margin-left:0%;}
}

@media only screen and (min-width: 1400px) {
.staffInfos {width:25%; padding-bottom:0px;}
.staffPhotos {width:70%;}
.staffPhoto {width:30%; margin-left:5%; margin-bottom:5%;}
.staffPhoto:nth-child(2n+1) {margin-left:5%;}
.staffPhoto:nth-child(3n+1) {margin-left:0%;}
}



/* ----- Contact Us ----- */
#map {height:300px; width:100%;}

@media only screen and (min-width: 768px) {
	#map {height:450px}
}

@media only screen and (min-width: 1024px) {
	#map {height:600px}
}

@media only screen and (min-width: 1400px) {
	#map {height:750px}
}