#map {
        height: 80vh;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
        margin-bottom: 50px;
    }

.fill { 
    min-height: 95vh;
    height: 95vh;
}

#lang-menu
{ 
    width: 50px;
    min-width: 100px;
}
#lang-menu div a.dropdown-item
{ 
    width: 50px;
    min-width: 50px;
}

.dropdown-menu {
  min-width: 50px !important;
}

.three-pillars, .campain 
{
  text-align: center;
  margin-top: 20px;
}
p{
  text-align: justify;
}

.button_lead{
  text-align: center;
}

.centered h1{
  font-size: calc(20px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  /*font-size: 18px;
  font-size: 5vw;*/
}

.lead
{
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  /*font-size: 14px;
  font-size: 4vw;*/
}

.centered p a
{
  font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  /*font-size: 14px;
  font-size: 4vw;*/
}

ul {
  /*list-style-type: none;
  list-style-image: url('../images/Rotaract_Logo_Map.png');*/
  list-style-image: url('../images/Rotaract.gif');
  text-align: left;
}

/* Centered text */
.centered {
  position: absolute;
  /*margin-top: 50px;*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  max-width: 600px;
  padding-left: 10px;
  padding-right: 10px;
}

.title_video
{
  margin-top: calc(20px + 0%);
}

footer
{
  font-size: small;
  margin-top: calc(20px + 0%);
  margin-bottom: calc(20px + 0%);
}
/*Bellow Small devices (landscape phones, 576px and up)*/
@media (max-width: 575px) {
  .centered{
  top: 19%;
  min-width: 90%;
  }
.call-to-action{
  margin-top: 50px;
}

}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .centered{
  top: 20%;
  min-width: 70vw;
  margin-top:20px;
}

.call-to-action{
  margin-top: 50px;
}


}

/*Bellow Small devices (landscape phones, 370px and down)*/
@media (max-width: 370px) {
  .centered{
  top: 17%!important;
  min-width: 90%;
}
.title_video {
    margin-top: calc(20px + 50%);
}
}
/*Bellow Small devices (landscape phones, 478px and down)*/
@media (max-width: 487px) {
  .centered{
  top: 19%;
  min-width: 90%;
}
.centered.german{
  top: 21.5%;
  min-width: 90%;
}

.centered.german p.button_lead{
  margin-bottom: -4px;
}



.title_video {
    margin-top: calc(20px + 35%);
}

/*
.lead
{
  font-size: 14px;
  font-size: 4vw;
}
*/
.call-to-action{
  margin-top: 50px;
}

}
/*Bellow Small devices (landscape phones, 400px and down)*/
@media (max-width: 400px) {
.title_video {
    margin-top: calc(20px + 40%);
}
}



/*Bellow Small devices (landscape phones, 370px and down)*/
@media (max-width: 370px) {
.title_video {
    margin-top: calc(20px + 50%);
}
}
/*Bellow Small devices (landscape phones, 320px and down)*/
@media (max-width: 320px) {
.title_video {
    margin-top: calc(20px + 65%);
}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
  .centered{
  top: 30%;
  min-width: 70vw;
}
 }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
    .centered{
  top: 40%;
  min-width: 50%;
}
 }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  .centered{
    width: 50% !important;
    min-width: inherit;
    max-width: 1080px!important;
    top: 25%;
  }
  .title_video {
    margin-top: -10px;
}
 }