/*
@media(max-width: 800px) {
 
body{
	background-color: black;
}*/


/*this is the pos of LA pin*/
.LA
{
	position: absolute;
	top: 41vw;
	left: 22vw;
	width: 7vw;
	height: auto;
transition: all .2s ease-in-out;
}


/*this is the expansion of LA pin on hover*/
.LA:hover {
	transition: all .2s ease-in-out;
transform: scale(1.5);
}

/*this is to make sure that the link 
doesn't have a hyperlink color*/
a{
  color: inherit;
  text-decoration: none;
}

/*this is the text of the LA time*/
.LAtext
{
	
	text-align: center;
	font-size: 1vw;
}

/*this is the pos of Paris pin*/
.paris
{
	position: absolute;
	top: 38vw;
	left: 46vw;
	width: 4vw;
	height: auto;
transition: all .2s ease-in-out;
}

/*this is the expansion of the paris pin on hover*/
.paris:hover {
	transition: all .2s ease-in-out;
transform: scale(1.5);
}

/*this is the text of the paris pin*/
.Paristext
{
	
	text-align: left;
	font-size: 1vw;
	text-align: center;
}

/*this is the pos of Tokyo pin*/
.Tokyo
{
	position: absolute;
	top: 40.5vw;
	left: 72vw;
	width: 4vw;
	height: auto;
	transition: all .2s ease-in-out;
}

/*this is the expansion of the tokyo pin on hover*/
.Tokyo:hover {
	transition: all .2s ease-in-out;
transform: scale(1.5);
}

/*this is the text of the tokyo pin*/
.Tokyotext
{
	
	text-align: left;
	font-size: 1vw;
	text-align: center;
}



header{
	background-image: url("Lemons.png");
  background-size: cover;
  font-size: 3vw;
  color: transparent;
  
}

body{
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1vw;
}

#map
{
	width: 120vh;
	height: auto;
	position: absolute;
	top: 45vh;
	left: 25vh;
	/*border: 1vw solid black;*/
}

strong{
	color: #0F847E;
	font-weight: 900;
}




#title
{
	
	letter-spacing: 2vw;
	color: #F4F40F;
	font-size: 4vw;
	font-family: 'Chango', cursive;
	text-shadow: 4px 4px black;
	position: absolute;
	top: 18vw;
	left: 25vw;
}


.logo
{
position: absolute;
width: 10vw;
height: auto;
top: 2vw;
left: 4vh;
}


/*these next few buttons are for the standard menu 
they transition between different colors for text, background and border
I also made sure that the button that describes the page the 
user is on is highlighted.

I made the ease 0s so that the buttons respond quickly and are
more lively.*/
.example_c {
color: black;

text-decoration: none;
text-shadow: 4px 4px #F4F40F;
background: white;
padding: 20px;
border: 4px solid black !important;
display: inline-block;
transition: all 0.4s ease 0s;

/*box-shadow: 25px 25px #FE6F8C;
*/font-size:1.5vw;

}

.example_c.about{
  /*top: 650px;
left: 1450px;
position: absolute;*/

text-shadow: none;
position: absolute;
left: 30vw;
top: 7vw;
}


.example_c.proj{
  /*top: 650px;
left: 1450px;
position: absolute;*/

text-shadow: none;
position: absolute;
left: 40vw;
top: 7vw;
}


.example_c.bucket{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background: black;
text-shadow: none;
position: absolute;
left: 51vw;
top: 7vw;
}


.example_c.bucket:hover{
  /*top: 650px;
left: 1450px;
position: absolute;*/
color: white;
background: black;
border: 4px 4px solid black;
text-shadow: none;
position: absolute;
left: 51vw;
top: 7vw;
}


.example_c.love{
  /*top: 650px;
left: 1450px;
position: absolute;*/

text-shadow: none;
position: absolute;
left: 63vw;
top: 7vw;
}


.example_c:hover {
color: #ffffff !important;
background: black;
border: 4px solid white !important;
transition: all 0.4s ease 0s;
text-shadow: none;

/*box-shadow: 25px 25px #ffffff;*/
/*text-shadow: 2px 2px #F4F40F;*/
}