.language_welsh {
  display: none!important;
}

/*------------------------------------

    su2022 Main CSS

----------------------------------------*/

/* --------------------------------------------------- */

/*---------------------
General Stylings
----------------------*/
.clearfix:after {
content: "";
display: block;
clear: both;
}

.ellipsis {
white-space: nowrap;
/* 1 */
-o-text-overflow: ellipsis;
   text-overflow: ellipsis;
/* 2 */
overflow: hidden;
}

@font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?f91ma7");
src: url("../fonts/icomoon.eot?f91ma7#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?f91ma7") format("truetype"), url("../fonts/icomoon.woff?f91ma7") format("woff"), url("../fonts/icomoon.svg?f91ma7#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}


/* ------------------ Site Scrollbars ----------------- */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(0 0 0 30%);
border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: var(--union-navy);
border-radius: 5px;
}

/* Button */
/*::-webkit-scrollbar-button {
background: var(--uniongrey);
}*/

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--union-skyblue);
}


.page_edit.page_pages #page_tree td {
width:auto;
display: inline-block;
}

html {
scroll-behavior: smooth;

}
body {
min-width: 320px;
font-size: 14px;
line-height: 20px;
scroll-margin-top: 20rem;
scroll-snap-margin-top: 30px;
}
@media (min-width: 768px) {
body {
  font-size: 16px;
  line-height: 20px;
}
}
@media (min-width: 992px) {
body {
  font-size: 18px;
  line-height: 24px;
}
}
@media (min-width: 1200px) {
body {
  font-size: 20px;
  line-height: 30px;
}
}
body.nav-active {
overflow: hidden;
}

#main {
width: 100%;
padding: 0;
/*OFFSET FIXED HEADER STYLE */
/*padding-top: var(--header-height);  */
margin-bottom: -1px;
/*isolation: isolate;*/
overflow-y: visible;
overflow-x: hidden;
}

/* ------- Redefine Bootstrap -------------- */
table {
width: 100%;
}

.table-responsive {
    overflow-y: hidden;
}

a {
-webkit-transition: linear 0.3s;
-o-transition: linear 0.3s;
transition: linear 0.3s;
}

@media (min-width: 768px) {
p {
  margin: 0 0 20px;
}
}
@media (min-width: 1200px) {
p {
  margin: 0 0 30px;
}
}
p:last-child {
margin: 0;
}

.btn {
display: inline-block;
/* min-width: 150px; */
/* font-size: 16px; */
width: -moz-fit-content;
width: fit-content;
line-height: 20px;
text-transform: capitalize;
border-radius: 50px;
/* border: 1px solid transparent; */
-webkit-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
}
@media (min-width: 768px) {
.btn {
  font-size: 18px;
}
}
@media (min-width: 992px) {
.btn {
  font-size: 20px;
  min-width: 7rem;
}
}
.btn.btn-lg {
padding: 15px 50px;
}

.btn-secondary, .btn-success, .btn-warning, .btn-union-pink, .btn-union-yellow,.btn-union-green,.btn-union-skyblue {
--bs-btn-color: #ffffff;
/* --bs-btn-hover-color: #ffffff; */

}

.btn-outline-secondary, .btn-outline-success, .btn-outline-warning,
.btn-outline-union-pink, .btn-outline-union-yellow, .btn-outline-union-green,
.btn-outline-union-skyblue {
--bs-btn-hover-color: #ffffff;
--bs-btn-active-color: #ffffff;

}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.h {
margin: 0 0 15px;
font-weight: 700;
color: var(--union-cobaltblue,#465CC2);
}

h1, .h1 {
font-size: 26px;
line-height: 30px;
}
@media (min-width: 768px) {
h1, .h1 {
  font-size: 30px;
  line-height: 34px;
}
}
@media (min-width: 992px) {
h1, .h1 {
  font-size: 40px;
  line-height: 45px;
}
}
@media (min-width: 1200px) {
h1, .h1 {
  font-size: 50px;
  line-height: 60px;
}
}

h2, .h2 {
font-size: 20px;
line-height: 24px;
}
@media (min-width: 768px) {
h2, .h2 {
  font-size: 26px;
  line-height: 30px;
}
}
@media (min-width: 992px) {
h2, .h2 {
  font-size: 30px;
  line-height: 36px;
}
}
@media (min-width: 1200px) {
h2, .h2 {
  font-size: 40px;
  line-height: 50px;
}
}

h3, .h3 {
font-size: 16px;
line-height: 20px;
}
@media (min-width: 768px) {
h3, .h3 {
  font-size: 18px;
  line-height: 22px;
}
}
@media (min-width: 992px) {
h3, .h3 {
  font-size: 20px;
  line-height: 25px;
}
}

h4, .h4 {
font-size: 16px;
line-height: 20px;
}
@media (min-width: 992px) {
h4, .h4 {
  font-size: 18px;
  line-height: 22px;
}
}

/*---------- Cards -------------- */
.card a {
overflow: hidden;
}
.card .img-box {
display: block;
overflow: hidden;
}
/*.card .img-box:hover img {*/
/*-webkit-transform: scale(1.1);*/
/*    -ms-transform: scale(1.1);*/
/*        transform: scale(1.1);*/
/*}*/
.card .img-box img {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}


/* Alerts */

.alert {
  --bs-alert-padding-y: 0.5rem;
}

.alert::before{
font-family: "Font Awesome 6 Pro";
font-size: 1.6em;
margin-inline: 0.5rem;
vertical-align: middle;
}

.alert-info::before {
content:'\f05a';
}

.alert-warning::before {
content:'\f06a';
}
.alert-success::before {
    content: '\f164';
}

.alert-danger::before {
content:'\f071';
}

/* --------Blockquote Styling ------------------- */

blockquote, .blockquote {
text-align: justify;
font-style: italic;
}
blockquote::before, .blockquote::before {
display: block;
content: "\f10d";
font-family: "Fontawesome";
left: 0;
text-indent: 0;
color: inherit;
top: 0;
transform: translateY(0%);
font-size: 2em;
margin-bottom: 5px;
color: var(--union-pink);
}

/* ---------- Links ---------- */

.link {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
font-size: 16px;
line-height: 19px;
font-weight: 500;
text-transform: capitalize;
color: #007bff;
}
.link i {
font-size: 18px;
line-height: 1;
}

.link-external::after {
content:'\f08e';
font-family: "Font Awesome 6 Pro";
margin-left: 0.5rem;
}


/* ---------------- Brush Background ------------------------ */

.brush-bg {
position: relative;
width: -moz-fit-content;
width: fit-content;
z-index:0;
margin-block: 1.4rem;
}

.brush-bg::before {
content:'';
position: absolute;
background-color: var(--union-pink);
background-color: inherit;
opacity: 1;
z-index: -1;
inset: 0px;
transform: scale(1.5, 1.8);
-webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-1.svg);
-webkit-mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;

mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-1.svg);
mask-position: 50% 50%;
mask-repeat: no-repeat;
mask-size: contain;

}

