/* Defaults */

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

.mobile,
.mobile-bio {
    display:none;
}

/* 1580px width */
@media (max-width: 1580px) {
    #home-working-with-us .flex {
        display:block;
    }

    #text {
        position:relative;
        margin:0 0 30px 0;
    }

    #home-working-with-us .col:nth-child(1) {
        width:100%;
    }

    #home-working-with-us .col:nth-child(2) {
        width:100%;
    }

    #home-our-process {
        transform:translateY(0);
    }

    h1 {
        font:400 80px/80px "GT Walsheim Regular", arial, sans-serif;
    }
}


/* 1420px width */
@media (max-width: 1420px) {
    #just-videos article {
        display:block;
    }

    #just-videos article .col:nth-child(1) {
        width:100%;
        height:auto;
        overflow:hidden;
    }

    #just-videos.just-websites article .col:nth-child(1) {
        width:100%;
        height:550px;
        overflow:hidden;
    }

    #just-videos article .col:nth-child(2) {
        width:100%;
        border-top:1px solid #0b4b5e;
    }

    #just-videos article .col:nth-child(2) .content {
        position:relative;
        bottom:auto;
        left:auto;
        padding:50px;
    }
}

/* 1400px width */
@media (max-width: 1500px) {
    .work-four-columns .work {
        width:50%;
    }

    .work-five-columns .work {
        width:50%;
    }
}


/* 1300px width */
@media (max-width: 1300px) {
    .container {
        padding:80px 40px;
    }

    #home header .container {
        padding:0 40px 80px 40px;
    }

    .holder__head .col:nth-child(1) {
        padding:0 40px;
    }

    .holder__item p {
        padding:0 30px 50px 40px;
    }

    #home-logos .col {
        width:25%;
    }

    #home-logos .col:nth-child(6),
    #home-logos .col:nth-child(11) {
        border-right:1px solid #0b4b5e;
    }

    #home-logos .col:nth-child(4),
    #home-logos .col:nth-child(8),
    #home-logos .col:nth-child(13),
    #home-logos .col:nth-child(17) {
        border-right:1px solid #fafbef;
    }

    #home-logos .col#logo-button {
        width:100%;
        border-right:1px solid #fafbef;
    }

    header .container {
        padding:200px 40px 80px 40px;
    }

    .line {
        width: auto;
        height: auto;
        overflow: visible;
        display:inline;
    }

    .line span {
        position:relative;
    }

    .title {
        padding:0 25px 80px 40px;
    }

    #people .col {
        width:50%;
    }

    #people .col:nth-child(2),
    #people .col:nth-child(4),
    #people .col:nth-child(6),
    #people .col:nth-child(8),
    #people .col:nth-child(10) {
        border-right:1px solid #fafbef !important;
    }

    #people .col:nth-child(9),
    #people .col:nth-child(10) {
        border-bottom:0;
    }

    #people .col:nth-child(3n) {
        border-right:1px solid #0b4b5e;
    }

    #just-videos article .col:nth-child(2) .content {
        padding:50px 40px;
    }

    #services .col {
        padding:50px 40px;
    }
	
	#logos .col {
	  padding:80px 40px;
	}

    #just-videos .line {
        display:block;
    }

    #contact-us {
        padding:0 25px;
    }

    #contact-us .container {
        width:100%;
    }

    #contact-us .content {
        padding:90px 70px;
    }

    #contact-us h2 {
        font:400 70px/70px "GT Walsheim Regular", arial, sans-serif;
    }

    .close {
        width:50px;
        height:50px;
        background:url(../images/close.svg) no-repeat 0 0 / 50px 50px;
        top:20px;
        right:20px;
    }

    footer .flex {
        display:block;
    }

    footer .col:nth-child(1) {
        margin-bottom:30px;
    }

    footer .col:nth-child(1),
    footer .col:nth-child(2) {
        width:100%;
    }

    #footer-logo img {
        margin-left:0;
        margin-bottom:10px;
    }

    footer .copyright {
        display:none;
    }

    footer .copyright.mobile {
        display:block;
        margin-top:40px;
    }
}

