/*
	definition of animations and elements for shop 2.0
*/


/* button animation */

.bu_normal:hover
{
	animation: button_fade_in .2s forwards;
}
			
@keyframes button_fade_in 
{
	0% 		{ color: var(--co-font-on-accent1); background: var(--co-accent1); }  
	40% 	{ border: 2px solid var(--co-font-on-accent1); color: var(--co-dark); background: var(--co-light); }  
	100% 	{ border: 2px solid var(--co-dark); color: var(--co-dark); background: var(--co-light); }  
}		

/* horizontal & vertical tab */

@media screen and (orientation: landscape) ,  screen and (min-width: 981px)
{

	.tab_hor .header
	{
		display: flex; flex-wrap: none; padding: 0px; margin: 0px;	justify-content: center; align-items: center; width 100%; 
	}

	.tab_hor .header .active 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-accent1); 
		border-bottom: 2px solid var(--co-accent1);
		padding: 8px 10px 4px 10px;
		animation: hor_gradient_in .5s;
		flex: 1 0 auto;
	}

	.tab_hor .header .active .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-font-on-accent2); 
		background: var(--co-accent2);
	}

	.tab_hor .header .inactive 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-light); 
		border-bottom: 2px solid var(--co-light);
		animation: hor_gradient_out .5s;
		padding: 8px 10px 4px 10px;
		flex: 1 0 auto;
	}

	.tab_hor .header .inactive .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-superlight); 
		background: var(--co-light); 
	}

	.tab_hor .tab_content
	{
		margin-top: 20px; margin-bottom: 10px;
		animation: fade_in .5s;
	}
			
	@keyframes fade_in 
	{
		0% 		{ opacity: 0; }  
		100% 	{ opacity: 1; }
	}		
			
	@keyframes hor_gradient_in 
	{
		0% 		{ border-bottom: 2px solid var(--co-light); color: var(--co-light); }  
		100%	{ border-bottom: 2px solid var(--co-accent1);	color: var(--co-accent1); }
	}		
			
	@keyframes hor_gradient_out 
	{
		0% 		{ border-bottom: 2px solid var(--co-accent1); color: var(--co-accent1); }  
		100%	{ border-bottom: 2px solid var(--co-light); color: var(--co-light); }
	}		


	.tab_ver 
	{
		display: flex;
	}
	
	.tab_ver .header
	{
		flex: 1 0 auto;
		padding: 0px; margin: 0px;	
		width: 200px;
		vertical-align: top;
		margin-right: 20px;
	}

	.tab_ver .header DIV
	{
		border-bottom: 2px solid var(--co-light);
	}

	.tab_ver .header DIV:last-child
	{
		border-bottom: 0px solid var(--co-light);
	}

	.tab_ver .content
	{
		flex: 1 0 auto;
		padding: 0px; margin: 0px;	
		width: 100%;
		vertical-align: top;
		max-width: 900px;
	}

	.tab_ver .header .active 
	{
		text-transform: uppercase; font-size: 18px; text-align: left; font-weight: bold; cursor: pointer; 
		color: var(--co-accent1); 
		padding: 15px 0px 15px 0px;
		animation: ver_gradient_in .5s;
	}

	.tab_ver .header .active .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-font-on-accent2); 
		background: var(--co-accent2); 
		
		class="bg_accent1 fn_on_accent1"
	}

	.tab_ver .header .inactive 
	{
		text-transform: uppercase; font-size: 18px; text-align: left; font-weight: bold; cursor: pointer; 
		color: var(--co-light); 
		animation: ver_gradient_out .5s;
		padding: 15px 0px 15px 0px;
	}

	.tab_ver .header .inactive .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-superlight); 
		background: var(--co-light); 
		
		class="bg_accent1 fn_on_accent1"
	}

	.tab_ver .tab_content
	{
		animation: fade_in .5s;
	}
			
	@keyframes fade_in 
	{
		0% 		{ opacity: 0; }  
		100% 	{ opacity: 1; }
	}		
			
	@keyframes ver_gradient_in 
	{
		0% 		{ color: var(--co-light); }  
		100%	{ color: var(--co-accent1); }
	}		
			
	@keyframes ver_gradient_out 
	{
		0% 		{ color: var(--co-accent1); }  
		100%	{ color: var(--co-light); }
	}

