* { margin: 0; padding: 0;  }nav#site-navigation { display: none; }
@font-face {
  font-family: blackdrama;
  src: url(font/BlackDramaOTF/BlackDrama.otf);
}
@font-face {
  font-family: sacredbridge;
  src: url(font/SacredBridgeOTF/SacredBridge-Regular.otf);
}
@font-face {
  font-family: minionpro;
  src: url(font/MinionProOTF/MinionPro-Regular.otf);
}
@font-face {
  font-family: minionproMed;
  src: url(font/MinionProOTF/MinionPro-Medium.otf);
}
@font-face {
  font-family: timegates;
  src: url(font/TimegatesOTF/Timegates-Regular.otf);
}
@font-face {
  font-family: primus;
  src: url(font/PrimusTTF/PR-Columban-Primus.ttf);
}
@font-face {
  font-family: bible;
  src: url(font/JMHHolyBible.ttf);
}


.card {
    
    position:relative;
    float:left;
    height:100%;
    width:100%;
}
.card img {
    position:relative;
    height:100%;
    width:100%;
    
}



@media only screen and (max-width: 500px) {
 /*
    .card span{
    font-weight: bold;
    text-align:center;
    font-size:2em;
}
.card p {
    font-size:1.5em;
}
*/
    #metal{height: 400px; width:100%;}
    
.card span{
    font-family:minionpro,serif;
    letter-spacing: 0.2rem;
    display:block;
   font-weight: normal;
    font-variant: small-caps;
    font-size: 2em;
    text-align:center;
    color:#fef8e5;
}
.card p{
    font-size: 1.5em;
    color:#b0b5b8;
    font-family:minionpro,sans-serif;
    padding:0.5em 1em;
}
    
    #navbar{
    display:block;
    position:absolute;
    top: 20%;
    width:27%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
        z-index: 111;
    
}
#navbar li {
    float: left;
}

#navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 5px 16px;
    text-decoration: none;
    font-weight: bold;
    font-family: blackdrama,Verdana, Arial, Helvetica, sans-serif;
    font-size:1em;
}

/* Change the link color to #111 (black) on hover */
#navbar li a:hover {
    background-color: red;
}
 
.fcard a {
    display: block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: minionpro,Verdana, Arial, Helvetica, sans-serif;
    font-size:0.5em;
    margin-top:5%;
    margin-left:auto;
    text-align:left;
    width:90%;
}
    .fcard a img{
    height:1.5em; width:1.5em; top:0.5em;
}

.fcard h1 {
    color: #f5ca00;
    text-decoration: none;
    font-weight: bold;
    font-family: blackdrama,Verdana, Arial, Helvetica, sans-serif;
    font-size:0.75em;
}

.fcard p {
    font-size:0.35em;
    color:#fef8ef;
    margin:5% 5%;
}
    .card hr {
    position:relative;
    top:9px;
    background:url(img/hr.png);
    height: 3px;
    border:none;
}

.fl{
    width:100%;
    display:block;
    list-style-type: none;
    position:relative;
}
.fl li {
    text-decoration: none;
    width:20%;
    height:75%;
    margin:0% 0%;
    padding:0%;
    float:left;
    text-align:center;
    
}

.fl a {
    width:50%;
    background:transparent;
    margin:auto;
    font-size:0.6em;
}

#foot{
    background:url(img/foot-logo.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 10px solid #111;
    padding: 5px 0 0 0;
}
.footer li a:hover{}

#title  {
    text-align:center;
     
    position:relative;
    top:1%;
}
#title h1 {
   
    top:0%;
    font-family: blackdrama;
    font-size: 2em;
    font-variant: small-caps;
    color:orange;
    letter-spacing: .2rem;
    text-shadow: black 0px 2px 1px
}
#title h2 {
    top:2%;
    padding:0.5em;
    font-family:fangsong;
    font-size: 1em;
    color:whitesmoke;
    text-shadow: black 0px 2px 1px
}
#title span {
    font-size: 1em;
    position:relative;
    top:-0.25em;
    
} 
#title img{
    
    position:relative;
    width:10%;
    object-fit: contain;
}
    
