/*core Forge (in responsive.css) already has this but for max-width:1920px (ie. 1080p full HD)*/
/*adding this centres the normally (ie. below) configured "desktop" banner [as a quick fix to make the 1920px desktop banner not look dreadful on 4k screens])*/
/*actually, this is needed anyway to centre the 4k banner when the screen width is smaller than 4k (but bigger than 1920px)*/
@media screen and (max-width:3840px){

  div#banner img#banner_image,
  div#banner picture#banner_image,
  div#banner picture#banner_image img{
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
      position: relative;
  }

  div#banner img#banner_image,
  div#banner picture#banner_image{
    left: 50%;
  }

}

/* 4k desktop */
/*this is how to add a 4th banner for 4k screens.  But note you will need to add "and (max-width:1920px)" to the "desktop" clause
(as from responsive-banner-template.css)*/
@media screen and (min-width:1921px){

  picture#banner_image.home {

    /*
    width:3840px; /* this (and followings) might need tinkering with */
    height:1294px;  /* this (and followings) might need tinkering with */
    background: transparent url(/inspire_flights/sites/nru/images/banners/home_4k.jpg) center top no-repeat;
    */

    width:100%;
    height:33.6979vw;
    background-size: contain !important;
    background: transparent url(/inspire_flights/sites/ken/images/banners/home_4k.jpg) center center no-repeat;

  }

  picture#banner_image.other {

    /*
    width:3840px;
    height:871px;
    background: transparent url(/inspire_flights/sites/ken/images/banners/other_4k.jpg) center top no-repeat;
    */

    width:100%;
    height:22.6822vw;
    background-size: contain !important;
    background: transparent url(/inspire_flights/sites/ken/images/banners/other_4k.jpg) center center no-repeat;

  }
}

/* desktop */
@media screen and (min-width:961px) and (max-width:1920px){		

	picture#banner_image.home {
	
		/*
		width:1920px;
		height:637px;
		background: transparent url(/inspire_flights/sites/ken/images/banners/home_desktop.jpg) center top no-repeat;
		*/

		width:100%;
        	height:33.6979vw;    /*test in lots of browsers! Also, need min and/or max height?*/
		background-size: contain !important;
		background: transparent url(/inspire_flights/sites/ken/images/banners/home_desktop.jpg) center center no-repeat;  /*we prob don't *really* need 'center center' when using 'contain' as a size...*/
	}

	picture#banner_image.other {
	
		/*
		width:1920px;
		height:437px;
		background: transparent url(/inspire_flights/sites/ken/images/banners/other_desktop.jpg) center top no-repeat; 
		*/

		width:100%;
        	height:22.760vw;
		background-size: contain !important;
		background: transparent url(/inspire_flights/sites/ken/images/banners/other_desktop.jpg) center center no-repeat;
	}

		
}

/* tablet */
@media screen and (max-width:960px){

	picture#banner_image.home  {
		width:100%;
		background-size: cover!important;	/* might not need */
		padding-bottom: 62%;	/* might not need (was 52%) */

		background: transparent url(/inspire_flights/sites/ken/images/banners/home_tablet.jpg) center top no-repeat; 
	}

	picture#banner_image.other  {
		width:100%;
		background-size: cover!important;	/* might not need */
		padding-bottom: 52%;	/* might not need */

		background: transparent url(/inspire_flights/sites/ken/images/banners/other_tablet.jpg) center top no-repeat; 
	}

	
}

/* mobile */
@media screen and (max-width:480px){
	
	picture#banner_image.home{
		background-size: cover!important;	/* might not need */
		width:100%;
		padding-bottom: 90%;	/* might not need (was 76%) */

		background: transparent url(/inspire_flights/sites/ken/images/banners/home_mobile.jpg) center top no-repeat; 
	}

	picture#banner_image.other{
		background-size: cover!important;	/* might not need */
		width:100%;
		padding-bottom: 76%;	/* might not need */

		background: transparent url(/inspire_flights/sites/ken/images/banners/other_mobile.jpg) center top no-repeat; 
	}
	
}

/ * pretty flight matrix stuff from here */ 
div.response_terms table{
	border-spacing: 0px;
}

div.response_terms table th{
	color:#002e67;
	font-size: 17px;
	padding: 10px 5px;
	margin-bottom: 10px;
	border-bottom:#002e67 1px solid;

}

div.response_terms table td{
	padding: 10px 5px;
	border-right: #333 1px solid;
}

div.response_terms table th{
	border-right: #002e67 1px solid;
}

div.response_terms table th:last-child, 
div.response_terms table td:last-child{
	border-right:none;
}

div.response_terms table tr:nth-child(even){
	background-color: #eee;
}