@charset "UTF-8";
/* CSS Document */

.AddWrapper480x480 {
	width: 100%;
	height: auto;
	max-width: 480px;
	margin: auto;
	}

.AddContainer480x480 {
	position: relative;
	padding-bottom: 100%;
	height: 0; 
	overflow: hidden;
	}


.CFBanner480x480 {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	font-family: 'Jost', sans-serif;
	color:#4b4b4a;
	box-sizing: border-box;
}

.CFClickArea {
	display: block;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index: 1000;
}

/* 1. slide logo */

.CFBanner480x480 .CFLogo0 {
	display: block;
	position: absolute;
	top:15%;
	left:0;
	width: 100%;
	height: 40%;
	background: no-repeat center center url(../images/cfmoto-logoH.svg);
	background-size: contain;
}

.CFBanner480x480 .CFLabel0 {
	display: table;
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 45%;
	box-sizing: border-box;
	z-index: 2;
	padding: 1% 5.7% 6% 5.7%;
	box-sizing: border-box;
	color:#FFF;
	font-size: 4.78vw;
	line-height: 5.78vw;
}

.CFBanner480x480 .CFLabel0 .Center {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	width: 100%; 
	height: auto;
	position: static;
}


/* další slide  */

.CFBanner480x480 .CFLogo {
	display: block;
	position: absolute;
	top:10%;
	left:28%;
	width: 44%;
	height: 30%;
	background: no-repeat center center url(../images/cfmoto-logoH.svg);
	background-size: contain;
}

.CFBanner480x480 .CFStamp {
	display: block;
	position: absolute;
	top:10%;
	left:20%;
	width: 60%;
	height: 30%;
	background: no-repeat center center url(../images/cfmoto-stamp.svg);
	background-size: contain;
}

.CFBanner480x480 .CFLabel {
	display: table;
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 50%;
	box-sizing: border-box;
	z-index: 2;
	padding: 1% 5.7% 6% 5.7%;
	box-sizing: border-box;
	color:#FFF;
}

.CFBanner480x480 .CFLabel .Center {
	display: table-cell; 
	vertical-align: middle; 
	text-align: center;
	width: 100%; 
	height: auto;
	position: static;
}

.CFBanner480x480 .CFLabel p {
	margin: 0;
}

.CFBanner480x480 .CFLabel .CFH1 {
	font-weight: 500;
	font-size: 8vw;
	line-height: 9vw;
	margin: 0 0 0 0;
}

.CFBanner480x480 .CFLabel .CFH2 {
	font-weight: 400;
	font-size: 4.78vw;
	line-height: 5.78vw;
	margin: 0 0 2% 0;
}

.CFBanner480x480 .CFLabel .CFPrice {
	font-weight: 400;
	font-size: 3.59vw;
	line-height: 4.59vw;
	margin: 0;
	color: #009ab2;
}


.CFBanner480x480 .CFBlockImg {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: no-repeat center center;
	background-size: cover;
}





.CFBanner480x480 .CFSlide1 {
	animation-name: CFSlide1-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide1-480x480 {
	0%		{opacity:1}
	8%		{opacity:1}
	12%	{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide2 {
	animation-name: CFSlide2-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide2-480x480 {
	0%		{opacity:0}
	8%		{opacity:0}
	12%	{opacity:1}
	19%		{opacity:1}
	23%	{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide3 {
	animation-name: CFSlide3-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide3-480x480 {
	0%		{opacity:0}
	19%		{opacity:0}
	23%		{opacity:1}
	30%		{opacity:1}
	34%		{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide4 {
	background-image: url(../images/cf-foto2.jpg);
	animation-name: CFSlide4-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide4-480x480 {
	0%		{opacity:0}
	30%		{opacity:0}
	34%		{opacity:1}
	41%		{opacity:1}
	45%		{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide5 {
	animation-name: CFSlide5-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide5-480x480 {
	0%		{opacity:0}
	41%		{opacity:0}
	45%	{opacity:1}
	52%		{opacity:1}
	56%	{opacity:0}
	100%	{opacity:0}
}

.CFBanner480x480 .CFSlide6 {
	background-image: url(../images/cf-foto3.jpg);
	animation-name: CFSlide6-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide6-480x480 {
	0%		{opacity:0}
	52%		{opacity:0}
	56%	{opacity:1}
	63%		{opacity:1}
	67%	{opacity:0}
	100%	{opacity:0}
}

.CFBanner480x480 .CFSlide7 {
	animation-name: CFSlide7-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide7-480x480 {
	0%		{opacity:0}
	63%		{opacity:0}
	67%	{opacity:1}
	74%		{opacity:1}
	78%	{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide8 {
	background-image: url(../images/cf-foto4.jpg);
	animation-name: CFSlide8-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide8-480x480 {
	0%		{opacity:0}
	74%		{opacity:0}
	78%	{opacity:1}
	85%		{opacity:1}
	89%	{opacity:0}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide9 {
	animation-name: CFSlide9-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide9-480x480 {
	0%		{opacity:0}
	85%		{opacity:0}
	89%		{opacity:1}
	96%		{opacity:1}
	100%	{opacity:0}
}


.CFBanner480x480 .CFSlide0 {
	animation-name: CFSlide0-480x480;
	animation-duration: 45s;
	animation-iteration-count: infinite;
}

@keyframes CFSlide0-480x480 {
	0%		{opacity:0}
	96%		{opacity:0}
	100%	{opacity:1}
}








	
	



@media (min-width: 480px) {
	
	.CFBanner480x480 .CFLabel0 {
		font-size: 1.8em;
		line-height: 1.3em;
		margin: 0;
		}
		
	.CFBanner480x480 .CFLabel .CFH1 {
		font-size: 3em;
		line-height: 2.1em;
		margin: 0 0 -5% 0;
		}
	
	.CFBanner480x480 .CFLabel .CFH2 {
		font-weight: 400;
		font-size: 1.8em;
		line-height: 1.4em;
		margin: 0 0 2% 0;
		}
	
	.CFBanner480x480 .CFLabel .CFPrice {
		font-size: 1.35em;
		line-height: 1.2em;
		margin: 0;
		}

}