#deets{
    width:100%;
    position:absolute;
    margin:auto;
    bottom:5%;
    color:#fff;
}
#nu {
    font-family:timegates,monospace;
    font-size: 2em;
    text-align:center;
    font-weight: normal;
    letter-spacing: .2rem;
    color:lemonchiffon;
}

#deta{
    font-family:minionpro,sans-serif;
    font-size: 1em;
    text-align:left;
    padding:1em;
    color:whitesmoke;
}

#scroll{
    /*background:url("img/sbg.png");*/
    background-size: contain;
    overflow:hidden;
    display:flex;
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    flex-wrap:wrap;
    height:65%;
}
.slide {
    position:absolute;
    flex-direction: row;
    left:0px;
    height:50%;
    width:25%;
    transition: width 2s ease 0s, height 2s ease 0s, left 2s ease 0s, margin-left 2s ease 0s, opacity 2s ease 0s;
    z-index:1;
    opacity:0;
    
}
    .activeSlide {
    height:100%;
    width:70%;
    margin-left:-5%;
    z-index:3;
    opacity:1;
    
}

#scroll2{
    /*background:url("img/sbg.png");*/
    background-size: contain;
    overflow:hidden;
    display:flex;
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    flex-wrap:wrap;
    height:100%;
}
.slide2 {
    position:absolute;
    flex-direction: row;
    left:0px;
    height:100%;
    width:100%;
    transition: left 1s ease 0s, margin-left 1s ease 0s, opacity 1s ease 0s;
    z-index:1;
    opacity:0;
    
}
    .slide2 img{
        display:flex;
        height:100%;
        width:100%;
        transition: transform 10s ease 0s;
        margin:auto;
        justify-content: space-evenly;
        transform:scale(0.9);
        object-fit: cover;
    }

.activeSlide2 {
    height:100%;
    width:100%;
    margin-left:0%;
    z-index:3;
    opacity:1;
    
    
}
    


    .activeSlide2 img{
        height:100%;
        width:100%;
        transform:scale(1.05);
        object-fit: cover;
        
    }
    .nextSlide2 {
    height:100%;
    width:100%;
    z-index:2;
    opacity:0;
    margin-left:0%;
      
}
    
.listitem{
   
    width:100%;
    height:auto;
    padding:0;
    margin:1em 0;
    
} 
.listitem img {
    height:100%;
    width:100%;
    /*margin-left:10%;
    background-color: whitesmoke;*/
}
.listitem span{
    display:block;
    font-family: primus;
   font-weight: normal;
    font-size: 1em;
     letter-spacing: 0.1rem;
    text-align:center;
    color:#b88c5b;
}
.listitem p{
    font-size: 1em;
    color:#b0b5b8;
}
    
#bm{position:absolute; left:-10%; }
    
#topper{height:200px; overflow:hidden;}

#navbar2 li a{
    
    text-decoration: none;
    color:lightgrey;
    font-size: 1em;
    font-family: blackdrama,sans-serif;
    font-variant:small-caps;
    letter-spacing: 0.1rem;
    line-height: 2em;
    margin: auto;
}

.cardc{
    
    width:250px;
    float:left;
    margin:0 0.5em;
}
.cardc span{
    font-family:serif;
    font-size:1em;
}
.cardc p{
    font-family:sans-serif;
    font-size:0.75em;
}
.scroller2{
    display:inline-block;
    width:500%;
    height:auto;
    
    padding:0 0.25em;
}
.scroller{
    display:inline-block;
    width:500%;
    height:150px;
    
    padding:0 0.25em;
}
.mcard {height:100%; width:230px; float:left;}
.mcard img{height:80%; width:70%; margin-left:15%;}
.mcard span{
    font-family:primus,serif;
    font-size:0.75em;
}
.mcard p{
    font-family:sans-serif;
    font-size:0.75em;
    text-align: center;
    padding:0;
}
    
/*.gcard{float:left; height:100px; width:100px; margin:0.5em;}
.gcard img{height:100%; width:100%; border-radius:10px;}*/
.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    width:100%;
    height:auto;
    overflow:hidden;
    padding:0;
}
#cover{
    position:absolute;
    bottom:0;
    width:100%;
    height:0px;
    
}
 
