/*********************************** */
/* ----------- widgets css ------------ */
/* ********************************* */

/*.widget .veryLargeText { font-size:180%; }
.widget .largeText { font-size:180%; }
.widget .largeText { font-size:180%; }*/

.crumbArrow { background:none !important; }

a img { border:0; }

#mobileMenuButton 			{ display:none; }
#bannerMobile	 			{ display: none; }

.slideshowTall div 			{ background: #fff; }
.slideshowShort div 		{ background: #fff; }
.slideshowShort div 		{ background: #fff; }

.slideshowSlide { background: #fff; }

.slideshowSlide img { max-height: 100%; max-width: 100%; }

.slideshowPlay { display:none !important; }
.slideshowPause { display:none !important; }

/*---- twitter ----*/
#twitter-widget-0 { width: 100% !important;  }

/*---- slideshow ----*/
.slideshowShort				{ clear:both; height:300px; overflow:hidden; width:100%; }
.slideshowNormal			{ clear:both; height:400px; overflow:hidden; width:100%; }
.slideshowTall				{ clear:both; height:500px; overflow:hidden; width:100%; }

.slideshowTall img,.slideshowNormal img, .slideshowShort img {
	position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
}

.slideshowMenu 				{ display:none; margin:10px 0 0 0; padding:10px; font-weight: bold; }
.slideshowMenu a:visited,
.slideshowMenu a:active,
.slideshowMenu a 			{ text-decoration: none; margin:0 5px 0 0; }
.slideshowMenu a:visited:hover,
.slideshowMenu a:hover 		{ text-decoration: underline; }



.slideshowTitle 			{ font-weight:bold; font-size:150%; }
.slideshowContent 			{ font-size:120%; padding:10px 0 0 0; }

.slideshowImageLeft			{ }
.slideshowImageLeft	.slideshowText { padding:10px 70px 0 0; }
.slideshowImageRight		{  }
.slideshowImageRight .slideshowText { padding:10px 0 0 70px; }

.slideshowCaption { position: absolute; color:#fff; bottom:0px; left:0px; width:100%; padding:4px; background:#000; opacity: 0.7; filter: alpha(opacity=70); /* For IE8 and earlier */ }

/*---- list ----*/
.list 						{ clear:both; padding:0 0 10px 0; }
.listItem					{ float: left; padding:6px 0 0 0; margin:0 0 3px 0; width: 100%; }

.listItemContentHolder		{ float: left; padding:0 0 10px 0; width: 100%; }
.listItemContent			{ margin-left: 105px; padding:0 0 4px 0; }
.listItemTitle				{ clear:both; font-weight:bold; padding:0 0 2px 0; word-wrap: break-word; }
.listItemTitle.large        { font-size:140%; }
.listItemSubtitle			{ clear:both; font-style:italic; }
.listItemText				{ clear:both; }
.listItemMore				{ clear:both; font-weight:bold; display: }
.listItemDate               { clear:both; font-style:italic; }

.listItemImage				{ float: left; padding:0 0 3px 0; text-align:center; width: 88px !important; margin-left: -100%; }
.listItemImage img			{ max-width:88px; max-height:120px; }

.listItemFeatured			{ float: left; padding:6px 0 10px; margin:0 0 3px 0; border-bottom: 1px solid #222; }
.listItemFeatured.pad 		{ padding-left:18px; } 
.listItemFeaturedImage 		{ text-align:center; border:4px solid #333; margin-left: -100%; float: left; }
.listItemFeaturedImage img 	{ max-height:100%; max-width: 100%; }
.listItemFeatured .listItemContent { margin-left: 165px; }

/*@media screen and (max-width: 480px){
    .listItemFeatured.pad{ padding-left:0px; } 
    .listItemFeatured{ width: 100% !important;} 
    .listItemFeaturedImage { margin: auto;}
}*/

.listItemFeaturedSpacer { border-bottom:1px solid #333; }

.newsListItem .listItemContent { margin-left:145px;  }

.newsListItem .listItemImage { width: 135px !important; margin-bottom:10px; }

.newsListItem .listItemImage a:visited, .newsListItem .listItemImage a:active, .newsListItem .listItemImage a { text-decoration: none; }



/*---*/

.slimDate { font-style:italic; }

/*---- list image ---*/
.listImage					{ clear:none; float:left; padding:10px 10px 10px 10px; }
.listImageThumb				{ border:4px solid #333; text-align:center; }
.listImageThumb img			{ border:0; }
.listImageTitle				{ clear:both; font-weight:bold; padding:5px 0 0 0; }

/*---- tileItem ----*/

.tileList					{  }
.tileListItem				{ clear:none; float:left; padding:0 3px 6px 3px; }

.tileListItem a				{ background:0; border:0; display:block; text-align:center; height:108px;  width:108px;  }
.tileListItem.cmsThumbLogin a { height:158px; }
.tileListItem img			{ border:4px solid #fff; max-height:100px; max-width:100px;  }

.tileListItem.larger a	 	{ height:178px; width:178px;  }
.tileListItem.larger.cmsThumbLogin a { height:228px; }
.tileListItem.larger img 	{ max-height:170px; max-width:170px; }

@media screen and (max-width: 480px){
    .tileListItem.larger { width: 48%; padding: 0 1%; }  
}


.tileListItem .selected	img	{ border:4px solid #333; }

/*---- gallery ----*/
.galleryImage 				{ padding:0 0 20px 0; }
.galleryImageMenu 			{ clear:both; padding:10px 0 10px 0; text-align:center; }

/*---- simpleItem ----*/
.simpleList					{ clear:both; }
.simpleItem					{ border-bottom:1px solid #8DCDF5; clear:both; padding:4px 0 8px 0; }
.simpleItemImage			{ border:4px solid #8DCDF5; clear:none; float:left; margin:0 8px 0 0; }

.title						{ clear:both; font-weight:bold; }

/*---- button ----*/
.button						{ clear:both; font-weight:bold; padding:10px 0 10px 0; }
.button a:visited,
.button a:active,
.button a					{ padding:4px 8px; text-decoration:none; }
.button a:visited:hover,
.button a:hover				{ text-decoration:underline; }
.button.large				{ font-size:140%; }

button						{ background:#8DCDF5; border:0; color:#202545; padding:4px 8px; text-decoration:none; }
button :hover				{ text-decoration:underline; }

/*---- pagination ----*/
.pagination					{ clear:both; padding:10px 0 10px 0; }
.pagination a:visited,
.pagination a:active,
.pagination a				{ padding:2px 4px; margin:0 2px 0 0; text-decoration:none; }
.pagination a:visited:hover,
.pagination a:hover			{ text-decoration:underline; }
.pagination .selected		{  }

.formCaptcha				{}
.formCaptcha img			{ border:1px solid #333; }

/*---- search form ----*/
.searchForm 				{ clear:both; padding:12px 0 12px 0; }

/*--- form ----*/
.formError 					{ color: #ff0000; }
.formField .formError 		{ padding:0 0 3px 129px; }
.formField label			{ text-align:right; padding-right:10px; padding-top:4px; font-size:120%; width:120px; }
.columnThreeLeft label,
.columnThreeRight label 		{ text-align:left; }

.formField input			{ border-radius:5px; padding:3px 5px; font-size:120%; border:1px solid #666; }
.formField textarea			{ border-radius:5px; padding:3px 5px; font-family:Arial; font-size:120%; border:1px solid #666; }
.formButton 				{ padding:10px 0 0 130px !important; }

.formFieldWider label       {text-align:right; padding-right:10px; padding-top:4px; font-size:120%; width:140px;}
.formButtonWider                 { padding:10px 0 0 147px !important; }
.formFieldWider .formError      { padding:0 0 3px 147px; }

.columnThreeLeft .formButton,
.columnThreeRight .formButton 		{ padding:10px 0 0 0; }


.formButton button			{ font-size:120%; font-weight:bold; }
.formCaptcha img 			{ margin-bottom:5px; border-radius:5px; }

.noneright                 { padding-top:10px; }

@media screen and (max-width: 480px){
    .formField label { text-align: left;}
    .formField input, .formField textarea { float: left; clear:both; }
    .formButton, .formField .formError { padding-left: 0 !important;}
}

/*--- subscribeform ----*/
.subscribeField .formError 	{ clear:both; padding-bottom:4px; font-weight:bold; }
.subscribeField 			{ clear:both; padding:0 0 10px 0; }
.subscribeField label		{ clear:both; display:block; text-align:left; padding-bottom:5px; font-weight:bold; font-size:120%; }
.subscribeField input		{ border-radius:5px; padding:3px 5px; font-size:120%; border:1px solid #666; }
.subscribeField textarea	{ border-radius:5px; padding:3px 5px; font-family:Arial; font-size:120%; border:1px solid #666; }
.subscribeButton 			{ clear:both; padding:10px 0 0 0; margin-bottom: 1em; }
.subscribeButton button 	{ font-size:120%; font-weight:bold; cursor: pointer; }

.subscribeTags span 	{
    white-space: nowrap;
    line-height: 25px;
    width: 28%;
    display: inline-block;
}
.subscribeTags input 	{ margin-right: 3px;}

.subscribeTags {
    display: block;
    clear: both;
}

.halfCol{
    width: 50%;
    float: left;
}

@media screen and (max-width: 480px){
    .halfCol{
        width: 100%;
    }
}

/*---- housesystem ---*/
.houseItem 					{ clear:both; padding:8px 3% 4px; margin-bottom: 1%; font-size:122%; color: #fff; font-weight: bold; position: relative; z-index: 79; }
.houseItemTitle 			{ clear:none; float:left; }
.houseItemPoints 			{ clear:none; float:right; font-weight: bold; font-size:112%; }
.houseItemBadge 			{ display: inline-block; height: 16px; width:16px; background: #fff; opacity: 0.5 }
.houseCol                   { float: left; text-align: center; margin: 0 15px 15px 0; padding: 10px; border: 3px solid #ccc; box-sizing: border-box; }
.houseCol img               { max-width: 100%; }
.houseCol .houseItemPoints  { float: none; margin-top: 10px; }

.housePercentage            { position: relative; background: #ccc;border: 1px solid #ccc; margin-bottom: 1%; }
.housePercentage .houseItem { margin-bottom: 0; }

/*--- calendarlist ---*/
.calendarSmall 				{ width:48%; }
.calendarSmall th 			{ padding:3px; }



/* ********************************* */
/* ----------- formats --------------*/
/* ********************************* */

.floatLeft					{ clear:none !important; float:left; }
.floatRight					{ clear:none !important; float:right; }

.bold						{ font-weight:bold; }

.textLeft					{ text-align:left; }
.textCenter					{ text-align:center; }
.textRight					{ text-align:right; }

/*---- widths ----*/
.width250					{ width:250px; }

/*---- align ----*/
.alignLeft					{ text-align:left; }
.alignCenter				{ text-align:center; }
.alignRight					{ text-align:right; }

/*---- padding ----*/
.padding10					{ padding:10px; }
.padding20					{ padding:20px; }

/*---- margin ----*/
.marginBottom10				{ margin-bottom:10px; }


/*********************************** */
/* ----------- articles ------------ */
/* ********************************* */

/*============ fadeshow ============ */
.fadeshowHolder				{ clear:both; position:relative; width:100%; }
.fadeshow					{ position:absolute; left:0; top:0; z-index:100; }
.fadeshow img				{ position:absolute; z-index:101; }
.fadeshowTitle				{ position:absolute; z-index:102; }

/*---- staff ----*/
.staff						{ clear:none; float:left; padding:0 8px 20px 8px; }
.staffImage					{ clear:both; }
.staffTitle					{ clear:both; font-weight:bold; }
.staffJob					{ clear:both; }
.staffBtn                   { text-align: center; }
.staffBtn a                 { display: inline-block; float: none !important; }

/*---- staff list ----*/

.stafflist { width: 98.30%; border-bottom: 2px solid #ccc; margin-bottom: 20px; }
.stafflist:last-child {  border-bottom: none; }
.staffListImage { float: left; }
.staffListImage img { max-width: 100%; }
.staffListMain { float: left; font-size: 120%; margin-left: 50px; width: 70%;}
.staffListMain .staffTitle { font-size:125%; padding-bottom:10px; }
.staffListMainFull  { float: left; font-size: 120%; width: 100%;}

.stafflistTwoCol { width: 48%; float; left;}
.stafflistTwoCol .staffListMain {  margin: 0 15px; width: 60%; } /*-- normal image two cols --*/
.stafflistTwoCol .staffListMainLarImg { float: right; font-size: 130%;  margin: 0 15px; width: 45%; } /*-- large image two cols --*/

@media screen and (max-width: 480px){
    .staffListMain, .staffListMainLarImg, .stafflistTwoCol { margin: 0 !important; width: 95% !important; }
}

/*---- calendar ----*/
.calendar					{ clear:both; }
.calendar td				{ padding:0; border-right: 1px solid #ccc !important; }
.calendar .month			{ padding:6px 10px 6px 10px; }
.calendar .number			{ clear:both; padding:3px 6px 3px 0; }
.calendar .event			{ border-bottom:1px solid #ccc; clear:both; padding:2px 2px 2px 2px; }

/*---- calendarsmall ----*/
.calendarSmall					{ clear:none; float:left; }
.caldenarSmall th				{ padding:0 !important; }
.calendarSmall td				{ padding:0 !important; }
.calendarSmall .month			{ padding:6px 10px 6px 10px; }
.calendarSmall .number			{ clear:both; padding:3px 6px 3px 0; }
.calendarSmall .event			{ border-bottom:1px solid #ccc; clear:both; padding:2px 2px 2px 2px; }

/*---- calendar full ----*/
.calendarFull           { width: 30%; margin: 0 1.5%;}
.calendarFull:nth-child(3n+1)         { clear:both; }
.calendarFullPopupSplit {display:block; border-top: 2px solid #ccc; width: 100%; margin-top: 10px; padding-bottom: 10px;}

.calendarWarning { text-align: center; font-size: 80%;}

/*---- newsthumbnail ----*/
.newsthumbnails .box 			{ padding:4px; margin:0 8px 8px 0; }

/*---- page links ----*/
.largeList { list-style:none; margin:0; padding:0 0 12px 0 !important; }
.largeList li { padding:0 0 8px 0; }
.largeList a:visited,
.largeList a:active,
.largeList a { background:#666; color:#fff !important; display:block; font-weight:bold; padding:10px 10px; font-size:150%; text-decoration:none !important; }
.largeList a:visited:hover,
.largeList a:hover { color:#fff !important; text-decoration:underline; }

/*----- slider -----*/
#sliderContentSlider			{ clear:both; overflow:hidden; position:relative; width:960px; }
#sliderSlidesSlider				{ height:300px; position:absolute; left:0px; width:12000px; }
.slide							{  clear:none; float:left; width:980px; }

#sliderStatusSlider				{  }
#sliderStatusSlider a:visited,
#sliderStatusSlider a:active,
#sliderStatusSlider a			{ background:#fff; clear:none; float:left; display:block; width:15px; height:15px; margin:0 10px 0 0; overflow:hidden; text-indent:-1000px; }
#sliderStatusSlider a:visited:hover,
#sliderStatusSlider a:hover		{  }

.sliderControls					{ clear:both; padding:15px 0 0 0; }
#sliderStatusSlider .slideSelected { background:#333; }

.sliderButtonSlider				{ clear:none; float:left; padding:0 15px 0 0; }
.sliderButtonSlider #sliderPlay { clear:none; float:left; display:none; }
.sliderButtonSlider #sliderStop	{ clear:none; float:left; }

.slideLeft { background:#fff; clear:none; float:left; width:48%; }
.slideRight { background:#fff; clear:none; float:right; text-align:center; width:50%; }

/*---- short ----*/
.sliderHeightShort { height:300px; position: relative; }
.sliderHeightShort #sliderSlidesSlider	{ height:300px; }
.sliderHeightShort .slideLeft { height:300px; }
.sliderHeightShort .slideRight { height:300px; }

/*---- normal ----*/
.sliderHeightNormal { height:400px; position: relative; }
.sliderHeightNormal #sliderSlidesSlider	{ height:400px; }
.sliderHeightNormal .slideLeft { height:400px; }
.sliderHeightNormal .slideRight { height:400px; }

/*---- tall ----*/
.sliderHeightTall { height:500px; position: relative; }
.sliderHeightTall #sliderSlidesSlider { height:500px; }
.sliderHeightTall .slideLeft { height:500px; }
.sliderHeightTall .slideRight { height:500px; }

.formSuccess { font-size:110%; font-weight:bold; }
.formSuccessLarge { font-size:110%; font-weight:bold; }
.formSuccessSmall { font-size:90%; font-weight:bold; }

.buttonBottomRight { position:absolute; bottom:0; right:0; z-index:100; }


.noticeboardSpacer { border-bottom:1px solid #666666; margin:0 0 10px 0; font-size:0; line-height:0; padding: 10px 0; }

.pageLinkBoxHolder { list-style:none; }
.pageLinkBox { border:1px solid #666; clear:none; float:left; font-weight:bold; margin:10px 10px; text-align:center; padding:10px 0; min-height:188px; }
.pageLinkBoxImg { margin-bottom: 5px; }
.pageLinkBoxImg a { border:0;  } 
.pageLinkBoxImg img { vertical-align:central; border:0; }

.boxNo3 {min-height: 300px;}
.boxNo4 {min-height: 255px;}
.boxNo5 {min-height: 181px;}
.boxNo6 {min-height: 151px;}
.boxNo7 {min-height: 129px;}

.linkboxWarning { text-align: center; font-size: 80%;}

.subscribeSuggestion { clear:both; padding:5px; }
.subscribeSuggestion a:visited,
.subscribeSuggestion a:active,
.subscribeSuggestion a { color:#FF0004; text-decoration:underline; }
.subscribeSuggestion a:visited:hover,
.subscribeSuggestion a:hover { color:#FF0004; text-decoration:none; }
/*********************************** */
/* -------------- news ------------- */
/* ********************************* */

.newsImage					{ clear:both; text-align:center; margin:0 0 15px 0; }


.updateSlideshow { clear:both; padding:5px 0 0 0; }
.updateSlideshow a:visited,
.updateSlideshow a:active,
.updateSlideshow a { background:#333; color:#fff; display:block; padding:3px 0; text-align:center; text-decoration: none; width:100%; }
.updateSlideshow a:visited:hover,
.updateSlideshow a:hover { background:#666; color:#fff; text-decoration: none; }

.resizeBox { 
	position: relative;
    width: 100%;
    background-color: #e2e2e2;
    overflow: hidden;	
}
.resizeIcon{
	background:#999;
	border:2px solid #999;
	position: absolute;
	z-index: 300;
   	width: 100%;
   	height: 5px;
   	left: 0;
   	background-image: url(http://www.swdsites.com/resizeicon.png);
   	cursor: n-resize;
}


#bannerMobile { display:none; }

.month.fontLarge { font-size:140%; }

/*======================================================================*/
/*======================================================================*/

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.eot');
    src: url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 42%;

    display: block;

    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev {
	background:url(https://storage.googleapis.com/swdsystem/images/slideshow.png) no-repeat -123px -30px !important;
	width:55px !important;
	height:55px !important;
	
}

.slick-next {
	background:url(https://storage.googleapis.com/swdsystem/images/slideshow.png) no-repeat -65px -30px !important;
	width:55px !important;
	height:55px !important;
	
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    
}
[dir='rtl'] .slick-prev:before
{
    
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{

}
[dir='rtl'] .slick-next:before
{

}

/* Dots */
.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -45px;

    display: block;

    width: 100%;
    padding: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


/* Slider */
.slick-slider
{
    position: relative;

    display: block;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}

.slick-slide img { max-width:98%; max-height:98%; }

.menu2Cols { width:600px !important; }

.menu2Cols li { width:100% !important; background: none !important; }

.menu2ColsItem { clear:none; float:left; width:50%; }

.menu2ColsItem a { width: 93.5% !important;}

/*---- survey monkey ----*/
.smcx-embed,.smcx-embed>.smcx-iframe-container { width:100% !important; min-height:500px !important; }

.newColumn  { margin-bottom: 20px; }

.newColumn .listItemFeaturedImage { margin-left: 0 !important; transition: transform .2s; }
.newColumn .listItemFeaturedImage:hover { transform: scale(1.25);  }

.newColumn .listItemFeatured { background:#fff; padding:0; border-radius: 0 0 5px 5px; min-height: 440px; box-shadow: 0px 5px 10px -1px rgba(0,0,0,0.75); }
.light .newColumnContent  a:visited, .light .newColumnContent  a:active, .light .newColumnContent  a, .light .newColumnContent  a:visited:hover, .light .newColumnContent  a:hover { color: #000; }

.newColumnContent { padding: 40px 10px 15px; position: relative; }
.newColumnContent .listItemSubtitle { position: absolute; top: -17px; left: 0; background: #000; color: #fff; padding: 10px; }
.newColumnContent .listItemTitle { font-size:140%; }

.newsCol1 { clear:none; float:left; width:100%; }
.newsCol2 { clear:none; float:left; width:47%; padding:0 1%; }
.newsCol3 { clear:none; float:left; width:31%; padding:0 1%; }
.newsCol4 { clear:none; float:left; width:22%; padding:0 1%; }

.newsCol1 .darkBorder, .newsCol2 .darkBorder, .newsCol3 .darkBorder, .newsCol4 .darkBorder{
    width: 98%;
}

.newsCol1 img, .newsCol2 img, .newsCol3 img, .newsCol4 img{
    max-width: 100%;
}



@media screen and (max-width: 480px ){
    .newsCol1, .newsCol2, .newsCol3, .newsCol4{
        width: 99%;
    }

    .newsCol1 .darkBorder, .newsCol2 .darkBorder, .newsCol3 .darkBorder, .newsCol4 .darkBorder{
        height: auto !important;
    }
}

/*---------- TICKER --------------*/
/* liScroll styles */
/*.tickercontainer {
  width: 300px;  the plugin works for responsive layouts so width is not necessary 
  overflow: hidden;
  border:1px solid #ccc;
}*/
.tickercontainer { /* the outer div with the black border */
background: #D11418; 
color:#fff;
width: 100%; 
height: 20px; 
margin: 0; 
padding: 10px 0; 
overflow: hidden; 
}

.tickercontainer a, .tickercontainer a:visited, .tickercontainer a:active, .tickercontainer a:hover { color: #fff; }
.tickerDiv { position:relative; }
#tickerresume{ display: none;}
.pauseResume { position: absolute; top:0; display: none;}
.pauseResume a { border-right: 1px solid #fff; padding: 2px 4px; display: block;}
@media screen and (max-width:480px){
    .pauseResume { display: block;}
}
#tickerView { position: absolute; top: 10px; left: 10px; }

/*.tickercontainer .mask { that serves as a mask. so you get a sort of padding both left and right 
position: relative;
left: 0px;
top: 8px;
width: 100%;
overflow: hidden;
}
ul.newsticker {  that's your list 
position: relative;
left: 400px;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left;  important: display inline gives incorrect results when you check for elem's width 
margin: 0;
padding: 0 10px;
}
ul.newsticker a:visited,ul.newsticker a:active,ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #fff;
} 
ul.newsticker a:hover,ul.newsticker a:visited:hover {
	color: #fff;
}

ul.newsticker span {
margin: 0 10px 0 0;
} */

/*--- liscroll v1.1 ---*/
    /*
    jquery.liScroll
-----------------------------------------------*/
.liScroll-container { /* the outer div with the black border */
    /*border: 1px solid #ccc;
    background: #fff; 
*/    height: 20px; 
   /* margin: 0 0 15px; */
    padding: 2px 5px 2px 5px; /*for buttons: padding: 2px 85px 2px 5px;*/
    position: relative;
    overflow: hidden; 
    font-size:14px;
    font-family: sans-serif;
}
.liScroll-container .liScroll-mask { /* that serves as a mask. so you get a sort of padding both left and right */
    position: relative;
    overflow: hidden;
}
    .liScroll-ticker { /* that's your list */
        position: relative;
        left: 300px;
        list-style: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
    }
        .liScroll-ticker ul {
            list-style: none;
            list-style-image: none;
            margin: 0;
            padding: 0;            
        }
        .liScroll-ticker li {
            float: left; /* important: display inline gives incorrect results when you check for elem's width */
            list-style: none;
            list-style-image: none;
            margin: 0;
            padding: 0;
            /*background: #fff;*/
        }
            .liScroll-ticker a {
                color: #b21226;
                white-space: nowrap;
                padding: 0;
                margin: 0 50px 0 0;
                text-decoration: none;
            } 
                .liScroll-ticker a:hover {
                    text-decoration: underline;
                }
            .liScroll-ticker span {
                margin: 0 10px 0 0;
            } 

    .liScroll-container .liScroll-prev,
    .liScroll-container .liScroll-play,
    .liScroll-container .liScroll-next {
        background: url(sprites.gif) no-repeat 1px 2px;
        cursor: pointer;
        height: 25px;
        position: absolute;        
        text-align: left;
        text-indent: -9999px;
        top: 0px;
    }
    .liScroll-container .liScroll-prev {
        right: 55px;
        width: 25px;
    }
    .liScroll-container .liScroll-play {
        background-position: -25px -24px;
        right: 25px;
        width: 25px;
    }
    .liScroll-playing .liScroll-play {
        background-position: -25px 2px;
    }
    .liScroll-container .liScroll-next {
        background-position: -100px 2px;
        right: 0px;
        width: 25px;
    }

/*--- liscroll end ---*/


.fromRequired { display:none; }

/*--- homework table style ---*/

.homeworkHolder { width: 19.75%; float: left; border: 1px solid; }
.homeworkDate { padding: 10px 15px; }
.homeworkInnerWrapper { margin-bottom: 5px; padding: 10px 15px; border-top: 1px solid; }
.homeworkFullDetails { padding: 10px 15px; border: 1px solid;}
#classTable, #subjectTable { padding: 5px 10px; margin-bottom: 10px; }
.homeworkTitle { font-weight: bold}
.homeworksubject { font-style: italic;}
.homeworkclasses span { color: #fff; padding: 2px 4px; margin: 5px 5px 0 0; display: inline-block; border-radius: 5px; font-size: 85%; }
.homeworkDownload { float: right; }
.homeworkHolderSmall { width: 99.7% !important;}

.homeworkFullDetails .homeworkTitle { font-size: 140%; }
.homeworkFullDetails .homeworksubject { font-size: 110%; }
.homeworkFullDetails .homeworkContent { border-top: 1px solid; padding: 20px 0;}
.homeworkFullDetails .homeworkDueDate { padding: 10px 0; font-size: 90%;}
.homeworkAttach { border: 1px solid; margin: 7px 0; padding: 15px 15px;}
.homeworkFullDetails .homeworkContent { font-size: 120%; }

.homeworkcontentLoading, .homeworktableLoading { text-align: center; }

.homeworkTableManage { float: right;}

@media screen and (max-width: 480px){
    .homeworkHolder { width: 99%;}    
}

/*--- school survey ---*/
.surveyForm {font-size: 16px;}
.surveyForm fieldset { border: none; padding: 10px 15px; margin-bottom: 20px;}
.surveyForm label { font-size: 130%; display: block; margin-bottom: 20px;}
.surveyForm input[type="submit"] { border: 1px solid #ccc; border-radius: 5px; padding: 5px 10px; font-size: 100%;}
.surveyForm input[type="text"], .surveyForm select { width: 97.71%; border: 1px solid #ccc;  border-radius: 5px; padding: 5px 1.04%; /*5px 10px*/ font-size: 16px;}
.surveyForm input[type="text"] { float: left;}
.surveyForm select { width: 100%;}
.surveyForm textarea { border: 1px solid #ccc;  border-radius: 5px; padding: 5px 1.04%; /*5px 10px*/ width: 97.71%; height: 100px;}
.surveyForm input[type="radio"], .surveyForm input[type="checkbox"] {margin: 0 10px 0px 0; float: left; zoom: 1.75;}
.surveyForm .inputVal { float: left; color: #666666; font-size: 100%;}
.surSelection { clear: both; padding-bottom: 15px;}
#optionsVaules, .addSurvey, .otherDropdown, #checktextHolder, #optionsEmailVaules { display: none;}
.optionsValue { width: 50% !important;}
.optionsEmailValue { width: 45% !important; margin-right: 2%; }
.optionsEditEmailValue  { width: 43% !important; margin-right: 2%; }
#surveyEdit, .addSurvey { background: #ebeaea; padding: 10px; border-radius: 10px; border:3px solid #666;}
.addSurveyQus, #emailCopyDisplay, #editEmailCopyDisplay { display: none;}
.deleteQuestionOption img { float: left; width: 30px; height: 30px;}
.questionOpt { margin-bottom: 8px;}
.surveyDoc { margin: 15px 0; }
.scale { float: left; text-align: center; border: 1px solid #ccc; border-left: none; background: #fff; width: 50px; box-sizing: border-box; }
.firstScale {  border-left: 1px solid #ccc !important; border-radius: 5px 0 0 5px; margin-left: 15px; }
.lastScale { border-radius: 0 5px 5px 0; margin-right: 15px; }
.scale label { margin-bottom: 0 !important; padding: 10px 15px; cursor: pointer;}
.scaleSel { background: #ababab !important; }
.scale .inputVal { float: none;}
.scale input[type="radio"]{ display: none; margin-right: 0; float: none;}
#scaleVaules, #scaleEditVaules, #optionsEditVaules { display: none;}
.scaleText { float: left; padding-top: 15px; color: #666666; }
.scaleTextMob { display: none; }
.surveyodd { background: #fbfbfb;}
.surveySubmit { font-size: 160% }
.surveyForm .formSuccess { margin: 20px 15px;}
.surveyTitleField { font-size: 212%; font-weight: bold; border-bottom: 4px solid #000; padding: 10px; margin-bottom: 20px; background: #ccc;}
.questionTextarea button { background: transparent !important; }
.addSurveyQues { text-align: center}
.addSurveyQues input[type="submit"]{ background: #F26899; color: #fff; margin:2px 0; font-size: 200%; cursor: pointer; }
.addSurveyQues input[type="submit"]:hover { background: #E94982;}
#qustEditType, #qustType { font-size: 160%;}
#commentSection,#commentEditSection,#compactBox,#editCompactBox,#sendEmailOption,#editSendEmail,#emailVerifyOption,#editVerifyEmail,#editChecktextHolder { display: none; }
.compactLabel{ width: 25% !important; float: left !important; margin-bottom: 0 !important;}
.compactField{ width: 70% !important; float: right !important;}
.surveySubTitleField {font-size: 190%; font-weight: bold; border-bottom: 4px solid #000; padding: 10px; margin-bottom: 20px;}
.surveyTextBlock {font-size: 140%; padding: 10px; margin-bottom: 20px;}
.surveyDateField .compactLabel { margin-top: 10px;}
.surveyDate { float: left; width: 50px; text-align: center; margin-right: 15px; }
.surveyDate .inputVal { float: none;}
.surveyDate input[type="text"] { text-align: center; }
.rating { float: left; }
.rating > input { display: none; } 
.rating > label:before { margin: 5px; font-size: 40px; display: inline-block; content: "★"; }
.rating > label { color: #ddd; float: right; }

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; cursor: pointer;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; cursor: pointer;  } 

@media screen and (max-width: 370px){
    .rating > label:before { margin: 5px 1px; font-size: 35px; }
}

.checktextInfo input[type="checkbox"] { float: none; position: relative; top: 4px;}

@media screen and (max-width: 480px){
    .compactLabel{ width: 100% !important; float: left !important; margin-bottom: 0 !important;}
    .compactField{ width: 97.71% !important; float: right !important;}
    .scaleText { display: none; }
    .scaleTextMob { display: block; }
    .scaleTextMob:after { content: ""; clear:both; display: block; }
    .scaleTextMob span { display: inline-block; }
    .scaleTextMob span:first-child { float: left; }
    .scaleTextMob span:last-child { float: right; }
    .scale { width: 20%; }
    .firstScale { margin-left: 0; }
    .lastScale { margin-right: 0; }
    .scaleHolder { padding-top: 15px; }
}

.surveyBtn a  { display: block; }

.surveyErrorBg { background:#f9e7e7; padding:10px; }
.surveyEditCmsBtn { margin: 0 0 20px 0 !important;}

.requiredMarker { color: red; font-weight: bold; }

.formOptionHolder { margin: 5px 0; }
.formOptionHolder label{ display: inline-block !important; }

/*----- vertical align ----*/
.verticalAlignHelper { display: inline-block; height: 100%; vertical-align: middle; }
.verticalAlign { vertical-align: middle; display:inline-block; }


/*--- School App Widget ---*/

.schoolAppWidget { max-width: 450px; margin: 0 auto; }
.schoolAppWidget img { max-width: 100%; }
#schoolAppPhone { width: 45%; float: left;}
#schoolAppPhoneIcon { padding: 10px 0; text-align: center; }
#schoolAppDownload { width: 55%; float: right;}
.downloadIcon { margin-bottom: 15px }
.appIconAlign { display: inline-block; }
/*.schoolAppWidget.schoolappSmallWidth, .schoolappSmallWidth #schoolAppPhone, .schoolappSmallWidth #schoolAppDownload { width: 100%; text-align: center;}
.schoolappSmallWidth #schoolAppDownload ul, .schoolappSmallWidth #schoolAppDownload p { display: none;}*/
.schoolappSmallWidth  #schoolAppDownload { width: 100%; padding-top: 10px; }

@media screen and (max-width: 480px){ 
    #schoolAppDownload ul { list-style: none; padding-left: 0}
}

/*--- Login Shortcut ---*/

#loginshortcut { width: 700px; position: fixed; z-index: 9; background: red; left: 50%; margin-left: -350px; top: 200px; color: #fff;}
.shortcuts { width: 30%; float: left; }
#shortcutskip { clear: both; width: 100%; text-align: center;}

/*--- Awards / Sponsors ---*/

.awardsHolder {display:inline-block; padding: 10px; text-align:center;  display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    margin: auto;}
    .awardsHolder img { 
    object-fit: contain; /* Ensures logos maintain aspect ratio within the defined width/height */
    margin: 0 10px; /* Adjust spacing between logos */ }
.sponsors { text-align: center}
.awardImgPop { display: block; }
.awardImgPop img { max-width: 400px; max-height: 400px; }

/*--- Posters ---*/

.posterHolder { margin-bottom: 10px; text-align: center; clear: both; position: relative; }
.posterHolder img { max-width: 100%;}
.posterManageButton { float: left;}
.fullPoster { position: absolute; bottom: 15px; right: 15px;}

.classImage { padding:0 0 10px 0; }
.classImage img { max-width:100%; }

/*--- Title Art ---*/

.titleArt { text-align: center; border-radius: 10px; margin-bottom: 15px;}
.starsleft {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsleft.png) no-repeat 2% 10px;}
.starsright {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsright.png) no-repeat 98% 10px; padding: 10px 120px; height: 100px}
.cupsleft {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsleft.png) no-repeat 2% 10px;}
.cupsright {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsright.png) no-repeat 98% 10px;  padding: 10px 120px; min-height: 100px}
.tennisleft {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsleft.png) no-repeat 2% 10px;}
.tennisright {background:url(../../cmsfiles/images/widgets/titleart/titleartstarsright.png) no-repeat 98% 10px;  padding: 10px 120px; min-height: 100px}
.starsright p, .cupsright p, .tennisright p { font-size: 140%;}

@media screen and (max-width: 480px){
    .titleArt { text-align: left;}
    .starsright{ background-image: none; padding-right: 0; min-height: 100px; height: auto;}
    .widget_titleart .verticalAlignHelper { height: 0; display: block; }
    .widget_titleart .verticalAlign {display: block;}
    .starsright p, .cupsright p, .tennisright p { font-size: 100%;}
}

/*--- linkbox ---*/
.linkboxText { margin-top: 10px; }
.linkboxHolder { float: left;}
.box a img { transform: scale(1.0); transition: transform .4s ease-in-out; -webkit-transform: scale(1.0); -webkit-transition: -webkit-transform .4s ease-in-out; -moz-transform: scale(1.0); -moz-transition: -moz-transform .4s ease-in-out; -ms-transform: scale(1.0); -ms-transition: -ms-transform .4s ease-in-out;}
.box a:hover img { transform: scale(1.2); -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); }
.linkboxImgHolder { text-align:center; border: 1px solid #ccc; border-radius: 10px; overflow: hidden }

/*--- Calendar (mobile) ---*/
.mobileCalDay { display: none;}
@media screen and (max-width: 480px){
    .mobileCalDay { display: inline;}
}

a.spamcheck{
    font-size: 12px !important;
}

.messageAlert{
    position: fixed;
    top: 38px;
    margin-left: -200px;
    margin-right: auto;
    width: 400px;
    background-color: #fff;
    color: #f04124;
    padding: 10px;
    z-index: 9999;
    right: 50%;
    left: 50%;
    border: 1px solid #999;
    border-radius: 10px;
    text-align: center;
}
.messageAlert.good{
    color: #00AB13;
}
.messageAlert:before{
    content: 'x';
    display: block;
    float: right;
    color: #999;
}

/*==== app banner ===*/
#AppBanner { padding:10px 0; background:#fff; width:100%; }
.AppBannerTop { position:relative; border-bottom:2px solid #222; }
.AppBannerBottom { position:fixed; bottom:0; left:0; z-index:1200; border-top:2px solid #222; }
#AppBannerInner { width:980px; margin:0 auto; }
#AppBannerText { float:left; font-size:18px; padding:12px 20px 0 0; }
#AppBannerButtons { clear:none; float:left; }
#AppBannerTextClose { clear:none; float:right; padding:6px 0 0 20px; }

/*--- Booking Resourcer ---*/
.bookingResourceHolder { position: relative; min-height: 350px }
.resourceHolder { background: #000; opacity: 0.98; }
.resourceConfirm { background: #fff; opacity: 0.98; position: absolute; top: 0; left: 0; max-width: 940px; width: 100%; display: none; }
.resourceTitle { font-size: 140%; margin-bottom: 10px;}
.bookedRes { text-align: center}
.notBookableRes {text-align:center; background: #f9b6b6;}
.bookableRes {text-align:center; background: #cef9d0;}
.bookedRes img, .bookableRes img, .notBookableRes img { width: 24px; height: auto;}
.bookerTable { margin-bottom: 0 !important;}
.resourceBox {border: 1px solid; padding: 30px 50px; min-height: 90px;}
.resourceBox li { font-size: 120%; }
.resourceDate { width: 100%; display: block; margin-bottom: 10px; text-align: left;}
.calNav { margin-bottom: 0; font-size: 120%; }
.calNav th { text-align: center; border-bottom: 0; font-size: 140%}
.calNav td { border-bottom: 0; }
.calNav td:nth-child(2) { text-align: center; font-weight: bold; }
.calNav td:last-child { text-align: right; }
.clickDay { background: #ccc; } 
@media screen and (max-width: 720px){
    .bookerTableWrapper { overflow-x: scroll; }
    .bookerTable { width: 700px; }
}

@media screen and (max-width: 480px){
    #resourceMonthView td, #resourceMonthView th { display: block; width: 91%;}
    #resourceMonthView th { padding-right: 12px;}
    .emptyDate, #calLabel { display: none !important;}
    .resourceDate, #resourceMonthView .mobileCalDay{ text-align: right; display: block;}
    .calNav td { text-align: center !important;}
}
.closeResource { position: absolute; top: 10px; right: 15px; width: 35px; text-align: center; font-size: 185%; font-weight: bold; }
.closeResource a { text-decoration: none;}
.bookerTable th { text-align: center; }
.resourceInfo { width: 50%; float: left;}
.resourceDateHolder { display: none;}
.resourceDateHolder fieldset { border: none; margin-bottom: 10px; font-size: 120%; }
.resourceDateHolder input[type="checkbox"] { width: 18px; height: 18px;}
.userResource { margin-top: 10px;}
.resourceBox select { font-size: 120%; width: 50%; padding: 4px 2px; border-radius: 5px; }

/*--- your booking ---*/
.yourBookings #title, .bookingInfo #title { font-size: 180%; border-bottom: 2px solid #000; padding: 5px 0; margin-bottom: 20px; }
.yourBookings table, .yourBookings table td { border: 0; font-size: 110%; }
.yourBookings table td { padding: 0 10px; }
.yourBookings table th { background: none; color: #000; border: 0;  font-size: 120% }
.yourBookings .oddBG { background: #ebebeb; }
.yourBookings select { font-size: 180%; border-radius: 5px; }
.yourbookingnone { font-size: 160%; padding: 15px 0px; font-weight: bold; }
.yourBookings .button a { font-size: 110%; }
.yourbookresults { max-height: 300px; overflow-y: auto; }
.yourBookingselect { margin-bottom: 10px; }
.titleBookings { margin-bottom: 0; }
.bookingInfo { padding: 10px 15px; border: 1px solid #000; }
.bookingInfo table, .bookingInfo td { border: none; font-size: 110%; }
.bookingInfo tr { border-top: 2px solid #fff; }
.bookingInfo th { border: none; background: #c0c0c0; color: #000; font-size: 120%; }
.bookingInfo .pinkButton, .bookingInfo .button { display: inline-block; }
.bookingInfo .pinkButton a  { background: #EC008C; color: #fff; display: inline-block; font-size: 140%; font-weight: normal; padding: 4px 8px !important; text-decoration: none; }
.bookingInfo .pinkButton a, .bookingInfo .button a { background: #EC008C; color: #fff; font-size: 110% !important; font-weight: normal !important; text-decoration: none; }
.bookingInfo select { font-size: 110%; border-radius: 5px; }
.bookingMainTitle { font-size: 140%; margin-bottom: 15px; }
.yourBookingDate { font-weight: bold; }
.activeBookingDate { border: 3px solid #000 !important; }

/*--- Buttons Icon ---*/

.buttonsIconImg{ width: 16px; height: auto; padding: 2px 3px 2px 0px; vertical-align: middle; }
.large .buttonsIconImg{ width: 21px; height: auto; padding: 2px 3px 2px 0px; vertical-align: middle; }

.buttonsIcon, .buttonsIcon a { display: inline-block; }

.button.tiledbuttonsiconcal a { background-image: url(../../cmsfiles/images/iconmonstr-calendar-5-240.png) !important; background-repeat: no-repeat !important; background-position: center 15px !important; padding: 50px 10px  10px !important; display: inline-block; border-radius: 5px; }

.buttonIconHolder svg { margin-bottom: 10px; filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5)); }
.buttonIconHolder span { filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.5)); }

@media screen and (max-width: 480px){ 
    .buttonsIcon{ display: block}
}

/*--- FAQ ---*/

.faqHolder { border-bottom: 4px dotted;}
.faqQus { font-size: 160%; font-weight: bold; margin-top: 12px; }
.faqAns { font-size: 120%; }
@media screen and (max-width: 480px){
    .faqAns{ display: none; }
}

/*--- poll ---*/

.poll { text-align: center}
.pollTtile { font-weight: bold; font-size: 140%; }
.pollButton { border-radius: 5px; border: 1px solid #000; width: 96.80%; max-width: 500px; display: block; padding: 10px 1.60%; text-align: center; cursor: pointer; margin: 10px auto; text-decoration: none;}
.pollButton:hover { text-decoration: underline; }

/*-- Calendar color background --*/

.redCalBg { background: #fa573c; }
.orangeCalBg { background: #ffad46; }
.yellowCalBg { background: #fbe983; }
.greenCalBg { background: #b3dc6c; }
.purpleCalBg { background: #b99aff; }
.pinkCalBg { background: #f691b2; }
.blueCalBg { background: #9fc6e7; }
.brownCalBg{ background: #ac725e; }

/*--- news slider ---*/
.newsSlideText { position: absolute; bottom: 10px; background: rgba(255,255,255,0.9); border: 1px solid #ccc; padding: 10px 2.13%; width: 92.53%; text-align: left; left: 1.5%;}
.newsSlideTitle { font-size: 140%; font-weight: bold; }
.newsSlideDate { font-size: 120%; font-weight: bold; font-style: italic; }
.newsSlideMainText { font-size: 110%; }

@media screen and (max-width: 480px){
    .newsSlideTitle { font-size: 305%; }
    .newsSlideDate { font-size: 215%; }
    .newsSlideMainText { display: none; }
    .newsSlideText .listItemMore { font-size: 255%}
}

/*--- featured link ---*/
.widget_featurelink { border-radius: 10px; }
.featuredlinkHolder { padding: 24px 10px; display: table;}
.featuredlinkImg { width:100%; text-align: center;}
.featuredlinkImg img { max-width: 100%;}
.featuredlinkText { display: table-cell; vertical-align: middle; padding-left: 2%; text-align: center; font-size: 230%; }
.featuredlinkText a, .featuredlinkText a:visited, .featuredlinkText a:active{ text-decoration: none;}
.featuredlinkText a:hover, .featuredlinkText a:visited:hover{ text-decoration: underline;}
.linkTextNoImgHolder { display: block; padding: 24px 10px;  }
.linkTextNoImg { text-align: center; font-size: 230%;}

/*--- IOS disbale contentmenu ---*/
img, .thumbDisable { -webkit-touch-callout: none; }

/*--- google translate ---*/

#google_translate_element{ height: 24px;}

/*---- dropdown right align ----*/
.dropdownright ul { right: 0 !important; left: auto !important;}
.dropdownright ul a { width: 312px !important;}
.dropdownright ul ul { left: -332px !important;}

@media screen  and (max-width: 480px){
    .dropdownright ul ul { left: auto !important;}
}

/*--- Compact Text ---*/

.compactTextHolder { border-bottom: 4px dotted;}
.compactTextQus { font-size: 160%; font-weight: bold; margin: 12px 0; cursor: pointer; }
.compactTextAns { display: none; }
.compactTextAns img { float: right; padding: 0 0 10px 10px; }
.compactTextQus a { text-decoration: none; }
.compactTextQus a:hover { text-decoration: underline; }
.plusMinus { float: right;}

#branch-banner-iframe { position: fixed !important; }

/*--- scroll to top button ---*/
#backto-top { position: fixed; bottom: 3.8em; right: 2em; display: none; opacity: 0.4; cursor: pointer;}

/*--- Policies ---*/

#policies { text-align: center; padding: 10px 0 20px;}
#policies ul { list-style: none; padding-left: 0;}
#policies li { display: inline; padding-left: 5px; border-right: 1px solid #fff; }
#policies li:last-child { border-right: none; }
#policies a { padding-right: 5px; }

/*--- widget inner ---*/
.widgetInner{ word-wrap: break-word; }

/*--- news preview ---*/

#newsPreviewMode {text-align: center; background: #e7d962; padding: 10px; margin-bottom: 10px; }

.docContent{margin-top: 10px;}

/*--- contact form small column ---*/

.formField.smallForm  input, .formField.smallForm  textarea { width: 95.80%; }
.formField.smallForm  label { text-align: left; width: 95%; }
.smallForm .formError { padding-left: 0; }

/*--- featured news ---*/
.widget_featurednews { padding: 20px 90px; color: #000;}
#featuredNewsOuter { margin: 1.5% 0; }
#featuredFullNewMain {width: 100%;}
#featuredNewMain { float: left; width: 450px;}
#featuredNewTitle a:visited, 
#featuredNewTitle a:active, 
#featuredNewTitle a { font-weight: bold; font-size: 235%; margin-bottom: 20px; color: #000; text-decoration: none; }
#featuredNewTitle a:visited:hover,
#featuredNewTitle a:hover { color: #000; text-decoration: underline; }
#featuredNewContent { font-size: 125%; font-style: italic; line-height: 30px;}
#featuredNewImage { float: right;}
#featuredNewImage img { border: 6px solid #fff}

@media screen and (max-width: 600px){
    .widget_featurednews { padding: 20px 10px;}
    #featuredNewMain { width: 100%;}
    #featuredNewImage { float: left; width: 100%; }
}

/*--- text image ---*/

.txtImgLeft { float:left;  padding:0 10px 10px 0; }
/*.txtImgLeft img {padding:0 10px 10px 0px;}*/
.txtImgRight { float:right;  padding:0 0 10px 10px; }
/*.txtImgRight img {padding:0 10px 10px 0px;}*/
.txtImgTop { text-align: center; margin: 0 auto; }
@media screen and (max-width: 480px){
    .txtImgRight, .txtImgLeft, .txtImgTop { width: 100%; max-width: 100% !important; }
    .txtImgRight img, .txtImgLeft img, .txtImgTop img { width: 100%; max-width: 100% !important; padding-left: 0 !important; }
}

/*--- user protected login ---*/

.userProContainer{ width: 230px; margin: 0 auto; }
.userProContainer .loginfielddiv input { background: #e5e5e5; width: 95.18%; font-size: 100%; border: 2px solid #ddd; border-radius: 5px; color: #444; padding: 7px  1.72%;  margin-bottom: 15px ; }
.userProContainer .loginfieldtitle {  text-align: left; font-size: 160%; font-weight: normal; }
.userProContainer .loginButtons .buttonPink button, .userProContainer .loginButtons .buttonPink button:hover { border: none; color: #fff;  font-size: 25px !important; padding: 5px 10px !important; width: 141px; border-radius: 0 !important;}

/*--- link list ---*/

.linkListHolder { float: left; width: 100%; }
.boxlist { background: #fff !important; clear: both; float: left; padding: 7px; margin: 10px 0.5%; width: 99%; position: relative;  box-sizing: border-box;  }
.boxListTitle { font-weight: bold; }
.boxListImg { text-align:center; float: left; position: absolute; top: 50%; transform: translateY(-50%); }
@media screen and (max-width: 480px){
    .boxListTitle { margin: 0 !important; padding-top: 10px;  clear: both; }
}

/*--- link list button ---*/
.buttonListHolder { clear: both; }

/*--- Document Two Col ---*/
.docCol1 { margin-right: 2%; }
.docTwoCol { width: 48%; float: left;}
@media screen  and (max-width: 480px){
    .docCol1 { margin-right: 0%; }
    .docTwoCol { width: 100%; }
}

.docCol1 { margin-right: 2%; }
.docThreeCol { width: 31%; float: left;}
@media screen  and (max-width: 480px){
    .docCol1 { margin-right: 0%; }
    .docThreeCol { width: 100%; }
}

/*--- letter/document tranlate button ---*/
.translateBtn { display: inline-block; margin-bottom: 7px;}

/*--- image grid ---*/
/*.imageGridHolder img { float: left; }*/

/*--- image grid caption ---*/
.imgGridCap { background: #ccc; padding: 5px 10px; text-align: center; position: absolute; bottom: 8px; width: calc(100% - 36px); }
.imgGridImg { display: inline-block; padding: 10px 8px; position: relative; }

/*--- Jobs ---*/
.jobHolder { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.jobHolder:last-child { border-bottom: none;  }
.jobTitle { font-size: 260%;  font-weight: bold; margin-top: 10px; }
.jobSubtitle { font-size: 160%; margin-bottom: 10px; }
.jobDesc { font-size: 120%; }

/*--- quotes ---*/
.quoteText { font-size: 130%; }
.quoteImage { float: right; padding: 0 0 5px 5px;}
.quoteName { font-style: italic; }
.quotesHolder { position: relative; padding: 15px 20px 15px 45px; border-bottom: 1px solid #ccc; }
.quotesHolder:last-child { border-bottom: none;  }
.quotesHolder::before{ content: "\201C"; font-size: 60px;font-weight: bold;color: #999;font-family: Georgia, serif;position: absolute;left: 10px;top:5px; }
.quotesHolder::after{ content: ""; }

.disclaimer {text-align: center; background: #e7d962; padding: 10px; margin-bottom: 10px; clear: both; }


.goog-te-gadget-simple .goog-te-menu-value span { color: #000000;}

/*--- Petition ---*/

.petitionTitle { font-size: 160%; margin-bottom: 10px; font-weight: bold; }
.petitionSigs { font-size: 140%; margin-bottom: 10px; }
.petitionDescription { font-size: 120%; margin-bottom: 10px; }
.petitonForm { margin-top: 30px; display: none; }
.petitonForm fieldset { border: none; margin-bottom: 30px; }
.petitonForm label { display: block; margin-bottom: 10px; font-size: 120%; }
.petitonForm input[type="text"], .petitonForm textarea { width: 95%; padding: 10px 2.5%; font-size: 120% !important; }
.petitonForm textarea { min-height: 100px; }
.petitionButton button { font-size: 120%; }

/*--- HTML Table ---*/
.htmlTableHolder { overflow-x: auto; }

/*--- video list grid ---*/
.videoList { clear: none; float: left; padding: 0 8px 10px 8px; min-height: 157px; }
@media screen and (max-width: 480px){
    .videoList { width: 95% !important;}
    .videoList img { width: 100%;}
}

/*--- guestbook ---*/
.moreCommentsBtn { display: inline-block; }

/*--- news tag tabs ---*/
#newsTabs { list-style: none; padding-left: 0;}
#newsTabs li { display: inline-block; padding: 4px 6px; margin: 10px 5px 10px 0; background: #ccc; border-radius: 5px; }

/*--- audio list ---*/

.listItemAudio { margin-left: 10px; padding:0 0 4px 0; }
.audioListHolder { width: 50%;}
.audioList .listItemTitle { font-size: 120%; margin-bottom: 10px; }
.audioList .listItemSubtitle { margin-bottom: 10px; }
.audioImage img { max-width: 100%; }
.audioImage audio { border-radius: 0 0 25px 25px; background: #f1f3f4; }

/*--- popup ---*/
#popupContainer { box-sizing: border-box; max-width: 700px; height:auto; width: 100%; position: fixed; z-index: 999999; top: 50%; left: 50%; text-align: center; padding: 17px; background: #fff; border-radius: 5px; transform: translate(-50%, -50%); }
#popupOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8;  opacity: 0.8; z-index: 100000; }
#popupCloseOverlay button { font-size: 120%; cursor: pointer; padding: 10px 32px; margin-top: 26px; border-radius: 5px; }
#popupInner { max-height: 400px; overflow-y: auto; }
.popupSeprater { padding-bottom: 10px; }
.popItemHolder { padding: 0 17px; }
.staffImgPop img { max-width: 200px; max-height: 300px; }
#staffMainPopup { max-height: 400px; overflow-y: auto; }
@media screen and (max-width: 600px){
    #popupContainer{ max-width: 90% !important; } 
}

.firstloginOverlay { opacity: 0.85 !important; -khtml-opacity: 0.85 !important; -moz-opacity: 0.85 !important; filter: alpha(opacity=85) !important;}
.webTerms .button a { display: inline-block; }

/*--- staff popup ---*/
/*.staffImgPop img { max-width: 200px; max-height: 300px; }*/
/*.staffBioPop { height: 200px; overflow-y:scroll; }*/

/*--- notice popup ---*/
.noticeInner { /*height: 500px !important;*/ }
.noticePopupTitle { text-align: center; padding: 10px 18px; font-size: 160%; font-weight: bold; }
.noticePopupContent { font-size:  120%; text-align: center; font-style: italic; margin-bottom: 10px; }
.oddPopup { background: #fbfbfb; }
.noticePopupPoster { padding-bottom: 10px; }
.noticePopupPoster img { max-width: 90%; border: 1px solid #000; max-height: 500px; }

/*--- large popup ---*/
.largePopup { max-width: 1280px !important; width: 80% !important; }
.largePopup #popupInner { max-height: calc(80vh - 104px) !important; }
.largePopup .videoPopupWrap { position: relative; padding-bottom: 56.25%; }
.largePopup .videoPopupWrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/*--- Compact dropdown ---*/
.compactContainer { border: 1px solid #ccc; }
.compactText { font-size: 140%; font-weight: bold; cursor: pointer; padding: 10px;}
.compactText a { text-decoration: none;}
.compactText a:hover { text-decoration: underline;}
.compactHolder { display: none; padding: 10px 15px; }
.compactHolder table { margin-bottom: 0; }

/*--- School Year ---*/

.schoolYear { padding: 10px 15px; font-size: 190%;}

/*--- view counter ---*/

.viewCounterHolder { text-align: center;}
.viewCounter { text-align: center; font-size: 150%; padding: 5px 50px; margin: 0 auto; border: 3px solid #000; border-radius: 15px; display: inline-block; }
.viewCounter span { display: block; font-weight: bold; font-size: 160%; }

/*--- video and audio ---*/
.videoAudioList { clear: none; float: left; padding: 0 8px 10px 8px;}
#overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 10000;}
#videoAudioContainer{ position: fixed; z-index: 999999; top: 50%; left: 50%; text-align: center; padding: 17px; background: #fff; border-radius: 5px;}
#closeOverlay button { color: #fff; font-size: 120%; cursor: pointer; padding: 10px 32px; margin-top: 26px; border-radius: 5px; }
#videoAudioTitle{ text-align: center; font-size: 18px; padding: 10px 15px; word-break: break-word; }
#videoAudioDate { font-size: 15px; text-align: center; font-style: italic; margin-bottom: 10px; }
.hideVA { display: none;}
.moreVA { text-align: right; }

.videoInWidget { clear:both; padding:5px 0 0 0; }
.videoAudioList .widget, .videoInWidget .widget { padding-left:0 !important; padding-right:0 !important; }

@media screen and (max-width: 650px){
    #videoAudioContainer { left: 15px; right: 15px; margin-left: 0 !important; width: auto; }
    #videoAudioContainer iframe, #videoAudioContainer video, #videoAudioContainer audio { width: 100% !important;} 
}

/*--- gallery slideshow list ---*/
.gallerySlideList { margin-top: 10px; }

.linkSection { clear:both; padding:6px 12px; font-weight: bold; font-size:135%;  }

/*--- Tour Map ---*/
.tourMapHolder { position: relative; }
.tourMapPointer { position: absolute; height: 50px; width: 50px; border-radius: 50%; border: 3px solid; }
.tourMapPointer span { background: #000; display: block; border-radius: 50%; width: 35px; height: 35px; position: absolute; top: 49%; left: 49%; margin-top: -17.5px; margin-left: -17.5px; }

/*--- news masonry view ---*/
.grid-sizer,
.grid-item { width: 31%; margin-bottom: 10px; }
.newsMasonry { width: 100%; margin-bottom: 10px; }
.newsMasonry img { max-width: 100%}

/*--- rss feed ---*/
.rssHide { display: none; }

/*--- page search ---*/
.pageSearch { clear: both; padding: 5px 0; }

/*--- Shop ---*/
#productDetails{ float: left; width: 48%; margin-right: 2%; }
#shopImage { float: right; width: 50%; }
#shopImage img { max-width: 100%; }
#shopPrice { margin: 15px 0; font-size: 120%;  }
.shopCol { float: left; margin-right: 15px; margin-bottom: 15px; }
.productHolder { background: #f7f7f7; }
.productImage { width: 100%;}
.productImage img { max-width: 100%;}
.productDesc { padding: 10px 15px; }
.productDesc .listItemTitle a { text-decoration: none;}
.productDesc .listItemMore a { display: inline-block; text-decoration: none; }
#productAdded { background: #ebe9eb; padding: 15px 20px; color: #000; margin-bottom: 10px; border-top: #8fae1b 5px solid; font-size: 120%; font-weight: bold; }

#cartAddForm .button button { cursor: pointer; font-size: 120%; }
#cartAddForm select[name="quantity"] { font-size: 120%; }

.shopQunInput { width: 100%; }

.paypalButton { padding: 10px; margin-bottom: 10px; width: 100%; border-radius: 5px; cursor: pointer; font-size: 140%; }

@media screen and (max-width: 900px){
    form#paypal_form { width: 80%; }
}

@media screen and (max-width: 600px){
    #cartTotalTable table { width: 100%; }
    #productDetails{ width: 100%; }
    #shopImage { width: 100%; }
}

#shopBasket { float: right; border: 2px solid #ccc; margin-right: 10px; clear: both; }
#shopBasket a { padding: 5px; display: inline-block; text-decoration: none; }
#shopBasket span { font-weight: bold; display: block; margin-bottom: 10px; }

.zoom { display:inline-block; position: relative; }
.zoom img { display: block; }

.zoom img::selection { background-color: transparent; }

.shopSlideContainer { position: relative; }
.productSlides  { display: none; }
.productSlides img:hover .prev  { display: none; }
.shopThumbSlide { width: 24%; margin-left: 1%; margin-top: 5px; float: left; }
.shopThumbSlide:first-child, .shopThumbSlide:nth-child(5n+5) { margin-left: 0%; }
.shopThumbSlide .demo {  opacity: 0.6; }

.shopThumbSlide .active, .shopThumbSlide .demo:hover { opacity: 1; }

.shopThumbSlide .cursor { cursor: pointer; }

.shopSlideContainer .prev, .shopSlideContainer .next { cursor: pointer; position: absolute; top: 45%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold;  font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; }

/* Position the "next button" to the right */
.shopSlideContainer .next { right: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.shopSlideContainer .prev:hover, .shopSlideContainer .next:hover { background-color: rgba(0, 0, 0, 0.8); }

#checkoutContainer { clear: both; }
#shopMain .button { display: inline-block; }
.shopTitle { text-align: left; font-weight: bold; margin: 10px 0; font-size: 140%; }
#paypal_form { width: 50%; margin: 0 auto; }
#paypal_form fieldset { border: none; text-align: left; }
.halfFormSec { width: 50%; float:left; clear: none !important; }
#paypal_form .formError { text-align: left !important; padding: 0; } 
#paypal_form label { width: 100%; text-align: left; }
#paypal_form input { width: 100%; box-sizing: border-box; }
.halfFormSec:first-child input { width: 95% !important; }

#miniCart { margin: 10px; }

.checkoutStatus { max-width: 480px; width: 100%; margin: 0 auto; padding: 10px; border: 1px solid #ccc; text-align:center; box-sizing: border-box; }
.checkoutPass { font-weight:bold; font-size:200%; }
.checkoutFail { font-weight:bold; font-size:200%; color:#ff0000; }

@media screen and (max-width: 600px){
    .shopCol { width: 47% !important; margin-right: 3%; margin-bottom: 15px; }
    .shopCol:nth-child(odd) { clear:both; }
}

@media screen and (max-width: 400px){
    .shopCol { width: 100% !important; margin-right: 0; }
}

/*--- pdf previewer ---*/
@media screen and (max-width: 600px){
    .pdfPreviewer { display: none; }
}

/*--- red more ---*/
.readMoreText { display: none; }
.readMoreTextBtn { margin-top: 0 !important; margin-bottom: 7px; }
.readMoreTextBtn a { display: inline-block; }
.mobileReadMore { display: block; }
.mobileReadMoreTextBtn { display: none; }
@media screen and (max-width: 900px){
    .mobileReadMore { display: none; }
    .mobileReadMoreTextBtn { display: block; }
}

/*--- fund raiser ---*/
.fundraiserHolder { width: 100%;}
.goal { width: 100%; text-align: right; font-size: 300%; }
.glass { width: 100%; background: #ccc ; border-radius: 10px; height: 20px; overflow: hidden; margin: 15px 0; }
.progress { width: 0; transition: 1s width ease-in;  background: #FF5D50; height: 20px; }
.goal-stat { float: left; width: 50%; text-align: center; }
.goal-number { font-size: 120%; }
.goal-number, .goal-label { display: block; }

/*--- cookie banner ---*/
#cookieBanner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.9); color: #fff; padding: 20px;  }
#cookieBanner .button { display: inline-block; }
#cookieBanner .button a, #cookieBanner .button a:active { background: #9e9e9e !important; font-size: 110%; }
#cookieBanner .button a:hover, #cookieBanner .button a:active:hover { background: #b3b2b2 !important; }
#cookieBanner .button.agree a, #cookieBanner .button.agree a:active { background: #398819 !important; font-size: 110%; }
#cookieBanner .button.agree a:hover, #cookieBanner .button.agree a:active:hover { background: #4aa724 !important; }

/*--- letter archive ---*/
.letterArchive  { font-size: 120%; padding: 5px 0; }

/*--- Doc folder ---*/
.docFolder img { border: none !important; }

/*--- notice board ---*/
.noticeBoardImg { width: 100%; clear: both; margin-bottom: 10px; }
.noticeBoardImg img { max-width: 100%; }

/*--- calendar dropdoen ---*/
#calMonYear { font-size: 105%; font-weight: bold; }

/*--- doc slm title ---*/
.docTitleSlim { word-break: break-all; font-weight: bold; }

/*--- single slide mobile ---*/
@media screen and (max-width:900px){
    #sliderSingle { width: 100% !important; height: auto !important; text-align: center; }
}

/*--- awards / sponsers list ---*/
.awardListHolder { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px solid #ccc; }
.awardListText { width: 48%; margin-right: 2%; float: left; }
.awardListTitle { font-size: 160%; text-align: center; font-weight: bold; margin-bottom: 10px; }
.awardListImage { width: 50%; float: right; }

@media screen and (max-width: 600px){
    .awardListText { width: 100%; margin-right: 0%; float: left; }
    .awardListImage { width: 100%; float: left; }  
}

/*--- after school club ---*/
.ascContainer fieldset { border: none; margin-bottom: 10px; }
.ascContainer label {  font-size: 120%; width: 15%; display: inline-block; }
.ascContainer input[type="text"] { border-radius: 5px; width: 30%; padding: 5px; border: 1px solid #000;  }
.ascHolder { width: 32%; float: left; margin-right: 1%;}
.markDateClub { background: #92f3ff !important; }
.clubTitle { font-size: 180%; margin-bottom: 10px; font-weight: bold; }
.clubBookingTable a { display:block; }
.clubBookingTable .days { text-align:center; font-size: 120%; font-weight: bold; }
.clubBookingTable .days a { text-decoration: none; }
.clubBookingTable .bookable { background: #fff; }
.clubBookingTable .bookable a { background: url(../../cmsfiles/images/icons/circle-dash.png) center 0 no-repeat; padding-top: 32px; }
.clubBookingTable .bookingMarked { background: #7cd080; }
.clubBookingTable .bookingMarked a { background: url(../../cmsfiles/images/icons/bookedv2.png) center 0 no-repeat; padding-top: 32px; }
.clubBookingTable .limitPass { background: #f9b6b6; }
.clubBookingTable .limitPass a { background: url(../../cmsfiles/images/icons/notbookable.png) center 0 no-repeat; padding-top: 32px; }
.clubBookingTable .contactSupport { background: #f9b6b6; }
.clubBookingTable .contactSupport a { background: url(../../cmsfiles/images/icons/notbookable.png) center 0 no-repeat; padding-top: 32px; }
.clubBookingTable .bookingPending { background: #fcaa4c; }
.clubBookingTable .bookingPending a { background: url(../../cmsfiles/images/icons/booked-pending.png) center 0 no-repeat; padding-top: 32px; }
#bookingBanner { background: #4caf50; color: #fff; text-align: center; position: fixed; bottom: 0; left: 0; width: 100%; padding: 10px 15px; font-size: 160%; display: none; }

/*--- login public user ---*/
#dashTitleHolder { clear: both; margin-bottom: 15px; }
#dashTitleHolder .title { font-size: 200%; display: inline-block; text-align: left; margin-bottom: 15px; }
#dashTitleHolder select { font-size: 200%; border-radius: 5px; border: 2px solid #000; font-weight: 700; }
#dashTitleHolder a { display: inline-block; text-align: right; }
#clubDashWrapper { margin-bottom: 20px;}
.puDashIcon { display: inline-block; border: 2px solid #efefef; margin-right: 2.27%; text-align: center; border-radius: 5px; margin-bottom: 10px; max-width: 150px; width: 100%; }
.puDashIcon img { margin-bottom: 10px;}
.puDashIcon a { padding: 10px 10%; display: inline-block; }
.puTop { clear:both; padding: 10px 0; }
.puTop .title { font-size: 200%; display: inline-block; }
.puTop .button { display: inline-block; float: left; }
.puTop #puLogout { display: inline-block; float: right; }
.puForm { clear: both; }
.puForm fieldset { border: none; margin-bottom: 5px; }
.puForm label { display: block; }
.puForm input[type="text"], .puForm input[type="password"] { padding: 5px 10px; border-radius: 5px; border: 1px solid #ccc; }
.puForm button { padding: 10px 15px; border-radius: 5px; cursor: pointer; }
.puCodeForm { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc; }
.puWrapper { background: #efefef; border-radius: 5px; padding: 10px 15px; margin-bottom: 10px; }
.puTab { border: 1px solid #ccc; padding: 10px 15px; margin-bottom: 10px; background: #fff; width: 100%; box-sizing: border-box; border-radius: 5px; }
.clubTabWrapper { width: 48%; float: left; margin-right: 2%; margin-bottom: 10px; }
.clubTabs { border: 1px solid #ccc; margin-bottom: 10px; background: #fff; width: 100%; box-sizing: border-box; border-radius: 5px; transition: transform 0.5s ease-in-out; }
.clubTabs:hover { /*border-width: 5px !important;*/ transform: scale(1.05); }
.clubTabs a { padding: 10px 15px; display: block; text-decoration: none; }
.clubTabs a:hover { text-decoration: underline;}
.clubTabs img { margin-right: 10px; }
.puTabRight { float: right; }
.puTabLeft { float: left; }
.puTabChildName { font-size: 140%; font-weight: bold; }
.clubSectionTitle  { margin: 15px 0; font-size: 160%; font-weight: bold; }
.clubBookingList { font-size: 80%;}
#clubReserveBtn a { padding: 10px 15px !important; border-radius: 5px !important; font-size: 160%; }
#clubSingleEventHolder { background: #efefef; padding: 15px 20px; border-radius: 5px; }

.loginLogin { clear:none; float:left; width:48%; }
.loginRegister { clear:none; float:right; width:48%; }

/*--- video and text ---*/
@media screen  and (max-width: 900px){
    .videoHolder { max-width: 100% !important; }
    .clubTabWrapper { width: 100%; margin-right: 0; margin-bottom: 10px; }
}

@media screen  and (max-width: 550px){
    .puDashIcon { width: 27.27%; }
}

@media screen  and (max-width: 500px){
    .clubTabs img { max-width: 60px !important; }
    .clubTabs .puTabChildName { font-size: 120%; }
}

@media screen  and (max-width: 480px){
    .clubBookingTable td a { background-size: contain !important; padding-top: 100% !important; }
}

/*--- twitter button ---*/
.widget_twitterbtn img { border-radius: 5px; border: 1px solid #dadada; }

/*--- homework form ---*/
#homeworkForm { font-size: 120%; padding: 15px;}
#homeworkForm fieldset { border: none; margin-bottom: 5px; }
#homeworkForm label { display: block; }
#homeworkForm input[type="text"], #homeworkForm select { padding: 5px 10px; border-radius: 5px; margin-bottom: 5px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; }
#homeworkForm textarea { min-height: 100px; width: 100%; border-radius: 5px; border: 1px solid #ccc; }
#homeworkForm button { margin-top: 10px; font-size: 120%; }

/*--- zoom deatils ---*/
#zoomDetails { padding: 10px 5px; border: 5px solid #4187fc; border-radius: 15px; }
#zoomDetails img { float: left; max-width: 150px; margin-right: 25px; }
#zoomText { float: left; }

.socialMediaBtn {display: inline-block; margin: 5px; }

.pinned { background: #f3f3f3; margin-bottom: 10px; border-radius: 5px; padding: 5px 10px; }

.popupSlider { display: none; max-width: 800px; width: 95%; padding: 10px 15px; border-radius: 3px; box-sizing: border-box; position: fixed; background: #fff; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9999999;}
.popupSlider .slides{ text-align: center; display: none; list-style: none;}
.popupSlider .slides.active  {display: block}
.popupSlider .slides img     { max-width: 100%; max-height: 600px; }
.small-slider   { width: 800px; margin: 10px auto;}
.small-slides   {float: left; margin-right: 5px}
.popupSlider #next   { color: #fff; position: absolute; z-index: 9999; top: 45%;right: 0; opacity: 0.7;}
.popupSlider #prev   {color: #fff; position: absolute; z-index: 9999; top: 45%; left: 0; opacity: 0.7;}
.popupSlider #slider-dots { width: 700px; margin: 0 auto;}
.popupSlider .bullPoints { margin: 0 5px; color: #ccc; list-style: none; display: inline;}
.popupSlider .active-dot {color: #000;}
#closePopup { position: absolute; top: 15px; right: 15px;  }
#closePopup a { text-decoration: none; color: #c5c5c5;  font-size: 200%; font-weight: bold; }
.popupSlider ul { padding: 0 !important; }

.circleImg { border-radius: 50%; box-sizing: border-box; }

.videoArchiveHolder iframe{ max-width: 100%; height: auto; }

.filterList ul { padding: 0 !important; }
.filterList #filterListSearch { background: #fff url(../../cmsfiles/images/search.png) 5px 4px no-repeat; border: 1px solid #ddd; width: 100%; box-sizing: border-box; font-size: 140%; border-radius: 5px; padding: 5px 10px 5px 50px; margin-bottom: 10px; }
.filterList li { list-style: none; background: #f6f6f6; border: 1px solid #ddd; color: #000; padding: 10px 15px; font-size: 120%; margin-top: -1px;  }

#calendaerToggle {  margin: 10px 0; float: right; }
#calendaerToggle a {  display: inline-block; float: left; padding: 10px 25px; background: #ececec; }
#calendaerToggle a:first-child {  border-radius: 25px 0 0 25px; }
#calendaerToggle a:nth-child(2) {  border-right: 1px solid #676767; border-left: 1px solid #676767; }
#calendaerToggle a:nth-child(3) {  border-radius: 0 25px 25px 0; }
#calendaerToggle a.active {  background: #ccc; }
#calendaerToggle a:hover {  background: #ccc; }
#calendaerToggle a img {  width: 24px; }

@media screen and (max-width: 500px){
    .textSlideHolder { float: none !important; width: 100% !important; }
}

.widget_localvideo iframe { max-width:100%; }

.borderLabel { padding:8px 12px !important; font-size:160%; font-weight:bold; border:2px solid #111; margin:5px 0; width:100%; box-sizing: border-box; }

.newsImgContainer { float:right; clear:none; margin: 0 0 10px 10px; padding:0; position:relative; }
@media screen and (max-width: 600px){
    .newsImgContainer{ width: 100%; }
    .newsImgHolder{ text-align: center; }
    .newsImgHolder img{ max-width: 100% !important; }
}

.g-recaptcha-holder { padding: 10px 0 0 60px; }

#loadingSpinner { width: 100%; text-align: center; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(204, 204, 204, 0.5);}
#loadingSpinner img { position: absolute; top: 40%;}

.tiledButton { border-radius: 5px; float: left; clear: none !important; margin-right: 1%; margin-top: 10px; width: 100%; }
@media screen and (max-width: 900px){
    .tiledButton { max-width: 24% !important; }
}

@media screen and (max-width: 700px){
    .tiledButton { max-width: 32.33% !important; }
}

@media screen and (max-width: 500px){
    .tiledButton { max-width: 48% !important; margin-right: 2%;}
}

.imageButton { border-radius: 5px; float: left; clear: none !important; margin-right: 1%; margin-top: 10px; width: 100%; background-position: center; position: relative; background-size: cover; overflow:hidden;  }
.buttonsOverlay {position: absolute; inset: 0; opacity: 0.5; }
.imageButton span { color: #fff; font-size: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
@media screen and (max-width: 900px){
    .imageButton { max-width: 32.33% !important; padding-top: 32.33% !important; }
}

@media screen and (max-width: 700px){
    .imageButton { max-width: 48% !important; padding-top: 48% !important; }
}

@media screen and (max-width: 500px){
    .imageButton { max-width: 98% !important; padding-top: 98% !important;}
}

.widgetInner h4 { font-weight:bold; text-decoration:underline; font-size:160%;  }
.widgetInner h5 { font-weight:bold; text-decoration:underline; font-size:130%;  }

#animationacrossright { position: fixed; bottom: 10px; right: -1000px; }
#animationacrossleft  { position: fixed; bottom: 10px; left: -1000px; }

#animationacrossright img, #animationacrossleft img { max-width: none !important;}

.newsColumnTextOnImage { background-size:contain !important; background-position:center !important; border:0; }

.newsColumnTextOnImage a:visited, .newsColumnTextOnImage a:active,.newsColumnTextOnImage a { color:#fff !important; font-size:150%; font-weight:bold; text-decoration:none; position:relative; background: linear-gradient(180deg, rgba(255,255,255,0) 15%, rgba(0,0,0,0.75) 100%); }
.newsColumnTextOnImage a:visited:hover, .newsColumnTextOnImage a:hover { text-decoration:underline; }

.newsColumnTextOnImageSpan { position:absolute; bottom:0; display:block; padding:0 5% 10px 5%; width:90%; text-align:center; }
.newsColumnTextOnImageSpan span { font-size:75%; font-weight:normal; padding-top:7px; display:block; }

.listItemFeatured { border:0; }

.calendarIcon { width: 100%; font-size: 128%; }
.calendarIcon:after { content: ''; clear: both; display: block; }
.dateIcon { max-width: 80px; width: 100%; text-align: center; text-transform: uppercase; font-weight: bold; float: left; margin-bottom: 20px; margin-right: 20px; }
.monthCal { padding: 5px 10px; background: #e84945; color: #fff; border-radius: 15px 15px 0 0; }
.dayCal { padding: 10px 20px; color: #4d4d4d; background: #ededed; border-radius: 0 0 15px 15px; }
.detailIcon { float: left; padding: 10px 0; width: 70%; }
.titleIcon { font-weight: bold; }
.calendarIconLarge { float: left; width: 50%; }
.calendarIconSmall .dateIcon { max-width: 75px; margin-right: 10px; }

@media screen and (max-width: 800px){
    .calendarIconLarge { width: 100%; }
    .newColumn { width: 100% !important; }
}

@media screen and (max-width: 380px){
    .dateIcon { max-width: 75px; margin-right: 10px; }
}

@media screen and (max-width: 320px){
    .calendarIcon { text-align: center; }
    .dateIcon { margin-right: 0px; display: inline-block; float: none; }
    .detailIcon { float: none; width: 100%; }
}

#loadingCircle { position: fixed; top:0; width:100%; height:100%; background:#ccc; z-index: 999; opacity:0.5; text-align:center; left: 0; }
#loadingCircle:before { content: ''; background: url('../../cmsfiles/templates/cms_standard/images/saving.gif'); width: 64px; height: 64px; position: absolute; left: calc(50% - 32px); top: calc(50% - 32px);  }

/*-- google language bar --*/
.goog-te-gadget-simple span { color: #000 !important; }

.downloadButton { position: relative; top: 10px; }
.downloadButton img { max-width:32px; }

#animationbouce { position: fixed; bottom: -150px; z-index: 99999; }

.socialWallPost { text-align: center; float: left; max-width: 980px; width: 32.33%; margin: 0 1% 1% 0; position: relative; padding-top: 31.25%; overflow: hidden; }
.socialWallThumb img { max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.socialWallPost::after { content: ''; display: table; clear:both; }

.socialWallSlideshow { position: fixed; z-index: 999999; max-width: 980px; width: 100%; display:none; margin: 0 auto; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.socialWallSlides { display: none; max-height: 650px; }
.socialWallSlides img, .socialWallSlides video { max-height: 650px; max-width: 100%; }
.socialWallSlideshow .prev, .socialWallSlideshow .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.socialWallSlideshow .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.socialWallSlideshow .prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}

/* On hover, add a black background color with a little bit see-through */
.socialWallSlideshow .prev:hover, .socialWallSlideshow .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.socialWallCaption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.5); padding: 10px 15px; color: #fff; width: 100%; font-size: 120%; box-sizing: border-box; }

.blackboard { 
    border: tan solid 15px;
    border-top: #bda27e solid 15px;
    border-left: #b19876 solid 15px;
    border-bottom: #c9ad86 solid 15px;
    box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782, 0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
    /*border-image: repeating-linear-gradient(40deg, hsl(30, 50%, 15%), hsl(20, 50%, 30%), hsl(25, 40%, 20%) 8px) 60; */
    padding: 20px; 
    position: relative;
    background-image: radial-gradient( circle at left 30%, rgba(34, 34, 34, 0.3), rgba(34, 34, 34, 0.3) 80px, rgba(34, 34, 34, 0.5) 100px, rgba(51, 51, 51, 0.5) 160px, rgba(51, 51, 51, 0.5)), linear-gradient( 215deg, transparent, transparent 100px, #222 260px, #222 320px, transparent), radial-gradient( circle at right, #111, rgba(51, 51, 51, 1));
    background-color: #333;
}

.blackboard:before {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient( 175deg, transparent, transparent 40px, rgba(120, 120, 120, 0.1) 100px, rgba(120, 120, 120, 0.1) 110px, transparent 220px, transparent), linear-gradient( 200deg, transparent 80%, rgba(50, 50, 50, 0.3)), radial-gradient( ellipse at right bottom, transparent, transparent 200px, rgba(80, 80, 80, 0.1) 260px, rgba(80, 80, 80, 0.1) 320px, transparent 400px, transparent);
    border: #2c2c2c solid 2px;
}

.blackboard p { color: #fff; }

#accessContainer #accessBarHolder { position: relative; }
#accessContainer .accessBarButtons { position: absolute; top: 0; right: 5px; z-index: 9999; background: rgba(255,255,255,0.2); padding: 10px 15px; color: #fff; border-radius: 0 0 5px 5px; display: inline-block; }
#accessContainer .accessBarButtons svg { margin: 0 2.5px; }
#accessContainer #accessBarButton { display: inline-block; }
#accessContainer #accessBar { display: none; }
#accessContainer #accessBarMain { text-align: center !important; }
#accessContainer .accessBarSpacer { margin-top: 83px; }
#accessContainer #skipContentButton { right: unset; left: 5px; }
#accessContainer #google_translate_element { display: inline-block; }

@media screen and (max-width:900px){
    #accessContainer #accessBarHolder { top: unset !important; }
}

#accessContainer.accessbarVert .accessBarButtons { top: 100px; right: 0; border-radius: 5px 0px 0px 5px; }
#accessContainer.accessbarVert .accessBarButtons a { display: block; }
#accessContainer.accessbarVert #skipContentButton { left: 0; border-radius: 0px 5px 5px 0px }
#accessContainer.accessbarVert .accessBarButtons svg { fill: rgba(0, 0, 0, 0.8); margin: 2.5px 0; }

.quoteIconHolder { display: inline-block; }
/* .quoteIconHolder p { display: inline-block; } */
.quoteIconHolder.floatLeft p { float: left; }
.quoteIconHolder.floatRight p { float: right; }
.quoteIconTextLeft { margin-left: 10px; }
.quoteIconTextRight { margin-right: 10px; }

.sectionContainer { min-width: 980px; box-sizing: border-box; }

.sectionSlideshow { position: relative; min-height: 100px; }
.sectionSlideshow .widget { padding: 0; }
.sectionSlideshow .widgetWrapper { margin-bottom: 0; }
.sectionSlideshow { min-width: 980px; }
.sectionTitleContainer { padding: 20px 15px; }
.sectionTitle { font-size: 3vw; }
.sectionCarousel { padding: 20px 0; }
.owl-dot { background: transparent !important; }
.sectionBgImg { padding: 100px 10%; }
.sectionBgOverlay { background: rgba(0,0,0,0.1); position: absolute; inset: 0; }

.light p, .light h1, .light h2, .light h3, .light h4 { color: #fff; }
.light a:visited,
.light a:active,
.light a,
.light a:visited:hover,
.light a:hover           { color:#fff; }
.light .content h2 { background: none !important; color: #fff; }

@media screen and (max-width: 900px){
    #accessContainer #accessBarHolder { background: rgba(255,255,255,0.4); text-align: center; padding: 10px 15px; }
    #accessContainer #accessBarButton { display: none; }
    #accessContainer #accessBar { display: block !important; }
    #accessContainer .accessBarButtons { position: relative; background: none;  border-radius: 0; right: 0; display: inline-block; box-sizing: border-box; padding: 0; }
    #accessContainer .accessBarButtons svg { margin: 0 10px; }
    #accessContainer .accessBarSpacer { margin-top: 0px; }
    #accessContainer #accessBarMain { height: 60px !important; }
    #accessContainer #skipContentButton { right: unset; left: unset; }
    #accessContainer.accessbarVert .accessBarButtons svg { fill: #000; margin: 0 2.5px; }
    #accessContainer.accessbarVert .accessBarButtons a { display: inline-block; }
    #accessContainer.accessbarVert .accessBarButtons { top: 0; }
    
    .sectionContainer, .sectionSlideshow { min-width: 100%; }

    .calTable { display: none; } 
}

p span.button, p a span.button { clear: none !important;}

.verticalAlign { min-height:400px; display:flex; align-items:center; }

.shapePatternOne {
    --s: 50px; /* control the size*/
    --c1: #eceddc;
    --c2: #29ab87;
    
    --_g: var(--c1) 90deg,#0000 90.5deg;
    background:
     conic-gradient(from -45deg,var(--_g)),
     conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
     var(--c2);
    background-size: var(--s) var(--s);
    position: absolute;
    inset: 0;
    opacity: 0.5;
  }

  .shapePatternTwo {
    --s: 75px; /* control the size*/
    --c1: #633d2e;
    --c2: #f7af63;
    
    --l:var(--c1) 20%,#0000 0;
    --g:35%,var(--c2) 0 45%,var(--c1) 0;
    background:
      linear-gradient(45deg,var(--l) 45%,var(--c1) 0 70%,#0000 0),
      linear-gradient(-45deg,var(--l) var(--g) 70%,#0000 0),
      linear-gradient(45deg,var(--c1) var(--g));
    background-size: var(--s) var(--s);
    position: absolute;
    inset: 0;
    opacity: 0.5;
  }

  .shapePatternThree {
    --s: 40px; /* control the size*/
    --c1: #5e8c6a;
    --c2: #bfb35a;
    
    --_s: calc(2*var(--s)) calc(2*var(--s));
    --_g: 35.36% 35.36% at;
    --_c: #0000 66%,var(--c2) 68% 70%,#0000 72%;
    background:
      radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s),
      radial-gradient(var(--_g) 0    75%,var(--_c)) var(--s) var(--s)/var(--_s),
      radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s),
      radial-gradient(var(--_g) 0    75%,var(--_c)) 0 0/var(--_s),
      repeating-conic-gradient(var(--c1) 0 25%,#0000 0 50%) 0 0/var(--_s),
      radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s)
      var(--c1);
    position: absolute;
    inset: 0;
    opacity: 0.5;
  }

/*---- tables ----*/
table { border-left: none !important; border-radius: 5px 5px 0 0; overflow: hidden; }

tr { border-bottom: 1px solid #949494 !important; }
tr:last-child { border-bottom: none !important; }
tr:nth-child(odd) { background: #ececec; }

td{
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

th{
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

#clubCart { border-radius: 5px; border: 2px solid #000; padding: 10px 25px; margin-bottom: 20px; font-size: 120%; }
.clubCartList { border-bottom: 2px solid #000; padding: 10px 0; }
.clubCartList span { font-weight: bold; display: inline-block; width: 100px; }
#clubCartListWrapper .clubCartList:last-child { border-bottom: none; }
#clubCart .button, #clubCart button { margin: 20px 0; }
#clubCart .button a, #clubCart button { border-radius: 5px; padding: 10px 15px; font-size: 110%; background: #0d65c1 !important; color: #fff; }
#clubcartTitle { font-size: 140%; font-weight: bold; }
#clubcartDue { font-size: 160%; font-weight: bold; }

.sidebarButton { padding: 10px 15px; position: fixed; top: 50vh; transform: rotate(90deg); box-sizing: border-box; opacity:0; z-index: 999; }
.sidebarButton a { color: #fff !important; text-decoration: none; }
#sidebarButtonRight { transition:right 1s ease-in-out, opacity 1s linear; border-radius: 0 0 5px 5px; }
#sidebarButtonLeft { transition:left 1s ease-in-out, opacity 1s linear; border-radius:  5px 5px 0 0; }

.owl-item.cloned:last-child { margin-right: 0 !important; }

.announcementBar { background: #342d2d; color: #fff; padding: 20px 25px; width: 100%; font-size: 120%; box-sizing: border-box; position: relative; }
.announcementClose { position: absolute; top: 10px; right: 15px; }
.announcementBar a, .announcementBar a:hover, .announcementBar a:active, .announcementBar a:visited { color: #fff !important; }