/*

TemplateMo 581 Kind Heart Charity

https://templatemo.com/tm-581-kind-heart-charity

*/

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Regular.woff2') format('woff2'),
        url('../fonts/Metropolis/Metropolis-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Light.woff2') format('woff2'),
        url('../fonts/Metropolis/Metropolis-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2'),
        url('../fonts/Metropolis/Metropolis-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../fonts/Metropolis/Metropolis-Bold.woff2') format('woff2'),
        url('../fonts/Metropolis/Metropolis-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;
  --primary-color:                #5bc1ac;
  --secondary-color:              #5a6f80;
  --section-bg-color:             #f0f8ff;
  --site-footer-bg-color:         #44525d;
  --custom-btn-bg-color:          #597081;
  --custom-btn-bg-hover-color:    #5bc1ac;
  --dark-color:                   #000000;
  --p-color:                      #717275;
  --a-color:                      #00d9ff;
  --border-color:                 #e9eaeb;
  --highlight-color:              #6861c7;

  --body-font-family:             'Metropolis', sans-serif;

  --h1-font-size:                 52px;
  --h2-font-size:                 46px;
  --h3-font-size:                 32px;
  --h4-font-size:                 28px;
  --h5-font-size:                 24px;
  --h6-font-size:                 22px;
  --p-font-size:                  16px;
  --btn-font-size:                18px;
  --copyright-font-size:          14px;
  --icon-font-size:               52px;

  --border-radius-large:          100px;
  --border-radius-medium:         20px;
  --border-radius-small:          10px;

  --font-weight-light:            300;
  --font-weight-normal:           400;
  --font-weight-semibold:         600;
  --font-weight-bold:             700;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family); 
}


/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -1px;
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-bold);
  letter-spacing: -2px;
}

h2 {
  color: var(--primary-color);
  font-size: var(--h2-font-size);
  letter-spacing: -2px;
}

h3 {
  color: var(--secondary-color);
  font-size: var(--h3-font-size);
}

h4 {
  color: var(--secondary-color);
  font-size: var(--h4-font-size);
}

h5 {
  color: var(--primary-color);
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}

a, 
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  color: var(--a-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}


/*---------------------------------------
  SECTION               
-----------------------------------------*/
.section-padding {
  padding-top: 75px;
  padding-bottom: 75px;
}

.section-bg {
  background-color: var(--section-bg-color);
}

.eventlogo{
    border-radius: 0px;
    max-height: 200px;
    max-width:100%;
}

.player{
    position: absolute;
    top: 90px;
    bottom: 0px;
    left: 50%;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    transform: translate(-50%, 0%);
    z-index: -1;
}

.event {
    top: 90px;
    bottom: 0px;
    margin-bottom: 90px;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    position: relative;
}

    .event p{
        font-size: 1.2em;
        color: white;
    }

    .event h1{
        color: var(--primary-color);
    }

    .event h2{
        color: #0091fd;
    }

    .event h3{
        color: var(--highlight-color);
    }

.module{
    background-color:rgba(91, 193, 172, 1); 
    border-radius: 25px;
    padding: 20px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 10px 10px 60px rgba(128,128,128,0.3);
    overflow: hidden;
}

    .module iframe {
        border-radius: 25px;
    }

    .module h2 {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #fff;
    }

    .module h3 {
        font-size: 18px;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: #fff;
    }

    .module h4 {
        color: #fff;
    }    

    .module h5 {
        color: #fff;
    }    

    .module p {
        font-size: 16px;
        margin-bottom: 20px;
        color: #fff;
    }

    .module a {
        color: var(--dark-color);
    }

    .module a:hover {
        color: #fff;
    }

    .module i {
        color: var(--border-color);
    }

    .module i:hover {
        color: #fff;
    }

    .module hr {
        border-color: #fff;
    }

    .module img {
        border-radius: 25px;
    }

    .module video{
        border-radius: 25px;
    }

    .module .splashback{
        position:absolute;
        top:0;
        left:0;
        font-size:200px;
        opacity:0.3;
        text-align: center;
        z-index:-1;
    }

    .module .splashside{
        font-size:200px;
        text-align: center;
    }

    .module .help h5{
        font-weight: bold;
        color:#00FF00;
    }

/* Rectangle button */
.button {
	color:var(--custom-btn-bg-color);
	text-decoration:none;
	background:white;
	padding:0 9px;
}

    @media (min-width: 960px) {
        .button {
        font-size: 20px;
        line-height:24px;
        }   
    }
    @media (max-width: 959px) {
        .button {
        font-size: 24px;
        line-height:28px;
        }   
    }
    * + html .button {
        margin-top:-20px
    }
    .button:hover,
    .button:active {
        background:var(--custom-btn-bg-hover-color);
        color:#fff;
    }