#hl img{
    height:65%;
    width:125%;
    margin-top: 15%;
    margin-left:-30%;
}
 
#logo img {
    position:relative;
    height:60%;
    width:90%;
    margin:0 5%;
    
}

#welcome img {
    position:relative;
    height:70%;
    width:100%;
    margin:10% 0%;
    
}
   
#bmm{position:absolute; left:0%;}
#bms{height:300px; width:300px; top:-2em; z-index:-25;}
    #cs{position:fixed; height:1300px; width:2000px; z-index:-100;}
#space{height:1300px; width:2000px; position:absolute; background:url("img/RAH-Web-Background.jpg");
background-repeat: no-repeat; background-size: cover;
    }
    
    .list{
    
    display:flex;
    align-items: stretch; /* Default */
    justify-content: space-evenly;
    /*flex-wrap: wrap;
    margin:25% 0;*/
        flex-direction: column;
}
    #backdrop{
        display:flex;
    align-items: stretch; /* Default */
    justify-content: center;
    }
    #backdrop img{object-fit: cover; height:100%; width:50px; }
    .bdslice{
    height:250px;
    width:50px;
    float:left;
    transition: transform 0.5s ease 0s;
    z-index: 0;
    position:relative;
}
    
    
    #ceevee{ width:40%; position:relative; color:#fef8e5; font-family: minionpro;}
#ceevee p {font-size: 1em; margin:0; padding:0; color:#fef8e5;}
#ceevee h1{margin:0.15em 0; font-weight:normal; font-size:1.25em;}
#ceevee h1 img{height:1em; width:1em;} 
#ceevee h2{font-size:0.8em; color:#fef8e5;}
#ceevee h2 img{height:1em; width:1em;} 
#ceevee span{}
    
#ceevee ul li{color:#fef8e5; margin:0 1em;}
#avatar{top:-8em; position:relative; width:60%;}
#siga{top:-4em;}

    #headlogo{
    position:relative;
    top:0.2em;
    display: block;
    height: 100%;
    width: 65%;
    margin: auto;
    
}
       #hla{
        
        height: 25px;
    width: 100%;
    margin: auto;
        object-fit: contain;
        
        
    }
   
    #menubar{
    position:relative;
    display: flex;
    height:65px;
    width:65px;
    left:0;
    padding:0.5em;
    z-index:2;
}
    
    .nava{
    position:absolute;
    height:65px;
    width:65px;
}
    
    #copy{
    font-family: bible;
    font-variant: small-caps;
    height:auto;
    
    position:relative;
        bottom:0px;
    z-index:2;
    text-align:center;
    font-size:0.35em;
}
    #copy p{color:#fef8ef;}
    
    #bc{
    display:flex;
   flex-direction: column;
}
#bc h1{
    text-align:center;
    font-size:2em;
    font-family:bible;
    line-height: 1em;
    font-weight:normal;
}
#bc a{
    width:70%;
    text-align:center;
    text-decoration: none;
    color:#fef8ef;
    font-size:1em;
    margin:auto;
    padding:0;
}
#bc a img{
    height:1em;
    width:1em;
    position:relative;
    top:0.25em;
    
}
#bc hr{
    
    background:url(img/hr2.png);
    
    
}
#copy2{
    font-size:0.5em;
}
#bracketing{
    display:flex;
}
#central{width:50%;}
#topb{height:80%;}
#topb ul{position:relative; bottom:-1em;}
#bottomb{position:relative; height:50%; bottom:0px; text-align:center;}
#bottomb img{position:relative;height:auto; width:90%; margin:0 5%; object-fit: contain;}
#leftb{width:25%;}
#leftb img{
    
    float:left;
    margin-left:0.5em;
    object-fit: contain;
    
}
#rightb{width:25%;}
#rightb img{
    float:right;
    margin-right:0.5em;
    
}
    
}