/*@media (min-width: 768px) {*/
/*    .brush-bg:before {*/
/*        transform: scale(1, 1.2);*/
/*    }*/
/*}*/

@media (min-width: 992px) {
  .brush-bg:before {
      transform: scale(1.7, 1.6);
  }
}

.brush-01::before {

-webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-1.svg);
mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-1.svg);

}

.brush-02::before {
-webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-2.svg);
mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-2.svg);
}

.brush-03::before {
-webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-3.svg);
mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-brushstroke-3.svg);
}

/* --------Homepage Floating Small Logo */

.logo-sm {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #459C84;
}
.logo-sm img {
  display: block;
  max-width: 100%;
  height: auto;
}


/*-----------------------------------
  Social Media Button Links
-------------------------------------*/

/*Round button styling*/
.social-button{
  --su-transition-speed: 0.3s;
  --su-transition-delay: 0.1s;
  --su-transition-type: ease-in-out;
display: block;
position: relative;
width: auto;
height: 60px;
max-width: 60px;
margin: 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
transition: all var(--su-transition-speed) var(--su-transition-type) var(--su-transition-delay);
/*order: 2;*/
padding: 0;
}

/*.social-button#instagram {*/
/*    background: radial-gradient(circle, #fff 0%, #fff 100%);*/
/*}*/

.social-button:hover {
    transition: all var(--su-transition-speed) var(--su-transition-type);

}
/*Round social button expanding */
.social-button.expanding {
  --su-transition-speed: 0.3s;
  --su-transition-delay: 0.8s;
  --su-transition-type: ease-in-out;
  transition: max-width var(--su-transition-delay) var(--su-transition-type), color var(--su-transition-speed) var(--su-transition-type) var(--su-transition-delay), background var(--su-transition-speed) var(--su-transition-type) var(--su-transition-delay);
}
.social-button.expanding:hover{
  transition: max-width calc(var(--su-transition-delay) *0.8) var(--su-transition-type), color var(--su-transition-speed) var(--su-transition-type), background var(--su-transition-speed) var(--su-transition-type);
max-width: 100%;
/*order: 1;*/
}
/*widget link styling*/
.social-button :where(a, .msl-propvalue) {
display: inline-flex;
width: auto;
height: 100%;
margin-right:10px;
padding-right: 10px;
padding-left: 60px;
color: transparent;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 50px;
line-height: 1.2em;
text-decoration: none;
background: none;
}

/* Stops site link styling */
/*.social-button a:hover,*/
/*.social-button .msl-propvalue:hover {*/
/*    text-decoration: none;*/
/*    color: var(--union-white);*/
/*}*/

.social-button:hover :is(a, .msl-propvalue), .social-button :is(a, .msl-propvalue):hover {
  text-decoration: none;
  color: var(--union-white);
}

/* button background hover colours*/


#email.social-button:hover {
background: var(--union-skyblue);
}
#phone.social-button:hover {
background: var(--union-green);
}

#website.social-button:hover{
background: var(--union-red);
}

#facebook.social-button:hover{
background: #4267B2;
}

#instagram.social-button:hover{
  background: var(--union-red);
background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

#twitter.social-button:hover{
background: #1DA1F2;
}

#youtube.social-button:hover{
background: #ff0000;
}

#tiktok.social-button:hover{
background: #ff0050;
}

#snapchat.social-button:hover{
background: #fffc00;
}

#discord.social-button:hover{
background: #7289da;
}

#linktree.social-button:hover{
background: #1de9b6;
}

/* Icon styling */
.social-button > ::before {
    --icon-font-size: 25px;
  font-family: "Font Awesome 6 Pro";
  font: var(--fa-font-solid);
  font-size: var(--icon-font-size);
  line-height: 0px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 30px;
  top: 50%;
  transition: all var(--su-transition-speed) var(--su-transition-type) var(--su-transition-delay);
}

