:root {
    --primary-color: #1db954;
    --primary-gray-color: #ececec;
    --primary-text-color: #333;
    --secondary-text-color: #8a8a8a;
      }

body, html {
    font: normal 16px 'Roboto', sans-serif;
}

body {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1033%26quot%3b)' fill='none'%3e%3cpath d='M0 0L97.61 0L0 127.78z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M0 127.78L97.61 0L453.59000000000003 0L0 291.55z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M0 291.55L453.59000000000003 0L467.14000000000004 0L0 407.93z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M0 407.93L467.14000000000004 0L1022.1300000000001 0L0 508.27z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M1440 560L1418.45 560L1440 343.03z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M1440 343.03L1418.45 560L894.4100000000001 560L1440 168.93999999999997z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M1440 168.94L894.4100000000001 560L410.4500000000001 560L1440 154.13z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M1440 154.13L410.45000000000005 560L258.82000000000005 560L1440 81.03z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1033'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  background-attachment: fixed;
}

section {
  height: 100vh;
  padding: 0 0;
  width: 100%;
  position: relative;
}

      nav.nav-extended {
    min-height: 84px;
    padding: 0 0;
    transition: all 0.5s;
    backface-visibility: hidden;
    background-color: transparent!important;
    box-shadow: none;
    position: fixed;
    z-index: 999;
}

.nav-wrapper ul li a {
    color: var(--primary-text-color);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    line-height: initial;
    padding: 0.5rem 0;
    margin: 1.5rem 1rem;
}

nav ul a:hover, nav ul a.active {
  background-color: transparent;
    color: var(--primary-color);
}

nav ul a#anchor2.active:hover, nav ul a#anchor2.active {
    color: white;
  background-color: transparent;
}

      .panel {
        text-align: center;
      }

      .valign-wrapper {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: block;
      }

      h2 {
        margin: 0 0 0;
        font-size: 3.6rem;
        font-weight: 600;
        text-align: center;
      }

      .panel p {
        text-align: center;
        margin: 1rem 0 1rem;
      }

      .panel ul {
        margin: 0 0 2rem;
      }

      .panel ul li {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 3px;
        margin: 5px;
        background-color:  var(--primary-gray-color);
        color: var(--secondary-text-color);
        transition: all 200ms ease-in-out;
        font-weight: 500;
        cursor: pointer;
      }

      .panel ul li:hover {
        color: white;
        background-color: var(--primary-color);
      }

      .panel .valign-wrapper {
        left: 0;
        right: 0;
      }

      .me h2 {
        font-size: 5rem;
        text-align: left;
      }

      .me h2, .me p {
        text-align: left;
      }

      #socmed {
        margin: 3rem 0 0;
      }

      #socmed li {
        display: inline-block;
      }

      #socmed li a {
        border-radius: 3px;
        background-color:  var(--primary-gray-color);
        color: var(--secondary-text-color);
        margin: 0 0.5rem 0 0;
        padding: 12px 12px 8px;
        transition: all 200ms ease-in-out;
      }

      #socmed li a:hover {
        background-color:  var(--primary-color);
        color: white;
      }

      .images {
        margin: 2rem 0 0;
      }

      .images img {
        margin: 0 auto;
        border-radius: 20px;
        cursor: pointer;
        box-shadow: 0 5px 10px rgb(209 221 243 / 40%);
        width: 70%;
      }

.logo {
  margin: 2rem 0 0;
}

.brankolei {
  background-color: var(--primary-color);
}

.brankolei h2, .brankolei p, .perins h2, .perins p, .palabit h2, .palabit p, .essentials h2, .essentials p {
  color: white;
}

.brankolei ul li {
  background-color: #f80302;
  color: white;
}

.perins {
  background-color: #1f1f37;
}

.perins .images img {
  box-shadow: 0 5px 10px rgb(18 18 30);
}

.perins ul li, .palabit ul li, .essentials ul li {
  background-color: var(--primary-color);
  color: white;
}

.brankolei ul li:hover, .perins ul li:hover, .palabit ul li:hover, .essentials ul li:hover {
  background-color: white;
  color: var(--primary-color);
}

.palabit {
  background-color: #f60;
}

.essentials {
  background-color: #39a9fd;
}

.form {
  padding: 3rem;
  background-color: white;
        box-shadow: 0 5px 10px rgb(209 221 243 / 40%);
        text-align: left;
}

.contact:after {
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  background-color: var(--primary-color);
  height: 350px;
  width: 100%;
  z-index: -1;
}

.contact h4 {
  margin: 0 0 3rem;
  text-align: left;
  font-weight: bold;
}

ul.info li {
  display: block;
  background-color: transparent;
  text-align: left;
  margin: 1rem 0 0;
}

ul.info li:hover {
  background-color: transparent;
  color: var(--primary-color);
}

ul.info li ion-icon {
  color: var(--primary-color);
  margin: 0 2rem 0 0;
}

.form button {
  height: 4rem;
    border-radius: 15px;
    margin: 2rem 0 0;
    background-color: var(--primary-color);
}

.form button:hover, .form button:focus {
    background-color: var(--primary-color);
}

.form form {
  margin: 0!important;
}

.credits {
  margin: 2rem 0 0;
}

.credits ul {
  text-align: left;
}

.credits ul li {
  background-color: transparent;
  padding: 0;
  margin: 0;
}

.credits ul li a {
  border: 1px solid white;
  color: white!important;
  background-color: var(--primary-color)!important;
}

.credits ul li a:hover {
  border: 1px solid white;
  color: var(--primary-color)!important;
  background-color: white!important;
}

.credits p {
  margin: 2rem 0 0;
  color: white;
  line-height: 42px;
  text-align: right;
}

.slick-arrow {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    font-size: 0px;
padding: 0 0;
margin: 0 0;
background-color: var(--primary-gray-color);
border: 0;
border-radius: 20px;
line-height: 40px;
height: 40px;
width: 40px;
transition: all 200ms ease-in-out;
}

.slick-arrow:focus {
  background-color: var(--primary-gray-color);
}

.slick-arrow:hover {
  background-color: var(--primary-color);
}

.slick-arrow:hover:after {
  color: white;
}

.slick-arrow:after {
  display: block;
font-family: "Ionicons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1rem;
color: var(--secondary-text-color);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.slick-prev {
  left: 10px;
}

.slick-prev:after {
content: "\f124";
}

.slick-next {
  right: 10px;
}

.slick-next:after {
content: "\f125";
}

@media only screen and (max-width: 768px) {
      .images img {
        height: 500px;
        width: auto;
      }
      
      section {
            height: auto;
            min-height: 80vh;
            padding: 5rem 0;
      }

      .valign-wrapper {
        position: relative;
        top: initial;
        transform: none;
      }

      .credits ul, .credits p {
        text-align: center;
      }

      .me-container {
        margin: 15rem 0;
      }

      section.contact {
        padding: 5rem 0 2rem;
      }
      
      .reveal {
        visibility: visible!important;
    opacity: 1!important;
      }
}