/*
Theme Name: Worksop Junior Darts Academy
Author: Seven Hills Creative
Author URI: https://www.sevenhillscreative.co.uk/
Description: Another custom theme for a happy customer!
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025.1
Requires at least: 5.2
Requires PHP: 7.0
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

/* ///// BASE ///// */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    color: #1B1C1F;
    font-family: "Montserrat", sans-serif;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.5em;
    transition: all 0.4s ease;
}
body, main {
    display: grid;
    overflow-x: hidden !important;
    position: relative;
}
section, footer {
    display: grid;
    padding: 35px 2em;
    justify-self: center;
    width: 100%;
}
footer {
    background-color: #333333;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    padding: 2em;
}

div.footer-column{
    align-content: start;
    display: grid;
}

footer h2{
    color: #fff;
    font-size: 1.5em;
}

footer p, footer a{
    color: #fff;
}

@media only screen and (max-width: 860px) {

    footer {
        grid-template-columns: 1fr;
    }

}

@media only screen and (max-width: 320px) {
    body, header, main, section, footer {
        width: 320px;
    }
}

/* ///// MENU ///// */
/* ///// MENU ///// */
/* ///// MENU ///// */

a{
    text-decoration: none !important;
}

/* MENU BAR DESKTOP VIEW */

@media only screen and (min-width: 1380px) {

    nav#menu{
        background-color: #004aad;
    }

    #hamburger-input:checked, #hamburger-menu #sidebar-menu{
        display: none;
    }

    .grid-header-section {
        display: grid;      
        z-index: 2;
        position: relative;
        background-color: #004aad;
        padding: 0 2em;
    }

    .grid-header-outer {
        display: flex;
        grid-column-gap: 0.5em;
        align-items: center;
        background-color: #004aad;
        justify-self: center;
        width: 100%;
        max-width: 1300px;
    }

    .grid-header-outer a img{
        max-width: 257px;
        width: 100%;
        display: grid;
        background-color: #fff;
        box-shadow: 0px 8px 8px 0px #0000001A;
    }

    .grid-header-section .company-logo {
        display: grid;
        position: absolute;
        max-width: 266px;     
        left: 2em;  
        align-self: center;
    }

    .company-logo img{
      width: 100% !important;
      max-width: 150px !important;
    }

    .header-menu {
        display: flex;
        padding: 0 1em;
    }

    div.menu-main-navigation-container{
        width: 100%;
    }

    .header-menu ul{
        display: flex;
        gap: 1.8em;
        text-align: center;
        align-self: center;
        justify-self: stretch;
        justify-content: end;
    }

    .header-menu ul li {
        list-style: none;
        align-self: center;
        color: #fff;
        line-height: 1;
        margin-bottom: 0;
    }

    .header-menu ul li a span{
        text-transform: uppercase;
        color: #fff;
        font-weight: 800;
    }

    .sub-menu .menu-item a span {
        text-transform: capitalize;
    }

    .menu-item a:hover span, .menu-item-has-children:hover > a:after {
        color: #fff;
    }

    .menu-item-has-children:hover > a span,
    .menu-item-has-children:focus-within > a span,
    .menu-item-has-children:active > a span {
        color: #fff;
    }
    
    #hamburger-input, .overlay, #hamburger-menu, #sidebar-menu, .header-bar  {
        display: none;
    }

    .menu-item-has-children > a:after {
        content: '\f078';
        margin-left: 5px;
        font-family: "Font Awesome 5 pro"; 
        font-weight: 900;
        font-size: 1em;
        color: #fff;
    }


/* SUB MENU ***************************************************************************/


. .menu-item .sub-menu .menu-item{
    margin-top: -16px;
}

