/*
 Theme Name:   Alpha Web Woodmart
 Template:     woodmart
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* ====================================================== General ======================================================*/
/* prevent Apple iOS overwriting input CSS */
input[type="button"],
input[type="file"],
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
}



/* Not sure why apple is showing bullet on sidebar menu, hide it here */ 
.sidebar-container li {
	list-style-type: none !important;
}

html {
  scroll-behavior: smooth;
}

h1 {
    font-size: 60px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 27px;
}

h4 {
    font-size: 21px;
}



/* Indent ul or ol enter in "text" element */
.wpb_text_column ul,
.wpb_text_column ol {
    margin-left: 20px;
}

.wpb_text_column.wpb_content_element {
    margin-bottom: 40px;
}

/*------- Blog Element------ */
/* This is the blog element (grid view) on "Training", "Training Video" & "Happened" pages */

/* Set the bottom margin of each grid to 30px for all screen size. 
since all theree pages uses same blog element style, no problem setting for all,
If using different blog style, may need to isolate the CSS to not affect other styles */ 
.blog-shortcode article {
    margin-bottom: 30px !important;
}

.blog-shortcode h3.post-title {
    font-size: 21px;
}

.blog-shortcode .wd-post-entry-meta {
    margin-bottom: 0 !important;
}

.blog-shortcode .wd-post-entry-meta .wd-meta-date {
    font-size: 14px;
    color: gray;
}

/* ==================================================== END General ====================================================*/


/* ============================================== Header, Menu and Title ===============================================*/
/* Hide the dropdown arrow on the login menu on the right, woodmart use different ID for the 
element in desktop and mobile mode, so need to cater for both. */
#menu-login-menu .woodmart-nav-link:after,
#menu-login-menu-1 .woodmart-nav-link:after {
    display:none;
} 

.whb-header {
    margin-bottom: 60px !important;
}

/* The margin top here has to correspond to the argin-bottom of ".whb-header" above, 
both were set to -40px and 40px respectively by default */ 
.page-title {
    margin-bottom: 60px !important;
}    

.main-page-wrapper {
    margin-top: -60px;
}

/* Main menu item link for desktop*/ 
.wd-nav-main>li>a {
    font-size:15px !important;
    padding-left: 7px;
    padding-right: 7px;
}    

.wd-nav-secondary>li>a {
    font-size:15px !important;
}

.wd-sub-menu li>a {
    font-size: 14px;
    font-weight: 500;
    color: #7b7b7b;
    text-transform: uppercase;
}



.mobile-nav .wd-nav>li>a {
    font-weight: 500;
    font-size: 16px;
}


/* The "down arrow" of menu item which has submenu,
hide it as it is not necessary and take up space */
.menu-item-has-children>a:after {
    display: none;
}

/* For desktop, theme uses differnt ID for deketop and mobile menu,
This is desktop version for "login menu" */
#menu-login-menu .sub-menu-dropdown {
    padding-top: 0;
}

/* For desktop, theme uses differnt ID for deketop and mobile menu,
This is mobile version for "login menu" */
.whb-mobile-right #menu-login-menu-1 .sub-menu-dropdown {
    padding-top: 0;
}

/* The drop down menu of the user profile on the right, it was overflow the right on mobile menu, fix it here */
.whb-mobile-right .wd-dropdown-menu {
   left: auto;
   right: 0;
}


.aw-menu-profile-name {
    background: black;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    color: white;
}

.aw-menu-profile-name a {
    color: white !important ;
}



.page-title {
    padding: 120px 0 !important;
}


/* For pages that use theme 'Title' */  
.page-title .title {
    font-size: 60px !important;
}



/* ============================================ END Header, Menu and Title =============================================*/




/* ===================================================== Sidebar =======================================================*/
   

.woodmart-recent-posts .widget-title {
    letter-spacing: 1px;
}

.woodmart-recent-posts .wd-entities-title {
    margin-bottom: 0px;
}

.woodmart-recent-posts .recent-posts-time {
    color: gray;
    font-size: 13px;
}

/* Sidebar with menu, eg. Training sidebar */ 
.sidebar-container ul.menu li a {
	font-weight: 500;
}

