html { position: relative; min-height: 100%; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { font-family: 'Roboto', sans-serif; color: #333; padding-left: 0; margin: 0; }
body.case-study { padding: 60px 0 100px !important; }
h1 { font-size: 44px; font-weight: 700; margin-bottom: .3rem; }
h2 { font-size: 36px; font-weight: 400; }
h3 { font-size: 24px; font-weight: 400; }
h4 { font-size: 20px; font-weight: 400; }
body, p, li, a { font-size: 18px; font-weight: 400; }
big { font-weight: 700; display: block; }
small { font-weight: 300; display: block; }
li { margin-bottom: 20px; }
legal { font-size: 16px; color: #808080; margin-top: 5px; }
.body { color: #333; display: block; margin-bottom: 10px; font-weight: 700; }
button { border-radius: 5px; padding: 15px 26px; font-weight: 700; font-size: 16px; color: #FFF; background: #03B; border: 0; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
button:hover { cursor: pointer; background: #029; }
button.secondary { background: #CCC; }
button.secondary:hover { background: #B0B0B0; }
button.mfp-close, button.mfp-close:hover, button.mfp-arrow, button.mfp-arrow:hover { background: transparent; }
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; }
.mfp-zoom-out-cur { cursor: default; }
.bottom-lg { padding-bottom: 30px; }
.bottom-md { padding-bottom: 20px; }
.bottom-sm { padding-bottom: 10px; }
.intro { width: 100%; height: 245px; background-color: #03B; padding-top: 50px; }
.intro .content { text-align: center; }
.intro .content .handsome { vertical-align: top; margin-right: 10px; }
.intro .content div { display: inline-block; }
.intro .content .logo { width: 150px; margin-bottom: 8px; }
.intro .content h1 { color: #FFF; margin-bottom: 4px; font-size: 19px; text-align: center; font-weight: 700; }
.intro .content h1 span { display: block }
.intro .content div .stuff { display: block; text-align: center; }
.intro .content div .stuff a img, .about div a img { width: 34px; margin: 0 0 2px 10px; }
.intro .content .hot-pants { width: 150px; margin: auto; }
.intro .content .hot-pants a { color: #F2CC78; text-decoration: underline; font-size: 15px; font-weight: 300;}
.intro .content .hot-pants .hot { display: inline; float: left; }
.intro .content .hot-pants .pants { display: inline; float: right; }
.darker { width: 100%; background-color: #F8F8F8; }
.dark { width: 100%; background-color: #E8E8E8; }
.about div a { margin-bottom: 30px; display: block; }
.about div a img { margin-left: -10px; }
.content { padding: 0 50px; max-width: 1100px; margin: auto; position: relative; }
.content a { color: #F4762F; }
.content a:hover { color: #DD692F; text-decoration: none; }
.content .title { margin: 60px 0; border-bottom: 5px solid #333; display: inline-block; text-align: left; }
.content .cells { width: 100%; display: inline-flex; padding: 0; }
.content .cells .description { width: 50%; position: relative; }
.content .cells .description .child { position: absolute; top: 50%; transform: translateY(-50%); }
.content .cells .description h3 { margin-bottom: 0.2rem; font-weight: 700; color: #333; }
.content .cells .description p { margin-top: 1rem; margin-bottom: 1.6rem; color: #333; }
.content .cells .description .locked img { width: 14px; margin: 0 5px 5px 0; }
.content .cells .image { width: 50%; }
.content .cells .image img { width: 100%; }
.content.about, .content.contact { padding-bottom: 30px; max-width: 870px !important; }
.bg { width: 100%; background-color: #EFF0F3; }
.go-up { display: none; position: fixed; right: 1%; bottom: 30px; width: 60px; height: 60px; background: rgba(0,0,0,0.4) url('../images/go-up.png') no-repeat; background-size: 38px; background-position: center; border-radius: 30px; transition: 0.5s ease all; -moz-transition: 0.5s ease all; -webkit-transition: 0.5s ease all; }
.go-up:hover { background-color: rgba(0,0,0,0.5); }
.work-nav { position: fixed; top: 0; left: 0; width: 100%; height: 60px; background: #FFF; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20); z-index: 666; transition: 0.5s ease all; -moz-transition: 0.5s ease all; -webkit-transition: 0.5s ease all; }
.nav-up { top: -60px; }
.work-nav a { color: rgba(51,51,51,0.5); transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
.work-nav a:hover { text-decoration: none; color: rgba(51,51,51,1); }
.work-nav a big { font-size: 14px; line-height: 1rem; }
.work-nav a small { font-size: 14px; display: inline-block; }
.work-nav a img { opacity: 0.6; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
.work-nav a:hover img { opacity: 1; }
.work-nav .previous { width: 33.3%; float: left; padding: 12px 0; }
.work-nav .previous img { float: left; width: 34px; }
.work-nav .previous div small, .work-nav .previous div big, .work-nav .next div small, .work-nav .next div big { display: block; }
.work-nav .view-all { width: 33.3%; text-align: center; display: inline-block; line-height: 56px; }
.work-nav .view-all img { width: 34px; }
.work-nav .next { width: 33.3%; text-align: right; float: right; padding: 12px 0; }
.work-nav .next div { display: inline-block; }
.work-nav .next img { float: right; width: 34px; }
.case .case-header { text-align: center; padding: 80px 0 0; }
.case .case-header h1, .case .case-header span { color: #333; font-weight: 400; }
.case .case-header img { width: 50%; }
.case a, .case a:hover { color: #F4762F; }
.case h2, .about h2 { padding: 60px 0 20px; }
.case h3 { padding: 30px 0 20px; }
.case p { padding: 0 0 8px; }
.overflow { overflow-x: scroll; border: 1px solid #CCC; }
.overflow img { height: 500px; }
.img-full { width: 100%; }
.img-thumb { background-size: cover; height: 340px; overflow-y: hidden; }
.about .title h2 { padding: 0 !important; }
.about h4 { padding: 0 0 20px; line-height: 1.4; }
.about p { padding: 0 0 10px; }
.about .aboutme { padding-left: 200px; background: no-repeat top left/160px url(../images/head-shot.png); min-height: 170px; }
.group { position: relative; margin: 45px 30px 20px 0; display: inline-block; vertical-align: top; }
input, textarea { font-size: 18px; padding: 10px 10px 10px 5px; display: block; border: none; border-bottom: 2px solid #CCC; }
input { width: 350px; }
textarea { width: 730px; max-height: 240px; }
input:focus, textarea:focus { outline: none; border-bottom: 2px solid #F4762F; }
label.regular { color: #999; font-size: 18px; font-weight: 300; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
input:focus ~ label.regular, input:valid ~ label.regular, textarea:focus ~ label.regular, textarea:valid ~ label.regular { top: -20px; font-size: 14px !important; }
input.error, textarea.error { background: #FDF1F1; border-bottom-color: #E44; }
label.error { color: #E44; top: initial; bottom: -44px; font-weight: 400; font-size: 14px; }
.slide-control { left: 5px; position: absolute; top: 45%; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; }
.slide-control img { width: 46px; }
.slide-control:hover { text-decoration: none; color: #DD692F !important; left: 0; }
.slide-control.right { left: auto; right: 5px; }
.slide-control.right:hover { right: 0; }
.wide-imgs { padding-left: 0; padding-right: 0; }
.wide-imgs div { display: inline-block; width: 32.6%; }
#preloader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('../images/preloader.gif') center no-repeat #fff; background-size: 120px 120px; }
.headspace100 { margin-top:100px; }
.paddington { padding-top: 40px; }

@media (min-width: 1500px) {
	h1 { font-size: 56px; margin-bottom: .4rem; }
	h2 { font-size: 42px; }
	h3 { font-size: 36px; }
	h4 { font-size: 24px; line-height: 1.4em; }
	body, p, li, a { font-size: 22px; }
  .body { margin-bottom: 12px; }
	.container { max-width: 1400px !important; }
	.content { max-width: 1400px; }
  .content.about, .content.contact { max-width: 1100px !important; }
	.content .cells .description { padding-right: 50px; }
	.content .cells .description.roge { padding-top: 4%; }
	.content .cells .description.chat { padding-top: 3%; }
	.content .cells .description h3 { margin-bottom: 0.3rem; }
	.content .cells .description p { margin-top: 1.2rem; margin-bottom: 2.4rem; }
	.case h2, .about h2 { padding: 80px 0 20px; }
	.case p { padding: 0 0 15px; }
	.about h4 { line-height: 1.5; }
	.about h3 { padding: 30px 0 0; }
	.group { margin: 45px 50px 30px 0; }
	input { width: 420px; }
	textarea { width: 895px; max-height: 300px; }
  .paddington { padding-top: 50px; }
}

@media (max-width: 1199px) {
  p, a, li { font-size: 16px; }
  /* body { font-size: 14px; } */
  .intro { height: 205px; padding-top: 30px; }
  /* .intro .content .logo { width: 100px; margin-bottom: 50px; } */
  /* .intro .content h1 { font-size: 56px; margin-bottom: 50px; } */
  /* .intro .content div .stuff a img, */ .about div a img { width: 32px; }
  /* .intro .content .hot-pants { width: 300px; } */
  /* nav { width: 300px; } */ 
  .content { width: 992px; }
	.content .cells { padding: 0; }
  .group { display: block; margin: 45px 0px 20px 0; }
	input, textarea { width: 100%; }
  .headspace100 { margin-top:80px; }
}

@media (max-width: 991px) {
  h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  /* .intro { height: 420px; padding-top: 50px; } */
  /* .intro .content .logo { width: 90px; } */
  /* .intro .content h1 { font-size: 38px; } */
  .content { width: 100%; padding: 0px 30px; }
  .content .cells .description { width: 100%; float: none; padding-right: 0; text-align: center; }
  .content .cells .image { width: 100%; text-align: center; }
  .content.about, .content.contact { max-width: none !important; }
  .go-up { right: 30px; }
  .case h2, .about h2 { padding: 40px 0 15px; }
  .case .case-header img { width: 60%; }
	.carousel-control-next, .carousel-control-prev { height: 259px; }
  .headspace100 { margin-top:60px; }
}

@media (max-width: 767px) {
  body { text-align: center; padding-left: 0; margin: 0; }
  /* .intro { height: 450px; padding-top: 50px; }  */
  /* .intro .content h1 { font-size: 34px; margin-bottom: 40px; } */
  /* .intro .content h1 span { display: inline; } */
  /* .intro .content .hot-pants { width: 340px; } */
  /* .intro .content .hot-pants .hot { margin-bottom: 20px; }
  .intro .content .hot-pants .hot, .intro .content .hot-pants .pants { display: block; float: none; } */
  .content { width: 100%; margin: auto; padding: 0px 30px 30px; }
  .content .title { margin: 40px 0; }
  .content .cells { display: block; }
  .content .cells .image { width: 80%; margin: auto; }
  .content .cells .description { padding: 0 8%; }
  .content .cells .description .child { position: relative; top: auto; transform: none; }
  .about .aboutme { padding-left: 0; padding-top: 180px; background: no-repeat top center/160px url(../images/head-shot.png); min-height: fit-content; }
	.case .case-header img { width: 80%; }
  .work-nav .previous div, .work-nav .next div { display: none; }
	.carousel-control-next, .carousel-control-prev { height: inherit; }
  .go-up { right: 20px; bottom: 20px; width: 50px; height: 50px; background-size: 34px; border-radius: 25px; }
  button { width: 100%; }
  .headspace100 { padding: 25px 0; }
  .headspace100 img { width: 100% !important; }
}

@media (max-width: 414px) {
  .intro { padding-top: 10px; }
  /* .intro .content .logo { width: 80px; margin-bottom: 40px; }
  .intro .content h1 { font-size: 32px; margin-bottom: 30px; }
  .intro .content .hot-pants { width: 100%; } */
  .content { padding: 20px 20px 30px; }
  .content .cells .image { width: 100%; }
  .content .cells .image img { width: 280px; }
  .content .cells .description { padding: 0; }
	.case .case-header img { width: 100%; }
  .go-up { right: 20px; }
	.work-nav a small { font-size: 13px; }
  .go-up { right: 10px; bottom: 10px; width: 44px; height: 44px; background-size: 32px; border-radius: 22px; }
}