/* ------------------------- LANDSCAPE DESKTOP ------------------------- */
:root{

    --device_max : 720px;
    --device_min : 320px;


    --w : 100dvw;
    --h : 100dvh;
    --headers  : 6dvh;
    --header   : calc(6dvh / 2);
    --bg: rgb(225, 225, 225);
    --content-padding : 0px 10px 0px 10px;
    --content-pad-size: 10px;
    --p-dh-flex-direction: row;
    --p-dh-align-items   : flex-start;
    --p_intro_image1-size: 50%;
    --p_svg_bg-width     : 400px;
    --p_svg_bg-height    : 140px;
    --head-padding       : 10px 10px 10px 10px;
    --tag-padding        : 5px 15px 5px 15px;
    --divider-icon-size  : 30px;
    --divider-margin     : 20px 0px 20px 0px;
    --button-padding     : 5px 10px 5px 10px;
    --insta_height       : 80%;
    --insta_width        : 33%;
    --insta_interactive  : all;
    --intro_image_bg_size : contain;
}
/* ------------------------- PORTRAIT DESKTOP ------------------------- */
@media screen and (min-width: 1280px) and (min-height: 100.001vw){
    :root{
        --w : 100dvw;
        --h : 100dvh;
        --headers : 6dvh;
        --content-padding : 0px 10px 0px 10px;
        --content-pad-size: 10px;
        --p-dh-flex-direction: column;
        --p-dh-align-items   : center;
        --p_intro_image1-size: 180%;
        --p_svg_bg-width     : 200px;
        --p_svg_bg-height    : 70px;
        --head-padding       : 10px 10px 10px 10px;
        --tag-padding        : 5px 15px 5px 15px;
        --divider-icon-size  : 20px;
        --divider-margin     : 20px 0px 20px 0px;
        --button-padding     : 7px 0px 7px 0px;
        --insta_height       : 100%;
        --insta_width        : 30%;
        --insta_interactive  : none;
        --intro_image_bg_size : cover;
    }
}
/* ------------------------- PORTRAIT MOBILE ------------------------- */
@media screen and (max-width: 1280px) and (min-height: 100.001vw){
    :root{
        --w : 100dvw;
        --h : 100dvh;
        --headers : 7dvh;
        --header  : calc(7dvh / 2);
        --content-padding : 5px 5px 0px 5px;
        --content-pad-size: 5px;
        --head-padding       : 3px 3px 3px 3px;
        --p-dh-flex-direction: column;
        --p-dh-align-items   : center;
        --p_intro_image1-size: 100%;
        --tag-padding        : 2.5px 5px 2.5px 5px;
        --divider-icon-size  : 20px;
        --divider-margin     : 12px 0px 12px 0px;
        --button-padding     : 2.5px 5px 2.5px 5px;
        --insta_height       : 100%;
        --insta_width        : 30%;
        --insta_interactive  : none;
        --intro_image_bg_size : cover;
    }
}
/* ------------------------- LANDSCAPE MOBILE ------------------------- */
@media screen and (max-width: 1280px) and (min-width: 100vh){
    :root{
        --w : 100dvw;
        --h : 100dvh;
        --headers : 8dvh;
        --header  : calc(8dvh / 2);
        --content-padding : 0px 6px 0px 6px;
        --content-pad-size: 6px;
        --head-padding       : 3px 3px 3px 3px;
        --p_intro_image1-size: 50%;
        --p-dh-flex-direction: row;
        --p-dh-align-items   : flex-start;
        --tag-padding        : 2.5px 5px 2.5px 5px;
        --divider-icon-size  : 20px;
        --divider-margin     : 12px 0px 12px 0px;
        --button-padding     : 2.5px 5px 2.5px 5px;
        --insta_height       : 100%;
        --insta_width        : 30%;
        --insta_interactive  : none;
        --intro_image_bg_size : cover;
    }
}



*{
margin : 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: none;
}


a{
text-decoration: none;
color:rgb(123, 123, 123);
}

::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar-button {
display: none;
}
body {
scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
-ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
}
body::-webkit-scrollbar {
width: 0px;
background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
}
@-moz-document url-prefix(){
html{
    scrollbar-width: none;
}
}



#loader_noise{
    display: none;
    position: absolute;
    width:100dvw;
    height:100dvh;
    mix-blend-mode: lighten;
    padding:0px;
    margin:0px;
}
.loader_button{
    z-index: 1;
    display: none;
    opacity: 0;

    background: red;
    padding: 20px 20px 20px 20px;
    cursor: pointer;
    transition: all 1s;
}
.loader_button:hover{
    background-color: white;
    box-shadow: 5px 5px 0px black;
    border : solid 1px black;
    transition: all 1s;
}
.loader_data{
    z-index: 1;
    display: none;
    opacity: 0;
}
.loader_data_div{
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 20px ;
}
#loader{
    position:fixed;
    right:0px;top:0px;left:0px;bottom:0px;
    z-index: 99999;
    width:100dvw;
    height:100dvh;
    background-color: rgb(255,0,0);

    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}
html {
touch-action: manipulation;
overscroll-behavior: none;
}
body {
position: fixed;
scrollbar-width: none;
font-family: Neue Montreal Regular;
color    : rgb(170,170,170);
font-size: 30px;

background: var(--bg);

padding:0px 0px 0px 0px;

width     : calc(var(--w) - 10px);
height    : 800vh;

overflow-y: hidden;
overflow-x: hidden;
-ms-overflow-style:none;

user-select: none;

display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
}
.holder{
position  : relative;
width     : calc(var(--w) - 10px);
height    : calc(var(--h));
/* margin-bottom:10px; */
overflow-y: hidden;
overflow-x: hidden;
padding   : 0px;
box-sizing: border-box;
}
#i2, #i7, #i12, #i17, #i22{
height    : calc(var(--h));
width     : 500vw;
overflow-y: hidden;
overflow-x: hidden;

