/* Articles Header */
.article_header{ height: 140px;  background: url(../images/article_banner_lg.jpg) no-repeat center; display: flex; align-items: center; justify-content: space-between;}
.article_header > div{position: relative; display: flex; justify-content: space-between; align-items: center;}
.article_header .article_search_title{display: flex; align-items: center; gap: 10px; font-size: 36px; font-family: "Gotham Bold";
    text-transform: capitalize; color: #fff;}
.article_header .article_search_title::before{content: ""; height:14px; width:12px; background:url(../images/yellow_shape.svg) center no-repeat; }

/*Article Search Form*/
.search_form_container{width: 430px;}
.article-search-form{display: flex; align-items: center; width: 100%; height: 60px; border:0; overflow: hidden; border: 1px solid #707070;
    background: rgba(255, 255, 255, .2); position: relative;}
.article-search-form input[type=text]{width: calc(100% - 60px); padding: 0 20px; box-sizing: border-box; background: none; height: 100%; border:0; outline:0; color: #fff; font-size: 16px;}
.article-search-form input[type=text]::placeholder{color: inherit; font-size: inherit; font-family: inherit;}
.article-search-form input[type=submit]{width: 60px; flex-shrink: 0; height: 100%; background: url(../images/search.svg) no-repeat center; 
    cursor: pointer; border:0; outline:0; padding: 0; position: relative;}

.category_wrap{padding: 17px 0; background: #fff; margin-bottom: 30px;}
.category_wrap > div{display: flex; flex-wrap: wrap; align-items: center; gap: 20px; height: 100%;}
.category_wrap a{line-height: 26px; padding: 8px 12px; background: #EDEDED; color: #474743; font-size: 14px; font-family: "Gotham Bold";
    transition: ease-in-out all .3s;}
.category_wrap a:hover{color: #fff; background: #4177E4;}

/*Article Search*/
.article-search-results{display: flex; align-items: flex-start; flex-wrap: wrap; }

/*Search Pager*/
.search-pager{ margin: 20px 0 60px; height: 60px; display: flex;  align-items: center;}
.search-pager > div{width: 100%; display: flex; height: 100%; flex-direction: row; justify-content: center; align-items: center; 
    position: relative; margin: 0; background: #FFFFFF; border-radius: 4px; overflow: hidden;}
.search-pager > div > a{height: 100%; width: 30px; color: #474743; font-size: 16px; position: relative; display: flex; align-items: center; 
    justify-content: center; font-weight: bold; text-decoration: underline;}
.search-pager > div > a.pager-prev{position: absolute; left: 0; top: 0; width: 60px; background: #F8F8F8;}
.search-pager > div > a.pager-prev::after{content: ""; height: 10px; width: 10px; position: absolute; left: 27px; top: calc(50% - 5px); border:solid #21211C; 
    border-width: 0 0 2px 2px; transform: rotate(45deg); transition: ease-in-out all .3s;}
.search-pager > div > a.pager-next{position: absolute; right: 0; top: 0; width: 60px; background: #F8F8F8;}
.search-pager > div > a.pager-next::after{content: ""; height: 10px; width: 10px; position: absolute; right: 27px; 
    top: calc(50% - 5px); border:solid #21211C; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: ease-in-out all .3s;}
.search-pager > div > a.active{color: #4177E4; text-decoration: none;}

/* Article Block */
.article {width: 25%; }
.article > div{display: flex; position: relative; flex-direction: column; margin:0 10px 20px 10px;}
.article .art-image { height: 260px; width: 100%; display: flex; align-items: flex-start; position: relative;}
.article .art-image > a{height: 100%; width: 100%; background-position: center; background-color: #ededed; background-size: contain; background-repeat: no-repeat;}
.article .art-category{position: absolute; left: 40px; right: 40px; bottom: 40px; display: flex; gap:5px; flex-wrap: wrap; pointer-events: none;}
.article .art-category a{font-size: 16px; color: #fff; border: 1px solid #fff; line-height:24px; padding:10px; background: #FFFFFF1A;
    pointer-events: initial;}
.article .art-info {padding:40px; background: #F8F8F8; display: flex; flex-direction: column; justify-content: center; gap: 10px; 
    position: relative; border: solid 1px #F3F3F3; transition: ease-in-out all .3s;}
.article .art-text{display: flex; flex-direction: column; gap: 10px; height: 90px; overflow: hidden;}
.article .art-title  {line-height: 32px; display: flex; align-items: flex-start; width: 100%;}
.article .art-title a {color: #21211C; font-size: 24px; font-family: "Gotham Medium"; line-height: 30px; font-weight: bold; text-decoration: none; transition: ease-in-out all .3s; transition: ease-in-out all .3s;}
.article .art-footer{display: flex; justify-content: space-between; align-items: center; font-family: "Gotham";}
.article .art-footer a{font-size: 16px; color: #345FB6; line-height: 25px; text-decoration: underline; display: flex; align-items: center; gap: 5px; transition: ease-in-out all .3s;}
.article .art-footer a::after{content: ""; height: 6px; width: 6px; border: solid #345FB6; border-width: 1px 1px 0 0; transform: rotate(45deg); transition: ease-in-out all .3s;}
.article .art-date{font-size: 16px; color: #474743; transition: ease-in-out all .3s;}

.article > div:hover .art-info{background:#4177E4; border-color:#4177E4; }
.article > div:hover .art-footer *{color: #fff;}
.article > div:hover .art-title  a{color: #fff;}
.article > div:hover .art-footer a::after{border-color: #fff;}

/* Article Details */
.article_image{text-align: center; min-height: 300px; position: relative; margin-bottom: 20px;}
.article_image .article_info{position: absolute; left:40px; bottom: 40px; right: 40px; display: flex; flex-direction: column; gap:40px; padding:40px;
    background: rgba(0, 0, 0, .40);}
.article_image .article_title{font-size: 36px; font-weight: bold; color: #fff; margin-bottom:0; padding: 0;}
.article_image .article_date{color: #fff; font-size: 16px; font-family: "Gotham";}
.article_image .article_category{display: flex; justify-content: center; gap:10px; flex-wrap: wrap;}
.article_image .article_category a{font-size: 16px; color: #FFFFFF; background: #FFFFFF1A; border: 1px solid #FFFFFF;
    padding: 12px 20px;}
.article-description{margin-bottom: 20px;}
.article-description p{font-size: 16px; color: #151515; line-height:25px;}

.article_details > div > div{padding: 0 15px;}
.article_details > div > .article_left{flex: 1;}
.article_details > div > .article_right{width: 550px;}

/*Article Sidebar*/
.article_sidebar{ margin-bottom:30px; }
.article_sidebar > header{padding: 26px 20px; margin: 0 0 20px 0; background: #fff; font-size: 32px; color: #345FB6; display: flex; align-items: center;
    justify-content: center; gap:20px; font-family: "Gotham Bold"; }
.article_sidebar > header::before{content: ""; height: 42px; width:48px; background:url(../images/logo_icon.svg) center no-repeat; }
.article_sidebar .as_article{padding: 40px; background: #F8F8F8; margin-bottom: 10px;}
.article_sidebar .as_article{display: flex; align-items: flex-start; gap:20px;}
.as_image{width: 135px; flex-shrink: 0; border-radius: 4px; overflow: hidden; height: 90px; }
.as_image a{height:100%; width:100%; display: flex; background-size: cover; background-position: center; background-repeat: no-repeat;}
.article_sidebar .as_content{display: flex; flex-direction: column; flex-grow: 1;}
.as_title{font-size: 20px; line-height: 26px; color:#21211C; margin-bottom: 15px; font-family: "Gotham Medium"; transition:ease-in-out all .3s; }
.as_footer{display: flex; justify-content: space-between; align-items: center;}
.as_read{color: #345FB6; font-size: 16px; text-decoration: underline; padding:0 15px 0 0; line-height: 26px; position: relative; font-family: "Gotham";}
.as_read::after{content: ""; height: 6px; width: 6px; border:solid #345FB6; border-width: 1px 1px 0 0; transform: rotate(45deg); top: calc(50% - 3px);
    position: absolute; right: 0;}
.as_read:hover{color: #345FB6; text-decoration: underline;}
.as_date{color: #474743; font-size: 16px; font-family: "Gotham";}

.as_link_section{background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; 
    flex-direction: column; margin-bottom: 10px; padding: 30px 40px; align-items: flex-start;}
.as_link_section h5{font-family: "Gotham Light"; color: #fff;}
.as_link_section h5 strong{font-family: "Gotham Bold";}
.as_link_section a{padding: 14px 24px; font-family: "Gotham Bold"; font-size: 18px; border:solid 1px; display:flex; align-items: center; gap:10px;}
.as_link_section a::after{content: ""; height: 10px; width: 10px; border: solid; border-width: 2px 2px 0 0; transform: rotate(45deg);}
.as_ticket_section{background-image: url(../images/as_tickets.jpg);}
.as_ticket_section h5{font-size: 38px; line-height: 40px;}
.as_ticket_section a{background: #FDDC01; border-color: #FDDC01; color:#21211C; }
.as_ticket_section a::after{border-color: #21211C;}
.as_voucher_section{background-image: url(../images/as_voucher.jpg); align-items: flex-end; text-align: right;}
.as_voucher_section h5{font-size: 26px; line-height: 32px;}
.as_voucher_section h5 strong{font-size: 36px; line-height: 40px;}
.as_voucher_section a{background: #fff; border-color: #345FB6; color: #345FB6;}
.as_voucher_section a::after{border-color: #345FB6;}
.as_donation_section{background-image: url(../images/as_donation.jpg);}
.as_donation_section h5{font-size: 29px; line-height: 37px;}
.as_donation_section h5 strong{ font-size:28px; line-height:36px; }
.as_donation_section a{border-color: #21211C; background: #fff; color: #21211C;}
.as_donation_section a::after{border-color: #21211C;}

/*Article Footer*/
.article_footer_container{width: 100%; margin-top: 60px;}
.article_footer{background: #fff; margin-bottom: -40px;}
.article_footer > div{position: relative; padding: 80px 0;}
.article_footer header{margin: 0 0 30px 0; display: flex; align-items: center; justify-content: center; gap:10px;}
.article_footer header::before{content: ""; height: 64px; width:73px; background:url(../images/logo_icon.svg) center no-repeat; }
.article_footer header span{font-family: "Gotham"; display: flex; flex-direction: column; line-height: 30px; font-size: 26px; color: #21211C;}
.article_footer header strong{font-family: "Gotham Bold";}
.article_footer .related_articles_list{ display: flex; align-items: flex-start; position: relative; flex-wrap: wrap;}


/* Article List Module*/
.article-list-module { position: relative; padding: 20px 0; box-sizing: border-box; }
.article-list-module.carousel{background: #fff; padding: 80px 0;}
.article-list-module > div:not(.article-arrows) { position: relative; }


.article-list-module .al_header{margin:0 10px 30px 10px; display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap:15px;}
.article-list-module .al_headings{display: flex; gap:20px; align-items: center;}
.article-list-module .al_headings::before{content: ""; height: 64px; width: 73px; background: url(../images/logo_icon.svg) center no-repeat;
    background-size: contain;}
.article-list-module .al_headings > div{display: flex; flex-direction: column; text-align: left;}
.article-list-module .al_heading{color: #151515; font-size: 32px; line-height: 36px; position: relative; 
    padding: 0; text-transform: capitalize; margin: 0; font-family: "Gotham Bold";}
.article-list-module .al_subheading{color: #21211C; font-size: 26px; line-height: 30px; font-family: "Gotham";}
.article-list-module .al_description{display: flex; justify-content: center;}
.article-list-module .al_description p{margin:0; text-align: center; color: #30302A; font-size: 16px;}

.article-list-module .article-slider { display: flex; align-items: flex-start; overflow: hidden; position: relative; margin-bottom: 30px;}
.article-list-module .article-slider .owl-stage{ display: flex; align-items: flex-start; touch-action: none;}
.article-list-module .article .owl-stage > div{padding: 0 15px;}
.article-list-module.carousel .article{width: 100%;}
.article-list-module .article > div{margin: 0 10px;}

.article-list-module .al_footer{display: flex; align-items: center; justify-content: center; margin-top: 30px;}
.article-list-module .al_footer > a{background: #FDDC01; padding: 14px 24px; font-size: 22px; color: #21211C; font-family: "Gotham Bold";
    transition: ease-in-out all .3s;}
.article-list-module .al_footer > a:hover{background:#4177E4; color: #fff; }

/*Article List View*/
.article-list-module.list .article-slider{flex-wrap: wrap; margin: 0;}
.article-list-module.list .article > div{margin: 0 10px 20px 10px;}

/*Article List Pagination*/
.article-list-module .article-dots.disabled{display: none;}
.article-list-module .article-dots{width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;}
.article-list-module .article-dots button{width: 12px; height: 12px; box-sizing: border-box; border: 2px solid #fff; background:#fff; 
    transition: ease-in-out all .3s; border-radius: 100%; box-shadow: 0px 0px 0px 1px #FDDC01; transition: ease-in-out all .3s; 
    outline: 0; cursor: pointer; padding: 0;} 
.article-list-module .article-dots button.active{background: #FDDC01;}

/*Article List Arrows*/
.article-arrows{position: absolute; width:100%; height:80px; top: calc(50% - 48px); pointer-events: none;}
.article-arrows.disabled{display: none;}
.article-arrows button{cursor: pointer; background:#D5D5D5; height: 100%; width: 50px; border: 0; outline: 0; padding: 0; 
    position: absolute; transition: ease-in-out all .3s; pointer-events: initial;}
.article-arrows button span{display: none;}
.article-arrows button.owl-prev{left:30px;}
.article-arrows button.owl-next{right:30px;}
.article-arrows button:after{content: ""; height: 15px; width: 15px; border: solid #fff; transform: rotate(45deg); position: absolute; top: calc(50% - 7px);}
.article-arrows button.owl-prev::after{border-width: 0 0 2px 2px; left: 21px;}
.article-arrows button.owl-next::after{border-width: 2px 2px 0 0; right: 21px;}
.article-arrows button:hover{background: #4177E4;}



/************Responsive states**************/

/* Desktop */
@media (min-width:992px) and (max-width:1199px) {

    /*Search Page*/
    .search_form_container{width: 350px;}


    /*Article block*/
    .article .art-image {height: 200px; }
    .article > div{margin: 0 5px 20px 5px;}
    .article .art-info{padding: 20px 15px;}
    .article .art-title a{font-size: 20px;}
    .article .art-footer a, .article .art-date{font-size: 14px;}
    .article .art-category{left: 20px; bottom: 20px; right: 20px;}


    /*Details Page*/
    .article_details > div > .article_right {width: 365px;}
    .article_sidebar > header{font-size: 24px;}
    .article_sidebar .as_article{gap:10px;}
    .as_image{width: 90px; height: 70px;}
    .article_sidebar .as_article {padding: 20px;}
    .as_title{font-size: 16px;}
    .as_read, .as_date {font-size: 14px;}
    .as_link_section{padding: 10px 20px;}
    .as_link_section a {font-size: 14px;}
    .as_ticket_section h5{font-size: 26px; line-height: 30px;}
    .as_voucher_section h5{font-size: 18px;}
    .as_voucher_section h5 strong {font-size: 25px; line-height: 32px;}
    .as_donation_section h5, .as_donation_section h5 strong{font-size: 20px; line-height: 24px;}
}

/*Mobile & Tablet*/
@media (max-width:991px){

    /*Search PAge*/
    .article-search-results{justify-content: center}

    /*Sidebar*/
    .article_sidebar > header{gap:10px; font-size: 19px;}
    .article_sidebar > header::before{height:24px; width:27px; background-size: contain; flex-shrink: 0;}
    .article_sidebar .as_article{padding: 20px;}
    .as_title{font-size: 16px;}
    .as_date, .as_read{font-size: 14px;}

    /*Related articles*/
    .article_footer .related_articles_list{justify-content: center;}
    
}

/*Tablet*/
@media (min-width:768px) and (max-width:991px) {

    /*Search Page*/
    .article_header{background-image: url(../images/article_banner_md.jpg);}
    .search_form_container{width: 244px;}
    .article-search-form input[type=text]{padding: 0 10px;}

    /*Article Block*/
    .article{width: 370px;}
    .article > div{margin: 0 5px 20px 5px;}

    /*details page*/
    .article_details > div > .article_right{width: 244px; padding-left: 4px; padding-right:0; margin-right:15px; }
    .article_details > div > .article_left{padding-right: 4px;}
    .article_image .article_info {padding: 20px;}
    .article_image .article_category a{font-size: 12px;}
    .article_image .article_title{font-size: 28px; margin: 0;}
    .article_image .article_date, .article-description p{font-size: 14px;}
    .article_image .article_info{left: 20px; bottom: 20px; right: 20px;}

    /*sidebar*/
    
    .as_link_section{padding: 10px; height: 240px;}
    .as_link_section a{font-size: 14px; width: 100%; justify-content: center;}
    .as_link_section h5, .as_link_section h5 strong{font-size: 24px; line-height: 28px;}
    .as_ticket_section{background:url(../images/as_tickets_md.jpg) bottom center no-repeat #345FB6; }
    .as_voucher_section{background:url(../images/as_voucher_md.jpg) bottom center no-repeat #238A45; align-items: flex-start; text-align: left;}
    .as_donation_section{background:url(../images/as_donation_md.jpg) bottom center no-repeat #FE0169; height: 264px;}

    /*Article List*/
    .article-list-module .article > div{margin: 0 4px;}
    .article-list-module.list .article{width: 50%;}


}

/*Mobile*/
@media (max-width:767px) {

    /*Search Page*/
    .article_header{background-image: url(../images/article_banner_sm.jpg); height:100px; background-position: left center;}
    .article_header > div{flex-direction: column; gap: 20px; align-items: flex-start;}
    .category_wrap > div{gap:10px;}
    .category_wrap a{font-size: 12px; padding: 10px 18px;}

    .articles .col-12{padding: 0 10px;}
    .article-search-results{flex-direction: column; align-items: center; justify-content: flex-start;}

    /*Articles Pager*/
    .search-pager > div > a {width: 20px;}

    /*Article Block*/
    .article{width: 300px;}
    .article .art-image{height: 205px;}
    .article .art-category{left: 20px; bottom: 20px; right:20px;}
    .article .art-text{height: initial; text-align: center;}
    .article .art-info{padding: 40px 20px;}
    .article .art-title a{font-size: 16px;}
    .article .art-footer a, .article .art-date{font-size: 14px;}

    /*Article Details*/
    .article_details > div > .article_left{flex: initial; width: 100%;}
    .article_details > div > .article_right{width: 100%;}
    .article_image .article_info{position:relative; left: initial; right: initial; bottom: initial; padding: 20px 10px; gap:10px; background: #000000;
        width: calc(100% - 20px); margin-top: -50px; margin-left: 10px;}
    .article_image .article_category a{back}
    .article_image .article_title{font-size: 20px; margin: 0;}
    .article_image .article_date{font-size: 12px;}
    .article_image .article_category a{font-size: 12px; padding: 10px;}
    .article-description p{font-size: 12px;}

    /*Sidebar*/
    .article_sidebar > header{font-size: 20px;}
    .as_link_section{padding: 20px;}
    .as_ticket_section h5{font-size: 21px; line-height: 24px;}
    .as_link_section a{font-size: 10px; padding: 9px 14px;}
    .as_voucher_section h5, .as_voucher_section h5 strong{font-size: 20px; line-height: 24px;}
    .as_link_section a::after {height: 6px; width: 6px;}
    .as_donation_section h5, .as_donation_section h5 strong{font-size:17px; line-height:22px; }


    /*Related Articles*/
    .article_footer header::before{height: 42px; width: 48px; background-size: contain;}
    .article_footer header span{font-size: 17px; line-height: 22px;}
    .article_footer .related_articles_list{justify-content: center;}

    /*Article List*/
    .article-list-module .al_header{ margin: 0 0 30px 0;}
    .article-list-module .al_heading{font-size: 21px; line-height: 24px;}
    .article-list-module .al_subheading{font-size: 17px; line-height: 20px;}
    .article-list-module .article > div{margin: 0; width: 100%;}
    .article-list-module .article{justify-content: center; display: flex;}
    .article-list-module .owl-item{display: flex; justify-content: center;}
    .article-list-module .article, .article-list-module.list .article{width: 290px;}
    .article-list-module.list .article-slider{flex-direction: column; align-items: center;}
    .article-list-module .al_footer > a{padding: 10px 20px; font-size: 14px;}
    .article-list-module .al_headings{gap:14px;}
    .article-list-module .al_headings::before{height: 42px; width: 49px;}
    .article-list-module .al_description p{font-size: 14px;}
}