body{
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;

    background: linear-gradient(#401d61 0%, #793eb3 100%);
}


img {
  display: inline-block;
  vertical-align: middle;
  /*max-height: 100%;
  max-width: 100%;*/
}


h1 {
    color: #fff;
    font-size: 250%;

    margin-bottom: 0px;
    margin-top: 0px;
    padding: 5px;

    background-image: url("./img/Orange_Base.png");
    background-size: cover;
}
h2 {
    font-size: 250%;
    text-align: right;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 5px;
}
h3 {
    font-size: 200%;

    margin-bottom: 0px;
    margin-top: 0px;
    padding: 5px;

}

h4 {
    color: #ccc;
    font-size: 200%;

    text-align: center;

    height:60px;
    margin-bottom: 0px;
    margin-top: 0px;

    background-image: url("./img/Green_Base.png");
    background-size: cover;
}

h5 {
    color: #fff;
    font-size: 120%;

    background-image: url("./img/Main_Monitor.png");
    background-size: cover;

    margin: 5px;

    padding: 7px;
}

h6 {
    color: #ddd;
    font-size: 100%;
    height:30px;
}

p {
    font-size: 150%;

    margin:0px;
    padding: 20px;
}
.blacktext{
    color: #111;
}
.cleartext{
    color: #ccc;
}
.pBlck{
    color: #000;
    font-size: 150%;

    margin:0px;
    padding: 20px;
}

.text_Parsing_Jumpspaces{
    padding: 10px;

    word-wrap: nowrap;
    white-space: pre;
}
a{
    color: #aaa;
}
a:link, a:visited {
    text-decoration: none;
    cursor: pointer;
}
a:hover{
    color: #c8c;
    text-decoration: none;
    cursor: pointer;
}

a:link:active, a:visited:active {
    color: #aaa;
    text-decoration: underline;
}


.textSt_Black{
    color: #111;
}

/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ----------------------------              FONTS             ---------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/

@font-face {
  font-family: codedLang;
  src: url(img/Fonts/Basecode.ttf);
}


  /*font-family: myFirstFont;*/

.CodedLang{
    font-family: codedLang;
    color: #39cbdd;
    font-size: 18px;
}


/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ----------------------------     PADDING AND SPACINGS       ---------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/


.style_Centered{
    margin: auto;
}

.style_Galery_Large_Pannels{
    margin-top: 9px;
    margin-left: 3%;
    width:380px;    
    height:185px;

    overflow: auto;
}
.style_Galery_Medium_Pannels{
    margin-top: 9px;
    margin-left: 3%;
    width:250px;    
    height:180px;

    overflow: auto;
}
.style_Dual_Partitioning{
    margin-top: 9px;
    margin-left: 3%;
    width:45%;    
}
.style_Terciary_Partitioning{
    margin-top: 9px;
    margin-left: 2%;
    width:27%;    
}
.style_Extended{
    margin-top: 9px;
    width:70%;    
}
.style_Left_Paddled{
    margin-left: 25%;

}
.style_Right_Paddled{
    margin-right: 25%;

}

.style_top_Paddled{
    margin-top: 20%;

}
.style_Left_Paddled_Half{
    margin-left: 10%;

}
.style_Right_Paddled_Half{
    margin-right: 10%;

}


.Complement_Relative{
    position: relative;
}
    .style_Left_Sticky{
        position: absolute;
        left: 2%;

    }
    .style_Right_Sticky{
        position: absolute;
        right: 2%;

    }


.style_Half_Paddled{
    margin-top:0px; 
    margin-left: 50%;
    width: 45%;

}


.style_Left_Aposit{
    width: 29%;
    display: inline-block;
}
.style_Left_Aposit_Expansion{
    width: 67%;
    display: inline-block;
}
.style_Right_Aposit{
    right: 0px;
    max-width: 300px;
}
/*LIST DISPLAY */
.style_Block_Display{
    margin-left: 4px;
    margin-top: 2px;

    display: block;
}

.style_In_Line_Display{
    display: inline-block;
}
.Top_Spacing{
    margin-top:0px;
    width: 100%;
    height:50px;
    
}

.style_hidden{
    display: none;   
}


.plain_color_White{
    color: #ccc;
}








.Header_pan{
    /*background-image: url("./img/Header_Pan.png");*/
    background-size: cover;


	width: 100%;
	height:80px;
	margin-left: 0px;
	margin-top: 0px;

	float:top;
    position: fixed;


	margin-top: 0px;
	margin-left: 0px;

    box-shadow: 0 0 10px gray;

    background-image: url("./img/backgrounds/DarkPattern.png");
    background-size: cover;

    z-index: 10;
    
}
        .Header_logo {

            margin-top:10px;
            margin-right:5px;

            display:block;
            width:60px;
            height:60px;
            /*line-height:50px;*/
            border: 0px solid #f5f5f5;
            border-radius: 50%;
            box-shadow: 0 0 10px gray;

            float:right;

        }

.BottomPan{
    box-shadow: 0 0 10px white;
}


.theMap{
     width:2048px; 
     height:2048px;
}

/*LATERAL LIBRARY PANNELS*/

.button_effect{
    box-shadow: 0 0 3px gray;
}
.button_effect:hover{
    box-shadow: 0 0 10px white;
}


.Stom{
    margin-left: 10px;
    margin-top: 10px;

    position: relative;  
    display: inline-block;

    width:60px;
    height:60px;
    line-height:50px;
    border-radius: 50%;

    background-image: url("./img/Orange_Base.png");
    background-size: cover;

    cursor: pointer;
}


/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ---------------------------        SIDESCROLL BUTTON         --------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/

.ScrollButton_Left{
    margin-top:40%;
    left: 10px;

    /*width:70px;
    height:100px;

    background-image: url("./img/Arrow_L_Elegant_1.png");
    background-size: cover;
    */
    overflow-y: scroll;
    position: absolute;

    cursor: pointer;
}

.ScrollButton_Right{
    margin-top:40%;
    right: 10px;

    /*width:70px;
    height:100px;

    background-image: url("./img/Arrow_R_Elegant_1.png");
    background-size: cover;
    */
    overflow-y: scroll;
    position: absolute;

    cursor: pointer;
}
           
.ScrollButton_Left_fixed{
    margin-top:30%;
    left: 10px;

    /*width:70px;
    height:100px;

    background-image: url("./img/Arrow_L_Elegant_1.png");
    background-size: cover;
    */
    overflow-y: scroll;
    position: fixed;

    cursor: pointer;
}

.ScrollButton_Right_fixed{
    margin-top:30%;
    right: 10px;

    /*width:70px;
    height:100px;

    background-image: url("./img/Arrow_R_Elegant_1.png");
    background-size: cover;
    */
    overflow-y: scroll;
    position: fixed;

    cursor: pointer;
}

/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ---------------------------        TOP MENU BUTTONS          --------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/


.Stom_Access_Button{
    position: fixed;
    top:0px;
    left: 45%;

    width:150px;
    height:150px;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;

}
    .Stom_Access_Button img {
        position: absolute; 
        max-height: 100%;
        max-width: 100%;
    }



.UnfoldingMenuButton{
    position: fixed;
    top:5px;
    left: 3%;
    width:70px;
    height:70px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;


    background-color: transparent;
    border: 0px solid #000;

    cursor: pointer;

}
    .UnfoldingMenuButton img {
        position: absolute; 
        max-height: 100%;
        max-width: 100%;
    }


.vertical-menu {
    position: fixed;
    top:70px;
    width: 200px; /* Set a width if you like */
    display: none;
}

    .vertical-menu .UnfoldableMenu_Button {
      display: block; /* Make the links appear below each other */
      padding: 30px; /* Add some padding */
      cursor: pointer;
    }

    .vertical-menu img{
        position: absolute;
        width:200px;
        height:auto;
    }

    .vertical-menu p{
        position: absolute;
        text-align:center;
        margin-left:46px;
        padding: 7px;
    }



.Top_Menu_Button{
    position: fixed;
    top:80px;

    width:16%;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
}
    .Top_Unfold_Menu{
        left: 7%;
    }

    .ToArchive{
        left: 7%;
    }
    .ToAcademy{
        left: 25%;
    }
    .ToRoadmap{
        left: 62%;
    }
    .ToResources{
        left: 80%;
    }


    .Top_Menu_Button img{
        position: absolute;
        width:100%;
        height:auto;
    }

    .Top_Menu_Button p{
        top:-40px;
        position: absolute;
    }




/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ---------------------------     NEW CUSTOMIZED PANNELS       --------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/

.Shadowed_Border{
    /*line-height:50px;*/
    border: 0px solid #f5f5f5;
    border-radius: 50%;
    box-shadow: 0 0 10px gray;
}


.pannel_fade{
    opacity: 0.4;
}
.pannel_fade:hover{
    opacity: 1;
}   

.HiddenItem{
    opacity: 0;
}
.HiddenItem:hover{
    opacity: 1;
} 

.Text_Pannel_ToTheRight{

        margin-top:50px; 
        margin-right: 50px;
        margin-left: 56%;
        width: 35%;
        max-width: 500px;
        z-index: 7;

            
            opacity: 0.8;
            text-opacity: 1;
            text-align: left;
            color: #fff;
            
            padding: 20px;

            background-image: url("./img/Black_Base.png");
            background-size: cover;
}
.Text_Pannel_ToTheLeft{
        margin-top:50px; 
        margin-right: 50%;
        margin-left: 150px;
        width: 35%;
        max-width: 500px;
        z-index: 7;

            opacity: 0.8;
            text-opacity: 1;
            text-align: left;
            color: #fff;
            
            padding: 20px;

            background-image: url("./img/Black_Base.png");
            background-size: cover;
}






.AP_Text_Pannel_ToTheRight{
        margin-top:20%; 
        margin-bottom:20%;

        right: 100px;
        position:absolute;

        width: 35%;
        max-width: 500px;
        z-index: 7;

            
            opacity: 0.8;
            text-opacity: 1;
            text-align: left;
            color: #fff;
            
            padding: 20px;

            background-image: url("./img/Black_Base.png");
            background-size: cover;
}
.AP_Text_Pannel_ToTheLeft{
        margin-top:20%; 
        margin-bottom:20%;
        
        position:absolute;
        left: 100px;

        width: 35%;
        max-width: 500px;
        z-index: 7;

            opacity: 0.8;
            text-opacity: 1;
            text-align: left;
            color: #fff;
            
            padding: 20px;

            background-image: url("./img/Black_Base.png");
            background-size: cover;
}

/*
textarea{
    width: 90%;
     box-sizing: border-box;
}
input[type=text] {
            box-sizing: border-box;
}
*/

/*LATERAL LIBRARY PANNELS*/
/*
.button_effect{
    box-shadow: 0 0 3px gray;
}
.button_effect:hover{
    box-shadow: 0 0 10px white;
}
*/


/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ----------------------------          SECRET RUNAS          ---------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/


.FutharkTitles{
    position:absolute;
    left:30%; 
    top:10%;

    width: auto;
    height: 15%;


}

.Runa_Explore{
    margin-top:40%;
    left: 300px;

    width:150px;
    height: auto;

    position:absolute;
    cursor: pointer;
}

.Runa_Cathedral{
    margin-top:800px;
    left: 75%;

    width:150px;
    height: auto;

    position:absolute;
    cursor: pointer;
}



.Dir_Area {
    top:85%; 
    left: 40%;  
    position:fixed;
    
    background-image: url("./img/Label_Demonic.png");
    background-size: cover;
    background-repeat: no-repeat;


    width: 310px;
    height:100px;
}
    .Dir_Area input{
        position:absolute;
        top:44px; 
        left: 73px; 
        background-color: #7a7267;
        border-color: #615037;
    }


.AnsuzKey{
    top:87%; 
    left: 42%;  
    position:absolute;
    width: auto;
    height:80px;
}
.AnsuzSeal{
    top:48%; 
    left: 36%;  
    position:absolute;
    width: auto;
    height:300px;
}

.parallax-ArcaneLexicon {
  position: relative;
  right:0px;
  left:0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .parallax-ArcaneLexicon img {
        position: absolute;
        
    }
    .parallax-ArcaneLexicon img:nth-child(1) {
      z-index: 2;
    }

    .parallax-ArcaneLexicon input {
        position: absolute;
        
    }
    .parallax-ArcaneLexicon input:nth-child(1) {
      z-index: 2;
    }
    .parallax-ArcaneLexicon input:nth-child(2) {
      z-index: 3;
    }
    .parallax-ArcaneLexicon input:nth-child(3) {
      z-index: 4;
    }
    .parallax-ArcaneLexicon input:nth-child(4) {
      z-index: 5;
    }
    .parallax-ArcaneLexicon input:nth-child(5) {
      z-index: 4;
    }
    .parallax-ArcaneLexicon input:nth-child(6) {
      z-index: 3;
    }
    .parallax-ArcaneLexicon input:nth-child(7) {
      z-index: 7;
    }
    .parallax-ArcaneLexicon input:nth-child(8) {
      z-index: 6;
    }
    .parallax-ArcaneLexicon input:nth-child(9) {
      z-index: 7;
    }
    .parallax-ArcaneLexicon input:nth-child(10) {
      z-index: 5;
    }




/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ----------------------------PANNELS AND UI ELEMENT IMAGES---------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/


/*BACKGROUND TEXTURE BASES*/

.Pannel_Elegant_Demonic{
    background-image: url("./img/Pannel_Elegant_Demonic.png");
    background-repeat: no-repeat;
}
.Pannel_Demonic{
    background-image: url("./img/Pannel_Demonic.png");
    background-repeat: no-repeat;
}
.Pannel_Dialog_1_Galactic{
    background-image: url("./img/Pannel_Dialog_1_Galactic.png");
    background-repeat: no-repeat;
}
.Pannel_Dialog_2_Galactic{
    background-image: url("./img/Pannel_Dialog_2_Galactic.png");
    background-repeat: no-repeat;
}
.Pannel_Dialog_3_Galactic{
    background-image: url("./img/Pannel_Dialog_3_Galactic.png");
    background-repeat: no-repeat;
}
.Pannel_Elegant_big{
    background-image: url("./img/Pannel_Elegant_big.png");
    background-repeat: no-repeat;
}
.Pannel_Elegant_Listing{
    background-image: url("./img/Pannel_Elegant_Listing.png");
    background-repeat: no-repeat;
}
.Pannel_Elegant_mid{
    background-image: url("./img/Pannel_Elegant_mid.png");
    background-repeat: no-repeat;
}
.Pannel_Elegant_mid_2{
    background-image: url("./img/Pannel_Elegant_mid_2.png");
    background-repeat: no-repeat;
}
.Pannel_Elegant_Small{
    background-image: url("./img/Pannel_Elegant_Small.png");
    background-repeat: no-repeat;
}
.Pannel_ElegantBlue_2{
    background-image: url("./img/Pannel_ElegantBlue_2.png");
    background-repeat: no-repeat;
}
.Pannel_ElegantBlue_3{
    background-image: url("./img/Pannel_ElegantBlue_3.png");
    background-repeat: no-repeat;
}
.Pannel_ElegantBlue_4{
    background-image: url("./img/Pannel_ElegantBlue_4.png");
    background-repeat: no-repeat;
}
.Pannel_ElegantBlue_5{
    background-image: url("./img/Pannel_ElegantBlue_5.png");
    background-repeat: no-repeat;
}
.Pannel_ElegantBlue_c{
    background-image: url("./img/Pannel_ElegantBlue_c.png");
    background-repeat: no-repeat;
}
.Pannel_Galactic{
    background-image: url("./img/Pannel_Galactic.png");
    background-repeat: no-repeat;
}

/*ARROWS*/

.Arrow_Down_Galactic{
    background-image: url("./img/Arrow_Down_Galactic.png");
    background-repeat: no-repeat;
}
.Arrow_Left_Galactic{
    background-image: url("./img/Arrow_Left_Galactic.png");
    background-repeat: no-repeat;
}
.Arrow_Right_Galactic{
    background-image: url("./img/Arrow_Right_Galactic.png");
    background-repeat: no-repeat;
}
.Arrow_Up_Galactic{
    background-image: url("./img/Arrow_Up_Galactic.png");
    background-repeat: no-repeat;
}


.Arrow_Right_Elegant{
    background-image: url("./img/Arrow_R_Elegant_1.png");
    background-repeat: no-repeat;
}
.Arrow_Left_Elegant{
    background-image: url("./img/Arrow_L_Elegant_1.png");
    background-repeat: no-repeat;
}


.Arrow_Left{
    background-image: url("./img/Arrow_Left.png");
    background-repeat: no-repeat;
}
.Arrow_Right{
    background-image: url("./img/Arrow_Right.png");
    background-repeat: no-repeat;
}


/*LABELS*/

.Label_2_Galactic{
    background-image: url("./img/Label_2_Galactic.png");
    background-repeat: no-repeat;
}
.Label_3_Galactic{
    background-image: url("./img/Label_3_Galactic.png");
    background-repeat: no-repeat;
}
.Label_Demonic{
    background-image: url("./img/Label_Demonic.png");
    background-repeat: no-repeat;
}
.Label_Elegant{
    background-image: url("./img/Label_Elegant.png");
    background-repeat: no-repeat;
}
.Label_Elegant_Big{
    background-image: url("./img/Label_Elegant_Big.png");
    background-repeat: no-repeat;
}
.Label_Elegant_Galactic{
    background-image: url("./img/Label_Elegant_Galactic.png");
    background-repeat: no-repeat;
}
.Label_Elegant_Small{
    background-image: url("./img/Label_Elegant_Small.png");
    background-repeat: no-repeat;
}
.Label_ElegantBlue_1{
    background-image: url("./img/Label_ElegantBlue_1.png");
    background-repeat: no-repeat;
}
.Label_ElegantBlue_c{
    background-image: url("./img/Label_ElegantBlue_c.png");
    background-repeat: no-repeat;
}
.Label_Galactic{
    background-image: url("./img/Label_Galactic.png");
    background-repeat: no-repeat;
}
.Label_Mini_Galactic{
    background-image: url("./img/Label_Mini_Galactic.png");
    background-repeat: no-repeat;
}

/*SEPARATORS*/


.Separator_Big{
    background-image: url("./img/Separator_Big.png");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*//*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: center; 

    width: 100%;
    height: 50px;
}
.Separator_Medium{
    background-image: url("./img/Separator_Medium.png");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*//*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: center; 

    width: 100%;
    height: 50px;
}
.Separator_Small{
    background-image: url("./img/Separator_Small.png");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*//*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: center; 

    width: 100%;
    height: 50px;
}





/*BACKGROUND PLAIN TEXTURE BASES*/



.Black_Base{
	background-image: url("./img/Black_Base.png");
	background-size: cover;
}
.Orange_Base{
    background-image: url("./img/Orange_Base.png");
    background-size: cover;
}
.Green_Base{
    background-image: url("./img/Green_Base.png");
    background-size: cover;
}
.Violet_Base{
    background-image: url("./img/Violet_Base.png");
    background-size: cover;
}
.Blue_Base{
    background-image: url("./img/Blue_Base.png");
    background-size: cover;
}
.White_Base{
    background-image: url("./img/White_Base.png");
    background-size: cover;
}


.Green_Point{
    background-image: url("./img/Green_Point.png");
    background-size: cover;

    width: 13px;
    height: 13px;

    margin:0px;
}
.Grey_Point{
    background-image: url("./img/Grey_Point.png");
    background-size: cover;

    width: 13px;
    height: 13px;

    margin:0px;
}

.B_spacer{
    background-image: url("./img/Separator_1.png");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*//*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: center; 

    width: 100%;
    height: 50px;
}
.W_spacer{
    background-image: url("./img/Separator_1_W.png");
    background-repeat: no-repeat;
    /*background-attachment: fixed;*//*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: center; 

    width: 100%;
    height: 50px;
}








/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ----------------------------BACKGROUND IMAGE PARALLAX SYSTEM---------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/

.Min_Height_for_PanoramaP{
    min-height: 1080px;
    background-size: cover;

}
.DivinitySliders{
    height: auto;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    /*background-position: center;
    background-repeat: no-repeat;*/
    background-size: cover;
}
.General_Parallax{
    /* Set a specific height */
    height: auto;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
        ._WhitePattern {
            /* The image used */
            background-image: url("./img/WhitePattern.png");
        }
        ._BlackPattern {
            /* The image used */
            background-image: url("./img/DarkPattern.png");
        }



        .TheTower {
            /* The image used */
            background-image: url("./img/backgrounds/TheTower.png");
        }
        .Spacecutdepiction{
            /* The image used */
            background-image: url("./img/backgrounds/Space cut depiction.png");
        }
        .BackgroundSky {
            /* The image used */
            background-image: url("./img/backgrounds/BackgroundSky.png");
        }
        .Theriseofmists_Back {
            /* The image used */
            background-image: url("./img/backgrounds/The rise of mists_Back.png");
        }
        .Theriseofmists_Front {
            /* The image used */
            background-image: url("./img/backgrounds/The rise of mists_Front.png");
        }
        .Greko {
            /* The image used */
            background-image: url("./img/backgrounds/Greko.png");
        }
        .Cathedral {
            /* The image used */
            background-image: url("./img/backgrounds/Cathedral.png");
        }
        .Caves {
            /* The image used */
            background-image: url("./img/backgrounds/Caves.png");
        }
        .Stormforge {
            /* The image used */
            background-image: url("./img/backgrounds/Stormforge.png");
        }
        .OceanBottom {
            /* The image used */
            background-image: url("./img/backgrounds/OceanBottom.png");
        }
        .Onyric {
            /* The image used */
            background-image: url("./img/backgrounds/Onyric.png");
        }
        .BalkorianMonument {
            /* The image used */
            background-image: url("./img/backgrounds/BalkorianMonument.png");
        }
        .BalkorianWarlord {
            /* The image used */
            background-image: url("./img/backgrounds/BalkorianWarlord.png");
        }
        

        .Runa {
            /* The image used */
            background-image: url("./img/backgrounds/Runa.png");
        }
        .Runa2 {
            /* The image used */
            background-image: url("./img/backgrounds/Runa2.png");
        }
        .Onyria {
            /* The image used */
            background-image: url("./img/backgrounds/Onyria.png");
        }
        .WhereTo {
            /* The image used */
            background-image: url("./img/backgrounds/WhereTo.png");
        }
        .AltLantea {
            /* The image used */
            background-image: url("./img/backgrounds/AltLantea.png");
        }
        .MagmChamber {
            /* The image used */
            background-image: url("./img/backgrounds/MagmChamber.png");
        } 
        .AvatarsOfJoy {
            /* The image used */
            background-image: url("./img/backgrounds/AvatarsOfJoy.png");
        }
        .Triumvirate {
            /* The image used */
            background-image: url("./img/backgrounds/Triumvirate.png");
        }

        .AnsuzNaudiz {
            /* The image used */
            background-image: url("./img/backgrounds/AnsuzNaudiz.png");
        }
        .AnsuzGebo {
            /* The image used */
            background-image: url("./img/backgrounds/AnsuzGebo.png");
        }
        .Genumatyr {
            /* The image used */
            background-image: url("./img/backgrounds/Genumatyr.png");
        }
        .OthilaTurisaz {
            /* The image used */
            background-image: url("./img/backgrounds/OthilaTurisaz.png");
        }
        .Fyrbithain{
            /* The image used */
            background-image: url("./img/backgrounds/Fyrbithain.png");
        }
        .KanGalar{
            /* The image used */
            background-image: url("./img/backgrounds/KanGalar.png");
        }
        .Spell {
            /* The image used */
            background-image: url("./img/backgrounds/Spell.png");
        }   
        .RedSun {
            /* The image used */
            background-image: url("./img/backgrounds/RedSun.png");
        }
        .GodShard{
            /* The image used */
            background-image: url("./img/backgrounds/GodShard.png");
        }
        .Scriptures{
            /* The image used */
            background-image: url("./img/backgrounds/Scriptures.png");
        }
        .Alchemya{
            /* The image used */
            background-image: url("./img/backgrounds/Alchemya.png");
        }


        .TheGrim{
            /* The image used */
            background-image: url("./img/backgrounds/TheGrim.png");
        }
        .TheBeast{
            /* The image used */
            background-image: url("./img/backgrounds/TheBeast.png");
        }
        .TheRuler{
            /* The image used */
            background-image: url("./img/backgrounds/TheRuler.png");
        }
        .ElvenPatch{
            /* The image used */
            background-image: url("./img/backgrounds/ElvenPatch.png");
        }
        .HeavensDoor_1{
            /* The image used */
            background-image: url("./img/backgrounds/HeavensDoor_1.png");
        }
        .HeavensDoor_2{
            /* The image used */
            background-image: url("./img/backgrounds/HeavensDoor_2.png");
        }

        .Tome_1{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_1.png");
        }
        .Tome_2{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_2.png");
        }
        .Tome_3{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_3.png");
        }
        .Tome_4{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_4.png");
        }
        .Tome_5{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_5.png");
        }
        .Tome_6{
            /* The image used */
            background-image: url("./img/backgrounds/Tome_6.png");
        }


        .ShiningStar{
            /* The image used */
            background-image: url("./img/backgrounds/ShiningStar.png");
        }

        .WyrdrockMap_v1 {
            /* The image used */
            background-image: url("./img/backgrounds/WyrdrockMap_v1.png");
        }
        .Wyrdrockmap742{
            /* The image used */
            background-image: url("./img/backgrounds/WyrdrockMap742.png");
        }


        .Deidra{
             background-image: url("./img/backgrounds/Deidra.png");
        }
        .Aldrun{
             background-image: url("./img/backgrounds/Aldrun.png");
        }
        .AldrunLogo{
             background-image: url("./img/backgrounds/AldrunLogo.png");
        }

        .HiddenLibrary {
            /* The image used */
            background-image: url("./img/backgrounds/TheHiddenLibrary_1.png");
        }
        .HiddeLibV2 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddeLibV2.png");
        }
        .HiddenLibHall1 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenLibHall1.png");
        }
        .HiddenLibHall2 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenLibHall2.png");
        }
        .HiddenLibHall3 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenLibHall3.png");
        }
        .HiddenLibHall4 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenHallfour.png");
        }
        .HiddenLibHall5 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenHallfive.png");
        }
        .HiddenLibHall6 {
            /* The image used */
            background-image: url("./img/backgrounds/HiddenHallsix.png");
        }

        .CodexEntry1 {
            /* The image used */
            background-image: url("./img/backgrounds/D_xuvi.png");
        }
        .CodexEntry2 {
            /* The image used */
            background-image: url("./img/backgrounds/DA_xuvi.png");
        }



        .MagicSeal{
            /* The image used */
            background-image: url("./img/backgrounds/DDOI.png");
        }
        .Codex{
            /* The image used */
            background-image: url("./img/backgrounds/Codex.png");
        }

        .BlackScreen {
            /*background-image: url("./img/Dark_Bases.png");*/
            background-color: #000;
        }

        .Tome_UnderConstruction{
             background-image: url("./img/backgrounds/Tome_UnderConstruction.png");
        }


