@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display : block;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot');
  src: local(''),

       url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
}

html{
	scroll-behavior: smooth;
}

div{
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
	display: block;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	box-sizing:border-box;
	margin:0px;

  --primary-color:black;
  --background-opacity:0%;
}

.bg{
  position:fixed;

  z-index: -10;

  width: 100vw;
  height:100vh;
}

img.bg-image{
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity:var(--background-opacity);
}

section{
  overflow: hidden;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-height{
  height:0px;
}

section.grey{
  background-color: #f7f7f7;
}

a{
  font-weight: 400;
  color:var(--secondary-color);
  text-decoration: none;
}

a:hover{
  color:grey;
}

a.black{
  letter-spacing: 1px;
  text-decoration: none;
  color:white;
}

a.black:hover{
  text-decoration: underline;
}

.top-section-margin{
  width: 0;
  height: 80px;
  margin:0px;
}

p.colored{
  margin:0;
  display: contents;
}