#longMenu {
position: relative;
//visibility: hidden;
display: none;

}
#longMenu li a{
font-family: ariel;
display: inline-block;
color:white;
 font-size: 25px;
 margin-top:30px;
}

.box-menu {
   visibility:hidden;
     }

@media screen and (max-width: 850px) {

.nav-menu{
  visibility: hidden;
}
.box-menu {
 	 float:right;
	 height:15px;
	 width:60px;
 	 font-family: 'Poppins', sans-serif;
	 font-size:100px;
  	 border:none;
    // background-color: #972727;
     color:black;
   visibility:unset;
   z-index: 99999;
      }

   .box-menu div{
	     height:20px;
	   	 margin-top:-75px;
		 color: #972727;
    }
 }

*{

// border:1px solid black;

  margin:0;

  padding:0;
        max-width: 100%;

  }


  html {

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

 }

body{


 height: 100%;

 width:100%;


  //min-height: 100%;
  padding: 0;


  }

*, *:before, *:after  {

 -webkit-box-sizing: inherit;

 -moz-box-sizing: inherit;

 box-sizing: inherit;

 }

#learnPianoBtn:hover{
 box-shadow:0px 3px 5px #333;

cursor:pointer;

}

#learnSheetBtn:hover{
 box-shadow:0px 3px 5px #333;
cursor:pointer;

}

#readMore, #readMore2, #readMore3:hover{

  cursor:pointer;

}

#learnClarinetBtn:hover{
 box-shadow:0px 3px 5px #333;
cursor:pointer;

}


#mainText{font-size:30px;}

header{
  border-top:2px solid black;

  background-color:white;

  width: 100%;

  top: 0;

  position: fixed;

  height:75px;

  z-index:999999999;

  box-shadow:0px 0.1px 10px #333;

  //min-width:815px;


}

header .nav-menu li:hover{
}

header .nav-menu li:hover a{

  color:white;

}
   .nav-menu{

     width:auto;

           margin-left:70%;
float:right;
            text-align:center;
padding-right: 20px;
                 margin-top:-50px;
     //transform:translateY(-50%);

     color:white;
}

#homeButton{//background-color:#FFB535;}

.nav-menu ul li a{

     color:black;

     }

.nav-menu ul li{

  padding-top:24px;

   padding-bottom:25px;

}

     li{

     padding:1px;

     margin:5px;

     font-size:1.3em;

     display:inline;

   //	font-family: 'Concert One', cursive;

   }



a{
        text-decoration:none;

        color:black;
}



#cards{ height:600px;}

a:hover {

 // color:white;

  //background-color:white;

}

#site-name{

 color:black;

}

header li:hover {

   cursor: pointer;

}

#moveUp{

margin-top:-350px;

}



#adayaBox{

  margin:5px auto;

 margin-top:-605px;

   }

.slider {

 width: 100%;

 height:50%;

 height: 650px;

 margin: 20px auto;

 position: relative;

}

.slide1,.slide2,.slide3,.slide4,.slide5,.slide6,.slide7 {

 position: absolute;

 width: 100%;

 height: 100%;
 // add media quieries here for home page slider
}

.slide1 {

 background: url("images/darktable_exported/IMG_9785.jpg")no-repeat center;

 background-size: cover;
 background-position:center 55px;

animation:fade 40s infinite;

-webkit-animation:fade 40s infinite;

//   background-attachment: fixed;


}

.slide2 {

 background: url("images/2019pics/EP-66.jpg")no-repeat center;

     background-size: cover;
     background-position:center 55px;

   animation:fade2 40s infinite;

-webkit-animation:fade2 40s infinite;

  //   background-attachment: fixed;

}


.slide3 {

   background: url("images/2019pics/EP-39.jpg")no-repeat center;

     background-size: cover;
     background-position:center center;

   animation:fade3 40s infinite;

-webkit-animation:fade3 40s infinite;

    // background-attachment: fixed;

}

.slide4 {

 background: url("images/2019pics/EP-1.jpg")no-repeat center;

     background-size: cover;
     background-position:center 40px;
    animation:fade4 40s infinite;

-webkit-animation:fade4 40s infinite;

  //   background-attachment: fixed;

}

.slide5 {

 background: url("images/2019pics/EP-64.jpg")no-repeat center;

     background-size: cover;
     background-position:center center;

   animation:fade5 40s infinite;

-webkit-animation:fade5 40s infinite;

  //   background-attachment: fixed;

}

.slide6 {

 background: url("images/2019pics/EP-12.jpg")no-repeat center;

     background-size: cover;
     background-position:center center;

   animation:fade6 40s infinite;

-webkit-animation:fade6 40s infinite;

  //   background-attachment: fixed;

}

.slide7 {

 background: url("images/2019pics/EP-38.jpg")no-repeat center;

     background-size: cover;
     background-position:center center;

   animation:fade7 40s infinite;

-webkit-animation:fade7 40s infinite;

  //   background-attachment: fixed;

}


