*  {
	margin: 0;
	border: 0;
	padding: 0;
}

html, body {
	height: 100%;
	width: 100%;

}

body  {
	background: #FEF9F2;    /*#fdeedb;*/
	font-family: georgia;
	margin: 0 auto;
}

#wrapper {
	position: center;
}

p  {
	font-size: 0.5em;
	line-height: 155%;
	padding: 3%;
	text-align: justify;
}

h3  {
	font-size: 175%;
	line-height: 155%;
	font-weight: 500;
	text-align: center;
	text-transform: uppercase;
	padding: 0;
}

a  {
	text-decoration: none;
	font-weight: bold;
}



img  {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	width: auto;
	margin-bottom: -4px;
}

#wrapper  {
	max-width: 1200px;
	margin: 0 auto;
}

#banner-wrapper  {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 1% 0;
}

.bodytemplate  {
	
	margin: 0 auto;
	width: 600px;
	height: auto;
	padding:;
	clear: left;
}

header  {
	background-color: #d9c9b1;
	width: 100%;
	height: 100px;
	top: 0;
	left: 0;
}

h1  {
	color: #36454f;
	margin: 30px 20px 20px 40px;
	float: left;
	width: 300px;
	height: 50px;
	font-weight: 200;
	font-size: 1.2em;
	
}

.title h1 {
	width: 125%;
    padding-left: 2%;
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 2%;
    opacity: 0.7;
}


/*-- START NAVBAR --*/

nav  {
	float: right;
	padding: 28px 20px 0px 0px;
}
#menu-icon {
	display: hidden;
	width: 40px;
	height: 40px;
	
	background: url(images/nav-dark1.png) center;
}

a:hover#menu-icon {
	border-radius: 4px 4px 0 0;
}

ul  {
	list-style: none;
}
nav ul li, .bodytemplate ul  {
	font-family: georgia;
	font-size: 100%;
	display: inline-block;
	float: left;
	padding: 10px;

}
nav ul li a, h1 a, .bodytemplate ul, a  {
	color: #676964;
}
.current  {
	color: #3f5767;
}
a:hover  {
	color: #a5bdcd;
}

/*-- END NAVBAR --*/




/*-- CLEARFIX PADDING  --*/

.clearfix-padding  {
	clear: both;
	padding: 2% 2%;
}


/*-- PAGE TITLE --*/

.content h1 {
    width: 125%;
    padding-left: 2%;
    text-transform: uppercase;
    font-size: 40px;
    margin-bottom: 2%;
}




/*-- HOME PAGE --*/


#intro-title {
	font-size: 30px;
	text-transform: uppercase;
	width: 700px;

}

#intro-greet {
	font-size: 40px;
	opacity: 0.5;


}
  
section.os-animation  {
	width: 20%;
	float: left;
	text-align: center;
	clear: none;
}

.icon-wrap {
	margin: 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 125%;
	text-align: center;
	background-color: #ffffff80;
	opacity: 1;
	margin-top: 8%;
	margin-bottom: 8%; 
}

.icon-wrap  img  {
	text-align: center;
	padding: 20%
	height: 33px;
	width: 33px;
	padding-top: 12%;
}
img#note {
	padding-top: 4%;
}

section h6 {
	color: #36454f;
	font-weight: bold;
	
	padding: 2px;
	margin: 0 20px;
	border-radius: 5px; 
	text-align: center;
}

blockquote.hello {
	display: inline-block;
	font-family: Georgia, serif;
	font-size: 19px;
	font-style:  normal;
	font-weight: bolder;
	width: 95%;
	border-radius: 12px;
	padding: 5px 15px 30px 15px;
	line-height: 1.45;
	color: #676964;
	text-align: justify;
	background-color: #FDF3E5;
	line-height: 2.5em;
}

blockquote.hello:before {
	display: inline-block;
	content: "\201C";
	font-size: 100px;
	top: 42px;
	left: -10px;
	position: relative;		
	color: #d9c9b140;
}






/*-- ABOUT PAGE --*/


/*-- BIO PAGE --*/


/*-- TUITION PAGE --*/

h2 {
	color: #36454f;
	font-size: 1.5em;
	padding: 5% 0;
	position: relative;
	left: -40px;
}

#break {
	text-align: center;
	padding: 5% 0;
}

#refunds {
	font-weight: bold;
	text-transform: uppercase;
}

#if24 {
	font-style: italic;
}

.leftside {
	width: 40%;
	display: inline-block;
	font-weight: bold;
	padding-bottom: 6%;
}

.rightside {
	float: right;
	position: relative;
	padding: 1% 20% 0 0;
	width: 200px;	

}	


.rightside2 {
	float: right;
	position: relative;
	top: -55px;
	padding-right: 20%;
	width: 200px;

}

#price {
	clear: both;
}




/*-- FAQ PAGE --*/

blockquote {
	font-family: Georgia, serif;
	font-size: 1.2em;
	font-style: italic;
	width: 540px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #676964;
	
}

blockquote.faq:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -20px;
	top: -20px;
	color: #676964;
	
}

blockquote.faq:after {
	font-family: Georgia, sans-serif;
	display: block;
	content: "\201D";
	font-size: 80px;
	position: absolute;
	right: -5px;
	top: -20px;
	color: #676964;
	z-index: 1000;
}

p.answer  {

	padding-bottom: 70px;
}

.bodytemplate p {
	color: #676964;
	font-size: 100%;
}

h4 {
	color: black;
	font-size: 1.3em;
	padding: 5% 0;
	position: relative;
	left: -40px;
}

.bodytemplate ul {
	list-style: disc;
}



