Browse Source

新增GA以及感謝視窗頁面

jeter20131220 3 years ago
parent
commit
189199f5cc

+ 1 - 1
.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5504
 }

BIN
desktop11/._style.css


+ 1 - 1
desktop11/goto.js

@@ -135,7 +135,7 @@ $(".contact-form1").submit(function (e) {
       } else if (data == 3) {
         alert("此email、phone已填過表單");
       }
-      location.reload();
+      location.href ="./index_complete_line.html"; 
     },
 
     beforeSend: function () {

+ 8 - 0
desktop11/index.html

@@ -26,7 +26,15 @@
 
 
 
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133449203-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
 
+  gtag('config', 'UA-133449203-1');
+</script>
 <!-- Global site tag (gtag.js) - Google Ads: 673725167 -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=AW-673725167"></script>
 <script>

+ 87 - 0
desktop11/index_complete_line.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>幸福空間 - 問卷調查</title>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133449203-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-133449203-1');
+</script>
+<!-- Global site tag (gtag.js) - Google Ads: 673725167 -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=AW-673725167"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'AW-673725167');
+</script>
+<script>
+function gtag_report_conversion(url) {
+var callback = function () {
+if (typeof(url) != 'undefined') {
+window.location = url;
+}
+};
+gtag('event', 'conversion', {
+'send_to': 'AW-673725167/pOjICLCHpdICEO_1oMEC',
+'event_callback': callback
+});
+return false;
+}
+</script>
+
+<!-- Facebook Pixel Code -->
+<script>
+!function(f,b,e,v,n,t,s)
+{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];
+s.parentNode.insertBefore(t,s)}(window, document,'script',
+'https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '585285442299590');
+fbq('track', 'PageView');
+</script>
+<noscript><img height="1" width="1" style="display:none"
+src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
+/></noscript>
+<!-- End Facebook Pixel Code -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./style2.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg sticky-top p-0">
+        <div class="container d-flex flex-column img_banner">
+        <!--<a class="navbar-brand" href="#">Navbar</a> -->
+          <!-- <div class="title__block">
+            <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
+            <span class="sub-logo mb-0">裝修市調</span>
+          </div>
+          <span class="slogan">送五萬元裝潢折抵券+咖啡折價券</span>
+        </div> -->
+      </nav>
+      <main>
+        <!-- Line 前一百名 -->
+      <div class="">
+        <div class="thankyou">
+            <h3>再次感謝您的協助填寫</h3>
+            <img src="images/checked.png" alt="" class="mb-2">
+            <p></p>
+            <a href="http://www.hhh.com.tw"><button class="btn-exit">離開</button></a>
+        </div>
+        </div>
+    </main>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+    <script src="./script.js"></script>
+  </body>
+</html>

+ 439 - 0
desktop11/style2.css

@@ -0,0 +1,439 @@
+/*custom font*/
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+
+/*basic reset*/
+* {margin: 0; padding: 0;}
+
+html {
+	min-height: 100%;
+	height: auto;
+	/*Image only BG fallback*/
+	
+	/*background = gradient + image pattern combo*/
+	/* background: 
+		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
+}
+
+body {
+	font-family: montserrat, arial, verdana;
+	background-color: white;
+	font-size: 1.05rem;
+}
+
+.ml {
+	margin-left: 10px;
+}
+
+.mr {
+	margin-right: 10px;
+}
+
+.mb {
+	margin-bottom: 12px;
+}
+
+.top {
+	margin-top: 20px;
+	position: sticky;
+	top: 0;
+	left: 50%;
+	z-index: 20;
+	background-color: inherit;
+}
+
+.navbar {
+	background-color: white;
+}
+
+/* .imf {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
+} */
+
+.img_banner {
+	background-image: url('images/banner_top1.jpg');
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+	width: 100%;
+	height: 65px;
+}
+
+/*form styles*/
+.img_logo {
+	display: inline-block;
+	margin: 0 auto;
+	margin-bottom: 10px;
+}
+
+.title__block {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0px auto;
+}
+
+.sub-logo {
+	display: inline-block;
+	font-weight: 700;
+	font-size: 1.4rem;
+	color: white;
+}
+
+.slogan {
+	display: block;
+	font-weight: 700;
+	font-size: 1.2rem;
+	color: white;
+}
+
+.notice_card {
+	box-sizing: border-box;
+	width: 80%;
+	margin: 0 10%;
+	margin-bottom: 1.5rem;
+	background: white;
+	border: 0 none;
+	border-radius: 3px;
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	padding: 10px 20px;
+	line-height: 1.5rem;
+}
+
+/*form styles*/
+#msform {
+	min-width: 370px;
+	max-width: 1000px;
+	margin: 50px auto;
+	margin-bottom: 20px;
+	text-align: center;
+	position: relative;
+}
+#msform fieldset {
+	background: white;
+	border: 0 none;
+	border-radius: 3px;
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	padding: 20px 30px;
+	box-sizing: border-box;
+	width: 80%;
+	margin: 0 10%;
+	
+	/*stacking fieldsets above each other*/
+	position: relative;
+}
+/*Hide all except first fieldset*/
+#msform fieldset:not(:first-of-type) {
+	display: none;
+}
+/*inputs*/
+#msform input[type="text"], #msform textarea, #msform input[type="email"] {
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	margin-bottom: 16px;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: montserrat;
+	color: #2C3E50;
+	font-size: 14px;
+}
+/*buttons*/
+#msform .action-button {
+	width: 100px;
+	background: #27AE60;
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 1px;
+	cursor: pointer;
+	padding: 10px 5px;
+	margin: 10px auto;
+	display: inline-block;
+}
+#msform .action-button:hover, #msform .action-button:focus {
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+/*headings*/
+.fs-title {
+	font-size: 15px;
+	text-transform: uppercase;
+	color: #2C3E50;
+	margin-bottom: 10px;
+}
+.fs-subtitle {
+	display: inline-block;
+	font-weight: normal;
+	font-size: 13px;
+	color: #666;
+	margin-bottom: 20px;
+	padding-bottom: 3px;
+	border-bottom: 2px solid #27AE60;
+}
+.fs-label {
+	display: block;
+	text-align: left;
+	margin-bottom: 8px;
+}
+.fs-label > i {
+	margin-right: 3px;
+}
+
+/*progressbar*/
+#progressbar {
+	margin-bottom: 30px;
+	overflow: hidden;
+	/*CSS counters to number the steps*/
+	counter-reset: step;
+}
+#progressbar li {
+	list-style-type: none;
+	color: black;
+	text-transform: uppercase;
+	font-size: 12px;
+	width: 33.33%;
+	float: left;
+	position: relative;
+}
+#progressbar li:before {
+	content: counter(step);
+	counter-increment: step;
+	width: 20px;
+	line-height: 20px;
+	display: block;
+	font-size: 12px;
+	color: #333;
+	background: white;
+	border-radius: 3px;
+	margin: 0 auto 5px auto;
+}
+/*progressbar connectors*/
+#progressbar li:after {
+	content: '';
+	width: 100%;
+	height: 2px;
+	background: white;
+	position: absolute;
+	left: -50%;
+	top: 9px;
+	z-index: -1; /*put it behind the numbers*/
+}
+#progressbar li:first-child:after {
+	/*connector not needed before the first step*/
+	content: none; 
+}
+/*marking active/completed steps green*/
+/*The number of the step and the connector before it = green*/
+#progressbar li.active:before,  #progressbar li.active:after{
+	background: #27AE60;
+	color: white;
+}
+
+p.error-text {
+	bottom: -23px;
+	left: 24px;
+	color: rgba(255, 0, 0, .7);
+	font-size: .8em;
+}
+
+#term-error {
+	color: rgba(255, 0, 0, .7);
+	font-size: .8em;
+	bottom: -23px;
+	left: 24px;
+}
+
+select {
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	margin-bottom: 10px;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: montserrat;
+	color: #2C3E50;
+	font-size: 13px;
+
+	background-color: transparent;
+}
+
+.pl-0 {
+	padding-left: 0;
+}
+
+.terms {
+	font-size: .9rem;
+	width: 95%;
+	min-width: 250px;
+	height: auto;
+	overflow: scroll;
+	margin-bottom: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	border: 1px solid rgb(163, 163, 163);
+	line-height: 1.5rem;
+}
+
+.term-link a {
+	text-decoration: none;
+	color: black;
+}
+
+.h2 {
+	text-align: center;
+	font-size: 1.2rem;
+	font-weight: 500;
+	margin-top: 2rem;
+}
+
+.left_align {
+	font-size: 18px;
+	text-align: left;
+}
+
+#overlay {
+	position: fixed; /* Sit on top of the page content */
+	display: none;
+	width: 100%;
+	height: 100%;
+	top: 0; 
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.5);
+	z-index: 2;
+	cursor: pointer;
+}
+
+.thankyou {
+	margin: auto;
+	min-width: 350px;
+	height: 250px;
+	margin-top: 190px;
+	background: #fff;
+	padding: 15px 20px;
+	line-height: 25px;
+	border-radius: 4px;
+	text-align: center;
+	
+}
+.thankyou input {
+	margin-top: 40px;
+}
+.thankyou h3 {
+	font-size: 2rem;
+	font-weight: 700;
+	color: #21ba45;
+	line-height: 2.5rem;
+	margin-bottom: 1.5rem;
+}
+
+.check_button {
+	display: none;
+}
+
+.fs-label-type {
+	background: transparent;
+	padding: 5px;
+	border: 1px solid black;
+	border-radius: 5px;
+	display: inline-block;
+}
+
+.check_button:checked + .fs-label-type{
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+input[type="checkbox"] {
+	display: none;
+}
+
+#checker1, #checker2 {
+	display: inline;
+}
+
+.fs-label-info {
+	background: transparent;
+	padding: 5px;
+	border: 1px solid black;
+	border-radius: 5px;
+	display: inline-block;
+	margin-bottom: 8px;
+}
+
+input[type="radio"] {
+	display: none;
+}
+
+input[type="radio"]:checked + .fs-label-info {
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+input[type="checkbox"]:checked + .fs-label-info {
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+.btn-exit {
+	padding: .5rem .75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: .3rem;
+}
+
+.btn-term-exit {
+	padding: .5rem .75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: .3rem;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 2rem;
+}
+
+footer {
+	padding: 2rem;
+	padding-top: .5rem;
+}
+
+.footer {
+	display: flex;
+	justify-content: center;
+}
+
+.img_fr {
+	width: 80%;
+	max-width: 850px;
+	min-width: 300px;
+	height: 60px;
+	object-fit: contain;
+	object-position: center;
+}
+
+.img_fr img {
+	width: 100%;
+	height: 90%;
+}
+
+#msform #userid, #msform #area {
+	height: 0;
+	padding: 0;
+	margin: 0;
+	border: none;
+}
+

+ 50 - 3
mobile/index.html

@@ -23,9 +23,56 @@
 
 
 
-
-
-
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133449203-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-133449203-1');
+</script>
+
+<!-- Global site tag (gtag.js) - Google Ads: 673725167 -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=AW-673725167"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'AW-673725167');
+</script>
+<script>
+function gtag_report_conversion(url) {
+var callback = function () {
+if (typeof(url) != 'undefined') {
+window.location = url;
+}
+};
+gtag('event', 'conversion', {
+'send_to': 'AW-673725167/pOjICLCHpdICEO_1oMEC',
+'event_callback': callback
+});
+return false;
+}
+</script>
+
+<!-- Facebook Pixel Code -->
+<script>
+!function(f,b,e,v,n,t,s)
+{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];
+s.parentNode.insertBefore(t,s)}(window, document,'script',
+'https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '585285442299590');
+fbq('track', 'PageView');
+</script>
+<noscript><img height="1" width="1" style="display:none"
+src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
+/></noscript>
+<!-- End Facebook Pixel Code -->
 
     <!-- Slick CDN -->
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

+ 87 - 0
mobile/index_complete_line.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>幸福空間 - 問卷調查</title>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133449203-1"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'UA-133449203-1');
+</script>
+<!-- Global site tag (gtag.js) - Google Ads: 673725167 -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=AW-673725167"></script>
+<script>
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+gtag('config', 'AW-673725167');
+</script>
+<script>
+function gtag_report_conversion(url) {
+var callback = function () {
+if (typeof(url) != 'undefined') {
+window.location = url;
+}
+};
+gtag('event', 'conversion', {
+'send_to': 'AW-673725167/pOjICLCHpdICEO_1oMEC',
+'event_callback': callback
+});
+return false;
+}
+</script>
+
+<!-- Facebook Pixel Code -->
+<script>
+!function(f,b,e,v,n,t,s)
+{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];
+s.parentNode.insertBefore(t,s)}(window, document,'script',
+'https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '585285442299590');
+fbq('track', 'PageView');
+</script>
+<noscript><img height="1" width="1" style="display:none"
+src="https://www.facebook.com/tr?id=585285442299590&ev=PageView&noscript=1"
+/></noscript>
+<!-- End Facebook Pixel Code -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
+    crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./style2.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg sticky-top p-0">
+        <div class="container d-flex flex-column img_banner">
+        <!--<a class="navbar-brand" href="#">Navbar</a> -->
+          <!-- <div class="title__block">
+            <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
+            <span class="sub-logo mb-0">裝修市調</span>
+          </div>
+          <span class="slogan">送五萬元裝潢折抵券+咖啡折價券</span>
+        </div> -->
+      </nav>
+      <main>
+        <!-- Line 前一百名 -->
+      <div class="">
+        <div class="thankyou">
+            <h3>再次感謝您的協助填寫</h3>
+            <img src="images/checked.png" alt="" class="mb-2">
+            <p></p>
+            <a href="http://www.hhh.com.tw"><button class="btn-exit">離開</button></a>
+        </div>
+        </div>
+    </main>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+    <script src="./script.js"></script>
+  </body>
+</html>

+ 2 - 1
mobile/script/goto.js

@@ -73,7 +73,8 @@ $(".contact-form1").submit(function (e) {
       } else if (data == 3) {
         alert("此email、phone已填過表單");
       }
-      location.reload();
+      location.href ="./index_complete_line.html"; 
+     
     },
     beforeSend: function () {
       console.log('beforeSend');

+ 439 - 0
mobile/style2.css

@@ -0,0 +1,439 @@
+/*custom font*/
+@import url(https://fonts.googleapis.com/css?family=Montserrat);
+
+/*basic reset*/
+* {margin: 0; padding: 0;}
+
+html {
+	min-height: 100%;
+	height: auto;
+	/*Image only BG fallback*/
+	
+	/*background = gradient + image pattern combo*/
+	/* background: 
+		linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6)); */
+}
+
+body {
+	font-family: montserrat, arial, verdana;
+	background-color: white;
+	font-size: 1.05rem;
+}
+
+.ml {
+	margin-left: 10px;
+}
+
+.mr {
+	margin-right: 10px;
+}
+
+.mb {
+	margin-bottom: 12px;
+}
+
+.top {
+	margin-top: 20px;
+	position: sticky;
+	top: 0;
+	left: 50%;
+	z-index: 20;
+	background-color: inherit;
+}
+
+.navbar {
+	background-color: white;
+}
+
+/* .imf {
+	position: fixed;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
+} */
+
+.img_banner {
+	background-image: url('images/banner_top1.jpg');
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+	width: 100%;
+	height: 65px;
+}
+
+/*form styles*/
+.img_logo {
+	display: inline-block;
+	margin: 0 auto;
+	margin-bottom: 10px;
+}
+
+.title__block {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 0px auto;
+}
+
+.sub-logo {
+	display: inline-block;
+	font-weight: 700;
+	font-size: 1.4rem;
+	color: white;
+}
+
+.slogan {
+	display: block;
+	font-weight: 700;
+	font-size: 1.2rem;
+	color: white;
+}
+
+.notice_card {
+	box-sizing: border-box;
+	width: 80%;
+	margin: 0 10%;
+	margin-bottom: 1.5rem;
+	background: white;
+	border: 0 none;
+	border-radius: 3px;
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	padding: 10px 20px;
+	line-height: 1.5rem;
+}
+
+/*form styles*/
+#msform {
+	min-width: 370px;
+	max-width: 1000px;
+	margin: 50px auto;
+	margin-bottom: 20px;
+	text-align: center;
+	position: relative;
+}
+#msform fieldset {
+	background: white;
+	border: 0 none;
+	border-radius: 3px;
+	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
+	padding: 20px 30px;
+	box-sizing: border-box;
+	width: 80%;
+	margin: 0 10%;
+	
+	/*stacking fieldsets above each other*/
+	position: relative;
+}
+/*Hide all except first fieldset*/
+#msform fieldset:not(:first-of-type) {
+	display: none;
+}
+/*inputs*/
+#msform input[type="text"], #msform textarea, #msform input[type="email"] {
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	margin-bottom: 16px;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: montserrat;
+	color: #2C3E50;
+	font-size: 14px;
+}
+/*buttons*/
+#msform .action-button {
+	width: 100px;
+	background: #27AE60;
+	font-weight: bold;
+	color: white;
+	border: 0 none;
+	border-radius: 1px;
+	cursor: pointer;
+	padding: 10px 5px;
+	margin: 10px auto;
+	display: inline-block;
+}
+#msform .action-button:hover, #msform .action-button:focus {
+	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
+}
+/*headings*/
+.fs-title {
+	font-size: 15px;
+	text-transform: uppercase;
+	color: #2C3E50;
+	margin-bottom: 10px;
+}
+.fs-subtitle {
+	display: inline-block;
+	font-weight: normal;
+	font-size: 13px;
+	color: #666;
+	margin-bottom: 20px;
+	padding-bottom: 3px;
+	border-bottom: 2px solid #27AE60;
+}
+.fs-label {
+	display: block;
+	text-align: left;
+	margin-bottom: 8px;
+}
+.fs-label > i {
+	margin-right: 3px;
+}
+
+/*progressbar*/
+#progressbar {
+	margin-bottom: 30px;
+	overflow: hidden;
+	/*CSS counters to number the steps*/
+	counter-reset: step;
+}
+#progressbar li {
+	list-style-type: none;
+	color: black;
+	text-transform: uppercase;
+	font-size: 12px;
+	width: 33.33%;
+	float: left;
+	position: relative;
+}
+#progressbar li:before {
+	content: counter(step);
+	counter-increment: step;
+	width: 20px;
+	line-height: 20px;
+	display: block;
+	font-size: 12px;
+	color: #333;
+	background: white;
+	border-radius: 3px;
+	margin: 0 auto 5px auto;
+}
+/*progressbar connectors*/
+#progressbar li:after {
+	content: '';
+	width: 100%;
+	height: 2px;
+	background: white;
+	position: absolute;
+	left: -50%;
+	top: 9px;
+	z-index: -1; /*put it behind the numbers*/
+}
+#progressbar li:first-child:after {
+	/*connector not needed before the first step*/
+	content: none; 
+}
+/*marking active/completed steps green*/
+/*The number of the step and the connector before it = green*/
+#progressbar li.active:before,  #progressbar li.active:after{
+	background: #27AE60;
+	color: white;
+}
+
+p.error-text {
+	bottom: -23px;
+	left: 24px;
+	color: rgba(255, 0, 0, .7);
+	font-size: .8em;
+}
+
+#term-error {
+	color: rgba(255, 0, 0, .7);
+	font-size: .8em;
+	bottom: -23px;
+	left: 24px;
+}
+
+select {
+	padding: 15px;
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	margin-bottom: 10px;
+	width: 100%;
+	box-sizing: border-box;
+	font-family: montserrat;
+	color: #2C3E50;
+	font-size: 13px;
+
+	background-color: transparent;
+}
+
+.pl-0 {
+	padding-left: 0;
+}
+
+.terms {
+	font-size: .9rem;
+	width: 95%;
+	min-width: 250px;
+	height: auto;
+	overflow: scroll;
+	margin-bottom: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	border: 1px solid rgb(163, 163, 163);
+	line-height: 1.5rem;
+}
+
+.term-link a {
+	text-decoration: none;
+	color: black;
+}
+
+.h2 {
+	text-align: center;
+	font-size: 1.2rem;
+	font-weight: 500;
+	margin-top: 2rem;
+}
+
+.left_align {
+	font-size: 18px;
+	text-align: left;
+}
+
+#overlay {
+	position: fixed; /* Sit on top of the page content */
+	display: none;
+	width: 100%;
+	height: 100%;
+	top: 0; 
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0,0,0,0.5);
+	z-index: 2;
+	cursor: pointer;
+}
+
+.thankyou {
+	margin: auto;
+	min-width: 350px;
+	height: 250px;
+	margin-top: 190px;
+	background: #fff;
+	padding: 15px 20px;
+	line-height: 25px;
+	border-radius: 4px;
+	text-align: center;
+	
+}
+.thankyou input {
+	margin-top: 40px;
+}
+.thankyou h3 {
+	font-size: 2rem;
+	font-weight: 700;
+	color: #21ba45;
+	line-height: 2.5rem;
+	margin-bottom: 1.5rem;
+}
+
+.check_button {
+	display: none;
+}
+
+.fs-label-type {
+	background: transparent;
+	padding: 5px;
+	border: 1px solid black;
+	border-radius: 5px;
+	display: inline-block;
+}
+
+.check_button:checked + .fs-label-type{
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+input[type="checkbox"] {
+	display: none;
+}
+
+#checker1, #checker2 {
+	display: inline;
+}
+
+.fs-label-info {
+	background: transparent;
+	padding: 5px;
+	border: 1px solid black;
+	border-radius: 5px;
+	display: inline-block;
+	margin-bottom: 8px;
+}
+
+input[type="radio"] {
+	display: none;
+}
+
+input[type="radio"]:checked + .fs-label-info {
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+input[type="checkbox"]:checked + .fs-label-info {
+	background-color: #27AE60;
+	color: white;
+	padding: 5px;
+	border: 1px solid #27AE60;
+	border-radius: 5px;
+}
+
+.btn-exit {
+	padding: .5rem .75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: .3rem;
+}
+
+.btn-term-exit {
+	padding: .5rem .75rem;
+	background-color: transparent;
+	border: 1px solid black;
+	margin-top: .3rem;
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	margin-bottom: 2rem;
+}
+
+footer {
+	padding: 2rem;
+	padding-top: .5rem;
+}
+
+.footer {
+	display: flex;
+	justify-content: center;
+}
+
+.img_fr {
+	width: 80%;
+	max-width: 850px;
+	min-width: 300px;
+	height: 60px;
+	object-fit: contain;
+	object-position: center;
+}
+
+.img_fr img {
+	width: 100%;
+	height: 90%;
+}
+
+#msform #userid, #msform #area {
+	height: 0;
+	padding: 0;
+	margin: 0;
+	border: none;
+}
+