@charset "utf-8";
/* Global Styles */
@font-face {
  font-family: 'OPTICharterOak';
    src:  url('OPTICharterOak.ttf.woff') format('woff'),
    url('OPTICharterOak.ttf.svg#OPTICharterOak') format('svg'),
    url('OPTICharterOak.ttf.eot'),
    url('OPTICharterOak.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}
body {
	margin: 0 auto;
	background: #ffff00;
	width: 92%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	font-family: 'OPTICharterOak';
	font-size: 24px;
	text-align: center;
}
h2{
	color: #ed2f29;
	font-size: 1.3em;
}
h2 img{
	width: 25%;
    margin: 5vh auto 2.5vh auto;
}
a{
	color: #1d1c1a;
	text-decoration: none;
}
svg, img{
	display: block;
	margin: 0;
	padding: 0;
}
article{
	clear: both;
}
path{
  	fill: transparent;
}
text {
  	fill: #ed2f29;
}
.line .cls-1{
	fill:none;stroke:#1d1c1a;stroke-width: 3px;stroke-dasharray: 9;animation: dashdraw 4s alternate infinite;
}
@keyframes dashdraw {to {stroke-dashoffset: 90;}}
#e .b, #s .b{
	fill: url(#grad1);
}
#e .c, #s .c{
	fill: none;
	stroke: url(#grad2);
	stroke-width: 15px;
}
#sT .b, #eT .b {
	fill: url(#grad3);
}
#sT .c, #eT .c {
	fill: none;
	stroke-width: 15px;
	stroke: url(#grad4);
}
.tomorrow.hide #sT, .tomorrow.hide #eT, .today.hide #s, .today.hide #e{
	display: none;
}
#svgToday{
	width: 30%;
    position: absolute;
    left: 10vw;
    top: 10vh;
    z-index: 2;
}
#svgToday .b{
    fill: #ed2f29;
}
#kickoff, #tomorrow{
	width: 40%;
    position: relative;
    top: 5vh;
    z-index: 3;
    cursor: pointer;
    left: 50%;
    transform: translate(-50%, 15px);
	opacity: 0.8;
}
.today #kickoff{
	content:url("../images/today.svg");
	transform: translate(-50%, 15px) scaleX(1.5);
    width: 27.5%;
}
.tomorrow #tomorrow{
	content:url("../images/tomorrow.svg");
	/*transform: rotate(-10deg);*/
}
.tomorrow.hide #tomorrow, .today.hide #kickoff{
	width: 15%;
    left: 50%;
    top: 0;
}
.tomorrow.hide #tomorrow:hover, .today.hide #kickoff:hover{
	opacity: 1;
}
.tomorrow.hide #tomorrow{
	content:url("../images/whatson-02.svg");
	transform: rotate(0);
	position: fixed;
    right: 6.275%;
    top: 2vh;
    left: auto;
}
.today.hide #kickoff{
	content:url("../images/whatson-01.svg");
	transform: rotate(0);
	position: fixed;
    right: 6.275%;
    top: 2vh;
    left: auto;
}
.today .box, .tomorrow .box{
	display: block;
}
.today.hide .box, .tomorrow.hide .box{
	display: none;
}

/* Header */
header {
	width: 100%;
    height: 100vh;
    float: left;
    position: fixed;
    top: 0px;
    z-index: -1;
    animation: front 6s;
	animation-delay: -2s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
    left: 0;
}
@keyframes front{
	from {z-index: 0;}
  	to {z-index: -1;}
}

