*
{

    box-sizing: border-box;
    font: 14px  Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    max-width: 1500px;
    margin: 0 auto;
}

/*Home*/



/*Navigation bar*/



.navbar
{
    background-color: rgba(145, 185, 196, 0.836);
    border: 2px solid rgba(126, 134, 134, 0.521);
   


   /* background-image: repeating-linear-gradient(to bottom,
    rgba(184, 228, 230, 0.801),
    rgba(206, 239, 240, 0.767) 19%,
    rgba(70, 69, 69, 0.849) 25%);
    border: 1px solid rgba(127, 130, 131, 0.233);
    border-right: 10px solid rgb(70, 69, 69);
    border-left: 10px solid rgb(70, 69, 69);
    padding-top:0px;*/
   
}


.navbar ul{
    list-style-type: none;
    display: table;
    width: 100%;
}


.navbar li:hover>ul
{
    display:inline;
  
}

.navbar li
{
   
   padding: 10px 0px;
   margin: auto;
   display: table-cell;
   text-align: center;
   
}



/*.navbar>ul>li:nth-of-type(even)>a{
   float:right;
 
}*/

.navbar a 
{
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  color:rgb(47, 103, 107);
  display:block;
   /*background-color: rgba(233, 247, 247, 0.705);
     border-radius: 19px;*/
}


.navbar a:hover 
{
    color:  rgba(6, 10, 10, 0.705);
    
}

.active-menu a
{

    color:rgba(233, 247, 247, 0.973);
}





/* If the screen size is 600px wide or less (I-PAD)

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

   
    }
} */




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

        .navbar li{
            margin:10px 2%;
            padding:12px 5px;
            font-size: 9px;

        }   
        
        .navbar ul{
            margin-left:0px;
            padding-left:0px;
        }
}











/*Content Homepage*/


.background
{

    background: repeating-linear-gradient(to right,
    rgba(165, 250, 231, 0.39),
    rgb(255,255,255),
    rgba(165, 250, 231, 0.39));

}

.header
{
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    margin:10px 0px 40px 0px;
    height: 40%;
   
}


.book img
{
    width: 100%;

}

.art
{

    width: 100%;
    background-image: radial-gradient(white,white,rgb(245, 246, 247),rgb(190, 189, 189));
    /*background-image: radial-gradient(white,white,rgb(245, 246, 247),rgb(238, 238, 238),rgb(125, 142, 143));*/

    border:1px solid white;
    border-radius: 3px;
  
}



.art >h2
{
   /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif*/
    color:rgb(47, 103, 107);
    font-size: 9em;
    text-align: center;
    margin: 89px 10px 0px 10px;

    /*text-shadow: -9px -3px  rgba(46, 45, 45, 0.1);*/
    text-shadow: 0 1px rgba(109, 108, 100, 0.1),
    -1px 0 #cdd2d5,
    -1px 2px rgb(47, 103, 107),
    -2px 1px #cdd2d5,
    -2px 3px #808d93,
    -3px 2px #cdd2d5,
    -3px 4px #808d93,
    -4px 3px #cdd2d5,
    -4px 5px rgb(47, 103, 107),
    -5px 4px #cdd2d5,
    -5px 6px #808d93,
    -6px 5px #cdd2d5,
    -7px 6px #cdd2d5,
    -8px 7px #cdd2d5;
               
}


.piano img
{
    width: 100%;

}


.content
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    padding-top:80px;
  
}


.music
{
    /*background-color: rgb(148, 224, 208);*/
    width: 100%;
   
}
.music>h2
{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:3.5em;
    color:rgb(128, 120, 120);
    text-align: center;
  
}

.firstpage
{
    color:rgba(75, 127, 129, 0.801);
    font-size: 25px;
    padding:50px;
    text-align: justify;
    line-height: 1.5;
    margin-bottom:140px;
   
}

.firstpage>p
{
    font-size: 30px;
    color:black;
    /*border:2px solid rgba(75, 127, 129, 0.801);*/
    text-align: center;
    margin-top:30px;
}




@media only screen and (max-width: 1050px) {
    .art>h2{
        font-size: 5em;
        margin:50px 10px;
    }}









/*Music*/


.musicheader
{
    
background-image: repeating-linear-gradient(to right,
rgba(198, 247, 237, 0.39),
rgb(255,255,255),
rgba(198, 247, 237, 0.39));
padding-bottom: 100px;

  
}


.musicback
{
    /*background-image: url(../img/ribbon.jpg);*/
    background-image: url(../img/pianochange19.jpg);


    background-repeat: no-repeat;
    width: 100%;
    margin-top:5px;
    margin-bottom: 100px;
    padding: 150px;
    background-size: cover;
   
   
}


