@font-face {font-family: 'Raleway'; src: url(../fonts/Raleway.ttf);}
@font-face {font-family: 'Catamaran-Thin'; src: url(../fonts/Catamaran-Thin.ttf);}

:root {
  font-size: 16px;
  --background-color: #212529;
  --brand-color: #00f600;
  --text-color: #b3b4b5;
  --darkgray: #8b8b83;
  --midgray: #cdcdc1;
  --lightgray: #eeeee0;
  --notwhite: #fdf5e6;
  --link-color: #a1a1a1;
  --hover-color: #c6c7c9;
}

.parallax-section {background-attachment: fixed;	background-size: cover;}
.preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: -webkit-flex; display: -ms-flexbox;	display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: center; -ms-flex-pack: center;	justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: none repeat scroll 0 0 #ffffff;}
.sk-spinner-rotating-plane.sk-spinner {width: 40px;	height: 40px;	background-color: var(--brand-color); border-radius: 50%; -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; animation: sk-rotatePlane 1.2s infinite ease-in-out;}
@keyframes sk-rotatePlane {
  0% {-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg);}
  50% {-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);}
  100% {-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
  }

* {
  box-sizing: border-box; 
  margin: 0; padding: 0; 
  text-decoration: none; 
  list-style: none;
}

body {
  min-height: 100vh;
  background: var(--background-color);
  font-family: 'Catamaran-Thin', sans-serif;
  font-size: 1.2rem;
  color: var(--midgray);
  text-shadow: 0.1rem 0.1rem 0.1rem black; 
  text-align: center;
  overflow-x: hidden;
}

@media only screen and (max-width:599px){
.container {margin: 0 auto; width: 96%;}
.centerbox {margin: 0 auto; width: 90%;}
.textblock {margin-top: 2rem; margin-bottom: 2.6rem;}
}

@media only screen and (min-width:600px){
  .container {margin: 0 auto; width: 80%;}
  .centerbox {margin: 0 auto; width: 70%;}
  .textblock {margin-top: 2rem; margin-bottom: 2.6rem;}
}

h1 {font-family: 'Raleway'; font-size: 2.4rem; line-height: 115%; color: var(--brand-color); padding-top:1.8rem; padding-bottom: 0.4rem;}
h2 {font-family: 'Catamaran-Thin'; font-size: 1.6rem; line-height: 120%; color: var(--notwhite);padding-top:1.2rem; padding-bottom: 1.2rem;}
p {font-size: 1.2rem; line-height: 1.5rem;}
a {color: var(--link-color);}
a:hover {color: var(--hover-color);}
hr {color: #e0e0e0; margin: 0 auto 20px auto; width: 120px;}
.toTopAngle {width: 2.4rem;	height: autopx;	border: 0; background: transparent; position: fixed; bottom: 2.2em; right: 3%; opacity: 80%;}



/* ==LAYOUT-BORDER ================================== */
/*
.container {border: 1px solid transparent;}
.centerbox {border: 1px solid transparent;}
.navbar {border: 1px solid transparent;}
.cardbox {border: 1px solid transparent;}*/
/*
.container {border: 1px solid blue;}
.centerbox {border: 1px solid yellow;}
.navbar {border: 1px solid rebeccapurple;}
.cardbox {border: 1px solid aqua;}*/