.sidebar-container ul.menu > li:not(:last-child) {
	border-bottom: 1px solid #e4e4e4;
	padding-bottom: 20px;
    margin-bottom: 20px;
}

/* =================================================== END Sidebar =====================================================*/



/* ================================================== Contact form 7 ===================================================*/

.screen-reader-response {
    display: none;
}

form.wpcf7-form {
    background-color: #f4f4f4;
    padding: 30px;
}

.aw-cf7-two-col {
    display: flex;
    flex-wrap: wrap;
}

.aw-cf7-two-col > div {
    width: 49%;
}

.aw-cf7-two-col > div:nth-child(odd) {
    margin-right: 1%;
}

.aw-cf7-two-col > div:nth-child(even) {
    margin-left: 1%;
}

/* Push this section on the form down */
.additional-info-of-applicant {
	margin-top: 40px;
}


/* CF7 group "Group" from "Conditional Fields for Contact Form 7" plugin */
div[data-class="wpcf7cf_group"] {
    padding: 20px;
    border: 1px solid lightgray;
    margin-bottom: 30px;
    
}


.aw-cf7-terms {
    border-top: 2px solid lightgray;
    border-bottom: 2px solid lightgray;
    padding-top: 20px;
    padding-bottom: 10px;
}

.aw-cf7-PDPA {
    padding-top: 30px;
}

.aw-cf7-submit-button {
    margin-top: 10px;
    padding: 11px 28px;
    font-size: 14px;  /* set to 14px, not 15px as the rest of the buttons (eg. popup) to match the font size of CF7 forms */
    font-weight: 500;
    border: 2px solid #212121;
    border-radius: 5px;
    color: #333;
    line-height: 20px;
}

.aw-cf7-submit-button:hover {
    background-color: #212121;
    color: #fff;
}    

/* This include the CF7 button with class "aw-cf7-submit-button" */
/* This is to show the button is disabled without clicking "Terms and Conditions" checkbox first */
button[disabled], 
input[disabled] {
    opacity: 0.5 !important;
    cursor: default;
    border-color: rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Add box-shadow to CF7 forms in popup window */
.wd-popup .wpcf7-form {
	box-shadow: 2px 2px 4px rgb(45 53 89 / 15%) !important;
}

/* ================================================ END Contact form 7 =================================================*/




/* ==================================================== Tablepress =====================================================*/
/* May not need tsih anymore */
.tablepress td, .tablepress th {
    border: 1px solid #d1d0d0 !important;
}

/* Add class 'aw-center-header' to the table at tablepress backend for table that need to have header centralized, doing it this wat since not all tables are the same */
.tablepress.aw-center-header th {
    text-align: center;
}

.tablepress ul br {
    display: none;
}

/* ================================================== END Tablepress ===================================================*/


/* ============================================== Login & Registration =================================================*/
.mfp-bg {
	background-color: rgba(0,0,0, 0.5) !important;
}

.wd-popup {
	box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
    border-radius: 5px !important;
}


/* The close icon of the pop-up window at the top right */ 
.mfp-close {
	background-color: #f69d2e !important;
	box-shadow: -2px 2px 6px rgb(0 0 0 / 15%);
}



/* profile page (/my-account/) */
.user-registration {
	box-shadow: 2px 2px 4px rgb(45 53 89 / 15%) !important;
    background-color: #F4F4F4 !important;
	border: none !important;
	margin-top: 0 !important;
}




.user-registration-MyAccount-navigation a {
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    text-transform: uppercase;
    font-weight: 500 !important;
}

/* Lost password link */
.user-registration-LostPassword a {
    color: #f69d2e !important;
    border-bottom: 2px solid #f69d2e;
}


/* The "Register" link under "Login" fields */
.aw-user-register-link {
    color: #f69d2e !important;
    border-bottom: 2px solid #f69d2e;
}

.user-registration .button {
    margin-top: 10px;
    margin-right: 0;
    padding: 11px 28px;
    font-size: 14px;  /* set to 14px, not 15px as the rest of the buttons (eg. popup) to match the font size of CF7 forms */
    font-weight: 500;
    border: 2px solid #212121 !important;
    border-radius: 5px;
    color: #333;
    line-height: 20px;
}

.user-registration .button:hover {
    background-color: #212121;
    color: #fff;
}


input:not([type='submit']),
textarea,
label {
	font-size: 16px !important;
	font-weight: 400 !important;
}


/* Login form only */
#user-registration .user-registration-error {
	padding-top: 30px;
	padding-left: 3px;
}	

