body, html {
  margin: 0;
  width: 100%;

  font-family: 'futura', Arial, sans-serif;

  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: white;
  background-color: white;
}
.loginSfondo{
    background-image: url('img/sfondo_2.jpg');
}
.playerSfondo{
  background-image: url('img/sfondo_3.jpg');

}
@font-face {
    font-family: "futura";
    font-weight: normal;
    src: url("font/futura-light.ttf");
}
@font-face {
    font-family: "futura";
    font-weight: bold;
    src: url("font/futura_bold.ttf");
}
#login_section{
  height: calc(100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
}
.box{
  height: calc(100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;

}
#logout{
  color: white;
  background-color: #4b6f6e;
  height: 30px;
  width: 80px;
  border: none;
  outline: #7a6b44;

}
#logout:focus{
  -webkit-appearance: none;
  outline: solid 1px white;
}

.loginButton{
  font-family: 'futura', Arial, sans-serif;
  color: white;
  background-color: #4b6f6e;
  border: none;
  width: 130px;
  font-size: 18px;
  border-radius: 5px;
  font-weight: normal;
  letter-spacing: 1px;

}
.loginButton:focus{
  -webkit-appearance: none;
  outline: solid 1px white;
}
#emailLogin{
  width: 200px;
  border-color: #4b6f6e;
box-shadow: none !important;
border-style: solid;
color: #4b6f6e;
-webkit-appearance: none;
}
}
#emailLogin::placeholder{
  color:#4b6f6e;
}
#emailLogin:focus{
border-color: #4b6f6e;
  outline: solid 1px white;
  /* border-style:solid 1px #7a6b44; */
}
#lang{
  color: #4b6f6e;
}
#player_section{
  display: flex;
  flex-direction: column;
}

img{
  padding: 20px;
}


h1{
  font-size: 28px;
}

#player{
  margin: 0 auto;
}
.player-wrapper{
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 100%;
}
#iframePlayer {
  top:0;
  left: 0;
  position: absolute;
}
#player-section{

  margin: 0 auto;
  width: 100%;
  height: 100%;
}


@media (max-width: 576px) {

  .box{
      min-height: 600px;
  }

}
 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .box{
      min-height: 620px;
  }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .box{
      min-height: 750px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .box{
      min-height: 850px;
  }

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

.box{
    min-height: 1000px;
}
}
@media (min-width: 1400px) {


}
@media (min-width: 1600px) {

}
@media (min-width: 2000px) {

}
#teaser{
  top:0 !important;
}