@import url('https://fonts.googleapis.com/css?family=Raleway');


body {
    margin: 0;
    background: #000; 
    
  }

  .btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

  .decoratedBody {

    margin: 0;
    background: #000; 
    background-image: url('bgVid2.png');
    background-repeat: no-repeat;
    background-size: cover;

  }

  .decoratedBodyLand {
    margin: 0;
    background: #000; 
    background-image: url('echo_01.png');
    background-repeat: no-repeat;
    background-size: cover;
  }


  .decoratedListenSound {
    margin: 0;
    background: #000; 
    background-image: url('listensound.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .decoratedTouchTexture {
    margin: 0;
    background: #000; 
    background-image: url('touchtexture.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .decoratedSeeingVisual {
    margin: 0;
    background: #000; 
    background-image: url('seeingvisual.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .decoratedBodyMovement {
    margin: 0;
    background: #000; 
    background-image: url('bodymovement.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .decoratedAllFour {
    margin: 0;
    background: #000; 
    background-image: url('echo_All444.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  





  .decoratedBodyYouAreIn {

    margin: 0;
    background: #000; 
    background-image: url('land.png');
    background-repeat: no-repeat;
    background-size: cover;

    

  }


  .centerBlock {
    margin: auto;
    width: 50%;
    /*border: 3px solid green;*/
    padding: 10px;
    text-align: center;
  }


  .centerBlockLand{
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    padding-left: 150px;
    padding-right: 150px;
    background-color: rgba(255, 255, 255, 0.3);
    
  }

  .centerBlockListenSound{
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    padding-left: 150px;
    padding-right: 150px;
    background-color: rgba(255, 255, 255, 0.6);
    
  }

  .centerBlockTouchTexture{
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    padding-left: 150px;
    padding-right: 150px;
    background-color: rgba(255, 255, 255, 0.4);
    
  }

  .centerBlockYouAreIn{
    font-family: "Raleway", sans-serif;
    font-weight: bolder;
    padding-left: 150px;
    padding-right: 150px;
    background-color: rgba(255, 255, 255, 0.6);
    
  }

  .centerBlockYouAreIn h1{
    color: #da15b4;
  }

  .centerBlockYouAreIn h3{
    color: #da15b4;
    font-weight: bold;
  }

  .centerBlockLand h1{
    color: #1af40b;
  }

  .centerBlockLand h3{
    color: #1af40b;
    font-weight: bold;
  }

  .centerBlockListenSound h3, h1{
    color: #0be4f4;
    font-weight: bold;
  }

  .hotPinkText{
    color: #da15b4;
  }

  .hotBlue{
    color: #0be4f4;
  }

  .dayglowGreenText{
    color: #1af40b;
  }

  .nastyOrange{
    color: #f35208;
  }

  .payAttentionText{
    color: #e90839;
  }

  video { 
      position: fixed;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -100;
      transform: translateX(-50%) translateY(-50%);
   background: url('bgVid2.png') no-repeat;
    background-size: cover;
    transition: 1s opacity;
  }
  .stopfade { 
     opacity: .5;
  }
  
  #polina { 
    font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
    font-weight:100; 
    background: rgba(0,0,0,0.3);
    color: white;
    padding: 2rem;
    width: 33%;
    margin:2rem;
    margin-top:8rem;
    float: right;
    font-size: 1.2rem;
  }
  h1 {
    font-size: 3rem;
    text-transform: uppercase;
    margin-top: 0;
    letter-spacing: .3rem;
  }
  #polina button { 
    display: block;
    width: 80%;
    padding: .4rem;
    border: none; 
    margin: 1rem auto; 
    font-size: 1.3rem;
    background: rgba(255,255,255,0.23);
    color: #fff;
    border-radius: 3px; 
    cursor: pointer;
    transition: .3s background;
  }
  #polina button:hover { 
     background: rgba(0,0,0,0.5);
  }
  
  a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background:rgba(0,0,0,0.5);
    padding: .5rem;
    transition: .6s background; 
  }
  a:hover{
    background:rgba(0,0,0,0.9);
  }
  @media screen and (max-width: 500px) { 
    div{width:70%;} 
  }
  @media screen and (max-device-width: 800px) {
    html { background: url(assets/bgVid2.png) #000 no-repeat center center fixed; }
    #bgvid { display: none; }
  }

  input[type=button], input[type=submit], input[type=reset] {
    background-color: #da15b4;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: bold;
  }