/* note 

                                       
									  element # and representation on html 

									  
0 menu bar at the top of the website, (home, dst renamon art, etc)
1 Directory link under the running renamon
2 the bunnie den and rife links
 3 running renamon gif that links to the home page
  4 gallery image, pointing renamon 
   5 hail stan button
	6 youtube video
	 7 some kind of div body???
	  8 showcase image/logo
	   9  youtube video
		10 this months showcase image
		 11 welcome to renamon. org image
		  12 spotify player/ selector
		   13 webm
		    14 javascript
			 15 foot script
			  16 careasol
			   17 top color menu (grey image bar)
			    18** open
				 19 ** open
				  20** open
				  
				   write to filesystem? YES
				  Tagging/ Id's in html
				  
				  when an image has an id in the html it will be applied basbed on the css tag or "#"
				  
				  @media checks a screens viewport or resolution/ screen size and then applies it to the website based on the size 
				  
				  sizes for @ media are: 768, 992,1200.
				   changing elements in this section only changes for when the screen is at the desired size.
				  
				  */
				  
				  
	  
				  


.lsplit{right: 400px;position: inherit;}
.logincheck{position: fixed;
z-index: 641;
right: 305px;
top: 40px;}
#thiswillwork{

    left: 300px;
    top: 700px;
    min-width: 10.460251046025105vw;
    width: 10.460251046025105vw;
    min-height: 64.51612903225806vh;
    height: 64.51612903225806vh;
    display: block;
 	z-index: 800;

	
}


.testclassv3{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}


.testclassv4{left: 100px;top: 700px;min-width: 10.460251046025105vw;width: 10.460251046025105vw;min-height: 64.51612903225806vh;height: 64.51612903225806vh;display: inline;position: absolute !important;}

.testclassv5{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}


.testclassv8{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}
.testclassv7{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}

.testclassv6{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}

#bringthe4{

left: 700px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: block;
z-index: 800;
}







#thelucky7{

left: 500px;
    top: 920px;
    min-width: 10.460251046025105vw;
    width: 10.460251046025105vw;
    min-height: 64.51612903225806vh;
    height: 64.51612903225806vh;
    display: block;
    z-index: 800;

}






#final8{

    left: 700px;
    top: 920px;
    min-width: 10.460251046025105vw;
    width: 10.460251046025105vw;
    min-height: 64.51612903225806vh;
    height: 64.51612903225806vh;
    display: block;
    z-index: 800;

}





#middlediv6{

left: 300px;
top: 920px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: block;
z-index: 800;

}


#row2div1{
left: 100px;
top: 920px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: block;
z-index: 800;
}


#showcase3{

left: 500px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: block;
z-index: 800;
	
}


	#xsquare2{
	top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}
	#xsquare3{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}

	#xsquare4{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}
	#xsquare5{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}
	#xsquare6{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}
	#xsquare7{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}
	#xsquare8{
top: 883px;
z-index: 0;
left: 383px;
width: 10.460251046025105vw;
height: 100px;
}

.testclassv2{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
position: absolute !important;
}



#thiswillnotfuckingwork{position: absolute;/* left: 100px; *//* top: 700px; *//* min-width: 10.460251046025105vw; *//* width: 10.460251046025105vw; *//* min-height: 64.51612903225806vh; *//* height: 64.51612903225806vh; */z-index: 800;/* display: flex; */width: 200px;height: 200px;align-content: stretch;justify-content: space-between;flex-wrap: wrap;}


.exitbutton{
	top: 700px;
	z-index: 800;
	left: 100px;
	position: absolute;
}
.testclass{/* left: 100px; *//* top: 700px; *//* min-width: 10.460251046025105vw; *//* width: 10.460251046025105vw; *//* min-height: 64.51612903225806vh; *//* height: 64.51612903225806vh; *//* display: inline; */position: absolute !important;}


