@charset "utf-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100%;
  max-width: 100%;
  font-family: "Verdana", sans-serif;
  line-height: 1.5;
}
caption {
  caption-side: bottom;
}
button, input {
  padding: 5px 10px; /* top & bottom: 10px, left & right: 10px */
}
a {
  text-decoration: none;
}
hr {
  height: 1px;
  background-color: #CCC;
  border: none;
}
/* Makes YouTube video size responsive */
.youtube-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 560px;
}
/* RESONSIVE DESIGN */
/* Mobile Layout: 640px and below. */
#container {
  padding-left: 3%;
  padding-right: 3%;
}
/* Tablet Layout: 641px to 1007px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 641px) {
  #container {
    padding-left: 3%;
    padding-right: 3%;
  }
}
/* Desktop Layout: 1008px and up.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 1008px) {
  #container {
    padding-left: 10%;
    padding-right: 10%;
  }
}
/* RESPONSIVE HEADER MENU - "hamburger" menu */
header {
  padding: 0 20px;
  background-color: #60804F;
  height: auto;
  display: flex;
  justify-content: flex-start;
  width: 100;
}
footer {
  width: 100%;
  background-color: #CCC;
  text-align: center;
  padding: 10px;
}
#brand {
  display: flex;
  align-items: center;
}
.navUL {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #60804F;
}
.navUL a {
  color: white;
}
.navUL li {
  padding: 5px;
  margin-left: 10px;
}
.navUL li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}
#hamburger-icon {
  margin: auto 0;
  display: none;
  cursor: pointer;
}
#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}
.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}
.open .bar2 {
  opacity: 0;
}
.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}
.mobile-menu {
  display: none;
  position: absolute;
  /* top: 50px; 60 px (below) makes it not cut off bottom of IM logo*/
  top: 60px;
  left: 0;
  margin-left: 0;
  /* height: calc(100vh - 50px); I don't think I need this. I used auto height instead.*/
  width: 100%;
  height: auto;
}
.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.mobile-menu li {
  margin-bottom: 10px;
}
@media only screen and (max-width: 600px) {
  header {
    justify-content: space-between;
  }
  header nav {
    display: none;
  }
  #hamburger-icon {
    display: block;
  }
}
/* OBJECT FORMATTING CSS */
.float-left {
  float: left;
}
.float-right {
  float: right;
}
/* PARAGRAPH FORMATTING CSS */

.double-spacing{
  line-height: 2.5;
}
p, h1, h2, h3, h4, h5, h6 {
  padding-bottom: 10px;
  padding-top: 10px;
}
.indent {
  padding-left: 25px;
}
.grayDiv {
  background-color: lightgray;
  padding: 20px;
  overflow: auto;
}
.padding20px {
  padding: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.padding10px {
  padding: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.padding5px {
  padding: 5px;
  margin-top: 0px;
  margin-bottom: 0px;
}
/* IMAGE CSS */
img {
  max-width: 100%;
  height: auto;
}
.imgPadding {
  padding: 10px;
}
.ImageBorder {
  border: thin solid #000;
}
.bordered-link {
  border: 3px solid blue;
}
/* TEXT FORMATTING CSS */
.text-center {
  text-align: center;
}
.justified {
  text-align: justify;
}
.Centered {
  text-align: center;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.italic {
  font-style: italic;
}
.TimesNewRoman {
  font-family: "Times New Roman", Times, serif;
}
.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
.smallText {
  font-size: small;
}
.largeText {
  font-size: large;
}
.xlText {
  font-size: x-large;
}
.xxlText {
  font-size: xx-large;
}
.RedText {
  color: #F00;
}
.GreenText {
  color: #060;
}
.WhiteText {
  color: #fff;
}
.BlueText {
  color: #00008B;
}
.BurgundyText {
  color: #900;
}
.strike {
  text-decoration: line-through;
}
/* LIST CSS*/
ul, ol {
  list-style-position: outside;
  padding: 10px 0px 10px 40px;
}
li {
  padding-bottom: .5em;
}
.liSpacing li {
  margin: 1em 0;
}
.noBullets li {
  list-style-type: none;
}
.centeredDiv {
  display: flex;
  justify-content: center
}
.dlWrapper {
  display: inline-block;
  width: auto;
  background-color: #CCC;
  padding: 10px;
}
dt {
  float: left;
  clear: left;
  padding-right: .5em;
  font-weight: bold;
  padding-bottom: .5em;
}
dd {
  float: left;
  padding-bottom: .5em;
}
dt::after {
  content: " - ";
}
.noHyphen::after {
  content: " ";
}
/* FORM ELEMENTS CSS */
.labelText {
  color: #D20000;
  font-weight: bold;
}
.GrayTextBox {
  background-color: #EEEEEE;
  max-width: 95%;
}
.selectElement {
  font-family: Verdana, sans-serif;
}
.InvisibleTextBox {
  font-weight: bold;
  color: #D20000;
  background-color: #FFF;
  border-style: none;
  border-color: #FFF;
  max-width: 95%;
}
/* TABLE FORMATTING CSS */
.topAlign {
  vertical-align: top;
}
.middleAlign {
  vertical-align: middle;
}
.TablewithBorders {
  border: thin solid #000;
}
.TablewithBorders tr td {
  padding: 10px;
  border: thin solid #000;
}
.CenterTable {
  margin-right: auto;
  margin-left: auto;
  border-style: none;
}
.CenterTablewithBorders {
  margin-right: auto;
  margin-left: auto;
  border: thin solid #000;
}
.CenterTablewithBorders tr td {
  border: thin solid #000;
  padding: 10px;
}
.CenterTablewithBorders tr th {
  border: thin solid #000;
  padding: 10px;
  text-align: center;
  background-color: #CCC;
}
.KeyWordsTable {
  margin-right: auto;
  margin-left: auto;
  border-style: none;
  background-color: #CCC;
}
.KeyWordsTable tr td {
  padding: 5px;
}
.KeyWordsTable tr th {
  padding: 5px;
  text-align: center;
}
.GrayBackground {
  background-color: #CCC;
}
.Crossword {
  margin-right: auto;
  margin-left: auto;
  border: thin solid #000;
  font-size: medium;
  color: #FFF;
  background-color: #000;
}
.StudyAbroadTable {
  padding: 0px;
  float: left;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}
.StudyAbroadTable tr td {
  background-color: #EEEEEE;
  padding: 5px;
}
.StudyAbroadTable tr th {
  background-color: #60804F;
  font-size: large;
  padding: 5px;
  text-align: center;
}
.TDwithBorder {
  border: thin solid #000;
  padding: 3px;
}