.sub-menu .menu-item a span {
    color: #142F5D;
}


    .menu-item .sub-menu {
        display: none;
    }

    .menu-item .sub-menu .menu-item .sub-menu {
        display: none;
    }

    .menu-item .sub-menu .menu-item a {
        color:#142F5D;
        font-size: 1em;
        font-weight: 400;
        line-height: 18px;
    }

    .menu-item .sub-menu .menu-item a:hover {
        font-weight: 600;
    }

    /* .menu-item .sub-menu { */
    .menu-item:hover .sub-menu {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
        background-color: #fff;
        padding: 1em 0;
        text-align: left;
        z-index: 50 !important;
        justify-self: center;
        margin: auto;
        position: absolute;
        border-top: 1em solid #004aad;
        box-shadow: 4px 4px 4px 0px #00000040;
        min-width: 273px;
    }

    .menu-item .sub-menu  {
        position: relative;
    }

    .menu-item .sub-menu .menu-item {
        padding: 0.5em 1em;
        border-bottom: 1px solid #BDBDBD;
        text-align: left;
    }

    .menu-item .sub-menu .menu-item a {
        text-transform: capitalize;
        color: #142F5D;
        font-weight: 600;
    }

    .contact-menu-link a {
        padding: 0.5em 1.1em;   
        background: #D85956;       
        border-radius: 32px;
    }

    .contact-menu-link a span {
        font-size: 1em !important;
        font-weight: 600;
        text-transform: uppercase;
        font-family: "Mukta Mahee", sans-serif;
        color: #fff;
    }

    .side-menu-inner li {
        text-align: left;
    }

}


    

/* RESPONSIVE MENU UNCLICKED */
@media only screen and (max-width: 1380px) {

    .grid-header-outer, .outer-banner-message-outer{
        display: none;
    }

    .grid-header-section {
        background-color: #004aad;
    }

    .header-bar {
        display:grid;
        grid-column:  1 / 17; 
        align-self: center;
        padding: 12px 0 12px 2em;
        background-color: #004aad;
    }

    .header-contact-bar {
        display: none;
    }

    .header-contact-bar-mobile {
        background-color: #fff;
        grid-column: 1 / 17;
        justify-content: end;
        padding: 1em;
        text-align: right;
    }

    .inner-header-contact-bar-mobile p a {
        justify-content: end;
        justify-self: end;
    }

    .inner-header-contact-bar-mobile i {
        color: #D85956;
    }

    .inner-header-contact-bar-mobile p a {
        padding: 1em !important;
        gap: 0.3em;
    }

    .inner-header-contact-bar-mobile p a strong, .inner-header-contact-bar-mobile p a i {
        font-size: 1em !important;
        letter-spacing: 0;

    }

    .header-contact-bar-mobile-sub {
        padding: 0;
    }
    
    .header-bar .logo1{
        max-width: 141px;
        width: 100%;
        align-self: center;
        left: 1em;
    }

    .green-banner {
        background-color: #004aad;
        height: 56px;
    }

    .company-logo {
        display: none;
    }

    
    div.header-bar img{
      width: 100% !important;
      max-width: 150px !important;
    }

    .mobile-icon {
        max-width: 55px;
    }

    .responsive-menu {
        align-self: center;
    }

    .menu-icon {
        width: 33px;
        height: 2px;
        background-color: #fff;
        margin: 3px 0;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity .35s, visibility .35s, height .35s;
        overflow: hidden;
        background: #004aad;
        z-index: 30;
    }
    
    #hamburger-input{
        display: none;
    }
    
    #hamburger-menu {
        display: flex;
        align-items: end;
        flex-direction: column;
    }

    #hamburger-menu #sidebar-menu {
        grid-template-columns: 1fr;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        transition: 0.3s;
        box-sizing: border-box;
        z-index: 20;
    }

    #hamburger-menu ul {
        margin: 1em 0;
        width: 100%;
    }

    #hamburger-menu ul .sub-menu{
        margin: 0 0 1em 1em;
        width: auto;
    }

    #hamburger-menu ul .sub-menu li {
        border-top: none;
    }

    #hamburger-menu li {
        list-style-type: none;
        border-top: 1px solid #fff;
        margin: 0;
    }

    #hamburger-menu a {
        text-decoration: none;
        transition: transform 0.5s;
        align-items: center;
        display: flex;
        padding: 0.5em 0;
        /* justify-content: center; */
    }

    #hamburger-menu .sub-menu a {
        padding: 0;
    }

    #hamburger-menu i {
        font-size: 1.75em;
    }

    #hamburger-menu a:active{
        -ms-transform: translateX(30px);
        -webkit-transform: translateX(30px);
        transform: translateX(3px);
    }

    #hamburger-input:checked + #hamburger-menu #sidebar-menu {
        visibility: visible;
        right: 0;
    }

    /* Scroll Side Menu */
    #sidebar-menu {
        background-color: #004aad;
        min-height: 100vh;
        overflow-y: auto;
        z-index: 50;
    }

    .sub-menu.hidden {
        display: none;
    }

    .toggle-icon ul li {
            list-style: none;
    }

    .toggle-icon::before {
        content: '\f078';
        margin-left: 5px;
        font-family: "Font Awesome 5 pro"; 
        font-weight: 900;
        font-size: 1em;
        color: #1E1E1E;
        margin-right: 0.5em;
    }

    .menu-item-has-children > a .toggle-icon.open::before {
        content: '\f077';
    }

    #hamburger-menu li .sub-menu .menu-item {
        list-style-type: none;
    }

    #hamburger-menu li .sub-menu .menu-item:nth-last-child(1) {
        border-bottom: none;
    }

    #hamburger-menu li:nth-last-child(1) {
        border-bottom: none;
    }

    #sidebar-menu ul li a span {
        color: #fff;
        margin-left: 0.5em;
        text-transform: capitalize;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.15em;
    }
    
    #sidebar-menu ul li .sub-menu li a span {
        font-weight: 500;
        letter-spacing: 0.15em;
    }

    .open {
        margin-top: 0.8em !important;
    }

    #hamburger-menu {
        margin: 0 2em;
        color: #fff;
    }

    .mobile-social-media i {
        font-size: 1.5em !important;
        width: 24px !important;
        color: #fff !important;
        justify-content: normal !important;
    }

    #avisec-side-nav {
        padding: 0 1em;
    }

    .sub-header-logo a {
        padding: 0 !important;
    }


}

