* {

    box-sizing: border-box;

}

html,
body {
    background-color: rgba(228, 232, 236);
    margin: 0;
    padding: 0;
    font-family:  sans-serif;
    width: 100%;
    overflow-x: hidden;

}

body {
    background-color: rgb(228, 232, 236);


}

a {
    text-decoration: none;

}

a:link {
    color: rgb(0, 140, 115);
}

a:not([href]):hover {
    color: rgb(0, 0, 0);
}

a:visited {
    color: rgb(0, 140, 115);
}

a:hover {
    color: rgb(0, 93, 76);
    text-decoration: underline;
}
.whiteLink:hover{
    text-decoration: none;
}
.whiteLink:visited {
    color: white
}

.whiteLink:link {
    color: white
}

::-webkit-scrollbar {

    width: 6px;

}

::-webkit-scrollbar-thumb {

    border-radius: 0.1em;
    background: rgb(182, 182, 182);
}

body::-webkit-scrollbar-track {

    background: rgb(255, 255, 255);


}

::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0);


}
.KeyContainer{
    position: relative;
   
    
}
.pageB{
    background: rgba(161, 47, 47, 0.8);
    position: absolute;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    height: 1.5em;
    top: 0em;
    right: 0em;
    color: black;
   
}
.pageBottom{
    top:auto;
    bottom: 0em;
    
   
}
.pageBE{
    pointer-events: all;
    cursor: pointer;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: rgb(228, 232, 236);
    border: 1px solid rgb(162, 162, 162);
    text-align: center;
   
}
.pageBESelected{

    background-color:  rgb(142, 213, 182);
    border-color: rgb(84, 87, 85);

   
}
.pageArrow{
    background-color: white;
}
#load {
    width: 5em;
    height: 5em;
    animation: rotation2 2.5s infinite linear;

    margin-top: 35vh;
}

#loader {
    transition: opacity 0.2s ease;
    opacity: 1;
    z-index: 4;
    position: fixed;
    width: 100%;
    height: 200%;
    margin-top: -4em;
    background-color: rgba(207, 207, 207, 0.5);
    display: flex;
    justify-content: center;
}


@keyframes rotation2 {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.contente {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 0.8em;
    background-color: rgb(255, 255, 255);
    padding: 1em;
    padding-top: 0.1em;
    padding-bottom: 1.5em;
    border: 1px solid;
    border-color: rgb(162, 162, 162);
    line-height: 23px;
    padding-top: 0.5em;
}

.contenteNav{
    width: 100%;
}

.keyCube {
    width: 15.6%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    text-align: center;
    vertical-align: bottom;
    position: relative;
    border-color: rgb(162, 162, 162);
    border-width: 1px;
    border-style: solid;
    margin-bottom: 1em;
    transition: transform 0.2s ease;

}
.keyCube:hover {
    text-decoration: none;
    transform: scale(1.03); 
}

.keyCube2 {
    width: 19%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    text-align: center;
    vertical-align: bottom;
    position: relative;
    border-color: rgb(162, 162, 162);
    border-width: 1px;
    border-style: solid;
    margin-bottom: 1em;
    transition: transform 0.2s ease;
}

.keyCube2:hover {
    text-decoration: none;
    transform: scale(1.03); 
}



.overBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
    opacity: 0;
    background-color: rgba(242, 242, 242, 0.12);
    pointer-events: none;

}
.keyCube:hover .overBox {
    opacity: 1;
}
.ImageHolder:hover .overBox {
    opacity: 1;
    
}
.keyCube2:hover .overBox {
    opacity: 1;
}

#sercCont {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: -2em;
    z-index: 20;
}
#searchRes {
    position: absolute;
    height: auto;
    background-color: rgba(255, 255, 255, 0.992);
    margin-top: 0.25em;
    right: calc(15% + 2.3em);
    width: 15.7em;
    
    top: 3.2em;
    padding-bottom: 0em;
    max-height: 60vh;
    overflow: auto;
    outline: 1px solid;
    border-radius: 0.1em;
    outline-color: rgb(104, 104, 104);
     z-index: 20;
}

.searchItem {
    color: black;
    display: block;
    padding: 0.7em;
    padding-left: 1em;
    border-bottom: 1px solid rgb(174, 174, 174);
    
    position: relative;
    z-index: 20;
}

