@charset "UTF-8";
/* CSS Document */

/* ----------- INDEX START ---------------------- */

body {
	background: #000;
}

h2 {
	text-align: center;
	border-bottom: 1px solid #333;
	padding: 20px;
	letter-spacing: 1px;
	width: 200px;
	margin:40px auto;
}

h3 {
	margin:20px;
}

ul {
	margin:0;
	padding:0;
}

ol {
	margin:0;
	padding-left:20px;
}

hr {
	border-top:1px solid #ccc;
}

.navbar-default {
	border: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.84+40,0+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.6) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	position:absolute;
	z-index: 999999;
	width: 100%;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
	border: 0;
}

.navbar-nav {
	margin-top:40px;
	letter-spacing: 2px;
}

.navbar-nav li{
	margin-right:10px;
}

.navbar-nav li:hover{
	background: rgba(213,206,71,0.5);
	border-radius: 8px;
	color: #FFF;
}

.navbar-brand {
	padding:40px;
}

.navbar-brand img {
	width: 235px;
	max-width: 100%;
}

.navbar-default .navbar-nav > li > a {
	color: #FFF;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	background: rgba(213,206,71,0.5);
	border-radius: 8px;
	color: #FFF;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	color: #FFF;
}

.navbar-default .navbar-toggle {
	margin: 24px;
}

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
	background: none;
}

.navbar-right .icon {
	color: #FFF;
	font-size: 20px;
	display: block;
}

.teach-site {
	text-align: center;
}

.teach-site img{
	max-width: 100%;
	margin-bottom:20px;
}

.slide {
	height: 20%;
	overflow: hidden;
}

.slide .carousel-inner {
	height: 0;
	padding-bottom: 40%;
}

.slide img{
	width: 100%;
}

.footer {
	background: #d5ce47;
	padding:40px 0;
	font-size: 13px;
}

.footer img {
	max-width: 100%;
}

.footer-logo {
	background: rgba(00,00,00,0.9);
	border-radius: 60px;
	padding:36px 20px;
	margin-bottom: 15px;
	height: 100px;
	width: 100px;
	max-width: 100%;
}

.footer-logo img{
	
}

.footer-info {
	padding-bottom:40px;
}

.footer-info p{
	padding-left:20px;
}

.footer h4 {
	margin-top:0;
	padding: 0;
	letter-spacing: 1px;
}

.footer-store, .footer-teach {
	margin-bottom: 40px;
	padding-left:20px;
}

.footer-store a, .footer-teach a{
	display:inline-block;
}

.footer-store .icon, .footer-teach .icon{
	vertical-align: middle;
	font-size: 16px;
}

.footer-map {
	margin-bottom:40px;
}

.copyright {
	text-align: center;
	color: #666;
	font-size: 12px;
}



/* ----------- INDEX END ---------------------- */


.keyvisual {
	height: 0;
	padding-bottom:10%;
	overflow: hidden;
}

.keyvisual img{
	position:fixed;
	z-index: -999;
}

.teachers {
	background: #eee;
	padding-bottom:50px;
}

.teachers-nav {
	text-align: center;
	margin-bottom:50px;
}

.teachers-nav ul li{
	list-style: none;
	display: inline-block;
	font-size: 16px;
	margin:20px 10px;
}

.teachers-nav ul li a{
	display: block;
	color: #888;
	border: 1px solid #ccc;
	border-radius: 20px;
	padding:10px 20px;
}

.teachers-nav ul li a:hover{
	background: #ccc;
	color: #FFF;
	text-decoration: none;
}

#drum, #percussion, #guitar, #bass {
	height: 10px;
	margin-top:30px;
}


.teachers-list .teachers-box {
	padding:32px 16px;
}


.teachers img {
	width: 100%;
	border-radius: 8px 8px 0 0;
}


.teacher-social {
	margin-top:50px;
    margin-bottom:20px;
	padding-top:30px;
	padding-bottom:30px;
	text-align: center;
    height: auto;
	border-top: 4px double #DDD;
}

.teacher-social h4 {
	margin-bottom:50px;
	text-align: center;
	color: #666;
}

.teacher-social .teacher-video{
	margin-bottom:20px;
}

.teachers .teacher-social img{
	width: 32px;
}

.teach-teachers {
	margin-top:20px;
}

.teacher-say {
	background:rgba(213,206,71,0.5);
	padding:20px 22px;
	margin-top:30px;
}

.teacher-info {
	background: rgba(213,206,71,0.5);
	font-size: 16px;
	text-align: center;
	padding: 20px 16px;
	color: #333;
	border-radius: 0 0 8px 8px;
	width: 100%;
}

.teacher-info-1 {
	background: rgba(213,106,71,0.5);
	font-size: 16px;
	text-align: center;
	padding: 20px 16px;
	color: #333;
	border-radius: 0 0 8px 8px;
	width: 100%;
}

