/*-------------------------------------------------------
RWD Generic in this file, specific RWD in other CSS files
---------------------------------------------------------*/

@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.generics.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.modules.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.nav.css");
/* lib.forms no longer needed */
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.grists.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.panels.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.promotion.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/lib.apps.css");

@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/ContentEditor.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/ContentFormats.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/vendor/blocks.css");
@import url("/EasySiteWeb/EasySite/StyleData/BarrowBC_Master/css/vendor/buttons.css");


@media screen, all {

/*-------------------------------------------------------
 LAYOUT
---------------------------------------------------------*/

/* whole page container */
#sx-wrapper { }
.sx-wo { }
.sx-wi { background: #fff; margin: auto; }

/* masthead */
#sx-masthead { width: 100%; background: #42a593; margin: 0; height: 80px; position: relative; top: 0px; border-bottom: 1px solid #227566; }
#sx-masthead.sticky { position: fixed; top: -80px; z-index: 10; }
#sx-masthead.screensticky { top: 0px; }
.sx-mo { margin: auto; max-width: 1260px; }
.sx-mi { overflow: visible; }

/* avatar */
#sx-avatar { float: left; margin: 10px 0; }
#sx-avatar img.mobile { display: none; }

/* search */
#sx-search, .sx-so {}
.sx-si {}

/* nav + content */
#sx-body { background: #fff; }
#sx-body.sticky { padding-top: 80px; }
.sx-bdo { background: #fff; padding: 0; width: 100%; border-radius: 0; border: 0; }
.sx-bdi { padding: 70px 0; max-width: 1260px; margin: auto; }
@media (min-width: 951px) {
  #sx-body.edit-mode { padding-left: 48px; padding-right: 48px; }
}

/* generator */
#sx-generator {}

@media (max-width: 575px) {
  #top-section {
    font-family: Cabin; background: url("/EasySiteWeb/EasySite/StyleData/BarrowBc_Master/img/h1-image-2018-mob.jpg") no-repeat center 20%;
  }
}

@media (min-width: 576px) {
  #top-section { font-family: Cabin; background: url("/EasySiteWeb/EasySite/StyleData/BarrowBc_Master/img/h1-image-2018.png") no-repeat center 20%; }
}

#top-section-inner { background: rgba(0,0,0,0.75); text-align: center; padding-top: 20px; }
#sx-body.hasAlert #top-section-inner { padding-top: 120px; }
#sx-body.edit-mode #top-section-inner .contenteditor  { border: 2px dashed #d0d0d0 !important; min-height: 1em;	overflow: hidden; padding: 2px !important; position: relative; max-width: 1260px; margin: auto; }
#sx-body.edit-mode #top-section-inner .contenteditor h1 { min-height: 1em; }

#announcement { position: absolute; left: 50%; z-index: 2; width: 90%; }
#announcement-inner { background: #fff; border: 2px solid #000; box-sizing: border-box; font-size: 0.85em; left: -50%; line-height: 1.5em; margin: 20px auto; max-width: 850px; overflow: hidden; padding: 0 15px 0 210px; position: relative; }
#announcement-alert { text-indent: -999em; position: absolute; left: 0; height: 100%; background: #a83434 url("/easysiteweb/easysite/styledata/BarrowBc_Master/img/alert.png") no-repeat scroll 15px center; color: #fff; float: left; display: inline-block; font-family: cabin; font-size: 2em; font-weight: 800; line-height: 2.4em; margin: 0 20px 0 0; width: 190px; }
#alert-text { padding: 10px 0; }



/*-------------------------------------------------------
 USABILITY
---------------------------------------------------------*/
/* accessibility links */
#sx-help { position: relative; font-size: .9em; float: right; }
#sx-help ul, #sx-help li { list-style-type: none; margin: 0; padding: 0 0; }
#sx-help li { float: left; display: block; padding: 0 0; }
#sx-help li.text-larger { padding: 0; }
#sx-help a:link, #sx-help a:visited { padding: 0 10px 0 0; }

/* search box */
#sx-search-anchor { position: relative; }

#sx-search * { clear: none !important; }
#sx-search { position: absolute; right: 15px; top: 15px; float: none; width: 60px; margin: 0; height: 50px; background: #1c544a; border-radius: 8px; }
#sx-search { border: 0; padding: 0; overflow: hidden; }
#sx-search { width: auto; }
#sx-search fieldset { border: 0; padding: 0; margin: 0; }
#sx-search fieldset legend, #sx-search fieldset .question { display: none; }
#sx-search fieldset .fields { width: 300px; display: inline-block; }
#sx-search fieldset .buttons { float: right; width: 60px; text-align: center; margin: 0 0 auto 0; clear: none; }
#sx-search .textbox { border: 0; width: 100%; background: transparent; color: #a8d4cc; font-family: Cabin; font-style: italic; height: 50px; line-height: 60px; }
#sx-search .button { display: inline-block; float: none; margin: 0; border: 0; height: 60px; width: 38px; background: transparent; cursor: pointer; }
#sx-search .buttons:after { content: '\f002'; font-weight: 900; font-family: "Font Awesome 5 Free"; color: #fff; font-size: 1.5rem; position: absolute; top: 8px; right: 17px; }
#sx-search .element { margin: 0; clear: none; }
#sx-search .answer { width: 100%; }
#sx-search .search-left {
	float: left;
	overflow: hidden;
	width: 0;
	white-space: nowrap;
	-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
	   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
		 -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */

	-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
			transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
}
#sx-search .search-clear { float: left; height: 50px; margin: 0 20px; line-height: 50px; cursor: pointer; }
#sx-search.open .search-left { width: 400px; opacity: 1; }

#sx-search .search-left .fields { opacity: 0; -webkit-animation-delay: 5s; animation-delay: 5s; transition: all 500ms ease-in-out; }
#sx-search.open .search-left .fields { opacity: 1; }


/*-------------------------------------------------------
 BREADCRUMB
---------------------------------------------------------*/
#sx-bct { clear: both; padding: 15px 0 25px 0; color: #FFF; font-weight: 500;  }
#sx-bct .sep { padding: 0 20px; display: inline-block; }

#sx-bct a:link, #sx-bct a:visited { color: #f49a0b;}
.style-bi { }

/*-------------------------------------------------------
 FOOTER
---------------------------------------------------------*/
#sx-extras { font-size: 1em; clear: both; background: transparent; padding: 50px 0 20px 0; border-top: 2px solid #c8c8c8; }
#sx-extras .sx-eo { width: 1280px; margin: auto; }
#sx-extras .sx-ei { }
#sx-extras .copyright { float: left; width: 49%; color: #fff; }
#sx-extras .flinks { float: none; width: auto; text-align: left; }
#sx-extras .flinks ul, #sx-extras .flinks li { list-style-type: none; margin: 0; padding: 0; display: block; }
#sx-extras .flinks li { padding: 0; border: 0; }
#sx-extras .flinks li:first-child { border: 0; }
#sx-extras .flinks li a:link, #sx-extras .flinks li a:visited { background: transparent url("/EasySiteWeb/EasySite/StyleData/BarrowBc_Master/img/footer-links.png") no-repeat scroll left .1em; color: #444; display: inline-block; font-weight: 700; margin: 10px 0 15px; padding: 0 0 0 30px; }
#sx-extras .flinks li a:hover, #sx-extras .flinks li a:active { text-decoration: underline; }

#sx-extras .footer { overflow: hidden; }
#sx-extras .footer .footer-image { width: 31%; float: left; }
#sx-extras .footer .footer-image img { width: auto; max-width: 100%; }
#sx-extras .footer .footer-info { width: 69%; margin-left: auto; font-family: Cabin; }
#sx-extras .footer .footer-info-inner { padding-left: 35px; overflow: hidden; }
#sx-extras .footer .footer-contact { width: 60%; float: left; }
#sx-extras h2 { font-size: 2.8em; color: #444; margin: 0 0 .5em 0; padding: 0; line-height: .8em; }
#sx-extras .footer .footer-contact p { line-height: 1.8em; }
#sx-extras .footer .footer-contact a:link, #sx-extras .footer .footer-contact a:visited { color: #d16471; }
#sx-extras .footer .footer-contact .telephone { font-size: 1.6em; line-height: 1em; }
#sx-extras .footer .footer-links { width: 40%; margin-left: auto; }

#sx-extras .footer-red-links { overflow: hidden; }
#sx-extras .footer-red-links div { width: 33%; float: left; }
#sx-extras .footer-red-links-left { width: 34%; }
#sx-extras .footer-red-links-right { float: right; }
#sx-extras .footer-red-links  a:link, #sx-extras .footer-red-links a:visited { font-family: Cabin; background: transparent url("/EasySiteWeb/EasySite/StyleData/BarrowBc_Master/img//www-icon.gif") no-repeat scroll left .5em; color: #d16471; display: inline-block; font-weight: 700; font-size: 1.1em; margin: 10px 0 15px; padding: 10px 0 10px 45px; }



#sx-generator { background: #fff; text-align: center; color: #ccc; padding: 10px 0; }

/*-------------------------------------------------------
 COLUMNS
---------------------------------------------------------*/
.columns-alpha .column-inner { margin-right: 10px; }
.columns-beta .column-alpha .column-inner { margin-right: 17%; }


}

