html {
 width: 100%;
}

body {
 margin:0px;
 padding:0px;
 font-family: Trebuchet MS;
 background-color: black;
 color: #FF3232;
 font-size: 1.0em;
 text-align: center;
 width: 100%;
}

@font-face {
    font-family: 'Qtype-Regular';
    src: url('fonts/Qtype-Regular.woff') format('woff')
    src: url('fonts/Qtype-Regular.woff2') format('woff2')
}

:root {
 color-scheme: light only;
}

A{text-decoration:none; } 
A:link {color: #DDDDDD; text-decoration: none; }
A:visited {color: #CCCCCC; text-decoration: none; }
A:hover {color: #FFFFFF; text-decoration: underline; }
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; }

h1 {
 font-family: Archivo_Narrow;
 text-align: center;
 color: #FF3232;
 font-size: 1.5em;
 }

h2 {
 font-family: Trebuchet MS;
 font-weight: normal;
 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;
}

.qfont {
 font-family: 'Qtype';
 font-size: 1.6em;
 text-align: center;
 color: black;
}

.h2x {
 display:block;
 margin-top: 0.83em;
 margin-bottom: 0.83em;
 font-weight: bold;
}

.moretxt {
 font-family: Trebuchet MS;
 color: white; //#FF3232;
 font-size: 1.0em;
 text-align: center;
 text-shadow: 0 0 1px #CC3232, -4px 3px 6px black;
}

.ts1 { text-shadow: -1px -1px 2px white, -1px 1px 2px white, 4px 4px 8px black, 1px 1px 2px white, 1px -1px 2px white, 0px 0px 10px white; }
.ts2 { text-shadow: -1px -1px 2px white, -1px 1px 2px #FF6666, 4px 4px 8px black, 1px 1px 2px white, 1px -1px 2px #FF8888, 0px 0px 10px white; }

.fs16 { font-size: 1.6em; }
.fs13 { font-size: 1.3em; }
.fs10 { font-size: 1.0em; }

.qfonttxt {
 font-family: 'Qtype';
 font-size: 1.3em;
 text-align: center;
 text-shadow: -4px 3px 6px black;
}

.flashit {
 animation: cyclecolour 7s infinite;
}

.tlist-container{
 display: flex;
 flex-wrap: wrap;
}

.tlist-left, .tlist-right {
 flex: 50%
}

.vidcapt {
 text-shadow: 1px 1px 2px black;
 background: #00000040;
}

.row {
 display: table-row;
}

.sidepad {
 display: table-cell;
}

.main {
 width: 40%;
 display: table-cell;
 background: #494442 url(ibg/bg5FC.jpg) repeat;
 border-radius: 10px;
 border: inset #767676;
}

.blank {
 width: 40%;
 display: table-cell;
 background: radial-gradient(#CC000099, #CC000045, #00000000, #00000000);
}

.marg {
 margin-left: 15px;
 margin-right: 15px;
}

.sc { width: 48px; height: 48px; border:0; }
.othr { width: 40px; height: 40px; border:0; }
.sc:hover, .othr:hover { height: 52px; }
.ietc { width:100%; height: auto; }

.banner {
 width: 45%;
 height: auto;
 padding: 16px 0;
 margin: auto;
 background-color: #343434;
 background: linear-gradient(170deg, #345656CC, #343434CC, #563434CC, #345656CC);
 color: white;
 border: inset #767676;
 border-radius: 10px;
 box-shadow: 0 12px 16px 0 #0000003D, 0 17px 50px 0 #00000030;
}

.album {
 box-shadow: 0 0 10px #000000FF, 0 0 10px #000000FF, 0 0 20px #FFFFF0FF;
 border-radius: 20px;
}

.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;
}

.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;
}

.vid {
}

.vid:hover {
 box-shadow: 0 12px 16px 0 #0000003D, 0 17px 50px 0 #00000030;
}

.ifrsc, .ifrsp, .ifrst {
 border-radius:12px;
 border: 0;
}
.ifrsc {
 width: 100%;
 height: 394px;
}
.ifrsp {
 width: 100%;
 height: 352px;
}
.ifrst {
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 position: absolute;
 border: 0;
}
.bcct {
 max-width: 450px;
 margin: 0 auto;
}
.bcbox {
 left: 0;
 width: 100%;
 height: 0;
 position: relative;
 padding-bottom: 100%;
}

video {
 border-radius: 25px;
 overflow: hidden;
}

.clip {
 width:100%;
 height:auto;
 max-width: 420px;
 opacity: 1;
 background: black;
}

.vidtable {
 margin-left: auto;
 margin-right: auto;
}

.vidtitle {
 text-shadow: 1px 1px 2px black;
 text-decoration: underline;
}

.vidcapt {
 text-align: center;
 color: #FF6464;
 background: #00000040;
 background: linear-gradient(to right, #CC666640, #6666CC40, #CC666640);
 margin: 0 auto;
 padding: 10px 0px;
 box-shadow: 0 0 10px #000000FF;
 border-radius: 20px;
 font-family: Georgia;
 font-size: 1.125em;
 text-shadow: 1px 1px 2px black;
}

.vidcontainer {
 position: relative;
}

.footer {
 font-family: Trebuchet MS;
 text-align: center;
 color: #FF3264;
 font-size: 1.0em;
 text-shadow: 2px 2px 1px black;
}
@media (min-width: 1191px) {
  .main, .blank { width: 476px; }
  .banner { width: 881px; }
  .vidcapt { width: 636px; }
}
@media (max-width: 1190px) {
  .main, .blank { width: 476px; }
  .banner { width: 74%; }
  .vidcapt { width: 636px; }
}
@media (max-width: 859px) {
  .main, .blank { width: 476px; }
  .banner, .vidcapt { width: 74%; }
}
@media (max-width: 636px) {
  .tlist-left, .tlist-right { flex 100%; }
  .banner, .vidcapt { width: 476px; }
}
@media (max-width: 476px) {
  .banner, .vidcapt { width: 100%; }
  .main, .blank { width: 100%; }
}
@keyframes backanim {
  0%   { background-position: 0% 0px; }
  50%  { background-position: 0% 1200px; }
 100%  { background-position: 0% 2630px; }
}
@keyframes cyclecolour {
  0% { color: #FF6464; text-shadow: -4px 3px 6px black, 0 0 0px #FFFFFF33;}
 10% { color: #FFDDAA; text-shadow: 0 0 4px #FFFFFF99;}
 90% { color: #FF6464; text-shadow: -4px 3px 6px black, 0 0 0px #FFFFFF33;}
}