/*COMMON*/
* { list-style-type:none; padding:0; margin:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family:'Helvetica', Arial, sans-serif; }
body { background:url(bkg.jpg) #2F2F2F center top; text-align:center; }
#wrapper { width:960px; margin:0 auto; }
#header { width:100%; padding:20px 0 38px; }
#header table { text-align:left; }
#header table td { width:50%; }
#header img { margin:0 0 0 98px; }
.headerNote { background:url(headerNote.png) no-repeat; height:167px; width:255px; margin:0 auto; position: relative; text-align: center; top: -14px; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg); }
.headerNote h2 { color: #000000; font-family: 'Architects Daughter', cursive; font-size: 22px; line-height: 26px; padding: 41px 0 0; width: 244px; margin:0!important; letter-spacing:0px!important; }
.headerNote h2 span { color:#3bb8cc; font-family: 'Architects Daughter', cursive; font-size:28px; }
.navigation li { float: left; margin :0 5px; background:#1192a7; border-radius:7px; padding:7px 14px; text-decoration:none; height: 48px; overflow:hidden; }
.navigation li a { clear: both; color: #FFFFFF; float: left; font-family: 'Architects Daughter', cursive; font-size: 17px; line-height: 34px; width: 100%; text-transform: uppercase; text-decoration:none; }
.navigation li:hover { background:#f7a404; height:auto; overflow:visible; }
.navigationrow { position:absolute; z-index: 20; text-align:center; width:960px; }
.navigation { margin: 17px auto 0; width:680px; }
.behere { display:none; }
.hr { width:100%; height:7px; border:0; background:url(hr.png) center center no-repeat; margin:14px 0; clear:both; }
.copyBox { position:relative; top: -14px; text-align:left; }
.copyBox .foreground .red-pin:first-child { position:absolute; left:7px; top:7px; }
.copyBox .foreground .red-pin:last-child { position:absolute; right:7px; top:7px; }
.copyBox .foreground .blue-pin { position:absolute; left:50%; top:7px; }
.copyBox.leftWonk { -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); float:right; }
.copyBox.rightWonk { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); float:left; }
.copyBox.wide { width:80%; margin:0 auto; float:none!important; }
.copyBox.right { width:46%; top: -54px; }
.copyBox.left { width:37%; top: 0px!important; }
.copyBox.left .foreground { background: none repeat scroll 0 0 #FFFFFF; left: 70px; padding: 0; position: relative; }
.copyBox.right .foreground { position:relative; right:70px; }
.copyBox .foreground { position:relative; background:#F6F3C9; padding:15px; z-index:5; -webkit-box-shadow: 4px 9px 0px 3px rgba(0, 0, 0, 0.32); -moz-box-shadow:4px 9px 0px 3px rgba(0, 0, 0, 0.32); box-shadow: 4px 9px 0px 3px rgba(0, 0, 0, 0.32); }
.copyBox .foreground.variation1 { background:#f5eccc; }
.copyBox .foreground.variation2 { background:#F6F3C9; padding:15px!important; }
.copyBox .foreground.variation2 h2 { margin: 4px 0 10px; }
.copyBox .foreground h2 { color:#3bb8cc; font-family: 'Architects Daughter', cursive; font-size:28px; margin:0!important; }
.copyBox .accent { border: 5px solid #74BCC8; border-radius: 15px; background:white; }
.copyBox p.accent { padding:7px; text-align:center; }
.copyBox .foreground ul li { text-align:left; list-style-type:disc; line-height: 24px; font-size: 15px; }
.copyBox .foreground ul { margin: 21px; }
.copyBox p { font-size:18px; line-height:24px; padding:10px 0; }
.copyBox p .small { font-size:13px; }
.properIntro { font-weight: bold; margin: 0 auto 0px; padding:0 0 35px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.properIntro .foreground { background:url(chalk-white.jpg); border-radius: 15px; padding: 45px; border:7px solid #F2E154; margin: 30px 0 0; }
h1 { color:#ece269; font-family: 'Architects Daughter', cursive; font-size:32px; margin: 42px 25px 25px; text-align: center; letter-spacing: 2px; }
h2 { color:#ffffff; font-family: 'Architects Daughter', cursive; font-size:28px; margin: 0 25px 25px; letter-spacing: 2px; text-align: center; }
.bulletsRow table { color: #F8F2B4; float: left; margin: 0 30px; text-align: left; width: 260px; }
.bulletsRow table td { padding:15px; }
.bulletsRow { clear: both; display: block; margin: 0 0 30px; overflow: hidden; }
.testimonial { background:#8DC4CC!important; }
.testimonial h2 { color:#ffffff!important; }
.graphicIntro h1 { }
.graphicIntro { text-align:left; }
.foreground.variation2 a { color: #F7A404; font-weight: bold; }
.footerBottomRow { padding:15px 0; color:#ffffff; font-size:11px; overflow:hidden; }
.footerBottomRow a { color: #F7A404; font-weight: bold; }
#footerInner { float: left; padding: 0 0 0 50px; text-align: left; width: 400px; }
.social { float: right; width: 200px; }
/*HOME*/
#videoArea { opacity:1; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; }
#videoArea.conceal { opacity:0; }
.videoRow.conceal { display:none; }
#shopUnits div.videoRow { clear: both!important; float: none!important; width: 100%!important; padding:30px 0 0 0; }
.videoTrigger { margin: 15px 0; display: block; color: #ffffff; font-size: 14px; text-decoration: underline; line-height: 21px; padding: 0 0 0 75px; cursor:pointer; background: url("play.png") no-repeat scroll 15px center; background-size: 16%; }
.buttonnavigation li { float: left; padding: 0 7px; }
.buttonnavigation li a { color: #ffffff; font-family: 'Architects Daughter', cursive; text-transform:uppercase; font-size:25px; background:#f7a404; border-radius:7px; padding:7px 17px; text-decoration:none; display:block; }
.buttonnavigation li a:hover { background:#78CBD9; }
.buttonnavigation { margin: 35px 0; width: 889px; margin:30px auto; overflow:hidden; }
.h1Home { text-align:center; }
.h1Home span { color:#ffffff; font-size:24px; font-family: 'Architects Daughter', cursive; }
/* CONTACT US */
.mainContactBox h2 { display:none; }
.mainContactBox { display:block; float:right; margin:0px; }
.mainContactBox .contactBox { display: block; height: auto !important; padding: 0 27px; position: static; width: 640px; z-index: 1; }
.mainContactBox .contactBox .contactField { background: none repeat scroll 0 0 #cecece; border: 1px solid #AFAFAF; border-radius: 7px; float: left; height: 32px; margin: 11px 0; padding: 6px; width: 100%; }
.mainContactBox .contactBox .textarea { background: none repeat scroll 0 0 #cecece; border: 1px solid #AFAFAF; float: left; height: 72px; margin: 11px 0; padding: 6px; width: 83%; border-radius:7px; }
.mainContactBox .largeLink { background: none repeat scroll 0 0 #F7A404; border: 0 none; border-radius: 7px; color: #FFFFFF; display: block; float: right; font-family: 'Architects Daughter', cursive; font-size: 25px; padding: 7px 17px; text-decoration: none; text-transform: uppercase; margin: 10px 0; cursor:pointer; }
.contactDetails { float:left; margin:30px; }
.errorhighlight { color:#e36565!important; }
.errorIt { border:2px solid #e36565!important; }
.thanks { color: #8fee8d; font-size: 23px; margin: 30px 0 80px; text-decoration: none; line-height: 40px; }
.labels { clear: left; color: #ECE269; float: left; font-size: 13px; text-align: left; width: 57%; }
.labels.drop { padding:27px 0 0 0; width:17%; }
.labels span { font-size:8px; }
.errorhighlight > img { position: relative; top: 14px; }
/*SHOP*/
#shopUnits { margin:20px 0; }
#shopUnits td { text-align:left; background:url(chalk-white.jpg); border-radius: 15px; padding: 15px; border:7px solid #F2E154; margin:5px; position:relative;}
#shopUnits td > img { -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); float:left; }
#shopUnits h2 { font-family: 'Helvetica', Arial, sans-serif; font-size: 18px; margin: 0 0 15px; text-align: left; }
#shopUnits td > div { float: left; padding: 0 20px; width: 330px; }
#shopUnits p, #shopUnits li { font-size: 12px; line-height: 17px; }
#shopUnits li { list-style-type: disc; margin: 6px 0 8px 20px; }
#shopUnits .accent { border: 5px solid #74BCC8; border-radius: 15px; background:white; padding:15px; }
#shopUnits .accent a { background: none repeat scroll 0 0 #F7A404; border-radius: 7px; color: #FFFFFF; display: block; font-family: 'Architects Daughter', cursive; font-size: 25px; margin: 9px 0 0; padding: 13px 17px; text-align: center; text-decoration: none; text-transform: uppercase; width: 180px; }
#shopUnits .accent a.declass {color: #F7A404;font-weight: bold; background: none repeat scroll 0 0 transparent; border-radius: 0px; display: inline-block; font-family: 'Helvetica', Arial, sans-serif; font-size: 12px; margin: 0; padding: 0; text-align: left; text-decoration: underline; text-transform: none; width:auto; }
#shopUnits .accent a:hover { background:#78CBD9; }
#shopUnits .accent form { margin: 9px 0; }
#shopUnits .teaching-pack {margin: 40px 0 0 0; }
#shopUnits .flash {position:absolute; left:-15px; top:-35px; z-index:20;}
/*ABOUT*/
.aboutBox { background: url(about.gif) repeat scroll 0 0 #FFFFFF; float: right; margin: 0 50px 0 0; width: 58%; -webkit-box-shadow: 4px 9px 0px 3px rgba(0, 0, 0, 0.32); -moz-box-shadow:4px 9px 0px 3px rgba(0, 0, 0, 0.32); box-shadow: 4px 9px 0px 3px rgba(0, 0, 0, 0.32); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); }
.aboutBox p { padding:0 15px 15px; text-align:left; }
	
/* RESPONSIVE */

@media only screen and (max-width: 960px) {
.navigation {
background: none repeat scroll 0 0 #1192A7;
border-radius: 7px;
margin: 17px !important;
position:static!important;
width:auto!important;
}
.navigation li {
float: none !important;
padding:0px !important;
text-align: center;
width: auto!important;
height: auto!important;
border-radius:0!important;
background:none transparent!important;
}
.templink {
display:none!important;
}
.navigation li a {
color: #ffffff;
font-family: 'Architects Daughter', cursive;
text-transform:uppercase;
font-size:18px;
background:transparent!important;
border-radius:0px!important;
text-decoration:none;
float:none!important;
display:block;
padding: 5px!important;
}
 .behere {
display:block!important;
}
 .navigationrow {
position:static;
width:auto;
}
}
 @media only screen and (max-width: 479px) {
 h2 {color: #FFFFFF; font-family: 'Architects Daughter', cursive; font-size: 28px; letter-spacing: 2px; margin: 0 0 25px; text-align: center;}
.properIntro .foreground { padding: 25px;}
#wrapper {width:100%;margin:0 auto;}
.begone {display:none;}
.behere {display:block!important;}
#header img {margin:0!important;max-width:313px;width:90%;}
 #header { padding: 20px 0 0px;}
 .videoTrigger {  background: rgba(0, 0, 0, 0) url("play.png") no-repeat scroll 15px center; background-size: 26%; }
 .bulletsRow { overflow: visible; width: 90%;}
#header table {text-align:center!important;}
#header table td {width:100%!important;}
 .copyBox .foreground h2 {font-size:1.3em;}
.buttonnavigation li {float: none!important;padding:12px 17px!important;}
.buttonnavigation {width: auto!important;}
.buttonnavigation li a {margin: 0 auto;width: 80%;}
.mainContactBox .contactBox { width: 100%!important;}
.labels.drop { width: 21%;}
.mainContactBox .contactBox .textarea { margin: 11px 0 11px 15px; width: 73%;}
.mainContactBox .largeLink {-webkit-appearance: none;}
.graphicIntro h1 {position:static;text-align:center;}
.graphicIntro img {width:100%;}
.copyBox { float: none !important; position: relative; text-align: center; top: 0px!important; width: 100% !important;}
.copyBox.left .foreground {left:0!important;margin: 0 auto;width: 80%;}
.copyBox.right .foreground {right:0!important;margin: 0 auto;width: 80%;}
.bulletsRow table {color: #F8F2B4;float: left;margin: 0 30px;text-align: left;width: 100%;}
.properIntro {padding: 0;width: 95%;}
 #shopUnits td {display:block;}
.aboutBox { background: url("about.gif") repeat scroll 0 0 #FFFFFF; box-shadow: 4px 9px 0 3px rgba(0, 0, 0, 0.32); float: right; margin: 0 13px 0 0; width: 91%; -ms-transform: rotate(0deg);-webkit-transform: rotate(0deg); transform: rotate(0deg)!important;}
 #shopUnits td {display:inline-block;text-align:left;}
 #shopUnits div { width: auto!important;padding:0;}
 #shopUnits img { display: block; float: none; margin: 0 auto;}
 #shopUnits .accent { text-align: center;margin: 12px 0 0;}
#shopUnits .accent a {margin: 10px auto 0;}
#shopUnits h2 {text-align: center;margin: 10px 0;}
#footerInner {  padding: 0 20px;  width: auto;}
}