@media print {
	/* print friendly */
	#sx-help, sx-masthead, #sx-extras, #sx-bct { display: none; }
	#sx-nav { width: 0; display: none; }
	#sx-content { margin-left: 0px; }
}

/* SOME BASIC RWD BEHAVIOUR */
/* mobile - tablet */
@media only screen and (max-width: 1300px) {
	/* resize all wrappers */
	.sx-wi { width:  100%; }
	#sx-masthead { width: 100%; }
	.sx-bdo { width: 100%; }
	.sx-bdi { width: auto; padding-left: 20px; padding-right: 20px; }
	.custom-menu-sx-tnv { width: 100%; }
	.mega-menu { width: 100%; }
	#sx-extras .sx-eo { width: 100%; }
	.sx-mi { padding: 0 20px; width: auto; }
	#sx-extras .sx-ei { padding: 0 20px; }
 	.sx-co { padding-left: 40px; }

}

@media screen and (max-width: 1000px) {
	/* Asset manager */
	/* either these two columns or the side nav need to go onto separate lines once the tabular data is being cut off. Will vary according to other Design/RWD requirements */
	.asset-manager .col-alpha, .asset-manager .col-beta { float: none; display: block; padding: 5px 0; width: 100%; }

}

/* tablet - portrait */
@media screen and (max-width: 950px) {
	body, #faux { padding: 0px !important; }
	#ux-bar { display: none; }
	.launcher { display: none; }
	#sx-masthead { height: auto; }
	#sx-avatar { margin-bottom: 0; }

	.custom-menu-sx-tnv { width: 100%; }
	#sx-content { width: 100%; }
	.sx-co { padding: 0; }
	.columns-beta .column-alpha .column-inner {  }

	#sx-extras .footer-image { display: none; }
	#sx-extras .footer .footer-info { width: auto; padding: 0 5%; }
	#sx-extras .footer .footer-info-inner { padding: 0; }
	#sx-extras .footer .footer-contact { width: 60%; }
	#sx-extras .footer .footer-links { width: 35%; }
	#sx-extras .footer-red-links { padding: 0 5%; }
	#sx-extras .footer-red-links > div { width: 50%; }
}