.user-registration-error {
	border-top: none;
	padding: 0 0 7px;
	margin-top: 2px !important;
	background: transparent;
	font-size: 16px;
}

/* Hide the error icom */
.user-registration-error::before {
    content: "";
	margin-right: 0;
}


/* Message showing succesful, waiting for approval */
.user-registration-message {
 border: none;
 padding: 20px 20px;
 background-color: #f9ece6; 
 font-size: 16px;
 color: black;

}

/* Hide the "info" icon on success message */
.user-registration-message::before {
	content: "";
    display: none;
}



/* ============================================= END Login & Registration ===============================================*/




/* ======================================================== Home =======================================================*/
/* @@@@@@@@@@@@@@@@ */
/* The "Play" icon in the center of the video (This is local video, not from Vimeo) */
.aw-home-video-row .mejs-overlay-button {
  opacity: 0.6;
}

/* @@@@@@@@@@@@@@@@ needed? */
.aw-home-hero-text-col h3 {
	font-size: 1.8vw;	
}

.aw-home-hero-text-col h2 {
	font-size: 2.4vw;
	line-height: 1.2;
}

.aw-home-intro-text p {
    font-size: 24px;
}

.aw-home-follow-us-text p {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
    color: black;
}

.aw-home-social-buttons .wd-icon {
    font-size: 26px !important;
    color: black;
}

.aw-home-training-outer-row {
    padding-top: 35px;
}

.aw-home-training-buttons-row {
    text-align: center;
    padding-bottom: 40px;
}

.aw-home-training-buttons-row .wd-button-wrapper {
    margin: 0 10px 25px !important;
}

.aw-home-training-buttons-row .wd-button-wrapper a {
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 500;
}




/* ====================================================== END Home =====================================================*/


/* ==================================================== About Us page ==================================================*/
.aw-about-us-header-slogan {
    padding-top: 130px;
    padding-bottom: 50px;
}

.aw-about-us-header-slogan p {
    color: white;
}    

.aw-about-us-header-slogan1 {
    font-size: 24px;
    margin-bottom: 5px;
}


.aw-about-us-logo-row {
    text-align: center;
}

.aw-about-us-logo-row img {
    max-width: 90%;
}

/* ================================================== END About Us page ================================================*/


/* ======================================== Single post (Training and Training Videos) ==================================*/

.aw-post-title h1 {
    padding: 80px 8%;
    color: white;
    font-weight: 600;
    font-size: 45px; /* Make post title (customised header builder) slightly smaller than theme page title, which is 60px */
    text-align: center;
}



/* Sidebar for posts. push it down a bit */
.sidebar-container {
    margin-top: 10px;
}

/* Hide the content of "training-video" posts when not logged on, use a outer row to do this */
/* This css also hide the "training-video" listing page */ 
body:not(.logged-in) .aw-show-when-logged-in-row {
  display: none;
} 



/* Display the restriction message when user is not logged in */
body.logged-in .aw-show-when-logged-off-row {
  display: none;
}

/* get rid of the site-content bottom margin when the "access restriction" message is showing to 
centralise the message as the row in the HTML code is set to "full height row". */
body:not(.logged-in).aw-cat-training-video .site-content {
    margin-bottom: 0;
}

.aw-show-when-logged-off-row .wpb_text_column {
    margin-bottom: 0 !important;
}


/* Hide the sidebar for "Training Videos" posts when user are not logged on, the "Content Control" plugin is not able to
get this done properly, even thought the options to display widgets for selected user by roles and logged on staus is available

**** NOT USING "Content Control" plugin anymore, control this by myself */

body.aw-cat-training-video:not(.logged-in) .sidebar-container {
   display: none;
}

/*------- Restricted post message for training Videos post ----- */


#aw-restricted-post-msg-row {
    text-align: center;
}


