body {  
  height: 100%;
  width: 100%;
  color: #fff;
  /*
  font-family: 'Montserrat', sans-serif;
  */
  font-family: 'Roboto', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  /*letter-spacing: 2px;*/
  padding: 0;
  margin: 0;
}

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

a:hover {
  color: rgb(51, 143, 228);
  text-decoration: none;
}

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	z-index: -5;
  /* preserve aspect ratio */
  min-width: 100%;
  min-height: 100%;
}

.main { 
  min-height: 100%;
  z-index: 5;
}

.cookie-container {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
  font-size: 18px;
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: rgb(2, 41, 68);
  /*background: rgba(47, 54, 64, 1);*/
  color: #f5f6fa;
  padding: 0 32px;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.500);

  transition: 400ms;
}

.cookie-container.active {
  bottom: 0;
}

.cookie-container a {
  color: #f5f6fa;
}

.cookie-container a:hover {
  color: #e4239a;
  text-decoration: underline;
}

.cookie-btn {
  font-family: 'Roboto Condensed', sans-serif;
  background: #1975ca;
  border: 0;
  color: #f5f6fa;
  padding: 12px 18px;
  font-size: 18px;
  margin-bottom: 16px;
  border-radius: 0px;
  cursor: pointer;
}

.cookie-btn:hover {
  background: #1d85e7;
}


/* Media queries breakpoints */

/* mobile portrait */
@media screen and (max-width: 767px) {
  .main {
    width: 90%;
    text-align: center;
    padding: 80px 5% 60px 5%;}
  .forte {
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    width: 70%;
    margin: 0 15% 0 15%;
    letter-spacing: 4px;
    line-height: 130%  padding: 0 0 0px 0;}
  .piano {
    font-weight: 100;
    font-size: 18px;
    line-height: 100%;
    padding: 0 0 0px 0;
    width: 60%;
    line-height: 130%;
    margin: 10px 20% 0 20%;}
  .kontakt {
    font-weight: 200;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0px;}
}

/* tablets */
@media screen and (min-width: 768px) {
  .main  {
    width: 80%;
    text-align: left;
    padding: 120px 10% 80px 10%;}
  .forte {
    font-weight: 800;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 130%;
    padding: 0 0 0px 0;}
  .piano {
    font-weight: 100;
    font-size: 18px;
    padding: 0 0 0px 0;
    line-height: 130%  }
  .kontakt {
    font-weight: 200;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 0px;}
}

/* desktops */
@media screen and (min-width: 1280px) {
  .main  {
    width: 70%;
    text-align: left;
    padding: 220px 15% 80px 15%;}
  .forte {
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 130%;
    padding: 0 0 0px 0;}
  .piano {
    font-weight: 100;
    font-size: 22px;
    padding: 0 0 0px 0;
    line-height: 130%  }
  .kontakt {
    font-weight: 200;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0px;}
}