<!DOCTYPE HTML>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />

  <link href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css rel="stylesheet">
  <script src=https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
  /*background-color: #020e1e;*/
}

.absolute {
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 10;
      right: 0;
      left: 0;
  }
  .topheader {
    background-color: #212529;
    width: 100%;
    height: 50px;
  }
  .fixed {left: 0;
      position: fixed;
      right: 0;
      top: 0;
      width: 100%;
      z-index: 10;
  }
.navheader{
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
  background-color: #fff;
  height:120px;
  width: 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.sec2header{
  display: flex;
  flex-direction: row;
  font-size: 30px;
  text-align: center;
  background-color: #f1f1f1;
  height:200px;
  width: 100%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.flexleft {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 20%;
}
.flexcenter {
  background-color: #f1f1f1;
  color: #424242;
  font-size: 20px;
  padding: 50px;
  flex: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}

.topNavLinks {
transform: rotate(325deg);
}
.topNavLinks a{
text-decoration: none; /* no underline */
color: #424242;
}
.topNavLinks a:hover {
  color: #f1f1f1;
}
.topNavLinks:hover {
  background-color: #28abe2;
  color: #f1f1f1;
  transform: rotate(0deg);
  /*padding: 5px 15px 5px 15px;*/
  border-radius: 25px;
  border-top: solid 15px #f1f1f1;
  border-left: solid 25px transparent;
  border-right: solid 25px transparent;
  border-bottom: solid 15px #f1f1f1;
/* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */
}

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 275px;
  top: 175px;
  right: 0;
  background-color: #28abe2;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size: 50px;
  cursor: pointer;
  color: #28abe2;
  border:none;
  float: right;
}

.openbtn:hover {
  background-color:#28abe2;
  color:white;
  border-radius: 5px;
}

.flexright {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 20%;
}
.topbreak{
  15px;
  background-color: #41464b;
  width:100%;
}
.sticknav {

}

.jumbotron {
background-image: url("http://www.maxvam.com/img/Jumbotron-img/RuomaiWarehouseSceneWIP2.png");
background-size: cover;
height: 100%;
}
/* Position text in the middle of the page/image */



.section1 {
  background-color: #f1f1f1;
  padding: 10px;
  height: 600px; /* Should be removed. Only for demonstration */

}

.bg-text {
  position: absolute;
  top: 170px;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.25); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;

}
.poster-container {
    display: flex;
}
.poster-child {
    flex: 1;
}
.poster-child:first-child {
    margin-right: 20px;
}

.vid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: normal;
  align-content: normal;
  padding-top: 50px;
  padding-bottom: 50px;
}

