html {
    height: 100%;
	}

body  {
	height:97%;
	background: rgb(37,37,37);
	background: -moz-linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(11,11,11,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(11,11,11,1) 100%);
	background: linear-gradient(0deg, rgba(37,37,37,1) 0%, rgba(11,11,11,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#252525",endColorstr="#0b0b0b",GradientType=1);
	}

p 	{
	 font-family:Verdana;
	 font-size: 1em;
	 color:#9e9e9e;
	 text-decoration: none;
	 letter-spacing: -0.5px;
	}

.text_h { 
	font-family:Verdana;
	font-size: 2em;
	color:#9e9e9e;
	letter-spacing: -1px;
	}
	
.text_h a { 
	font-family:Verdana;
	color:#9e9e9e;
	letter-spacing: -1px;
	text-decoration: none;
	}
	
.text_h a:hover	{ 
	font-family:Verdana;
	color:#9e9e9e;
	letter-spacing: -1px;
	text-decoration: none;
	}

.text_h2 { 
	 font-family:Verdana;
	 font-size: 0.8em;
	 color:#9e9e9e;
	 letter-spacing: -0.5px;
	}
	
.text_h3 { 
	 font-family:Verdana;
	 font-size: 1em;
	 color:#9e9e9e;
	 letter-spacing: -0.5px;
	}

.link {
  	color: #cfcfcf;
  	text-decoration: none;
  	transition: 0.3s;
	}
	
.text_1 a {
  	color: #cfcfcf;
  	text-decoration: none;
	}
	
.text_1 a:hover {
  	color: #9e9e9e;
  	text-decoration: none;
  	transition: 0.3s;
	}


.formular {
  	color: #FFF;
	background-color: #212121;
	border: 1px solid #9e9e9e;
	border-radius: 0px;

}

.formularwrong {
	margin: auto;
  	color: #FFF;
	background-color: #212121;
	border: 1px solid #7a0e0e;
	border-radius: 0px;

}

.button {
	border: 1px solid #9e9e9e;
	background: #212121;
	color: #9e9e9e;
	font-size: 0.8em;
	font-family: Verdana;
	text-decoration: none;
	vertical-align: left;
	border-radius: 0px;

}

.button:hover {
	color: #cfcfcf;
	transition: 0.3s;
}

.button:active {
	border-top-color: #cfcfcf;
	background: #000;
}

textarea {
	resize:none;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.box  {
		width: 90%;
		height: 93%;
		margin: auto;
		background-color: black;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 15px;
		border: 1px solid #9e9e9e;
		box-shadow: 5px 5px 30px black;
		padding-bottom: 1em;
	}
	.header {
		width:20em;
		height:1.3em;
		margin:1em;
	}
	.subheader {
		width:20em;
		height:0em;
		margin:1em;
	}
	.content {
		position: fixed;
		left: 1.2em;
		right: 1.2em;
		bottom: 1em;
		top: 7.5em;
		width: auto;
		height: auto;
		overflow: auto;
		hyphens: auto;
	}
	.line   {
		position: absolute;
		top: 6em;
		margin: auto;
		width: 100%;
		height: 1px;
		background: rgb(0,0,0);
		background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	}
	.text_1 { 
	 	font-family:Verdana;
	 	font-size: 1em;
	 	color:#9e9e9e;
	 	text-decoration: none;
	 	letter-spacing: -0.5px;

	}

.menu  {
	position: absolute;
	top: 1.4em;
	right: 2em;
	width:1em;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 600px) {		
	.box  {
		width: 90%;
		height: 80%;
		margin: auto;
		background-color: black;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 15px;
		border: 1px solid #9e9e9e;
		box-shadow: 5px 5px 30px black;
	}
	.header {
		width:20em;
		height:1.3em;
		margin:1em;
	}
	.subheader {
		width:20em;
		height:6em;
		margin:1em;
	}
	.content {
		position: fixed;
		left: 1.2em;
		right: 1.2em;
		bottom: 1em;
		top: 6.8em;
		width: auto;
		height: auto;
		overflow: auto;
		hyphens: auto;
	}
	.line   {
		position: absolute;
		top: 5.5em;
		margin: auto;
		width: 100%;
		height: 1px;
		background: rgb(0,0,0);
		background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: linear-gradient(90deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	}
	.text_1 { 
	 	font-family:Verdana;
		 font-size: 0.9em;
		 color:#9e9e9e;
		 text-decoration: none;
		 letter-spacing: -0.5px;
	}
	.menu  {
		position: absolute;
		top: 1.4em;
		right: 3em;
		width:1em;
	}

}


/* Large devices (laptops/desktops, 980px and up) */
@media only screen and (min-width: 980px) {
	.box  {
		width: 57em;
		height: 34em;
		margin: auto;
		background-color: black;
		position: relative;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 15px;
		border: 1px solid #9e9e9e;
		box-shadow: 5px 5px 30px black;
	}
	.header {
		width:30em;
		height:2em;
		margin:1em;
	}
	.subheader {
		position: absolute;
		top: 2.25em;
		left: 19em;
		width:30em;
		margin:0em;
	}
	.content {
		position: absolute;
		top: 6.5em;
		width: auto;
		height: 25em;
		right: 1em;
		left: 10em;
		overflow: auto;
		hyphens: auto;
	}
  	.sidenav{
  		display: none;  	
  	}
	.text_1 { 
	 	font-family:Verdana;
	 	font-size: 0.75em;
	 	color:#9e9e9e;
	 	text-decoration: none;
	 	letter-spacing: -0.5px;
	}

}

/* The sidepanel menu */
@media only screen and (max-width: 980px) {
	.sidepanel {
  		height: 280px; /* Specify a height */
  		width: 0; /* 0 width - change this with JavaScript */
 		position: fixed; /* Stay in place */
  		z-index: 1; /* Stay on top */
  		top: 0.7em;
  		right: 0;
  		background-color: #000000; /* Black*/
  		overflow-x: hidden; /* Disable horizontal scroll */
  		padding-top: 60px; /* Place content 60px from the top */
  		transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
		border-bottom: 1px solid #9e9e9e;
	}

/* The sidepanel links */
	.sidepanel a {
  		padding: 8px 8px 8px 32px;
  		text-decoration: none;
  		font-size: 1em;
  		font-family:Verdana;
  		color: #9e9e9e;
  		display: block;
  		transition: 0.3s;
	}
	.sidepanelsmall a {
  		font-size: 0.8em;
	}
	.sidepanelsmall a:hover {
  		font-size: 0.8em;
	}
	.sidepanel a.active {
  		color: #cfcfcf;
	}


/* When you mouse over the navigation links, change their color */
	.sidepanel a:hover {
  		color: #cfcfcf;
  		
	}
/* Position and style the close button (top right corner) */
	.sidepanel .closebtn {
  		position: absolute;
  		top: -6px;
  		right: 7px;
  		font-size: 38px;
  		margin-left: 50px;
	}
/* Style the button that is used to open the sidepanel */
	.openbtn {
  		font-size: 20px;
  		cursor: pointer;
  		background-color: transparent;
  		color: #9e9e9e;
  		right: 2em;
  		border: none;
	}

	.openbtn:hover {
  		background-color: #transparent;
  		color: #cfcfcf;
	}
	
	.sidenav {
		display: none;
	}

}

@media only screen and (min-width: 980px) {
	.sidepanel {
		display: none;
	}
	.openbtn {
		display: none;
	}

}

@media screen and (min-width: 980px) {
  	.sidenav {
  		position: absolute;
  		top: 8em;
  		left: 1.5em;
  		display: block;
  		font-family:Verdana;
  		font-size: 0.8em;
  		line-height: 1.6em;
  		color: #9e9e9e;
  		text-decoration: none;
	}
	.sidenav a {
  		color: #9e9e9e;
  		text-decoration: none;		
  		transition: 0.3s;
	}
	.sidenav a:hover {
  		color: #cfcfcf;		
	}
	.sidenav a.active {
  		color: #cfcfcf;
	}
}

@media screen and (min-width: 980px) {
	.line   {
		position: absolute;
		top: 6em;
		left: 7.5em;
		width: 1px;
		height: 80%;
		background: rgb(0,0,0);
		background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(158,158,158,1) 50%, rgba(0,0,0,1) 90%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
	}
}

@media screen and (max-width: 980px) {
	.footer {
  		display: none;
  	}
}	
  		
@media screen and (min-width: 980px) {
	.footer {
		position: absolute;
		bottom: 0.8em;
		right: 0.8em;
		font-family:Verdana;
  		font-size: 0.7em;
  		color: #9e9e9e;
  		text-decoration: none;
	}
	.footer a {
  		color: #9e9e9e;
  		text-decoration: none;
  		transition: 0.3s;		
	}
	.footer a:hover {
  		color: #cfcfcf;		
	}
	.footer a.active {
  		color: #cfcfcf;
	}
}

/* Thumbs Small Screens */

@media only screen and (max-width: 600px) {
	.boxinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
                word-wrap: break-word;
		
	}
	
	.formcontainer {
		width: 100%;
		height: auto;
	}

	.thumbcontainer {
		top: 1em;
		width: 100px;
		height: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(20em, 25em));
		grid-template-rows: auto auto auto auto auto auto auto auto ;
		word-wrap: break-word;

	}
	
	.inside {
		height: auto;
		font-family:Verdana;
		font-size: 0.9em;
		width: 90%;
		color:#9e9e9e;
		letter-spacing: -1px;
		text-decoration: none;

	}
	
	.container {
  		position: relative;
  		width: 50%;
  		height:100px;
  		margin-top:2.5em;

	}

	.thumbs {
  		display: block;
  		width: 50%;
  		height: auto;
  		 margin-top:1em;
	}


	.thumbmobil {
		display: none;
	}

	.rolldown {
  		position: absolute;
  		width:100%;
  		height: auto;
  		top: 0;
  		left: 120px;
  		overflow: hidden;

	}

}

/* Thumbs Medium Screens */

@media only screen and (min-width: 600px) {
	.boxinside {
		max-width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}

	.thumbcontainer {
		top: 1em;
		width: auto;
		height: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(10em, auto));
	}
	
	.formcontainer {
		width: 25em;
		height: auto;
	}

	.inside {
		height: auto;
		width: 96%;
		font-family:Verdana;
		font-size: 0.8em;
		color:#9e9e9e;
		letter-spacing: -1px;
		text-decoration: none;
		margin: 0.5em;
		padding-top: 1em;
	}
	
	.container {
  		position: relative;
  		width: 50%;
  		height:85px;
	}

	.thumb {
  		width: 150px;
	}

	.thumbs {
  		display: block;
  		width: 100%;
  		height: auto;
	}

	.overlay {
  		position: absolute;
  		height:20px;
  		top: 0;
  		left: 0;
  		opacity: 0;
  		transition: 1s ease;
	}

	.rolldown {
  		position: absolute;
  		top: 85px;
  		padding: 1em;
 	 	background-color: #151515;
 	 	overflow: hidden;
 	 	width: 128px;
 	 	height: 0;
 	 	transition: .5s ease;
 	 	border-bottom: 1px solid #9e9e9e;
	}

	.container:hover .overlay {
  		opacity: 1;
		z-index: 65;
	}

	.container:hover .rolldown {
		height: 9em;  	
		z-index: 65;
	}



}

/* Thumbs Large Screens */

@media only screen and (min-width: 980px) {
	.boxinside {
		max-width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
		margin-right: 1.5em;
	}

	.thumbcontainer {
		top: 1em;
		width: auto;
		height: auto;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(10em, auto));
		grid-template-rows: 7em 7em;
}
	
	.inside {
		height: auto;
		font-family:Verdana;
		font-size: 0.7em;
		color:#9e9e9e;
		letter-spacing: -1px;
		text-decoration: none;
		margin: 0.5em;
		padding-top: 1em;
	}
	
	.container {
  		position: relative;
  		width: 50%;
  		height:85px;
	}

	.thumbs {
  		display: block;
  		width: 100%;
  		height: auto;
	}

	.thumb {
  		width: 150px;
	}

	.overlay {
  		position: absolute;
  		height:85px;
  		top: 0;
  		left: 0;
  		opacity: 0;
  		transition: 1s ease;
	}

	.rolldown {
  		position: absolute;
  		top: 85px;
  		padding: 1em;
  		background-color: #151515;
  		overflow: hidden;
  		width: 128px;
  		height: 0;
  		transition: .5s ease;
  		border-bottom: 1px solid #9e9e9e;
	}

	.container:hover .overlay {
  		opacity: 1;
		z-index: 65;
	}

	.container:hover .rolldown {
		height: 7em;  	
		z-index: 65;
	}


}