.glitchslot{left: 100px;
top: 700px;
min-width: 10.460251046025105vw;
width: 10.460251046025105vw;
min-height: 64.51612903225806vh;
height: 64.51612903225806vh;
display: inline;
z-index: 800;
position: absolute !important;
}

#glitchslot1{/* left: 100px; *//* top: 700px; *//* min-width: 10.460251046025105vw; *//* width: 10.460251046025105vw; *//* min-height: 64.51612903225806vh; *//* height: 64.51612903225806vh; */z-index: 800;position: absolute;display: flex;}

.middleimageclass{/* left: 100px; *//* top: 700px; *//* min-width: 10.460251046025105vw; *//* width: 10.460251046025105vw; *//* min-height: 64.51612903225806vh; *//* height: 64.51612903225806vh; */display: flex;z-index: -1;position: absolute !important;}

.greybar {
  width: 100vw;
  margin: auto;
  background-color: #1e1d1f;
  /* border-radius: 0px 0px 10px 10px; */
  text-align: center;
  opacity: 0.7;
  z-index: 20;
  }
 #greybar {
    /* display: flex; */
    left: 1px;
    top: 0vh;
    min-width: 100vw;
    width: 100vw;
    min-height: 4.131799vw;
    height: 3.131799vw;
    display: block;
    position: fixed;
    z-index: 640;
} 
  

#pillarcontainer { position: absolute;
    white-space: nowrap;
    overflow: hidden;

}

#middlepillars{ left:0px;
top:0px;}


.middlepillars{ left:0px;
top:0px;}


 



/******************************************
## VIDEO BACKGROUND ##
******************************************/

.musicspotlightdiv{position: absolute;top: 0vh;right: 0vh;bottom: 0vh;left: 0vh;overflow: hidden;z-index: 1;}

.musicspotlightdivvid {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100vw;
    height: 76vh;
    object-fit: fill;
    overflow: hidden;
}

 #musicspotlightdiv{
z-index: 50;
left: -51px;
top: -135px;
position: absolute;
width: 100%;
object-fit: fill;
height: 100%;

 }
 
 






#entrancesign {
display: flex;
width: 100%;
height: 17vh;
z-index: 700;
align-content: stretch;
align-items: center;
justify-content: center;
/* min-height: 80px; */
/* position: absolute; */
/* display: block; */
/* left: 260px; */
/* top: 124px; */
/* min-width: 430px; */}




#showcase {align-content: center;left: 66vh;top: 10.741201vh;min-width: 300px;width: 300px;display: flex;position: absolute;min-height: 110px;height: 110px;/* display: block; */z-index: 598;flex-wrap: wrap;flex-direction: column;align-content: space-between;justify-content: center;align-items: center;}
#showcase img { width: 300px; height: 110px; }






#webmhomepage {
    position: absolute;
    display: flex;
    /* left: 527px; */
    top: 75vh;
    /* min-width: 322px; */
    width: 100%;
    /* min-height: 242px; */
    /* height: 242px; */
    /* display: block; */
    z-index: 999;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    /* align-items: center; */
}
/*doot*/

div#webmhomepage video {
    z-index: 999;
    position: relative;
    left: -43vh;
}


#flickinst {left: 28vw;top: 29vh;min-width: 52.30125523012552vw;width: 52.30125523012552vw;min-height: 11.387163561076605vh;height: 11.387163561076605vh;display: flex;z-index: 598;flex-direction: column;flex-wrap: wrap;justify-content: space-around;position: absolute;align-content: stretch;align-items: stretch;}

#xbutton {
    top: 883px;
    z-index: 0;
    left: 383px;
    width: 10.460251046025105vw;
    height: 100px;
}
	
	
	
	
}

