/* IMPORT RESET */
@import url("reset.css");
body {
font-family: sans-serif;
font-size:16px;
line-height:1.6em;
width: 100%;
margin: 0;
padding: 0;
color:#222;
background:url(../images/bg0.gif);
}
header {
text-align: center;
background: #FFF;
/* background: url(../images/head_back.gif); */
/*  background: url(../images/top-img.jpg) no-repeat;
background-size:100%;
height: auto;
padding: 85px 10px; */
/* overflow: hidden; */
}

article {
text-align: center;
background:#FFF;
padding:16px 20px;
}
section{margin-bottom:12px;}
footer {
text-align: center;
font-size:0.8em;
background-color:#f0f0f0;}
footer .copy{
text-align:center;}
a {
text-decoration:none;
}
h1, h2, h3, h4, h5, h6 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
height:0px;
} 
h3.form{
white-space:normal;
margin:10px;
height:auto;}
p {
margin: 0 0 0.6em;
color: #444;
text-align: left;
}

.fee{
position:absolute;
bottom:0;
}
.ht {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
table{
border-collapse:collapse;
width:100%;
}
/*	12 COLUMN : RESPONSIVE GRID SYSTEM
DEVELOPER : DENIS LEBLANC
URL : http://responsive.gs
VERSION : 3.0
LICENSE : GPL & MIT */
/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* { 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/js/boxsizing.htc); 
/*	If you need support for IE7 and lower make 
sure the boxsizing.htc file is linked properly.
More info here:  https://github.com/Schepp/box-sizing-polyfill */
}
/*	MAIN CONTAINER 
Set the width to whatever you want the width of your site to be. */
.container { 
max-width: 100%;
margin: 0 auto; 
}/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after 
{ 
content: ""; 
display: table; 
clear: both; 
}
.clearfix:before,  
.clearfix:after {  
content: " ";  
display: table;  
}  
.clearfix:after {  
clear: both;  
}  
.clearfix {  
*zoom: 1;  
}  
.row { padding-bottom: 0em;
}
.col { 
display: block;
float: left;
width: 100%;
}
.corse-wrap{
margin-left: auto;
}
.corse{
height:130px;
padding:10px;
margin:8px 0;
border-radius:5px;
border:6px solid #ffe0ff;
position:relative;
background: url(../images/back-check.gif);
}
.illust{
height:130px;
text-align:center;
}
a[href^="https://maps.google.com/maps/?q"] {
padding-right: 23px;
background: url(../images/external-link.png) no-repeat center right;
}
#map_canvas{
width: 400px; 
height:300px;
}
img.prof-r{
max-width:95%;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
margin-right:10%;
}
img.fit{
max-width:100%;
margin-bottom:2em;
}

#wrap {
padding-bottom: 0px;
height:auto;
}
div.section {
padding: 50px 20px 0;
height:900px;
margin-bottom: 10px;
}
#home>div.section{
height:1060px;
}
#lesson>div.section{
height:260px;
}
#profile>div.section{
height:950px;
}
#contact>div.section{
height:1020px;
}
#bg0, #bg1, #bg2, #bg3 {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#bg0 {background:url(images/bg0.gif);}
#bg1 {background: url(images/bg1.gif);}
#bg2 {background: url(images/bg2.gif);}
#bg3 {background: url(images/bg3.gif);}
.span_4 { width: 100.0%; }

.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(0,0,0,0.5);
width: 100%;
}

.bx-wrapper .bx-caption span {
color: #fff;
display: block;
font-size:0.8em;
padding: 10px;
}
nav {
border-bottom: 0;
z-index:9999;
position:fixed;
display:block;
width:100%;
height:auto;
background:#fff;
top:0;
left:0;
}
nav ul {
display: none;
height: auto;
}
nav li {
display: block;
float: none;
width: 100%;
background-color:#fff;
border-bottom:1px solid #E3E3E3;
}
nav li a {
display:inline-block;
width:100%;
padding:8px 0;
text-align:center;
color:#000;
}
nav a#pull {
display: block;
background-color: #FFC8EA;
width: 100%;
height:50px;
position: relative;
color:#FF2626;
z-index:9999;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display:inline-block;
position: absolute;
left: 18px;
top: 13px;
}
#back-top{
width:100%;
height:55px;
background-color:#fff;
text-align:center;
}
footer .span_4{
margin-top:10px;
margin-bottom:0px;
text-align:center;
}
@media ( min-width : 480px ) {
#lesson>div.section{
height:500px;
}
}
/*	COLUMN WIDTH ON DISPLAYS +768px 
You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
.gutters .col {margin-left: 2%;}
/* .gutters .col:first-child { margin-left: 0; } */
.span_1 { width: 8.33333333333%; }
.span_2 { width: 16.6666666667%; }
.span_3 { width: 25%; }
.span_4 { width: 33.3333333333%; }
.span_5 { width: 41.6666666667%; }
.span_6 { width: 50%; }
.span_7 { width: 58.3333333333%; }
.span_8 { width: 66.6666666667%; }
.span_9 { width: 75%; }
.span_10 { width: 83.3333333333%; }
.span_11 { width: 91.6666666667%; }
.span_12 { width: 100%; }
.gutters .span_1 { width: 6.5%; }
.gutters .span_2 { width: 15.0%; }
.gutters .span_3 { width: 23.5%; }
.gutters .span_4 { width: 32.0%; }
.gutters .span_5 { width: 40.5%; }
.gutters .span_6 { width: 49.0%; }
.gutters .span_7 { width: 57.5%; }
.gutters .span_8 { width: 66.0%; }
.gutters .span_9 { width: 74.5%; }
.gutters .span_10 { width: 83.0%; }
.gutters .span_11 { width: 91.5%; }
.gutters .span_12 { width: 100%; }
p {
margin: 0 0 0.6em;
color: #444;
text-align: left;
}
img.prof-r{
float:right;
margin-left:10%;
}
img.prof-l{
float:left;
margin-right:10%;
}
img.right{
padding-right:10%;
float:left;
}
.container { 
max-width: 940px;
margin: 0 auto; 
box-shadow:rgba(250, 250 ,250, 1) 1px 0px 8px 4px;
-webkit-box-shadow:rgba(250, 250 ,250, 1) 1px 0px 8px 4px;
-moz-box-shadow:rgba(250, 250 ,250, 1) 1px 0px 8px 4px;
}
#lesson>div.section{
height:700px;
}

nav{
opacity:0.75;
filter:alpha(opacity=75);
-ms-filter: "alpha( opacity=75 )";
-moz-opacity: 0.75;
box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 10px 1px;
-webkit-box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 10px 1px;
-moz-box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 10px 1px;
}
nav ul{
display:block;
list-style: none;
height:45px;
max-width:720px;
margin:0 auto;
}
nav li {
display: inline;
width:25%;
float:left;
border-bottom:none;
}
nav a{
display:inline-block;
padding: 8px 15px;
}
nav li a{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav a#pull {
display: none;
}
li.current a {
border-bottom: 3px solid #e74c3c;
}
.header-img{
display:block;
position:relative;
top:-117px;
left:530px;
width:400px;
/* overflow:visible;
z-index:99; */
}
img.fit{
max-width:100%;
}
.bx-wrapper .bx-caption span {
font-size: 1.2em;
padding: 12px;
}
footer .span_6{
padding:10px;
text-align:center;}
footer .span_4{
padding:10px;
text-align:center;}
footer .span_4 img{
width:100%;}
}