/*Mobile*/
@media (max-width: 417px) {
	.serv-col {
		min-height: 240px!important;
	}	
}

@media (min-width: 418px) and (max-width: 766px) {
	.serv-col {
		min-height: 300px!important;
	}
}
@media (max-width: 767px) {
    .logo {
        display: none;
    }
	
	.btn-primary {
		background-color: #fbaf2b!important;
		min-width: auto;
		padding: 15px 20px!important;
	}
    
    .mobi-logo {
        display: block;
		width: 65%;
		float: left;
		margin-right: auto;
		margin-left: auto;
		padding-left: 10px;
		padding-top: 0;
    }
	
	.mobi-logo img {
		width: 80%;
	}
    
    .navbar-toggle {
        width: 35%;
        float: left;
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        margin-top: 0;
        border-radius: 0;
        margin-bottom: 0;
		font-size: 35px;
    }
    
    .navbar-default {
        z-index: 999;
        top: 0;
		text-align: left;
    }
    
    .navbar-default .navbar-toggle {
        border-color: transparent;
        color: #424242;
        text-align: right;
        padding-right: 30px;
    }
    
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: transparent;
    }
    
    .navbar-nav {
        float: none;
        margin: 0;
        background-color: #fff;
        z-index: 99999;
        text-align: center;
        padding: 20px;
    }
    
    .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
    
    .navbar-nav>li {
        float: none;
        display: block;
        padding: 0;
    }
    
    .navbar-nav>li>a, .navbar-nav>li>a:focus, .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover, .dropdown.open .dropdown>a, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .navbar-default li.active a, .navbar-default li a:hover, .navbar-default li a:active, .navbar-default li.dropdown.active>a, .navbar-default>li.dropdown>a:hover {
        background-color: transparent!important;
        padding-top: 5px!important;
        padding-bottom: 5px!important;
        color: #000!important;
    }
	
	.open>.dropdown-menu {
		display: block;
		text-align: center;
	}
	
	.navbar-default .col-md-7 {
		padding: 0;
	}
    
    /*================================= Home page =============================*/
    
    .home-header {
        padding-top: 25%;
        padding-bottom: 15%;
    }
    
    .home-header h1 {
        font-size: 25px;
        line-height: 40px;
    }
    
    .home-about-text img {
        width: 40%;
        display: block;
        float: none;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 20px;
    }
    
    .home-about-text {
        text-align: center;
    }
    
    .home-about-text h2 {
        width: 100%;
        display: block;
        float: none;
        margin-right: auto;
        margin-left: auto;
        line-height: 30px;
    }
    
    .home-instant-quote {
        padding: 20px;
        margin-top: 20px;
    }
    
    .home-services {
        padding-top: 0;
        padding-left: 0;
        margin-top: 10%;
    }
    
    .serv-col {
        width: 44%;
        float: left;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 20px;
        display: inline-block;
		min-height: 240px;
    }
    
    .serv-col img {
        width: 60%;
    }
    
    .what-we-do-background {
        background-image: none;
    }
    
    .digital-marketing h2 {
        font-size: 40px;
    }
    
    .digital-marketing .btn-primary {
        margin-top: 30px;
    }
    
    .home-industries .col-md-3 {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        width: 50%;
        float: left;
        margin-left: auto;
        margin-right: auto;
    }
    
    .img-overlay {
        opacity: 1;
        padding-top: 15%;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .img-overlay p {
        font-size: 17px;
    }
    
    .image-wrapper h4 {
        opacity: 0!important;
    }
    
    .btn-primary.blk {
        min-width: 0;
		padding: 8px 15px!important;
    }
    
    .solid {
		padding-top: 31%;
    	padding-bottom: 32%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .solid p {
        font-size: 20px;
    }
    
    .client-logos {
        padding-top: 30px;
        padding-bottom: 10px;
    }
    
    .mt-40 {
        margin-top: 0;
    }
	
	.mobi-0 {
		display: none;
	}
	
	.mobi-only {
		display: block;
	}
	
	.video {
		background-image: url(/images/mobi-home-header.jpg);
		background-position: center;
		background-size: cover;
		padding-top: 0;
		padding-bottom: 0;
		min-height: 0;
	}
	
	.video-overlay {
		padding-top: 23%;
		padding-bottom: 16%;
	}
	
	.home-header h1, .video-overlay h1 {
		font-size: 30px;
		line-height: 40px;
	}
	
	.video-overlay .btn-primary {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.fancybox-slide--video .fancybox-close-small {
		top: -59px!important;
		right: 0!important;
		background-color: #fbaf2b!important;
	}
	
	.fancybox-close-small:after {
		content: ""!important;
		font: 30px/36px Arial,Helvetica Neue,Helvetica,sans-serif!important;
		color: transparent!important;
		background: transparent!important;
		z-index: 2;
	}
    
    /*------------- Styles for owl-carousel on mobile only --------------------*/
    .owl-nav {
        width: 100%;
        position: relative;
        top: 100%;
    }
	
	.client-logos .owl-nav {
		float: none!important;
		margin-top: 10px;
		text-align: center!important;
    }
    
    .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
        padding: 10px;
        display: inline-block;
    }
    /*-------------------------------------------------------------------------*/
    /*============================ About page =================================*/
	.about-page {
		background-image: url('/images/mobile-about-header.jpg')!important;
		background-position: top center!important;
	}
    
    .about, .associates-intro {
        padding-top: 40px;
        padding-bottom: 40px;
    }
	
	.about .col-md-4 {
		text-align: center;
	}
	
	.about img {
		width: 70%;
	}
    
    .about h2 {
        font-size: 30px;
		line-height: 40px;
    }
    
    .client-logos h2, .our-team h2 {
        margin-bottom: 20px;
    }
    
    /*============================== Services page ============================*/
    .services-intro, .intro {
        padding-top: 40px;
        padding-bottom: 40px;
		text-align: left!important;
    }
    
    .services-intro p>br, .associates-intro p>br, .services-intro h2>br {
        display: none;
    }
    
    .services {
        padding-top: 0;
        padding-bottom: 0;
    }
	
	.fancybox-slide--iframe {
		padding: 44px 10px 0;
	}
    
    .img-col {
        width: 30%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    .txt-col {
        width: 70%;
        float: left;
        margin-right: auto;
        margin-left: auto;
        padding: 0 20px;
        margin-bottom: 30px;
    }
    
    .like {
        text-align: center;
    }
    
    .like .btn-primary {
        float: none;
        margin-top: 20px;
    }
    
    /*=========================== Industries page =============================*/
    
    .intro h2>br {
        display: none;
    }
    
    .portfolio {
        padding-top: 30px;
        padding-bottom: 40px;
    }
	
	.portfolio .owl-dots {
		top: 88%;
	}
    
    .owl-dots {
        top: 80%;
    }
    
    .pf-overlay p {
        padding-top: 20%;
        font-size: 20px;
    }
    
    .owl-carousel.portfolio .owl-prev, .owl-carousel.portfolio .owl-next {
        width: 10%;
    }
    
    /*============================ Gallery page ===============================*/
    
    .gallery .col-md-3 {
        width: 100%;
    }
    
    .filters {
    padding-top: 20px;
    padding-bottom: 20px;
}
	
	.filters .col-md-12	{
		padding: 0;
	}
	
    .filters a {
		margin-left: auto;
		margin-right: auto;
		font-size: 14px;
		width: 30%;
		display: inline-block;
		vertical-align: middle;
	}
	
	.filters span {
		font-size: 50px;
		line-height: 59px;
		vertical-align: middle;
		width: 1%;
		font-weight: 100;
	}
    
    /*======================= Business Associates page ========================*/
    
    .why .col-md-4 {
        width: 33.3%;
        float: left;
        margin-left: auto;
        margin-right: auto;
    }
    
    .why img {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 40px;
    }
    
    .interest {
        text-align: center;
    }
    
    .interest .btn-primary {
        float: none;
    }
    
    .interest-form {
        padding-top: 10%;
        padding-bottom: 10%;
    }
    
    .interest-form h2, .contact-form h2 {
        margin-bottom: 0px; 
        margin-top: 0;
    }
    
    /*=========================== Contact page ================================*/
    
    #content img {
        width: 70%;
    }

    /*========================== Footer =======================================*/
    
    .footer {
        text-align: center;
    }
	
	.footer .col-md-3 {
		margin-top: 0!important;
	}
    
    .footer h3:after {
        left: 45%;
        width: 10%;
    }
    
    .footer-middle {
        padding-top: 0;
    }
    
    .footer-middle .btn-primary {
        float: none;
        margin-top: 20px;
    }
}

/*Tablet & small screens:*/
@media (min-width: 768px) and (max-width: 991px) {
    .logo {
        text-align: center;
		margin: 0;
    }
    
    .logo img {
        float: none;
        width: 30%;
    }
	
	.navbar-default {
		top: 10px;
		z-index: 9999;
	}
    
    .navbar-default .col-md-5 {
        width: 100%;
        float: left;
        margin-right: auto;
        margin-left: auto;
        padding-left: 20px;
        padding-right: 0;
        padding-top:0px;
    }
    
    .navbar-default .col-md-7 {
        float: left;
        width: 100%;
        margin-right: auto;
        margin-left: auto;
		padding: 0;
    }
    
    .navbar-nav {
        float: none;
        text-align: center;
    }
    
    .nav>li>a {
		padding: 0px 5px;
    }
    
    .navbar-nav>li>a:focus, .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
		padding-top: 14px!important;
    	padding-bottom: 15px!important;
    }
	
	.dropdown.open .dropdown>a, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
		padding-top: 10px!important;
    	padding-bottom: 10px!important;
	}
    
    .btn-primary {
        min-width: auto;
        padding: 10px!important;
    }
	
	.mobi-0 {
		display: none;
	}
	
	.mobi-only {
		display: block;
	}
	
	.video {
		background-image: url(/images/home-header4.jpg);
		background-position: center;
		background-size: cover;
		padding-top: 0;
		padding-bottom: 0;
		min-height: 0;
	}
	
	.video-overlay {
		padding-top: 23%;
		padding-bottom: 16%;
	}
	
	.home-header h1, .video-overlay h1 {
		font-size: 30px;
		line-height: 40px;
	}
	
	.video-overlay .btn-primary {
		width: 40%;
		float: left;
		margin-right: 20px;
		margin-left: auto;
	}
	
	.fancybox-slide--video .fancybox-close-small {
		top: -75px!important;
		right: 0!important;
		background-color: #fbaf2b!important;
	}
	
	.fancybox-close-small:after {
		content: ""!important;
		font: 30px/36px Arial,Helvetica Neue,Helvetica,sans-serif!important;
		color: transparent!important;
		background: transparent!important;
		z-index: 2;
	}
	
	.button-close {
		display: none;
	}
    
    .home-header {
        padding-top: 50%;
    }
    
    .other-headers {
        padding-top: 40%;
        padding-bottom: 2%;
    }
    
    .other-headers h1 {
        padding-top: 0;
    }
    
    .home-about-text {
        margin-bottom: 40px;
    }
    
    .home-instant-quote {
        margin-top: 0;
    }
    
    .what-we-do-background {
        background-image: none;
    }
    
    .home-services {
        padding-left: 0;
        margin-top: 5%;
    }
    
    .digital-marketing h2 {
        font-size: 40px;
    }
    
    .digital-marketing .btn-primary {
        margin-top: 30px;
    }
    
    .home-industries .col-md-3 {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
        width: 33.3%;
        float: left;
        margin-left: auto;
        margin-right: auto;
    }
    
    .img-overlay {
        opacity: 1;
        padding-top: 25%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .image-wrapper h4 {
        opacity: 0!important;
    }
    
    .solid {
        padding-top: 44%;
        padding-bottom: 44%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .solid p {
        font-size: 20px;
    }
    
    .become {
        padding-top: 0;
    }
    
    .become img {
        width: 60%;
    }
    
    /*------------- Styles for owl-carousel on mobile and tablet only --------------------*/
    .owl-nav {
        width: 100%;
        position: relative;
        top: 100%;
    }
    
    .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
        padding: 10px 20px;
        display: inline-block;
    }
    
    .owl-carousel.portfolio .owl-prev, .owl-carousel.portfolio .owl-next {
        width: auto;
    }
    /*-------------------------------------------------------------------------*/
    /*=============================== About page ==============================*/
    .about img {
        width: 40%;
    }
	
	.about-page {
		background-image: url('/images/tablet-about-header.jpg')!important;
		background-position: top center!important;
	}
    
    .our-team .col-md-3 {
        width: 33.3%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    .pf-overlay p {
        font-size: 25px;
    }
    
    .owl-dots {
        top: 85%;
    }
    
    .img-overlay2.gallery p {
        padding-top: 40%;
        padding-left: 10px;
    }
    
    .gallery .col-md-3 {
        margin-bottom: 5px;
    }
    
    /*=========================== Business associates =========================*/
    
    .why .col-md-4 {
        width: 33.3%;
        float: left;
        margin-left: auto;
        margin-right: auto;
    }
    
    .why img {
        width: 70%;
    }
    
    .interest .col-md-8 {
        width: 50%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    #map {
        height: 400px;
    }
    
    /*================================= Footer ================================*/
    .tablet-only {
        display: block;
    }
    
    .footer .col-md-3, .footer .col-md-6 {
        width: 50%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.logo {
		margin: 0;
	}
	
    .logo img {
        float: none;
        margin-top: 5px;
        width: 100%;
    }
    
    .navbar-default {
        text-align: left;
		border-radius: 0;
    }
    
    .navbar-default .col-md-5 {
        width: 30%;
        float: left;
        margin-right: auto;
        margin-left: auto;
    }
    
    .navbar-default .col-md-7 {
        width: 70%;
        float: left;
        margin-right: auto;
        margin-left: auto;
		padding: 0;
    }
    
    .navbar-nav {
        float: none;
        margin: 0;
    }
    
    .navbar-default li a:active, .navbar-default li.dropdown.active>a, .navbar-default>li.dropdown>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
		padding-top: 35px!important;
		padding-bottom: 35px!important;
		font-size: 15px!important;
	}
	
	.navbar-default li.active a, .navbar-default li.active a:hover {
		padding-top: 35px!important;
		padding-bottom: 35px!important;
		font-size: 15px!important;
	}
    
	.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
		padding: 0 7px;
		font-size: 15px!important;
	}
	
	.navbar-default .btn-primary {
        min-width: 0;
        padding: 10px 10px!important;
    }
    
    
    .btn-primary {
        min-width: 0;
        padding: 15px 15px!important;
    }
	
	video {
		position: absolute;
		top: 80%;
		left: 0;
		right: 0;
		z-index: -100;
		width: 100vw;
		height: auto;
		overflow-y: hidden;
		transform: translateX(0) translateY(-86%);
	}
	
	.video {
		background-color: transparent;
		text-align: left;
		min-height: 90vh;
		position: relative;
		max-width: 100%;
		max-height: 100%;
		overflow-x: hidden;
	}
	
	.video-overlay {
		z-index: 99999;
		padding-top: 15%;
    	padding-bottom: 0;
	}
    
    .home-header h1 {
        line-height: 50px;
    }
    
    .home-services {
        padding-left: 0px;
        margin-top: 5%;
    }
	
	.about-page {
		background-image: url('/images/small-screen-about-header.jpg')!important;
		background-position: top center!important;
	}
    
    .serv-col {
        width: 22.8%;
    }
    
    .digital-marketing .col-md-offset-4 {
        margin-left: 20%;
    }
    
    .intro h2>br {
        display: none;
    }
    
    .owl-dots {
        margin-top: 0;
    }
    
    .owl-carousel.portfolio .owl-prev, .owl-carousel.portfolio .owl-next {
        width:auto;
        padding: 10px 20px 10px 20px;
    }
    
    .img-overlay2.gallery p {
        padding-top: 50%;
        padding-left: 10px;
    }
    
    .gallery .col-md-3 {
        margin-bottom: 5px;
    }
    
    #map {
        height: 400px;
    }
}