#arg2 {
    position: sticky;
    left: 2340px;
    top: 800px;
    min-width: 10.460251046025105vw;
    width: 10.460251046025105vw;
    min-height: 100px;
    height: 64.51612903225806vh;
    display: block;
    z-index: 819;
    x-overflow: hidden;
}
#replacement {
    position: sticky;
    left: 2345px;
    top: 500px;
    min-width: 10.460251046025105vw;
    width: 10.460251046025105vw;
    min-height: 100px;
    height: 64.51612903225806vh;
    display: block;
    z-index: 818;
    x-overflow: hidden;
}


div#topspacer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    width: 100%;
    top: 7vh;
}



div#spotlightlogo {
    max-width: 100%;
    display: flex;
    padding-right: 1vw;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    z-index: 620;
}
div#spotlightlogo img {
    max-width: 19vw;
    display: flex;
    flex-direction: row-reverse;
    align-content: space-between;
    justify-content: space-between;
    /* align-items: stretch; */
    width: 19vw;
flex-wrap: wrap;
}

#entrancesign img {
    width: 23vw;
    min-width: 10vw;
    /* height: 8vh; */
    min-height: 1%;
    position: absolute;
    display: flex;
    
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

div#centerstagecontainer {
    /* top: 11vh; */
    display: flex;
    /* position: absolute; */
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-evenly;
}

div#allxsquares {
    position: absolute;
    left: 10vw;
}

/******************************************
## showcase logo ##
******************************************/

div#showcaselogoflexouter {
    position: relative;
    display: flex;
    /* width: 100%; */
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: center;
    align-items: stretch;
}
div#showcaseflexinner {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: stretch;
    /* background-color: white; */
    /* opacity: 18%; */
    /* border-radius: 100px; */
    /* box-shadow: 0 0 8px #ea4c89, inset 0 0 8px #ea4c89; */
    filter: drop-shadow(0 0 0.75rem rgb(263, 0, 0));
    /* cursor: pointer; */
    -webkit-animation: pulse 2s linear 1s infinite;
}

div#showcaselogo {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-end;
    width: 100%;
    height: auto;
    align-items: flex-end;
}



div#showcaselogo img {
    display: flex;
    position: relative;
    width: 7vw;
    /* top: -52vh; */
    /* left: 9vw; */
    flex-wrap: wrap;
    align-content: center;
}


/******************************************
## Renamon pointing and stan button ##
******************************************/


div#stanpointerflexer {
    display: flex;
    /* left: 20vw; */
    position: relative;
    width: 60vw;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: flex-end;
    align-items: center;
}
div#stanflexerdiv {
    display: flex;
    width: 10%;
    height: 22vh;
}

div#pointerpackage {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    /* top: 10vh; */
    flex-basis: min-content;
    flex-grow: 1;
    height: 20vh;
}


#pointingrenamon {
    /* left: 0; */
    /* top: 20vh; */
    position: relative;
    min-width: 170px;
    width: 100%;
    min-height: 186px;
    /* height: 186px; */
    display: flex;
    z-index: 2;
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* align-content: flex-end; */
    /* justify-content: space-around; */
    /* align-items: flex-start; */
}
div#pointingrenamon img {
    /* left: 50vw; */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: space-between;
    flex-direction: row;
}div#pointingrenamon img {
    /* left: 50vw; */
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 14vw;
    /* height: 41vh; */
    align-content: space-between;
    flex-direction: row;
    max-width: fit-content;
    max-width: -webkit-fill-available;
    max-height: fit-content;
}
 
div#pointingrenamondiv {
    display: flex;
    position: relative;
    width: 9vw;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
} 


div#hailstan {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    position: relative;
    /* top: 97vh; */
    right: 0vw;
    /* width: 100%; */
    justify-content: center;
}
#hailstan a {
    font-family: 'adler';
    display: flex;
    font-size: 1rem;
    text-align: center;
    /* left: 58.4vw; */
    position: relative;
    border: 1px solid #cccccc;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    color: #000000;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    background: #ff0000 url(../gallery/vengelogo.png) no-repeat scroll center center;
    flex-wrap: wrap;
    /* align-content: center; */
    /* justify-content: center; */
    align-items: center;
    flex-direction: row;
}

