437 lines
7.9 KiB
CSS
437 lines
7.9 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
|
|
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
|
|
.showcase {
|
|
display: flex;
|
|
height: 100vh;
|
|
background-image: url("../../resources/img/showcase.jpg");
|
|
backdrop-filter: brightness(0%);
|
|
}
|
|
.showcase img {
|
|
width: 100%;
|
|
height: auto;
|
|
filter: brightness(50%);
|
|
}
|
|
.showcase h1 {
|
|
text-align: center;
|
|
font: 800 128px "Montserrat", sans-serif;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.table .table-item {
|
|
margin-top: 10px;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
.table .table-item img {
|
|
margin-right: 20px;
|
|
height: auto;
|
|
width: 100px;
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.table .table-item img {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.table .table-item img {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.table .table-item:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
.table .vertical-separator {
|
|
height: 120px;
|
|
border: solid 1px #1d60b5;
|
|
margin-right: 180px;
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.table .vertical-separator {
|
|
margin-right: 90px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.table .vertical-separator {
|
|
margin-right: 18px;
|
|
}
|
|
}
|
|
.table .reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.table .reverse img {
|
|
margin-right: 0;
|
|
margin-left: 20px;
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.table .reverse img {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.table .reverse img {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
.table .reverse p {
|
|
text-align: right;
|
|
}
|
|
.table .reverse .vertical-separator {
|
|
margin-right: 0;
|
|
margin-left: 180px;
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.table .reverse .vertical-separator {
|
|
margin-left: 90px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.table .reverse .vertical-separator {
|
|
margin-left: 18px;
|
|
}
|
|
}
|
|
.table .square img {
|
|
height: 100px;
|
|
}
|
|
.table .table-item-animation {
|
|
animation: slide-in-right 3000ms;
|
|
}
|
|
.table .table-item-animation-reverse {
|
|
animation: slide-in-left 3000ms;
|
|
}
|
|
@keyframes slide-in-left {
|
|
from {
|
|
transform: translateX(-5%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes slide-in-right {
|
|
from {
|
|
transform: translateX(5%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.social {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #1d60b5;
|
|
color: white;
|
|
}
|
|
.social p {
|
|
font: 700 32px "Montserrat", sans-serif;
|
|
}
|
|
.social .social-button {
|
|
display: inline-block;
|
|
height: 52px;
|
|
width: auto;
|
|
border: 2px solid white;
|
|
border-radius: 50%;
|
|
}
|
|
.social .social-button img {
|
|
margin: 10px;
|
|
height: 32px;
|
|
width: 32px;
|
|
}
|
|
.social .social-button:hover {
|
|
background-color: white;
|
|
}
|
|
.social .social-button:hover img {
|
|
filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
|
|
}
|
|
|
|
#header {
|
|
background: #FDFFFF;
|
|
padding: 0 150px;
|
|
position: sticky;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header {
|
|
padding: 0 50px;
|
|
}
|
|
}
|
|
#header #logo {
|
|
height: 56px;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header #logo {
|
|
height: 36px;
|
|
}
|
|
}
|
|
#header .navbar {
|
|
display: flex;
|
|
}
|
|
#header .navbar .nav-item {
|
|
margin-right: 1vw;
|
|
font: 18px "Montserrat", sans-serif;
|
|
font-weight: 600;
|
|
color: #706fff;
|
|
text-decoration: none;
|
|
}
|
|
#header .navbar .nav-item:hover {
|
|
color: #01003B;
|
|
}
|
|
#header .navbar .nav-item:last-of-type {
|
|
margin-right: 0;
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
#header .navbar .nav-item {
|
|
display: none;
|
|
}
|
|
}
|
|
#header #toggle {
|
|
display: none;
|
|
}
|
|
#header .dropdown-toggle {
|
|
margin: 0 auto 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
position: relative;
|
|
}
|
|
#header .dropdown-toggle .bar {
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 4px;
|
|
background-color: #1d60b5;
|
|
display: block;
|
|
border-radius: 4px;
|
|
transition: all 0.4s ease-in-out;
|
|
position: absolute;
|
|
}
|
|
#header .dropdown-toggle .bar1 {
|
|
transform-origin: 5%;
|
|
}
|
|
#header .dropdown-toggle .bar4 {
|
|
transform-origin: 5%;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header .dropdown-toggle {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
#header .dropdown-toggle .bar {
|
|
width: 28px;
|
|
}
|
|
}
|
|
#header .bar1 {
|
|
top: 0;
|
|
}
|
|
#header .bar2,
|
|
#header .bar3 {
|
|
top: 16px;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header .bar2,
|
|
#header .bar3 {
|
|
top: 12px;
|
|
}
|
|
}
|
|
#header .bar3 {
|
|
right: 0;
|
|
}
|
|
#header .bar4 {
|
|
bottom: 0;
|
|
}
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar1 {
|
|
transform: rotate(45deg);
|
|
height: 3px;
|
|
width: 50px;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar1 {
|
|
width: 39px;
|
|
}
|
|
}
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar3 {
|
|
transform: rotate(45deg);
|
|
height: 3px;
|
|
background-color: transparent;
|
|
}
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar2 {
|
|
transform: rotate(-45deg);
|
|
height: 3px;
|
|
background-color: transparent;
|
|
}
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar4 {
|
|
transform: rotate(-45deg);
|
|
height: 3px;
|
|
width: 50px;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header .toggle:checked + label > .dropdown-toggle > .bar4 {
|
|
width: 39px;
|
|
}
|
|
}
|
|
#header #toggle-label {
|
|
display: none;
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
#header #toggle-label {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
#footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #000000;
|
|
font: 16px "Montserrat", sans-serif;
|
|
padding: 50px 200px;
|
|
}
|
|
#footer #small-logo {
|
|
height: 50px;
|
|
width: auto;
|
|
}
|
|
#footer .footer-columns {
|
|
display: flex;
|
|
}
|
|
#footer .footer-columns .footer-column {
|
|
margin: 0 20px 20px 20px;
|
|
}
|
|
#footer .footer-columns .footer-column h1 {
|
|
margin: 0 0 16px 0;
|
|
font: 700 18px "Montserrat", sans-serif;
|
|
color: #f5ffff;
|
|
}
|
|
#footer .footer-columns .footer-column a {
|
|
text-decoration: none;
|
|
color: #abb3b3;
|
|
}
|
|
#footer .footer-columns .footer-column a:hover {
|
|
font-size: 17px;
|
|
color: #b3d1ff;
|
|
}
|
|
#footer .footer-columns .footer-column ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
#footer-stateless {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #1d60b5;
|
|
color: white;
|
|
font: 14px "Montserrat", sans-serif;
|
|
}
|
|
#footer-stateless a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
#footer-stateless a:hover {
|
|
font-style: italic;
|
|
}
|
|
#footer-stateless .smaller {
|
|
font-weight: 200;
|
|
font-size: 12px;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #364040;
|
|
}
|
|
|
|
.content-spacing {
|
|
padding: 100px 200px;
|
|
}
|
|
@media screen and (max-width: 1100px) {
|
|
.content-spacing {
|
|
padding: 50px 100px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
.content-spacing {
|
|
padding: 10px 20px;
|
|
}
|
|
}
|
|
|
|
.ignore-vertical {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
#header {
|
|
height: 10vh;
|
|
}
|
|
@media screen and (max-width: 850px) {
|
|
#header {
|
|
height: 5vh;
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
position: fixed;
|
|
z-index: 2;
|
|
background-color: #706fff;
|
|
width: 100vw;
|
|
height: 90vh;
|
|
animation: slide-in-right 550ms;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.dropdown .dropdown-nav-item {
|
|
color: white;
|
|
font: 600 28px "Montserrat", sans-serif;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown_close_animation {
|
|
animation: 550ms slide-in-left;
|
|
}
|
|
|
|
#container {
|
|
height: 90vh;
|
|
display: grid;
|
|
grid-template-rows: 1fr auto;
|
|
grid-template-columns: 1fr;
|
|
grid-gap: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
#content {
|
|
background: whitesmoke;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#footer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
#footer-stateless {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
}
|
|
|
|
/*# sourceMappingURL=main.css.map */
|