.social-button:hover > :before {
  color: var(--union-white);
  transition: all var(--su-transition-speed) var(--su-transition-type);
}

/* Icon for email */
#email.social-button > :before {
  content: '\f0e0';
  color: var(--union-skyblue);
}

#email.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for phone */
#phone.social-button > :before {
  content: '\f095';
  color: var(--union-green);
}

#phone.social-button:hover > :before {
  color: var(--union-white);
}


/* Icon for Website*/
#website.social-button > :before {
  content: '\f0ac';
  color: var(--union-red);
}

#website.social-button:hover > :before {
  color: var(--union-white);
}


/* Icon for Facebook*/
#facebook.social-button > :before {
  font: var(--fa-font-brands);
  font-size: var(--icon-font-size);
  content: '\f39e';
  color: #4267B2;
}

#facebook.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for Instagram*/
#instagram.social-button > :before {
  font: var(--fa-font-brands);
  font-size: var(--icon-font-size);
  content: '\f16d';
  color: var(--union-red);
  font-size: 30px;
}

#instagram.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for Twitter*/
#twitter.social-button > :before {
   font: var(--fa-font-brands);
   font-size: var(--icon-font-size);
  content: '\f099';
  color: #1DA1F2;
}

#twitter.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for Youtube */
#youtube.social-button > :before {
  font: var(--fa-font-brands);
  font-size: var(--icon-font-size);
  content: '\f167';
  color: #ff0000;
}

#youtube.social-button:hover > :before {
  color: var(--union-white);
}


/* Icon for Tiktok*/
#tiktok.social-button > :before {
  font: var(--fa-font-brands);
  font-size: var(--icon-font-size);
  content: '\e07b';
  color: #ff0050;
}

#tiktok.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for snapchat*/
#snapchat.social-button > :before {
 font: var(--fa-font-brands);
 font-size: var(--icon-font-size);
  content: '\f2ac';
  color: #fffc00;
  color:var(--union-yellow);
  font-size: 30px;
  font-weight: 900;
}

#snapchat.social-button:hover > :before {
  color: var(--union-black);
}

/* Icon for discordServer*/
#discord.social-button > :before {
  font: var(--fa-font-brands);
  font-size: var(--icon-font-size);
  content: '\f392';
  color: #7289da;
}

#discord.social-button:hover > :before {
  color: var(--union-white);
}

/* Icon for linktree*/
#linktree.social-button > :before {
    
  content: "\f1bb";
  /* content: ""; */
  /*background: url(/stylesheet/su2020/linktree.svg) no-repeat;*/
  /*background-size: 30px 30px;*/
   /* -webkit-mask-image: url(/stylesheet/su2020/linktree.svg); */
  /* mask-image: url(/stylesheet/su2020/linktree.svg); */
  /* -webkit-mask-size: contain; */
  /* mask-size: contain; */
  /* display: inline-block; */
  /* width: 50%; */
  /* height: 50%; */
  color: #26a69a;
  background-color:#26a69a;

}

#linktree.social-button:hover > :before {
  color: var(--union-white);
  background-color: var(--union-white);
}

/* End of Social Media Buttons */

/*------------- Site Element Decorations ------------------ */

/* Block Decoration */

.has-decoration {
position: relative;
/* overflow: hidden; */
}


/* Hats and Stars */
.has-decoration .img-decoration.shape-img1 {
width: 50px;
right: 8%;
top: 2px;
z-index: 6;
/* -webkit-mask-image: url(../Resources/shape-img01.svg);
-webkit-mask-size: cover;
mask-image: url(../Resources/shape-img01.svg);
mask-size: cover;
background-color: var(--union-white); */
}
@media (min-width: 992px) {
.has-decoration .img-decoration.shape-img1 {
  width: 65px;
  right: 10%;
}
}
@media (min-width: 1200px) {
.has-decoration .img-decoration.shape-img1 {
  width: 88px;
  right: 22%;
}
}
.has-decoration .img-decoration.shape-img2 {
width: 130px;
left: -45px;
bottom: 40px;
/* -webkit-mask-image: url(../Resources/shape-img02.svg);
-webkit-mask-size: cover;
mask-image: url(../Resources/shape-img02.svg);
mask-size: cover;
background-color: var(--union-white); */
}
@media (min-width: 992px) {
.has-decoration .img-decoration.shape-img2 {
  width: 200px;
  left: -55px;
  bottom: 50px;
}
}
@media (min-width: 1200px) {
.has-decoration .img-decoration.shape-img2 {
  width: 260px;
}
}

/* Blobs */

.has-decoration.blobs .img-decoration {
/* display: none; */
  display: block;
position: absolute;
z-index: -1;
transform-origin: center;
}

.has-decoration.blobs .img-decoration.shape-img1 {
top: 0%;
right: 10%;
width: 300px;
height: auto;
transform: translate(50%, -50%);

}
@media (min-width: 1200px) {
.has-decoration.blobs .img-decoration.shape-img1 {
  width: 456px;
}
}
.has-decoration.blobs .img-decoration.shape-img2 {
bottom: 30%;
left: 0%;
width: 300px;
height: auto;
transform: translate(-50%, 50%);

}
@media (min-width: 1200px) {
.has-decoration.blobs .img-decoration.shape-img2 {
  width: 490px;
  bottom: 40%;
}
}
.has-decoration.blobs .img-decoration.shape-img3 {
bottom: 0px;
right: 15%;
width: 300px;
height: auto;
transform: translate(50%, 50%);

}
@media (min-width: 1200px) {
.has-decoration.blobs .img-decoration.shape-img3 {
  width: 490px;

}
}

