@media screen and (max-width: 1500px){
    #level-3-header{
        margin: 0;
    }
    
    .lvl3 #internal-banner{
        height: auto;
    }
}

@media  screen and (min-width: 840px){
    #internal-banner .slogan{
		position: absolute;
		left: 0px;
		right: 0px;
		top: 50vh;
		
		/* HACK: 180px here is just an arbitrary value to make the heading look centered */
        margin: -180px auto 0;
		transform: translateY(-50%);
    }

    .sidebar{
        margin-top: 116px;
    }
    
    #casestudies-section{
        max-height: 900px;
    }
	
	#casestudies-section .slider-list {
		height: 900px;
		padding-bottom: 0px;
	}
    
    #contact .row{
        width: 80%;
        margin: 0 auto;
        padding-right: 2%;
    }        
}

@media screen and (max-width: 1140px){
    .clickaservice{
        display: none;
    }
    
    .header-inner{
        padding: 0 0 0 10px;
    }
    
    .container,
    #internal-about-section .container {
        width: 100%;
    }
    
    .parallax__layer--back {    
        z-index: -1;
    }
    
    #group2 {
        /* NOTE: The parallax script sets background-position-y to a negative
                 value. This can cause "background-size: cover" to leave
                 a white gap at the bottom. I've set the height of the
                 background image to a little bit more than 100% to
                 work around this issue. */
        background-size: auto 130%;
    }
	
    .contact-form {
        margin-right: 2%;
    }
    
	.slider-list .row {
		/* with the .case-slider padding-bottom below, this will unintentionally
		   become scrollable, so we need to stop that */ 
		overflow: hidden;
	}

    .case-slider {
		/* make the height of this element proportional to its with using
		   padding-bottom */
		height: 0;
		padding-bottom: 56%;
		overflow: hidden;
	}
    
    #contact-banner #internal-banner{
        height: auto !important;
    } 
    
    .clickaservice{
        display: none;
    }
}

@media screen and (max-height: 420px){
    body .menu ul li a {        
        padding: 18px 20px;
    }
    
    body .menu-open .bottom-bar{
        margin-top: -50px;
    }
}

@media screen and (max-width: 900px){
    #offices-section .off-col-4, #image-section .one-third{
        width: 100%;
        position: relative; 
        border-bottom: 1px solid #fff;
    }
    .office-padding, #image-section .one-third .inner-padding{
        padding: 0;
    }
    
    #image-section .full-width, .maps{
        height: 330px;
        border-bottom: 1px solid #fff;
    }    
    
    .map iframe{
        height: 330px;
    }
}

