@charset "UTF-8";

/* CSS rules go below */

body{
    background: url("../../content/thermic.gif");
    background-position: center;
    background-size: 2000px;
    background-repeat: repeat-y;
}

div {
  height: 400px;
  width: 50%;
  margin: 150px 0 500px;
  overflow-x: hidden;
  overflow-y: hidden;
}


.one {
   
  background: url("../../content/pointy.gif");
  background-position:left;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.two {
  background: url("../../content/loop.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.three{
  
  background: url("../../content/tv_diamonds.gif");
  background-position: 90%;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.four{
  background: url("../../content/prespetive.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.five{
  background: url("../../content/diaplusspiral.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.six{
  background: url("../../content/minispiral.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.seven{
  background: url("../../content/multi.gif");
  background-position: right;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.eight{
  background: url("../../content/tv_diamonds.gif");
  background-position: left;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.nine{
  background: url("../../content/moire.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.ten{
  background: url("../../content/loop.gif");
  background-position: right;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.eleven{
  background: url("../../content/diaplusspiral.gif");
  background-position: left;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.twelve{
  background: url("../../content/pointy.gif");
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}



.expand {
  height: 400px;
  width: 100%;
  margin: 0;
}

.one    { margin-left: -20; }
.two    { margin-left: 50%; }
.three  { margin-left: 50%; }
.four   { margin-left: -10%; }
.five   { margin-left: 35%; }
.six    { margin-left: 0%; }
.seven  { margin-left: 50%; }
.eight  { margin-left: -20%; }
.nine   { margin-left: 20%; }
.ten    { margin-left: 20%; }
.eleven { margin-left: -10%; }
.twelve { margin-left: 20%; }