Style Elements Easily With Ready-Made

CUSTOM CSS

Headings separator (solid)
Custom CSS Class = accent-border-color

Info Box (icons background color)
Custom CSS Class = accent-icon-bg

Just Icon (icons background color)
Custom CSS Class = accent-icon-bg

Advanced Carousel (arrows background color)
Custom CSS Class = accent-arrow-bg

Paste “.masthead” in “Containers” field on Revolution Slider settings page.

Accent color:
Custom CSS Class=”paint-accent-color”

Secondary color:
Custom CSS Class=”color-secondary”

Title color:
Custom CSS Class=”color-title”

Highlight text:

[dt_highlight color="" text_color="#ffffff" bg_color="#3de374"]your text[/dt_highlight]

Extra class name for shortcode: 

full-width-btn

Extra class name for shortcode: 

btn-margin, btn-margin-left

Extra class name for VC row or column: 

text-centered

Centering subtitles for first level

.main-nav > li > a .menu-item-text {
text-align: center;
}

Centering subtitles for sub levels

.sub-nav > li > a .subtitle-text {
text-align: center;
}

.main-nav > li > a .text-wrap,
.header-bar .main-nav > li > a,
.menu-box .main-nav > li > a {
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}

.main-nav > .menu-item > a .fa {
padding-right: 0;
padding-bottom: 2px;
}

Menu background
.sub-nav,
.dt-mega-menu-wrap {
-webkit-border-radius: 10px;
border-radius: 10px;
}

Hover backgrounds
.top-header .sub-nav.hover-style-bg li:not(.dt-mega-parent) > a,
.top-header .hover-style-click-bg li:not(.dt-mega-parent) > a,
.top-header .hover-style-click-bg li:not(.dt-mega-parent) > a .rippleAnimate,
.top-header .dt-mega-menu .sub-nav .dt-mega-parent .sub-nav a:hover {
-webkit-border-radius: 10px;
border-radius: 10px;
}

.sub-downwards .main-nav .sub-nav .sub-nav {
padding-left: 20px;
padding-right: 20px;
}

.page-title .breadcrumbs {
background-color: rgba(0, 0, 0, 0.1);
padding: 4px 18px 4px 18px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: solid 1px rgba(0, 0, 0, 0.5);
}

#fancy-header .wf-table {
padding-top: 20px;
padding-bottom: 30px;
}

.page-template-template-microsite .top-bar {
display: none;
}

.project-navigation {
top: 30px;
right: 110px;
}