/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.75;
  font: "Times New Roman", Times, Georgia, serif;
  background: white;
  margin-top: 5vw;
  margin-left: 10vw;
  margin-right: 10vw;
  margin-bottom: 10vw;

}

header img{
	
	width: 275px;
	height: auto;
	
}
header{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding-bottom: .25vw;

}
section{
}	

.burgee {
	width: 20vw;
}
	
h1{
	font-size: 3.00rem;
	text-align: center;	
	color: #000;
	font-weight: bold;
	margin-bottom: 1px;
}

	
h2{
	text-align: center;
	font-weight: bold;
	font-size: 2.25rem;
	color: #212121;
	margin-bottom: 2px;
	margin-top: 2px;
}	  	

h3{
	text-align: left;
	font-size: 1.25rem;
	line-height: 28em;
	color: #5e5e5e;
	font-weight: normal;
	font-style: normal;
	margin: 28px 0 0px 10px;
}
	
	
h4{
	text-align: center;
	font-size: 1.5rem;
	
	color: #5e5e5e;
}

h5{
	text-align: left;
	font-size: .95rem;
	color: #5e5e5e;

}

h6{
	margin: 22px 0;
	text-align: center;
	font-size: 1.15em;
	line-height: 1.20em;
		color: #5e5e5e;
	}
	
 
    
b, strong {
  font-weight: bold;
}

p.indent{
	text-indent: 5%;
}
p {
  line-height: 24px;
  margin: 24px 0;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

em.lead {
	text-align: center;
}

.lead{	
       float: left;
       position: relative;
       width: 96.15%;
	padding-left: 10px;
	padding-right: 20px;
	text-indent: 3em;
}

.box {
       float: left;
       position: relative;
       width: 20%;
       padding-bottom: 10%;
	font-size: small;
		text-align: center;
}
    .boxInner {
       position: absolute;
       left: 10px;
       right: 10px;
       top: 10px;
       bottom: 10px;       
       overflow: hidden;
	font-size: small;

}
    .boxInner img {
       width: 220px;
    }
    .boxInner .titleBox {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       margin-bottom: -50px;
       background: #000;
       background: rgba(0, 0, 0, 0.5);
       color: #FFF;
       padding: 10px;
       text-align: center;
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
       transition: all 0.3s ease-out;
    }
    
    footer{
	border-top-color: black;
	border-top-width: 1px;
	text-align: justify;
	display: block;
	
}
a{
	text-decoration: none;
}
    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
       margin-bottom: 0;
    }
    @media only screen and (max-width : 480px) {
       /* Smartphone view: 1 tile */
       .box {
          width: 100%;
          padding-bottom: 100%;
       }
       	    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
       /* Tablet view: 2 tiles */
       .box {
          width: 50%;
          padding-bottom: 50%;
       }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
       /* Small desktop / ipad view: 3 tiles */
       .box {
          width: 33.3%;
          padding-bottom: 33.3%;
       }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
       /* Medium desktop: 4 tiles */
       .box {
          width: 25%;
          padding-bottom: 25%;
       }
    }
  </style>