From 07e2f857b5a2ed4fe3ae06d738df16aabc82cf44 Mon Sep 17 00:00:00 2001
From: davegson <3080765+davegson@users.noreply.github.com>
Date: Wed, 23 Oct 2019 17:45:00 +0200
Subject: [PATCH] Import the v3.css in the head

---
 _includes/head.html |    3 +-
 assets/css/v3.css   | 1139 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1141 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/v3.css

diff --git a/_includes/head.html b/_includes/head.html
index 020f1e4..6bd0cc9 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,7 +1,7 @@
 <!-- meta -->
 <meta charset={{ site.encoding }}>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="{{ site.description }}">
 <meta name="author" content="{{ site.author }}">
 <title>{% if page.type == "podcast" %}The Safing Podcast {{ page.title }}{% elsif page.type == "post" %}Safing Blog: {{ page.title }}{% elsif page.title == "Safing" %}{{ page.title }}{% else %}Safing {{ page.title }}{% endif %}</title>
@@ -28,6 +28,7 @@
 <link rel="stylesheet" href="{{ site.vendor_url }}semantic/semantic.min.css" type="text/css">
 <link rel="stylesheet" href="{{ site.vendor_url }}css/fonts-roboto.css" type="text/css">
 <link rel="stylesheet" href="{{ site.assets_url }}css/main.css" type="text/css">
+<link rel="stylesheet" href="{{ site.assets_url }}css/v3.css" type="text/css">
 
 <script src="{{ site.vendor_url }}js/jquery-3.3.1.slim.min.js"></script>
 <script src="{{ site.vendor_url }}semantic/semantic.min.js"></script>
