@media all and (max-width: 1550px) {

	.teal-leaf-gfx-bg{
		background-size:cover;
	}


}



@media all and (max-width: 1100px) {

	.teal-gfx-bg,
	.white-gfx-bg{
		background-size:contain;
	}
	
	#banner .strap-line h2 {
    font-size: 38px;
		padding: 15px 0;
	}	
	
	#footer .links ul li{
		width:50%;
	}


}

@media all and (max-width: 790px) {

	h1 {
		font-size: 42px;
	}

	h4 {
		font-size: 18px;
	}

	#banner .banner-text h1 {
		font-size: 48px;
	}

	

	#banner.fancy img{
		height:550px;
	}	

	#banner.image-only img{
		height:320px;
		width:100%;
		object-fit:cover;
		font-family: 'object-fit: cover; object-position: center;';		
		object-position: center;
	}	

	#banner.simple .banner-text p{
		font-size:22px;
	}	

	#banner .strap-line h2 {
		font-size:32px;
	}
	
	#banner .strap-line h2 {
		padding: 10px 0;
	}
	
	.panel#whoweare .grid.col-2 {
		grid-template-columns: repeat(1, 1fr);
	}	

	.panel,
	#stats.panel{
		padding: 20px 20px 40px 20px;
	}
	
	#news.panel{
		padding-top:20px;
	}

	#stats .grid.col-3 {
		display:block;
		width:100%;
	}

	#stats .grid.col-3 .col{
		display:block;
		width:100%;
		padding-bottom:30px;
		max-width:600px;
		margin:0 auto;
	}	
	
	
	.panel.panels	.grid.col-2 {
    grid-template-columns: 1fr; /* single column */
    grid-gap: 0;
  }

  .panel.panels{
  	padding: 0 20px 60px 20px!important;
  }
  
  .panel.panels	.col.image {
    order: -1 !important; /* force image on top */
    justify-content: center; /* center the hex */
    text-align: center;
    padding:0;
		width: 100%;
		height: 350px; 
		overflow: hidden;
		align-items: flex-end;
  }

  .panel.panels	.hex {
    max-width: 100%;
    width:100%;
    margin: 0 auto;
   transform: translateX(0) !important;
		-webkit-clip-path: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
		);
		clip-path: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
		);   
  }


	.social.news{
		display:none;
	}
		
	
	form.search-form {
		float: none;
		width: 100%;
		padding: 20px 0 20px 0;
	}	

	input.search-field {
		width: 100%;
	}	
	
	
	#news .news-row.default {
		max-width: 100%;
	}	
	
	#news .news-row.featured .image {
		width: 200px;
	}	
	
	#news .image {
		width: 160px;
	}	
	
	
	#news .news-row.featured h3 {
		font-size: 28px;
	}	
	
	#news .text h3 {
		font-size: 22px;
		padding-bottom:15px;
	}	
	
	.single .single-news {
		padding: 30px 0 50px 0;
	}

	.single-news-table.table,
	.single-news.table-cell{
		display:block;
		width:100%;
	}
	
	.single .post-content{
		padding-bottom:0;
	}
	
	.single .sidebar{
		padding:0 0 50px 0;
		width:100%;
	}	
	
	.single .sidebar .related-news .news-row .table-cell{
		display:table-cell;		
	}	
	
	.single .sidebar .related-news .news-row .image{
		width:250px;
		padding:25px 25px 30px 25px;
		padding-left:0;
	}

	.single .sidebar .related-news .news-row	svg {
		left: -10px;
		width:100%;
	}


	#footer{
		background-size:contain	
	}	
	
	#footer .logo{
		width:250px;
		position:relative;
		left:auto;
		top:auto;	
		margin-bottom:30px;
	}
	
	#footer .links{
		width:100%;
		float:none;	
		padding-left:65px;
	}
	
	#footer .links ul li{
		float:none;
		width:100%;		
	}	

	#footer .social{
		width:100%;
		float:none;	
		text-align:left;
		margin-top:30px;
		padding-left:65px;
	}
	
	
	#footer .social ul li{
		float:left;
		margin-right:10px;
		margin-left:0;
	}


}



@media all and (max-width: 580px) {

	#banner.fancy .banner-text h1{
    font-size: 38px;
		padding-bottom: 20px;    
	}
	
	#banner .banner-text h3 {
		font-size: 28px;
	}	

	#banner a.wp-video-popup {
		margin-top: 20px;
		height: 70px;
		width: 70px;
	}


	#banner a.wp-video-popup span {
		font-size: 13px;
	}

	#banner.image-only img{
		height:260px;
	}

	#header a.logo,
	#footer .logo{
		width:200px;
	}

	.table.profile{
		margin-bottom:30px;
	}


	#news .table.news-row,
	#news .table.news-row .table-cell,
	.single .sidebar .related-news .news-row,
	.single .sidebar .related-news .news-row .table-cell{
		display:block;
		width:100%;
		padding:0;
	}
	
	#news .news-row.featured{
		margin:0 0 50px 0;
	}
	
	#news .table.news-row.featured .text{
		padding:25px;
	}

	#news .table.news-row.featured .image{
		padding-top:25px;
	}
	
	#news .news-row.featured .image .hex,
	#news .news-row .image .hex {
			transform: translateX(0);
	}	
	


  .panel.panels	.col.image{
  	height:280px;
  }	

  .panel.panels	.col.image .hex{
		background-position: center 160px;
  }	


}


@media all and (max-width: 480px) {

	.panel.panels	.col.image {
			height: 220px;
	}

	#banner.fancy img {
		height: 450px;
	}

	#banner.fancy .banner-text h1{
    font-size: 32px;
		padding-bottom: 20px;    
	}
	
	#banner .banner-text h3 {
		font-size: 22px;
	}	

}