body {

  margin: 0;
  padding: 0 0 10rem 0;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.666rem;

  color: #242424;

  margin:auto;

  background: url(img/site-bg.jpg) repeat-y top center;
  background-size: contain;
  background-color: #fff2fd;
}

.logo {

  display: block;

  margin: auto;
  margin-top: 3em;
  margin-bottom: 1em;
}

a, a:visited {
  color: #4242f1;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.red {
  color: #a61414 !important;
}

.green {
  color:#1b7912 !important;
}

.pink {
  
  color:#682254;
  /*color:#d30095;*/
}

h1 {

  width: 100%;
  min-height: 110px;
  background: url(img/luciwaves-logo-pink-25.png) no-repeat center center;
}

h1 span {

  visibility: hidden;
}

.geo {
  
  font-family: Georgia, 'Times New Roman', Times, serif;
}

h3 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.8em;
  color: rgba(0, 0, 0, 0.69);
}

body > div {

  display: flex;
  flex-direction: row;
  margin: auto;
  max-width: 1024px;

  mask-image: url(img/clip.png);
}

body > .page-ext {
  max-width: 100%;
  width: 100%;
}


@media screen and (max-width: 600px) {
  
  body > div .cont:first-child {
    display: none;
  }
  
  body > div .cont:last-child {
    text-align: center;
    width: 100%;
  }
}

.book-v {
  max-height: 800px;
}

.book {
  padding-bottom: 2rem;
  min-height: 25rem;
}

.book img {

  width: 50%;
  max-width: 420px;
  border: 3px solid #52504d;

  border-bottom-width: 1px;
  border-radius: 3px;

  transform: perspective(0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

  box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.3);
  transition: 0.4s ease-out all;
/*
  transition: 0.3s ease-out all;*/
}

.cont:first-child h3 {
  padding-right: 4.2rem;
}

.cont:last-child h3 {
  padding-left: 4.2rem;
}

.cont p {

  padding-bottom: 1rem;
}

.cont:first-child .book {

  padding-right: 3rem;
}

.cont:first-child .book img {

  box-shadow: -12px 12px 24px rgba(0, 0, 0, 0.3);
  transform: perspective(45em) rotateX(16deg) rotateY(10deg) rotateZ(-13deg);
}

.cont:last-child .book {

  padding-left: 3rem;
}

.cont:last-child .book img {

  transform: perspective(45em) rotateX(16deg) rotateY(-10deg) rotateZ(13deg);
}

.cont .book img:hover {

  margin-left: -1rem;
  transform: perspective(45em) rotateX(0.1deg) rotateY(-0.1deg) rotateZ(0.1deg);
  width: 66%;
}

.page {

  margin: auto;
  text-align: center;
  display: block;
  mask: none;
}

.page p {

  width: 100%;
}

.panel {
  
  margin: auto;
  margin-bottom: 1em;

  max-width: 420px;
  max-height: 420px;

  overflow: hidden;
}

.panel.selected {

  top:0;
  height: 100%;
  opacity: 1;
}

.panel h5 {
  display: none;
}

.panel p {
  
  padding: 0;
}

.panel p img {
  
  width: 95%;
  border: 3px solid rgba(0, 0, 0, 0.69);
}

.panel.tall {

  max-height: 800px;
}

.panel.tall p {

  height: 100%;
}

.panel.tall p img {

  height: 90%;
}


@media screen and (max-width: 600px) {

  .panel:not(.tall) p img {

    margin: auto;
    width: 90%;
  }
}

.icons {
  
  margin: 0rem;
  margin-bottom: -780px;
  padding: 0;

  list-style-type: none;
}

.icons li {

  display: inline-block;
  margin: 3rem 1rem 0rem 1rem;
  padding: 0;

  width: 12rem;
  height: 12rem;

  overflow: hidden;

  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);

  background-color: rgba(0, 0, 0, 0.69);
  transition: 0.2s ease-in all;
}

.icons.has-selected li {

  opacity: 0;
}

.icons.has-selected li:hover {

  opacity: 1;
}

.icons li > div {

  position: relative;
  width: 100%;
  height: 100%;

  clip-path: polygon(3% 2%, 97% 2%, 50% 96.2%);
  transition: 0.2s ease-in all;
}

.icons li:hover {

  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.icons li:hover > div {

  clip-path: polygon(50% 4%, 97% 98%, 3% 98%);
}


.icons li a img {

  width: 200%;
  margin-left: -50%;
  margin-top: -1.5rem;
}