.has-decoration.body-decoration .shape-img1,
.has-decoration.body-decoration .shape-img2 {
/* display: none; */
position: absolute;
top: 40px;
left: 10%;
width: 100px;
z-index: -1;
}
@media (min-width: 768px) {
.has-decoration.body-decoration .shape-img1,
.has-decoration.body-decoration .shape-img2 {
  display: block;
}
}
@media (min-width: 1200px) {
.has-decoration.body-decoration .shape-img1,
.has-decoration.body-decoration .shape-img2 {
  left: 14%;
  width: 170px;
}
}
.has-decoration.body-decoration .shape-img2 {
top: 60px;
left: auto;
right: 15%;
width: 210px;
}
@media (min-width: 1200px) {
.has-decoration.body-decoration .shape-img2 {
  right: 15%;
  width: 412px;
}
}
.has-decoration.body-decoration .logo-large {
width: 350px;
position: absolute;
top: 40%;
right: -22%;
opacity: 0.1;
z-index: -1;
}
@media (min-width: 768px) {
.has-decoration.body-decoration .logo-large {
  width: 380px;
  top: 20%;
  right: -22%;
}
}
@media (min-width: 992px) {
.has-decoration.body-decoration .logo-large {
  width: 650px;
  top: 30%;
  right: -24%;
}
}
@media (min-width: 1366px) {
.has-decoration.body-decoration .logo-large {
  width: 845px;
  right: -20%;
}
}

/* Image Decorations */
.image-has-decoration {
position: relative;
isolation: isolate;
}

.image-has-decoration::before {
content:'';
position: absolute;
/* mask-image: url(../images/shape-img-01.svg);
-webkit-mask-image: url(../images/shape-img-01.svg);  */

opacity: 1;
z-index: -1;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 100%;
inset: 0;
transform: translateY(20%) rotate(130deg);

background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-blobs-2.svg);
background-position: center;
background-size: contain;
background-repeat: no-repeat;

}

@media (max-width: 996px) {
.image-has-decoration::before {

  transform: translate(30%,18%) rotate(130deg);

}

}

/* Background Patterns */

.bg-pattern {
background-repeat: repeat;
/* backdrop-filter: brightness(40%); */
/* -webkit-mask-repeat: repeat;
-webkit-mask-size: 20vw;

mask-repeat: repeat;
background-color: #285AEB; */
}

.bg-pattern-lines {
background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-bg-lines.svg);
background-size: 20vw;
/* -webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-bg-lines.svg); */
/* mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-bg-lines.svg); */
}

.bg-pattern-roughlines {
background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-bg-roughlines.svg);
background-size: 60vw;

}

.bg-pattern-wiggly {
background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-bg-wiggly.svg);
background-size: 50vw;

}

.bg-gradiant {
--top-colour: var(--union-green);
--bottom-colour: var(--union-cobaltblue);
--top-percentage: 0%;
--bottom-percentage: 100%;

background: -o-linear-gradient(top, var(--top-colour) var(--top-percentage), var(--bottom-colour) var(--bottom-percentage));
background: linear-gradient(to bottom, var(--top-colour) var(--top-percentage), var(--bottom-colour) var(--bottom-percentage));
}


.bg-message::before{
content: '';
position: absolute;
background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1l.svg);
/* background-color: var(--union-pink); */
background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

/* -webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1l.svg);
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;

mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1l.svg);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat; */
inset: 0;
z-index: -1;
transform: scale(1.2);
}

.bg-message-2r::before{

background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1r.svg);
/* background-color: var(--union-pink); */
background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

/* -webkit-mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1l.svg);
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;

mask-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-1l.svg);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat; */

transform: scale(1.2);
}

/*------------------------------------*/

.page-nav.btn-group {
  border-radius: 50px;
      max-width: 770px;

}

.page-nav {
    width: 100%;
}

.page-nav a.btn > *{
    display: flex;
    flex-direction: column;
    justify-content:center;
    margin-block: 0.3rem
}

.page-nav a i {
    font-size: 1.8em;
}



/* --------------------------------------------------------- */

/* Hero - Currently unused */

.hero-banner {
position: relative;
overflow: hidden;
/*margin-bottom: 60px;*/
max-height: 130vh;
overflow:hidden;

}

@media (min-width: 996px) {
.hero-banner {
  min-height: 70vh;
}
}

