/* smooth scrolling */
html {
        scroll-behavior: smooth;
        scroll-padding: 5rem;
}

h2 {
    font-size: 25px;
}

h4 {
	font-family: "Franklin Gothic Demi", Tahoma, Verdana, Arial;
	font-weight: bold;
}

h5 {
	font-family: "Franklin Gothic Demi", Tahoma, Verdana, Arial;
	font-style: italic;
}


body {
   /* background-image:  url('/images/backgrounds/chess_set8.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;  */
   background-color: rgb(200, 243, 243, .5); 
}

/* for DCCA title */
.banner_text {
    font-size: 48px;
}

/* for the SmartSearch module */
.js-finder-searchform {
    background-color: green;
    text-align: left;
    position: fixed;
    overflow: hidden;
    z-index: 100;
    left: 10%;
    top: 10px;
   }
  
/* to get intro image to wrap text
   also adding a bit of color and shading
   to help distinguish blog entries */ 
.blog-item {
  display: inline;
  background-color: #fcfbf4;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 8px;
}

/* add a little bit of text paddding around the blog entry */
.item-content {
      padding: 20px;
}

/* for placement of image intro images */
.mod-articles-image {
    float: right;
    width: 30%;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
}

/* Override the lila background with white */
.container-header {
    background-color: white;
    background-image: none;
}

.container-topbar {
    background-color: #cb2c39;
    background-image: none;
}

/* Menu text  */
.container-header .mod-menu {
    color: white;
}

/* the background of the drop down menus */
.mm-show {
    background: green !important;
}

/* Core colours */
.background-green {
     background-color: green;
}

/* Top Banner */
/* floating panel for the social media icons */
    .panelfloat {
     position: fixed;
     overflow: hidden;
     z-index: 100;
     right: 30px;
     top: 10px !important;
 }

/* floating panel for the top section which moves when scrolling */
.panelfloatbanner {
  position: fixed;
  overflow: hidden;
  top: 0px !important;
  width:100% !important;
  z-index: 0 !important;
  height:60px;

}

/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px; 
    padding: 3px 15px;
    color: #0088cc;
}


/* On hover there should be a green background */
.container-header .mod-menu a:hover {
    background-color: #5EAF2F;
    color:#ffffff !important;
}


/* change the color of the Hamburger Menu  */
.container-header .navbar-toggler {
    color: white;
    border: 1px solid #0088cc;
}

/* make the menu diamond nearer the menu text */
#navbar1 > ul > li.metismenu-item.level-1.deeper.parent > a {
padding: 0px !important; 
} 

/* Following for floating images and text on the main spash banner images */
/* Top left text */
.top-left {
  position: absolute;
  width: 10%;
  top: 20px;
  left: 20px;
}

.top-right {
  position: absolute;
  width: 10%;
  top: 20px;
  right: 20px;
}

/* Bottom left text */
.bottom-left-text {
  position: absolute;
  max-width: 40%;
  bottom: 40px;
  left: 20px;
}

/* for zooming images on hover */
.zoom {
  transition: transform 4s; /* Animation */
}

.zoom:hover {
  transform: scale(1.1); 
}

.card {
  border: none;
 /* background: #E0E0E0; opacity was .3 before */
  background: rgb(144, 238, 144, .8);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* for menu bar background */
 .container-header {
  background-color: green; 
  background-image: none; /* Ensure no background image is applied */
}

/* for menu font colour */
.container-header .mod-menu a {
   color: white !important; 
}

/* Footer styles */
.font-title {font-family: "Franklin Gothic Demi", Tahoma, Verdana, Arial;}
.font-footer-title font-footer-title {font-family: "Franklin Gothic Demi",Tahoma, Verdana, Arial; font-weight: bold;}

/* main colours for the footer */
.container-footer {
    background-color: green;
    background-image: none;
}

/* management of the footer into a grid */
.footer-grid-container {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto;
}

.footer-grid-container > div {
  text-align: left;
  padding: 2px 2px; 
  font-size: 12px;
}


.footer-grid-container > div > a:link, .footer-grid-container > div > a:visited {
  color: white !important; text-decoration: underline;
}

.footer-grid-container > div > p > a:link, .footer-grid-container > div > p > a:visited {
  color: white !important; text-decoration: underline;
}

.footer-longrow {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* Module customisations */

.team-events {
     background-color: #98bf64; 
      color: black;
}

.featured-videos {
      background-color: #98bf64; 
      color: white;
}

/* for the featured video iframe and to make it responsive */
.featured_video_iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.news-in-brief {
      background-color: #74b72e; 
}

.featured-games {
      background-color: #74b72e; 
      color: white;
}


@media (max-width: 991.98px) {

    .social {
    	display: none;
    }
    
    /* Bottom left text */
    .bottom-left-text {
      position: static;
      max-width: 100%;
      bottom: 40px;
      left: 20px;
    }
    
    /* for DCCA header text */
    /* TODO still little bit of overlap */
    .banner_text {
      font-size: 28px;
    }
    
    
    /* TODO work on this for mobile devices
    /* floating panel for the top section which moves when scrolling */
    .panelfloatbanner {
      position: fixed;
      overflow: hidden;
      top: 0px !important;
      width:100% !important;
      z-index: 0 !important;
      height:60px;
    }
    

}

/* Printing specific layouts */
@media print {
	
	* {
		font-size: 95% !important;
	}
	
	
	
  /* All your print styles go here */
p.panelfloat, header, i._access-icon, a.btn, footer,  div.com-content-category-blog__navigation {
    display: none !important;
  }
  
div.lm_list_wrapper > div > div.col-12.lm_position.lm_position-top.overflow-auto.py-1.d-table,
div.lm_list_wrapper > div > div.col-12.lm_position.lm_position-bottom.overflow-auto.py-1.d-table  {
      display: none !important;
  }
  
}