Template:Vilnius-Lithuania/CSS/HP

body, html { 

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.milkWaveOther { 

 position: relative;
 margin-top: -13%;
 z-index: 9;

} .milkWaveOther.rotate-wave { 

 transform: rotate(180deg);
 margin-bottom: -20vh;
 margin-top: -10px;

}

.introContainer::before { 

 background-image: none;
 border-bottom: none;

}

  1. content-tag {
 height: fit-content;
 background-color: #fafafc;
 z-index: 10;
 position: relative;

}

  1. content-tag p {
 font-family: "lato-light";
 margin: 0;
 font-size: 1.2rem;
 line-height: 1.5;
 margin-top: 20px;
 margin-bottom: 40px;
 text-align: left;

} @media (max-width: 480px) { 

 #content-tag p {
   font-size: 1rem;
 }

}

  1. content-tag .contentBlock {
 float: none;
 margin: 0 auto;

}

  1. hp-activities {
 background-color: #121212;
 font-family: "montserrat-light", sans-serif !important;
 width: 100%;
 height: fit-content;
 padding: 200px 0;
 position: relative;
 z-index: 3;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

}

  1. hp-activities a {
 text-decoration: none;
 color: #fafafc;

}

  1. hp-activities h1 {
 font-size: 1.3vh !important;
 font-weight: 100 !important;
 text-align: center !important;
 font-family: "montserrat-light", sans-serif !important;
 transition: 0.4s ease-out;
 position: relative;
 top: 0px;

}

  1. hp-activities h1:hover {
 color: #6281ef;
 top: 2px;

} @media (max-width: 350px) { 

 #hp-activities h1 {
   font-size: 2.3vw !important;
 }

} @media (max-width: 800px) { 

 #hp-activities h1 {
   font-size: 1.1em !important;
 }

}

  1. hp-activities #title {
 height: 10vh;

}

  1. hp-activities #title .heading2 {
 font-family: "montserrat-black";
 font-size: 6vw;
 text-transform: uppercase;
 display: block;
 width: 100%;
 text-align: end;
 color: #FAFAFC;

}

  1. hp-activities #title .heading2.other {
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;
 line-height: 0.4em;

}

  1. hp-activities::before {
 z-index: 2;
 position: absolute;
 width: 100%;
 height: 140vh;
 content: "";
 pointer-events: none;
 border-bottom: 2px solid #FAFAFC;
 transform: scaleY(-1);
 background-repeat: no-repeat;

} @media (max-width: 420px) { 

 #hp-activities::before {
   height: 120vh;
 }

}

  1. hp-activities::after {
 z-index: 2;
 position: absolute;
 width: 100%;
 height: 140vh;
 content: "";
 pointer-events: none;
 border-bottom: 2px solid #FAFAFC;
 background-repeat: no-repeat;

} @media (max-width: 420px) { 

 #hp-activities::after {
   height: 120vh;
 }

} @media (max-width: 420px) { 

 #hp-activities {
   height: 120vh;
 }

}

  1. hp-activities #box {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 70vh;
 flex-direction: initial;

} @media (max-width: 767px) { 

 #hp-activities #box {
   flex-direction: column-reverse;
   width: 90%;
   height: fit-content;
 }

}

  1. hp-activities #box .kindergarten[turned_off=false] {
 background-color: #81D4FA !important;
 border: none !important;

}

  1. hp-activities #box .primary[turned_off=false] {
 background-color: #F48FB1 !important;
 border: none !important;

}

  1. hp-activities #box .middle[turned_off=false] {
 background-color: #FFD762 !important;
 border: none !important;

}

  1. hp-activities #box .high[turned_off=false] {
 background-color: #6281EF !important;
 border: none !important;

}

  1. hp-activities #box .students[turned_off=false] {
 background-color: #FFA726 !important;
 border: none !important;

}

  1. hp-activities #box .teachers[turned_off=false] {
 background-color: #C5E1A5 !important;
 border: none !important;

}

  1. hp-activities #box .adults[turned_off=false] {
 background-color: #B39DDB !important;
 border: none !important;

}

  1. hp-activities #box #hp-intro {
 max-width: 25%;
 background-color: #222222;
 color: #FAFAFC;
 padding: 20px;
 box-sizing: border-box;
 height: 50vh;
 width: fit-content;
 -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 white-space: nowrap;

} @media (max-width: 767px) { 

 #hp-activities #box #hp-intro {
   width: 90%;
   height: fit-content;
   padding: 10px;
   margin-top: 15px;
   max-width: none;
 }

}

  1. hp-activities #box #hp-overview {
 background-color: #222222;
 display: flex;
 padding: 20px;
 box-sizing: border-box;
 height: 50vh;
 width: 55%;
 -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
 box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);

} @media (max-width: 767px) { 

 #hp-activities #box #hp-overview {
   height: fit-content;
   width: 90%;
 }

}

  1. hp-activities #box #hp-overview .activity {
 width: 20%;
 padding-left: 2px;
 padding-right: 2px;

}

  1. hp-activities #box #hp-overview .activity div {
 width: 100%;

}

  1. hp-activities #box #hp-overview .activity .title {
 height: 15%;
 color: #fafafc;
 font-size: 0.7em !important;
 text-align: center;

} @media (max-width: 767px) { 

 #hp-activities #box #hp-overview .activity .title {
   font-size: 0.4em !important;
 }

}

  1. hp-activities #box #hp-overview .activity .points {
 height: 85%;
 display: grid;
 grid-auto-columns: 1fr;
 grid-auto-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 padding-top: 10px;

}

  1. hp-activities #box #hp-overview .activity .points .point {
 border-radius: 100px;
 box-sizing: border-box;
 max-width: 4vh;
 max-height: 4vh;
 margin: 0 auto;
 border: solid 0.15px #dcdcdc;
 background-color: transparent;
 transition: 1s;
 height: 7vw;
 width: 7vw;

} @media (max-width: 767px) { 

 #hp-activities #box #hp-overview .activity .points .point {
   margin: 10px auto;
 }

}

  1. hp-activities #box #hp-overview .activity .points .unfilled {
 animation: none;

}

  1. hp-activities #box ul {
 list-style: none;
 padding-inline-start: 20px;
 margin: 0 auto;
 height: 85%;
 display: grid;
 padding-top: 10px;

} @media (max-width: 767px) { 

 #hp-activities #box ul {
   flex-wrap: wrap;
   display: flex;
   height: 100%;
   padding-inline-start: 20px;
   padding-top: 0px;
 }

}

  1. hp-activities #box ul li {
 display: flex;
 align-items: center;
 font-size: 1.1em;
 height: fit-content;
 margin: 0;

} @media (max-width: 767px) { 

 #hp-activities #box ul li {
   flex: 1 0 50%;
   font-size: 3vw;
   margin: 5px 0;
 }

}

  1. hp-activities #box ul li div {
 max-height: 4vh;
 max-width: 4vh;
 border-radius: 100%;
 margin-right: 15px;
 height: 7vw;
 width: 7vw;

}

  1. hp-activities #box ul li p {
 font-family: "montserrat-light", sans-serif !important;
 margin-block-end: 0;
 margin-block-start: 0;
 font-size: 1.3vw;

} @media (max-width: 767px) { 

 #hp-activities #box ul li p {
   font-size: 2vw !important;
 }

}

main { 

 flex-direction: initial;
 padding: 0 0 50px;

} main .popup { 

 opacity: 0;
 transition: 0.2s ease-out;

} main .city { 

 cursor: pointer;

} main .city:hover .popup { 

 opacity: 1;

}

  1. section-text .content .h3 {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 2.4em;
 margin-bottom: 1em;

}

video#linas { 

 width: 300px;
 margin: 0 auto;

}