Difference between revisions of "Template:Vilnius-Lithuania/styles/landingpage-mobile"

Latest revision as of 14:44, 21 October 2021

@media (max-width: 1024px) {

 .landing-page-content p {
   font-family: var(--main-font) !important;
   font-size: 2.2vh !important;
   font-style: normal;
   font-weight: 300;
   letter-spacing: 0em;
   text-align: left !important;
 }

 .landing-page-content p > b {
   font-family: var(--secondary-font) !important;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: left !important;
 }

 .landing-page-content h3 {
   font-family: var(--secondary-font) !important;
   font-size: 3.5vh !important;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: center !important;
 }

 .landing-page-content {
   position: relative;
   width: 100vw;
   line-height: 1.5;
 }

 .landing-page-content .content-container {
   width: 100vw;
   min-height: 100vh;
   position: relative;
 }

 .landing-page-content .logo-container {
   width: 100vw;
   min-height: 100vh;
   position: relative;
 }

 .landing-page-content .logo-container  .logo object {
   height: 40vh;
 }

 .landing-page-content .logo-container  .logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100vh;
 }

 .landing-page-content .logo-container  .logo h1 {
   margin: 0 !important;
   font-family: var(--main-font) !important;
   font-size: 10vh;
   font-style: normal;
   font-weight: 700;
   letter-spacing: 0em;
   margin-bottom: 20px !important;
   line-height: 1;
   color: #ffffff !important;
 }

 .landing-page-content .logo-container .logo div {
   font-family: var(--main-font);
   font-size: 3vh;
   font-style: normal;
   font-weight: 300;
   letter-spacing: 0em;
 }

 #logo-animation {
   height: 10vh;
   margin-top: 5vh;
 }

 .landing-page-content .problem-container {
   width: 100vw;
   min-height: 100vh;
   position: relative;
 }

 .landing-page-content .problem-container .ameba-container {
   display: flex;
   flex-direction: column;
   padding: 0px 10vw;
   align-items: center;
 }

 .landing-page-content .problem-container .ameba-container object {
   width: 100%;
   margin: 40px 0 !important;
 }

 .landing-page-content .problem-container .ameba-container p {
   margin: 0px !important;
 }

 .landing-page-content .problem-container .ameba-container p:first-child {
   margin-bottom: 40px !important;
 }

 .landing-page-content .problem-container > h3 {
   width: 100%;
   color: #FCCEC0 !important;
   padding: 0 10vw;
   margin-bottom: 40px !important;
 }

 .landing-page-content .problem-container .text-container div {
   padding: 0 10vw;
   margin-bottom: 40px !important;
 }

 .landing-page-content .map-content-container {
   margin-top: 90px;
 }

 .landing-page-content .map-content-container .text-container h3 {
   margin: 0 !important;
   margin-bottom: 7px !important;
   color: #FCCEC0;
   font-family: var(--secondary-font);
   font-size: 12vw !important;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: center !important;
   width: 100%;
 }

 .landing-page-content .map-content-container .text-container div {
   margin: 0 !important;
   margin-bottom: 57px !important;
   font-family: var(--main-font) !important;
   font-size: 5vw !important;
   font-style: normal;
   font-weight: 300;
   letter-spacing: 0em;
   text-align: center !important;
   padding: 0 10vw !important;
 }

 .landing-page-content .map-content-container .map-container {
   display: none;
 }

 .landing-page-content .prevention-container > h2 {
   width: 100%;
   margin: 0 !important;
   margin-bottom: 40px !important;
   font-family: var(--secondary-font);
   font-size: 4vh;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: center;
   color: #ffffff;
 }

 .landing-page-content .prevention-container {
   position: relative;
   padding: 96px 10vw 40px 10vw !important;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox */
   box-sizing: border-box;
 }

 .landing-page-content .prevention-container > h3 {
   color: #FCCEC0;
   margin: 0 !important;
   margin-bottom: 40px !important;
   width: 100%;
 }

 .landing-page-content .prevention-container > div > div:last-child {
   display: none;
 }

 .circles-container {
   display: none;
 }

 .landing-page-content .solution-container {
   padding: 96px !important;
 }

 .landing-page-content .solution-container > h2 {
   width: 100%;
   margin: 0 !important;
   margin-bottom: 40px !important;
   font-family: var(--secondary-font);
   font-size: 4vh;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: center;
   color: #ffffff;
 }

 .landing-page-content .solution-container > div {
   display: flex;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox */
   box-sizing: border-box;
   flex-direction: column;
 }

 .landing-page-content .solution-container > div:nth-child(3), .landing-page-content .solution-container > div:nth-child(4) {
   flex-direction: column-reverse;
 }

 .landing-page-content .solution-container p {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox */
   box-sizing: border-box;
   height: fit-content;
   margin: 0 !important;
 }

 .landing-page-content .solution-container > div > div > h3 {
   margin: 0 !important;
   margin-bottom: 40px !important;
   color: #FCCEC0 !important;
   width: 100%
 }

 .landing-page-content .solution-container > div > div {
   padding-top: 2vw !important;
 }

 .landing-page-content .solution-container .bottom-text {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 40px !important;
 }

 .landing-page-content .solution-container .bottom-text > div {
   padding-top: 0px !important;
 }

 .landing-page-content .useful-links-container > div {
   display: flex;
   margin: 0 96px;
   margin-bottom: 96px;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox */
   box-sizing: border-box;
   justify-content: space-between;
 }

 .landing-page-content .useful-links-container > div > a object {
   margin-bottom: 20px !important;
   width: 16vw;
   pointer-events: none;
   display: block;
   z-index: 1;
   z-index: -1;
 }

 .landing-page-content .useful-links-container > div > a {
   text-align: center;
   font-family: var(--main-font);
   font-style: normal;
   font-weight: 400;
   letter-spacing: 0em;
   font-size: 2.2vw;
   color: #ffffff;
   text-decoration: none;    
 }

 .landing-page-content .useful-links-container > h2 {
   font-family: var(--secondary-font) !important;
   font-size: 3.5vh;
   font-style: normal;
   font-weight: 800;
   letter-spacing: 0em;
   text-align: center;
   color: #FCCEC0;
   width: 100vw;
 }

}