html {
  width: 100%;
}
body {
  background-color: black;
  margin: 0px;
  font-family: Trebuchet MS;
  color: #FF3232;
  font-size: 1.0em;
  text-align: center;
  width: 100%
}

A{text-decoration:none} 
A:link {color: #DDDDDD; text-decoration: none; }
A:visited {color: #CCCCCC; text-decoration: none }
A:hover {color: #FFFFFF; text-decoration: none }
A:active {color: #888888; text-decoration: none }

A.set1:link {color: #BBBBBB; }
A.set1:visited {color: #444444; }
A.set1:active {color: #888888; }

A.set2:link {color: #DDDDDD; }
A.set2:visited {color: #AAAAAA; }
A.set2:active {color: #CCCCCC; }


A.set3:link {color: #AA0000; }
A.set3:visited {color: #770000; }
A.set3:active {color: #990000; }

A.set4:link {color: #FFFFFF; }
A.set4:visited {color: #770000; }
A.set4:active {color: #AA0000; }
A.set4:hover {color: #AA0000; }

A.set5:link {color: #FF6464; }
A.set5:visited {color: #FF7474; }
A.set5:active {color: #DD5454; }
A.set5:hover {color: #FFDDAA; }

h1 {
 font-family: Archivo_Narrow;
 text-align: center;
 color: #FF3232;
 font-size: 1.5em;
 }

h2 {
 font-family: Georgia;
 font-weight: normal;
 text-shadow: 1px 1px 3px black;
 color: #FF3232;
 font-size: 1.5em;
}

h3 {
 font-family: Merriweather;
 font-size: 1.0em;
 text-align: center;
}

h4 {
 font-family: Georgia;
 text-align: center;
 text-shadow: 1px 1px 3px black;
 color: #FF6464;
 font-size: 1.125em;
}

h5 {
 font-family: Trebuchet MS;
 text-align: center;
 color: #FF3232;
 font-size: 1.125em;
}

h6 {
 font-family: Trebuchet MS;
 text-align: center;
 color: #9B3264;
 font-size: 1.0em;
}

.h4s {
 margin-bottom: 0.65em;
}

.t-link {
    margin-bottom: 0;
    margin-top: 0;
    color: #FF9999;
    text-shadow: 1px 1px 2px black, 0 0 2px black, 0 0 4px red, 0 0 8px #FF8888;
}

.t-nolink {
    margin-bottom: 0.33;
    margin-top: 0.33;
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 2px black, 0 0 4px red, 0 0 8px white;
}

.ietc { width:100%; height: auto; }

.lnkred:hover {
 background-color: #FFFFFF60;
}

.signup {
 font-family: Times New Roman, Times, Baskerville, Georgia, Serif;
 font-weight: normal;
 text-shadow: 1px 1px 3px black;
 font-size: 1.5em;
 color: #CFFFFF;
}

.footer {
 font-family: Trebuchet MS;
 text-align: center;
 color: #FF3264;
 font-size: 1.0em;
 text-shadow: 2px 2px 1px black;
}

video {
 border-radius: 25px;
 overflow: hidden;
}

.infinAD {
 width:100%;
 height:auto;
 max-width: 640px;
 max-height: 360px;
 background: #00000000;
 opacity: 1;
}

.clip {
 width:100%;
 height:auto;
 max-width: 420px;
 opacity: 1;
 background: black;
}

.vidcontainer {
 position: relative;
}

.vidclipct {
 position: relative;
 text-align: center;
}

.vidtable {
 margin-left: auto;
 margin-right: auto;
 background: url('ibg/infin flat5.png') repeat-y center;
}

.vidtitle {
 text-shadow: 1px 1px 2px black;
 text-decoration: underline;
}

.vidcaptL {
 text-shadow: 1px 1px 2px black;
 text-indent: 150px;
 background: #00000040;
}

.vidcaptR {
 text-shadow: 1px 1px 2px black;
 text-indent: -150px;
 background: #00000040;
}

.grad {
 background: radial-gradient(#CC99CC, #577397, black);
}

.infinhr {
 width: 45%;
 color: #777;
 background-color: #00000099;
 background: radial-gradient(closest-side at 50% 50%, #000000FF 20%, #00000099 50%, #00000000 90%);
 border-radius: 20px;
 margin: 0 auto;
}

.infinhrpx {
 width: 100%;
 height: auto;
 padding: 4px;
 max-width: 570px;
 filter: drop-shadow(2px 2px 4px #CCCCA0);
}

.infinimg {
 width: 95%;
 height: auto;
 padding: 4px;
 max-width: 570px;
 filter: drop-shadow(2px 2px 8px #000000A0);
}

.txt {
 font-family: "Times New Roman", Times, serif;
 color: white; //#FF3232;
 font-size: 1.2em;
 text-align: center;
 text-shadow: 0 0 2px black, 0 0 2px black, 4px 2px 4px black;
 letter-spacing: 0.5px;
 margin-bottom: 1em;
}

.txtblock {
 display: none;
 padding: 1em;
 line-height: 1.6;
 background-color: #494442AA;
}

.tt {
 position: relative;
 display: inline-block;
 font-family: Georgia;
 text-align: center;
 color: 0;
 font-size: 1.2em;
}

.tt:hover {
 filter: drop-shadow(2px 2px 4px #EEEEFF) drop-shadow(-2px -2px 5px #FFFF6633) drop-shadow(0px 0px 5px #DD4444BB);
 transition: opacity 0.75s;
}

.tt .fuzz {
 width:100%; height: auto;
 transition: filter 2s ease;
}

.tt:hover .fuzz {
 filter: blur(6px);
}

@keyframes ttanim {
 20% { filter: drop-shadow(0px 0px 0px #EEEEFF00) drop-shadow(0px 0px 0px #FFFF6633) drop-shadow(0px 0px 0px #DD4444BB); }
 30% { filter: drop-shadow(2px 2px 4px #EEEEFF) drop-shadow(-2px -2px 5px #FFFF6633) drop-shadow(0px 0px 5px #DD4444BB); }
 40% { filter: drop-shadow(0px 0px 0px #EEEEFF00) drop-shadow(0px 0px 0px #FFFF6633) drop-shadow(0px 0px 0px #DD4444BB); }
}
@media (hover: none) and (pointer: coarse) {
  .tttime1 { animation: ttanim 14s infinite; }
  .tttime2 { animation: ttanim 14s 2s infinite; }
  .tttime3 { animation: ttanim 14s 4s infinite; }
  .tttime4 { animation: ttanim 14s 6s infinite; }
  .tttime5 { animation: ttanim 14s 8s infinite; }
}

.tt .tttext {
  cursor: pointer;
  visibility: hidden;
  width: 80%;
  max-width: 476px;
  /*background-color: #DD4444BB;*/
  text-shadow: -2px 1px 2px white, 1px 1px 2px white, 0px 0px 5px #FF4444FF, 0px 0px 3px #FF4444FF;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 65px;
  left: 10%;
  margin-left: 0px;
  opacity: 0;
  transition: opacity 1s;
}
.tt .ttot {
  top: -20px;
}

.tt .tttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tt:hover .tttext {
  visibility: visible;
  opacity: 1;
}

.modal {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: black;
  background-color: #00000066;
}

.modal-content {
  background-color: #494442;
  background: #494442 url(ibg/bg5.jpg) repeat;
  margin: 1% auto;
  padding: 2px;
  border: 1px solid #888;
  width: 80%;
  max-width: 476px;
}

.modal-Iframe {
  display:none;
  border: 0;
  background-color: #E4E2E1;/*#242221;*/
  width: 100%;
  height: 500px;
  max-width: 476px;
}

.exPDF {
  display:block;
  width: 100%;
  height: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

.main {
 width: 40%;
 display: table-cell;
 border-radius: 10px;
 background: #494442 url(ibg/bg5FCh.jpg) repeat;
 border-style: inset;
 border-color: #767676;
}

.row {
 display: table-row;
}

.sidepad {
 display: table-cell;
}

.butn {
 background-color: #E00000;
 border: none;
 border-radius: 12px;
 padding: 6px 12px;
 color: black;
 -webkit-transition-duration: 0.4s; /* Safari */
 transition-duration: 0.4s;
 font-family: Trebuchet MS;
 text-align: center;
 color: #5F0000;
 font-size: 1.2em;
}

.butn:hover {
 background-color: #E0C870;
 color: black;
 font-weight: bold;
 box-shadow: 0 12px 16px 0 #0000003D, 0 17px 50px 0 #00000030;
}

.flashit {
 animation: cyclecolour 7s infinite;
}

@media (max-width: 1190px) {
  .main {
    width: 476px;
  }
  .infinhr {
    width: 636px;
  }
  .modal-content {
    width: 80%;
  }
  .modal-Iframe {
    display:none;
  }
  .exPDF {
    display:block;
  }
}
@media (max-width: 636px) {
  .infinhr {
    width: 100%;
  }
.modal-content {
    width: 476px;
  }
  .modal-Iframe {
    display:none;
  }
  .exPDF {
    display:block;
  }
}
@media (max-width: 476px) {
  .main {
    width: 100%;
  }
  .modal-content {
    width: 100%;
  }
  .modal-Iframe {
    display:block;
  }
  .exPDF {
    display:none;
  }
}

@keyframes backanim {
 0%   { background-size: 100% auto; }
 99.6%  { background-size: 162% auto; }
 100% { background-size: 100% auto; }
}
@keyframes cyclecolour {
 20% { color: #FF6464; text-shadow: 0 0 0px #FFFFFF33;}
 35% { color: #FFDDAA; text-shadow: 0 0 4px #FFFFFF99;}
 90% { color: #FF6464; text-shadow: 0 0 0px #FFFFFF33;}
}
