/* New 2020-11-13 */
html { 
  background: url(bkg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

/* makes adaptable to screen  --- does nothing atm*/
@media screen and (max-width: 481px)
{
  #main
  {  /*stack the 2 text boxes*/
   float:   left;
   padding:   0;
   width:   94%;    /*3%+94%+3%=100%=full width*/
   margin:   3%;    /*3% margin spaces on all sides*/
  }
}

@font-face { font-family: JSLBlack; src: url('JBLACK.TTF'); }
@font-face { font-family: JSLAncient; src: url('JANCIENN.TTF'); }

/* New 2020-11-13 */
.content {
  /*position:   fixed;
  top:        5%;
  right:      0%;
  background: rgba(0, 0, 0, 0.0);
  color:      #f1f1f1;
  width:      90%;*/
  padding: 200px;
  font-family: JSLAncient;
}
@media screen and (max-width: 768px) {
  .content {
    padding: 10%;
    padding-top: 15%;
  }
}

/* New 2020-11-13 */
.content h1 {
  font-family: JSLBlack;
  font-size: 4em;
  text-align: center;
}
.content h2 {
  font-size: 2.5em;
  text-align: center;
}
.content p {
  font-size: 2em;
  text-align: justify;
}
.content li {
  font-size: 2em;
}
.content a {
  color: #003366;
}
@media screen and (max-width: 1000px) {
  .content h1 {
    font-size: 6vw;
  }
  .content h2 {
    font-size: 5vw;
  }
  .content p {
    font-size: 4vw;
  }
  .content li {
    font-size: 4vw;
  }
}

/* Style the tab */
.tab
{
  text-align:       center;
  overflow:         hidden;
  border:           1px solid rgba(0, 0, 0, 0.0);
  background-color: rgba(0, 0, 0, 0.0);
  position:         absolute;
  text-align:       center;

  top:               0%;
  right:             5%;
  width:            60%;
  padding:           0%;
}

/* New 2020-11-13 */
@media screen and (min-width: 1000px) {
  .tab {
    min-width: 1000px;
  }
}
@media screen and (max-width: 768px) {
  .tab {
    padding-top: 3%;
    width: 100%;
  }
}

/* Style the tab content */
.tabcontent {
  display: none;
  background: rgba(0, 0, 0, 0.0);
  padding: 6px 12px;
  /*-webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;*/
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

/* Style the buttons inside the tab */
.tab button
{
  background-color:  rgba(0, 0, 0, 0.0);
  background-repeat: no-repeat;
  overflow:          hidden;
  outline:           none;
  border:            0px solid rgba(0, 0, 255, 0.0);
  outline:           none;
  cursor:            pointer;
  padding:           5% 5%;
  transition:        0.3s;
  text-align:        center;
  font-family:       JSLBlack;
  font-size:         3em;
  color:             black;
}
/*change button size adaptively until certain width*/
@media (max-width: 1000px){.tab button{font-size: 4.8vw;}}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
/* Create an active/current tablink class */
.tab button:active {
  background-color: rgba(0, 0, 0, 0.2);
}



video
{
    display:    block;
    position:   fixed;
    object-fit:  fill;
    top:          50%;
    left:         50%;
    min-width:   100%;
    min-height:  100%;
    width:       120%;
    height:      100%;
    z-index:     -100;

    transform:  translateX(-50%) translateY(-50%);
    background-image: logo.jpg no-repeat;
    background-size: cover;
    transition: 1s opacity;

    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}
/*for bkg video*/
/*.video-container {
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  z-index: -100;
}*/

/* Style the video: 100% width and height to cover the entire window */
#bkgVideo {
  position: fixed;
  right: 50%;
  bottom: 50%;
  min-width: 100%;
  min-height: 100%;
  z-index: -100;
}

/*change bkgvid for small width*/
@media (max-width: 440px)  {
  #bkgVideo{
    position: fixed;
    left: 70%;
    min-width: 100%;
    width: auto;
  }
}
/*change bkgvid for small height*/
@media (max-height: 330px)  {
  #bkgVideo{
    position: fixed;
    left: 50%;
    min-height: 50%;
    height: auto;
  }
}

/*greyness bar for botton consent*/
.header-card {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 5%;
   margin: 0px;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   padding-left: 2%;
   padding-right: 15%;
   padding-top: 2%;
   text-align: left;
   opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}

/* Style the yesbtn */
.btn {
  top: 90%;
  right: 0%;
  border: none;
  text-align: center;
  background-color: inherit;
  padding: 50% 10%;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}
.btn:hover {background: #eee;}
.yes {
  color: green;
  position: absolute;
  white-space: nowrap;
  text-align: center;
  left: 10px;
  top: -10px;
}
.no {
  color: red;
  position: absolute;
  left: 100px;
  top: -10px;
  white-space: nowrap;
  text-align: center;

}


.wrapper {
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
}




@media(max-width: 768px) {
  #bkgVideo{
    background-color: yellow;
    background-image: image-url("HandyHome.gif");
    z-index=0;
  }
}



    .bkggif {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url(cif.gif);
      background-size: cover;
      background-color: purple;
    }

/* New 2020-11-13 */
div.content-desktop {
  display: block;
}
div.content-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  div.content-desktop {
    display: none;
  }
  div.content-mobile {
    display: block;
  }
}