/* CSS Document */

.rama{
border: 20px solid #999;
border-image: url("../poze/frame.png") 130 repeat;
width: auto;
height: auto;
padding: 0px;
!margin-bottom: 20px;
}

#stg img:hover{
transition: all 1s ease;
transform: translateX(0px) rotate(-3deg);
}

#dr img:hover{
transition: all 1s ease;
transform: translateX(0px) rotate(3deg);
}

p{text-indent: 50px;}
p:first-letter{font-size: 20px;}

.hr { 
    !display: block;
    !margin-top: 5em;
    !margin-bottom: 5em;
    !margin-left: auto;
    !margin-right: auto;
    !border-style: inset;
    !border-width: 1px;
} 

.container h4{border-bottom: 1px solid #a2a9b1; font-weight: bold;}

.poza img{
border: 1px solid #c8ccd1; 
padding: 5px;
!padding-bottom: 20px;
margin: auto auto;
vertical-align: middle;
}

.navbar-inverse .navbar-brand {!color:blue;}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: blue;
  }
  
  
    
  .slider{
  overflow: hidden;
  height:70%;
  !border-bottom: 3px solid purple;
  !border-top: 3px solid purple;
  !margin-bottom: 50px;
  }
  
  .slider figure div{
  width:20%;
  float:left;
  }
  
  .slider figure img{
  width:90%;
  !float:left;
  }
  
  .slider figure{
  position:relative;
  width:500%;
  margin:0;
  left:0;
  animation: 50s slidy infinite;
  }
  
  @keyframes slidy{
  0%{
  Left:0%;}
  10%{
  left:0%;}
  12%{
  left:-100%;}
  22%{
  left:-100%;}
  24%{
  left:-200%;}
  34%{
  left:-200%;}
  36%{
  left:-300%;}
  46%{
  left:-300%;}
  48%{
  left:-400%;}
  58%{
  left:-400%;}
  60%{
  left:-300%;}
  70%{
  left:-300%;}
  72%{
  left:-200%;}
  82%{
  left:-200%;}
  84%{
  left:-100%;}
  94%{
  left:-100%;}
  96%{
  left:0%;}
  }