body
{
max-width: 100%;
text-align: center;
background-color: white;
background-image:url('notebook1b.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
}

h1 {font-family: 'Griffy', cursive; font-size:55px; color:white; text-align:center}
h2 {font-family: 'MedievalSharp', cursive; font-size:25px; color:white; text-align:center}
h3 {font-family: 'Slabo 27px', serif; font-size:65px; color:white; text-align:center}
h4 {font-family: 'Slabo 27px', serif; font-size:45px; color:white; text-align:center}
h5 {font-family: 'Slabo 27px', serif; font-size:45px; color:white; text-align:center}
h6 {font-family:arial,sans-serif; font-size:10px; color:gray; text-align:right}
link {font-family:helvetica,sans-serif; font-size:12px; color:black}
p {font-family:arial,sans-serif; font-size:14px; color:black; text-align:center}

a:link { text-decoration: none}

a {
-webkit-transition:color 0.5s linear;
}
a:hover{
color:gray;
}

h3 {
text-shadow: 1px 1px 3px black;
}
 
h5 {
text-shadow: 1px 1px 3px black;
}

bodytemp
{
background-color:white;
background-image:url('greytransbr3.png');
background-size: 100%;
background-repeat:no-repeat; background-attachment:fixed; background-position:left top;
}

#background{
position:absolute;
height:100%
width:00%
margin: 0;
padding: 0;
}

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform 7.8s ease-in-out;
  transition: transform 7.8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}


#tab1 {
  position: absolute;
	top:15%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab1:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab2 {
  position: absolute;
	top:20%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab2:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab3 {
  position: absolute;
	top:25%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab3:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab4 {
  position: absolute;
	top:30%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab4:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab5 {
  position: absolute;
	top:35%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab5:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab6 {
  position: absolute;
	top:40%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab6:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab7 {
  position: absolute;
	top:45%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab7:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}
#tab8 {
  position: absolute;
	top:50%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab8:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}

#tab9 {
  position: absolute;
	top:55%;
  right: 94%;
  width: 30%;
  z-index: 1;
padding: 2%;
background-color: gray;
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
    -webkit-transition: 4s ease-in-out;
    -moz-transition: 4s ease-in-out;
    -o-transition: 4s ease-in-out;
    transition: 4s ease-in-out;
}
#tab9:hover {
  z-index: 10;
      -webkit-transform: translate(12em,0);
    -moz-transform: translate(12em,0);
    -o-transform: translate(12em,0);
    -ms-transform: translate(12em,0);
    transform: translate(12em,0);
}






#turner3 {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  border-radius: 50%;
  -webkit-transition: -webkit-transform 15.8s ease-in-out;
  transition: transform 15.8s ease-in-out;
}
#turner3:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

#turner3b {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  border-radius: 50%;
  -webkit-transition: -webkit-transform 15.8s ease-in-out;
  transition: transform 15.8s ease-in-out;
}

#turner3b:hover + #slider1 {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

#slider1 {
    -webkit-transition: 6s ease-in-out;
    -moz-transition: 6s ease-in-out;
    -o-transition: 6s ease-in-out;
    transition: 6s ease-in-out;
}
#slider1:hover {
      -webkit-transform: translate(25em,0);
    -moz-transform: translate(25em,0);
    -o-transform: translate(25em,0);
    -ms-transform: translate(25em,0);
    transform: translate(25em,0);
}

#turner3c {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  border-radius: 50%;
  -webkit-transition: -webkit-transform 15.8s ease-in-out;
  transition: transform 15.8s ease-in-out;
}

#turner3c:hover + #slider2 {
      -webkit-transform: translate(25em,0);
    -moz-transform: translate(25em,0);
    -o-transform: translate(25em,0);
    -ms-transform: translate(25em,0);
    transform: translate(25em,0);
}

#slider2 {
    -webkit-transition: 6s ease-in-out;
    -moz-transition: 6s ease-in-out;
    -o-transition: 6s ease-in-out;
    transition: 6s ease-in-out;
}


  #slider4 {
	position: relative;
	left: -100em;
    -webkit-transition: 10s ease-in-out;
    -moz-transition: 10s ease-in-out;
    -o-transition: 10s ease-in-out;
    transition: 10s ease-in-out;
  }
  #act:hover ~ #slider4 {
      -webkit-transform: translate(1em,0);
    -moz-transform: translate(1em,0);
    -o-transform: translate(1em,0);
    -ms-transform: translate(1em,0);
    transform: translate(1em,0);
    left: calc(1% - 1px);
  }

  #slider4b {
	opacity: 0;
    -webkit-transition: 5s ease-in-out;
    -moz-transition: 5s ease-in-out;
    -o-transition: 5s ease-in-out;
    transition: 5s ease-in-out;
  }
  #act:hover ~ #slider4b {
      -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }
  
