550 lines
9.3 KiB
CSS
550 lines
9.3 KiB
CSS
@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
line-height: 1.15;
|
|
-webkit-text-size-adjust: 100%;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: #212529;
|
|
}
|
|
|
|
button:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
input[type=text], select {
|
|
width: 100%;
|
|
height: 56px;
|
|
padding: 16px;
|
|
background: #FAFAFA 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D1D1D1;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type=email], select {
|
|
width: 100%;
|
|
height: 56px;
|
|
padding: 16px;
|
|
background: #FAFAFA 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D1D1D1;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 142px;
|
|
padding: 16px;
|
|
background: #FAFAFA 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D1D1D1;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
p {
|
|
text-align: left;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 300;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0px;
|
|
color: #212121;
|
|
}
|
|
|
|
p a {
|
|
color: #23BCBA;
|
|
}
|
|
|
|
.bootstrap-overrides a {
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bootstrap-overrides a:hover {
|
|
color: #23BCBA;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.bootstrap-overrides h1, .bootstrap-overrides h2, .bootstrap-overrides h3, .bootstrap-overrides h4, .bootstrap-overrides h5, .bootstrap-overrides h6, .caption, .placeholder, .body-text, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #212121;
|
|
text-align: left;
|
|
}
|
|
|
|
.bootstrap-overrides h1, .h1 {
|
|
font-size: 3.3125rem;
|
|
line-height: 4rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.bootstrap-overrides h2, .h2 {
|
|
font-size: 3.16rem;
|
|
line-height: 3.66rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.bootstrap-overrides h3, .h3 {
|
|
font-size: 2.5rem;
|
|
line-height: 2.83rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bootstrap-overrides h4, .h4 {
|
|
font-size: 1.66rem;
|
|
line-height: 1.2;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.bootstrap-overrides h5, .h5 {
|
|
font-size: 1.33rem;
|
|
line-height: 2.16rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.bootstrap-overrides h6, .h6 {
|
|
font-size: 1.66rem;
|
|
line-height: 1.2;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.caption {
|
|
font-size: 1rem;
|
|
line-height: 1.66rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.placeholder {
|
|
font-size: 1.33rem;
|
|
line-height: 1.83rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.title-1 {
|
|
line-height: 2.75rem;
|
|
font-weight: 300;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.title-2 {
|
|
line-height: 2.75rem;
|
|
font-weight: 700;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.title-3 {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.title-3, .title-4 {
|
|
font-weight: 300;
|
|
color: #212121;
|
|
}
|
|
|
|
.title-1, .title-2, .title-3, .title-4, .title-5 {
|
|
text-align: left;
|
|
font-size: 2.37rem;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
.title-5{
|
|
color: #129D99;
|
|
font: normal normal 300 27px/35px Roboto;
|
|
}
|
|
|
|
.page-title {
|
|
text-align: center;
|
|
font-weight: 700;
|
|
font-size: 2.375rem;
|
|
font-family: 'Roboto', sans-serif;
|
|
letter-spacing: -0.95px;
|
|
color: #212121;
|
|
opacity: 1;
|
|
}
|
|
|
|
.page-subtitle {
|
|
text-align: left;
|
|
font-weight: 300;
|
|
font-size: 2.375rem;
|
|
font-family: 'Roboto', sans-serif;
|
|
letter-spacing: 0px;
|
|
color: #212121;
|
|
opacity: 1;
|
|
}
|
|
|
|
.body-text {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
border: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.fixed-top {
|
|
position: fixed !important;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.container, .container-small {
|
|
width: 100%;
|
|
padding-right: 0.75rem;
|
|
padding-left: 0.75rem;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.normal-btn {
|
|
min-width: 162px;
|
|
max-width: 256px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
background: #129D99 0% 0% no-repeat padding-box;
|
|
box-shadow: 0px 3px 6px #1E202029;
|
|
border-radius: 30px;
|
|
border: none;
|
|
color: #FFFFFF;
|
|
opacity: 1;
|
|
font-size: 0.87rem;
|
|
padding: 0.62rem 1.87rem;
|
|
}
|
|
|
|
.mirror {
|
|
-webkit-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.text-box {
|
|
width: 894px;
|
|
height: 221px;
|
|
background: #FFFFFF 0% 0% no-repeat padding-box;
|
|
border: 1px solid #23BCBA;
|
|
border-radius: 37px;
|
|
opacity: 1;
|
|
margin: 3.75rem 0rem;
|
|
padding: 3.37rem 4.37rem;
|
|
}
|
|
|
|
.collapse-box {
|
|
background: #FFFFFF 0% 0% no-repeat padding-box;
|
|
border: 1px solid #D1D1D1;
|
|
border-radius: 4px;
|
|
opacity: 1;
|
|
padding: 1.45rem 1.5rem;
|
|
margin: 1rem 0rem;
|
|
}
|
|
|
|
.collapse-title a {
|
|
text-align: left;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
font-family: 'Roboto', sans-serif;
|
|
letter-spacing: 0px;
|
|
color: #212121;
|
|
opacity: 0.76;
|
|
}
|
|
|
|
.collapse-title a:after {
|
|
content: '\f077';
|
|
font-family: "Font Awesome 5 Free" !important;
|
|
float: right;
|
|
font-size: 1rem;
|
|
font-weight: 900;
|
|
color: black;
|
|
}
|
|
|
|
.collapse-title a.collapsed:after {
|
|
content: '\f078';
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
color: black;
|
|
}
|
|
|
|
.collapse:not(.show) {
|
|
display: none;
|
|
}
|
|
|
|
.faq-content {
|
|
text-align: left;
|
|
font-weight: 400;
|
|
font-size: 1rem;
|
|
font-family: 'Roboto', sans-serif;
|
|
letter-spacing: 0px;
|
|
color: #212121;
|
|
opacity: 0.8;
|
|
padding-top: 1.5rem;
|
|
}
|
|
|
|
.fa-download {
|
|
color: #212121;
|
|
opacity: 0.8;
|
|
padding-right: .5rem;
|
|
}
|
|
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
.margin-right-6 {
|
|
margin-left: 5.8rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1244px) {
|
|
.container {
|
|
max-width: 1204px !important;
|
|
}
|
|
.container-small {
|
|
max-width: 900px;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
min-height: 14rem;
|
|
margin-bottom: 1.875rem;
|
|
box-shadow: 0px 3px 6px #00000029;
|
|
}
|
|
|
|
.card-img {
|
|
transform: scale(0.5);
|
|
}
|
|
|
|
.card-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: left;
|
|
justify-content: center;
|
|
padding: 1rem 1.25rem !important;
|
|
}
|
|
|
|
.card-text-1 {
|
|
font-size: 1.125rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.card-text-2 {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.flag {
|
|
border: 10px solid #EEEEEE;
|
|
border-radius: 50% !important;
|
|
padding-right: 0px !important;
|
|
padding-left: 0px !important;
|
|
transform: scale(0.45);
|
|
}
|
|
|
|
.ext-link-icon {
|
|
margin-left: .2rem;
|
|
}
|
|
|
|
|
|
/* ABOUT HOW IT WORKDS PAGE REDESIGN */
|
|
|
|
.red-dot{
|
|
width: 27px;
|
|
height: 27px;
|
|
z-index: 20;
|
|
border: 3px solid #ee254091;
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.inner-red-dot{
|
|
background-color: #EE2540;
|
|
width: 19px;
|
|
height: 19px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* .tooltip{
|
|
background-color: red;
|
|
} */
|
|
.tooltip >.tooltip-inner {
|
|
padding: 2em;
|
|
background-color: #FFF;
|
|
color: black;
|
|
box-shadow: 0px 3px 6px #0000001A;
|
|
text-align: start;
|
|
max-width: 25em;
|
|
}
|
|
.tooltip .show{
|
|
opacity: 1 !important;
|
|
}
|
|
.tooltip h2{
|
|
color: #23BCBA;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.tooltip.bs-tooltip-top .arrow:before {
|
|
border-top-color: #fff
|
|
}
|
|
.tooltip.bs-tooltip-right .arrow:before {
|
|
border-right-color: #fff;
|
|
}
|
|
.tooltip.bs-tooltip-left .arrow:before {
|
|
border-left-color: #fff;
|
|
}
|
|
.tooltip.bs-tooltip-bottom .arrow:before {
|
|
border-bottom-color: #fff;
|
|
}
|
|
|
|
.tooltip.show {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.image-coloured {
|
|
z-index: 1;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0px;
|
|
/* position: absolute; */
|
|
clip-path: polygon(0% 0%);
|
|
}
|
|
|
|
.image-grey {
|
|
z-index: 0;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.clip-draft{
|
|
clip-path:polygon(41.84% 0.0%, 40.13% 46.41%, 40.90% 100%, 0.0% 100.0%, 0.0% 0.0%);
|
|
}
|
|
.clip-validated{
|
|
clip-path: polygon(41.84% 0%, 40.13% 46.41%, 40.9% 100%, 68.32% 100.0%, 68.32% 0%);
|
|
}
|
|
.clip-finalized{
|
|
clip-path: polygon(58.86% 0.0%, 58.74% 100.0%, 88.65% 100.0%, 88.65% 0.0%);
|
|
}
|
|
.clip-dmp{
|
|
clip-path: polygon(80.26% 0.0%, 80.13% 100.0%, 100.00% 100.0%, 100.0% 0.0%);
|
|
}
|
|
|
|
.preface-img{
|
|
width: 100%; height: auto; display: block; z-index: 2;
|
|
position: absolute;
|
|
top:0;
|
|
left: 0;
|
|
opacity: 1;
|
|
filter: grayscale(100%);
|
|
|
|
transition-property: opacity;
|
|
transition-duration: 300ms;
|
|
transition-delay: 50ms;
|
|
transition-timing-function: ease-in;
|
|
}
|
|
|
|
|
|
|
|
.options-menu{
|
|
box-shadow: 0px 6px 15px #0000001A;
|
|
border-radius: 36px;
|
|
padding: 3.2em 4.1em !important;
|
|
min-height: 30em;
|
|
}
|
|
/* First level of tabs */
|
|
.options-menu .nav-tabs{
|
|
border-color: transparent !important;
|
|
color: #212121;
|
|
margin-bottom: 1.2em;
|
|
}
|
|
.options-menu .nav-tabs .nav-item .nav-link{
|
|
border-radius: 0px !important;
|
|
padding: 0.2rem 0rem !important;
|
|
}
|
|
.options-menu .nav-tabs .nav-item:first-child .nav-link{
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.options-menu .nav-tabs .nav-link.active{
|
|
border-left-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
}
|
|
|
|
.options-menu .nav-tabs .nav-link:hover:not(.active){
|
|
border-color: transparent !important;
|
|
}
|
|
.options-menu .nav-tabs .nav-link{
|
|
opacity: 0.5;
|
|
transition: opacity 200ms 50ms ease-out;
|
|
}
|
|
.options-menu .nav-tabs .nav-link:hover{
|
|
color: #212121;
|
|
}
|
|
.options-menu .nav-tabs .nav-link.active{
|
|
border-bottom: 3px solid black !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
/* nested tabs */
|
|
.options-menu .nav-pills{
|
|
margin-bottom: 1em;
|
|
}
|
|
.options-menu .nav-pills .nav-link{
|
|
border-radius: 40px;
|
|
border: 1px solid #1A1A1A;
|
|
color: #1A1A1A;
|
|
opacity: 0.5;
|
|
/* transition: opacity 200ms 50ms ease-out; */
|
|
}
|
|
.options-menu .nav-pills .nav-link.active{
|
|
background-color: #129D99;
|
|
color: #F9FBFC;
|
|
border: 1px solid transparent;
|
|
opacity: 1;
|
|
}
|
|
.options-menu .nav-pills .nav-item:first-child .nav-link{
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.img-fragment-step{
|
|
width: auto; max-height:23em;
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition: opacity 200ms 50ms ease-out;
|
|
}
|
|
|
|
.opacity-0{
|
|
opacity: 0;
|
|
}
|
|
.opacity-1{
|
|
opacity: 1;
|
|
} |