/****************************************************************************************************************************** 

                                                     Brighton and Hove CBT
                                                        stylesheet 2026

*******************************************************************************************************************************/

/******************************************************** universals **********************************************************/

body                            { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
                                  margin: 0; padding: 0; font-size: 1.1em; line-height: 1.4; color: #000; }
body:after                      { content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; 
                                  background: url("/img/bubbles.jpg") no-repeat center center; -webkit-background-size: cover; 
                                  -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
*, *:before, *:after            { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6          { text-transform: none; font-weight: bold; letter-spacing: normal;
                                  line-height: 1.2; }
h3                              { font-size: 25px; }
h4                              { font-size: 20px; }
h5                              { font-size: 18px; }
h6                              { font-size: 16px; }
h2.intro-text                   { font-size: 18px; font-weight: bold; color: #444; text-align: center;
                                  margin-top: 0; }
h3, h4, h5, h6                  { margin: 30px 0 5px 0; }
hr                              { max-width: 250px; border-color: #ddd; border-width: 1px 0 0 0; }
a                               { color: #337ab7; text-decoration: none; }
a:hover, a:focus                { color: #23527c; text-decoration: underline; }
p                               { margin: 0 0 15px 0; }
p:last-child                    { margin: 0; }
p, li                           { overflow-wrap: break-word; word-wrap: break-word; }

/************************************************** header and navigation *****************************************************/

.brand                          { display: inherit; margin: 0; padding: 30px 0 10px 0; text-align: center; 
                                  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); font-size: 70px; font-weight: bold; 
                                  line-height: normal; color: #fff; }
.address-bar                    { display: inherit; margin: 0; padding: 0 0 40px 0; text-align: center; 
                                  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-transform: uppercase; 
                                  font-size: 1.25em; font-weight: normal; letter-spacing: 3px; color: #fff; }
.navbar                         { border: none; background: rgba(255, 255, 255, 0.9); }
.navbar-header                  { display: none; color: #777; background: #fff; }
.navbar-links                   { margin: 0 auto; font-size: 1.25em; padding-left: 0; margin-bottom: 0; list-style: none; 
                                  line-height: 1em; }
.navbar-links a                 { color: #777; text-transform: uppercase; text-decoration: none; }
.navbar-links > li              { position: relative; padding: 20px; padding-bottom: 0px; }
.navbar-links > li > a          { position: relative; letter-spacing: 3px; font-size: 18px; }
.navbar-links > li > a:hover,
.navbar-links > li > a:focus    { text-decoration: none; color: #000; }
.navbar-header, 
.navbar-collapse                { margin-left: -15px; margin-right: -15px; }
.menu-icon                      { width: 20px; height: 20px; }

/****************************************************** page layout **********************************************************/

.container                      { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.panel                          { margin: 20px 0 20px 0; padding: 30px; background: #dff;
                                  border-radius: 2px; }
.panel > *:first-child          { margin-top: 0; padding-top: 0; }
.white-panel                    { background: #fff; }
.grey-panel                     { background: #eee; }
.sand-panel                     { background: #f7f7e9; }
.page-box                       { margin-left: -15px; margin-right: -15px; padding-left: 30px; padding-right: 30px; }
.inset-panel                    { background: #fff; padding: 20px; }
.inset-panel > *:first-child    { margin-top: 0; }
.small-print                    { font-size: 80%; background: #eee; }
.small-print h4                 { background: url('/img/icon-text.svg') top left no-repeat; background-size: 25px;
                                  padding-left: 30px; margin-top: 0; }
.berts-logo                     { height:200px; width:200px; border: 0px; padding: 10px; float: left; }
.clear                          { clear: both; }
.brand-intro, .promo-link       { text-align: center; }
.promo-link img                 { height: 15px; }
.brand-intro                    { padding: 20px; }
.brand-intro.panel              { background: rgba(221,221,255,0.1);
                                  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.brand-name                     { text-align: center; text-transform: none; 
                                  font-size: 56px; margin: 15px; 
                                  color: #333; line-height: 1; }
.brand-after                    { font-weight: bold; line-height: 1; color: #fff; 
                                  font-size: 18px; margin: 25px 0 5px 0;
                                  letter-spacing: 1px; text-transform: uppercase; }
.brand-desc                     { color: #cfe; padding: 10px 50px; }
.brand-divider                  { border:0; border-top: 1px solid #066; }
.page-heading                   { text-align: center; color: #fff; padding: 70px 0;
                                  text-transform: none; margin: 0; font-size: 32px; background: rgba(0,21,21,0.2); 
                                  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.grid_row                       { display: grid; grid-template-columns: 220px auto; }
.grid-two                       { display: grid; grid-template-columns: 1fr 1fr; }
.profile-pic                    { width: auto; max-width: 200px; margin-bottom: 20px; display: block; }
.profiles-box h3                { margin: 0px; }
.profiles-box h4                { margin: 1px 0 20px 0; color: #225; }
.qualifications                 { margin: 5px 0; font-size: 14px; line-height: 1.25; color: #345; }
.icon-list                      { margin: 0; padding: 0; }
.icon-list li                   { list-style: none; background-size: 22px; background-position: 0px 0px;
                                  padding: 0 0 10px 40px; }
.icon-list li:last-child        { padding-bottom: 0; }
.icon-fb                        { background: url('/img/icon-fb.svg') top left no-repeat; }
.icon-mail                      { background: url('/img/icon-mail.svg') top left no-repeat; }
.icon-phone                     { background: url('/img/icon-phone.svg') top left no-repeat; }
.video                          { overflow: hidden; padding-bottom:56.25%; position:relative; display:block; 
                                  width: 100%; }
.video iframe                   { display: block; position:absolute; top:0; left: 0; border: 0; height: 100%;
                                  width: 100%; }
.full-width-image               { max-width: 100%; margin-bottom: 20px; }
.file-link, .site-link          { background-image: url('/img/page-icon.svg'); background-repeat: no-repeat; 
                                  background-size: 30px; background-position: 0px -2px; padding: 30px; 
                                  padding-left: 35px;  }
.site-link                      { background-image: url('/img/site-icon.svg'); }
.last                           { padding-bottom: 0; margin-bottom: 0; }
.message                        { background: #223; color: #eee; padding: 30px; text-align: left; }
.message h3                     { text-transform: none; margin: 0; padding: 0; color: #fff; }
.message p                      { color: #fff; }
.message a                      { color: #cef; }
.message ul li                  { margin-bottom: 10px; }
.message ul li a                { color: #cef; }

/********************************************************* footer ************************************************************/

footer                          { background: #fff; }
footer p                        { margin: 0; padding: 50px 0; }
footer .container               { text-align: center; }
.affiliate-links                { padding: 50px 0; }
.affiliate-links a              { text-decoration: none; }
.affiliate                      { display: inline-block; margin: 20px; vertical-align: top; max-height: 50px; }
.footer-copy                    { font-size: 14px; padding: 0 0 50px 0; }
.footer-pipe                    { color:#ddd; font-size:20px}
.footer-copy span               { padding: 0 8px; }
span.credit                     { border-left: 1px solid #79a; padding-left: 11px; }

/***************************************************** print friendly *******************************************************/

@media print                    {
 *, *:before, *:after           { color: #000 !important; text-shadow: none !important; 
                                  background: transparent !important; -webkit-box-shadow: none !important; 
                                  box-shadow: none !important; }
 a, a:visited                   { text-decoration: underline; }
 a[href]:after                  { content: " (" attr(href) ")"; }
 a[href^="#"]:after             { content: ""; }
 img                            { page-break-inside: avoid; }
 img                            { max-width: 100% !important; }
 p, h2, h3                      { orphans: 3; widows: 3; }
 h2, h3                         { page-break-after: avoid; }
 div.brand, div.address-bar     { display: block; font-size: 20px; }
 .navbar,.affiliate-links       { display: none; }
}

/***************************************************** responsiveness *******************************************************/

@media (min-width: 768px)       {
 .container                     { width: 750px; }
 .navbar-collapse               { display: block; width: auto; }
 .navbar-collapse.collapse      { display: block !important; height: auto !important; padding-bottom: 0; 
                                  overflow: visible !important; }
 .navbar-links li               { display: inline-block; padding: 18px; padding-bottom: 0px; }
 .navbar                        { margin-bottom: 20px; padding-bottom: 20px; }
 .wide-last                     { margin-bottom: 0; }
}
@media (min-width: 992px)       {
 .container                     { width: 970px; }
}
@media (min-width: 1200px)      {
 .container                     { width: 1170px; }
}
@media (max-width: 767px)       {
 .navbar-collapse               { padding-top: 5px; padding-bottom: 30px; }
 .navbar-collapse, .brand, 
 .address-bar                   { display: none; }
 .navbar-header                 { display: grid; grid-template-columns: 80% 20%; }
 .navbar-brand                  { height: 20px; margin: 20px; font-size: 20px; letter-spacing: 1px; line-height: 20px; }
 .navbar-button                 { text-align: right; margin: 20px; }
 .navbar-button a               { display: block; margin: 0 auto; height: 20px; }
 .page-heading                  { background: rgba(0,21,21,0.2); padding: 70px 20px; }
 .grid_row, .grid-two           { width: 100%; box-sizing: border-box; display: block; margin-bottom: 60px; }
 .grid_row:last-child,
 .grid-two:last-child           { margin-bottom: 0px; }
 .inset-panel                   { padding: 15px; }
 .panel                         { padding: 30px; margin: 0; border-radius: 0; }
 .container                     { padding: 0; }
 nav .container                 { padding-left: 15px; padding-right: 15px; }
 .footer-copy span              { border: none; display: block; padding: 0 4px; }
}
@media (max-width: 365px)       {
 .berts-logo                    { float: none; }
 .inset-panel                   { overflow: hidden; }
}