@keyframes fade {
  0% {
    opacity: 1
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fade2 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 1
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes fade3 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 1
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes fade4 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 1
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes fade5 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 1
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes fade6 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 1
  }
  85.68%{
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes fade7 {
  0% {
    opacity: 0
  }
  14.28% {
    opacity: 0
  }
  28.56% {
    opacity: 0
  }
  42.84% {
    opacity: 0
  }
  57.12%{
    opacity: 0
  }
  71.4%{
    opacity: 0
  }
  85.68%{
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/*
@keyframes fade {
  0% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fade2 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 1
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes fade3 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  75% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes fade4 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
@keyframes fade5 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes fade6 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes fade7 {
  0% {
    opacity: 0
  }
  25% {
    opacity: 0
  }
  50% {
    opacity: 0
  }
  75% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
*/



@media screen and (min-width: 3500px) {

  html{

margin-left:50%;

     transform:translateX(-50%);

     }

 .nav-menu{

   margin-left:58%;

 }

}



@media screen and (min-width: 2400px) {



 .nav-menu{

   margin-left:79%;

 }

}



@media screen and (min-width: 2600px) {



 .nav-menu{

   margin-left:60%;

 }

}









@media screen and (max-width: 1900px) {

  .nav-menu{

            margin-left:66%;

     }

}





@media screen and (max-width: 1660px) {

  .nav-menu{

            margin-left:62%;





     }

}





@media screen and (width: 1600px) {

  .nav-menu{

            margin-left:68%;


     }

}





@media screen and (max-width: 1485px) {

  .nav-menu{

            margin-left:58%;





     }

}



@media screen and (max-width: 1375px) {

  .nav-menu{

            margin-left:60%;





     }

}



@media screen and (max-width: 1285px) {

  .nav-menu{

            margin-left:58%;





     }

}



@media screen and (max-width: 1245px) {

  .nav-menu{

            margin-left:50%;





     }





}



@media screen and (max-width: 1235px) {





 #adayaBox{

margin-top:620px;

    position:absolute;

   }



 #oliviaBox{

   float:right;

}


 #cards{

   height:700px;

 }

}



@media screen and (max-width: 820px) {
 #adayaBox{

    margin-top:1250px;

   float:left;

}

 #oliviaBox{

   float:left;

}

 #cards{

   height:2000px;

 }

}


@media screen and (max-width: 1135px) {

  .nav-menu{

            margin-left:46%;

     }



  #moveUp{



    margin-top:-500px;





     }

#mainText{font-size:25px;}

}

@media screen and (max-width: 758px) {

#mainText{font-size:20px;}

}

@media screen and (max-width: 520px) {

#mainText{font-size:17px;}
}

@media screen and (max-width: 410px) {

#mainText{font-size:15px;}


}



@media screen and (max-width: 319px) {

#mainText{font-size:12px;}

}

@media screen and (max-width: 576px) {

  #moveUp{

     width:80%;

     }

}

@media screen and (max-width: 1117px) {
footer{
//  margin-top:-600px;
}

}

@media screen and (min-width: 1117px) {

  #container .goBack{
      transform: translateY(-50%);
     }
}





// CUT OFF AT 1100

li:not(:last-child) {
   border-right:solid 23px #fff;/* This will not give border to last li element */
 }



li:hover{
 background-color:#B20000;
}

#buttons{
 text-align:center;
}
.btn{
 display:inline-block;
 margin:20px;
 padding:20px;
}

footer{
top:100%;
background-color: #262626;
width: 100%;
bottom: 0;
//position: absolute;
height:auto;
color:white;
margin-top: -6400px;
transform:translateY(100%);
clear:both;
display: inline-block;

   }

 #copyright{

 top:100%;

 bottom:0;

  width:100%;

  height:100px;
  background-color:#191919;

// background-color: black;

 position:absolute;

}

#readingMusic{
background: url("https://cdn.glitch.com/65cc62ff-e136-48fd-8a38-97843f25a21b%2Fidols-cant-read-sheet-music.jpg?1538872188943") no-repeat;
background-size:cover;
background-attachment: fixed;
background-position:0px 1000px;
}
#pianoMusic{
background: url("https://www.wimbledonsound.com/wp-content/uploads/2013/08/SliderImage-Piano.jpg") no-repeat;
background-size:cover;
background-attachment: fixed;
background-position:0px 100px;
}
#clarinetMusic{
background: url("https://static.pexels.com/photos/210770/pexels-photo-210770.jpeg") no-repeat;
background-size:cover;
background-attachment: fixed;
}
.top {

 display: inline-block;

 width: 4em;

 height: 4em;

 border: 0.5em solid #B20000;

 border-radius: 50%;

 margin-left:-10%;

margin-bottom:10%;

}
.top:after {

 content: '';

 display: inline-block;

 margin-top: 1.2em;

 width: 1.4em;

 height: 1.4em;

 border-top: 0.5em solid #B20000;

 border-right: 0.5em solid #B20000;

 -moz-transform: rotate(-45deg);

 -webkit-transform: rotate(-45deg);

 transform: rotate(-45deg);

 margin-left:13px;

}
#up {
display: inline-block;
vertical-align: middle;
position:fixed;
right:0; bottom:0;
z-index:99999;
  }
.top:hover {
 border: 0.5em solid #B20000;
}
.top:after:hover {
border-top: 0.5em solid #B20000;
border-right: 0.5em solid #B20000;
}





.gallery {
text-align: center;
  width: 100%;
  margin:  auto;
  border-radius: 3px;
  overflow: hidden;
  //position: relative;

}
.img-c {
  width: 250px;
  height: 250px;
//  float: left;
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.img-w {
  position: absolute;
  width: 95%;
  height: 95%;
  background-size: cover;
  background-position: center ;
//  cursor: pointer;
  transition: transform ease-in-out 300ms;
 }

.img-w img {
  display: none;
}

.img-c {
    transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}

.img-c:hover .img-w {
  transform: scale(1.08);
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}



.img-c.postactive {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.img-c.active.positioned {
//left: 0 !important;
  //top: 0 !important;
  transition-delay: 50ms;
}




.fa {
  padding: 20px;
  font-size: 20px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 100%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}
  #buttons:before{

//     box-shadow:0px -1px 35px #333;

  }