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

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

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

	.primary-logo {
		width: 120px;
		height: auto;

	}

 }

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


	body {
		padding-top: 65px;
	}

	.primary-logo {
		width: 135px;
		height: auto;

	}


	.main-content::before, .main-content::after {
		display: block;
	}


	.navbar {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.primary-logo {
		width: 160px;
		height: auto;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
	
	.resize-logo {
	transform: scale(.8);
	}
	

	.title-container {
	  padding: 210px 0px 0px;

	}

	.title-primary {
		font-size: 52px;
	}

	.bg-overlay::before {
	  position: absolute;
	  top: 0;
	  right: 40%;
	  bottom: 0;
	  left: 0;
	  background: -webkit-gradient(linear,left top,right top,color-stop(50%,#fff),to(hsla(0,0%,100%,0)));
	  background: linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0));
	  display: block;
	  content: "";
	  z-index: 1;
	}

	.modal-lg {
	    max-width: 900px;
	}


}

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

	.display-4 {
	  font-size: 3.5rem;
	}

	.info-container h2 {
	  font-size: 2.4rem;
	}
	
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.header-logo {
		margin-left: -120px;
	}
}