/*  MOBILE  */
@media screen and (max-width: 970px) {
	body {
		background-size: contain;
		width: 100%;
	}
	
	img {
		/* max-width: 50%;
		max-height: 100%; */
		height: auto;
	}
	
	.site_main {
		background-size: contain;
		width: 100%;
	}
	
	.site_main #header {
		background-size: contain;
		width: 100%;
		height: 0;
		padding-top: 11.3%;
	}
	
	.site_main #nav {
		background-size: 100% 44px;
	}
	
/* site_content */	
	
	.site_content {
		background-size: contain;
	}
	
	.site_content h2 {
		overflow: hidden;
	}
	
	.site_content h2>img {
		height: 38px;
		width: 900px;
		max-width: none;
	}
	
	.site_content table {
		display: block;
	}
	
	.site_content td {
		display: inline-block;
		padding: 15px;
	}
	
	.site_content td>img {
		display: inline-block;
		padding: 15px;
		min-width: 50%;
		max-width: 100%;
		height: auto;
	}

	.site_content td>video {
		display: inline-block;
		min-width: 50%;
		max-width: 100%;
		height: auto;
	}

	video {
		max-width: 100%;
		height: auto !important;
		display: block;
	}

	.site_content #menu td {
		padding: 0;
	}

	.site_content #vid_channel img{
		width: 50px;
		height: 40px;
	}
	
/* page banner */

	.page_banner td {
		width: 46%;
		padding: 2%;
	}
	
	.page_banner img {
		max-width: 100%;
		width: 100%;
	}
	
	.page_banner td>img {
		padding: 0;
	}
	
/* page intro */
	
	.page_intro td {
		width: 100%;
		padding: 0;
	}
	
	.page_intro td>img {
		padding: 0;
	}
	
/* associations */

	.associations td {
		width: 45%;
		padding: 10px 0;
	}
	
	.associations img {
		margin: 0;
		min-height: 50px;
		max-height: 100px;
		max-width: 150px;
		width: auto;
	}
	
	.associations li {
		margin: 0;
	}
	
/* content */
	
	.content table, .content_half table {
		display: block;
	}
	
	.content td, .content_half td {
		display: inline-block;
		width: 100%;
		padding: 0;
		word-wrap: break-word;
	}
	
	.content td>img, .content_half td>img {
		margin: 10px 0;
		padding: 0;
	}
	
	.icons {
		width: 100%;
	}
	
	.icons img {
		width: inherit;
	}
	
	.content_half {
		width: 100%;
	}
	
/* headers */	
	
	.header, .header_lower {
		background-size: 100% 24px;
		height: auto;
	}
	
	.header_half {
		background-image: url(images/fun_header.jpg);
		background-size: 100% 24px;
		height: auto;
	}
	
	.header_sub, .header_half_sub {
		height: auto;
	}

/* index page */
	
	.site_content_idx {
		background-size: contain;
		padding-right: 22%;
	}
	
	.site_content_idx #container {
		background-size: 100% 62px;
		padding-bottom: 35px;
	}
	
	.site_content_idx #left {
		float: left; 
	}
	
	.site_content_idx #right {
		float: none;
		border-left: none;
	}

/* Footer */
	
	.site_footer {
		background-size: 100% 72px;
	}
}

@media screen and (max-width: 665px) {
	img {
		width: 100%;
		max-width: 100%;
	}
	
	.site_content_idx #container {
		padding-bottom: 0px;
	}
	
	.site_content_idx #left {
		float: left; 
		border-right: none;
	}

	.site_content_idx #left, .site_content_idx #middle, .site_content_idx #right {
		width: 100%;
		height: auto;
	}
	
	.idx_fltrt {
		margin: 0;
	}
}

@media screen and (max-width: 610px) {
	.site_main #nav {
		height: 84px;
		background-image: url(images/nav_bg.jpg);
		background-repeat: repeat-y;
	}
	
	.site_main #nav ul {
		padding-top: 0;
	}
	
	.site_main #nav a {
		display: inline-block;
		margin-bottom: 7px;
	}
}

@media screen and (max-width: 350px) {
	.site_main #nav {
		height: 129px;
		background-image: url(images/nav_bg.jpg);
		background-repeat: repeat-y;
	}
}

@media (max-width: 768px) {
    .icons-flex {
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .icons-flex > div {
        flex: 1 1 100%;
    }
    
    .thumbnail-caption {
        font-size: 13px;
    }
}

/* Mobile responsive for promos */
@media (max-width: 768px) {
    .promos-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    
    .promos-grid > div {
        padding: 3px;
    }
}

@media (max-width: 480px) {
    .promos-grid > div {
        flex: 1 1 100%;
    }
}
