body {
    background-color: #ffffff;
    color: #000;
    font-family: 'Open Sans', sans-serif;
	font-variant: normal;
	font-weight: 300;
	line-height: 1.4em; }

h5 {
    color: #999;
    /* for accordion */
    outline:none; }

p {margin-top: -.5em; }


p.aboutText {
    
    text-align: left;
    font-size: 0.85em;
}


a { color: #b5b5b5; text-decoration: none }

p.buttons {
    margin-top: -.75em; }


/* Buttons */
.btn {
  background: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -moz-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -ms-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -o-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: linear-gradient(to bottom, #f5f5f5, #dddfe0);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  display: inline-block;
  width: 60%;
  text-shadow: 1px 1px 3px #777;
  font-family: Georgia;
  color: #000;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #edf2f5;
  background-image: -webkit-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -moz-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -ms-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -o-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: linear-gradient(to bottom, #edf2f5, #cdd0d1);
  text-decoration: none;
}

.mobileFriendly {
    font-style: small-caps;
    font-style: italic;
    letter-spacing: 3px;}
    

.updateInfo {
    font-size: small; }

span.wxData {
    font-size: small;
    padding-top: .2em;
    border-top: 1px solid #DDD;
    color: #777; }

/* the accordion itself */

.accordion-subtitle {
    background-color: #ffffff !important;
    font-size: .9em;
    border: none;
    cursor: pointer; }

span.bold {
    font-weight: bold; }

/* subtitle text inside accordion NOTE: Use maximum 710 characters for subtitle! */

img {
    width: auto;
    height: auto;
    max-width: 100%;
    padding-top: 1.5em;
    border: 0;
    margin-bottom: -0.7em;
    -webkit-transition: -webkit-transform 0.4s ease;
    -moz-transition: -moz-transform 0.4s ease;
    -o-transition: -o-transform 0.4s ease;
    transition: transform 0.4s ease;
}

/* Image hover enlargement 
img:hover {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}*/


/* Text hover enlargement */
p:hover {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

p {
  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}


h4 {
    text-align: center; }
    
p.paginator {
    text-align: center; }
    
p.menu {
    text-align: center; }    
    
/* the accordion itself */
.accordion-subtitle {
    border: none;
    cursor: pointer; }

/* The "(tap)" directive */
.subtitleSpan {
    font-size: 90%;
    font-style: italic; }

/* subtitle text inside accordion NOTE: Use maximum 710 characters for subtitle! */
.subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1em;
    color: #555;
    text-align: left;
    padding-left: 7px;
    padding-bottom: 5%;
    margin-bottom: 40px;}

/* the horiz. separator line after art dimensions */
hr {
    display: block;
    margin-top: 2em; }
    
/* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 12%; }

span.logoText {
    display: inline-block;
    color: #888;
    font-style: italic;
    font-size: .8em;
    font-family: 'Times New Roman', serif;
    text-align: center;
    margin-top: .3em;
     }

/* Title text that says "Other Area Rain Amounts" */
/*.titleDiv {
    color: #777; } */
    
html {
	background-color:#ffffff; }

.updateInfo {
    background-color: #CCC;
    color: #fff;
    padding: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000;
    border: 1px solid #999;
    margin-bottom: 1em; }

p.buttons {
    margin-top: -.75em; }


/* Buttons */
.btn {
  background: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -moz-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -ms-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -o-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: linear-gradient(to bottom, #f5f5f5, #dddfe0);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  display: inline-block;
  width: 60%;
  text-shadow: 1px 1px 3px #777;
  font-family: Georgia;
  color: #000;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #edf2f5;
  background-image: -webkit-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -moz-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -ms-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -o-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: linear-gradient(to bottom, #edf2f5, #cdd0d1);
  text-decoration: none;
}

.btn2 {
  background: #f5f5f5;
  background-image: -webkit-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -moz-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -ms-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: -o-linear-gradient(top, #f5f5f5, #dddfe0);
  background-image: linear-gradient(to bottom, #f5f5f5, #dddfe0);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  display: inline-block;
  width: 100%;
  text-shadow: 1px 1px 3px #777;
  font-family: Georgia;
  color: #000;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn2:hover {
  background: #edf2f5;
  background-image: -webkit-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -moz-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -ms-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: -o-linear-gradient(top, #edf2f5, #cdd0d1);
  background-image: linear-gradient(to bottom, #edf2f5, #cdd0d1);
  text-decoration: none;
}


/* Begin Tree races styles */

video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(placeholder.jpg) no-repeat;
background-size: cover;
}


    
/* Begin responsive code from https://www.responsivegridsystem.com/calculator/ 
    See responsive.html for the HTML calculated by the above site */
    
.container {
    background-color: #fff;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0;
    text-align: center; }

    
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.53%;
}
.span_10_of_12 {
  	width: 83.06%;
}

.span_9_of_12 {
  	width: 74.6%;
}

.span_8_of_12 {
  	width: 66.13%;
}

.span_7_of_12 {
  	width: 57.66%;
}

.span_6_of_12 {
  	width: 49.2%;
}

.span_5_of_12 {
  	width: 40.73%;
}

.span_4_of_12 {
  	width: 32.26%;
}

.span_3_of_12 {
  	width: 23.8%;
}

.span_2_of_12 {
  	width: 15.33%;
}

.span_1_of_12 {
  	width: 6.866%;
}


/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.subtitle {
    margin-bottom: 60px; }
    
/* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 5%; }
   
} /* closes break point */



/* LARGER LAPTOPS */
@media only screen and (min-width: 829px)
    and (max-width: 973px){

/* drop-down subtitles */
.subtitle {
    margin-bottom: 110px; }
        
        /* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 5%; }

} /* closes break point */


/* SAMLL LAPTOPS */
@media only screen and (min-width: 602px)
    and (max-width: 828px){

/* drop-down subtitles */
.subtitle {
    margin-bottom: 160px; }
        
/* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 10%; }

} /* closes break point */



/* TABLETS */
@media only screen and (min-width: 551px)
    and (max-width: 601px){

/* drop-down subtitles */
.subtitle {
    margin-bottom: 180px; }
        
/* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 10%; }

} /* closes break point */


/* smaller TABLETS */
@media only screen and (min-width: 481px)
    and (max-width: 550px){

/* drop-down subtitles */
.subtitle {
    margin-bottom: 220px; }
        
/* Page-number links at bottom of Episode 1 */
.pageLinks {
    padding-left: 10%;
    padding-right: 10%; }
        

} /* closes break point */


/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col { margin: 0% 0 0% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%;
	}
    
} /* closes break point */