@media only screen and (min-width: 500px){
/*  
.card span{
    font-weight: bold;
    text-align:center;
    font-size:2em;
}
.card p {
    font-size:1.5em;
}
*/
    #metal{height: 1080px; width:100%;}
    
#cover{
    position:absolute;
    bottom:0;
    width:100%;
    height:25px;
    
}
.card span{
    font-family:minionproMed,serif;
    letter-spacing: 0.2rem;
    display:block;
   font-weight: normal;
    font-variant:small-caps;
    font-size: 2em;
    position: relative;
    bottom:0.25em;
    text-align:center;
    color:#fef8e5;
}
.card p{
    font-family:minionpro,sans-serif;
    font-size: 2em;
    color:#b0b5b8;
    padding:1em;
}
    
    #navbar{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    position:absolute;
    top: 15%;
    width:30%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    z-index:20;
    
}
#navbar li {
    float: left;
}

#navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    font-family: blackdrama,Verdana, Arial, Helvetica, sans-serif;
    font-size:3em;
}

/* Change the link color to #111 (black) on hover */
#navbar li a:hover {
    background-color: red;
}

.fcard a {
    text-align:left;
    display: block;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: minionpro,Verdana, Arial, Helvetica, sans-serif;
    font-size:1em;
    margin-top:2%;
    width:75%;
    margin-left:auto;
}
.fcard a img{
    height:1.5em; width:1.5em; top:0.5em;
}
    .fl a img{
    height:3em; width:3em; 
}

.fcard h1 {
    color: #f5ca00;
    text-decoration: none;
    font-weight: normal;
    font-family: minionproMed,Verdana, Arial, Helvetica, sans-serif;
    font-size:1.5em;
}
.fcard h2 {
    color: red;
    text-decoration: none;
    font-weight: normal;
    font-family: bible,Verdana, Arial, Helvetica, sans-serif;
    font-size:1.5em;
    letter-spacing: 0.2rem;
}
.fcard p {
    font-size:1em;
    color:#fef8e5;
    margin:2% 2%;
}
.card hr {
    position:relative;
    top:1em;
    background-image:url(img/hr.png);
    background-size:contain;
    background-repeat:  repeat;
    height: 3px;
    width:100%;
    border:none;
}
    /*
.card hr:after{
    content:url(img/svg/whiterose.svg);
    display: inline-block;
    
    
}
    */
    
.fl{
    width:100%;
    display:block;
    list-style-type: none;
    position:relative;
}
.fl li {
    text-decoration: none;
    width:18%;
    height:75%;
    margin:0% 0%;
    padding:0%;
    float:left;
    text-align:center;
    transition: transform 1s ease 0s;
    
}

    .fl li:hover{
        transform:scale(1.5);
    }
    
.fl a {
    width:50%;
    background:transparent;
    margin:auto;
    font-size:1em;
}

#foot{
    background:url(img/Footer.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top: 10px solid #111;
    padding: 5px 0 0 0;
}
.footer li a:hover{}
    
#title  {
    text-align:center;
     top:0%;
    position:relative;
}
#title h1 {
   position:relative;
    top:0%;
    font-family: blackdrama;
    font-size: 4em;
    font-variant: small-caps;
    color:orange;
    letter-spacing: 0.2rem;
    text-shadow: black 0px 2px 1px
}
#title h2 {
    top:5%;
    padding:0.5em;
    font-family:fangsong;
    font-size: 2em;
    color:whitesmoke;
    text-shadow: black 0px 2px 1px
}
#title img{
    position:relative;
    width:5%;
    object-fit: contain;
}  
#deets{
    width:100%;
    position:absolute;
    margin:auto;
    bottom:1%;
    color:#fff;
}
#nu {
    font-family:timegates,monospace;
    font-size: 4em;
    text-align:center;
    font-weight: normal;
    color:lemonchiffon;
}

#deta{
    font-family:minionpro,sans-serif;
    font-size: 2em;
    text-align:center;
    padding:0.25em;
    color:whitesmoke;
}

#scroll{
    /*background:url("img/sbg.png");*/
    background-size: contain;
    overflow:hidden;
    display:flex;
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    flex-wrap:wrap;
    height:100%;
    top:5%
    
}
.slide {
    position:absolute;
    flex-direction: row;
    left:0px;
    height:50%;
    width:25%;
    transition: width 2s ease 0s, height 2s ease 0s, left 2s ease 0s, margin-left 2s ease 0s, opacity 2s ease 0s;
    z-index:1;
    opacity:0;
    
}    
    .slide video{
        position: relative;
height: 100%;
width: 100%;
object-fit: contain;
    }
