#intro
{
    
}

#introPage
{
    z-index: 100;
    position: absolute;
    top: 0vh;
    left: 0vw;
    height: 100vh;
    width: 100vw;
    background-image: url("introBackground2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 2s;
}

#introContent
{
    z-index: 201;
    height: 55vh;
    width: 70vw;
    display: table-cell;
    position: relative;
    top: -41vh;
    left: 14.9vw;
    //transform: translate(-50%, -50%);
    font-family: Arial;
    font-size: 3vh;
    color: black;
    text-align: center;
    vertical-align: middle;
    opacity: 1;
    transition: opacity 2s;
}

#introContentBackground
{
    z-index: 201;
    height: 55vh;
    width: 75vw;
    display: inline-block;
    position: relative;
    top: 42vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    transition: opacity 2s;
    background-color: #b5b8bb;
    border: 4px solid #0b99d4;
}

#introNextPage
{
    display: inline-block;
    position: absolute;
    left: 83.33vw;
    top: 0%;
    height: 15vh;
    width: 8.33vw;
	transition: opacity 2s;
}

#introPrevPage
{
    display: inline-block;
    position: absolute;
    left: 8.33vw;
    top: 0%;
    height: 15vh;
    width: 8.33vw;
	transition: opacity 2s;
}

#introNextPageImage
{
	display: inline-block;
    position: relative;
	background-color: transparent;
	background-image: url("nextButton.png");
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	border: 0px;
	width: 100%;
	height: 75%;
	transition: background-image 0.5s, opacity 2s;
    cursor: pointer;
    z-index: 201;
}

	#introNextPageImage:hover
	{
		background-image: url("nextButton-Hovered.png");
	}

	#introNextPageImage:active
	{
		background-image: url("nextButton-Hovered.png");
	}

    #introNextPageImage.inactive
    {
        background-image: url("nextButton-Disabled.png");
    }

#introPrevPageImage
{
	display: inline-block;
    position: relative;
	background-color: transparent;
	background-image: url("prevButton.png");
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
	border: 0px;
	width: 100%;
	height: 75%;
	transition: background-image 0.5s, opacity 2s;
    cursor: pointer;
    z-index: 201;
}

	#introPrevPageImage:hover
	{
		background-image: url("prevButton-Hovered.png");
	}

	#introPrevPageImage:active
	{
		background-image: url("prevButton-Hovered.png");
	}

#introNextPageText
{
    position: relative;
	color: black;
    height: 5.25vh;
    width: 8.33vw;
    transform: translateY(-30%);
	font-family: Arial;
    font-size: 1.365vh;
    text-align: center;
    display: table-cell;
    transition: opacity 2s;
    vertical-align: middle;
    z-index: 201;
}

#introPrevPageText
{
    position: relative;
	color: black;
    height: 5.25vh;
    width: 8.33vw;
    transform: translateY(-30%);
	font-family: Arial;
    font-size: 1.365vh;
    text-align: center;
    display: table-cell;
    transition: opacity 2s;
    vertical-align: middle;
    opacity: 0;
    z-index: 201;
}