@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap'); */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat'; outline: 0; }
html,body { height: 100%; }
body { width: 100%; min-height: 100%; background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: #5F249F; color: #fff; }
img { display:block; max-width: 100%; }
a { text-decoration: none; }
a.btn { display: flex; align-items: center; justify-content: center; height: 45px; width: auto; padding: 10px 25px; border-radius: 50px; background: #7FCAC7; color: #fff; font: 500 12px 'Montserrat', sans-serif; letter-spacing: 1.7px; text-transform: uppercase;  }


header { display: flex; position: relative; align-items: center; justify-content: space-between; width: 100%; height: 100px; padding: 0 calc(50% - (1410px / 2)); border-bottom: 1px solid #ccc; background-color: #fff; }
h1 { margin-right: 50px; }
header nav { display: flex; }
header nav ul { display: flex; align-items: center; gap: 40px; list-style-type: none; }
header nav ul li a { display: flex; align-items: center; font: 500 16px 'Montserrat', sans-serif; color: #111; }
header nav ul li a.menu:after { content: ''; display: block; width: 12px; height: 7px; background: url('/img/ui/i-arrow.svg') no-repeat center; background-size: 12px 7px; transition: transform 333ms linear; margin-left: 12px; transform-origin: center; }
header nav ul li a.menu.active:after { transform: rotate(180deg); }

header div { display: flex; align-items: center; gap: 40px; }
/* webinar header announcement */
header div a:first-of-type { display: none; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; padding-left: 50px; background: url('../img/ui/i-webinar.svg') no-repeat top left / contain; background-size: 40px 40px; }

header div a:first-of-type span:first-child { font: bold 12px 'Montserrat', sans-serif; color: #5F249F; }
header div a:first-of-type span:last-child { font: 400 12px / 18px 'Montserrat', sans-serif; color: #8a8a8a; max-width: 325px; }

header a[href*="contact"] { display: flex; align-items: center; justify-content: center; padding: 0 25px; background-color: #7FCAC7; border-radius: 50px; height: 45px; text-transform: uppercase; font: 700 12px 'Montserrat', sans-serif; letter-spacing: 0.15em; color: #fff; transition: background-color 222ms linear; }
header a[href*="contact"]:hover { background: #00968F; }

.nav-services { display: none; transition: max-height 333ms ease-in-out; position: absolute; top: 100%; left: 0; z-index: 5000; justify-content: center; flex-wrap: wrap; width: 100%; background-color: #fff; box-shadow: 0 30px 15px rgba(0,0,0,0.15); padding: 40px calc(50% - (1400px /2)); }
.nav-services.active { display: flex; }
.nav-services > a { display: flex; width: calc(100% / 3); padding: 0; opacity: 0; }
.nav-services > a > div { display: flex; padding: 0 40px 0 25px; margin-bottom: 60px; }
.nav-services > a > div > div { display: block; }
.nav-services > a > div > div > span { display: block; font-weight: 400; font-size: 16px; letter-spacing: 4px; margin-bottom: 13px; color: #5F249F; text-transform: uppercase; }
.nav-services > a:before { content: ''; display: block; width: 60px; height: 60px; min-width: 60px; min-height: 60px; background-size: 60px 60px; background-position: center; background-repeat: no-repeat; }
.nav-services > a:nth-of-type(1):before { background-image: url('/img/ui/i-implementation.svg'); }
.nav-services > a:nth-of-type(2):before { background-image: url('/img/ui/i-user-experience.svg'); }
.nav-services > a:nth-of-type(3):before { background-image: url('/img/ui/i-managed-services.svg'); }
.nav-services > a:nth-of-type(4):before { background-image: url('/img/ui/i-apps-and-integrations.svg'); }
.nav-services > a:nth-of-type(5):before { background-image: url('/img/ui/i-advisory.svg'); }
.nav-services > a:nth-of-type(6):before { background-image: url('/img/ui/i-experience-hub.svg'); }
.nav-services > a:nth-of-type(7):before { background-image: url('/img/ui/i-content-strategy.svg'); }
.nav-services > a:nth-of-type(8):before { background-image: url('/img/ui/i-training-management.svg'); }
.nav-services > a > div > div > p { display: block; font-size: 12px; line-height: 23px; color: #444; }

@keyframes fadein { 100% { opacity: 1; } }
.nav-services.active > a { animation: fadein 0.65s ease-in-out forwards; }
.nav-services.active > a:nth-of-type(1) { animation-delay: 0.15s; }
.nav-services.active > a:nth-of-type(2) { animation-delay: 0.30s; }
.nav-services.active > a:nth-of-type(3) { animation-delay: 0.45s; }
.nav-services.active > a:nth-of-type(4) { animation-delay: 0.60s; }
.nav-services.active > a:nth-of-type(5) { animation-delay: 0.75s; }
.nav-services.active > a:nth-of-type(6) { animation-delay: 0.90s; }
.nav-services.active > a:nth-of-type(7) { animation-delay: 1.05s; }
.nav-services.active > a:nth-of-type(7) { animation-delay: 1.20s; }

#video { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: calc(100vh - 250px); overflow: hidden; object-fit: cover; }
#video p { display: block; position: relative; z-index: 10; max-width: 900px; font: 300 32px/47px 'Montserrat', sans-serif; color: #fff; opacity: 0; transform: translateY(100px); animation: impacts 4.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: 1s; }
#video p:before { display: block; text-transform: uppercase; content: 'Go further with DXC and Cornerstone Galaxy'; font-weight: bold; font-style: italic; padding-bottom: 0.5em!important; }
@keyframes impacts { 100% { opacity: 1; transform: translate(0); }}
#video video { display: block; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border-radius: 1px; object-fit: cover; opacity: 0; animation: fadein 4.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;  }
#video:after { content: ''; display: block; width: 30px; height: 30px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); position: absolute; bottom: 12%; left: calc(50% - 25px); z-index: 10; animation: arrowdown 0.7s ease-in-out infinite alternate; }
@keyframes arrowdown { 100% { transform: translateY(20px) rotate(45deg); } }

#stats { display: flex; align-items: center; justify-content: space-around; width: 100%; max-width: 1400px; height: 150px; margin: auto; padding: 0 40px;  }
#stats div { display: block; transform: translateY(-4px); }
#stats span { display: block; text-align: center; font-size: 16px; line-height: 25px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; }
#stats span + span { font-weight: 300; font-size: 30px; margin-top: 15px; text-transform: none; letter-spacing: 0.05em; }

#index { padding-bottom: 200px; }
#index h3 { display: block; margin: 50px auto; text-align: center; font-size: 32px; font-weight: 300; letter-spacing: 10px; color: #5F249F; text-transform: uppercase; }

#index #services { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 1440px; margin: auto; padding: 40px; }
#index #services > div { display: flex; flex-direction: column; justify-content: stretch; width: calc(100% / 3); height: 400px; padding: 30px 40px; border: 1px solid #ccc; }

#index #services > div:nth-of-type(1) { border-top: none; border-left: none; border-right: none; }
#index #services > div:nth-of-type(2) { border-top: none;  }
#index #services > div:nth-of-type(3) { border-top: none; border-left: none; border-right: none; }
#index #services > div:nth-of-type(4) { border-top: none; border-left: none; border-right: none; }
#index #services > div:nth-of-type(5) { border-top: none; }
#index #services > div:nth-of-type(6) { border-top: none; border-left: none; border-right: none; }
#index #services > div:nth-of-type(7) { border: none; }
#index #services > div:nth-of-type(8) { border-top: none; border-bottom: none; }
#index #services > div:nth-of-type(9) { border: none; }

#index #services h4 { display: block; margin: 1em auto 1em auto; text-align: center; font: 400 18px 'Montserrat', sans-serif; color: #222; letter-spacing: 5px; text-transform: uppercase; }
#index #services h4:before { content: ''; display: block; width: 60px; height: 60px; margin: 0 auto 25px auto; background-repeat: no-repeat; background-position: center; background-size: 60px 60px; }

#index #services > div:nth-of-type(1) h4:before { background-image: url('/img/ui/i-implementation.svg'); }
#index #services > div:nth-of-type(2) h4:before { background-image: url('/img/ui/i-user-experience.svg'); }
#index #services > div:nth-of-type(3) h4:before { background-image: url('/img/ui/i-managed-services.svg'); }
#index #services > div:nth-of-type(4) h4:before { background-image: url('/img/ui/i-apps-and-integrations.svg'); }
#index #services > div:nth-of-type(5) h4:before { background-image: url('/img/ui/i-advisory.svg'); }
#index #services > div:nth-of-type(6) h4:before { background-image: url('/img/ui/i-experience-hub.svg'); }
#index #services > div:nth-of-type(7) h4:before { background-image: url('/img/ui/i-content-strategy.svg'); }
#index #services > div:nth-of-type(9) h4:before { background-image: url('/img/ui/i-training-management.svg'); }

#index #services > div > div > p { font-size: 14px; line-height: 32px; text-align: center; margin: 1.5	em auto; }

#index #services > div > div >  a { display: flex; align-items: center; justify-content: center; width: fit-content; height: 45px; min-height: 45px; padding: 0 25px; border-radius: 50px; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 2em auto; background-color: #7FCAC7; color: #fff; font-size: 12px; letter-spacing: 2px; font-weight: 600; transition: background-color 333ms linear; }
#index #services > div > div > a:hover { background-color: #00968F; }

/* Services Styles */

h2 { overflow: hidden; margin: 50px auto; padding: 0; }
h2 > span { display: block; font: 300 33px/46px 'Montserrat', sans-serif; color: #5F249F; text-transform: uppercase; letter-spacing: 10px; text-align: center; transform: translateY(50px); animation: slideup 2.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes slideup { 100% { opacity: 1; transform: translate(0); }}



section:not(#index) { width: 100%; max-width: 1330px; margin: auto; padding: 0 50px 200px 50px; }

.intro { display: flex; align-items: flex-start; justify-content: center; gap: 50px; }
.intro > div { display: block; max-width: 380px; color: #777; opacity: 0; transform: translateY(100px); }
.intro span { display: block; font-size: 30px; line-height: 45px; margin-bottom: 25px; }
.intro p { display: block; font-size: 16px; line-height: 32px; }
.intro p + a { display: flex; align-items: center; justify-content: center; width: fit-content; height: 45px; min-height: 45px; padding: 0 25px; border-radius: 50px; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 2em 0; background-color: #7FCAC7; color: #fff; font-size: 12px; letter-spacing: 2px; font-weight: 600; transition: background-color 333ms linear; }
.intro p + a:hover { background-color: #00968F; }
.intro > figure { flex: 1; max-width: 600px; opacity: 0; transform: translateX(60px); }

.services { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; padding: 50px 0; gap: 40px; }
.services > div { display: block; position: relative; width: calc((100% /3) - 33px); height: auto; min-height: 415px; margin: 25px 0; background-color: #fff; opacity: 0; transform: translateY(200px); }
.services > div:after { content: ''; display: block; width: 250px; height: 250px; position: absolute; z-index: -2; right: 0; bottom: 0; background-color: #eee; filter: blur(30px); border-radius: 50%; transform: translate(25%,25%);  }
.services > div:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: -1; right: 0; bottom: 0; background-color: #fff; }
.services h4 { display: flex; align-items: flex-end; height: 125px; padding: 0 40px 25px 40px; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; font-size: 14px; line-height: 24px; }
.services > div:nth-of-type(1) > h4 { background-color: #00A3E1; }
.services > div:nth-of-type(2) > h4 { background-color: #00968F; }
.services > div:nth-of-type(3) > h4 { background-color: #39C4CE; }
.services > div:nth-of-type(4) > h4 { background-color: #5F249F; }
.services > div:nth-of-type(5) > h4 { background-color: #CE3939; }
.services > div:nth-of-type(6) > h4 { background-color: #ED9B33; }
.services p { display: block; padding: 30px 40px; font-size: 14px; line-height: 26px; color: #777; }

.services ul { list-style-type: none; padding: 30px 40px; }
.services ul li:before { content: ''; display: block; width: 10px; height: 10px; min-width: 10px; min-height: 10px; background-color: #ccc; margin-right: 15px; transform: translateY(3px); }
.services ul li { display: flex; align-items: flex-start; color: #777; margin-bottom: 15px; font-size: 14px; }

.services > div { animation: slideup 2.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.services > div:nth-child(1) { animation-delay: 1.5s; }
.services > div:nth-child(2) { animation-delay: 1.75s; }
.services > div:nth-child(3) { animation-delay: 2s; }
.services > div:nth-child(4) { animation-delay: 2.25s; }
.services > div:nth-child(5) { animation-delay: 2.5s; }
.services > div:nth-child(6) { animation-delay: 2.75s; }


/* Apps & Integrations */

#apps figure { max-width: 100%; }

.examples { display: block; width: 100%; padding: 20px 0 70px 0; margin: 60px auto; }
.examples h3 {display: block; margin: 0 auto 25px auto; font-size: 28px; font-weight: 300; color: #777; text-align: center; }
.examples ul { list-style-type: none; display: flex; flex-wrap: wrap; }
.examples ul li { font-weight: 400; font-size: 14px; padding: 10px 0; width: calc(100% / 3); text-align: center; color: #777; }

#apps .products { display: flex; flex-wrap: wrap; justify-content: space-between; }
#apps .products > div { display: flex; width: calc(50% - 35px); margin-bottom: 50px; }
#apps .products > div > div { padding-left: 50px; }
#apps .products > div:before { content: ''; display: block; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; background-repeat: no-repeat; background-size: 100px 100px; background-position: center;}
#apps .products > div:nth-of-type(1):before { background-image: url('/img/ui/i-inattendance.png'); }
#apps .products > div:nth-of-type(2):before { background-image: url('/img/ui/i-google-analytics.png'); }
#apps .products > div:nth-of-type(3):before { background-image: url('/img/ui/i-cpd.png'); }
#apps .products > div:nth-of-type(4):before { background-image: url('/img/ui/i-msteams.png'); }
#apps .products > div:nth-of-type(5):before { background-image: url('/img/ui/i-gototraining.png'); }
#apps .products h3 { font-size: 24px; font-weight: 300; line-height: 36px; color: #5F249F; text-transform: uppercase; letter-spacing: 6px; }
#apps .products p { display: block; margin: 15px auto 25px auto; font-size: 16px; line-height: 32px; color: #777; }
#apps .products  a { display: flex; align-items: center; justify-content: center; width: fit-content; height: 45px; min-height: 45px; padding: 0 25px; border-radius: 50px; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 2em 0; background-color: #7FCAC7; color: #fff; font-size: 12px; letter-spacing: 2px; font-weight: 600; transition: background-color 333ms linear; }
#apps .products a:hover { background-color: #00968F; }

/* Advisory */

#advisory .intro { gap: 80px; }


/* Content Strategy */

#content .intro figure { max-width: 100%; }

/* Experience Hub */

#xhub .intro figure { max-width: 100%; }
#xhub .services p { display: block; padding: 20px 40px 0 40px!important; font-size: 14px; font-weight: 700; line-height: 26px; color: #222; }

/* Implementation */
#implementation .intro figure { max-width: 100%; }
#implementation .steps h3 { color: #777; text-align: center; display: block; margin: 50px auto; font-weight: 300; font-size: 30px; }
#implementation .info { padding: 50px 0; }
#implementation .info p { display: block; font-size: 16px; line-height: 32px; color: #777; margin-bottom: 25px;  }

/* Managed Services */
#mservices .intro figure { max-width: 100%; }
.mservices { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 50px 0; }
.mservices h3 { display: block; width: 100%; text-align: center; font-weight: 300; font-size: 30px; line-height: 45px; color: #777; margin-bottom: 70px; }
.mservices > div { display: flex; position: relative; width: calc(50% - 40px); height: auto; margin: 0 0 60px 0; background-color: #fff; opacity: 0; transform: translateX(-50px); }
.mservices > div:before { content: ''; display: block; width: 70px; height: 70px; min-width: 70px; min-height: 70px; margin-right: 50px; background-position: center; background-repeat: no-repeat; background-size: contain; }

.mservices > div:nth-of-type(1):before	{ background-image: url('/img/ui/i-portal-administration.svg'); }
.mservices > div:nth-of-type(2):before	{ background-image: url('/img/ui/i-end-user-support.svg'); }
.mservices > div:nth-of-type(3):before	{ background-image: url('/img/ui/i-release-management.svg'); }
.mservices > div:nth-of-type(4):before	{ background-image: url('/img/ui/i-portal-optimization.svg'); }

.mservices h4 { display: block; font-weight: 300; font-size: 21px; margin-bottom: 20px; color: #5F249F; letter-spacing: 5px; text-transform: uppercase; }
.mservices p { display: block; font-size: 14px; line-height: 26px; color: #777; }

/* User Experience */

#ux .intro figure { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; position: relative; max-width: 100%;  }
#ux .intro figure img { width: 88%; }
#ux .intro figure div { display: block; width: 25%; position: absolute; bottom: 13%; left: -25px; transform: translateY(-350px); animation: uxfig2 4.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; animation-delay: 100ms; }
#ux .intro figure div img { max-width: 100%; }
@keyframes uxfig2 { 100% { transform: translate(0,0); } }

.uxservices { padding: 50px 0; }
.uxservices > div { display: flex; align-items: flex-start; gap: 80px; margin: 50px auto; }
.uxservices > div > * { width: 50%; }
.uxservices > div > div { padding-top: 25px; }
.uxservices > div:nth-of-type(even) > div { order: 2; }
.uxservices h3 { display: block; width: 100%; color: #5F249F; text-transform: uppercase; font-size: 26px; letter-spacing: 6px; font-weight: 300; margin: 0 auto 30px auto; }
.uxservices p { display: block; font-size: 16px; line-height: 32px; color: #777; }
.uxservices  a { display: flex; align-items: center; justify-content: center; width: fit-content; height: 45px; min-height: 45px; padding: 0 25px; border-radius: 50px; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin: 2em 0; background-color: #7FCAC7; color: #fff; font-size: 12px; letter-spacing: 2px; font-weight: 600; transition: background-color 333ms linear; }
.uxservices a:hover { background-color: #00968F; }

/* Training Management */

#training-management img { max-width: 100%; }
#training-management .intro > figure { max-width: none; }
#training-management .services p { display: block; padding: 20px 40px 0 40px!important; font-size: 14px; font-weight: 700; line-height: 26px; color: #222; }
#training-management .screenshots { display: flex; align-items: flex-start; gap: 40px; }
#training-management .screenshots figure { display: block; width: 50%; }
#training-management .screenshots figure img { max-width: 100%; }
#training-management .video { display: block; margin: auto; padding: 80px 0; text-align: center; max-width: 600px; }
#training-management .video p { display: block; font-size: 16px; line-height: 32px; text-align: center; margin-bottom: 40px; }
#training-management .video a { width: fit-content; margin: auto; }




/* Work */

nav.work-tags { display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
nav.work-tags a { display: block; margin: 0 20px 40px 20px; font: 400 16px 'Montserrat', sans-serif; color: #777; letter-spacing: 5px; text-transform: uppercase; }
nav.work-tags a.active { color: #5F249F!important; }
#work select { display: none; width: 100%; margin: 25px auto; padding: 15px 20px; font: 400 16px 'Montserrat', sans-serif; color: #5F249F; border: 1px solid #ccc; outline: 0; }
.work { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; }
.work div { display: block; position: relative; width: calc(100% / 5); border: 1px solid #ccc; }
.work div:hover { cursor: pointer; }

.lightbox { display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); transition: all 444ms linear; }
.lightbox > a.close { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; z-index: 9999; width: 80px; height: 80px; text-indent: -9000px; }
.lightbox > a.close:before, .lightbox > a.close:after { content: ''; display: block; width: 50%; border-bottom: 2px solid #fff; position: absolute; top: calc(50% - 1px); left: 20px; transform-origin: center; }
.lightbox > a.close:before { transform: rotate(-45deg); }
.lightbox > a.close:after { transform: rotate(45deg); }
.lightbox a.arrow { display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; position: fixed; top: 50%; transform: translate(0,-50%); }
.lightbox a.arrow:before { content: ''; opacity: 0; transition: opacity 333ms; transform-origin: center; display: block; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff; position: absolute; top: 20px; left: 20px; }
.lightbox a.arrow:hover:before { opacity: 1; }
.lightbox a.arrow:after { content: ''; display: block; width: 15px; height: 15px; border-top: 2px solid #fff; border-left: 2px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-15%,-50%) rotate(-45deg); }
.lightbox a.arrow.prev { left: 0; }
.lightbox a.arrow.next { right: 0; }
.lightbox a.arrow.next:after { transform: translate(-60%,-50%) rotate(135deg); }
.lightbox > figure { display: block; width: 80%; max-width: 1400px; margin: auto; }
.lightbox > figure > img { display: block; max-width: 100%; margin: auto; transition: all 250ms ease-in-out; }
.lightbox > figure > img.load { opacity: 0; }
.lightbox.close { background-color: rgba(0,0,0,0); }
.lightbox.close > figure { transform: translateY(-100%); opacity: 0; }

/* Contact */

#contact form { display: flex; width: 100%; max-width: 1110px; margin: auto; gap: 50px; }
#contact form > div:first-child { min-width: 400px; max-width: 400px; }
#contact form > div:last-child { display: flex; flex-flow: column; flex: 1; width: 100%; }
#contact form > div > div { position: relative; margin-bottom: 25px; }
#contact label { display: none; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #222; }
#contact input[type="text"]::placeholder, #contact input[type="tel"]::placeholder, #contact textarea::placeholder { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #222;  }
#contact textarea::placeholder { padding-top: 0px; }
#contact input[type="text"], #contact input[type="tel"] { border: none; background-color: #f0f0f0; width: 100%; height: 50px; padding: 20px; }
#contact p { display: block; font-size: 12px; line-height: 23px; color: #222; }
#contact p a { font-weight: 700; color: #222; }
#contact textarea { width: 100%; min-height: 425px; padding: 20px; border: none; background-color: #f0f0f0; }
#contact input[type="submit"] { display: flex; align-items: center; justify-content: center; height: 48px; margin: 15px 0 0 0; padding: 0 25px; font: 400 14px 'Montserrat', sans-serif; color: #fff; letter-spacing: 2px; background-color: #00968F; border-radius: 8px; border: none; text-transform: uppercase; float: right; }





@media all and (max-width: 1600px){
	header { padding: 0 40px;}
}

@media all and (max-width: 1400px){
	.nav-services { padding: 40px; }
	.nav-services > a { width: 50%; }
}

@media all and (max-width: 1200px){
	#index #services { padding: 40px 0; }
	#index #services > div { width: 50%; padding: 15px 40px; }
	#index #services > div:nth-of-type(2) { border-right: none; }
	#index #services > div:nth-of-type(4) { border-left: 1px solid #ccc; }
	#index #services > div:nth-of-type(5) { border-left: none; border-right: none; }
	#index #services > div:nth-of-type(6) { border-left: 1px solid #ccc; }
}

@media all and (max-width: 1024px){
	#video p { font: 300 25px/40px 'Montserrat', sans-serif; max-width: 80%; }
	#stats span { font-size: 13px; line-height: 23px; }
	#stats span + span { font-size: 23px; margin-top: 10px; }
	.intro { flex-wrap: wrap; }
	.intro > div { width: 100%; max-width: none; padding: 0 0 60px 0; }
	.intro > div > span { font-size: 24px; line-height: 34px; }
	.intro > figure { order: -1; flex: none; max-width: 80%; margin: auto; }
	.services > div { width: calc(50% - 20px); }
	.products > div { width: 100%; }
	.examples ul li { width: 100%; }
	.mservices > div { width: calc(50% - 20px); }
	.uxservices > div { width: 100%!important; }
	nav.work-tags { flex-wrap: wrap; }
	.work a { width: calc(100% / 4); }
	#contact form { flex-wrap: wrap; }
	#contact form > div { width: 100%; max-width: none!important; min-width: 0; }
	#contact form > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; }
	#contact form > div:first-child > div { width: calc(50% - 20px); }
	#contact form > div:last-child { flex: none; }
	#contact form > div:first-child > div:last-child { display: none; }
}

@media all and (max-width: 768px){
	#stats { flex-wrap: wrap; justify-content: center; height: auto; padding: 30px 0; }
	#stats > div { width: calc(100% / 3); margin: 0 0 25px 0; }
	#stats span { font-size: 13px; line-height: 23px; }
	#stats span + span { font-size: 23px; margin-top: 10px; }
	.nav-services { padding: 30px 20px 30px 30px; }
	.nav-services > a { width: 100%; }
	.nav-services > a:before { content: ''; display: block; width: 40px; height: 40px; min-width: 40px; min-height: 40px; background-size: 40px 40px; background-position: center; background-repeat: no-repeat; }
	.nav-services > a > div { margin-bottom: 40px; }
	#index #services { padding: 30px; }
	#index #services > div { width: 100%; height: auto; border: none!important; border-bottom: 1px solid #ccc!important; }
	.intro > div { padding: 0 0 30px 0; }
	#apps .products { padding: 0; }
	#apps .products > div { display: block; width: 100%; }
	#apps .products > div:before { min-width: 40px; min-height: 40px; max-width: 40px; max-height: 40px; background-size: contain; margin-bottom: 15px;  }
	#apps .products > div > div { padding-left: 0; }
	#apps .products h3 { font-size: 21px; line-height: 32px; }
	#apps .producs p { font-size: 14px; }
	.mservices > div { width: 100%; min-height: 0; }
	.uxservices > div { flex-wrap: wrap; gap: 40px; }
	.uxservices > div > * { width: 100%!important; }
	.uxservices > div > div { order: 1!important; padding-top: 0; }
	.uxservices h3 {font-size: 22px; letter-spacing: 4px; font-weight: 400; margin: 0 auto 20px auto; }
	.uxservices > div > figure { max-width: 400px; }
	nav.work-tags { display: none; }
	#work select { display: block; }
	.work a { width: calc(100% / 3); }
	#contact form > div:first-child { min-width: 0; max-width: 100%; }
	#contact form > div:first-child > div { width: 100%; }
	.lightbox > figure { width: 100%; max-width: 100%; }
}

@media all and (max-width: 600px){
	header { flex-wrap: wrap; height: auto; padding: 20px 30px; align-items: flex-start; }
	h1 { margin-bottom: 15px; }
	h2 > span, #index h3 { font-size: 26px; line-height: 40px; letter-spacing: 5px; }
	header nav { flex: 1; flex-wrap: wrap; }
	header nav ul { width: 100%; margin-top: 10px; justify-content: flex-start; }
	header a[href*="contact"] { position: absolute; top: 20px; right: 30px; }
	section:not(#index) { padding: 0 30px 200px 30px; }
	#video p { font: 300 18px/30px 'Montserrat', sans-serif; max-width: 80%; }
	#stats { justify-content: center; }
	#stats > div { width: 50%; }
	#index #services { padding: 0; }
	#index #services > div > div > p { font-size: 12px; line-height: 24px; }
	.services { padding: 0; }
	.services > div { width: 100%; }
	.intro > div { width: 100%; padding-top: 0; }
	.mservices { padding: 0; }
	.mservices h4 { font-size: 21px; letter-spacing: 3px; font-weight: 400; margin-bottom: 15px; }
	.mservices > div:before { width: 50px; height: 50px; min-width: 50px; min-height: 50px; margin-right: 30px; }
	.work { gap: 40px; }
	.work a { width: 100%; }
}

@media all and (max-width: 400px){
	#stats span { font-size: 10px; line-height: 20px; }
	#stats span + span { font-size: 20px; margin-top: 10px; }
}