body { font-family:'Roboto', Sans-Serif; color:#323232; /*#323232*/ font-size:15px !important; width:100%; min-width:990px; background-position-y:0px !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size:cover !important; }
body#tinymce { max-width:930px !important; }

input { padding-left:2px; }
select { height:30px; }
h3 { font-size:1.2em !important; }
.h1, .h2, .h3, h1, h2, h3 { margin-top:0 !important; }

#MainWrapper { width:100%; margin:0px auto; overflow:hidden; background-color:#fff; position:static; }
div.BodyWrapper { width:990px; min-width:990px; max-width:1280px; margin:0 auto; background-color:#fff; border:0px solid #ccc; margin-top:15px; margin-bottom:15px; }
#ContentWrapper { overflow:hidden; padding:0; }

.HeaderBar { height:180px; /*height:auto; height:190px;*/ }
.FooterBar { width:100%; background-color:#019CDF; overflow:hidden; }
/*.FooterBar .Wrapper { max-width:990px; height:100%; margin:0 auto; position:relative; }*/
.Wrapper { max-width:990px; height:100%; margin:0 auto; position:relative; }

.TopBar1 { width:100%; height:34px; background-color:#019CDF; color:#fff; padding-top:7px; font-size:13px; }
.TopBar { width:100%; clear:left; height:145px; background-color:#006591; color:#fff; border-bottom:4px solid #E33336; }
.TopBar .Header { /*height:110px;*/ }

.TopBar1 .CallUs, .TopBar1 .EmailUs, .TopBar1 .SearchBox, .TopBar1 .Login { float:right; margin-left:10px; }
.TopBar1 .fa { padding-right:7px; }
.TopBar1 .fa-phone { font-size:16px; position:relative; top:2px; }
.TopBar1 a, .TopBar1 a:visited { color:#fff; }

.TopBar1 .SearchBox { float:right; display:inline-block; width:auto; position:relative; top:-1px; }
.TopBar1 .SearchBox input[type='text'] { padding:1px 7px; width:150px; border:0; font-size:12px; color:#000; height:20px; }
.TopBar1 .SearchBox .fa { font-size:14px; padding:0; line-height:10px; color:#006591; position:relative; top:1px;left:-4px; border:0; padding:5px; background-color:#fff; }
.TopBar1 .SearchBox a:hover, .TopBar .SearchBox .fa:hover { text-decoration:none; }
.TopBar1 .SearchBox a:visited, .TopBar .SearchBox .fa:visited { text-decoration:none; }

.TopBar .SiteLogo { width:125px; height:auto; float:left; display:inline-block; text-align:left; padding-top:7px; margin-left:10px; }
.TopBar .SiteLogo .logo { cursor:pointer; }
.TopBar .SiteLogo .logo img { height:90%; position:relative; z-index:999; }
.TopBar .SchoolName { font-size:44px; position:relative; left:10px; top:10px; width:auto; display:inline-block; z-index:2000; line-height:normal; }
.TopBar .SchoolLogo { font-size:24px; position:relative; left:52px; text-transform:capitalize; }

.TopBar1 .ExternalLinks { position:relative; top:-4px; right:0px; float:right; }
.TopBar1 .ExternalLinks div { float:left; color:#253F8A; }
.TopBar1 .ExternalLinks a { color:#253F8A; padding-left:5px; }

.Footer1 {  background-color:#006591; color:#fff; padding:30px 0; }
.Footer1 .GetInTouch, .Footer1 .ContactUs, .Footer1 .Location { height:100%; float:left; padding:10px 30px; }
.Footer1 .GetInTouch { width:295px; padding-right:0; }
.Footer1 .Title { font-size:18px; font-weight:500; padding-bottom:5px; text-transform:uppercase; }
.Footer1 .GetInTouch, .Footer1 .GetInTouch { margin-bottom:5px; }
.Footer1 .GetInTouch input, .Footer1 .GetInTouch textarea { padding:10px; font-size:14px; color:#666; width:230px; border:1px solid #333; margin-bottom:10px; }
.Footer1 .GetInTouch input[type='submit'] { text-transform:uppercase; background-color:#019CDF; color:#fff; font-size:14px; border:1px solid #fff; }
.Footer1 .GetInTouch input[type='submit']:hover { background-color:#284F97; border-color:#bbb; }
.Footer1 .ContactInput { padding-left:10px !important; }

.ErrorInput { background-color:#ff7373 !important; border:1px solid #8c0000 !important; }

.Footer1 .ContactUs { width:50%; }
.Footer1 .ContactUs .Icon { width:20px; float:left; }
.Footer1 .ContactUs .IconAddress { background:url(../../Images/Site/Buttons/IconPointer.png) no-repeat; }
.Footer1 .ContactUs .IconPhone { background:url(../../Images/Site/Buttons/IconPhone.png) no-repeat; }
.Footer1 .ContactUs .IconEmail { background:url(../../Images/Site/Buttons/IconEmail.png) no-repeat 0px; }
.Footer1 .ContactUs .Address, .ContactUs .Email, .ContactUs .Phone { text-indent:30px;  clear:left; color:#fff; }
.Footer1 .ContactUs .Email a { color:#fff; }
.Footer1 .ContactUs hr { display:block; height:1px; border:0; border-top:1px solid #777; margin:1em 0; padding:0; }

.Footer1 .TermsLinks { padding:0; clear:left; font-size:14px; }
.Footer1 .TermsLinks a { color:#fff; clear:left; }

.Footer1 .Affiliates .Aff1 { width:100%; }
.Footer1 .Affiliates .Aff1 img { width:150px; height:auto; }

.Footer1 .Location { width:50%; overflow:hidden; }
.Footer1 .Location .Map { color:#434343; }

.Footer2 { height:75px; background-color:#0D0D0D; text-align:right; color:#fff; font-size:12px; padding:30px; }
.Footer2 .CopyrightInfo { float:right; width:49%; }
.Footer2 .PoweredBy { float:left; width:49%; text-align:left; }
.Footer2 .PoweredBy a { color:#fff; }
.Footer2 .PoweredBy a:hover { text-decoration:none; }
.Footer2 .PoweredBy img { border:0; position:relative; top:-10px; left:5px; }

.cookie-policy-banner { position:fixed; left:0; bottom:0; width:100%; padding:5px 10px; color:#fff; background-color:#1d1d1d; z-index:9999; text-align:center; }
.cookie-policy-banner p { display:inline-block; padding: 8px 0 10px 0; margin:10px 20px 10px 0; font-size:12px; }
.cookie-policy-banner section { display:inline-block; }
.cookie-policy-banner a.small-button { margin-bottom:8px; margin-right:10px; }
.small-button.confirm { color:#fff; background-color:#e36b1b; border-color:#c55200; padding:6px 10px; cursor:pointer; margin-right:10px; }
a.arrow-link { color:#fff; text-decoration:none; }

.MenuPanel { clear:both; text-align:right; position:relative; z-index:999; top:-29px; }
.MainMenu { padding-top:0; float:none !important; display:inline-block; }
li.static a { padding:0; border:0; color:#FFF; font-weight:400; }
li.static:hover a { cursor:pointer; }

#mnuMainMenu .menu-icon { margin-right:3px; }
#mnuMainMenu ul.dynamic { display:none; text-align:left; background-color:#fff !important; color:#8e8e8e; top:37px !important; border:1px solid #dedede; min-width:150px; font-size:13px !important; font-weight:400 !important; text-transform:capitalize; min-width:100%; }
#mnuMainMenu ul li.dynamic { padding:5px 20px; float:unset; }
#mnuMainMenu ul li ul { display:none; }
#mnuMainMenu ul li { position:relative; float:left; list-style:none; }

#mnuMainMenu a.level2:hover { color:#dd0000 !important; background-color:#FFF !important; }
#mnuMainMenu a { font-size:17px; }
#mnuMainMenu li:first-child a.level1 { margin-left:0 !important; }
#mnuMainMenu li:last-child a.level1 { margin-right:0 !important; }
#mnuMainMenu a.level1 { float:left; margin:0 13px !important; padding:0 !important; }

#mnuMainMenu img.horizontal-separator { padding:0; }
.NotMobile #mnuMainMenu a.level1 { padding-top:9px; padding-bottom:6px; }

.MenuPanel.mobile { height:auto; z-index:9; }
.MenuPanel.mobile .MainMenu { width:100%; height:auto; display:block; z-index:9999; }
.MenuPanel .ResponsiveMenu { float:right; overflow:hidden; padding:4px 10px; text-transform:uppercase; }
.MenuPanel .ResponsiveMenu a { color:#FFF; font-size:20px; }
.MenuPanel .ResponsiveMenu a:hover, .MenuPanel .ResponsiveMenu a:visited { color:#FFF; text-decoration:none; }
.MenuPanel .ResponsiveMenu .fa { font-size:26px; color:#FFF; margin-left:10px; position:relative; top:3px; }

a.popout { background-image:none !important; cursor:pointer; }
.level_menu { padding:0 30px; }
ul.level2 { padding:5px 0 !important; }
ul.level2, a.level2 { font-size:16px !important; color:#010101 !important; padding:0 !important; }

/*.MainNav { height:32px;*/ /*margin:0;*/ /*font-size:16px; clear:left; background-color:#006591; position:relative; top:-36px; }
.MainNav .nav-item { float:left; display:inline; padding-right:0px; background:none; background-color:#fff; }
.MainNav .nav-item a { text-align:center; font-size:16px; line-height:30px; color:#666; }
.MainNav .nav-holder .nav-item a { color:#fff; margin:0px; }
ul.level2 { background-color:#fff; padding:10px 0 !important; }
ul.level2, a.level2 { font-size:14px !important; }

.KeywordList { height:30px; }
.MainMenu { width:100%; padding-top:2px; }
li.static a { padding:3px; padding-left:15px; border:0; color:#FFF; }

a.popout { background-image:none !important; cursor:pointer; }
#ctlHeader_Menu_mnuMainMenu .menu-icon { margin-right:3px; }
#ctlHeader_Menu_mnuMainMenu ul.dynamic { left:-15px !important;  }
#ctlHeader_Menu_mnuMainMenu ul .dynamic { background-color:#006591 !important; color:#fff; min-width:150px;  }
#ctlHeader_Menu_mnuMainMenu ul .dynamic .level_menu { padding-right:20px !important; }
#ctlHeader_Menu_mnuMainMenu a.level2:hover { color:#006591; background-color:#FFF !important; }
#ctlHeader_Menu_mnuMainMenu a { text-transform:uppercase; font-size:14px; }
#ctlHeader_Menu_mnuMainMenu a.popout { padding-right:0px !important; }

#ctlHeader_Menu_mnuMainMenu a.level1 { float:left; }

#ctlHeader_Menu_mnuMainMenu img.horizontal-separator { padding:0 19px; }
li.static:hover a { cursor:pointer;  }
.level_menu { padding:0 30px; background-color:#FFF; }

.MainNav .sprite_items { width:auto; padding-right:5px; padding-left:20px; }
.MainNav .sprite_items a { color:#666; padding:0px; }
.MainNav .sprite_items a:hover { color:#870000; text-decoration:none; }
.MainNav .resp-menu { position:absolute; float:right; height:30px; width:95px; overflow:hidden; padding:0; top:3px; right:10px; }
.MainNav .hide { display:none; }
.MobileMenuButton { height:30px; color:#fff; top:-3px; position:relative; }
.resp-menu .fa { font-size:26px; color:#fff; margin-left:10px; top:3px; position:relative; }
.MobileMenuButton:hover, .MobileMenuButton:visited { color:#fff; text-decoration:none; }

.MainNav.mobile { height:255px; position:relative; z-index:9; }
.MainNav.mobile .nav-main-links .MobileNav { width:100%; height:auto; display:block; background-color:#fff; position:absolute; top:32px; z-index:9999; }
.MainNav.mobile .nav-main-links .nav-item { width:100%; clear:left; display:block; margin:0; }*/

.Social { float:right; position:relative; top:82px; }

.SubNav { display:none; height:35px; background-color:#D4EDEF; }
.SubNav .Social { padding-top:3px; float:right; } 
.SubNav .KeywordList { height:100%; overflow:hidden; }
.SubNav .KeywordList .Keyword { float:left; padding:10px 10px; }
.SubNav .KeywordList .Keyword a { color:#000; }
.SubNav .KeywordHeading { text-transform:uppercase; font-size:14px; float:left; padding:10px 0 9px 10px; color:#FF0033; font-weight:bold; }

.SocialBtn { width:30px; height:30px; margin-right:5px; float:left; background:url('../../Images/Site/Buttons/SocialIcons.png') no-repeat; }
.SocialBtn { background-size:153px; }
.Icon_Facebook { background-position:-30px 0; }
.Icon_Twitter { background-position:0 0; }
.Icon_YouTube { background-position:-31px -31px; }
.Icon_GooglePlus { background-position:-62px 0; }
.Icon_Pinterest { background-position:-93px 0;  }
.Icon_Instagram { }
.SocialBtn img { width:25px; }

input { padding-left:2px; }
.Hidden { display:none; visibility:hidden; }
.Clear { clear:both; }
.ReqField { color:#BA120E; }
.ReqError { color:#BA120E; font-weight:bold; }


/* Start - Ajax processing pop up box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    div.AjaxProcessingContainer { border:0; height:10%; width:20%; position:fixed; _position:absolute; left:40%; top:40%; color:black; z-index:1000; }
    div.AjaxProcesingShadow { background:#ccc url(../../Images/Site/bgShadow.png) no-repeat right bottom; position:relative; bottom:5px; right:5px; }
    table.AjaxProcesing { width:100%; height:100%; border:1px solid #818181; background-color:#fff; position:relative; bottom:4px; right:4px; }
    td.AjaxProcesingImage { text-align:center; } 
    td.AjaxProcesingText { text-align:center; color:#333; font-size:medium; }

    .modalBackground { background-color:gray; filter:alpha(opacity=70); opacity:0.7; }
    div.AjaxModalBox { min-height:150px; text-align:left; background-color:White; border:2px solid #313131; padding:0px 0px 20px 0px; width:100%; max-width:450px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
    div.AjaxModalBox div.Container { padding:10px; }
    div.AjaxModalBox div.Container p.title { color:#585858 !important; text-transform:uppercase !important; font-weight:bold !important; border-bottom:1px solid #585858; }
/* End - Ajax processing pop up box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Start - Generic error panel box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    div.ErrorPanel { width:100%; text-align:center; vertical-align:middle; background-color:#BA120E; padding:15px 0; border-bottom:1px solid #333; }
    div.ErrorPanel { position:fixed; top:0px; left:0px !important; z-index:99999; }
    div.ErrorPanel span { width:70%; display:block; font-weight:bold; margin:0px auto; color:#fff; }
    span.CloseError { width:17px !important; position:absolute; top:15px; right:20px; cursor:pointer; }
    
    .ReqField { color:#BA120E; }
    .ReqError { color:#BA120E; font-weight:bold; }

    .CloseAjaxModalBox { width:100%; height:20px; text-align:right; background-color:#313131; }
    .ErrorModalSummary ul { padding:0px; margin-top:5px; margin-left:0px; list-style-type:none; color:Red; }
    .ErrorModalSummary li { padding-left:30px; margin:0px; text-indent:0px; color:#BA120E; }

/* Widgets ----------------------------------------------------------------------------------------------------------------------------*/
.DefaultWidget { width:100%; /*width:auto; */ height:auto; float:left; overflow:hidden; }
.FullWidget, .QuarterWidget, .ThirdWidget, .HalfWidget, .TwoThirdWidget, .ThreeQuarterWidget { height:auto; overflow:hidden; margin-bottom:30px; float:left; margin-left:30px; }
.FullWidget { width:930px; float:none; }
.QuarterWidget { width:210px; }
.ThirdWidget { width:290px; }
.HalfWidget { width:450px; }
.TwoThirdWidget { width:610px; }
.ThreeQuarterWidget  { width:720px; }
.NoneWidget { display:none; visibility:hidden; }

.WidgetHeader { width:100%; background-color:#006591; border-bottom:2px solid #019CDF; font-weight:500; text-align:center; font-size:22px; padding:7px 0; text-transform:uppercase; color:#fff; }
.WidgetHeader a { color:#fff; }
.HomeWidget .WidgetContent { height:275px; overflow:hidden; }
.HomeWidget .ViewAll { text-align:center; color:#006591; padding-top:7px; }
.HomeWidget .ViewAll a { font-weight:bold; color:#006591; }
.WidgetScroll { overflow-y:scroll !important; }


.Trending a { font-size:22px; }
.HalfContent { width:50%; padding:0; float:left; }
.Center { text-align:center; }

.SideMenu .MenuItem { padding:5px 0; color:#006591; font-weight:500; }
.SideMenu .MenuItem a, .SideMenu .MenuItem a:visited { color:#006591; }
.SideMenu .MenuSeperator { border:1px solid #019CDF; height:1px; }

/* Home page ----------------------------------------------------------------------------------------------------------------------------*/
.HomeWidget { border-bottom:5px solid #006591; background-color:#fff; height:370px; overflow:hidden; margin-left:20px; width:225px; }
.HomeWidget .List-ItemContainer { padding:20px 15px 0 15px; border:0; height:auto; margin-bottom:0; min-height:100px; }
.HomeWidget .List-ItemContainer .ListItem { max-height:150px; }
.HomeWidget .List-ItemContainer .ImageHolder { display:none; }
.HomeWidget .List-ItemContainer .ContentHolder { width:100%; }
.HomeWidget .List-ItemContainer .TitleBox { height:auto; max-height:34px !important; margin-bottom:5px; font-weight:600; }
.HomeWidget .List-ItemContainer .TitleBox h2 { font-size:15px; font-weight:600; }
.HomeWidget .List-ItemContainer .DatePublished { font-size:11px; display:block; color:#006591; }
.HomeWidget .List-ItemContainer .Introduction { font-size:14px !important; max-height:67px !important; height:auto; margin-bottom:0 !important; }

.HP_Panel1 { background-image:url(../../Images/Site/WelcomeBg.jpg); background-size:cover; color:#fff; }
.HP_Panel1 .PrincipalMessage { padding:30px 10px; height:auto; text-align:center; }
.HP_Panel1 .PrincipalMessage .HeaderText { font-size:28px; }
.HP_Panel1 .PrincipalMessage .Message { padding:10px 30px; }
.HP_Panel1 .PrincipalMessage .PrincipalName { font-style:italic; font-weight:bold; padding:10px 30px; }
.HP_Panel1 .PrincipalMessage .Title { clear:left; font-size:14px; font-weight:normal; }

    div#pnlHomepageMedia { background-color:#eee; }
    div.HomepageMedia { background-color:#999; }
    div.HomepageMedia, .bx-wrapper { height:400px; }

    .HomePageCarousel { width:100%; margin-top:300px; }
    .HomePageImage img { height: auto; min-height:100%; min-width:900px; width:100%; position:fixed; top:0; left:0; z-index:-999; }

    .HP_MediaArticle1 { height:300px; }
/* ----------------------------------------------------------------------------------------------------------------------------*/

/* Events Control ----------------------------------------------------------------------------------------------------------------------------*/
.Events { border-bottom:5px solid #006591; }
.EventsWidget { width:100%; padding:15px 5px; }
.EventsWidget .EventLine { margin-bottom:15px; }
.EventsWidget .EventStartDate { width:70px; text-align:center; font-weight:500; color:#006591; border-right:1px solid #bbb; text-transform:uppercase; display:inline-block; }
.EventsWidget .EventStartDate .Month { font-size:20px; margin:0 3px; overflow:hidden; }
.EventsWidget .EventStartDate .Date { font-size:14px; }
.EventsWidget .EventTitle { width:calc(100% - 75px); overflow:hidden; height:45px; display:inline-block; padding:5px; }
.EventsWidget .ViewAll { text-align:center; color:#006591; padding-top:0; }
.EventsWidget .ViewAll a { font-weight:bold; color:#006591; }

.TwitterSide { margin-top:30px; border-bottom:5px solid #006591; } 

/* News pages top banner image Panels ----------------------------------------------------------------------------------------------------------------------------*/
    div.NewsPageMedia, div.StudentNewsPageMedia , div.EventsPageMedia { height:225px; background-size:cover !important; padding-top:30px; }
    div.NewsPageMedia { background:url(../../Images/Site/NewsPageBG.jpg) no-repeat center top; }
    div.StudentNewsPageMedia { background:url(../../Images/Site/StudentPressPageBG.jpg) no-repeat center top; }
    div.EventsPageMedia { background:url(../../Images/Site/EventsPageBG.jpg) no-repeat center top; }

    div.PanelContent { margin:0 auto; padding-top:40px; }

    .StudentPressIcon { float:left; }
    div.NewsPageMedia .Info, div.StudentNewsPageMedia .Info, div.EventsPageMedia .Info { margin:0 auto; color:#fff; }
    div.NewsPageMedia .Row1, div.StudentNewsPageMedia .Row1, div.EventsPageMedia .Row1 { padding-left:40px !important; }    
    div.NewsPageMedia .Info h2, div.StudentNewsPageMedia .Info h2, div.EventsPageMedia .Info h2 { font-size:46px; display:inline; padding:5px 10px; background:none repeat scroll 0 0 rgba(0, 0, 0, 0.5); font-family:'Open Sans', Sans-Serif, Arial; font-weight:300; }

/* ----------------------------------------------------------------------------------------------------------------------------*/

/* Media Panels ----------------------------------------------------------------------------------------------------------------------------*/
.MediaPanel { width:100%; height:350px; overflow:hidden; margin:0; padding:0; margin-bottom:30px; }
.MediaPanel .MP_item1 { height:100%; }
.MediaPanel .ImageHolder { height:100%; border:1px solid #000; }
.MediaPanel .ImageHolder .Mobile { display:none; }
.MediaPanel .ContentHolder { width:100%; max-width:700px; height:95px; position:relative; top:-115px; padding:5px 15px; background-color:#000; opacity:0.8; filter:alpha(opacity=80); }
.MediaPanel .ContentHolder .TitleBox { }
.MediaPanel .ContentHolder .TitleBox a { color:#fff; font-size:30px; font-weight:bold; }
.MediaPanel .ContentHolder .DatePublished { display:none; }
.MediaPanel .ContentHolder .Introduction { color:#ddd; font-size:17px; line-height:normal; }

/* Generic Data Control ----------------------------------------------------------------------------------------------------------------------------*/
.ImageHolder { overflow:hidden; border:1px solid #bbb; background-color:#eee;  }
.ImageHolder img { width:100%; height:auto; }
.ImageHolder .ImageTag { left:11px !important; right:auto !important; top:11px !important; padding:1px 5px; overflow:hidden; text-align:left; max-width:80%; font-size:13px; position:absolute; height:auto !important; }
.ImageHolder .ImageTag span { color:#fff; font-weight:bold; background:none; }
.ImageHolder a:hover { text-decoration:none; }
.ImageHolder a.News { background-color:#F37924 !important; border:1px solid #F37924 !important; }
.ImageHolder a.Music, a.News, a.Sport, a.Student-News, a.Tips, a.TY-News { background-color:#008888 !important; border:1px solid #008888 !important; text-decoration:none; }

.ContentHolder {  }
.ContentHolder .TitleBox h2 { font-size:20px; color:#464646; padding:0; margin:0; }
.ContentHolder .TitleBox h2 a { color:#464646; }
.ContentHolder .DatePublished { font-weight:bold; font-size:12px; }
.ContentHolder .Introduction { line-height:1.2; }

.ArtTypePage .DatePublished { display:none; }

.List-ItemContainer { width:100%; height:160px; overflow:hidden; padding:20px; border:1px solid #999; margin-bottom:20px; }
.ListItem { max-height:120px; overflow:hidden; }
.ListItem .ImageHolder { width:180px; height:100%; max-height:120px; float:left; margin-right:20px; position:relative; }
.ListItem .ContentHolder { width:calc(100% - 200px); float:left; }
.ListItem .ContentHolder .TitleBox  { max-height:23px; overflow:hidden; }
.ListItem .ContentHolder .Introduction { font-size:14px; padding-top:3px; max-height:50px; overflow:hidden; margin-bottom:5px; }
.ListItem .ContentHolder .ReadMore a { color:#006591; font-size:13px; font-weight:bold }
 
.ListItem-Featured .ListItem { max-height:230px !important; }
.ListItem-Featured .ImageHolder { width:330px !important; }
.ListItem-Featured .ContentHolder { width:300px !important; }

.Grid-ItemContainer { width:290px; height:325px; float:left; overflow:hidden; border:0px solid red; margin-bottom:20px; margin-right:30px; background-color:#fff; }
.GridItem { width:100%; }
.GridItem .ImageHolder { width:100%; height:145px; min-height:125px; margin-bottom:10px; }
.GridItem .ImageHolder .ImageTag { display:none; }
.GridItem .ContentHolder { width:100%; clear:left; padding:0 15px; margin-bottom:5px; }
.GridItem .ContentHolder .TitleBox { max-height:45px; overflow:hidden; }
.GridItem .ContentHolder .TitleBox h2 { padding:5px 0; }
.GridItem .ContentHolder .Introduction { font-size:14px; padding-top:3px; height:85px; overflow:hidden; margin-bottom:5px; }
.GridItem .ContentHolder .ReadMore a { color:#006591; font-size:13px; font-weight:bold }
.GridItem .ImageHolder { border:0 !important; }

.Grid-ItemContainer:nth-child(3n+0) { margin-right:0; }

.GridItem-Featured { width:480px; height:400px; overflow:hidden; }
.GridItem-Featured .GridItem { width:470px; }

.ThirdWidget .List-ItemContainer { height:auto !important; }
.ThirdWidget .ListItem { width:100% !important; margin:0; }
.ThirdWidget .ListItem .ContentHolder { width:calc(100% - 120px); }
.ThirdWidget .ListItem .ContentHolder .TitleBox { overflow:hidden; width:100%; max-height:65px; }
.ThirdWidget .ListItem .ContentHolder .TitleBox h2 { padding-bottom:0; }
.ThirdWidget .ListItem .ContentHolder .TitleBox a { font-size:14px; font-weight:600; }
.ThirdWidget .ListItem .ContentHolder .DatePublished { display:none; }
.ThirdWidget .ListItem .ContentHolder .Introduction { display:none; }

.ThirdWidget .ListItem .ImageHolder { width:110px; height:65px; margin-right:10px; position:initial; }
.ThirdWidget .ListItem .ImageTag { display:none !important; }
.ThirdWidget .ListItem .ReadMore { display:none; }

/* Article Detail Page  ----------------------------------------------------------------------------------------------------------------------------*/
div.ArticleTitle h1, div.Item-Title h1 { font-size:27px; font-weight:600; padding:0; }
.ArticleBx { min-height:500px; margin-bottom:50px; }
.ArticleBx .IntroText { color:#777; margin-right:15px; padding-top:5px; font-size:18px; line-height:normal; display:none; }
.ArticleBx .AuthorText { margin-top:5px; font-weight:bold; }
.ArticleBx .DatePublished { margin:5px 0; }
.ArticleBx .ArticleImage { margin-bottom:20px; }
.ArticleBx .ArticleImage img { width:100%; }
.ArticleBx .Social-Networks { width:100%; text-align:left; padding:10px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; margin:5px 0 10px; height:42px; }
.ArticleBx .ArticleCopy { clear:both; }
.ArticleBx .ArticleKeywords { border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; margin-top:10px; margin-bottom:10px; padding:10px 0px; }
.ArtTypePage .ArticleBx .AuthorText { display:none; }
#GalleryImages a { margin:15px; display:inline-block; max-width:120px; height:100px; overflow:hidden; border:1px solid #aaa; }
#GalleryImages a img { height:100%; max-height:100px; }

.st_facebook_custom { background-image:url('../../Images/Site/social_icon_sprite.png') !important; height:20px; width:61px; background-position:0 0; display:inline-block; margin:0 3px 0 0; position:relative; top: 0px; }
.st_facebook_custom:hover { background-position:-71px 0; cursor:pointer; }
.st_twitter_custom { background-image:url('../../Images/Site/social_icon_sprite.png') !important; height:20px; width:61px; background-position:0 -20px; display:inline-block; margin:0 3px; }
.st_twitter_custom:hover { background-position:-71px -20px; cursor:pointer; }
.st_googleplus_custom { background-image:url('../../Images/Site/social_icon_sprite.png') !important; height:20px; width:43px; background-position:0 -40px; display:inline-block; margin:0 3px; }
.st_googleplus_custom:hover { background-position:-71px -40px; cursor:pointer; }
.st_pinterest_custom { background-image:url('../../Images/Site/social_icon_sprite.png') !important; height:20px; width:59px; background-position:0 -146px; display:inline-block; margin:0 3px; }
.st_pinterest_custom:hover { background-position:-71px -146px; cursor:pointer; }
.st_sharethis_custom { background-image:url('../../Images/Site/social_icon_sprite.png') !important; height:20px; width:61px; background-position:0 -60px; display:inline-block; margin:0 0 0 3px; }
.st_sharethis_custom:hover { background-position:-71px -60px; cursor:pointer; }
.st_share_count { height:20px; width:100px; display:inline-block; margin:0 3px; padding-left:5px; border-left:1px solid black; }

.CommentsHeader h2 { font-size:18px; color:#005A76 !important; padding-bottom:15px; }

/* Contact Page  ----------------------------------------------------------------------------------------------------------------------------*/
.ContactPage .Address { float:left; width:250px; margin-top:20px; margin-bottom:30px; }
.ContactPage .Route { float:left; width:360px; background-color:#FABCBC; padding:20px; }
.ContactPage .Route .Heading { text-transform:uppercase; margin-bottom:20px; }
.ContactPage .Map { width:100%; }
.ContactPage  #gmap_canvas { height:400px; width:100%; }
.ContactPage .GoogleMapDiv1 { overflow:hidden;height:400px; width:100%; }

/* Error Page  ----------------------------------------------------------------------------------------------------------------------------*/
.ErrorPage .ErrorMsg { width:40%; height:auto; float:right; }
.ErrorPage .ErrorImg { width:60%; height:auto; float:left; padding-right:30px; }

/* Events Page  ----------------------------------------------------------------------------------------------------------------------------*/
.Calendar { }
.CalendarTitle { height:60px; background-color:#eaeaea; color:#292929 !important; border-bottom:5px solid #fff; }
.CalendarTitle td { padding:0 10px; font-size:26px; font-weight:normal; color:#292929; }
.CalendarDayHeading { width:125px; height:50px; color:#333; padding:5px; text-align:center; margin:0 auto; font-size:15px; font-weight:normal; border:1px solid #eaeaea; }
.CalendarDay, .CalendarDay-Weekend, .CalendarDay-Today { padding:5px; height:105px; border:1px solid #eaeaea; background-color:#fff; vertical-align:top; }
.CalendarDay-Weekend { background-color:#fff6ca; }
.CalendarDay-Today { background-color:#e2f0ff; }
a.EventLink { clear:left; display:block; margin:5px 0; background-color:#006591; font-size:11px; color:#fff; padding:1px 0; text-decoration:none; max-height:18px; overflow:hidden; }
.EventList .ColLabel { float:left; margin-top:5px; width:120px; clear:both; text-align:right; padding-right:10px; font-weight:600; }
.EventList .ColControl { float:left; margin-top:5px; width:calc(100% - 150px); }

.EventList .EventItem { width:210px; border:1px solid #ccc; padding:15px; }
.EventList .EventItem:nth-child(4n+4) { margin-right:0; }
.EventList .EventItem .StartTime, .EventList .EventItem .EndTime { margin-left:20px; }

.EventList .StartDate, .EventList .EndDate { display:inline-block; min-width:100px; padding-right:20px; }
.EventList .EventItem .fa { padding-right:10px; color:#006591; }
.EventList .EventItem .EventTitle { font-size:16px; font-weight:bold; }
.EventList .EventItem .EventMoreInfo, .EventList .EventItem .EventURL { display:none; }
.EventList .EventItem .PayNow { text-align:center; padding-top:5px; }

.EventListDetail { width:100% !important; border-top:1px solid #333 !important; border-bottom:1px solid #333 !important; border-right:0 !important; border-left:0 !important; display:inline-block; padding-top:10px; }
.EventListDetail .EventURL { padding-top:10px !important; }
.EventListDetail .EventMoreInfo, .EventListDetail .EventURL { display:block !important; }
.RegisterEvent { clear:both; }
.RegisterEvent .ShowRegister { cursor:pointer; color:#880000; }

div.CalendarLayout { width:100%; font-family:Verdana; }
div.CalendarDayHeading { width:14.28%; float:left; padding:14px 0; }
div.CalendarDay { width:14.28%; float:left; text-align:center; }
div.CalendarLayout .aspNetDisabled, .aspNetDisabled:hover { text-decoration:none; color:#777; }

div.CalendarLayout .MainHeader { height:60px; padding:10px; color:#333; background-color:#eaeaea; color:#292929 !important; border-bottom:5px solid #fff; }
div.CalendarLayout .MainHeader a { color:#292929 !important; }
div.PrevMonth, div.NextMonth { width:20%; float:left; font-size:20px; padding-top:5px; }
div.CurrentMonth { width:55%; text-align:center; float:left; font-size:26px; }
div.PrevMonth { text-align:left; }
div.NextMonth { text-align:right;}

.DayDate { width:100%; display:block; line-height:19px; font-size:20px; color:#333; text-align:center; }
.DayEvents { height:50px; overflow:hidden; }
.Monday { clear:left; }
.Saturday, .Sunday { background-color:#fff6ca }

.ActiveDay, .ActiveDay:hover { color:#880000; }
a.ViewAll { background-color:#69C5BA !important; color:#333 !important; font-weight:bold; }

.AlternateDetail .EventListDetail { border:0 !important; background-color:#eaeaea; }

/* Enrolment pages ----------------------------------------------------------------------------------------------------------------------------*/
.Enrolment { clear:both; margin:30px 0; }
.Enrolment .Title { font-size:20px; border-bottom: 1px solid #333; margin-bottom:20px; }
.Enrolment .Ctl input:not([type='submit']) { padding:3px; font-size:14px; color:#000; width:230px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; }
.Enrolment .Ctl input[type='radio'] { width:75px !important; float:left; }

.Enrolment .Lbl, .Enrolment .Ctl { float:left; }
.Enrolment .Lbl { width:180px; clear:both; }
.Enrolment .Ctl { width:400px; margin-bottom:20px; }
.Enrolment .Save input { padding:0; }

/* Custom pages ----------------------------------------------------------------------------------------------------------------------------*/
table { width:100%; }
table tr { height:35px; border:2px solid #fff; }
table tr.Row1 { background-color:rgba(185,185,185,0.2);}
table tr.Row2 { background-color:rgba(185,185,185,0.4);}
table td, table th { padding:0 10px !important; }
table tr a { color:#00a489; margin-left:15px; margin-right:15px; }
 
ul.Booklists li { padding:1px; }

/*Test styles for masonry*/
.grid { background: #EEE; max-width: 1200px; }
/* clearfix */
.grid:after { content: ''; display: block; clear: both; }
/* ---- grid-item ---- */
.grid-sizer, .grid-item { width: 20%; }

.grid-item { height: 120px; float: left; background: #D26; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; }

.grid-item--width2 { width:  40%; }
.grid-item--width3 { width:  60%; }
.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

.Forms div { margin-bottom:10px; }
.Forms .NoFrom { font-size:larger; font-weight:500; }
.Forms .Form-Label { display:block; margin-bottom:5px; margin-top:15px; }
.Forms .YesNo { display:block; position:relative; left:50px; }
.Forms .YesNo label { margin-left:10px; }
.Forms .SubmitForm { margin:20px; text-align:center; }
.Forms .Form-TextboxLabel, .Forms .Form-Email_addressLabel, .Forms .Form-NumberLabel, .Forms .Form-CalendarLabel, .Forms .Form-Dropdown_boxLabel { margin-right:10px; display:inline-block; text-align:left; min-width:120px; }
.Forms .Form-TextareaLabel { margin-right:10px; display:block; }
.Forms input[type='text'], .Forms input[type='email'], .Forms input[type='date'], .Forms select { padding:5px !important; margin-right:10px; }
.Forms input[type='radio'], .Forms input[type='checkbox'] { margin-right:5px !important; }
.Forms textarea { width:80%; height:100px; }
.Forms hr { border-top:1px solid #666; }

@media only screen and (min-width: 1500px) {
    .bx-wrapper .bx-viewport { height:500px !important; }
    div.HomepageMedia, .bx-wrapper { height:500px; }
    .bxslider li { background-size:auto 600px !important; }
}

@media only screen and (min-width: 990px) {
    #ctlHeader_Menu_mnuMainMenu ul { left:147px; /*float: right !important;*/ }
}

/*  Mobile menu now visible under 989px*/
@media only screen and (max-width: 989px) {
    .TopBar .Brochure { padding-top:45px; }

    /* Nav functionalty based on width > 990px*/
        .MenuPanel { left:0; right:0; top:100px; position:absolute; }
        .MainMenu { display:none; }
        .MainMenu { background-color:#006591; top:6px; left:0; width:100%; position:relative; }
        .MainMenu li { float:none; width:100%; }
        .MainMenu li a { color:#323232; }
        .MainMenu li:hover { background-color:#006591; }
        .MainMenu { padding-left:0px; }
        #mnuMainMenu ul { border:1px solid #323232; border-top:0; text-align:left; background-color:#006591; }
        #mnuMainMenu ul .dynamic { position:relative !important; }
        #mnuMainMenu ul.dynamic { left:0 !important; top:0 !important; }
        #mnuMainMenu a.level1 { float:none; margin:0 !important; color:#fff; }
        #mnuMainMenu img.horizontal-separator { display:none; }
        li.static { padding:5px 20px !important; }
        ul.level2 { padding:0 !important; }
        li.static:last-child a { padding-right:0 !important; padding-left:0 !important; background-color:unset; }
        li.static:hover a { /*background-color:#fff; color:#006591;*/ }
        .Stuck .MainMenu { top:7px; }
    /* End Nav functionalty based on width > 990px*/

    /* Nav functionalty based on width > 990px*/
/*
    .MobileNav { display:none; }
    .MobileNav .MainMenu { background-color:#006591; top:0; left:0; width:100%; }
    .MobileNav .MainMenu li { float:none; width:100%; }
    .MobileNav .MainMenu li:hover { background-color:#006591; }
    .MainNav { position:relative; top:-35px; }
    .KeywordList { width:100%; height:100%; }
    .MainMenu { padding-left:0px; }
    .MainMenu ul { width:100% !important; }
    .MainNav .sprite_items { padding:0 10px; } 
    #ctlHeader_Menu_mnuMainMenu ul .dynamic { position:relative !important; }
    #ctlHeader_Menu_mnuMainMenu ul.dynamic { left:0 !important; }
    #ctlHeader_Menu_mnuMainMenu a.level1 { float:none; }
    #ctlHeader_Menu_mnuMainMenu a.popout { padding-right:0px !important; }
    #ctlHeader_Menu_mnuMainMenu img.horizontal-separator { display:none; }
    li.static { padding:0 13px !important; }
    ul.level2 { padding:0 !important; }
    li.static:hover a { background-color:#fff; color:#006591; }
*/
/* End Nav functionalty based on width > 990px*/

    .Enrolment .Lbl { width:100% !important; }
    .HP_Panel1 .PrincipalMessage .HeaderText, .HP_Panel1 .PrincipalMessage .Message { padding:10px 15px; }
    .HP_Panel1 .PrincipalMessage .PrincipalName { padding:0 15px; }

    .Footer1 { height:100%; }
    .Footer1 .GetInTouch { width:50%; }
    .Footer1 .GetInTouch input, .Footer1 .GetInTouch textarea { width:100%; }
    .Footer1 .ContactUs { width:50%; }
    .Footer1 .Location { clear:left; width:100%; padding-top:20px; }
    .Footer1 .Location iframe { height:300px; }

}

@media only screen and (min-width: 766px) and (max-width: 989px) {
    body { min-width:768px; overflow-x:hidden; }
    body #form1 { overflow-x:hidden; }
    .BodyWrapper { width:768px !important; min-width:768px !important; }
    .Wrapper { max-width:768px; }

    .TopBar .ContactInfo { width:220px; padding:43px 0 0 0; float:right; }

    .Footer1 { height:100%; }
    .Footer1 .GetInTouch { width:50%; }
    .Footer1 .GetInTouch input, .Footer1 .GetInTouch textarea { width:100%; }
    .Footer1 .ContactUs { width:50%; }
    .Footer1 .Location { clear:left; width:100%; padding-top:20px; }

    div.HomepageMedia, .bx-wrapper { height:375px; }
    .bx-wrapper .bx-viewport { height:375px !important; } 
    .bxslider li { background-size:auto 400px !important; }
    
    .FullWidget { width:708px; }
    .QuarterWidget { width:154.5px; }
    .ThirdWidget { width:216px; }
    .HalfWidget { width:339px; }
    .TwoThirdWidget { width:462px; }
    .ThreeQuarterWidget  { width:553.5px; }

    .HP_Header .SchoolNews { width:225px; }

    .ThirdWidget { width:225px; }
    .ThirdWidget .List-ItemContainer { max-height:155px; height:auto; }
    .ThirdWidget .ListItem { max-height:130px; }
    .ThirdWidget .ListItem .ImageHolder { width:100%; height:80px; margin-bottom:6px; }
    .ThirdWidget .ListItem .ContentHolder { width:100%; }
    .ThirdWidget .ListItem .ContentHolder .TitleBox a { font-size:14px; }

    .MediaPanel { height:270px; }
    .MediaPanel .ContentHolder { max-width:650px; }
    .Events .EventTitle { width:119px; }
    
    .Grid-ItemContainer { width:222px; height:320px; }
/*    .Grid-ItemContainer .ImageHolder img { width:auto; height:100%; position:relative; left:-15px; }*/

    /* Contact Page  ----------------------------------------------------------------------------------------------------------------------------*/
    .ContactPage .Route { width:100%; }
    
    /*Masonry not working so reset these styles */
    .GridItem .ImageHolder { height:120px; min-height:120px; }
}

@media only screen and (max-width: 765px) {
    body { min-width:640px; overflow-x:hidden; }
    .BodyWrapper { width:640px !important; min-width:640px !important; }
    .Wrapper { max-width:640px; }
    .HeaderBar { height:140px; }
    .TopBar { height:110px; }
    .TopBar .SchoolName { font-size:38px; left:-25px; width:auto;  }
    .TopBar .SchoolLogo { font-size:24px; top:-10px; left:-10px; }
    .TopBar .SiteLogo .logo img { width:85px; }
    .MainNav { top:-40px; }
    .TopBar1 .EmailUs { display:none; }
    .MenuPanel { top:65px; }

    div.HomepageMedia, .bx-wrapper{ height:350px; }
    .bx-wrapper .bx-viewport { height:350px !important; } 
    .bxslider li { background-size:auto 350px !important; }

    .FullWidget, .ThreeQuarterWidget { width:540px; }
    .QuarterWidget, .HalfWidget { width:275px; }
    .ThirdWidget { width:173px; }
    .TwoThirdWidget { width:376.6px; }

    .HP_Header .SchoolNews { width:289px; }
    .HP_Panel1 .PrincipalMessage { padding:20px 15px !important; }

    .ThirdWidget .List-ItemContainer { max-height:155px; height:auto; }
    .ThirdWidget .ListItem { max-height:130px; }
    .ThirdWidget .ListItem .ImageHolder { width:100%; height:80px; margin-bottom:6px; }
    .ThirdWidget .ListItem .ContentHolder { width:100%; }
    .ThirdWidget .ListItem .ContentHolder .Introduction { display:block; max-height:35px; }

    .MediaPanel { height:250px; }
    .MediaPanel .ContentHolder { max-width:640px; top:-90px; padding-top:10px; }
    .MediaPanel .ContentHolder .TitleBox a { font-size:24px; }

    .Grid-ItemContainer { width:279px; height:340px; }

    .Grid-ItemContainer:nth-child(3n+0) { margin-right:20px; }
    .Grid-ItemContainer:nth-child(2n+0) { margin-right:0; }
    .Grid-ItemContainer .ImageHolder { height:150px; }

    /* Contact Page */
    .ContactPage .Route { width:328px; }
    
}

@media only screen and (max-width: 639px) {
    .Wrapper { max-width:568px; }

    .TopBar .ContactInfo { width:198px; padding:10px 0 0 0; float:right; clear:right; }
    .TopBar .ContactInfo .CallUs { font-size:14px; }
    .TopBar .ContactInfo .PhoneNo { font-size:28px; }
    .TopBar .SchoolName { width:300px; }
    .TopBar1 .SearchBox input[type='text'] { width:100px; }

    div.HomepageMedia, .bx-wrapper { height:250px; }
    .bx-wrapper .bx-viewport { height:250px !important; } 
    .bxslider li { background-size:auto 250px !important; }

    .ListPage .ThirdWidget { clear:left; }
    .ListPage .ThirdWidget .ListItem .ImageHolder { margin-right:10px; }
    .ListPage .ThirdWidget .ListItem .ContentHolder { width:140px; }
    .ListPage .ThirdWidget .ListItem .ContentHolder .TitleBox { font-size:14px; }
}

/*		iPhone 5+ Landscape Mobile Layout: 568px - 640px.  */
@media only screen and (min-width: 568px) and (max-width: 639px) {
    body { min-width:568px; overflow-x:hidden; }
    .BodyWrapper { width:568px !important; min-width:568px !important; }
    .TopBar .Wrapper { max-width:568px; }

    .FullWidget, .ThreeQuarterWidget { width:508px; }
    .QuarterWidget, .HalfWidget { width:239px; }
    .ThirdWidget { width:149.3px; }
    .TwoThirdWidget { width:328.6px; }
    
    .HP_Header .SchoolNews { width:253px; }

    .ThirdWidget .ListItem .ContentHolder { width:100%; }
    .ThirdWidget .ListItem .ContentHolder .Introduction { display:none; }

    .ListPage .ThirdWidget .ListItem { width:48% !important; float:left; }
    .ListPage .ThirdWidget .ListItem .ImageHolder { width:110px; }

    .DetailPage .ThirdWidget { display:none; }
   
    .MediaPanel { height:225px; }
    /*.MediaPanel .ImageHolder img { height:100%; width:auto; }*/
    .MediaPanel .ContentHolder { max-width:450px; height:75px; top:-80px; }
    .MediaPanel .ContentHolder .TitleBox a { font-size:1.5em; }
    .MediaPanel .ContentHolder .Introduction { display:none; }

    .Grid-ItemContainer { width:252px; height:325px; }
    .Grid-ItemContainer .GridItem { width:100%; }
    .Grid-ItemContainer .ImageHolder { height:130px; }

    .Grid-ItemContainer:nth-child(3n+0) { margin-right:20px; }
    .Grid-ItemContainer:nth-child(2n+0) { margin-right:0; }

    /* Contact Page */
    .ContactPage .Address { width:231px; }
    .ContactPage .Route { width:275px; }

    /* Events Page */
    .EventList .EventItem { width:238px; height:220px; margin-right:30px; }
    .EventList .EventItem .EventDescription { height:67px; overflow:hidden; }
    .EventList .EventItem:nth-child(2n+2) { margin-right:0; }

}

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

    .Footer1 .GetInTouch, .Footer1 .ContactUs, .Footer1 .Location { clear:left; width:100%; padding-top:20px; }
    .Footer1 .GetInTouch input, .Footer1 .GetInTouch textarea { width:100%; }
    
    .Footer1 .Location { padding:20px 0; }

    /* Contact Page  ----------------------------------------------------------------------------------------------------------------------------*/
    .ContactPage .Address { width:100%; }
    .ContactPage .Route { width:100%; }

    /* Error Page  ----------------------------------------------------------------------------------------------------------------------------*/
    .ErrorPage .ErrorMsg, .ErrorImg { width:100%; float:none; }
    .ErrorPage .ErrorImg { width:100%; float:none; padding-right:0; padding-bottom:30px; }

    /* Events Page  ----------------------------------------------------------------------------------------------------------------------------*/
    .DayEvents, a.ViewAll { display:none; }
    .CalendarDay, .CalendarDay-Weekend, .CalendarDay-Today { height:50px; padding-top:15px; }
    .DayDate { font-size:18px !important; }

    .SideMenu { display:none; }
}

/*		Wide Mobile Layout: 480px.  */
@media only screen and (min-width: 480px) and (max-width: 567px) {
    body { min-width:480px; overflow-x:hidden; }
    .BodyWrapper { width:480px !important; min-width:480px !important; }
    .Wrapper { max-width:480px; }
    .TopBar .SchoolName { font-size:32px; }
    .TopBar .SchoolLogo { font-size:18px; top:0; }

    .FullWidget, .ThreeQuarterWidget { width:420px; }
    .QuarterWidget, .HalfWidget { width:195px; }
    .ThirdWidget { width:420px; }
    .TwoThirdWidget { width:420px; }

    .HP_Header .SchoolNews { width:209px; }
    .ListItem .ImageHolder { width:130px; }
    
    .ThirdWidget .ListItem .ImageHolder { width:130px; height:60px; margin-right:10px; position:initial; }
    .ThirdWidget .ListItem .ContentHolder { width:calc(100% - 140px); }
    .ThirdWidget .ListItem .ContentHolder .TitleBox { max-height:25px; }
    .ThirdWidget .ListItem .ContentHolder .DatePublished { display:block; }
    .ThirdWidget .ListItem .ContentHolder .Introduction { display:none; }
    .ThirdWidget .ListItem .ReadMore { display:block; }

    .ListPage .ThirdWidget .ListItem .ImageHolder { width:180px; }
    .ListPage .ThirdWidget .ListItem .ContentHolder { width:268px; }
    .DetailPage .ThirdWidget { display:none; }

    .MediaPanel { height:250px; }
    /*.MediaPanel .ImageHolder img { width:auto; height:250px; }*/
    .MediaPanel .ContentHolder { height:75px; top:-72px; }
    .MediaPanel .ContentHolder .TitleBox a { font-size:1.5em; }
    .MediaPanel .ContentHolder .Introduction { display:none; }

    .Grid-ItemContainer { width:199px; }
    .Grid-ItemContainer .GridItem { width:157px; }
    .Grid-ItemContainer .GridItem .ImageHolder { min-height:100px; height:100px; }
    .Grid-ItemContainer .GridItem .ImageHolder img { width:120%; position:relative; left:-20px; }

    .Grid-ItemContainer:nth-child(3n+0) { margin-right:20px; }
    .Grid-ItemContainer:nth-child(2n+0) { margin-right:0; }
    .Grid-ItemContainer .GridItem .ContentHolder { height:118px; }

    .EventList .EventItem { width:194px; height:220px; margin-right:30px; }
    .EventList .EventItem .EventDescription { height:70px; overflow:hidden; }
    .EventList .EventItem:nth-child(2n+2) { margin-right:0; }
}

/*		Mobile Layout: 320px. */
@media only screen and (max-width: 479px) {
    body { min-width:320px; overflow-x:hidden; }
    .BodyWrapper { width:320px !important; min-width:320px !important; }
    .Wrapper { max-width:320px; }

    .HP_Header .SchoolNews { width:129px; padding:10px 5px; margin-bottom:20px; } 
    .TopBar1 .Login { display:none; }
    .TopBar .SchoolName { font-size:24px; top:20px; line-height:22px; width:175px; }
    .TopBar .SchoolLogo { font-size:14px; top:10px; }
    .TopBar1 .SearchBox { margin-left:0; }
    .TopBar1 .CallUs { display:none; }
    .TopBar1 .SearchBox input[type='text'] { width:55px; }
  
    div.NewsPageMedia h2, div.StudentNewsPageMedia h2, div.EventsPageMedia h2 { font-size:32px !important; }
    .HP_Header .Selected:before { top:50px; left:30px; }
    
    .FullWidget, .ThreeQuarterWidget, .QuarterWidget, .HalfWidget, .ThirdWidget , .TwoThirdWidget { width:260px; }

    .List-ItemContainer { max-height:155px; height:auto; padding:15px; }
    .ListItem .ImageHolder { width:130px; height:60px; margin-right:10px; position:initial; }
    .ListItem .ContentHolder { width:calc(100% - 140px); }
    .ListItem .ContentHolder .TitleBox { max-height:25px; }
    .ListItem .ContentHolder .DatePublished { display:block; }
    .ListItem .ContentHolder .Introduction { display:none; }
    .ListItem .ReadMore { display:block; }

    .DetailPage .st_sharethis_custom { display:none; }

    .HP_MediaArticle1 { height:auto; }
    .MediaPanel { width:258px; height:auto; }
    .MediaPanel .ImageHolder {  height:150px; min-height:125px;  }
    .MediaPanel .ImageHolder img { /*width:auto; height:100%;*/ min-height:100%; min-width:100%; }
    .MediaPanel .ContentHolder { max-width:298px; max-height:60px; height:100%; position:relative; top:-1px; padding-bottom:5px; margin-bottom:0; }
    .MediaPanel .ContentHolder .TitleBox a { font-size:1em; }
    .MediaPanel .ContentHolder .DatePublished, .MediaPanel .ContentHolder .Introduction { display:none; }

    .HP_Panel1 .PrincipalMessage { padding-top:30px !important; height:100%; }
    .HP_Panel1 .PrincipalMessage .HeaderText { font-size:22px !important; padding:0; }
    .HP_Panel1 .PrincipalMessage .Message { font-size:13px !important; padding:10px; }

    .Grid-ItemContainer { width:258px; height:auto; }
    .Grid-ItemContainer .GridItem { width:216px; }

    .Grid-ItemContainer:nth-child(1n+0) { margin-right:20px;  }
    .Grid-ItemContainer:nth-child(2n+0) { margin-right:0; }
    .Grid-ItemContainer .ImageHolder { min-height:130px; height:130px; }
    .Grid-ItemContainer .ImageHolder img { width:120%; position:relative; left:-20px; }
    .Grid-ItemContainer .GridItem .ContentHolder { max-height:130px; height:auto; padding-bottom:0; margin-bottom:0; }
    .Grid-ItemContainer .ImageHolder img { width:100%; left:0; }

    .EventList .ColLabel, .EventList .ColControl { width:100%; clear:both; text-align:left; }
    .EventList .ColControl { margin:0 0 5px 0; }
    .ShowRegister, .RegisterNow { text-align:center !important; }
    .EventTitleLbl, .StartsLbl, .EndsLbl, .EventDescriptionLbl { display:none; }
    div.PrevMonth, div.NextMonth { font-size:16px; }
    div.CurrentMonth { font-size:20px; }
}

@media only screen and (max-width:330px) {
    #ContentWrapper { padding:20px 5px !important; }
}
.CenterWrap {display: flex;justify-content: center;gap: 40px;}