/* pic-link */

	.piclink-figure 
	{
		width: 300px; 
		height: 300px; 
		overflow: hidden; 
		position: relative;
	}
	
	.piclink-figure img 
	{
		width: 100%;
		filter: grayscale(100%);
		transition: all .2s ease;
	}
			
	.piclink-caption 
	{
		position: absolute;
		overflow: hidden;
		left: 0;
		bottom: 27px;
		width: 60%;
		min-width: 250px;
		margin-left: -25px;
		padding: 10px 20px 15px 50px;
		transition: all .2s ease;
		z-index: 1;
		height: 60px; 
		color: #ffffff; 
		font-size: 16px;
		line-height: 20px;
		text-align: left;
	}
	
	.piclink-caption::before 
	{
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(17, 17, 17, 0.5);
		transform: skew(10deg);
		transform-origin: 50% 100%;
		z-index: -1;
	}
	
	.piclink-figure:hover .piclink-caption 
	{
		left: 20px;
	}
	
	.piclink-figure:hover img, .piclink-figure:hover img:hover 
	{
		filter: none;
	}

/* infocard */

	.infocard 
	{
		position: relative;
		width: 270px;
		margin-top: 100px;
	}

	.infocard svg path
	{
		fill: var(--co-superlight);
	}

	.infocard .infocard-content 
	{
		background-color: var(--co-superlight);
		width: 270px; 
		min-height: 120px; 
		padding: 12px; 
		position: relative; 
		top: -4px;
	}

	.infocard .infocard-image 
	{
		position: absolute;
		border-radius: 50%;
		width: 120px;
		height: 120px;
		border: 4px solid var(--co-accent1);
		left: 75px;
		top: -80px;
		transition: all .4s ease;
		cursor: pointer;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	}
	
	.infocard .infocard-image SVG 
	{
		width: 240px;
		height: 70px; 
	}
	
	.infocard:hover .infocard-image , .infocard .infocard-image:hover 
	{
		border: 4px solid var(--co-top-menu-border);
		top: -95px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
	}

/* infocard-short */

	.infocard-short 
	{
		max-width: 270px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.17);
	}
	
	.infocard-short-figure 
	{
		width: 270px; 
		height: 248px; 
		display: block;
		overflow: hidden;
	}
	
	.infocard-short-figure img 
	{
		width: 100%;
		transition: all .3s ease;
	}
	
	.infocard-short-caption 
	{
		position: relative;
		padding: 10px 15px 10px;
		background: #ffffff;
		z-index: 1;
		transition: all .3s ease-in-out;
	}
	
	.infocard-short-name 
	{
		position: relative;
		font-weight: 400;
	}
	
	.infocard-short-status 
	{
		transition: all .3s ease-in-out;
	}
	
	.infocard-short-arrow 
	{
		position: absolute;
		text-align: center;
		top: -10px;
		left: 50%;
		width: 43px;
		height: 43px;
		border-radius: 50%;
		color: #756aee;
		background: #ffffff;
		transform: translate3d(-50%, 0, 0);
		transition: all .3s ease-in-out;
		z-index: -1;
	}
	
	.infocard-short-arrow::before 
	{
		display: inline-block;
		content: '\f106';
		font-size: 18px;
		line-height: 27px;
		font-family: "FontAwesome";
		transform: none;
		transition: transform .3s ease;
	}
	
	.infocard-short:hover .infocard-short-caption, .infocard-short-caption:hover 
	{
		background-color: var(--co-accent1);
	}
	
	.infocard-short:hover .infocard-short-caption *, .infocard-short-caption:hover * 
	{
		color: var(--co-font-on-accent1);
	}
	
	.infocard-short:hover .infocard-short-caption .infocard-short-arrow, .infocard-short-caption:hover .infocard-short-arrow 
	{
		color: var(--co-font-on-accent1);
		background: var(--co-accent1);
		transform: translate3d(-50%, 0, 0);
		transition: all .3s ease-in-out;
		z-index: -1;
	}
	
	.infocard-short:hover .infocard-short-caption .infocard-short-arrow:before, .infocard-short-caption:hover .infocard-short-arrow:before 
	{
		transform: rotate(180deg);
		transition: all .3s ease-in-out;
		z-index: -1;
	}

}

