@charset "UTF-8";

.page-wrapper{ /*set max width of page content*/
	max-width: 1500px; 
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;	/* added new */
}

html, body{				/* added new */
	height: 100%;		/* added new */
    background-color: #F7F8F8;
	margin: 0px; /*This puts the banner flush to top of page*/
    color: #1A1D25;
}

.footer{
	bottom: 0;
	width: 100%;
	background-color: black;
	font-weight: 300;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	max-width:1500px;
	margin-left:auto;
	margin-right:auto;
    /*font-family: 'bad-script';*/
}


.blinking {
    animation:blinkingText 5.0s infinite;
}
@keyframes blinkingText {
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color: transparent;  }
    100%{   color: #000;    }
}

.zoom:hover {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1);
  opacity: .75;
  
}

.normal-text{
    font-size: 18px;
    text-align: justify;
    padding: 0px 10px 0px 10px;
}
.bold-text{
    font-weight: 600;
    text-align: justify;
    padding: 0px 10px 0px 10px;
}
.text-right{
    text-align: right;
}

#bannerlogo {
	width: 25%;
	margin-right: 50px;
	max-width: 200px;
    
}

h1 {
    font-family: "ZCOOL XiaoWei", serif;
    letter-spacing: 10px;
    color: aliceblue;
    float: right;
    padding-right: 10px;
    font-size: 50px;
}

h2 {
    font-family: "ZCOOL XiaoWei", serif;
    text-align: center;
    color: #091010;
    padding-right: 10px;
    font-size: 30px;
}


h3 {
    font-family: "ZCOOL XiaoWei", serif;
    text-align: center;
    color: #091010;
    padding: 0px;
    font-size: 25px;
}
h4 {
    font-family: "ZCOOL XiaoWei", serif;
    text-align: center;
    color: #091010;
    margin-top: 20px;
    font-size: 20px;
}

.text-center {
    text-align: center;
    font-size: 20px;
}
.banner-home{
	width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/pianoheader.jpg");
    background-position: center;
	background-size: cover;

}

ul {
  /* position: -webkit-sticky; /* Safari */
  top: 0;
}

.nav {
    float: none;
    list-style: none;
    text-align: center;
    padding: 0px 0 0px 0;
    line-height: 40px;
}

.nav > li {
    display: inline-block;
    padding: 0 0px 0 0px;
}

.nav > li > a {
    text-decoration: none;
    color: #1F4277;
    padding: 20px;
    font-size: 20px;
    
}
li a:hover {
    opacity: .5;
    color: black;
}

@media screen and (max-width:768px){
    .nav > li {
    box-sizing: border-box;
	width: 100%;
	padding: 10px;
}
    .nav {
        line-height: 15px;
    }
    nav > li > a {
        padding: 10px;
    }
    li a:hover {
        color: red;
    }
}
    
#Flexbox {
    display: -ms-box;
    display: -moz-box;
    display: -webkit-box;
}   
    
.container-box{
	padding: 1px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 5px;
    line-height: 30px;
    margin: 0 150px 0 150px;
    font-size: 20px;
    background-color: darkseagreen;
    margin-top: 20px;
    margin-bottom: 20px;
}

.container-box-corona{
	padding: 20px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 5px;
    line-height: 30px;
    margin: 0 150px 0 150px;
    font-size: 20px;
    background-color:#F7F8F8;
    margin-top: 20px;
    margin-bottom: 20px;

}

.clearfix {
    overflow: auto;
    font-size: 20px;
    margin-left: 50px;
    margin-right: 50px;
}
.img {
    float: right;
 }    

.featured{ /*This sets the pictures side by side in 2 blocks - works with clearfix*/
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
}

#pic2{
	background-image: url("../images/younglessons.png")
    
}
.picture-img{
	width: 230px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
		
}
                                                                        /* LESSONS PAGE */

.banner-lessons{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image:url("../images/lessonsheadernew2.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}

/*.container-box-blink{
	padding: 1px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 0px;
    line-height: 10px;
    margin: 50px 250px 50px 250px;
    background-color:#DFD0D2;
    margin-top: 50px;
    margin-bottom: 50px;
	border-radius: 100px;
		
}*/
.picture-img2{
	width: 200px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}
#pic2{
    background-image: url("../images/younglessons.png");
}
.picture-img3{
	width: 200px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}
#pic3{
    background-image: url("../images/pic3.jpg");
}

