/* GENERAL SETTINGS AND COMMON STYLES */
body {
  padding:20px;
  font-feature-settings: "liga";
  font-size:16px;
  font-family: 'Manrope', sans-serif;
  margin: 0px
}

:focus {
  outline: none;
}

header,main,footer {max-width:1660px; margin: 0 auto; box-sizing: border-box;}
main {overflow:auto;}

a.button {text-decoration: none;text-transform: uppercase; font-size: 1rem; line-height: 1.2; font-family: 'Proza Libre', sans-serif; color:#fff; background: #5069b4; border-radius: 6px;padding: 12px 20px;font-weight:600; vertical-align: middle;}
a.button:hover {background:#5b72b9;}
a.button i {font-size: 1.25em; vertical-align:middle; line-height:1; margin-top:-3px; font-weight:700;}
a.button.falcon {background:#db9f1f;}
a.button.falcon:hover {background:#e0a629;}
a.button.barley {background:#dc5a56;}
a.button.barley:hover {background:#df6762;}

h1 {margin:0 0 30px 0;font-family: 'Proza Libre', sans-serif;font-weight: 700;line-height: 1.2;font-size:4.8em;}
h2 {margin:0 0 30px 0;font-family: 'Proza Libre', sans-serif;font-weight: 400;line-height: 1.3;font-size:2.3em;}
p {margin:0 0 10px 0;font-weight: 400;line-height:1.5; font-size:1.125em;}
section { display: flex; justify-content: space-between; flex-wrap:wrap; border-radius: 6px;}

/* HEADER AND NAVIGATION */
header {display:flex; justify-content: space-between; flex-flow: row wrap; align-items:center; margin-bottom: 20px; position: relative;}
header #logo {width: 100px;}
header #logo img{width: 100%; height: auto;}
header nav ul { display: flex; flex-flow: row wrap; justify-content: flex-end; align-items: center; margin: 0; padding: 0;}
header nav ul li { list-style: none; font-size: 1.4rem; line-height: 1; margin-right:50px; padding: 0; font-weight:700;}
header nav ul li a:hover { color:#666;}
header nav ul li:nth-of-type(1) a:hover { color:#df6762;}
header nav ul li:nth-of-type(2) a:hover { color:#e0a629;}
header nav ul li:nth-of-type(3) a:hover { color:#4b69c3;}
header nav ul li.active:nth-of-type(1) a { color:#dc5a56;}
header nav ul li.active:nth-of-type(2) a { color:#e5b348;}
header nav ul li.active:nth-of-type(3) a { color:#5069b4;}
header nav ul #service { background: #e87773; border-radius: 6px; padding: 12px 20px; margin: 0;}
header nav ul #service:hover { background: #df6762;}
header nav ul #service a { color:#fff;}
header nav ul #service a:hover { color:#fff;}
header nav a {color: #000; text-decoration: none; text-transform: uppercase;font-family: 'Proza Libre', sans-serif;}

header .hamburger {display: none; position: absolute; right: 0px; top: 10px; z-index: 100}

/* FOOTER */
footer { position:relative; background: #D8ECF8; padding: 0 50px 50px; display: flex; justify-content: flex-start; flex-flow: row wrap; margin-top:90px; align-items: stretch; border-radius: 6px;}
footer #paper-globe-animation {position: absolute; mix-blend-mode: multiply; bottom: 0px; right: 200px; filter: opacity(0.7); object-fit: cover; height: 280px; width: 280px;}
footer :not(#paper-globe-animation) {position: relative; z-index: 1;}
footer a {color:#000; text-decoration: none;}
footer a:hover {color:#666;}
footer div {line-height: 1.8; font-size: 1rem; font-weight: 400; min-width:220px; margin-top: 50px}
footer div p {font-family: 'Manrope', sans-serif; font-size: 1em}
footer div:last-of-type {display: flex; flex: 1 0 220px; justify-content: space-between; flex-flow: column; align-items: flex-end;}
footer div:last-of-type a {margin-bottom: 50px;}
footer div:last-of-type p {max-width:100%; position:absolute; bottom:0; right:0; padding:0; margin:0;}
footer div:first-of-type p {margin-bottom: 10px; display: flex; align-items: center;}
footer div:first-of-type p:first-of-type {margin-bottom: 20px;}
footer .material-icons {font-size:1.4em; line-height:1; margin-right:16px;}
footer div:nth-of-type(2) h6 {margin:0 0 6px 0; padding:0 20px 6px 0; font-size:1.2em; border-bottom:1px solid #000; width:auto; display: inline-block;}
footer div:nth-of-type(2) a {display: inline-block; padding:0; margin:0; width:100%;}

/* SHARED STYLES */
main section.references {padding: 0px 50px; overflow: hidden;}
main section.references h5 {font-size: 2.4rem; line-height: 1.4; font-family: 'Proza Libre', sans-serif; padding: 0; margin-bottom: 50px; width:100%; margin-top: 50px}
main section.references p {margin-bottom: 60px; max-width:600px; font-family: 'Manrope';}
main section.references div.quote {margin:0px 0 60px 0; padding-left:80px; width:100%; position: relative;}
main section.references div.quote:before {content: "”"; font-size:15rem; display:block; position: absolute; z-index: 1; top: -75px; left: -15px;}
main section.references div.quote.barley:before {color:#e87773;}
main section.references div.quote.falcon:before {color:#e5b348;}
main section.references div.quote p {margin: 0px 0 4px 0; max-width:700px;}
main section.references div.quote p.quote-by {margin-top: 20px;}
main section.references ul {justify-content: flex-start; display:flex; padding:0; margin:0 -40px; flex-wrap: wrap;}
main section.references ul li {flex: 0 1 calc(16.66% - 80px); padding:0; margin: 0 40px; list-style: none; vertical-align: middle; display: flex; max-height:100px; margin-bottom:50px;}
main section.references ul li img {height:auto; width:100%; object-fit: contain;vertical-align: middle;}
main section.references article {border-top: 12px solid #e5b348; padding-top:30px; margin-bottom:60px; width:calc(33.33% - 27px); display: flex; align-items: flex-start;}
main section.references article img {width:100px; height:auto; display: inline-block; object-fit: contain;}
main section.references article h6 {font-size: 1em; line-height:1.33; font-weight: normal; margin: 0 0 0 20px;}

/* HOMEPAGE */
main section.hero {position:relative; height:620px; display:block; margin-bottom:40px; background: #D8ECF8; border-radius: 6px; overflow: hidden;}
main section.hero h1, main section.hero p {color:#000;}
main section.hero video {position:absolute; z-index:1; width:auto; height:100%; object-fit: contain; border-radius: 6px; right:0;}
main section.hero div.first {position:absolute; z-index:2; left: 0px; background:transparent; top: 60px; margin: 0; padding: 0 50px; max-width: 700px;}
main section.hero img {position:absolute; z-index:1; right:0; max-height:620px; object-fit: contain; border-radius: 6px;}
main section.hero h2 {color: #5069b4;}
main section.hero p {margin:0 0 60px 0;}
main section.services div {position:relative; overflow: hidden; width: calc(50% - 20px);; margin-bottom:40px; color:#fff; padding:50px; box-sizing: border-box;}
main section.services div h3 {font-family: 'Proza Libre', sans-serif; font-size: 2rem; text-transform: uppercase; margin: 0px 0px 30px 0px;}
main section.services div p {margin: 0 0 60px 0;}
main section.services div:nth-of-type(1) {background: #e87773; border-radius: 6px;}
main section.services div:nth-of-type(2) {background: #e5b348; border-radius: 6px;}
#it-support-animation, #applications-animation {mix-blend-mode: multiply;}
main section.services div #it-support-animation {position:absolute; right:0px; top:0px; opacity: 0;}
main section.services div #applications-animation {position:absolute; right:0px; bottom: 0px; opacity: 0;}
main section.services div :not(#it-support-animation, #applications-animation) {position: relative; z-index: 1;}
main section.services div.it-support #it-support-animation.in1 {animation-name: in;  animation-duration: 1s; opacity: 1;}
main section.services div.applications #applications-animation.in2 {animation-name: in2; animation-duration: 1s; opacity: 0.6;}
@keyframes in1 {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes in2 {
  from {opacity:0;}
  to {opacity:0.6;}
}

/* SUBPAGES */
main section.page-lead {flex-flow: row nowrap;}
main section.page-lead > div {border-radius: 6px; position:relative; margin: 30px 0px 60px; padding:50px;}
main section.page-lead div.emphasized {flex: 0 1 66%;}
main section.page-lead div.contact {flex: 1;}
main section.page-lead div.contact div:first-of-type {margin-bottom: 30px;}
main section.page-lead div.wide {width:calc(65% - 100px);}
main section.page-lead div.narrow {width:calc(35% - 100px);}
main section.page-lead div p {margin-bottom: 15px; display: flex; line-height: 1.6}
main section.page-lead div p .material-icons {font-size:1.4em; line-height:1; margin-right:16px;}
main section.page-lead div p a {color:#000; text-decoration:none;}
main section.page-lead div p a:hover {color:#666;}
main section.page-lead div.emphasized {background:#5069b4; color:#fff; margin-top:30px; position: relative; box-sizing: border-box;}
main section.page-lead div.emphasized.barley {background: #e87773;}
main section.page-lead div.emphasized.falcon {background: #e5b348;}
main section.page-lead div.emphasized.discrete {background: #f3f5f0; color:#000;}
main section.page-lead div.emphasized.discrete p {color:#000; margin-bottom:20px;}
main section.page-lead div.emphasized.barley .button.barley {margin: 0 0 10px;}
main section.page-lead div.emphasized.barley .button.barley .material-icons {margin: 0px;}
main section.page-lead div.emphasized img {position: absolute; right: 0px;}
main section.page-lead div.emphasized #it-support-animation {width: 50%; top: 0px;}
main section.page-lead div.emphasized #applications-animation {width: 40%; bottom: 30px; filter: opacity(0.6);}
main section.page-lead div.emphasized h4 {font-family: 'Proza Libre', sans-serif; font-size: 2em; line-height:1.5; margin:0; font-style: italic; width: 60%;}
main section.page-lead div.emphasized h3 {font-family: 'Proza Libre', sans-serif; font-size: 2em; line-height:1.5; margin:0; text-transform:uppercase; margin-bottom:20px;}
main section.page-lead div.emphasized p {margin: 0 0 15px 0; color: #fff; line-height: 1.5,}
main section.page-lead div.emphasized p a {color: #fff;}
main section.page-lead div.emphasized p a:hover {text-decoration: underline;}
main section.page-lead.service div.emphasized {flex: 0 1 48%;}
main section.page-lead.service div.emphasized a.button:hover {text-decoration: none;}
main section.page-lead.service div.emphasized a.button i {display:inline;}
main section.page-intro {border-radius: 12px; border: 10px solid #5069b4; padding:40px;}
main section.page-intro.gray {border: 10px solid #f3f5f0;}
main section.page-intro h4 { margin:0 0 30px 0; font-size:2rem; line-height:1.4; text-transform:uppercase; font-family: 'Proza Libre', sans-serif;}
main section.page-intro p { font-size:1.4rem; line-height:1.6; margin-bottom: 20px;}
main .outro {display: flex; justify-content: space-between; align-items: flex-start;}
main article.content {padding: 0 20px 0 50px; margin: 60px 0; width:calc(50% - 20px); box-sizing: border-box;}
main article.content p {padding-bottom: 20px; }
main aside.content {border-radius: 6px; position:relative; width:calc(50% - 20px); padding:50px; margin: 60px 0px; background:#f3f5f0; box-sizing: border-box;}
main aside.content h6 {font-size: 2rem; line-height: 1.4; margin: 0 0 30px; font-family: 'Proza Libre', sans-serif;}
main section.tiers {margin:80px 0 40px 0; padding:0 50px;}
main section.tiers h3 {width:100%; margin:0 0 30px 0; font-size:2em; line-height:1.4; text-transform:uppercase; font-family: 'Proza Libre', sans-serif;}
main section.tiers h4 {font-size:2rem;}
main section.tiers div.tier-box { padding: 30px 30px 50px; text-align: center; width: calc(33.33% - 27px); border-radius: 6px; box-sizing: border-box; }
main section.tiers div.tier-box.light {background: #f3f5f0; border-top: 12px solid #e87773;}
main section.tiers div.tier-box.darker {background: #f3f5f0; border-top: 12px solid #e5615d;}
main section.tiers div.tier-box.darkest {background: #f3f5f0; border-top: 12px solid #e14c47;}
main section.tiers div a.button { background:#dc5a56; display: inline-block; margin: 20px 0 30px 0;}
main section.tiers div a.button:hover {background:#df6762;}
main section.tiers div.info {width:100%; text-align:left; border: none; margin-bottom: 60px;}
main section.tiers div.info p {max-width:700px}
main section.projects {margin:80px 0 40px 0; padding:0 40px;}
main section.projects h3 {width:100%; margin:0 0 40px 0; font-size:2em; line-height:1.4; text-transform:uppercase; font-family: 'Proza Libre', sans-serif;}
main section.e-bonus {margin:80px 0 40px 0; background: url("../../assets/images/pattern.svg") 0 0/30px 30px;}
main section.e-bonus h2 {width:100%; margin:0 0 30px 0; font-size:2em; line-height:1.4; font-family: 'Proza Libre', sans-serif; font-weight:bold;}
main section.e-bonus h3 {margin:0 0 30px 0; font-size: 1.6rem; line-height:1.4; font-family: 'Proza Libre', sans-serif; font-weight:bold;}
main section.e-bonus div {width:50%; padding:30px 50px; box-sizing: border-box;}
main section.e-bonus div:nth-of-type(1) {background-color: #fdf9f2; mix-blend-mode: multiply;}
main section.e-bonus div img {max-width:150px; margin:0px 20px 20px 0px; mix-blend-mode: multiply;}


@media only screen and (max-width: 1440px) {
  h1 {font-size: 4rem;}
  h2 {font-size: 2rem;}
  p {font-size: 1rem;}
  main section.hero {height:520px;}
  main section.hero div.first {top: 40px; max-width: 480px;}
  main section.references ul li {flex: 0 1 calc(20% - 80px)};
}

@media only screen and (max-width: 1260px) {
  main section.hero div.first {max-width: 100%;}
  main section.hero h1 {font-size: 4.8rem;}
  header nav ul li {font-size: 1.2rem; margin-right: 40px;}
  main section.hero {height: auto; background: #f3f5f0; padding-bottom: 50px;}
  main section.hero div.first {position: static;}
  main section.hero video {position: static; width: 100%; height: auto; margin-bottom: 40px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
  main section.services div #applications-animation {top: 0px;}
  main section.references ul li {flex: 0 1 calc(25% - 80px);}
  main section.page-lead {flex-flow: row wrap;}
  main section.page-lead div.contact {flex: 0 1 66%; padding: 0px 50px; display: flex; justify-content: space-between;}
  main section.page-lead div.contact div {flex: 0 1 calc(50% - 30px);}
  main section.page-lead div.contact div:first-of-type {margin-bottom: 0px;}
  main section.page-lead div.emphasized h4 {width: 100%;}
}

@media only screen and (max-width: 1024px) {
  main section.page-lead div.emphasized {flex: 100%;}
  main section.page-lead div.contact {flex: 100%;}
  main section.references article {width: calc(50% - 20px);}

}

@media only screen and (max-width: 960px) {
  main section.hero h1 {font-size: 4rem;}
  main section.hero div.first {padding: 0px 40px;}
  main section.services div {padding: 40px 40px 50px;}
  main section.references h5 {margin-top: 20px; font-size: 2rem;}
  main section.references {padding: 0px 40px;}
  main section.tiers {padding: 0px 40px;}
  main section.tiers div.tier-box {width: 100%; margin-bottom: 40px;}
  footer {padding: 0 40px 50px;}
  main section.page-lead div.emphasized {padding: 40px;}
  main section.page-lead div.contact {padding: 0px 40px;}
  main .outro {flex-flow: row wrap;}
  main .outro .content {width: 100%; margin: 50px 0 0 0;}
  main .outro article.content {padding: 0px 40px;}
  main section.page-intro {padding: 30px;}
  main .outro aside.content {padding: 40px;}
  main section.e-bonus div {padding: 30px 40px;}
}

@media only screen and (max-width: 800px) {
  header #logo {width: 72px;}
  header nav {display: none;}
  header nav.mobile {display: block; align-content: center; width: 100%; height: 100%; position: fixed; z-index: 10; background: #f3f5f0; margin: 0px; left: 0px; top: 0px; overflow-y: auto;}
  header nav.mobile ul {padding: 0px 30px; margin: 200px 0px 40px; flex-flow: column nowrap; align-items: flex-end; justify-content: center; box-sizing: border-box; width: 100%; overflow-y: auto;}
  header nav.mobile ul li {margin: 0 0 50px 0; font-size: 1.8rem;}
  header nav.mobile ul li#service {line-height:140%; max-width:60%; text-align: right;}
  header .hamburger {display: block;}
  header .hamburger.is-active {position: fixed; margin-right: 20px; top: 30px; z-index: 1000}
  header .hamburger.is-active::after {content: ""; display: block; width: 100%; height: 100px; position: fixed; background: #f3f5f0; top: 0px; left: 0px; z-index: 100}
  main section.hero h1 {font-size: 3.2rem;}
  main section.services div {width: 100%;}
  main section.references ul li {flex: 0 1 calc(33.33% - 80px);}
  main section.page-lead div.emphasized h4 {font-size: 1.6rem;}
  main section.page-intro p {font-size: 1.2rem;}
  main section.references article {display: block;}
  main section.references article img {margin-bottom: 20px;}
  main section.references article h6 {margin: 0px;}
  main section.e-bonus {display: block;}
  main section.e-bonus div {width: 100%;}
  main section.page-lead.service div.emphasized {flex: 0 1 100%;}
  main section.page-lead.service div.emphasized.barley {margin-bottom:0;}
  main section.page-lead div.emphasized.discrete {margin: 40px 0px 60px;}
}

@media only screen and (max-width: 500px) {
  main section.hero video {width: 100vw; height: 71vw; object-fit: cover; object-position: 91%;}
  main section.hero div.first {padding: 0px 30px;}
  main section.hero h1 {font-size: 2.4rem;}
  main section.hero h2 {font-size: 1.5rem;}
  main section.services div {padding: 30px 30px 50px;}
  main section.services div h3 {font-size: 1.6rem;}
  main section.references {padding: 0px;}
  main section.references ul {margin: 0 -10px}
  main section.references ul li {flex: 0 1 calc(50% - 80px);}
  main section.references h5 {font-size: 1.6rem;}
  main section.tiers {padding: 0px; margin: 60px 0 0;}
  main section.tiers h3 {font-size: 1.6rem;}
  main section.tiers h3, main section.tiers .info {padding: 0px 30px;}
  main section.tiers div.tier-box {padding: 0 30px 30px;}
  footer #paper-globe-animation {bottom: 175px; right: 0px; width: 250px; height: 250px;}
  footer {padding: 0 30px 50px;}
  main section.page-lead div.emphasized {padding: 30px;}
  main section.page-lead div.emphasized h3 {font-size: 1.6rem;}
  main section.page-lead div.contact {padding: 0px 30px; display: block;}
  main section.page-lead div.contact div:first-of-type {margin-bottom: 30px;}
  main section.page-lead div.emphasized #it-support-animation {width: 80%;}
  main section.page-lead div.emphasized #applications-animation {width: 80%;}
  main section.page-lead > div:nth-of-type(2) {margin: 0 0 50px;}
  main section.references article {width: 100%;}
  main section.page-intro {padding: 30px 20px;}
  main section.page-intro h4 {font-size: 1.6rem;}
  main .outro article.content {padding: 0px 30px;}
  main .outro aside.content {padding: 30px;}
  main section.e-bonus {margin: 60px 0 40px;}
  main section.e-bonus h2 {font-size: 1.6rem;}
  main section.e-bonus div {padding: 30px;}
}


@media only screen and (max-width: 370px) {
  a.button {font-size: 0.8rem;}
  header nav.mobile ul li {font-size: 1.4rem; margin: 0 0 40px 0;}
  main section.hero video {height: 68vw; object-position: 108%;}
}