/* FONTS */
@font-face {
  font-family: "Catamaran";
  src: url("../fonts/Catamaran-Regular.ttf");
  font-weight: lighter;
}
@font-face {
  font-family: "Catamaran-SemiBold";
  src: url("../fonts/Catamaran-SemiBold.ttf");
  font-weight: normal;
}
@font-face {
  font-family: "Catamaran-Bold";
  src: url("../fonts/Catamaran-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Catamaran-ExtraBold";
  src: url("../fonts/Catamaran-ExtraBold.ttf");
  font-weight: bolder;
}
















/* COLORS */
:root {
  --darkgray: rgb(30,30,30);
  --lightgray: rgb(242,242,242);
  --xlightgray: rgb(247,249,253);
  --blue: rgb(108,147,235);
  --darkblue: rgb(73,111,218);
  --darkestblue: rgb(36,72,161);
  --yellow: rgb(247,182,7);
  --darkyellow: rgb(246,132,7);
  --darkestyellow: rgb(216,102,0);
  --lightmetal: #eef2fa;
  --metal: rgb(227,232,241);
  --darkmetal: rgb(169,182,202);
  --darkestmetal: rgb(82,95,102);
  --red: red;
}
/* TEXT COLORS */
.darkgray { color: var(--darkgray); }
.lightgray { color: var(--lightgray); }
.xlightgray { color: var(--xlightgray); }
.white { color: white; }
.blue { color: var(--blue); }
.darkblue { color: var(--darkblue); }
.darkestblue { color: var(--darkestblue); }
.yellow { color: var(--yellow); }
.darkyellow { color: var(--darkyellow); }
.darkestyellow { color: var(--darkestyellow); }
.lightmetal { color: var(--lightmetal); }
.metal { color: var(--metal); }
.darkmetal { color: var(--darkmetal); }
.darkestmetal { color: var(--darkestmetal); }
.red { color: var(--red); }
.green { color: rgb(50,205,50); }
.orange { color: orange; }
/* BACKGROUNDS */
.darkgray-bg { background: var(--darkgray); }
.lightgray-bg { background: var(--lightgray); }
.xlightgray-bg { background: var(--xlightgray); }
.white-bg { background: white; }
.blue-bg { background: var(--blue); }
.darkblue-bg { background: var(--darkblue); }
.darkestblue-bg { background: var(--darkestblue); }
.yellow-bg { background: var(--yellow); }
.darkyellow-bg { background: var(--darkyellow); }
.darkestyellow-bg { background: var(--darkestyellow); }
.lightmetal-bg { background: var(--lightmetal); }
.metal-bg { background: var(--metal); }
.darkmetal-bg { background: var(--darkmetal); }
.darkestmetal-bg { background: var(--darkestmetal); }
.red-bg { background: var(--red); }
.green-bg { background: rgb(50,205,50); }
.orange-bg { background: orange; }
.yellowgradient-bg {
  background: var(--yellow);
  background: linear-gradient(90deg, var(--yellow) 0%, var(--darkyellow) 100%);
}
.yellowgradientsecond-bg {
  background: var(--darkyellow);
  background: linear-gradient(90deg, var(--darkyellow) 0%, var(--darkestyellow) 100%);
}
.yellowgradientfull-bg {
  background: var(--yellow);
  background: linear-gradient(90deg, var(--yellow) 0%, var(--darkestyellow) 100%);
}
.bluegradientfull-bg {
  background: var(--blue);
  background: linear-gradient(90deg, var(--blue) 0%, var(--darkblue) 100%);
}
.bluegradientsecond-bg {
  background: var(--darkblue);
  background: linear-gradient(90deg, var(--darkblue) 0%, var(--darkestblue) 100%);
}
.bluegradientfull-bg {
  background: var(--blue);
  background: linear-gradient(90deg, var(--blue) 0%, var(--darkestblue) 100%);
}


















/* FONTS */
a, p, h1, h2, h3, h4, h5, input, select, textarea, button, label, li, th, td, .dataTables_info {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: var(--darkgray);
  font-family: 'Catamaran', sans-serif;
  font-weight: lighter;
}
label {
  font-family: 'Catamaran-Bold', sans-serif;
  font-weight: bold;
}
h1, h2, h3, h4, h5 {
  text-transform: uppercase;
  font-weight: bolder;
  margin-bottom: 20px;
  font-family: 'Catamaran-Bold', sans-serif;
  font-weight: bold;
}
h1 {
  font-size: 50px;
  line-height: 50px;
}
h2 {
  font-size: 40px;
  line-height: 40px;
}
h3 {
  font-size: 35px;
  line-height: 35px;
}
h4 {
  font-size: 28px;
  line-height: 28px;
}
h5, h5 a.linkwithin {
  font-size: 23px;
  line-height: 23px;
}
p, a, li, th, td  {
  font-size: 15px;
  line-height: 19px;
}
p.bigger {
  font-size: 18px;
  line-height: 23px;
}
a, a:hover {
  -webkit-transition: .2s linear all;
  -o-transition: .2s linear all;
  transition: .2s linear all;
  text-decoration: none;
}
b {
  font-family: 'Catamaran-Bold', sans-serif;
  font-weight: bold;
}
.center {
  text-align: center;
}
.indent {
  margin-left: 22px;
}















/* COMMON ELEMENTS */
html, body {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: var(--xlightgray);
  overflow-x: hidden;
}
section {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  left: 0;
  top: 0;
  min-height: 100vh;
}
.main {
  position: relative;
  float: left;
  width: calc(100% - 140px);
  height: auto;
  min-height: calc(100vh - 144px);
  margin-top: 64px;
  margin-left: 60px;
  padding: 40px;
}
.main.no-m {
  margin-left: 0;
  width: calc(100% - 80px);
}
.main.fixed {
  height: calc(100vh - 144px);
}
.main.docs {
  margin-left: 380px;
  width: calc(100% - 460px);
}
.content {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}
.content.centered {
  top: 50%;
  transform: translateY(-50%);
}
.main-header {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  text-align: center;
  margin-bottom: 40px;
}
.main-header h1 {
  font-size: 32px;
  line-height: 36px;
  margin-bottom: 10px;
}
@media all and (max-width: 1440px){
  .main-header h1 {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 10px;
  }
}
@media all and (max-width: 1020px){
  .main.docs {
    margin-left: 60px;
    width: calc(100% - 140px);
  }
}
@media all and (max-width: 920px){
  .content.centered {
    top: 0;
    transform: none;
  }
  .main.fixed {
    height: auto;
  }
}
@media all and (max-width: 620px){
  .main {
    width: calc(100% - 100px);
    margin-left: 60px;
    padding: 20px;
  }
  .main.no-m {
    margin-left: 0;
    width: calc(100% - 40px);
  }
  .main.docs {
    margin-left: 60px;
    width: calc(100% - 100px);
  }
}