@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
:root{
--wea-font-sans:'Roboto Condensed', sans-serif;
--wea-primary: #f2e500 /*#00aeff /*rgb(248, 214, 2)*/;
--wea-secondary: #00aeff/*rgb(0, 174, 255)*/;
--black: #000000 /*#000d14*/;
--white: #fff;
}
body{
    font-family:var(--wea-font-sans);
    font-size:18px;
    line-height:1.25;
    color:var(--white);
    background-color:var(--black);
    overflow-x:hidden;
    padding-top:105px
}
h1,.h1{font-size:2rem;font-weight:700;text-transform:uppercase;margin:0;line-height: inherit;}
h2,.h2{font-size:1.75rem;font-weight:700;text-transform:uppercase}
h3,.h3{font-size:1.5rem;font-weight:700;text-transform:uppercase}
h4,.h4{font-size:1.25rem;font-weight:700;text-transform:uppercase}
h5,.h5{font-size:1rem;font-weight:700;text-transform:uppercase}

.bg-custom-primary{background-color:var(--wea-primary)}
.bg-custom-secondary,.table.bg-custom-secondary{background-color:var(--wea-secondary)}
.table.bg-custom-secondary{
    --bs-table-bg: var(--wea-secondary);
    --bs-table-color: var(--white);
    border-color: transparent;
}  
.btn {
    font-size:18px;
    font-weight:700;
    text-transform:uppercase;
    border:1px solid var(--white);
    border-radius: 0%;
}
.text-custom-primary{
    color: var(--wea-primary);
}
.text-custom-secondary{
    color: var(--wea-secondary);
}
.btn-custom-primary{
    color:var(--black);
    background-color:var(--wea-primary);
        /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to right, var(--wea-primary) 50%, var(--wea-secondary) 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
}
.btn-custom-primary:hover,.btn-custom-primary:focus{
    border:1px solid var(--white);
    background-position: right;
    
}
.btn-custom-secondary{
    color:var(--white);
    background-color:var(--wea-secondary);
        /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to right, var(--wea-secondary) 50%, var(--wea-primary) 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
}
.btn-custom-secondary:hover,.btn-custom-secondary:focus{
    border:1px solid var(--black);
    background-position: right;
    
}
.btn-custom-dark {
    color:var(--white);
    background-color:var(--black);
    background: linear-gradient(to right, var(--black) 50%, var(--wea-primary) 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
}
.btn-custom-dark:hover,.btn-custom-dark:focus{
    color:var(--black);
    border:1px solid var(--white);
    background-position: right;
    
}
input.form-control, textarea.form-control{
    font-size:18px;
    border:1px solid var(--white);
    border-radius: 0%;
}
.card {
    background: none;
    --bs-card-border-color: none;
}
.card-body.background{
    position: relative;
    z-index: 100;
}
.card-body.background::after{
    content: '';
    position: absolute;
    top: -4%;
    left: 0px;
    width: 100%;
    height: 104%;
    background-color: var(--wea-primary);
    border: 4px solid var(--white);
    transform: skewY(4deg);
    z-index: -100;
}
.carousel-item .card .card-body.background::after{
    top: -5%;
    height: 110%;
}
.card-img-top{
    border-radius: 0%;
}
.badge{
  position: absolute;
  top: 0;
  left: 0;
  max-width:100%;
  border-radius: 0!important;
  font-size:18px;
}
/*Carousel*/
.carousel-item .card .card-body{
    min-height: 600px;
}
.card-group-comittee .card .card-body{
    min-height: 700px;
}
.card-group-feedback .card .card-body{
    min-height: 330px;

}
.carousel-item .card .card-body.background .decoration{
    position: absolute;
    bottom: -1.75rem;
    right: -0px;
    width: 50%;
    height: 2.03rem;
    z-index: 100;
}
.carousel-item .card .card-body.background .decoration .decoration-1,
.carousel-item .card .card-body.background .decoration .decoration-2,
.carousel-item .card .card-body.background .decoration .decoration-3{
    position: absolute;
    background-color: var(--white);
    height: .25rem;
    right: 0px;
}
.carousel-item .card .card-body.background .decoration .decoration-1{   
    width: 100%;
}
.carousel-item .card .card-body.background .decoration .decoration-2{
    width: 60%;
    top: .89rem;
}
.carousel-item .card .card-body.background .decoration .decoration-3{
    width: 20%;
    top: 1.78rem;
}
.bg-standard, .bg-top-angle{
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
section .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 70%);
}
section .container{
    position: relative;
}
.bg-top-angle{
    overflow: hidden;
}
.top-angle {
    position: absolute;
    top: -55px;
    left: 0px;
    width: 100%;
    height: 55px;
    z-index: 10;
    transform-origin: bottom left;
    transform: skewY(4deg);
    background-color: var(--wea-primary);
}
.top-angle.bg-custom-secondary{
     background-color: var(--wea-secondary);
}
.img-lozinge{
    position: relative;
    border: 4px solid var(--white);
    transform: skewY(4deg);
    overflow: hidden;
    max-width: 560px;
    height: 400px;
}
.img-lozinge.img-lozinge-sm{
    max-width: 373px;
    height: 266px;
}
.img-lozinge .img-lozinge-fluid{
    transform: skewY(-4deg);
    background-attachment: fixed;
    background-size: cover;
    height: calc(100% + 40px);
    position: relative;
    top: -20px;
}
.img-lozinge .decoration{
    position: absolute;
    bottom: 0.5rem;
    right: -6px;
    width: 50%;
    height: 2.03rem;
    overflow: hidden;
    z-index: 100;
}
.img-lozinge .decoration .decoration-1,
.img-lozinge .decoration .decoration-2,
.img-lozinge .decoration .decoration-3{
    position: absolute;
    background-color: var(--white);
    height: .25rem;
    right: 0px;
}
.img-lozinge .decoration .decoration-1{
    width:100%;
}
.img-lozinge .decoration .decoration-2{
    width: 60%;
    top: .89rem;
}
.img-lozinge .decoration .decoration-3{
    width: 20%;
    top: 1.78rem;
}
.figcaption{
    font-size: .75rem;
}
.form-container{
    background-color: var(--black);
    position: relative;
}
.map-container iframe{
    border:4px solid var(--white);
    display: block;
    margin: 0 auto;
    width: 100%;
    min-height: 400px;
}
.hero-container p{
    font-size: 20px;
}
/* Contact Form */
.form-container{
    margin-top:1.5rem;
    margin-bottom:4rem;
    padding:3rem 1.5rem 1.5rem 1.5rem;
    background-color:var(--black);
    position:relative;
    z-index:10;
}
.form-container .angle{
    position:absolute;
    bottom:-100px;
    left:0px;
    width:100%;
    height:50%;
    background-color:var(--black);
    transform-origin:bottom right;
    transform:skewY(4deg);
    z-index:-10;
}
.form-container .form{
    position: relative;
    z-index: 100;
}
/*--Header--*/
header{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    z-index:100;
    padding:2rem 0px 1rem 0px;
    background-color: var(--black);
}
header .background{
    position:absolute;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--black);
    border-bottom:8px solid var(--wea-primary);
    transform-origin:bottom right;
}


