/* ==========================================================================
CUSTOM RESPONSIVE CSS
========================================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */


@media (min-width: 360px) { 
	
	.main-logo {

		max-width: 40%;
	}


	header h1 {
	    font-size: 2.9rem;
	    line-height: 3rem;
	    font-weight: 900;
	}


	.small-header h1 {
	    font-size: 2.4rem;
	    line-height: 2.5rem;
	    font-weight: 900;
	}

	#feature-block img {
		margin-top: -500px;
	}


	.section-header {
	    font-size: 2.6rem;
	    font-weight: 700;

	}

}

@media (min-width: 430px) { 

	#feature-block img {
		margin-top: -400px;
	}


	.slide-image {
		min-height: 460px;
	}

	.btn-large {
		min-width: 300px;
	}

}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	
	.blueimp-gallery > .slides > .slide > .slide-content {

    	max-height: 80% !important;

    }

    .col-full {
	   padding: 80px 1rem;
	}

	header h1, .small-header h1 {
	    font-size: 3.2rem;
	    line-height: 3.3rem;
	    font-weight: 900;
	}

	.owl-item-inner {
		padding: 3rem;
	}


 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 


	.logo-container {
	    text-align: left;
	}

	.main-logo {

	    max-width: 100%;
	}

	.blueimp-gallery > .slides > .slide > .slide-content {

    	max-width: 700px !important;

	}  


	.feature-inner {
		padding: 3rem;
		margin-top: 3rem;
	}


	.title-container {
	    max-width: 500px;
	}

	.section-header {
	    font-size: 3rem;

	}



	.small-header .title-container {
		padding: 2rem;
		margin: 120px 0rem 0 0rem;
		max-width: 100%;
		border-radius: 10px 10px 0 0;
	}
	

	.project-title {
		bottom: -2rem;
	}


	.project-brief {
	    padding-top: 0rem;
	}

	.card {
		min-width: 325px;
		max-width: 325px;
		margin-left: 15px !important;
    margin-right: 15px !important;
		
	}

	#feature-block img {
		margin-top: -420px;
	}

        
    .owl-carousel button.owl-dot {
        margin: 1.4rem .5rem;
    }

    .carousel-indicators li {
        margin: 0.7rem 0.5rem;
    }
    

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 798px) {

	header {
		background: none;
	}


	.small-header-container {
		max-width: 720px;

	}
	
	 .card {
		min-width: 330px;
		max-width: 330px;
		margin-bottom: 50px !important;
		
	}

	.slide-caption {
		padding-right: 0;
	}

	.small-header .title-container {
	    margin: 180px 1rem 0 1rem;
		background: #f8f8f8;
	}

	.foot-icons {
		text-align: right;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

	
.slider{
	-webkit-animation-name: slideFromLeft;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 1s;
	animation-name: slideFromLeft;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-delay: 1s;
	margin-left:-100px;
	opacity:0;
	
	}
	
	@keyframes slideFromLeft {
	  from {opacity: 0; margin-left:-100px;}
	  to {opacity: 1; margin-left:0px;}
	}
	
	@-webkit-keyframes slideFromLeft {
	  from {opacity: 0; margin-left:-100px;}
	  to {opacity: 1; margin-left:0px;}
	}
	
	.fade-from-bottom{
	margin-top:100px;
	opacity: 0;
	-webkit-animation-name: fadeFromBottom;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 2.4s;
	animation-name: fadeFromBottom;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-delay: 2.4s;
	
	}
	
	@keyframes fadeFromBottom {
	  from {opacity: 0; margin-top:100px;}
	  to {opacity: 1; margin-top:0px;}
	}
	
	@-webkit-keyframes fadeFromBottom {
	  from {opacity: 0; margin-top:100px;}
	  to {opacity: 1; margin-top:0px;}
	}
	
	
	.slow-fade{
	-webkit-animation-name: slowFade;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 2s;
	animation-name: slowFade;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-delay: 2s;
	opacity:0;
	
	}
	
	@keyframes slowFade {
	  from {opacity: 0;}
	  to {opacity: 1;}
	}
	
	@-webkit-keyframes slowFade {
	  from {opacity: 0;}
	  to {opacity: 1;}
	}

	.mob-hide {
		display: inline-block;
	}

	body {
		padding-top: 0px;
	}

	.to-top {
		bottom: 1rem;
	}

	.body-overlay {
		display: none;
	}



	.navbar {
		background: none;
	}


	.fixed-top { 
		margin-right: 0;
		height: auto;
		width:100%;
		-webkit-transition: all .2s ease;
    	transition: all .2s ease;

	}


	.fix-scrolled {
	    background: #f8f8f8;
	}

	.navbar>.container, .navbar>.container-fluid {
		display: -ms-flexbox;
		display: flex;
	}
	

	#website-navbar {
	  margin: 0;
	  padding: 0;
	  margin-right: auto;
	}


	.bg-light.fixed-top {
		background: transparent;
	}

	.navbar-nav {

		display: -ms-flexbox;
		display: flex;
		padding-top: 0px;
  		padding-bottom: 0px;
  		text-align: center;
	}

	.nav-item {
		border-bottom: 0px;
	}

	.navbar-light .navbar-nav .nav-link {
		padding: 0 .8rem;
		color: #fff;
		font-size: 1rem;
	}

	.navbar-light .navbar-nav .nav-link.active {

	  	color: #fff;
	}

	.navbar-light.fix-scrolled .navbar-nav .nav-link {
		color: #08152e
	}


	.navbar-light.fix-scrolled .navbar-nav .nav-link.active {
	  	color: #08152e;
	}

	.navbar-light.fix-scrolled .navbar-nav .nav-link:hover {

	  color: #1cd9b3;
	}


	.body-overlay, .mobile-nav-bar, .menu-icon-container {
		display: none !important;
	}

	.navbar {
		padding: 0rem 1rem;
		background-image: none;
		
	}

	.fade-container {
		opacity: 1;
		margin-top: 0;
	}

	header {
		height: 100vh;
		min-height: 600px;
	}

	.small-header {
		min-height:300px;
	}

	header.small-header {
	    height: auto;
	    min-height: initial;
	}

	#head-img-panel{
	display:block;
	-webkit-animation: zoomBg 20s infinite alternate;;
	animation: zoomBg 20s infinite alternate;;

	}

	@keyframes zoomBg {
	  0% {background-size: 140%;}
	  5% {background-size: 140%;}
	  97% {background-size: 100%;}
	  100% {background-size: 100%;}
	}

	@-webkit-keyframes zoomBg {
	 0% {background-size: 140%;}
	 10% {background-size: 140%;}
	  95% {background-size: 100%;}
	  100% {background-size: 100%;}
	}


	#feature-panel {
	    height: 100vh;
	    background: #f8f8f8;
	}


	.small-header .title-container {
	    margin: 280px 0 0 0;
	    
	}


	.service-col {
		padding-right: 80px;
	}

	.desktop-social {
		display: block;
		margin-left: auto;
    	font-size: 1.2em;
    	text-align:left;
    	width: 100px;

	}

	.desktop-social a {
		color: #08152e;
		margin: 0 .3rem;
	}

	.desktop-social a img {
		width: 25px;
		height: 25px;
	}


	.mobile-social {
		display: none;
	}

	section {
	    padding-top: 120px;
	    padding-bottom: 120px;
	}


		header h1, .small-header h1 {
	    font-size: 3.8rem;
	    line-height: 4.0rem;
	    font-weight: 800;
		}

		.section-header {
		    font-size: 3.8rem;

		}


		#head-para {
			font-size: 1.1rem;
			font-weight: 300;
		}

	.col-full {
	   padding: 120px 1rem;
	}

	.values-card {
		padding: 0rem 1rem;
	}

	.project-title {
		font-size: 1.75rem;
	    width: 70%;
	    bottom: .2rem;
	    left: -.5rem;
	}

	.project-sub-info {
	    color: #d3dee6;
	    font-size: 1.2rem;
	}


	.title-container {
	    max-width: 600px;
	}

	.card {
		min-width: 0;
		max-width: none;
		margin-bottom: 0px !important;
	}


	.slide-image {
		min-height: 420px;

	}


	.background-section {
	    height: 320px; 
	}

	.form-col {
		padding-top: 80px !important;
		padding: 1.6rem;

	}

	#feature-block img {
	    width:600px;
	    margin-top:-600px;
	}


}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	.container {
	    max-width: 1240px;
	}

	.title-container {
	    max-width: 700px;
	}

	.header-angle {
		width: 115%;

	}


		header h1, .small-header h1 {
	    font-size: 4.2rem;
	    line-height: 4.4rem;
	    font-weight: 900;
	}

		.section-header {
		    font-size: 4rem;

		}


		#head-para {
			font-size: 1.2rem;
		}



		.sticky-side-bar {
			top:0;
			position: -webkit-sticky;
			position: sticky;
			padding: 120px 0;
		}

		.col-full {
		   padding: 120px 4rem;
		}

		.blueimp-gallery-display>.close {
			width: 30px;
   			height: 30px;
		}

 }




@media (min-width: 1600px) { 

	.slide-image {
		min-height: 500px;

	}




	header h1, .small-header h1 {
    	font-size: 5rem;
	    line-height: 5rem;
	    font-weight: 900;
	}

	

}


@media (min-width: 2000px) { 



	.title-container {
    	max-width: 740px;
    }

    .slide-caption {
		left: 25%;
	}


}


@media (min-width: 2400px) { 


	header h1, .small-header h1 {
    	font-size: 6rem;
	    line-height: 6rem;
	    font-weight: 900;
	}

	.title-container {
    	max-width: 900px;
    }

    #head-para {
		font-size: 1.6rem;
	}


	.feature-inner {
		padding: 6rem;
		margin-top: 3rem;
	}

}


@media (min-width: 2800px) { 

    #feature-panel h1 {
        max-width: 780px;
    }

	header .lead, header .btn {
		font-size: 1.6rem;
	}


}