@font-face {
  font-family: hand;
  src: url(../font/FaithAndGlory-Two/FaithAndGloryTwo.woff); }

@font-face {
  font-family: gentleman_text;
  src: url(../font/Gentleman/gentleman-100-hairline-webfont.woff); }

@font-face {
  font-family: gentleman_Title;
  src: url(../font/Gentleman/gentleman-400-light-webfont.woff); }

input[type="text"]:focus {
  outline: none; }

* {
  font-family: gentleman_text;
  font-size: 1.7vw; }

body {
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
  height: auto !important; }

#logo:hover {
  opacity: .8; }

header {
  position: relative;
  width: 100vw;
  height: 100vh;
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10vh;
  overflow: hidden; }
  header #full {
    min-height: 100%;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    opacity: .6; }
  header h1 {
    position: absolute;
    width: 90%;
    font-size: 4em;
    top: 40%;
    left: 10%;
    color: black;
    font-family: gentleman_Title;
    text-align: center; }
  header a {
    float: right;
    width: 20%;
    margin-top: -80vh !important;
    margin-left: 80%;
    position: fixed;
    z-index: 100000; }

#single .hand {
  width: 40vw;
  height: 10vw;
  position: relative;
  top: -93vh;
  left: 46vw; }
  #single .hand p {
    font-family: hand;
    font-size: 1.5rem;
    line-height: 3vw;
    display: inline-block;
    width: 50%; }
  #single .hand img {
    width: 23%;
    -webkit-transform: rotate(40deg) scaleY(-1);
    -ms-transform: rotate(40deg) scaleY(-1);
    transform: rotate(40deg) scaleY(-1);
    display: inline-block; }

article {
  width: 83vw; }
  article img {
    width: 50%;
    margin-right: 5%;
    margin-left: 5%;
    display: inline-block; }
  article p {
    width: 54%;
    display: inline-block;
    float: right; }
  article a {
    float: right;
    text-decoration: none;
    clear: both;
    color: black; }
  article a:hover {
    color: #efefef; }
  article a:visited {
    color: black; }

.bx-wrapper {
  margin-top: 10vh !important; }
  .bx-wrapper li {
    height: 90vh;
    overflow-y: hidden; }

.sga .bx-wrapper img {
  width: 100vw; }

.slider {
  position: relative; }
  .slider p {
    position: absolute;
    top: 40%;
    width: 100vw; }
  .slider #prev a, .slider #next a {
    text-decoration: none;
    font-size: 3em;
    display: inline-block;
    width: 2vw;
    height: 20vw;
    color: black;
    text-decoration: none;
    font-family: gentleman_Title; }
  .slider #prev a {
    margin-left: 3vw; }
  .slider #next a {
    float: right;
    margin-right: 3vw; }

.deux {
  width: 80%;
  margin: 5vh auto; }
  .deux img {
    width: 47%;
    margin: .2%;
    display: inline-block; }
  .deux p {
    width: 47%;
    display: inline-block;
    float: right; }
  .deux h2 {
    margin-top: 7vh;
    margin-bottom: 4vh; }

iframe {
  width: 92% !important;
  max-height: 70vh !important;
  margin: 0 1%; }

.expo img {
  max-width: 100%; }

.expo .bx-wrapper img {
  width: 100%; }

.fun .bx-wrapper img {
  max-width: 100vw; }

.fun article img {
  width: 45%; }

.fun article p {
  width: 45%; }

.fun .deux img {
  width: 49.2%; }

.ebull article img {
  width: 36%; }

.ebull .bx-wrapper li {
  height: 100vh;
  overflow-y: hidden; }
  .ebull .bx-wrapper li img {
    max-width: auto;
    max-height: 100vh;
    margin: 0 auto; }

.ebull .deux img, .ebull .deux p {
  width: 49%; }

.noel article p {
  width: 40%; }

.noel article img {
  width: 36%; }

.noel .bx-wrapper {
  margin-bottom: 10vh !important; }
  .noel .bx-wrapper li {
    height: 100vh;
    overflow-y: hidden; }