.picture-img4{
	width: 200px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}
#pic4{
    background-image:url("../images/pic4update2.jpg")
}
#pic5 {
    background-image: url("../images/younglearnersupdate.jpg")
}
.picture-img5{
	width: 400px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 300px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}

.featured2{ /*This sets the pictures side by side in 2 blocks - works with clearfix*/
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	float: left;
}
.container-featured2{
	margin: 0%; /*Sets the space between the text and the image*/
}
.feature-images2{
	display: block;
	width: 100%; /*Sets that the sections of text with the pictures are full page but then restricted by picture-img below*/
}
.picture-img3{
	width: 200px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}
.picture-img4{
	width: 200px; /*If this percentage is too high the pictures will overlap as the page gets smaller*/
	border-radius: 100%;
	height: 200px;
	background-size: cover;
	margin-left: auto;
	margin-right: auto;
	border-style: solid;
	border-width: medium;
	border-color: #343334
}
.container-box2{
	padding: 1px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 5px;
    line-height: 30px;
    margin: 0 150px 0 150px;
    font-size: 20px;
    background-color:#EDE9E7;
    margin-top: 30px;
    margin-bottom: 50px;
}
.clearfix2 {
    overflow: auto;
    font-size: 20px;
}
.main-padding {
    padding: 0px 20px;
}
/* YOUNG LEARNERS */
.banner-learners{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/Keyboard%20Pic.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}
.lower-banner-learners {
    background-image: url(../images/younglearner.jpg);
    width: 100%;
	height: 400px;
    background-position: center;
	background-size: cover;

}
                                                                    /*THEORY*/
