@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

:root {
    --nav_bg: rgb(250, 250, 250);;
    --b_nav: rgb(4, 12, 35);
    --b_font: rgb(80, 156, 219);
    --clr: rgba(20, 27, 234, 0.916);
    --pozadina: rgba(156, 204, 247, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--zaustavi, 8vh);
    font-family:'Monserat', 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5; 
  }

body {
    font-family:'Monserat', 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;  
}  
/* mojaAbba - pocetni ekran */
.pocetni-ekran {
  display: flex;
  flex-direction: column;
  color: #fff;
  width: 100%;
  height: 94vh;
  justify-content: center;
  align-items: center;
  background-color: #87cefa;
  background-image: url("../images/olovka.png");
  background-size:   clamp(100px, 15vh, 300px);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-blend-mode: overlay;
 }

.pocetni-ekran .naslov { max-width: 400px; font-size: 1.125rem; font-weight: 400; padding: 1rem; border: 1px solid var(--b_font); border-radius: .5rem;}
.pocetni-ekran .naslov:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2);}
.flip-card { width: 350px; height: 250px; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card-front { color: white; text-align: center; }
/*
.flip-card-front > img { height: 2.5rem; }

.flip-card-front > img { width: 100%; }
*/
.flip-card-back { line-height: 250px; text-align: center; transform: rotateY(180deg); }

  /* spusti dolje*/
  .spusti { margin-top: 6vh; }
  .spusti-novosti { margin-top: 10vh; }
  .spusti-onama { margin-top: 11vh; }
  .gore-dolje-linija { border-bottom: 2px solid var(--b_font) ; border-top: 2px solid var(--b_font) ;  }

  /* navigacija */
  .navigacija { display: flex; justify-content: space-around; align-items: center; min-height: 6vh; background: var(--nav_bg); font-weight: 500; font-size: 1.25rem; top: 0%; z-index: 90; }
  .navigacija .logo { margin: 0 2rem; }
  .navigacija .nav-linkovi { display: flex; flex: 1; margin-bottom: 0; justify-content: center; align-items: center; gap:2px; z-index: 99;}
  .navigacija .nav-linkovi li { list-style: none; padding: 0%; }
 
 
  .navigacija .nav-linkovi li a {
    text-decoration: none;
    background-image: linear-gradient(
    to right,
    #000,
    #000 50%,
    #54b3d6 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 2px .5rem;
    position: relative;
    background-clip: content-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
  }

  .navigacija .nav-linkovi li a:before{
    content: '';
    background: #000;
    display: block;
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 2px;
    transition: all 0.3s ease-in-out;
  }

  .navigacija .nav-linkovi li a:hover {
    background-position: 0;
  }

  .navigacija .nav-linkovi li a:hover::before{
    width: 100%;
  }

  .navigacija .nav-linkovi li .act  {
    background-image: none;
    -webkit-text-fill-color: black;
    color: rgb(5, 8, 90);
    border-bottom: 3px solid rgb(5, 8, 90);
    border-radius: 1em;
    bottom: .3em;
    /*padding: 0 .5em ;*/
    position: static;
  }

  .navigacija .nav-linkovi li a.act , .navigacija .nav-linkovi li a.act::before {color: #000;
    background: none;
  }

.navigacija .burger { display: none; cursor: pointer; }
.navigacija .burger div { width: 25px; height: 3px; background-color: var(--b_font); margin: 5px; transition: all 0.3s ease; }

@media screen and (max-width:1100px) {
    body { overflow-x: hidden;  }
    .navigacija .nav-linkovi { position: absolute; right: 0px; padding: 5%; top: 6vh; background: var(--nav_bg); display: flex;  flex-direction: column; justify-content: space-around; align-items: center;  transform: translateX(100%); transition: transform 0.5s ease-in; }
    .navigacija .nav-linkovi li { opacity: 0; padding: 2% 0; width: 100%; }
    .navigacija .nav-linkovi li a { width: 100%; text-align: center; justify-content: center; }
    .navigacija .burger { display: block; }
    #cjenovnik { margin-left: 0; margin-right: 0 }
    .pocetni-ekran .naslov {max-width: 90vw;}
    .flip-card { width: 320px; }
}

@media screen and (max-width:780px) {
   body { overflow-x: hidden; }
  }
.navigacija .nav-active { transform: translateX(0%); }
  
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
  
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  
  .navigacija .pravi-X .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
  .navigacija .pravi-X .line2 { opacity: 0; }
  .navigacija .pravi-X .line3 { transform: rotate(45deg) translate(-5px, -6px); }


  /* cjenovnik*/
  .glavni-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    column-gap: 1%
   }

   .glavni-panel .panel {
    flex: 32%;
   }

   .izbornik {background-color: red; display: flex; flex-direction: row-reverse;}

    .panel-heading {
      color: #fff !important;
      background-color: #87cefa !important;
  }

    .panel-footer {
      background-color: white ;
  }
    .panel:hover {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  /* usluge */
  #usluge ul { list-style-type: "\2727\2800";  padding: 1.5rem 2rem; }
  #usluge ul li::marker { color: var(--b_font); }
  #usluge .panel-body p { padding-top: 1.5rem; }
  #usluge ul li:hover { background: #e9e9e9;     list-style-type: "\27af\2800"; }


  /* footer  -- briso position: fixed; left: 0; bottom: 0;  */

    footer .glyphicon { font-size: .6rem; margin-bottom: 5px; color: #f5f5f5; }
    .abba-footer-fix { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; font-size: .6rem; background-color: #2d2d30; color: #f5f5f5; padding: 1.5rem; }
    .abba-footer { width: 100%; text-align: center; font-size: .6rem; background-color: #2d2d30; color: #f5f5f5; padding: 1.5rem; }
    .abba-footer a { color: #f5f5f5; }
    .abba-footer a:hover { color: #777; text-decoration: none; }

  /* ------- Idi na poćetak dokumenta --------------*/
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 10px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #000000;
  background: radial-gradient(rgba(49, 46, 46, 0.8), rgba(255, 255, 255, 0.5));
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #555;
}
  
.slideanim {visibility:visible;}
  .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }

  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }  


/* ---------------------------------------------------------------------------
Nnovosti
----------------------------------------------------------------------------*/
.svi-clanci { display: flex; flex: 1; flex-direction: column; margin: auto; }
.red { max-width: 1200px; display: flex; align-self: center; position: relative; }
.red { display: flex; justify-content: space-between; align-items: flex-start;}
/* dvije kolone u redu */
.kolona-lijevo, .kolona-desno {  padding: 10px; display: flex; gap: 1rem; flex-direction: column;}
.kolona-lijevo { width: 60%; }
.kolona-desno { width: 40%;}
.kolona-lijevo .clanak, 
.kolona-desno .clanak { display: flex; flex-direction: column; padding: 1rem; border: 1px solid var(--b_font); border-radius: 1rem; }
.kolona-desno .clanak h2 { align-self: flex-end; }
.clanak:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); }
.clanak-gore { display: flex; padding-bottom: 1rem;}
.clanak-gore-50 { display: flex; flex: 50%; padding: .5rem; flex-direction: column; justify-content: space-evenly; }
.clanak-gore-50-naslov { text-align: center; font-size: 1.250rem; font-weight: bolder; }
.clanak-gore-slika { flex: 50%; padding: 0;} 
.clanak-dolje { display: flex; flex-direction: column; border-top: 1px solid var(--b_font); font-size: .9rem; font-weight: 400; padding:.5rem 0  1rem 0; }
.clanak-dolje-podnaslov { text-align: center; font-size: 1rem; font-weight: bold; padding-bottom: .5rem; border-bottom: 1px solid var(--b_font); margin-bottom: 1rem; }
.clanak-dolje span {align-self: flex-end; margin: 1rem 0 0 2rem; }
.clanak-dolje li { margin-left: 2rem; }
.clanak-dolje li::marker { content: "\27e1\2800"; color: var(--b_font);}
.clanak-gore-slika .slika { width: 100%; height: auto; border: 1px solid #fff; border-radius: 1rem; }
.clanak-gore-slika .slika  { animation-name: pojava; animation-duration: 3s;}
@keyframes pojava 
{
  0%   {transform: scale(0.2); opacity: 0;}
  /*25%  {transform: scale(0.4) rotate(0.25turn);}
  50%  {transform: scale(0.6) rotate(0.5turn);}
  75%  {transform: scale(0.8) rotate(0.75turn);}
  100% {transform: scale(1) rotate(1turn);}*/
  100% {transform: scale(1); opacity:1;}
}
  .kolona-desno {
    position: sticky; /* Ili fixed ako želite da bude fiksirano */
    top: 8vh; /* Razmak od vrha */
    max-width: 40%; /* Postavite širinu */
    margin-left: auto; /* Poravnajte desno */
    margin-right: 0;
    padding: 10px;
}
.kolona-desno .naslov { text-align: center; margin-bottom: 0; padding: 5px; cursor: row-resize;}
.kolona-desno .link-nosi { display: flex; padding: 0 1rem; border: 1px solid var(--b_font); border-radius: 1rem; }
.kolona-desno .link-nosi:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); }
.kolona-desno .link-nosi .link a { text-decoration: none; font-size: 1rem;  }
.kolona-desno .link-nosi .link a:hover { text-decoration: none; font-size: 1rem;  } 

.toggle-menu { display: none; }
    /* Sakrij modal po defaultu */
.kolona-desno-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Poluprozirna pozadina */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* Sadržaj modala */
.kolona-desno-modal .modal-content {
  background-color: #fff;
  font-size: .75rem;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  padding-top: 2rem;
}

/* Prikaz modala kada je aktivan */
.kolona-desno-modal.active { display: flex; }

/* Dugme za zatvaranje */
.kolona-desno-modal .close-btn {
  position: absolute;
  top: 1px;
  right: 1px;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;

}

@media (max-width: 800px) {
  .toggle-menu {
    display: block;
    position: fixed;
    top: 6vh; /* Visina navigacije */
    left: 3%; /* Razmak od leve ivice */
    z-index: 9;
    border: 1px solid var(--b_font); border-radius: 1rem;
    background-color: #fff;
    color: var(--b_font);
    padding: 2px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 94%;
  }
}

/*---------------------------------------------------------------------
Testimonial
-----------------------------------------------------------------------*/
#reference { max-width: 1100px; margin: auto; display: flex; flex-direction: column; height: 88vh; justify-content: space-between;}
#svjedocenja { margin: 1rem; text-align: center; display: flex; flex-grow: 1; flex-direction: column;}
#svjedocenja h3 { margin: 3rem; }
.testimonial-box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 45px; text-align: center; border-bottom: 5px solid var(--b_font); background: #f6f6f6; }
.testimonial-box { display: flex; width: 100%; }
.testimonial-img { position: relative; margin: 0 auto; text-align: right; margin-bottom: 1rem; }
.testimonial-img img { height: 98px; width: 98px; margin: 0 auto; }
.testimonial-info p { color: #a2a4ad; margin-top: 2rem;}
        .carousel-inner { height: 50vh; width: 100%; }
        .carousel-inner>.item { flex-direction: column; height: 90%; width: 100%; margin: 3% 0; padding: 5% 10%; }
        .carousel-control.right,
        .carousel-control.left { background-image: none; color: #87cefa; }
        .carousel-indicators li { border-color: #87cefa;}
        .carousel-indicators li.active { background-color: #87cefa; }
        .carousel-bar { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; margin-left: auto; margin-right: auto; }
        .carousel-bar .carousel-control { position: static; display: flex; flex-basis: content; justify-content: center; color: #87cefa; font-size: 24px; }
        .carousel-bar .carousel-indicators { position: static; margin: 0 10px; display: flex; flex-shrink: 1; align-items: center; justify-content: center; flex-basis: content; }
        .carousel-bar .carousel-indicators li { margin: 0 4px; }
        .carousel-control .glyphicon-chevron-left,
        .carousel-control .glyphicon-chevron-right,
        .carousel-control .icon-next,
        .carousel-control .icon-prev { position: static; }

@media (max-width: 800px) {
  .carousel-bar { margin-top: 0; }
}
/*---------------------------------------------------------------------
Traka
----------------------------------------------------------------------*/
.traka
{
    position: relative;
    /*position: absolute;
    bottom: 0;*/
    display: flex;
    width: 90%;
    max-width: 1100px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.traka div
{
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
    animation-delay: calc(var(--t) * -1);
}

.traka div:nth-child(2)
{
    animation: animate2 var(--t) linear infinite;
    animation-delay: calc(var(--t) / -2);
}

@keyframes animate
{
    0%
    {
        transform: translateX(100%);
    }
    100%
    {
        transform: translateX(-100%);
    }    
}

@keyframes animate2
{
    0%
    {
        transform: translateX(0);
    }
    100%{
        transform: translateX(-200%);
    }
}

.traka div span
{
    display: inline-flex;
    margin: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: #fff;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    transition: 0.5s;
}

.traka div span:hover
{
    background: #4caf50;
    cursor: pointer;
}

.imgbx img
{
    max-width: 200px;
    transform:scale(0.75);
    /*filter: grayscale(1);*/
}

.imgbx img:hover
{
    cursor: pointer;
    /*filter: grayscale(0);*/
}

@media screen and (max-width:1300px) {
  .imgbx img 
  {
    max-width: 150px;
    transform: scale(0.7);
  }

  .testimonial-box { flex-grow: 1; padding: 25px; }
  #svjedocenja h3 { margin: 2rem; }
  #reference { height: 82vh;}
}
/* --------------------------------------------------------------------
O nama
---------------------------------------------------------------------*/
#onama .tim { text-align: center; position: relative; height: 40px;}
#onama .tim img { position:absolute;right: var(--poz); bottom: 0; z-index: 2; width: 76px; }
#onama .tim img:hover { transform: scale(1.1); }
#onama .tim span { display:none; position:absolute; right:0; top:100%; /*transform:translateX(-50%);*/background:#222; color:#fff; padding:4px 10px; border-radius:6px; font-size:14px; margin-top:6px; z-index:10; }
#onama .razdjelnik { padding: 2px 15px; text-align: center; }
#onama .razdjelnik img { height: 12px; }
#onama .klikni-hint { width: 30%; animation: fadeout 1s linear 4s forwards; }
  @keyframes fadeout {
    to { opacity: 0; visibility: hidden; }
  }
/*
#imgModal { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.7); z-index:9999; justify-content:center; align-items:center;}
*/
#imgModal { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); z-index: 9999; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 1s ease; }
#imgModal.active { opacity: 1; visibility: visible; }
#closeModal { position:absolute; top:20px; right:40px; color:#fff; font-size:40px; cursor:pointer; }
#modalImg { width:60vw; height:60vh; object-fit:contain; display:block; margin:auto; }
  @media (max-width: 800px) {
    #imgModal img {
      width: 90vw !important;
      height: auto !important;
      max-width: 90vw !important;
      max-height: 80vh !important;
    }
    .spusti-onama { margin-top: 13vh; }
    #onama .klikni-hint { width: 60%; }
  }

/* --------------------------------------------------------------------
Kontakt 
---------------------------------------------------------------------*/
#kontakt { display: flex; flex-direction: column; height: 92vh; }
#kontakt p {margin-bottom: 0;}
#kontakt h3 { margin-bottom: 0 2rem; }
#kontakt .kontakt-naslov { display: flex; }
#kontakt .kontakt-naslov .lijevo { display: flex; flex-direction: column; padding-right: 2rem; }
#kontakt .kontakt-naslov .desno {  display: flex; flex:1; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 600;}
#kontakt .kontakt-naslov .desno span { text-align: center; padding: .5rem 1rem; background-color: #2d2d30; color: #fff; border-radius: .5rem; }
#kontakt .kontakt-naslov .desno span:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); }

.desno-flip-card { background-color: transparent; width: 400px; height: 100px; perspective: 1000px; }
.desno-flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
.desno-flip-card:hover .desno-flip-card-inner,
.desno-flip-card.flipped .desno-flip-card-inner { transform: rotateY(180deg); }
.desno-flip-card-front, .desno-flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; }
.desno-flip-card-front { background-color: white; color: white; }
.desno-flip-card-front span { width: 100%; font-size: 14px; font-weight: bold; text-align: center; padding: 10px; background-color: black; border-radius: 8px; }
.desno-flip-card-back { background-color: white; color: white; transform: rotateY(180deg); }
/*-----------------------------------------------------------------------
slideshow
------------------------------------------------------------------------*/
.mySlides {width: 100%; display: none;}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.prikaziInOut {
  -webkit-animation-name:fadeinout;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function:ease-in-out;
  animation-name: fadeinout;
  animation-duration: 8s;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100%{ opacity: .2; animation-fill-mode: forwards; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100%{ opacity: .2; animation-fill-mode: forwards; }
}

/*---------------------------------------------------------------------  
          koncept
---------------------------------------------------------------------*/
.vidi-na-oba {text-align: right; padding-bottom: 1rem; cursor: pointer;}
.vidi-na-malom {display: none; text-align: right; padding-bottom: 1rem; cursor: pointer;}
.vidi-na-malom-br {display: none; padding-bottom: 0; font-size: 2px;}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .kontakt-naslov { flex-direction: column-reverse; }
  .kontakt-naslov .lijevo,
  .kontakt-naslov .desno { flex: 100% ; }
  .kontakt-naslov .desno span { font-size: 1rem; margin: 1rem 0;}
  #kontakt { height: 89vh; }
  #kontakt p { font-size: .8rem; }
  .container-fluid {
    padding: 0;
  }
  .vidi-na-malom, .vidi-na-malom-br {
    display: block;
  }

  .glavni-panel .panel {
    flex: 100%;
   }
}
 
.plavi-border { border: 2px solid var(--b_font) ;}
.plavi-border:hover {  box-shadow: 5px 0px 40px rgba(0,0,0, .2); }

  /* prikaz na malim ekranima */
@media screen  and (max-width: 600px) {
  .kolona-lijevo { width: 100%; border: none;}
  .kolona-desno  { display: none;}
  .clanak-skloni, .legenda-mob { display: flex; }
  .clanak-gore { flex-direction: column;}
  .clanak-gore-50,
  .clanak-gore-slika { flex: 100%;}
  .clanak-gore-50-naslov { padding: .5rem 0;}
  
}

      @keyframes appear {
        from {
          opacity: 0;
          scale: 0;

        }
        to {
          opacity: 1;
          scale:1;
        }
      }

  /*    @keyframes appear {
        from {
          opacity: 0;
          clip-path: inset(50% 50% 50% 50%);
        }
        to {
          opacity: 1;
          clip-path: inset(0 0 0 0);
        }
      }*/

      .block {
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }

#zamjeniBtn {
    margin: auto;
    margin-bottom: 1.5rem;
    text-align: right;
    cursor: pointer;
    color: #337ab7;
    font-weight: bold;
    
}
/*---------------------------------------------------------------------
                                Loader
-----------------------------------------------------------------------*/
#loading { background-color: rgba(156, 204, 247, 1); height: 100vh; width: 100vw; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px; overflow: hidden !important; right: 0px; z-index: 999999; }
#loading-center { width: 100%; height: 100%; position: relative; }
.loader { width: 3em; height: 3em; margin: auto; left: 0; right: 0; top: 0; bottom: 0; position: absolute; }
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
  50% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
  100% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
}
@keyframes rotate {
  0% { -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
  50% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
  100% { -webkit-transform: rotateX(-37.5deg) rotateY(405deg); transform: rotateX(-37.5deg) rotateY(405deg); }
}
.cube, .cube * { position: absolute; width: 71px; height: 71px; left: 0; right: 0; top: 0; bottom: 0; }
.sides { -webkit-animation: rotate 3s ease infinite; animation: rotate 3s ease infinite; -webkit-animation-delay: .8s; animation-delay: .8s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-37.5deg) rotateY(45deg); transform: rotateX(-37.5deg) rotateY(45deg); }
.cube .sides * { box-sizing: border-box; background: rgba(156, 204, 247, 1); border: 5px solid white; }
.cube .sides .top { -webkit-animation: top-animation 3s ease infinite; animation: top-animation 3s ease infinite; -webkit-animation-delay: 0ms; animation-delay: 0ms; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes top-animation {
  0% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
}
@keyframes top-animation {
  0% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(35px); transform: rotateX(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(90deg) translateZ(90px); transform: rotateX(90deg) translateZ(90px); }
}
.cube .sides .bottom { -webkit-animation: bottom-animation 3s ease infinite; animation: bottom-animation 3s ease infinite; -webkit-animation-delay: 0ms; animation-delay: 0ms; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes bottom-animation {
  0% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
}
@keyframes bottom-animation {
  0% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(35px); transform: rotateX(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateX(-90deg) translateZ(90px); transform: rotateX(-90deg) translateZ(90px); }
}
.cube .sides .front { -webkit-animation: front-animation 3s ease infinite; animation: front-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes front-animation {
  0% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
}
@keyframes front-animation {
  0% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(35px); transform: rotateY(0deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(0deg) translateZ(90px); transform: rotateY(0deg) translateZ(90px); }
}
.cube .sides .back { -webkit-animation: back-animation 3s ease infinite; animation: back-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes back-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
}
@keyframes back-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(35px); transform: rotateY(-180deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-180deg) translateZ(90px); transform: rotateY(-180deg) translateZ(90px); }
}
.cube .sides .left { -webkit-animation: left-animation 3s ease infinite; animation: left-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes left-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
}
@keyframes left-animation {
  0% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(35px); transform: rotateY(-90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(-90deg) translateZ(90px); transform: rotateY(-90deg) translateZ(90px); }
}
.cube .sides .right { -webkit-animation: right-animation 3s ease infinite; animation: right-animation 3s ease infinite; -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@-webkit-keyframes right-animation {
  0% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
}
@keyframes right-animation {
  0% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  20% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  70% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(35px); transform: rotateY(90deg) translateZ(35px); }
  90% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
  100% { opacity: 1; -webkit-transform: rotateY(90deg) translateZ(90px); transform: rotateY(90deg) translateZ(90px); }
}