div.welcomesection
{
	position: fixed;
	left: 0rem;
	top: 0rem;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	background-image: url('images/customscene-creative-agency-optimised.jpg');
	background-size: cover;
	background-position: 50% 50%;
}

div.welcomeslide
{
	position: absolute;
	width: 100%;
	height: 30vw;
	margin: auto;
	top: 0px;
	bottom: 0px;
	overflow: visible;
}

div.welcomehead
{
    color: white;
    text-align: center;
    font-size: 3.5vw;
	position: absolute;
	width: 100%;
	left: 0%;
	top: 10%;
	opacity: 0.0;
}
div.welcomeheadin
{
	-webkit-animation-name: animwelcomeheadin;
	-webkit-animation-duration: 2s;
	animation-name: animwelcomeheadin;
	animation-duration: 2s;
	left: 0%;
	opacity: 1.0;
}
div.welcomeheadout
{
	-webkit-animation-name: animwelcomeheadout;
	-webkit-animation-duration: 2s;
	animation-name: animwelcomeheadout;
	animation-duration: 2s;
	opacity: 0.0;
}
div.welcomebody
{
    color: white;
    text-align: center;
    font-size: 4vw;
	position: absolute;
	width: 100%;
	left: 0%;
	top: 25%;
	opacity: 0.0;
}
span.welcomebodywide
{
	display: inline-block;
}
span.welcomebodynarrow
{
	display: none;
}
div.welcomebodyin
{
	-webkit-animation-name: animwelcomebodyin;
	-webkit-animation-duration: 2s;
	animation-name: animwelcomebodyin;
	animation-duration: 2s;
	left: 0%;
	opacity: 1.0;
}
div.welcomebodyout
{
	-webkit-animation-name: animwelcomebodyout;
	-webkit-animation-duration: 2s;
	animation-name: animwelcomebodyout;
	animation-duration: 2s;
	opacity: 0.0;
}

div.welcomebuttonscontain
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 60%;
	margin: auto;
}

div.welcomebuttonsbutton
{
	width: 0.75vw;
	height: 0.75vw;
	margin: 0.5vw;
}

div.welcomediscover
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 70%;
	width: 25%;
	padding: 1% 0;
	background-color: transparent;
	color: #FFFFFF;
	font-size: 1vw;
	letter-spacing: 0.1em;
}
div.welcomediscover:hover
{
	background-color: #FFFFFF;
	color: #000000;
	letter-spacing: 0.2em;
}


@media only screen and (max-width: 800px) and (orientation:portrait)
{
	div.welcomeslide {height: 80vw;}
	div.welcomehead {font-size: 6vw; top: 15%;}
	div.welcomebody {font-size: 7vw; top: 25%;}
	div.welcomebuttonscontain {top: 60%;}
	div.welcomebuttonsbutton {width: 2vw; height: 2vw; margin: 1.5vw;}
	div.welcomediscover {width: 50%; font-size: 3vw; padding: 3% 0; top: 70%;}
	span.welcomebodywide {display: none;}
	span.welcomebodynarrow {display: inline-block;}
}

@media only screen and (max-width: 800px) and (orientation:landscape)
{
	div.welcomeslide {height: 40vw;}
	div.welcomehead {font-size: 5vw; top: 5%;}
	div.welcomebody {font-size: 6vw; top: 20%;}
	div.welcomebuttonsbutton {width: 1.5vw; height: 1.5vw; margin: 1.25vw;}
	div.welcomediscover {width: 50%; font-size: 2.5vw; padding: 1.5% 0; top: 80%;}
}


@-webkit-keyframes animwelcomeheadin
{
	from {left: -50%; opacity: 0.0;}
	to {left: 0%; opacity: 1.0;}
}
@-webkit-keyframes animwelcomeheadout
{
	from {left: 0%; opacity: 1.0;}
	to {left: 75%; opacity: 0.0;}
}
@-webkit-keyframes animwelcomebodyin
{
	from {left: 50%; opacity: 0.0;}
	to {left: 0%; opacity: 1.0;}
}
@-webkit-keyframes animwelcomebodyout
{
	from {left: 0%; opacity: 1.0;}
	to {left: -75%; opacity: 0.0;}
}

@keyframes animwelcomeheadin
{
	from {left: -50%; opacity: 0.0;}
	to {left: 0%; opacity: 1.0;}
}
@keyframes animwelcomeheadout
{
	from {left: 0%; opacity: 1.0;}
	to {left: 75%; opacity: 0.0;}
}
@keyframes animwelcomebodyin
{
	from {left: 50%; opacity: 0.0;}
	to {left: 0%; opacity: 1.0;}
}
@keyframes animwelcomebodyout
{
	from {left: 0%; opacity: 1.0;}
	to {left: -75%; opacity: 0.0;}
}