@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,900|Oswald:500');


/* general rules*/ 

body {
  margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

* {
	box-sizing: border-box;
}


p {
  font-family: 'Roboto', sans-serif;
  color:#707070;
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 1.4em;
}

td {
  font-family: 'Roboto', sans-serif;
  color:#707070;
  vertical-align: top;
  padding: 2px;
}

h1, h2, h3, h4 ,h5 {
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   color:#39545F;
}

ul, ul a {
  margin:0;
  padding:0;
  list-style: none;
  text-decoration: none;
}

img {
	display:block;
  max-width: 100%;
  height: auto;
  min-height: 0;
}

/* Image alignment */

img.align_right {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}

img.align_left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}


/* Containers */
.container-slider {
  padding-top: 41.2%;
  position: relative;
}
.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
  
  
.container-top {}

.container-about {
  background-color: #39545F;
}
.container-about h1 {
  color:#A9C3D1;
}
.container-about p {
  color: #DFE0E0;
}

.container-news a {
  color: #707070;
  text-decoration: none;
}
.container-news a:hover {
  color: #505050;
  text-decoration: none;
}


.container-photos,
.container-staff,
.container-blue {
  width: 100%;
  padding: 2.5vw 12.5vw 2.5vw 12.5vw;
  background-color: #39545F;
  min-height: 90vh;
}

.container-photos h1, 
.container-photos h2, 
.container-photos h3, 
.container-photos h4,
.container-staff h1,
.container-staff h2,
.container-staff h3,
.container-staff h4,
.container-blue h1,
.container-blue h2,
.container-blue h3,
.container-blue h4 {
  color:#A9C3D1;
}
.container-photos p,
.container-staff p,
.container-blue p,
.container-photos td,
.container-staff td,
.container-blue td {
  color: #DFE0E0;
}

.container-photos h4,
.container-staff h4 {
  margin-top: 0;
}
.container-photos h4 a,
.container-staff h4 a {
  color: black;
  text-decoration: none;
}

.container-blue a,
.container-blue a:visited {
  color: #C3D1A9;
  text-decoration: none;
  font-weight:bold;
}

.container-blue a:hover {
  color: #A9C3D1;
  text-decoration: none;
  font-weight:bold;
}


/* Gallery subpage layout grid */

.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  grid-auto-flow: dense;
}

.single-image {
  grid-row-end: span 2;
}

.tall-image {
  grid-row-end: span 4;
}

.wide-image {
  grid-row-end: span 1;
  grid-column-end: span 2;
}

.single-image img {
  object-fit: cover;
  width:100%;
  height:100%;
}

.single-image img.fixed-size  {
  object-fit: cover;
  height: 200px;
}

.single-image h4 {
    margin-top: 0.5em;
}
  
  
  
/* Staff profiles grid   */

h2.staff-section {
    margin-top: 3em;
    margin-bottom: 0;
}
  
.staff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px;
}

.staff-single {
}  

.staff-single img {
}  

.staff-single h3, 
.staff-single h4 {
  color: white;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
}

.staff-single h4 {
  font-style: italic;
}


  
  
.container-roll-title {
  background-color: #17367A;
  text-align: center;
  width:100%;
}
.container-roll-title h3 {
  color: #CCDBE2;
  font-weight: bold;
  text-align: center;
  margin: 0;
  padding: 2.5vw;

}
.container-roll-body {
  width: 100%;
  padding: 2.5vw 12.5vw 2.5vw 12.5vw;
}  


.half-left {
  width: 49vw;
  padding: 2.5vw 2.5vw 2.5vw 12.5vw;
}

.half-right {
  width: 49vw;
  padding: 2.5vw 12.5vw 2.5vw 2.5vw;
}

.half-bg-img {
  margin-left: 2.5vw;
  width: 47.6vw;
}

.half-bg-img img {
  object-fit: cover;
  height: 100%;
}

.thirds {
  column-count: 3;
}










/* Header */

.header-logo { grid-area: logo; }
.header-title { grid-area: title; }
.nav-container { grid-area: nav; }

.header-container {
  width: 100%;
  background-color: #06397A;
  padding:5px 0px 0px 8%;
  display:grid;
  grid-template-areas: 'logo title title title title title title title title title'
                       'logo nav nav nav nav nav nav nav nav nav';
}

.header-title h1 {
  color: white;
  font-family: Roboto, sans-serif;
  font-size: 1.3em;
  letter-spacing: 2.4px;
}
.header-logo {
  
}
.header-logo img {
  padding: 10px;
  max-width: 10vw;
  float: right;
}

/* nav */
#header-nav .has_children {
  position: relative;
}
  
#header-nav .has_children ul{
  display: none;
  position: absolute;
  z-index: 999;
  background: rgba(195,11,35,0.8);
  top: 4vw;
}
#header-nav .has_children ul li{
}
#header-nav .has_children ul li a{
  font-size: 15px;
}

