/***************************************************\
	GENERAL STYLES
\***************************************************/

body{
    width: 100%;
    overflow-x: hidden;
}

header{ 
	position:fixed;
	width:100%;
	padding:20px 0; 
	background:#000; 
	text-align:center; 
	z-index:100;
}

#logo{ display:inline-block; }

a, a:active{ outline:none !important; }
a img{ display:inline-block; }

h2{ margin:0 0 25px; }
h2 img{ display:inline-block; }

p{ 
	color:#231f20; 
	font-family:'Andada',serif;
	font-size:20px;
	line-height:28px;
	margin:0 0 36px;
}

a{
	color:#231f20; 
	text-decoration:none;
}
a:hover{ 
	color:#231f20; 
}

img{ max-width:100%; height:auto; }

.wrapper {
    margin: 0 auto;
    position: relative;
    width: 1125px;
}

.panel {
    background-repeat: no-repeat;
    background-size: cover;
	min-height:100vh;
	margin:0;
	box-shadow:none;
	padding:50px 0;
	width:100%;
}
.module.parallax {
    background-attachment: fixed;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.headline{
	max-height:90%;
	margin:100px auto 0;
	position:relative;
}

.columns{
	display:flex;
	align-items:top;
}

.border-box{
	border-top:15px solid;
}

.border-box p:last-child{ margin:0; }

.black-top{
	border-color:#000;
	background:rgba(10,216,175,.53);
	padding:25px 40px 45px 50px;
}

.teal-top{
	border-color:#53dab8;
	background:rgba(255,255,255,.9);
	padding:58px 35px;
	min-height:337px;
}

.intro{ padding:35px; }
.intro p{ 
	font-size:23px; 
	line-height:36px;
	margin:0;
}

.border-box.green h2{ margin:0; }

.large p{ font-size:24px; margin:0; }

.green{
	background:rgba(86,191,88,.86);
	margin-bottom:26px;
}

.banner{ padding:16px 34px; margin:0 0 15px; }
.banner .image-wrapper{ display:inline-block; vertical-align:middle; min-width:40%; }
.banner p{ display:inline-block; vertical-align:middle; margin:0; }

.red{
	background:rgba(254,70,49,.86);
}

.purple{
	background:rgba(93,73,253,.96);
}

.yellow{
	background:rgba(251,255,50,.86);
}

.black-bar{ height:15px; background:rgba(0,0,0,.95); margin:0 0 15px; }
.white-bar{ height:55px; background:rgba(255,255,255,.95); margin:0 0 15px; }


#map-1905{
	background-image:url('images/map-1905.png');
	padding-top:0;
}
#map-1905 .arrow {
    margin: -65px 0 30px;
}

#map-1927{
	background-image:url('images/map-1927.png');
}
#map-1927 .arrow{
	margin:-165px 0 95px;
}

#map-1960{
	background-image:url('images/map-1960.png');
}
#map-1960 .arrow{
	margin:-80px -32px 0 0;
}

#map-2010 {
    align-items: center;
    background-image: url("images/map-2010.png");
    display: flex;
}

@media only screen and (max-width: 1024px){
	
	.wrapper{ width:98%; }
	
}	

@media only screen and (max-width: 768px){

	
	
	.arrow{ margin:0 !important; }
	
	#map-1927 .arrow{ display:none; }
	
	.row{ margin:0 0 10px; }
		
	.border-box {
	    margin: 0 0 10px;
	    min-height: 0 !important;
	    padding: 20px !important;
	}
	
	.panel{
		min-height:none;
	}
	
	.banner p{ font-size:16px; }

}




/* Portrait */
@media only screen and (orientation: portrait) { 
	  
  	#map-1905{
  		background-image:url('images/mobile-map-1905.jpg');
  	}
  	#map-1927{
  		background-image:url('images/mobile-map-1927.jpg');
  	}
  	#map-1960{
  		background-image:url('images/mobile-map-1960.jpg');
  	}
  	#map-2010 {
  	    background-image: url("images/mobile-map-2010.jpg");
  	}
	  

}



/* Landscape */
@media only screen and (orientation: landscape) {
	  
	  

}