div#flicker {
    min-width: 52.30125523012552vw;
    width: 100%;
    height: 40.387164vh;
    z-index: 598;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: flex-end;
}
div#carouselcontainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
    align-items: stretch;
    width: 100%;
}



div#videoflexer {
    position: relative;
    /* top: 40vh; */
    /* right: 19vw; */
    display: flex;
    width: 100%;
    flex-direction: row;
    align-content: flex-end;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
/******************************************
## NEWS, PROJECTS, UPDATES, MEDIA, ALL ##
******************************************/
div#tabcontainer {
    display: flex;
    position: relative;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    z-index:7;
}
div#tabflexer {
    display: flex;
    /* width: 100%; */
    padding-bottom: 25vw;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.topfuf {
    display: flex;
    overflow: auto;
    overflow-wrap: anywhere;
}	
nav.pure-drawer {
    background: rgb(21 20 21 / 55%);
}


div#split1 {
    /* display: flex; */
    padding-right: 1vw;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-shrink: 0; */
    /* position: relative; */
    /* left: 0.5vw; */
    position: relative;
    z-index: 641;
    /* width: 9vw; */
    display: flex;
    /* right: 305px; */
    /* left: 69vh; */+
    /* top: 3vh; */
    flex-direction: row;
    flex-shrink: 0;
    align-content: center;
}

div#split2 {
    /* display: flex; */
    padding-right: 1vh;
   /* flex-wrap: wrap; */
    /* position: relative; */
   /* right: 0.3vw; */
    /* flex-shrink: 0; */
    position: relative;
    z-index: 641;
    /* width: 9vw; */
    display: flex;
    /* right: 305px; */
    /* left: 69vh; */
    /* top: 3vh; */
   flex-direction: row;
   flex-shrink: 0;
   align-content: center;
   align-items: center;
}

div#discordrena {
}

div#iconpackageflexer {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    /* left: 10vw; */
    justify-content: flex-end;
    position: relative;

}

.iconplacer {
    z-index: 9999;
    /* width: 11vw; */
    display: flex;
    position: relative;
    /* left: 36.165272vw; */
    flex-shrink: 0;
    /* top: -1.0351966873706004vh; */
    flex-direction: row-reverse;
    flex-wrap: nowrap;
	overflow:hidden;
    align-content: space-between;
    justify-content: space-evenly;
    align-items: stretch;
}

/******************************************
## renamon.org logo footer ##
******************************************/
div#websitelogo {
    display: flex;
    width: 100%;
    align-content: stretch;
    align-items: stretch;
    flex-direction: row;
}

div#bottomlogoflexouter {
    width: 25%;
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    justify-content: flex-end;
    flex-wrap: wrap;
}

div#bottomflexinner {}


div#rlogo img {
    position: relative;
    width: 33%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}
/******************************************S
## CNC logo ##
******************************************/

div#cookielogo {
    display: flex;
    width: 10%;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    align-content: flex-start;
    flex-direction: row;
    padding-left: 4vw;
}

div#bottomcookieflexouter {
    /* width: 50%; */
    display: flex;
    position: relative;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
}
div#cookieflexinner {}



div#cookielogo img {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    align-content: flex-end;
    justify-content: flex-start;
    flex-direction: row;
}
div#egglogo {
    /* width: 100%; */
    /* height: 100%; */
}



div#rlogo {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: flex-start;
}
div#flexmiddle {
    display: flex;
    position: relative;
    width: 100%;
}
div#middlemiddle {
    display: flex;
    position: relative;
    width: 86%;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

img#pillarcentertopimage1 {
    width: 11.6vw;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

img#pillarcenter2topimage {
    width: 11.6vw;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
}

div#pillercenterlongtop1inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

div#centerpillarcontainer {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;/* width: 10vw; */position: relative;}

