html,
body {
	height: 100%;
	padding: 0;
	margin: 0;
	background-color:#202020;
}

#container {
	display: table;
	width: 100%;
	height: 100%;
	text-align: center;
}

#container > div {
	display: table-row;
	width: 100%;
}

#container > div > div {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	background-position:right bottom;
	background-size:cover;
	background-image:url(../image/landing_background.png);
	background-repeat: no-repeat;
}

@media screen and (max-width:1000px) {
		#container > div > div {
			background-position:50% 50%;
			background-image:url(../image/landing_background_mobile.png);
		}
}

/*@media screen and (max-height:320px) {
		#container > div > div {
			background-position:right bottom;
			background-image:url(../image/landing_background_mobile.png);
		}
}*/

#content > div {
	background-color: #202020;
}

#content > div > div {
	vertical-align: middle;
	text-align: center;
	background-color: #202020;

}



/*------------------------------------Start of index section style------------------------------------*/

indexholder {
	display:inline-block;
	width:100%;
}

indexspan {
	display:inline-block;
	max-width:561px;
	margin-bottom:20px;
}

@media screen and (min-height:1024px) {
		indexspan {
			/*float:none;*/
			margin-left:0px;
		}
}

outnow {
	display: block;
	color:#ffffff;
	margin-bottom:10px;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 60px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:4px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
}

@media screen and (max-width:580px) {
		outnow {
			font-size:50px;
			line-height:50px;
			margin-bottom:10px;
		}
}


landingimage {
	display: inline-block;
	background-position:center center;
	background-size:contain;
	background-image: url(../image/landingimage.png);
	background-repeat: no-repeat;
	font-size:0px;
}



@media screen and (max-width:1000px) {
		landingimage {
			border: 5px solid #ffffff;
			height:300px;
		}
}

@media screen and (max-width:480px) {
		landingimage {
			border: 5px solid #ffffff;
			height:250px;
		}
}

@media screen and (max-height:480px) {
		landingimage {
			border: 5px solid #ffffff;
			height:150px;
		}
}

artistnamelight {
	display: inline-block;
	width:100%;
	color:#ffffff;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 100px;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:0px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
}

@media screen and (max-width:600px) {
		artistnamelight {
			font-size:50px;
			line-height:50px;
		}
}

artisttitletextlight {
	display: inline-block;
	color:#ffffff;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:4px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
}

@media screen and (max-width:600px) {
		artisttitletextlight {
			min-width:200px;
			font-size: 12px;
		}
}

artisttitletextdark {
	display: inline-block;
	color:#202020;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:4px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
}

@media screen and (max-width:600px) {
		artisttitletextdark {
			min-width:200px;
			font-size: 12px;
		}
}

indexbuttonlight {
	display: inline-block;
	margin-top:10px;
	margin-right:13px;
	margin-bottom:20px;
	margin-left:13px;
	height:40px;
	width:140px;
	border: 1px solid #ffffff;
	border-radius:5px;
	background-color: rgba(255,255,255,0);
	color:#ffffff;
}

@media screen and (max-width:750px) {
		indexbuttonlight {
			margin-top:10px;
		}
}


indexbuttonlight a {
	display: block;
	width:100%;
	height:100%;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 12px;
	line-height:40px;
	color:#ffffff;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:10px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
	text-indent:10px;

	background-color: rgba(255,255,255,0);
	-webkit-transition:0.5s all ease-in-out;
	transition:0.5s all ease-in-out;
}

@media screen and (max-width:750px) {
		indexbuttonlight a {
			font-size:10px;
			font-weight:700;
		}
}

indexbuttonlight a:hover {
	background-color: rgba(255,255,255,1);
	color:#000000;
}

indexbuttondark {
	display: inline-block;
	margin-top:10px;
	margin-right:25px;
	margin-bottom:20px;
	margin-left:25px;
	line-height:50px;
	color:#202020;
	width:166px;
	height:51px;

	font-family: 'Source Sans Pro', sans-serif;
	font-size: 12px;
	font-weight:400;
	text-transform:uppercase;
	letter-spacing:10px;
	text-decoration: none;
	vertical-align: middle;
	text-align:center;
	text-indent:10px;
	border: medium solid #202020;
}

@media screen and (max-width:750px) {
		indexbuttondark {
			width:140px;
			height:41px;
			line-height:40px;
			margin-top:0px;
			font-size: 10px;
		}
}

indexbuttondark a {
	display: block;
	width:100%;
	height:100%;
	color:#202020;
}

indexbuttondark a:active {
	background-color: transparent;
}

/*------------------------------------End of index section style------------------------------------*/

/*------------------------------------Start of social section style------------------------------------*/

sociallogo {
	display: inline-block;
	margin-top:20px;
	margin-right:20px;
	margin-bottom:0px;
	margin-left:20px;
}

@media screen and (max-width:600px) {
		sociallogo {
			margin-right:10px;
			margin-left:10px;
		}
}

/*------------------------------------End of social section style------------------------------------*/

/*------------------------------------ start of default links style ------------------------------------*/
a:link {
	color:inherit;
	text-decoration: none;
}
a:visited {
	color:inherit;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color:inherit;
	text-decoration: none;
	outline:none;
}

/*------------------------------------ end of default links style ------------------------------------*/

</style>