/* Make sure that all text wrapper and child elemnts are inline */
.aw-text-inline,
.aw-text-inline * {
	display: inline;
}


/* Set the margins on popup buttons (login, register) */
#aw-restricted-post-msg-row  .wd-button-wrapper {
	margin: 0 6px 8px;
}

/* Pop up buttons in download message */
#aw-restricted-post-msg-row .btn {
	text-transform: none;
	font-size: 17px;
	color: #f69d2e;
	border-color: #f69d2e;
	font-weight: 500;
}


/*----- END Restricted post message for training Videos post --- */


.post-single-page .meta-post-categories {
    display: none;
}

.post-single-page .wd-entities-title {
    display: none;
}

/* Hiding the featured image of all post categories, will need to modify this 
if faetured image is needed for some categories, but unlikely */
.post-single-page  .entry-header {
    display: none;
}

.post-single-page .wd-entry-meta {
    display: none;
}


.aw-single-post-social-button-row {
    margin-top: 60px;
    border-top: 1px solid lightgray;
    padding-top: 10px;
}



.aw-training-post-button-row {
    padding: 40px 30px 0px;
    background-color: #f1f1f1;
}



.aw-training-post-button-row .wd-button-wrapper {
    margin: 0 10px 50px !important;
}

.aw-training-post-button-row .wd-button-wrapper a {
    padding: 11px 28px;
    font-size: 15px;
    font-weight: 500;
}

/* When calling the 'Training post buttons and social share' HTML block, put the class 'aw-hide-social-share' in the text element to hide the social share row in the HTML bock */ 
.aw-hide-social-share .aw-training-post-social-share-row {
	display: none;
}



/* ------------- Training Vidoes posts --------------- */
.aw-training-videos-inner-row {
    margin-bottom: 40px;
}

.aw-training-video-name {
     margin-bottom: 15px !important;
}

/* ------------ END Training Vidoes posts ------------- */

/* Get rid of the default theme div/border at the bottom of the post */
.single-post .wd-single-footer {
    display: none;
}


/* Sidebar toggle on small screen */
.offcanvas-sidebar-mobile:not(.wd-on-toolbar) .wd-sidebar-opener {
    background-color: #F69C2D;
    z-index: 1000; /* It was cover by dome elements, for ce it to the front */
}

/* The three doyd on the idebar toggle on small screen */
.wd-sidebar-opener.wd-not-on-shop>a:before {
    color: white;
}

.sidebar-container.wd-inited .widget-heading {
    background: #e7e7e7;
}



/* Hide the "X" symbol for closing sidebar */
.sidebar-container.wd-inited .close-side-widget a::before {
   display: none;
}


/* ====================================== END Single post (Training and Training Videos) ===============================*/

/* ==================================== Somatic Experiencing® Professional Training Page ===============================*/
#somatic-training-level-row ul {
	margin-left: 10px;
}

#Somatic-experiencing-FAQ .vc_toggle_title>h4 {
    font-weight: 500;
}

.aw-trainer-inline-img {
    margin-bottom: 10px !important;	
}  

/* ================================= END Somatic Experiencing® Professional Training Page ==============================*/


/* =================================================== Resources Page ==================================================*/
.aw-resources-row h4 {
    margin-bottom: 5px;
}

.aw-resources-row a {
    text-decoration: underline;
}

.aw-resources-row  .aw-resources-by-author {
    margin-bottom: 70px;
}

/* ================================================= END Resources Page ================================================*/





/* ================================================ Training Listing Page ==============================================*/
.aw-training-blog-row .wd-blog-holder .wd-post-entry-meta {
    display: none;
}

/* ============================================== END Training Listing Page ============================================*/



/* ============================================= Training Video Listing Page ===========================================*/
.aw-training-video blog-row .wd-blog-holder .wd-post-entry-meta {
    display: none;
}

/* =========================================== END Training Video Listing Page =========================================*/




/* ================================================== Testimonial Block  ===============================================*/
/* Did this  with HTML block to have the flexibility to put this on any page */

#aw-testimonial-carousel .wd-info-box {
	background-color: lavender;	
	box-shadow: none;
}

#aw-testimonial-carousel .info-box-title {
	font-size:21px;
}