div#pillarcentertop1container {
    display: flex;
    /* padding-top: 1.2vh; */
    width: 50vw;
    top: 0.3vh;
    height: 1vh;
    position: absolute;
    left: 0vw;
    align-content: flex-start;
}

div#pillarcentertop2 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    right: 19vw;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    top: 0vh;
}

div#pillarcentertop3 {
    display: flex;
    position: relative;
    width: 11.6vw;
}

img#pillarcenter3image {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    align-content: center;
}

div#block1 {
    display: flex;
    flex-wrap: nowrap;
    width: 2vw;
    align-items: stretch;
    position: absolute;
    left: -7vw;
    top: -1vh;
    height: 47vh;
    flex-direction: column;
}

div#block1inner {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-basis: fit-content; */
    position: absolute;
    height: 5vh;
    align-items: stretch;
    justify-content: space-evenly;
    align-content: stretch;
}

img#block1innerimg {
    display: flex;
    flex-basis: fit-content;
    flex-direction: row;
    width: 130%;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    z-index: 800;
    /* top: -5vh; */
    position: absolute;
}

div#block2 {display: flex;flex-wrap: nowrap;width: 2vw;flex-direction: column;right: -45.3vw;position: absolute;align-items: stretch;top: 1.3vh;}

div#block2inner {display: flex;width: 100%;position: absolute;flex-direction: row;flex-wrap: nowrap;align-content: stretch;justify-content: center;/* height: 0vh; */top: 2.5vh;align-items: center;/* flex-basis: fit-content; */}

img#block2innerimg {
    display: flex;
    flex-basis: fit-content;
    flex-direction: row;
    width: 130%;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    z-index: 800;
    top: -5vh;
    position: absolute;
}





div#block3 {display: flex;/* flex-wrap: nowrap; */width: 2vw;align-items: stretch;bottom: -53.4vh;flex-direction: column;position: absolute;left: -7vw;}

div#blockinner3 {display: flex;width: 100%;flex-direction: row;flex-wrap: nowrap;align-content: stretch;justify-content: center;align-items: center;/* flex-basis: fit-content; */}

img#blockinnerimage3 {
    display: flex;
    flex-basis: fit-content;
    flex-direction: row;
    width: 130%;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    z-index: 800;
    top: -9vh;
    position: absolute;
}

div#block4 {display: flex;flex-wrap: nowrap;width: 2vw;flex-direction: column-reverse;right: -31.3vw;position: absolute;right: -45.3vw;align-items: stretch;bottom: -51.8vh;}

div#blockinner4 {display: flex;width: 100%;flex-direction: row;flex-wrap: nowrap;align-content: stretch;justify-content: center;align-items: center;/* flex-basis: fit-content; */}



div#vurtdivinner {
    display: flex;
    position: absolute;
    align-items: stretch;
    align-content: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    /* height: 46vh; */
    width: 100%;
    justify-content: space-around;
}

img#pillarvurtimage2 {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    height: 47vh;
    align-items: center;
    width: 0.4vw;
    flex-direction: column;
}

div#virtdivinner {
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    /* height: 46vh; */
    width: 100%;
}

img#pillarvertical1img {
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    height: 47vh;
    align-items: center;
    width: 0.4vw;
    flex-direction: column;
}



div#midpillarcontainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    width: fit-content;
    /* height: 49vh; */
    top: 23.7vh;
    align-content: center;
}

div#midmidpillars {
    display: flex;
    /* padding-top: 1.2vh; */
    flex-direction: row;
    width: 50.4vw;
    height: 1vh;
    left: -6vw;
    position: absolute;
    align-content: center;
    align-items: center;
    /* left: 2.66vw; */
}

div#pillarcenter4 {
    display: flex;
    position: absolute;
    flex-direction: row;
    height: 1vh;
    flex-wrap: nowrap;
    align-content: space-between;
    align-items: stretch;
    justify-content: space-around;
}

div#pillarcenterinner4 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

img#pillarcenterimage4 {
    width: 12.8vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