/* Round button */
.buttonround {
	color:#fff;
	text-decoration:none;
	background: var(--custom-btn-bg-hover-color);
	padding:20px 30px 20px 30px;
    border-radius: 25px;
}

    @media (min-width: 960px) {
        .buttonround {
        font-size: 20px;
        line-height:24px;
        }   
    }
    @media (max-width: 959px) {
        .buttonround {
        font-size: 24px;
        line-height:28px;
        }   
    }
    * + html .buttonround {
        margin-top:-20px
    }
    .buttonround:hover,
    .buttonround:active {
        background:var(--highlight-color);
        color:#fff;
    }

/* Thumbnail */
.thumbnail{
    text-align: center;
    display:block;
    z-index:3;
    cursor: pointer;
    margin: auto;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    padding: 20px;
    border-radius: 100%;
}
.thumbnail img{
    max-height: 10vh;
}
.thumbnail:hover {
    transform: scale(1.5);
    z-index:5;
}
/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.navbar {
  background: var(--white-color);
  z-index: 9;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand {
  color: var(--primary-color);
  font-size: var(--h6-font-size);
  font-weight: var(--font-weight-bold);
}

.navbar-brand span {
  display: inline-block;
  vertical-align: middle;
}

.navbar-brand small {
  color: var(--secondary-color);
  display: block;
  font-size: 10px;
  line-height: normal;
  text-transform: uppercase;
}

.logo {
  width: 80px;
  height: auto;
}

/*---------------------------------------
  SITE HEADER              
-----------------------------------------*/
#header {
  background: var(--primary-color);
  height: 90px;
  padding-top: 15px;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
}

#header.header-scrolled,
#header.header-fixed {
  height: 70px;
  padding: 15px 0;
  transition: all 0.5s;
}

#header p,
#header p a,
#header .social-icon-link {
  margin-top: 20px;
  color: var(--white-color);
  font-size: var(--copyright-font-size);
}

#header .social-icon {
  text-align: right;
}

#header .social-icon-link {
  background: transparent;
  width: inherit;
  height: inherit;
  line-height: inherit;
  margin-right: 15px;
}

/*---------------------------------------
  ABOUT              
-----------------------------------------*/
@media (max-width: 991px){
    .about-section {
        background-image:url("https://guts.org.au/img/logo extras bg.png");
        background-repeat: no-repeat;
        background-position: top;
        background-size: 100% auto;
    }
}

.about-image {
  border-radius: var(--border-radius-medium);
  display: block;
  object-fit: cover;
}

.custom-text-block {
  padding: 60px 40px;
}

/* Section for services on about, e.g. sponsor us */
.options i{
    text-align: center;
    font-size: 36px;
    padding: 20px;
}

/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/
.site-footer-bottom {
  background-color: var(--secondary-color);
  position: relative;
  z-index: 2;
  padding-top: 25px;
  padding-bottom: 25px;
}

.copyright-text {
  color: var(--section-bg-color);
  font-size: var(--copyright-font-size);
  margin-right: 30px;
}
/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon-link {
  background: var(--site-footer-bg-color);
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--copyright-font-size);
  display: block;
  margin-right: 5px;
  text-align: center;
  width: 35px;
  height: 35px;
  line-height: 38px;
}

.social-icon-link:hover {
  background: var(--primary-color);
  color: var(--white-color);
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/

@media screen and (max-width: 991px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 32px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }
  
  .copyright-text-wrap {
    justify-content: center;
  }

}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 26px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }
  .thumbnail img{
    max-width: 25vw;
  }
}

/* Exlusive content for mobile*/
@media (max-width: 991px){
    .widedesktoponly{
        display: none;
    }
    .desktoponly{
        display: none;
    }
    .mobileonly{
        display: block;
    }
}
/* Exlusive content for desktop*/
@media (min-width: 992px){
    .widedesktoponly{
        display: none;
    }
    .desktoponly{
        display: block;
    }
    .mobileonly{
        display: none;
    }
}

/* Exlusive content for wider desktop*/
@media (min-width: 1540px){
    .widedesktoponly{
        display: block;
    }
    .desktoponly{
        display: block;
    }
    .mobileonly{
        display: none;
    }
}

/* For excluding content on tiny screens like old iphones */
@media (max-width: 360px) {
    .tinyhide{
        display: none;   
    }
}
@media (min-width: 361px) {
    .tinyhide{
        display: block; 
    }
}