.activeSlide {
    height:100%;
    width:50%;
    margin-left:5%;
    z-index:3;
    opacity:1;
    
}
#scroll2{
    /*background:url("img/sbg.png");*/
    background-size: contain;
    overflow:hidden;
    display:flex;
    justify-content: center; 
    align-items: center; 
    flex-direction:column;
    flex-wrap:wrap;
    height:100%;
    top:0;
    
}
    
.slide2 {
    position:absolute;
    flex-direction: row;
    left:0px;
    height:100%;
    width:100%;
    transition: left 1s ease 0s, margin-left 1s ease 0s, opacity 2s ease 0s;
    z-index:1;
    opacity:0;
    
}
    .slide2 img{
        display:flex;
        height:100%;
        width:100%;
        transition: transform 10s ease 0s;
        margin:auto;
        justify-content: space-evenly;
        transform:scale(0.9);
       
        object-fit: cover;
    }
.activeSlide2 {
    height:100%;
    width:100%;
    margin-left:0%;
    z-index:3;
    opacity:1;
    
}
    .activeSlide2 img{
        
        height:100%;
        width:100%;
        transform:scale(1.05);
        object-fit: cover;
    }
    .nextSlide2 {
    height:100%;
    width:100%;
    z-index:2;
    opacity:0;
    margin-left:0%;
    
}
.listitem{
   
    width:30%;
    height:auto;
    padding:1em;
    
}
.listitem img {
    
    height:80%;
    width:80%;
    margin-left:10%;
    object-fit: contain;
    
    /*background-color: whitesmoke;*/
}
.listitem span{
    font-family: primus;
   font-weight: normal;
    
     
   
    letter-spacing: 0.2rem;
    display:block;
  
    font-size: 3em;
    text-align:center;
    color:#b88c5b;
}
.listitem p{
    font-size: 1em;
    color:#b0b5b8;
}
    
#bm{position:absolute; left:-10%; height:100%; width:45%;}

    #topper{height:400px; overflow:hidden;}
    
    #navbar2 li a{
    
    text-decoration: none;
    color:lightgrey;
    font-size: 2em;
    font-family: blackdrama,sans-serif;
    font-variant:small-caps;
    letter-spacing: 0.2rem;
    margin: auto;
        
}
 
.cardc{
    
    width:400px;
    float:left;
    margin:0 1em;
}
.cardc span{
    font-size:1.2em;
    font-family: serif;
}
.cardc p{
    font-size:1em;
    font-family: sans-serif;
}
.scroller2{
    display:inline-block;
    
    width:200%;
    height:auto;
    
    padding:0 1em;
}
.scroller{
    display:inline-block;
    
    width:400%;
    height:200px;
    
    padding:0 1em;
}
.mcard {height:100%; width:350px; float:left;}
.mcard img{height:80%; width:60%; margin-left:20%; object-fit: contain; }
.mcard span{
    font-family:primus,serif;
    font-size:1em;
}
.mcard p{
    font-family:sans-serif;
    font-size:1em;
    text-align: center;
    padding:0;
}
    
.gcard{float:left; height:75%; width:75%; margin:2%; transition:transform 2s ease 0s; z-index:1;}
  /*  .gcard:hover{transform:scale(1.25); z-index: 200;}*/
.gcard img{height:100%; width:100%; }
.gallery{
    display:flex;
        flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    overflow:visible;
    /*align-content: center;*/
    height:auto;
    width:100%;
    padding:0%;
}
  
#hl img{
    height:84%;
    width:77%;
    margin-top: 5%;
    margin-left:-2%;
    object-fit: contain;
}
 
#logo img {
    position:relative;
    height:90%;
    width:40%;
    margin:0 30%;
    
}
   
#welcome img {
    position:relative;
    height:100%;
    width:50%;
    margin:0% 25%;
    
}
   
#bmm{height:400px; position:absolute; left:2%;}
#bms{height:400px; width:400px; top:-8em; z-index:-25;}
  #cs{position:fixed; height:1300px; width:3000px; z-index:-100;}
