@charset "utf-8";
/* CSS Document */
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway'), local('Raleway-Regular'), url(../fonts/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Raleway'), local('Raleway-Regular'), url(../fonts/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
}

body {font-family: 'Raleway', sans-serif; margin:0 0;}

header {background-color: #f1f1f1; text-align: center; width:100%;}

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

h1 {margin-left:13%; font-size:4vw; color: #032f5b; font-weight: normal;}
h2 {text-transform: uppercase; color: #a5181c; font-size: 2vw;}
h3 {color: #2440a3; font-size: 1.5vw;}
p {font-size: 1.5vw;}
.seal {width:100%; clear:both;}

#sealcontent {margin: 0 5%; width: 100%;}
#sealcontent:after {content: ""; display: table; clear: both;}

#btnscontent {margin: 0 5% 0 5%; width: 90%;}
#btnscontent:after {content: ""; display: table; clear: both;}

.leftcol {float:left; width: 25%; padding: 30px;}
.rightcol {float:left; width: 55%; padding: 10px;}
.rightcol {float:left; width: 55%; padding: 10px;}
.col {width:25%; float:left; padding:3%;}

a.btnlink {color:#000; text-decoration: underline;}
a.btnlink:hover {text-decoration: none;}

.icons {max-width: 32px; height: auto; margin-right: 15px;}

.btns{
    color: white;
    text-align: center;
    font-size:2vw;
    padding-top:7%;
    padding-left:10%;
    padding-right:10%;
}
.btns a {color:#ffffff; text-decoration: underline;}
.btns a:hover {text-decoration: none;}
.btns a:visited{color:beige;}

.btn1 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/1-Army_Navy.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn1:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/1-Army_Navy.png);
}
.btn2 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/2-Barracks.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn2:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/2-Barracks.png);
}
.btn3 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/3-Branching.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn3:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/3-Branching.png);
}
.btn4 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),url(../img/4-Buildings.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn4:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/4-Buildings.png);
}
.btn5 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/5-Uniforms.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn5:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/5-Uniforms.png);
}
.btn6 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/6-Athlete.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn6:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/6-Athlete.png);
}
.btn7 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/7-4years.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn7:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/7-4years.png);
}
.btn8 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/8-HenryFlipper.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn8:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/8-HenryFlipper.png);
}
.btn9 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/9-HistoryWP.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn9:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/9-HistoryWP.png);
}
.btn10 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/10-LearningLead.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn10:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/10-LearningLead.png);
}
.btn11 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/11-Molly.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn11:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/11-Molly.png);
}
.btn12 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/12-Monuments.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn12:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/12-Monuments.png);
}
.btn13 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/13-Projects.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn13:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/13-Projects.png);
}
.btn14 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/14-Reception.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn14:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/14-Reception.png);
}
.btn15 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/15-rings.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn15:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/15-rings.png);
}
.btn16 {
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(../img/16-12Virtues.png);
    width: 100%;
    height: 175px;
    background-size: cover;
}
.btn16:hover{
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 139, 0.65), rgba(0, 0, 139, 0.65)), url(../img/16-12Virtues.png);
}

/* Style the footer */
.footer {background-color: #f1f1f1; padding: 10px; text-align: center;}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    width: 100%;
  }