@keyframes shake{
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 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(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@-moz-keyframes shake{
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}

@-webkit-keyframes shake {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

.shake{
display:inline-block;
}

.shake:hover,
.shake:focus{
animation-name: shake;
animation-duration: 0.8s;
transform-origin:50% 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;

-moz-animation-name: shake;
-moz-animation-duration: 0.8s;
-moz-transform-origin:50% 50%;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;

-webkit-animation-name: shake;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}








a.trigger{
	position: absolute;
	background:#FFD64E url(https://slikovnice.info/slike/ostale.png) top left no-repeat;
	text-decoration: none;
	font-size: 16px;
	letter-spacing:-1px;
	font-family: verdana, helvetica, arial, sans-serif;
	color:#fff;
	font-weight: bold;
        width:90px;
        height:90px;
	z-index:205;
}
a.trigger.left {
	left: 0;
	border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
a.trigger.right {
	right: 0;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
}
a.active.trigger {
	background:#FFD64E url(https://slikovnice.info/slike/ostale.png) top left no-repeat;
}
.panel {
	color:#CCC;
	position: absolute;
	display: none;
	background: #FFD64E;
	width: 590px;
	height: auto;
	z-index:200;
}
.panel.left {
	left: 0;
	padding: 20px 30px 20px 100px;
	border-top-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.panel.right {
	right: 0;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3)
}
.panel p {
	font-size:11px;
}

.superNotice.orange .superNotice-content {height: 100px !important;}

.view {
   width: 280px;
   height: 205px;
   float: left;
   border: 10px solid #fff;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff;
}
.view .mask,.view .content {
   width: 263px;
   height: 375px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 20;
   background: #fff;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   color: #ff0000;
   text-align: center;
   position: relative;
   font-size: 16px;
   padding: 10px;
   margin: 20px 0 0 0;
   height:70px;
   font-family:'Peralta'
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #555555;
   padding: 10px 20px 20px;
   text-align: center;
   height:165px;
   line-height:20px;
}
.view a.info {
background: #ffa443; /* old browsers */
background: -moz-linear-gradient(top, #ffa443 0%, #ff7602 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa443), color-stop(100%,#ff7602)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa443', endColorstr='#ff7602',GradientType=0 ); /* ie */
width: 92%;
height: 35px;
font: bold 12px/35px Arial;
display: block;
margin: 0 0 0 10px;
padding: 0 15px;
text-align: center;
color: #fff !important;
text-decoration: none;
cursor: pointer;
border: 1px solid #ffa443;
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.view a.info: hover {

}

.view-s {
   width: 263px;
   height: 200px;
   float: left;
   border: 10px solid #fff;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff;
}
.view-s .mask,.view-s .content {
   width: 263px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 20;
   background: #fff;
}
.view-s img {
   display: block;
   position: relative;
}
.view-s h2 {
   color: #ff0000;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   height:60px;
   font-family:'Peralta';
}
.view-s p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #555555;
   height:50px;
   text-align: center;
}
.view-s a.info {
background: #ffa443; /* old browsers */
background: -moz-linear-gradient(top, #ffa443 0%, #ff7602 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa443), color-stop(100%,#ff7602)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa443', endColorstr='#ff7602',GradientType=0 ); /* ie */
width: 82%;
height: 35px;
font: bold 12px/35px Arial;
display: block;
margin: 0 0 0 25px;
padding: 0 15px;
text-align: center;
color: #fff !important;
text-decoration: none;
cursor: pointer;
border: 1px solid #ffa443;
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.view-s a.info: hover {

}

.view-seventh img {
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-seventh .mask {
   background-color: #fff;
   -webkit-transform: rotate(0deg) scale(1);
   -moz-transform: rotate(0deg) scale(1);
   -o-transform: rotate(0deg) scale(1);
   -ms-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
   cursor:pointer
}
.view-seventh h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh p {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-seventh:hover img {
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   -o-transform: rotate(720deg) scale(0);
   -ms-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-seventh:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px) rotate(0deg);
   -moz-transform: translateY(0px) rotate(0deg);
   -o-transform: translateY(0px) rotate(0deg);
   -ms-transform: translateY(0px) rotate(0deg);
   transform: translateY(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-seventh:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.7s;
   -moz-transition-delay: 0.7s;
   -o-transition-delay: 0.7s;
   -ms-transition-delay: 0.7s;
   transition-delay: 0.7s;
}
.view-seventh:hover p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.6s;
   -moz-transition-delay: 0.6s;
   -o-transition-delay: 0.6s;
   -ms-transition-delay: 0.6s;
   transition-delay: 0.6s;
}
.view-seventh:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

.view-fourth img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}                                
.view-fourth:hover img    {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}                      
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

.mat1{float:left;width:263px;margin:0 10px 10px 0; text-align:center;background:none;}
.mat2{float:left;width:263px;margin:0 0 10px 0; text-align:center;background:none;}
.mat-opis {text-align:left; height:50px; margin-top:5px; font: 14px/16px 'Peralta'; color:#E35535; overflow:hidden;}



.cardBack {position:static}
#game-box-in {position:static}
.memory {position:static}