#toggleBtn {     border: 0px;
    position: absolute;
    z-index: 991;
    bottom: 70px;
    right: 70px;
    background: no-repeat;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

#toggleBtn:hover {
background: #FFF;
}

#toggleBtn svg {
color: #FFF;
    height: 30px; width: 30px;
}

#toggleBtn:hover svg path {
fill: #333;
}

#wrapper {
position: relative;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
background-position: center 0px;
height: 100%;
}

#page {
display: table;
margin: 0px;
}

#hero {
width:100%;
margin: 0px;
height: 100%; height: 100vh; height: 100dvh;
position: relative;
background: #333; 
}

#hero:before {
background: linear-gradient(183deg, rgba(0, 0, 0, 0.73) 0%, rgba(0, 0, 0, 0.2) 60%);
content: ""; position: absolute; width: 100%; height: 100%; z-index: 2;
}

#hero .transparent-logo {
  z-index: 
}

#hero .tagline {
position: absolute; bottom: 120px;left: 50%;
transform: translateX(-50%);
 z-index: 99; 
max-width: 670px;
width: 90%; color: #FFF;
text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hero .tagline span {
display: block;
font-weight: 800; line-height: 1;
font-size: 64px;
margin-bottom: 35px;
}


.buttons,
.button {
    display: flex;
}

.buttons a:link,
.buttons a:visited,
.button a:link,
.button a:visited {
color: #FFF;
padding: 13px 35px;
text-decoration: none;
font-size: 19px;
font-weight: 500;
margin-right: 20px;
display: flex;
    justify-content: space-between;
align-items: center;
}

.buttons svg,
.button svg {
    height: 12px; margin-left: 10px;
}

.buttons a:hover,
.button a:hover {
    padding: 13px 40px; 
}

/*-- Video --*/

.vimeo-wrapper {
position: absolute;
width: 100%;
height: 100%;
height: 100vh;
height: 100dvh;
z-index: -1;
pointer-events: none;
overflow: hidden;
z-index: 1;
}

.vimeo-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

body.smaller .vimeo-wrapper iframe {
opacity: 0.5;
}

/*-- Rules --*/

section {
padding: 80px 0px;
position: relative;
z-index: -2;
}

h1, h2 {
  font-weight: 800;
font-size: 73px;line-height: 1.3;
margin: 0px 0px 20px 0px;
position: relative;
    display: inline-flex;
    color: #313131;
}

h1:after,
h2:after {
background: rgba(213, 192, 207, 0.40);
content: "";
position: absolute;
height: 21px;
width: 100%;
left: 13px;
bottom: 10px;
z-index: -1;
}

.colour h2 {
    color: #FFF;
}


section p {
font-size: 21px;
}

#tagline {
    background:#351F65;
}	

#tagline img {
  height: 80px; width: auto;
}

#tagline span {
    max-width: 1010px;
    width: 90%;
    font-size: 60px;
    color: #FFF;
    line-height: 1.2;
    font-weight: 600;
    display: flex;
}

#tagline .button a {
  background: rgba(255,255,255,0.1) !important; margin-top: 30px;
}


#welcome p:first-of-type {
    font-size: 27px;
font-weight: 700;
line-height: 1.3;
color: #464646;
}

#welcome p:last-of-type {
  font-weight: 800;
}



 #events {
   padding: 80px 0px 130px;
        position: relative;
        overflow: hidden;
        
        .group {
          display: flex;
          justify-content: space-between;
          align-items: center; margin-bottom: 50px;
        }
        
        h2 {color: #FFF;}
        
        .button a {
          background: rgba(255,255,255,0.1) !important; margin-right: 0px !important;
        }
        .container {
            margin: 0px auto;
            display: block;
            position: relative;
            width: 84%;
        }

        .overflow {
            position: relative;
            display: block;
            width: 100%;
        }

        .slick-slider {
            position: relative;
            overflow: visible;
        }

        .slick-list {
            position: relative;
            display: block;
            overflow: hidden;
            width: 100%;
            margin: 0 auto 0 0%;
            padding: 0;
        }

        .slick-track {
            position: relative;
            top: 0;
            left: 0;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .container {
            position: relative; z-index: 1;
        }

        .box {
            display: flex;
            justify-content: center;
            flex-direction: column;
            width: 90%;
            margin-left: 5%;border-radius: 0px;
            padding: 40px 20px;
            background: #ffffff0d;
        }

        .date {
            color: #FFF;
            display: flex;
            text-align: center;
            flex-direction: column;
            text-align: center;
            line-height: 1.3;
            font-size: 19px;
            font-weight: 400;
        }

        .date span {
            display: block;
            width: 100%;
            clear: both;
            font-weight: 800;
        }

        .event-title {
            text-align: center;
            width: 100%;
            max-width: 240px;
            line-height: 1.3;
            margin: 67px auto 0px;
        }

        .event-title a {
            color: #FFF;
            text-align: center;
            font-size: 20px;
            text-decoration: none;
        }
    }

    ul.eo-events {
        padding: 0px;
    }

    #events:before {
        content: "";
        width: 100%;
        height: 3px;
        position: absolute;
        right: 0px;
        top: 362px;z-index: 1;
        background: #ffffff52;
    }

    .eo-event-future {
        position: relative;
    }

    .eo-event-future:after {
        content: "";
        width: 30px;
        height: 30px;
        border-radius: 100%;
        position: absolute;
        top: 104px;
        background: #FFF;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #events .slick-dots li button:before {
      border: 2px solid #FFF;
    }
    
    #events .slick-dots li.slick-active button:before {
      background: #ffffff52 !important;
    }
}