@charset "utf-8";

	body{
		text-align: center;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	body::after{
		content: "";
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0; top: 0;
		z-index: -10;
		background: #000 url(/yugioh/crossduel/images/content-bk.jpg) center center repeat-x ;
		background-size: auto 120%;
	}
	
	
@media screen and (min-width:800px){
	body::-webkit-scrollbar {  display: none;}
}

.relate-btn{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

	
#bg-movie{
    position: absolute;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
	z-index: -1;
	overflow: hidden;
	background: #000;
}
	
	#bg-movie::after{
		content: "";
		background: rgba(0,0,0,.5);
		position: absolute;
		top: 0; left: 0;
		width: 100%; height: 100%;
	}
	
	#bg-movie > iframe{
		position: absolute;
	}



	.section{
		text-align: center;
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
	}
		.section.base-bk{
			
		}
		.section.cross-bk{
			padding: 1em 0 0;
			position: relative;
		}
		.section.cross-bk::before{
			content: "";
			position: absolute;
			width: 100%; height: 100%;
			top:0 ; left: 0;
			background-image: url(/yugioh/crossduel/images/cross-bk.jpg);
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-position: center center;
			background-attachment: fixed;
		}
@media screen and (min-width:1500px){
		.section.cross-bk::before{
			background-size: 100% auto;
			transition: 2s;
		}
}
		.section.base-bk .fp-tableCell , 
		.section.cross-bk .fp-tableCell{
			padding: 0 1.5em;
		}
		.section.black-bk{
			background: #000;
		}

@media screen and (max-width:799px){
		.section.base-bk .fp-tableCell , 
		.section.cross-bk .fp-tableCell{
			padding: 0;
		}
		.section.cross-bk{
		}
		.section.base-bk::before{
			background: #f0f;
		}
		
}


/*-TOP page basic layout -*/
	.section .layout-w{
		max-width: 1200px;/*-max-height720px-*/
		margin: auto;
		transform: translateY(-5%);
		box-sizing: border-box;
		padding: 0;
		text-align: center;
		/*background: rgba(0,150,150,.2);*/
	}
		.section .layout-w .layout-box{
			width: auto;
			padding-top: 60%;
			position: relative;
			margin: auto;
			transition: .2s;
			
			/*background: rgba(0,150,0,.2);*/
		}
@media screen and (max-width:799px){
	.section .layout-w{
		transform: translateY(0);
	}
		.section .layout-w .layout-box{
			box-sizing: border-box;
			padding: 2em 1em;
		}
}
@media screen and (min-width:1400px){
		
}
@media screen and (min-width:641px) and (max-width:980px){
		/**/
}
@media screen and (max-width:640px){
		/*.section .layout-w .layout-box{	padding-top: 150%;}*/
}
		

		.section .layout-w .layout-box.inview::after{
			content: "";
			background: url(/yugioh/crossduel/images/title-light.png) center center no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: -91.8%; left: -33%;
			width: 64%;
			height: 200%;
			opacity: 0;
			background-size: 10% auto;
			transition: .3s;
			transform: rotate(-150deg);
		}
		.section .layout-w .layout-box.inview.is-show::after{
			opacity: 1;
			background-size: 100% auto;
			transform: rotate(0);
		}
/* **** IE */
@media all and (-ms-high-contrast: none) {
		.section .layout-w .layout-box.inview::after{
			content: "";
			background: url(/yugioh/crossduel/images/title-light.png) center center no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: -91.8%; left: -33%;
			width: 64%;
			height: 200%;
			opacity: 1;
			background-size: 100% auto;
			transform: rotate(0);
		}
		.section .layout-w .layout-box.inview.is-show::after{
			
		}
	
}
		
		.section .layout-w .layout-box::before{
			content: "";
			background: top left no-repeat;
			background-size: 100% auto;
			position: absolute;
			top: -10%; left: -5%;
			width: 100%;
			height: 100%;
			opacity: .7;
		}

		.section.news .layout-w .layout-box::before{background-image: url(/yugioh/crossduel/images/bk-title-news.png);		}
		.section.system .layout-w .layout-box::before{background-image: url(/yugioh/crossduel/images/bk-title-system.png);		}
		.section.mode .layout-w .layout-box::before{background-image: url(/yugioh/crossduel/images/bk-title-mode.png);		}
		.section.series .layout-w .layout-box::before{background-image: url(/yugioh/crossduel/images/bk-title-series.png);		}
		.section.special .layout-w .layout-box::before{background-image: url(/yugioh/crossduel/images/bk-title-special.png);		}

