* { box-sizing: border-box; }

.column { float: left; }
.left { width: 70%; }
.right { width: 30%; }
.row:after { content: ""; display: table; clear: both; }
  @media screen and (max-width: 999px) { .column {width: 100%;} .right {padding-top: 25px;} }

body {
  background-image: url("https://static.iwuwildcats.com/custompages/css/naia-otf-championships/bg.jpg");
  background-repeat: repeat;
}

#home {
    -webkit-animation-name: heartbeat;
    -webkit-animation-duration: 300ms;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 5s;
}

@-webkit-keyframes heartbeat {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(0.9); }
    100% { -webkit-transform: scale(1); }
}

h2::after {
  background: linear-gradient(to right, #d21437 0px, #d21437 10px, #666 10px, #666 80px);
  bottom: 10px;
  display: block;
  content: "";
  height: 2px;
  margin: 10px 0 15px;
  width: 80px;
}

h3 { color: #d21437; margin-top: 10px; }

h3::after {
  background: #ec1c24;
  bottom: 10px;
  display: block;
  content: "";
  height: 2px;
  margin: 10px 0 20px;
  width: 60px;
}

.hero { padding: 0; width: 100%; position: relative; overflow: hidden; transition: transform .05s, visibility .05s linear; }
.hero img { display: inline-block; transition: all .25s; vertical-align: bottom; max-width: 100%; height: auto; }
.hero img:hover { transform: scale(1.15); }

.bottom::after {
  background: linear-gradient(to right, #666 0px, #666 50%, #d21437 50%, #d21437 100%);
  display: block;
  content: "";
  height: 5px;
  margin-top: -6px;
  width: 100%;
}

.welcome p { font-size: 14px; }

/* levels */
  .l1 {
    cursor: pointer;
    padding: 10px;
    list-style-type: none;
    width: 100%;
    color: white;
    background-color: #d21437;
    border: 1px solid #d21437;
    box-shadow: 1px 1px 2px #bbb;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    transition-duration: 1s ease;
  }
  .l1:hover {filter: brightness(1.1); box-shadow: 1px 1px 2px #666;}

  .l2 {
    cursor: pointer;
    border-bottom: 1px solid #d21437;
    padding: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    background-color: #eeeef0;
  }
  .l3 {cursor: pointer; background-color: white; padding: 5px 10px; margin: 0; border-bottom: 1px solid #eeeef0; font-size: 14px;}
  details div {line-height: 18px; cursor: pointer; background-color: white; padding: 5px 20px; margin: 0; border-bottom: 1px solid #eeeef0; font-size: 14px;}
  	@media screen and (max-width: 499px) {details div {padding: 5px}}
  .l3:hover > i {color: #d21437;}
  .l3:hover {border-bottom: 1px solid #bebec0;}
  details img {vertical-align: -3px; height: 16px; display: inline-block; padding-right: 3px;}

  #footer {
    border-bottom: 1px solid #dfdfe1;
    background-color: #eeeef0;
    cursor: default;
    padding: 10px;
    margin: 0;
    font-size: 14px;
  }

/* icons */
  .fa-video {display: none; padding-left: 5px; color: #d21437;}
  details summary::-webkit-details-marker {display: none;}
  .fa-bars {padding: 0 10px;}
  .fa-running {font-size: 17px; margin-right: 7.5px; vertical-align: 0;}
  .fa-arrow-square-right {margin-right: 7.5px; font-size: 12px; vertical-align: 0;}
  summary:hover > .fa-arrow-square-right {transform: rotate(90deg);}
    .rotate {transition: transform .25s linear; }
  summary:hover > .hithere { animation: hithere .75s linear 1; }
  /* .fa-crown, .fa-medal {padding-right: 5px; color: #d4af37;} */

  @keyframes hithere {30%, 50% { transform: rotate(-20deg) scale(1); } 40% { transform: rotate(20deg) scale(1); } 70% { transform: rotate(0deg) scale(1); } 100% { transform: scale(1); }}

/* break tags */
  br.responsive {display: inline; // Show break tag for narrow screens}
  	@media (min-width: 499px) { br.responsive {display: none; // Hide break tag for wider screens} }



.right-rail { background-color: #eeeef0; border: 1px solid #dfdfe1; padding: 10px; }
.right-rail ul { list-style-type: none; background: #fdfdff; margin: 0 0 15px; padding: 0; margin: 0; }
.right-rail ul li { padding: 7.5px 10px; border: 1px solid #dfdfe1; color: #212121; transition-duration: .25s; font-size: 14px;}
.right-rail ul li:hover { border-bottom: 1px solid #ec1c24; }
.right-rail ul li:not(:first-child) { border-top: 0; }
.right-rail ul li a { text-decoration: none; color: #212121; }
.right-rail ul i { margin-right: 7.5px; font-size: 12px; vertical-align: 1px; transition-duration: .25s; }
.right-rail ul li:hover > a { color: black; }
.right-rail ul li:hover > i { padding-left: 7.5px; color: #d21437; }


.caption {
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}

.caption:hover {none;}

.teams { background-color: #eeeef0; border: 1px solid #dfdfe1; padding: 10px; }
.teams ul { list-style-type: none; margin: 0 0 15px; padding: 0; margin: 0; }
.teams ul li { cursor: pointer; padding: 7.5px 10px; background: #fdfdff; border: 1px solid #dfdfe1; transition-duration: .01s; font-size: 11px; }
.teams ul span { display: inline-block; vertical-align: center; line-height: normal; color: #212121; }
.teams ul img { margin-right: 15px; max-height: 20px; }
.teams ul li a { text-decoration: none; transition-duration: .01s; }
.teams ul li:hover { border-bottom: 1px solid white; }
.teams ul li:not(:first-child) { border-top: 0; }

.teams ul li.jbu:hover {background-color: #124e84;}
 .teams ul li.jbu:hover span {color: white;}
  .teams ul li.jbu:hover img { transform: scale(1.1); }

.teams ul li.cofo:hover {background-color: #941948;}
 .teams ul li.cofo:hover span {color: white;}
  .teams ul li.cofo:hover img { transform: scale(1.1); }

.teams ul li.uo:hover {background-color: #342a7b;}
 .teams ul li.uo:hover span {color: white;}
  .teams ul li.uo:hover img { transform: scale(1.1); }

.teams ul li.opsu:hover {background-color: #061f5c;}
 .teams ul li.opsu:hover span {color: white;}
  .teams ul li.opsu:hover img { transform: scale(1.1); }

.teams ul li.langston:hover {background-color: #f2682b;}
 .teams ul li.langston:hover span {color: white;}
  .teams ul li.langston:hover img { transform: scale(1.1); }

.teams ul li.rsu:hover {background-color: #c30e2e;}
 .teams ul li.rsu:hover span {color: white;}
  .teams ul li.rsu:hover img { transform: scale(1.1); }

.teams ul li.okwu:hover {background-color: #0e1d49;}
 .teams ul li.okwu:hover span {color: white;}
  .teams ul li.okwu:hover img { transform: scale(1.1); }

.teams ul li.utdallas:hover {background-color: #df6420;}
 .teams ul li.utdallas:hover span {color: white;}
  .teams ul li.utdallas:hover img { transform: scale(1.1); }

.teams ul li.txwes:hover {background-color: #09347a;}
 .teams ul li.txwes:hover span {color: white;}
  .teams ul li.txwes:hover img { transform: scale(1.1); }

.teams ul li.uarm:hover {background-color: #9d1636;}
 .teams ul li.uarm:hover span {color: white;}
  .teams ul li.uarm:hover img { transform: scale(1.1); }

.teams ul li.uafs:hover {background-color: #00457c;}
 .teams ul li.uafs:hover span {color: white;}
  .teams ul li.uafs:hover img { transform: scale(1.1); }

.teams ul li.usao:hover {background-color: #00483a;}
 .teams ul li.usao:hover span {color: white;}
  .teams ul li.usao:hover img { transform: scale(1.1); }

.teams ul li.lyon:hover {background-color: #85222f;}
 .teams ul li.lyon:hover span {color: white;}
  .teams ul li.lyon:hover img { transform: scale(1.1); }

.teams ul li.scu:hover {background-color: #0039a6;}
 .teams ul li.scu:hover span {color: white;}
  .teams ul li.scu:hover img { transform: scale(1.1); }

.rumble:hover { animation: shake 0.5s; animation-iteration-count: infinite; }

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.collapsible {
  background-color: #d21437;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #d21437;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: white;
}