/******************************************
    Version: 1.0
/****************************************** */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.navbar-dark .navbar-nav .nav-link{
		font-size: 13px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#mainNav {
		background-color: #ffffff;
	}
	.navbar-dark .navbar-brand{
		width: 55%;
	}
	.navbar-dark .navbar-nav .nav-link::after{
		display: none;
	}
	.navbar-dark .navbar-toggler{
		color: rgba(41,41,41);
		border-color: rgba(41,41,41);
		border-radius: 0;
		font-weight: 200;
	}
	.heading h1{
		font-size: 28px;
	}
	.heading p{
		font-size: 14px;
	}
	.cd-headline.clip span{
		font-size: 20px;
	}
	.section-title h3{
		font-size: 28px;
	}
	.section-title p{
		font-size: 14px;
	}
	#clouds{
		margin-top: -35%;
	}
	.message-box{
		margin-bottom: 30px;
	}
	.filter-button-group button{
		padding: 12px 27px;
	}
	.filter-button-group{
		text-align: center !important;
	}
	.post-box{
		margin-bottom: 30px;
	}
	.footer-distributed .footer-left{
		text-align: center;
	}
	.message-box h2{
		font-size: 28px;
	}
	.message-box ul li b{
		font-size: 16px;
	}
	.message-box ul li a{
		font-size: 16px;
		width: 35px;
	}
	.ser-icon{
		width: 80px;
		height: 80px;
		line-height: 80px;
	}
	.ser-icon i{
		font-size: 38px;
	}
}
@media (max-width: 767px) {
	#mainNav {
		background-color: #ffffff;
	}
	.navbar-dark .navbar-brand{
		width: 55%;
	}
	.navbar-dark .navbar-nav .nav-link::after{
		display: none;
	}
	.navbar-dark .navbar-toggler{
		color: rgba(41,41,41);
		border-color: rgba(41,41,41);
		border-radius: 0;
		font-weight: 200;
	}
	.heading h1{
		font-size: 28px;
	}
	.heading p{
		font-size: 14px;
	}
	.cd-headline.clip span{
		font-size: 20px;
	}
	.section-title h3{
		font-size: 28px;
	}
	.section-title p{
		font-size: 14px;
	}
	#clouds{
		margin-top: -35%;
	}
	.message-box{
		margin-bottom: 30px;
	}
	.filter-button-group button{
		padding: 12px 27px;
	}
	.filter-button-group{
		text-align: center !important;
	}
	.post-box{
		margin-bottom: 30px;
	}
	.footer-distributed .footer-left{
		text-align: center;
	}
	.ct-header h1.big{
		font-size: 28px;
	}
	.ct-header p{
		font-size: 16px;
	}
	.snip1401 h3{
		font-size: 18px;
	}
	.snip1401 p{
		font-size: 15px;
	}
	.snip1401 figcaption{
		padding: 22px 18px;
	}

	/* Hero video: on tall narrow (portrait) screens, 100vh + object-fit:cover
	   crops a landscape video too aggressively. Cap the height so it behaves
	   like a standard responsive hero instead. */
	#home.ct-header.ct-header--slider {
		height: 78vh;
		min-height: 480px;
	}

	/* Slider prev/next arrows sit at a fixed left/right offset regardless of
	   text width; on narrow screens they land on top of the paragraph text.
	   Standard mobile pattern: hide them and rely on swipe (Slick already
	   supports touch swipe natively). */
	.slick-prev,
	.slick-next {
		display: none !important;
	}
}

@media (max-width: 767px) and (orientation: landscape) {
	/* Landscape phones are already wide/short, so the taller vh cap isn't needed. */
	#home.ct-header.ct-header--slider {
		height: 100vh;
		min-height: 320px;
	}
}

/* Gallery thumbnails: the base 30px/15px margin stacks with Bootstrap's
   column gutter and leaves very little width for each image in the
   2-per-row mobile grid. Shrink it on mobile only — same crop/size logic,
   just less margin eaten up. */
@media (max-width: 767px) {
	.gallery-single {
		margin: 12px 6px;
	}
}

/* Safety net: prevent any stray wide element from forcing horizontal
   scroll / forced zoom-out on phones. No layout redesign, just a guard. */
@media (max-width: 767px) {
	html, body {
		overflow-x: hidden;
		max-width: 100%;
	}
	img, video:not(.ct-video-bg) {
		max-width: 100%;
		height: auto;
	}
}
@media only screen and (min-width: 280px) and (max-width: 599px) {
	#mainNav {
		background-color: #ffffff;
	}
	.navbar-dark .navbar-brand{
		width: 55%;
	}
	.navbar-dark .navbar-nav .nav-link::after{
		display: none;
	}
	.navbar-dark .navbar-toggler{
		color: rgba(41,41,41);
		border-color: rgba(41,41,41);
		border-radius: 0;
		font-weight: 200;
	}
	.heading h1{
		font-size: 28px;
	}
	.heading p{
		font-size: 14px;
	}
	.cd-headline.clip span{
		font-size: 20px;
	}
	.section-title h3{
		font-size: 28px;
	}
	.section-title p{
		font-size: 14px;
	}
	#clouds{
		margin-top: -35%;
	}
	.message-box{
		margin-bottom: 30px;
	}
	.filter-button-group button{
		padding: 12px 27px;
	}
	.filter-button-group{
		text-align: center !important;
	}
	.post-box{
		margin-bottom: 30px;
	}
	.footer-distributed .footer-left{
		text-align: center;
	}
	.ct-header h1.big{
		font-size: 28px;
	}
	.ct-header p{
		font-size: 16px;
	}
	.snip1401 h3{
		font-size: 18px;
	}
	.snip1401 figcaption{
		padding: 22px 18px;
	}
}