/*
For historical and unknown reasons(**), the Free Flights responsive banners
will scale elastically for "mobile" and "tablet", but will cut off the left and right
sides when resizing the "desktop" size.

This CSS file is a fix for this situation and will make the "desktop" size banner scale as
well (this solves A LOT of headaches and complaints to the Project Managers)

(see also responsive-banner-template.css)

(**) Essentially how things have been set up in the very top level Forge CSS files
*/


/* Here we go: */

/*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; 
    height:1294px;  
    background: transparent url(/inspire_flights/sites/bme/images/banners/home_4k.jpg) center top no-repeat;
    */

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

  }

  picture#banner_image.other {

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

    width:100%;
    height:22.6822vw;
    background-size: contain !important;
    background: transparent url(/inspire_flights/sites/bme/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/bme/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/bme/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/bme/images/banners/other_desktop.jpg) center top no-repeat; 
		*/

		width:100%;
        	height:22.760vw;
		background-size: contain !important;
		background: transparent url(/inspire_flights/sites/bme/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/bme/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/bme/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/bme/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/bme/images/banners/other_mobile.jpg) center top no-repeat; 
	}
	
}

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

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;
	border-left: #333 1px solid;
}

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

div.response_terms table th:first-child, 
div.response_terms table td:first-child{
	border-left:none;
}

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

/* For Arabic mode (CSS "left" and "right" don't flip meanings even if doc is in dir="rtl" mode!) */
html[dir="rtl"] div.response_terms table th:first-child, 
html[dir="rtl"] div.response_terms table td:first-child{
	border-right:none;
}

/* For Arabic mode (CSS "left" and "right" don't flip meanings even if doc is in dir="rtl" mode!) */
html[dir="rtl"] div.response_terms table th:last-child, 
html[dir="rtl"] div.response_terms table td:last-child{
	border-left:none;
}

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

/* ---- smaller flight matrix font stuff from here ---- */

/* you'll no doubt have this rule already */
div.response_terms table th{
	color:#002e67;
	font-size: 17px;
	padding: 10px 5px;
	margin-bottom: 10px;
	border-bottom:#002e67 1px solid;
	font-size: smaller;	/* ADD THIS TO SHRINK THE FONT */

}

/* you'll no doubt have this rule already */
div.response_terms table td{
	padding: 10px 5px;
	/*border-right: #333 0 solid;*/
	font-size: smaller;	/* ADD THIS TO SHRINK THE FONT */
}


/* ---- "responsive" tables hack stuff from here ---- */

div.response_terms
{
	overflow-x: auto;	/*present scrollbar on container (if needed)*/
	/*text-align: center;*/
}

div.response_terms table
{
	width: 100% !important;
	table-layout: auto;
	
}

/* */

/* for "small" screens, make the review form text go UNDER its label */
/* (so it doesn't fly off the right hand side of the screen) */
@media screen and (max-width:542px)
{
	form.responsive p.review
	{
    		text-transform: uppercase;
    		margin-bottom: 10px;
    		display: inherit;
	}
}

/*promotion box css*/
div.promotion-box
{
	max-width: 1080px; 
	width:100%;
	display: flex; 
	flex-wrap: wrap;
	margin: 0px auto;
	
}
div.promotion-box .box{
	width: 23%;
	color: #000;
	margin: 10px;
	box-sizing: border-box;
}

.service-icon{
	margin-bottom: 15px;
}

/* CSS for styling the iframe with class emailmarketing */
iframe.emailmarketing {
	display: flex;
	align-items: center;
	justify-content: center;
  }
@media(max-width:1199px){
	div.promotion-box .box{
		width: 46%;
	}
}


@media(max-width:767px){
	div.promotion-box .box{
		width: 100%;
	}
	header {
		min-height: 81px !important;
	}
}