.musicback>h2
{
    font-family: cursive;
    color: black;
    text-shadow:  4px 4px 6px #fffdfd;
    font-size:8em;
    word-spacing: 70px;
    text-align: center;


}  


.musicbackground
{
  
    width: 100%;
   
}

.musicbackground ul
{

margin-top: 90px;

}



.musicbackground ul li
{
    font-size: 25px;
    line-height: 1.9;
    text-align: justify;
    color: #3e85a7;
    margin:0px 150px ;


}


.musicbackground>p
{
    font-size: 25px;
    line-height: 1.9;
    text-align: justify;
    color: #3e85a7;
    margin:120px 150px 10px 150px;
}


.bigI{

    font-size:2.5em;
}



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


    .musicback
    {
        background-image: url(../img/pianochange7.jpg);
        background-color: rgb(148, 188, 196);
    
}
    .musicback>h2{

        font-size:4em;
        padding: 50px;
        text-align: center;
        color: rgb(255, 255, 255);
        text-shadow:  4px 4px 6px #000000;

    }
    .musicback{
        padding:20px;
    }


    .musicbackground>p
    {
        margin:70px 50px;
        font-size: 20px;
    }


.musicbackground ul
{

margin-top:50px;

}

    .musicbackground ul li
    {
        margin:0px 50px; 
        font-size: 20px;
    }
}




/*Language*/



.englishbackgroundL
{

background-image: repeating-linear-gradient(to right,
rgba(198, 247, 237, 0.39),
rgb(255,255,255),
rgba(198, 247, 237, 0.39));
 
}


.englishimage
{
    /*background-image: url(../img/gold.jpg);*/
    background-image: url(../img/change10.jpg);

    background-repeat: no-repeat;
    width: 100%;
    margin-top:5px;
    margin-bottom: 100px;
    padding:50px;
    background-size: cover;
}


.englishimage>h2
{

    font-family: cursive;
    color:  rgb(255, 255, 255);
    text-shadow:  4px 4px 6px #0a0a0a;
    font-size:8em;
    padding:100px 0px ;
    text-align: center;
    word-spacing: 60px;


}

.englishcontent>h2
{
    font-size: 3em;
    text-align: center;
    width: 100%;
    color:  #3e85a7;
    margin-bottom:0px;
  
}

.line
{

    border: 0;
    height: 2px;
    width: 79%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #3e85a7, rgba(0, 0, 0, 0));

}


.englishcontent>p
{

font-size: 25px;
line-height: 1.9;
text-align: justify;
color: #3e85a7;
margin:100px 150px 0px 150px;

}


.language>p
{
  
font-size: 25px;
line-height: 1.9;
text-align: justify;
color: #3e85a7;
margin:40px 150px;
 
   
}

.language>h2
{
    font-size: 3em;
    text-align: center;
    width: 100%;
    color:  #3e85a7;
    margin-bottom:70px;
  
}


.quotes
{
    margin:170px 220px ;
    
    
}

.quotes>h2
{
    font-size: 1.7em;
    text-align: center;
    width: 100%;
    color:  #076892;
    margin-bottom:0px;


}



.testimonial{
    margin:70px 0px 10px 0px;

}

.testimonial>p
{

font-size: 20px;
line-height: 1.9;
text-align: center;
color: #3e85a7;

}


.quotation:before
{

    content: open-quote;
    display: inline;
    line-height: 0;
    left: -10px;
    position: relative;
    top: 20px;
    color:  #3e86a759;
    font-size: 4em;
}

.quotation:after{

    content: close-quote;
    display: inline;
    line-height: 0;
    left: 10px;
    position: relative;
    top: 35px;
    color:   #3e86a759;
    font-size: 4em;

}


.author{

    font-size: 20px;
    color: #3e85a7;
    /*margin: 5px 38%;*/
    float:right;
   
}

.president{
    font-size: 20px;
    color: #3e85a7;
    clear:right;
    float:right;

}


.more{

font-size: 20px;
line-height: 1.9;
text-align: center;
color: #3e85a7;


}


.more a
{
    color:  #3e85a7;
    font-size: 20px;
  
}



