CSS Files and structure

If you would like to edit the color, font, or style of any elements, you would do the following:

#primaryContent a {color: #someColor;}

1	#primaryContent a {color: #someColor;}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

#wrap #primaryContent a {color: #someColor;}

1	#wrap #primaryContent a {color: #someColor;}

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

<head>
    (..)
    <link rel="stylesheet" type="text/css" href="css/motive.css">
    (..)
    </head>

<head>

(..)

(..)

</head>

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

<!-- Awesome Icons -->
        <i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

Table of contents:

1. Mixins
2. Animate.css
3. Select2
4. Slider
5. Datepicker
6. Yamm
7. Menu
8. Typography
9. Forms
10. Buttons
11. Utilities
12. Owl Corusel
13. Media Sections
14. Portfolio
15. Magnific Popup
16. Font Awesome
17. Wrapper
18. Headroom
19. Socials
20. Slider
21. Header
22. Sections
23. Submission Steps
24. Icon Box
25. Synchronized slider(Single Product Page)
26. Person Box
27. Pricing Box
28. Product Single
29. Testimonials Tabs
30. Footer
31. Product Items
32. Sorting Bars
33. Google Map (Infobox and Navigation)
34. Custom Animation (Maintenance Page)
35. Blog (Sidebar)
36. Media Queries

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

{Theme} uses utilities for the following categories:

Typography

.ct-fw-300{
font-weight: 300;
}
.ct-fw-400{
font-weight: 400;
}
.ct-fw-500{
font-weight: 500;
}
.ct-fw-600{
font-weight: 600;
}
.ct-fw-700{
font-weight: 700;
}
.ct-fw-800{
font-weight: 800;
}
.ct-fw-900{
font-weight: 900;
}

.ct-fs-i{
font-style: italic;
}

.ct-fs-n{
font-style: normal;
}

.ct-u-size20{
font-size: 20px;
}

.ct-u-underline:hover{
padding-bottom: 5px;
}

.ct-fw-300{

font-weight: 300;

}

.ct-fw-400{

font-weight: 400;

}

.ct-fw-500{

font-weight: 500;

}

.ct-fw-600{

font-weight: 600;

}

.ct-fw-700{

font-weight: 700;

}

.ct-fw-800{

font-weight: 800;

}

.ct-fw-900{

font-weight: 900;

}

.ct-fs-i{

font-style: italic;

}

.ct-fs-n{

font-style: normal;

}

.ct-u-size20{

font-size: 20px;

}

.ct-u-underline:hover{

padding-bottom: 5px;

}

Display Types

.ct-u-displayTable, .ct-u-displayTableVertical{
display: table;
width: 100%;
}

.ct-u-displayTableVertical{
height: 100%;
.ct-u-displayTableCell{
vertical-align: middle;
}
}

.ct-u-displayTableRow{
display: table-row;
}

.ct-u-displayTableCell{
display: table-cell;
}

.ct-u-displayTable, .ct-u-displayTableVertical{

display: table;

width: 100%;

}