diff --git a/assets/css/v3.css b/assets/css/v3.css
new file mode 100644
index 0000000..cb91a0c
--- /dev/null
+++ b/assets/css/v3.css
@@ -0,0 +1,1139 @@
+* {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body{
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 12% 88% 30% 100% 75% 40% 75% 50%;
+    background-color: white;
+    color: black;
+}
+
+.header-bg{
+    grid-column: 1/3;
+    grid-row: 2;
+    background-image: url("../img/v3/header-bg.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: black;
+}
+
+.navbar {
+    grid-column: 1/3;
+    grid-row: 1;
+    padding-top: 2rem;
+    background-color: black;
+    color: white;
+    padding: 5rem;
+    font-size: 1.5vh;
+}
+
+.navbar div{
+    float: left;
+}
+
+.navbar ul{
+    list-style-type: none;
+    float: right;
+    font-weight: 100;
+}
+
+.navbar li{
+    display: inline;
+    padding-left: 1.5rem;
+    font-weight: 500;
+}
+
+.navbar a{
+    color: white;
+    text-decoration: none;
+    opacity: 0.5;
+    transition:.5s;
+}
+
+.navbar a:hover{
+    opacity: 1;
+    text-decoration: none;
+}
+
+/*.navbar li span{
+    background-color: #396bf5;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    display: inline-block;
+    text-align: center;
+    font-size: 10px;
+}*/
+
+#opacity{
+    opacity: 0.70;
+    font-weight: 100;
+}
+
+.logo{
+    display: flex;
+}
+
+.logo img{
+    padding-right: 1rem;
+    width: 4.5vh;
+    filter: white;
+}
+
+.logo span{
+    opacity: 0.5
+}
+
+header{
+    height: 50vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row: 2;
+    grid-column: 1/3;
+    align-self: center;
+    color: white;
+    margin-bottom: 10vh;
+}
+
+.h-info{
+    padding-top: 1rem;
+    padding-left: 7rem;
+}
+
+.h-info span{
+    opacity: 0.5;
+    font-size: 1.7vh;
+}
+
+.h-info h1{
+    font-size: 10vh;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    max-width: 10px;
+    line-height: 1;
+}
+
+.h-info p{
+    max-width: 40vh;
+    padding-bottom: 2.5rem;
+    opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 200;
+}
+
+.h-info ul{
+    display: inline-flex;
+    list-style-type: none;
+}
+
+.h-stats li{
+    padding-right: 2rem;
+    text-align: center
+}
+
+.h-stats li span{
+    opacity: 1;
+    font-size: 3vh;
+    font-weight: 500
+}
+.h-stats li p{
+    opacity: 0.5;
+}
+
+.h-links{
+    padding-top: 1rem;
+    display: flex;
+}
+
+.h-links span{
+    padding-left: 1rem;
+    padding-top: 1rem;
+    font-size: 1.5vh;
+}
+
+.h-links a{
+    padding-left: 1rem;
+    color: white;
+}
+
+.h-links button{
+    background-color: #05ce78;
+    font-variant-caps: all-petite-caps;
+    border: none;
+    color: white;
+    padding: 10px 25px;
+    text-align: center;
+    text-decoration: none;
+    display: flex;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 0px 10px 10px;
+}
+
+.h-links button img{
+    padding-right: 1rem;
+    width: 50%;
+    height: auto;
+}
+
+
+figure{
+    flex-flow: column;
+    max-width: 75vh;
+    float: right;
+}
+
+figcaption p{
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    opacity: 0.5;
+    font-size: 1.4vh;
+}
+
+
+figcaption ul {
+    padding-top: 1rem;
+    display: flex;
+    list-style-type: none;
+}
+
+figcaption li {
+    padding-right: 9vh;
+}
+
+figcaption li img{
+    width: 11vh;
+    height: auto;
+}
+
+#resize{
+    width: 8vh;
+    height: auto;
+}
+
+.features{
+    height: 0vh;
+    display: grid;
+    grid-template-columns: 21% 21% 21%;
+    grid-column: 1/3;
+    grid-row: 3;
+    align-self: center;
+    justify-content: center;
+}
+
+.features-list{
+
+
+}
+
+.features-list img{
+
+}
+
+#lock{
+    width: 6%;
+    height: auto;
+}
+
+#shield{
+    width: 6%;
+    height: auto;
+}
+
+#community{
+    width: 8%;
+    height: auto;
+}
+
+#lock2{
+    width: 10%;
+    height: auto;
+}
+
+#shield2{
+    width: 11%;
+    height: auto;
+}
+
+#community2{
+    width: 14%;
+    height: auto;
+}
+
+.features-list h1{
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.features-list p{
+   opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 200;
+    max-width: 80%;
+}
+
+.map-features{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 100%;
+    grid-row: 4;
+    grid-column: 1/3;
+    align-self: center;
+}
+
+.map img{
+    grid-row: 1;
+    grid-column: 1/2;
+    float: right;
+    padding-right: 1rem;
+    width: 75vh;
+}
+
+.map-info{
+    grid-row: 1;
+    grid-column: 2/3;
+    padding-left: 7rem;
+}
+
+.map-info h1{
+    font-size: 5vh;
+    padding-bottom: 2rem;
+    max-width: 45vh;
+}
+.map-info p{
+    max-width: 40vh;
+    opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 200;
+}
+
+.qoute{
+    padding-top: 5rem;
+}
+
+.qoute img{
+    float: left;
+    padding-right: 2.5rem;
+    padding-bottom: 2.5rem;
+    padding-top: 1.5rem;
+    width: 8vh;
+}
+
+.qoute span{
+    font-size: 1.5vh;
+    font-weight: 500;
+}
+
+.qoute p{
+    padding-top: 0.5rem;
+    max-width: 45vh;
+    font-size: 1.7vh;
+    font-weight: 200;
+}
+
+
+.key-features{
+    height: 0vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row: 5;
+    grid-column: 1/3;
+}
+
+.key-info{
+    grid-row: 1;
+    grid-column: 1/2;
+    align-self: center;
+    justify-self: end;
+    padding-right: 7rem;
+    padding-bottom: 5rem;
+}
+
+.key-info h1{
+    font-size: 5vh;
+    padding-bottom: 2rem;
+    max-width: 45vh;
+}
+.key-info p{
+    max-width: 40vh;
+    opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 200;
+}
+
+.key-wrap{
+    display: grid;
+    grid-template-columns: 30% 30% ;
+    grid-row: 1;
+    grid-column: 2/3;
+}
+
+.key-one{
+    grid-row: 1;
+    grid-column: 2/3;
+    align-self: center;
+}
+
+.key-one img{
+    padding-bottom: 1rem;
+}
+
+.key-one h1{
+    padding-bottom: 1rem;
+}
+
+.key-one p{
+    max-width: 80%;
+    padding-bottom: 10rem;
+    font-weight: 300;
+    opacity: 0.5
+}
+
+.key-two{
+    grid-area: 1;
+    grid-column: 1/2;
+    align-self: center;
+}
+
+.key-two div{
+    padding-bottom: 10rem;
+}
+
+.key-two img{
+    padding-bottom: 1rem;
+}
+
+.key-two h1{
+    padding-bottom: 1rem;
+}
+
+.key-two p{
+    max-width: 80%;
+    font-weight: 300;
+    opacity: 0.5
+}
+
+.line-features{
+    height: 0vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row: 6;
+    grid-column: 1/3;
+    align-self: start;
+    justify-content: center;
+}
+
+.line-features h1{
+    grid-row: 1;
+    grid-column: 1/2;
+    max-width: 350px;
+    justify-self: end;
+    padding-right: 4rem;
+}
+
+.line-features p{
+    grid-area: 1;
+    grid-column: 2/3;
+    max-width: 480px;
+    padding-left: 4rem;
+    opacity: 0.5;
+    font-weight: 300;
+}
+
+.cast{
+    height: 0vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row: 7;
+    grid-column: 1/3;
+    align-self: start;
+    justify-content: center;
+}
+
+.cast-info{
+    grid-column: 2/3;
+    grid-row: 1;
+    align-self: center;
+}
+
+.cast-info h1{
+    font-size: 4.5vh;
+    padding-bottom: 2rem;
+    max-width: 45vh;
+}
+
+.cast-info p{
+    max-width: 40vh;
+    opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 200;
+}
+
+.cast-info a{
+    text-decoration: none;
+    color: black;
+    opacity: 0.5;
+    font-size: 1.7vh;
+    font-weight: 500;
+    transition: .5s;
+}
+
+.cast-info a:hover{
+    opacity: 1;
+    font-size: 1.7vh;
+    font-weight: 500;
+}
+
+
+.cast-data{
+    grid-column: 1/2;
+    grid-row: 1;
+    justify-self: end;
+    padding-right: 7rem;
+}
+
+.cast-audio{
+    background-color: white;
+    border-radius: 3px;
+    padding: 1rem;
+    padding-right: 5rem;
+    box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
+    display: flex;
+    position: relative;
+    z-index: 2;
+}
+
+.cast-audio img{
+
+}
+
+.cast-audio div{
+    padding-top: 1rem;
+    padding-left: 2rem;
+}
+
+.cast-audio div p{
+    padding-top: 0.5rem;
+    opacity: 0.5;
+}
+
+.cast-audio1{
+    background-color: white;
+    border-radius: 10px;
+    padding: 1rem;
+    padding-right: 5rem;
+    display: flex;
+    margin-top: 1rem;
+}
+
+.cast-audio1 img{
+
+}
+
+.cast-audio1 div{
+    padding-top: 1rem;
+    padding-left: 2rem;
+}
+
+.cast-audio1 div p{
+    padding-top: 0.5rem;
+    opacity: 0.5;
+}
+
+footer{
+    height: 50vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row: 8;
+    grid-column: 1/3;
+    align-self: start;
+    justify-content: center;
+    color: white;
+}
+
+footer a{
+    color: white;
+    text-decoration: none;
+    opacity: 0.5;
+    transition:.5s;
+}
+
+footer a:hover{
+    opacity: 1;
+    text-decoration: none;
+}
+
+.footer-bg{
+    grid-column: 1/3;
+    grid-row: 8;
+    background-image: url("../img/v3/footer-bg.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: -1;
+}
+
+.newsletter{
+    grid-row: 1;
+    grid-column: 1/3;
+    align-self: center;
+    justify-self: center;
+    display: inline;
+}
+
+.newsletter span{
+
+
+}
+
+.newsletter div{
+    padding-top: 1rem;
+}
+
+.newsletter div input{
+    background-color: #302e37;
+    border: none;
+    color: #dbdbdc;
+    padding: 11px;
+    padding-right: 90px;
+    padding-left: 40px;
+    text-align: left;
+    font-size: 16px;
+    border-radius: 100px;
+
+}
+
+.newsletter div button{
+    background: rgb(81,149,253);
+    background: linear-gradient(90deg, rgba(81,149,253,1) 0%, rgba(41,81,224,1) 100%);
+    font-variant-caps: all-petite-caps;
+    border: none;
+    color: white;
+    padding: 10px 35px;
+    text-align: center;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 100px;
+}
+
+.newsletter-list{
+    padding-top: 5rem;
+    grid-row: 2;
+    grid-column: 1/3;
+    display: flex;
+    justify-self: center;
+}
+
+.newsletter-list ul{
+    padding-left: 5rem;
+    padding-right: 5rem;
+    list-style-type: none;
+}
+
+.newsletter-list li{
+    padding-top: 1rem;
+}
+
+.legal{
+    grid-row: 3;
+    grid-column: 1/3;
+    align-self: center;
+
+}
+
+.legal span{
+    padding-left: 5rem;
+}
+
+.legal ul{
+    list-style-type: none;
+    float: right;
+    padding-right: 5rem;
+}
+
+.legal li{
+    display: inline;
+    padding-left: 2rem;
+}
+
+/*@media (prefers-color-scheme: dark) {
+body{
+    height: 100vh;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 12% 88% 30% 100% 75% 40% 75% 50%;
+    background-color: white;
+    color: black;
+}
+}*/
+
+/*Small devices (landscape phones, 576px and up)*/
+@media (max-width: 576px) {
+   body{
+        height: 200vh;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 8% 70% 30% 100% 75% 40% 75% 50%;
+        background-color: white;
+        color: black;
+        overflow-x: hidden;
+    }
+
+    .header-bg{
+        grid-column: 1/3;
+        grid-row: 2/3;
+        background-image: url("../img/v3/header-bg.jpg");
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-color: black;
+    }
+
+    .navbar {
+        grid-column: 1/3;
+        grid-row: 1;
+        padding-top: 0rem;
+        background-color: black;
+        color: white;
+        padding: 2rem;
+        font-size: 1.5vh;
+    }
+
+    header{
+        height: 100vh;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-row: 2;
+        grid-column: 1/3;
+        align-self: auto;
+        justify-self: center;
+        color: white;
+        margin-top: 10vh;
+    }
+
+    .h-info{
+        padding-left: 0rem;
+        margin-top: -15vh;
+        height: 0vh;
+        grid-row: 1;
+        grid-column: 1;
+        text-align: center;
+    }
+
+   .h-links{
+        padding-top: 1rem;
+        display: inline-block;
+    }
+
+    .h-links span{
+        padding-left: 1rem;
+        padding-top: 0rem;
+        font-size: 1.5vh;
+    }
+
+    .h-info h1{
+        font-size: 10vh;
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+        max-width: none;
+        line-height: 1;
+    }
+
+    .h-info p{
+        max-width: none;
+        padding-bottom: 2.5rem;
+        opacity: 0.5;
+        font-size: 1.7vh;
+        font-weight: 200;
+        padding-right: 2rem;
+        padding-left: 2rem;
+    }
+
+    figure{
+        padding-left: 0rem;
+        margin-top: 70vh;
+        height: 0vh;
+        grid-row: 2;
+        grid-column: 1;
+        max-width: 75vh;
+        float: none;
+        padding-right: 1rem;
+        margin-left: 1rem;
+    }
+
+    figcaption p{
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        opacity: 0.8;
+        font-size: 1.4vh;
+        margin-top: -2rem;
+        padding-left: 0.0rem;
+        position: absolute;
+    }
+
+    figcaption ul {
+        padding-top: 1rem;
+        display: flex;
+        list-style-type: none;
+        max-width: 5rem;
+        margin-top: -24rem;
+        padding-left: 0rem;
+    }
+
+    figcaption li {
+        padding-right: 2vh;
+    }
+
+    figcaption li img{
+        width: 11vh;
+        height: auto;
+    }
+
+    #resize{
+        width: 6vh;
+        height: auto;
+    }
+
+    .features{
+        height: 0vh;
+        display: grid;
+        grid-template-columns: 80%;
+        grid-column: 1/3;
+        grid-row: 3;
+        align-self: center;
+        justify-content: center;
+        margin-top: -15rem;
+        text-align: center;
+    }
+
+    #lock{
+        width: 12%;
+        height: auto;
+    }
+
+    #shield{
+        width: 13%;
+        height: auto;
+    }
+
+    #community{
+        width: 17%;
+        height: auto;
+    }
+
+    .features-list p{
+        opacity: 0.5;
+        font-size: 1.5vh;
+        font-weight: 200;
+        padding-bottom: 6rem;
+        max-width: none;
+    }
+
+    .map-features{
+        height: 60vh;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 50%;
+        grid-row: 4;
+        grid-column: 1/3;
+        justify-self: center;
+        margin-top: -0vh;
+    }
+
+    .map img{
+        grid-row: 1;
+        grid-column: 1/2;
+        width: 100%;
+    }
+
+    .map-info{
+        padding-top: 5rem;
+        grid-row: 2;
+        grid-column: 1/2;
+        padding-left: 0rem;
+        justify-self: center;
+    }
+
+    .map-info h1{
+        font-size: 5vh;
+        padding-bottom: 2rem;
+        max-width: 45vh;
+
+    }
+    .map-info p{
+        max-width: 40vh;
+        opacity: 0.5;
+        font-size: 1.5vh;
+        font-weight: 200;
+
+    }
+
+    .qoute img{
+        float: left;
+        padding-right: 1rem;
+        padding-bottom: 2rem;
+        padding-top: 1.5rem;
+        width: 8vh;
+    }
+
+    .qoute span{
+        font-size: 1.5vh;
+        font-weight: 500;
+    }
+
+    .qoute p{
+        padding-top: 0.5rem;
+        max-width: 45vh;
+        font-size: 1.5vh;
+        font-weight: 200;
+    }
+
+    .key-features{
+        height: 0vh;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-row: 5;
+        grid-column: 1/3;
+        margin-top: -13rem;
+    }
+
+    .key-info{
+        grid-row: 1;
+        grid-column: 1/2;
+        align-self: center;
+        justify-self: end;
+        padding-right: 0rem;
+        padding-bottom: 5rem;
+        padding-top: 5rem;
+    }
+
+    .key-info h1{
+        font-size: 4.5vh;
+        padding-bottom: 2rem;
+        max-width: 45vh;
+        padding-left: 1rem;
+    }
+
+    .key-info p{
+        padding-left: 1rem;
+        max-width: 80vh;
+        opacity: 0.5;
+        font-size: 3.5vw;
+        font-weight: 200;
+    }
+
+    .key-wrap{
+        display: grid;
+        grid-template-columns: 100% 100% ;
+        grid-row: 2;
+        grid-column: 1/2;
+        text-align: center;
+    }
+
+    .key-one{
+        grid-row: 2;
+        grid-column: 1/2;
+        align-self: center;
+    }
+
+    .key-one img{
+        padding-bottom: 1rem;
+    }
+
+    .key-one h1{
+        padding-bottom: 1rem;
+    }
+
+    .key-one p{
+        max-width: none;
+        padding-bottom: 10rem;
+        font-weight: 300;
+        opacity: 0.5;
+    }
+
+    .key-two{
+        grid-area: 1;
+        grid-column: 1/2;
+        align-self: center;
+    }
+
+    .key-two div{
+        padding-bottom: 6rem;
+    }
+
+    .key-two img{
+        padding-bottom: 1rem;
+    }
+
+    .key-two h1{
+        padding-bottom: 1rem;
+    }
+
+    .key-two p{
+        max-width: none;
+        font-weight: 300;
+        opacity: 0.5;
+    }
+
+    #lock2{
+        width: 9%;
+        height: auto;
+    }
+
+    #shield2{
+        width: 10%;
+        height: auto;
+    }
+
+    #community2{
+        width: 12%;
+        height: auto;
+    }
+
+    .line-features{
+        height: 0vh;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-row: 6;
+        grid-column: 1/3;
+        align-self: start;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .line-features h1{
+        grid-row: 1;
+        grid-column: 1/2;
+
+        padding-right: 0rem;
+    }
+
+    .line-features p{
+        grid-area: 1;
+        grid-column: 1/3;
+        max-width: 480px;
+        padding-left: 0rem;
+        opacity: 0.5;
+        font-weight: 300;
+        padding-top: 8rem;
+
+    }
+
+    .cast{
+        display: none;
+    }
+
+    footer{
+        height: 50vh;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-row: 7;
+        grid-column: 1/3;
+        align-self: start;
+        justify-content: center;
+        color: white;
+        margin-top: -10rem;
+    }
+
+    .footer-bg{
+        grid-column: 1/3;
+        grid-row: 7;
+        background-image: url("../img/v3/footer-bg.jpg");
+        background-repeat: no-repeat;
+        background-size: cover;
+        z-index: -1;
+        max-height: 100vh;
+        margin-top: -10rem;
+    }
+
+    .newsletter{
+        grid-row: 1;
+        grid-column: 1/3;
+        align-self: center;
+        justify-self: center;
+        display: inline;
+    }
+
+    .newsletter span{
+
+
+    }
+
+    .newsletter div{
+        padding-top: 1rem;
+    }
+
+    .newsletter div input{
+        background-color: #302e37;
+        border: none;
+        color: #dbdbdc;
+        padding: 11px;
+        padding-right: 90px;
+        padding-left: 40px;
+        text-align: left;
+        font-size: 16px;
+        border-radius: 100px;
+
+    }
+
+    .newsletter div button{
+        background: rgb(81,149,253);
+        background: linear-gradient(90deg, rgba(81,149,253,1) 0%, rgba(41,81,224,1) 100%);
+        font-variant-caps: all-petite-caps;
+        border: none;
+        color: white;
+        padding: 10px 35px;
+        text-align: center;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 100px;
+    }
+
+    .newsletter-list{
+        padding-top: 5rem;
+        grid-row: 2;
+        grid-column: 1/3;
+        display: block;
+        justify-self: center;
+    }
+
+    .newsletter-list ul{
+        padding-top: 2rem;
+        padding-left: 5rem;
+        list-style-type: none;
+    }
+
+    .newsletter-list li{
+        padding-top: 1rem;
+    }
+
+    .legal{
+        grid-row: 3;
+        grid-column: 1/3;
+        align-self: center;
+        padding-top: 5rem;
+    }
+
+    .legal span{
+        padding-left: 5rem;
+    }
+
+    .legal ul{
+        list-style-type: none;
+        float: right;
+        padding-right: 5rem;
+    }
+
+    .legal li{
+        display: inline;
+        padding-left: 2rem;
+    }
+
+}