/* MAIN */
/* background-color: #222; */
/* color: #fff; */

/* link #63ff4b */

@font-face {
  font-family: 'Protofo';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../font/Protofo-Bold.woff2') format('woff2'),
    url('../font/Protofo-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Protofo_Reg';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../font/Protofo-Regular.woff2') format('woff2'),
    url('../font/Protofo-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
    url('../font/roboto-mono-v21-latin-regular.woff2') format('woff2'),
    url('../font/roboto-mono-v21-latin-regular.woff') format('woff');
}

body {
  background-color: #eee;
  max-width: 1200px;
  color: #444;
  line-height: 1.6;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75em;
  margin: 40px auto;
  padding: 0 10px;
  transition: background 0.75s ease;
}

code {
  font-size: 1.6em;
  color: #999;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  text-transform: uppercase;
  /* margin-top: 2em; */
}

.uppercase {
  text-transform: uppercase;
}

hr {
  margin-top: 2em;
  margin-bottom: 2em;
}

p {
  margin-top: 0px;
}

a {
  color: #aaa;
  text-decoration: none;
}

a:hover {
  color: #63ff4b;
}

.linkchange {
  color: #aaa;
  text-decoration: none;
}

img {
  /* margin-top: 4em; */
  /* margin-bottom: 2em; */
  max-width: 100%;
}

input {
  font-family: inherit;
}


::selection {
    background: #63ff4b; /* Highlight color */
    color: #222; /* Text color */
}

li {
  list-style-type: none;
}





/* BUTTON */
.button {
  display: block;
  background-color: #ffffff;
  font-weight: bold;
  font-family: inherit;
  display: block;
  padding: 10px 14px;
  font-size: 0.75em;
  color: #000000;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  border: 2px solid #000000;
  transition: background-color .2s ease-in;
}

.button:hover {
  background-color: #aaa;
  color: #63ff4b;
  background: repeating-linear-gradient(90deg, #aaa, #000000 4px, #000000 4px, #aaa 4px);
}






/* FOOTER */
.footer {
  /* border-top: 1px solid #fff; */
  /* margin-top: 10px; */
  margin-bottom: 10px;
  padding-top: 10px;
  /* padding-bottom: 10px; */
}

.footer-left p {
  float: left;
}

.footer-right {
  /* margin-top: 10px; */
  float: right;
}



/* VIDEO */
.video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	overflow: hidden;
	margin-bottom: 5px;
}

.video iframe,
.video object,
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}






/* SVG ICON */
a svg #logo {
  /* margin-top: 70px; */
  fill: #aaa;
  /* stroke: #B2454E; */

}

a svg:hover #logo {
  fill: #63ff4b;
  /* stroke: #FDCA30; */
}

a svg #svg {
  /* margin-top: 70px; */
  fill: #aaa;
  /* stroke: #B2454E; */

}

a svg:hover #svg {
  fill: #63ff4b;
  /* stroke: #FDCA30; */
}

.svgheader {
  display: inline-block;
  width: 128px;
  height: 64px;
  background-repeat: no-repeat;
}
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
}

.icon_ra {
  display: inline-block;
  width: 24px;
  height: 10.2px;
  background-repeat: no-repeat;
}







.popup {
  display: none; /* Hidden by default */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 1000;
}