@media (min-width: 1200px) {
.hero-banner {
  min-height:60vh;
}
}
.hero-banner .img {
position: absolute;
z-index: 4;
}
.hero-banner .img.shape-img1 {
width: 50px;
height: auto;
left: 20%;
top: 8px;
z-index: 6;
}
@media (min-width: 992px) {
.hero-banner .img.shape-img1 {
  width: 68px;
  left: 22%;
  top: -30px;
}
}
@media (min-width: 1200px) {
.hero-banner .img.shape-img1 {
  width: 88px;
  left: 28%;
  top: -22px;
}
}
.hero-banner .img.shape-img2 {
width: 130px;
height: auto;
right: -40px;
top: 15px;
}
@media (min-width: 992px) {
.hero-banner .img.shape-img2 {
  width: 170px;
  right: -55px;
  top: 35px;
}
}
@media (min-width: 1200px) {
.hero-banner .img.shape-img2 {
  width: 260px;
  right: -60px;
  top: 65px;
}
}
.hero-banner .img.shape-img3 {
display: none;
width: 130px;
height: auto;
left: 40%;
bottom: 55px;
-webkit-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
        transform: translateX(-45%);
}
@media (min-width: 768px) {
.hero-banner .img.shape-img3 {
  display: block;
}
}
@media (min-width: 992px) {
.hero-banner .img.shape-img3 {
  width: 170px;
  left: 50%;
  bottom: 65px;
  -webkit-transform: translateX(-65%);
      -ms-transform: translateX(-65%);
          transform: translateX(-65%);
}
}
@media (min-width: 1200px) {
.hero-banner .img.shape-img3 {
  width: 260px;
  left: 48%;
  bottom: 75px;
}
}

/* ----------Page Banner Stylings ------------- */

.page-banner {
    width: 100%;
    height: 50vh;
    height: 50svh;
    height: 350px;
    /* color: #fff; */
    position: relative;
    z-index: 0;
    isolation: isolate;
    background-color: var(--union-navy);
    overflow-x: hidden;
}
@media (min-width: 768px) {
    .page-banner {
      height: 55vh;
      height: 55svh;
    }
}
@media (min-width: 992px) {
    .page-banner {
        height: 60vh;
      height: 60svh;
    }
}
@media (min-width: 1200px) {
    .page-banner {
        height: 65vh;
      height: 65svh;
    }
}

.page-banner .heading-box {
margin-inline: auto;
background: var(--union-pink);
min-width: 300px;
border-radius: 2rem;
}

.page-banner .heading-box h1 {
margin: 0;
}

#wrapper {
overflow: hidden;
position: relative;
}

