.kenzap .kpe6 :before, .kenzap .kpe6 :after, .kenzap .kpe6 *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .kenzap .kpe6 img, .kenzap .kpe6 ul, .kenzap .kpe6 h2, .kenzap .kpe6 li, .kenzap .kpe6 p, .kenzap .kpe6 a{ padding: 0; margin: 0; box-shadow: none; border: none; text-decoration: none; list-style:none } .kenzap .kpe6 .kenzap-container{ max-width:1270px; padding:0 var(--paddings2,0); margin:0 auto; } .kenzap .kpe6.autoPadding { padding: calc(30px + (var(--paddings) - 30) * ((100vw - 300px) / (1600 - 300))) var(--paddings2,0); } .kenzap .kpe6 .kenzap-row{ display:flex; display:-webkit-flex; } .kenzap .kpe6 .kenzap-col-6{ width:50%; padding:0 15px; } .kenzap .kpe6 .kp-header{ width:60%; margin:0 auto 60px; } .kenzap .kpe6 .kp-header .event-filter > div > div{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; } .kenzap .kpe6 .kp-header .event-filter p{ font-size:16px; line-height:1.6; font-weight:400; margin:0; color:var(--tc,#333); } .kenzap .kpe6 .kp-header .event-filter select{ font-size:14px; line-height:1.4; font-weight:400; width: 170px; margin: 0 0 0 20px; padding: 10px 35px 10px 20px; background: none; line-height: 20px; border: 1px solid #b7b7b7; color: var(--tc,#333); -moz-appearance: none; -webkit-appearance: none; appearance: none; background: var(--bc,#fff) url(../../assets/select-arrow.svg) no-repeat 90% center; background-size:12px auto; border-radius:5px; cursor:pointer } .kenzap .kpe6 .kp-header .event-filter select:focus{ outline:none } .kenzap .kpe6 .kp-header .event-filter select option{ font-size:14px; box-shadow:none; border:none; display: block; padding: 3px 20px; clear: both; font-weight:400; line-height: 1.42857143; color: var(--tc,#333); white-space: nowrap; } .kenzap .kpe6 .kp-content{ display:inline-block; width:100%; } .kenzap .kpe6 .kp-content .event-box{ display:flex; padding:35px 20px; border: 1px solid #b7b7b7; border-radius: 3px; margin: 0 0 30px; transition: all .3s; box-shadow: 0px 0px 21px 0px rgba(210, 210, 210, 0); } .kenzap .kpe6 .kp-content .event-box:hover{ border: 1px solid var(--bc,#fff); box-shadow: 0px 0px 21px 0px rgba(210, 210, 210, 0.29); } .kenzap .kpe6 .kp-content .event-box .event-date{ width:14.66666667%; padding:0 15px; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date{ border: 1px solid var(--mc,#9376df); border-radius:var(--borderRadius,5px); overflow: hidden; padding: 20px 0 0; margin: 0; width: 100px; text-align:center } .kenzap .kpe6 .kp-content .event-box .event-date .post-date .day { font-size: 50px; line-height: 50px; margin:0; font-weight: 600; color: var(--mc,#9376df); display:block; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date .month { font-size: 18px; line-height: 18px; color:var(--mc,#9376df); margin: 0 0 20px; font-weight: 300; text-transform: uppercase; display:block; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date .year { font-size: 14px; line-height: 14px; color: var(--bc,#fff); padding: 5px 0; background: var(--mc,#9376df); font-weight:500; display:block; } .kenzap .kpe6 .kp-content .event-box .event-content{ width:66.33333333%; padding:0 15px; } .kenzap .kpe6 .kp-content .event-box .event-action{ width: 19.66666667%; padding:0 15px; display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; justify-content:center; -webkit-justify-content:center; flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6 .kp-content .event-box .event-content h3{ font-size: 20px; margin: 0 0 15px; } .kenzap .kpe6 .kp-content .event-box .event-content h3 a{ color: var(--tc,#333); font-size: 20px; line-height:1.3; font-weight:500; } .kenzap .kpe6 .kp-content .event-box .event-content .kp-excerpt{ max-height: 52px; overflow-y: scroll; margin-bottom: 15px; } .kenzap .kpe6 .kp-content .event-box .event-content p{ color: var(--tc,#333); opacity: 0.9; font-size: 15px; line-height:26px; font-weight:400; margin:0 0 15px; } .kenzap .kpe6 .kp-content .event-box .event-content .location{ display:inline-block; font-size: 12px; color: var(--tc,#333); font-weight: 300; display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; line-height: 16px; } .kenzap .kpe6 .kp-content .event-box .event-content .location > span{ padding:0 0 0 20px; position:relative; min-height: 16px; } .kenzap .kpe6 .kp-content .event-box .event-content .location .event-location{ display:inline-block; width:9px; height:16px; // background:url(../../assets/location.svg) no-repeat center center; // background-size:9px auto; // -webkit-mask-size: 9px auto; // -webkit-mask-position: center center; // -webkit-mask-repeat: no-repeat; // //-webkit-mask-image: var(--img1, 'none'); // -webkit-mask-image: url(../../assets/location.svg); mask-size: 9px auto; mask-position: center center; mask-repeat: no-repeat; mask-image: var(--img1); //mask-image: url(../../assets/location.svg); background-color: var(--mc,#9376df); position:absolute; left:0; } .kenzap .kpe6 .kp-content .event-box .event-content .location a{ font-size: 12px; line-height: 16px; font-weight: 500; font-size: 12px; color: var(--mc,#9376df); margin: 0 0 0 15px; text-decoration: underline; } .kenzap .kpe6 .kp-content .event-box .event-action .join-now { display: block; font-size: 16px; line-height:16px; color: var(--mc,#9376df); border: 1px solid var(--mc,#9376df); border-radius: 5px; border-radius:var(--borderRadius,5px); padding: 20px 0; text-align: center; transition: all .3s; width:100%; } .kenzap .kpe6 .kp-content .event-box .event-action .join-now:hover{ color: var(--bc,#fff); background: var(--mc,#9376df); } .kenzap .kpe6 .kp-content .event-box .event-action .closed { display: block; font-size: 16px; line-height: 16px; color: #9f9f9f; border: 1px solid var(--bc,#fff); background: var(--bc,#fff); border-radius: 5px; padding: 20px 0; text-align: center; pointer-events: none; width:100% } .kenzap .kpe6 .kp-content .event-box .event-action .limited { display: block; margin: 15px 0 0; font-size: 16px; color:var(--sc,#ddd7d7); text-align: center; font-weight: 500; } .kenzap .kpe6.kenzap-md .kp-header{ width:97% } .kenzap .kpe6.kenzap-md .kp-content { display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; -webkit-justify-content:center; } .kenzap .kpe6.kenzap-md .kp-content .event-box{ width:45%; margin:0 15px 30px; flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date, .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-action, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-action, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-date, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-action{ width:100%; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date .post-date, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date .post-date, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-date .post-date{ margin:0 auto 20px; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date .post-date, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date .post-date, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-date .post-date{ padding:10px 0 0; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date .post-date .month, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date .post-date .month, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-date .post-date .month{ margin:0 0 10px } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date .post-date .day, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date .post-date .day, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-date .post-date .day{ font-size:40px; line-height:40px; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-content{ text-align:center; margin: 0 0 30px; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content .location, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content .location, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-content .location{ flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content .location > a, .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content .location > span, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content .location > a, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content .location > span, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-content .location > a, .kenzap .kpe6.kenzap-md .kp-content .event-box .event-content .location > span{ margin:0 0 5px; } .kenzap .kpe6.kenzap-sm .kp-header{ margin:0 auto 30px; width:90% } .kenzap .kpe6.kenzap-xs .kp-header{ margin:0 auto 30px; width:100% } .kenzap .kpe6.kenzap-xs .kp-header .event-filter p, .kenzap .kpe6.kenzap-sm .kp-header .event-filter p{ width:120px; } .kenzap .kpe6.kenzap-sm .kp-content .event-box{ width:90%; margin:0 auto 30px; flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-xs .kp-content .event-box{ width:100%; margin:0 auto 30px; flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-xs .kenzap-row, .kenzap .kpe6.kenzap-sm .kenzap-row{ flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-xs .kp-header .event-filter > div > div, .kenzap .kpe6.kenzap-sm .kp-header .event-filter > div > div{ width:100%; margin: 0 0 20px; padding:0 } .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-date, .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-xs .kp-content .event-box .event-action, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-date, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-content, .kenzap .kpe6.kenzap-sm .kp-content .event-box .event-action{ padding:0 } @media only screen and (min-width: 62px) and (max-width: 75em) { /* 992px and 1200px */ .kenzap .kpe6 .kp-header{ width:70% } } @media screen and (max-width: 61.938em) { /* width: 991px; */ .kenzap .kpe6 .kp-header{ width:97% } .kenzap .kpe6 .kp-content { display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:center; -webkit-justify-content:center; } .kenzap .kpe6 .kp-content .event-box{ width:45%; margin:0 15px 30px; flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6 .kp-content .event-box .event-date, .kenzap .kpe6 .kp-content .event-box .event-content, .kenzap .kpe6 .kp-content .event-box .event-action{ width:100%; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date{ margin:0 auto 20px; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date{ padding:10px 0 0; } .kenzap .kpe6 .kp-content .event-box .event-date .post-date .month{ margin:0 0 10px } .kenzap .kpe6 .kp-content .event-box .event-date .post-date .day{ font-size:40px; line-height:40px; } .kenzap .kpe6 .kp-content .event-box .event-content{ text-align:center; margin: 0 0 30px; } .kenzap .kpe6 .kp-content .event-box .event-content .location{ flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6 .kp-content .event-box .event-content .location > a, .kenzap .kpe6 .kp-content .event-box .event-content .location > span{ margin:0 0 5px; } } @media screen and (max-width: 48em) { /* width 768px */ .kenzap .kpe6.kenzap-md .kp-header, .kenzap .kpe6 .kp-header{ margin:0 auto 30px; width:90% } .kenzap .kpe6 .kp-header .event-filter p{ width:120px; } .kenzap .kpe6.kenzap-md .kp-content .event-box, .kenzap .kpe6 .kp-content .event-box{ width:90%; margin:0 auto 30px } .kenzap .kpe6 .kenzap-row{ flex-direction:column; -webkit-flex-direction:column; } .kenzap .kpe6.kenzap-md .kp-header .event-filter > div > div, .kenzap .kpe6 .kp-header .event-filter > div > div{ width:100%; margin: 0 0 20px; padding:0 } .kenzap .kpe6 .kp-content .event-box .event-date, .kenzap .kpe6 .kp-content .event-box .event-content, .kenzap .kpe6 .kp-content .event-box .event-action{ padding:0 } } @media screen and (max-width: 30em) { /* width 480px */ .kenzap .kpe6.kenzap-md .kp-header, .kenzap .kpe6.kenzap-sm .kp-header, .kenzap .kpe6 .kp-header{ width:100% } .kenzap .kpe6.kenzap-md .kp-content .event-box, .kenzap .kpe6.kenzap-sm .kp-content .event-box, .kenzap .kpe6 .kp-content .event-box{ width:100%; } }