/* If the screen size is 600px wide or less */

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

    .englishimage >h2
   {
    font-size:4.5em;
    padding:0px; 
    word-spacing: 30px;
    color:white;
    }

    .englishcontent>p{

        margin:70px 50px;
        font-size: 20px;
       
    }

    .language>p{
        margin:70px 50px;
        font-size: 20px;
    }
  
    .englishimage{

        background-image: url(../img/change8.jpg);
        background-repeat: no-repeat;
        width: 100%;
        margin-top:5px;
        margin-bottom: 100px;
        padding: 50px;
        background-size: cover;
    }


    .quotes{
        margin:70px 50px;

    }

    .testimonial>p{
       
        font-size: 16px;
       
    }
    
    .author{
        font-size: 16px;
    }


         
    .president{
        font-size: 13px;
        margin-top: 10px;

    }
  }

/*Coaching*/




.coachingheader
{
    
background-image: repeating-linear-gradient(to right,
rgba(198, 247, 237, 0.39),
rgb(255,255,255),
rgba(198, 247, 237, 0.39));
padding-bottom: 100px;

  
}


.coachingback
{
    background-image: url(../img/coachingpage2.png);
    background-repeat: no-repeat;
    width: 100%;
    margin-top:5px;
    margin-bottom: 150px;
    padding: 150px;
    background-size: cover;
   
   
}


.coachingback>h2
{
    font-family: cursive;
    color: white;
    text-shadow:  4px 4px 6px #000000;
    font-size:8em;
    word-spacing: 70px;
    text-align: center;


}  


.coachingbackground
{
  
    width: 100%;
   
}


.coachingbackground>p
{
    font-size: 25px;
    line-height: 1.9;
    text-align: justify;
    color: #3e85a7;
    margin:50px 150px 20px 150px;
}


.aboutheader{
    font-size: 25px;
    color: #3e85a7;
    font-weight: bolder;
    margin:50px 0px 0px 150px;

}

.coachingcontent>p
{
  
    font-size: 25px;
    line-height: 1.9;
    text-align: justify;
    color: #3e85a7;
    margin:20px 150px 20px 150px;


}



.coachingimg img
{
    float: right;
    width: 25%;
    margin: 20px 150px 10px 50px;

   
}




.vocalimg img{
    float: left;
    width: 25%;
    margin: 0px 50px 0px 150px;
}





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

 .coachingback{

    padding:100px;
    margin-bottom:100px;
 }  


 .coachingbackground>p{

    font-size: 20px;
}

.coachingcontent>p{

    font-size: 20px;
}
 
 
.coachingback>h2
{

    font-size: 4em;

}


}


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

    .coachingbackground>p{

        margin: 50px 40px;  
    }

    .coachingcontent>p{

        margin: 20px 40px;
        font-size: 20px;
    }

.aboutheader{
    margin:50px;
}


.coachingimg img
{
    width: 75%;
   float: none;
   margin:0px 50px 30px 50px ;
}


.vocalimg img{

    width: 75%;
   float: none;
   margin:0px 50px 30px 50px ;

}
}










/*About me*/




.about
{
  background:linear-gradient(110deg, #abcad1 50%, #8eaaac 55%, #a4cce0 52%, 
  rgba(164, 191, 192, 0.801) 52%, rgba(136, 183, 185, 0.801));
  margin-top:5px;
    
}


.about1
{
    display: grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    padding:40px 80px 80px 80px;

}



.aboutpic img
{
    width: 60%;
    border: 2px solid white;
    margin:auto;
    display:block;
    margin-top:10px;
}



.aboutcontent
{
    text-align: justify;
    padding: 0px 50px 100px;
   
}



.aboutcontent>p
{
    font-size: 23px;
    color: #316a85;
    line-height:1.5;
    /*margin:0px 50px ;*/
    
}



.aboutback>h2
{
    font-family: cursive;
    font-size:8.5em;
    padding-top:50px;
    text-align:center;
  

  color:rgba(101, 153, 156, 0.856);
  text-shadow:  4px 4px 6px #f8f5f5;


  /*color:rgba(101, 153, 156, 0.856);
    text-shadow:  4px 4px 6px #4d4c4c;*/

}

.italic{

    font-style: italic;
    font-size: 23px;
}







@media only screen and (max-width:600px)
{
    .active-menu{
        background-color: none;

    }
    .aboutcontent{

        padding-top: 100px;

    }

    .aboutcontent>p{

        font-size: 20px;
    }
    
    .aboutback>h2{

        font-size: 5em;
    }

    .about1{

        padding:0px;
    }
   
}



    



    /*Contact*/

   
.englishbackground
{

background-image: repeating-linear-gradient(to right,
rgba(198, 247, 237, 0.39),
rgb(255,255,255),
rgba(198, 247, 237, 0.39));
padding-bottom: 60px;

 
}





.englishimage1
{
    background-image: url(../img/contactchange2.jpg);
    background-repeat: no-repeat;
    width: 100%;
    margin-top:5px;
    margin-bottom: 100px;
    padding:100px 50px;
    background-size: cover;
}


