.maparea { height: 50vh; width: 100%; } .mep-events-wrapper { border: 1px solid #ddd; padding: 0px; } .mep-events-header { border-bottom: 1px solid #ddd; text-align: center; padding:0; } .col-2 { width: 50%; float: left; padding: 20px 0; } .mep-event-date-time { overflow: hidden; display: block; border-bottom: 1px solid #ddd; } .mep-events-details { padding: 20px 0; } .mep-event-location-price { overflow: hidden; display: block; } .btn-mep-event-cart { background: #007acc; display: block; color: #fff !important; padding: 15px 30px; text-decoration: navajowhite; font-size: 18px; font-weight: bold; text-transform: uppercase; } .cart-btn-sec { text-align: center; overflow: hidden; } .mep-top-part, .mep-btn-part, .mep-content-part { overflow: hidden; float: none; border-bottom: 1px solid #ddd; } .mep-left-col { width: 65%; float: left; overflow: hidden; } .mep-right-col { width: 35%; float: left; overflow: hidden; } .mep-event-thumbnail { height: 280px; } .mep-event-title-header { overflow: hidden; height: auto; padding: 20px; margin-top: 0px; font-size: 16px; } .mep-event-title-header h2 { font-size: 25px; line-height: 30px; margin-bottom: 15px; } .mep-btn-part { padding: 10px; } .mep-event-meta { font-size: 18px; padding-top: 0px; } .mep-event-details { padding: 20px; } .mep-desc-title { font-size: 20px; display: block; margin-bottom: 15px; } .mep-event-details p { font-size: 16px; line-height: 27px; } .mep-event-datetime, .mep-event-location { padding: 0; } .mep-event-datetime h3, .mep-event-location h3 { font-weight: bold; font-size: 20px; margin-bottom: 10px; } .mep-event-datetime p, .mep-event-location p { font-size: 15px; line-height: 22px; } .mep-event-datetime p{ margin: 0; } .mep-reg-btn-sec { margin: 10px 0; padding: 0 10px 0 0; } .mep-event-title-header p a { text-decoration: none; } .mep-social-share { padding: 0; margin: 0; list-style: none; display: inline-block; } .mep-social-share li { display: inline-block; padding: 10px 0; } .mep-social-share li a { border: 1px solid; color: #000; border-radius: 0; padding: 0; height: 30px; display: block; vertical-align: middle; width: 40px; text-align: center; margin: 0 2px; font-size: 20px; } .mep_event_list { display: block; overflow: hidden; } .mep_event_list_item { border: 1px solid #ddd; margin-bottom: 20px; padding: 5px; overflow: hidden; } .mep_list_thumb { width: 30%; float: left; } .mep_list_event_details { width: 67%; float: left; overflow: hidden; padding-left: 20px; padding-top: 5px; position: relative; } .mep_list_title { font-size: 20px; font-weight: bold; display: block; margin-bottom: 8px!important; } .mep_list_date { font-size: 16px; font-style: italic; display: block; margin: 0 0 10px 0!important; } .mep_list_event_details p { font-size: 17px; line-height: 25px; } .mep_event_list .list-details-btn { background: #0066cc; color: #fff; padding: 5px 10px; position: absolute; right: 0; bottom: 0; text-decoration: none; text-transform: uppercase; font-size: 15px; } .mep_list_event_details a { color: #000; text-decoration: none; } .mep_cat-details { display: block; overflow: hidden; text-align: center; margin-bottom: 10px!important; } .mep_cat-details h1 { margin-bottom: 14px!important; font-size: 25px; } .mep_cat-details p { font-size: 15px; line-height: 24px; } .event-expire-btn { display: block; background: red; color: #fff; padding: 16px; font-size: 17px; font-weight: bold; } .mep_google_map{ width: 100%; min-height: 250px; } .mep-event-title-header h5 { margin: 10px 0; font-size: 16px; } .event_addt_price { display: block; font-size: 17px; margin: 10px 0; text-align: left; } #usertotal { display: block; text-align: left; font-size: 17px; margin: 10px 0; } .eventtotal { font-weight: bold; } .cart-btn-sec .event_addt_price input { margin-right: 10px; } .mep-event-title-header h3 { font-size: 18px; padding: 0; margin: 0; } .mep-event-datetime h3 { padding: 0; margin: 0 0 5px 0; font-size: 18px; } .mep-event-datetime { padding-left: 5px; } .mep-event-location h3 { padding: 0; margin: 20px 0 5px 0; font-size: 18px; } .mep_event_list_item { border: 1px solid #ddd; margin-bottom: 20px; padding: 5px; overflow: hidden; width: 31%; display: inline-block; vertical-align: top; min-height: 270px; } .mep_list_thumb { width: 100%; float: left; } .mep_list_thumb img { width: 100%; min-height: 130px; } .mep_list_event_details { width: 100%; float: none; overflow: hidden; padding-left: 0; padding-top: 0; position: relative; } html body .mep_event_list .mep_list_event_details a { color: #000; text-decoration: none; } .mep_event_list .mep_list_title { font-size: 20px; font-weight: bold; display: block; margin-bottom: 8px !important; } .mep_event_list .mep_list_date { font-size: 13px; font-style: italic; display: block; margin: 0 0 10px 0 !important; } /* Responsive CSS =====================================================================*/ @media only screen and (min-width: 768px) and (max-width: 990px) { } @media only screen and (min-width: 480px) and (max-width: 767px) { .mep-events-wrapper { margin: auto 5px; } .mep_event_list_item { width: 100%; } .mep-left-col { width: 100%; float: none; overflow: hidden; } .mep-event-thumbnail img { height: auto; width: auto; max-width: 100%; max-height: 100%; } .mep-event-thumbnail { height: auto; } .mep-right-col { width: 100%; float: none; overflow: hidden; } .mep-reg-btn-sec { margin: 10px 0; padding: 10px; } .mep-event-datetime, .mep-event-location { padding: 10px; } .mep-event-details { padding: 10px; } .mep-event-title-header { padding: 10px; } .mep-event-title-header h2 { font-size: 23px; line-height: 25px; margin-bottom: 0; } .mep-event-datetime { padding: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .mep-events-wrapper { margin: auto 5px; } .mep_event_list_item { width: 100%; } .mep-left-col { width: 100%; float: none; overflow: hidden; } .mep-event-thumbnail img { height: auto; width: auto; max-width: 100%; max-height: 100%; } .mep-event-thumbnail { height: auto; } .mep-right-col { width: 100%; float: none; overflow: hidden; } .mep-reg-btn-sec { margin: 10px 0; padding: 10px; } .mep-event-datetime, .mep-event-location { padding: 10px; } .mep-event-details { padding: 10px; } .mep-event-title-header { padding: 10px; } .mep-event-title-header h2 { font-size: 23px; line-height: 25px; margin-bottom: 0; } .mep-event-datetime { padding: 0; } } @media (max-width: 319px) { .mep-events-wrapper { margin: auto 5px; } .mep_event_list_item { width: 100%; } .mep-left-col { width: 100%; float: none; overflow: hidden; } .mep-event-thumbnail img { height: auto; width: auto; max-width: 100%; max-height: 100%; } .mep-event-thumbnail { height: auto; } .mep-right-col { width: 100%; float: none; overflow: hidden; } .mep-reg-btn-sec { margin: 10px 0; padding: 10px; } .mep-event-datetime, .mep-event-location { padding: 10px; } .mep-event-details { padding: 10px; } .mep-event-title-header { padding: 10px; } .mep-event-title-header h2 { font-size: 23px; line-height: 25px; margin-bottom: 0; } .mep-event-datetime { padding: 0; } }