/* ///// TEXT ///// */
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    width: 90%;
}
h1 {
    font-size: 2.5em;
    line-height: 1.2em;
    color: #fff;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
}
h4 {
    font-size: 1.3em;
}
h5 {
    font-size: 1.2em;
}
h6 {
    font-size: 1.1em;
}
p {
    color: #1e1e1e;
    font-family: "Montserrat", sans-serif;
    line-height: 1.5;
    margin-bottom: 0.5em;
    font-size: 1.1em;
    width: 90%;
    max-width: 958px;
}

b, big {
    color: #1e1e1e;
    font-family: "Montserrat", sans-serif;
    line-height: 1.5;
    font-size: 1.1em;
}

ul, ol {
    font-family: "Montserrat", sans-serif;
    margin: 1.2em 0;
    padding: 0;
    max-width: 958px;
}
ul.main-nav {
    padding: 0;
}
li {
    color: #fff;
    font-weight: 500;
    margin-bottom: 0.6em;
    line-height: 1.5;
}
strong {
    font-weight: 800;
}
em {
    font-style: italic;
}

label{
    font-family: "Montserrat", sans-serif;
}

@media only screen and (max-width: 500px) {

    h1 {
        font-size: 1.7em;
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.2em;
    }
    h4 {
        font-size: 1.1em;
    }
    h5 {
        font-size: 1em;
    }
    h6 {
        font-size: 1em;
    }

}

@media only screen and (max-width: 360px) {

    h1 {
        font-size: 1.5em;
    }
    h2 {
        font-size: 1.2em;
    }
    h3 {
        font-size: 1.1em;
    }
    h4 {
        font-size: 1em;
    }

}

/* ///// BANNER ///// */

section.banner{
    grid-template-columns: 200px 1fr;
    position: relative;
    padding: 2em;
    min-height: 35vh;
}

