@font-face{
font-family:archive;src:url(fonts/jorikaf.otf);
}
@font-face{
font-family:GenBasI;src:url(fonts/GenBasI.ttf);
}
@font-face{
font-family:GenBasR;src:url(fonts/GenBasR.ttf);
}
@font-face{
font-family:testament;src:url(fonts/testament.ttf);
}

html{
  background: url(i/crossbg.jpg) no-repeat center fixed; 
  background-size: cover, auto;
 -ms-text-size-adjust:80%;
 -webkit-text-size-adjust:80%;
 }
header,section,article,nav {
 margin-top:0px;
 border:1px solid grey;
 margin:5px;
 margin-bottom:10px;
 padding: 5px 5px 5px 5px;
 background-color:trans;
 text-align:center;
 }
figcaption {
 text-align:center;
 font-family:arial, sans-serif;
 font-weight:bold;
 font-size:80%;
 color:white;
 text-shadow: 5px 5px 5px black;
 }
figcaption.a {
 text-align:center;
 font-family:arial, sans-serif;
 font-weight:bold;
 font-size:80%;
 color:black;
 text-shadow: 5px 5px 5px gray;
 }

table.o{
  background: url("https://www.fanny-crosby.org/videos/A_videos/a_blest_eternity.mp4") no-repeat center fixed; 
  background-size: cover, auto;
 -ms-text-size-adjust:80%;
 -webkit-text-size-adjust:80%;
 }


td{
 font-family:arial, helvetica, sans-serif;
 font-size:100%;
 text-align:justify;
 }
td.a{
 text-align:center;
 }
td.b{
font-family:arial, helvetica, sans-serif;
text-align:left;
}
td.d{
font-family:arial, helvetica, sans-serif;
text-align:right;
}
td.e{
font-family:Times,GenBasR,serif;
text-align:left;
}
td.f{
font-family:arial, helvetica, sans-serif;
color:black;
background-color:white;
font-size:100%;
text-align:justify;
}
td.w{
font-family:arial, helvetica, sans-serif;
color:white;
font-size:150%;
text-align:left;
}




b.x {
font-family:Times,GenBasR,serif;
color:black;
font-size:100%px; 
}

b.c{
font-family:arial, helvetica, sans-serif;
color:white;
font-size:100%;
text-shadow: 5px 5px 5px black;
}
b.c1{
font-family:GenBasR,archive,serif;
color:white;
font-size:100%;
text-shadow: 5px 5px 5px black;
}
b.c2{
font-family:archive,GenBasR,serif;
color:white;
font-size:250%;
text-shadow: 5px 5px 5px black;
}
b.c3{
font-family:archive, helvetica, sans-serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px black;
}
b.c4{
font-family:GenBasR, times, serif;
color:white;
font-size:150%;
text-shadow: 5px 5px 5px black;
}
b.a1{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 outline-color: red;
 background-color:white;
 border-radius:6px;
 padding:5px;
 text-shadow: 2px 2px 2px gray;
 box-shadow: 3px 3px 3px black;
 }
b.ep{
font-family:times, serif;
color:black;
font-size:100%;
 text-decoration:none;
}
b.ep1{
font-family:arial, helvetica, sans-serif;
color:black;
font-size:80%;
text-decoration:none;
text-shadow: 3px 3px 3px gray;
}
b.ep2{
font-family:arial, helvetica, sans-serif;
color:white;
font-size:100%;
text-decoration:none;
text-shadow: 3px 3px 3px gray;
}
b.ep1b{
font-family:arial, helvetica, sans-serif;
color:black;
font-size:200%;
text-decoration:none;
text-shadow: 3px 3px 3px gray;
}
b.epr{
font-family:arial, helvetica, sans-serif;
color:red;
font-size:80%;
text-decoration:none;
text-shadow: 3px 3px 3px gray;
}
b.eprb{
font-family:arial, helvetica, sans-serif;
color:red;
font-size:150%;
text-decoration:none;
text-shadow: 3px 3px 3px gray;
}
b.cs{
font-family:arial, helvetica, sans-serif;
color:white;
font-size:80%;
text-shadow: 5px 5px 5px black;
}
a.eb1:link,a.eb1:visited,a.eb1:active{
 font-family: arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:blue;
 text-shadow: 3px 3px 3px gray;
 }
