/*ZUPANIJA*/
/*tjelo-default*/
body{
 
  background-image:url(slike/staklo.jpg); 
  font-family:verdana; 
  
}
/***********************************************/
/*header tablica sa slikama i logom */
table.tablica{
   background-image:url(slike/zeleno.jpg); 
   width:100%;
   border:#ffffff solid 2px; 
   border-radius:5px;
   -webkit-box-shadow: 5px 5px 15px 5px #000000; 
   box-shadow: 5px 5px 15px 5px #000000;
}
/*kutija za elemente-logo,naslov u header tablici */
.td1{
  border:#FFFFFF solid 2px;
  border-radius:5px;
  -webkit-box-shadow: 5px 5px 15px 5px #000000; 
  box-shadow: 5px 5px 15px 5px #000000;
}
/*naslov stranice sa outline*/
h1{
color: #FFFFFF;
text-shadow: 2px 2px 0 #398AA4, 2px -2px 0 #398AA4, -2px 2px 0 #398AA4, -2px -2px 0 #398AA4, 2px 0px 0 #398AA4, 0px 2px 0 #398AA4, -2px 0px 0 #398AA4, 0px -2px 0 #398AA4;
text-align:center; 
border:#ffffff solid 2px;
border-radius:5px; 
-webkit-box-shadow: 5px 5px 15px 5px #000000; 
box-shadow: 5px 5px 15px 5px #000000;
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #398AA4 50%, #555555 100%);
background: -webkit-linear-gradient(top, #555555 0%, #398AA4 50%, #555555 100%);
background: linear-gradient(to bottom, #555555 0%, #398AA4 50%, #555555 100%);
}
h1:hover{
   
  transition: 0.8s;
  text-shadow: 2px 2px 0 #555555, 2px -2px 0 #555555, -2px 2px 0 #555555, -2px -2px 0 #555555, 2px 0px 0 #555555, 0px 2px 0 #555555, -2px 0px 0 #555555, 0px -2px 0 #555555;
  
}
/***********************************************/
/*slike*/
img{
  width:120px;
  border:#FFFFFF solid 2px;
  border-radius:5px;
  -webkit-box-shadow: 5px 5px 15px 5px #000000; 
  box-shadow: 5px 5px 15px 5px #000000;
}

img.druga{
 float:right;
 background-color:#398AA4; 
}
img.druga:hover{
  background-color:#555555; 
  transition: 0.8s;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

/* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
img.prva{
  float:left;
  background-color:#398AA4;
}
img.prva:hover{
  background-color:#555555; 
  transition: 0.8s;
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

/* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
/***********************************************/

/*Gumb za link-abeceda*/
a.abeceda{
  background-color:#398AA4; 
  color:white;
  text-decoration:none;
  margin:10px 5px 10px 0px;
  padding:3px;
  border:#ffffff solid 2px;
  border-radius:3px;
  -webkit-box-shadow: 5px 5px 15px 5px #000000; 
  box-shadow: 5px 5px 15px 5px #000000;
  display:inline-block; 
   
}

a.abeceda:hover{
    color:#555555;
    background-color:#ffffff;
    border:#398AA4 solid 2px;
    transition: 0.8s;
    
  }
/***********************************************/  
/*Glavna Tablica-centralna*/
/*Glavna Tablica-centralna*/  

table.kreso {
  border: 2px solid #000000;
  background-color: #555555;
  width: 50%;
  text-align: left;
  border-collapse: collapse;
  -webkit-box-shadow: 5px 5px 15px 10px #000000; 
  box-shadow: 5px 5px 15px 10px #000000;
  border-radius: 20px;
  overflow: hidden;
  }
table.kreso td, table.kreso th {
  border: 1px solid #555555;
  padding: 5px 10px;
}
table.kreso tbody td {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
}
table.kreso td:nth-child(even) {
  background: #398AA4;
}
table.kreso thead {
  background: #398AA4;
  border-bottom: 10px solid #398AA4;
}
table.kreso thead th {
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 2px solid #398AA4;
}
table.kreso thead th:first-child {
  border-left: none;
}
table.kreso td:nth-child(even):hover {
background:white;
color:#555555;
transition: 0.8s;
}
table.kreso td.efekt:hover{
  color:#555555;
  transition: 0.8s;
  border-color:#666666; 
  background-color:white;
  
  
}
/*završetak tablice*/
/*završetak tablice*/
/***********************************************/

/*iframe od pastebeana*/
.iframe{
  border:#000000 solid 5px;
  -webkit-box-shadow: 5px 5px 15px 5px #000000; 
  box-shadow: 5px 5px 15px 5px #000000;
  border-radius:20px;
  
}
iframe{
   -webkit-box-shadow: 5px 5px 15px 5px #000000; 
  box-shadow: 5px 5px 15px 5px #000000;
  border-radius:20px; 
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
 
}
 @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
/*media query*/
@media (max-width: 600px) {
  table.kreso thead th{
  font-size: 9px; 
  }
  table.kreso tbody td {
  font-size: 9px;
  }
  a.abeceda{
    
  }
  
}
/* Ovo je za shake animaciju slike */
/* Ovo je za shake animaciju slike */
/* Ovo je za shake animaciju slike */
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* Ovo je za shake animaciju slike-Kraj */