/* Put your custom css here */

.mainTitle h1 {
	color:#31A3BE;
	}

.title h1{
	color:#31A3BE;}

#paralaxSlice1 {
	margin-top: -40px;
	padding-bottom: 40px;
}

.Mae {
  position: relative;
  display:none;
  text-align: left;
  float: right;
  clear: right;
  width: 100%;
  height: 90%;
  list-style-type: none;
  margin-top:-40px;
  padding: 44px;
  background: #39F;
  background-image:url(../images/maePortrait.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  background-attachment:scroll;
  z-index: 15;
  color: white;
  text-decoration: none;
}

.Mae h1{
	color:#871C1A;
}

@media(max-width:767px){	#nonParallax3{
	display:block;
	height: 600px;
}}

@media(max-width:414px){	.mae h1{
	margin-top:18px;
	font-size:16px;
}}

@media(min-width:768px){  #paralaxSlice16{
	display:block;
  }}
  
  .Frankie {
  position: relative;
  display:none;
  text-align: left;
  float: right;
  clear: right;
  width: 100%;
  height: 100%;
  list-style-type: none;
  padding: 33px;
  background: #39F;
  background-image:url(../images/frankiePortrait.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  background-attachment:scroll;
  z-index: 15;
  color: white;
  text-decoration: none;
}

@media(max-width:767px){	#nonParallax2{
	display:block;
	height: 300px;
}}

@media(min-width:768px){  #paralaxSlice15{
	display:block;
  }}

.timeline h3 {color:#31A3BE;}
.timeline img {margin: auto;}
.timeline{
  margin: 0px auto;
  max-width: 1140px;
  overflow: hidden;
  height: auto;
  position: relative;
  padding: 0px;
  list-style-type: none;
 
  background: url(../images/theme-pics/timeline.png);
  background-repeat: repeat-y;
  background-position: 50% 0;
}

.timeline *, .timeline *:after, .timeline:after, .timeline *:before, .timeline:before, .timeline.v1 *, .timeline.v1 *:after, .timeline.v1:after, .timeline.v1 *:before, .timeline.v1:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline .century {
	font-family: 'Oswald',sans-serif;
  background: #31A3BE;
  border:11px solid #eee;
  font-size: 3em;
  width: 150px;
  height: 150px;
  clear: both;
  margin: 1em auto;
  color: white;
  border-radius: 50%;
  text-align: center;
  margin-top: 50px;
  line-height: 128px;
}

.timeline .year:first-of-type, .timeline.v1 .year:first-of-type {
  margin-top: 0 !important;
}
/* line 50, ../scss/timeline.scss */
/*.timeline .year + .event, .timeline.v1 .year + .event {
  margin-top: -1.5em;
}*/
/* line 60, ../scss/timeline.scss */
.timeline .event{
  position: relative;
  text-align: left;
  float: right;
  clear: right;
  width: 45%;
  margin: 15% 2.5% 1% 2.5%;
  border-radius: 5px;
  list-style-type: none;
  display: block;
  padding: 33px;
  background: #333;
  z-index: 15;
  color: white;
  text-decoration: none;
}

.timeline .event-pic{
  position: relative;
  text-align: left;
  float: right;
  clear: right;
  width: 95%;
  margin:22px 2.5%;
  border-radius: 5px;
  list-style-type: none;
  display: none;
  padding: 33px;
  background: #39F;
  background-image:url(../images/timeline/yazzie-windmillcrop.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position:center;
  background-attachment:scroll;
  z-index: 15;
  color: white;
  text-decoration: none;
}

@media(max-width:414px){	#nonParallax{
	display:block;
	height:300px;
}}

@media(min-width:415px){  #paralaxSlice14{
	display:block;
	height:400px;
  }}

@media all and (max-width: 600px) {
  /* line 60, ../scss/timeline.scss */

}
/* line 97, ../scss/timeline.scss */
.timeline .event.offset-first {
  margin-top: -1.5em;
}


.timeline .event:nth-of-type(2n) {
  float: left;
  clear: left;
}




@media(max-width:414px){  .timeline .event{
    width: 85%;
  }}

@media(min-width:415px){
	.timeline .event:after {
		right: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(51, 51, 51, 0);
		border-right-color: #333;
		border-width: 15px;
		margin-top: -15px;
	}


	.timeline .event:nth-of-type(2n):after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(51, 51, 51, 0);
		border-left-color: #333;
		border-width: 15px;
		margin-top: -15px;

		
	}
}

@media(min-width:992px){}

@media(min-width:1200px){}

.timeline h3 {
	font-size:30px;
}

p{
	font-family: 'Droid Serif', serif;
	font-size:14px;
}

.timeline p{
	font-size:16px;
}

#mapIntro{
	background-color:#333;
	text-align:center;
	color:#FFF;
	margin-bottom:-1.3em;
	padding-top:1em;
	padding-bottom:1em;
}