a.eb1:hover{
 font-family: arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 3px 3px 3px gray;
 }
b.lt{
 font-family:arial,serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:gray;
 text-shadow: 5px 5px 5px black;
 }
b.a{
font-family:arial, helvetica, sans-serif;
color:white;
font-size:100%;
text-shadow: 5px 5px 5px black;
}
a.a:link,a.a:visited,a.a:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:white;
 text-shadow: 5px 5px 5px black;
 }
a.a:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 5px 5px 5px black;
 }
a.a1:link,a.a1:visited,a.a1:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 outine-style: solid;
 text-shadow: 5px 5px 5px black;
 }
a.a1:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 outine-style: solid;
 color:red;
 text-shadow: 5px 5px 5px black;
 }
a.b:link,a.b:visited,a.b:active{
 font-family:GenbasR,times,serif;
 text-decoration:none;
 font-size:100%;
 color:white;
 }
a.b:hover{
 font-family:GenBasR,times,serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;

 }
a.c:link,a.c:visited,a.c:active{
 font-family:arial,sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:white;
 text-shadow: 5px 5px 5px black;
 }
a.c:hover{
 font-family:arial,sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 background-color:trans;
 text-shadow: 5px 5px 5px black;
 }
a.d:link,a.d:visited,a.d:active{
 font-family:arial,sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:50%;
 color:gray;
 }
a.d:hover{
 font-family:arial,sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:50%;
 color:red;
 }
a.e:link,a.e:visited,a.e:active{
 font-family: GenBasB, serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:blue;
 text-shadow: 3px 3px 3px gray;
 }
a.e:hover{
 font-family: GenBasB, serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 3px 3px 3px gray;
 }
a.eb:link,a.eb:visited,a.eb:active{
 font-family: GenBasB, serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:blue;
 }
a.eb:hover{
 font-family: GenBasB, serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 }
a.f:link,a.f:visited,a.f:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:white;
 text-shadow: 5px 5px 5px black;
 }
a.f:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 5px 5px 5px black;
 }
a.g:link,a.g:visited,a.g:active{
 font-family:Times,GenBasR,serif;
 text-decoration:none;
 font-weight:plain;
 font-size:100%;
 color:#0066cc;
 }
a.g:hover{
 font-family:Times,GenBasR,serif;
 text-decoration:none;
 font-weight:plain;
 font-size:100%;
 color:red;
 }
a.h:link,a.h:visited,a.h:active{
 font-family:Times,GenBasR,serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:blue;
 }
a.h:hover{
 font-family:Times,GenBasR,serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 }
a.i:link,a.i:visited,a.i:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:80%;
 color:#0066cc;
 }
a.i:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:80%;
 color:red;
 }
a.i2:link,a.i2:visited,a.i2:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:#0066cc;
 }
a.i2:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 }
a.j:link,a.j:visited,a.j:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:white;
 text-shadow: 5px 5px 5px black;
 }
a.j:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 5px 5px 5px black;
 }
a.k:link,a.k:visited,a.k:active{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:blue;
 text-shadow: 5px 5px 5px gray;
 }
a.k:hover{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 text-shadow: 5px 5px 5px gray;
 }


.bg{
    border: 1px solid red;
    overflow: scroll;
}


.jk-animate-zoom{
 animation:animatezoom 3.5s;
 }
.jk-animate-zoom1{
 animation:animatezoom 1.5s;
 }
.jk-animate-zoom2{
 animation:animatezoom 15s;
 }
@keyframes animatezoom{
 from{
  transform:scale(0);opacity:0.00
  }
 to{
  transform:scale(1);
  opacity:1.00;
  }
 }