.searchItem2 {
    color: black;
    background-color: rgb(222, 222, 222);
    display: block;
    padding: 0.7em;
    padding-left: 1em;
    border-bottom: 1px solid rgb(174, 174, 174);
    
    z-index: 20;
    position: relative;
}

#MenuTi {
    color: rgb(255, 255, 255);
    margin-left: 1em;
    font-size: 2.5em;
    margin-top: 1em;
    margin-top: 1em;
    margin-bottom: 5vh;
}

.searchItem:link {
    color: black;
}

.searchItem:visited {
    color: black;
}

.searchItem2:link {
    color: black;
}

.searchItem2:visited {
    color: black;
}

.searchItem:hover {

    background-color: rgb(237, 237, 237);
}

#searchRes:focus {
    outline: 1px solid rgb(139, 139, 139);

}

#search:focus {
    outline: 1px solid rgb(139, 139, 139);

}

.ImageHolder {
    background-color: rgb(255, 255, 255);
    font-size: 0.9em;
    width: 24%;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(162, 162, 162);
    padding-top: 0em;
    padding-left: 0em;
    padding-right: 0em;
    border-radius: 0.2em;
    color: rgb(12, 12, 12);
    margin: 0.5%;
    margin-bottom: 1.5%;
    position: relative;
   display: table;
   
    transition: background-color 0.2s ease, transform 0.2s ease ;
    
    
}
.ImageHolder:hover {
    
    background-color: rgb(246, 246, 246);
   
    transform: scale(1.05); 
    
}
.ImageMain {
    width: 100%;
    display: table-row;
}

.Credit1 {
    
    display: table-row;
    height: 1em;
    color: rgb(105, 105, 105);
    font-size: 0.9em;
    
}

.creditContent{
    padding: 0.4em;
}
#search {
    position: relative;
    width: 100%;
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, 1);
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position-y: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    height: 1.9em;
    border-radius: 0.1em;
     border: 2px solid rgba(255, 0, 0, 0);
    border-radius: 4px;
}

#search:focus {

    outline-color: rgb(44, 44, 44);
    outline-width: 2px;
    outline-style: solid;
    
}
#searchButton {

    padding-top: 1em;
    padding-bottom: 1em;
    position: relative;
    float: right;
    background-image:
        url(/img/search.png);
    font-size: 1.05em;
    background-color: rgb(142, 213, 182);
    background-repeat: no-repeat;
    background-size: 1.3em;
    background-position: center;
    height: 1.9em;
    width: 1.9em;
    margin-left: 0.2em;
    border-radius: 0.1em;
    border-width: 0em;

}

.searchHolder {
    width: 20em;
    padding-top: 1.1em;
    float: right;
    display: flex;
    position: relative;
    margin-top: 0em;
    z-index: 4;
    margin-right: 15%;
}

.searchBarHolder {
    width: 84%;
    position: relative;
    margin-left: 2em;
}









.inp {
    display: block;
    width: 5em;

    margin-top: 0.5em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    text-align: center;
    font-size: 1em;
    background-color: rgb(246, 246, 246);

}

#Menu {

    position: fixed;
    height: 105%;
    width: 0em;
    z-index: 4;
    overflow: hidden;
    transition: left 0.2s ease;
    min-height: 38em;
    background: rgb(33, 34, 37);
    left: -17em;
    width: 250px;

}

#Overlay {

    width: 1000em;
    height: 100em;
    background-color: rgba(0, 0, 0, 0.267);
    z-index: 3;
    position: fixed;
    display: none;
}

.MenuItem {

    vertical-align: bottom;
    display: flex;
    z-index: 5;
    margin-left: 2.5em;
    margin-bottom: 3.8vh;
    margin-top: -0.5vh;
    font-size: 1.1em;
    white-space: nowrap;
    font-weight: 600;

}
.MenuItem:hover {

   text-decoration: none;

}

#Contact {

    position: absolute;
    bottom: 4em;
}



.listThing {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding-bottom: 2em;
  

}
.T3col{
    column-count: 3;
    column-gap: 1em;
}
.T4col{
    column-count: 4;
    column-gap: 1.5em;
}

.listDiv {


    margin-bottom: -0.5em;
    max-width: 15em;

}

.listDiv1 {


    margin-bottom: -2em;
    max-width: 15em;

}

#MenuIcon {


    color: rgb(255, 255, 255);
    z-index: 4;
    cursor: pointer;
    transform: scale(1);
    font-size: 1em;
    height: 0em;
    font-size: 1em;
    position: relative;
    margin-left: 15%;
    margin-top: 0em;


}

