body {
    margin: 0;
    background: #000; 
  }
  video { 
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: auto;
      /* z-index: -100; */
      transform: translateX(-50%) translateY(-50%);
   
    background-size: cover;
    transition: 1s opacity;
  }
  .stopfade { 
     opacity: .5;
  }
  #cent { 
      position: absolute;
        top: 50%;
       left: 50%;
      display: flex;
        justify-content: center;
        transform: translate(-50%, -50%);
      width: 50%;
  }
  #first{
      color: #FFFFFF;
      height: 100px;
      
  }
  #second{
      color: #FFFFFF;
      height: 100px;
      
  }

  #arrow {
    height: 30%;
    
  }
 
  
  #oui { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    color: white;
    padding: 2rem;
    margin:0.3rem;
    float: right;
    font-size: 1.2rem;
    position: absolute;
    bottom: 28px;
    right: 8px;
    
    visibility: hidden;
  
  }



  #non { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    color: white;
    padding: 2rem;
    margin:0.3rem;
    float: right;
    font-size: 1.2rem;
    position: absolute;
    bottom: 28px;
    left: 8px;
    visibility: hidden;
  }

  #top { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    color: white;
    padding: 2rem;
    
    margin:0.3rem;
    
    font-size: 1.2rem;
    
    bottom: 28px;
    right: 8px;
    
  
  }

  #right { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    color: white;
    padding: 2rem;
    width: 40%;
    margin:0.3rem;
    float: right;
    font-size: 1.2rem;
    position: absolute;
    bottom: 28px;
    right: 8px;
    animation: cssAnimation 0s 5s forwards;
    visibility: hidden;
  
  }
  #left { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    color: white;
    padding: 2rem;
    width: 40%;
    margin:0.3rem;
    float: right;
    font-size: 1.2rem;
    position: absolute;
    bottom: 28px;
    left: 8px;
    animation: cssAnimation 0s 5s forwards;
    visibility: hidden;
  }

  #playBtn {
      visibility: visible;   
  }
  
 
  h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .3rem;
  }
  #container {
      position: relative;
      
  }
  #left img { 
      max-width: 100%;
      max-height: 100%;
      
      border-radius: 50px;
  }
  #left img:hover { 
      box-shadow: 1px 3px 100px rgba(255, 255, 255, 0.619);
  }
  
  #right img { 
      max-width: 100%;
      max-height: 100%;
      
      border-radius: 50px;
  }
  #right img:hover { 
      box-shadow: 1px 3px 100px rgba(255, 255, 255, 0.619);
  }
  
  /* a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    
    padding: .5rem;
    transition: .6s background; 
    border-radius: 50px
  } */
  
  @media screen and (max-width: 500px) { 
    div{width:70%;} 
  }

  @media screen and (max-device-width: 500px) {
    
    #left {  
            width:100%;
            margin-bottom: 0em;
            bottom: 0em;
            left:0%;
            right:0%;
            }
    #right {
            width:100%;
            margin-bottom: 0em;
            bottom: 6em;	
            right:0%;
            left:0%;
            }
  }