@media screen and (orientation: portrait) and (max-width: 980px)
{
	.tab_hor 
	{
		width: 680px;
		max-width: 680px;
	}

	.tab_hor .header
	{
		display: flex; flex-wrap: none; padding: 0px; margin: 0px;	justify-content: center; align-items: center; width 680px; 
	}

	.tab_hor .header .active 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-accent1); 
		border-bottom: 2px solid var(--co-accent1);
		border-top: 2px solid var(--co-accent1);
		padding: 5px 10px 5px 10px;
		animation: hor_gradient_in .5s;
		flex: 0 0 auto;
	}
	
	.tab_hor .header .active .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-font-on-accent2); 
		background: var(--co-accent2);
	}

	.tab_hor .header .inactive 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-light); 
		border-bottom: 2px solid var(--co-light);
		border-top: 2px solid var(--co-light);
		animation: hor_gradient_out .5s;
		padding: 5px 10px 5px 10px;
		flex: 0 0 auto;
	}

	.tab_hor .header .inactive .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-superlight); 
		background: var(--co-light); 
	}

	.tab_hor .tab_content
	{
		width: 680px;
		margin-top: 20px; margin-bottom: 10px;
		animation: fade_in .5s;
	}
			
	@keyframes fade_in 
	{
		0% 		{ opacity: 0; }  
		100% 	{ opacity: 1; }
	}		
			
	@keyframes hor_gradient_in 
	{
		0% 		{ border-bottom: 2px solid var(--co-light); border-top: 2px solid var(--co-light); color: var(--co-light); }  
		100%	{ border-bottom: 2px solid var(--co-accent1); border-top: 2px solid var(--co-accent1); color: var(--co-accent1); }
	}		
			
	@keyframes hor_gradient_out 
	{
		0% 		{ border-bottom: 2px solid var(--co-accent1); border-top: 2px solid var(--co-accent1); color: var(--co-accent1); }  
		100%	{ border-bottom: 2px solid var(--co-light); border-top: 2px solid var(--co-light); color: var(--co-light); }
	}		

	.tab_ver 
	{
		width: 680px;
		max-width: 680px;
	}

	.tab_ver .header
	{
		display: flex; flex-wrap: none; padding: 0px; margin: 0px;	justify-content: center; align-items: center; width 680px; 
	}

	.tab_ver .header .active 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-accent1); 
		border-bottom: 2px solid var(--co-accent1);
		border-top: 2px solid var(--co-accent1);
		padding: 5px 10px 5px 10px;
		animation: ver_gradient_in .5s;
		flex: 0 0 auto;
	}
	
	.tab_ver .header .active .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-font-on-accent2); 
		background: var(--co-accent2); 
	}

	.tab_ver .header .inactive 
	{
		text-transform: uppercase; font-size: 18px; text-align: center; font-weight: bold; cursor: pointer; 
		color: var(--co-light); 
		border-bottom: 2px solid var(--co-light);
		border-top: 2px solid var(--co-light);
		animation: ver_gradient_out .5s;
		padding: 5px 10px 5px 10px;
		flex: 0 0 auto;
	}

	.tab_ver .header .inactive .counter
	{
		font-size: 12px; 
		position: relative; 
		left: -5px; top: -10px; 
		padding-left: 6px; 
		padding-right: 6px; 
		border-radius: 6px;
		color: var(--co-superlight); 
		background: var(--co-light); 
	}

	.tab_ver .tab_content
	{
		width: 680px;
		margin-top: 20px; 
		margin-bottom: 10px;
		animation: fade_in .5s;
	}
			
	@keyframes fade_in 
	{
		0% 		{ opacity: 0; }  
		100% 	{ opacity: 1; }
	}		
								
	@keyframes ver_gradient_in 
	{
		0% 		{ border-bottom: 2px solid var(--co-light); border-top: 2px solid var(--co-light); color: var(--co-light); }  
		100%	{ border-bottom: 2px solid var(--co-accent1); border-top: 2px solid var(--co-accent1); color: var(--co-accent1); }
	}		
			
	@keyframes ver_gradient_out 
	{
		0% 		{ border-bottom: 2px solid var(--co-accent1); border-top: 2px solid var(--co-accent1); color: var(--co-accent1); }  
		100%	{ border-bottom: 2px solid var(--co-light); border-top: 2px solid var(--co-light); color: var(--co-light); }
	}		

/* pic-link */

	.piclink-figure 
	{
		width: 400px; 
		height: 400px; 
		overflow: hidden; 
		position: relative;
	}

	.piclink-figure img 
	{
		width: 100%;
		filter: grayscale(100%);
		transition: all .2s ease;
	}
			
	.piclink-caption 
	{
		position: absolute;
		overflow: hidden;
		left: 0;
		bottom: 47px;
		width: 60%;
		min-width: 350px;
		margin-left: -25px;
		padding: 15px 20px 15px 50px;
		transition: all .2s ease;
		z-index: 1;
		height: 80px; 
		color: #ffffff; 
		font-size: 22px;
		line-height: 26px;
		text-align: left;
	}
	
	.piclink-caption::before 
	{
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(17, 17, 17, 0.5);
		transform: skew(10deg);
		transform-origin: 50% 100%;
		z-index: -1;
	}
	
	.piclink-figure:hover .piclink-caption 
	{
		left: 20px;
	}
	
	.piclink-figure:hover img, .piclink-figure:hover img:hover 
	{
		filter: none;
	}