@media screen and (max-width: 840px){
    
    div[class^="col"], div[class^="foot-col"]{        
        margin-left: 2% !important;        
    }
    
    #tabscontent{
        height: 660px;
    }
	
	#tabscontent .col-3,
	#tabscontent .col-4,
	#tabscontent .col-5 {
		width: 48%;
	}
	
	#tabscontent .col-5 + .col-3 {
		width: 100%;
	}
	
	#tabscontent .learn-more-section {
		width: 100%;
		clear: both;
	}
	
	#tabscontent .learn-more {
		width: 48%;
		float: left;
	}
    
    #group2{
        height: 1280px;
    }
    
    .col-12{
        width: 98%;
    }

    .col-11{
        width: 98%;
    }

    .col-10{
        width: 81.3333333%;
    }

    .col-9{
        width: 73%;
    }

    .col-8{
        width: 98%;
    }

    .col-7{
        width: 98%;
    }

    .col-6{
        width: 98%;
    }

    .col-5{
        width: 98%;
    }

    .col-4{
        width: 98%;
    }

    .col-3{
        width: 48%;
    }
    
    #footer .col-3{
        width: 23%;
    }

    .col-2{
        width: 14.666666%;
    }

    .col-1-5{
        width: 10.5%
    }

    .col-1{
        width: 6.33333%;
    }

    .foot-col-10{
        width: 98%
    }

    .foot-col-5{
        width: 48%;
    }

    .foot-col-2-5{
        width: 23%;
    }

    .foot-col-2{
        width: 31.3333333%
    }

    .foot-col-1{
        width: 10%;
    }
    
    .related-service{
        width: 80%;
        margin: 0 auto 30px;
        display: block;
        position: relative;
        float: none;
    }
    
    #slogan{
        top: 35%;
    }
    
    #technology-section .container, #development-section .container, #design-section .container{
        padding: 0;
    }
    
    .ribbons{
        position: relative;
        top: 0;
    }
    
    .ribbon-btn{
        margin: 30px 0 0;
        right: 10%;
		left:  10%;
        text-align: center;
    }
    
    #level-3-header{
        margin: 30px 0 0;
    }
    
    .ribbon-corner{
        display: none !important;
    }
    
    #internal-about-section h3,#internal-about-section p{
        text-align: center;
    }
    
    #transparency-section p, #testimonial-section p{
        padding: 0 15px;
    }
    
    .casestudies-overlay{
        position: relative;
    }
	
	#casestudies-section .flare {
		margin-top: 20px;
	}

	#casestudies-section .slider-list {
		height: auto;
		padding-bottom: 0px;
	}
	
	#casestudies-section .slider-list > .active {
		position: static;
	}
	
	#casestudies-section .slider-list .row,
	#casestudies-section .slider-list .col-12,
	#casestudies-section .slider-list .case-slider {
		padding: 0px;
	}
	
	#casestudies-section .slider-list .case-slider {
		height: auto;
		overflow: visible;
	}
	
	#casestudies-section .slider-list .case-slider img {
		position: static;
		margin-bottom: 0px;
	}
	
	#casestudies-section > nav {
		top: 410px;
	}
    
    .logo{
        float: right;
    }
    
    #about-section p {
        font-size: 25px;
        line-height: 35px;
    }
    
    #internal-banner .slogan{
        padding: 60px 0 0;
    }    
    
    #internal-banner #group4{
        height: 100% !important;
    }
    
    .small-ribbon-btn {       
        position: relative;
        left: 35%;        
        width: 65%;
        margin: 10px 0 20px;
    }
    
    #group-internal-insights{
        height: 950px;
    }
    
    .section-inner-padding img{
        width: 100%
    }
    
	.small-ribbon-btn {
		bottom: 30px;
	}
	
    #clients{
        top: -20px;
    }
    
    #desktop-menu{
        display: none;
    }
    
    #mobile-menu{
        display: block;
    }
    
    .show-mobile{
        display: block;
    }

    .show-desktop{
        display: none;
    }
    
    #internal-banner{
        height: auto;
        min-height: 600px;
    }
    
    #home-link{
        width:150px;
        margin: 0 auto;
        display: block;
    }
    
    #menu-bar {
        padding: 0;
    }
    
    #mobile-menu .toggle{
        display: block;
        left: 100%;
        position: absolute;
    }   
    
    #group-internal-insights{
        height: 1400px;
    }
    
    .menu ul li{
        display: none;
    }
    
    .menu .toggle{
        margin: 12px 0 0 12px;
        float: none;
    }       
    
    .menu ul li{
        display: block;
    }

    .menu{
        float: none;
        background: #1f313f;
        border-right: 1px solid #888; 
        width: 230px;;
        height: 100%;
        margin: 0;
        position: fixed;
        top: 0;
        z-index: 200;
    }

    .menu ul li a{
        display: block;
        height: 100%;
        padding: 30px 20px;
    }

    .menu ul li {
        display: block;        
        border-bottom: 1px solid #777;
        position: relative;        
    }
    
    .menu .bottom-bar{
        display: none;
        visibility:visible;
        opacity: 1;
    }
    
    .menu-open .bottom-bar {
        display: block;
        position: absolute;
        height: 100%;
        
        right: 0;
        margin-top: -74px;
        width: 3%;
        left: 97%;
    }
    
    .menu{
        transform: translate3d(-100%, 0, 0);
        transition: transform .4s ease-in-out;        
        -webkit-transform: translate3d(-100%, 0, 0);
        -webkit-transform: translateX(-100%);
        -webkit-transition: transform .4s ease-in-out;
    }
    
    .menu-open{
        transform: translate3d(0, 0, 0);
        transition: transform .4s ease-in-out;        
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-transform: translateX(0);
        -webkit-transition: transform .4s ease-in-out;
    }   
    
    #mobile-menu .logo {
        background: url(../img/logodark.png) no-repeat 50%;
        background-size: contain;
        width: 150px;
        margin: 2px auto;
        height: 26px;
        float: none;
        display: block;
        position: relative;
        
        transform: translate3d(0, 0, 0);
        transition: transform .4s ease-in-out;        
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-transition: transform .4s ease-in-out;
    }
    
    .home-link{
        transform: translate3d(100%, 0, 0);
        transition: transform .4s ease-in-out;        
        -webkit-transform: translate3d(100%, 0, 0);
        -webkit-transition: transform .4s ease-in-out;
    }
    
    #mobile-menu .logo-move{
        transform: translate3d(100%, 0, 0);
        transition: transform .4s ease-in-out;        
        -webkit-transform: translate3d(100%, 0, 0);
        -webkit-transition: transform .4s ease-in-out;
    }
    
    #mobile-menu #menu-bar{
        display: block;
        position: fixed;
        z-index: 50;
        width: 100%;
        padding: 8px 0;
        border-bottom: 1px solid #ccc;
    }
    
    .internal-page #menu-bar{
        display: none;
    }
    
    #internal-banner #group4{
        height: 100%;
    }
    
    .internal-page .menu a{
        color: #fff;
    }
    
    .section .content-img, .section .section-inner-padding img{
        display: none;
    }
    
    .testimonial-cite .name-block {
        float: none;
        width: 100%;
        padding: 0;
        text-align: center;
    }
    
    .testimonial-cite .divider{
        width: 100%;
        height: 1px;   
        margin: 20px auto;
        background: #b8beca;
        display: block;
        position: relative;
    }
    
    .testimonial-logo{
        float: left;
        width: 100%;
        padding: 0;
    }

    .testimonial-logo img{
        display: block;
        float: none;
        margin: 0 auto;
    }    
	
	.banner-number{
		top: 60px;
	}
}

