diff --git a/templates/email/email.html.twig b/templates/email/email.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..d39ac046ea220a282e2dea422b100f3d286e1912
--- /dev/null
+++ b/templates/email/email.html.twig
@@ -0,0 +1,628 @@
+{#
+/**
+ * @file
+ * Open Social theme implementation for Symfony Email.
+ *
+ * Variables:
+ * - body: Email body content.
+ *
+ * @see template_preprocess_email()
+ *
+ * @ingroup themeable
+ */
+#}
+<!doctype html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>Open Social</title>
+    <style>
+        /* -------------------------------------
+            GLOBAL RESETS
+        ------------------------------------- */
+        img {
+            border: none;
+            -ms-interpolation-mode: bicubic;
+            max-width: 100%; }
+
+        body {
+            background-color: #f6f6f6;
+            color: #4a4a4a;
+            font-family: sans-serif;
+            -webkit-font-smoothing: antialiased;
+            font-size: 14px;
+            line-height: 1.4;
+            margin: 0;
+            padding: 0;
+            -ms-text-size-adjust: 100%;
+            -webkit-text-size-adjust: 100%; }
+
+        table {
+            border-collapse: separate;
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+            width: 100%; }
+        table td {
+            font-family: sans-serif;
+            font-size: 16px;
+            vertical-align: top; }
+
+        /* -------------------------------------
+            BODY & CONTAINER
+        ------------------------------------- */
+
+        .body {
+            background-color: #f6f6f6;
+            width: 100%; }
+
+        /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+        .container {
+            display: block;
+            margin: 0 auto !important;
+            /* makes it centered */
+            max-width: 580px;
+            padding: 10px;
+            width: 580px;}
+
+        /* This should also be a block element, so that it will fill 100% of the .container */
+        .content {
+            box-sizing: border-box;
+            display: block;
+            margin: 0 auto;
+            max-width: 580px;
+            padding: 10px; }
+
+        .content-wrapper {
+            width: 100%;
+            background: #fff;
+            box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24); }
+
+        /* -------------------------------------
+            HEADER, FOOTER, MAIN
+        ------------------------------------- */
+        .header {
+            padding-top: 40px;
+            padding-bottom: 20px;
+            text-align: center;
+        }
+
+        .postheader {
+            padding: 0 44px 25px;
+            font-size: 16px;
+        }
+
+        .main {
+            width: 100%;}
+
+        .wrapper {
+            box-sizing: border-box;
+            padding: 0 44px 40px; }
+
+        .footer {
+            clear: both;
+            padding-top: 30px;
+            text-align: center;
+            width: 100%; }
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+            color: #adadad;
+            font-size: 12px;
+            line-height: 21px;
+            text-align: center; }
+
+        .footer .brand {
+            margin-bottom: 0;
+        }
+
+        .footer .brand,
+        .footer .brand a {
+            font-size: 14px;
+        }
+
+        .content-block {
+            padding-top: 10px;
+        }
+        .content-block img {
+            margin: 10px 0;
+        }
+
+        .footer .powered-by {
+            padding-top: 20px;
+        }
+        /* -------------------------------------
+            TYPOGRAPHY
+        ------------------------------------- */
+        h1,
+        h2,
+        h3,
+        h4 {
+            color: #000000;
+            font-family: sans-serif;
+            font-weight: 400;
+            line-height: 1.4;
+            margin: 0;
+            margin-bottom: 30px; }
+
+        h1 {
+            font-size: 35px;
+            font-weight: 300;
+            text-align: center;
+            text-transform: capitalize; }
+
+        p,
+        ul,
+        ol {
+            font-family: sans-serif;
+            font-size: 14px;
+            font-weight: normal;
+            margin: 0;
+            margin-bottom: 15px; }
+
+        p:last-child {
+            margin-bottom: 0; }
+
+        p li,
+        ul li,
+        ol li {
+            list-style-position: inside;
+            margin-left: 5px; }
+
+        ul {
+            padding-left: 1em;
+        }
+
+        small  {
+            font-size: 12px; }
+
+        a {
+            color: {{ primary }};
+            font-weight: 700;
+            text-decoration: underline; }
+
+        a:hover {
+            text-decoration: underline; }
+
+        .first-paragraph {
+            font-size: 16px;
+            margin-bottom: 20px; }
+
+        .bottom-space {
+            margin-bottom: 40px; }
+
+        .notification {
+            font-size: 18px;
+            margin-bottom: 20px; }
+
+        /* -------------------------------------
+            BUTTONS
+        ------------------------------------- */
+        .btn {
+            box-sizing: border-box;
+            width: 100%; }
+        .btn > tbody > tr > td {
+            padding-bottom: 15px; }
+        .btn table {
+            width: auto; }
+        .btn table td {
+            background-color: #ffffff;
+            border-radius: 5px;
+            text-align: center; }
+        .btn a {
+            background-color: #ffffff;
+            border: solid 1px #784288;
+            border-radius: 5px;
+            box-sizing: border-box;
+            color: #784288;
+            cursor: pointer;
+            display: inline-block;
+            font-size: 14px;
+            font-weight: bold;
+            margin: 0;
+            padding: 12px 25px;
+            text-decoration: none;
+            text-transform: capitalize; }
+
+        .btn-primary table td {
+            background-color: #784288; }
+
+        .btn-primary a {
+            background-color: #784288;
+            border-color: #784288;
+            color: #ffffff; }
+
+        .btn-wrapp {
+            margin-bottom: 25px; }
+
+        .btn-wrapp td:nth-child(1),
+        .btn-wrapp td:nth-child(2) {
+          width: 50%;
+        }
+
+        .btn-wrapp td:nth-child(1):nth-last-child(1) {
+          padding: 0;
+          width: auto;
+        }
+
+        .btn-wrapp td:nth-child(odd) {
+            padding-left: 0; }
+
+        .btn-wrapp td:nth-child(even) {
+            padding-right: 0; }
+
+        .btn-link {
+            display: block;
+            position: relative;
+            margin-bottom: 15px;
+            border-radius: 5px;
+            border: 1px solid {{ primary }};
+            color: {{ primary }};
+            padding: 9px 25px 7px;
+            text-align: center; }
+
+        .btn-link:hover {
+            text-decoration: none; }
+
+        .btn-link-one {
+            display: inline-block;
+            width: 100%;
+            max-width: 240px; }
+
+        .btn-link img {
+            position: absolute;
+            top: 10px;
+            left: 11px; }
+
+        .btn-link-bg {
+            background-color: {{ primary }};
+            color: #ffffff !important; }
+
+        /* -------------------------------------
+            COMMENTS, POST, MESSAGE STYLES
+        ------------------------------------- */
+        .comments {
+            border-radius: 5px;
+            border: 1px solid #e0e0e0;
+            margin-bottom: 20px;
+            margin-top: 20px; }
+
+        .comment {
+            padding: 15px 20px 0;
+            border-radius: 5px; }
+
+        .reply {
+            padding-bottom: 20px;
+            margin: 20px 15px;
+            background: #f3f3f3; }
+
+        .post {
+            padding: 15px 20px 20px;
+            font-size: 16px; }
+
+        .message {
+            padding: 5px 20px; }
+
+        .author-msg {
+            margin-bottom: 10px; }
+
+        .post p,
+        .comment p {
+            margin: 10px 0; }
+
+        .post-type {
+            font-weight: 700;
+            margin-bottom: 5px;
+            color: {{ primary }};
+        }
+
+        .post-title {
+            margin-bottom: 10px;
+        }
+
+        .post-info {
+            font-size: 14px;
+        }
+
+        .post-info span,
+        .post-info strong {
+            display: inline-block;
+            vertical-align: sub;
+        }
+
+        .post-answer {
+            background-color: #f3f3f3; }
+
+        .middle-block {
+            padding: 45px 0 0;
+            margin-bottom: 30px;
+            border-bottom: 2px solid #e0e0e0;
+            border-top: 2px solid #e0e0e0; }
+
+        /* -------------------------------------
+            OTHER STYLES THAT MIGHT BE USEFUL
+        ------------------------------------- */
+        .last {
+            margin-bottom: 0; }
+
+        .first {
+            margin-top: 0; }
+
+        .align-center {
+            text-align: center; }
+
+        .align-right {
+            text-align: right; }
+
+        .align-left {
+            text-align: left; }
+
+        .clear {
+            clear: both; }
+
+        .mt0 {
+            margin-top: 0; }
+
+        .mb0 {
+            margin-bottom: 0; }
+
+        .logo {
+            max-height: 80px;
+            max-width: 160px; }
+
+        .preheader {
+            color: transparent;
+            display: none;
+            height: 0;
+            max-height: 0;
+            max-width: 0;
+            opacity: 0;
+            overflow: hidden;
+            mso-hide: all;
+            visibility: hidden;
+            width: 0; }
+
+        .powered-by a {
+            text-decoration: none; }
+
+        .list {
+            display: flex;
+            flex-direction: column; }
+
+        hr {
+            border: 0;
+            border-bottom: 1px solid #f6f6f6;
+            margin: 20px 0; }
+
+        .sr-only {
+          position: absolute;
+          height: 1px;
+          width: 1px;
+          overflow: hidden;
+          word-wrap: normal;
+          margin: -1px;
+          padding: 0;
+          clip: rect(0, 0, 0, 0);
+          border: 0; }
+
+        /* -------------------------------------
+            RESPONSIVE AND MOBILE FRIENDLY STYLES
+        ------------------------------------- */
+        @media only screen and (max-width: 620px) {
+            table[class=body] h1 {
+                font-size: 28px !important;
+                margin-bottom: 10px !important; }
+            table[class=body] p,
+            table[class=body] ul,
+            table[class=body] ol,
+            table[class=body] td,
+            table[class=body] span,
+            table[class=body] a {
+                font-size: 16px !important; }
+            table[class=body] .wrapper,
+            table[class=body] .article {
+                padding: 10px !important; }
+            table[class=body] .content {
+                padding: 0 !important; }
+            table[class=body] .container {
+                padding: 0 !important;
+                width: 100% !important; }
+            table[class=body] .main {
+                border-left-width: 0 !important;
+                border-radius: 0 !important;
+                border-right-width: 0 !important; }
+            table[class=body] .btn table {
+                width: 100% !important; }
+            table[class=body] .btn a {
+                width: 100% !important; }
+            table[class=body] .img-responsive {
+                height: auto !important;
+                max-width: 100% !important;
+                width: auto !important; }}
+
+        /* -------------------------------------
+            STYLES FOR THE NODE EMAIL
+        ------------------------------------- */
+        .card__node-email {
+            border: 1px solid #adadad;
+        }
+        .card__node-email--header {
+            padding-top: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #adadad;
+        }
+        .card__node-email--location,
+        .card__node-email--addtocal,
+        .card__node-email--header {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+        .card__node-email--location,
+        .card__node-email--header {
+            margin-bottom: 25px;
+        }
+        .card__node-email--header a,
+        .card__node-email--title {
+            font-weight: 700;
+        }
+        .card__node-email--title {
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 21px;
+            text-transform: uppercase;
+            color: {{ primary }}
+        }
+        .card__node-email--header a {
+            font-size: 16px;
+            line-height: 24px;
+            color: #4d4d4d;
+            text-decoration: underline;
+        }
+        .card__node-email--header a:hover {
+            color: #4d4d4d;
+            text-decoration: none;
+        }
+        .card__node-email--location > div {
+            margin-bottom: 10px;
+        }
+        .card__node-email--location > div:last-child {
+            margin-bottom: 0;
+        }
+        .add-to-calendar > span {
+            display: block;
+            margin-bottom: 25px;
+            font-weight: 700;
+        }
+        .add-to-calendar > a {
+            margin-bottom: 15px;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 21px;
+            color: #4d4d4d;
+            text-decoration: underline;
+        }
+        .add-to-calendar > a:hover {
+            text-decoration: none;
+        }
+
+        /* -------------------------------------
+            PRESERVE THESE STYLES IN THE HEAD
+        ------------------------------------- */
+        @media all {
+            .ExternalClass {
+                width: 100%; }
+            .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+                line-height: 100%; }
+            .apple-link a {
+                color: inherit !important;
+                font-family: inherit !important;
+                font-size: inherit !important;
+                font-weight: inherit !important;
+                line-height: inherit !important;
+                text-decoration: none !important; }
+            .btn-primary table td:hover {
+                background-color: #34495e !important; }
+            .btn-primary a:hover {
+                background-color: #34495e !important;
+                border-color: #34495e !important; } }
+
+    </style>
+</head>
+<body class="">
+
+<table border="0" cellpadding="0" cellspacing="0" class="body">
+    <tr>
+        <td>&nbsp;</td>
+        <td class="container">
+            <div class="content">
+
+                <!-- START CENTERED WHITE CONTAINER -->
+                <span class="preheader"></span>
+
+                <div class="content-wrapper">
+                    <div class="header">
+                        <img src="{{ logo }}" alt="Logo" class="logo" />
+                    </div>
+
+                    <div class="postheader">
+                        {{ heading }},
+                    </div>
+
+                    <table class="main">
+
+                        <!-- START MAIN CONTENT AREA -->
+                        <tr>
+                            <td class="wrapper">
+                                <table border="0" cellpadding="0" cellspacing="0">
+                                    {% if header %}
+                                    <tr>
+                                        <td>
+                                           {{ header }}
+                                        </td>
+                                    </tr>
+                                    {% endif %}
+                                    <tr>
+                                        <td>
+                                            {{ body }}
+                                        </td>
+                                    </tr>
+                                    {% if footer %}
+                                        <tr>
+                                            <td>
+                                                {{ footer }}
+                                            </td>
+                                        </tr>
+                                    {% endif %}
+
+                                </table>
+                            </td>
+                        </tr>
+
+                        <!-- END MAIN CONTENT AREA -->
+                    </table>
+                </div>
+
+                <!-- START FOOTER -->
+                <div class="footer">
+                    <table border="0" cellpadding="0" cellspacing="0">
+                        <tr>
+                            <td class="content-block">
+                                <p class="brand">
+                                    <strong>
+                                        {% if site_link %}
+                                            <a href="{{ base_url }}">{{ site_name }}</a>
+                                        {% else %}
+                                            {{ site_name }}
+                                        {% endif %}
+                                    </strong>
+                                </p>
+                                {% if site_slogan %}
+                                    <span class="tagline">{{ site_slogan }}</span>
+                                {% endif %}
+                                {% if site_sub_slogan %}
+                                    <br />
+                                    <span class="tagline">{{ site_sub_slogan }}</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="content-block powered-by">
+                                Copyright &copy; {{ "now"|date("Y") }}.
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <!-- END FOOTER -->
+            </div>
+        </td>
+        <td>&nbsp;</td>
+    </tr>
+</table>
+</body>
+</html>
diff --git a/templates/email/swiftmailer.html.twig b/templates/email/swiftmailer.html.twig
index 59db5ba39e35b214c8f867e65529196416e516cb..a1fbca8e96aefab8321018be3c8329e94ed00a94 100644
--- a/templates/email/swiftmailer.html.twig
+++ b/templates/email/swiftmailer.html.twig
@@ -410,15 +410,15 @@
             margin: 20px 0; }
 
         .sr-only {
-          position: absolute;
-          height: 1px;
-          width: 1px;
-          overflow: hidden;
-          word-wrap: normal;
-          margin: -1px;
-          padding: 0;
-          clip: rect(0, 0, 0, 0);
-          border: 0; }
+            position: absolute;
+            height: 1px;
+            width: 1px;
+            overflow: hidden;
+            word-wrap: normal;
+            margin: -1px;
+            padding: 0;
+            clip: rect(0, 0, 0, 0);
+            border: 0; }
 
         /* -------------------------------------
             RESPONSIVE AND MOBILE FRIENDLY STYLES
@@ -577,11 +577,11 @@
                             <td class="wrapper">
                                 <table border="0" cellpadding="0" cellspacing="0">
                                     {% if header %}
-                                    <tr>
-                                        <td>
-                                           {{ header }}
-                                        </td>
-                                    </tr>
+                                        <tr>
+                                            <td>
+                                                {{ header }}
+                                            </td>
+                                        </tr>
                                     {% endif %}
                                     <tr>
                                         <td>