/* 1200px width */
@media (max-width: 1200px) {
    h1 {
        font:400 70px/70px "GT Walsheim Regular", arial, sans-serif;
    }

    h4 {
        font:400 30px/37px "GT Walsheim Regular", arial, sans-serif;
    }

    #home h1 {
        font-size:90px;
        line-height:90px;
    }

    #home .line {
        height:100px;
    }

    .holder__head h2 {
        font:400 22px/25px "GT Walsheim Bold", arial, sans-serif;
    }

    .holder__head h3 {
        font:400 20px/25px "GT Walsheim Medium", arial, sans-serif;
    }

    #text {
        width:100%;
        position:relative;
        transform:translateX(0px) !important;
    }

    #home-working-with-us h2 {
        font-size: 80px;
        line-height: 80px;
    }

    .holder__item {
        display:block;
    }

    .holder__item .col:nth-child(1) {
        display:none;
    }

    .holder__item .col:nth-child(2) {
        width:100%;
        height:100%;
    }

    #just-videos h1,
    #just-videos h1 .small {
        font-size:50px;
        line-height:50px;
    }

    #just-videos .line {
        display:inline;
    }
}


/* 1100px width */
@media (max-width: 1100px) {
    #services .col {
        width:50%;
    }

    #services .col:nth-child(1) {
        padding-bottom:0;
    }

    #services .col:nth-child(2) {
        border-right:1px solid #fafbef;
        padding-bottom:0;
    }

    #services .col:nth-child(3) {
        border-right:1px solid #0b4b5e;
        padding-top:0;
    }
}

/* 1000px width */
@media (max-width: 1000px) {
    #home header {
        display:flex;
        padding:0;
    }

    #home header .container {
        position:relative;
        left:auto;
        top:auto;
        padding:0 40px 80px 40px;
        align-self: flex-end;
    }

    #home .line {
        overflow:visible;
        display:inline;
    }

    .line span {
        position:relative;
        transform:translateY(0) !important;
        display:inline;
    }

    #home .line {
        height:auto;
    }

    #home .line:nth-child(2) {
        top:auto;
    }

    .owl-prev {
        width:60px;
        height:60px;
    }

    .owl-next {
        width:60px;
        height:60px;
    }

    #scroll {
        width:60px;
        height:60px;
    }
	
	.playbutton,
	#client-work .owl-carousel img.playbutton {
	    width:100px !important;
	    height:100px !important;
	}

    #contact-us .content {
        padding:70px 50px;
    }

    #contact-us h2 {
        font:400 60px/60px "GT Walsheim Regular", arial, sans-serif;
    }

    .close {
        width:40px;
        height:40px;
        background:url(../images/close.svg) no-repeat 0 0 / 40px 40px;
        top:20px;
        right:20px;
    }

    #testimonials article {
        display:block;
    }

    #testimonials article img {
        margin:0 0 0 40px;
        background:none;
        border-right:0;
    }

    #testimonials article .quote {
        width:100%;
        height:auto;
        padding:50px 40px;
    }

    #testimonials .owl-nav {
        top:60px;
    }

    #testimonials .owl-prev {
        left:auto !important;
        right:100px;
    }
}


/* 900px width */
@media (max-width: 900px) {
	
    #client-work .two-columns img {
        width:100%;
    }

    .work-two-columns .work,
	.work-three-columns .work,
    .work-four-columns .work,
    .work-five-columns .work {
		width:100%;
    }

    header .description h3 {
        font:400 60px/60px "GT Walsheim Regular", arial, sans-serif;
        margin:0 0 5px 0;
    }

    #our-work .description {
        width:auto;
        height:auto;
        opacity:1 !important;
        background:none;
        padding:0 20px 30px 30px;
        position:absolute;
        bottom:0;
        left:0;
    }

    #our-work .featured .description p {
        position:relative !important;
        bottom:0 !important;
        left:0 !important;
    }

    #our-work h1,
    #our-work h3 {
        display:none;
    }

    #our-work .description h1,
    #our-work .description h3 {
        width:100%;
        display:block;
        font:400 32px/35px "GT Walsheim Bold", arial, sans-serif;
        color:#fafbef;
        text-decoration:none !important;
        border:0 !important;
        padding:0;
        margin:0 0 20px 0!important;
        opacity:1 !important;
        position:relative;
        bottom:auto !important;
        left:auto !important;
    }

    #our-work .description p {
        width:auto;
        font:400 20px/28px "GT Walsheim Bold", arial, sans-serif;
        color:#fafbef;
        background:#ff4d0e;
        text-decoration:none;
        text-align:center;
        display:inline-block;
        opacity:1 !important;
        position: relative;
        top:0;
        -ms-transform: translateY(0) !important;
        transform: translateY(0) !important;
        padding:20px 30px;
        margin:0 !important;
    }
}