.contact-page {
background: -o-linear-gradient(45deg, #d8a729 0%, #c34f91 100%);
background: linear-gradient(45deg, #d8a729 0%, #c34f91 100%);
}
.socialmedia-page {
background: -webkit-gradient(linear, left top, left bottom, from(#c34f91), to(#465cc2));
background: -o-linear-gradient(top, #c34f91 0%, #465cc2 100%);
background: linear-gradient(to bottom, #c34f91 0%, #465cc2 100%);
}


.page-banner .banner-img {
overflow: hidden;
width: 100%;
height: 100%;

}

.page-banner .banner-img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
   object-fit: cover;
   filter: brightness(0.4);
}

.page-banner .banner-img video {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
   object-fit: cover;
   filter: brightness(0.7);
}



.page-banner .img-decoration {
display: block;
position: absolute;
height: auto;
z-index: 4;
}

.page-banner .container {
    display: flex;
    align-items: center;
    height: 100%;
}


.page-banner:has(.banner-img) .container {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
}
.page-banner .text-box {
width: 100%;
color: var(--union-white);
}
.page-banner .title {
display: block;
color: var(--union-white);
font-weight: 500;
/* font-size: 16px;
line-height: 22px; */
text-transform: capitalize;
}


/* -------------------------------------------------------- */

.message-block {
position: relative;
}
.message-block .img-box {
-ms-flex-negative: 0;
    flex-shrink: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0;
-webkit-box-shadow: none;
        box-shadow: none;
position: relative;
margin: 0 auto 15px;
overflow: hidden;
}
@media (min-width: 768px) {
.message-block .img-box {
  margin: 0 -40px 0 0;
}
}
@media (min-width: 992px) {
.message-block .img-box {
  width: 280px;
  height: 280px;
  margin-inline-end: -40px;
}
}
@media (min-width: 1200px) {
.message-block .img-box {
  width: 336px;
  height: 336px;
}
}
.message-block .img-box img {
display: block;
width: 100%;
}
/* .message-block .message-box {
max-width: 375px;
height: 180px;
margin: 0 auto;
padding: 20px 30px 55px;
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media (min-width: 576px) {
.message-block .message-box {
  max-width: 500px;
  height: 290px;
  padding: 50px 35px 90px;
}
}
@media (min-width: 768px) {
.message-block .message-box {
  max-width: 806px;
  height: 288px;
  margin: 0;
  padding: 30px 53px 80px;
}
}
@media (min-width: 992px) {
.message-block .message-box {
  height: 370px;
  padding: 55px 60px 120px;
}
}
@media (min-width: 1200px) {
.message-block .message-box {
  height: 419px;
  padding: 65px 60px 130px;
}
} */



.message-box {
margin: 0 auto;
position: relative;
padding: 4.5rem 30px 55px;
/* background-image: url(../images/bg-message.svg);
background-position: center;
  background-size: contain;
  background-repeat: no-repeat; */
overflow: visible;
}

/* .message-box:before {
content: '';
position: absolute;
background-image: url(https://www.swansea-union.co.uk/stylesheet/su2022/decor-speech-3r.svg);
background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
inset: -1rem;
z-index: -1;
transform: scale(1.2);

} */


@media (min-width: 576px) {
.message-box {
  padding: 50px 35px 90px;
}
}
@media (min-width: 768px) {
.message-box {
  margin: 0;
  padding: 55px 53px 80px;
}
}
@media (min-width: 992px) {
.message-box {
  padding: 55px 60px 120px;
}
}
@media (min-width: 1200px) {
.message-box {
  padding: 65px 60px 130px;
}
}

/* ---------------- Officer Pages ---------------- */

.elected-officer {
overflow: hidden;
position: relative;
}

.elected-officer .head {
text-align: center;
}
@media (min-width: 768px) {
.elected-officer .head {
  text-align: left;
}
}
.elected-officer .date {
display: block;
font-weight: 700;
}
.elected-officer .name {
font-size: 18px;
line-height: 22px;
font-weight: 700;
}
@media (min-width: 1200px) {
.elected-officer .name {
  font-size: 20px;
  line-height: 24px;
}
}
.elected-officer .img-box {
display: block;
max-width: 90%;
margin: 0 auto;
border-radius: 50%;
}
@media (min-width: 768px) {
.elected-officer .img-box {
  max-width: 280px;
}
}
@media (min-width: 1200px) {
.elected-officer .img-box {
  max-width: 330px;
}
}
.elected-officer .img-box:hover img {
-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}
.elected-officer .img-box img {
display: block;
border-radius: 50%;
max-width: 100%;
height: auto;
margin: 0 auto;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}


.whats-on {
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.container-large {
max-width: 1366px;
margin: 0 auto;
}




/* -----------About us / contact us Page ---------------- */

.about-cols {
overflow: hidden;
}
.about-cols .img-box {
position: relative;
width: 100%;
margin: 0 auto;
aspect-ratio: 1 / 1;
}

.about-cols .img-box img {
border-radius: 100%;
width:100%;
height: 100%;
object-fit: cover;

}
@media (min-width: 992px) {
.about-cols .img-box img {
  /* border-radius: 0 300px 300px 0; */
  transform: translateX(-12%);
}
}
.about-cols .img-box img.shape-img {
display: none;
position: absolute;
left: 105px;
bottom: -28px;
width: 300px;
height: auto;
border-radius: 0;
z-index: -1;
}
@media (min-width: 992px) {
.about-cols .img-box img.shape-img {
  display: block;
}
}
@media (min-width: 1200px) {
.about-cols .img-box img.shape-img {
  left: 120px;
  bottom: -35px;
  width: 400px;
}
}

.text-block {
position: relative;
}
@media (min-width: 992px) {
.text-block p {
  margin-bottom: 20px !important;
}
}

.map-section {
overflow: hidden;
}

address {
width: 100%;
margin: 0 0 10px;
}
address .text {
display: block;
padding: 2px 0;
}

.map-holder {
overflow: hidden;
border-radius: 40px;
}
.map-holder iframe {
width: 100%;
height: 300px;
}
@media (min-width: 768px) {
.map-holder iframe {
  height: 355px;
}
}
@media (min-width: 992px) {
.map-holder iframe {
  height: 435px;
}
}

.img-circle, .img-circle img {
border-radius: 50%;
overflow: hidden;
}

/* ------------------- */

/* Drop-Accord - Accordion variant*/

.drop-accord.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}

.drop-accord .accordion-item {
margin: 1rem 0;
background-color: var(--bs-accordion-bg);
color: var(--bs-accordion-color);
border-radius: var(--bs-accordion-border-radius);
border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}

.drop-accord .accordion-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}

.drop-accord .accordion-header::after {
content: "\f106";
font-family: "Font Awesome 6 Pro";
font-size: 1.5rem;
position: absolute;
right: 1rem;
transition: var(--bs-accordion-btn-icon-transition);
}

.drop-accord .accordion-header.active::after {
/* content: "\f107"; */
transform: var(--bs-accordion-btn-icon-transform);
}

.drop-accord .accordion-collapse {
max-height: 0;
color: var(--union-black);
background-color: var(--union-white);
border-radius: 0px 0px 0.7rem 0.7rem;
overflow: hidden;
transition: all 0.5s ease-in-out;
}

.drop-accord .accordion-body {

border-top: 1px solid;
border-image: linear-gradient(to right, transparent, var(--union-pink), transparent) 1;
}


/*accordion-spaced*/

.accordion-spaced.accordion {
width: 90%;
max-width: 100%;
margin: 2rem auto;
}

.accordion.accordion-spaced {
    --bs-accordion-color: var(--union-black);
    --bs-accordion-bg: var(--union-white);
    --bs-accordion-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);;
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-accordion-btn-color, var(--union-navy));
    --bs-accordion-border-width: 2px;
    --bs-accordion-border-radius: 1rem;
    /* --bs-accordion-inner-border-radius: calc(0.6rem - 1px); */
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--union-navy);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-icon-width: auto;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: none;
    --bs-accordion-btn-focus-border-color: var(--bs-btn-active-color);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(54, 68, 123, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-accordion-btn-color);
    --bs-accordion-active-bg: var(--bs-accordion-bg);
}

.accordion-spaced .accordion-item {
  margin: 1rem 0;
  background-color: var(--bs-accordion-bg);
  color: var(--bs-accordion-color);
  border-radius: var(--bs-accordion-border-radius);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  border: none;
  box-shadow: var(--bs-accordion-box-shadow);
}

.accordion-spaced .accordion-header {
  /* min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer; */
}

.accordion-spaced .accordion-button {
  border-radius: var(--bs-accordion-border-radius);
  padding-right: calc(2* var(--bs-accordion-btn-padding-x) + 10px);
  justify-content: space-between;
}

.accordion-spaced .accordion-button:not(.collapsed) {
  box-shadow: none;
}
.accordion-spaced .accordion-item:first-of-type .accordion-button.collapsed {
  border-radius: var(--bs-accordion-border-radius);
}

.accordion-spaced .accordion-item:last-of-type .accordion-button.collapsed {
  border-radius: var(--bs-accordion-border-radius);
}

.accordion-spaced .accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion-spaced .accordion-button::after {
content: "\f107";
font-family: "Font Awesome 6 Pro";
font-size: 1.5rem;
position: absolute;
right: var(--bs-accordion-btn-padding-x)
/* transition: var(--bs-accordion-btn-icon-transition); */
}

.accordion-spaced .accordion-header.active::after {
/* content: "\f107"; */
transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-spaced .accordion-collapse {
/*max-height: 0;*/
  /* color: var(--union-black);
  background-color: var(--union-white); */
  overflow: hidden;
}

.accordion-spaced .accordion-body {
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, var(--bs-accordion-border-color), transparent) 1;
}





/* -------- Form Styling--------------- */


.form-search {
width: 100%;
}
.form-search .label {
display: block;
font-size: 20px;
line-height: 25px;
font-weight: 700;
margin: 0 0 10px 15px;
}
@media (min-width: 768px) {
.form-search .label {
  font-size: 25px;
  line-height: 30px;
  margin: 0 0 15px 25px;
}
}
@media (min-width: 992px) {
.form-search .label {
  font-size: 30px;
  line-height: 35px;
  margin: 0 0 15px 25px;
}
}

.input-box {
width: 100%;
position: relative;
}
.input-box.has-icon .ico {
position: absolute;
top: 12px;
right: 16px;
font-size: 25px;
line-height: 1;
color: #CBCBCB;
border: 0;
outline: none;
-webkit-box-shadow: none;
        box-shadow: none;
padding: 0;
background: none;
}
@media (min-width: 768px) {
.input-box.has-icon .ico {
  top: 10px;
  right: 20px;
  font-size: 34px;
}
}
@media (min-width: 1200px) {
.input-box.has-icon .ico {
  top: 20px;
  right: 25px;
}
}
.input-box.has-icon .form-control {
padding-right: 50px;
}
@media (min-width: 768px) {
.input-box.has-icon .form-control {
  padding-right: 70px;
}
}


.form-control::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.2);
}
.form-control::-moz-placeholder {
opacity: 1;
color: rgba(0, 0, 0, 0.2);
}
.form-control:-moz-placeholder {
color: rgba(0, 0, 0, 0.2);
}
.form-control:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.2);
}
.form-control.placeholder {
color: rgba(0, 0, 0, 0.2);
}


