/* I am the CSS for ITB pages. */
/* ~~~~~~~~~~ ITB-PAGE-SPECIFIC HEADER STYLES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#itb-header-background-section{
	height: 225px;
	background: url(../img/itb/header_stars_long.jpg) repeat-x top left scroll /*222222*/;
	background-position: calc(100% - 10px) calc(100% - 10px);
}
#itb-header-background {
	height: 275px;
}
#itb-header-background .fill{
	height: 100%;
	width: 100%;
}
#headersection {
	height: auto;
	width: 100%;
}

/* -- Buildings -- */
#itb-header-buildings {
	height: 225px;
	background: url(../img/itb/header_buildings_1x.png);
}
#itb-header-buildings .fill{
	height: 100%;
	width: 100%;
	z-index: 999;
}


/* -- Header Mech -- */
.headermech {
	position: absolute;
	top: 55px;
	right: 0;
}
.headermech #mech {
	position: absolute;
	z-index: 10;
	right: 0;
    display: block;
    background-size: 100%;
    background-position: top left;
    background-repeat: no-repeat;
}
.headermech #mech .inner {
    display: block;
    height: 0;
}
/* default screen */
.headermech #mech {
	background-image: url(../img/itb/header_mech.png);
	width: 347px;
	height: 220px;
	position: absolute;
	z-index: 10;
}

/* Small screen */
@media only screen and (max-width: 991px) {
    .headermech #mech {
		display: none;
	}
}

/* -------- Header logo -------------*/
.headerlogo {
	position: absolute;
	top: 100px;
	left: 150px;
}

.headerlogo #logo {
	position: absolute;
	left: 0;
    display: block;
    background-size: 100%;
    background-position: top left;
    background-repeat: no-repeat;
}
.headerlogo #logo .inner {
    display: block;
    height: 0;
}

/*--Japanese only--*/
.headerlogo-jp {
	position: absolute;
	top: 100px;
	left: 150px;
}

.headerlogo-jp #logo {
	position: absolute;
	left: 0;
    display: block;
    background-size: 100%;
    background-position: top left;
    background-repeat: no-repeat;
}
.headerlogo-jp #logo .inner {
    display: block;
    height: 0;
}

/*--Responsive--*/
@media only screen and (min-width: 1131px) {
	.headerlogo {
		margin: 0 auto;
		width: 610px;
		height: 86px;
	}
    .headerlogo #logo {
		background-image: url(../img/itb_title_3.png);
		width: 610px;
		height: 86px;
	}
	.headerlogo-jp {
		margin: 0 auto;
		width: 610px;
		height: 95px;
	}
    .headerlogo-jp #logo {
		background-image: url(../img/itb_title_2_jp.png);
		width: 610px;
		height: 95px;
	}
}

/* Medium screen */
@media only screen and (min-width: 991px) and (max-width: 1330px) {
	.headerlogo {
		margin: 0 auto;
		width: 406px;
		height: 58px;
	}
    .headerlogo #logo {
		background-image: url(../img/itb_title_2.png);
		width: 406px;
		height: 58px;
	}

	.headerlogo-jp {
		margin: 0 auto;
		width: 406px;
		height: 95px;
	}
    .headerlogo-jp #logo {
		background-image: url(../img/itb_title_2_jp.png);
		width: 406px;
		height: 95px;
	}
}


/* Logo Alt-fire : For small screens */

.logo-altfire {
	height: 0;
	display: none;
}

.logo-altfire img {
	position: relative;
	top: 75px;
}

/* ---------- SMALL BAR AT SIZES BELOW 991 --------- */

@media screen and  (max-width: 990px) {
    .logo-altfire {
        display: block;
    }
	.logo-altfire img {
	position: relative;
	top: 30px;
	}
	#itb-header-background-section{
		height: 170px;
		background: url(../img/itb/header_stars_long.jpg) repeat-x top left scroll /*222222*/;
		background-position: calc(100% - 10px) calc(100% - 10px);
	}
	#itb-header-background {
		height: 170px;
	}
	#itb-header-background .fill{
		height: 100%;
		width: 100%;
	}
	#headersection {
		height: auto;
		width: 100%;
	}

	#itb-header-buildings {
	height: 170px;
	background: url(../img/itb/header_buildings_1x.png);
	background-position: calc(100% - 0px) calc(100% + 20px);
	}

	#header-after {
		height: 25px;
		background: url(../img/backgrounds/top_lowerbar.png) repeat-x top left scroll /*222222*/;
		background-size: 302px 25px;
	}
}

/* Awards bit */
.itb-awards-images img {
	width: 100%;
	height: auto;
	max-height: 100px;
	max-width: 150px;
}

/* --------------------------- ITB Page --------------- */
.itb-summary-container {
  margin: 20px auto 20px auto;
  color: #d8d8d8;
  text-align: center;
  height: auto;
  background-color: #000;
}
@media only screen and (max-width: 768px) {
	.itb-summary-container  {
	max-width: 600px;
	border: 0;
	}
	.itb-summary-container p {
	  font-size: 110%;
	}
	.itb-summary-container img {
		max-width: 100%;
		padding-bottom: 15px;
	}
}
@media only screen and (min-width: 767px) and (max-width: 980px) {
	.itb-summary-container {
	max-width: 600px;
	}
	.itb-summary-container p {
	  font-size: 110%;
  }
  .itb-summary-container img {
		max-width: 100%;
		padding-bottom: 15px;
	}
}
@media only screen and (min-width: 981px) {
  .itb-page-container  {
    max-width: 900px;
	padding: 0 25px 0 0;
  }
  .itb-page-container p {
	  font-size: 120%;
  }
  .itb-page-container img {
		padding-right: 5 !important;
		padding-left: 20px;
	}
}

.itb-topdescription {
	padding-right: 50px !important;
	padding-left: 50px !important;
}

.itb-info-buttons {
  margin: 5px auto 5px auto;
  background-color: Transparent;
}
.itb-info-buttons button {
  margin: 0 5px 5px 5px;
  text-align: center;
}

.itb-calltoaction {
	font-size: 150%;
	text-shadow: 2px 2px 15px black;
}
.itb-calltoaction a {
	color: #9acbf1;
}
.itb-calltoaction a:hover, a:focus, a:active {
	color: #fbeb91;
	text-decoration: none;
}