.MenuIconImg {


    position: absolute;
    top: 0.6em;
    margin-left: -0.4em;

}


.Title {

    background: rgb(44, 46, 49);
    color: rgb(255, 255, 255);
    position: relative;
    font-weight: normal;
    font-size: 0.8em;
    z-index: 2;

}







.img-res2 {

    width: 100%;
    border-radius: 0.3em;
    margin-bottom: 0em;
    margin-top: 0px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(117, 117, 117);

}

.taxBox {
    background: rgb(44, 46, 49);
    color: rgb(255, 255, 255);
    width: 100%;
    vertical-align: middle;
    font-size: 0.9em;
    padding-top: 1em;
    padding-bottom: 1.5em;
    margin-top: 1.5em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1em;
    bottom: 0em;


}

.taxBox2 {
    background: rgb(44, 46, 49);
    color: rgb(255, 255, 255);
    width: 100%;
    padding-top: 1em;
    padding-bottom: 1.5em;
    margin-top: 1.5em;
    display: flex;
    justify-content: space-evenly;

    position: absolute;
    flex-wrap: wrap;
    bottom: 0em;


}

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
    padding-bottom: 5em;
}

.scrollbox {

    overflow: auto;


}

.scrollbox-inner {

    color: black;

}
.desc{
    width: 100%;
}
.refHolder{
    width: 100%;
}
.line-1 {

    border-top: 1px solid rgb(159, 159, 159);
    margin-bottom: 1em;
    overflow: hidden;

}
.line-3 {

    border-top: 1px solid rgb(211, 211, 211);
    margin-bottom: 1em;
    overflow: hidden;
    width: 200%;
    margin-left: -50%;

}
.line-2 {
    height: 1px;
    border-top: 1px solid rgb(255, 255, 255);
    margin-bottom: 1em;
    overflow: hidden;
    margin-bottom: 1em;
    overflow: hidden;
    margin-left: 1em; 
    margin-right: 1em;
    margin-bottom: 2em;
}
.Minor-title {
    margin-bottom: 0.2em;
    font-size: 1.2em;
    z-index: 5;
}
.Minor-title2 {
    margin-bottom: 0.2em;
    font-size: 1em;
    z-index: 5;
}
.Text {

    margin: 1em;

}

.Container {

    max-width: 1200px;

}

.nav ul {
    margin: 0;
}

.nav li {

    display: inline-block;
}

.nav a {

    padding: 1em;
    color: rgb(57, 57, 57);
    text-decoration: none;
}

.Footer {

    margin-top: 2em;
    text-align: right;
    padding-Top: 30px;
    background-color: rgb(237, 237, 237);
    font-size: 1.2em;
    font-weight: lighter;
    border-top: 0px solid black;

}

.keyBText {
    font-size: 0.9em;
    background-color: white;
    transition: background-color 0.2s ease;
    padding: 3.5%;
    text-align: left;
    color: black;
    height: 3em;
    padding-bottom: 3.2em;
    margin-top: 0em;
}
.keyBText2 {
    font-size: 1.1em;
    font-weight:700;
    background-color: white;
    transition: background-color 0.2s ease;
    padding: 3.5%;
    text-align: left;
    color: black;
    height: 3em;
    padding-bottom: 3.2em;
    margin-top: 0em;
}
.keyCube:hover .keyBText {
    background-color: rgb(246, 246, 246);
}

.keyCube2:hover .keyBText2 {
    background-color: rgb(246, 246, 246);
}

.keyBTextI {
    font-size: 0.9em;

}

.KeyImg {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    margin-bottom: -0.3em;

}

.Title {

    color: rgb(241, 241, 241);
    padding-bottom: 0px;
    margin-top: -0.4em;
    font-size: 1em;
    font-weight: normal;
    height: 4em;
   

}
#TitleText{
    flex-basis: 100%; 
    margin-bottom: 0.4em;
    font-size: 1.7em;
    max-width: 80%;
    margin-right: 20%;
    line-height: 35px;
   
    
}
#TitleTextK{
    flex-basis: 100%; margin-bottom: 0.4em;
    font-size: 1.8em;
    max-width: 95%;
    margin-right: 0%;
    line-height: 35px;
    
}
#SiteTitle {
    margin-left: calc(15% + 3em);
    float: left;

}