.teacher-badge {
	position: absolute;
	top:32px;
	right:20px;
	border-radius:0 15px 0 100px;
	background: rgba(213,106,71,0.5);
	font-size: 16px;
	text-align: center;
	padding: 10px 10px 20px 20px;
	color: #FFF;
}

.appointment-badge {
	background: rgba(213,106,71,0.5);
	font-size: 15px;
	text-align: center;
	padding: 7px 15px;
	margin-left:10px;
	float: right;
	border-radius: 15px;
}

.teacher-name {
	font-size: 24px;
	font-weight: 600;
}

.teachers-photo {
	padding:0 20px;
}

.teachers-photo img {
	border-radius: 16px;
}

.teachers-info {
	padding:0 0 0 40px;
}

.teachers h5 {
	font-size: 15px;
	margin:30px 0 10px 0;
	color: #c2bb3b;
}

.teachers .teachers-info ul li {
	list-style: none;
	margin-bottom:15px;
	padding-bottom:10px;
	border-bottom:1px solid #ddd;
}


.teachers .teachers-info ol li{
	list-style-type:decimal;
	margin-bottom:15px;
}


.teacher-social {
	text-align: left;
}

.teacher-social img{
	width: 32px;
	border-radius: 0;
	margin-right:5px;
}


.teachers-fn {
	text-align: center;
    margin-top:20px;
}

.teachers-fn p{
	padding:5px 0 0 0;
	color: #999;
}



.teachers-fn li {
	list-style: none;
	border:1px solid #ccc;
	margin-bottom:5px;
	text-align: center;
}

.teachers-fn li a {
	color:#666;
	padding:5px;
	display: block;
}

.teachers-fn li a:hover {
	background: #DDD;
	color: #333;
	text-decoration: none;
}

.teachers-fn strong li{
	border:0;
}

.teachers-fn .active {
	font-weight: 800;
	background: #DDD;
	color: #333;
	border:1px solid #ddd;
}

.teachers-fn .ap {
	border:2px solid #DDD;
	color: #999;
}


.site {
	background:#EEE;
	padding-bottom:60px;
	line-height: 1.8;
	min-height:600px;
}

.class {
	background:#EEE;
	padding-bottom:60px;
	line-height: 1.8;
	min-height:600px;
}

.contact {
	background: rgba(255,255,255,0.9);
	padding-bottom:60px;
	line-height: 1.8;
	min-height:600px;
}

.contact-store, .contact-teach {
	margin-bottom:40px;
	padding-bottom:40px;
}

.contact-map {
}

.contact-map img {
	max-width: 100%;
}


.gotop {
	border:1px solid #ccc;
	border-radius: 30px;
	background: rgba(240,240,240,0.5);
	text-align: center;
	width: 50px;
	height: 50px;
	position:fixed;
	bottom:10px;
	right: 10px;
	z-index: 999999;
}

.gotop a{
	text-decoration: none;
	color: #666;
	padding-top:3px;
	display: block;
}





@media (max-width:992px){
	
	
	.navbar-brand {
		padding:22px 0 0 20px;
		margin-bottom:20px;
	}
	
	
	.navbar-nav {
		margin-top:17px;
		letter-spacing: 0;
	}
	
	.navbar-brand img {
		width: 200px;
		margin-right:30px;
	}
	
	.navbar-nav li{
		margin-right: 0;
	}
	
	.slide .carousel-inner {
		height: 0;
		padding-bottom: 100%;
	}

	.footer {
		text-align: center;
	}
	
	.footer-info {
		padding-left:0;
	}
	
	.footer-logo {
		float: none;
		margin:0 auto 20px auto;
		
	}
	
	.footer-info p{
		padding-left:0px;
	}
	
	.footer-map img{
		padding:0 30px;
	}
	
	
	.keyvisual {
		height: 0;
		overflow: hidden;
	}
	
	
	.teachers-nav ul li{
		font-size: 13px;
		margin:0 5px 20px 5px;
	}
	
	.teachers-nav ul li a{
		padding:10px 15px;
		width: 150px;
	}
	
	.teachers-list .teachers-box {
		padding:5px;
		margin-bottom:20px;
	}
	
	
	.teachers img {
		width: 100%;
		border-radius:0;
	}
	
	.teacher-info {
		background: rgba(213,206,71,0.5);
		font-size: 13px;
		padding: 20px 0;
		border-radius:0;
	}

	.teacher-badge {
		top:5px;
		right:10px;
		border-radius: 0 0 0 100px;
	}

	
	
	.teachers-info {
		padding:50px 20px;
	}

	.teachers-fn strong li {
		display: block;
	}
	
	.teachers-fn li {
		display: inline-block;
	}
	
	.contact-store, .contact-teach {
		border-bottom:1px solid #ccc;
	}

	
}


@media (max-width:767px){

	.navbar {
		margin-bottom:0px;
	}
	
	.navbar-default {
		position:static;
	}
	
	.navbar-brand {
		padding:20px 0 0 20px;
	}
	
	.keyvisual {
		padding-bottom:0
	}
	
}

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;}