/* 800px width */
@media (max-width: 800px) {
    h1 {
        font:400 60px/60px "GT Walsheim Regular", arial, sans-serif;
    }

    .container {
        padding:70px 25px;
    }

    .menu-wrapper {
        right:25px;
    }

    #home header .container {
        padding:70px 25px;
    }
	
	#home header #video {
		display:none;
	}
	
	#home header #video-mobile {
		display:block;
	}

    #logo {
        display:none;
    }

    #logo-mobile {
        display:block;
    }

    #logo-mobile img {
        width:230px;
        position:absolute;
        top:54px;
        left:25px;
    }

    #home h1 {
        font-size:80px;
        line-height:80px;
    }

    .holder__head .col:nth-child(1) {
        width:100%;
    }

    .holder__head .col:nth-child(2) {
        display:none;
    }

    #home-logos .col {
        width:50%;
    }

    #home-logos .col:nth-child(2),
    #home-logos .col:nth-child(4),
    #home-logos .col:nth-child(6),
    #home-logos .col:nth-child(8),
    #home-logos .col:nth-child(11),
    #home-logos .col:nth-child(13),
    #home-logos .col:nth-child(15),
    #home-logos .col:nth-child(17) {
        border-right:1px solid #fafbef;
    }

    .holder__head .col:nth-child(1) {
        padding:0 25px;
    }

    .holder__head .button {
        width:160px;
    }

    #home-working-with-us h2 {
        font-size: 70px;
        line-height: 70px;
    }

    header .container {
        padding:170px 25px 80px 25px;
    }

    .title {
        padding:0 20px 50px 25px;
    }

    .description {
        padding:25px;
    }

    #people .col {
        width:100%;
        border-left:0 !important;
        border-right:0 !important;
    }

    #people .col:nth-child(9) {
        border-bottom:1px solid #0b4b5e;
    }

    .bio .bio-content {
        padding:25px 25px;
    }
	
	#testimonials .container h4 {
	  font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
	}

     #just-videos article .col:nth-child(2) .content {
        padding:40px 25px;
    }

    #just-videos.just-websites article .col:nth-child(1) {
        height:450px;
    }

    #services h4 {
        font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
    }

    #services .col {
        width:100%;
        border-right:0 !important;
        padding:50px 25px;
    }

    #services .col:nth-child(2) {
        padding-top:0;
    }

	#logos .col {
	  padding:70px 25px;
	}
	
	#logos .work-logo img {
	  filter:brightness(100%);
	}

    #contact-us .content {
        padding:70px 25px;
    }

    #contact-us h2 {
        font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
    }

    .close {
        width:35px;
        height:35px;
        background:url(../images/close.svg) no-repeat 0 0 / 35px 35px;
    }

    .overlay {
        opacity:0.7 !important;
    }
     .description {
        transform: translateY(0) !important;
        opacity:1 !important;
        display:block !important;
    }

    .bio h2,
    .bio .bio-title {
        display:none;
    }

    .mobile-bio {
        border-top:1px solid #0b4b5e;
        padding:25px;
    }

    .mobile-bio,
    .mobile-bio h2 {
        display:block !important;
    }

    .mobile-bio h2 {
        font:400 25px/28px "GT Walsheim Bold", arial, sans-serif;
        color:#0b4b5e;
        margin:0 0 5px 0;
    }

    .mobile-bio p {
        margin:0 0 10px 0;
    }

    #our-work .button.more {
        display:none;
    }

    .work-title h2 {
        padding-left:25px;
    }
}


/* 700px width */
@media (max-width: 700px) {
    .two-columns .col {
        width:100%;
    }

    .two-columns .col:first-child {
        margin-bottom:30px;
    }
	
	#client-work .two-columns .col:first-child {
        margin-bottom:0;
    }

    header .description h3 {
        font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
    }

    #just-videos h1,
    #just-videos h1 .small {
        font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
    }

}

/* 600px width */
@media (max-width: 600px) {
    #navigation {
        width: 100%;
        position:absolute;
        padding: 100px 20px 0 50px;
    }

    #navigation li a {
        font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
        padding:15px 0;
    }

    .title h1 {
        font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
    }


    #client-work header img {
        width:auto;
        height:500px;
    }
	
	#client-work header .video {
	  width:250%;
	  height:500px;
      padding:0;
	}
	
	#client-work header .video iframe {
	  left:-30%;
	}

    #our-work header img {
        width:auto;
        height:500px;
    }
}