h1{
font-family:GenBasB,mainstreet,serif;
color:white;
font-size:250%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.big{
font-family:mainstreet, sans-serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.bigb{
font-family:mainstreet, sans-serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px gray;
text-align:center;
}
b.bigb{
font-family:mainstreet, sans-serif;
color:black;
font-size:300%;
text-align:center;
}
b.bigs{
font-family:mainstreet, sans-serif;
color:black;
font-size:140%;
text-align:center;
}


b.big2{
font-family:arial, sans-serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.med{
font-family:mainstreet, sans-serif;
color:white;
font-size:200%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.reg{
font-family:mainstreet, sans-serif;
color:white;
font-size:150%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.sml{
font-family:mainstreet, sans-serif;
color:white;
font-size:100%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
h2{
font-family:mainstreet, sans-serif;
color:white;
font-size:200%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
h2a{
font-family:mainstreet, sans-serif;
color:white;
font-size:150%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.b{
font-family:arial, sans-serif;
color:white;
font-size:120%;
text-shadow: 3px 3px 3px black;
}
b.d {
font-family:arial, sans-serif;
color:white;
font-size:70%;
text-shadow: 5px 5px 5px black;
}
b.bl {
font-family:arial, sans-serif;
color:gray;
font-size:50%;
}
b.eb{
font-family:times, serif;
color:black;
font-size:120%;
}
b.t{
font-family:times, serif;
color:black;
font-size:300%;
text-shadow: 5px 5px 5px gray;
}
b.ebw{
font-family:times, serif;
color:white;
font-size:100%;
}
b.ebr{
font-family:times, serif;
color:red;
font-size:150%;
}
b.ebs{
font-family:times, serif;
color:white;
font-size:140%;
text-shadow: 3px 3px 3px black;
}
b.ep{
font-family:times, serif;
color:black;
font-size:100%;
}
b.ec{
font-family:arial, sans-serif;
color:black;
font-size:100%;
}
b.ed{
font-family:arial, sans-serif;
color:black;
font-size:70%;
}
b.edred{
font-family:arial, sans-serif;
color:red;
font-size:70%;
}
b.ew{
font-family:GenBasR, serif;
color:white;
font-size:150%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.gws{
font-family:GenBasR, serif;
color:white;
font-size:100%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.gwb{
font-family:GenBasR, serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px black;
text-align:center;
}
b.g {
 font-family:arial,san-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:white;
 background-color:trans;
 text-shadow: 5px 5px 5px black;
 }
b.gr {
 font-family:arial,san-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 background-color:trans;
 text-shadow: 5px 5px 5px black;
 }
b.hgb {
 font-family:GenBasB,serif;
 font-size:200%;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
b.hgm {
 font-family:GenBasB,serif;
 font-size:120%;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
b.hs {
 font-family:GenBasR,serif;
 font-size:100%;
 font-weight:bold;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
b.hst {
 font-family:GenBasR,serif;
 font-size:80%;
 font-weight:bold;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
b.hss {
 font-family:GenBasR,serif;
 font-size:60%;
 font-weight:bold;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
i.hos {
 font-family:GenBasI,serif;
 background-color:#faf0e1;
 font-weight:bold;
 font-size:100%;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
i.htiny {
 font-family:GenBasI,serif;
 background-color:#faf0e1;
 font-weight:bold;
 font-size:60%;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 }
i.ho {
 font-family:GenBasI,serif;
 background-color:#faf0e1;
 font-weight:bold;
 font-size:150%;
 color:#663300;
 text-shadow: 3px 3px 3px gray;
 text-align:center;
 }
i {
font-family:Times,GenBasR,serif;
color:black;
font-size:100%; 
}
i.a {
font-family:GenBasR,times,serif;
font-weight:bold;
color:white;
font-size:100%; 
}

.jk-select{
 padding:9px 0;
 width:100%;
 border:none;
 border-bottom:2px solid #000;
 background-color:trans!important;
 }
select {
 margin-top:10px;
 height:200px;
 width=200px;
 font-family:GenBasR, serif;
 font-size:100%;
 color::#663300;
 font-weight:bold;
 border:2px;
 border-color:red;
 background-image:url(i/back1.jpg);
 width:100%;
 }

.vertical-menu.a {
 margin-top:10px;
 width:200px;
 height:150px;
 font-family:GenBasR, serif;
 font-size:100%;
 color::#663300;
 font-weight:bold;
 border:2px;
 border-color:red;
 background-image:url(i/back1.jpg);
 overflow-y: auto;
}


.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}











option {
 font-family:GenBasR, serif;
 font-size:100%;
 font-weight:bold;
 color:#663300;
 text-align:center;
 text-shadow: 3px 3px 3px gray;
 }
option.a {
 margin-top:10px;
 font-family:GenBasR, serif;
 font-size:100%;
 font-weight:bold;
 color:#663300;
 text-align:center;
 background-image:url(i/back1.jpg);
 }
option:hover {
 color:red
 font-family:GenBasR, serif;
 font-size:100%;
 font-weight:bold;
 }


div.s{
  margin: auto;  
  padding: 1px;
  text-align: center;
  text-shadow: 5px 5px 5px black;
  box-shadow: 3px 3px 3px gray;
 }


 }

b.hb{
font-family:GenBasR, serif;
color:#663300;
font-size:100%; 
text-shadow: 3px 3px 3px gray;
}
b.tst{
font-family:testament, serif;
color:#663300;
font-size:100%; 
text-shadow: 0px 0px 0px black;
}
b.hbr{
font-family:GenBasR, serif;
font-weight:bold;
color:red;
font-size:100%; 
text-shadow: 3px 3px 3px gray;
}
b.aa{
font-family:arial, sans-serif;
color:white;
font-size:300%;
text-shadow: 5px 5px 5px black;
}
b.r {
font-family:arial, helvetica, sans-serif;
color:red;
font-weight:bold;
font-size:120%;
text-shadow: 5px 5px 5px gray;
}
b.w {
font-family:arial, helvetica, sans-serif;
color:white;
font-weight:bold;
font-size:120%;
text-shadow: 5px 5px 5px black;
}
b.yy {
font-family:arial, sans-serif;
color:yellow;
font-size:100%;
text-shadow: 5px 5px 5px black;
}
.hideit{
visibility: hidden;
}
.imgshd{
 box-shadow: 5px 5px 5px gray;
}
.imgshd1{
 box-shadow: 5px 5px 5px black;
}
.img-rounded{
border-color:black;
border-radius:20px;
box-shadow: 5px 5px 5px black;
}
.img-roundedthumb{
border-radius:6px;
box-shadow: 5px 5px 5px black;
}
#overlay {
  position: fixed;
  display: none;
  width: 70%;
  height: 70%;
  top: 15%;
  left:250px;
  right: 150;
  bottom:300;
  background-color:  rgba(0,0,0,0.1);
  z-index: 10;
  cursor: pointer;
  padding: 10px 10px 10px 10px;
  border-color:red;
  border:5px;

}

.white{
border-color:black;
border-radius:20px;
box-shadow: 5px 5px 5px white;
}
.squar{
border-color:black;
box-shadow: 5px 5px 5px black;
}
hr{
color:trans;
background-color:trans;
height:1px;
box-shadow: 5px 5px 5px grey;
}
hr.a{
color:#d7c7b0;
background-color:#d7c7b0;
height:1px;
width:85%;
box-align:center;
box-shadow: 5px 5px 5px grey;
}
hr.b{
color:#d7c7b0;
background-color:#d7c7b0;
height:1px;
width:100%;
box-align:center;
box-shadow: 5px 5px 5px grey;
}
.vl {
 height: 100%;
 width:1px;
 box-shadow: 5px 5px 5px grey;
}

video {
width: 100%;
height: auto;
}
input.a{
 font-family:arial, helvetica, sans-serif;
 font-size:120%;
 font-weight:bold;
 color:darkblue;
 background-color:trans;
 border: 2px solid blue; 
 border-radius: 4px;
 }
input.b{
 font-family:arial, helvetica, sans-serif;
 font-size:120%;
 font-weight:bold;
 color:darkblue;
 background-color:trans;
 border: 2px solid blue; 
 border-radius: 4px;
 }
input.c{
 font-family:GenBasR, serif;
 font-size:120%;
 font-weight:bold;
 color:#663300;
 background-color:trans;
 border: 2px solid #663300;
 border-radius: 4px;
 }
input.d{
 font-family:arial, helvetica, sans-serif;
 font-size:100%;
 font-weight:bold;
 color:blue;
 background-color:white;
 border: 2px solid blue;
 border-radius: 4px;
 width:100%;
 }
#boxit{
 box-shadow:4px 4px 4px black;
 }
#rcorners1 {
    border-radius: 50px;
    background: #efe2e5;
    padding: 20px; 
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #efe2e5;
    padding: 20px; 
}
#rcorners3 {
    border-radius: 25px;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}
div.a {
    border: 2px solid;
    border-radius: 25px;
    width:260px;
    height:380px;
    text-align:center;
}
div.relative {
    position: relative;
    left: 10px;
    border: 3px solid grey;
    margin-top:20px;
}
div.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    border: 1px solid grey;
    background-color:trans;
}
.jkbtm {
  bottom:0;
  }
.jknav{
 height:100%;
 width:100px;
 background-color:trans;
 position:fixed!important;
 z-index:1;
 overflow:auto;
 }
@media screen and (max-width:992px){
 .jknav.jkshrink{
  display:none;
  }
 .jkmain{
  margin-left:0!important;margin-right:0!important
  }
 }
@media screen and (min-width:993px){
 .jknav.jkshrink{
  display:block!important;
  }
 }
.jkcard{
 box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important
 }
.jklft{
 position:relative;
 -webkit-animation:animateleft 0.4s;
 animation:animateleft 0.4s;
 float:left!important;
 }
.jkmain,#main{
 transition:margin-left .4s;
 }
.jkocls,.jkopn{
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 }   
jkopn,.jkocls{
 color:inherit;
 }
.jkopn:hover,.jkocls:hover{
 cursor:pointer;
 opacity:0.8;
 color:gold;
 }
.jkopn,.jkocls{
 -webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
 transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
 }
.jkbox{
 padding:0.01em 16px;
 margin-top:0px;
 text-align:center;
 }
.jkbg{
 color:#fff!important;
 background-color:trans!important;
 }

.jkpb{
background-color:trans;
height:100%;
position:absolute;line-height:inherit;
}
.jkpc{
 width:100%;
 height:1.5em;
 position:relative;
 background-color:trans
 }
.jkrl{
 border-radius:8px!important
 }
.jkwhite{
color:#fff!important;
font-weight:bold;
}
jcntr{
 text-align:center;
 }

.jk-border{
border:1px solid #ccc!important;
border-color:black;
border-radius:20px;
box-shadow: 5px 5px 5px black;

}


.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: red;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.w3-badge,.w3-tag{background-color:trans!important;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

.jkovr {
  color: red;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 50%;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -250px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: red;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
video.z {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  max-width: 640px;
  height: auto;
  float: top;
  padding:50px;
  }

img.z {
  position: absolute;
  left: 0px;
  top: 200px;
  z-index: -1;
  text-align:center;
  max-width: 100%;
  height: auto;
  }

.container {
  position: relative;
  text-align: center;
  width:100%;
  color: white;
  }
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  color:white
  }
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
  color:white
  }
.very-top {
  position: absolute;
  top: 0px;
  right: 0px;
  }
.centered {
  position: absolute;
  overflow-x: hidden;
  top: 20%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  }
.text{
  position: absolute;
  top: 20%;
  left: 50%;
  font-size: 15px;
  font-family:jorikaf,serif;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

b.a1{
 font-family:arial, helvetica, sans-serif;
 text-decoration:none;
 font-weight:bold;
 font-size:100%;
 color:red;
 outline-color: red;
 background-color:white;
 border-radius:6px;
 padding:2px;
 text-shadow: 2px 2px 2px gray;
 box-shadow: 3px 3px 3px black;
 }
b.overlay {
 font-family:archive, arial, helvetica, sans-serif;
 font-size:800%;
 text-shadow: 5px 5px 5px black;
 text-align: center;
 position: absolute; 
  overflow-x: hidden;
  top: 150px; 
  left: 50%;
  color: white;
  padding: 20px;
  width: 100%;
  transform: translate(-50%, -50%);
}