          /* landscape */

        /* >320px M Small devices, tablets, landscape*/

        @media (min-width: 320px) and (max-width: 799px) and (orientation: landscape) {

            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }
            .catheadBtn {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .catheadBtn:hover {
                opacity: 1 !important;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }
            .button {
                width: 8vw !important;
                top: 79vh !important;
            }
            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            h3 {
                font-size: 3vw !important;
            }
            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                margin-top: -10vh !important;
                transform: translateY(-10vh) !important;
                width: 100% !important
            }

            .container-audio {
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }

            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(1) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 3vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {
                transform: scale(1);
                margin-top: 7% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 10vw !important;
            }
        }

        /* >800px M Small devices, tablets landscape*/

        @media (min-width: 800px) and (max-width: 1199px) and (orientation: landscape) {

        
            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }

            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                margin-top: -0vh !important;
                transform: translateY(-18vh) !important;
                width: 100% !important;
            }

            .container-audio {
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }

            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(1) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 4.85vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {               
                transform: scale(0.85) !important;
                margin-top: 4% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 5vw !important;
            }
        }

        /* >1200px Large devices landscape landscape */

        @media (min-width: 1200px) and (max-width: 1439px) and (orientation: landscape) {

            
            
            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }

            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                margin-top: -0vh !important;
                transform: translateY(-20vh) !important;
                width: 100% !important
            }

            .container-audio {
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }

            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(0.9) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 4.85vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {
                transform: scale(1);
                margin-top: 6% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 5vw !important;
            }
        }

        /* >1440px Large devices landscape landscape */

        @media (min-width: 1440px) and (max-width: 2159px) and (orientation: landscape) {

            
            
            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }

            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                margin-top: -0vh !important;
                transform: translateY(-20vh) !important;
                width: 100% !important
            }

            .container-audio {
                width: 30% !important;
                transform: scale(2) !important;
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }

            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(1) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 5vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {
                transform: scale(1);
                margin-top: 7% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 5vw !important;
            }
        }

        /* >2160-3840 landscape */

        @media (min-width: 2160px) and (max-width: 3839px) and (orientation: landscape) {

            
            
            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }

            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                margin-top: -0vh !important;
                transform: translateY(-20vh) !important;
                width: 100% !important
            }

            .container-audio {
                width: 30% !important;
                transform: scale(3) !important;
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }
 
            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(1) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 5vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {
                transform: scale(1);
                margin-top: 7% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 5vw !important;
            }
        }

        /* >3840 landscape */

        @media (min-width: 3840px) and (orientation: landscape) {

            
            
            #mySidenav a {
                position: absolute;
                top: 40% !important;
                right: 0% !important;
                width: 15% !important;
                font-size: 3vW !important;
                opacity: 0.5;
            }

            .closeiframe {
                width: 8vw !important;
                opacity: 0.4 !important;
            }
            .closeiframe:hover {
                opacity: 1 !important;
            }
            .infoicon {
                width: 8vw !important;
                top: 79vh !important;
                opacity: 0.4 !important;
            }

            .buttonLeo,
            .buttonLio,
            .buttonJag,
            .buttonSno,
            .buttonTig {
                top: 82vh !important;
                height: 8vw !important;
            }

            .iconcontainer {
                width: 8% !important;
            }

            .nav a {
                width: 8vw !important;
                height: 8vw !important;
            }

            .nav {
                transform: translateY(-3vw) !important;
            }

            .size {
                width: 100% !important;
                height: auto !important;
                padding: 3% !important;
            }

            .swiper-pagination {
                top: 94% !important
            }

            .headerbox {
                top: 20% !important;
                transform: scale(0.7) !important;
            }

            .modal a.close-modal {
                opacity: 0.4 !important;
            }
            .modal a.close-modal:hover {
                opacity: 1 !important;
            }
            

            .containerMinaudio {
                width: 20% !important;
            }

            .map {
                overflow: scroll;
                transform: scale(1.5);
                background-color: rgba(0, 0, 0, 0.459);
            }

            .modalimage {
                top: 0% !important;
                transform: translateY(-20vh) !important;
                width: 100% !important;
            }

            .container-audio {
                width: 30% !important;
                transform: scale(3) !important;
                margin-top: -20% !important;
                position: relative !important;
                z-index: 10000 !important;
            }

            .itembox {
                /* background-color: rgba(238, 255, 0, 0.295); */
                transform: scale(1);
                height: fit-content;
                margin: 0% !important;
                margin-bottom: 0vh !important;
            }

            .container-3 {
                width: auto;
                padding: 0% 0%;
                margin: 0%
            }

            .container-3 .item {
                font-size: 2.85vw;
                display: inline-table !important;
                width: auto;
                padding: 2% 2%;
            }

            .factbox {
                transform: scale(1) !important;
                bottom: 2% !important;
            }

            .facthd {
                font-size: 5vw !important;
                margin-bottom: 0em !important;
            }

            .listbox {
                transform: scale(1);
                margin-top: 7% !important;
                padding-right: 2% !important;
            }

            .list-type5 ol {
                display:block !important;
                margin-left: -5% !important;
            }

            .list-type5 ol li {
                margin-bottom: 1% !important;
                padding: 1% !important;
                padding-left: 7% !important;
            }

            .list-type5 a {
                font-size: 2.85vw !important;
            }

            .list-type5 ol li:before {
                top: -0% !important;
                left: 0% !important;
                width: 5vw !important;
                height: 5vw !important;
                font-size: 5vw !important;
                line-height: 1 !important;
            }
            .volume-high {
                width: 8vw !important;
                height: 8vw !important;
                opacity: 0.4 !important;
            }
            .volume-high:hover {
                opacity: 1 !important;
            }
            .narration-on {
                width: 8vw !important;
            }

            .narration-off {
                width: 8vw !important;

            }
            .introbox {
                margin-top: 5vh !important;
                width: 82% !important;
                height: 80vh !important;
                overflow: scroll !important;
            }
            .narbox {
                width: 90%!important;
                display: contents!important;
                margin-top: 25% !important;
            }
            .textbox2 {
                width: 90%!important;
                position: relative!important;
                margin-top: 25vh !important;
                margin-bottom: 10vh !important;
                position: relative !important;
                /* background-color: rgba(255, 0, 0, 0.5) !important; */
            }
            .lowertextbox {
                height: max-content !important;
                margin-top: -44vh !important; 
                display:contents !important;
                position: sticky !important;
                z-index: 100 !important;
                /* background-color: rgba(179, 255, 0, 0.5) !important;  */
                
            }
            .lowertext {
                font-size: 3vw !important;
                margin-top: -16vh !important;
            }
            .animals {
                margin-top: 5% !important;
                margin-left: 50% !important;
                margin-bottom: 10vh !important;
                width: 100% !important;
                height: fit-content;

            }
            .animals img {
                width: 100% !important;
                margin-top: 2vh !important;
                position: static !important;
            }
            .animated-text {
                transform: translateY(10vh) !important;
                transition: transform 8s ease-out, opacity 5s ease-out !important;
            }
    
            .animated-text.animate {
                transform: translateY(-20vh) !important;
            }

            .time {
                font-size: 25vw !important;  
                margin-top: -5vh !important;          }
    
            p {
                font-size: 3vw !important;
                line-height: 140% !important;
                
            }
           
            .introHd {
                font-size: 9.5vw !important;
                padding:10% !important;
            }
            .headerbox1 {
                top: 5vh !important;
            }
    
            .headerbox2 {
                margin-top: -11vh !important;
            }
            h2 {
                font-size: 5vw !important
            }
    
            h5 {
                font-size: 4vw !important;
                margin-bottom:5% !important;
            }
    
            h3 {
                font-size: 5vw !important;
            }
        }