div#pillercenter5 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    height: 1vh;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 12vw;
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
}

img#pillarcenterimage5 {
    width: 13vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-around;
    align-items: stretch;
}

div#pillarcenter6 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    height: 1vh;
    flex-direction: row;
    left: 16vw;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
}

img#pillarcenterimage6 {
    display: flex;
    flex-direction: row;
    width: 12.75vw;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}



img#pillarcentertopimage1 {
    width: 11.6vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 1vw;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    top: ;
}

img#pillarcenter2topimage {
    width: 11.6vw;
    position: absolute;
    display: flex;
    align-content: space-around;
    flex-direction: row;
}

div#pillercenterlongtop1inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

div#centerpillarcontainer {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;/* width: 10vw; */position: absolute;left: 10vw;}

div#pillarbottomcontainer {
    display: flex;
    /* padding-top: 1.2vh; */
    flex-direction: row;
    width: 11.6vw;
    height: fit-content;
    justify-content: flex-start;
    position: relative;
    align-content: flex-start;
}



div#pillarcentertop3 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    right: 0vw;
}

img#pillarcenterimage7 {
    width: 11.6vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}


img#pillarcenterimage8 {
    width: 11.6vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
}

img#pillarcenterimage9 {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}



div#bottompillarflexcontainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    position: absolute;
    width: 49vw;
    left: -4.8vw;
    height: 1vh;
    bottom: -47.4vh;
    align-content: space-between;
}

div#bottomcenterpillars {
    display: flex;
    /* padding-top: 1.2vh; */
    flex-direction: row;
    width: 45.6vw;
    height: fit-content;
    justify-content: flex-start;
    position: absolute;
    align-content: flex-start;
    align-items: flex-start;
}

div#pillarcenter7 {
    display: flex;
    /* padding-top: 1.2vh; */
    flex-direction: row;
    width: 11.6vw;
    height: fit-content;
    justify-content: flex-start;
    position: absolute;
    align-content: flex-start;
}

div#pillarcenterinner7 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}



img#blockinnerimage4 {
    display: flex;
    flex-basis: fit-content;
    flex-direction: row;
    width: 130%;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: center;
    align-items: center;
    z-index: 800;
    top: -7.4vh;
    position: absolute;
}



div#middle_pictures {
    display: flex;
    width: 50vw;
    /* height: 11vh; */
    position: absolute;
    top: 2.5vh;
    left: 4vw;
    align-items: stretch;
    justify-content: space-evenly;
    flex-shrink: 1;
    flex-wrap: wrap;
    align-content: stretch;
    flex-direction: row;
}



div#threelayersdeep {
    display: flex;
    flex-wrap: nowrap;
    align-content: space-between;
    /* flex-direction: row; */
    left: 1vw;
    position: absolute;
    align-items: stretch;
    justify-content: flex-start;
}


div#box3wrapper {
    display: flex;
}

img#biggo2img {
    display: flex;
}

div#box4wrapper {
    display: flex;
}

img#biggo4img {
    display: flex
}

div#box5wrapper {
    display: flex;
}

div#box6wrapper {
    display: flex;
}

img#biggo5img {
    display: flex;
}

div#box7wrapper {
    display: flex;
}

img#biggo6img {
    display: flex;
}

img#biggo7img {
    display: flex;
}

div#glitchslot {
    display: flex;
}

