@font-face {
    font-family: "timeline";
    src: url(../media/typefaces/Timeline.ttf);
}

.fullscreen-bg {
    position: fixed;
    background-color: white;
    background: url('../media/image/BGSplash.png') center center / cover no-repeat;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

div[class*="round"]
{
    background-color: #F7F3BA;
    height: 130px;
	width: 130px;
    border-radius: 50%;
    box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
}

img
{
	margin-top: 13%;
}

#logo
{
	margin-top: 43%;
}

h3
{

	font-family: "timeline";
}

a:hover, a
{
	color: #E50F74;
	text-decoration: none;
}

#enter
{
	margin: 5% auto 0 auto;
	width: 60%;
	height: 10%;
	border: 5px solid #8ACBC2;
	border-radius: 5%;
	box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
}

@media (min-width: 768px)
{
	#enter
	{
		margin: 5% auto 0 auto;
		width: 50%;
		height: 10%;
	}

	#logo
	{
		margin-top: 26%;
	}

	div[class*="round"]
	{
	    background-color: #F7F3BA;
	    height: 150px;
	    width: 150px;
	    border-radius: 50%;
	    box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
	}
}

@media (min-width: 992px)
{
	#enter
	{
		margin: 5% auto 0 auto;
		width: 20%;
		height: 10%;
		border: 5px solid #8ACBC2;
		border-radius: 5%;
		box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
	}

	#logo
	{
		margin-top: 22%;
	}

	div[class*="round"]
	{
	    background-color: #F7F3BA;
	    height: 160px;
	    width: 160px;
	    border-radius: 50%;
	    box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
	}
}

@media (min-width: 1200px) 
{

	#enter
	{
		margin: 5% auto 0 auto;
		width: 20%;
		height: 10%;
		border: 5px solid #8ACBC2;
		border-radius: 5%;
		box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
	}

	#logo
	{
		margin-top: 16%;
	}

	div[class*="round"]
	{
	    background-color: #F7F3BA;
	    height: 175px;
	    width: 175px;
	    border-radius: 50%;
	    box-shadow: 2px 0px 10px 8px rgba(120,120,120,0.4);
	}
}