.form-control.bg-union-green {
color: #fff;
}
.form-control.bg-union-green::-webkit-input-placeholder {
color: #fff;
}
.form-control.bg-union-green::-moz-placeholder {
opacity: 1;
color: #fff;
}
.form-control.bg-union-green:-moz-placeholder {
color: #fff;
}
.form-control.bg-union-green:-ms-input-placeholder {
color: #fff;
}
.form-control.bg-union-green.placeholder {
color: #fff;
}

.form-group {
position: relative;
margin: 0 0 25px;
}
@media (min-width: 768px) {
.form-group {
  margin: 0 0 35px;
}
}
.form-group label {
display: block;
font-size: 16px;
line-height: 20px;
color: #C34F91;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.form-group label {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 15px;
}
}

textarea.form-control {
height: 246px;
resize: none;
padding: 25px 25px 15px;
}

#main .vp_form input.textbox, .vp_form textarea.textbox {
    width: 100%;
}

#main .vp_form .input-group :is(input.textbox, .textarea.textbox, input.date_date) {
     width: 1%; 
}

#main .vp_content span.vp_range {
    /*display: flex;*/
}

#main .vp_content input.textbox {
    padding: 0.6rem 1rem;
}

#main .todate:before, #main .fromdate:before {
    margin-right: 5px;
    vertical-align: middle;
    margin-block: auto;
}

#main .fromdate:before {
    content: 'Start Date';
}

#main .todate:before {
    content: 'End Date';
}

#main .vp_rangeseparator {
    visibility: hidden;
 
}

#main .vp_rangeseparator:before {
    content:'\f178';
    font-family: "Font Awesome 6 Pro";
    visibility: visible;
    
}

#main .msl_admin_page .vp_form .checkbox input.form-check-input {
    width: 1em;
    /*margin-left: -1.5em;*/
}



.contact-section {
position: relative;
z-index: 6;
}

.contact-form {
max-width: 905px;
margin: 0 auto;
padding: 35px 20px 50px;
border-radius: 25px;
background: #fff;
}
@media (min-width: 768px) {
.contact-form {
  border-radius: 60px;
  padding: 60px 50px 50px;
}
}
.contact-form .form-group label {
margin-left: 20px;
}
@media (min-width: 768px) {
.contact-form .form-group label {
  margin-left: 30px;
}
}




/* -------------- */


