body{
	height:100%;
	width:100%;
    position:fixed;
}


#arrowCont {
	
position: absolute;
	
width: 100%;
	
height: 12vh;
	
bottom: 10vh;
}



.arrows {
	
height: 80%;
}




#right {
	
float: right;

transform:scale(3,3);
	
opacity: 0.9;
	
margin-right: 10%;
	
background-color: transparent;
	
border-radius: 50%;
	
-webkit-user-select: none;
	
-webkit-touch-callout: none;
}



#left {
	
float: left;

transform:scale(3,3);
	
opacity: 0.9;
	
margin-left: 10%;
	
background-color: transparent;
	
border-radius: 50%;
	
-webkit-user-select: none;
	
-webkit-touch-callout: none;
}


#scoreId {
	
   position: fixed;
   left: 50%;
   transform: translate(-50%, 0);
	
color: white;
width:40%;
text-align:center;

	
bottom: 13.5vh;
	
margin-top: -25px; 
	
font-size: 22px;
	
font-weight:bold;
	
text-shadow:1px 1px 0px black;
}

#mapButton {
    float:left;
    position: fixed;
    left: 0%;
    background-color:white;
    opacity:1;
    width:100%;
    height:100%;
    bottom: 0%;
    margin-top: -25px;
}

#myHeader{
    position: fixed;
    letter-spacing: 2px;
    left: 50%;
    transform: translate(-50%, 0);
    
    background-color:transparent;

    text-align:center;
    bottom: 80%;
    font-size: 40px;
    
    font-weight:bold;
    
    text-shadow:1px 1px 0px black;
}

.myImages{
    position: fixed;
    transform: translate(-50%, 0);
    height:40%;
    width:40%;
    bottom:30%
}

.myTextes{
    position: fixed;
    transform: translate(-50%, 0);
    font-size: 20px;
    font-weight:bold;
    text-align:center;
    letter-spacing: 2px;
}

#myImg1{
    left: 25%;
    border: 1px solid;
    
}

#myImg2{
    left: 75%;
    border: 1px solid;
    opacity:0.5;
}
#img1text{
    left: 25%;
    bottom:71%;
}

#img2text{
    left: 75%;
    bottom:71%;
}
#img3text{
    left: 25%;
    bottom:21%;
    width:40%;
}

#img4text{
    left: 75%;
    bottom:21%;
    width:40%;
    display:none;
}

#imgLocktext{
    left: 75%;
    bottom:44%;
    width:38%;
    color:#ff9900;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

#colorText{
    left: 25.5%;
    bottom:70%;
    opacity:0;
}

#accessoryText{
    left: 25.5%;
    bottom:40%;
    opacity:0;
}

.myColors{
    position: absolute;
    width:8%;
    height:11%;
    bottom:70%;
    float: left;
    margin-left: 10%;
    border-radius: 30%;
}

#greenColor{
    left: 35%;
    border: 3px solid;
    opacity:0;
}

#blueColor{
    left: 50%;
    opacity:0;
    
}

#redColor{
    left: 65%;
    opacity:0;
}

.myAccessories{
    position: absolute;
    width:20%;
    height:30%;
    float: left;
    margin-left: 10%;
    border-radius: 30%;
}

#topHat{
    left: 35%;
    opacity:0;
    bottom:28%;
    border: thick solid transparent;
}

#sunGlasses{
    left: 60%;
    bottom:28%;
    opacity:0;
    border: thick solid transparent;
}

#playAd{
    position: absolute;
    width:7%;
    height:13%;
    float: left;
    border-radius: 30%;
    left: 7%;
    display:none;
    bottom:9%;
}

#playAdApple{
    float:left;
    position: fixed;
    left: 12%;
    display:none;
    bottom:19%;
    transform: translate(-50%, 50%);
    transform:scale(0.5,0.5);
    width:6.5%;
}

#playAdText{
    position: fixed;
    display:none;
    letter-spacing: 2px;
    left: 9%;
    font-family: "Verdana", Times, serif;
    transform: translate(-50%, 50%);
    width:20%;
    background-color:transparent;
    color:black;
    text-align:center;
    bottom: 25%;
    font-size: 20px;
}

#playAdFail{
    position: fixed;
    display:none;
    letter-spacing: 2px;
    left: 10.5%;
    font-family: "Verdana", Times, serif;
    transform: translate(-50%, 50%);
    width:20%;
    background-color:transparent;
    color:red;
    text-align:center;
    bottom: 5%;
    font-size: 10px;
}

