# Typography

# Heading 1

48 px

Font: Varela Round Regular

Color: #2f2c2c

## Heading 2

42 px

Font: Varela Round Regular

Color: #2f2c2c

### Heading 3

36 px

Font: Varela Round Regular

Color: #2f2c2c

#### Heading 4

30 px

Font: Varela Round Regular

Color: #2f2c2c

##### Heading 5

24 px

Font: Varela Round Regular

Color: #2f2c2c

###### Heading 6

18 px

Font: Varela Round Regular

Color: #2f2c2c

#### IV Columns Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

#### III Columns Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

#### II Columns Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

#### I Third / II Thirds Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

#### II Thirds / I Third Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

#### I Fourth / III Fourths Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

#### I Fourth / III Fourths Layout

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.

Qit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus,nunc nobis videntur parum clari, fiant sollemnes. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Qit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus,nunc nobis videntur parum clari, fiant sollemnes. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Qit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus,nunc nobis videntur parum clari, fiant sollemnes. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Qit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat est etiam processus dynamicus,nunc nobis videntur parum clari, fiant sollemnes. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

#### Dark background text selection

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

#### Primary background text selection

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

#### Light background text selection

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

- Qolor sit amet, consectetuer;
- Investigationes demonstraverunt;
- Dam liber tempor cum soluta;
- Quarta decima et quinta.

- Qolor sit amet, consectetuer;
- Investigationes demonstraverunt;
- Dam liber tempor cum soluta;
- Quarta decima et quinta.

- 01 Qolor sit amet, consectetuer;
- 02 Investigationes demonstraverunt;
- 03 Dam liber tempor cum soluta;
- 04 Quarta decima et quinta.

#### Subtitle Style 01

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

Title Color: #2f2c2c
Font Size Title: 48px
Color Line: #4cc2c0
Font Size Txt Description: 24px
Color Txt Description: #acacac

#### Subtitle Style 01

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.

#### Forms Elements

Please, let us know any particular things to check and the best time to contact you by phone (if provided).
Remember Me

#### Alerts Examples

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

#### Typography Tags

###### Tag - abbr

Quarta decima et quinta.

###### Tag - acronym

Quarta decima et quinta.

###### Tag - cite

Quarta decima et quinta.

###### Tag - del

Price 100$ - Price 59.99$ !!!

###### Tag - em

Mirum est notare

###### Tag - small

Quarta decima et quinta.

###### Tag - strike

Quarta decima et quinta.

###### Tag - sub

H2SO4

###### Tag - sup

X3

###### Tag - ol(standard)

1. Qolor sit amet, consectetuer;
2. Investigationes demonstraverunt;
3. Dam liber tempor cum soluta;
4. Quarta decima et quinta.

###### Tag - ol(primary)

1. Qolor sit amet, consectetuer;
2. Investigationes demonstraverunt;
3. Dam liber tempor cum soluta;
4. Quarta decima et quinta.

###### Tag - ol(secondary)

1. Qolor sit amet, consectetuer;
2. Investigationes demonstraverunt;
3. Dam liber tempor cum soluta;
4. Quarta decima et quinta.

#### Theme Icons

    <i class="seoicon-social-instagram"></i>

    <i class="seoicon-social-linkedin"></i>

    <i class="seoicon-quotes"></i>

    <i class="seoicon-loupe-0"></i>

    <i class="seoicon-arrow-back"></i>

    <i class="seoicon-arrow-to-bottom"></i>

    <i class="seoicon-hit-target"></i>

    <i class="seoicon-business-cash"></i>

    <i class="seoicon-business"></i>

    <i class="seoicon-button"></i>

    <i class="seoicon-check"></i>

    <i class="seoicon-check-bold"></i>

    <i class="seoicon-clip"></i>

    <i class="seoicon-clock"></i>

    <i class="seoicon-coins"></i>

    <i class="seoicon-commerce"></i>

    <i class="seoicon-tags"></i>

    <i class="seoicon-chat-comment"></i>

    <i class="seoicon-cross"></i>

    <i class="seoicon-delete-bold"></i>

    <i class="seoicon-delete"></i>

    <i class="seoicon-draw"></i>

    <i class="seoicon-exit-door"></i>

    <i class="seoicon-facebook"></i>

    <i class="seoicon-google"></i>

    <i class="seoicon-help"></i>

    <i class="seoicon-graphic-search"></i>

    <i class="seoicon-hand-thumb"></i>

    <i class="seoicon-mail-send"></i>

    <i class="seoicon-interface"></i>

    <i class="seoicon-left-large-arrow"></i>

    <i class="seoicon-lightbulb-on"></i>

    <i class="seoicon-line-graph"></i>

    <i class="seoicon-loupe"></i>

    <i class="seoicon-loupe-2"></i>

    <i class="seoicon-loupe-3"></i>

    <i class="seoicon-email"></i>

    <i class="seoicon-menu-dots-bold"></i>

    <i class="seoicon-menu-dots"></i>

    <i class="seoicon-musical"></i>

    <i class="seoicon-people"></i>

    <i class="seoicon-basket"></i>

    <i class="seoicon-help-action"></i>

    <i class="seoicon-pie-circular-graphic-with-bars-in-the-center-part-thin-symbol-outline-inside-a-circle"></i>

    <i class="seoicon-pie-graph"></i>

    <i class="seoicon-pie-graph-split"></i>

    <i class="seoicon-pin-map"></i>

    <i class="seoicon-pinterest"></i>

    <i class="seoicon-play-button-arrowhead"></i>

    <i class="seoicon-play"></i>

    <i class="seoicon-right-large-arrow"></i>

    <i class="seoicon-right-arrow"></i>

    <i class="seoicon-rss"></i>

    <i class="seoicon-search"></i>

    <i class="seoicon-search-large"></i>

    <i class="seoicon-search-bold"></i>

    <i class="seoicon-search-outline"></i>

    <i class="seoicon-seo-landing-pages-symbol-inside-a-circle"></i>

    <i class="seoicon-seo-search-symbol"></i>

    <i class="seoicon-settings-symbol-with-up-arrow-in-a-circle"></i>

    <i class="seoicon-shape-heart"></i>

    <i class="seoicon-shapes-play"></i>

    <i class="seoicon-shape-heart-bold"></i>

    <i class="seoicon-shapes"></i>

    <i class="seoicon-zoom"></i>

    <i class="seoicon-social-links"></i>

    <i class="seoicon-social-pinterest"></i>

    <i class="seoicon-social-twitter"></i>

    <i class="seoicon-social-google-plus"></i>

    <i class="seoicon-social-facebook"></i>

    <i class="seoicon-stack"></i>

    <i class="seoicon-strategy"></i>

    <i class="seoicon-Target-Audience"></i>

    <i class="seoicon-target-search"></i>

    <i class="seoicon-text-paper"></i>

    <i class="seoicon-time-is-running"></i>

    <i class="seoicon-link"></i>

    <i class="seoicon-link-bold"></i>

    <i class="seoicon-pin-it"></i>

    <i class="seoicon-twitter"></i>

    <i class="seoicon-wireless-internet-connection-symbol"></i>

    <i class="seoicon-worm-outline-inside-a-circle"></i>

    <i class="seoicon-youtube"></i>