/*
 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;
}

h1 {
    font-size: 60px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 27px;
}

h4 {
    font-size: 21px;
}


.wd-cookies-popup {
	background-color: #C4D8F9 !important;
}	

.cookies-buttons .cookies-more-btn {
	font-size: 15px !important;
    font-weight: 500 !important;
}

/* Set the button color at Theme settings */
.cookies-buttons .cookies-accept-btn {	
	padding: 10px 14px !important;
	font-size: 15px !important;	
	font-weight: 500 !important;
	line-height: 1.4 !important;
}	

/* Need to set this to auto as the theme set this to 100% to make the placeholder image fill the container, which caused problem on some element */
/* Must disble placeholder image */
.wd-lazy-load {
    width: auto !important;
}


/* --------- Bloom Newsletter ------- */

#aw-blog-inline-newsletter .et_bloom_inline_form {
	max-width: 550px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* The lower part with the field and button */
#aw-blog-inline-newsletter .et_bloom_form_container .et_bloom_form_content {
    padding: 0 70px;
}

#aw-blog-inline-newsletter img {
	max-height: 64px;
	padding: 12px 7px 7px;
}


.et_bloom_form_text h4 {
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 500 !important;
    color: white !important;    
}


.et_bloom_form_text p {
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}


/* Make the container of input field 100% */
#aw-blog-inline-newsletter .et_bloom_1_field p.et_bloom_popup_input {
    width: 100%;
    padding-right: 0;
}


/* Set this parent div to position:relative so that I can 'absolute' position the button */
#aw-blog-inline-newsletter .et_bloom_form_container .et_bloom_fields {
	position: relative;
}

/* Place the button inside the input field, align to the right */
/* To use animation, the original value must not have !important modifier,
If !important is used by the theme or plugin originally, then maybe use an overlay with :before, 
and change the color on the overlay  */ 
#aw-blog-inline-newsletter button.et_bloom_submit_subscription {
	position: absolute;
    right: 0px;	
	width: 80px !important;
	height: 42px; /* Must hardcode the height here if not Apple/Safari behave erractically */
	border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
	XXanimation: blinking 3s linear infinite;
	animation: blinking 2s ease-out infinite;
}




@keyframes blinking {
  0%, 100% {
    background-color: #f9564a; 
  }
  50% {
    background-color: #c72519; /* darker */
  }
}

/* @keyframes blinking {
  0% {
      background-color: rgba(0,0,128, 1) !important;
  }
  
  
  50% {
     background-color: red !important;
  } 
  
  100% {
      background-color: rgba(0,0,128, 1) !important;
  }
} */

#aw-blog-inline-newsletter .et_bloom_subscribe_email input {
	background-color: #c4d8f9 !important;
	font-family: "Poppins", Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4;
	height: 42px; /* Must hardcode the height here if not Apple/Safari behave erractically */
	color: #242424 !important;
}
	


#aw-blog-inline-newsletter .et_bloom_submit_subscription .et_bloom_button_text {
    font-family: "Poppins", Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.4;
    margin-bottom: 0 !important;
}


#aw-blog-inline-newsletter h2.et_bloom_success_message.et_bloom_animate_message {
    margin-top: 0px;
	margin-bottom: 50px;
    top: 50px
}

.et_bloom_success_message,
.et_bloom_error_message {
	font-family: "Poppins", Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
	line-height: 1.4  !important;
	color: #242424 !important;
}

.et_bloom_success_message {
	background-color: #c4d8f9 !important;
}	

.et_bloom_error_message {
	background-color: #ff9487 !important;
	text-align: center;
}	

/* ------ END Bloom Newsletter ------ */

  

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



/* ============================================== Header, Menu and Title ===============================================*/
/* 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 pages that use theme 'Title' */ 
.page-title {
    padding: 50px 0 !important;
}

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

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


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


/*===================================================== Post Listing ===================================================*/
/* 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;
}

#aw-blog-listing-row .wd-post-entry-meta {
    margin-bottom: 4px
}

#aw-blog-listing-row .wd-post-content {
	padding: 20px 0 0;
}


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



/*=================================================== END Post Listing =================================================*/


