DIVI theme CSS code snippets by https://marusca.design

style.css

/* hide top header on scroll by Geno Quiroz */
    #top-header {
            z-index: 9;}
    #main-header{
        transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;}
    #main-header.et-fixed-header {
        top: 0 !important;}

/* solve the pixelate logo */

#logo {
-webkit-transform:none;
}

/* Display a different logo on mobile */

@media only screen and (max-width:980px) {
#logo {
content: url("urlyourlogo");
}
}
/* Add a word before the mobile menu hamburger icon */

.mobile_menu_bar:after {
content: 'MENU';
position: relative;
top: 17px;
}

/* Make the mobile menu sticky/fixed */

@media (max-width:980px) {
#mainheader
{
position: fixed !important;
}
}
/*Adding Elegant Themes font icons*/
.text-class {
font-family: 'ETmodules';
content: "\45"; /*example of arrow right*/
}
/* Flip columns on mobile:
Give the row you want to flip the columns for a custom class*/
@media only screen and ( max-width: 980px ) {
    .myclass {
    display: -webkit-flex;
    -webkit-flex-direction: column-reverse;
    display: flex;
    flex-direction: column-reverse !important;
    }
}
/* overhanging logo */
 
#top-header {z-index: 99999;}
 
#logo {
    max-height: 220%;
    margin-top: -32px;
    z-index: 100000;
}
 
@media only screen and (max-width : 980px) {
    #logo { margin-top: 0px}}

/*Remove drop down arrow on menu items.*/
#top-menu .menu-item-has-children > a:first-child::after, .fullwidth-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {
content: "";
}
/* remove box-shadow for menu*/
#main-header {
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0);
}
/* Remove Sidebar border */
.et_pb_widget_area_left {
    border-right: none;
}

.et_pb_widget_area_right {
	  border-right: none;
}
/*adding border dividers between menu items*/
#top-menu li {
padding: 10px 0 !important;
}

#top-menu li > a {
border-left: 1px solid #dadada;
padding: 10px 15px !important;
}

#top-menu li:last-child > a {
border-right: 1px solid #dadada;
}
.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
padding-bottom: 20px;
padding-top: 20px !important;
}
/*Growing Lines by SJ James*/
/* Stop the opacity change on hover */
#top-menu a:hover {
    opacity: 1;
}

/* By default Divi adds a shit load of padding to the bottom of the menu link to push the bottom of the header down. We are replacing some of that padding with a margin to bring the line closer to the link */
#top-menu a {
    padding-bottom: 14px;
    margin-bottom: 16px;
}

#top-menu a:before {
    background-color: rgba(0, 0, 0, 0.6); /* default for Divi menu items */
    bottom: 4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    transition: all .3s ease-in-out 0s;
    -webkit-transform-origin: 2px;
    -ms-transform-origin: 2px;
    transform-origin: 2px;
    width: 100%; /* adjust to make the line shorter/longer */
    -webkit-transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
}

#top-menu a:hover:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    visibility: visible;
}
/* underline menu like on Extra theme */

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before { 
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1;
}
#top-menu li a:hover:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1.0;
}
 
#top-menu li a:before {
content: '';
position: absolute;
top: 10px;
left: 0;
background: #ffffff;
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}
/* Menu underline fill in on hover */
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before { 
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:hover:before {
      right: 0;  
}
#top-menu  li  a:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: 50%;
    background: #FF9C5E; /* Change the line color here */
    height: 2px;  /* Change line size here if your font is big mayby you could use 4px */
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
/*slide description align text left - image right*/
@media screen and (min-width : 768px) {
.md-slider-left.et_pb_slider .et_pb_container {
width:100%
}

.md-slider-left .et_pb_slide_with_image .et_pb_slide_description {
float: left !important;
text-align:right;
padding:10% 5%;
width:50%;
}
.md-slider-left .et_pb_slide_image {
width:50%;
margin-left:50%;
}
}

/* hide header shadow */
  #main-header{ 
   -webkit-box-shadow:none!important; 
   -moz-box-shadow:none !important; 
   box-shadow:none !important;}