/*Laptop:*/
@media (min-width: 1199px) and (max-width: 1600px) {
    .navbar-default {
        text-align: left;      
    }
    
    .navbar-default li a:active, .navbar-default li.dropdown.active>a, .navbar-default>li.dropdown>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
		padding-top: 40px!important;
		padding-bottom: 40px!important;
		font-size: 18px!important;
	}
	
	.navbar-default li.active a, .navbar-default li.active a:hover {
		padding-top: 40px!important;
    	padding-bottom: 40px!important;
		font-size: 18px!important;
	}
    
	.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
		padding: 0 8px;
		font-size: 17px!important;
	}
	
	.navbar-default .col-md-7 {
		width: 70%;
		float: left;
		margin-right: auto;
		margin-left: auto;
	}
	
	.navbar-default .col-md-5 {
		width: 30%;
		float: left;
		margin-right: auto;
		margin-left: auto;
	}
	
    .btn-primary {
        min-width: auto;
        padding: 15px 30px!important;
    }
	
	video {
		position: absolute;
		top: 80%;
		left: 0;
		right: 0;
		z-index: -100;
		width: 100vw;
		height: auto;
		overflow-y: hidden;
		transform: translateX(0) translateY(-86%);
	}
	
	.video {
		background-color: transparent;
		text-align: left;
		min-height:70vh;
		position: relative;
		max-width: 100%;
		max-height: 100%;
		overflow-x: hidden;
	}
	
	.video-overlay {
		z-index: 99999;
		padding-top: 15%;
    	padding-bottom:9%;
	}
	
	.home-instant-quote {
		margin-top: -150px;
	}
	
	.logo {
		margin-left: 0;
		margin-top: 0;
	}
    
    .logo img {
        float: none;
        margin-top: 0px;
		width: 85%;
    }
    
    .home-services {
        padding-left: 0px;
        margin-top: 5%;
    }
	
	.home-header {
		padding-top: 20%;
	}
	
	.home-header h1 {
		font-size: 30px;
		line-height: 50px;
	}
	
	.home-about {
		padding-bottom: 0;
	}
	
	.digital-marketing h2 {
		font-size: 45px;
	}
    
    .serv-col {
        width: 23%;
    }
	
	.other-headers h1 {
		font-size: 45px;
		padding-top: 25%;
	}
    
    .digital-marketing .col-md-offset-4 {
        margin-left: 20%;
    }
    
    .mt-40 {
        margin-top: 55px;
    }
    
    .footer {
        padding-bottom: 20px;
    }
}

@media (min-width: 1400px) and (max-width: 1600px) {
    .logo img {
        float: none;
        margin-top: 5px;
        width: 70%;
    }
    
    .navbar-nav>li>a:focus, .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        padding-top: 35px;
        padding-bottom: 35px;
    }
    
    .owl-carousel.portfolio .owl-prev {
        width: auto;
        padding: 10px 20px 10px 15px;
    }
    
    .owl-carousel.portfolio .owl-next {
        width: auto;
        padding: 10px 15px 10px 15px;
    }
}