body {font-family: 'Montserrat Display' serif !important;}

/* make sure we have smooth scrolling*/
html {
scroll-behavior: smooth;
}

/* Some background colours */
.bg-grey {
	background-color: #e3e3e3 !important;
}
.bg-white {
  background-color: #ffffff !important;
}

/*****************************************
general site wide settings and useful code
******************************************/

/*corporate background image for the donation and hero banner*/
.corpbg{background-image: url("../img/Ithinc background 768x750.jpg");}

h5{font-size: 0.9rem}

/*centre images within the column*/
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

/**************************************************
Handle top margin offset to allow for sticky header
***************************************************/

section {scroll-margin-top: 380px;} /*this is to compensate for the sticky menu size so that anchors appear directly below the sticky menu when called. Changes depending on height of the navbar and hamburger menu */

/*********************
Photo Gallery Settings
**********************/
.photo-gallery {
  color:#313437;
  background-color:#fff;
}

.photo-gallery p {
  color:#7d8285;
}

.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
  text-align: center;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  background: white;
  justify-content: center;
  padding: 12px;
  /*border: 1px solid #999;*/
}

/***************
Nav Bar Settings
***************/
nav{
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
}

nav p{
	margin:0px;
}
/*nav h1{
	font-size: 20px;
	padding: 0px 0px 0px 10px;
}*/

.navbar-nav {margin-left: auto;}

.navbar-brand {
    position: relative;
    background: url("../img/ithinc logo.png");
    width: 200px;
	height:45px;
    left: 10px;
    background-size: contain;
	background-repeat: no-repeat;
}

/***********
Hero Section
************/
/*#hero .container{
		height: 50px; 
}*/

#hero h1{
	font-size:2rem; 			/* Change the height of the heading in the hero section */
	margin: 75px 0px 0px 0px; 	/*margins (top,right, bottom, left) around the header - might need setting for each device */
	color: white;  				/*just the colour of the text in the block */
}

#hero h3{
	padding-bottom: 5px;
}

#hero p{
	color: white;
	font-size: 1.2rem
}

/*************
Button Styling
**************/
.btn{ /*styling for all buttons */
	width:fit-content;
	padding: 5px 20px 5px 20px ;
	border-radius: 50px; /*this rounds the edges of the buttons*/
	background-color: #e7527f; /*choose a button colour, any colour*/
	border: white;
}

.btn:hover{
	background-color: mediumpurple; /*change colour when a mouse hovers over the button */
}


/*********************
Events Section Styling
**********************/
/*styling for the hyperlinks - basically turn it all off*/
#events-section a, a:visited, a:hover, a:active {
  text-decoration: none; 
}


/*********************
Info Section Settings
*********************/
/*These two sections are concerned with fading the section in slowly*/
@keyframes infosectionfade {
   0% {opacity: 0.3;}
   100% {opacity: 1;}
}

#info-section div {
  animation-name: infosectionfade;
  animation-duration: 2s;
}

#action-section h3{
	color: black;
	font-size: 2rem
}

.footer a{color:white}

/*What follows changes the css for diffent platforms. Above is for smallest - mobile portrait and then at each step we might need to change one or two things */

/* Tablet View - 768 and above */

@media (min-width: 768px) {
	.text-large{font-size:1.5rem}
	h5{font-size: 0.6rem}
	nav h1{font-size: 1.2rem}
	#hero h1{font-size: 2.5rem}
	section {scroll-margin-top: 400px;}
	.corpbg{background-image: url("../img/Ithinc background 992x750.jpg");}
	.navbar-brand {
		position: relative;
		background: url("../img/ithinc logo.png");
		width: 337px;
		height:75px;
		left: 10px;
		background-size: contain;
		background-repeat: no-repeat;
		}
}

/* Desktop View - 992 and above*/

@media (min-width: 992px) {
	.navbar {padding: 5px 15px;}
	h5{font-size: 0.9rem}
	nav h1{font-size: 1rem}
	#hero h1{font-size: 3.5rem}
	section {scroll-margin-top: 75px;}
	.corpbg{background-image: url("../img/Ithinc background 1200x750.jpg");}
}

/* * Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
	h5{font-size: 0.9rem}
	nav h1{font-size: 1.8rem}
	#hero h1{font-size: 4rem; padding-top:60px}
	section {scroll-margin-top: 75px;}
	.corpbg{background-image: url("../img/Ithinc background 2500x750.jpg");}
	navbar-brand {
		position: relative;
		background: url("../img/ithinc logo.png");
		width: 450px;
		height: 100px;
		left: 10px;
		background-size: contain;
		background-repeat: no-repeat;
		}
}