/*Swap columns order on mobile for two columns*/

@media only screen and (min-width: 981px) {
.column-swap .et_pb_column .et_pb_row .et_pb_column {
margin-left: 4.5%;
}
.column-swap .et_pb_column {
float: right;
}
.column-swap .et_pb_row .et_pb_column:last-child, .column-swap .et_pb_row_inner .et_pb_column:last-child {
margin-right: 4.5%;
margin-left: 0;
width: 47.25%;
}
.column-swap .et_pb_column, .column-swap .et_pb_row .et_pb_column:first-child {
margin-right: 0;
width: 47.25%;
}
}

/*fixing the padding on fullwidth menu*/
body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}
/*------------------------------------------------*/
/*--------------[ARCHIVE BLOG GRID]---------------*/
/*------------------------------------------------*/
 
.search #left-area,
.archive #left-area {
    -moz-column-count: 2;
         column-count: 2;
    -moz-column-gap: 60px;
         column-gap: 60px;}
  
.archive .et_pb_post > a,
.search .et_pb_post > a {
    margin: -20px -20px 10px;
    display: block;}
  
.search #left-area .et_pb_post,
.archive #left-area .et_pb_post {
    overflow: hidden; /* fix for Firefox */
    page-break-inside: avoid;
    break-inside: avoid-column;
    width: 100%;
    padding: 19px;
    border: 1px solid #d8d8d8;
    background-color: #fff;
    word-wrap: break-word;
    display: inline-block;}
  
.search #left-area .et_pb_post h2,
.archive #left-area .et_pb_post h2 {
    font-size: 18px;}
  
.search #left-area .et_pb_post.format-link,
.search #left-area .et_pb_post.format-quote,
.search #left-area .et_pb_post.format-audio,
.archive #left-area .et_pb_post.format-link,
.archive #left-area .et_pb_post.format-quote,
.archive #left-area .et_pb_post.format-audio{
    padding: 0;}
  
.archive .et_pb_post .et_pb_image_container,
.archive .et_pb_post .et_main_video_container,
.archive .et_pb_post .et_audio_content,
.archive .et_pb_post .et_pb_slider,
.search .et_pb_post .et_pb_image_container,
.search .et_pb_post .et_main_video_container,
.search .et_pb_post .et_audio_content,
.search .et_pb_post .et_pb_slider {
    margin: -20px -20px 10px;}
  
.archive .et_pb_post.format-audio .et_audio_content{
    margin: 0px -38px 0px;}
  
.archive .et_pb_post .et_pb_slider .et_pb_slide,
.search .et_pb_post .et_pb_slider .et_pb_slide {
    min-height: 180px;}
  
.archive .pagination,
.search .pagination {
    padding: 20px 0;}
  
 
@media screen and (max-width: 980px) {
    .search #left-area,
    .archive #left-area {
        -moz-column-count: 2;
            column-count: 2;
        -moz-column-gap: 60px;
            column-gap: 60px;}}
 
@media screen and (max-width: 767px) {
    .search #left-area,
    .archive #left-area {
        -moz-column-count: 1;
            column-count: 1;}
    .search .et_pb_post.format-audio .et_audio_content,
    .archive .et_pb_post.format-audio .et_audio_content{
        margin: 0;}
    .search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
    .archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls div.mejs-time-rail,
    .search #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,
    .archive #left-area .et_pb_post.format-audio .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{
        min-width: 300px!important;
        width: 300px!important;}}
/*make 5 gallery columns */
margin: 0 !important;
width: 20% !important;
clear: none !important

/*Two buttons side by side in Code module, centering both when some of them is missing*/
.md-buttons-sidebyside{
	text-align: center;
   	margin:auto;
   	display:inline !important}
.md-first-button {
   	text-align: center;
    	display:inline !important;
}
.md-firs-button a{
	margin-right:80px;
}
.md-second-button {
	text-align: center;
	margin:auto;
    	display:inline !important;
}