@import url("base.css");

:root {

  --light-blue: #b8e3e2;
  --red: #b00e19;
  --blue: #162587;
  --grey: #6D696A;

  --body-color: #555 !important;
  --body-font-size: 18px !important;
  --body-font-weight: 300 !important;

  --link-color: #000 !important;
  --link-hover-color: #000 !important;

  --cassiopeia-color-primary: #11143e !important;
  --cassiopeia-color-secondary: #282728 !important;
  --cassiopeia-color-link: #11143e !important;
  --cassiopeia-color-hover: #282728 !important;

  --cassiopeia-font-family-body: "Open Sans", sans-serif !important;
  --cassiopeia-font-weight-normal: 300 !important;
  --cassiopeia-font-family-headings: "Lora", sans-serif !important;
  --cassiopeia-font-weight-headings: 400 !important;
}


/* HTML TAGS/GENERIC CLASSES */

a:not([class]) {
  transition: 0.3s;
  text-decoration: none;
}

a:not([class]):hover {
  text-decoration: underline;
}

.btn, .btn-primary, .cf-btn {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  font-family: var(--cassiopeia-font-family-body) !important;
  transition: 0.3s;
}

.btn:hover, .btn-primary:hover, .cf-btn:hover{
  background-color: var(--grey) !important;
  border-color: var(--grey) !important;
  text-decoration: none !important;
}

/* NAVBAR */

.header {
  background-color: #FFF;
  border-bottom: 3px solid var(--red);
  transition: 0.3s;
}

.header .navbar-brand {
  max-width: 110px;
  transition: 0.3s;
}

.header .navbar-brand a img {
  margin-bottom: -70px;
}

.container-header .metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus {
  outline: 0!important;
}

.container-header .mod-menu >li > a, .container-header .mod-menu>li>button {
  color: #333 !important;
  font-size: 18px;
  font-weight: 400 !important;
}

.container-header .metismenu > li > a:hover:after, .container-header .metismenu > li > button:hover:before, .container-header .metismenu > li.active > a:after, .container-header .metismenu > li.active > button:before {
  background: var(--body-color) !important;
}

.container-header .metismenu>li.level-1>ul {
  border-top: 2px solid var(--red);
}

.container-header .metismenu>li.level-1>ul li {
  padding: 4px 12px !important;
}

.container-header .metismenu > li.level-1 > ul li a {
  font-size: 16px;
}

.container-header .metismenu>li.level-1>ul li a:hover {
  text-decoration: underline!important;
}

/* TOP BANNER */

.hero-image-background:before {
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height: 195px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  z-index: 1;
}

.hero-image-background .overlaycontent {
  z-index: 2;
}

.layout-blog .container-banner {
  position: relative;
}

.layout-blog .container-banner:before {
  content:"";
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  height: 195px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  z-index: 1;
}

.layout-blog .container-banner .image_banner_container  {
  margin:0;
}

.layout-blog .container-banner h1 {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 10px;
  color: white;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  top: unset;
  z-index:2;
}


/* BODY */

.com-content-article__body {
  margin: 40px 0;
}

.club-members p strong {
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 20px;
}

.club-members p {
  font-size: 18px;
}

.fixture-page .wf-columns {
  border-bottom: 1px solid var(--red);
  padding: 20px 0;
}

.fixture-page .wf-columns:nth-child(even) {
  background-color: #e7e7e7;
}

.fixture-page .wf-columns p {
  margin: 0;
}


/* GOOGLE MAP */

.google-map p {
  position: relative;
  padding-bottom: 75%;
}

.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* HOVER BOXES */

.hoverbox .h3 {
  margin: 12px 0 0 !important;
}

/* PEOPLE LAYOUT */
.people-layout__image {
	width: 160px;
	height: 160px;
	object-fit: cover;
	background: #e9ecef;
	object-position: top center;
}

/* FOOTER */

footer {
  background-color: #FFF !important;
  border-top: 3px solid var(--red);
  color: #333 !important;
}

.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
  color: #555;
}


/* RESPONSIVE DESIGN */



@media(min-width: 993px) {
  .container-header .metismenu.mod-menu .metismenu-item {
    padding: 0 10px;
  }
}

@media (max-width: 992px) {
  body > div.site-grid {
    margin-top: 84px;
  }

  .container-header .navbar-brand {
    z-index: 99;
  }

  .container-header .navbar-collapse {
    top: 82px;
    background-color: #FFF !important;
    border-bottom: 3px solid var(--red);
  }

  .i51hoverboxes .hoverbox{
    flex: 50% !important;
  }
}