@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Poppins:ital,wght@0,600;0,800;1,600;1,800&display=swap');
@font-face {
    font-family: 'Infour';
    src: url('Infour.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Infour';
    src: url('Infour Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

:root {
	
	--black: #000000;
	--charcoal: #313131;
	--red: #e3013d;
	--green: #53af31;
	--dark-green: #3A7A22;
	--yellow: #f1ff45;
	--dark-yellow: #ffc81a;	
	--turq: #00ff9f;
	--orange: #ff794f;
	--turql: #89ffc1;
	--orangel: #ffa76c;
	--white: #ffffff;
	--offwhite: #e3e3e3;
	--large-triangle: 300px;
	--large-triangle-offset: 150px;
	--padding: 45px;
	--line-weight: 4px;
	
}

@media screen and (max-width:1400px){
	
	:root {
	
	--large-triangle: 260px;
	--large-triangle-offset: 130px;
	--padding: 26px;
	--line-weight: 3px;
}
	
}

@media screen and (max-width:1000px){
	
	:root {
	
	--large-triangle: 200px;
	--large-triangle-offset: 100px;
	--padding: 20px;
	--line-weight: 2px;
}
	
}

/* Fixes */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}[hidden]{display:none;}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:900; letter-spacing: 0.2px;}
dfn{font-style:italic;}
mark{background:#ffe564;color:#000;}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}
pre{white-space:pre-wrap;word-wrap:break-word;}
q{quotes:\201C \201D \2018 \2019;}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-.5em;}
sub{bottom:-.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}

fieldset{border:none;border-left:3px solid rgba(0,0,0,0.3);margin:10px 0;padding:0em 1em 0em;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}

button,html input[type=button],
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}

input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}
body,figure{margin:0;}
legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

 *, *::before, *::after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
	 
	 text-rendering: optimizeLegibility;}

h1,h2,h3,h4 {font-feature-settings: "dlig" 1, "liga" 1;  font-variant-ligatures: discretionary-ligatures;}

.skiplink {
    position: absolute;
    left: -9999em;
}
.skiplink:focus{left: 19px;
    z-index: 200;
    top: 12px;}

html {position:relative;min-width:320px; padding:0; margin: 0;  font-family:"Lato",Arial, Helvetica, sans-serif; color:var(--black);}
body {margin:0px;font-size:17px;line-height:1.5em; perspective:1px; overflow-y:auto; overflow-x:hidden;}
.mobile {display:inherit;}.desktop{display:none;}
@media screen and (min-width:600px){
	body {font-size:15px;}
}
@media screen and (min-width:900px){
	body {font-size:19px;}
	.mobile {display:none;}.desktop{display:inherit;}
}
@media screen and (min-width:1200px){
	body {font-size:22px;}
}

@keyframes triangles {
	0% {background-position-y:0vw;}
	100%{background-position-y:-17.987838528177839042597946633966vw;}
}

header {position:relative;padding-bottom: 6.666vw;}

.triangle_wallpaper {
	transform-style: preserve-3d;
	perspective: 100px;
	transform:skewY(-7deg);
	transform-origin: top left;
	background: var(--yellow);
	background-image:url("images/yellow_triangles_far.png");
	background-size: 16.66666666vw auto;
	background-position:center center;
	overflow:hidden;
	height:100%;
	width:100%;
	animation: triangles linear 17s infinite;
	position:absolute;
	top:0;left:0;
}

.near_triangles{
	background-image:url("images/yellow_triangles_near.png");
	background-size: 16.66666666vw auto;
	background-position:center center;
	overflow:hidden;
	transform: translateZ(10px);
	animation: triangles linear 15s infinite;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	
}

.mid_triangles{
	background-image:url("images/yellow_triangles_mid.png");
	background-size: 16.66666666vw auto;
	background-position:center center;
	overflow:hidden;
	transform: translateZ(5px);
	animation: triangles linear 16s infinite;
	position:absolute;
	top:0;left:0;right:0;bottom:0;
	
}

.bttrip {position: relative;}

.bttri { width:0; height:0; z-index:-1; border-left:30vh solid transparent; border-right:30vh solid transparent; border-bottom:52vh solid var(--yellow); opacity:0.8; transform:skewY(-7deg);
	transform-origin: top left; position:absolute;}

@media screen and (max-width:750px){
	.bttri {display:none;}
}

.behind {z-index:-1;}

.content {max-width:1380px; padding:var(--padding); margin:auto;}
.hidden {display:none;}

