﻿.coo h3 {
	color: #FFFFFF;
	font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	font-size: 24px;
	letter-spacing: 5px;
	text-align: center;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.4);

}

.coo h2{
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
	line-height: 58px;
	color: #FFFFFF;
	font-size: 48px;
	letter-spacing: 7px;
	padding: 0px;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.4);

}

.coo p{
	color: #FFFFFF;
	font-family: 'Work Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.4);

}

.coo .ghost{
	display:none;
	opacity:0 !important;
}

.coo .fadeIn{
	opacity:1;
	transition-property:opacity;
	transition-timing-function: ease;
	transition-duration: .4s;
	transition-delay: 0s;
}

.coo .scrollIn {
	opacity:0;
	
}

	.coo .scrollIn.start{
		transition:none;
		transform:translate(0);
		
	}


	.coo .scrollIn.left.start{
		transform:translateX(100%);
	}
	.coo .scrollIn.up.start{
		transform:translateY(-100%);
	}
	.coo .scrollIn.down.start{
		transform:translateY(100%);
	}
	.coo .scrollIn.right.start{
		transform:translateX(-100%);
	}



.coo .scrollIn.showing{
	transition:all ease 1.5s;	
	transform:translate(0) !important;
	opacity:1;
}






.coo{
	width:100%;
}


.coo .header{
	background: #545454 url("../Images/ep1_header_poster.jpg") no-repeat center center;
	background-size:cover;
	position:relative;
	height:844px;
	overflow:hidden;
	text-align:center;
}
	.coo .video-header{
		height:100%;
		width:100%;
		position:absolute;
		z-index:0;
	}
		.coo .video-header video{
			position: absolute;
			min-width: 100%;
			min-height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);       
			
			
			object-fit: cover;
		}


	.coo .logo{
		width: 698px;
		height: 244px;
		margin-top: 315px;
		display: inline-block;
		background: center center no-repeat transparent;
			background-image: none;
			background-size: auto auto;
		z-index: 1;
		position: relative;
		background-size: cover;
		
		
	}

	.coo .watch-button{
		background:rgba(0,0,0,0);
		color:#fff;
		display:inline-block;
		height: 55px;
		text-align:center;
		border:1px solid #fff;
		line-height:55px;
		padding:0 44px;
		position:relative;
		z-index:1;
	}

		.coo .watch-button:hover{
			
			background:rgba(0,0,0,1);
		}

		.coo .watch-button:visited{
			color:#fff;
		}



	.coo .icons{
		position:relative;
		margin:72px auto 0;
		display:flex;
		width:74%;
		z-index:1;
	}
		.coo .icons li{

			flex:1 1 14%;

			display: inline-block;
			color: #fff;
			font-size: 9px;
			text-align: center;
			line-height: 11px;
			white-space: normal;
			margin: 0 2%;

			max-width:100%;
			
			

		}
			.coo .icons img{
				display: block;
				margin: 0 auto 10%;
				height: 59%;
			}

			



