/*@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo/Archivo-Regular.woff2') format('woff2'), url('/fonts/archivo/Archivo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo/Archivo-Bold.woff2') format('woff2'), url('/fonts/archivo/Archivo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}*/

@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/notosansjp/NotoSansJP-Regular.woff2') format('woff2'), url('/fonts/notosansjp/NotoSansJP-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('../fonts/notosansjp/NotoSansJP-Bold.woff2') format('woff2'), url('/fonts/notosansjp/NotoSansJP-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block; margin: 0; padding: 0;}
* {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, form {margin: 0; padding: 0; list-style: none; font-weight: normal;}
/*body.en button, *//*body.en input, */body.en select, body.en textarea {margin: 0; padding: 0; border: none; font-family: "Archivo", sans-serif;}
body.ja button, body.ja input, body.ja select, body.ja textarea {margin: 0; padding: 0; border: none; font-family: "Noto Sans JP", sans-serif;}
.custfield:focus {outline: none; border: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}
body.en {font-family: "Archivo", sans-serif; font-size: 14px; color: #000000;}
body.ja {font-family: "Noto Sans JP", sans-serif; font-size: 14px; color: #000000;}
a {text-decoration: none;}
a:hover, a:focus {text-decoration: none; outline: none;}
img {border: none; vertical-align: middle;}

::-webkit-input-placeholder {color: #333333 !important;}
::-moz-placeholder {color: #333333 !important;}
:-ms-input-placeholder {color: #333333 !important;}
:-moz-placeholder {color: #333333 !important;}

/****************
 * Common Css
 ****************/
 #main {overflow: hidden;}
 header, section, footer {float: right; width: 100%;}
.container {max-width: 1680px; margin: 0 auto; padding: 0 20px;}
.row {margin-right: -20px; margin-left: -20px;}
.row>* {padding-right: 20px; padding-left: 20px;}
.custfield {border: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}
a, a:hover, button {transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}

.subtitle {color: #333333; font-size: 60px; font-weight: 700; font-style: italic; display: inline-block; width: 100%;}
.ctextinfo h4 {color: #333333; font-size: 48px; font-weight: 700; font-style: italic; display: inline-block; width: 100%;}
.ctextinfo p {color: #333333; font-size: 24px; line-height: 40px; padding-top: 20px; display: inline-block; width: 100%;}

.ctitle {color: #AD1C27; font-size: 60px; line-height: 96px; font-weight: 700; font-style: italic;}

/** Common Slider **/
.commonslider {width: 100%; position: relative;}
.commonslider .owl-carousel {display: none; width: 100%; -webkit-tap-highlight-color: transparent; position: relative;}
.commonslider .owl-carousel .owl-stage {position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden;}
.commonslider .owl-carousel .owl-stage:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.commonslider .owl-carousel .owl-stage-outer {position: relative; overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px);}
.commonslider .owl-carousel .owl-wrapper, .commonslider .owl-carousel .owl-item {-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);}
.commonslider .owl-carousel .owl-item {position: relative; min-height: 1px; float: right; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;}
.commonslider .owl-carousel.owl-loaded {display: block; float: right;}
.commonslider .owl-carousel.owl-loading {opacity: 0; display: block;}
.commonslider .owl-carousel.owl-hidden {opacity: 0;}
.commonslider .owl-carousel.owl-refresh .owl-item {visibility: hidden;}
.commonslider .owl-carousel.owl-grab {cursor: move; cursor: grab;}
.commonslider .owl-nav {display: none;}

.sociallink a {display: inline-block; width: 40px; height:28px; margin: 0px 4px; border:1px solid transparent; border-radius: 40px; vertical-align: top; background-repeat: no-repeat; background-position: 50% 50%;}
.sociallink a:hover {opacity: 1;}
.sociallink .youtube {background-image: url(../images/youtube.png);}
.sociallink .facebook {background-image: url(../images/facebook.png);}
.sociallink .twitter {background-image: url(../images/twitter.png);}
.sociallink .instagram {background-image: url(../images/instagram.png);}

header {z-index: 51; padding: 24px 0px; background-color: #ffffff; position: relative;}
header .logo {position: relative; z-index: 2;}
header .custnav .menus > li {padding:0px 30px; display: inline-block;}
/*header .custnav .menus > li:last-child {padding-left: 0px;}*/
header .custnav .menus > li > a {color: #333333; font-size: 18px; font-weight: 500; line-height: 18px; position: relative; letter-spacing: 1px;}
header .custnav .menus > li > a:hover{color: #AD1C27;}
header .rheader {z-index: 2; position: relative;}

.mainbanner {position: relative; overflow: hidden;}
.mainbanner .pattern1, .innerbaner .pattern1 {position: absolute; top: 39px; right: 50%; z-index: 5; transform: translateX(50%);}
.mainbanner .daysgoto {position: absolute; top: 0px; left: 0px; background-color: #AD1C27; padding:30px 40px; border-radius: 0px 0px 0px 35px; -moz-border-radius: 0px 0px 0px 35px; -webkit-border-radius: 0px 0px 0px 35px;}
.mainbanner .daysgoto p {color: #E5E4E4; font-size: 36px; letter-spacing: 1px; font-weight: 500; font-style: italic; line-height: 50px;}
.mainbanner .daysgoto p span {font-style: normal; color: #E5E4E4; font-size: 50px; font-weight: 900;}
.mainbanner .sliderimg {width: 100%; position: relative; float: right;}
.mainbanner .sliderimg:after {content: ""; width: 100%; height: 100%; z-index: 20; position: absolute; right: 0px; bottom: 0px; background: linear-gradient(135deg,  rgba(17,25,45,0.4) 0%,rgba(17,25,45,0) 100%);}
.mainbanner .sliderimg img {width: 100%;}
.mainbanner .textinfo {position: absolute; width: 100%; right: 0px; bottom: 130px; z-index: 25;}
.mainbanner .textinfo h2 {color: #FFFFFF; font-size: 110px; font-weight: 700; font-style: italic; line-height: 120px;}
.mainbanner .textinfo p {color: #FFFFFF; font-size: 28px; line-height: 48px;}
.mainbanner .owl-carousel .owl-dots {width: 100%; text-align: center; display: inline-block; position: absolute; right: 0px; bottom: 100px;}
.mainbanner .owl-carousel .owl-dots .owl-dot {display: inline-block; margin: 9px; width: 15px; height: 15px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: rgba(255,255,255,0.5);}
.mainbanner .owl-carousel .owl-dots .owl-dot:hover, .mainbanner .owl-carousel .owl-dots .owl-dot.active {background-color: rgba(255,255,255,1);}
.mainbanner .sociallink {position: absolute; left: 120px; bottom: 189px;}


.section-h1 {position: relative; padding-bottom: 150px;}
.section-h1 .textinfo1 {padding:20px 20px 0px 100px;}
.section-h1 .textinfo1 .pattern2 {float: right; width: 100%; height: 43px; background-repeat: no-repeat; background-position: 100% 50%; background-image: url(../images/pattern2.png); margin: 60px 0px;}
/*.section-h1 .patternimg {position: absolute; top: -70px; left: 0px;}*/
.section-h1 .ctextinfo p {font-size: 28px;  line-height: 48px;} 

.section-h2 {background-color: #CEC4B2; background-image: url(../images/work.png); background-repeat: no-repeat; background-position: 50% 100px;}
.section-h2 .ctitle {font-size: 170px; line-height: 100px; font-weight: 800; padding: 420px 0px;}
.section-h2 .getinner {position: relative; background-color: #FFFFFF; padding: 50px 70px 50px 75px; height: 100%;}
.section-h2 .getinner h4 {position: relative; font-size: 60px;}
.section-h2 .getinner h4:after {content: ""; position: absolute; right: -35px; top: 22px; background-color: #CE1126; width: 22px; height: 22px; transform: rotate(45deg);}

.section-h3 {position: relative; padding: 80px 0px}
.section-h3 .eventinner {float: right; width: 100%; position: relative;} 
.section-h3 .eventinner .imgbox {position: relative; float: right; margin: 70px 0px 25px; width: 100%; overflow: hidden; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.section-h3 .eventinner .imgbox:after {content: ""; position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; background-color: rgba(34,31,31,0.2);}
.section-h3 .eventinner .imgbox img {width: 100%; object-fit: cover;}
.section-h3 .eventinner .ctextinfo h4 a {color: #333333;}
.section-h3 .eventinner .ctextinfo h4 a:hover {color: #AD1C27;}
.section-h3 .eventinner .imgbox .datebox {width: 90px; height: 90px; background-color: #CE1126; z-index: 58; transform: rotate(45deg); position: absolute; right: 30px; top: 30px;}
.section-h3 .eventinner .imgbox .datebox span {color: #FFFFFF; font-size: 30px; font-weight: 500; transform: rotate(-45deg); float: right; line-height: 30px; width: 80px; text-align: center; padding-top: 15px;}
.section-h3 .pattern4 {margin-top: 120px;}

.ourlatestnews {background-color: #AD1C27; background-image: url(../images/bg2.png); background-repeat: no-repeat; background-position: 85% 50%; position: relative; padding: 150px 0 120px;}
.ourlatestnews:after, .ourlatestnews:before {content: ""; width: 100%; right: 0px; left: 0px; background-color: #FFFFFF; height: 12px; position: absolute;}
.ourlatestnews:after {top: 30px;}
.ourlatestnews:before {bottom: 30px;}
.ourlatestnews .ctitle {margin-bottom: 66px;}
.clsnewscol {margin-bottom: 35px;}
.clsnewscol .imgpart {max-width: 520px;}
.clsnewscol .imgpart .imgbox {position: relative; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden;}
.clsnewscol .imgpart .imgbox:before {content: ""; width: 100%; position: absolute; top: 0px; right: 0px; bottom: 0px; background-color: rgba(34,31,31,0.2);}
.clsnewscol .imgpart .imgbox img {width: 100%;}
.clsnewscol .textspart {max-width: 1040px;}
.clsnewscol .textspart .ctextinfo {padding: 10px 60px 60px 100px; border-bottom: 1px solid #ffffff;}
.clsnewscol .ctextinfo h4 {color: #ffffff; padding-top: 5px;}
.clsnewscol .ctextinfo p {color: #ffffff;}
.clsnewscol:last-child .textspart .ctextinfo {border-bottom: none;}

.patternbg {background: url(../images/pattern6.gif) repeat-x 50% 0%; height: 136px; margin-bottom: 130px;}

footer {background-color: #AD1C27; position: relative; padding: 100px 0px 70px;}
footer .topfooter {float: right; width: 100%;}
footer .footerboxs {float: right; position: relative; width: 20%; padding-bottom: 50px;}
footer .footerboxs h4 {float: right; width: 100%; color: #FFFFFF; font-size: 24px; font-weight: 700; line-height: 36px; margin:10px 0px 50px;}
footer .footerboxs ul {width: 100%; float: right;}
footer .footerboxs li {float: right; width: 100%; margin-bottom: 10px;}
footer .footerboxs li a {float: right; color: rgba(255,255,255,1); font-size: 20px; font-weight: 200;}
footer .footerboxs li a:hover {color: white; /*font-weight: 500;*/ text-decoration:underline;}
footer .fbox1 {width: 40%;}
footer .fbox1 .flogo {float: right; width: 100%; margin-bottom: 25px;}
footer .fbox1 p {float: right; color: rgba(255,255,255,1); font-size: 20px; font-weight: 200; line-height: 36px; width: 492px;}
footer .pattern1 {float: right; width: 100%; text-align: center; margin-top: 50px;}


/** Inner Banner **/
.innerbaner {background-color: #101A28; position: relative; z-index: 20;}
.innerbaner .innerbannerimg {height: 490px;}
.innerbaner .innerbannerimg img {width: 100%; object-fit: cover; height: 100%;}
.innerbaner:before {content: ""; position: absolute; right: 0px; width: 100%; height: 100%; top: 0px; background-color: rgba(17,25,45,0.3); z-index: 4;}
.innerbaner .textinfo {position: absolute; right: 0px; top: 50%; width: 100%; transform: translateY(-50%); z-index: 25;}
.innerbaner .textinfo h2, .innerbaner2 h2 {color: #FFFFFF; font-size: 80px; font-weight: 700; font-style: italic; line-height: 100px;}
.innerbaner2 h2.newstitle {font-size: 60px;}
 
/** Breadcrumb **/
.cbreadcrumbs {width: 100%; position: absolute; bottom: 0px; right: 0px; z-index:90; padding: 30px 0px;}
.breadcrumbbox {float: right; width: 100%;}
.breadcrumbbox li {float: right; padding: 0px 9px 0px 18px; line-height: normal; color: #ffffff; font-size: 16px; background-image: url(../images/left-arrow1.png); background-position: 0% 50%; background-repeat: no-repeat;}
.breadcrumbbox li:first-child {padding-right: 0px;}
.breadcrumbbox li:last-child {background-image:none;}
.breadcrumbbox li a {float: right; color: rgba(255,255,255,0.7);}
.breadcrumbbox li a:hover {color: rgba(255,255,255,1);}
/** Get Involved Page **/
.section-invo1 {background-color: #F9F9F9;}
.clspattern4 {padding: 137px 0;}
.clstabs {display: flex;}
.tbg1 {background-color: #F7F7F7;}
.tbg2 {background-color: #CEC4B1;}
.tbg3 {background-color: #bac2c4;}
.clstabs li {width: 33.33%; text-align: center; padding-top: 37px;}
.clstabs li button {display: inline-block;}
.clstabs li button p {font-size: 36px; font-weight: 700; padding-top: 55px; padding-bottom: 17px; font-style: italic; color: #333333; background-repeat: no-repeat; background-position: 50% 0%;}
.clstabs li button span {font-size: 20px; width: 160px; display: inline-block; position: relative; bottom: -28px; height: 55px; line-height: 55px; background-color: #D26162; color: #ffffff; box-shadow: 0px 15px 15px rgba(255,255,255,0.03); -moz-box-shadow: 0px 15px 15px rgba(255,255,255,0.03); -webkit-box-shadow: 0px 15px 15px rgba(255,255,255,0.03);}
.clstabs li button .acaicon {background-image: url(../images/aca-icon1.png);}
.clstabs li button .businicon {background-image: url(../images/bus-icon1.png);}
.clstabs li button .culticon {background-image: url(../images/cul-icon1.png);}
.clstabs li .active span {background-color: #333333; color: #ffffff;}
.clstabpart .tab-content {padding-top: 110px;}
.section-invo1 .clsformpart {margin-top: 80px;}
.clsformpart h5 {font-size: 36px; font-weight: 700; font-style: italic;}
.clsformgroup .clsfieldcol {margin-top: 35px;}
.clsformgroup .clsfieldcol label {display: block; padding-bottom: 10px; font-size: 18px; font-weight: 700; color: #333333;}
.clsformgroup .clsfieldcol .custfield {height: 55px; padding: 6px 20px; color: #333333; font-size: 20px; border: 1px solid #e1e1e1;}
.clsformgroup .clsfieldcol select.custfield {background-image: url(../images/drop-arrow1.png); background-repeat: no-repeat; background-position: 20px 50%;}
.clsformgroup .cbtn {margin-top: 37px;}
.cbtn {display: inline-block; background-color: #AD1C27; height: 55px; line-height: 55px; padding: 0px 40px !important; font-size: 20px; color: #FFFFFF;}
.cbtn:hover {background-color: #333333;}

/** News Page **/
.bgcolor {background-color: #F9F9F9;}
.innerbaner2 {background-color: #AD1C27; height: 480px; position: relative; background-image: url(../images/bg2.png); background-repeat: no-repeat; background-position: 86% 39%;}
.innerbaner2 h2 {padding-top: 100px;}
.subtitle2 {font-size: 36px; color: #333333; font-weight: 700; text-transform: uppercase; letter-spacing: 4px;}
.section-n1 {margin-top: -190px;}
.section-n1 #newsslider {background-color: #FFFFFF; margin-top: 35px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#newsslider .ctextinfo {float: right; width: 840px; padding: 60px 100px;}
#newsslider .ctextinfo span {font-size: 24px; color: #333333; display: block; padding-bottom: 10px;}
#newsslider .imgbox {width: 800px; float: left; position: relative;}
#newsslider .imgbox:before {content: ""; width: 100%; height: 100%; top: 0px; right: 0px; position: absolute; background-color: rgba(34, 31, 31,0.2);}
#newsslider .imgbox img {width: 100%;}
.section-n2 {padding-top: 120px;}
.topfilterbar .clsformgroup .clsfieldcol {padding-right: 40px;}
.topfilterbar .clsformgroup .clsfieldcol.btnrow {padding-right: 30px;}
.topfilterbar .clsformgroup .clsfieldcol label {padding-bottom: 0px; padding-left: 20px;}
.topfilterbar .clsformgroup .clsfieldcol select.custfield, custfield .select2-selection {width: 290px;}
.clsnewbox {margin-top: 70px;}
.clsnewbox .newsinner {background-color: #ffffff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; overflow: hidden;}
.clsnewbox .newsinner .imgbox {position: relative; display: block;}
.clsnewbox .newsinner .imgbox:before {content: ""; width: 100%; height: 100%; top: 0px; right: 0px; position: absolute; background-color: rgba(34, 31, 31,0.2);}
.clsnewbox .newsinner:hover .imgbox:before {display: none;}
.clsnewbox .newsinner .imgbox img {width: 100%;}
.clsnewbox .ctextinfo {padding:30px 40px 40px;}
.clsnewbox .ctextinfo span {display: block; font-size: 24px; margin-bottom: 10px;}
.clsnewbox .ctextinfo h4 {font-size: 36px;}
.clsnewbox .ctextinfo h4 a {color: #333333;}
.clsnewbox .ctextinfo h4 a:hover {color: #AD1C27;}
.section-n2 .loadbtn {margin-top: 90px;}
.loadbtn {display: inline-block; height: 72px; line-height: 72px; padding: 0 45px; background-color: rgba(0,0,0,0.03); color: #333333; font-size: 20px; text-align: center;}
 
.loadbtn:hover {background-color: #AD1C27; color: #ffffff;}

/** Events Landing Page **/
.cbtn2 {background-color: #FFFFFF; color: #AD1C27;}
.cbtn2:hover {background-color: #333333; color: #FFFFFF;}

.bbtn {background-color: transparent; border:1px solid #FFFFFF; padding: 0px 30px; display: inline-block;}
.bbtn span {line-height: 70px; color: #FFFFFF; font-size: 24px; font-weight: 500; background-repeat: no-repeat; background-image: url(../images/arrow2.png); background-position: 100% 50%; padding-left: 40px;}
.bbtn:hover {background-color: #AD1C27; border-color: #AD1C27;}

.eventabnner:before { background-color: rgba(17,25,45,0.2);}
.eventabnner:after {content: ""; width: 100%; height: 100%; z-index: 4; position: absolute; right: 0px; bottom: 0px; background: linear-gradient(135deg,  rgba(17,25,45,0.4) 0%,rgba(17,25,45,0) 100%);}
.eventabnner .innerbannerimg {height: 810px;}
.eventabnner .textinfo h2 {color: #FFFFFF; font-size: 110px; font-weight: 700; font-style: italic; line-height: 120px;}
.eventabnner-desc {color: #FFFFFF; font-size: 28px; line-height: 48px;}
.eventabnner .cbtn {margin: 25px 20px 0px 0px; height: 72px; line-height: 72px; font-size: 24px; font-weight: 500;}

.section-ela1 {position: relative; padding: 100px 0px 0px;}
.section-ela1 .workshopsform {width: 100%; float: right;}
.section-ela1 .workshopsform .clsformgroup {margin-top: 30px;}
.section-ela1 .clsformgroup .clsfieldcol {width: 390px; float: right; padding-left: 30px;}
.section-ela1 .clsformgroup .clsfieldcol .custfield {background-color: #F9F9F9; border-color: #efefef;}
.section-ela1 .clsformgroup .clsbtncol {width: auto; padding-left: 0px;}
.section-ela1 .cweekinfobox {margin-top: 70px;}
.section-ela1 .cweekinfobox .weekinner {float: right; width: 100%;}
.section-ela1 .weekinner .imgbox {float: right; width: 100%; position: relative;}
.section-ela1 .weekinner .imgbox:before { background-color: rgba(17,25,45,0.2);}
.section-ela1 .weekinner .imgbox:after {content: ""; width: 100%; height: 100%; z-index: 20; position: absolute; right: 0px; bottom: 0px; background: linear-gradient(135deg,  rgba(17,25,45,0.4) 0%,rgba(17,25,45,0) 100%);}
.section-ela1 .weekinner .imgbox img {width: 100%; object-fit: cover;}
.section-ela1 .weekinner .imgbox .cweek {background-color: #FFFFFF; padding: 0px 30px; line-height: 60px; position: absolute; z-index: 41; right: 40px; top: 40px; height: 60px; color: #AD1C27; font-size: 20px; font-weight: 500; border-radius: 36px; -moz-border-radius: 36px; -webkit-border-radius: 36px;}
.section-ela1 .weekinner .imgbox .weekdesc {position: absolute; right: 0px; bottom: 0px; padding: 0px 40px 50px; width: 100%; z-index: 41;}
.section-ela1 .weekinner .imgbox .weekdesc .date {background-image: url(../images/calender.png); background-repeat: no-repeat; background-position: 0px 50%; color: #FFFFFF; font-size: 24px; font-weight: 500; padding-right: 37px;}
.section-ela1 .weekinner .imgbox .weekdesc h4 {font-size: 60px; color: #FFFFFF; font-style: italic; font-weight: 700; padding: 15px 0px 10px;}
.section-ela1 .weekinner .imgbox .weekdesc p {font-size: 28px; color: #FFFFFF; padding-bottom: 35px;}

.section-ela2 {position: relative;}
.section-ela2 .eventlistbox {float: right; width: 100%; margin-top: 90px; position: relative;}
.section-ela2 .eventlistbox .eventlistinfo {float: right; width: 62%;}
.section-ela2 .eventlistinfo .edate{float: right; width: 85px; color: #333333; font-size: 30px; font-weight: 500; line-height: 54px;}
.section-ela2 .eventlistinfo .edate span {display:block; font-size: 48px; font-weight: 700;}
.section-ela2 .eventlistinfo .eventdesc {float: right; width: calc(100% - 85px); border-right: 3px solid #AD1C27; padding: 10px 90px 20px 80px;}
.section-ela2 .eventlistinfo .eventdesc .ctextinfo {/*border-bottom: 1px solid rgba(0,0,0,0.2);*/ padding-bottom: 30px; /*margin-bottom: 30px;*/}
.section-ela2 .eventlistinfo .eventdesc .edetails span {float: right; font-size: 20px; color: #333333; font-weight: 500; margin-top: 25px; background-position: 100% 50%; background-repeat: no-repeat; padding: 0px 40px 0px 34px;}
.section-ela2 .eventlistinfo .eventdesc .edetails span.loaction {background-image: url(../images/location.png);} 
.section-ela2 .eventlistinfo .eventdesc .edetails span.time {background-image: url(../images/clock.png); padding-left: 0px;} 
.section-ela2 .eventlistinfo .eventdesc .vbtn {color: #333333; font-size: 24px; font-weight: 700; background-image: url(../images/left-arrow3.png); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 40px;}
.section-ela2 .eventlistinfo .eventdesc .vbtn.disabled {color: lightgray; background-image: none; pointer-events: none;
}
.section-ela2 .eventlistinfo .eventdesc .vbtn:hover {padding-left: 45px;}
.section-ela2 .eventlistbox .eimgbox {float:left; width:38%; position: relative; border-radius: 10px; overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
.section-ela2 .eventlistbox .eimgbox:before {content: ""; width: 100%; height: 100%; top: 0px; right: 0px; position: absolute; background-color: rgba(34, 31, 31,0.2);}
.section-ela2 .eventlistbox .eimgbox img {width: 100%; object-fit: cover;}
.section-ela2 .clspattern4 {float: right; width: 100%;}


.hcard-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /*gap: 1px;*/
    margin: 50px auto;
    width: 80%;
    max-width: 1200px;
    height: 140px;
    border-radius: 8px;
    overflow: visible; /* Allow hover effect to go outside */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

.hcard {
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    padding: 40px 10px;
    background-color: #fff;
    z-index: 1; /* Ensure the card is on top during hover */
}
.hcard-border {
    border-left: 3px solid #ddd;
}

.hcard:hover {
    transform: scale(1.2); /* Scale larger on hover */
    background-color: #AD1C27;
    color: #fff;
    z-index: 2; /* Ensure the hovered card is above the others */
}
.hcard:hover .hcard-border, .hcard:last-child .hcard-border {
    border: none;
}
.hcard .icon {
    font-size: 40px;
    margin-bottom: 10px;
}

.icon img {
    transition: filter 0.3s ease; /* Smooth transition for hover effect */
}
.hcard:hover .icon img {
    filter: bleftness(0) invert(1); /* Makes the image appear white */
}

.hcard .title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
}
.hcard:hover .title {
    color: #fff;
}

.hcard .description {
    font-size: 12px;
    margin-top: 5px;
    color: white;
}

@media (max-width: 768px) {
    .hcard-container {
        grid-template-columns: 1fr;
        /*gap: 1px;*/
        height: auto;
    }

    .hcard {
        border-left: none;
        border-bottom: 1px solid #ddd;
    }

    .hcard:last-child {
        border-bottom: none;
    }

    .hcard:hover {
        transform: scale(1);
    }
    .hcard-border {
        border: none;
    }
}