#bg {
    background: linear-gradient(292deg, rgb(184, 54, 244) 2%, rgba(54,152,244,1) 33%, rgba(52,140,178,1) 80%, rgb(255, 43, 160) 100%);
}

#infoBox
{
    -moz-animation: header 0.6s 1.5s forwards;
    -webkit-animation: header 0.6s 1.5s forwards;
    -ms-animation: header 0.6s 1.5s forwards;
    animation: header 0.6s 1.5s forwards;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 0;
    cursor: default;
    display: inline-block;
    position: relative;
    top: -1em;
    vertical-align: middle;
    width: 50%;
    height: 70%;
    background-color: #f5f5f5EE;
    -webkit-box-shadow: 0px 10px 12px 10px rgba(0,0,0,0.15); 
    box-shadow: 0px 10px 12px 10px rgba(0,0,0,0.15);
	border-radius: 5px;
    color: black;
}

#boxContent
{
    margin: 0px 5px;
    height: 100%;
    padding: 15px 100px;
    overflow-y: scroll;
    text-align: left;
}

#boxContent a
{
    color: #222258 !important;
}

::-webkit-scrollbar-track
{
    margin: 5px;
	border-radius: 10px;
}

::-webkit-scrollbar
{
	width: 12px;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #555;
}


/* Wide */
@media screen and (max-width: 1680px) {

}

/* Normal */
@media screen and (max-width: 1280px) {
	#infoBox {
	    width: 70% !important;
	}
	
	#boxContent
	{
	    margin: 0px 8px;
	    height: 100%;
	    padding: 10px 70px;
	}
}

/* Mobile */
@media screen and (max-width: 736px) {
	#infoBox {
	    width: 90% !important;
    	    height: 80%;
	}
	
	#boxContent
	{
	    margin: 0px 2px;
	    height: 100%;
	    padding: 10px 20px;
	}
}

/* Mobile (Portrait) */
@media screen and (max-width: 480px) {
	#infoBox {
	    width: 90% !important;
    	    height: 80%;
	}
	
	#boxContent
	{
	    margin: 0px 2px;
	    height: 100%;
	    padding: 10px 20px;
	}
}