.banner-theory{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image:url("../images/theorypage2.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}

.container-box-theory{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 2px;
    line-height: 30px;
    margin: 15px 0 15px;
    font-size: 20px;
    background-color: aliceblue;
    margin-top: 0px;
    margin-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
}


                                                                          /* Feedback Page */

.banner-feedback{
	width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/feedbackpiano.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;	
}
.container-feedback-1{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    background-color: #F7F8F8;
	margin: 50px 150px 50px 50px;
	
}
.container-feedback-2{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    background-color: #F7F8F8;
	margin: 50px 50px 50px 150px;
		
}
.container-feedback-3{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    background-color: #F7F8F8;
	margin: 50px 150px 50px 50px;		
}

.container-feedback-4{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    background-color: #F7F8F8;
	margin: 50px 50px 50px 150px;		
}


                                                                  /* FAQs */
.banner-faqs{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/newfaqbanner.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}

.container-box-faqs{
	padding: 5px;
	border-color: #68666A;
	-moz-box-shadow: 0 0 10px #68666A;
	-webkit-box-shadow: 0 0 10px #68666A;
	box-shadow: inset 0 0 10px #68666A;
	text-align: center;
    word-spacing: 1px;
    line-height: 25px;
    margin: 15px 0 15px;
    font-size: 20px;
    background-color:#EFF1F1;
    margin-top: 10px;
    margin-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
	padding-bottom: 25px;
	
}

button {
  background-color: #000000;
  border-width: 5px;
  border-color:#B03319;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 1px 1px;
  cursor: pointer;
  border-radius: 20px;
}

/*.button7:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button7:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button8:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button8:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button9:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button9:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button10:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button10:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button11:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button11:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button12:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button12:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button13:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button13:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button14:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button14:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}

/*.button15:hover {
	background-color: #D08B4F;
	opacity: .6;
}*/
.button15:active {
  background-color: #EDDBB5;
  transform: translateY(4px);
}


                                                             /* CONTACT */

.text-right-footer{
    text-align: right;
	
}

.banner-contact{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/waterjets.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}
.maincontact{
		width: 400px;
		margin: 50px auto;
		border: 3px solid #93724B;
		/*background-color: #68666A;*/
		background-image: url("../images/waterjets.jpg");
		color: #000000; /*This is font colour*/
		background-size: cover;
		background-position: center;
	}
	.info{/*This section handles the "Request Information" header in the Message Box*/
		width: 100%;
		padding: 8px;
		text-align: center;
		font-size: 40px;
		font-family: "bad-script";
		font-weight: bold;
		color: ghostwhite;
	}
	.form-box{/*Affects all the boxes as to how far from left and right border they are*/
		padding-left: 20px;
		padding-right: 20px;
	}
	label{
		font-size: 20px;
		font-family: "bad-script";
		font-weight: 900;
		color: ghostwhite;
	}
	.inp, #msg-box{ /*This sets the font size within the text boxes, as well as the size of the boxes*/
		width: 90%;
		padding: 10px;
		margin-bottom: 5px;
		border-radius: 10px;
		font-weight: 600;
		font-size: 10px;
		border-right: 10px solid #C7BCAD;
		border-left: 10px solid #C7BCAD;
	}
	.inp:focus, #msg-box:focus{ /*What happens when the message boxes get focus*/
		outline: none;
		border-right: 10px solid #364653;
		border-left: 10px solid #364653;
		font-size: 20px;
	}
	#msg-box{
		resize: none;
		height: 80px
	}
	.sub-btn{ /*This sets the format of the Send button*/
		width: 100%;
		padding: 10px;
		font-size: 20px;
		margin-top: 10px;
		border-radius: 10px;
		background: linear-gradient(#C7BCAD, #364653);
		font-weight: 600;
		cursor: pointer;
	}
	.sub-btn:focus{
		outline: none;
	}
	.sub-btn:hover{ /*How to set opacity changes on hover over*/
		background: linear-gradient(#C7BCAD, #364653);
		transition: all ease-out 0.3s;
		opacity: 0.6;
		filter: alpha(opacity=10);
	}


                                                            /* REVIEW PAGE */

.banner-review{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image: url("../images/reviewbox.jpg");
    background-position: center;
	background-size: cover;
    opacity: 100;
}
.maincontactreview{
		width: 600px;
		margin: 50px auto;
		border: 3px solid #93724B;
		/*background-color: #68666A;*/
		background-image: url("../images/reviewbox.jpg");
		color: #000000; /*This is font colour*/
		background-size: cover;
		background-position: center;
	}
	.info-review{/*This section handles the "Request Information" header in the Message Box*/
		width: 100%;
		padding: 8px;
		text-align: center;
		font-size: 40px;
		font-family: "bad-script";
		font-weight: bold;
		color: ghostwhite;
	}
	.form-box-review{/*Affects all the boxes as to how far from left and right border they are*/
		padding-left: 20px;
		padding-right: 20px;
	}
	labelreview{
		font-size: 20px;
		font-family: "bad-script";
		font-weight: 900;
		color: ghostwhite;
	}
	.inp, #msg-box{ /*This sets the font size within the text boxes, as well as the size of the boxes*/
		width: 90%;
		padding: 10px;
		margin-bottom: 5px;
		border-radius: 10px;
		font-weight: 600;
		font-size: 10px;
		border-right: 10px solid #C7BCAD;
		border-left: 10px solid #C7BCAD;
	}
	.inp:focus, #msg-box:focus{ /*What happens when the message boxes get focus*/
		outline: none;
		border-right: 10px solid #364653;
		border-left: 10px solid #364653;
		font-size: 20px;
	}
	#msg-box{
		resize: none;
		height: 150px
	}
	.sub-btn-review{ /*This sets the format of the Send button*/
		width: 50%;
		padding: 10px;
		font-size: 20px;
		margin-top: 10px;
		border-radius: 10px;
		background: linear-gradient(#C7BCAD, #364653);
		font-weight: 600;
		cursor: pointer;
	}
	.sub-btn:focus{
		outline: none;
	}
	.sub-btn:hover{ /*How to set opacity changes on hover over*/
		background: linear-gradient(#C7BCAD, #364653);
		transition: all ease-out 0.3s;
		opacity: 0.6;
		filter: alpha(opacity=10);
	}




/* ABOUT - BIOGRAPHY*/

.banner-about{
    width: 100%;
	height: 400px;
	padding-top: 1px; /*Separates the Log from the top of the page*/
	background-image:url("../images/aboutbanner.jpg");
    background-position: center;
	background-size: cover;
}
.container-box-about{
	padding: 10px;
	text-align: center;
    background-color: #F7F8F8;
    margin-top: 10px;
    margin-bottom: 50px;
	padding-bottom: 10px;
	
}


/* Test for animation of image and container box*/
.blink-image {
    -moz-animation: blink normal 5s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 5s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 5s infinite ease-in-out; /* IE */
    animation: blink normal 5s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
 
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
 
@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}