/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

body, 
.sb-page, 
.sb-step {
    font-family: 'Hanken Grotesk', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, 
.hero-text {
    font-family: 'Hanken Grotesk', sans-serif !important;
font-weight: 700;
}

#sb_main #main #sb_content #steps-content #sb_booking_content .detail-step-wrap .title-main, .badge{
    font-family: 'Hanken Grotesk', sans-serif !important;
}

#main #main-buttons .wrapper .inner .company-name{
    font-family: 'Hanken Grotesk', sans-serif !important;
font-weight: 700;
}


.company-name.company-logo-and-name {
    color: transparent !important; 
font-size: 0px !important;
  
}

#header .row{
       display: flex;
    align-items: center;
}

.company-name.company-logo-and-name::after {
    /* Insert the new text as content */
    content: "Ride to Mining Indaba in true Jachris style" !important;
    color: #fff !important; 
    font-family: 'Hanken Grotesk', sans-serif !important;
font-size: 50px;
    text-shadow: none;
    line-height: 60px;
    font-weight: 800 !important;
   
}

.title-main{
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-weight: 800 !important;
   
}

#sb_main #main #sb_content #steps-nav #sb_booking_info ul li .content .title-small{
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-weight: 800 !important;
   
}


.btn,
button,
input[type="submit"],
.sb-button,
.sb-secondary-button {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 25px !important;
font-weight: 400 !important;
}

#main #main-buttons .wrapper .inner .bar .btn a{
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 25px !important;
font-weight: 400 !important;
}

/* Target all button elements when the mouse hovers over them */
.btn:hover,
button:hover,
input[type="submit"]:hover,
.sb-button:hover,
.sb-secondary-button:hover {
    background-color: #C32521 !important;
    border-color: #C32521 !important; 
    color: #FFFFFF !important; 
opacity: 1 !important;
}

#main #main-buttons .wrapper .inner .bar .btn a:hover{
    background: #C32521 !important;
    border-color: #C32521 !important; 
    color: #FFFFFF !important; 
opacity: 1 !important;
}

 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}