header .delivery_partners {max-width:600px;}
#main_logo {margin:auto; max-width:1000px; max-height:460px; text-align:right; position:relative; display:flex;}
#main_logo img {max-width:100%; max-height:100%;}
address {font-style:normal;}
h1 {font-family:"Poppins", sans-serif;  font-size:2.6em; font-weight:800;line-height:1.15em; margin-top:0; margin-bottom: var(--padding);}
h1.ys {text-shadow: -0.18em -0.18em var(--yellow);}
h1.os {text-shadow: -0.18em -0.18em var(--orange);}
h1.ts {text-shadow: -0.18em -0.18em var(--turq);}
h2 {font-family:"Poppins", sans-serif;  font-size:1.5em; font-weight:600;line-height:1.2em;; margin-top:0; margin-bottom: var(--padding);}
a { font-weight:900; text-decoration:none; color:var(--black); padding:0em 0.6em; background:var(--yellow); border-radius:1em;display:inline-block; }
a:hover, a:focus { background:var(--charcoal); color:var(--white); }
a:focus {box-shadow:0 0 0 3px var(--yellow);}
a:active { background:var(--white); color:var(--charcoal); }
div.tag, time.tag, address.tag, a.spectate, a.takepart, .filter { font-weight:900; text-decoration:none; color:var(--black); padding:0em 0.6em 0 1.8em; background:var(--yellow); border-radius:1em;display:inline-block; position:relative;}
.spectate {background:var(--orangel);}
.takepart {background:var(--turql);}
a.spectate, div.spectate.tag {background-color:var(--orange);}
a.spectate::before,a.takepart::before, div.tag::before, time.tag::before, address.tag::before, .filter::before {    content: '';
    background-image: url(images/trophy_black.svg);
    width: 1.4em;
    height: 1.5em;
        margin: -0.55em 0.3em -0.3em -0.5em;
    display: inline-block;
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    vertical-align: middle;
	position:absolute; left:0.6em; top:0.55em;}
a.takepart::before, div.takepart.tag::before, .filter.takepart::before { 
    background-image: url(images/takepart_black.svg);
}
.filter.both::before { 
	width:2.5em;
    background-image: url(images/both_black.svg);
}
a.takepart, div.takepart.tag {background-color:var(--turq);}

.imgLink {border:3px solid #fff;display:inline-block;padding: 5px 5px 0px 5px; background:none;}
.imgLink::after {content:none;}
.imgLink:hover, .imgLink:focus {box-shadow:0 0 0 3px var(--charcoal);}
.imgLink:active {box-shadow:0 0 0 3px var(--black);}

#intro div.takepart {padding:0.1em 1em; border-top-right-radius:5px; border-top-left-radius:5px;}
#intro div.spectate {padding:0.1em 1em; border-bottom-right-radius:5px; border-bottom-left-radius:5px;}
.event_listing { margin-bottom:var(--padding); background: var(--offwhite);}
@media screen and (min-width:750px){
	    #intro div.spectate, #intro div.takepart {padding-right: calc( 3 * var(--padding));}
	#intro div.spectate {padding-left: calc(9 * var(--padding)); background:url("images/trophy_white.svg") var(--orangel); background-size:calc( 7 * var(--padding)) auto ; background-repeat:no-repeat;background-position: left var(--padding) center;}
	#intro div.takepart {padding-right: calc(9 * var(--padding)); background:url("images/takepart_white.svg") var(--turql); background-size:calc( 7 * var(--padding)) auto ; background-repeat:no-repeat;background-position: right var(--padding) center;}
	.event_listing {background:rgba(200,200,200,0.39);backdrop-filter: blur(52px);}
}
section.feature_image img{display:block; margin:auto; max-width:100%; height:auto;}

.event_listing.takepart{box-shadow:-0.3em -0.3em 0 0 var(--turq);}
.event_listing.spectate{box-shadow:-0.3em -0.3em 0 0 var(--orange);}
.tag.time, .tag.venue {font-weight: 500;}
.event_listing .date, .event_listing .time, .event_listing .venue, .event_listing .tag {display:inline-block; margin-bottom: calc( var(--padding) / 2); margin-right: calc( var(--padding) / 2);}
.event_listing .date, .event_listing .time  {background:var(--yellow); border-radius:1em;}
.event_listing .venue  { background:var(--white); border-radius:1em;}
.event_listing .venue a {background:transparent; padding:0}
.event_listing .venue a:focus, .event_listing .venue a:hover, .event_listing .venue a:active {box-shadow:none; color:var(--charcoal); background:transparent;}

.event_listing {display:flex; flex-flow: row; flex-wrap: wrap;align-items: stretch; vertical-align:top;}
.es_image {flex: 0 0 49%; order:2; padding-bottom:0; padding-top:0;align-items: stretch; vertical-align:top;}
.es_image img{width:100%; height:auto; display:block;}
.es_text {flex: 0 8 51%; order: 1; padding-bottom:0; align-items: stretch; vertical-align:top; margin:0;}
.event_listing.takepart .es_text{background: var(--turql);}
.event_listing.spectate .es_text{background: var(--orangel);}
.event_info {order:3; padding-bottom:0;} 
.event_info p:first-child {margin-top:0;} 
.event_info p:last-child {margin-bottom:0;} 
.event_listing .buttons {order:4; width:100%;}

@media screen and (max-width:1000px){
	.event_listing.takepart .es_text{background:transparent;}
.event_listing.spectate .es_text{background:transparent;}
	.es_image {flex: 0 0 100%; order:1}
.es_text {flex: 0 0 100%; order: 2}
}

time.tag.time::before { background-image:url("images/time_black.svg");}
time.tag.date::before { background-image:url("images/calendar_black.svg");}
address.tag.venue::before { background-image:url("images/location_black.svg");}

.btn {background:var(--charcoal); color:var(--white); 
	box-shadow: -0.3em -0.3em 0 0 var(--yellow); 
	margin-left:0.3em; margin-top:0.3em;
	padding: 0.4em 1.5em; font-size:110%;
border-radius: 0; display:inline-block;}

.btn.take {box-shadow: -0.3em -0.3em 0 0 var(--turq); }
.btn.spec {box-shadow: -0.3em -0.3em 0 0 var(--orange); }

.btn_container {display:inline-block; margin-right:var(--padding);}
.btn_container:hover .btn, .btn:focus { background:var(--yellow); color:var(--charcoal); 
}

.btn_container:active .btn, .btn:active { background:var(--white); color:var(--charcoal); 
	box-shadow: -0.15em -0.15em 0 0 var(--yellow); 
	margin-left:0.15em;
	margin-top:0.15em;
	margin-right:0.15em;
	margin-bottom:0.15em;
}

/* Footer */

#delivery_partners {position:relative;}
#delivery_partners .triangle_wallpaper {  transform-origin:bottom left;  padding-bottom: 13vw;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
 box-sizing:content-box;

}

