|
|
@@ -1,451 +0,0 @@
|
|
|
-/*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;
|
|
|
-}
|
|
|
-#myProgress {
|
|
|
- width: 100%;
|
|
|
- background-color: #ddd;
|
|
|
- }
|
|
|
-
|
|
|
- #myBar {
|
|
|
- width: 10%;
|
|
|
- height: 30px;
|
|
|
- background-color: #04AA6D;
|
|
|
- text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-/*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;
|
|
|
-}
|
|
|
-
|