.Minor-title {
    margin-bottom: 0.2em;
    font-size: 1.4em;
    
}
.Minor-title2 {
    margin-bottom: 0.2em;
    font-size: 1.3em;
   
}
#portA {
    max-width: 64%;
    float: right;
    margin-left: 1em;
    margin-bottom: 0.2em;
    position: relative;
  
    overflow:hidden;
    

}
#portA:hover .ImgText {
    opacity: 1;
}
.ImgText {
    position: absolute;
    bottom: 0.4em;
    background: rgba(0, 0, 0, 0.15);
    padding:0.3em;
    padding-left: 0.7em;
    width:100%;
    color:white;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.portrait {
    width: 100%;
      border: 1px solid;
    border-color: rgb(162, 162, 162);
    border-radius: 0.1em;   
    max-height: 40em;
   

}

.btnT {
    padding: 0.1em 0.3em;
    
    margin-left: 1px;
    outline: 1px solid;
    border-radius: 0.1em;
    outline-color: rgba(156, 155, 155, 0);
    font-size: 13px;
    margin-top: -0em;
    color: black;
    cursor: pointer;
    text-decoration: underline;
    

}
.taxBtnHolder{
    margin-left: -0.5em;
    margin-top: 0.2em;
}
.btnTa {
    padding: 0.2em 0.5em;
    margin-left: 1px;
    border: 1px solid rgb(156, 155, 155);
    border-radius: 0.1em;
    
    font-size: 15px;
    margin-top: 0em;
    margin-bottom: calc(-1em - 2px);
    color: black;
    margin-left: -1px;
    cursor: pointer;
    background-color: rgb(241, 241, 241);

}
.btnTas {
    border-bottom: 2px solid rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);

}

.btnS:hover {
    background-color: rgb(235, 235, 235);
    transition: background-color 0s ease;

}
.btnT:link {
    color: black;

}
.btnT:visited {
    color: black;

}
.btnT:hover{
    color: black;
    
}
.btnS {
    background-color: rgb(234, 234, 234);

}

.btnK {
    padding: 0.3em;
    margin-left: 1px;
    outline: 1px solid;
    border-radius: 0.1em;
    outline-color: rgb(104, 104, 104);
    padding-top: 1em;
    padding-bottom: 1em;
    background-color: rgb(224, 243, 236);
    display: flex;
    text-align: center;
    min-width: 9em;
    gap: 10px;
}
.btnK:hover{
    color: black;
    text-decoration: none;
    background-color: rgb(210, 229, 221);
    transition: background-color 0.2s ease;
}
.KeyCharacters {
    margin-left: 15%;
    margin-right: 15%;
    background-color: rgb(255, 255, 255);
    padding: 1em;
    margin-top: 0.8em;
    padding-top: 0.5em;
    border:  1px solid;
    border-color: rgb(162, 162, 162);
    
}

.Gal {

    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    padding: 0em;
    padding-top: 0em;
    border-radius: 0.25em;
    padding-top: 0em;
    padding-bottom: 1.2em;
    padding-left: 0em;
    padding-right: 0em;
    border-radius: 0.2em;
    display: flex;
    flex-wrap: wrap;
    min-height: 12em;
    color: rgb(61, 61, 61);

}
#Close {
    font-size: 8em;
    height: 20px;
    cursor: pointer;
    
    pointer-events: all;
    margin: auto;
    left: calc(82.5vw - 0.25em);
    top: calc(12vh - 0.25em);
    position: fixed;
    z-index: 250;
    
}
#keyClose {
    font-size: 8em;
    height: 20px;
    cursor: pointer;
    
    pointer-events: all;
    margin: auto;
    left: calc(82.5vw - 0.25em);
    top: calc(12vh - 0.25em);
    position: fixed;
    z-index: 250;
    
}
#Button1 {
    font-size: 8em;
    height: 50px;
    cursor: pointer;
     
    pointer-events: all;
    margin: auto;
    right: 83%;
    top: 45vh;
    position: fixed;
    
}


#Button2 {
    height: 50px;
    cursor: pointer;
   transform: rotate(180deg);
    pointer-events: all;
    margin: auto;
    Left: 83%;
    top: 45vh;
    position: fixed;
 
}

#Big {
    position: fixed;
    width: 65vw;
    margin-left: 17.5vw;
    height: 85vh;
    margin-top: 7.5vh;
    z-index: 200;
    display: flex; 
    flex-direction: column; 
    pointer-events: none;
    background-color: rgba(0,0,0,0.9);
    top: 0;
    left: 0;
    display: none;
}

