/*======================================
Theme Name: Johanna Divi Child Theme
Theme URI: https://johanna.duogeeks.com/
Description: Johanna entrepreneur & lifestyle coach Divi child theme built for Creatives, Coaches, Professionals, & Entrepreneurs looking to Elevate their Online Presence.
Version: 1.0
Author: Divi Awesome
Author URI: https://johanna.duogeeks.com/
Template: Divi
======================================*/
/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */



/*** ALL PARAGRAPH FONT WEIGHT *****/
p {
 font-weight: 400;
 }
/* HOME 1 blog image aspect ratio landscape 4:3*/

.h1-blog-image-4-3 .entry-featured-image-url {
  padding-top: 75%;
  display: block;
}

.h1-blog-image-4-3 .entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}


/*
 * 
 *  Menu Dropdown Styling 
 * 
 */

.nav li li {
    padding: 0 0px;
}

.et-menu li li a {
    width: 290px;
	
}

.nav ul li:last-child a{
	border-bottom:0;	
}


.nav ul li:hover:last-child a{
	border-bottom:0;
}
.nav ul li a:hover {
    background: var(--johanna-light-pink) ;
	border-radius:0px;
    opacity: 1;
	padding-left: 25px; 
	border-bottom: 3px var(--johanna-white)!important;
	transition: all .3s ease-in-out !important;
}

/*** DROP DOWN menu left-Right margin **/
.et_pb_menu .et-menu-nav>ul ul {
    padding: 20px 0px;
}

/* Dropdown Menu Hover Background Color */ 
.et_mobile_menu li a:hover, .nav ul li a:hover {     
	transition: all .3s ease-in-out !important;
	background-color: var(--johanna-light-pink) !important;   
	color:var(--johanna-white)!important;
	opacity: 1; 
	
}


/*****------- Mobile Nested Submenu  -------****/

/** This hides the sub menu items on mobile **/
#page-container .mobile_nav li ul.hide {
    display: none !important;
	
}


/** This adjusts the positioning and the background transparency of the parent menu item on mobile **/
#page-container .mobile_nav .menu-item-has-children {
    position: relative;
}
#page-container .mobile_nav .menu-item-has-children > a {
    background: transparent;
	
}


/** This styles the icon and moves it to the right **/
#page-container .mobile_nav .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}

/** Here you can swap out the actual icons **/
#page-container span.menu-closed:before {
    content: "4c";
    display: block;
    color: var(--johanna-black)!important;
    font-size: 16px;
    font-family: ETmodules;
}
#page-container span.menu-closed.menu-open:before {
    content: "4d";
}

/*Dropdown navigation transition*/
.et_mobile_menu {
  margin-top: 30px;
}
.nav li li {
  width: 100% !important;
  padding: 0 !important;
}
.nav li li a {
  width: 97% !important;
  color: var(--johanna-white) !important;
  transition: 0.3s ease !important;
}
.nav li li:before {
  display: block;
  z-index: -1;
  content: "";
  width: 0;
  height: 100%;
  background: var(--johanna-orange)!important;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: -5;
  transition: 0.3s ease;
}
.nav li li:hover a {
  margin-left: 3% !important;
}
.nav li li:hover {
  background-color: transparent !important;
}
.nav li li:hover:before {
  width: 3%;
}
.et_pb_menu ul li a:hover {
  color:var(--johanna-white) !important;
}
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
  background-color: var(--johanna-white)!important;
  border-color: var(--johanna-orange)!important;
   box-shadow: 0 0 18px #00000026;
  top: 40px;   /* dropdown margin from top */
}
@media only screen and (min-width: 980px) {
  .et_pb_menu .sub-menu {
    width: 310px !important;
    border-radius: 0px 0px 0px 0px!important;
  }
}

@media (max-width: 980px){
.et_pb_menu .et_mobile_menu {
    top: 100%;
    width: 300px;
	padding: 5%;
	align-content:center;
	margin-left:-150px;
}
}
/*End of Header Dropdown Styles*/


/**********Back to top button**************************/

/*---------- Custom Back To Top Button ----------*/
.et_pb_scroll_top.et-visible {
opacity: 1;
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}
.et_pb_scroll_top.et-pb-icon {
right: 15px;
bottom: 15px;
border-radius: 0px;
background: var(--johanna-orange)!important;
padding: 10px;
}
.et_pb_scroll_top.et-pb-icon:hover {
background: #1f1f1f;
color: var(--johanna-white)!important;
}
.et_pb_scroll_top:before {
content: "36";
font-weight: 900;
}

