/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */



/* COLORS:

	Main Blue: #001c36 1,42,92
	Orange: #f35e1c 243,94,28
	Yellow: #F7B515 #f7b515(247,181,21,1)
	Magenta: #e30050 227,0,80
	Green: #99c331 153,195,49
	Cyan: #00b9ef 0,185,239




VOICE : body5class
SUPPORT : body6class
DEVELOPMENT: body7class
STRENGTH: body8class


*/


/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */

  a:link {color: rgb(1,42,92);}
  a:visited { color:  rgb(1,42,92);}
  a:hover {text-decoration: none; color: rgba(0,185,239,1);}
  a:active { color:  rgb(1,42,92);}


  a.signUpButton {display: block; color: #fff; background: rgb(1,42,92); text-align: center; padding: 15px; font-size: 2em;}
  #alertPlaceholder {position: fixed; top: 20px; left: 2.5%; width: 95%; z-index: 9000;}
  #alertPlaceholder .alert {position: relative;}
.btn-default {background: #002249; text-transform: uppercase; padding: 15px; color: rgba(255,255,255,1)}
.btn-default:hover {background: #00adea; padding: 15px; color: rgba(255,255,255,1)}

.catGridItem {aspect-ratio: 1/1; display: flex; align-items: center; text-align: center; justify-content: center; background-image: url("categoryBG.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover; padding: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); margin-bottom: 20px; cursor: pointer; text-transform: uppercase; font-weight: 800 !important; color: rgba(255,255,255,1); font-size: 1.2em; transition: all ease 0.2s; }
.catGridItem h3 {font-weight: bold; text-transform: uppercase}
.newsCategoryContainer {padding-top: 0px; padding-bottom: 100px; margin-bottom: 100px; display: block; min-height: 40vh}
.imageGrid, aside {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-template-rows: repeat(3,90px);
  grid-gap: 30px; align-items: stretch;}
.imageGrid a, aside p {padding: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);display: flex; text-align: center;
  align-items: center;}
.imageGrid a img {
height: 60px !important;
width: auto !important;
max-width: 100%; align-items: center;
}


.body84class .imageGrid  {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: repeat(2,200px);
  grid-gap: 30px; align-items: stretch;}
.body84class .imageGrid a {padding: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);display: flex; text-align: center;
  align-items: center;}
.body84class .imageGrid a img {
height: 180px !important;
width: auto !important;
max-width: 100%; align-items: center;
}

.pdfGrid {display: grid;grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-rows: repeat(3,auto);
  grid-gap: 30px; align-items: stretch; margin-top: 10px; margin-bottom: 10px;}

  .pdfGrid figure {padding: 10px; box-shadow: 0px 0px 8px rgba(0,0,0,0.2)}
    .pdfGrid figcaption {background: #002b5c; color: #fff; padding: 5px; text-align: center}
        .pdfGrid figcaption a{background: #002b5c; color: #fff !important}
		.pdfGrid figure:hover {box-shadow: 0px 0px 18px rgba(0,0,0,0.3)}
h1 {margin-bottom: 30px;}
blockquote {background: rgb(245,245,245); padding: 50px 20px; border-left: none; border-top: 1px solid rgb(227,0,80);   margin-bottom: 1px; font-size: 30px; font-size: 3rem; font-family: "futura-pt"; font-weight: 300;  }

body { font-family: "futura-pt", Verdana, Arial, sans-serif; fill: currentColor; font-size:1.6em; color: rgba(0,28,54,1); padding-top: 100px;} /* FIXED HEADER HEIGHT */

.body5class h1, .body6class h1, .body7class h1, .body8class h1 {text-transform: uppercase; border-bottom: 4px solid rgb(1,42,92);}


.form-control {border-radius: 0px;}


.iconCol span {display: inline-block; padding: 3px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid transparent; vertical-align: middle; margin-top: 10px;}

.body5class .iconCol span {background: rgba(0,185,239,1);}
.body6class .iconCol span {background: rgba(153,195,49,1);}
.body7class .iconCol span {background: rgba(247,181,21,1);}
.body8class .iconCol span {background: rgba(227,0,80,1);}
.body84class .iconCol span {background: rgba(206, 241, 248, 1);}


.iconCol span .svg {fill: #fff; width: 80%; height: 80%; margin: 10%;}

.body1class {padding-top: 0px !important}


.body1class .breadcrumb {display: none;}
.breadcrumb { margin-bottom: 30px; text-transform: capitalize}
	.breadcrumb a:link, .breadcrumb a:visited {color: #337ab7}
	.breadcrumb a:hover {text-decoration: none; color: rgba(0,185,239,1);}
p {font-size: 17px; font-size: 1.7rem; line-height: 150%;}


/* DECLARATIONS FOR FONTS - WANT TO USE THIS FONT, ADD IN THE CLASS */
h1,h2,h3 .cycle-slideshow .Desc, .strike, thead td {font-family: "futura-pt" !important; font-weight: 500;} /* strong, b */



/* FP Category News/Tweet Containers */
.catContainer {margin-bottom: 0px;}
.catContainer .story h1 {font-size: 26px; font-size: 2.6rem; margin-top: 0px; margin-bottom: 30px; text-transform: capitalize;}
.catContainer .story strong, .catContainer .story .intro {font-weight: 300;}
.catContainer .story figcaption {display: none;}
.catContainer figure {padding-right: -0px;}
	.catContainer .textCol {padding-top: 15px; padding-bottom: 15px;}
	.catContainer .readMoreLink {text-transform: uppercase; padding-top: 10px; border-top: 1px solid rgb(1,42,92); margin-top: 20px; display: inline-block;}
	a.readMoreLink {color: rgb(1,42,92);}


	.newsFrontPage figure {position: relative; background: rgba(0,47,95,0.1);  margin-bottom: 30px; box-shadow: 0px 0px 20px rgba(0,0,0,0.1); cursor: pointer;}
	.newsFrontPage figure * {transition: 0.5s all ease-in-out;}
	.newsFrontPage figcaption {padding: 15px; min-height: 190px;}
	.newsFrontPage figure {
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
		transition: 0.5s all ease-in-out;
    }
       
    .newsFrontPage figure img {
        width: 100%;     
		aspect-ratio: 16/9;
		object-fit: cover;
    }
	.newsFrontPage figure:hover  img {transform: scale(1.05);}
	.newsFrontPage figure:hover {transition: 0.5s all ease-in-out;position: relative; background: rgba(0,47,95,0.05);  box-shadow: 0px 0px 30px rgba(0,0,0,0.3); cursor: pointer;}
	
.date {margin-bottom: 20px; padding-left: 20px; border-left: 1px solid rgb(230,230,230)}

.voiceContainer .story, .voiceContainer .catTagList {background: rgba(180,180,180,0.1)}
	.catTagList { font-size: 12px; font-size: 1.2rem; padding: 5px;margin-top: 5px;}
.voiceContainer .textCol a {color: rgba(243,94,28,1)}

.developmentContainer .textCol a {color: rgba(247,181,21,1)}

.developmentContainer .story, .developmentContainer .catTagList {background: rgba(180,180,180,0.1)}


.supportContainer .story, .supportContainer .catTagList {background: rgba(180,180,180,0.1)}

.strengthContainer .story, .strengthContainer .catTagList { background: rgba(180,180,180,0.1)}




.CatNav {text-align: right;  font-size: 1.2em; width: 100%; margin-bottom: 15px; }



.CatNav a, .nav a {font-style: normal; background: none !important; margin-bottom: 15px;}
.CatNav a:link {color: #fff}
.CatNav a:visited {color: #fff}
.CatNav a:hover {color: #fff}
.CatNav a:active {color: #fff}

.ContactDetails h1, .ContactForm h1 {font-size: 1.75em;}
	.ContactForm label, #questionForm label {display: block;}
	.ContactForm div, #questionForm div {margin-bottom: 10px;}
	input[type='text'], input[type='tel'], input[type='email'], input[type='password'], textarea {border: 1px solid #888; padding: 5px;}
	.notEmail {display: none !important;}


.currentTagSpan {padding: 5px; font-size: 0.875em;}
.currentTagSpan a {border: none !important; text-transform: lowercase !important;}


.topicContainer {padding: 0px;}
.pillars {padding-top: 10px !important; padding-bottom: 30px; background-color: rgba(3,42,91,0.1);}
/* GRID */

.gridItem { margin: 0px; height: 170px; line-height: 150px; text-align: center; cursor: pointer; color: #fff !important;}



form.employersCharter { padding: 30px; background-color: #002c5c; color: #fff;}
/* GRID BACKGROUNDS "","","","","","","","","","black","magenta","navy","lime","skyblue","yellow" */

.gridItem[data-gridcolor="295navy"] {background: rgb(0,47,95);}
.gridItem[data-gridcolor="382lime"] {background: rgb(190,214,0);}
.gridItem[data-gridcolor="306blue"] {background: rgb(0,186,228);}
.gridItem[data-gridcolor="206magenta"] {background: rgb(203,0,68);}
.gridItem[data-gridcolor="130yellow"] {background: rgb(240,171,80);}
.gridItem[data-gridcolor="158orange"] {background: rgb(277,114,834);}
.gridItem[data-gridcolor="254purple"] {background: rgb(149,45,152);}
.gridItem[data-gridcolor="3282teal"] {background: rgb(0,135,124);}
.gridItem[data-gridcolor="225pink"] {background: rgb(224,36,154);}

.gridItem[data-gridcolor="black"] {background: #000;}
.gridItem[data-gridcolor="magenta"] {background: #E30B50;}
.gridItem[data-gridcolor="navy"] {background: #032A5C;}
.gridItem[data-gridcolor="lime"] {background: #99C331;}
.gridItem[data-gridcolor="skyblue"] {background: #29B9EF;}
.gridItem[data-gridcolor="yellow"] {background: #F7B517;}

.gridContainer:before,  .gridContainer:after {content: " "; clear: both; }
.gridContainer > div {width: calc( 50%); float: left;}
.gridContainer .gridContent {display: none;}
.gridItem .logoContain {width: 100%; height: 100%; float: left; padding: 0px 15px; box-sizing: padding-box; vertical-align: middle; position: relative}
	.gridItem .logoContain img {max-height: 50%; }
	
	.gridTitle {color: rgb(255,255,255); line-height: 100% !important; margin-top: -20px; }
	
#map_canvas {height: 350px;}


.memberQuote {display: block; width: 100%; margin: 20px auto; }
	.memberQuote figcaption {margin-left: 5%; margin-right: 5%; margin-top: 25px; padding-bottom: 25px; font-size: 0.875em;}
	.body5class figcaption {color: rgb(0,185,239);}
	.body6class figcaption {color: rgb(153,195,49);}
	.body7class figcaption {color: rgb(243,94,28);}
	.body8class figcaption {color: rgb(227,0,80);}


.processingMessage {display: block; padding: 10px; padding-left: 80px; }

#simplemodal-container a.modalCloseImg {
	background:url(x.png) no-repeat; /* adjust url as required */
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
}
#simplemodal-overlay {background-color:#000;}
#simplemodal-container {background-image:  url("loading.gif"); background-repeat: no-repeat; background-position: 20px center; background-color:#e3e3d4; border:8px solid #444; padding:12px; width: 80%; min-height: 200px;}

#questionForm input[type="text"], #questionForm input[type="email"], #questionForm input[type="tel"], #questionForm textarea {width: 100%;}

@-webkit-keyframes errordisplay {
  0% {

   background: #d30000;
  }
  100% {
	  background: #fb1212;
    }
}

@keyframes errordisplay {
  0% {
    background: #d30000;
  }
  100% {
	  background: #fb1212;
    }
}


.error {background: #d30000; color: #fff; -webkit-animation: errordisplay 2s ease  alternate 5; animation: errordisplay 2s ease alternate 5; padding: 5px; font-weight:100; text-align: center;}
.fpNewsContainer .story {padding: 10px; background: rgb(251,250,237); margin-top: 30px; }
	.fpNewsContainer .story h1 {font-size: 1.5em;color: rgb(80,80,80);}
	.fpNewsContainer .intro p{font-size: 0.875em;}
	.fpNewsContainer figure {position: relative;  margin-top: 30px;}

#apps img {clear: both !important; display: block; margin-bottom: 15px; max-width: 100px !important; margin-right: 0px !important; }
#apps img:last-child {margin-left: 0px !important;}
.dataTables_info {float: left !important; text-align: center; width: 100%; margin-bottom: 20px; font-size: 12px; font-size: 1.2rem;}
.fileStoreTable tr {border-bottom: 1px dashed #fff;}
.fileStoreTable td, .fileStoreTable th {padding: 15px; vertical-align: top;  font-size: 14px; font-size: 1.4rem;}
.fileStoreTable p {font-size: 14px; font-size: 1.4rem;}
.fileStoreTable thead {color: #fff; background: rgba(0,185,239,1)}
.fileStoreTable h2 {margin-top: 0px; font-size: 24px; font-size: 2.4rem;}
.dataTables_length {float: left;}
.fileType, .fileSize {display: inline; font-size: 14px; font-size: 1.4rem; margin-top: 10px;}
	.fileStoreTable a {text-transform: uppercase; padding-top: 10px; border-top: 1px solid #001c36; margin-top: 10px; display: inline-block;color: #001c36; clear: both;}
	.fileStoreTable .odd {background: rgba(0,185,239,0.25)}
	.fileStoreTable .even {background: rgba(0,185,239,0.1)}
.dataTables_info {float: right;}
ul.pagination  * { border-radius: 0px !important; box-shadow: none; }
div.dataTables_paginate {text-align: center; font-size: 14px; font-size: 1.4rem; clear: both;}
.dataTables_paginate a {color: #444 !important;}
.paginate_button.active a, .paginate_button.active a:hover {color: #fff !important; background: rgb(1,42,92); border: 1px solid rgb(1,42,92)}
.paginate_button_disabled {opacity: 0.4; -moz-opacity: 0.4;}
.paging_full_numbers {color: #257f5b;}
.dataTables_wrapper {margin-top: 0px}




.fpImages {position: relative; top: 0px; left: 0px;}

#fpImageDiv {position: relative;}
#fadeNav {position: absolute; bottom: 0px; left: 0px; width: 95%;color: rgb(255,255,255); z-index: 900; text-align: right;}
	#fadeNav span { font-size: 1.75em; margin: 2px; cursor: pointer; color: rgb(255,255,255);}

	.cycle-pager-active {color:  rgb(0,185,239) !important;}
	.cycle-slideshow {position: relative; height: 350px;}
		.cycle-slideshow > div {background-size: cover;height: 350px; width: 100%; background-position: top center;}
			.cycle-slideshow > div img {display: none;}
		.cycle-slideshow .heading, .cycle-slideshow .summary {display: none;}
		.cycle-slideshow .Desc, .HUPOTYBanner .strapline {position: absolute; bottom: 0px; width: 70%;}
		.cycle-slideshow .Desc a {color: rgb(255,255,255) !important;}
			.cycle-slideshow .Desc p, .HUPOTYBanner .strapline {margin-top: 0px; margin-left: 20px; font-size: 1.6em; padding: 10px; color: rgb(255,255,255); font-weight: 500; font-family: "futura-pt" !important; width: 100%; line-height: 1em; text-shadow: 0px 0px 2px rgba(0,0,0,0.6);}


#JudgeCategorySelect {max-width: 100%;}
.entryContent .entry { padding: 15px;}
.entryContent .entry h4 {line-height: 160%; font-size:1em;}
h1 {text-transform: capitalize;}






.relatedContent .story {border-top: 1px solid rgb(240,240,240); margin-top: 20px;}
.relatedContent .story:last-child {border-right: none;}
.relatedContent .story h3 {
	font-size: 1em;
	margin-top: 20px;
}

.relatedContent .newsdate {
	font-size: 0.875em;
	display: none;
}
.relatedContent .story p {margin-bottom: 5px; font-size: 0.8em;}
.relatedContent .story strong {font-weight: 100;}
.relatedContent .button {padding: 0; margin-top: 10px; display: inline-block; padding-top: 10px;}

.searchBox {display: inline-block; margin-right: 10px;}
.searchBox img {margin: auto; height: 22px !important; width: auto !important;}
.gsc-table-cell-thumbnail, .gs-promotion-image-cell {padding: 0px 10px !important;}
.cse .gsc-control-cse, .gsc-control-cse {padding: 0px !important;}
.gsc-table-result {margin-bottom: 15px; line-height: 160%;}
.gsc-input {padding: 5px;}
.gs-image img {margin-right: 15px;}

#SignUpForm div {margin-bottom: 10px;}

#SignUpForm label {display: block;}

/* Headers */
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    margin: 50px 15px 30px 15px;
    clear: both;
}

.strike > span {
    position: relative;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
    letter-spacing: 0.01em;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: #0d004c;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

svg {
  fill: currentColor;
}



/* BASIC RESPONSIVE TABLE STYLING */
.respTable {width: 100% !important;}
.respTable thead td {font-size: 1.125em;}

.respTable td {padding:10px 0px; border-bottom: 1px dashed #efefef; font-size: 1em;}
	.respTable td:nth-child(1) {width:  20%; padding-right: 30px;}
	.fileStoreTable.respTable td:nth-child(1)  {width: auto !important; padding: 15px;}
	.respTable td img {max-width: 100%; }
	.respTable td p{font-size: 0.875em;}



.videoItem {margin-bottom: 15px;}
.videoItem p {padding: 15px 0px; font-size: 1.4rem;}

.videoWrapper {
	display: block;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.month li {display: none;}
.month li.monthName, .month li.yearName {display: block;}

/* , .year li */


/* NEWS TEMPLATE */
.newsFrontPage {margin-top: 0px;}
#loadMore {display: block; background: rgb(1,42,92); color: #fff; text-align: center; text-transform: uppercase; padding: 15px; margin: 20px auto; clear: both; cursor: pointer;}
.templateNews blockquote {margin-bottom: 30px; margin-top: 30px;margin-left: 30px; margin-right: 30px; background: rgba(224, 235, 242, 0.2); text-align: justify;}
.templateNews blockquote * {font-size: 18px; font-size: 1.8rem; line-height: 160%; }
.templateNews figcaption p {font-size: 0.875em; padding-top: 0px; margin-bottom: 5px;}
h3 {font-weight: 100; line-height: 140%;}

.icon-bar {background: rgba(255,255,255,1); }
img {max-width: 100%; height: auto !important;}

.navbar-toggle {padding: 0px;}
.sBoxMobile {  position: absolute; top: 0px;right: 70px; z-index: 900;}
	.sBoxMobile img {height: 20px !important;}
.mobileToggle {z-index: 900; display: block; }

#logo {vertical-align: middle; }
	#logo img, #t100logo img {width: 90px; height: auto; margin: 15px;vertical-align: middle; cursor: pointer;}


#topBanner {background-color: rgba(0,28,54,1);}
.CatNav {margin-bottom: 15px;}
#topNavBar {margin-top: 15px;}

.closeToggle {display: none;}
#topMenu[aria-expanded="true"] {background-image: url("menuBG.png"); background-repeat: no-repeat; background-position: bottom center; background-size: contain;}
#topMenu[aria-expanded="true"] .closeToggle{display: block; position: absolute; top: 10px; right: 25px; width: 30px; height: 30px;}
#topMenu[aria-expanded="true"] {position: fixed; display: block; top: 0px; left: 0px; width: 100vw; height: 100vh; height: calc(100vh - env(safe-area-inset-bottom)); max-height: none !important;background-color: #000; padding: 15px;}
#topMenu[aria-expanded="true"] * {text-align: left !important}
#topMenu[aria-expanded="true"] .navbar-nav {margin-left: 15px; margin-right: 15px; font-size: 1.6em;}
#topMenu[aria-expanded="true"] .CatNav {margin-top: 50px;}
.body1class #topBanner {background-color: rgba(0,28,54,0);}
#topBanner * {transition: all ease 0.1s;}
body[data-itemid="1"] #topBanner.scroll{background-color: rgba(0,28,54,1) !important;}
#topBanner.scroll img[alt="logo"] {transform: scale(0.9);}
#topBanner.scroll .CatNav a {font-size: 0.9em;}

#topBanner.scroll #topNavBar {margin-top: 0px;}
#topBanner.scroll #topNavBar .vtopNav {margin-top: 15px;}
#mainContentWide, #mainContent { margin-bottom: 30px;}
.body1class #mainContentWide {margin-bottom: 0px;}

.fpNewsContainer {margin-bottom: 30px;}
footer {background: rgba(0,28,54,1); color: rgb(255,255,255); padding: 20px 0px;}
.relatedContent {margin-bottom: 30px;}

.body1class .relatedContent {margin-bottom: 0px;}
/* FRONT PAGE BUTTONS */
a.buttonWrap {font-style: normal; margin: 0; padding: 0;}
a:link.buttonWrap {color: rgb(0,0,0)}

a:hover.buttonWrap {color: rgb(255,255,255)}

a:hover.buttonWrap > div {-webkit-box-shadow:  inset 0px 0px 100px 0px rgba(0,0,0,0.2); box-shadow:  inset 0px 0px 100px 0px rgba(0,0,0,0.1);}


/* BUTTONS */
.voiceButton, .supportButton, .developmentButton, .strengthButton, .saveButton {
	overflow: hidden;
	height: 195px;
	position: relative;
	color: #fff;
	background: rgb(1,42,92);
	margin-top: 5px;
	margin-right: 5px;
	border-top: 2px solid transparent;
}
.yofdButton {
	overflow: hidden;
	height: 195px;
	position: relative;
	color: #fff;
	background: rgb(153,195,49);
	margin-top: 5px;
	margin-right: 5px;
	border-top: 2px solid transparent;
}

.potyButton {
		height: 115px;
		overflow: hidden;
	background: rgb(0,0,0);
	overflow: hidden !important;
	margin-top: 5px; margin-right: 0px;
		border-top: 2px solid transparent;
		margin-left: 5px;
	position: relative;
	top: 0px;
	display: table;
	border-collapse: collapse;
	vertical-align: middle;
	width: calc(100% - 10px);


}

.potyButton.rightButton {width: calc( 100% - 10px); margin-left: 5px;}

	.cell {display: table-cell; vertical-align: middle; padding: 10px; text-align: left; }
	.imgContain.cell {overflow: hidden}

.iconCol span .svg {fill: #fff; width: 80%; height: 80%; margin: 10%;}

	.yofdButton svg {fill: rgba(255,255,255,0.15); }


.potyButton h1 {
	font-size: 3em; z-index: 2; text-align: center; width: 100%; position: relative; top: 0px; margin-top: 20px; margin-bottom: 10px;
}

.voiceButton h3, .supportButton h3, .developmentButton h3, .strengthButton h3, .yofdButton h3, .potyButton h3 {
	position: relative; top: 0px; left: 30px; text-align: left; width: calc( 100% - 60px ); z-index: 2; font-family: "Didot W01 Italic"; font-size: 1.15em; color: #fff; padding-right: 15px;
}
.potyButton h3 {text-align: left; left: 0px !important; width: 100% !important; margin-top: 0px !important}
.voiceButton h1  {
	color: rgb(0,185,239);
}

	.potyButton h3 { position: relative; top: auto; font-size: 1.5em; vertical-align: middle;}
	.bannerSvgContain { position: relative; vertical-align: middle; padding-left: 20px;}


.voiceButton, .developmentButton, .yofdButton, .potyButton {margin-left: 5px;}
.supportButton, .strengthButton {margin-left: 5px;}

.voiceButton svg, .supportButton svg, .developmentButton svg, .strengthButton svg, .yofdButton svg, .potyButton svg {
	position: relative;
	max-height: 90%; width: auto; max-width: 90%;
	fill: rgba(255,255,255,1);
	vertical-align: middle;
	}
.svgContain {position: absolute; top: 15px; left: 0px;  left: 30px; z-index: 4; display: inline-block; padding: 3px; width: 50px; height: 50px; border-radius: 50%; border: 1px solid transparent; vertical-align: middle; margin-top: 10px; padding: 15px; display: none;}

.svgContain {background: rgba(0,185,239,1);}

.voiceButton h1, .supportButton h1, .developmentButton h1, .strengthButton h1 {
		font-family: "futura-pt"; font-weight: 500;
		text-transform: uppercase;
		left: 30px;
		right: 30px;
		width: calc( 100% - 250px );
		border-bottom-width: 4px;
		border-bottom-style: solid;
	font-size: 3em; z-index: 2; text-align: left; position: relative; top: 20px;
}

.yofdButton h1 {color: rgb(1,42,92); border-bottom-color: rgb(1,42,92);}

.voiceButton:hover {border-top: 2px solid rgb(0,185,239); }
.voiceButton span {background: rgba(0,185,239,1);}

.potyButton h1 {color: rgb(255,188,1); text-transform: none;}
	.potyButton h1 span {color: rgb(255,255,255); font-style: italic; font-family: "Didot W01 Italic";}
	.potyButton:hover {border-top: 2px solid rgb(255,188,1); }


.supportButton h1 {
	color: rgb(153,195,49); border-bottom-color: rgb(153,195,49);
}

.supportButton:hover {border-top: 2px solid rgb(153,195,49); }

.supportButton span {background: rgba(153,195,49,1);}


.developmentButton h1{
	color: rgb(247,181,21); border-bottom-color: rgb(247,181,21);
}

.developmentButton  span {background: rgba(247,181,21,1); padding-top: 40px;}

.developmentButton:hover {border-top: 2px solid rgb(247,181,21); }


.strengthButton h1{
	color: rgb(227,0,80); border-bottom-color: rgb(227,0,80);
}

.strengthButton:hover {border-top: 2px solid rgb(227,0,80); }

.strengthButton span {background: rgba(227,0,80,1);}

.latestNewsContainer .intro p {
	font-size: 21px; font-size: 2.1rem;
}


#entryForm .row, .entry {clear: both; margin-top: 15px; padding: 5px; background: #ecf2ec; position: relative}
	.entry h4 { font-weight: bold;}
	.entry pre {font-family: Georgia, serif; border: none; width: 100%; height: auto;}
	.entry a {margin-top: 20px; display: inline-block; zoom: 1;padding: 5px; background: #c4b1ba; border: 1px solid #9f8b96; color: #ffffff}
	.entry #answer1Text, .entry #answer2Text, .entry #answer3Text, .entry #answer4Text, .entry #testimonialText {background: #fff; padding: 20px; line-height: 140%; margin-top: 20px; font-size: 1.125em; font-family: arial, sans-serif; }
	#entryForm .row label {font-weight: bold; font-size: 16px; display: block; margin-bottom:15px;}
	#entryForm textarea {width: 100%;
		height: 300px;
	}

	.getEntry {cursor: pointer; margin-top: 10px; padding: 10px; border-top: 1px dashed #eee; list-style-type: none; margin-left: 0;}
	.getEntry:first-child {border-top: none;}
	.getEntry.selected, .getEntry:hover {font-weight: bold; font-style: italic; color: #000; background: #efefef;}

#logInForm {background-color: rgba(247,181,21,0.95); border-color:rgba(247,181,21,1); height: 100%; padding: 20px; z-index: 1040;; padding-top: 80px;}
#logInForm header {background-color: rgba(234, 169, 15, 1);position: absolute; top: 0px; left: 0px; width: 100%;border-bottom: 1px solid rgba(247,181,21,1);}
	#logInForm form {padding: 10px; background: rgba(255,255,255,0.4); font-weight: 100;}
	#logInForm label {display: block;}
		#logInForm input[type='text'],#logInForm input[type='password'] {-webkit-appearance: none; border: none; background: #fff; padding: 5px; margin-bottom: 10px; }
		#logInForm h2 {margin-top: 8px; margin-left: 10px; color: rgb(255,255,255)}
#logInForm p {font-size: 0.9em; margin-top: 10px;}
		.close {color: #fff !important; position: absolute; top: 15px; right: 10px; z-index: 1010; opacity:1 ;}
		.close svg {width: 24px; height: 24px; }

.memberLoginForm, #enterLogInForm {margin: 20px; padding: 10px; background: rgba(247,181,21,0.1); border: 1px solid rgba(247,181,21,0.2) }
	#enterLogInForm {margin: 0; background: rgba(175, 195, 54, 1); border: none; }
		#enterLogInForm header {background-color: rgba(175, 195, 54, 1);position: absolute; top: 0px; left: 0px; width: 100%; color: #fff; padding-left: 10px;}
	.memberLoginForm input[type='text'], .memberLoginForm input[type='password']  {display: block; margin-bottom: 20px;}

	.logInEntries {cursor: pointer; font-weight: bold; font-size: 1.25em;}
	#logInForm input[type='submit'], a.button, .memberLoginForm input[type='submit']  {-webkit-appearance: none; border: none; background: #fff; padding: 5px 10px; margin-top: 10px; }

.latestNewsContainer .story h1 {font-size: 28px; font-size: 2.8rem;}
#categorySelect {margin-bottom: 40px; margin-top: 20px; }
#homeEditable {margin-top: 40px;}


.month h3, .year h3 {font-size: 1.2em;}

/* SOCIAL LINKS */
.socialFooter {background: rgb(0,44,92); margin-top: 40px; color: #fff;}
#socialShareLinks {text-align: center;}
#socialShareLinks .svg {width: 48px; height: 48px; margin: 4%; fill: rgb(255,255,255);}
#socialShareLinks img {margin: 4%; margin-top: 30px;}
	#socialShareLinks .fb .svg:hover {fill: rgb(59, 89, 152);}

	#socialShareLinks .twitter .svg:hover  {fill: rgb(0, 172, 237);}
	#socialShareLinks .google .svg:hover  {fill: rgb(221, 75, 57);}
	#socialShareLinks .linkedIn .svg:hover  {fill: rgb(0, 123, 182);}

.suppliers {text-align: center;}
.suppliers img {margin: 10px 0px}

.templateNews figure {display: block; margin-bottom: 30px;}

.well {background: none; padding: 0; border: none; padding-top: 15px; box-shadow: none;}


.subMenuBar {position: relative; background: rgb(0,44,92); height: 50px;}
/* #subMenu {background: rgba(255,255,255,0.6);} */
#subMenu ul {list-style-type: none; margin-left: 0px; padding-left: 0;}

#subMenu li {margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px dashed #efefef}
	#subMenu li.selected a {color: #337ab7 !important;}
	#subMenu .level2 {font-family: "futura-pt" !important;  font-size: 2.6rem;}
		#subMenu .level2 a:hover {background: rgb(1,42,92); color: rgb(255,255,255) !important;}

#subMenu .month, #subMenu  .year {cursor: pointer;}
/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */




/* YEAR OF FOOD AND DRINK */
.body40class > #mainContent {background-image: url("banner_yofd.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position:  0px 50px; }
	.body40class > #mainContent .col-md-8 {padding-top: 100px;}
	.body40class figure {margin-bottom: 40px; text-align: center; padding: 1%; border: 1px solid rgba(80,80,80,0.1); box-shadow: 0px 0px 18px rgba(0,0,0,0.3); cursor: pointer; border-radius: 4px;}
	.body40class img {max-height: 110px; max-width: auto; width: auto; margin: auto;}
	.body40class figure figcaption {padding: 10px; font-weight: bold; display: block !important; }
	.body40class figure figcaption h2 {font-size: 1.25em; }



/* PETITION OF CONCERN */
/* .body45class > #mainContent {background-image: url("POC_BG.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position:  0px 50px; } */
	.body45class > #mainContent .col-md-8 {padding-top: 100px;}
	.pledgeRow header {padding: 20px; display: block; font-size: 3em; line-height: 80px; text-align: center; color: rgb(255,255,255)}
			.pledgeRow .yes {background: rgb(0,100,22)}
				.yesRow {background: rgba(0,100,22,0.1)}
				.pledgeContainer {display: none; clear: both; margin-top: 10px;}

			.pledgeRow .nope {background: rgb(200,0,23)}
				.noRow {background: rgba(200,0,23,0.1)}

			.pledgeRow img {border-radius: 5%; margin-bottom: 10px;}
			.whoToEmail {font-size: 0.75em; display: block; clear: both;}
			.modal-body > p{display: none;}

				.whoToEmail img {margin-bottom: 5px !important;}
				.whoToEmail > div {margin-bottom: 15px; text-align: center;}
.body45class #subMenu {background: rgba(255,255,255,0.6);}
.body45class #subMenu li {margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed #efefef}
	.body45class #subMenu li a {color: #000 !important;}

	.body45class #subMenu li.selected a {color: #ba0416 !important;}
		.body45class #subMenu .level2 a:hover {background: #ba0416; color: rgb(255,255,255) !important;}
/* .body45class .btn {background: #ba0416; color: #fff;}
.body45class .btn:hover {background: #000;} */

.contactYourMEP {padding: 0px; border: 1px solid #fff; box-shadow: 0px 0px 15px rgba(0,0,0,0.4)}
	.contactYourMEP  header {background: rgb(0,0,0); color: rgb(255,255,255); padding: 15px; }
	.contactYourMEP  header h1 {margin-top: 0px; margin-bottom: 5px;}
	.contactYourMEP  header h2 {margin: 0;}
	#findConstituency {padding: 30px 15px; text-align: center;}
	.whoToEmail img {display: inline-block; margin: 0px 15px 15px 0px; width: 50px; height: auto;}

	figure.MEP {margin: 10px 0px 0px 0px; font-size: 0.7em; min-height: 240px; text-align: center;}


.emailContainer, .emailResponseContainer {
	display: none;
	padding: 15px;
}
	.emailContainer textarea {resize: none; width: 100%; min-height: 450px;}
	.emailContainer .row label {width: 30%;}
	.emailContainer .row input {width: 65%;}
	.emailContainer .row {margin-bottom: 15px;}

/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: 2px;
	margin-top: 5px;
}
#silverinkWebDesign 	a {
	color: #888;
}
.row {
  margin-left: 0px;
  margin-right: 0px;
}

#topNavBar {
	vertical-align: middle;
}

.templateMapSearch #topNavBar {
	background: rgb(0,0,0);
	display: none;
}

.templateMapSearch #apps {display: none;}

.loc-name {font-weight: bold;}

	#topNavBar a {color: rgb(255,255,255); padding: 15px 5px; text-transform: capitalize;}
	#topNavBar a:hover, #topNavBar a:active {background: none;}
.userDetails {color: #fff; fill: currentColor;vertical-align: middle; font-size: 1em;  cursor: pointer; display: inline-block; margin-right: 10px;}
.userIcon { display: inline; padding: 5px; width: 30px; height: 30px;  vertical-align: middle;}
.username {margin-left: 10px;}


/* TOP100 LOCATION SEARCH */
.bh-sl-filters.features {display: block !important; float: none; width: 100%;}
.bh-sl-loc-list {clear: both;}
	.bh-sl-loc-list li {cursor: pointer;}
.loc-image img {max-width: 100% !important;}
.bh-sl-filters-container {padding: 15px;}
.bh-sl-map-container {margin-top: 10px;}
.bh-sl-filters-container.bh-sl-filters-containerTop {margin-bottom: 0px; height: 40px; padding: 0px !important;}

.bh-sl-map-container .btn-default {padding: 5px; line-height: 23px; background: #000; margin-top: -1px;}

.bh-sl-form-container {padding: 15px;}
.col-form-label {font-size: 1.6rem;}

.list-details {width: 100%; padding: 15px; }
.templateMapSearch #t100logo img {width: 120px; height: auto; vertical-align: middle; cursor: pointer; margin-top: 15px;}
.templateMapSearch .breadcrumb {display: none;}
.templateMapSearch #mainContentWide {background: rgba(0,0,0,0.8); margin-bottom: 0px; padding: 20px 0px;}
.templateMapSearch .socialFooter {margin-top: 0px;}

.bh-sl-user-location .input-group {width: 100%;}
.templateMapSearch .btn-xl {width: 33.333333%; display: block !important; padding: 5px; background-color: #fbb900; font-size: 1.6rem; color: #000;  font-weight: 100; font-family: "futura-pt"; border-right: 1px solid #ad8005; margin-left: 0px !important; transition: all 0.6s ease; line-height: 35px; }
.templateMapSearch .btn-xl:hover, .templateMapSearch .btn-xl.active {box-shadow: 15px 5px 20px rgba(251,186,0,0.2); background-color: #f3cb30; text-decoration: none; }
.templateMapSearch .btn-xl:last-child {border-right:none;}

.templateMapSearch .btn-xl span { margin-left: 5px;}
	.templateMapSearch .btn-xl img {width: 20px;}
.listingContain {background: #fff; box-sizing: padding-box;}
#map-results-container, .bh-sl-map, .listingContain { padding: 0px;}


.bh-sl-map {height: 250px;}
.bh-sl-map {height: 60vh;}

.btn-group {display: block;}


.list-content div {margin-bottom: 10px; text-transform: capitalize;}
.list li:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.2); background-color: #eed453 !important;}

.templateMapSearch .btn-primary {background: black !important; border: none; color: #fff !important;}

/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

RESPONSIVE TABLE
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	.respTable table, .respTable thead, .respTable tbody, .respTable th, .respTable td, .respTable tr {
		display: block;
		height: auto !important;
		width: 100%;
		padding: 10px;
		text-align: center;
		margin-bottom: 10px;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.respTable thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.respTable tr { border: 1px solid #ccc; box-shadow:  0px 0px 6px rgba(80,80,80,0.2)}

	.respTable td {
		/* Behave  like a "row" */
		border: none !important;
		position: relative;
		width: 100% !important;

	}

	.respTable td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	.cycle-slideshow .Desc p, .HUPOTYBanner .strapline  {margin-left: 0px; padding-left: 40px; background: rgba(1,42,92,0.8)}

/* ROGER MAKE FIRST GRID ITEM FULL WIDTH MARCH 2019 */
/* #fpImageDiv+.topicContainer .gridContainer > div:nth-child(1) {width: calc(100% - 10px) !important;} */



}



/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

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

  /* Style adjustments for viewports 480px and over go here */
  .memberQuote  {display: block; clear: both; margin-bottom: 30px; min-height: 230px}
	.memberQuote img {width: 40%; float: left;}
	.memberQuote figcaption {width: 55%; display: inline-block; margin-left: 5%; margin-right: 0px;margin-top: 15px; margin-bottom: 15px; font-size: 0.875em;}

	#socialShareLinks img {margin: 4%; margin-top: -50px;}
/* YEAR OF FOOD AND DRINK */
  	.body40class > #mainContent .col-md-8 {padding-top: 220px;}

.body40class > #mainContent {margin-top: 5px;}
	.body45class > #mainContent .col-md-8 {padding-top: 250px;}
	.cycle-slideshow .Desc p, .HUPOTYBanner .strapline  {margin-left: 0px; padding-left: 40px; background: rgba(1,42,92,0.8)}
.potyButton h3 {font-size: 2em;}


}



















/* 2022 CHANGES */
.staticBanner {object-fit: cover; aspect-ratio: 16 / 9; width: 100%; object-position: bottom right;}
#fpImageDiv:before {content: " "; position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; background: rgb(0,0,0);
	background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0) 100%); z-index: 1000}
	.tMenuContain {margin-top: 15px; text-align: right; text-transform: capitalize}

  

/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
	
	body {padding-top: 140px;} /* FIXED HEADER HEIGHT */
	.CatNav a, .nav a {font-style: normal; background: none !important; padding: 0px 15px !important;}

	#apps img {clear: none !important; display: inline; max-width: 125px !important;}
	#apps img:last-child { margin-left: 15px !important;}
  /* Style adjustments for viewports 768px and over go here */
.potyButton.rightButton {width: calc( 100% - 5px); margin-left: 0px;}
.svgContain {position: absolute; top: 15px; left: 0px;  left: 30px; z-index: 4; display: inline-block; padding: 3px; width: 120px; height: 120px; border-radius: 50%; border: 1px solid transparent; vertical-align: middle; margin-top: 10px; padding: 15px;}

.voiceButton h3, .supportButton h3, .developmentButton h3, .strengthButton h3, .yofdButton h3, .potyButton h3 {
	left: 220px; width: calc(100% - 250px)}
	.voiceButton h1, .supportButton h1, .developmentButton h1, .strengthButton h1 {
	left: 220px; width: calc(100% - 250px)
}

  	.body40class > #mainContent .col-md-8 {padding-top: 220px;}
	.body40class figure {width: 44%; float: left; margin: 2%; }
	.body45class > #mainContent .col-md-8 {padding-top: 350px;}


  #categorySelect {margin-bottom: 40px; margin-top: 0px; }

  .cycle-slideshow {height: 600px;}
	.cycle-slideshow > div {height: 600px;}

	.cycle-slideshow .Desc p, .HUPOTYBanner .strapline  { width: 45%; margin-left: 0px; padding-left: 40px; background: rgba(1,42,92,0.8)}
	.cycle-slideshow .Desc p, .HUPOTYBanner .strapline  {font-size: 2.8em; }



/* GRID */


.gridContainer:before,  .gridContainer:after {content: " "; clear: both; }

.gridContainer .gridContent {display: block; text-align: left; position: relative; left: 10px; float: left; height: 100%; width: calc( 100% - 125px); font-family: "futura-pt" !important; line-height: 140% !important;}
	.gridSummary {display: none; font-weight: bold; position: absolute; bottom: 30px; left: 20px; font-size: 2.1rem; }
	.gridDesc {font-weight: bold;position: absolute; top: 20px; left: 20px; font-size: 3.2rem; line-height: 120%; text-transform: uppercase;}
.gridItem .logoContain {width: 125px; height: 100%; float: left; padding: 0px 10px; box-sizing: padding-box; vertical-align: middle;}
	.gridItem .logoContain img {max-height: 60%;}

.gridContainer > div:nth-child(1) {width: calc( 50% - 10px); float: left; }
/* ROGER MAKE FIRST GRID ITEM FULL WIDTH MARCH 2019 */
/* #fpImageDiv+.topicContainer .gridContainer > div:nth-child(1) {width: calc(100% - 10px) !important;} */
.gridContainer > div:nth-child(2) {width:  calc( 50% - 10px); float: left;}

.gridContainer > div:nth-child(3) {width:  calc( 50% - 10px); float: left;}
.gridContainer > div:nth-child(4) {width: calc( 50% - 10px); float: left; }

.gridContainer > div:nth-child(5) {width: calc( 50% - 10px); float: left; }
.gridContainer > div:nth-child(6) {width:  calc( 50% - 10px); float: left;}

.gridContainer > div:nth-child(7) {width:  calc( 50% - 10px); float: left;}
.gridContainer > div:nth-child(8) {width: calc( 50% - 10px); float: left; }

.gridContainer > div:nth-child(9) {width: calc( 50% - 10px); float: left; }
.gridContainer > div:nth-child(10) {width:  calc( 50% - 10px); float: left;}


/*.gridContainer > div:nth-child(1) .gridDesc {display: none;} */

.gridContainer > div:nth-last-child(4), .gridContainer > div:nth-last-child(3), .gridContainer > div:nth-last-child(2), .gridContainer > div:nth-last-child(1) {width: calc( 50%);}



#logo img, #t100logo img {width: 300px; }




	.newsImg {margin-left: 20px; margin-bottom: 20px;}

	.supportButton, .strengthButton {margin-left: 0px;}

	.well {background: none; padding: 0; border: none; padding-top: 15px; box-shadow: none;}



	
	#subMenu ul {list-style-type: none; margin-left: 0px; padding-left: 0;}

	#subMenu li {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #efefef}
		#subMenu li.selected a {color: #337ab7 !important;}
		#subMenu .level2 {font-family: "futura-pt" !important; font-weight: 500; font-size: 2.6rem;}
			#subMenu .level2 a:hover {background: rgb(1,42,92); color: #337ab7 !important;}

	#subMenu .month, #subMenu  .year {cursor: pointer;}



	.CatNav .nav { margin-bottom: 15px; margin-right: 0px; }

	.body1class h3, .body1class blockquote {font-size: 2em;}

#map-results-container, .bh-sl-map, .listingContain {height: 100vh; padding: 0px;}
	.listingContain {overflow-y: auto;}

	/* 2022 CHANGES */
	.staticBanner {object-fit: cover; aspect-ratio: 18 / 9; width: 100%; object-position: bottom right;}
	.vtopNav {display: flex; margin-top: 15px; align-items: center; justify-content: flex-end;}



	}











/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1024px) {
  /* Style adjustments for viewports 1024px and over go here */



.body1class h3 {font-size: 1.5em;}

.body1class blockquote {font-size: 1.8em;}



	.body40class > #mainContent .col-md-8 {padding-top: 280px;}


.CatNav { font-size: 1.4em; }


.fbBox, .twitterBox {padding-top: 30px; margin: auto;}

/* GRID */


.gridContainer:before,  .gridContainer:after {content: " "; clear: both; }

.gridContainer .gridContent {display: block; text-align: left; position: relative; left: 10px; float: left; height: 100%; width: calc( 100% - 125px); font-family: "futura-pt" !important; line-height: 140% !important;}
	.gridSummary {display: block; font-weight: bold; position: absolute; bottom: 30px; left: 20px; font-size: 1.8rem; }
	.gridDesc {font-weight: bold;position: absolute; top: 20px; left: 20px; font-size: 3rem; line-height: 120%; text-transform: uppercase;}
.gridItem .logoContain {width: 125px; height: 100%; float: left; padding: 0px 20px; box-sizing: padding-box; vertical-align: middle;}
	.gridItem .logoContain img {max-height: 60%;}


.gridContainer > div:nth-child(1) .gridDesc {display: block;}



.relatedContent .story {border-top: none; margin-top: 0px; border-right: 1px solid rgb(240,240,240)}
.relatedContent .story h3 {margin-top: 0px;	}
#socialShareLinks {text-align: left;}
	#socialShareLinks .svg {width: 50px; height: 50px; margin: 3%; }
	#socialShareLinks a:first-child .svg {margin-left: 0;}
#subMenu { border-left: 1px solid #ece9e1}
#subMenu ul {margin-left: 30px;}

	#topNavBar a {padding: 0px 15px;}
.potyButton h3 {font-size: 2.5em; margin-left: 45px;}

}










/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1176px) {
  /* Style adjustments for viewports 1176px and over go here */
 .CatNav { font-size: 1.6em; }
	.gridSummary {display: block; font-weight: bold; position: absolute; bottom: 30px; left: 20px; font-size: 2.1rem; }
	.gridDesc {font-weight: bold;position: absolute; top: 20px; left: 20px; font-size: 3.8rem; line-height: 120%; text-transform: uppercase;}
}





/* PUB OF THE YEAR AWARDS */
.body9class, .body9class #topBanner {background: #2f2b28; color: #fff;}
.body9class .socialFooter {background: #fff; color: #000;}
.body9class .CatNav {color: #fff;}
.body9class .fb svg, .body9class .twitter .svg {fill: #000 !important;}

	.body9class .subMenuBar, .body114class .subMenuBar {background: #000; margin-bottom: 15px;}
	.body114class .breadcrumb {background: #fbba00; color: #fff;}
	.body114class .breadcrumb a {font-weight: bold; color: #fff !important;}
	.body9class .breadcrumb {background: #ffffff; color: #000;}
		.body9class .breadcrumb a, .body9class #mainContent a {color: #fff; font-weight: bold;}
	.body9class #SubMenuUl li a, .body114class #SubMenuUl li a {color: #fbba00 !important;}

	.body9class #SubMenuUl li.selected a, .body9class #SubMenuUl li a:hover, .body114class #SubMenuUl li.selected a, .body114class #SubMenuUl li a:hover {background: #fbba00; color: #fff !important;}
	/*.body9class .breadcrumb + div {display: none;}
	.body9class .breadcrumb + div + div, .body9class .mobileSubMenu {visibility: visible; }
		.body9class .mobileSubMenu {display: block !important; }*/
.HUPOTYBanner img {width:100%; height: auto; margin-bottom: 5px;}

.templateEntries .userDetails > *, .body9class .userDetails > *, .bodyPOTYclass .userDetails > *   {display: none !important;} 


#SubMenuUl h2 {margin-top: 0px;}




.logInEntries .userIcon { display: inline; padding: 5px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid transparent; background: #bccf3f; vertical-align: middle;}

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}



@media (prefers-reduced-motion: reduce) {
	.collapsing {
	  -webkit-transition: none;
	  transition: none;
	}
  }