div#showcase1adjust {
    position: absolute;
    padding-top: 12px;
    left: 1.3vw;
    display: flex;
    width: 100%;
    flex-shrink: 1;
    height: 56vh;
    align-items: baseline;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
    /* z-index: 2; */
}
div#showcase2adjust {
    position: absolute;
    padding-top: 12px;
    /* left: 3.3vw; */
    display: flex;
    width: 100%;
    flex-shrink: 1;
    height: 56vh;
    align-items: baseline;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
}
div#showcase3adjust {
    position: absolute;
    padding-top: 12px;
    /* left: 3.3vw; */
    display: flex;
    width: 100%;
    flex-shrink: 1;
    height: 56vh;
    align-items: baseline;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
}
div#showcase4adjust {
    position: absolute;
    padding-top: 12px;
    /* left: 3.3vw; */
    display: flex;
    width: 100%;
    flex-shrink: 1;
    height: 56vh;
    align-items: baseline;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
}
div#showcase5adjust {
    position: absolute;
    padding-top: 12px;
    /* left: 3.3vw; */
    display: flex;
    width: 100%;
    flex-shrink: 1;
    height: 56vh;
    align-items: baseline;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
}



div#pillarcenterinner8 {
    position: absolute;
    display: flex;
    right: 27vw;
}

div#pillarcenterinner9 {
    display: flex;
    position: absolute;
    left: 36vw;
}

div#pillarcentertop5inner {
    display: flex;
    position: absolute;
    /* left: 11vw; */
}

div#pillarcenterinner6 {
    display: flex;
    position: absolute;
    /* left: 21.8vw; */
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 1vh;
}

	

div#centerpillarflexcont {display: flex;flex-direction: row;align-content: stretch;justify-content: space-evenly;flex-wrap: nowrap;position: absolute;width: 50vw;height: 1vh;/* top: 1.4vh; */left: -6vw;align-items: stretch;}







div#box2wrapper {
    display: flex;
}

.tabs {
    display: flex;
}

div#middle_pictures {}
#spotabove{
  display:flex;
  top: 32vh;
  /* width: 25vw; */
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-around;
  align-items: stretch;
}