#space{height:1300px; width:3000px; position:absolute; background:url("img/RAH-Web-Background.jpg");
background-repeat: no-repeat; background-size: cover;
    }
   
    .list{
    
    display:flex;
    align-items: stretch; /* Default */
    justify-content: space-evenly;
    flex-wrap: wrap;
    /*margin:25% 0;*/
}
     #backdrop{
        display:flex;
    align-items: stretch; /* Default */
    justify-content: center;
    }
  #backdrop img{object-fit: cover; height:100%; width:100%; }
    .bdslice{
    height:500px;
    width:14%;
    float:left;
    transition: transform 0.5s ease 0s;
    z-index: 0;
    position:relative;
}
    .bdslice img{
        height:100%;
        width:100%;
        object-fit: cover;
    }
#ceevee{ width:40%; position:relative; color:white; font-family: minionproMed;}
    
#ceevee p {font-size: 1em; margin:0; padding:0; color:#fef8e5; font-family: minionpro;}
#ceevee h1{margin:0.15em 0; font-size: 1.5em; font-weight:normal; font-variant:small-caps; color:#fef8ef;}
#ceevee h1 img{height:1em; width:1em;} 
#ceevee h2{font-size:1em; color:#fef8e5; font-family: minionpro;  font-weight:normal;}
#ceevee h2 img{height:1em; width:1em;}    
#ceevee span{}
#ceevee ul {margin-left:1em;}
#ceevee ul li{color:#fef8e5; margin:1em 1em;}
#avatar{top:-16em; position:relative; width:60%;}
#siga{top:-4em;}
 
    #headlogo{
    position:relative;
    top:0.5em;
    display: block;
    height: 150px;
    width: 100%;
    margin: auto;
        object-fit: contain;
    
}
    #hla{
        
        height: 50px;
    width: 100%;
    margin: auto;
        object-fit: contain;
        
        
    }
  
    #menubar{
    position:relative;
    display: flex;
    height:150px;
    width:150px;
    left:0;
    padding:0.5em;
    z-index:2;
}
    
    .nava{
    position:absolute;
    height:165px;
    width:165px;
}
    
    #copy{
    font-family: bible;
    font-variant: small-caps;
    height:auto;
    bottom:0px;
    position:relative;
    z-index:2;
    text-align:center;
    font-size:0.5em;
       
}
    #copy p{
         color: wheat;
    }
    
    #bc{
    display:flex;
   flex-direction: column;
}
#bc h1{
    text-align:center;
    font-size:3em;
    font-family:bible;
    line-height: 1em;
    font-weight:normal;
}
#bc a{
    width:50%;
    text-align:left;
    text-decoration: none;
    color:#fef8ef;
    font-size:2em;
    margin:auto;
    padding:0;
}
#bc a img{
    height:2em;
    width:2em;
    position:relative;
    top:0.5em;
    
}
#bc hr{
    
    background:url(img/hr2.png);
    
    
}
#copy2{
    font-size:1em;
}
#bracketing{
    display:flex;
}
#central{width:50%;}
#topb{height:80%;}
#topb ul{position:relative; bottom:-1em;}
#bottomb{position:relative; height:50%; bottom:0px; text-align:center;}
#bottomb img{position:relative;height:auto; width:90%; margin:0 5%; object-fit: contain;}
#leftb{width:25%;}
#leftb img{
    
    float:left;
    margin-left:1em;
    object-fit: contain;
    
}
#rightb{width:25%;}
#rightb img{
    float:right;
    margin-right:1em;
    
}
    
}

#anim3{overflow:hidden;}
#anim2{position: absolute;}
.anim-rightin{
    position: absolute;
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
    
}

@keyframes example {
  from   { left:100%; top:0px; opacity:0;}
  to { left:0px; top:0px; opacity:1;}
  
}

.fadeIn{
    animation: fader 2s ease 1 forwards;
}
@keyframes fader {
    from {opacity:0;}
    to {opacity:1;}
}
#navbar {
    opacity:1;
    left:0px;
    transition: opacity 2s ease 0s, left 2s ease 0s;
}