.older-news {
overflow: hidden;
}
.older-news .card {
width: 100%;
height: 90%;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
@media (min-width: 768px) {
.older-news .card {
  margin-bottom: 40px;
}
}
@media (min-width: 992px) {
.older-news .card {
  margin-bottom: 50px;
}
}
@media (min-width: 1200px) {
.older-news .card {
  margin-bottom: 70px;
}
}

.older-news .img-box {
display: block;
overflow: hidden;
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.older-news .img-box:hover img {
-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
        transform: scale(1.1);
}
.older-news .img-box img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.older-news .card-body {
height: 50%;
overflow: hidden;
padding: 20px 1rem 38px;
}
@media (min-width: 1200px) {
.older-news .card-body {
  padding: 20px 1rem 50px;
}
}

.older-news .card .btn-more {
font-size: 2rem;
/* position: absolute; */
right: 0;
}

/* .older-news .card .btn-more {
position: absolute;
left: 0;
bottom: 0;
font-size: 35px;
line-height: 1;
}
@media (min-width: 1200px) {
.older-news .card .btn-more {
  font-size: 45px;
}
} */

.older-news .card .msl-leader {
max-height: 40%;
overflow: hidden;
}

/* ------------------------------- */


/* Social Media section - replaced by SnapWidget */
.socialmedia-section {
position: relative;
}
.socialmedia-section .social-cols .img-box {
width: 350px;
position: relative;
z-index: 1;
margin: 0 auto;
}
@media (min-width: 576px) {
.socialmedia-section .social-cols .img-box {
  width: 500px;
}
}
@media (min-width: 992px) {
.socialmedia-section .social-cols .img-box {
  width: 470px;
  margin: 0;
}
}
@media (min-width: 1200px) {
.socialmedia-section .social-cols .img-box {
  width: 600px;
}
}
.socialmedia-section .social-cols .img-box img.shape-img {
display: none;
position: absolute;
right: -10px;
bottom: -80px;
height: auto;
border-radius: 0;
z-index: -1;
}
@media (min-width: 992px) {
.socialmedia-section .social-cols .img-box img.shape-img {
  display: block;
}
}
@media (min-width: 1200px) {
.socialmedia-section .social-cols .img-box img.shape-img {
  right: 0;
  bottom: -60px;
}
}

.social-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 23px;
}
@media (min-width: 768px) {
.social-list {
  font-size: 22px;
  line-height: 25px;
}
}
@media (min-width: 992px) {
.social-list {
  font-size: 25px;
  line-height: 28px;
}
}
.social-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 5px 0;
}
@media (min-width: 768px) {
.social-list li {
  padding: 8px 0;
}
}
.social-list .title {
display: block;
font-weight: 800;
text-transform: capitalize;
margin: 0 10px 0 0;
}
.social-list a {
display: block;
color: #fff;
}

.venues-section {
position: relative;
}

/* Campaigns */
.campaign-section {
position: relative;
z-index: 1;
}

.campaign-section .img-holder {
position: relative;
background: transparent;
}
.campaign-section .img-holder .img-box{
position: relative;
width: 250px;
height: 250px;
border-radius: 50%;
border: 0.4rem solid #fff;
-webkit-box-shadow: 0 3px 80px rgba(0, 0, 0, 0.16);
        box-shadow: 0 3px 80px rgba(0, 0, 0, 0.16);
z-index: 5;
overflow: hidden;
padding: 0;

}


@media (min-width: 768px) {
.campaign-section .img-holder .img-box {
  width: 300px;
  height: 300px;
}
}

@media (min-width: 992px) {
.campaign-section .img-holder .img-box {
  width: 350px;
  height: 350px;
}
}

.campaign-section .img-holder .img-box img {
display: block;
width: 100%;
height: 100%;
}

/* Officer */

.officer-section {
overflow: hidden;
position: relative;
}

.officer-block {
position: relative;
}
.officer-block .img-box {
overflow: hidden;
padding: 0;
margin: 0 auto 20px;
border: 5px solid #fff;
border-radius: 50%;
-webkit-box-shadow: 0 3px 80px rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 80px rgba(0, 0, 0, 0.16);
}


@media (min-width: 992px) {
.officer-block .img-box {

  margin: 0 auto 20px;
  border: 10px solid #fff;
}
}
.officer-block .img-box img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 1/1;
border-radius: 100%;

}

.officer-section .message-box {
padding-inline: 3rem;

}

@media (min-width: 992px){
.officer-section .message-box {
padding-inline: 12rem;
}
}

/* Roles */

.roles-block {
position: relative;
border-radius: 36px;
}
.roles-block .img-box {
width: 100%;
height: 100%;
border-radius: 100%;
}

.roles-block .img-box a {
pointer-events: none;
}

.roles-block .img-box img:hover, .roles-block .img-box:hover img {
transform: scale(1);
}

.roles-block .img-box img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 100%;
}
.roles-block .list {
list-style: none;
margin: 0;
padding: 0;
}
.roles-block .list li {
padding: 10px 0;
}


.roles-block .list-group {
--bs-list-group-bg: transparent;
--bs-list-group-color: var(--union-white);
--bs-list-group-item-padding-y: 0.5rem;
--bs-list-group-border-width: 0px;
}

.roles-block .list-group-item:before {
content:'- ';
}

/* Society */

.society-section {
overflow: hidden;
position: relative;
width: 100%;
}
.society-section .img {
display: none;
width: 400px;
height: auto;
position: absolute;
z-index: -1;
}
@media (min-width: 768px) {
.society-section .img {
  display: block;
}
}
@media (min-width: 1366px) {
.society-section .img {
  width: 490px;
}
}
.society-section .img.shapeimg-01 {
top: 100px;
right: -250px;
}
.society-section .img.shapeimg-02 {
bottom: 100px;
left: -300px;
}