@media screen and (max-width: 650px){    
    #internal-banner .slogan {
		padding-top: 50px;
	}
	
	#level-3-header .col-7 h1,
	#contact-header h1 {
		margin-top: 10px;
	}
	
	#internal-banner .long {
		font-size: 30px;
	}
	
	#level-3-header .col-7 h2 {
		margin-bottom: 15px;
	}
	
	.row {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	div[class^="single"],
	div[class^="multi"] {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	div[class^="single"] .container-colour,
	div[class^="multi"] .container-colour {
		padding-top: 10px;
		padding-bottom: 10px;
	}
    
    #tabscontent{
        height: auto;
    }
	
	#tabscontent .row {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	#tabscontent .row .col-12 {
		padding-top: 0px;
	}
	
	.tab-heading {
		padding-bottom: 15px;
	}
	
	.tab-heading h2 {
		font-size: 24px;
	}
	
	.tabpage {
		position: relative;
	}
	
	#clients {
		height: auto;
	}
	
	#clients .row {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	#clients_slider_outer {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	#about-group {
		height: 100% !important;
	}
	
	#internal-about-section .row,
	#about-section .row {
		padding-top: 0px;
	}
	
	#internal-about-section .col-12 {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	#internal-about-section .col-4:nth-of-type(2),
	#internal-about-section .col-4:nth-of-type(4) {
		margin-top: 10px;
	}
	
	#about-section .section-heading {
		margin-bottom: 20px;
	}
	
	#about-section p {
		font-size: 20px;
	}
	
	#casestudies-section h2 {
		font-size: 24px;
	}
	
	#casestudies-section > nav {
		top: 270px;
		height: 40px;
		opacity: 0.3;
	}
	
	#casestudies-section > nav a {
		width: 18px;
	}
	
	#casestudies-section > nav:hover {
		opacity: 1;
	}
	
	.slider {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	#testimonial-section {
		padding-top: 40px;
	}
	
	#casestudies-section h3 {
		margin-bottom: 30px;
	}

	#casestudies-section h2 {
		font-size: 30px;
	}
	
	.casestudies-overlay {
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#group1 {
		height: auto;
	}
	
	#group1 .parallax__layer {
		position: relative;
	}
    
    #group2{
        height: auto;
		background-size: auto 170vh;
    }
	
	#group2 .parallax__layer {
		position: relative;
	}
    
    #slogan{
        top: 35%;
    }
    
    #slogan h1, #internal-banner h1 {
        font-size: 35px;
		line-height: 45px;
        top: -80%;
    }
	
	#insights-section {
		min-height: 0px;
		height: auto;
		padding-top: 20px;
	}
	
	#insights-section .section-heading {
		margin-bottom: 0px;
	}
	
	#insights-section .section-heading .heading-flare {
		margin-bottom: 20px;
	}
	
	#insights-section .section-heading h2 {
		margin-top: 0px;
		margin-bottom: 20px;
	}
	
	#insights-section .section-heading h3 {
		font-size: 32px;
		line-height: 1.4;
	}
	
	#insights-section .col-12 {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	#insights-section .col-4 h2 {
		line-height: 1.5;
		margin-bottom: 15px;
	}
	
	body #contact {
		position: relative;
		background-color: #fff;
		margin-top: 68px;
	}
	
	#contact .row {
		padding-top: 20px;
		padding-bottom: 10px;
	}
	
	#contact .speech {
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		left: 0px;
		right: 0px;
		margin: 0px;
		padding-left: 0px;
		padding-right: 0px;
	}
	
	#contact .speech h2 {
		font-size: 14px;
		line-height: 1.4;
	}
	
	#related-services-section .row {
		padding-top: 0px;
	}
	
	.related-service {
		width: 85%;
	}
	
	.related-service p {
		padding: 40px 20px 0px;
	}
    
    .col-3{
        width: 98%;
    }    
	
	#group3 {
		height: auto;
	}
	
	#group3 .parallax__layer--base {
		position: relative;
	}
	
	#footer .row {
		box-sizing: border-box;
		padding-left: 3%;
		padding-right: 3%;
		width: 100%;
	}
    
    #footer .col-3{
        width: 48%;
        height: auto;
    }
	
    #footer .col-3 + .col-3 + .col-3 {
		clear: both;
		width: 100% !important;
	}
	
    #technology-section .container, #development-section .container, #design-section .container{
        padding: 0;
    }
    
    .clickaservice{
        display: none;
    }
    
    .ribbon-btn{
        margin: 30px 0 0;
        position: relative;
        left: 35%;
        width: 65%;
        right:0;
        height: 50px;
		padding: 0;
        line-height: 50px;
    }
    
    .ribbon-btn .inline-img {
        right: 60px;
        top: 17px;
    }
    
    .ribbon-corner{
        display: none !important;
    }
    
    div[class^="single"] h2, div[class^="multi"] h2{
        font-size: 35px;
    }    
    
    .transparency-image img {
        margin-bottom: -3px;
        width: 180%;
        display: block;
        margin: 0 -40% 0;
    }
}