.hover{
    animation: hover 3s ease infinite alternate;
}
.hover2{
    animation: hover2 3s ease infinite alternate;
}
@keyframes hover{
    from {top:0px;}
    to {top:25px;}
}
@keyframes hover2{
    from {top:25px;}
    to {top:0px;}
}

body { 
                        
    background: #000;
    height:100%;
    width:100%;
     }
/*
#top{
    height:100%;
    width:100%;
  }
#tc{
    height:100%;
    width:100%;
  }
#welcome{
    height:100%;
    width:50%;
  }
*/


#social {display:flex; justify-content: center;}

#social li{list-style: none; width:15%; padding:1em;}

#contact{
    color:white;
}
#contact input{
    background-color:#1b2024;
    width:95%;
    padding:0.1em;
    margin:0.1em;
    font-size:1em;
    line-height: 2em;
    color:white;
}
#contact input[type=submit]{
    background: #b88c5b;
    color:whitesmoke;
    border:none;
    padding:0.5em;
    font-size:1em;
    font-family: primus,sans-serif;
    width:50%;
}
#contact label{
    color:#b88c5b;
    font-family:sans-serif;
    letter-spacing: 0.1rem;
    margin:0.2em;
    padding:0.2em;
}
#message {
    width:95%;
    height:100px;
    background-color:#1b2024;
    padding:0.1em;
    margin:0.1em;
    font-size:1.5em;
    line-height: 2em;
} 

.bgc{background:#12171a;}

.lc{
    
    position:relative;
    float:left;
    height:100%;
    width:100%;
}




#sbg{height:230%; width:150%; }/*height:300%; width:115%;height:230%; width:150%;*/

#navbar2{
    background: #222;    
    display: flex;
    align-items: stretch; /* Default */
    justify-content: space-between;
    border-top: 10px solid #333;
    border-bottom: 10px solid #111;
    padding: 5px 0;
}
#navbar2 li{
    position:relative;
    display:inline-block;
    margin: auto;
}


#products{
    /*background:url(img/sbg.png);*/
    background-color:#12171a;
    background-size: cover;
}


.scroll {
    border:orange solid 1px;
    width:100%;
    height:50%;
    position:relative;
     
}


.nextSlide {
    height:75%;
    width:40%;
    z-index:2;
    opacity:0.5;
    margin-left:0%;
}



.footer {
    
    top: 25%;
    width:100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    
}


#bgxc {position:absolute;  height:100%; width:100%; z-index:-20;}
.bg {position:absolute; display: block; height:100%; width:100%; z-index:-20;}
#bgxTop {position:relative; height:50%; width:100%; }
#bgx {position:absolute; bottom:0px; height:50%; width:100%; object-fit:cover; }
#big{height:102%;}
.bc{
    
    display:flex;
    align-items: stretch; /* Default */
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin:2% 0;
}
button{
    background-color:firebrick;
    background-image:url(img/sbg.png);
    border-radius:25px;
    color:antiquewhite;
    font-size:2em;
    text-shadow: 10px;
    padding:10px;
    font-family: primus,sans-serif;
    position:relative;
}

#logo{
    float:left;
    position:absolute;
    height:50%;
    width:100%;
    display:flex;
}

#welcome{
    height:50%;
}

#blackmagic{ position:absolute; width:50%; height:50%;}
#blackmagic img {height:65%;}
.fcard {
    display: block;
    float:left;
    height:100%;
    width:33%;
    margin:auto;
    text-align:center;
}