.ct-u-displayTableVertical{

height: 100%;

.ct-u-displayTableCell{

vertical-align: middle;

}

.ct-u-displayTableRow{

display: table-row;

}

.ct-u-displayTableCell{

display: table-cell;

}

Paddings

.ct-u-padding0{
padding: 0!important;
}

.ct-u-paddingBoth10{
padding-top: 10px;
padding-bottom: 10px;
}
.ct-u-paddingTop10{
padding-top: 10px;
}
.ct-u-paddingBottom10{
padding-bottom: 10px;
}
.ct-u-paddingBoth20{
padding-top: 20px;
padding-bottom: 20px;
}
.ct-u-paddingTop20{
padding-top: 20px;
}
.ct-u-paddingBottom20{
padding-bottom: 20px;
}
.ct-u-paddingBoth30{
padding-top: 30px;
padding-bottom: 30px;
}
.ct-u-paddingTop30{
padding-top: 30px;
}
.ct-u-paddingBottom30{
padding-bottom: 30px;
}
.ct-u-paddingBoth40{
padding-top: 40px;
padding-bottom: 40px;
}
.ct-u-paddingTop40{
padding-top: 40px;
}
.ct-u-paddingBottom40{
padding-bottom: 40px;
}
.ct-u-paddingBoth50{
padding-top: 50px;
padding-bottom: 50px;
}
.ct-u-paddingTop50{
padding-top: 50px;
}
.ct-u-paddingBottom50{
padding-bottom: 50px;
}
.ct-u-paddingBoth60{
padding-top: 60px;
padding-bottom: 60px;
}
.ct-u-paddingTop60{
padding-top: 60px;
}
.ct-u-paddingBottom60{
padding-bottom: 60px;
}
.ct-u-paddingBoth70{
padding-top: 70px;
padding-bottom: 70px;
}
.ct-u-paddingTop70{
padding-top: 70px;
}
.ct-u-paddingBottom70{
padding-bottom: 70px;
}
.ct-u-paddingBoth80{
padding-top: 80px;
padding-bottom: 80px;
}
.ct-u-paddingTop80{
padding-top: 80px;
}
.ct-u-paddingBottom80{
padding-bottom: 80px;
}
.ct-u-paddingBoth90{
padding-top: 90px;
padding-bottom: 90px;
}
.ct-u-paddingTop90{
padding-top: 90px;
}
.ct-u-paddingBottom90{
padding-bottom: 90px;
}
.ct-u-paddingBoth100{
padding-top: 100px;
padding-bottom: 100px;
}
.ct-u-paddingTop100{
padding-top: 100px;
}
.ct-u-paddingBottom100{
padding-bottom: 100px;
}
.ct-u-paddingBoth150{
padding-top: 150px;
padding-bottom: 150px;
}
.ct-u-paddingTop150{
padding-top: 150px;
}
.ct-u-paddingBottom150{
padding-bottom: 150px;
}

.ct-u-paddingRight30{
padding-right: 30px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

.ct-u-padding0{

padding: 0!important;

}

.ct-u-paddingBoth10{

padding-top: 10px;

padding-bottom: 10px;

}

.ct-u-paddingTop10{

padding-top: 10px;

}

.ct-u-paddingBottom10{

padding-bottom: 10px;

}

.ct-u-paddingBoth20{

padding-top: 20px;

padding-bottom: 20px;

}

.ct-u-paddingTop20{

padding-top: 20px;

}

.ct-u-paddingBottom20{

padding-bottom: 20px;

}

.ct-u-paddingBoth30{

padding-top: 30px;

padding-bottom: 30px;

}

.ct-u-paddingTop30{

padding-top: 30px;

}

.ct-u-paddingBottom30{

padding-bottom: 30px;

}

.ct-u-paddingBoth40{

padding-top: 40px;

padding-bottom: 40px;

}

.ct-u-paddingTop40{

padding-top: 40px;

}

.ct-u-paddingBottom40{

padding-bottom: 40px;

}

.ct-u-paddingBoth50{

padding-top: 50px;

padding-bottom: 50px;

}

.ct-u-paddingTop50{

padding-top: 50px;

}

.ct-u-paddingBottom50{

padding-bottom: 50px;

}

.ct-u-paddingBoth60{

padding-top: 60px;

padding-bottom: 60px;

}

.ct-u-paddingTop60{

padding-top: 60px;

}

.ct-u-paddingBottom60{

padding-bottom: 60px;

}

.ct-u-paddingBoth70{

padding-top: 70px;

padding-bottom: 70px;

}

.ct-u-paddingTop70{

padding-top: 70px;

}

.ct-u-paddingBottom70{

padding-bottom: 70px;

}

.ct-u-paddingBoth80{

padding-top: 80px;

padding-bottom: 80px;

}

.ct-u-paddingTop80{

padding-top: 80px;

}

.ct-u-paddingBottom80{

padding-bottom: 80px;

}

.ct-u-paddingBoth90{

padding-top: 90px;

padding-bottom: 90px;

}

.ct-u-paddingTop90{

padding-top: 90px;

}

.ct-u-paddingBottom90{

padding-bottom: 90px;

}

.ct-u-paddingBoth100{

padding-top: 100px;

padding-bottom: 100px;

}

.ct-u-paddingTop100{

padding-top: 100px;

}

.ct-u-paddingBottom100{

padding-bottom: 100px;

}

.ct-u-paddingBoth150{

padding-top: 150px;

padding-bottom: 150px;

}

.ct-u-paddingTop150{

padding-top: 150px;

}

.ct-u-paddingBottom150{

padding-bottom: 150px;

}

.ct-u-paddingRight30{

padding-right: 30px;

}

Margins

.ct-u-margin0{
margin: 0!important;
}

.ct-u-marginBoth10{
margin-top: 10px;
margin-bottom: 10px;
}
.ct-u-marginTop10{
margin-top: 10px;
}
.ct-u-marginBottom10{
margin-bottom: 10px;
}
.ct-u-marginBoth20{
margin-top: 20px;
margin-bottom: 20px;
}
.ct-u-marginTop20{
margin-top: 20px;
}
.ct-u-marginBottom20{
margin-bottom: 20px;
}
.ct-u-marginBoth30{
margin-top: 30px;
margin-bottom: 30px;
}
.ct-u-marginTop30{
margin-top: 30px;
}
.ct-u-marginBottom30{
margin-bottom: 30px;
}
.ct-u-marginBoth40{
margin-top: 40px;
margin-bottom: 40px;
}
.ct-u-marginTop40{
margin-top: 40px;
}
.ct-u-marginBottom40{
margin-bottom: 40px;
}
.ct-u-marginBoth50{
margin-top: 50px;
margin-bottom: 50px;
}
.ct-u-marginTop50{
margin-top: 50px;
}
.ct-u-marginBottom50{
margin-bottom: 50px;
}
.ct-u-marginBoth60{
margin-top: 60px;
margin-bottom: 60px;
}
.ct-u-marginTop60{
margin-top: 60px;
}
.ct-u-marginBottom60{
margin-bottom: 60px;
}
.ct-u-marginBoth70{
margin-top: 70px;
margin-bottom: 70px;
}
.ct-u-marginTop70{
margin-top: 70px;
}
.ct-u-marginBottom70{
margin-bottom: 70px;
}
.ct-u-marginBoth80{
margin-top: 80px;
margin-bottom: 80px;
}
.ct-u-marginTop80{
margin-top: 80px;
}
.ct-u-marginBottom80{
margin-bottom: 80px;
}
.ct-u-marginBoth90{
margin-top: 90px;
margin-bottom: 90px;

}
.ct-u-marginTop90{
margin-top: 90px;
}
.ct-u-marginBottom90{
margin-bottom: 90px;
}
.ct-u-marginBoth100{
margin-top: 100px;
margin-bottom: 100px;
}
.ct-u-marginTop100{
margin-top: 100px;
}
.ct-u-marginBottom100{
margin-bottom: 100px;
}
.ct-u-marginBoth150{
margin-top: 150px;
margin-bottom: 150px;
}
.ct-u-marginTop150{
margin-top: 150px;
}
.ct-u-marginBottom150{
margin-bottom: 150px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

.ct-u-margin0{

margin: 0!important;

}

.ct-u-marginBoth10{

margin-top: 10px;

margin-bottom: 10px;

}

.ct-u-marginTop10{

margin-top: 10px;

}

.ct-u-marginBottom10{

margin-bottom: 10px;

}

.ct-u-marginBoth20{

margin-top: 20px;

margin-bottom: 20px;

}

.ct-u-marginTop20{

margin-top: 20px;

}

.ct-u-marginBottom20{

margin-bottom: 20px;

}

.ct-u-marginBoth30{

margin-top: 30px;

margin-bottom: 30px;

}

.ct-u-marginTop30{

margin-top: 30px;

}

.ct-u-marginBottom30{

margin-bottom: 30px;

}

.ct-u-marginBoth40{

margin-top: 40px;

margin-bottom: 40px;

}

.ct-u-marginTop40{

margin-top: 40px;

}

.ct-u-marginBottom40{

margin-bottom: 40px;

}

.ct-u-marginBoth50{

margin-top: 50px;

margin-bottom: 50px;

}

.ct-u-marginTop50{

margin-top: 50px;

}

.ct-u-marginBottom50{

margin-bottom: 50px;

}

.ct-u-marginBoth60{

margin-top: 60px;

margin-bottom: 60px;

}

.ct-u-marginTop60{

margin-top: 60px;

}

.ct-u-marginBottom60{

margin-bottom: 60px;

}

.ct-u-marginBoth70{

margin-top: 70px;

margin-bottom: 70px;

}

.ct-u-marginTop70{

margin-top: 70px;

}

.ct-u-marginBottom70{

margin-bottom: 70px;

}

.ct-u-marginBoth80{

margin-top: 80px;

margin-bottom: 80px;

}

.ct-u-marginTop80{

margin-top: 80px;

}

.ct-u-marginBottom80{

margin-bottom: 80px;

}

.ct-u-marginBoth90{

margin-top: 90px;

margin-bottom: 90px;

}

.ct-u-marginTop90{

margin-top: 90px;

}

.ct-u-marginBottom90{

margin-bottom: 90px;

}

.ct-u-marginBoth100{

margin-top: 100px;

margin-bottom: 100px;

}

.ct-u-marginTop100{

margin-top: 100px;

}

.ct-u-marginBottom100{

margin-bottom: 100px;

}

.ct-u-marginBoth150{

margin-top: 150px;

margin-bottom: 150px;

}

.ct-u-marginTop150{

margin-top: 150px;

}

.ct-u-marginBottom150{

margin-bottom: 150px;

}

Letter Spacing

.ct-u-letterSpacing1{
letter-spacing: 1px;
}
.ct-u-letterSpacing2{
letter-spacing: 2px;
}
.ct-u-letterSpacing3{
letter-spacing: 3px;
}
.ct-u-letterSpacing4{
letter-spacing: 4px;
}
.ct-u-letterSpacing5{
letter-spacing: 5px;
}
.ct-u-letterSpacing6{
letter-spacing: 6px;
}
.ct-u-letterSpacing7{
letter-spacing: 7px;
}
.ct-u-letterSpacing8{
letter-spacing: 8px;
}
.ct-u-letterSpacing9{
letter-spacing: 9px;
}
.ct-u-letterSpacing10{
letter-spacing: 10px;
}

.ct-u-letterSpacing1{

letter-spacing: 1px;

}

.ct-u-letterSpacing2{

letter-spacing: 2px;

}

.ct-u-letterSpacing3{

letter-spacing: 3px;

}

.ct-u-letterSpacing4{

letter-spacing: 4px;

}

.ct-u-letterSpacing5{

letter-spacing: 5px;

}

.ct-u-letterSpacing6{

letter-spacing: 6px;

}

.ct-u-letterSpacing7{

letter-spacing: 7px;

}

.ct-u-letterSpacing8{

letter-spacing: 8px;

}

.ct-u-letterSpacing9{

letter-spacing: 9px;

}

.ct-u-letterSpacing10{

letter-spacing: 10px;

}

Line height

.ct-u-line-height24{
line-height: 24px;
}

.ct-u-line-height26{
line-height: 26px;
}

.ct-u-line-height30{
line-height: 30px;
}

.ct-u-line-height24{

line-height: 24px;

}

.ct-u-line-height26{

line-height: 26px;

}

.ct-u-line-height30{

line-height: 30px;

}

Colors

.ct-u-text--white{
color: #fff;
}

.ct-u-text--motive{
color: @ct-motive;
}

.ct-u-text--green{
color: #a2bf52;
}

.ct-u-text--orange{
color: #eb8a21;
}

.ct-u-text--dark{
color: #333;
}

.ct-u-text--white{

color: #fff;

}

.ct-u-text--motive{

color: @ct-motive;

}

.ct-u-text--green{

color: #a2bf52;

}

.ct-u-text--orange{

color: #eb8a21;

}

.ct-u-text--dark{

color: #333;

}

Borders

.ct-u-borderTop--white{
border-top: 1px solid #fff;
padding: 30px 0;
}

.ct-u-borderBottom--grey{
border-bottom: 1px solid #e6e6e6;
}

.ct-u-borderTop--white{

border-top: 1px solid #fff;

padding: 30px 0;

}

.ct-u-borderBottom--grey{

border-bottom: 1px solid #e6e6e6;

}

Position

.ct-u-positionRelative{
position: relative;
}

.ct-u-positionRelative{

position: relative;

}

News

Colors

Icons

CSS Files & Structure

Utilities

Siver

Estato

Disrupt

We are elite