a.delivery_partner {display:block; padding:0; background:transparent;}
.row_one a.delivery_partner img{width:100%; height:auto;}
row {display:flex; align-items:stretch; justify-content: space-between;}
row.row_one {max-width:600px; marign-bottom: var(--padding);}
row.row_two {flex-wrap:wrap; max-wdith:100%;justify-content: flex-start;margin: 0 -1em;}
row.row_two img {height:3em; width:auto;  display:block;}
row.row_two .logo {margin: 1em;  /* and that, will result in a 10px gap */}
.logo.dsw {flex: 0 0 39%;}
.logo.welsh-government {flex: 0 0 13.2%;}
.logo.swansea-council {flex: 0 0 32%;}

#footer {color: #fff;position: relative; background:var(--charcoal);}

#footer .contact_details{padding-top:3.5vh;line-height:1.5em;}
#footer .contact_details div {margin-bottom:0.5em;}
.address, .phone {font-weight:900;}.charity_number, .company_number {display:inline-block;margin-right:15px;}

#footer a {background:#e3013d; color:#fff;}


/* Modal */

#modal {    position: fixed;
    max-width: 95vw;
    max-height: 95vh;
    z-index: 6000;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #fff;
    padding: 1em;
    min-width: 300px;
    border-radius: 1em; display:none;}

#modal_click_off { position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    left: 0;
    top: 0;
z-index: 3000; display:none;}