.ocard {
    display: block;
    float:left;
    height:100%;
    width:33%;
    margin:auto;
    text-align:center;
}
.ocard span{
    font-weight: bold;
    text-align:center;
    font-size:1em;
}
.ocard p {
    font-size: 1em;
}
.hwcard {
    display: block;
   
    height:100%;
    width:50%;
    margin:auto;
}
.hwcard2 {
    display: block;
   
    height:100%;
    width:100%;
    margin:auto;
}
.hwcard2 img {
    height:50%;
    width:50%;
    margin-left:25%;
}
.hwcard img {
    position:relative;
    height:100%;
    width:100%;
    object-fit: contain;
}
.hhcard {
    display: block;
    float:left;
    position:absolute;
    top:25%;
    height:50%;
    width:100%;
    margin:0;
}
.hhcard img {
    position:relative;
    height:100%;
    width:100%;
    object-fit: contain;
}
.left {float:left;}
.bottom{position:absolute; bottom:0;}
.hw{width:50%;}
.right {float:right;}
.center {margin:auto;}
.center2{margin-left:25%;}
.center3{margin-left:15%;}
.vert { height:50%; position:absolute; top:30%; left:25%;}
.pill {
    width:22%;
    height:100%;
}
.spill {
    width:20%;
    height:100%;
    margin:-4px 1px;
}

.spill img{
    width:100%;
    height:100%;
}

.scard {
    display:block;
    height:100%;
    width:100%;
}
.scard span{
    
    text-align:left;
    font-size:1.5em;
    font-family:primus,serif;
}
.scard p{
    
    font-size:1em;
    font-family:minionpro,sans-serif;
}
.scard img{
    position:relative;
    margin-left:10%;
    height:15%;
    width:15%;
}

.textleft {text-align:left;}
.hunner{width:70%;}
.hunner span{padding:0;}
.hunner p{padding:0;}

.cardc img{
    border-radius: 25px;
}
.fcard a{
    border-radius: 5px;
}

.scrollcontain{
    overflow-y:hidden;
    overflow-x:auto;
    
    
}
.bgcb{background-color: #000;}
#backdrop{position:relative; }

#content{background:transparent; }

#toptear{height:0px;}



#navbar3{
       position:absolute;
    top:-100%;
    display: flex;
     opacity:0;
    flex-direction: column;
    align-items: stretch; /* Default */
    justify-content: space-between;
    z-index:2;
    padding: 0;
    transition: opacity 1s ease 0s, top 1s ease 0s;
}
#navbar3 li{
    position:absolute;
    display:inline-block;
    background: url(img/transbg.png); 
    padding:1em;
    
    
}
#navbar3 li a{
   text-align: left;
    transition:color 0.25s ease 0.25s;
    text-decoration: none;
    color:whitesmoke;
    font-size: 1.5em;
    font-family: times new roman,sans-serif;
    font-variant:small-caps;
    letter-spacing: 0.2rem;
    margin: 0.1em;
        
}
#navbar3 li a:hover{ color:red;}
.wid2{width:200%; margin:0 1em;}
#minihead{height:auto; }
#minihead img {}

#artgallery{position: absolute; top:0; display:none;}
#namelogo{left:-0.5em; width:130%; position:relative; }


.bdslice:hover{
   transform:scale(1.25); z-index: 100; 
}
/*.bdslice img{
    object-fit: contain;
    z-index: -1;
}*/
.bdslice:hover img {
    z-index: 100;
}
#hg{display:none;}
#fade{
     height:300px;
}
#fade img{
    position:relative;
    bottom:-8px;
    
    height:100%;
}
.qh{height:25%;}

#info{
    height:auto;
    bottom:0px;
    position:absolute;
    z-index:2;
}

#ft img{
    position:relative;
    bottom:-10px;
}


#title span{
    display:inline;
}

#bracketing2{
    position:absolute;
    z-index:3;
    display:flex;
    bottom:0;
}


/*filter: drop-shadow(0px 0px 10px #000);*/
/* Hide scrollbar for Chrome, Safari and Opera */
/*
.scrollcontain::-webkit-scrollbar {
    display: none;
}
.scrollcontain::-webkit-scrollbar-track {
  background: #000; 
}
*/
.smol{display:flex; justify-content: center;}
.smol img {height:50px; width:50px; }
#stats{width:100%;}
#sl{width:50%; height:100px;}
#sl span {width:100%;  height:40px; font-size:1em; text-align:left;}
#pts{width:50%; height:100px;}
#pts span {width:100%;  height:40px;  font-size:1em; text-align: right; margin-right:0%;}

#introscene{
    position:fixed;
    display:block;
    height:100%;
    width:100%;
    object-fit: cover;
    z-index:1000;
}
#fgx{height:100%; width:100%; object-fit: cover;}