/* Extra small devices - xs (portrait phones, less than 576px) */
@media (max-width: 575px) {

/* Navigation Styles Starts */

	#nav .navbar-toggler {
		margin-top: 20px;
	}
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		color: #b70004;
	}
	#nav .navbar-toggler,
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		outline: none;
	}
	#nav .navbar-collapse {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #ccc;
	}
	#nav .nav-item {
		margin: 0 0 10px;
	}
	#nav .nav-link {
		padding: 5px 0;
	}
	#nav .nav-item::after {
		display: none;
	}

/* Page Banner Styles Starts */

	.page-banner {
		height: 200px;
	}
	.page-banner.home {
		height: 150px;
	}
		.page-banner-title {
			font-size: 28px;
		}
			.page-banner-title span {
				padding: 5px 10px;
			}

/* Generic Styles Starts */

	.d-xs-block {
		display: block !important;
	}
	.d-xs-none {
		display: none;
	}
	.img-center-xs {
		margin-left: auto;
		margin-right: auto;
	}

	.text-xs-left   { text-align: left;   }
	.text-xs-center { text-align: center; }
	.text-xs-right  { text-align: right;  }

}

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

/* Navigation Styles Starts */

	#nav .navbar-toggler {
		margin-top: 20px;
	}
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		color: #b70004;
	}
	#nav .navbar-toggler,
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		outline: none;
	}
	#nav .navbar-collapse {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #ccc;
	}
	#nav .nav-item {
		margin: 0 0 10px;
	}
	#nav .nav-link {
		padding: 5px 0;
	}
	#nav .nav-item::after {
		display: none;
	}

/* Main Slider Styles Starts */

	.page-banner {
		height: 200px;
	}
	.page-banner.home {
		height: 150px;
	}
		.main-slider .carousel-caption {
			padding: 20px 30px;
			width: 60%;
			bottom: 30px;
		}
			.main-slider .carousel-caption h1 {
				font-size: 26px;
			}
			.main-slider .carousel-caption .btn {
				padding: 5px 10px;
			}

/* Page Banner Styles Starts */

	.page-banner-title {
		font-size: 36px;
	}
		.page-banner-title span {
			padding: 10px 20px;
		}

/* Generic Styles Starts */

	.img-center-sm {
		margin-left: auto;
		margin-right: auto;
	}

}

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

/* Navigation Styles Starts */

	#nav .navbar-toggler {
		margin-top: 20px;
	}
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		color: #b70004;
	}
	#nav .navbar-toggler,
	#nav .navbar-toggler:hover,
	#nav .navbar-toggler:focus {
		outline: none;
	}
	#nav .navbar-collapse {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #ccc;
	}
	#nav .nav-item {
		margin: 0 0 10px;
	}
	#nav .nav-link {
		padding: 5px 0;
	}
	#nav .nav-item::after {
		display: none;
	}

/* Main Slider Styles Starts */

	.main-slider .carousel-caption {
		padding: 20px 30px;
		width: 60%;
		bottom: 30px;
	}
		.main-slider .carousel-caption h1 {
			font-size: 36px;
		}

/* Page Banner Styles Starts */

	.page-banner-title {
		font-size: 42px;
	}

/* Generic Styles Starts */

	.img-center-md {
		margin-left: auto;
		margin-right: auto;
	}

}

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

/* Navigation Styles Starts */

	#nav .nav-item {
		margin-top: 10px;
		margin-right: 10px;
		margin-left: 10px;
	}
		#nav .nav-item.dropdown .dropdown-menu {
			max-height: 0;
			display: block;
			overflow: hidden;
			opacity: 0;
		}
		#nav .nav-item.dropdown:hover > .dropdown-menu {
			max-height: 300px;
			opacity: 1;
			margin-top: 10px;
		}
		#nav .nav-sm-links {
			margin-left: 20px;
		}

/* Main Slider Styles Starts */

	.main-slider .carousel-caption {
		width: 60%;
	}
		.main-slider .carousel-caption h1 {
			font-size: 42px;
		}

/* Generic Styles Starts */

	.img-center-lg {
		margin-left: auto;
		margin-right: auto;
	}

}

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

/* Navigation Styles Starts */

	#nav .nav-item.dropdown .dropdown-menu {
		max-height: 0;
		display: block;
		overflow: hidden;
		opacity: 0;
	}
	#nav .nav-item.dropdown:hover > .dropdown-menu {
		max-height: 300px;
		opacity: 1;
		margin-top: 10px;
	}

}