@font-face {
 font-family: 'Anton';
 src: url(../resources/Anton/Anton-regular.ttf);
}
@font-face {
 font-family: 'Cinzel';
 src: url(../resources/Cinzel/Cinzel-VariableFont_wght.ttf);
}
@font-face {
 font-family: 'Sarabun';
 src: url(../resources/Sarabun/Sarabun-SemiBold.ttf);
}

@font-face {
 font-family: 'Roboto';
 src: url(../resources/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family:  'Playfair';
  src:  url(../resources/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

@font-face {
  font-family:  'Libre';
  src:  url(../resources/Libre_Baskerville/LibreBaskerville-Regular.ttf);
}

/* tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .header_text { font-family: 'Cinzel', serif;
                font-size: 2rem; 
                color: #FFFFFF;
              text-shadow:2px 2px #7e7e7e;
              margin-left: 1rem;}

}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1024px) {
  
  /* CSS */

.header_text { font-family: 'Cinzel', serif;
                font-size: 3rem; 
                color: #FFFFFF;
              text-shadow:2px 2px #7e7e7e;
              margin-left: 1rem;}

}

.header_text a:hover { font-family: 'Cinzel', serif;
                font-size: 3rem; 
                color: #FFFFFF;
              text-shadow:2px 2px #7e7e7e;
              margin-left: 1rem;}

}


.box {border: .25rem #213672 !important;
 margin: 1rem 2rem 1rem 2rem; }

.pad4{ padding-top:4rem }
.pad15 {padding-top: 1.5rem}
.pad15b {padding-bottom: 1.5rem}
.margin15m {margin-bottom: -1.5rem !important;}
.margin2t{margin-top:  2rem;}
.margin1t{margin-top: 1rem;}
.header_text_mobile { font-family: 'Cinzel', serif;
                font-size: 1.2rem; 
                color: #FFFFFF;
              text-shadow:2px 2px #7e7e7e;
              margin-left: .5rem;}

.header_text_mobile a:hover { font-family: 'Cinzel', serif;
                font-size: 1.2rem; 
                color: #FFFFFF;
              text-shadow:2px 2px #7e7e7e;
              margin-left: .5rem;}
.header_bar_mobile { background-color: #213672;
 }        
 .header_bar { background-color: #213672;
 }   

.student_pic img {height: 75% !important;
              width: 75% !important;}

.logo img, a  {height: 100% !important;
              display: inline} 

.logo {background-color: #FFFFFF;}

.menu-text {font-family:  'Cinzel';
        font-size: .9rem;
       margin-left: 2rem;
       font-weight: bold;}
.top-bar, .top-bar ul { background-color: #213672 !important;
	color: #ffffff;}
.top-bar a { color:#ffffff !important; }
.icon { font-size:1.5rem; 
        color: #ffffff;}
.icon_mobile {font-size: 3rem;}
.icon_mobile_w  {font-size:1rem; 
        color: #ffffff;}

.blue {background-color: #213672 !important;
      color: #ffffff !important;}

.white {color: #ffffff !important; }
.red {color: #d72128 !important;}

.beige {background-color: #fffdf8}

.radius2 {border-radius: 2px;}

.staffa{ width:200px !important; }
.staff{ width:225px !important; }

.size-72 {
    font-size: 72px;
}

.faclogo { width:150px; height:150px }
h1 {color: #213672 !important;
    font-family: Cinzel;
    font-weight: 600;}
h2 {color: #213672 !important;
    font-family: Cinzel}
h3 {color: #213672 !important;
  font-family: Cinzel;
  font-weight: 600;}
h4 {color: #213672 !important;
  font-family: Cinzel;
  font-weight: 600;}
h5 {color: #213672 !important;
  font-family: Cinzel;
  font-weight: 600;}
h6 {color: #213672 !important;
  font-family: Libre;
  font-weight: 600;}
p {color: #213672 !important;}
li {color: #213672 !important;}
body{ font-family: Libre, sans-serif ;
    color: #213672;}

footer {
  margin-top:1em;
  padding-top:.5em;
  padding-left:.5em;
  background: #213672;
  color: #ffffff;
      
}

footer h4, footer h5 {color: #ffffff !important;
                    }

footer h4 {font-family: Cinzel ;
			letter-spacing: 2px;
			text-transform: uppercase;}

footer .tm {font-family: Cinzel ;}