html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	font-family: 'Raleway', sans-serif;
}

ul.menu {
    list-style-type: none;
	line-height: 400%;	
}
.footline{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 42;
	color: #4B4B4B;
}

.intro{
	height: 100%;
	width: 100%;
	margin: auto;
	background: url(../../img/bitcoin-sverige_bg.jpg) no-repeat 50% 50%;
	display: table;
	top: 0;
	background-size: cover;
}

.intro .inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;
	background: rgba(0,0,0,.3) /* Overlay Div, schwarz halbtransparent */
}


/* Der eigendliche Inhalt kommt hier rein. */
.content {
	max-width: 90%;
	margin: 0 auto;
	text-align: center;
}

.content h1 {
	color: #F9FDFF;
	text-shadow: 0px 0px 33px #FFF; /* Haupttitel LeuchtenFX */
	font-size: 450%;
	margin-top: -250px; /* Irgendwie sinnlos, hab ich was nicht gepeilt */
	text-transform: uppercase;
}

 
/*
BUTTON DEFINITION
Hier werden die Haupteigenschaften der Buttons beschrieben.
	- Die max Breite ist abhängig von der max Breite in .content
	- Die Textgrößen werden im Screen-spezifischen Teil festgelegt!
*/

.btn {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0px;
  width: 100%;
  max-width: 100%;
  background: #fff; /* fallback color for old browsers */
  background: rgba(240, 240, 240, 0.3);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.2s ease-out;
}


.btn:hover {
	/* Button Textfarbe*/
	color: #000;
	/* Button Rahmen: Dicke, Art, Farbe*/
	border: 3px solid #BD0003;
	/* Button Farbe*/
	background: #fff; /* fallback color for old browsers */
	background: rgba(255, 255, 255, 0.7);
}

/*
SCREENSIZE DEFINITION
Bestimmt die Eigenschaften von verschiedenen Elementen für unterschiedliche Bildschirmgrößen
Aktuell gibt es 8 Größen jeweils nach Screenbreite: 1920, 1280, 1024, 960, 800, 640, 480, 320
*/

@media screen and (max-width : 4096px ){
	.content h1 {
	text-shadow: 0px 0px 33px #FFF;
	font-size: 600%;
	margin-top: -150px;
	text-transform: uppercase;
	}
	
	/* Text- und Rahmen, Art und Größe für die Buttons */
	.btn {
	font-size: 300%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 500%;	
	}
}

@media screen and (max-width : 2560px ){
	.content h1 {
	text-shadow: 0px 0px 33px #FFF;
	font-size: 550%;
	margin-top: -150px;
	text-transform: uppercase;
	}
	
	/* Text- und Rahmen, Art und Größe für die Buttons */
	.btn {
	font-size: 300%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 400%;	
	}
}

@media screen and (max-width : 1920px ){
	.content h1 {
	text-shadow: 0px 0px 33px #FFF;
	font-size: 450%;
	margin-top: -150px;
	text-transform: uppercase;
	}
	
	/* Text- und Rahmen, Art und Größe für die Buttons */
	.btn {
	font-size: 300%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 400%;	
	}
}

@media screen and (max-width : 1280px ){
	.content h1 {
	text-shadow: 0px 0px 33px #FFF;
	font-size: 400%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 250%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 350%;	
	}
}

@media screen and (max-width : 1024px ){
	.content h1 {
	text-shadow: 0px 0px 22px #FFF;
	font-size: 350%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 200%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 300%;	
	}
}

@media screen and (max-width : 960px ){
	.content h1 {
	text-shadow: 0px 0px 22px #FFF;
	font-size: 350%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 200%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 300%;	
	}
}

@media screen and (max-width : 800px ){
	.content h1 {
	text-shadow: 0px 0px 22px #FFF;
	font-size: 350%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 200%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 300%;	
	}
}

@media screen and (max-width : 640px ){
	.content h1 {
	text-shadow: 0px 0px 22px #FFF;
	font-size: 330%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 180%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 280%;	
	}
}

@media screen and (max-width : 480px ){
	.content h1 {
	text-shadow: 0px 0px 22px #FFF;
	font-size: 220%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 130%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 230%;	
	}
}

@media screen and (max-width : 320px ){
	.content h1 {
	text-shadow: 0px 0px 11px #FFF;
	font-size: 200%;
	margin-top: -90px;
	text-transform: uppercase;
	}
	.btn {
	font-size: 100%;
	border: 2px solid;
	text-transform: uppercase;
	}
	.btn:hover {
	border: 2px solid;
	text-transform: uppercase;
	}
	ul.menu {
    list-style-type: none;
	line-height: 200%;
	margin: 0 auto;
	
	}
}