* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;} /* GLOBAL */ html { } body {line-height:1; font-family: 'Ubuntu', sans-serif; color:#231F20} ::-webkit-input-placeholder {color:#bdbdbd;} ::-moz-placeholder {color:#bdbdbd; opacity:1;} :-ms-input-placeholder {color:#bdbdbd;} :-moz-placeholder {color:#bdbdbd; opacity:1;} h1 {font-size: 50px; font-weight: 500} h2 {font-size: 40px; font-weight: 500} h3 {font-size: 35px; font-weight: 500} h4 {font-size: 30px; font-weight: 500} h5 {font-size: 25px; font-weight: 500} h6 {font-size: 20px; font-weight: 500} ul {margin-left: 0} p {font-size: 16px; line-height: 1.6em; margin-bottom: 1.3em;} p.intro {font-size: 17px; font-weight: 500;} img {max-width:100%; height:auto;} a {color:inherit;} a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block; z-index: 10} .inner {width:1240px; max-width: 100%; margin: auto; padding-left: 20px; padding-right: 20px; position: relative;} /* COLUMNS */ .col-container {width:calc(100% + 40px); margin-left: -20px; font-size: 0} .col-1 {width:100%; padding: 20px; display: inline-block; vertical-align: top; font-size: 17px;} .col-2 {width:50%; padding: 20px; display: inline-block; vertical-align: top; font-size: 17px;} .col-3 {width:33.333%; padding: 20px; display: inline-block; vertical-align: top; font-size: 17px;} .col-4 {width:25%; padding: 20px; display: inline-block; vertical-align: top; font-size: 17px;} .col-5 {width:20%; padding: 20px; display: inline-block; vertical-align: top; font-size: 17px;} /* HOME VIDEO */ .jumbotron {padding-top:50%; position:relative; min-height:170px; max-height:768px; overflow: hidden;} .hero-video-container {max-height:768px; min-height:100%; width:100%; position:relative; position:absolute; top:0; left:0; height:100%;} .hero-video-container video {width:100%; position: fixed; top:0; left: 0; z-index: 0} .header {position: relative; z-index: 11} .header .inner {z-index: 6; position: absolute; top:20px; left: 50%; margin-left: -620px;} .logo {width:220px; display: block;} .footer-logo {max-width: 220px;} /* OVERLAY */ .overlay {position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 12;} .overlay img {position: relative; z-index: 6} .graphic {position: absolute; left: 50%; margin-left:-16%; top:50%; margin-top: -16%; width:32%; padding-top: 32%; z-index: 4; background-image: url(/_assets/video-graphic.svg); background-position: center; background-size: cover;} .video-mask {position: absolute; left: 0; top:0; width:100%; z-index: 5} /* HOME HERO TEXT */ .hero-text-container {position: relative; height: 100%; display: flex; align-items: center} .hero-text-container h1 {color:#ffffff;} .hero-text-container .inner {z-index: 1;} .hero-text-container .inner p {font-size:20px; color:#ffffff; font-weight: 300; width:530px; max-width: 100%;} .hero-text-inner p {margin-bottom: 0; margin-top: 30px;} .hero-text-inner {width:900px; max-width: 100%; margin-top: 30px; position: relative; border-top:1px solid #ffffff; border-right:1px solid #ffffff;} .hero-text-inner .btn {background-color:#8DC63F; padding: 12px 30px 13px; display: inline-block; line-height: 1.3em; font-size: 16px; border-radius: 30px; color: #ffffff; text-decoration: none} .hero-text-inner .btn:hover {background-color: #333333} .hero-text-container:after {background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: '';} .down-arrow {width:62px; height: 62px; border-radius: 62px; border:1px solid #ffffff; display: flex; justify-content: center; align-items: center; position: absolute; right: -31px;} .down-arrow svg {width:20px; transition: 0.2s ease-out} .down-arrow svg .st0 {fill:#ffffff;} .down-arrow:hover svg {transform: translateY(5px)} /* NAV */ nav {background-color: #ffffff; position: fixed; width: 100%; height: 100%; top: -100%; opacity: 0; visibility: hidden; z-index: 100; transition: 0.5s ease-in-out; display: flex; align-items: center;} nav .inner-narrow {display: flex; width:800px; justify-content: space-between;} nav .header {top:0; position: absolute; width: 100%} nav ul.main-nav {width:50%; font-size: 35px; margin-left: 0; border-right: 1px solid #CCCCCC} nav ul.main-nav li {margin-bottom: 10px; padding-bottom: 0; margin-top: 20px; text-transform: uppercase;} nav ul.main-nav li a {text-decoration: none; display: inline-block;} nav ul.main-nav li a:after {width:0%; height: 2px; content: ''; background-color:#000000; display: block; margin-top: 0px; transition: 0.2s ease-out} nav ul.main-nav li:hover a:after {width:100%} li.sub-item {color: #000!important; font-size: 16px; line-height: 1.2em; padding-left: 10px;} nav ul.main-nav li.sub-item {margin-bottom: 7px; margin-top: 0; padding-bottom: 0} nav ul.main-nav li.sub-item a {color: #000 !important;} nav ul.main-nav li.sub-item a:hover {} nav ul.main-nav li.sub-item a:after {display: none;} nav ul.main-nav li.sub-item.light-green:hover a {color:#8DC63F !important} nav ul.main-nav li.sub-item.green:hover a {color:#00A651 !important} nav .social {width:50%; display: flex; align-items: flex-end; flex-direction: column} nav .social h3 {font-size: 24px; margin-bottom: 15px;} nav .social p {margin-bottom: 8px;} nav .social p a {text-decoration: none} nav .social p a:hover, nav .social p strong {color:#8DC63F} nav ul.social-list {align-items: flex-end;} nav ul.social-list li svg {width:40px; height: auto;} nav.open {opacity: 1; visibility: visible; top: 0; overflow-y: auto;} /* RIGHT NAV */ .right-nav {position: fixed; width: 64px; height: 100%; right: 15px; top: 0; z-index: 100; text-align: center; padding-top: 60px;} .right-nav:before {position: absolute; left: 50%; margin-left: 0; top: 0; height: 45px; width: 1px;background-color: #8DC63F; content: ''; z-index: 0;} .right-nav:after {position: absolute; left: 50%; margin-left: 0; top: 122px; height: 100%; width: 1px;background-color: #8DC63F; content: ''; z-index: 0;} .nav-icon {width:100%; display: block; position: absolute; cursor: pointer; height: 46px;} .nav-icon span {width:100%; height: 4px; border-radius: 4px; background-color: #ffffff; display: block; margin-bottom: 10px; position: relative; transition: 0.2s ease-out} .nav-icon span:nth-child(1) {background-color:#8DC63F} .nav-icon span:nth-child(2) {background-color:#00A651} .nav-icon span:nth-child(3) {background-color:#FAA61A} .nav-icon span:nth-child(4) {background-color:#ED1C24; margin-bottom: 0} .nav-icon.open {} .nav-icon.open span:nth-child(1) {background-color:#8DC63F; transform: rotate(45deg); margin: 0; top:21px;} .nav-icon.open span:nth-child(2) {background-color:#8DC63F; transform: rotate(-45deg); margin: 0; top:17px;} .nav-icon.open span:nth-child(3) {display: none;} .nav-icon.open span:nth-child(4) {display: none;} .right-nav ul {list-style: none; text-align: center; margin-top: 80px; margin-left: auto; margin-right: auto; position: relative; z-index: 5} .right-nav ul li {margin-bottom: 10px;} .right-nav ul li a {width:41px; height: 41px; border-radius: 41px; background-color: #ffffff; display: inline-flex; align-items: center; justify-content: center; border:1px solid #8DC63F; transition: 0.2s ease-out} .right-nav ul li a svg {width:18px; height: auto;} .right-nav ul li a svg .cls-1 {fill:#8DC63F; transition: 0.2s ease-out} .right-nav ul li.email a {border-color:#ED1C24} .right-nav ul li.email a svg .cls-1 {fill:#ED1C24} .right-nav ul li a:hover {background-color:#8DC63F} .right-nav ul li a:hover svg .cls-1 {fill:#ffffff;} .right-nav ul li.email a:hover {background-color:#ED1C24} /* HOME LISTING */ main {background-color:#ffffff; position: relative; z-index: 5} .listing {background-color:#ffffff; position: relative; z-index: 5; min-height: 500px; padding: 70px 0; overflow: hidden;} .panel-container {display: flex; align-items: center; position: relative;} .panel-image-container {width:50%; height: 450px; overflow: hidden; position: relative} .panel-image {height:100%; background-size: cover; background-position: center; transition: 0.2s ease-out} .panel-text-container {width:50%; padding-left: 70px; padding-right: 70px; position: relative;} .panel-text-container h2 {font-size:50px; margin-bottom: 0.5em;} .panel-text-container p {font-size: 17px; line-height: 1.6em; margin-bottom: 2em;} .panel-container:nth-child(even) {flex-direction: row-reverse;} .panel-container:hover .panel-image {transform: scale(1.1);} /* PULLOUT PANEL */ .pullout-panel {height:600px; background-size: cover; display: flex; align-items: center; position: relative;} .pullout-panel h2 {color:#ffffff; margin-bottom: 0.5em;} .pullout-panel p {color:#ffffff; font-size: 17px; line-height: 1.6em; margin-bottom: 2em; width:450px; max-width: 100%;} .pullout-panel .inner {position: relative; z-index: 2} .pullout-panel .dot-btn {color:#ffffff;} .pullout-panel:after {background: linear-gradient(90deg, rgba(35,31,32,0.8) 0%, rgba(35,31,32,0) 100%); position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: '';} /* EXTENDED PULLOUT PANEL */ .pullout-panel.extended {height:auto; padding: 70px 0; background-attachment: fixed} .pullout-panel.extended .pullout-panel-text {background-color:#ffffff; width:50%; padding: 55px; box-shadow: 0 0 30px rgba(0,0,0,0.5); border-bottom: 10px solid #00A651} .pullout-panel.extended .pullout-panel-text p {width:100%; font-size: 15px; color:#231F20} .pullout-panel.extended .pullout-panel-text p:last-child {margin-bottom: 0} .pullout-panel.extended .pullout-panel-text h2 {font-size: 30px;} .pullout-panel.extended .pullout-panel-text h3 {font-size: 20px; margin-bottom: 0.5em;} .pullout-panel.extended:after {display: none} /* INFOGRAPHIC */ .home-infographic {padding: 70px 0;} .home-infographic#infographic-header {padding-bottom:0px;} .home-infographic#infographic {padding-top:0px;} .header-text-btn {display: flex; justify-content: space-between; margin-bottom: 1.5em;} .infographic-image {margin-top: 60px;} /* FLOW COLUMN */ .two-col-flow {column-count: 2; column-gap: 60px;} .two-col-flow p {display: inline-block} /* ABOUT PAGE */ .content-header {background-size: cover; min-height: 550px; height: 70vh; overflow: hidden; margin-bottom: 70px; background-position: center;} .intro-section {padding-bottom: 70px;} .intro-section blockquote {margin-top:40px;} .text-section .col-1, .intro-section .col-1, .text-section .col-2, .intro-section .col-2 {padding-top: 0; padding-bottom: 0} .text-section .col-1 p:last-child, .intro-section .col-1 p:last-child {margin-bottom: 0} blockquote {display: flex;} blockquote .quote-mark {width:47px; flex-shrink: 0} blockquote p {font-size: 24px; line-height: 1.3em; font-weight: 500; padding-left: 20px;} blockquote p:last-child {margin-bottom: 0} section.infographic {padding-bottom: 70px;} section.infographic img {margin-top: 0} .infographic video {width: 100%; height: auto;} /* EXECUTIVE BOARD */ .executive-board {padding:70px 0; background-color:#FAFAFA} .text-intro h2 {margin-bottom: 0.5em;} .text-intro {width:670px; max-width: 100%;} /* PEOPLE CAROUSEL */ .people-carousel .slide {text-align: center; padding-left: 10px; padding-right: 10px;} .people-carousel .slide h3 {font-size: 18px; margin-bottom: 6px;} .people-carousel .slide h4 {font-size: 18px; font-weight: 400; color:#8DC63F; margin-bottom: 10px;} .people-carousel .slide p {font-size: 15px; color:#777777; line-height: 1.3em;} .people-carousel .person-image {width: 200px; height: 200px; border-radius: 200px; background-size: cover; background-position: center; margin-bottom: 30px; margin-left: auto; margin-right: auto; border: 4px solid #8DC63F } .people-carousel-container {position: relative; max-width: 100%; width:1150px; margin:40px auto 0;} .people-carousel .slick-arrow {width:62px; height: 62px; border-radius: 62px; background-color:#8DC63F; font-size: 0; background-image: url(/_assets/icon-chevron-right.svg); background-size: 12px auto; background-position: center; background-repeat: no-repeat; position: absolute; top:90px; left: 0; z-index: 6} .people-carousel .slick-arrow.slick-next {left: auto; right:-62px;} .people-carousel .slick-arrow.slick-prev {transform: rotate(-180deg); left: -62px;} .people-carousel .slick-arrow.slick-disabled {opacity: 0.5} .people-carousel .slick-dots {display: flex; justify-content: center; list-style: none; margin: 30px 0 0 0} .people-carousel .slick-dots li {background: none; margin: 0 5px} .people-carousel .slick-dots li button {background-color:#231F20; width:17px; height:17px; border-radius: 17px; font-size: 0} .people-carousel .slick-dots li.slick-active button {background-color:#8DC63F; transform: scale(1.1)} /* SECRETARIAT */ .secretariat {padding: 70px 0;} .sec-person-listing {display: flex; align-items: flex-start; width:1000px; max-width: 100%; border-bottom: 1px solid #E2E2E2; padding: 50px 0} .sec-person {width: 200px; height: 200px; border-radius: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; flex-shrink: 0; border: 5px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.2) } .sec-text {padding-left: 50px; width:560px; max-width: 100%;} .sec-text h3 {font-size: 19px; color:#8DC63F; line-height: 1.4em; margin-bottom: 2px} .sec-text h4 {font-size: 18px; line-height: 1.4em; margin-bottom: 1em;} .sec-listing-container .sec-person-listing:nth-child(even) {flex-direction: row-reverse; margin-left: auto;} .sec-listing-container .sec-person-listing:nth-child(even) .sec-person {margin-left: 10px;} .sec-listing-container .sec-person-listing:nth-child(even) .sec-text {padding-right: 50px; padding-left: 0} /* SECRETARIAT LISTING _ MEMBER INITIATIVES VERSION */ .sec-listing-container.member-initiatives-listing-container h3 {margin-bottom: 1em; font-size: 22px;} .sec-listing-container.member-initiatives-listing-container .dot-btn {font-size: 17px;} .sec-listing-container.member-initiatives-listing-container .sec-person-listing {width:100%;} .sec-listing-container.member-initiatives-listing-container .sec-person-listing:nth-child(even) {flex-direction: row; margin-left: 0} .sec-listing-container.member-initiatives-listing-container .sec-person-listing:nth-child(even) .sec-person {margin-left: 0;} .sec-listing-container.member-initiatives-listing-container .sec-person-listing:nth-child(even) .sec-text {padding-right: 0; padding-left: 50px} .sec-listing-container.member-initiatives-listing-container .sec-text {width:760px;} /* MEMBERS LISTING */ .members-listing {padding:70px 0; background-color:#01a652;} .members-listing h2 {color: #fff !important;} .member-item {text-align: center;} .member-item-top {width:100%; padding-top:100%; position: relative; overflow: hidden; background-color: #fff;} .member-popup-text {position: absolute; bottom: 100%; background-color: #00A651; width:100%; height: 100%; display: flex; align-items: center; padding: 0 20px; transition: 0.2s ease-out} .member-popup-text p {font-size: 16px; color:#ffffff; line-height: 1.3em;} .member-image {position: absolute; left: 0; top:0; width:100%; height: 100%; background-size: cover;} .member-item .social-list {justify-content: center} .member-item .social-list li {margin: 0 8px;} .member-item .social-list li svg {height:19px; width: auto;} .member-item ul.social-list li svg .cls-1 {fill:#fff !important;} .member-item p {font-size: 15px; font-weight: 500; margin:15px 0 15px 0; color: #fff;} .member-item p a {text-decoration: none; font-size: 18px; color: #fff !important;} .member-item-top:hover .member-popup-text {bottom: 0} .members-listing .col-5 {padding-bottom: 0} /* MEMBER INTIATIVES */ .member-initiatives {padding: 70px 0;} /* RESOURCES */ .filter-list {display: flex; align-items: center; margin-bottom: 30px; flex-direction: column} .filter-list h3 {margin: 0; font-weight: 700; margin-bottom: 30px; font-size: 20px;} .filter-list ul {display: flex; list-style: none; align-items: center; transition: 0.2s ease-out} .filter-list ul li {border-radius: 30px; padding: 15px 20px; margin:0 10px; color:#ffffff; cursor: pointer; text-align: center; transition: 0.2s ease-out} .filter-list ul:hover li {opacity: 0.5} .filter-list ul li.active, .filter-list ul:hover li:hover {opacity: 1} .resources-listing {padding:70px 0; background-color:#FAFAFA} .resources-listing .col-container {display: flex; flex-wrap: wrap} .resource-panel {text-align: center; background-color:#ffffff; border-bottom:8px transparent solid; position: relative; height:100%;} .resource-panel img {box-shadow: 0 0 6px rgba(0,0,0,0.2); transition: 0.2s ease-out} .resource-panel:hover img {transform: scale(1.05)} .resource-panel-text {padding: 20px 15px; display: flex; text-align: left; align-items: flex-start;} .resource-panel-text img {width:32px; box-shadow: none; margin-right: 10px;} .resource-panel-text p {font-size: 14px; line-height: 1.5em; margin-bottom: 0;} .resource-image-container {display: flex; align-items: center; padding: 30px; background-color: #f1f1f1} .resource-panel.industry-report {border-color:#8DC63F} .filter-list ul li.industry-report {background-color:#8DC63F} .resource-panelx.industry-report .resource-image-container {background-color:rgba(141,198,63,0.1);} .resource-panel.legislative-documents {border-color:#FAA61A} .filter-list ul li.legislative-documents {background-color:#FAA61A} .resource-panelx.legislative-documents .resource-image-container {background-color:rgba(250,166,26,0.1);} .resource-panel.position-papers {border-color:#ED1C24} .filter-list ul li.position-papers {background-color:#ED1C24} .resource-panelx.position-papers .resource-image-container {background-color:rgba(237,28,36,0.1);} /* FAQS */ .faqs {padding: 70px 0} /* FAQ ACCORDION */ .accordion-item {padding: 10px 0 50px; position: relative;} .accordion-item h3 {font-size:20px; cursor: pointer; line-height: 1.2em; border-bottom: 1px solid #231F20; padding: 0 15px 15px 0; width: calc(100% - 21px);} .accordion-item h3 span {width:42px; height: 42px; border-radius: 42px; border:1px solid #231F20; background-color: #ffffff; position:absolute; right:0; bottom: -10px; display: flex; justify-content: center; align-items: center; transition: 0.2s ease-out} .accordion-item h3 span svg {width:10px; height: auto; transform: rotate(90deg);} .accordion-item h3 span:before {position: absolute; width: 1px; height: 18px; background-color: #000000; content: ''; right: 20px; top:-19px;} .accordion-expanded {display:none; padding:20px 0 20px 0; border-right: 1px solid #000000; width: calc(100% - 21px);} .accordion-expanded p {width:90%;} .accordion-expanded p:last-child {margin-bottom:0;} .accordion-item.active h3 {color:#FAA61A; border-color:#FAA61A} .accordion-item.active span {border-color:#FAA61A;} .accordion-item.active span svg {transform: rotate(-90deg)} .accordion-item.active h3 span svg .st0 {fill:#FAA61A;} .accordion-item.active .accordion-expanded {border-color:#FAA61A;} .accordion-item.active h3 span:before {background-color:#FAA61A;} /* NEWS LISTING */ .news-listing {padding:0 0 30px;} .news-listing .col-container {display: flex; flex-wrap: wrap;} .news-listing .panel-container {position:relative; height: 100%; padding:0; flex-direction:column!important; align-items: flex-start; background-color:#ffffff; padding-bottom: 40px; background: rgb(239,239,239); background: linear-gradient(0deg, rgba(246,246,246,1) 0%, rgba(246,246,246,0.5) 100%);} .news-listing .panel-container:nth-child(even) {background: linear-gradient(-90deg, rgba(246,246,246,1) 0%, rgba(255,255,255,0) 100%);} .news-listing .panel-image-container {height: 27vw; max-height: 350px; min-height: 250px; position: relative; width: 100%;} .news-listing .panel-image {position: absolute; left: 0; top:0; background-size: cover; background-position: center; width: 100%; height: 100%; background-repeat: no-repeat} .news-listing .panel-container:after {position: absolute; bottom: 0; left: 0; width:0%; border-bottom: 1px solid #cccccc; content: ''; transition: 0.5s ease-out} .news-listing .panel-container:hover:after {width:100%;} .news-listing .panel-container:before {position: absolute; top: 0; right: 0; width:0%; border-bottom: 1px solid #cccccc; content: ''; transition: 0.5s ease-out} .news-listing .panel-container:hover:before {width:100%;} .news-listing .panel-text-container {padding: 40px 40px 0; width:100%;} .news-listing .panel-text-container h2 {font-size: 22px; line-height: 1.2em;} .news-listing .panel-text-container h3 {font-size: 17px; margin-bottom: 1.5em; line-height: 1.3em;} .news-listing .panel-text-container p {font-size: 15px;} .news-listing .panel-text-container .dot-btn {font-size: 16px; margin-top: 30px;} /* NEWS PAGE */ .content-header-news {height:50vh} .content-header-news .inner, .news-page .inner {width:800px; margin: auto;} .news-page .inner p.intro {font-size: 22px;} .news-page .inner ul, .news-page .inner ol, .news-page .inner p {font-size: 18px; line-height: 1.6em;} .news-page .inner ul, .news-page .inner ol {margin: 1em;} .news-page .inner ul li, .news-page .inner ol li {margin-bottom: 0.5em;} .news-image-article {width:100%; margin:30px 0 50px 0} /* SHARE CONTAINER */ .share-container {border-top:1px solid #efefef; border-bottom:1px solid #efefef; padding: 20px 0; margin-top: 40px;} .share-container ul.social-list {margin: 0} .share-container ul.social-list svg {height: 20px;} /* FOOTER */ footer {position: relative; z-index: 5; background-color:#F4F4F4; padding: 50px 0} footer h3 {font-size: 18px; margin-bottom: 1em;} footer .quicklinks {width: 33.333%;} footer .quicklinks ul {list-style: none; margin: 0; column-count: 2; font-size: 14px;} footer .quicklinks ul li {margin-bottom: 12px; line-height: 1.4em;} footer .quicklinks ul li a {text-decoration: none} footer .quicklinks ul li a:hover {color:#8DC63F;} .form-container fieldset {border:1px solid #D1D1D1; position: relative; height: 55px; margin-bottom: 10px;} .form-container fieldset:focus {border:1px solid #000000} .form-container fieldset legend {font-size: 15px; color:#231F20; padding: 0 5px;} .form-container fieldset input, .form-container fieldset textarea {position: absolute; left: 0; top:0; width:100%; height: 100%; font-size: 14px; padding-left: 20px; padding-bottom: 5px; background-color: transparent; color:#333333} .form-container fieldset textarea {padding-top: 8px;} .form-container fieldset.message {height:120px;} .footer-top .col-container {display: flex; justify-content: space-around} .submit-btn {position: relative; font-size: 16px; background-color:#8DC63F; display: inline-flex; align-items: center; width:115px; height: 35px; border-radius: 20px; margin-top: 30px; transition: 0.2s ease-out} .submit-btn span {width:19px; height: 19px; border-radius: 19px; background-color: #ffffff; margin-left: 10px; transition: 0.2s ease-out} .submit-btn input[type="submit"] {background:none; color:#ffffff; padding-left: 30px; position: absolute; left: 0; top:0; width:100%; height: 100%;} .submit-btn:hover span {transform: scale(1.1);} .submit-btn:hover {background-color:#00A651} ul.social-list {list-style: none; display: flex; margin: 0 0 20px; align-items: center;} ul.social-list li {margin-right: 20px;} ul.social-list li svg .cls-1 {fill:#8DC63F;} footer .social {} footer .social p {margin-bottom: 5px; font-size: 15px;} footer .social p strong {color:#8DC63F;} footer .social p a {text-decoration: none} footer .social p a:hover {text-decoration: underline;} footer .contact {} .footer-bottom .inner {display: flex; justify-content: space-between; margin-top: 30px; align-items: flex-end;} .footer-bottom .inner ul {display: flex; align-items: center; list-style: none; font-size: 14px;} .footer-bottom .inner ul li {margin-left: 15px; padding-left: 15px; border-left: 1px solid #8DC63F} .footer-bottom .inner ul li a {color:#8DC63F; text-decoration: none;} .footer-bottom .inner ul li a:hover {color:#231F20} .footer-bottom .inner ul li:first-child {border-left: none} /* BUTTONS */ .dot-btn {font-size: 19px; color:#231F20; text-decoration: none; display: flex; align-items: center; transition: 0.2s ease-out} .dot-btn span {width:23px; height: 23px; border-radius: 23px; background-color:#8DC63F; margin-right: 10px; transition: 0.2s ease-out} .dot-btn:hover {color:#8DC63F;} .panel-container:hover .dot-btn span, .dot-btn:hover span {transform: scale(1.2); margin-right: 12px;} /* COOKIE BAR */ .cookieBar { width: 100%; background: url('/_assets/bg_cookiebar.png'); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; } .cookieBar p {color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;} .cookieBar .acceptBtn {border:0px; background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; } /*********************/ /****** COLOURS ******/ /*********************/ /* LIGHT GREEN */ .light-green .news-listing .dot-btn, .light-green .accordion-item.active h3, .light-green .sec-text h3, .light-green .pullout-panel .dot-btn, .main-nav li.light-green a, .light-green .dot-btn:hover span, .light-green h2, .light-green.panel-container:hover .dot-btn, .light-green .dot-btn:hover {color:#8DC63F;} .light-green .member-popup-text, .main-nav li.light-green a:after, .light-green .dot-btn span {background-color:#8DC63F;} .light-green .share-container ul.social-list li svg .cls-1, .light-green .member-item ul.social-list li svg .cls-1, .accordion-item.active h3 span svg .st0, .light-green blockquote svg .st1 {fill:#8DC63F;} .light-green blockquote svg .st0 {fill:#8DC63F; opacity: 0.8} .light-green .accordion-item.active span, .light-green .accordion-item.active h3, .light-green .pullout-panel.extended .pullout-panel-text {border-color:#8DC63F} /* GREEN */ .green .news-listing .dot-btn, .green .accordion-item.active h3, .green .sec-text h3, .green .pullout-panel .dot-btn, .main-nav li.green a, .green .dot-btn:hover span, .green h2, .green.panel-container:hover .dot-btn, .green .dot-btn:hover {color:#00A651;} .green .member-popup-text, .main-nav li.green a:after, .green .dot-btn span {background-color:#00A651;} .green .share-container ul.social-list li svg .cls-1, .green .member-item ul.social-list li svg .cls-1, .accordion-item.active h3 span svg .st0, .green blockquote svg .st1 {fill:#00A651;} .green blockquote svg .st0 {fill:#00A651; opacity: 0.8} .green .accordion-item.active span, .green .accordion-item.active h3, .green .pullout-panel.extended .pullout-panel-text {border-color:#00A651} /* ORANGE */ .orange .news-listing .dot-btn, .orange .accordion-item.active h3, .orange .sec-text h3, .orange .pullout-panel .dot-btn, .main-nav li.orange a, .orange .dot-btn:hover span, .orange h2, .orange.panel-container:hover .dot-btn, .orange .dot-btn:hover {color:#FAA61A;} .orange .member-popup-text, .main-nav li.orange a:after, .orange .dot-btn span {background-color:#FAA61A;} .orange .share-container ul.social-list li svg .cls-1, .orange .member-item ul.social-list li svg .cls-1, .accordion-item.active h3 span svg .st0, .orange blockquote svg .st1 {fill:#FAA61A;} .orange blockquote svg .st0 {fill:#FAA61A; opacity: 0.8} .orange .accordion-item.active span, .orange .accordion-item.active h3, .orange .pullout-panel.extended .pullout-panel-text {border-color:#FAA61A} /* RED */ .red .news-listing .dot-btn, .red .accordion-item.active h3, .red .sec-text h3, .red .pullout-panel .dot-btn, .main-nav li.red a, .red .dot-btn:hover span, .red h2, .red.panel-container:hover .dot-btn, .red .dot-btn:hover {color:#ED1C24;} .red .member-popup-text, .main-nav li.red a:after, .red .dot-btn span {background-color:#ED1C24;} .red .share-container ul.social-list li svg .cls-1, .red .member-item ul.social-list li svg .cls-1, .accordion-item.active h3 span svg .st0, .red blockquote svg .st1 {fill:#ED1C24;} .red blockquote svg .st0 {fill:#ED1C24; opacity: 0.8} .red .accordion-item.active span, .red .accordion-item.active h3, .red .pullout-panel.extended .pullout-panel-text {border-color:#ED1C24} .error {color: #ED1C24; margin-bottom: 30px;} .error li {margin-bottom: 0.5em;} p.error {color: #000000; margin-bottom: 1em;} /* ANIMATED */ .graphic {animation: graphic-spin 2s ease-in-out forwards 0.5s;} .overlay {animation: overlay-grow 4s ease-in-out forwards 0.5s;} .hero-text-container {animation: fade-in 1s ease-out forwards 3.5s; opacity: 0; transform: translateY(20px); z-index: 10;} .content-header .hero-text-container {animation: fade-in-only 1s ease-out forwards 0.2s; transform: translateY(0)} @keyframes graphic-spin { 0 {transform: rotate(0);} 100% {transform: rotate(180deg);} } @keyframes overlay-grow { 0 {transform: scale(1)} 50% {transform: scale(1.25); top:0; opacity: 1;} 100% {transform: scale(1.5); opacity: 0; left: 0;} } @keyframes fade-in { 0 {opacity: 0; transform: translateY(30px)} 100% {opacity: 1; transform: translateY(0px)} } @keyframes fade-in-only { 0 {opacity: 0;} 100% {opacity: 1;} }