/*@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');*/

        /*@import url('/fonts/Pacifica Condensed Regular.ttf');*/
        
        html {
            height: 100%;
        }
        body {
            position: relative;
            height: 100%;
            margin: 0;
            padding: 0;
            /*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
            background: black;
            background-attachment: fixed;
            background-size: cover;
            font-size: 90%;
        }
        body:focus, .column:focus{
            outline:none;
        }
        
        .audio-control:hover {
        	 opacity: 1;
        }
         .audio-control.unmuted{
           /* background-image: url("/img/volumeControl/volume.png");
            background-repeat: no-repeat;
            -webkit-background-size: 80%;
            -moz-background-size: 80%;
            -o-background-size: 80%;
            background-size: 80%;*/
            z-index:-1001;
            opacity: 0;
         }
        
         .audio-control.muted{
           /* background-image: url("/img/volumeControl/mute.png");
            background-repeat: no-repeat;
            -webkit-background-size: 80%;
            -moz-background-size: 80%;
            -o-background-size: 80%;
            background-size: 80%;*/
            z-index:1001;
         }
        .audio-control {
            
            position: absolute;
            transition: opacity 0.3s;
            top: 45%;
            left:40%;
            right: 40%;
            bottom:45%;
            z-index: 1001;
            text-align: center;
        }
        /* The only rule that matters */
        /*#videoBackground {
        /*  making the video fullscreen  *
          position: fixed;
          right: 0; 
          bottom: 0;
          min-width: 100%; 
          min-height: 100%;
          width: auto; 
          height: auto;
          background-color:black;
          z-index: -100;
        }*/
        
        /***********************test************************/
        .vimeo-wrapper { 
            position: relative; 
            padding-bottom: calc(100vh - var(--TopBarHeight) - 0.1vh); 
            height: 0; 
            max-height: 100%; 
            overflow: hidden; 
            max-width: 100%; 
            top: calc( var(--TopBarHeight) + 0.1vh );
            /*z-index:-1;*/
        } 
        .page-wrapper{
            position:relative;
            padding:0px !important;
            margin:auto;
            bottom: 0px;
            top: calc( var(--TopBarHeight) + 0.1vh );
            width:98%;
            /* z-index: -1; */
            height: calc(100vh - var(--TopBarHeight) - 0.1vh);
            max-height:calc(100vh - var(--TopBarHeight) - 0.1vh) !important;
        } 
        .vimeo-wrapper iframe, .vimeo-wrapper object, .vimeo-wrapper embed { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            max-height: 100vw;
            height: 100%;
            max-height: calc(100vh - var(--TopBarHeight) - 0.1vh);
            overflow: hidden;
        }
        /*******************************************************/
        #videoPlayer {
        /*  making the video fullscreen  */
          position: fixed;
          right: 0; 
          bottom: 0;
          min-width: 100%; 
          min-height: 100%;
          width: auto; 
          height: auto;
          background-color:black;
          z-index: -101;
        }
         
        #playVideo {
        /*  making the video fullscreen  */
        position: fixed;
        right: 0; 
        bottom: 0;
        min-width: 100%; 
        min-height: 100%;
        width: auto; 
        height: auto;
        cursor:pointer;
        background-color:lightblue;
        }
        
        /* These just style the content 
        this is for the video to make a frame but I dont have it turned on*/
        article {
        /*  just a fancy border  */
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          /*border: 10px solid rgba(255, 255, 255, 0.5);
          margin: 10px;*/
        }
        
        
        
        #titleDiv {
            font-family: var(--SmallFontFamily), monospace;
            width: 30vh;
            
            text-align: center;
            vertical-align: bottom;
            font-size:100%;
            position:absolute; /*it can be fixed too*/
            
            left:5vh;
            bottom:5vh;
            
    
            /*this to solve "the content will not be cut when the window is smaller than the content": */
            max-width:100%;
            max-height:100%;
            overflow: visible;
            line-height: 1.8 ;
            color:#00FFFF; 
        }
        #mTitle
        {
            display: flex;
            justify-content:flex-start;
            align-items:flex-start;
            flex-direction:column;
            font-size:1.5vw;
            line-height: 1;
            white-space: nowrap;
        }
        /*#sTitle
        {
            font-size:5em;
            line-height: 1.8;
        }*/

        
        .scaleFlip
        {
            -moz-transform: scale(-1, 1);
            -webkit-transform: scale(-1, 1);
            -o-transform: scale(-1, 1);
            -ms-transform: scale(-1, 1);
            transform: scale(-1, 1);
            unicode-bidi:bidi-override;
            direction:rtl;
        }
        
        /*#slideMenu
        {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 20%;
            color: white;
            text-align: center;
            vertical-align: top;
            font-family: Sackers_Gothic_Medium_AT;
            line-height: 1.4;
        }*/
        
        
        
       
        
        /*.vimeo-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            max-width:100%;
            height: 0;
            padding-bottom:50%;
            z-index: -1;
            pointer-events: none;
            overflow: hidden;
        }*/

        /*
        #backgroundVideo{
             /*56.25vw;  Given a 16:9 aspect ratio, 9/16*100 = 56.25 
            min-height: 80vh;
            min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 overriden in javascript
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
        }*/
        
        .vimeoPlayer-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:black;
            overflow: hidden;
        }
        .vimeoPlayer-wrapper iframe {
            width: 100vw;
            height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
            min-height: 100vh;
            min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        /*.footer {
           position: fixed;
           left: 0;
           bottom: 0;
           width: 100%;
           height:5%;
           color: white;
           text-align: center;
           font-family: 'Cabin', sans-serif;
           font-size:1.5em;
        }*/
        
        
        /* unvisited link */
        a:link {
          color: var(--MainFontColor);
          text-decoration: none;
        }
        
        /* visited link */
        a:visited {
          color: var(--MainFontColor);
          text-decoration: none;
        }
        
        /* mouse over link */
        a:hover{
            color:var(--LinkHoverColor) !important;
        }
        
        /* selected link */
        a:active {
          color: var(--MainFontColor);
          text-decoration: none;
        }
        
        #descriptionText
        {
            position: absolute;
            z-index:-210;
        }
        
        
        /************************************************************/
        
         #header
        {
            position: fixed;
            display: flex;
            align-items:flex-start;
            justify-content:space-around;
            text-align: center;

            left: 0;
            top: 0;
            width: 100%;
        }
        
        #topBar
        {
            left: 0;
            top: 0;
            width: 100vw;
            height: var(--TopBarHeight);
            background-color: black;
            border-bottom: 0.1vh solid white;
        }
        
        #header .category
        {
            display: flex;
            align-items:center;
            height: var(--TopBarHeight);
            font-size: min(var(--CategoryFontSize), var(--TopBarHeight));
            line-height: 1;
            font-family: var(--TitleFontFamily), monospace;
            
            padding-top: 0.5vw;
            color: var(--MainFontColor);
            padding-left: .5vw;
            padding-right: .5vw;
            white-space: nowrap;
            width:auto;
            
        }
        
        .column
        {
           display: flex;
           flex-direction:column;
           overflow: visible;
           
           /*width:10vw;*/ /*I'm using javascript in loadpage.php drawSqlArray() to overwright this based on number of columns */
        }

        #logoColumn{
            /*width:20vw;*/
            
        }
        .logoImg
        {
            height: min(var(--LogoImgMaxWidth), var(--LogoImgMaxHeight));
        }
        .logoTopLine{
            /*display: flex;
            flex-direction:row;
            align-items:center;*/
            font-size: min(var(--LogoTopLineMaxWidth), var(--LogoTopLineMaxHeight));
            white-space: nowrap;
        }
        .logoSecondLine{
            font-size: min(var(--LogoSecondLineMaxWidth), var(--LogoSecondLineHeight));
            white-space: nowrap;
        }
        
        #header 
        {
            display: flex;
            align-items:flex-start;
            justify-content:space-around;
            text-align: left;
            z-index:1000;
        }
        
        .list{ /*, .listEnd{*/
            display: none;
            transition: height 400ms linear;
            text-align: left;
            color: var(--SmallFontSize);
            width:1vw;
        }
        /*.listEnd{
            align-items:flex-end;
            justify-content:space-around;
            flex-direction:column;
        }*/
        .listContainer{
            align-items:flex-start;
            justify-content:space-around;
            flex-direction:column;
            padding-top: 1vh;
            padding-left: .5vw;
            padding-right: .5vw;
            padding-bottom: .5vw;
            /*
            background-color:black;
            opacity:.5;
            */
            
        }
        .item {
            white-space: nowrap;
            font-family: var(--SmallFontFamily), monospace;
            font-size: var(--SmallFontSize);
            line-height: 1.5;
            text-shadow: .1vw .1vw black;
            
        }
        .end{
            align-items:flex-end;
            justify-content:space-around;
            flex-direction:column;
        }
        
        .grow { transition: all .2s ease-in-out; }
        .grow:hover { transform: scale(1.1); }
        