/* 500px width */
@media (max-width: 500px) {
    h1 {
        font:400 50px/50px "GT Walsheim Regular", arial, sans-serif;
    }

    h3 {
        font:400 20px/26px "GT Walsheim Regular", arial, sans-serif;
    }

    h4 {
        font:400 26px/30px "GT Walsheim Regular", arial, sans-serif;
    }

    p {
        font:400 20px/26px "GT Walsheim Regular", arial, sans-serif;
    }

    .list li {
        font:400 20px/26px "GT Walsheim Regular", arial, sans-serif;
    }

    .menu-wrapper p {
        display:none;
    }

    #home h1 {
        font-size: 60px;
        line-height: 65px;
    }

    #home-working-with-us h2 {
        font-size: 50px;
        line-height: 50px;
    }

    header .container {
        padding-top:150px;
        padding-bottom:60px;
    }

    #people .col {
        min-height:500px;
    }

    #people .col:last-child {
        border-bottom:0;
    }

    #people .col img {
        width:auto;
        height:500px;   
    }

    .owl-prev {
        width:50px;
        height:50px;
    }

    .owl-next {
        width:50px;
        height:50px;
    }

     #scroll {
        width:50px;
        height:50px;
    }
	
    #testimonials .owl-prev {
        right:90px;
    }

    #testimonials article img {
        margin:0;
    }

	#testimonials .container h4 {
	  font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
	}

    #just-videos h1,
    #just-videos h1 .small {
        font:400 35px/35spx "GT Walsheim Regular", arial, sans-serif;
    }

    #services h4 {
        font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
    }

    #services .container {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    #contact-us h2 {
        font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
    }

    #contact-us {
        padding:0 15px;
    }

    #footer-logo {
        display:none;
    }

    #footer-logo-mobile.mobile {
        display:block;
    }

    #footer-logo-mobile img {
        width:270px;
        display:block;
        margin-bottom:10px;
    }
}

@media (max-width: 450px) {
    #next-prev-work.flex {
        display:block;
    }

    #next-prev-work a {
        width:100%;
        text-align:center;
    }

    #next-prev-work a:first-child {
        border-right:0;
        border-bottom:1px solid #0b4b5e;
    }

    #next-prev-work a:last-child {
        text-align:center;
    }
}


/* 400px width */
@media (max-width: 400px) {
    h1 {
        font:400 40px/40px "GT Walsheim Regular", arial, sans-serif;
    }

    h4 {
        font:400 22px/28px "GT Walsheim Regular", arial, sans-serif;
    }

    p {
        font:400 18px/24px "GT Walsheim Regular", arial, sans-serif;
    }

    .list li {
        font:400 18px/24px "GT Walsheim Regular", arial, sans-serif;
    }

    .container {
        padding:65px 20px;
    }

    .button-outlined {
        font:400 18px/26px "GT Walsheim Bold", arial, sans-serif;
        padding:20px 30px;
    }

    .link {
        font:400 18px/22px "GT Walsheim Bold", arial, sans-serif;
    }

    .menu-wrapper {
        right:20px;
    }

    #navigation {
        padding: 100px 20px 0 43px;
    }

    #navigation li a {
        font:400 30px/30px "GT Walsheim Regular", arial, sans-serif;
        padding:15px 0;
    }

    #home header .container {
        padding:65px 20px;
    }

    #logo-mobile img {
        width:200px;
        left:20px;
    }

    .menu-wrapper {
        top:25px;
        right:20px;
    }

    #home-working-with-us h2 {
        font-size: 40px;
        line-height: 40px;
    }

    #home h1 {
        font-size: 50px;
        line-height: 54px;
    }

    .holder__head .col:nth-child(1) {
        padding:0 20px;
    }

    .holder__head h2 {
        font:400 20px/24px "GT Walsheim Bold", arial, sans-serif;
    }

    .holder__head .button {
        width:140px;
        font:400 18px/26px "GT Walsheim Bold", arial, sans-serif;
    }

    #home-working-with-us h2 {
        font-size: 35px;
        line-height: 35px;
    }

    #people .col {
        min-height:400px;
        padding-top:20px;
    }

    #people .col img {
        width:auto;
        height:400px;
        margin-left:-30px;
    }

    #work .description h3 {
        font:400 30px/33px "GT Walsheim Bold", arial, sans-serif;
    }

    #testimonials article img {
        width:300px !important;
        height:auto !important;
        
    }
	
	#testimonials .container h4 {
	  font:400 30px/30px "GT Walsheim Regular", arial, sans-serif;
	}

    #just-videos h1,
    #just-videos h1 .small {
        font:400 30px/30px "GT Walsheim Regular", arial, sans-serif;
    }

    #services h4 {
        font:400 30px/30px "GT Walsheim Regular", arial, sans-serif;
    }

    #contact-us .content {
        padding:60px 20px;
    }

    #footer-logo-mobile img {
        width:220px;
    }
}