/* 
	Veškeré animace na propagační stránce.
	@copyright Copyright (c) 2013-2015 Kukral COMPANY s.r.o.
    Created on : 30.4.2016, 12:15:40
    Author     : Jan Kotalík <jan.kotalik.pro@gmail.com>
*/

/* ANIMACE */
/* zvětšení kostek a jejich margin */
#cube-container .cube{
	animation:/* aplikace dvou animací - rozbalovací animace */
		grow 1s 300ms linear forwards,/* název, trvání, zpoždění začátku, lineárně, jednou*/
		explode 500ms 1500ms linear forwards
		;
}
/* rozbalení kontejneru */
#cube-container{
	animation: containerAnimation 1s 300ms linear forwards;
}

/* hover na kostkách  */
#cube-container .cube{
	-moz-transition: background-size 300ms;
	transition: background-size 300ms;
}
#cube-container .cube:hover{
	background-size: 70px 70px;
}


/* definice roztažení kostky */
@keyframes grow {
	to { width: 90px; height: 90px; }
}
@-webkit-keyframes grow {
	to { width: 90px; height: 90px; }
}
@-moz-keyframes grow {
	to { width: 90px; height: 90px; }
}

/* přidání marginu kostkám*/
@keyframes explode {
	0%   { margin: 0px; }
	100% { margin: 5px; }
}
@-webkit-keyframes explode {
	0%   { margin: 0px; }
	100% { margin: 5px; }
}
@-moz-keyframes explode {
	0%   { margin: 0px; }
	100% { margin: 5px; }
}

/* rotace (od středu) všech kostek*/
@keyframes containerAnimation {
	0%   { transform: rotate(0deg); top: 120px; }
	100% { transform: rotate(360deg); top: 0px;}
}
@-webkit-keyframes containerAnimation {
	0%   { transform: rotate(0deg); top: 120px; }
	100% { transform: rotate(360deg); top: 0px;}
}
@-moz-keyframes containerAnimation {
	0%   { transform: rotate(0deg); top: 120px; }
	100% { transform: rotate(360deg); top: 0px;}
}


/* zvětšení a změnšení kostky v seznamu */
.listContainer .cube{
	position: relative;
	top: 0;
	left: 0;	
}
.listContainer .cube.attentionAnimation{
	animation:
		attentionAnim 600ms 800ms linear;
}
/* zvětšení a zmenšení kostky v seznamu */
@keyframes attentionAnim {
	0% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; }
	50% { width: 110px; height: 110px; top: -10px; left: -10px; background-size: 46px 46px; }
	100% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; } 
}
@-webkit-keyframes attentionAnim {
	0% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; }
	50% { width: 110px; height: 110px; top: -10px; left: -10px; background-size: 46px 46px; }
	100% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; } 
}
@-moz-keyframes attentionAnim {
	0% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; }
	50% { width: 110px; height: 110px; top: -10px; left: -10px; background-size: 46px 46px; }
	100% { width: 90px; height: 90px; top: 0px; left: 0px; background-size: 36px 36px; } 
}