@media screen and (max-width:799px){
		.section .layout-w .layout-box.inview.is-show::after{
			top: 0; left: 0;
			width: 80%;
			height: 0;
			padding-top: 80%;
			transform: translate(-44%, -29%);
		}
		.section .layout-w .layout-box.inview.is-show::before{
			content: "";
			top: 0; left: -3%;
		}
}
	
	

/*-TOP page contents all "Absolute" Placement-*/
		.section .layout-w .layout-box > *{
			position: absolute;
			z-index: 10;
		}
		.section .layout-w .layout-box > h2{
			top: 0; left: 0;
			width: 36.6666666666667%;
			z-index: 20;
		}
		
		.section .layout-w .layout-box.inview > h2 img{
			margin-left: 10em;
			opacity: 0;
			transition: .3s;
			transition-timing-function: ease;
		}
		.section .layout-w .layout-box.inview.is-show > h2 img{
			margin-left: 0;
			opacity: 1;
		}
/* **** IE */
@media all and (-ms-high-contrast: none) {
		.section .layout-w .layout-box.inview > h2 img{
			margin-left: 0;
			opacity: 1;
		}
		.section .layout-w .layout-box.inview.is-show > h2 img{
			
			
		}	
}
		
@media screen and (max-width:799px){
		.section .layout-w .layout-box > *{
			position: relative;
			z-index: 10;
		}
		.section .layout-w .layout-box > h2{
			width: auto;
			text-align: left;
			padding: 6% 0 5% 3%;
			margin-bottom: 3%;
		}
}

	.section.top{}
	.section.top .fp-tableCell{
		vertical-align: bottom;
	}
		.section.top header{
			padding-bottom: 5em;
		}
		.section.top header:lang(ja){
			padding-bottom: 42px;
		}
		
		.section.top header h1{
			text-align: center;
			padding: 0 3em 2em;
		}
			.section.top header h1 img{
				width: 450px;
			}

	.topbanner{
		padding: .6em 0;
		background: #00000055;
		text-align: center;
	}
		.topbanner a{
			margin: auto;
			display: inline-block;
			max-width: 84%;
			width: 320px; 
			vertical-align: bottom;
		}
		.topbanner a img{
			box-shadow: 0 0 0 1px #555;
		}
		.topbanner a:hover img{
			transition: .2s;
			box-shadow: 0 0 0 1px #ccc;
		}
		
	.topnotice{
		padding: .8em 0 1em;
		background: #00000055;
		text-align: center;
		margin-top: 2em;
	}
		.topnotice a{
			font-size: .9em;
			margin: auto;
			display: inline-block;
			color: #fff;
			vertical-align: bottom;
			position: relative;
			padding: 0 0 0 1.8em;
			line-height: 1em;
		}
		.topnotice a::before{
			content: "";
			position: absolute;
			background: url(/yugioh/common/svg/attention.svg) center center no-repeat;
			background-size: 100% 100%;
			width: 1.2em; height: 1.2em; 
			left: 0; top: -.1em;
		}
		.topnotice a:hover{
			opacity: .5;
			transition: .2s;
		}
		
	
	
@media screen and (max-width:767px){
		.section.top header:lang(ja){
			padding-bottom: 54px;
		}		
	.topbanner{
		padding: 0;
	}
		.topbanner a{
			display: block;
			
		}
}


	.section.comingsoon{
		height: 100vh;
		display: table;
		text-align: center;
		width: 100%;
	}
		.section.comingsoon > div{
			display: table-cell;	
			width: 100%;
			vertical-align: bottom;
		}