section.banner::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background: linear-gradient(to right, #479f55, #004aad, #ff3131);
}

div.banner-overlay{
    background-color: rgba(0,0,0,0.3);
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: calc(100% - 8px);
    z-index: 10;
}

section.banner img{
    width: 100%;
    max-width: 200px;
    z-index: 15;
}

div.banner-content{
    align-items: end;
    align-self: end;
    display: grid;
    justify-items: end;
    z-index: 15;
}

div.banner-content label{
    color: #ff3131;
    font-weight: 800;
    text-transform: uppercase;
}

div.banner-content h1{
    display: inline;
    line-height: 0.9;
    text-transform: uppercase;
    text-align: right;
}

div.social-bar{
    display: flex;
    background: #004aad;
    position: absolute;
    top: 0;
    right: 2em;
    padding: 0 45px;
    z-index: 25;
    clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

div.social-item{
    height: 45px;
    width: 45px;
    display: grid;
    justify-content: center;
    align-content: center;
}

div.social-item i{
    color: #fff;
}

@media only screen and (max-width: 690px) {

    section.banner{
        grid-template-columns: 1fr;
        grid-row-gap: 1.5em;
        padding: 75px 2em;
    }

    div.banner-overlay{
        background-color: rgba(0,0,0,0.6);
    }

    section.banner img{
        justify-self: center;
        width: 90%;
        max-width: 160px;
    }

    div.banner-content{
        align-items: center;
        align-self: center;
        justify-items: center;
    }


    div.banner-content h1{
        text-align: center;
    }


}

/* ///// KEY INFO ///// */

section.key-info{
    background: #464646;
    background: linear-gradient(118deg,rgba(70, 70, 70, 1) 14%, rgba(122, 122, 122, 1) 84%);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 30px 0;
}

section.key-info::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background: linear-gradient(to right, #479f55, #004aad, #ff3131);
}

div.key-point{
    display: grid;
    justify-content: center;
    min-width: 25%;
    padding: 5px;
    grid-row-gap: 8px;
}

section.key-info i{
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    width: 100%;
}

section.key-info p{
    color: #fff;
    font-size: 1.2em;
    font-weight: 800;
    text-align: center;
    margin: 0;
    width: 100%;
}

/* ///// ABOUT ///// */

section.about{
    background-attachment: fixed !important;
    padding: 75px 2em;
}

div.about-box{
    background-color: rgba(0,74,173,0.8);
    max-width: 50%;
    padding: 25px;
}

div.about-box h2, div.about-box p{
    color: #fff;
}

div.about-box a.button{
    display: inline-block;
    width: auto;
}

div.about-box *, div.team-member *{
    color: #1e1e1e;
    width: 100%;
    margin-bottom: 10px;
}

@media only screen and (max-width: 860px) {

    div.about-box{
        max-width: 100%;
    }

}

/* ///// TEAM ///// */

section.team{
    background: #eaeaea;
}

section.team div.content-area{
    grid-row-gap: 2em;
}

div.team-member{
    background: #fff;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 2em;
    justify-self: center;
    padding: 25px;
    width: 100%;
}

div.team-member img{
    align-self: center;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

@media only screen and (max-width: 660px) {

    div.team-member{
        grid-template-columns: 1fr;
    }

    div.team-member img{
        justify-self: center;
        width: 80%;
    }

}

/* ///// SPONSORS ///// */

section.sponsors{
    display: flex;
    gap: 1.5em;
    justify-content: space-evenly;
    padding: 75px 2em;
    flex-flow: row wrap;
}

section.sponsors h2{
    text-align: center;
}

div.logo-wrap{
    background: #FFF;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(0, 74, 173, 1) 100%);
    display: grid;
    padding: 20px;
}

div.logo-wrap img{
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: center;
    object-fit: contain;
    object-position: center;
    width: 50%;
    max-width: 220px;
}

/* ///// NEWS ///// */

section.news-archive{
    grid-row-gap: 2em;
}

section.news-archive h1{
    color: #1e1e1e;
    text-align: center;
}

div.news-item{
    display: grid;
}

div.news-item:nth-child(odd){
    background: #F0F0F0;
}

div.news-item:nth-child(odd) img{
    grid-column-start: 2;
}

div.news-item:nth-child(odd) div.news-content{
    grid-row-start: 1;
}

div.news-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-self: center;
    grid-column-gap: 4em;
    grid-row-gap: 1.5em;
    width: calc(100% - 4em);
    max-width: 1300px;
    padding: 20px;
}

div.news-wrap img{
    align-self: center;
    aspect-ratio: 3 / 2;
    justify-self: center;
    object-fit: cover;
    object-position: center;
    width: 80%;
}

div.news-content{
    align-self: center;
    display: grid;
}

div.content-area{
    display: grid;
    justify-self: center;
    max-width: 1300px;
    width: 100%;
}

@media only screen and (max-width: 660px) {

    div.news-wrap{
        grid-template-columns: 1fr;
    }

    div.news-item img{
        grid-column-start: 1 !important;
        grid-row-start: 1 !important;
    }

    div.news-item div.news-content{
        grid-row-start: 2 !important;
    }


}

/* ///// MATCH INFO ///// */

section.date-venue{
    background-color: #ff3131;
    padding: 8px 0;
}

section.date-venue p{
    color: #fff;
    font-weight: 800;
    margin: 0;
}

div.date-venue-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
    justify-self: center;
    max-width: 1300px;
    width: calc(100% - 4em);
}