display           : inline-grid;
flex-flow         : row;
grid-auto-flow    : row;
vertical-align    : baseline;
grid-column-gap   : 0px;
grid-row-gap      : 0px;
grid-template-rows: auto;

grid-template-columns: 100vw 100vw 100vw 100vw 100vw;
grid-auto-columns    : 100vw;

justify-content: start;
align-items    : center;
}
.pagecell{
position: relative;

overflow-y: hidden;
overflow-x: hidden;

width    : 100%;
height   : 100%;

display: flex;
flex-flow: column;

}
.horiz_pics{
    margin : 0;
    padding: 0;
    height :  calc(var(--h) - var(--headers));
    width     : 800vw;
}
.bg{
    width     : 800vw;
    height    : 100%;

    position: relative;

    display        : flex;
    flex-direction : row;
    justify-content: left;
    align-items    : top;

    cursor: grab;

    user-drag        : none;
    -webkit-user-drag: none;
}

.item0,.item1{
    position  : relative;

    overflow-y: hidden;
    overflow-x: hidden;


    width     : 100%;
    height    : 100%;

    color     : rgb(170,170,170);
    font-size : 30px;
}
#item0_1:active{
    opacity: .2;
    transition: all .5s;
}


.dragWarning {

user-drag          : none;
-webkit-user-drag  : none;
user-select        : none;
-moz-user-select   : none;
-webkit-user-select: none;
-ms-user-select    : none;

position: absolute;
z-index : 999999;

color      : whitesmoke;
font-family: Arial;

padding: 20px;

font-size: 1em;

display        : flex;
justify-content: center;
align-items    : center;

cursor: grab;

}
#cursor_anim{
position: absolute;
z-index: 999;
width:100vw;
height:100vh;
user-select: none;
overflow: hidden;
/* pointer-events:none; */
}

.FRUIT {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
    z-index : 2;
}
.FRUITC {
    width : 100%;
    height: 100%;
}

#PEAR{
    display: flex;
    opacity: 0;
}
#LIME{
    display: flex;
    opacity: 0;
}
#APPLE{
    display: flex;
    opacity: 0;
}
#EPEAR{
    display: flex;
    opacity: 0;
}

#page_footer{
    border-bottom: none;
    border-top   : solid 1px black;
}

.page_header{
    z-index : 999;
    position: relative;
    height  : var(--header);
    width   : 100%;
    background-color: rgb(243, 243, 243);
    border-bottom: solid 1px black;
    border-top   : none;

    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;

    font-size: 1vw;
    padding  : var(--head-padding);
}
.page_content{
    z-index        : 1;
    width          : 100%;
    height         : calc(var(--h) - var(--headers));
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
    padding        : 0px 0px 0px 0px;
    background: linear-gradient(-90deg, white, rgb(221,221,221))
}
.includer{
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    width          : 100%;
    height         : 100%;
  }


.p_svg_bg{
    position: absolute;
    z-index : 3;
    left    : var(--content-pad-size);
    bottom  : 0px;
    width   : var(--p_svg_bg-width);
    height  : var(--p_svg_bg-height);
}

.p_title{
    position: relative;
    z-index : 1;
    height     : var(--title_big);
    line-height: var(--title_big);
    font-size  : var(--title_big);
}

.p_tags{
    z-index        : 2;
    position       : relative;
    width          : 100%;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 10px;
    right          : 0px;

}
.p_tag{
    padding         : var(--tag-padding);
    background-color: #fff;
}


.p_intro_image1{
    position  : absolute;
    z-index   : 1;
    width     : var(--p_intro_image1-size);
    max-height: 1000px;
    bottom    : 0vw;
}

.p_descrip_holder{
    display        : flex;
    flex-direction : var(--p-dh-flex-direction);
    align-items    : var(--p-dh-align-items);
    justify-content: space-between;
    width          : 100%;
            /* height         : 50%; */
}

.p_buttons{
    stroke: none;
    fill  : rgb(180,180,180,.01);
    cursor: pointer;
}
.p_image2{
    width : 100%;
    height: 100%;
}
.p_image3{
    width : 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
}
.p_image4{
    width : 100%;
    height: 100%;
}

.rails_1{
    stroke: rgb(255, 255, 255);
            /* stroke-dasharray: 55 20; */
    stroke-width  : 2px;
    stroke-linecap: round;
}


.canvasy{
    width     : 100%;
    max-height: 100%;
    overflow  : hidden;
}


.button{
    padding         : var(--button-padding);
    background-color: red;
    color           : white;
    width           : auto;
    cursor          : pointer;
    border          : solid 1px red;
}
.button:hover{
    background-color: white;
    color           : red;
    border-radius   : 5px;
    border          : solid 1px red;
    transition      : background-color .8s, color .5s, border-radius .35s;
}
  
.divider{
    position        : relative;
    width           : 100%;
    height          : 1px;
    background-color: rgb(0, 0, 0);
    margin          : var(--divider-margin);
}
  
.divider_symbol{
    position : absolute;
    width    : var(--divider-icon-size);
    height   : var(--divider-icon-size);
    transform: translate(-50%, -50%);
}