body 	{background-color:#fafafa;
	margin:0;
	padding:0;
	font:600 20px arial, "Trebuchet MS", Helvetica, 	sans-serif;}

h1 	{font:bold 30px arial, "Trebuchet MS", Helvetica, 	sans-serif;    
	margin:0px auto 5px auto;
	padding:20px auto 5px auto;
	border-top:0px solid #000000; 
	width:100%;
	text-align:center;
	color:#555555;
	text-decoration:none;}

h2 	{font:bold 20px arial, "Trebuchet MS", Helvetica, 	sans-serif;    
	margin:10px auto 10px auto;
	border-top:0px solid #000000; 
	width:100%;
	text-align:center;
	color:#666666;
	text-decoration:none;}

h3	{font:bold 18px arial, "Trebuchet MS", Helvetica, 	sans-serif;
	text-decoration:none; 
	padding:0px 0px 0px 0px; 
	vertical-align:middle;  
	border: 0px solid #000000; 
	width:100%;
	margin:auto;
	text-align:center;
	color:#666666;}



h4	{font:bold 16px arial, "Trebuchet MS", Helvetica, sans-serif;
	text-decoration:none; 
	padding:0px 0px 0px 0px; 
	vertical-align:middle;  
	border: 0px solid #000000; 
	width:80%;
	margin:auto;
	text-align:center;
	color:#555555;
	}

h5	{margin:0px;
	font:bold 13px arial, "Trebuchet MS", Helvetica, sans-serif;
	text-align:center; 
	border:0px solid #000000; 
	padding:0px 0px 5px 0px;
	color:#666666;}

h6	{margin:0px;
	font:400 15px arial, "Trebuchet MS", Helvetica, sans-serif;
	text-align:center; 
	border:0px solid #000000; 
	padding:0px 0px 5px 0px;}

h7	{margin:0px;
	font:400 8px arial, "Trebuchet MS", Helvetica, 	sans-serif;
	text-align:center; 
	border:0px solid #000000; 
	padding:0px 0px 5px 0px;
	color:#666666;}

h8	{margin:0px;
	font:bold 14px arial, "Trebuchet MS", Helvetica, sans-serif;
	text-align:center; 
	border:0px solid #000000; 
	padding:0px 0px 15px 0px;
	color:#666666;}

h9	{margin:0px;
	font:600 20px arial, "Trebuchet MS", Helvetica, sans-serif;
	text-align:center; 
	border:0px solid #000000; 
	padding:0px 0px 5px 0px;
	color:#555555;}

p	{margin:0px;
	font:20px arial, "Trebuchet MS", Helvetica, 	sans-serif; 
	text-align:left; 	
	text-indent:20px;
	border-top:0px solid #000000; 
	border-bottom:0px solid #000000;
	padding:5px 35px 5px 35px; 
	height:100%;
	color:#555555;}

a	{text-decoration:none; color:#5abb66;}

a:hover	{text-decoration:none;
	color:#ffcc00;}

header	{text-align:center;
	width:100%;
	background-color:#f0f0f0;
	height:100%;
	border:0px solid #000000; }



footer {width:100%;
	text-align:center;
	background-color:#f0f0f0; 
	color:#ffffff;
	font:400 12px arial, "Trebuchet MS", Helvetica, sans-serif;
	padding:0px;
	border-top:1px solid #000000; 
	margin:0;
	float:center;
	height:100%;}



section {background-color:#ffffff;}

section:after {
  content: "";
  display: table;
  clear: both;
}


article {border:0px solid #000000; 
	height:100%;
	margin:auto;
	text-align:center;
	width:60%;
	float:left;
	padding-top:12px;
	padding-bottom:12px;
	color:#333333;}



aside {border-top:0px solid #000000; 
	height:100%;
	margin-top:0px;
	text-align:center;
	width:40%;
	float:left;
	color:#333333;}

nav	{width:100%; 
	height:100%;
	border-top:0px solid #000000; 
	border-bottom:0px solid #000000;
	border-left:0px solid #000000;
	border-right:0px solid #000000;
	margin:0;
	text-align:center;
	padding:0;
	background-color:#ffcc00;}

.buttons {cursor:pointer; font:500 14px arial, "Trebuchet MS", Helvetica, sans-serif; background-color:#dddddd;border-radius:5px; box-shadow:0px 0px 1px;}
.buttons:hover {background-color:#d1ae40;}

.hours {margin:auto;}
.hours td{border:0px solid #000000;}
.hours a {color:#d1ae40;}
.hours a:hover {color:#82553b;}

.images {width:40%; float:left; padding:50px 0px 50px 0px;}
.text {width:60%; float:right;padding:50px 0px 50px 0px;}

.images2 {width:40%; float:right;padding:50px 0px 50px 0px;}
.text2 {width:60%; float:left;padding:50px 0px 50px 0px;}

@media (max-width:600px) {
.images {width:100%; float:left; padding:0px;}
.text {width:100%;float:right;padding:0px;}

.images2 {width:100%;float:right; padding:0px;}
.text2 {width:100%;float:left;padding:0px;}

}

.actcourses {display:inline-block; width:20%; background-color:#f0f0f0; border-radius:5px; box-shadow:0px 0px 1px; padding:10px; height:100%; margin:5px;}
.actcourses:hover {box-shadow:0px 0px 5px;}

.actcoursesdiv {border:solid #000000 0px; padding-bottom:50px;}

.courses {display:flex; justify-content:space-between;}


.bannerbg {width:100%;height:500px;padding:0px;margin:0px 0px 0px 0px;border-top:0px solid #333333;border-bottom:0px solid #333333;background-image:url('sand_hands_large.png'); background-size:cover;}

.bannerbgparty {width:100%;height:480px;padding:0px;margin:0px 0px 0px 0px;border-top:0px solid #333333;border-bottom:0px solid #333333;}

.bannerbgclass {width:100%;height:480px;padding:0px;margin:0px 0px 0px 0px;border-top:0px solid #333333;border-bottom:0px solid #333333;}

.bannerbgdetails {width:100%;height:100%;padding:0px;margin:0px 0px 0px 0px;border-top:0px solid #333333;border-bottom:0px solid #333333;background-image:url('sand2.png'); background-size:cover;}


.bannerbgdiv {width:550px;border:0px solid #000000;margin:100px 0px 0px 70px; padding:0px 0px 20px 0px;background-color:#f0f0f0;border-radius:15px; box-shadow:0px 0px 2px;}



.bannerbgdivdetails {width:800px;border:0px solid #000000;margin:100px auto 0px auto; padding:0px 0px 20px 0px;background-color:#f0f0f0;border-radius:15px; box-shadow:0px 0px 2px;}

.bannerbgdivt {width:650px;border:0px solid #000000;margin:50px 30px 0px 70px; padding:0px 0px 20px 0px;background-color:#f0f0f0;border-radius:15px; box-shadow:0px 0px 2px;}

.bannerbgevent {width:100%;height:480px;padding:0px;margin:0px 0px 0px 0px;border-top:0px solid #333333;border-bottom:0px solid #333333;}

.testdatediv {width:750px;border:1px solid #000000;margin:10px 0px 10px 70px; padding:0px 0px 0px 0px;}

.words {width:500px; height:200px;}


.testdate {padding: 12px 24px; 
    font-size: 16px; 
    font-weight: bold;
    color: #555555; 
    background-color: #ffcc00; 
    border: none;
    border-radius: 6px; 
    cursor: pointer; /* Show pointer cursor on hover */
    box-shadow: 0 4px 8px; 
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */}

.testdate:hover {background-color: #e0e0e0; transform: translateY(-1px); /* Move button slightly upwards on hover */ box-shadow: 0 6px 12px;}

.bottomlinks {margin: 0 auto; padding: 20px; display: flex; justify-content: space-between; 
	      background-color:#f0f0f0;border-top:0px solid #ffce0b;}
.bottomlinks div {width:25%;}
.bottomlinks a {font:600 12px arial, sans-serif; padding-bottom:25px; color:#666666;}
.bottomlinks a:hover {font:600 12px arial, sans-serif; padding-bottom:25px; color:#ffce0b;}
.classimg {height:500px;background-image:url('classes3.png');background-size:cover;}
.eventimg {height:500px;background-image:url('events5.png');background-size:cover;}
.partyimg {height:500px;background-image:url('party3.png');background-size:cover;}

@media (max-width: 600px) {

.topmenubutton2 {display: none;}
.bottomlinks {max-width:100%;}
.tagline {width:140px; height:19px; padding:5px 0px 0px 20px; margin:5px 0px 0px 15px; max-width:211px; max-height:29px;}
.mylogo {max-width:600px; padding:0px; margin:0px;}
.bottomlinks a {padding-bottom:0px;font:600 12px arial;}
.bottomlinks a:hover {padding-bottom:0px;font:600 12px arial;}
.bannerbg {background-image:url('sand_hands.png');}
.bannerbgdiv {max-width:350px;width:100%;margin:50px auto auto auto;}
.courses {flex-direction: column; /* Stack items vertically on mobile */
        align-items: center;}
.words {width:250px; height:100px;}
.homeicons {width:25%;flex-direction:column;}
.bannerbgdivdetails {width:350px; margin:50px auto auto auto}
.bannerbgclass {width:100%;height:200px;}
.classimg {height:200px;background-image:url('classes3.png');background-size:cover;background-position: center;}
.eventimg {height:200px;background-image:url('events5.png');background-size:cover;background-position: center;}
.partyimg {height:200px;background-image:url('party3.png');background-size:cover;background-position: center;}
.bannerbgevent {width:100%; height:200px;}
.bannerbgparty {width:100%; height:200px;}
}

.bannerinfo {margin-left:550px;}

.tagline {width:281px; height:38px; padding:27px 400px 0px 0px;}
.mylogo {display:flex; align-items:center; padding:0px 5px 0px 0px; vertical-align:bottom; border:0px solid #000000; justify-content:space-between;max-width:100%;overflow: hidden;margin:0;}
.mylogo a {color:#444444;}
.logoimg {width:50%; height:50%;padding:5px 0px 0px 0px;margin:0px 400px 0px 0px;border:0px solid #000000;}

.phone {width:25px; height:20px; padding:0px 0px 0px 5px; margin:0px; vertical-align:bottom; border:0px solid #000000;}
.phonenumber {display:block; float:right; font-size:15px; padding:0px 15px 0px 0px;margin:0px;border:0px solid #000000;}

.topmenu {float:right; display:flex;vertical-align:bottom;border:0px solid #000000;}
.topmenu a {display:block;color:#666666; padding:19px 15px 0px 15px;}
.topmenu a:hover{background-color:#82553b; color:#f0f0f0;}

.topmenubutton2 {float:right;vertical-align:bottom; padding:55px 0px 0px 0px;border:0px solid #000000;}
.topmenubutton2 a {display:flex;color:#666666; font-size:15px; background-color:#f0f0f0; width:150px;}
.topmenubutton2 a:hover {color:#82553b; font-size:15px;  width:150px;}

.homeicons {display:flex;border:0px solid #000000;margin:auto; width:50%;color:#888888;}
.homeicons a {padding:20px;color:#555555;}
.homeicons a:hover {padding:20px;color:#f0d274;background-color:#82553b;box-shadow: 0px 0px 0px;border-radius: 6px;}
.homeimg {width:75px; height:75px;box-shadow: 0px 0px 0px;border-radius: 6px;}

.indexpage {width:100%; background-color:#fafafa; background-image:url('sand2.png'); height:500px;background-size:cover;}
.bannerbgabout {width:100%; background-color:#fafafa; background-image:url('sand2.png'); height:500px;background-size:cover;}


.modernbutton {padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            border: none;
            border-radius: 6px;
            background-color: #f0d274; 
            color: #888888;
            cursor: pointer;
            box-shadow: 0px 2px 4px rgba(0, 123, 255, 0.3);
            transition: background-color 0.3s ease;
	    border: solid 1px #bbbbbb;}

.modernbutton:hover {background-color: #dfdfdf;
	border: solid 1px #cccccc;}




.asections1 {width:30%;float:left;}
.asectionb1 {width:70%;float:right;}
.asections2 {width:30%;float:right;}
.asectionb2 {width:70%;float:left;}
@media (max-width: 600px) {
.asections1 {width:100%;float:left;}
.asectionb1 {width:100%;float:right;}
.asections2 {width:100%;float:left;}
.asectionb2 {width:100%;float:right;}
.asectionb1 p {text-align:center;}
.asectionb2 p {text-align:center;}
.indexpage {height:1000px;width:100%;}
.bannerbgabout {height:1000px;width:100%;}
.topmenu {display: none;}
.topmenu a {display: none;}
.logoimg {height:100%; width:100%;}
}



.calendar {border-radius:15px; box-shadow:0px 0px 5px #333333;}
@media (max-width: 600px) {
.calendar {width:300px;}
}


.maps {width:50%;}
@media (max-width: 600px) {
.maps {width:100%;}
}


.squarebutton {overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 259px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: -2px 10px 5px rgba(0, 0, 0, 0);
  border-radius: 10px;
  font-family: SQ Market, SQ Market, Helvetica, Arial, sans-serif;}


.collapsible {
  	  background-color: #dddddd;
  	color: #000000;
  	cursor: pointer;
  	padding: 18px;
  	width: 100%;
  	border: 0px solid #000000;
  	text-align: center;
  	outline: none;
  	font:400 15px arial, "Trebuchet MS", Helvetica, sans-serif;
	margin:3px;}

.collapsible:hover {background-color:#999999;color: #ffffff;}

.collapsible:after {content: '\002B'; color: #ffffff;margin-left: 5px;}

.active:after {content: "\2212"; color: #ffffff;}

.content {padding: 0 0;
  	display: none;
  	overflow: hidden;
	transition: max-height 0.4s ease-out;
  	background-color: #f1f1f1;
	}

.coldiv {width:50%;margin:auto;}

.button {border-radius: 10px;box-shadow: 0px 3px 5px #333333;}
.button:hover {border-radius: 10px;box-shadow: 0px 3px 20px #000000;} 


.classpay {border:0px solid #000000;margin:auto;max-width:400px;}

.regform {text-align:center; width:100%;margin:auto;border:1px solid #333333;}


.homebuttons { border: 1px solid #999999;
  color: #444444;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
	width:110px;
	height:155px;
font:18px arial, "Trebuchet MS";
background-color:#eeeeee;
	border-radius: 10px;
	box-shadow: 0px 3px 5px #333333;}

.homebuttons:hover {background-color:#cccccc; color:#222222;}

.homebuttonsrca { border: 1px solid #999999;
  color: #444444;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
	width:339px;
	height:155px;
font:18px arial, "Trebuchet MS";
background-color:#eeeeee;
border-radius: 10px;
	box-shadow: 0px 3px 5px #333333;}

.homebuttonsrca:hover {background-color:#cccccc; color:#222222;}

.homebuttonsevent { border: 1px solid #999999;
  color: #444444;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
	width:339px;
	height:350px;
font:18px arial, "Trebuchet MS";
background-color:#eeeeee;
border-radius: 10px;
	box-shadow: 0px 3px 5px #333333;}

.homebuttonsevent:hover {background-color:#cccccc; color:#222222;}

.banner {padding:0px;margin:0px; height:100px;  border-bottom:0px solid #000000;}


.bottom {width:100%; background-color:#2a6832; border:0px solid #000000; padding:15px 0px 15px 0px;}
.bottom td {width:100%; border:0px solid #000000;background-color:#2a6832;}
.bottom a {font:600 14px arial, sans-serif; padding-bottom:5px; color:#eeeeee;}
.bottom a:hover {font:600 14px arial, sans-serif; padding-bottom:5px; color:#ffce0b;}


.subjects {width:150px; font:400 14px arial; margin:auto; text-align:left;}

.home {float:left; width:25%;}


.green {color:#265028;}
.blue {color:#1CA3BC;}



.para	{margin:auto; background-color:#dddddd;}

.contactinfo {background-color:#dddddd; max-width:400px;margin:auto;}
.contactinfo a {font:600 14px arial, sans-serif; padding-bottom:0px; color:#333333;}

.form 	{text-align:center;
	margin:auto;
	width:100%;
	background-color:#efefef;
	max-width:350px; 
	border:1px solid #333333; 
	border-radius: 10px;
	box-shadow: 0px 3px 20px #333333;
	height:375px;
	color:#333333;
	padding:2px 0px 2px 0px;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif;}

.form td 	{background-color:#efefef;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif; 
	padding:0px 10px 0px 10px;
	width:100%;
	max-width:300px;}

.form input	{border:1px solid #000000;border-radius: 4px;}

.form textarea	{border:1px solid #000000;border-radius: 4px;}

.homepage {border:0px solid #333333;margin:auto;}

.formact 	{text-align:center;
	margin:auto;
	width:100%;
	background-color:#efefef;
	max-width:350px; 
	border:1px solid #333333; 
	border-radius: 10px;
	box-shadow: 0px 3px 20px #333333;
	color:#333333;
	padding:0px 0px 0px 0px;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif;}
.formact td 	{background-color:#efefef;
		font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif; 
		padding:0px 5px 0px 5px;
		width:100%;
		max-width:375px;}
.formact input		{border:1px solid #000000;border-radius: 4px;}
.formact textarea	{border:1px solid #000000;border-radius: 4px;}
.formact th 		{font:bold 18px arial;}


.form2 	{text-align:center;
	margin:auto;
	width:100%;
	background-color:#efefef;
	max-width:375px; 
	border:1px solid #333333; 
	border-radius: 10px;
	box-shadow: 0px 3px 20px #333333;
	color:#333333;
	padding:2px 0px 2px 0px;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif;}
.form2 td 	{background-color:#efefef;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif; 
	padding:0px 5px 0px 5px;
	width:100%;
	max-width:375px;}
.form2 input	{border:1px solid #000000;border-radius: 4px;}
.form2 textarea	{border:1px solid #000000;border-radius: 4px;}
.form2 th {font:bold 18px arial;}


.actregtable {margin:auto;}

.calculator {margin:auto;
	width:100%;
	background-color:#efefef;
	max-width:375px; 
	border:1px solid #333333; 
	border-radius: 10px;
	box-shadow: 0px 3px 20px #333333;
	height:100%;
	color:#333333;
	padding:2px 0px 2px 0px;
	font:bold 13px  arial, "Trebuchet MS", Helvetica, sans-serif;}










.actcal {background-image:url('cal_cyo_act3.png');width:750px; height:500px;margin:auto;}
.tutorcal {background-image:url('cal_tutoring_2023.png');width:750px; height:500px;margin:auto;}
.tutorprocal {background-image:url('cal_tutoring_pro_2023.png');width:750px; height:500px;margin:auto;}

@media (max-width: 600px) {
nav, article, section, aside {width: 100%;height: auto;}
.actcal {background-image:url('act_cyo_cal_vert4.png');width:375px;height:900px;}
.tutorcal {background-image:url('act_cyo_cal_vert4.png');width:375px;height:900px;}
.tutorprocal {background-image:url('act_cyo_cal_vert4.png');width:375px;height:900px;}
}

.actbutton {cursor: pointer; width: 200px;width:33%;}
.actpro {border:0px solid #000000; max-width:800px; max-height:600px; margin:auto;}
.actsession {border:0px solid #000000; max-width:800px; max-height:600px; padding:10px 0 0 0; margin:auto;}
.actcourse {border:0px solid #000000; max-height:600px; padding:10px 0 14px 0; margin:auto;}
.actdates {border:0px solid #000000;  max-height:600px; padding:10px 0 0 0; margin:auto;}


.topnav {
  background-color: #f0d274;
  overflow: hidden;
height:100%;
border-top:0px solid #000000;
margin-top:-5px;
}


.topnav a {
  float: left;
  display: block;
  color: #444444;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
height:99%;}


.topnav a:hover {
  background-color: #82553b;
  color: #eeeeee; 
}


.topnav a.active {
  background-color: #82553b;
  color: #eeeeee;
height:100%;
width:100%;}


.topnav .icon{
  display: none;
}

.icon {display:none; background-color:#ffcc00;}


@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
.dropdown-content.responsive {position: relative;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
.dropdown-content.responsive { float: none;
    display: block;
    text-align: left;}
}


.active {
  background-color: #717171;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;  
  border: none;
  outline: none;
  color: #444444;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  height: 99%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
margin-top:47px;
}

.dropdown:hover .dropdown-content {
  display: block;
}