/* Container small Screens */
@media only screen and (max-width: 600px) {

	.skillcontainer {
		top: 1em;
		display: grid;
		width:auto;
		margin-left: auto;
		margin-right: auto;
		grid-template-columns: repeat(auto-fill, minmax(8em, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;
	}	
	
	.skillinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}

	.friendscontainer {
		top: 2em;
		display: grid;
		width:auto;
		grid-template-columns: repeat(auto-fill, minmax(14em, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;
	}

	.friendsinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}
}


/* Container Medium Screens */
@media only screen and (min-width: 600px) {

	.skillcontainer {
		top: 1em;
		display: grid;
		width:auto;
		margin-left: auto;
		margin-right: auto;
		grid-template-columns: repeat(auto-fill, minmax(23%, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;
	}
		
	.skillinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}

	.friendscontainer {
		top: 2em;
		display: grid;
		width:auto;
		grid-template-columns: repeat(auto-fill, minmax(14em, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;
	}

	.friendsinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}
}


/* Container Large Screens */

@media only screen and (min-width: 980px) {

	.skillcontainer {
		top: 1em;
		display: grid;
		width:auto;
		margin-right: 1.5em;
		grid-template-columns: repeat(auto-fill, minmax(20%, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;

	}
	
	.skillinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}

	.friendscontainer {
		top: 2em;
		display: grid;
		width:auto;
		margin-right: 1.5em;
		grid-template-columns: repeat(auto-fill, minmax(14em, auto));
		grid-column-gap: 1em;
		grid-row-gap: 1em;
	}

	.friendsinside {
		width: auto;
		height: auto;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
	}
}

/* Slideshow */
@media only screen and (min-width: 980px) {

	
	.slideshow {
		max-width: auto;
		height: 14em;
		border: 1px solid #9e9e9e;
		background-color: #212121;
		padding: 0.5em;
		margin-right: 1.5em;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(30%, auto));
		grid-column-gap: 0em;
	}

	.slidethumb {
		height:6em;
		width:100%;
		cursor:pointer;

	}
	.slidethumb:hover {
		height:6em;
		width:100%;

	}

}
	
	.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, auto));


}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  width: 57em;
		height: 34em;
border-radius: 15px;

  left: 0;
  top: 0;
  overflow: auto;
  background-color: black;

}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: black;
  margin: auto;
  padding: 0;
  width: 100%;
  max-width: 1200px;
}

/* The Close Button */
	.close {
  		color: #cfcfcf;
		position: absolute;
  		width:auto;
   		height:25px;
		padding:7px;  top: 15px;
		display: flex;
  		align-items: center;
  		justify-content: center;  right: 25px;
  		font-size: 35px;
  		font-weight: bold;
  		z-index:10;
  		background-color:black;
 	 	opacity: 0.5;
		border-radius: 5px 5px 5px 5px;
	}

.close:hover,
.close:focus {
  color: #9e9e9e;
  transition: 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
    opacity: 0.5;

  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #9e9e9e;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transition: 0.3s ease;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  filter: blur(3px);
  -webkit-filter: blur(3px);;
}

.active,
.demo:hover {
  filter: blur(0px);
  -webkit-filter: blur(0px);
  transition: 0.8s;
}

img.hover-shadow {
  filter: blur(0px);
  -webkit-filter: blur(0px);
  transition: 0.5s;
}

.hover-shadow:hover {
  filter: blur(0px);
  -webkit-filter: blur(0px);

}


}