/*** Bouncing Back To Top Button Animation ***/
span.et_pb_scroll_top.et-pb-icon.et-visible {
animation: vertical-bounce 2.2s ease-out infinite;
}
@keyframes vertical-bounce {
0% { transform:translateY(0%); }
12.5% { transform:translateY(-20%); }
25% { transform:translateY(0%); }
37.5% { transform:translateY(-20%); }
50% { transform:translateY(0%); }
}

/**** BACK to TOP BUTTON END ****/

/***SLIDER ARROW STYLING ****/
.et-pb-arrow-next{
	top: 90%;
    position: absolute;
    right: 15% !important;
	background: var(--johanna-white);
    border-radius: 50%;
    border: 1px solid transparent;
}

.et-pb-arrow-next:before {
    content: '5';
}

.et-pb-arrow-prev{
	top: 90%;
    position: absolute;
    left: 65% !important;
	background: var(--johanna-white);
    border-radius: 50%;
    border: 1px solid transparent;
}
.et-pb-arrow-prev:before {
    content: '4';
}
@media (max-width: 450px){
.et-pb-arrow-next {
    right: 55%!important;
	}
}
/**** END ****/


/**** PAGINATION STYLING ******/
/*  style the wp-pagenavi pagination links **/

.wp-pagenavi a,
.wp-pagenavi span {
	color: var(--johanna-black)!important;
	background: #ffffff;
	font-size: 1em !important;
	line-height: 1em;
	border:none;
	font-weight: bold !important;
	padding: 0.45em 0.8em !important;
	border-radius: 100px;
	transition: all .5s;
}


/*style the wp-pagenavi current page number*/

.wp-pagenavi span.current {
	color: var(--johanna-white)!important;
	background: var(--johanna-orange)!important;
	border-radius: 100px;
}

/*style the wp-pagenavi pagination links on hover*/

.wp-pagenavi a:hover {
	color: var(--johanna-white)!important;
	background: var(--johanna-orange)!important;
}

/*style the wp-pagenavi pages text*/

.wp-pagenavi .pages {
	background: none;
}

/*remove border and center the wp-pagenavi links*/

.wp-pagenavi {
	border-top: none;
	text-align: center;
}
/***** PAGENAVI END *****/



/************************* Sidebar **********************/

.et_pb_widget li.cat-item a::before {
    float: left;
    content: '35';
    font-family: etmodules;
    color: var(--johanna-white)!important;
    margin-right: 7px;
    background: var(--johanna-orange)!important;
    width: 23px;
    text-align: center;
    height: 22px;
    padding: 2px 0 3px 3px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    transform: rotate(0deg);
    transition: .5s ease;
}

.et_pb_widget,
.et_pb_widget{border-radius: 5px;
box-shadow: 0px 0px 0px 0px rgba(110,130,208,0.20);
	padding:10px;}

.et_pb_widget .widgettitle,
.et_pb_widget .title{
	text-transform: uppercase;
	position:relative;
	margin-bottom:25px;
	padding-bottom:10px;
	font-size:18px;
	font-weight:700;
	line-height:28px;
	color:var(--johanna-orange)!important;
}
.et_pb_widget .widgettitle:after, #sidebar .et_pb_widget .widgettitle:before,
.et_pb_widget .title:after, #f_sidebar .et_pb_widget .title:before{
	content:'';
	position:absolute;
	bottom:0;
	width:60px;
	border-top:1px solid #001730;
	left:0
}

.et_pb_widget .widgettitle:after,
.et_pb_widget .title:after{
	border-top:3px solid var(--johanna-orange)!important;
	display:block;
	position:absolute;
	bottom:-1px;
	width:30px;
-webkit-transition:all .27s cubic-bezier(0, 0, .58, 1);
transition:all .27s cubic-bezier(0, 0, .58, 1)
}
.et_pb_widget:hover .widgettitle:after,
.et_pb_widget:hover .title:after{
	width:150px;
}

.et_pb_widget_area_left {
    border-right: 0px solid rgba(0,0,0,.1)!important;
    padding-right: 0px!important;
}

.widget_search input#s, .et_pb_widget .wp-block-search__input, .et_pb_widget .wp-block-search__button {
	border: 2px solid var(--johanna-orange)!important;
    background-color: var(--johanna-lighter-pink)!important;
  border-radius: 0px;
}
.widget_search input#searchsubmit{
	 border: 0px solid #001730;
	 color: var(--johanna-white)!important;
    border-radius: 0px;
}

