/**
 * shake.css
 * Copyright 2019 Christian Urban <info@maio31.de>
 * Stylesheet: maio31
 * Theme: maio31
 *
 */
 
/***** Icons *****/
div.symbol.big
{
	border-radius: 37px;
	//width: 7.1rem;
	//height: 7.1rem;
	margin: 0 auto 2.8rem auto;
	
	/*NEW*/
	width: 7.5rem;
	height: 7.5rem;
	display: grid;
	grid-template-areas: "symbol";
	/*NEW*/
}

div.symbol.shadow 
{
	box-shadow: 0px 0px 0px 0px rgba(77,77,77,0);
	transition-property: box-shadow;
	transition-duration: 300ms;
	transition-delay: 0s;
}

div.symbol.shadow:hover { box-shadow: 0px 0px 15px 2px rgb(235,235,235); }

div.symbol.c235 { border: .2rem solid rgb(235,235,235); }
div.symbol.c77 { border: .2rem solid rgb(77,77,77); }
div.symbol.overflow { overflow: hidden; }

div.symbol > div 
{ 
	margin: auto;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	
	/*NEW*/
	grid-area: symbol;
	/*NEW*/
}

div.symbol > div.smart_and_phone.c235 { background-image: url(/files/theme_maio31/assets/phone_smartphone_235.png); }
div.symbol > div.phone.c235 { background-image: url(/files/theme_maio31/assets/phone_235.png); }
div.symbol > div.info.c235 { background-image: url(/files/theme_maio31/assets/info_235.png); }
div.symbol > div.falling_d.c235 { background-image: url(/files/theme_maio31/assets/doro_state01_235.png); }
div.symbol > div.skills.c235 { background-image: url(/files/theme_maio31/assets/skills_235.png); }
div.symbol > div.link.c235 { background-image: url(/files/theme_maio31/assets/link_235.png); }
div.symbol > div.shopping_cart.c235 { background-image: url(/files/theme_maio31/assets/cart_inner_235.png); }
div.symbol > div.comment.c77 { background-image: url(/files/theme_maio31/assets/comments_77.png); }

div.symbol > div.smart_and_phone { width: 12.6rem; background-position: 1rem center; }

div.symbol > div.info { width: .8rem; height: 5rem; position: relative; top: 0.25rem; }
div.symbol > div.info > div { background: rgb(235,235,235); border-radius: 3px; }
div.symbol > div.info > div.info_head { width: .8rem; height: .8rem; }
div.symbol > div.info > div.info_corp { width: .8rem; height: 3rem; position: absolute; bottom: 0; }

div.symbol > div.zahnrad { width: 5rem; height: 5rem; position: relative; /* top: 1rem; */ border-radius: 25px; overflow: hidden; }
div.symbol > div.zahnrad > * { position: absolute; background-position: center; background-repeat: no-repeat; }
div.symbol > div.zahnrad > div.zahnrad50 { background-image: url(/files/theme_maio31/assets/zahnrad/zahnrad50.png); width: 5rem; height: 5rem; left: 1rem; top: -1.6rem; }
div.symbol > div.zahnrad > div.zahnrad40 { background-image: url(/files/theme_maio31/assets/zahnrad/zahnrad40.png); width: 4rem; height: 4rem; left: -2.5rem; top: 0.8rem; }
div.symbol > div.zahnrad > div.zahnrad30 { background-image: url(/files/theme_maio31/assets/zahnrad/zahnrad30.png); width: 3rem; height: 3rem; left: 3.6rem; top: 2.8rem; }
/***** Icons *****/

div.mod_article:hover div.info_head,
div.mod_article:hover div.info_corp,
div.mod_article:hover div.falling,
div.mod_article:hover div.slide,
div.mod_article:hover div.zahnrad30, 
div.mod_article:hover div.zahnrad40, 
div.mod_article:hover div.zahnrad50,
div.mod_article:hover div.shopping_cart
{ 
	animation-play-state: running; 
}

@keyframes rotate
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(359deg); }
}

@keyframes info
{
	1% { transform: translate(0, -50px) }
	20%, 100%, 0% { transform: translate(0, 0) }
}

@keyframes infoCorp
{
	1% { transform: translate(0, 0) rotate(90deg) }
	6%, 12% { transform: translate(0, -20px) rotate(90deg) }
	20% { transform: translate(0, 0) rotate(90deg) }
	26%, 100%, 0% { transform: translate(0, 0) rotate(0) }
}

@keyframes falling
{
	1%, 2%, 3%, 4% { transform: translate(-1px, 0) rotate(0) }
	1.5%, 2.5%, 3.5%, 4.5% { transform: translate(1px, 0) rotate(0) }
	5%, 6%, 7% { transform: translate(-2px, 0) rotate(0) }
	5.5%, 6.5%, 7.5% { transform: translate(2px, 0) rotate(0) }
	10%, 80% { transform: translate(0, 17px) rotate(75deg) }
	0%, 90%, 100% { transform: translate(0, 0) rotate(0) }
}

@keyframes slide
{
	10%, 50% { transform: translate(-75px, 0) }
	0%, 60%, 100% { transform: translate(0, 0) }
}

div.zahnrad30 { animation: rotate 3750ms infinite linear reverse; }
div.zahnrad40 { animation: rotate 3750ms infinite linear reverse; }
div.zahnrad50 { animation: rotate 5000ms infinite linear; }
div.zahnrad30, div.zahnrad40, div.zahnrad50 { animation-play-state: paused; }

div.shopping_cart
{
	animation: rotate 3s cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}

div.info_head
{
	animation: info 6s cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}

div.info_corp
{
	animation: infoCorp 6s cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}

div.falling
{
	animation: falling 8s cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}

div.slide
{
	animation: slide 10s cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}








 
@keyframes vibrate 
{
	2%, 90% 					{ transform: translate(0, 0) rotate(-8.6deg) }
	76%, 40% 					{ transform: translate(0, 0) rotate(-7.4deg) }
	42%, 74%					{ transform: translate(0, 0) rotate(-6.2deg) }
	4%, 22%, 38%, 94% 			{ transform: translate(0, 0) rotate(-5.0deg) }
	50%, 52%, 86% 				{ transform: translate(0, 0) rotate(-4.8deg) }
	6%, 62% 					{ transform: translate(0, 0) rotate(-3.6deg) }
	20%, 80%	 				{ transform: translate(0, 0) rotate(-2.4deg) }
	54% 						{ transform: translate(0, 0) rotate(-1.2deg) }
	0% ,100% 					{ transform: translate(0, 0) rotate(0) }
	8%, 44%, 82% 				{ transform: translate(0, 0) rotate(.1.2deg) }
	16%, 64% 					{ transform: translate(0, 0) rotate(2.4deg) }
	10%, 58%, 60%, 78%, 84%  	{ transform: translate(0, 0) rotate(3.6deg) }
	18%, 30%, 32%, 36%, 72% 	{ transform: translate(0, 0) rotate(4.8deg) }
	12%, 24%, 28%, 48% 			{ transform: translate(0, 0) rotate(5.0deg) }
	14%, 34%, 46%, 56%			{ transform: translate(0, 0) rotate(6.2deg) }
	26%, 66%, 68%, 70%, 98% 	{ transform: translate(0, 0) rotate(7.4deg) }
	88%, 92%, 96% 				{ transform: translate(0, 0) rotate(8.6deg) }
}

div.vibrate 
{
	-webkit-animation: vibrate 100000ms cubic-bezier(.36, .07, .19, .97) infinite;
	animation: vibrate 100ms cubic-bezier(.36, .07, .19, .97) infinite;
	animation-play-state: paused;
}