#slider5 {
	position: relative;
	right: 10  em;
    -webkit-transition: 8s ease-in-out;
    -moz-transition: 8s ease-in-out;
    -o-transition: 8s ease-in-out;
    transition: 8s ease-in-out;
  }
  #act2:hover + #slider5 {
      -webkit-transform: translate(-50px,0);
    -moz-transform: translate(-50px,0);
    -o-transform: translate(-50px,0);
    -ms-transform: translate(-50px,0);
    transform: translate(-50px,0);
    right: calc(100% - 102px);
  }

  #slider5b {
	opacity: 0;
    -webkit-transition: 5s ease-in-out;
    -moz-transition: 5s ease-in-out;
    -o-transition: 5s ease-in-out;
    transition: 5s ease-in-out;
  }
  #act2:hover ~ #slider5b {
      -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }

  #slider6 {
	opacity: 0;
    -webkit-transition: 5s ease-in-out;
    -moz-transition: 5s ease-in-out;
    -o-transition: 5s ease-in-out;
    transition: 5s ease-in-out;
  }
  #act3:hover ~ #slider6 {
      -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }

  #slider7 {
	opacity: 0;
    -webkit-transition: 5s ease-in-out;
    -moz-transition: 5s ease-in-out;
    -o-transition: 5s ease-in-out;
    transition: 5s ease-in-out;
  }
  #act4:hover ~ #slider7 {
      -webkit-opacity: 1;
    -moz-opacity: 1;
    -o-opacity: 1;
    -ms-opacity: 1;
    opacity: 1;
  }


  #act3:hover + #slider4 {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
    left: calc(100% - 102px);
  }


  #act4:hover + #slider4 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
    left: calc(100% - 102px);
  }


#para1
{
text-align:center;
color:red;
}

#surround {
width: 80%;
-moz-box-shadow: 5px 5px 5px 2px #575757;
	-webkit-box-shadow: 5px 5px 5px 2px #575757;
	box-shadow: 5px 5px 5px 2px #575757;
border:10px solid white;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
overflow: auto;
margin-left: auto;
margin-right: auto;
}

#top {
width: 90%;
height: 100%;
overflow: auto;
}

#contact {
width: 100%;
background-image:url('greytransbr3.png');
overflow: auto;
}

#contact2 {
width: 100%;
background-image:url('greytransbr3.png');
border-style:solid;
border-bottom:solid white;
overflow: auto;
}

#main {
min-width: 550px;
max-width: 740px;
height: 90%;
background-image:url('guitarpan5.png');
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:5px solid white;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
overflow: auto;
}

#inter {
min-width: 30%;
max-width: 80%;
height: 30%;
padding: 3%;
background-image:url('graytrans3.png');
-moz-box-shadow: 5px 5px 5px 2px #777777;
	-webkit-box-shadow: 5px 5px 5px 2px #777777;
	box-shadow: 5px 5px 5px 2px #777777;
border:15px solid white;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}


#main2 {
width: 100%;
height: 25%;
background-image:url('brushed-metal-texturered1.jpg');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#mountainroad {
width: 85%;
height: 80%;
padding: 40px;
background-image:url('forestmtnroad1.jpg');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border:10px solid white;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#magnolia {
width: 85%;
height: 80%;
padding: 40px;
background-image:url('ghostwoods4sp.png');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border:10px solid white;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#sideb {
width: 50%;
height: 80%;
padding: 20px;
background-image:url('brushed-metal-texturered1.jpg');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border:10px solid white;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#around {
width: 35%;
height: 80%;
padding: 20px;
text-align: center;
background-image:url('oldback1.png');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border:15px #8C7A70;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#around1 {
width: 45%;
padding: 30px;
text-align: center;
background-image:url('oldback1.png');
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
border:15px #8C7A70;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#around2 {
position: absolute;
right:10%;
top:5%;
width: 60%;
padding: 5%;
text-align: center;
background-image:url('oodback1b.png');
   -moz-box-shadow:    inset 0 0 20px #000000;
   -webkit-box-shadow: inset 0 0 20px #000000;
   box-shadow:         inset 0 0 20px #000000;
border:0px;
border-radius: 0px 180px 180px 0px;
-moz-border-radius: 180px;
-webkit-border-radius: 180px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin: auto;
}