.coo .block{
	position:relative;
	background:no-repeat top center transparent;
		background-image:none;
		background-size:contain;
	padding:0 10% 10%;
}
	.coo .block .background{
		position:absolute;
		width:100%;
		left:0;
		top:0;
	}

		.coo .block .background.mobile {
			display:none;
		}

		.coo .background img{
			width:100%;
		}

		.coo .block .background:after{
			content:"";
			display:block;
			position:absolute;
			height:20%;
			bottom:0;
			left:0;
			width:100%;
			z-index:1;
		}

	.coo .block .content{
		position: relative;
		margin-bottom:0;
		overflow:hidden;
		padding: 75px 30px 0;
		min-height:570px;
		
	}
		.coo .block .content p{
			padding: 10px 0px 0px;
			clear:both;
		}

		

		.coo .block .content h2{
			width:50%;
			position:relative;
			z-index:2;
		}
		.coo .block .content p{
			width:50%;
			position:relative;
			z-index:2;
		}


	.coo .block .content object {
		width:40%;
		position:absolute;
		opacity:.3;
		z-index:1;
		top:37px;


	}




	.coo .block.right .content{
		text-align:right;

	}

		.coo .block.right .content object{
			
			right:0;
		}

		.coo .block.right .content h2,
		.coo .block.right .content p{
			float:right;
			
		}


	.coo .block.left .content{
	
		text-align:left;
	}

		.coo .block.left .content h2,
		.coo .block.left .content p{
			float:left
		}


		.coo .block.left .content object{
			
			left:0;
		}

	.coo .block.center .content{
		align-items:center;
	}

		.coo .block.center .content h2,
		.coo .block.center .content p{
			width:100%;
			text-align:center;
		}

	


	.coo .block.story{
		background-color:#08101F;
		min-height:674px;

	}
		.coo .block.story .background:after{
			background: -webkit-gradient(linear, center top, center bottom, from(rgba(8,16,31,0)),color-stop(100%, #08101F));
			background: -webkit-linear-gradient(top,rgba(8,16,31,0) ,#08101F 100%);
			background: linear-gradient(to bottom,rgba(8,16,31,0) ,#08101F 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0008101F, endColorstr=#FF08101F, GradientType=0);
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0008101F', endColorstr='#FF08101F', GradientType=0)";
		}

	.coo .block.destinations{
		background-color:#B7C6CA;
		min-height:674px;

	}
		.coo .block.destinations .background:after{
			
			background: -webkit-gradient(linear, center top, center bottom, from(rgba(183,198,202,0)),color-stop(100%, #B7C6CA));
			background: -webkit-linear-gradient(top,rgba(183,198,202,0) ,#B7C6CA 100%);
			background: linear-gradient(to bottom,rgba(183,198,202,0) ,#B7C6CA 100%);
			

		}


		.coo .destinations .callouts h3,
		.coo .destinations .callouts p {
			color: #1E3041;
		}


	.coo .block.weapons{
		background-color:#110C09;
		min-height:674px;
	}
		.coo .block.weapons .background:after{
			background: -webkit-gradient(linear, center top, center bottom, from(rgba(17,12,9,0)),color-stop(100%, #110C09));
			background: -webkit-linear-gradient(top,rgba(17,12,9,0) ,#110C09 100%);
			background: linear-gradient(to bottom,rgba(17,12,9,0) ,#110C09 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00110C09, endColorstr=#FF110C09, GradientType=0);
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00110C09', endColorstr='#FF110C09', GradientType=0)";
		}

		.coo .block.weapons object{
			opacity:.5;
		}
	


.coo .callouts{
	display: flex;
	flex-flow: row nowrap;
	width: calc(100% + 2%);
	margin-left: -1%;
	margin-top:10%;
	position:relative;
	z-index:2;
	clear:both;
}
	.coo .callouts li{
		flex:1 1 33%;
		text-align:center;
		margin:0 1%;
		max-width:32%;
	}
		.coo .callouts li img{
			width:100%;
			margin-bottom:15px;
		}

		.coo .callouts p{
			font-family: 'Work Sans', sans-serif;
			line-height:24px;
			color: #FFFFFF;
			font-size: 16px;
			line-height: 24px;
			text-align: center;
			max-width:100%;
		}



.coo .footer{
	background:no-repeat center center url(../Images/tricorn_footer.jpg);
	background-size:cover;
	height:844px;
}






	.react-large .coo .block .content{
		min-height:402px;
	}


	.react-large  .coo .block{
		padding:0 5% 25%;
	}


	.react-large  .coo .block .content h2,
	.react-large  .coo .block .content p
	{
		width:75%;
	}


	.react-large  .coo .icons img{

		height: 39%;
	}
	
	 






	.react-medium .coo h2{
		font-size:30px;
		line-height: 36px;
		letter-spacing: 3px;
		text-align: center;
		padding: 0px;

	}

	.react-medium .coo p{
		text-align: center;
		padding: 0px;

	}
	
	
	.react-medium .coo .header{
		min-height:730px;
		height:auto;
	}

	.react-medium .coo .logo{
		width: 95%;
		margin-top: 13%;
		background-size: contain;
	}

	.react-medium .coo .watch-button{
		
		height: auto;
		min-height:55px;

	}


	.react-medium .coo .icons {
		width:95%;
		flex-flow:row wrap;
	}
		.react-medium .coo .icons li{
			flex:1 1 20%;
		}

	.react-medium .coo .block {
		padding: 0 5% 5%;
	}


	.react-medium .coo .block .background{
		display:none;
	}

	.react-medium .coo .block .background.mobile {
		display:block;
	}


	.react-medium .coo .block .content{
		padding:400px 0 0;
		min-height:0;

	}

	.react-medium .coo .block .content h2,
	.react-medium .coo .block .content p
	{
		width:100%;
		text-align:center;
		padding-top:0;
	}

	.react-medium .coo .block .content object{
		display:none;
	}

	.react-medium .coo .block .callouts{
		flex-flow:column wrap;
		margin-top:60px;

		display:block;
	}
		.react-medium .coo .block .callouts li{
			flex:1 1 100%;
			padding:0 10%;
			margin-top:10%;
			max-width:none;
		}












