Template:Vilnius-Lithuania/CSS/Engineering
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
height: 100vh; width: 100%; background-color: #121212; position: fixed; z-index: 2;
} .introContainer .intro-section {
display: flex; justify-content: center; align-items: center;
} .introContainer #engineering-cycle {
height: 100%;
} .introContainer #engineering-cycle svg {
height: 70vh; width: auto; max-width: 80vw; will-change: transform;
} .introContainer #dtp-cycle svg {
height: 80vh; width: auto; will-change: transform;
} .introContainer #dtp-cycle svg ellipse {
cursor: pointer;
} .introContainer #dtp-cycle svg tspan {
pointer-events: none;
} .introContainer svg .A {
stroke: #6281ef;
} .introContainer svg .B {
fill: #121212;
} .introContainer svg .C {
font-family: "montserrat-light", sans-serif;
} .introContainer svg .D {
font-family: "montserrat-bold", sans-serif;
} .introContainer svg .E {
fill: #fafafc;
} .introContainer svg .F {
stroke-width: 5;
} .introContainer svg .G {
font-size: 31px;
} .introContainer svg .H {
font-weight: 300;
} .introContainer svg .I {
stroke-linejoin: round;
} .introContainer svg .J {
stroke-width: 9;
} .introContainer svg .K {
fill: none;
} .introContainer svg .L {
stroke: #fafafc;
} .introContainer svg .M {
stroke-width: 3;
} .introContainer svg .N {
font-size: 38px;
}
.spacer {
height: 100vh; background-color: #121212; position: absolute; top: 100vh; width: 100vw; z-index: 1;
}
main {
height: fit-content; background-color: #fafafc; position: absolute; top: 200vh; width: 100vw; z-index: 3; font-family: "montserrat-light", sans-serif !important;
} main section {
display: flex; justify-content: center; flex-direction: column; align-items: center; width: 80vw; margin: 0 auto;
} @media screen and (max-width: 767px) {
main section {
width: 100vw;
}
} main section h1 {
text-transform: uppercase; font-size: 2.5em;
} main section .section-title h1 {
margin-block-end: 0em;
} main section .section-title svg {
width: 100px;
} main section .section-title .right {
display: block !important; padding: 50px 0 0 !important;
} main section .iteration-title {
font-family: "montserrat-black", sans-serif !important; display: grid; margin-block-start: 0em; margin-block-end: 0em; font-size: 3em;
} @media screen and (max-width: 767px) {
main section .iteration-title {
font-size: 1.9em;
padding-top: 30px;
}
} main section .row {
display: flex; width: 100%;
} main section .row .left, main section .row .right {
display: flex; width: 40%; align-items: center; padding: 20px 0px;
} main section .row p {
margin-block-end: 0em; margin-block-start: 0em;
} main section .row .line-divider {
display: flex; width: 20%; justify-content: center; align-items: center;
} @media screen and (max-width: 767px) {
main section .row .line-divider {
width: 15%;
justify-content: initial;
}
} main section .row .line-divider.nonCenter {
align-items: initial; z-index: 2;
} main section .row .line-divider .line {
width: 7px; background-color: #6281ef; height: 100%;
} main section .row .line-divider .circle {
width: 35px; height: 35px; border-radius: 40px; background-color: #FFD762; position: absolute; display: flex; align-items: center; justify-content: center; font-family: "montserrat-black", sans-serif !important; opacity: 0;
} main section .row .line-divider .circle.top {
margin-top: -15px; width: 20px; height: 20px; opacity: 1;
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle.top {
visibility: hidden;
}
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle {
width: 8vw;
height: 8vw;
transform: translateX(55%);
font-family: "montserrat-light", sans-serif !important;
}
} main section .row .left {
justify-content: flex-end; text-transform: uppercase;
} @media screen and (max-width: 767px) {
main section .row .left {
background-color: #121212;
color: #FAFAFC;
width: 15%;
justify-content: center;
z-index: 2;
}
} @media screen and (max-width: 767px) {
main section .row .left h1 {
text-orientation: sideways;
}
} main section .row .left .iteration-nr {
margin-block-end: 0em; margin-block-start: 0em;
} @media screen and (max-width: 767px) {
main section .row .left .iteration-nr {
display: none;
}
} @media screen and (max-width: 767px) {
main section .row .right {
width: 70%;
padding: 0;
}
} main section .row .right .iteration-nr {
display: none;
} @media screen and (max-width: 767px) {
main section .row .right .iteration-nr.mobile {
font-size: 1.3em;
display: block;
margin-top: 0.83em;
margin-bottom: 0.83em !important;
}
} @media screen and (max-width: 767px) {
main section .row .iteration-part {
transform: rotate(-90deg);
margin-block-end: 0em;
margin-block-start: 0em;
z-index: 9;
margin-left: 80%;
color: #fafafc;
}
} @media screen and (max-width: 767px) {
main section .row .iteration-desc {
padding: 10px 20px 10px 0;
}
} @media screen and (max-width: 767px) {
main section .row .box-mobile {
width: calc(7.5vw - 3.5px);
position: relative;
display: flex;
background-color: #121212;
width: 50%;
height: 100%;
}
} @media screen and (max-width: 767px) {
main section .row .mobile-divider {
background-color: #121212;
height: 90px;
width: calc(22.5% + 53px);
position: absolute;
left: -46px;
top: 63px;
border-radius: 33px;
box-sizing: border-box;
border: solid 7px #6281ef;
}
} main section .section-iteration .left {
padding: 10px 0;
} main section .section-iteration .right {
display: block;
} main section .accordion {
overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out;
} main section #separator {
transition-duration: 0.2s; transition-timing-function: ease-out; height: 165px;
}
.milkWave svg {
margin-top: -60px;
} .milkWave svg path {
fill: #fafafc;
}