/* 
Author: Nikhil Pai Ganesh
*/

#butt7 {
    position:absolute;
    top: 440px;
    left: 2200px;
/* }
#fruit2 {
    position:absolute;
    top: 440px;
    left: 2310px; */
}

#butt3 {
    position:absolute;
    top: 500px;
    left: 2200px;
}

/* #OCGE2 {
    position:absolute;
    top: 500px;
    left: 2310px;
} */

#butt4 {
    position:absolute;
    top: 560px;
    left: 2200px;
}
/* #Gifts2 {
    position:absolute;
    top: 560px;
    left: 2310px;
} */

#butt5 {
    position:absolute;
    top: 620px;
    left: 2200px;
}

/* #SGT2 {
    position:absolute;
    top: 620px;
    left: 2310px;
} */

#butt6 {
    position:absolute;
    top: 680px;
    left: 2200px;
}
/* #last2 {
    position:absolute;
    top: 680px;
    left: 2310px;
} */


#butt1 {
    position:absolute;
    top: 300px;
    left: 2120px;
}
/* 
#butt{
    height: 200px;
    width: 500px;
    font-size: 60px;
    position: absolute;
    left: 2500px;
    top: 135px;
} */


#wheel {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#info {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#one {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}


#two {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#three {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#four {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#five {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#six {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#seven {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#eight {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#nine {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#ten {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#eleven {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#twelve {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#thirteen {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#fourteen {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#fifteen {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#sixteen {
    position:absolute;
    top: -20px;
    left: -20px;
    transform-origin: centre;
}

#seventeen {
    position:absolute;
    top: -10px;
    left: -30px;
    transform-origin: centre;
}

#eighteen {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#nineteen {
    position:absolute;
    top: -5px;
    left: -30px;
    transform-origin: centre;
}

#twenty {
    position:absolute;
    top: -10px;
    left: -30px;
    transform-origin: centre;
}

#twentyone {
    position:absolute;
    top: -10px;
    left: -30px;;
    transform-origin: centre;
}

#twentytwo {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#twentythree {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#twentyfour {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}



#Headings {
  position:absolute;
  top: 430px;
  left: 1650px;
  color: black;
  text-align: right;
}

/* #ocge {
  position:absolute;
  top: 490px;
  left: 1660px;
  color: black;
  text-align: center;
}

#gifts {
  position:absolute;
  top: 550px;
  left: 1875px;
  color: black;
  text-align: center;
}

#sgt {
  position:absolute;
  top: 607px;
  left: 1800px;
  color: black;
  text-align: center;
}

#other {
  position:absolute;
  top: 665px;
  left: 2100px;
  color: black;
  text-align: center;
} */

#Charity {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Chastity {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Faithfulness {
    position:absolute;
    top: -20px;
    left: -10px;
    transform-origin: centre;
}


#Generosity {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Gentleness {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Goodness {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Joy {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Kindness {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Modesty {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Patience {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#Peace {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}

#SelfControl {
    position:absolute;
    top: -20px;
    left: -30px;
    transform-origin: centre;
}




.modal {
z-index:1;
display:none;
position:absolute;
left:500;
top:500;
width:100%;
height:100%;
overflow:auto;

}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
/* -webkit-backface-visibility:hidden */
}


.close {
text-decoration:none;float:right;font-size:10000px;font-weight:bold;color:white; z-index:1; visibility:hidden
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   
  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

#Faithfulness2 {
opacity: 0.5;
    top: -20px;
    left: -30px;
}


#Courage2 {
  position:absolute;
opacity: 0;
    top: 5px;
    left: 211px
}

#Humility2 {
position:absolute;
opacity: 0;
    top: 5px;
    left: 211px
}

#Truth2 {
position:absolute;
opacity: 0;
    top: 5px;
    left: 211px
}



#assets{
    position: relative;
}

#pointer{
    position: absolute;
    left: 730px;
    top: -100px;
    z-index: 2;
}

#info-text{
    background-color: lightcoral;
    width: 1600px;
    height: 830px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 750px;
    left: 1700px;
    display: block;
    font-size: 2em;
}

#jan{
    background-color: #f4cc0b;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#jan h1{
text-align: center;
font-size: 3em;
}

#jan ul{
    text-align: left;
    font-size: 2em;
    }
#jan ul a{
    color: black;
}

#feb{
    background-color: #1ce74c;
    width: 600px;
    height: 450px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#feb h1{
text-align: center;
font-size: 3em;
}

#feb ul{
    text-align: left;
    font-size: 2em;
    }
#feb ul a{
    color: black;
}

#mar{
    background-color: #B19CD9;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#mar h1{
text-align: center;
font-size: 3em;
}

#mar ul{
    text-align: left;
    font-size: 2em;
    }
#mar ul a{
    color: black;
}

#apr{
    background-color: #f4cc0b;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#apr h1{
text-align: center;
font-size: 3em;
}

#apr ul{
    text-align: left;
    font-size: 2em;
    }
#apr ul a{
    color: black;
}

#may{
    background-color: skyblue;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#may h1{
text-align: center;
font-size: 3em;
}

#may ul{
    text-align: left;
    font-size: 2em;
    }
#may ul a{
    color: black;
}

#jun{
    background-color: #1ce74c;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#jun h1{
text-align: center;
font-size: 3em;
}

#jun ul{
    text-align: left;
    font-size: 2em;
    }
#jun ul a{
    color: black;
}

#sep {
    background-color: #1ce74c;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#sep h1{
text-align: center;
font-size: 3em;
}

#sep ul{
    text-align: left;
    font-size: 2em;
    }
#sep ul a{
    color: black;
}

#oct{
    background-color: skyblue;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#oct h1{
text-align: center;
font-size: 3em;
}

#oct ul{
    text-align: left;
    font-size: 2em;
    }
#oct ul a{
    color: black;
}

#nov{
    background-color: #1ce74c;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#nov h1{
text-align: center;
font-size: 3em;
}

#nov ul{
    text-align: left;
    font-size: 2em;
    }
#nov ul a{
    color: black;
}

#dec{
    background-color: #B19CD9;
    width: 600px;
    height: 400px;
    border: 1px;
    padding: 50px;
    margin: 20px;
    position:absolute;
    top: 800px;
    left: 2000px;
    display: none;
}

#dec h1{
text-align: center;
font-size: 3em;
}

#dec ul{
    text-align: left;
    font-size: 2em;
    }
#dec ul a{
    color: black;
}