/*********************************************************************/
.link:hover{
    color:var(--LinkHoverColor) !important;
}

@media (orientation: landscape) and (min-width: 1000px){
    
    
        .category:hover ~ .list , .list:hover,  .column:hover, .active .list, .active .listEnd{ /*.category:hover ~ .listEnd , .listEnd:hover,*/
            display: flex;
        }
        .category:hover{
            color:var(--MainHoverText) !important;
        }

        /*.category:not(.link):hover{
            color:var(--MainHoverText) !important;
        }*/
        
}

/***mobile horazontal****/
@media (orientation: landscape) and (max-width: 1000px)  {
    .audio-control.muted{
        opacity:0;
    }
    #header, #topBar{
            display: none;
        }
        body{
            background-color:black;
        }
        /*.horizontalVideoPlayerDIV #videoPlayer_sizer, #videoPlayer, #videoPlayer div:first-child{ 
            width:100vw;
            height:100% !important;
            padding:0 !important;
        }*/
        .vimeo-wrapper, .vimeo-wrapper * { 
            padding:0 !important;
            bottom: 0px;
            top: 0px;
            width:100vw;
            /* z-index: -1; */
            height: 100lvh !important;
            max-height:100vh !important;
        } 
        .page-wrapper{
            position:relative;
            padding:0 !important;
            margin:auto;
            bottom: 0px;
            top: var(--TopBarHeight) !important;
            width:100vw;
            /* z-index: -1; */
            height: calc(100vh - var(--TopBarHeight) - 0.1vh);
            max-height:90vh !important;
        } 
        /*.vimeo-wrapper iframe, .vimeo-wrapper object, .vimeo-wrapper embed { 
            max-height: 100vh;
            max-height: 100lvh; 
        }*/

}