.Parallax_Image_Setler{
    background-image: url("./img/Separator_1_W.png");
    background-repeat: no-repeat;

    background-attachment: fixed;/*THIS IS FUN WITH PARALLAX EFFECTS!!!!*/
    background-position: 50px 150px; 
    width: 100%;
    height: 50px;
}













/*

    ADVANCED PARALLAX


*/


/* Parallax base styles
  --------------------------------------------- */



/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/
/* ---------------------------            MOUSELAX              --------------------------*/
/* ----------------------------++++++++++++++++++++++++++++++++---------------------------*/

.Encased_Div{
    overflow: hidden;
}
.VerticalFit{
    height: 130%;
}
.HorizontalFit{
    width: 130%;
}

.parallax-wrap {
  position: relative;
  right:0px;
  left:0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .parallax-wrap img {
        position: absolute;
        
    }
    .parallax-wrap p {
        z-index: 7;
    }
    .parallax-wrap img:nth-child(1) {
      z-index: 4;
    }
    .parallax-wrap img:nth-child(2) {
      z-index: 6;
    }



    .parallax-wrap h2 {
      position: relative;
      font-size: 100px;
      color: white;
      z-index: 2;
      text-align: center;
    }
    


.parallax-wrap2 {
  position: relative;
  right:0px;
  left:0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .parallax-wrap2 img {
        position: absolute;
        
    }
    .parallax-wrap2 img:nth-child(1) {
      z-index: 4;
    }


.parallax-wrap4 {
  position: relative;
  right:0px;
  left:0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .parallax-wrap4 img {
        position: absolute;
        
    }
    .parallax-wrap4 p {
        z-index: 5;
    }
    .parallax-wrap4 img:nth-child(1) {
      z-index: 2;
    }
    .parallax-wrap4 img:nth-child(2) {
      z-index: 3;
    }
    .parallax-wrap4 img:nth-child(3) {
      z-index: 4;
    }
    .parallax-wrap4 img:nth-child(4) {
      z-index: 5;
    }





.parallax-wrap8 {
  position: relative;
  right:0px;
  left:0px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .parallax-wrap8 img {
        position: absolute;
        
    }
    .parallax-wrap8 p {
        z-index: 5;
    }
    .parallax-wrap8 img:nth-child(1) {
      z-index: 2;
    }
    .parallax-wrap8 img:nth-child(2) {
      z-index: 3;
    }
    .parallax-wrap8 img:nth-child(3) {
      z-index: 4;
    }
    .parallax-wrap8 img:nth-child(4) {
      z-index: 5;
    }
    .parallax-wrap8 img:nth-child(5) {
      z-index: 4;
    }
    .parallax-wrap8 img:nth-child(6) {
      z-index: 3;
    }
    .parallax-wrap8 img:nth-child(7) {
      z-index: 7;
    }
    .parallax-wrap8 img:nth-child(8) {
      z-index: 6;
    }
    .parallax-wrap8 img:nth-child(9) {
      z-index: 5;
    }