.spotinfo{display: flex;position: absolute;z-index:0;opacity: 0;flex-direction: column;flex-wrap: nowrap;align-content: center;align-items: center;justify-content: center;pointer-events: none;}


        .accordion {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            /* min-height: 400px; */
            overflow: hidden;
            /* background-color: #ffffff; */
            /* border-radius: 10px; */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            align-content: center;
            justify-content: center;
            align-items: stretch;
        }
        #1-1.accordion-item {
            flex: 1 1 calc(25% - 10px);
            /* min-width: 150px; */
            height: 22vh;
            margin-bottom: 9px;
            /* position: relative; */
            /* transition: all 0.3s ease; */
            overflow: hidden;
            /* overflow-y: scroll; */
        }
        .accordion-item {
            flex: 1 1 calc(25% - 10px);
            /* min-width: 150px; */
            height: 22vh;
            margin-bottom: 9px;
            /* position: relative; */
            /* transition: all 0.3s ease; */
            overflow: hidden;
            /* overflow-y: scroll; */
        }
        .accordion-item input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }
        .accordion-item input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        .accordion-item label {
            display: flex;
            width: 100%;
            height: 100%;
            cursor: pointer;
            flex-direction: row;
            align-content: space-between;
            justify-content: space-around;
            align-items: stretch;
        }

        .accordion-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .accordion-item:hover img {
            transform: scale(1.05);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .accordion-item input[type="checkbox"]:checked + label {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }


        .accordion-item input[type="checkbox"]:checked {
             position: absolute; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
        }
        .accordion-item .spotinfo input[type="checkbox"]:checked {
             position: absolute; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 5;
			pointer-events:auto;
        }

        .accordion-item input[type="checkbox"]:checked ~ .accordion-item {
            flex: 0 1 auto;
            width: 0;
            height: 0;
            margin: 0;
            padding: 0;
            opacity: 0;
        }

        .accordion-item input[type="checkbox"]:checked::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1;
        }

        .accordion-item input[type="checkbox"]:checked + label img {
            position: absolute;
            top: 32vh;
            left: 26vw;
            transform: translate(-50%, -50%);
            max-width: 90vw;
            max-height: 90vh;
            min-height: 1vh;
            min-width: 1vw;
            object-fit: contain;
            z-index: 15;
            display: flex;
            align-content: space-between;
            justify-content: space-around;
            align-items: stretch;
            flex-direction: column;
        }

        @keyframes zoomOutCentered {
            0% {
                transform: scale(5);
                opacity: 1;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .accordion-item input[type="checkbox"]:not(:checked) + label img.zooming-out {
            animation: zoomOutCentered 0.3s ease forwards;
        }

        @media (max-width: 768px) {
            .accordion-item {
                flex: 1 1 calc(50% - 10px);
            }
        }

        @media (max-width: 480px) {
            .accordion-item {
                flex: 1 1 100%;
            }
        }


     
        .accordion-item .title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 1em;
            transition: opacity 0.3s ease;
            text-align: center;
        }
        .accordion-item input[type="checkbox"]:checked + label .title {
            opacity: 0;
        }
  
        .accordion-item input[type="checkbox"]:checked + label h6.headerchanger {
          z-index:100;
          opacity: 1;
          box-shadow: aliceblue;
          color: #a3a3a3;
          text-shadow: rgb(51 51 51) 6px 5px 0px;
          background: #333333d4;
          font-size: 1.68em;
          top: -1.6vh;
          /* left: 1.5vw; */
          pointer-events:auto;
          position: absolute;
        }

.accordion-item input[type="checkbox"]:checked + label .spotinfo {
          z-index:100;
          /* border: 11px solid #0b060ab3; */
          /* border-radius: 50px; */
          box-shadow: aqua;
          opacity: 1;
          background: #0b060ab3;
          text-shadow: rgb(0 255 39) 0px 0px 8px;
          color: #fe00ef;
          font-size: 1.5em;
          top: 3.4vh;
          left: 1.5vw;
          pointer-events:auto;
          /* padding: 3vh; */
        }

        .accordion-item input[type="checkbox"]:unchecked + label .spotinfo {
            z-index:0;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;

        }
        .accordion-item input[type="checkbox"]:checked ~ .accordion-content {
            max-height: 200px;
             z-index: 16;
        }

        .accordion-item input[type="checkbox"]:checked ~ .spotinfo {
            max-height: 200px;
             z-index: 100;
        }
       .accordion-item input[type="checkbox"]:checked ~ .accordion-content p {
            max-height: 200px;
             z-index: 16;
        }
        .accordion-content p {
            margin: 0;
            padding: 15px;
        }
        /* Glow effect on hover */



.accordion-item {
    background:inherit;
}

.accordion-item {
    border:none;    
}

div#updatecontainer {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
    flex-shrink: 1;
    position: absolute;
    width: 43vw;
    height: 53vh;
}

div#pillarcenter10 {
    display: flex;
    position: absolute;
    left: 26vw;
}

img#pillarcenterimage10 {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

div#pillarcenter11 {
    display: flex;
    position: absolute;
    left: 8vw;
}

img#pillarcenterimage11 {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

img#pillarcenter12topimage {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    align-content: center;
}

img#pillarcenter13topimage {
    display: flex;
    flex-direction: row;
    width: 11.6vw;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    align-content: center;
}

div#pillarcentertop12 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    right: 28vw;
}

div#pillarcentertop13 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    right: 11vw;
}

div#pillarcenter14 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    height: 1vh;
    flex-direction: row;
    left: 31.7vw;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
}

div#pillarcenterinner14 {
    display: flex;
    position: absolute;
    /* left: 21.8vw; */
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    height: 1vh;
}

img#pillarcenterimage14 {
    display: flex;
    flex-direction: row;
    width: 12.75vw;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

div#pillarcenter15 {
    display: flex;
    position: absolute;
    width: 11.6vw;
    height: 1vh;
    flex-direction: row;
    left: 24.7vw;
    align-content: space-between;
    justify-content: space-around;
    align-items: stretch;
}

img#pillarcenterimage15 {
    display: flex;
    flex-direction: row;
    width: 12.75vw;
    position: absolute;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}