@media screen and (max-width: 540px){    
	#tabscontent .col-3,
	#tabscontent .col-4,
	#tabscontent .col-5 {
		width: 100%;
	}
	
	#tabscontent .learn-more {
		width: 100%;
		float: none;
	}
	
    #group2{
        height: auto;
    }
    
    .foot-col-2{
        width: 48%
    }        
}

@media screen and (max-width: 410px){
    
}

@media screen and (max-width: 380px){
	
    .error-nav ul{
        width: 100%;    
    }
    
    .error-nav ul li{
        width: 60px;
        padding: 0 10px;
    }
    
    #clients .section-heading .heading-flare{
        display: none;
    }
    
    .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3{
        width: 98%;
    }

    .col-2, .col-1{
        width: 48%;
    }

    .col-1-5{
        width: 10.5%
    }
	
    #testimonial-image img{
        width: 100%;
    }

    #footer .col-3{
        width: 48% !important;
    }
	
	#slogan h1, #internal-banner h1 {
        font-size: 30px;
		line-height: 37px;
        top: -75%;
    }

}

@media screen and (max-width: 330px){
	#slogan {
		top: 33%;
	}
	
	#tabs {
		height: 60px;
		margin-top: -60px;
		font-size: 13px;
	}
	
	#tabs > ul > li {
		height: 60px;
	}
	
	.inner-tab {
		box-sizing: border-box;
		padding: 0px;
		padding-top: 20px;
	}
	
	#tabs .flare {
		height: 3px;
		margin-top: 10px;
	}
}