@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;800&display=swap');

html {scroll-behavior:smooth; font-family:'Poppins', sans-serif; font-weight:300; color:#191919}
*, *:after, *:before {-webkit-box-sizing:border-box; box-sizing:border-box}
* {padding:0; margin:0; list-style:none; text-decoration:none}
input[type='number'] {-moz-appearance:textfield}
select, input, textarea {font-family:'Poppins', sans-serif}
input:focus, select:focus, textarea:focus, button:focus {outline:none}
a {display:block; outline:none}
b {font-weight:600}
.clear {clear:both}
.container {width:1170px; margin:0 auto}

/* Stacked */
header ul li a, footer ul li a, .home-contact a:hover, footer.yellow .selected, footer.yellow a:hover, .team p, .services.yellow-bg h2, .services.dark-bg, .past-page header ul li .selected, .past-page header ul li a:hover, .offices .info a:hover {color:#fff}
.about header p, .about header ul li a, .about .intro-content h4, .about .intro-content p, footer.yellow ul li a, .nav header ul li a, .past-page header ul li a, .past-page header p {color:#191919}
header ul li a:hover, footer ul li a:hover, header ul li a.selected, footer .selected, .services-left .intro-content p b {color:#ffcc00}
header a img, footer img, .letter-c img {float:left}
.slides li:nth-child(1), .home-contact form input:nth-child(1), .home-contact form input[type="number"], .past-page .intro-content ul li:nth-child(1), .past-page .intro-content ul li:nth-child(5), .past-page .intro-content ul li:nth-child(7), .past-page .intro-content ul li:nth-child(10), .slidesM li:nth-child(1) {margin-left:0}

/* Mobile Menu */
#showRightPush {position:absolute; background:0; border:0; z-index:999; right:5px; top:35px; width:50px; display:none}
.intro #showRightPush, .contact #showRightPush {filter:invert(1)}
.cbp-spmenu {background:#ffcc00; position:fixed; padding-top:10px; overflow-x:scroll; width:220px; height:100%; top:0; right:-220px; z-index:99999}
.cbp-spmenu a {display:block; font-size:20px; font-weight:600; line-height:50px; padding-left:35px; border-bottom:1px solid rgba(0,0,0,0.2); height:50px; color:#000}
.cbp-spmenu a span {font-size:10px}
.cbp-spmenu.cbp-spmenu-open {right:0; box-shadow:10px 10px 50px #000}
.cbp-spmenu-push {overflow-x:hidden; position:relative; left:0}
.cbp-spmenu-push-toleft {left:-220px}
.cbp-spmenu, .cbp-spmenu-push {-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s ; transition:all 0.3s}
#close {border:none; background:url(../images/close.svg) no-repeat; background-size:16px; display:block; cursor:pointer; width:18px; height:18px; margin-left:180px; margin-top:12px}

/* HomePage */
section {width:100%; min-height:100vh; position:relative; overflow:hidden}
.intro, .who {background:#191919; padding-bottom:50px}
.intro > img, .services img {position:absolute}
.intro > img:nth-child(1) {left:50%; margin-left:-850px; animation:float 10s ease-in-out infinite}
.intro > img:nth-child(2) {right:50%; bottom:0; margin-right:-900px; animation: float 20s ease-in-out infinite}
@keyframes float {
0% {transform: translatey(0px)}
50% {transform: translatey(-20px)}
100% {transform: translatey(0px)}}
header {padding-top:40px; position:relative; z-index:9}
header p {font-size:19px; float:left; margin:20px 0 0 25px; color:#fff}
header ul, footer ul {font-size:18px; font-weight:600; float:right}
header ul li, footer ul li {float:left; margin:20px 0 0 55px}
header ul li a {overflow:hidden}
header ul li a span {position:relative; display:inline-block; -webkit-transition:-webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s}
header ul li a span::before {position:absolute; top:100%; content:attr(data-hover); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
header ul li a:hover span, header ul li a:focus span {-webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); transform:translateY(-100%)}
.intro-content h4 {margin-top:calc(50vh - 280px); font-size:34px; font-weight:300; opacity:0.5; color:#fff}
.intro-content h1, .team h2, .services h2, .offices h2 {font-size:110px; font-weight:600; color:#FFCB09; line-height:110px}
.intro-content p {font-size:34px; color:#fff; font-weight:600; max-width:840px; margin:30px 0}
.intro-content h1 span, .services-right h2 span {display:block}
.intro .intro-content h1 span:nth-child(1):after {content:"Bold."; animation:spin 4s linear infinite}
.intro .intro-content h1 span:nth-child(2):after {content:"Brilliant."; animation:spin 4s linear 1s infinite}
.intro .intro-content h1 span:nth-child(3):after {content:"Breathtaking."; animation:spin 4s linear 2s infinite}
@keyframes spin {
0% {content:"Bold."}
20% {content:"Beautiful."}
40% {content:"Brilliant."}
60% {content:"Brainy."}
80% {content:"Breathtaking."}
100% {content:"Bold."}}

.letter-a {background:url(../images/bg-A.jpg); background-size:710px; width:calc(50% - 80px); height:100vh; position:relative; float:left}
.letter-a p {width:100%; height:150px; background:#fff}
.letter-a b {width:1000px; min-height:100vh; background:#fff; position:absolute; left:50%; margin-left:-1200px; display:none}
.letter-a img {position:absolute; right:0; width:800px; max-width:120%}
.we-are {width:calc(50% + 80px); float:left; padding:calc(50vh - 260px) 0 0 95px}
.we-are .right {max-width:570px}
.we-are h2, .past h2 {font-size:80px; font-weight:600; line-height:158px}
.we-are h2 img, .who h2 img, .past h2 img {float:left; margin-right:10px}
.we-are p, .past .right p {font-size:26px; margin-bottom:40px; line-height:40px}

.who h2 {font-size:90px; font-weight:600; line-height:100px; max-width:560px; color:#fff; margin-top:calc(50vh - 260px); float:left}
.who h2 img {margin-top:-25px}
.who .right {float:right; position:relative}
.letter-c {background:url(../images/bg-C.jpg); background-size:120%; position:relative; width:550px; height:700px}
.letter-c p {width:100%; height:230px; background:#191919}
.letter-c b {display:block; float:left; width:278px; height:320px; background:#191919}
.letter-c i {width:100%; height:480px; background:#191919; display:block}
.who .right ul li {position:absolute; font-size:18px; font-weight:600; color:#fff; text-align:right}
.who .right ul li i {width:15px; height:15px; border-radius:50%; background:#FFCC00; display:block; position:absolute}
.who .right ul li:nth-child(1) {top:152px; right:50px; text-align:center}
.who .right ul li:nth-child(1) i {top:70px; right:50px}
.who .right ul li:nth-child(2) {top:200px; right:236px}
.who .right ul li:nth-child(2) i {top:60px; right:-30px}
.who .right ul li:nth-child(3) {top:310px; right:300px}
.who .right ul li:nth-child(3) i {top:35px; right:-40px}
.who .right ul li:nth-child(4) {top:420px; right:293px}
.who .right ul li:nth-child(4) i {top:20px; right:-40px}
.who .right ul li:nth-child(5) {top:530px; right:241px}
.who .right ul li:nth-child(5) i {top:-20px; right:-40px}
.who .right ul li:nth-child(6) {top:572px; right:10px; text-align:center}
.who .right ul li:nth-child(6) i {top:-30px; right:95px}

.coffee {position:absolute; top:380vh; left:calc(50% - 1020px); width:450px}
.letter-d {background:url(../images/bg-D.jpg); background-size:100%; width:50%; height:585px; position:relative; float:left}
.letter-d img {width:400px; max-width:100%; float:left}
.letter-d i {display:block; width:calc(100% - 400px); height:586px; background:#fff; float:left}
.past .right {float:left; width:50%; margin-top:calc(50vh - 250px)}
.past h2, .services h2 {line-height:90px}
.past h2 img {margin-top:-45px}
.past .right p {margin-top:50px; width:400px}

.clients {margin-bottom:50px}
.clients.mobile {display:none}
.slides, .slidesM {display:none; margin-top:50px}
.slides li, .slidesM li, .past-page .intro-content ul li {font-size:26px; float:left; width:22%; text-align:center; border:3px solid #c6c6c6; margin:0 0 30px 4%; padding:15px 10px; line-height:25px; cursor:default}
.clients ul:nth-child(2) li, .clients ul:nth-child(4) li, .clients ul:nth-child(3) li:nth-child(3), .past-page .intro-content ul li:nth-child(5), .past-page .intro-content ul li:nth-child(6), .past-page .intro-content ul li:nth-child(9), .past-page .intro-content ul li:nth-child(10), .past-page .intro-content ul li:nth-child(11), .clients.mobile ul:nth-child(1) li, .clients.mobile ul:nth-child(5) li {width:48%}
.clients.mobile ul:nth-child(3) li, .clients.mobile ul:nth-child(4) li, .clients.mobile ul:nth-child(6) li, .clients.mobile ul:nth-child(7) li, .clients.mobile ul:nth-child(8) li {width:100%}
.slider {margin-left:calc(50% - 58px)} 
.w3-badge {height:15px; width:15px; margin:5px; cursor:pointer; display:inline-block; background:#c6c6c6; border-radius:50%}
.w3-white, footer.yellow, .services.yellow-bg {background:#ffcc00}

.home-contact {background:url(../images/bg-contact.jpg) center no-repeat; background-size:cover; padding:50px 0}
.home-contact h2 {font-size:80px; font-weight:600; line-height:80px}
.home-contact h3, .offices h3 {font-size:60px; font-weight:600; line-height:70px; margin-bottom:30px}
.home-contact p {font-size:26px; line-height:36px}
.home-contact a, .offices .info a {display:inline; color:#191919}
.home-contact h4, .services h3 {font-size:38px; line-height:70px; font-weight:600}
.home-contact form {max-width:480px}
.home-contact form input {width:48%; margin-left:4%; display:block; float:left; margin-top:25px; height:50px; border:3px solid #191919; font-size:18px; padding:0 20px; background:0}
.home-contact form textarea {width:100%; resize:none; height:100px; border: 3px solid #191919; padding:5px 20px; font-size:18px; background:0; margin:25px 0 20px}
.home-contact form input[type="submit"] {background:#fff; border:0; margin:0; font-weight:600; width:170px; cursor:pointer}
.home-contact form input[type="submit"]:hover {background:#191919; color:#fff}

footer {background:#191919; height:150px; padding-top:40px}
footer ul {float:left}
footer p {float:right; font-size:16px; color:#fff; margin-top:20px}
footer .clear {display:none}

/* About */
.about {background:url(../images/bg-about.jpg) center no-repeat; background-size:cover; padding-bottom:40px}
.about .intro-content h4 {margin-bottom:10px}
.about .intro-content h1 span:nth-child(1):after {content:"Experience"; animation:spinA 4s linear infinite}
.about .intro-content h1 span:nth-child(2):after {content:"Great Ideas"; animation:spinA 4s linear 1s infinite}
.about .intro-content h1 span:nth-child(3):after {content:"Brilliant Minds"; animation:spinA 4s linear 2s infinite}
@keyframes spinA {
0% {content:"Experience"}
20% {content:"Data Mindset"}
40% {content:"Great Ideas"}
60% {content:"Brilliant Minds"}
80% {content:"It All"}
100% {content:"Experience"}}

.team {background: url(../images/bg-team.jpg) top center no-repeat #191919; padding-bottom:70px}
.team h2 {color:#fff; margin-top:80px}
.people img {float:left; margin:60px 60px 60px 0; display:none}
.team p {font-size:18px; line-height:32px}
.team p b {color:#ffcc00; font-size:40px}
.people p {margin:170px 0 50px; height:80px; display:none}
.people ul, .people p {width:calc(100% - 395px); float:left}
.people ul li {float:left; width:16.6%}
.people ul li a {color:#fff; opacity:0.3; font-size:18px; cursor:pointer}
.people ul li a:hover, .people ul li .selected {color:#ffcc00; opacity:1}

/* Services */
.nav {position:absolute; min-height:inherit}
.services-left {background:url(../images/services-bl.jpg) right top; background-size:120%; width:50%; float:left; height:100vh; min-height:780px}
.services-left .container {float:right; width:585px}
.services-left .intro-content h1 {margin:calc(50vh - 130px) 30px 30px 0; text-align:right}
.services-left .intro-content p {font-weight:300; float:right; text-align:right}
.services-left .intro-content img {float:right; margin:45px 30px 0}
.services-right {width:50%; float:left}
.services-right .container {max-width:585px; margin:0; background:url(../images/services-br.jpg) no-repeat; background-size:cover}
.services-right h2 {background:#fff; color:black; font-size:65px; font-weight:800; mix-blend-mode:screen; line-height:72px; padding:150px 30px 25px}
.services-right p {font-size:22px; color:#ffcc00; padding:0 0 30px 30px; background:#fff}
.services-right h2 span:nth-child(1):after {content:"Analytics"; animation:spinS 3s linear infinite}
.services-right h2 span:nth-child(2):after {content:"Branding"; animation:spinS 3s linear 1s infinite}
.services-right h2 span:nth-child(3):after {content:"Content"; animation:spinS 3s linear 2s infinite}
@keyframes spinS {
0% {content:"Analytics"}
25% {content:"Branding"}
50% {content:"Content"}
75% {content:"Social Media"}
100% {content:"Analytics"}}
.services-right h2 span:nth-child(4):after {content:"Performance"; animation:spinS2 3s linear 2.5s infinite}
.services-right h2 span:nth-child(5):after {content:"Marketing"; animation:spinS3 3s linear 2.5s infinite}
.services-right h2 span:nth-child(6):after {content:"Public"; animation:spinS2 3s linear 2.5s infinite}
.services-right h2 span:nth-child(7):after {content:"Relations"; animation:spinS3 3s linear 2.5s infinite}
@keyframes spinS2 {
0% {content:"Performance"}
25% {content:"Public"}
50% {content:"Visual"}
75% {content:"Website"}
100% {content:"Performance"}}
@keyframes spinS3 {
0% {content:"Marketing"}
25% {content:"Relations"}
50% {content:"Communication"}
75% {content:"UI/UX"}
100% {content:"Marketing"}}

.services {padding:100px 0}
.services h3 {margin-top:30px}
.services p, .offices .info p {font-size:22px; margin-bottom:15px}
.services ul li {float:left; width:calc(50% - 30px); background:url(../images/right-arrow-yellow.svg) top 10px left no-repeat; background-size:20px; padding-left:40px; font-size:27px; margin-bottom:10px; font-weight:600}
.services ul li:nth-child(even) {margin-left:60px}
.services.dark-bg {background:#191919}
.services.yellow-bg ul li {background:url(../images/right-arrow-white.svg) top 10px left no-repeat; background-size:20px}
.services .branding1 {top:0; right:0; width:450px}
.services .branding2 {bottom:0; left:0; width:220px}
.services .plane {bottom:9px; left:10px; width:150px}
.services .fb {bottom:0; left:calc(50% + 450px); z-index:-1}
.services .content {top:0; left:calc(50% - 900px)}
.services .analytics {bottom:0; left:0}
.services .vc {top:20px; right:calc(50% - 900px); z-index:-1}
.services .ui {top:0; left:calc(50% - 930px); height:100vh}
.services .pr {top:200px; right:calc(50% - 800px); z-index:-1}

/* In the Past */
.past-page {background:url(../images/bg-in-the-past.png) center no-repeat; background-size:cover; padding-bottom:50px}
.past-page h1 {color:#fff; margin-top:110px}
.past-page .intro-content h4 {margin:30px 0; opacity:1; color:#191919; max-width:730px}
.past-page .intro-content ul {max-width:850px; width:100%}
.past-page .intro-content ul li {border:3px solid #fff}

/* Contact */
.contact {background:url(../images/bw.png) top 17vh center no-repeat #191919; background-size:72vh}
.blur {width:50%; height:100vh; right:0; position:absolute; background:rgba(0,0,0,0.7); z-index:0; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px)}
.contact h1 {color:#fff; font-size:85px; margin:200px 0 0 calc(50% + 30px); position:relative; z-index:1; font-weight:600; line-height:115px}
.contact h1 b {display:block; font-size:130px; color:#ffcc00}
.contact h1 b span:after {content:"Talk"; animation:spinC 3s linear infinite}
@keyframes spinC {
0% {content:"Talk"}
20% {content:"Chat"}
40% {content:"Discuss"}
60% {content:"Email"}
80% {content:"Meet"}
100% {content:"Talk"}}

.offices {padding:70px 0; background:#ffcc00}
.offices h2 {color:#191919}
.offices .info {float:left; width:calc(50% - 20px)}
.offices .info:nth-child(3) {margin-left:40px}
.offices h3 {color:#fff; margin:30px 0 20px}
.offices .info p {margin-bottom:0}
.offices .info .skyline {margin-top:50px; max-width:470px; width:100%; position:relative; overflow:hidden; padding-top:10px}
.offices .info img {width:100%}
.offices .info .skyline.mumbai {margin-top:35px}
.home-contact.white {background:url(../images/contact-form-bg.png) right bottom no-repeat #fff; background-size:48%}
.home-contact.white form input[type="submit"] {background:#ffcc00}

.clouds {position:absolute; left:24px; bottom:17px;
-moz-animation:clouds 500s infinite;
-webkit-animation:clouds 500s infinite;
-o-animation:clouds 500s infinite;
animation:clouds 500s infinite}
@-webkit-keyframes clouds {
0% {left:24px}
100% {left:3000px}}
@-moz-keyframes clouds {
0% {left:24px}
100% {left:3000px}}
@-o-keyframes clouds {
0% {left:24px}
100% {left:3000px}}
@keyframes clouds{
0% {left:24px}
100% {left:3000px}}

.clouds2 {position:absolute; left:24px;
-moz-animation:cloudsM 400s infinite;
-webkit-animation:cloudsM 400s infinite;
-o-animation:cloudsM 400s infinite;
animation:cloudsM 400s infinite}
@-webkit-keyframes cloudsM {
0% {left:24px}
100% {left:1000px}}
@-moz-keyframes cloudsM {
0% {left:24px}
100% {left:1000px}}
@-o-keyframes cloudsM {
0% {left:24px}
100% {left:1000px}}
@keyframes cloudsM {
0% {left:24px}
100% {left:1000px}}

.clouds3, .clouds4 {transform:translate(-500px, 0)}
.skyline .cloudsM {bottom:85px; left:-15px; position:absolute;
-moz-animation:cloudM 400s infinite;
-webkit-animation:cloudM 400s infinite;
-o-animation:cloudM 400s infinite;
animation:cloudM 400s infinite}
@-webkit-keyframes cloudM {
0% {left:-15px}
100% {left:1000px}}
@-moz-keyframes cloudM {
0% {left:-15px}
100% {left:1000px}}
@-o-keyframes cloudM {
0% {left:-15px}
100% {left:1000px}}
@keyframes cloudM {
0% {left:-15px}
100% {left:1000px}}

.skyline .cloudsM2 {bottom:85px; left:-12px; position:absolute;
-moz-animation:cloudsM2 500s infinite;
-webkit-animation:cloudsM2 500s infinite;
-o-animation:cloudsM2 500s infinite;
animation:cloudsM2 500s infinite}
@-webkit-keyframes cloudsM2 {
0% {left:-12px}
100% {left:3000px}}
@-moz-keyframes cloudsM2 {
0% {left:-12px}
100% {left:3000px}}
@-o-keyframes cloudsM2 {
0% {left:-12px}
100% {left:3000px}}
@keyframes cloudsM2 {
0% {left:-12px}
100% {left:3000px}}

/* Thank you */
.thank-you.past-page {background:#ffcc00; min-height:calc(100vh - 150px)}
.thank-you h1 {font-size:60px; font-weight:600}
.thank-you .container > p {font-size:24px; max-width:500px}

@media screen and (min-width:1600px) {
	.intro > img:nth-child(1) {left:0; margin-left:inherit}
	.intro > img:nth-child(2) {right:0; bottom:0; margin-right:inherit}
	.letter-a b {display:block}
	.services .fb {left:calc(50% + 550px)}
	.services .ui {left:0}
	.services .pr {right:0}
}

@media screen and (max-width:1280px) {
	.container {width:91%}
	.letter-a {width:45%}
	.letter-a img {max-width:620px}
	.we-are {width:50.5%; margin-right:4.5%; padding-left:5%}
	.we-are h2, .past h2 {font-size:60px; line-height:126px}
	.we-are p, .past .right p {font-size:23px; max-width:510px; line-height:36px}
	.we-are h2 img {width:85px}
	.who h2 {font-size:80px; line-height:90px; max-width:500px; margin-top:calc(50vh - 260px); position:relative; z-index:1}
	.who .right ul li {font-size:16px}
	.who h2 img {width:80px; margin-top:-20px}
	.letter-c {width:510px}
	.letter-c b {width:238px}
	.past h2 {line-height:70px}
	.past h2 img {margin-top:-50px; width:75px}
	.past .right p {max-width:310px}
	.slides li, .slidesM li, .past-page .intro-content ul li {font-size:23px}
	.home-contact h2 {font-size:70px; line-height:70px}
	.home-contact h3, .offices h3 {font-size:50px; line-height:60px}
	.home-contact p {font-size:23px; line-height:32px}
	.home-contact h4, .services h3 {font-size:30px; line-height:60px}
	footer {height:170px}
	footer ul {float:right}
	footer p {float:none; font-size:14px; margin-top:30px; text-align:right}
	footer .clear {display:block}
	
	.intro-content h1 {font-size:90px; line-height:90px}
	.services-left {min-height:745px}
	.services-left .intro-content p {font-size:30px}
	.services-right h2 {font-size:60px; line-height:68px}
	.services-right p {font-size:20px}
	.services p, .offices .info p {font-size:18px}
	.services ul li {font-size:24px; line-height:35px}
	.services .fb {height:200px; left:auto; right:0}
	
	.contact h1 {font-size:75px; line-height:96px}
	.contact h1 b {font-size:110px}
	
	.thank-you.past-page {min-height:calc(100vh - 170px)}
	.thank-you h1 {font-size:50px}
	.thank-you .container > p {font-size:20px}
}

@media screen and (max-width:1100px) {
	header ul {display:none}
	#showRightPush {display:block}
	.who h2 {float:none; margin-top:100px}
	.who .right {float:none; width:510px; margin:0 auto}
	.letter-c {height:650px; margin-top:-100px}
	
	.services ul li {width:calc(50% - 15px)}
	.services ul li:nth-child(2n) {margin-left:30px}
	.services .branding2 {width:190px}
	.services .branding1 {width:350px; right:calc(50% - 470px)}
	
	.people img {float:none; margin:60px 0 30px 60px}
	.people ul {width:100%; float:none; margin-bottom:100px}
	
	.contact h1 {margin-top:calc(50vh - 150px); font-size:62px; line-height:78px}
	.contact h1 b {font-size:90px}
}

@media screen and (max-width:1020px) {
	.offices .info {float:none; width:100%}
	.offices .info:nth-child(3) {margin-left:0; margin-top:100px}
	.nav #showRightPush {filter:invert(1)}
	.services-left {min-height:inherit; width:100%; height:auto}
	.services-left .container {float:none; width:91%}
	.services-left .intro-content h1 {margin:180px 0 30px; text-align:left}
	.services-left .intro-content p {text-align:left; float:none; margin-bottom:70px}
	.services-left .intro-content img {float:none; position:absolute; margin:60px 0 0 200px}
	.services-right {width:100%; float:none; min-height:inherit}
	.services-right .container {max-width:inherit; margin:0 auto}
	.services-right h2 {padding:70px 0 30px}
	.services-right p {padding:0 0 50px}
}

@media screen and (max-width:990px) {
	.letter-a {width:530px; float:none; background:url(../images/bg-A.jpg); background-size:600px}
	.letter-a img {right:auto; left:-90px}
	.letter-a p {height:70px}
	.letter-a img {position:relative; display:block}
	.letter-a b {display:block; height:400px; left:0; margin-left:0; position:relative; min-height:inherit}
	.we-are {width:91%; max-width: 450px; margin:-280px 4.5% 30px 0; padding:0; float:right; position:relative; z-index:1}
	.letter-d {width:calc(50% - 50px); margin-right:50px}
	.letter-d img {display:block; float:none}
	.letter-d i {width:100%; float:none}
	.clients {position:relative; z-index:1}
	
	.services .analytics {height:100px}
	
	.team {background-size:contain}
}

@media screen and (max-width:850px) {
	.intro-content h4 {margin-top:100px; font-size:32px}
	.intro-content h1, .team h2, .services h2, .offices h2 {font-size:90px; line-height:80px}
	.intro-content p {font-size:32px}
	
	.contact h1 {font-size:52px; line-height:65px}
	.contact h1 b {font-size:74px}
	.home-contact.white {background:url(../images/contact-form-bg.png) left 500px bottom no-repeat #fff; background-size:500px}
}

@media screen and (max-width:800px) {
	.letter-d {height: 475px}
	.clients.desktop {display:none}
	.clients.mobile {display:block}
	.slider {margin-left:calc(50% - 115px)}
	
	.services ul li {width:100%}
	.services ul li:nth-child(2n) {margin-left:0}
	.services .branding2 {width:170px}
	
	.people p {margin:100px 0 50px; width:calc(100% - 335px)}
	.people img {width: 275px}
	
	.past-page {background:url(../images/bg-in-the-past.png) center right -660px no-repeat; background-size:cover}
	.past-page .intro-content ul li {width:48%}
	.past-page .intro-content ul li:nth-child(3), .past-page .intro-content ul li:nth-child(6), .past-page .intro-content ul li:nth-child(9), .past-page .intro-content ul li:nth-child(11) {margin-left:0}
	.past-page .intro-content ul li:nth-child(5), .past-page .intro-content ul li:nth-child(6), .past-page .intro-content ul li:nth-child(9), .past-page .intro-content ul li:nth-child(10), .past-page .intro-content ul li:nth-child(11) {width:100%}
}

@media screen and (max-width:700px) {
	.container, .services-left .container {width:86%}
	header p {font-size:17px; margin:25px 0 0 20px}
	.intro-content h4 {margin-top:150px; font-size:26px}
	.intro-content h1, .team h2, .services h2, .offices h2 {font-size:70px; line-height:66px}
	.intro-content p {font-size:26px}
	.we-are {margin-top:-200px}
	.letter-a {background-size:530px}
	.letter-d {width:100%; float:none; max-width:325px; margin:0 auto}
	.past .right {float:none; margin-top:100px; width:100%}
	.letter-d i {display:none}
	.home-contact {min-height:inherit}
	footer {height:auto}
	footer ul {float:none}
	footer img {float:none; width:80px}
	footer ul li {margin:20px 0 0; float:none}
	footer p {text-align:left; padding-bottom:30px}
	
	.about {background:url(../images/bg-about.jpg) center right -350px no-repeat; background-size:cover}
	.people p {float:none; width:100%; margin:20px 0; height:auto; display:block; border-bottom:1px dashed#fff; padding-bottom:40px}
	.people ul {display:none}
	.people img {display:block; margin:60px auto 30px}
	.team .container > p {margin-top:40px}
	
	.services {padding:70px 0; min-height:inherit}
	.services .analytics {height:70px}
	.services .fb {height:150px; right:-30px}
	.services .plane {width:112px}
	
	.contact {background:url(../images/bw.png) center no-repeat #191919; background-size:70%}
	.contact h1 {font-size:42px; line-height:50px}
	.contact h1 b {font-size:55px}
	
	.thank-you.past-page {min-height:calc(100vh - 358px)}
}

@media screen and (max-width:560px) {
	.container, .services-left .container {width:84%}
	header p {display:none}
	.intro-content h4, .intro-content p, .slides li, .slidesM li, .past-page .intro-content ul li {font-size:22px}
	.intro-content h1, .team h2, .services h2, .offices h2 {font-size:48px; line-height:48px; margin-top:70px}
	.intro-content h1 {margin-top:10px}
	.past-page .intro-content h1 {margin-top:70px}
	.letter-a {background-size:85%; width:auto}
	.letter-a img {width:100%; left:-15%}
	.letter-a span {width:15%; height:100vh; position:absolute; top:0; right:0; background:#fff}
	.we-are {width:84%; max-width:none; margin:-250px auto 50px; float:none}
	.we-are h2, .past h2 {font-size:48px; line-height:107px}
	.we-are h2 img {width:72px}
	.we-are p, .past .right p {font-size:20px; max-width:none; line-height:30px; margin-bottom:20px}
	.who h2 {font-size:60px; line-height:70px; max-width:400px}
	.who .right ul li {font-size:12px}
	.who h2 img {width:66px}
	.who .right {width:350px}
	.letter-c {width:350px}
	.letter-c b {width:150px; height:235px}
	.letter-c img {width:200px}
	.who .right ul li:nth-child(1) {top:165px}
	.who .right ul li:nth-child(1) i {right:20px; top:57px}
	.who .right ul li:nth-child(2) {right:185px}
	.who .right ul li:nth-child(2) i {right:-25px}
	.who .right ul li:nth-child(3) {right:205px; top:275px}
	.who .right ul li:nth-child(3) i {right:-15px; top:53px}
	.who .right ul li:nth-child(4) {top:370px; right:207px}
	.who .right ul li:nth-child(3) br, .who .right ul li:nth-child(4) br {display:none}
	.who .right ul li:nth-child(4) i {right:-25px}
	.who .right ul li:nth-child(5) {right:165px; top:458px}
	.who .right ul li:nth-child(5) i {right:-25px}
	.who .right ul li:nth-child(6) {right:10px; top:487px}
	.who .right ul li:nth-child(6) i {right:65px}
	.letter-d {max-width:250px; height:365px}
	.past h2 {line-height:55px}
	.past h2 img {margin-top:-40px; width:60px}
	.past .right p {width:auto; margin-top:30px}
	.slides li, .slidesM li, .past-page .intro-content ul li {border:2px solid #c6c6c6; padding:12px 8px}
	.home-contact h2 {font-size:55px; line-height:55px}
	.home-contact h3, .offices h3 {font-size:35px; line-height:40px}
	.home-contact p {font-size:18px; line-height:25px}
	.home-contact h4, .services h3 {font-size:20px; line-height:50px}
	.home-contact form input {margin-top:20px; height:40px; border:2px solid #191919; font-size:16px}
	.home-contact form textarea {border:2px solid #191919; padding:5px 20px; font-size:16px; margin:20px 0 15px}
	footer ul {font-size:16px}
	footer ul li {margin:12px 0 0}
	footer p, .services h3 {margin-top:20px}
	
	.team {background: url(../images/bg-team.jpg) top left no-repeat #191919; background-size:600px}
	.team p {font-size:16px; line-height:28px}
	.people img {width:250px}
	.team p b {font-size:36px}
	
	.services ul li {font-size: 19px; line-height:28px}
	.services .branding2 {left:-50px}
	.services .branding1 {width:290px; right:calc(50% - 350px)}
	.services-right h2 {font-size:50px; line-height:58px}
	.services-right p {font-size:18px}
	
	.past-page {background:url(../images/bg-in-the-past.png) center right -550px no-repeat; background-size:cover}
	.past-page .intro-content ul li {border:2px solid #fff; margin-bottom:20px}
	
	.contact h1 {font-size:32px; line-height:40px; margin:calc(50vh - 140px) 0 0 calc(50% + 20px)}
	.contact h1 b {font-size:42px}
	.offices h2, .services h2 {margin-top:0}
	.offices .info:nth-child(3) {margin-top:50px}
	.services p, .offices .info p {font-size:16px}
	.skyline .cloudsM, .skyline .cloudsM2 {bottom:80px}
	
	.thank-you.past-page {min-height:calc(100vh - 303px)}
	.thank-you h1 {font-size:40px}
	.thank-you .container > p {font-size:18px; margin-top:20px}
}

@media screen and (max-width:450px) {
	.container, .we-are, .services-left .container {width:82%}
	.we-are {margin:-350px auto 50px}
	.home-contact form input {width:100%; margin-left:0}
	.services h2 {font-size:40px; line-height:45px}
}