@media screen and (max-width:799px){
	.section.top{
		height: 100vh;
		display: table-cell;
		vertical-align: bottom;
	}
}
		
/*- News -*/
	.section.news a.pos{
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
	}
		.news-layout{
			top: 15%;
			height: 70%;
		}
		.news-layout.news{
			width: 55%;
			left: 3%;
		}
		.news-layout.sns{
			width: 37%;
			right: 3%;
		}
		.news-layout > h3{
			text-align: left;
			padding: .5em 0 .3em;
			font-family: Impact,Charcoal;
			color: #fff;
			font-size: 1.4em;
			letter-spacing: .1em;
			font-style: italic;
		}
		.news-box{
			background: url(/yugioh/crossduel/images/information-bk.png) left bottom 1px no-repeat;
			border-top: 1px solid #f35a00;
			border-right: 1px solid #f35a00;
			padding: 2px 0 0 1px;
			height: 100%;
			overflow: hidden;
			box-sizing: border-box;
		}
		.news-box > *{
			height: calc(100% - 40px);
		}
			
			.news-box > ul li{
				
				text-align: left;
				position: relative;
			}
			.news-box > ul li::before{
				content: "";
				
				position: absolute;
				bottom: 0; left: 0;
				height: 1px; width: 100%;
				background: linear-gradient(to right, rgba(243,90,0,1) 0%,rgba(243,90,0,1) 48%,rgba(243,90,0,0) 99%,rgba(243,90,0,0) 100%);
			}
			.news-box > ul li a{
				display: block;
				padding: 1em;
				color: rgba(255,255,255,.8);
				font-size: .9em;
			}
			.news-box > ul li a:hover{
				transition: .5s;
				background: #361a04; 
			}
			
			.news-box .facebook_wrap iframe{
				border: none;
				overflow: hidden;
				margin: auto;
				width: 100% !important;
				height: 200px !important;
				background: #f0f;
			}
			
		
			._2p3a{
				width: 100% !important;
				display: none;
			}
.facebook_wrap iframe ._4-u8 {
  background-color: #242424;
  color: #fff;
}
.facebook_wrap iframe a._39g6 {
  color: #ffffff;
}
.facebook_wrap iframe ._6nm p {
  color: #fff;
}
			
@media screen and (max-width:799px){
	.section.news a.pos{
		left: 0;
		transform: translateX(0);
		bottom: 0;
	}
		.news-layout{
			height: auto;
			margin: auto auto 3em;
			max-width: 500px;
		}
		.news-layout.news{
			height: auto;
			width: auto;
			left: 0;
		}
		.news-layout.sns{
			height: 500px;
			width: auto;
			right: 0;
		}
		.news-box{
			min-height: 20em;
		}
}
	
	.top-imgbtn{
		position: absolute;
		width: 13%;
	}
		.top-imgbtn::bafore{
			content: "aaa";
			position: absolute;
			display: block;
			left: 0; top: 0;
			width: 100%; height: 100%;
			background: url(/yugioh/crossduel/images/btn-effect.png) center center;
			opacity: 0;
		}
		.top-imgbtn:hover::before{
			opacity: 1;
			transition: .2s;
		}
	.pos-rightbottom{
		right: 5%;
		bottom: 0;
	}
	.pos-rightbottom2{
		right: 18%;
		bottom: 0;
	}
	
	.sp-btn{
		display: none;
	}
@media screen and (max-width:799px){
	.top-imgbtn{
		display: none;
	}
	.sp-btn{
		display: block;
		padding: 3em 2em 1em;
	}
	.sp-btn a{
		margin-top: 1em;
	}
}		
			
/*- System -*/
.section.system{}
	
	.section.system .top-trailer{
		left: 50%;
		top: 50%;
		width: 50%;
		transform: translate(-50%,-50%);
		z-index: 50;
	}
	.section.system .top-copy1,
	.section.system .top-copy2{
		width: 37.9166666666667%;
		filter: brightness(50) blur(5px) opacity(0);
	}