#header-nav .has_children:hover ul {
  display: block;
}


.nav-container{
  padding:0 10%;
  
  background: -moz-linear-gradient(left, rgba(6,57,122,1) 0%, rgba(195,11,35,1) 15%, rgba(195,11,35,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(6,57,122,1) 0%,rgba(195,11,35,1) 15%,rgba(195,11,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(6,57,122,1) 0%,rgba(195,11,35,1) 15%,rgba(195,11,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c30b23', endColorstr='#c30b23',GradientType=1 ); /* IE6-9 */
}

.nav {
  display:-webkit-flex;
  display:flex;
  align-items: center;
  height: 100%;
}



.logo li { 
  margin-right: 5%;
}

#header-nav.nav li { 
  height:100%;
  flex: 1 1 auto;
}

.nav > li > a {
  padding: 0 10px;
  line-height:3.5em;
}

.nav a {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 400;
  display: block;
  width:100%;
  height:100%;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0.6em 10px;
  line-height: 1.5em;
}

.nav a:hover, .nav-link a:hover {
  color: #A9C3D1;
}


/* Defense banner */

.defence-banner {
  width: 100%;
  
  background-color: #fff;
  
  display: -webkit-flex;
  display:flex;
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -webkit-justify-content:center;
  justify-content: center;
}
.def-logo {
  display: block;
  margin: 10px 25px;
  height: 50px;
}

.big-words {
  margin: 10px 25px 25px 25px;
  font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #707070;
}

/* gallery */

/* Overlay is somwhat similar for Work and People */

.overlay a {
	display:flex;
  flex-direction: column;
  justify-content: flex-end;
  
	width: 100%;
	height: 100%;
  
	margin:0;
	padding:0.5em;
}

/* Show the overlay and titles when hovering */
.overlay:hover a {
	background-color: rgba(215, 95, 0, 0.7);
}
.overlay:hover span {
	display:block;
}

.overlay span {
	display:none;
  font-family: "Gotham SSm A", "Gotham SSm B", "Gotham", sans-serif;;
	color:white;
	text-align: center;
	text-transform: uppercase;
	margin-bottom:0;
  letter-spacing: 0.06em;
}

.overlay span.big {
	font-weight:bold;
	font-size: 1em;
}

.overlay span.little {
	font-weight:normal;
	font-size: 0.8em;
  color: #e8e8e8;
}

.overlay span:last-child {
	margin-top:0.4em;
	margin-bottom:1.5em;
}
/* last post */
.lastpost tr:nth-child(2n) {
  background-color: #0E3C79;
}
.lastpost thead tr th {
  vertical-align: top;
  text-align: left;
  font-weight: bold;
  color: #A9C3D1;
  border-bottom: 1px solid #A9C3D1;
  padding: 2px;
}

/*hamburger */
.hamburger_menu {
	display: none;
	position: fixed;
	cursor:pointer;
	top:0;
	left:0;
	padding:3vw;
	width: 12vw;
	height: 10vw;
	z-index: 999;
	text-align: left;
  
  background: -moz-linear-gradient(left, rgba(195,11,35,1) 45%, rgba(6,57,122,0) 100%, rgba(6,57,122,0) 10%); 
  background: -webkit-linear-gradient(left, rgba(195,11,35,1) 45%, rgba(6,57,122,0) 100%, rgba(6,57,122,0) 10%);   
  background: linear-gradient(to right, rgba(195,11,35,1) 45%, rgba(6,57,122,0) 100%, rgba(6,57,122,0) 10%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c30b23', endColorstr='#c30b23',GradientType=1 ); /* IE6-9 */  
  
}

.hamburger_menu img {
  height: 100%;
}

.close-button {
	display: none;
	position:absolute;
	right:0;
	top:0;
	padding: 6vw 10vw;
	height: 20vw;
	cursor: pointer;
  z-index: 250;
}

.close-button img {
    height: 100%;
}
#navmobile {
  display: none;
  position:fixed;
  z-index:200;
  width: 100%;
  left: 0;
  top: 0;
}
#mobile-nav {  
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column;
  flex-flow: column;
  background-color: #06397A;
  padding: 20vw 0vw;
  max-height: 100vh;
  max-width: 100%;
}

#mobile-nav > li { 
  font-family: 'Oswald', sans-serif;
  text-align:left; 
  -webkit-flex-grow: 1;
	flex-grow: 1;
	text-align: center;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 3px;
  width:100%;
  padding: 20px;
  

  background: -webkit-linear-gradient(left, rgba(6,57,122,1) 0%, rgba(195,11,35,1) 60%,rgba(195,11,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
  
}

#mobile-nav > li:nth-child(2n) { 
  background: -webkit-linear-gradient(right, rgba(6,57,122,1) 0%, rgba(195,11,35,1) 60%,rgba(195,11,35,1) 100%); /* Chrome10-25,Safari5.1-6 */
}

#mobile-nav li a { 
  font-size: 1.1em; 
  padding:10px 20px; 
  color:white; 
}
#mobile-nav li ul {
  margin-top: 5px;
  
}
#mobile-nav li ul li a {
  font-size: 14px;
}


