@font-face{
  font-family:star;
  src:url(../font/starjedi.ttf);
}
@font-face{
  font-family:starjol;
  src:url(../font/starjhol.ttf);
}
@font-face{
  font-family:galaxy;
  src:url(../font/galaxysymbols.ttf);
}
.bg-black{
  background-color:#000;
}
.text-star{
  font-family:starjol,verdana;
  font-size:10vmin;
  color:gold;
}
.text-jedi{
  font-family:star,verdana;
  font-size:3vmin;
}
.text-galaxy{
  font-family:galaxy,verdana;
  font-size:10vmin;
  color:peru;
}
.size-row{
  height:70vh;
}
.form-control{
  
  background-color:transparent !important;
}
.form-control:focus{
  border-color:peru;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px peru;
}
.img-header{
  background:url(../img/etoile.jpg) center center no-repeat;
  background-size:cover;
  min-height:70vh;
}
#container {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0%;
  left: 0%;
  
}

#burger {
  cursor: pointer;
  opacity: 0;
  -webkit-animation: fadein 0.2s ease 1s forwards;
          animation: fadein 0.2s ease 1s forwards;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
#burger .bun, #burger .filling {
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  height: 10%;
  width: 70%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  transition: top 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
  transition: top 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  transition: top 0.4s ease 0.4s, transform 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
}
#burger .bun:before, #burger .filling:before, #burger .bun:after, #burger .filling:after {
  content: "";
  display: block;
  height: 40%;
  background: white;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -45%);
          transform: translate(0%, -45%);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
#burger .bun:before, #burger .filling:before {
  left: 0;
  width: calc(-1px + 75%);
  border-radius: 10px 0px 0px 10px;
}
#burger .bun:after, #burger .filling:after {
  right: 0;
  width: calc(-1px + 25%);
}
#burger:hover .bun.top:before {
  background: #FEE;
  box-shadow: #F00 0px 0px 10px 1px;
}
#burger:hover .bun.bottom:before {
  background: #DFF;
  box-shadow: #0FF 0px 0px 10px 1px;
}
#burger:hover .filling:before {
  background: #EFE;
  box-shadow: #0F0 0px 0px 10px 1px;
}
#burger .bun.top {
  top: 25%;
}
#burger .bun.bottom {
  top: 75%;
}
#burger .filling {
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
          transform: translate(-50%, -50%) rotate(180deg);
  -webkit-animation: green-ls-out 0.8s ease forwards;
          animation: green-ls-out 0.8s ease forwards;
}
#burger.active .bun {
  border-radius: 3px;
  top: 50%;
  transition: top 0.4s ease, -webkit-transform 0.4s ease;
  transition: top 0.4s ease, transform 0.4s ease;
  transition: top 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}
#burger.active .bun.top {
  -webkit-transform: translate(-50%, -50%) rotate(-225deg);
          transform: translate(-50%, -50%) rotate(-225deg);
}
#burger.active .bun.bottom {
  -webkit-transform: translate(-50%, -50%) rotate(405deg);
          transform: translate(-50%, -50%) rotate(405deg);
}
#burger.active .filling {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-animation: green-ls-in 0.8s ease forwards;
          animation: green-ls-in 0.8s ease forwards;
}

nav {
  font-family: star;
  color: white;
  background:transparent;
  position: absolute;
  -webkit-transform: translatex(-100%);
          transform: translatex(-100%);
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  top: 80px;
  

  min-width: 300px;
  z-index:99999;
  font-size:2vmin;
}
nav.show {
  -webkit-transform: translatex(0%);
          transform: translatex(0%);
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  background: #ecfcff;
  box-shadow: #4df 0px 0px 0px 2px;
  font-size: 1.5em;
  line-height: 1.25em;
  padding: 0px;
  padding-left: 0px;
  margin: 16px 0px;
  width: 0;
  border-radius: 0px 100px 100px 0px;
  transition: width 0.2s ease, padding 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
nav ul li:hover {
  box-shadow: #4df 0px 0px 20px 2px;
  text-shadow: #4df 0px 0px 6px, #4df 0px 0px 10px;
}
nav ul li:hover {
  width: 100%;
  padding: 0px 16px 0px 0px;
  color: black;
  text-decoration: none;
}
nav ul li a {
  display: block;
  text-decoration: none;
  width: 300px;
  color: inherit;
  padding-left: 16px;
}
nav ul li a:hover {
 
  text-decoration: none;
  
}
nav ul li.green {
  background: #e6ffe6;
  box-shadow: #0F0 0px 0px 0px 2px;
}
nav ul li.green:hover {
  box-shadow: #0F0 0px 0px 20px 2px;
  text-shadow: #0F0 0px 0px 6px, #0F0 0px 0px 10px;
}
nav ul li.red {
  background: #ffe6e6;
  box-shadow: #F00 0px 0px 0px 2px;
}
nav ul li.red:hover {
  box-shadow: #F00 0px 0px 20px 2px;
  text-shadow: #F00 0px 0px 6px, #F00 0px 0px 10px;
}
nav ul li.purple {
  background: #fae6fa;
  box-shadow: #c0c 0px 0px 0px 2px;
}
nav ul li.purple:hover {
  box-shadow: #c0c 0px 0px 20px 2px;
  text-shadow: #c0c 0px 0px 6px, #c0c 0px 0px 10px;
}
nav ul li.yellow {
  background: #ffffe6;
  box-shadow: #FF0 0px 0px 0px 2px;
}
nav ul li.yellow:hover {
  box-shadow: #FF0 0px 0px 20px 2px;
  text-shadow: #FF0 0px 0px 6px, #FF0 0px 0px 10px;
}

@-webkit-keyframes green-ls-in {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
            transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
  }
}

@keyframes green-ls-in {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
            transform: translate(-50%, -50%) rotate(-90deg) translate(200%, 0%);
  }
}
@-webkit-keyframes green-ls-out {
  0% {
    -webkit-transform: translate(-50%, -200%) rotate(-90deg);
            transform: translate(-50%, -200%) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
}
@keyframes green-ls-out {
  0% {
    -webkit-transform: translate(-50%, -200%) rotate(-90deg);
            transform: translate(-50%, -200%) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
            transform: translate(-50%, -50%) rotate(-90deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
}
@-webkit-keyframes fadein {
  from {
    Opacity: 0;
  }
  to {
    Opacity: 1;
  }
}
@keyframes fadein {
  from {
    Opacity: 0;
  }
  to {
    Opacity: 1;
  }
}

.star-wars {
  display: flex;
  justify-content: center;
  position: relative;
  height: 100vh;
  color: #feda4a;
 
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 230%;
  font-weight: 600;
  letter-spacing: 6px;
  line-height: 150%;
  perspective: 400px;
  text-align: justify;
  overflow: hidden;
}

.crawl {
  position: relative;
  top: 99999px;
  transform-origin: 50% 100%;
  animation: crawl 60s linear;
  animation-iteration-count: infinite;
  
}

.crawl > .title {
  font-size: 80%;
  text-align: center;
}

.crawl > .title h1 {
  margin: 0 0 100px;
  text-transform: uppercase;
}

@keyframes crawl {
	0% {
    top: -100px;
    transform: rotateX(20deg)  translateZ(0);
  }
	100% { 
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2500px);
  }
}