@media screen and (min-width:800px){	
	.section.system .layout-w .layout-box.inview.is-show .top-copy1{
		animation: top-copy1 .35s ease-in-out .7s 1 normal forwards;
	}
	@keyframes top-copy1 {
		0%{
			top: 0; right: 20%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		80% {
			top: 0; right: -1%;
			filter: brightness(30) blur(0) opacity(1);
		}
		100% {
			top: 0; right: 0;
			filter: brightness(1) blur(0) opacity(1);
		}
	}
	.section.system .layout-w .layout-box.inview.is-show .top-copy2{
		animation: top-copy2 .45s ease-in-out .7s 1 normal forwards;
	}
	@keyframes top-copy2 {
		0%{
			bottom: 0; left: 20%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		80% {
			bottom: 0; left: -1%;
			filter: brightness(30) blur(0) opacity(1);
		}
		100% {
			bottom: 0; left: 0;
			filter: brightness(1) blur(0) opacity(1);
		}
	}
}

@media screen and (max-width:799px){
	.section.system .layout-w .layout-box.inview.is-show .top-trailer,
	.section.system .layout-w .layout-box.inview.is-show .top-copy1,
	.section.system .layout-w .layout-box.inview.is-show .top-copy2{
		top: 0; left: 0;
		width: auto;
		transform: translate(0,0);
		filter: brightness(1) blur(0) opacity(1);
	}
	
}
	
@media screen and (min-width:800px){
	
	.section.system .layout-w .layout-box.inview.is-show .top-chara-top{
		animation: top-chara .2s ease-in-out .4s 1 normal forwards;
	}
	@keyframes top-chara {
		0%{
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
			height: 5%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		50%{
			top: -3%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		100% {
			width: 24.1666666666667%;
			height: 31.9444444444444%;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			filter: brightness(1) blur(0) opacity(1);
		}
	}
	
	.section.system .layout-w .layout-box.inview.is-show .top-chara-right{
		animation: right-chara .2s ease-in-out .6s 1 normal forwards;
	}
	@keyframes right-chara {
		0%{
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 5%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		30%{
			right: 4%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		100% {
			width: 20%;
			height: 38.8888888888889%;
			right: 6.66666666666667%;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
	.section.system .layout-w .layout-box.inview.is-show .top-chara-bottom{
		animation: bottom-chara .2s ease-in-out .4s 1 normal forwards;
	}
	@keyframes bottom-chara {
		0%{
			bottom: 50%;
			left: 50%;
			transform: translateX(-50%);
			height: 5%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		50%{
			bottom: -3%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		100% {
			width: 24.1666666666667%;
			height: 31.9444444444444%;
			bottom: 0%;
			left: 50%;
			transform: translateX(-50%);
			filter: brightness(1) blur(0) opacity(1);
		}
	}
	
	.section.system .layout-w .layout-box.inview.is-show .top-chara-left{
		animation: left-chara .2s ease-in-out .6s 1 normal forwards;
	}
	@keyframes left-chara {
		0%{
			top: 50%;
			left: 50%;
			transform: translateY(-50%);
			height: 5%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		30%{
			left: 4%;
			width: 5%;
			filter: brightness(50) blur(5px) opacity(.5);
		}
		100% {
			width: 20%;
			height: 38.8888888888889%;
			left: 6.66666666666667%;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

		div.chara-box{
			width: 100%;
			height: 0;
			position: relative;
		}		
		.top-chara-right div.chara-box,
		.top-chara-left div.chara-box{
			padding-top: 116.666666666667%;
		}
		.top-chara-top div.chara-box,
		.top-chara-bottom div.chara-box{
			padding-top: 79.3103448275862%;
		}
		

		
		
@media screen and (max-width:799px){
	.top-chara-top,
	.top-chara-right,
	.top-chara-bottom,
	.top-chara-left{
		letter-spacing: normal;
		width: 45%;
		top: 0;
		left: 0;
		transform: translateY(0);
		transform: translateX(0);
		display: inline-block;
	}
		div.chara-box{
			padding-top: 80% !important;
		}
		
}
		
@media all and (-ms-high-contrast: none) {
  /* **** IE */
	.section.system .layout-w .layout-box.inview .top-copy1{
		right: 0 !important;
		top: 0 !important;
	}
	.section.system .layout-w .layout-box.inview .top-copy2{
		left: 0 !important;
		bottom: 0 !important;
	}
	.top-chara-top,
	.top-chara-bottom{
		width: 21%;
	}
	.top-chara-right,
	.top-chara-left{
		height: 30%;
		width: 20%;
	}		
	.top-chara-top{
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.top-chara-bottom{
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.top-chara-right{
		top: 50%;
		right: 6%;
		transform: translateY(-50%);
	}
	.top-chara-left{
		top: 50%;
		left: 6%;
		transform: translateY(-50%);
	}
	
		.top-chara-right div.chara-box,
		.top-chara-left div.chara-box{
			padding-top: 90%;
		}
		.top-chara-top div.chara-box,
		.top-chara-bottom div.chara-box{
			padding-top: 90%;
		}
		div.chara-box svg.img{
			width: calc(100% - 8px);
			height: calc(100% - 8px);
		}
		.top-chara-top div.chara-box svg.img{
			background: 
				url(/yugioh/crossduel/images/top-chara1.png),
				rgba(0,12,255,.5);
			background-size: 100% auto, auto auto ;
		}
		.top-chara-right div.chara-box svg.img{
			background: 
				url(/yugioh/crossduel/images/top-chara2.png),
				rgba(0,12,255,.5);
			background-size: 110% auto, auto auto ;
		}
		.top-chara-bottom div.chara-box svg.img{
			background: 
				url(/yugioh/crossduel/images/top-chara3.png),
				rgba(0,12,255,.5);
			background-size: 100% auto, auto auto ;
		}
		.top-chara-left div.chara-box svg.img{
			background: 
				url(/yugioh/crossduel/images/top-chara4.png),
				rgba(0,12,255,.5);
			background-size: 110% auto, auto auto ;
		}
}
		
		
	div.chara-box svg.img{
		position: absolute;
		height: calc(100% - 8px);
		width: calc(100% - 8px);
		top: 4px; left: 4px;
		background: rgba(0,12,255,.5);
	}
	div.chara-box svg.img image{
		position: absolute;
		left: 50%;
		top: 50%;
	}
	div.chara-box svg.sdw{
		position: absolute;
		height: 100%; width: 100%;
		top: 0%; left: 0%;
		background: rgba(16,150,200,.5);
	}
	.top-chara-top div.chara-box svg.sdw,
	.top-chara-top div.chara-box svg.img{
		clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
	}
		.top-chara-top div.chara-box svg.img image{
			transform: translate(0, -11%);
		}
	.top-chara-right div.chara-box svg.img,
	.top-chara-right div.chara-box svg.sdw{
		clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 90%);
	}
		.top-chara-right div.chara-box svg.img image{
			transform: translate(-5% , 0);
		}
	.top-chara-bottom div.chara-box svg.img,
	.top-chara-bottom div.chara-box svg.sdw{
		clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
	}
		.top-chara-bottom div.chara-box svg.img image{
			transform: translate(0 , 5%);
		}
	.top-chara-left div.chara-box svg.img,
	.top-chara-left div.chara-box svg.sdw{
		clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 0% 100%);
	}
		.top-chara-left div.chara-box svg.img image{
			transform: translate(-10% , 0);
		}

@media screen and (max-width:799px){
	div.chara-box svg.img{
		position: absolute;
		height: calc(100% - 8px);
		width: calc(100% - 8px);
		top: 4px; left: 4px;
		background: rgba(0,12,255,.5);
	}
	div.chara-box svg.img image{
		position: absolute;
		left: 50%;
		top: 50%;
	}
	div.chara-box svg.sdw{
		position: absolute;
		height: 100%; width: 100%;
		top: 0%; left: 0%;
		background: rgba(16,150,200,.5);
	}
	.top-chara-top div.chara-box svg.sdw,
	.top-chara-top div.chara-box svg.img{
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
	}
		.top-chara-top div.chara-box svg.img image{
			width: 110% !important;
			height: auto !important;
			transform: translate(-5%,-5%);
		}
	.top-chara-right div.chara-box svg.img,
	.top-chara-right div.chara-box svg.sdw{
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
	}
		.top-chara-right div.chara-box svg.img image{
			width: 110% !important;
			height: auto !important;
			transform: translate(-5%,-5%);
		}
	.top-chara-bottom div.chara-box svg.img,
	.top-chara-bottom div.chara-box svg.sdw{
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
	}
		.top-chara-bottom div.chara-box svg.img image{
			width: 110% !important;
			height: auto !important;
			transform: translate(-5%,-5%);
		}
	.top-chara-left div.chara-box svg.img,
	.top-chara-left div.chara-box svg.sdw{
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
	}
		.top-chara-left div.chara-box svg.img image{
			width: 110% !important;
			height: auto !important;
			transform: translate(-5%,-5%);
		}
}	


/*- Mode -*/
.section.mode{}
	.section.mode > *{
		text-align: center;
	}
	.section.mode .top-mode-4match,
	.section.mode .top-mode-4coop,
	.section.mode .top-mode-single{
		width: 36.6666666666667%;
		filter: brightness(50) blur(5px) opacity(0);
	}
	.section.mode .top-mode-4match{
		top: 15%;
		left: 10%;
	}
	.section.mode .top-mode-4coop{
		top: 15%;
		right: 10%;
	}
	.section.mode .top-mode-single{
		top: 57%;
		left: 50%;
		transform: translateX(-50%);
	}
	
@media screen and (min-width:800px){	
	.section.mode .layout-w .layout-box.inview.is-show .top-mode-4match{
		animation: mode-img .2s ease-in-out .5s 1 normal forwards;
	}
	.section.mode .layout-w .layout-box.inview.is-show .top-mode-4coop{
		animation: mode-img .2s ease-in-out .6s 1 normal forwards;
	}
	.section.mode .layout-w .layout-box.inview.is-show .top-mode-single{
		animation: mode-img .2s ease-in-out .7s 1 normal forwards;
	}
	
	@keyframes mode-img {
		0%{
			filter: brightness(50) blur(5px) opacity(0);
		}
		30%{
			filter: brightness(50) blur(5px) opacity(.5);
		}
		100% {
			filter: brightness(1) blur(0) opacity(1);
		}
	}
}
	
	 .layout-w .layout-box.inview.is-show .top-mode-copy{
		animation: mode-copy .45s ease-in-out .8s 1 normal forwards;
		left: 0;
		bottom: 0;
		width: 31.6666666666667%;
		filter: brightness(50) blur(5px) opacity(0);
	}
	@keyframes mode-copy {
		0%{
			0; left: 20%;
			filter: brightness(50) blur(5px) opacity(0);
		}
		80% {
			left: -1%;
			filter: brightness(30) blur(0) opacity(1);
		}
		100% {
			left: 0;
			filter: brightness(1) blur(0) opacity(1);
		}
	}
	
	.section.mode a.pos{
		right: 5%;
		bottom: 0;
		width: 14%;
	}
	
@media all and (-ms-high-contrast: none) {
  /* **** IE */
	.section.mode .top-mode-copy{
		left: 0 !important;
		bottom: 0 !important;
	}
}

@media screen and (max-width:799px){
	.section.mode .top-mode-4match,
	.section.mode .top-mode-4coop,
	.section.mode .top-mode-single,
	.section.mode .top-mode-copy{
		filter: brightness(1) blur(0) opacity(1) !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		transform: translateX(0) !important;
		width: 70% !important;
		display: inline-block !important;
		z-index: 100 !important;
	}	
	
}



.product {
    background:
		rgba(0,0,0,.5);
		
}