.noel .bx-wrapper img {
  max-width: auto;
  margin: 0 auto;
  height: 100%; }

.noel .deux img, .noel .deux p {
  width: 49%; }

.dalek header #full {
  min-width: 100%;
  height: 117%;
  opacity: .6;
  margin-top: -8%; }

.dalek article p {
  width: 40%; }

.motion video {
  width: 60vw;
  margin: 4em auto;
  display: block; }

footer {
  background-color: rgba(0, 0, 0, 0.7);
  -ms-flex-item-align: baseline;
  align-self: baseline;
  padding-bottom: 2vh; }
  footer img {
    width: 20vw;
    float: right;
    margin-top: 6.5%;
    display: inline-block; }
  footer ul {
    display: inline-block;
    width: 30vw; }
  footer li {
    list-style-type: none; }
  footer li a {
    text-decoration: none;
    color: floralwhite; }
  footer address {
    display: inline-block;
    color: floralwhite;
    width: 30vw;
    margin: 0;
    float: right;
    margin-top: 2%; }

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg); }
  50% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg); }
  100% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg); } }

#head .arrow:hover {
  -webkit-animation: wiggle 0.5s infinite;
  animation: wiggle 0.5s infinite; }

#respond {
  margin: auto;
  padding: 0 2.5em;
  border-left: solid 6px #00fbc0;
  margin-left: -2.5em;
  margin-top: 3em;
  margin-bottom: 4em; }

#respond .pers {
  width: 40%;
  margin-bottom: 3vw;
  display: inline-block;
  position: relative; }

#respond label {
  font-size: 1.5rem; }

#respond .sub {
  width: 85%; }

#respond .pers p {
  position: absolute;
  top: 0px;
  font-size: 1rem;
  margin: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

#respond .pers:hover p {
  font-size: 0.8rem;
  color: darkgrey;
  top: -65%;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

#respond .pers:hover input {
  color: black;
  background-color: rgba(139, 253, 255, 0.21);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

#respond .pers:hover span {
  font-size: 1rem; }

#respond .pers p input:focus {
  font-size: 1rem;
  color: darkgray;
  top: -65%;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background-color: rgba(139, 253, 255, 0.21); }

#respond .pers .focus {
  font-size: .8rem;
  color: darkgray;
  top: -65%;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

#respond .pers .focus span {
  font-size: 1rem; }

#respond .pers input {
  width: 90%; }

#respond input {
  background-color: rgba(139, 253, 255, 0);
  border: none;
  border-bottom: 1px inset;
  border-color: darkgrey;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  color: black; }

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none; }

#respond textarea {
  width: 80%;
  height: 30vh;
  border: none;
  border-left: 1px inset;
  background-color: rgba(0, 0, 0, 0);
  border-color: #00fbc0;
  margin: auto;
  resize: none;
  padding: 1vw;
  overflow: auto; }

#respond textarea:hover {
  border-left: 2px inset;
  border-color: #00fbc0;
  background-color: rgba(0, 0, 0, 0.03);
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }

#respond textarea:focus {
  border-left: 2px inset;
  border-color: #00fbc0;
  background-color: rgba(0, 0, 0, 0.03); }

#valid {
  margin-right: 14vw;
  margin-top: 3vh; }

#valid input {
  font-size: 1.3rem;
  border-bottom: 3px inset;
  border-color: #00fbc0; }

.error {
  padding: 5px 9px;
  border: 1px solid red;
  color: red;
  border-radius: 3px; }

.success {
  padding: 5px 9px;
  border: 1px solid green;
  color: green;
  border-radius: 3px; }

form span {
  color: red;
  font-size: 1.8rem; }

#commande #contenu {
  width: 80vw;
  margin: 0 auto; }
  #commande #contenu h1 {
    font-size: 3em; }
  #commande #contenu p {
    width: 70%; }
  #commande #contenu #respond p {
    width: 100%; }