/*-- CONTACT PAGE --*/

.contactdetails  {
	margin: 0 auto;
	width: 700px;
	height: auto;
	padding-top: 1%;
}

#name {
	max-width: 700px;
}

#name p {
	padding: 0;
	margin: 0;
	float: left;
	
	color: #676964;
	font-size: 15px;
	text-transform: uppercase;
}

#name p:nth-child(1) {
	padding-left: 0;
}

#name p:nth-child(2) {
	padding-right: 0;
	float: right;
}

#name p:nth-child(3) {

}

.map  {
	position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

.map iframe {
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.contactform  {
	max-width: 700px;
	margin: 0 auto 50px;

}
.contactform input, textarea {
	border: 3px solid #676964;
	width: 100%;
	padding: 5px;
}


.infogroup {
	width: 48%;
   
	float: left;
}
.infogroup:nth-child(3) {
	width: 100%;
}

label span {
	padding-bottom: 15px;
    color: #676964;
}

label:nth-child(1) {
	  padding-right: 2%;
	  clear: left;
}
label:nth-child(2) {
	padding-left: 2%;
}
label:nth-child(3) {
	clear: both;
}

textarea  {
	height: 10em;

}

.submit-button  {
	float: right;
	margin-right: -10px;
	width: 25%;
	clear: left;
}

[type="submit"] {
	background: #d9c9b1;
	color: #676964;
	font-size: 18px; 
	text-transform: uppercase;
}


.contactintro h1 {
	margin: 0 0 20px 0;
	font-size: 2em;
	padding-bottom: 20px;
}

.contactform label {
	display: block;
	margin-bottom: 20px;
}

.contactform label span {
	display: block;
}










/*-- FOOTER START--*/

footer  {
	background: #c9b290;
	width: 100%;
	overflow: auto; 
}

address p, footer a  {
	font-style: normal;
	font-size: 75%;
	text-align: center;
	color: #676964;
}
footer a {
	font-size: 100%;
}

.one-third  {
	width: 29%;
	float: left;
	margin: 2% 2%;
	text-align: justify;
}

footer.second  {
	border-top: 1px solid #C9B290;
	background-color: #d9c9b1;
	max-height: 50px;
	text-align: center;
	margin: 0;
}

footer.second p  {
	padding: 5px 0 9px 0;
	text-align: center;
	color: #676964;
	font-size: 75%;
	line-height: 155%;
}

/*-- FOOTER END--*/


/* MEDIA QUERY */

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

	header h1 {
		width: 65%;
	}

	

	#menu-icon {
		display: inline-block;
	}

	nav:hover ul {
		display: block;
	}

	nav li {
		text-align: center;
		width: 100%;
	}

	h1 {
		margin: 25px 0 0 10px;
		width: 90%;

	}

	nav ul {  /*nav:active ul*/
		display: none;
		z-index: 1000;
		position: absolute;
		background: #d9c9b1;
		width: 50%;
		padding: 20px;  /*20*/
		right: 0px;    /*20*/
		top: 30px;
		border: 1px solid #36454f;
		border-radius: 2px 0 2px 2px;
	}

	 .bodytemplate {
		width: 100%;
     }

	 img {
	 	width: 100%;
	 }

	 .title h1 {
	 	text-align: center;
	 	width: 100%;
	 	margin: 5% 0;
	 	padding: 0%;
	 }

	 #intro-title {
	 	text-align: center;
	 	width: 100%;
	 	margin: 5% 0;
	 	padding: 0%;
	 }

	 h2 {
	 	text-align: left;
	 	left: 2%;
	 }

	 blockquote.faq {
	 	position: middle;
	 	width: auto;
	 	padding: .25em 40px;

	 }

	 blockquote.faq:before {
	 	left: -6px;
	 	opacity: 0.9;
	 	padding: 0 5px 0 5px;
	 	
	 	
	 }

	 blockquote.faq:after {
	 	right: 6px;
	 	opacity: 0.9;
	 	padding: 0 5px 0 5px;
	 	

	 }

	 h4 {
	 	text-align: left;
	 	left: 2%;
	 	padding: ;
	 }

	 .leftside {
	 	width: 50%;
	 	padding-bottom: 8%;
	 }

	 .rightside {
	 	padding-right: 0;
	 }
	 .rightside2 {
	 	padding-right: 0;
	 }
	 .contactform {
	 	width: 85%;
	 	margin-left: 4px; 
	 	padding-left: 4px; 	
	 }

	 .contactdetails {
	 	width: 100%;
     }

     .contactdetails p {
    	text-align: center;
    	width: 100%;
    	margin: 5% 0;
    	padding: 5%;
    	display: block;
     }

	 .infogroup {
	 	width: 75%;
	 	margin-left: 5px;
	 	padding-left: 5px;
     }

	 .os-animation h5  {
		width: 100%;
		font-family: georgia;
		font-size: 300%;
		position: relative;
		left: 35px;
		top: -20px;
     }

     section.intro {
    	width: 100%;
     }

     .inner {
    	width: 100%;
     }

     .content {
    	width: 320px;
     }

     blockquote.hello {
    	width: 90%;
    	margin: 0 5px;
    	font-size: 12px;
     }

     blockquote.hello:before {
    	font-size: 70px;
    	top: 20px;
    	position: relative;
    	opacity: 0.9;
	 }

     .icon-wrap {
    	width: 45px;
    	height: 45px;
     }

     .icon-wrap img {
    	width: 30px;
    	height: 30px;
     }

     img#note {
	    padding-top: 12%;
     }

     section h6 {
    	margin: 0 5px;
    	padding: 1px;
     }

    

}


