/* CSS Base */
@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


html, body {margin: 0; padding: 0; height: 100%; color: #555555; font-family: 'Open Sans'; font-weight: 300; font-size: 1rem;}

a {text-decoration: none; color: #E89191; font-weight: 300;}
a:hover {text-decoration: underline;}
a.casestudy-link, a.casestudy-link:hover {text-decoration: none;}
a.casestudy-back {font-family: 'Roboto'; font-weight: 500; font-size: 0.9rem;}
a.error {color: #535657;}
a.globalnav-link {text-decoration: none; color: #555555; font-family: Roboto; font-weight: 300; font-size: 1.1rem;}
a.globalnav-link:hover {text-decoration: none; border-bottom: 4px solid #C6A49A; color: #555555; font-family: Roboto; font-weight: 300; font-size: 1.1rem; padding-bottom: 0.1rem;}
a.globalnav-link-selected {text-decoration: none; border-bottom: 4px solid #C6A49A; color: #555555; font-family: Roboto; font-weight: 300; font-size: 1.1rem; padding-bottom: 0.1rem;}
a.sectionnav-link {text-decoration: none; color: #E89191; font-family: Roboto; font-weight: 400; font-size: 1.2rem;}

.canvas-header {width: 80%; margin: 5% auto 0 auto;}
.canvas-main {width:66.66%; margin: 0 auto 0 auto; padding: 7.5% 0 1.5% 0;}

.casestudy-row {cursor: pointer; display: flex; width: 100%; margin: 1% 0 0 0; flex-wrap: wrap; border-bottom: 1px dotted #EBE5E5;}
.casestudy-col1 {display: flex; width: 20%; justify-content:left; align-items: center;}
.casestudy-col2 {display: flex; width: 70%; justify-content:left; align-items: center; flex-wrap: wrap; padding: 0 0 0 5%; align-self: center;}
.casestudy-col3 {display: flex; width: 5%; justify-content: left; align-items: center;}
.casestudy-name {color: #555555; font-family: 'Roboto'; font-weight: 400; font-size: 1.2rem; width: 100%;}
.casestudy-areas {color: #B4B2B2; font-family: 'Roboto'; font-weight: 300; font-size: 0.7rem; width: 100%; margin: 1% 0 0 0;}

.container-500image {width: 75%; margin: 0 auto 3% auto;}
.container-casestudy-back {margin: 5% 0 0 0;}
.container-clients {width: 100%; margin: 5% auto 0 auto; text-align: center;}
.container-csdeliverables {margin: 4% 0 0 0; font-size: 0.9rem; font-style: italic;}
.container-cvformats {display: flex; width: 70%; height: 5%; margin: 5% auto 0 auto;}
.container-dots {text-align:center; margin: 1rem 0 0 0;}
.container-error {font-size: 0.8rem; color: red; margin: 2% 0 0 0;}
.container-header {display: flex; width: 100%; height: 5%; border-bottom: 1px solid #EBE5E5; padding-bottom: 1.2%;}
.container-main {width:100%; text-align: center;}
.container-footer {width:100%; text-align: center; border-bottom: 20px solid #C6A49A; padding: 4% 0 7% 0;}
.container-form-email {width: 70%; margin: 5% auto 0 auto; text-align: left;}
.container-form-field {margin: 0 0 3% 0;}
.container-roles {padding: 0 0 2% 0;}
.container-home-intro {padding: 2% 0 3% 0; margin: 0 auto 0 auto; width:70%;}
.container-loginform {margin: 3% 0 0 0;}
.container-page-intro, .container-page-body {width: 70%; margin: 0 auto 0 auto; text-align: left;}
.container-phone {width: 70%; margin: 3% auto 0 auto; text-align: left;}
.container-skillsplus {margin: 0 0 0 5%;}
.container-xp {margin: 5% 0 0 0;}

.container-casestudy-header {display: flex; width: 100%; margin: 1% 0 0 0; flex-wrap: wrap;}
.container-casestudy-images {width: 100%;}
.container-casestudy-content {margin: 5% 0 0 0;}
.container-casestudy-header-col1 {display: flex; width: 20%; justify-content:left; align-items: top; flex-wrap: wrap; align-self: center;}
.container-casestudy-header-col2 {display: flex; width: 60%; justify-content:left; align-items: top; flex-wrap: wrap; align-self: center;}
.container-casestudy-header-col3 {display: flex; width: 20%; justify-content:right; align-items: top;}
.cs-header-label {width:100%; padding: 0 0 5% 0; font-size: 0.8rem; font-weight: 700; font-family: 'Roboto';}
.cs-header-content {width:100%; padding: 0 0 2% 0; font-size: 0.8rem; font-family: 'Roboto';}

.col-name {display: flex; width: 46%; align-items: center; text-align: left; justify-content: left;}
.col-image {display: flex; width: 8%; align-items: center; text-align: center; justify-content: center;}
.col-nav {display: flex; width: 41%; align-items: center; text-align: right; justify-content: right;}
.col-cv {display: flex; width: 5%; align-items: center; text-align: right; justify-content: right;}

.cvformat-01, .cvformat-02, .cvformat-03 {font-family: 'Open Sans'; font-weight: 400; font-size: 0.9rem;}
.cvformat-01 {display: flex; width: 33.33%; border: 1px solid #EBE5E5; margin: 0 3% 0 3%; padding: 5% 7.5% 5% 7.5%; flex-wrap: wrap; justify-content: center;}
.cvformat-02 {display: flex; width: 33.33%; border: 1px solid #EBE5E5; margin: 0 3% 0 3%; padding: 5% 7.5% 5% 7.5%; flex-wrap: wrap; justify-content: center;}
.cvformat-03 {display: flex; width: 33.33%; border: 1px solid #EBE5E5; margin: 0 3% 0 3%; padding: 5% 7.5% 5% 7.5%; flex-wrap: wrap; justify-content: center;}
.cvformat-01:hover, .cvformat-02:hover, .cvformat-03:hover {background-color: #f4f0f0;}

.footer-line {background-color: #C6A49A; border: none; width: 75px; height: 4px; margin-bottom: 2%;}
.footer-title {font-family: Roboto; font-weight: 900; font-size: 1.5rem; color: #555555;}
.footer-imgs {margin: 1% 0 2% 0;}
.footer-copyright {font-size: 0.8rem;}
.footerimg {margin: 0 0.25% 0 0.25%;}

form {margin: 0; padding: 0}

.form-btn {border: 1px solid #E89191; border-radius: 15px; background-color: white; padding: 0.85rem 1rem 0.85rem 1rem; font-size: 0.9rem; color: #E89191; cursor: pointer;}
.form-text, .form-text-error, .form-text-contact {width: 25%; padding: 0.75rem 1rem 0.75rem 1rem; border: 1px solid #C0C0C0; border-radius: 15px; font-size: 0.7rem; color: #555555; font-family: 'Open Sans';}
.form-text-error {border: 2px solid red;}
.form-textarea {width: 60%; border: 1px solid #C0C0C0; border-radius: 15px; padding: 0.75rem 1rem 0.75rem 1rem; font-size: 0.7rem; font-family: 'Open Sans'; color: #555555;}
.form-text-contact {width: 60%;}
.form-text-contact::placeholder, .form-textarea::placeholder {color: #aaaaaa;}

h1.name {margin: 0; font-family: Roboto; font-weight: 600; font-size: 2rem;}
h2.pagetitle {margin: 0; font-family: Roboto; font-weight: 900; font-size: 2rem;}
h2.roles-l1 {margin: 0; font-family: Roboto; font-weight: 900; font-size: 2.5rem;}
h2.roles-l2 {margin: 0; font-family: Roboto; font-weight: 900; font-size: 1.9rem; line-height: 2.75rem;}
h3 {margin: 0 0 2% 0; font-family: Roboto; font-weight: 500; font-size: 1rem;}
h3.casestudy-name {margin: 6% 0 0 0; padding: 0 0 0.5rem 0; font-family: Roboto; font-weight: 700; font-size: 1.5rem;}
h3.divider-title {margin: 6% 0 0 0; padding: 0 0 0.5rem 0; font-family: Roboto; font-weight: 400; font-size: 1.2rem; border-bottom: 1px solid #EBE5E5;}
h3.skillsubtitle {margin: 3% 0 0 0; font-weight: 300; font-style: italic;}

hr.line, hr.line-login, hr.line-page {background-color: #C6A49A; border: none; width: 75px; height: 4px; padding: 0; margin-bottom: 0;}
hr.line-login {margin-top: 2%; margin-bottom: 2%}
hr.line-page {margin-left: 0; margin-top: 4%; margin-bottom: 4%;}

img.error500 {width: 100%;}
img.agencyicon {width: 17%; margin: 0 3.5% 0 3.5%;}
img.alert {width: 2%; vertical-align: text-bottom;}
img.casestudyclient {width: 80%;}
img.clienticon {width: 13%; margin: 0 5% 0 5%;}
img.chv-down {width: 2.5%; margin: 5% 0 0 0;}
img.chv-right {width: 70%; margin: 0 0 0 0;}
img.csslide {width:100%; border: 1px solid #EBE5E5;}
img.cv-icon {width: 60%;}
img.cvformat {width: 100%;}
img.flag {width: 3.5%; vertical-align: absmiddle; margin-left: 4%; margin-right: 1%;}
img.footerimg {width: 3%;}
img.profile-pic {width: 100%;}
img.sectionnav-item {width: 75%;}
img.skillicon {width: 25%; margin-right: 3%; vertical-align: middle;}

li.globalnav-item {display: inline-block; padding-left: 5%;}
li.cs-list-item {padding-left: 4%; background-image: url('/_images/arrow-right-circle.svg'); background-repeat: no-repeat; background-size: 15px 15px; background-position: 0 6px; margin: 0 0 2% 0; line-height: 1.5rem;}
li.cs-list-item-outcomes {padding-left: 4%; background-image: url('/_images/check-round.svg'); background-repeat: no-repeat; background-size: 15px 15px; background-position: 0 6px; margin: 0 0 2% 0; line-height: 1.5rem;}
li.skills-list-item {font-size: 0.9rem;}

p {line-height: 1.5rem;}
p.intro {margin: 0 0 0 0; font-size: 1.2rem; line-height: 1.8rem;}
p.small {font-size: 0.8rem;}

.sectionnav {display: flex; width: 50%; margin: 0 auto 0 auto;}
.sectionnav-labels {display: flex; width: 50%; margin: 0.5% auto 0 auto;}
.sectionnav-01 {display: flex; width: 33.33%; text-align: center; justify-content: center;}
.sectionnav-02 {display: flex; width: 33.33%; text-align: center; justify-content: center;}
.sectionnav-03 {display: flex; width: 33.33%; text-align: center; justify-content: center;}

.skills-list {list-style: none; margin: 0 0 0 0; padding: 0 0 0 0;}
.skills-list-item {line-height: 1.5rem; font-family: 'Open Sans'; font-weight: 300; font-size: 1rem;}
.skills-list-item::before {content: ""; display: inline-block; width: 15px; height: 15px; background-image: url('/_images/check.svg'); background-size: contain; background-repeat: no-repeat; margin-right: 8px; vertical-align: middle;}

.skills-row {display: flex; width: 90%; margin: 3% 0 0 5%;}
.skills-col-01 {display: flex; width: 50%; justify-content: top; flex-wrap: nowrap}
.skills-col-02 {display: flex; width: 50%; justify-content: top; flex-wrap: nowrap}

.skills-apps {display: flex; width: 100%; margin: 2% 0 0 3%;}
.skills-apps-item {display: flex; width: 20%; justify-content:center; align-items: center; flex-wrap: nowrap}

span.bold {font-weight: 600;}
span.pipe {color: #EBE5E5;}

ul.cs-list {margin: 3% 0 0 0; list-style: none; padding-left: 3%;}
ul.globalnav {list-style: none; width: 100%;}


/* Anti-Spam Fields */
.antispam {margin-bottom: 3%;}
.antispamtitle {margin: 0 0 2% 0; font-family: Roboto; font-weight: 500; font-size: 1rem; margin-bottom: 1%;}
.antispamdesc {font-family: 'Open Sans'; font-weight: 300; font-size: 0.9rem; margin-bottom: 2%; width: 60%;}
.antispamquestion {font-family: 'Open Sans'; font-weight: 300; font-style: italic; font-size: 1rem; margin-bottom: 1%;}
.antispamformfield {width: 50%; padding: 0.75rem 1rem 0.75rem 1rem; border: 1px solid #C0C0C0; border-radius: 15px; font-size: 0.7rem; color: #555555; font-family: 'Open Sans';}
.antispamformfield::placeholder {color: #aaaaaa;}


/* Case study tabs */
.tab {background-color: #ffffff;}
.tab button {background: white; border: none; padding: 0 0 0.5% 0; margin: 0 3% 0 0; font-family: Roboto; font-weight: 200; font-size: 0.9rem; color: #555555;}
.tab button:hover {border-bottom: 3px solid #C6A49A; cursor: pointer;}
.tab button.active {border: 0; border-bottom: 3px solid #C6A49A; background-color: white; font-weight: 700;}
.tabcontent {animation: fadeEffect 1s; color: #555555; font-family: 'Open Sans'; font-weight: 300; font-size: 1rem; line-height: 1.5rem;}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


/* CAROUSEL SYSTEM ------------------*/

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {max-width: 1000px; position: relative; margin: auto;}

/* Hide the images by default */
.mySlides {display: none;}

/* Next & previous buttons */
.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: grey; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}

/* Position the "next button" to the right */
.next {right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: grey; color: #ffffff; text-decoration: none;}

/* Caption text */
.text {font-size: 0.78em; padding: 0.75em 0 0 0; width: 100%; text-align: center;}

/* Number text (1/3 etc) */
.numbertext {color: #00ff00; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}

/* The dots/bullets/indicators */
.dot {cursor: pointer; height: 10px; width: 10px; margin: 0 2px; border: 1px solid #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;}

.active, .dot:hover {background-color: #717171;}

/* Fading animation */
.fade {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.centered {text-align: center;}