#BigImgCont {
    flex: 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    position: relative;
    overflow: hidden;
    padding-top: 2.5em;
    padding-bottom: 1em;
    flex-direction: row;
    

}

#BigImgA {
   
    height: 100%;
    max-width: 100%;
    display: flex;
   
    justify-content: center;
}

#BigImg {
    max-height: 100%;
    max-width: 100%;
    
    margin: auto;
}

#BigImgText {
    font-size: 1em;
    color: black;
    background-color: white;
    padding: 0.5em;
    line-height: 1.4em;
    z-index: 4;
    pointer-events: all;
    width: 100%;
    text-align: center;
}

.topP1 {

    width: 85%;
    float: left;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5em;

}
.topPK {
  
    width: 100%;
    float: left;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5em;

}

.topP2 {
    width: 15%;

    display: flex;
    align-items: flex-end;

    justify-content: flex-end;
    padding-left: 0em;
    height: auto;
    flex-direction: column;
}

.topBox {
    padding-bottom: 1em;
    width: 100%;
    display: flex;
    min-width: 100%;
    margin-top: -0.5em;

}

#keys{
    min-height: 1em;
}

.keyIcon {
    width: 2.2em;
    height: 2.2;
    margin-bottom: -1em;
    margin-top: -1em;
    margin-left: -0.25em;
    margin-right: -0.25em;
}
#WIP{
    transform: scale(-1,1); 
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(15deg);
    margin-bottom: -0.3em;
    margin-top: -1em;
    margin-right: 0.3em;
}
.TitleLink:link{
    color: black;
   
}
.TitleLink:hover{
    text-decoration: none;
}

.listTitle{
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    font-weight: 500;
    margin-left: -1.2em;
}
@media only screen and (max-width: 1400px) {
    .contente {


        margin-left: 8%;
        margin-right: 8%;
        

    }

    .KeyCharacters {
        margin-left: 8%;
        margin-right: 8%;

    }
    .searchHolder {
        width: 20em;
        padding-top: 1.1em;
        margin-right: 8%;
    }
    #searchRes {

        right: calc(8% + 2.3em);
       
    }
    #MenuIcon {

        margin-left: 8%;

    }

    #SiteTitle {
        margin-left: calc(8% + 3em);
        
    }
}

@media only screen and (max-width: 1200px) {
    .contente {


        margin-left: 5%;
        margin-right: 5%;
        

    }

    .KeyCharacters {
        margin-left: 5%;
        margin-right: 5%;

    }

    .searchHolder {
      
        padding-top: 1.1em;
       
        margin-right: 5%;

    }


    #searchRes {

        right: calc(5% + 2.3em);
       
    }

    #MenuIcon {

        margin-left: 5%;

    }

    #SiteTitle {
        margin-left: calc(5% + 3em);
        
    }

    
    .keyCube {
        width: 19%;

    }
    .keyCube2 {
        width: 24%;

    }

    .ImageHolder {
     
        width: 32.3%;
        
    }
#Close {
    
    left: calc(87.5vw - 0.3em);
     top: calc(12vh - 0.25em);

    
}
#keyClose {
    
    left: calc(87.5vw - 0.3em);
     top: calc(12vh - 0.25em);

    
}
   #Big {
   
        width: 75vw;
        margin-left: 12.5vw;
        height: 85vh;
        margin-top: 7.5vh;
    }
    #Button1 {

    right: 87.5vw;

    
}

#Button2 {
   

    Left: 87.5vw;
  
 
}
    #BigImgText {
    font-size: 0.9em;
   
}
}