div.fixtures-results{
    display: grid;
    grid-template-columns: 1fr 24px 24px 24px 1fr;
    grid-gap: 12px;
    margin-top: 2em;
}

div.fixtures-results h2, div.fixtures-results p{
    margin: 0;
}

div.fixtures-results b, div.fixtures-results big{
    text-align: center;
}

div.fixtures-results big{
    font-size: 1.25em;
    font-weight: 800;
}

div.fixtures-results h2{
    grid-column-start: span 5;
}

div.season-link{
    background-color: #004aad;
    position: fixed;
    width: 100%;
    padding: 10px 2em;
    bottom: 0;
    left: 0;
    right: 0;
}

div.season-link::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background: linear-gradient(to right, #479f55, #004aad, #ff3131);
}

div.season-link p{
    font-size: 1.5em;
    font-weight: 800;
    color: #fff;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    max-width: 100%;
}

div.season-link a{
    color: #ff3131;
}

@media only screen and (max-width: 660px) {

    div.season-link p{

        font-size: 1.1em;

    }

}

/* ///// SEASON ARCHIVES ///// */

.accordion-year,
.accordion-level {
    margin-bottom: 1em;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5em;
    background: #f9f9f9;
}

.accordion-year > summary,
.accordion-level > summary {
    cursor: pointer;
    font-weight: bold;
    padding: 0.5em;
    border-radius: 4px;
}

.accordion-year > summary{
    background-color: #004aad;
    color: #fff;
}

.accordion-level > summary{

    background-color: #479f55;
    color: #fff;
}

summary strong{
    color: #fff;
}

.season-list {
    margin-left: 1em;
    padding-left: 0;
    list-style-type: disc;
}

.season-list li {
    margin: 0.25em 0;
}

.season-list li a{
    font-weight: 800;
    color: #ff3131;
}

details.accordion-year,
details.accordion-level,
details.accordion-day {
    margin-bottom: 0.75em;
    border: 1px solid #ddd;
    padding: 0.5em;
    background: #f9f9f9;
    border-radius: 5px;
}

details summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.25em 0;
}

.season-list {
    margin-left: 1em;
    list-style: disc;
    padding-left: 1em;
}



/* ///// SHARED ELEMENTS ///// */

a.button{
    background-color: #004aad;
    border: 1px solid transparent;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    justify-self: start;
    padding: 15px 25px;
    text-transform: uppercase;
    text-decoration: none;
}

a.button:hover{
    background-color: transparent;
    border: 1px solid #004aad;
    color: #004aad;
}