#alertMessage{
    left: 65%;
    bottom:60%;
    font-size: 13px;
    font-weight:normal;
    width:34%;
    color:red;
}

#alertMessage2{
    left: 65%;
    bottom:20%;
    font-size: 13px;
    font-weight:normal;
    width:34%;
    color:red;
}


#appleCount {
    
    position: fixed;
    left: 9.2%;
    transform: translate(-50%, 0);
    
    color: black;
    width:40%;
    text-align:center;
    
    top: 10.3vh;
    
    margin-top: -25px;
    
    font-size: 22px;
    
    font-weight:bold;
    
}

#appleCount2 {
    
    position: fixed;
    left: 9.2%;
    transform: translate(-50%, 0);
    
    color: black;
    width:40%;
    text-align:center;
    
    top: 10.3vh;
    
    margin-top: -25px;
    
    font-size: 22px;
    
    font-weight:bold;
    
}

#myApple {
    
    float:left;
    position: fixed;
    left: 1%;
    opacity:1;
    top:6%;
    margin-top: -25px;
    transform:scale(0.5,0.5);
    width:8%;
    
}

#myApple2 {
    
    float:left;
    position: fixed;
    left: 1%;
    opacity:1;
    top:6%;
    margin-top: -25px;
    transform:scale(0.5,0.5);
    width:8%;
    
}

#buyMenu {
    float:left;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 50%);
    background-color:#e6e6e6;
    width:70%;
    height:70%;
    bottom: 50%;
    margin-top: -25px;
    border-radius: 10%;
    border: 1px solid;
    display:none;
}

#buyHeader {
    position: fixed;
    letter-spacing: 2px;
    left: 50%;
    font-family: "Verdana", Times, serif;
    transform: translate(-50%, 50%);
    width:97%;
    background-color:transparent;
    
    text-align:center;
    bottom: 85%;
    font-size: 23px;
}

#buyBlue{
    position: fixed;
    transform: translate(-50%, 50%);
    left:50%;
    bottom:50%;
    height:40%;
    width:40%;
    border-radius: 15%;
}

#buyRed{
    position: fixed;
    transform: translate(-50%, 50%);
    left:50%;
    bottom:50%;
    height:40%;
    width:40%;
    border-radius:15%;

}

#buyTopHat{
    position: fixed;
    transform: translate(-50%, 50%);
    left:50%;
    bottom:49%;
    height:50%;
    width:35%;
    border-radius:15%;
}

#buySunGlasses{
    position: fixed;
    transform: translate(-50%, 50%);
    left:53%;
    bottom:45%;
    height:70%;
    width:55%;
    border-radius:15%;
}

#applePrice{
    position: fixed;
    transform: translate(-50%, 50%);
    left:56%;
    bottom:43%;
    transform:scale(1,1);
    width:8%;
}

#appleText{
    position: fixed;
    letter-spacing: 2px;
    left: 47%;
    font-family: "Verdana", Times, serif;
    transform: translate(-50%, 0);
    width:90%;
    background-color:transparent;
    color:white;
    text-align:center;
    bottom: 42%;
    font-size: 30px;
    
    text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

#fewAppleText{
    position: fixed;
    letter-spacing: 2px;
    left: 50%;
    font-family: "Verdana", Times, serif;
    transform: translate(-50%, 50%);
    width:85%;
    background-color:transparent;
    color:red;
    text-align:center;
    bottom:25%;
    font-size: 15px;
}

.button {
    text-align: center;
    display: inline-block;
    position: fixed;
    transform: translate(-50%, 50%);
    font-family: "Verdana", Times, serif;
    border: 2px solid black;
    letter-spacing: 2px;
    border-radius: 25%;
}

#shopButton {
    left: 50%;
    background-color:#ffcc99;
    font-size: 16px;
    width:30%;
    height:15%;
    bottom: 10%;
    color:#000000;
}

#yesButton {
    left: 30%;
    background-color:#00e600;
    width:30%;
    height:15%;
    bottom: 10%;
    margin-top: -25px;
    color:white;
    font-size: 25px;
    text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

#noButton {
    left: 70%;
    background-color:red;
    width:30%;
    height:15%;
    bottom: 10%;
    margin-top: -25px;
    color:white;
    font-size: 25px;
    text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    
}