.englishimage1>h2
{

    font-family: cursive;
    color:  rgba(134, 213, 218, 0.856);
    text-shadow:  4px 4px 6px #0a0a0a;
    font-size:8em;
    padding:60px 0px ;
    text-align: center;
    word-spacing: 60px;


}












    .map iframe{
        margin:auto;
        display:block;
        width: 100%;
        padding:0px 50px;
      
    }
    
    .address{
        
       text-align: center;
       margin-bottom:60px;
       color: rgb(120, 163, 170);

    }

    .address h2{
       
        font-size: 2.5em;
        text-align: center;
        width: 100%;
        color:  #3e85a7;
       
       
    }
    .address p{

        font-size: 1.6em;
        justify-content: center;
        margin-top:80px;
        margin-bottom:100px;
        line-height: 1.5em;
    }

    .field{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        margin-bottom:40px;
       
       
    }

    .form{
        max-width: 1200px;
        width:80%;

    }


    .form_field{
       
      /* width: 365px;*/
       margin:0px;
       width: 90%;
      
    }
    .form_field>input{
 
         width: 100%;
        
      }
  
    .form_field>h2{
        font-size: 20px;
        margin-bottom:5px;
        color:rgb(89,122,128);
    }

    .form_area{
       
      margin:0px;  
      width: 97%;
     }

     .form_area>h2{
        font-size: 20px;
        margin-bottom:5px;
        color:rgb(89, 122, 128);

     }


     .form_area textarea{
        border:2px solid  #3e86a78c;
        width: 100%;
     }


    input[type=text]{

      
        padding-bottom:20px;
        border:2px solid  #3e86a78c;
       
    }



    input[type=submit]{
        background-color: rgba(136, 183, 185, 0.801);
        padding:8px 20px;
        font-size: 22px;
        border-radius: 5px;
        color:white;
       
    }

   ::placeholder{
       color:rgb(211, 212, 212);
   }



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




    .englishimage1 >h2
   {
    font-size:4.5em;
    padding:0px; 
    word-spacing: 30px;
    color:white;
    }


  
    .englishimage1{

        background-image: url(../img/change2.jpg);
        background-repeat: no-repeat;
        width: 100%;
        margin-top:5px;
        margin-bottom: 100px;
        padding: 60px;
        background-size: cover;
    }


    .address>p{

        font-size: 1.4em;
    }
    .form{
        width: 100%;
        padding-left: 7px;
    }
}







/*Footer*/


.footerstart
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    background-color:  rgba(136, 183, 185, 0.801);
    padding:1px;
    margin-bottom:5px;
    margin-top:20px;

}



.left ul li
{
   
   
    list-style-type:none;
    text-align: center;
  

}

.left a 
{
    text-decoration: none;
    font-size: 25px;
    display: block;
    color:rgb(62, 91, 104);
}

.left li
{
    padding:20px;
}

    .left
{
   
   justify-self: center;
   padding-right:70px;

}



.right
{
   margin-top:10px ;
   justify-self: end;
   margin-right:0px;
}

.right li
{
    list-style-type:none;
    padding:30px;
    display:inline;
   

}


.iconf
{
    width: 30px;
    height: 30px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color:rgba(62, 91, 104, 0.753);
    
}




.footer
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    background-color:  rgba(136, 183, 185, 0.801);
   
}





.logo img
{

padding-left:0px;
padding-top:10px;

}


.logo1 img
{
padding-left:0px;
padding-top:10px;
  /*width: 44%;
  padding:10px 50px;
  margin-left:100px;
  margin:10px 100px;*/
   
}



.footerend
{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    background-color:  rgba(136, 183, 185, 0.801);
    padding:0px ;
    margin-top:5px;
}

.copy{
font-size: 16px;
color:rgba(39, 56, 65, 0.753);
margin:20px 0px 0px 60px;

    
}
.vosa{
    justify-self: end;
    padding-right:0px;
    margin:0px 40px 0px 0px;
}

.vosa img{
    width: 100px;
  
}






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


    .vosa img{
        display: none;
       
    }
    .copy{
        margin:20px 0px 10px 60px;
       
    }
    .logo img{
       
        align-items: center;
    }
  
    .logo1 img{
        align-items: center;
        /*width: 67%;
        margin:30px;*/
    }
  

    .right li{
        padding:25px;
  
    }
    .footerstart{
        margin-top:5px;
    }



  /*  .aboutcontent{

       
        margin:0px;
        padding:0px;

    }

    .aboutpic img{
        width: 80%;
        margin-right: 65px;

    }*/
    
}