@media only screen and (max-width: 900px) {
    .contente {
        margin-left: 1.5%;
        margin-right: 1.5%;


    }
    .T3col{
        column-count: 2;
    }
    .T4col{
        column-count: 3;
    }
    .KeyCharacters {
        margin-left: 1.51%;
        margin-right: 1.5%;

    }
.pageBottom{
    top:auto;
    bottom: -0.3em;
    
   
}
    #portA {
        max-width: 100%;
        width: 100%;
        margin-bottom: 0.5em;
        padding-left: 0%;
    }
    .portrait{
        max-height: 500em;
    }
    .searchHolder {
      
        padding-top: 1.1em;
       
        margin-right: 1.5%;

    }


    #searchRes {

        right: calc(1.5% + 2.3em);
        
    }

    #MenuIcon {

        margin-left: 2%;

    }

    #SiteTitle {
        margin-left: calc(2% + 3em);
        
    }

    .btnT {

        font-size: 0.9em;


    }

    .btnK {
        min-width: 9em;
        font-size: 0.9em;

    }

    .topP1 {

        width: 70%;
        
    }


    .topP2 {
        min-width: 30%;
       
    }

    
    #TitleText{
       
        font-size: 1.6em;
    }
  
    .keyCube {
        width: 24%;

    
    }
    .keyCube2 {
        width: 32.2%;

    
    }
    .keyBText {
        font-size: 0.85em;
   
    }
    
    .keyBTextI {
        font-size: 0.85em;
    
    }
    .ImageHolder {
     
        width: 32.3%;
        
    }
    #Close {
    
    left: calc(92.5vw - 0.3em);
  

    
}
   #keyClose {
    
    left: calc(92.5vw - 0.3em);
  

    
}
   #Big {
   
        width: 85vw;
        margin-left: 7.5vw;
        height: 77.5vh;
        margin-top: 7.5vh;
    }
    #Button1 {

    right: 92.5vw;

    
}

#Button2 {
   

    Left: 92.5vw;
  
 
}
    #BigImgText {
    font-size: 0.9em;
   
}
#Close {
    
   
   
    
    top: calc(12vh - 0.25em);
   
    
}
#keyClose {
    
   
   
    
    top: calc(12vh - 0.25em);
   
    
}
}


@media only screen and (max-width: 720px) {

    .listThing {
     
        flex-wrap: nowrap;
        font-size: 0.9em;
        max-height: 10000em;
    
    }
}






@media only screen and (max-width: 600px) {
    .contente {


        margin-left: 1%;
        margin-right: 1%;
        font-size: 0.9em;

    }
.pageBottom{
    top:auto;
    bottom: -0.5em;
    
   
}
    .KeyCharacters {
        margin-left: 1%;
        margin-right: 1%;

    }
    .T3col{
        column-count: 1;
    }
    .T4col{
        column-count: 2;
    }
    .searchHolder {
      
        padding-top: 1.1em;
        margin-right: 2%;
        width: 47vw;

    }
    .searchBarHolder {
        margin-left: auto;
       
    }

    #searchRes {

        width: 100vw;
        transform: translateX(-parent offset);
        left: 0em;
        max-height: 70vh;
    }

    #MenuIcon {

        margin-left: 2%;

    }

    #SiteTitle {
        margin-left: calc(17%);
        width: 14%;
    }



    .btnK {
        min-width: 2em;
        margin-right: 0.5em;
        padding-top: 0.6em;
        padding-bottom: 0.6em;

    }

    .topP1 {

       
         min-width: 100%;

    }
    .topBox{
        flex-direction: column;
     
    }

    .topP2 {
        min-width: 100%;
       margin-top: 0.5em;
        justify-content:flex-start;
        flex-direction: row;
    
        
    }

   
    #TitleText{
         max-width: 100%;
        margin-right: 0px;
        font-size: 1.5em;
    }
    .listThing {
     
        flex-wrap: nowrap;
        font-size: 0.9em;
        max-height: 10000em;
    
    }
    .keyCube {
        width: 32.2%;

    
    }
    .keyBText {
        font-size: 0.7em;
   
    }
    
    .keyBTextI {
        font-size: 0.8em;
    
    }
    .ImageHolder {
     
        width: 49%;
        
    }
       #Big {
   
        width: 99vw;
        margin-left: 0.5vw;
        height: 60vh;
        margin-top: 17.5vh;
      
    }
    #Button1 {

    right: 82.5vw;
     top: auto;
     top: calc(77.5vh + 10px);

    
}

#Button2 {

    left: 82.5vw;
    top: auto;
    top: calc(77.5vh + 10px);

}
    #BigImgText {
    font-size: 0.8em;
   
}
#Close {
    
    height: 20px;
   
    left: calc(100vw - 0.2em);
    top: calc(21.7vh - 0.25em);
    position: fixed;
    
}
#keyClose {
    
    height: 20px;
   
    left: calc(100vw - 0.2em);
    top: calc(21.7vh - 0.25em);
    position: fixed;
    
}

    @media only screen and (max-width: 400px) {
        .T4col{
            column-count: 1;
        }
    }
    
}