I´m a lighter coloured paragragh inside on a darker coloured div
**/
/**
//
// Globals - Global
//
## Definition:
Styles used globally over the application.
**/
* {
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
html {
font-family: 'Open Sans', sans-serif;
line-height: 1.5em;
font-size: 12px;
}
body {
background: #f3f3f3;
}
p {
font-family: 'Open Sans', sans-serif;
line-height: 1.5em;
font-size: 14px;
margin-top: 0;
margin-bottom: 21px;
}
p:last-child {
margin-bottom: 0;
}
.row:last-child {
margin-bottom: 0;
}
/**
//
// Globals - Headings
//
## Definition:
Headings.
**/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
display: block;
position: relative;
font-family: 'Montserrat', sans-serif;
line-height: 1.5em;
font-weight: 700;
color: #00afe9;
margin-top: 21px;
margin-bottom: 10.5px;
}
h1,
.h1 {
font-size: 34px;
}
h2,
.h2 {
font-size: 28px;
}
h3,
.h3 {
font-size: 22px;
}
h4,
.h4 {
font-size: 17px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 11px;
}
.hgroup {
margin-bottom: 30px;
}
.hgroup h1,
.hgroup .h1,
.hgroup h2,
.hgroup .h2,
.hgroup h3,
.hgroup .h3,
.hgroup h4,
.hgroup .h4,
.hgroup h5,
.hgroup .h5,
.hgroup h6,
.hgroup .h6 {
margin: 0;
}
.hgroup h1,
.hgroup .h1 {
line-height: 34px;
}
.hgroup h2,
.hgroup .h2 {
line-height: 28px;
}
.hgroup h3,
.hgroup .h3 {
font-size: 22px;
}
.hgroup h4,
.hgroup .h4 {
line-height: 17px;
}
.hgroup h5,
.hgroup .h5 {
line-height: 14px;
}
.hgroup h6,
.hgroup .h6 {
line-height: 11px;
}
/**
//
// Globals - Inline Elements
//
## Definition:
Inline elements.
**/
a {
color: #272727;
text-decoration: none;
background-color: transparent;
transition: all 0.2s ease-in-out;
}
a:hover,
a:active {
outline: 0;
}
a:hover {
text-decoration: underline;
color: #0d0d0d;
}
a:active {
color: #000000;
}
address {
margin: 0;
padding: 0;
border: none;
color: #00afe9;
}
address p {
margin: 0;
line-height: 14px;
}
address div {
margin-bottom: 10px;
}
address div:last-child {
margin: 0;
}
small,
.small {
font-size: 12px;
}
big,
.big,
.large {
font-size: 17px;
}
abbr {
border-bottom: solid 1px #00afe9;
cursor: help;
}
b,
strong,
.bold {
font-weight: bold;
}
em,
.italic {
font-style: italic;
}
u,
.underline {
text-decoration: underline;
}
strike {
text-decoration: line-through;
}
mark,
.highlight {
background-color: #00afe9;
padding: 0 5px;
}
figure {
display: block;
margin: 0;
padding: 0;
}
img {
width: 100%;
height: auto;
}
/**
//
// Common - Utility Classes
//
Definition:
Custom generic classes used on your application.
**/
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.no-wrap {
white-space: nowrap;
}
.no-marg {
margin: 0;
}
.no-pad {
padding: 0;
}
.no-bord {
border: none;
}
.no-marg-pad,
.no-pad-marg {
margin: 0;
padding: 0;
}
.no-boxmodel {
margin: 0;
padding: 0;
border: none;
}
.inline {
display: inline;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
.overflow-auto {
overflow: auto;
}
.left {
float: left;
}
.right {
float: right;
}
.full {
width: 100%;
}
.auto {
width: auto;
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.container-fluid:after,
.row:after {
clear: both;
}
.hide,
.hidden {
display: none;
border: red;
}
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.mtop15 {
margin-top: 15px;
}
.mtop30 {
margin-top: 30px;
}
.mbottom15 {
margin-bottom: 15px;
}
.mbottom30 {
margin-bottom: 30px;
}
/**
//
// Utilities - Utility Space
//
## Definition:
Utility Classes to add extra Margins/Paddings on website sections.
## HTML Markup Examples: