/* 
* Linards Bulks - Mans ceļš uz universitāti - 2021.maijs
*
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */





/* Fontu imports un ikonu imports
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:200,400,700&subset=cyrillic');

@font-face {
    font-family: 'Nucleo';
    src: url('../fonti/Nucleo.eot');
    src: url('../fonti/Nucleo.eot') format('embedded-opentype'), url('../fonti/Nucleo.woff2') format('woff2'), url('../fonti/Nucleo.woff') format('woff'), url('../fonti/Nucleo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  
/* CSS reset - atceļ vairumu pārlūka noklusēto stilu, lai samazinātu dīvainu kļūdu un neparedzamas attēlošas iespējamību
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
* {	
    box-sizing: border-box;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*,*:focus,*:hover {
    outline:none; 
}


/* Lapas izkārtojums un pamata stili
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */

html {
    width: 100%;
    height: 100%;
    background: #fff;
}
body {
	color: #333b46;
    width: 100%;
    height: 100%;
    font-family: 'Nunito Sans', sans-serif;
    background: #fff;
    font-size: 16px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-rendering: normal;
    overflow: auto;
    padding: 0;
    outline: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
}
@media only screen and (min-width: 800px) {
}

/* Bieži izmantotie elementi
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */
a {
  text-decoration: none;
  color: #666666;
}
p, li {
  line-height: 120%;
  margin-bottom: 2rem;
  font-size: 1.2em;
  font-weight: 100;
  transition: all 0.5s ease;
}
@media only screen and (min-width: 800px) {
  p, li {
    font-size: 1.3em;
    padding-left: 10%;
  }
}
@media only screen and (min-width: 1400px) {
  p, li {
    font-size: 1.6em;
  }
}
@media only screen and (min-width: 1930px) {
  p, li {
    font-size: 1.8em;
  }
}
h1 {
  position: relative;
  font-weight: 100;
  font-size: 8vw;
  margin-bottom: 4vw;
  letter-spacing: -0.3vw;
}
h1 span {
  display: none;
}
@media only screen and (min-width: 800px) {
  h1 {
    font-size: 6vw;
    margin-bottom: 2vw;
  }
  h1 span {
    display: block;
    position: absolute;
    top: -180%;
    left: -5%;
    font-size: 400%;
    font-family: sans-serif;
    font-weight: bold;
    color: rgba(0,0,0,0.07);
    filter: blur(4px);
  }
}
.akcenteta-poga {
  display: block;
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 0.5rem;
  color: #55b519;
  width: auto;
}
li {
  padding-left: 10%;
}
ul li::before {
  content: "■";
  color: rgb(195 194 206);
  font-weight: bold;
  font-size: 1.6rem;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
}


/* Satura bloku dizains
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */
.satura-bloks {
  display: flex;
  flex-direction: column;
  position: relative;
}
body > div:nth-child(2) {
  margin-top: 170px;
}
@media only screen and (max-width: 799px) {
  .attels-labaja-puse {
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 800px) {
  .satura-bloks {
    flex-direction: row;
  }
}
.kolonna {  
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (min-width: 800px) {
  .kolonna {
    min-height: 100vh;
  }
}
.kolonna.attela-kolonna {
  flex-basis: 50%;
  max-width: 80vh;
}
.kolonna.teksta-kolonna {
  flex: 1;
  padding: 8% 4%;
}
@media only screen and (min-width: 800px) {
  .kolonna.teksta-kolonna {
    padding: 8% 4% 8% 4%;
  }
}
.attels {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}


/* Konkrēto lapas attēlu dizains un animācijas
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */

/* Modinātājs */
.modinatajs {
  position: relative;
  width: 100%;  
  max-height: 75vh;
  background-image: url('../atteli/pulkstenis-min.png');
  transform: translateX(120%);
  transition: all 2s ease;
}
.redzams .modinatajs  {
  transform: translateX(0%);
}
@media only screen and (max-width: 799px) {
  .modinatajs {
    margin: 10% 0 10% 0;
  }
}
.modinatajs:after {
  padding-top: 112%;
  display: block;
  content: '';
}
.modinatajs.raditajs-1, .modinatajs.raditajs-2 {
  position: absolute;
}
@keyframes raditajsGriezas {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg)
  }  
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg)
  }
}
.modinatajs .raditajs-1 {
  position: absolute;
  left: 50.2%;
  top: 61.5%;
  width: 50%;
  height: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-image: url('../atteli/pulkstenis-raditajs-1-min.png');
  animation: raditajsGriezas 5s linear infinite;
}
.modinatajs .raditajs-2 {
  position: absolute;
  left: 50.2%;
  top: 61.5%;
  width: 50%;
  height: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-image: url('../atteli/pulkstenis-raditajs-2-min.png');
  animation: raditajsGriezas 60s linear infinite;
}

/* Rītarosme */
.ritarosmes-bloks {
  background: radial-gradient(circle at center top, rgba(231,235,241,1) 0%, rgba(255,255,255,1) 100%);
}
.ritarosmes-konteiners {
  width: 100%; 
  max-height: 70vh;
  position: relative;
  transform: translateX(-80vw);
  transition: all 3s ease; 
}
@media only screen and (max-width: 799px) {
  .ritarosmes-konteiners {
    margin-top: 25%;
  }
}
.redzams .ritarosmes-konteiners {
  transform: translateX(0%);
}
.ritarosmes-konteiners:after {
  padding-top: 79.14%;
  display: block;
  content: '';
}
.ritarosme-sols {
  position: absolute;
  bottom: 0%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('../atteli/ritarosme-sols-min.png') no-repeat center left;
  background-size: contain;
}
@keyframes hantele {
  0% {
    transform: translateY(0%) rotate(0deg);
  } 
  50% {
    transform: translateY(-100%) rotate(-30deg);
  }
  100% {
    transform: translateY(0%) rotate(0deg);
  }
}
.ritarosme-hantele {
  position: absolute;
  bottom: -8%;
  left: 12%;
  width: 74%;
  height: 47%;
  background: url('../atteli/ritarosme-hantele-min.png') no-repeat center left;
  background-size: contain;
  animation: hantele 4s ease-out infinite;
}


/* Kafija */
.kafijas-bloks {
  background: #ebeaeb;
}
.kafijas-konteiners {
  width: 100%; 
  max-height: 80vh;
  position: relative;
  transition: all 2s ease;
}
.kafijas-konteiners:after {
  padding-top: 120%;
  display: block;
  content: '';
}
.kafijas-kruze {
  position: absolute;
  bottom: 0%;
  right: 30%;
  width: 65%;
  padding-bottom: 54%;
  background-image: url('../atteli/kafija-kruze-min.png');
  transform: translateX(80vw);
  transition: all 3s ease; 
}
.redzams .kafijas-kruze {
  transform: translateX(0%);
}
@keyframes tvaiks1 {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }   
  25% {
    transform: translateY(-10%);
    opacity: 1;
  }
  50% {
    transform: translateY(-20%);
    opacity: 1;
  }
  75% {
    transform: translateY(-30%);
    opacity: 1;
  }
  100% {
    transform: translateY(-40%);
    opacity: 0;
  }
}
.kafijas-kruze .tvaiks-1 {
  position: absolute;
  top: -50%;
  left: 35%;
  width: 20%;
  padding-bottom: 54%;
  background-image: url('../atteli/kafija-tvaiks-1-min.png');
  filter: brightness(0.6);
  animation: tvaiks1 4s linear infinite;
}
.kafijas-kruze .tvaiks-2 {
  position: absolute;
  top: -40%;
  left: 46%;
  width: 20%;
  padding-bottom: 54%;
  background-image: url('../atteli/kafija-tvaiks-2-min.png');
  filter: brightness(0.9);
  animation: tvaiks1 3s linear infinite;
}
.kafijas-pods {
  position: absolute;
  bottom: 14%;
  right: 5%;
  width: 60%;
  padding-bottom: 108%;
  background-image: url('../atteli/kafija-pods-min.png');
  transform: translateX(30vw);
  transition: all 3s ease;
}
.redzams .kafijas-pods {
  transform: translateX(0%);
}

/* Velosipēds */
.velosipeda-konteiners {
  width: 100%; 
  max-height: 70vh;
  position: relative;
}

@media only screen and (max-width: 799px) {
  .velosipeda-konteiners {
    margin-top: 25%;
  }
}
.velosipeda-konteiners:after {
  padding-top: 79.14%;
  display: block;
  content: '';
}
.velosipeds {
  position: absolute;
  bottom: 0%;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('../atteli/velosipeds-min.png') no-repeat center left;
  background-size: contain;
}
@keyframes pedalisGriezas {
  0% {
    transform: rotate(0deg)
  }  
  100% {
    transform: rotate(360deg)
  }
}
.velosipeds-pedalis-1 {
  position: absolute;
  bottom: 4%;
  left: 10.5%;
  width: 35%;
  padding-bottom: 35%;
  background: url('../atteli/velosipeds-pedalis-1-min.png') no-repeat center center;
  background-size: contain;
  animation: pedalisGriezas 2s linear infinite;
}
.velosipeds-pedalis-2 {
  position: absolute;
  bottom: 1%;
  left: 9%;
  width: 40%;
  padding-bottom: 41%;
  background: url('../atteli/velosipeds-pedalis-2-min.png') no-repeat center center;
  background-size: contain;
  animation: pedalisGriezas 2s linear infinite;
}


/* Sabiedriskais transports */
.sabiedriska-transporta-bloks {
  background: #ebeaeb url('../atteli/tramvajs-debesis.jpg') no-repeat top center;
  background-size: contain;
}
.tramvaja-konteiners {
  width: 100%; 
  max-height: 70vh;
  position: relative;
}
.tramvaja-konteiners:after {
  padding-top: 92.86%;
  display: block;
  content: '';
}
.tramvaja-sliedes {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 20%;
  background:  url('../atteli/tramvajs-sliedes-min.png') no-repeat bottom right;
  background-size: contain;
}
.tramvajs {
  position: absolute;
  bottom: 12.2%;
  right: 0;
  width: 100%;
  height: 90%;
  background: url(../atteli/tramvajs-min.png) no-repeat bottom right;
  background-size: contain;
  transform: translateX(50vw);
  transition: all 4s ease-out;
}
.redzams .tramvajs {
  transform: translateX(0%);
}


/* Pica */
.pica {
  position: relative;
  width: 100%;  
  background-image: url('../atteli/pica-min.png');
}
.pica::after {
  content: '';
  padding-top: 100%;
  display: block;
}
.pica-skele-1 {
  position: absolute;
  bottom: 23.5%;
  right: 15.2%;
  width: 30%;
  padding-bottom: 13%;
  opacity: 0;
  background-image: url('../atteli/pica-skele-1-min.png');
}
@keyframes picasSkele {
  0% {
    opacity: 1;
    transform: translateY(0%)
  }    
  30% {
    opacity: 1;
  } 
  50% {
    opacity: 0;
    transform: translateY(-300%)
  }
  70% {
    opacity: 1;
  } 
  100% {
    opacity: 1;
    transform: translateY(0%)
  }
}
.redzams .pica-skele-1 {
  animation: picasSkele 6s infinite;
}
.pica-skele-2 {
  position: absolute;
  bottom: 18%;
  right: 21.4%;
  width: 30%;
  padding-bottom: 15%;
  background-image: url('../atteli/pica-skele-2-min.png');
  z-index: 2;
}
.redzams .pica-skele-2 {
  animation: picasSkele 6s infinite;
  animation-delay: 0.5s;
}
.pica-skele-3 {
  position: absolute;
  bottom: 18%;
  right: 44.3%;
  width: 29%;
  padding-bottom: 16%;
  background-image: url('../atteli/pica-skele-3-min.png');
}
.redzams .pica-skele-3 {
  animation: picasSkele 6s infinite;
  animation-delay: 1s;
}
@media only screen and (max-width: 799px) {
  .pica {
    margin: 0;
  }
}

/* Strūklaka */
.pastaigas-bloks {
  background: radial-gradient(circle at center bottom, rgb(210 228 255) 20%, rgb(255 255 255) 100%);
}
.struklaka {
  background: url('../atteli/struklaka-min.png') no-repeat bottom right;
  background-size: contain;
  opacity: 0;
  transition: all 5s ease-out;
}
 .struklaka.redzams {
  opacity: 1;
}
.struklaka::after {
  content: '';
  padding-top: 100%;
}




/* Lapas navigācija
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */

.galvene {
  position: fixed;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(6px);
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9;
}
.galvene .navigacija {
  padding: 40px 30px;
  transition: all 0.5s ease;
}
@media only screen and (max-width: 799px) {
  .galvene .navigacija {
    text-align: center;
  }
}
.galvene.saspiesta .navigacija {
  padding: 15px 20px;
}
.galvene .logo {
  background: url('../atteli/logo_melns.png') no-repeat center center;
  width: 220px;
  background-size: 80%;
  height: 50px;
  margin-left: 20px;
  transition: all 0.5s ease;
}
.galvene.saspiesta .logo {
  height: 30px; 
  width: 170px;
  margin-left: 0px;
  opacity: 0.7;
  background-size: 60%;
}
@media only screen and (max-width: 799px) {
  .galvene .logo {
    display: none;
  }
}
.galvene a {
  padding: 0 10px;
  text-align: center;
}
.valoda {
  display: inline-block;
  width: 30px;
  height: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  background: #636970;
  color: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  font-size: 0.8rem;
  vertical-align: middle;
  padding: 0 !important;
  margin-left: 6px;
}





/* Akordeona izvēlne 
---------------------------------------------------------------------------------------------------------------------------------------- */