/************mobile site*****************************/

@media (orientation: portrait) and (max-width: 1000px) {
    .audio-control.muted{
        opacity:0;
    }
    .column
    {
        display: flex;
        flex-direction:column;
        overflow: visible;
        width:100vw;
        max-height: 100vh;
        transition: max-height 0.25s ease-in;
    }
    .column.hidden{
        /*display:none;*/
        display: flex;
        max-height: 0;
        transition: max-height 0.10s;
        overflow: hidden;
    }
    
    #header
    {
        flex-direction:column;
        justify-content:space-between;
        background-color:black;
        opacity:.9;
    }
     #header .category
    {
        font-size: min(var(--CategoryMaxWidthMobile),var(--CategoryMaxHeightMobile));
        height: auto;
        
    }
    .category
    {
        justify-content:flex-end;
    }
    
    #logoColumn{
            width:100vw !important;
            justify-content:center;
    }
    #logoCategory{
            width:100vw !important;
            display:flex;
            justify-content:space-around;
            padding-right:1vw;
            height: var(--TopBarHeight) !important;
            
    }
    .logoImg
    {
        height: min(var(--LogoImgMaxWidthMobile), var(--LogoImgMaxHeightMobile));
    }
    .logoTopLine
    {
        font-size: min(var(--LogoTopLineMaxWidthMobile), var(--LogoTopLineMaxHeightMobile));
        white-space: nowrap;
    }
    .logoSecondLine
    {
        font-size: min(var(--LogoSecondLineMaxWidthMobile), var(--LogoSecondLineHeightMobile));
        white-space: nowrap;
    }
    .item {
        width:100%;
    }
    .item, .item > div {
        
        font-size:var(--ItemsMaxWidthMobile);
        text-align:right;
        width:100%;
    }
    
    /*.listEnd{
        align-items:flex-start;
        justify-content:space-around;
        flex-direction:column;
    }*/
    .end{
        align-items:flex-start;
    }
    

    
    .active .list,  #logoColumn{ /*.active .listEnd,*/
        display: flex;
        max-height: 100vh;
        align-items:flex-end;
        width:100%;
        
    }
    .listContainer, .listContainer *{
        width:95%;
    }
    #toggleMenuIcon{
        display:flex;
        flex-direction:column;
        
    }
    #toggleMenuIcon div{
        width: 10vw;
        height: 2vw;
        background-color: white;
        margin: 1vw 0;
    }
    
    
    
}