#aw-testimonial-carousel .info-box-subtitle {
	color: #848282;
	font-size: 13px;
}

/* ================================================ END Testimonial Block  =============================================*/


/* ==================================================== Contact Page ===================================================*/

/* ================================================= END Contact Page ==================================================*/



/* ======================================================= Footer ======================================================*/
footer .copyrights-wrapper {
    font-size: 15px;
}

.scrollToTop {
    background-color: #F69C2D !important;
}

.scrollToTop::after {
    color: white;
}


/* ===================================================== END Footer ====================================================*/


/* =====================================================================================================================*/
/* ==================================================== Responsive =====================================================*/
/* =====================================================================================================================*/
/* =====================================================================================================================*/
@media only screen and (min-width: 1240px) {
 
 
    
}


/* =====================================================================================================================*/
@media only screen and  (min-width: 1025px) {
    

/* This is from "header builder" for the header "Header for posts with post title" */
/* This is to increase the haeder height since teh interface only allows up to 200px */
.whb-header-bottom .whb-header-bottom-inner {
    min-height: 310px;
    max-height: none;
    height: auto !important;
}


}


/* =====================================================================================================================*/
@media only screen and  (max-width: 1024px) {
    
/* This is from "header builder" for the header "Header for posts with post title" */
/* This is to increase the haeder height since teh interface only allows up to 200px */
.whb-header-bottom .whb-header-bottom-inner {
    min-height: 270px;
    max-height: none;
    height: auto !important;
}


}

/* =====================================================================================================================*/
@media only screen and (max-width: 991.9px) {
    
/* If I set Responsive in WPbakery column so that tablet portrait is one column, it will set the breakpoint at (min-width: 992px) (Eg. column to be 50%).
So this is the CSS for one column (anything under 992px) */


.aw-testimonials-inner-row > .wpb_column {
    margin-bottom: 40px;
}    

/* This ID is set on the "Happened" page */
#aw-happened-testimonials-row {
    padding-bottom: 20px !important;
}

#aw-contact-page-info-row .aw-contact-info-column {
   text-align: center;    
}

#aw-contact-page-info-row .vc_icon_element {
   text-align: center !important;    
}

}

/* =====================================================================================================================*/
@media only screen and (max-width: 767.9px) {
/* This is for smaller than but NOT including iPad portrait */   
	

.aw-home-follow-us-text p {
    text-align: center !important;
    margin-bottom: 10px !important;
}

.aw-social-follow-separator-col {
    display: none !important;
}


.aw-home-social-buttons {
    text-align: center !important;
} 



/* ----------  Contact form 7 -----------*/
.aw-cf7-two-col {
    display: block;
}

.aw-cf7-two-col > div {
    width: 100%;
    margin: 0 !important;
}



#aw-contact-page-info-row {
    padding-left: 3% !important;
    padding-right: 3% !important;
}

/* -------- Somatic Experiencing® Professional Training ------*/
	
/* This is for the inline images of the trainers, set it to block and not floating on mobile,
 Must add this class snmae on the inline image itself */	
.aw-trainer-inline-img {
	float: none;
    display: block;
    margin-bottom: 20px !important;	
}    
    
/* -----------------------------------------------------------*/    
    
}  

/* =====================================================================================================================*/
@media (min-width: 769px) {
    
    
/* If user is not logged-in, the sidebar would be hidden by CSS above, so expand the main content area to 100 */     
body.aw-cat-training-video:not(.logged-in) .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
}


}

/* =====================================================================================================================*/
@media only screen and (max-width: 480px) {
    
h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

.page-title .title {
    font-size: 50px !important;
}


.aw-post-title h1 {
    padding: 80px 2%;
    font-size: 40px;
}

#aw-home-intro-row {
    padding-left: 3% !important;
    padding-right: 3% !important;
}
	


.aw-home-hero-text-col h2 {
	font-size: 7.8vw;
}		

#aw-contact-page-info-row {
    padding-left: 1% !important;
    padding-right: 1% !important;
}

.aw-home-intro-text p {
    font-size: 21px;
}


.wd-popup {
	padding: 16px !important;
}

}

/* =====================================================================================================================*/