/* infocard */

	.infocard 
	{
		position: relative;
		width: 320px;
		margin-top: 100px;
	}

	.infocard svg path 
	{
		fill: var(--co-superlight);
	}

	.infocard .infocard-content 
	{
		background-color: var(--co-superlight);
		width: 320px; 
		min-height: 130px; 
		padding: 0px; 
		position: relative; 
		top: -6px;
	}

	.infocard .infocard-image 
	{
		position: absolute;
		border-radius: 50%;
		width: 144px;
		height: 144px;
		border: 4px solid var(--co-accent1);
		left: 88px;
		top: -98px;
		transition: all .4s ease;
		cursor: pointer;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	}
	
	.infocard .infocard-image SVG 
	{
		width: 320px;
		height: 100px; 
	}
	
	.infocard:hover .infocard-image , .infocard .infocard-image:hover 
	{
		border: 4px solid var(--co-top-menu-border);
		top: -110px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
	}

	.infocard H1, .infocard .fn_h1
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 40px;
		font-weight: 900;
		line-height: 42px;
		letter-spacing: 0em;
	}

	.infocard H2, .infocard .fn_h2
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 24px;
		font-weight: 700;
		line-height: 23px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	.infocard H3, .infocard .fn_h3
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 20px;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	.infocard P, .infocard DIV
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0em;
		text-align: left;
		
	}

/* infocard-short */

	.infocard-short 
	{
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.17);
	}
	
	.infocard-short-figure 
	{
		width: 320px; 
		height: 288px; 
		display: block;
		overflow: hidden;
	}
	
	.infocard-short-figure img 
	{
		width: 100%;
		transition: all .3s ease;
	}
	
	.infocard-short-caption 
	{
		position: relative;
		padding: 10px 15px 10px;
		background: #ffffff;
		z-index: 1;
		transition: all .3s ease-in-out;
	}
	
	.infocard-short-name 
	{
		position: relative;
		font-weight: 400;
	}
	
	.infocard-short-status 
	{
		transition: all .3s ease-in-out;
	}
	
	.infocard-short-arrow 
	{
		position: absolute;
		text-align: center;
		top: -10px;
		left: 50%;
		width: 43px;
		height: 43px;
		border-radius: 50%;
		color: #756aee;
		background: #ffffff;
		transform: translate3d(-50%, 0, 0);
		transition: all .3s ease-in-out;
		z-index: -1;
	}
	
	.infocard-short-arrow::before 
	{
		display: inline-block;
		position: relative;
		content: '\f106';
		font-size: 18px;
		line-height: 27px;
		left: +13px;
		font-family: "FontAwesome";
		transform: none;
		transition: transform .3s ease;
	}
	
	.infocard-short:hover .infocard-short-caption, .infocard-short-caption:hover 
	{
		background-color: var(--co-accent1);
	}
	
	.infocard-short:hover .infocard-short-caption *, .infocard-short-caption:hover * 
	{
		color: var(--co-font-on-accent1);
	}
	
	.infocard-short:hover .infocard-short-caption .infocard-short-arrow, .infocard-short-caption:hover .infocard-short-arrow {
		color: var(--co-font-on-accent1);
		background: var(--co-accent1);
		transform: translate3d(-50%, 0, 0);
		transition: all .3s ease-in-out;
		z-index: -1;
	}
	
	.infocard-short:hover .infocard-short-caption .infocard-short-arrow:before, .infocard-short-caption:hover .infocard-short-arrow:before {
		transform: rotate(180deg);
		transition: all .3s ease-in-out;
		z-index: -1;
	}

	.infocard-short .infocard-short-caption H1, .infocard-short .infocard-short-caption .fn_h1
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 40px;
		font-weight: 900;
		line-height: 42px;
		letter-spacing: 0em;
	}

	.infocard-short .infocard-short-caption H2, .infocard-short .infocard-short-caption .fn_h2
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 24px;
		font-weight: 700;
		line-height: 23px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	.infocard-short .infocard-short-caption H3, .infocard-short .infocard-short-caption .fn_h3
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 18px;
		font-weight: 700;
		line-height: 16px;
		letter-spacing: 0em;
		text-transform: uppercase;
	}

	.infocard-short .infocard-short-caption P, .infocard-short .infocard-short-caption DIV
	{
		font-family: var(--fn-default),Arial,sans-serif;
		font-size: 17px;
		font-weight: 400;
		line-height: 16px;
		letter-spacing: 0em;
		text-align: left;
		
	}

}