/* Main Content sections */
section.hide.today, section.hide.tomorrow{
	position: relative;
	z-index: 1;
}
section.today, section.tomorrow{
	position: relative;
	z-index: 2;
}
.mainContent article{
	padding: 3vh 0;
    background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 5%, rgba(255,255,255,1) 95%, rgba(255,255,255,0));
    width: 100%;
    float: right;
	box-sizing: border-box;
}
.mainContent article .content{
	width: 50%;
    float: right;
}
aside{
	width: 50%;
    height: calc(100% - 198.5px - 10vh);
    position: absolute;
    left: 0;
}
aside #logo, aside #logo2{
	margin: 0;
    text-align: center;
    height: 50%;
    width: 100%;
	animation-name: show-img;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-direction: alternate;
}
@keyframes show-img {
	0%{
		height: 50%;
	}
  	100% {
    	height: 100%;
  	}
}
aside #logo #logoImage, aside #logo2 #logoImage2{
	width: 95%;
    height: 100%;
    margin-left: 5%;
}
.mainContent {
	display: flex;
	flex-flow: column;
	width:  100%;
	float: left;
	padding: 2vh 0;
}
.mainContent .about{
	order: 1;
}
.mainContent .today{
	order: 3;
}
.mainContent .today.hide{
	order: 2;
}
.mainContent .tomorrow{
	order: 3;
}
.mainContent .tomorrow.hide{
	order: 2;
}
.mainContent .about .aboutImage{
	width: 20%;
	float: left;
	position: relative;
    z-index: 3;
	transform: rotate(0deg);
	transition: transform 2s;
	cursor: pointer;
}
.mainContent .about .aboutImage:hover, .mainContent .about .aboutImage:active, .mainContent .about .aboutImage.show{
	transform: rotate(15deg);
}
.mainContent .about article{
	text-align: left;
	padding: 2.5vw;
    border: 5px solid;
	background: #ffffff;
	top: -5vh;
    position: relative;
	display: none;
	width: 95%;
    right: 2.5%;
    z-index: 2;
    box-sizing: border-box;
}
#aboutText.show {
	display: block;
}
.mainContent article .whatsonImage{
	position: fixed;
    width: 25%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    display: none;
}
.mainContent article .whatsonImage img{
	width: 100%;
	height: auto;
}
.mainContent article div a{
	position: relative;
    z-index: 1;
}
.mainContent article div a:hover~.whatsonImage, .mainContent article div a:active~.whatsonImage {
    display: block;
}
.mainContent .about .aboutImage .st0{
	fill:#ffff00;stroke:#231f20;stroke-miterlimit:10;stroke-width:3.46px;
}
.mainContent .about .aboutImage .st1{
	fill:#ED2F29;
}
.today .todayImage{
	width: 40%;
	float: left;
}
.today .todayImage .cls-1{
	fill:none;stroke:#1d1c1a;stroke-linecap:round;stroke-miterlimit:10;stroke-width:4.6px;
}
.today .todayImage .cls-2{
	fill:#ed2f29;
}

/* Footer */
footer .footerNote {
    float: right;
    width: 100%;
	z-index: 100;
    position: relative;
}
footer .footerNote img{
	/*
	float: right;
	margin-top: 10px;*/
	width: 20%;
	margin: 10px auto 0 auto;
}


/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
	body {
		width: 96%;
		/*max-width: 960px;*/
		padding-left: 2%;
		padding-right: 2%;
		font-size: 20px;
	}
	
/* Logo */
	aside{
		position: fixed;
    	left: 0;
    	background: none;
    	height: 100vh;
		width: 100%;
    	z-index: 1;
    	top: 0;
	}
	aside #logo, aside #logo2{
		height: 50%;
		width: 100%;
		opacity: 0;
		animation-name: show-img;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
		animation-duration: 5s;
		animation-direction: alternate;
	}
	@keyframes show-img {
		0%{
			height: 50%;
			opacity: 1
		}
		90%{
			opacity: 0.75;
		}
		100% {
			height: 100%;
			opacity: 0;
		}
	}
	aside #logo #logoImage, aside #logo2 #logoImage2{
		width: 100%;
		margin-left: 0;
	}
	
	/* Main content sections */
	.mainContent .about .aboutImage{
		width: 75%;
		float: right;
	}
	.mainContent .today, .mainContent .tomorrow{
		order: 2;
	}
	.mainContent .tomorrow.hide, .mainContent .today.hide{
    	order: 3;
	}
	#kickoff, #tomorrow{
		position: relative;
		width: 100%;
		/*top: 5vh;
    	left: -2%;*/
    	transform: translate(-50%, 35px);
		opacity: 0.8;
	}
	.today #kickoff{
		transform: translate(-50%, 35px) scaleX(1.5);
    	width: 66.66666%;
	}
	.tomorrow.hide #tomorrow, .today.hide #kickoff{
		width: 50%;
		position: relative;
    	right: auto;
    	top: 0;
    	transform: translate(-50%, 0);
    	left: 50%;
	}
	.mainContent article{
    	width: 100%;
    	float: right;
    	padding-right: 0;
	}
	.mainContent .about article{
		width: 95%;
   	 	right: 2.5%;
    	z-index: 2;
    	box-sizing: border-box;
	}
	.mainContent article .content{
		width: 95%;
		padding: 0 2.5%;
	}
	
	/* Footer */
	footer .footerNote img{
		width: 75%;
	}
}

/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
	
/* Main content and sections */

/* Footer */

}