.button.confirm:not(:hover,:focus) {background:#89e077;}

.small_text {font-size:80%;}

/* Header */

header#mainHeader {background:var(--yellow); padding:var(--padding); display:flex; flex-flow:row;}
.home_header_bar {display:flex; flex-flow:row; flex-wrap: wrap; vertical-align: middle;}
.home_header_bar .del_partners, .home_header_bar .header_options {flex:2; vertical-align: middle;}
.header_options {text-align:right; flex: 2;}
#psf_logo { max-width:200px; flex: 2; margin-top:calc(2px - var(--padding));margin-bottom:calc(0px - var(--padding));}
#psf_logo img {width:100%; display:block;}
#psf_logo.imgLink:not(:active,:hover,:focus){border-color:transparent;}

@media screen and (max-width:750px){
	
	.home_header_bar .del_partners { flex: 0 0 100%;order:2}
	.home_header_bar .header_options {text-align:right; flex: 0 0 100%;order:1; padding-bottom:var(--padding);}
	
}


/* Forms */
.checkbox_item,.radio_item, .select_item{position: relative;}
input[type="checkbox"],input[type="radio"]{
	cursor: pointer;
    position: absolute;
    z-index: 1;
    top: -2px;
    left: -2px;
    width: 44px;
    height: 44px;
    margin: 0;
    opacity: 0;}
.checkbox_label,.radio_label {display: inline-block;
    padding-left: 50px;min-height:40px;position:relative;}
.radio_label {line-height: 40px;}
.checkbox_label::before{
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 3px solid currentColor;
    background:rgba(123,123,123,0.1);}
.checkbox_label::after {content: "";
    position: absolute;
    top: 9px;
    left: 7px;
    width: 26px;
    height: 14px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: solid;
	border-color:#fff;
    border-width: 0 0 5px 5px;
    border-top-color: transparent;
    opacity: 0;
    background: transparent;}
input[type="checkbox"]:checked+.checkbox_label::after,input[type="radio"]:checked+.radio_label::after {
    opacity: 1;
}
input[type="checkbox"]:checked+.checkbox_label::before {
    background:#53af31;
}
input[type="checkbox"]:focus+.checkbox_label::before,input[type="radio"]:focus+.radio_label::before {
    border-width: 4px;
    box-shadow: 0 0 0 3px #f1de0b;
}
select {border: 3px solid currentColor; outline:none;margin-right:15px;    font-size: 1.2em;
    line-height: 1em; padding:10px;}
select:focus {box-shadow: 0 0 0 3px #f1de0b;}
.radio_label::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 3px solid currentColor;
    border-radius: 50%;
    background:rgba(123,123,123,0.1);
}
.radio_label::after{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 0;
    height: 0;
    border: 10px solid #53af31;
    border-radius: 50%;
    opacity: 0;
    background: currentColor;}
.text_label{display:block;}
.input {    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.2em;
    line-height: 1em;
	font-weight: 700;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
	margin-bottom: 10px;
    padding: 10px;
    border: 3px solid #313131;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
background:rgba(123,123,123,0.1);}
.red .input {background:#fff;}
.input:focus {
    outline: 3px solid #f1de0b;
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px #313131;

}
.conditional {margin-left: 19px;
    padding-left: 25px;
    border-left: 3px solid #aaa;
margin-bottom:10px;padding-top: 15px;
    }
.conditional .input {margin-bottom:0;}
.radio_item,.checkbox_item,.select_item {margin-bottom:15px;}
.radio_item:last-child,.checkbox_item:last-child {margin-bottom:0px;}
.conditional{display:none;}
.conditional_controller:checked ~ .conditional {display:block;}
legend{padding:0;margin-bottom:5px;margin-top:10px;font-weight:900;font-size:1.2em;}

.loader {
	width:70px;
	height:23px;
	margin:auto;
	background:url("images/ajax-loader.gif");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:100% auto;
	display:inline-block;
}

.disabled {opacity:0.95;pointer-events:none;}
.not_audited {padding: 10px;
    border: 3px solid #e31010;
    background: rgba(255,0,0,0.2);}
.audited {padding: 10px;
    border: 3px solid #53af31;
    background: rgba(83,175,49,0.2);}
.input.cy {padding-left: 60px;
    background-image: url(images/welsh.jpg);
    background-repeat: no-repeat;
    background-position: 10px 10px;
}
.input.en {padding-left: 60px;
    background-image: url(images/english.jpg);
    background-repeat: no-repeat;
    background-position: 10px 10px;
}
textarea.input {resize: vertical; line-height:1.2em;}
.required {color:#e3013d;}
.red .required {color:#313131;}
.rectify{padding: 15px;
    border: 3px solid #e3013d;
    background: rgba(255,0,0,0.1);}
.red .rectify {padding: 15px;
    border: 3px solid #ffff00;
    background: rgba(0,0,0,0.2)}
.error {
	display:none;
	background-color: #e3013d;
	background-image:url("images/warning.png");
	background-repeat: no-repeat;
	background-size:20px 20px;
	background-position: 11px center;
    color: #fff;
    padding: 4px 15px 4px 40px;}
.warning {background-color: #e3013d;
	background-image:url("images/warning.png");
	background-repeat: no-repeat;
	background-size:20px 20px;
	background-position: 11px center;
    color: #fff;
    padding: 4px 15px 4px 40px;border: solid 3px #fff;}

/* Filters */

.filter {border-radius: 1em;
    font-size: 1.1em;
    border: none;
    outline: none;
    opacity: 0.6;
    display: inline-block;
    line-height: 1.5em;
    padding-bottom: 0.05em;
    margin-top: calc(var(--padding) / 4);
    margin-right: calc(var(--padding) / 4);}
@media screen and (min-width:1000px){
	.filter {padding-top:1px;}
.filter::before {left: 0.63em;   top: 0.57em;}
}
.filter.both {padding-left: 2.8em;}
.filter.active {opacity:1; box-shadow:0 0 0 var(--line-weight) var(--black);}
#schedule_filter {padding-bottom:var(--padding);}