.et_pb_widget .wp-block-search__button {
    border: 2px solid var(--johanna-orange)!important;
    background-color: var(--johanna-orange)!important;
	color:var(--johanna-white)!important;
    border-radius: 0px;
}
/* Recent Post Title */
span.rpwwt-post-title {
    font-weight: 800;
    color: #001730;
}
.et_pb_widget ul li {
    margin-bottom: 1.5em;
}

.et_pb_widget ol li {
    margin-bottom: 5.5em;
}

/* changes widget category */
.et_pb_widget .widget_categories ul li a {
    width: 90%;
    display: inline-block;
    padding: 6px;
    color: var(--johanna-black)!important;
}
.et_pb_widget .widget_categories ul li {
    background: transparent;
}
.et_pb_widget ul li a{
	width:100%!important;
	background-color:var(--johanna-lighter-pink)!important;
	display:block;
	border-radius:0px 0px;
	padding:5px 5px;
}

/*about us image*/
img#about-image {
    float: left;
    margin: 3px 8px 8px 0;
    border-radius: 100%;
    border: 4px solid var(--johanna-orange)!important;
}

/* About me Paragraph */
.widget_aboutmewidget .clearfix{
  font-weight:400;
}
/*To show sidebar bottom in mobile and tablet*/

@media screen and ( max-width: 980px ) {
    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }
}

/**** SIDEBAR END ******/

/**** CONTACT FORM SUCCESS MESSAGE CSS *****/
.contact_form_white{
	   color: var(--johanna-white)!important;
    font-family: Barlow;
    font-size: 16px;
}
.contact_form_black{
	   color: var(--johanna-black)!important;
    font-family: Barlow;
    font-size: 16px;
}

.et_pb_bg_layout_dark h2{
	 color: var(--johanna-black)!important;
    font-family: Barlow;
    font-size: 20px;
	
}

.johanna-blog .et_pb_post {
    position: relative!important;
    background-color: var(--johanna-white)!important;
}


/***********************************************/
/*** EDIT COMMENT redesign ***/
/***********************************************/

/* ===== Comment ======*/

#comment-wrap .comment-respond .comment-reply-title,
#comment-wrap .page_title {
    position: relative;
	display: inline-block;
margin-bottom: 20px;
}
#comment-wrap .comment-respond .comment-reply-title:before,
#comment-wrap .page_title:before {
    content: "e066";
    margin-right: 10px;
    font-family: ETmodules !important;
}

/**** GALLERY *****/
/*Gallery Pagination*/

.et_pb_gallery_pagination a.active {
  background: var(--johanna-black)!important;
  padding: 3.5px 10px;
  border-radius: 25px;
  color: var(--johanna-orange)!important;
  box-shadow: 0 0 18px rgba(110, 130, 208, 0.17) !important;
}
.et_pb_gallery_pagination a {
  padding: 3.5px 10px;
  border-radius: 25px;
  background-color: var(--johanna-orange)!important;
	 color: var(--johanna-white) !important;
  box-shadow: 0 0 18px rgba(110, 130, 208, 0.17) !important;
}
.et_pb_gallery_pagination {
  border: 0px !important;
}
/*End of Gallery Pagination*/



/* Gallery Hover Effect Rotate and Scale*/
/*Normal State*/

@media (min-width: 981px){
.et_pb_gallery_grid .et_pb_gallery_item img {
    transition: .5s ease-in-out;
}
}

/* Hover State */
@media (min-width: 981px){
.et_pb_gallery_grid .et_pb_gallery_item img:hover {
    transform: scale(1.3) rotate(-5deg);
    transition: .5s ease-in-out;
 }
}
/**** GALLERY END *****/


/***** GALLERY LIGHTBOX STYLING ******/
.mfp-title {
    color: var(--johanna-white)!important;
    font-weight: bold;
    background: var(--johanna-orange)!important;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -24px;
  
}
.mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close {
    font-size: 64px;
    font-family: Roboto;
    font-weight: 500;
    top: 10px;
	color:var(--johanna-white)!important;
	right:10px;
    opacity: .2;
}
img.mfp-img {
    padding: 0;
    border: 3px solid var(--johanna-orange)!important;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
	margin-right:20px;
    color: var(--johanna-white)!important;
    font-size: 12px;
    line-height: 18px;
}
/****** END ******/