header .navbar .container{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.navbar-nav .nav-item .nav-link, .navbar-nav .dropdown-menu .dropdown-item{
    position: relative;
    color: var(--white);
    text-transform: uppercase;
    font-weight: bold;
}
.navbar-nav .nav-item a.nav-link:after, .dropdown-menu .dropdown-item:after {
    content: "";
    position: absolute;
    right: 0px;
    height: 2px;
    transition: 0.3s ease-in-out 0s;
    bottom: -2px;
    width: 0px;
}
.navbar-nav .nav-item a.nav-link:hover:after, .dropdown-menu .dropdown-item:hover:after {
    background-color: var(--wea-primary);
    width: 100%;
}
.navbar-toggler {
    background-color: var(--wea-primary);
    border-radius: 0%;
    border:4px solid var(--white);
    transform: skewX(-4deg);
}
.dropdown-menu {
    background-color: var(--black);
    border-radius: unset;
    margin-top: 2px;
}
.dropdown:hover .dropdown-menu {
    display: block;
    left: 0;
}
.dropdown-toggle::after{
    border: 0;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: unset;
}
header.d-border-none .background {
    border-color:transparent
}
/*--Footer--*/
.subscribe-banner {
    position: relative;
    overflow: hidden;
    background-color: var(--wea-secondary);
    display:flex;
    justify-content:center;
}
.subscribe-banner:before, .subscribe-banner:after {
    content: "";
    position: absolute;
    top: 0px;
    width: 100px;
    height: 100%;
    background-color: var(--wea-primary);
    transform: skewX(-2deg);
}
.subscribe-banner:before {
    left: -100px;
    transform-origin: bottom right;
}
.subscribe-banner:after {
    right: -100px;
    transform-origin: top left;
}
.img-bg .img-fluid{
    background-color: var(--white);
}
footer .footer-body{
    font-size: .888rem;
}
.btn.btn-top {
    width: 64px;
    height: 64px;
    background-color: var(--wea-primary);
    color: var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    z-index: 1;
    margin-bottom: 18px;
}
.social{
    display:flex;
    justify-content:center;}
.social a{
    width:32px;
    height:32px;
    background-color:var(--wea-primary);
    color: var(--black);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    margin:0px .5rem
}

/*-- Modal */
.modal-header{
    border: unset;
}
.modal-content{
    border-radius: 0px;
    background-color: var(--wea-primary);
    text-align: center;
}
.modal-content:before,.modal-content:after{
    content: "";
    position: absolute;

    width: 0px;
    height: 0px;
}
.modal-content:before {
    top: 0px;
    left: 0px;
    border-top: 100px solid var(--wea-secondary);
    border-right: 240px solid transparent;
}
.modal-content:after {
    bottom: 0px;
    right: 0px;
    border-bottom: 100px solid var(--wea-secondary);
    border-left: 240px solid transparent;
}

/*--Hero--*/
.hero-home, .hero-about, .hero-members, .hero-thank-you{   
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-members{
    background-image: url(../img/16.-WEA-Llanelli-Cowell-Street-in-Llanelli-Lecture-and-history-talk.jpg);
    height: 75vh;
}
.hero-thank-you{
    background-image: url(../img/wea-llanelli-thank-you.jpg);
    height: 75vh;
}
.hero-about{
    background-image: url(../img/3.-WEA-Llanelli-Committee-in-1988.jpg);
    height: 75vh;
}
.hero .hero-container{
    position:relative;
    z-index:1;
    padding:1.7rem;
    margin-left:1rem;
    margin-right:1rem;
    bottom: -8%;
}

.hero .hero-container .background{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--wea-primary);
    border:5px solid var(--white);
    transform:skewX(-12deg);
    z-index: -100;
}
.hero .hero-container .background.bg-black{
    background-color:var(--black);
}
.hero .hero-container .decoration{
    position: absolute;
    left: 22px;
    bottom: 0.5rem;
    width: 280px;
    height: 2.03rem;
    transform: skewX(12deg);
    overflow: hidden;
}
.hero .hero-container .decoration.reversed{
    right: -5px;
    left: unset;
    transform: skewX(-12deg);
}
.hero .hero-container .decoration .decoration-1,
.hero .hero-container .decoration .decoration-2,
.hero .hero-container .decoration .decoration-3,
.hero .hero-container .decoration.reversed .decoration-1,
.hero .hero-container .decoration.reversed .decoration-2
.hero .hero-container .decoration.reversed .decoration-3{
    position: absolute;
    background-color: var(--white);
    height: .25rem;
}
.hero .hero-container .decoration .decoration-1{
    width:20%;   
}
.hero .hero-container .decoration .decoration-2{
    width: 60%;
    top: .89rem;

}
.hero .hero-container .decoration .decoration-3{
    width: 100%;
    top: 1.78rem;
}
.hero .hero-container .decoration.reversed .decoration-1{
    width:20%;
    top: 0px;
    right: 0px;
}
.hero .hero-container .decoration.reversed .decoration-2{
    width: 60%;
    top: .89rem;
    right: 0px;
}
.hero .hero-container .decoration.reversed .decoration-3{
    width: 100%;
    top: 1.78rem;
    right: 0px;
}
.hero.hero-home{
    overflow: hidden;
    height: 100vh;
    position: relative;
}
.hero.hero-home .container{
    position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.hero.hero-home .hero-home-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
}
.hero.hero-home .hero-container .background{
    left:-10000px;
    width:calc(100% + 10000px);
    background-color:rgba(242,229,0,0.9);
    border: hidden;
    transform-origin:bottom right;
    transform:skewX(-12deg);
    z-index: -100;
}
.hero.hero-home .hero-container .background.background-end{
    left: unset;
    transform:skewX(12deg);
}
.hero.hero-home .hero-container .background.background-end h1{
    text-align: right;
}

/*-- KEYFRAMES --*/
.appearanim {
    animation: appear 1.5s ease-in .5s forwards;
    opacity: 0;
}
@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media (min-width: 768px){
    h1,.h1{
        font-size:3rem;}
    h2,.h2{
        font-size:2.5rem;}
    h3,.h3{
        font-size:2rem;}
    h4,.h4{
        font-size:1.5rem;}
    h5,.h5{
        font-size:1.25rem;}
    .social {
        justify-content: flex-start;
    }
    .social a{
        width: 42px;
        height: 42px;
        font-size: 26px;
        margin: 0px 1.5rem 0px 0px;
    }
    /*carousel css*/
    .carousel-item {
        flex: 0 0 33.33333%; 
    }
    .row .active.carousel-item,
    .row .active.carousel-item + .carousel-item,
    .row .active.carousel-item + .carousel-item + .carousel-item {
        display: block;
        margin-right: 0;
    }
    .row .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .row .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .row .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .row .carousel-item-next,
    .row .carousel-item-prev {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /*Decorations*/
    .top-angle {
        top: -65px;
        transform: skewY(2deg);
    }
    /*Header*/
    header .background{
        border-bottom:10px solid var(--wea-primary)
    }
    /*Hero*/
    .hero .hero-container{
        margin-left:3rem;
        margin-right:2rem;
    }
    .hero .hero-container .background{
        transform:skewX(-12deg)
    }
    /*Footer*/
    .subscribe-banner:before, .subscribe-banner:after {
        transform: skewX(-12deg);
    }
    .subscribe-banner {
        justify-content:start;
    }
}
@media (min-width: 992px){
    /*Header*/
    header .background{
        transform:skewY(1deg)
    }
    header .decoration{
        position: absolute;
        top: 1.11rem;
        left: 0px;
        width: 280px;
        height: 2.46rem;
    }
    header .decoration.reversed{
    right: 0px;
    left: unset;
    }
    header .decoration .decoration-1,
    header .decoration .decoration-2,
    header .decoration .decoration-3,
    header .decoration.reversed .decoration-1,
    header .decoration.reversed .decoration-2,
    header .decoration.reversed .decoration-3{
        position: absolute;
        background-color: var(--wea-primary);
        height: .25rem;
    }
    header .decoration .decoration-1{
        width: 20%;
        top: 0rem;
    }
    header .decoration .decoration-2{
        width: 60%;
        top: .89rem;
    }
    header .decoration .decoration-3{
        width: 100%;
        top: 1.78rem;
    }
    header .decoration.reversed .decoration-1{
        width: 100%;
        top: 0px;
        right: 0px;
    }
    header .decoration.reversed .decoration-2{
        width: 60%;
        top: .89rem;
        right: 0px;
    }
    header .decoration.reversed .decoration-3{
        width: 20%;
        top: 1.78rem;
        right: 0px;
    }
    /*Animation*/
        .slideanim {
        visibility: hidden;
    }
    .slide {
        animation-name: slide;
        -webkit-animation-name: slide;
        animation-duration: 1.5s;
        -webkit-animation-duration: 1.5s;
        visibility: visible;
        z-index: 100;
    }
    @keyframes slide {
        0% {
            opacity: 0;
            transform: translateY(70%);
        }
        100% {
            opacity: 1;
            transform: translateY(0%);
        }
    }
}
@media (min-width: 1200px){
    .social a:hover{
        background-color:var(--wea-secondary)
    }
    .social a:hover i{
        color:var(--white)
    }
    /*Hero*/
    .hero.hero-home{
        height:810px;
    }
}