/*=================================================== Individual Post ==================================================*/

/* This class is manually added in the "style" tab of the "text/html" element of Woodmart--> Header builder */
.aw-blog-post-title h1 {
    color: white;
    font-size: 40px;
    padding: 50px 8%;
}



/* Hide the meta categories link on top of each post */
.single-post .meta-post-categories {
    display: none;
}

.single-post .post-title {
    display: none;
}

.single-post .entry-meta-list li {
	color: #4b4b4b;
	font-size: 15px !important;
}

/* Hide the date overlay on the faetured image */
.wd-post-date.wd-style-with-bg {
	display: none;
}

.single-post .wd-entry-meta .modified-date {
    font-size: 14px;
    
}

.single-post .article-inner .wd-entry-meta {
    display: block;
    text-align: left;
} 

.single-post .wd-entry-meta .modified-date .updated::before {
    content: "Updated on ";
}

.single-post .wd-entry-meta .modified-date .updated::after {
    content: " |  ";
    white-space: pre;
}

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

/* Disable author name meta click event */
.single-post .wd-entry-meta .meta-author a {
    pointer-events: none;
}

#aw-blog-author-html {
    margin-top: 60px;
}

#aw-blog-author-html .aw-author-bio {
    background-color: #221661;
    padding: 50px 50px 50px;
}

#aw-blog-author-html .aw-author-bio .author-name {
    color: white;
}  

#aw-blog-author-html .aw-author-bio .author-area-info p {
    color: white;
    font-weight: 300;
}

#aw-blog-author-html .author-avatar {
    margin-top: -95px;
}


#aw-blog-author-html .author-avatar img {
    border-radius: 50%;
    border: 6px solid white;
}

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





/*================================================= END Individual Post ================================================*/



/*======================================================= Sidebar ======================================================*/
.woodmart-recent-posts li {
	padding-bottom: 18px !important;
}

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

.woodmart-recent-posts .recent-posts-time {    
    color: #868686 !important;
}

.aw-sidebar-view-all-posts {
	color: #ff5959;
    /* font-weight: 400; */
    font-size: 18px ;
}

.aw-sidebar-view-all-posts:hover {
	color: #ff5959;
}


.aw-sidebar-view-all-posts::after {
    content: "\f120";
    font-family: "woodmart-font";
    vertical-align: middle;
    margin-left: 5px;
	font-size: 22px;
    font-weight: 600;
}

/* Hover animation for "View all posts" on the sidebar */
.aw-sidebar-view-all-posts:hover::after {
	margin-left: 12px;
	transition: margin-left, 500ms;
}

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


/*======================================================== Footer ======================================================*/
.wd-prefooter {
	background-color: #0B0342 !important;
	padding-bottom: 6px !important;
	border-bottom: 1px solid #ffffff26;
}

/* using HTML block added some black <p> tags, remove it, make sure there's no <p> added by me, if not will be hidden too */ 
.main-footer p {
	display: none;
}



.aw-footer-menu {
	text-align: center;
	margin-bottom: 0;
	padding-top: 25px;
    padding-bottom: 10px;
}

.aw-footer-menu li {	
	display: inline-block;
	padding: 0 10px; 
	margin-bottom: 15px !important; 
}

/* Seem like Apple's Safari/ipad add bottom margin to ul tag, hence have to forec it to 0 here */ 
ul#menu-footer-menu {
	margin-bottom: 0 !important;
}

footer .copyrights-wrapper {
	font-size: 15px;
}


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


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

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


}

/*======================================================================================================================*/
@media only screen and (max-width: 767px) {
    
    
    
}  


/* =====================================================================================================================*/
@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: 40px !important;
}


.aw-blog-post-title h1 {
    padding: 50px 3%;
    font-size: 36px;
}
	

/* The lower part of Bloom newsletter with the field and button */
#aw-blog-inline-newsletter .et_bloom_form_container .et_bloom_form_content {
    padding: 0 6%;
}	
	

}

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