* {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 html, body{
     width: 100%;
     height: 100%;
}
/* body structure and links */
 body {
     background-color:#ffffff;
     font: 100% Verdana, "Trebuchet MS", sans-serif;
     color: black;
     margin: 0 auto;
     font-size: 16px;
}
 h1, h2, h3, h4, h5, h6 {
     font-family: "Montserrat", sans-serif;
 
}
 h1.main {
     font-size: 2em;
     color: #ffffff;
     text-shadow: 2px 2px 2px #000000;
     opacity: 1;
}
 p {
     line-height:180%;
}
 p.intro {
     font-family: "Montserrat", sans-serif;
     padding-left: 8px;
}
 code {
     font: 110% Courier, serif 
}
 a {
     color: #304782;
}
 a img {
     text-decoration: none;
     border: 0 none;
}
 a:hover, a:focus {
     color: #708230;
}
 a.button:link, a.button:visited, a.button:active {
     color: white;
     text-decoration: none;
}
/* Header */
 header{
     width: 100%;
     height: 18%;
     background-color: #ffffff;
    /* border-bottom: 1px solid #eeeeee;
     */
}
 #banner {
     width: 100%;
     height: auto;
    /* background-color: #304782;
     */
     background-image: url("../img/ia-stripes-no-white-repeat.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     margin: 0 auto;
     padding: 1% 0;
     text-align: center;
    /* border-bottom: 1px solid #eeeeee;
     */
}
 #intro {
     background-color: #0A1E50;
     padding: 1%;
     margin: 0 auto;
     height: auto;
     width: 66%;
}
 #wrapper{
     position: relative;
     height: auto;
     width: 90%;
     max-width: 1240px;
     margin: 3em auto;
}
 img.logo {
     width: 20%;
     position: absolute;
     right: 5%;
     top: 0;
     z-index: 999;
}
 a.logo {
     padding: 0;
}
h2.latest-issue {
	margin: 2% 1%;
	font-size: 2em;
}
/* Flexbox content grid */
 #content-grid {
     margin-top: 5%;
}
 .column-group {
     margin: 0;
}
 .row {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     padding: 0 24px 0 0;
}
/* Create three equal columns that sits next to each other */
 .column {
     -webkit-box-flex: 33%;
     -ms-flex: 33%;
     flex: 33%;
     max-width: 33%;
     padding: 0 12px;
}
 .column img {
     margin-top: 24px;
     vertical-align: middle;
     -webkit-filter: brightness(40%);
     filter: brightness(40%);
}
 .column img:hover, .column img:focus  {
     -webkit-filter: brightness(20%);
     filter: brightness(20%);
     background-color: grey;
     -webkit-transition: 0.2s ease-in;
     -o-transition: 0.2s ease-in;
     transition: 0.2s ease-in;
}

 .image-tile {
     position: relative;
     overflow: hidden;/* Stops text overflowing from the tile */
}
 /* .image-tile:hover{
	 border: 5px solid #ffffff;
	 transition: 0.2s ease-in;
 }
 */
 /* h2.image-overlay:after {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background-image: -webkit-gradient( linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)) );
     background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
     background-image: linear-gradient( rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
}
*/
 .image-tile img {
     min-height: 200px;
     min-width: 100%;
     max-height: 100%;
     background-color: lightgrey;
}
 h3.image-overlay {
     position: absolute;
     margin: 1em;
     top: 0%;
    /* left: 50%;
     transform: translate(-50%, -50%);
     */
     z-index: 998;
     color: #ffffff;
     font-size: 1.5rem;
     pointer-events: none;
		 line-height: 1.2em;
		 padding: 1em 0;
		 padding: 1em 0;
}
/* Lazy loading images */
 img.lazy {
     background: #eeeeee;
     width: 100%;
     height: 100%;
     display: block;
     margin: auto;
     border: 0;
     opacity: 0.5;
     margin-top: 16px;
     vertical-align: middle;
}
 img {
     opacity: .8;
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
}

/* Navigation */
 .topnav {
     background-color: #FFFFFF;
     /*overflow: hidden;*/
    /*width: 100%;
    */
    /*shifted to media.css */
    /*position: fixed;
    */
     z-index: 999;
     top: 0;
     padding: 0 0 0 5%;
}
/* Style the links inside the navigation bar */
 .topnav a {
     float: left;
     display: block;
     color: #304782;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     border-radius: 30px;
}
/* Change the color of links on hover */
 .topnav a:hover, a:focus {
     background-color: #304782;
     color: #ffffff;
}
/* Add an active class to highlight the current page */
 .active {
     background-color: #4CAF50;
     color: white;
}
/* Hide the link that should open and close the topnav on small screens */
 .topnav .icon {
     display: none;
}
/* Search button */
 .search {
     float: left;
     display: block;
     color: #304782;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     border-radius: 30px;
     background-color: #ffffff;
     border: 1px solid #cccccc;
}
.search:hover, search:focus {
	box-shadow: 2px 2px 20px #aaaaaa;
}
.search:focus, .accordion:focus {
     /* outline: none; Removes blue focus outline from Chrome when clicked */
}
.search-active {
	display: none;
}
/* Custom search */
 .custom-search {
     width: 50%;
     height: 5em;
     position: absolute;
     z-index: 999;
     left: 5%;
     top: 6%;
     display: none;
    /* Hides the search element until the search icon is clicked */
     background-color: #ffffff;
     padding: 1% 1% 4% 1%;
     -webkit-box-shadow: 2px 2px 5px #2e2e2e;
     box-shadow: 2px 2px 5px #2e2e2e;
}
/* Accordion menu */
 .accordion {
     background-color: #304782;
    /* Blue */
     border: none;
     color: white;
     padding: 1% 2%;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 1em;
     margin: 2% 1%;
     border-radius: 20px;
     cursor: pointer;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .active, .accordion:hover {
     background-color: #0A1E50;
    /* Darker blue */
}
/* Style the accordion panel. Note: hidden by default */
 .panel {
     padding: 0;
     background-color: white;
     display: none;
     overflow: hidden;
     -webkit-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;
}
/* FB/Twitter timelines */
 .social-widgets {
     margin: 16px 0 0 0;
     padding: 1%;
     border: 1px solid #eeeeee;
     height: auto;
}
/* Footer section */
 #footer {
     width: 100%;
     height: auto;
     margin: 5% 0 0 0;
     padding: 5% 10%;
     background-color: #1c1c1c;
     text-align: center;
}
 #footer p {
     color: #ffffff;
}
 #footer a {
     color: #9eaed5;
}
.footer-logo {
	 padding: 2% 0;
}
 .terms {
     padding: 0 0 10% 0;
}
 .action-buttons {
     text-align: center;
     padding: 0;
}
/* Buttons */
 .button {
     background-color: #304782;
    /* Blue */
     border: none;
     color: white;
     padding: 1% 2%;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 1em;
     margin: 4px 2px;
     border-radius: 20px;
     cursor: pointer;
     font-family: "Montserrat", sans-serif;
     font-weight: 400;
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
     outline:none;
}
 .button:hover, .button:focus {
     background-color: #0A1E50;
    /* Darker blue */
}
.banner-social-media-icons i{
	   color: #304782;
     margin: 2% 1%;
     font-size: 3vh;
}
.banner-social-media-icons i:hover, .banner-social-media-icons i:focus {
	background-color: #ffffff;
}
 .social-media-icons i{
     color: #ffffff;
     margin: 2% 1%;
     font-size: 5vh;
}