/*contact */

.container-contact {
  background-image: url('images/malaya_contact_bg.jpg');
}

.container-contact-body {
}

.container-contact-body h3 {
  color: #CCDBE2;
  font-weight: bold;
  text-align: center;
  margin: 0;
}


.container-contact-form {
}


#wrap_Inputfield_scf-website {display:none;}

.container-contact {

  padding:20px;
  background-color: #17367A;
}    
.container-contact form {
  margin:0 auto;
}
.form__item--label {
    font-family: 'Roboto', Arial, "Helvetica Neue", Helvetica, sans-serif;
    color:white;
}
.form__item {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction: column;
  flex-direction: column; 
  margin-bottom: 20px;
}
.label:not(:last-child) {
  margin-bottom:5px;
}
.container-contact form .button {
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 10px 30px;
  height: auto;
  vertical-align: middle;
  flex-direction: row;
  transition: border 0.2s, background 0.2s;
  display: inline-block;
  background: transparent;
}
.container-contact form textarea,.container-contact form input {
  background: transparent;
  border-color: rgba(255,255,255,0.4);
  transition: background 0.2s;
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  background-color: #fff;
  border: 1px solid #d3d6db;
  border-radius: 3px;
  color: #222324;
  display: inline-flex;
  font-size: 14px;
  height: 32px;
  justify-content: flex-start;
  line-height: 24px;
  padding-left: 8px;
  padding-right: 8px;
  position: relative;
  vertical-align: top;
  box-shadow: inset 0 1px 2px rgba(17,17,17,0.1);
  max-width: 100%;
  width: 100%;
}
.container-contact form textarea {
  display: block;
  line-height: 1.2;
  max-height: 600px;
  max-width: 100%;
  min-height: 120px;
  min-width: 100%;
  padding: 10px;
  resize: vertical;
}
/* Mobile Styles at 1200px wide */
@media all and (max-width: 1200px) {
  .gallery-container {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
  }
  
  .staff-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
}

/* Mobile Styles at 900px wide */
@media all and (max-width: 900px) {

  .gallery-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }
  
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
  
}

/* Mobile Styles at 750px wide */
@media all and (max-width: 750px) {

  /* Mobile menu */
  .hamburger_menu {
  display: block;
  }
  .close-button {
    display: block;
  }
  
  .nav-container #header-nav {
    display:none;
  }

  #header-nav.nav li { 
    margin-right: 0.5em;
    flex: 1 1 auto;
  }
  .header-container {
    width: 100%;
    padding: 10px 0 0 0;
    display:grid;
    grid-template-areas: 'logo logo'
                         'title title';
  }
  .header-logo {
    float:none;
    margin: 0 auto;
  }
  .header-logo img {
      height: auto;
      max-width: 25vw;
      float:none;
  }
  .nav-container { padding:0; }
  .header-title h1 {
    text-align: center;
  }
  
  body .container-photos {
    background-image: none !important;
  }

  .thirds {
    column-count: 2;
  }
  
  .half-bg-img {
    margin-left: 0;
    width: 100vw;
  }
  
  .half-bg-img img {
    height: auto;
  }
  
  .half-left {
    width: 100vw;
    padding: 2.5vw 12.5vw 2.5vw 12.5vw;
  }

  .half-right {
    width: 100vw;
    padding: 2.5vw 12.5vw 2.5vw 12.5vw;
  }
  
  
}



/* Mobile Styles at 550px wide */
@media all and (max-width: 550px) {
  
  .thirds {
    column-count: 1;
  }
  
  .container {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }
  
  .gallery-container {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }
  
  .staff-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .event-single {
  width: 50%;  
  height: 47.5vw;	 /* 50% of 95vw for a square aspect ratio */
  }

  /* smaller titles in work/people overlay */
  .overlay a { padding:0.2em; }
  .overlay span.big { font-size: 0.8em; }
  .overlay span.little { font-size: 0.6em; }
  .overlay span:last-child {
    margin-top:0.3em;
    margin-bottom:0.5em;
  }
  
  
  /* Image alignment - stop floating left/right */
  img.align_right,
  img.align_left {
    float: none;
    display: block;
    margin: 10px auto;
  }


}




/* Footer */

.footer {
  background-color: #F2EFE0;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
}
.footer a  {
  text-decoration: none;
  
}
/* Slider */
.rotating-item {
  position: absolute;
  top:0;
}