.vid-items:nth-child(1) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.vid-items:nth-child(2) {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
.vid-desc {
  padding:15px;
}


.top-section {
  display: flex;
  box-sizing: border-box;
}
.synop {
  text-align:justify;
  color:#555;
  font-family:'Roboto';
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}
.synop p {
  font-size:20px;
  color:#999;
}


.table-header-2 {
/*transform: translateX(-10px);*/
/*font-family: "Karla";*/
/*width: 100%;8?
/* background-color: #27395a; */
/*background-image: linear-gradient(to bottom, #28abe2, #4594ce, #547eb7, #5b699e, #5c5583);*/
color: white;
font-size: 16px;
padding: 5px 5px 5px 20px;
border: none;
cursor: pointer;
font-weight: 500;
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 0 0 0 200px inset #0000, 0 0 0 2px inset #27395a;
}



.promotop {
/* scale: 0 1; */
transform-origin:right;
animation: promotop linear;
animation-timeline: scroll(inline);
}
@keyframes promotop {
  to {scale 0 1;}
}
.promobottom {
/* scale: 0 1; */
transform-origin:left;
animation: promobottom linear;
animation-timeline: scroll(inline);
}
@keyframes promobottom {
  to {scale 0 1;}
}*
/* Create three unequal columns that sits next to each other */
.sticknav{
/*display: flex;
flex-direction: row;*/
font-size: 30px;
text-align: center;
background-color: #f1f1f1;
height:600px;
width: 100%;
/*  overflow: hidden; */
}

.sticky {
position: fixed;
top: 0;
width: 100%;
position: sticky;
top: 0;
z-index: 1;
}

.sticky + .content {
  padding-top: 60px;
}

.whatis {
/*display: flex;
flex-direction: row;*/
padding-top: 50px;
font-size: 30px;
text-align: center;
background-color: #f1f1f1;
height:600px;
width: 100%;
/*  overflow: hidden; */
}

.lside {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 20%;
}
.mcenter {
  padding: 10px;
  flex: 40%;
}
.rside {
  background-color: dodgerblue;
  padding: 10px;
  flex: 20%;
}

.veh3d-mods {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
}

@media (max-width: 800px) {
  .navheader {
    flex-direction: column;
  }
  .promotedLinks{
  }
  .sticknav {
    flex-direction: column;
  }
  .image3, .image4, .image5, .image8, .image9, .image10 {
  display: none;
  }
  .bg-text{
    display:none;
  }
  .jumbotron {
    background-position: top 155px right 40%;
  }
  .poster-container{

  }
}  /* end of @media */


.main-contain{

background-color: #777;
}
.navfooter{
height: 400px;
background-image: linear-gradient(to bottom, #28abe2, #4594ce, #547eb7, #5b699e, #5c5583);
}
.bottomfooter{
height: 130px;
background-color: #424242;
}


</style>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
</head>

<body>
<div class="topheader" id="topheader"></div>
<nav class="navheader" id="navheader">
<div class="flexleft" id="flexleft"><a href="https://www.maxvam.com/"><img src="http://www.maxvam.com/img/logos/MAX-VAM_logo2.png"></a></div>
<div class="flexcenter" id="flexcenter">
  <div class="topNavLinks"><a href="https://www.maxvam.com/gallery3d.html">3D Gallery</a></div>
  <div class="topNavLinks"><a href="https://www.maxvam.com/ruomai.html">Ruomai</a></div>
  <div class="topNavLinks"><a href="https://www.maxvam.com/sledge.html">SLEDGE</a></div>
  <div class="topNavLinks"><a href="https://www.maxvam.com/comics.html">Comics</a></div>
</div>
<div class="flexright" id="flexright">
<div class="toprightNav">


  <div id="mySidepanel" class="sidepanel">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <a href="https://www.maxvam.com/about.html">About</a>
    <a href="https://www.youtube.com/@maxvam-3d">Youtube</a>
    <a href="https://www.facebook.com/MAXVAMComics">Meta</a>
  </div>

  <button class="openbtn" onclick="openNav()">☰</button>

  <script>
  function openNav() {
    document.getElementById("mySidepanel").style.width = "150px";
  }

  function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";
  }
  </script>


</div>


</div>
</nav>
<div class="topbreak" id="topbreak"></div>
<div class="main-contain" id="main-contain">
<div class="sticknav" id="sticknav">

  <div class="jumbotron">
      <div class="container push-spaces">
      </div>
  </div>
  <div class="bg-text">

  <h1 style="font-size:50px">Comics</h1>
  <p>Synopsis</p>
</div>

<!--<video controls="controls" width="100%" loop muted><source src="mxkr24.mp4" type="video/mp4" /></video>-->

</div>


<div class="section1" id="section1">
<br/></br/>

<section class="slider-comic">


      <div class="top-section" style="padding-bottom:50px;">

<div id="div1" class="display">
  <h1>SLEDGE</h1>
  <p></p>

<div>
<a href="sledge_comic.html" class="model"><img class="comic-model" src="img/sledge_about_characters/superleagueent1.png" alt="Super"></a>
</div>



</div>

<div class="top-section">
<div id="div2" class="display">
      <h1>RUOMAI</h1>
      <p></p>


<div>
<a href="Ruomai_comic.html" class="model"><img  class="comic-model" src="img/ruomai_about_characters/skylok1.png" alt="Sky"</a>
</div>



</div>
<div class="synop" style="padding-top:55px ">
  <p>Synopsis</p>
  <p class"desc" style="color:#555 font-family:'Roboto'; text-decoration: none;">Two stories...One out of this world, and the other closer to home. In SLEDGE, 3 find faith in the midst of unrest to uncover supernatural layers of the criminal underworld. The Ruomai come together to extract and help those in need to eventually take back their city and the world as they know it.</p>
</div>
</div>



</div>

<script>
$(document).ready(function () {

    var activeDiv = 1;
    showDiv(activeDiv); // show first one because all are hidden by default
    var timer = setInterval(changeDiv, 4000);

    function changeDiv() {
        activeDiv++;
        if (activeDiv == 3) {
            activeDiv = 1;
        }
        showDiv(activeDiv);
    }

    function showDiv(num) {
        $('div.display').hide(); // hide all
        $('#div' + num).fadeIn(); // show active
    }

});

</script>



<div class="section2" id="section2">
<div class="sec2header"><div class="whatis"><h5></h5><h5></h5></div></div>
  <div class="sec2header">
    <div class="lside" id="lside" style="background-color:#f1f1f1;"></div>
    <div class="mcenter" id="mcenter">

      <div class="veh3d-mods">
        <div></div>
      <div></div>
      <div></div>
      </div>

    </div>
    <div class="rside" id="rside" style="background-color:#f1f1f1;">    </div>
  </div>
  <div class="sec2header"></div>

</div>

<div class="section3" id="section3">
  <div><img src="http://www.maxvam.com/img/icons/RuomailogoMontage.png" alt="Montage" style="width:90%; display:block; margin-left:auto; margin-right:auto;"></div>



</div>

</div>

<div class="bottomfooter" id="bottomfooter">




  <div>Copyright © 2012, MAXVAM</div>



</div>


<script>
var vpromotop = $(".promotop");
var vpromobottom = $(".promobottom");

$(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).width()/2 - vpromotop.width()));
        var position = (scrollPercent * ($(document).width()/2 - vpromobottom.width()));



        vpromotop.css({
            'left': position
        });

        vpromobottom.css({
            'right': position
        });


    });
</script>


<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navheader");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>
</body>