/* mobile - landscape */
@media screen and (max-width: 767px) {
	#announcement { position: relative; left: auto; width: auto; }
	#announcement-alert { position: static; background: #a83434 url("/easysiteweb/easysite/styledata/BarrowBc_Master/img/alert.png") no-repeat scroll center center; display: block; margin: 0 20px 0 0; width: 100%; text-align: center; float: none; }
	#announcement-inner { display: inline-block; padding: 0; left: auto; margin: 25px; }
	#alert-text { margin: 0; padding: 25px; }

	#top-section-inner { padding-top: 20px !important; }
	#top-section-inner h1 { font-size: 2em; }

	.column-outer { float: none !important; width: 100% !important; }
	.column-inner { margin: 0 !important; }

	.sx-bdi { padding: 50px 0; }
	.sx-mi { text-align: center; margin-left: 60px; height: 80px; }
	.sx-co { padding: 0 15px; }

	#sx-bct { padding: 15px 20px 25px 20px; }
	#sx-masthead { background: #42a593; }
	#sx-avatar { display: inline-block; margin: 10px auto; float: none; }
	#sx-avatar img.desktop { display: none; }
	#sx-avatar img.mobile { display: block; }

	#sx-search-anchor { margin: 0 15px; }
	#sx-search { right: auto; left: 0; height: 50px; width: 60px; top: 15px;
		-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
		   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
			 -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
				transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */

		-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
		   -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
			 -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
				transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
	}

	#sx-search.open { width: 100%; }
	#sx-search .search-left { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; }
	#sx-search.open .search-left { width: 70%; }
	#sx-search .button { background-size: 65%; height: 55px; }
	#sx-search fieldset .buttons { width: 60px; }
	#sx-search .textbox { height: 55px; line-height: 55px; }
	#sx-search .search-clear { height: 50px; line-height: 50px; }


	#sx-extras .footer .footer-image { display: none; }
	#sx-extras .footer .footer-info { width: auto; }
	#sx-extras .footer .footer-info-inner { width: auto; padding: 0; }
	#sx-extras .footer .footer-contact { float: none; width: auto; float: none; }
	#sx-extras .footer .footer-links { width: auto; }
	#sx-extras .sx-ei { width: auto; padding: 0 20px; }
	#sx-extras .footer-red-links div { width: auto; float: none; }



   /* expand both columns */
	.blogs .element-column-left-alpha-outer, .blogs .element-column-right-alpha-outer { width: 100% !important; float: none !important; clear: both; }
	.blogs .oBlogPost { width: 100%; }

}

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

#-ux-content .events .date-range .element { width: 99%; float: none; clear: both; }

}

@media screen and (max-width: 480px) {
	#announcement-inner { margin: 25px 5px; }
	#alert-text { padding: 10px; }
}

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



	/* Asset manager */
	/* Depending how many columns are shown, asset manager is never going to look great at less than 600px width. Might need to think about other layout solutions/markup changes. One to look at in future. */

	/* expand columns
	.columns-omega .column-outer { width: 100% !important; clear: both !important; float: none !important; } */

	/* expand columns to 100% */
}