Big commit i'm sorry ...

app/static/css/creative.css

@@ -63,6 +63,92 @@ h6 {
   color: rgba(255, 255, 255, 0.7);
 }
 
+.ql-align-center {
+	text-align: center;
+}
+
+.ql-align-left {
+	text-align: left;
+}
+
+.ql-align-right {
+	text-align: right;
+}
+
+blockquote {
+    padding: 60px 80px 40px;
+    position: relative;
+}
+blockquote p {
+    font-size: 35px;
+    font-weight: 700px;
+    text-align: center;
+}
+
+/*blockquote p::before {
+    content: "\f095"; 
+    font-family: FontAwesome;
+   display: inline-block;
+   padding-right: 6px;
+   vertical-align: middle;
+  font-size: 180px;
+ }*/
+
+blockquote:before {
+  position: absolute;
+  font-family: 'FontAwesome';
+  top: 0;
+  content:"\f10d";
+  font-size: 200px;
+  color: rgba(0,0,0,0.1);
+   
+}
+
+blockquote::after {
+    content: "";
+    top: 20px;
+    left: 50%;
+    margin-left: -100px;
+    position: absolute;
+    height: 3px;
+    width: 200px;
+}
+
+blockquote{
+  font-size: 1.4em;
+  width:60%;
+  margin:50px auto;
+  font-style:italic;
+  color: #555555;
+  padding:1.2em 30px 1.2em 75px;
+  border-left:8px solid #f05f40;
+  line-height:1.6;
+  position: relative;
+  background:#EDEDED;
+}
+
+blockquote::before{
+  font-family:Arial;
+  content: "\201C";
+  color:#f05f40;
+  font-size:4em;
+  position: absolute;
+  left: 10px;
+  top:-10px;
+}
+
+blockquote::after{
+  content: '';
+}
+
+blockquote span{
+  display:block;
+  color:#333333;
+  font-style: normal;
+  font-weight: bold;
+  margin-top:1em;
+}
+
 section {
   padding: 8rem 0;
   z-index: -1;
@@ -141,7 +227,7 @@ img::-moz-selection {
 @media (min-width: 992px) {
   #mainNav {
     border-color: transparent;
-    background-color: transparent;
+    background-color: rgba(0,0,0,0.7);
   }
   #mainNav .navbar-brand {
     color: rgba(255, 255, 255, 0.7);
@@ -190,16 +276,27 @@ header.masthead {
   background-size: cover;
 }
 
-header.masthead hr {
+header.article-img {
+  padding-top: 10rem;
+  padding-bottom: calc(10rem - 56px);
+  background-position: center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+
+header.article-img header.masthead hr {
   margin-top: 30px;
   margin-bottom: 30px;
 }
 
-header.masthead h1 {
+header.article-img header.masthead h1 {
   font-size: 2rem;
 }
 
-header.masthead p {
+header.article-img header.masthead p {
   font-weight: 300;
 }
 
@@ -210,19 +307,27 @@ header.masthead p {
 }
 
 @media (min-width: 992px) {
+  header.article-img {
+    height: 50vh;
+    min-height: 300px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   header.masthead {
     height: 100vh;
     min-height: 650px;
     padding-top: 0;
     padding-bottom: 0;
   }
-  header.masthead h1 {
+
+  header.article-img header.masthead h1 {
     font-size: 3rem;
   }
 }
 
 @media (min-width: 1200px) {
-  header.masthead h1 {
+  header.article-img header.masthead h1 {
     font-size: 4rem;
   }
   .btn-success {