Helpful CSS

Reset CSS
html {
–primary-color: #154a7e;
–secondary-color: #9bc1e7;
–primary-font: ‘Lexend Deca’, sans-serif;
–secondary-font: ‘Lato’, serif;
}

body {
font-weight: 400;
}

.main-body .et_pb_row {
width: 90% !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}

/* toolbar sticky au scroll */
.mce-top-part {
position: sticky !important;
top: -60px;
}

.et_pb_section, .et_pb_row {
padding: 0 !important;
}

/***** HEADINGS *****/

h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}

.main-content h1 {
font-family: var(–primary-font);
font-size: 2.7rem;
}

.main-content h2 {
font-family: var(–secondary-font);
font-size: 2rem;
margin-top: 30px;
}

.sidebar-content h3 {
font-family: var(–primary-font);
font-size: 1.85rem;
}

.sidebar-content h4 {
font-family: var(–primary-font);
font-size: 1.5rem;
margin-top: 30px;
}

/***** MAIN BODY *****/

.main-body {
padding: 10px 0;
}

.sidebar-content img {
display: none;
}

.main-body a:hover, .main-body a:focus {
text-decoration: none !important;
}

.main-body ul, .main-body ol {
margin: 15px;
}

.main-body ul ul, .main-body ol ol {
margin: 0 15px -15px;
}

@media (min-width: 981px) {

.main-body {
padding: 40px 0;
}

.main-content {
width: 65% !important;
margin-right: 5% !important;
}

.sidebar-content {
width: 30% !important;
border: 1px solid;
border-radius: 10px;
padding: 20px;
margin-top: 40px;
z-index: 0;
}

.sidebar-content img {
outline: 5px solid #fff;
outline-offset: -15px;
display: block;
}

}

/***** BUTTONS *****/

/***** CONTACT LIST *****/

.cl-modal-container .cl-modal {
min-width: auto;
max-width: 630px;
}

ul#all-contacts {
display: flex;
flex-wrap: wrap;
}

.contact-list-contact-container {
flex-direction: column;
}

.contact-list-main-left {
order: 2;
}

#all-contacts li .contact-list-contact-container {
height: auto !important;
padding: 0 !important;
}

#all-contacts li .contact-list-contact-container {
height: auto;
border-radius: 0 !important;
}

#contact-list-search ul li .contact-list-contact-name {
font-size: 16px !important;
}

span.contact-list-send-email a {
border: 0;
padding: 0;
text-transform: none;
font-weight: 400;
font-size: 16px;
text-decoration: underline !important;
color: #0c2e95 !important;
margin: 0;
}

.contact-list-send-email a:not(.bogus-class):hover, .contact-list-show-contact-button:not(.bogus-class):hover {
text-decoration: none;
background: transparent !important;
color: #0c2e95!important;
border: 0;
}

#contact-list-search {
margin-bottom: 0 !important;
}

#contact-list-search ul li {
margin: 0 !important;
}

.contact-list-main-right {
width: 125px !important;
}

.contact-list-image img {
border: 3px solid var(–secondary-color);
}

@media (min-width: 821px) {
ul#all-contacts {
margin-left: -10px !important;
}
}

/***** COLLAPSIBLES *****/

.et_pb_toggle_close {
background-color: #fff !important;
}

h5.et_pb_toggle_title {
font-size: 1.1rem !important;
color: var(–primary-color) !important;
}

.et_pb_toggle_title:before {
color: var(–primary-color) !important;
}

.et_pb_module.et_pb_toggle {
margin: 15px 0 !important;
}

Navigation
/***** NAVIGATION *****/
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: ‘ETmodules’;
content: ‘\4c’;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: ‘\4d’;
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
/* To space desktop navigation out equally in its container */
@media (min-width: 981px) {
.et_pb_menu__menu, nav.et-menu-nav.fullwidth-menu-nav, #menu-main-navigation {
    width: 100%;
  }
.et_pb_fullwidth_menu .et_pb_menu__menu>nav>ul {
    justify-content: space-around !important;
}
}
@media (min-width: 981px) {
.hide-desktop {
display: none !important;
}
}