.akordeons .skirklis > input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}  
.akordeons {
  overflow: hidden;
  margin-top: 1rem;
  margin-bottom: 2rem;
}
@media only screen and (min-width: 800px) {
  .akordeons {
    margin-left: 10%;
  }
}
.akordeons .skirklis {
  width: 100%;
  overflow: hidden;
}
.akordeons > .skirklis:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.akordeons > .skirklis:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.akordeons .skirkla-nosaukums {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #ebecf0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.kafijas-bloks .akordeons .skirkla-nosaukums,
.kafijas-bloks .akordeons .skirkla-saturs  {
  background: #ffffff;
}
.akordeons .skirkla-nosaukums:hover {
  background: #e2e3e7;
}
.akordeons .skirkla-saturs {
  max-height: 0;
  opacity: 0;
  background: #ebecf0;
  transition: opacity 0.4s ease, padding 0.2s ease, max-height 0.4s cubic-bezier(0, 1, 0, 1);
}
.akordeons input:checked ~ .skirkla-saturs {
  opacity: 1;
  max-height: 1000px;
  transition: opacity 0.4s ease, padding 0.3s ease, max-height 1.0s ease-in-out;
}

.skirkla-saturs {
  display: flex;
  width: 100%;
}
.skirkla-kolonna {
  flex: 0 0 50%;
  padding: 1rem 1rem 2rem 1rem;
}
.skrikla-tabula {
  width:100%;
  border:0px #C0C0C0;
  border-collapse:collapse;
  padding:5px;
}
.skrikla-tabula caption {
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: left;
}
.skrikla-tabula th {
  border:0px #C0C0C0;
  padding:5px;
  background:#F0F0F0;
  text-align: left ;
}
.skrikla-tabula td {
  border:0px #C0C0C0;
  padding:5px;
}



/* Ikonu fonta stils
––––––––––––––––––––––––––--------------------------------------------------------------------------------------–––––––––––––––––––––––– */
.ikona::before {
    display: inline-block;
    font: normal normal normal 1em/1 'Nucleo';
    color: inherit;
    flex-shrink: 0;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: inherit;
    margin-right: 10px;
  }

  .icon-opening-times::before {
    content: "\ea02";
  }
  
  .icon-buzz::before {
    content: "\ea03";
  }
  
  .icon-d-edit::before {
    content: "\ea04";
  }
  
  .icon-settings-gear::before {
    content: "\ea05";
  }
  
  .icon-calendar-2::before {
    content: "\ea06";
  }
  
  .icon-table-move::before {
    content: "\ea08";
  }
  
  .icon-app-store::before {
    content: "\ea09";
  }
  
  .icon-settings::before {
    content: "\ea0b";
  }
  
  .icon-folder-upload::before {
    content: "\ea0c";
  }
  
  .icon-screen-enlarge::before {
    content: "\ea0d";
  }
  
  .icon-single-05::before {
    content: "\ea0e";
  }
  
  .icon-multiple-11::before {
    content: "\ea10";
  }
  
  .icon-badge::before {
    content: "\ea11";
  }
  
  .icon-book-open::before {
    content: "\ea12";
  }
  
  .icon-paragraph::before {
    content: "\ea13";
  }
  
  .icon-chart-pie-36::before {
    content: "\ea14";
  }
  
  .icon-calendar-event-2::before {
    content: "\ea15";
  }
  
  .icon-archive-doc::before {
    content: "\ea16";
  }
  
  .icon-networking::before {
    content: "\ea17";
  }
  
  .icon-search::before {
    content: "\ea18";
  }
  
  .icon-arrows-maximize-2::before {
    content: "\ea19";
  }
  
  .icon-account::before {
    content: "\ea1a";
  }
  
  .icon-button-power::before {
    content: "\ea1b";
  }
  
  .icon-check::before {
    content: "\ea1c";
  }
  
  .icon-e-remove::before {
    content: "\ea1d";
  }
  
  .icon-bin::before {
    content: "\ea1e";
  }
  
  .icon-camera::before {
    content: "\ea1f";
  }
  
  .icon-key::before {
    content: "\ea20";
  }
  
  .icon-e-add::before {
    content: "\ea21";
  }
  
  .icon-pin-3::before {
    content: "\ea22";
  }
  
  .icon-ctrl-right::before {
    content: "\ea23";
  }
  
  .icon-ctrl-left::before {
    content: "\ea24";
  }
  
  .icon-ctrl-up::before {
    content: "\ea25";
  }
  
  .icon-ctrl-down::before {
    content: "\ea26";
  }
  
  .icon-edit::before {
    content: "\ea28";
  }
  
  .icon-calendar-event-2-1::before {
    content: "\ea29";
  }
  
  .icon-calendar-event-create::before {
    content: "\ea2a";
  }
  
  .icon-search-content::before {
    content: "\ea2b";
  }
  
  .icon-folder-search::before {
    content: "\ea2c";
  }
  
  .icon-warning-sign-1::before {
    content: "\ea2e";
  }
  
  .icon-ungroup::before {
    content: "\ea2f";
  }
  
  .icon-save-to-list::before {
    content: "\ea30";
  }
  
  .icon-c-add::before {
    content: "\ea31";
  }
  
  .icon-a-add::before {
    content: "\ea32";
  }
  
  .icon-move-layer-down::before {
    content: "\ea33";
  }
  
  .icon-s-check::before {
    content: "\ea34";
  }
  
  .icon-n-check::before {
    content: "\ea35";
  }
  
  .icon-check-all::before {
    content: "\ea36";
  }
  
  .icon-copy::before {
    content: "\ea37";
  }