@CHARSET "UTF-8";

/*
 * Div a afficher si l'utilisateur essaye de consulter le site en format Landscape sur un telephone
 */
.pleaseturnyourmobiledevice{
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9998; /*because 9999 is the loader*/
  color: #FED100;
  text-align: center;
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'HelveticaNeueW01-67MdCn 692710';
  background-color: rgba(0, 0, 0, 0.88);
  background-image: url("../images/rotate-device.png");
  background-position: center;
  background-repeat: no-repeat;
}
.pleaseturnyourmobiledevice>span{
  position: absolute;
  top: 50%;
  margin-top: -90px;
  width: 100%;
  left: 0px;
}

body.loading{ background: #04092d; }
.hublotlovesfootballloader{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 2000px;
  height: 2000px;
  background: #04092d;
  z-index: 9999;
}
.hublotlovesfootballloader>.wrapper{
  height: 100%;
  width: 100%;
  transform: translate3d(0px, 0px, 10px);
  -webkit-transform: translate3d(0px, 0px, 10px);
}
.hublotlovesfootballloader>.wrapper>.inner{
  width: 60px;
  height: 60px;
  position: relative;
  top: 50%;
  margin: -30px auto 0px;
  -webkit-animation: rotateplane2 2.2s infinite linear;
  animation: rotateplane2 2.2s infinite linear;
}
.hublotlovesfootballloader>.wrapper>svg{
  width: 70px;
  height: 70px;
  position: relative;
  top: 50%;
  margin: -65px auto 0px;
  display: block;
  
  /* Pour safari, le SVG doit etre au dessus (pb avec -webkit-transform)*/
  transform: translate3d(0px, 0px, 100px);
  -webkit-transform: translate3d(0px, 0px, 100px);
}
.hublotlovesfootballloader>.wrapper>svg>path{
  stroke-dasharray: 205px;
  stroke-dashoffset: 205px;
}

@-webkit-keyframes rotateplane2 {
  0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
  100% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-359.9deg) }
}

@keyframes rotateplane2 {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 25% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  } 75% { 
    transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(-179.9deg);
  }
}