@import url(http://reset5.googlecode.com/hg/reset.min.css);

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,.1);
}


.container {
  width: 1280px;
  margin: 5px auto;
  padding: 0;
}

header {
  background: gray;
  width: 100%;
  height: 300px;
  margin-bottom: 2.5px;
}

h1 a {
  font-family: "Titillium", sans-serif;
  font-size: 100px;
  font-weight: 700;
  color: Magenta;
  opacity: .55;
  z-index: 9900;
  text-decoration: none;
}
h1 a:hover {
  opacity: 1;
}

h3 {
  font-family: "Titillium", sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 40px 0 0 0;
  /* margin-left: 20px; */
  border-bottom: 3px #000 solid;
  letter-spacing: 1px;
}

h5 {
  font-family: "Titillium", sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 20px 0;
/*   margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px; */
  line-height: 26px;
}


#perpetuate {
  width: 535px;
  height: 82px;
  position: fixed;
  left: 50%;
  margin-left: -267.5px;
  top: 50%;
  margin-top: -41px;
  z-index: 9900;
}
#perpetuate:hover {
  cursor: pointer;
}

#about_text {
  width: 700px;
  position: relative;
  left: 50%;
  margin-left: -350px;
  padding: 10px 0;
}

#movie {
  width: 700px;
  height: auto;
  position: relative;
  left: 50%;
  margin-left: -350px;
  padding: 20px 0;
}


h4 a{
  font-size: 30px;
  width: 20px;
  top: 10px;
  right: 10px;
  position: fixed;
  color: black;
  text-decoration: none;
  opacity: .55;
}
h4 a:hover {
  opacity: 1;
  text-decoration: none;
}



/* T E S T   C O D E */

/* img.testimg:hover {
    opacity: 1;
}
img.testimg {
    filter: none;
    opacity: .75;
}
 */
/* E N D   T E S T   C O D E */



.final {
  width:  310px;
  height: 310px;
  float: left;
 /*  background: #09F; */
  margin: 5px;
  /* background: url('Untitled-1.jpg'); */
  background-size: 100% 100%;
  background: rgba(0,0,0,.75);
}

.process {
  width: 150px;
  height: 150px;
  float: left;
  margin: 5px;
  background-size: 100% 100%;
}

img {
  width: 100%;
  height: 100%;
}

.image {
    position: relative;
    z-index: 8888;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.image:hover {
  opacity: .25;
}

.final p {
  position: absolute;
  color: white;
  top: 15px;
  z-index: 1;
  font-family: "Titillium", sans-serif;
  padding: 70px 30px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 40px;
  text-transform: uppercase;
}

@media only screen and (max-width : 1024px) {
    .container {
      width: 960px;
      margin: 0 auto;
      padding: 0;
    }

}
@media only screen and (max-width : 768px) {
    .container {
      width: 640px;
      margin: 0 auto;
      padding: 0;
    }
    #about_text {
      width: 600px;
      position: relative;
      left: 50%;
      margin-left: -300px;
      padding: 10px 0;
    }
    
    #movie {
      width: 600px;
      height: auto;
      position: relative;
      left: 50%;
      margin-left: -300px;
      padding: 20px 0;
    }

}

@media only screen and (max-width : 640px) {
    .container {
      width: 320px;
      margin: 0 auto;
      padding: 0;
    }
    h1 a {
      font-family: "Titillium", sans-serif;
      font-size: 50px;
      font-weight: 700;
      color: Magenta;
      opacity: .55;
      z-index: 9900;
      text-decoration: none;
    }
    #perpetuate {
      width: 270px;
      height: 32px;
      position: fixed;
      left: 50%;
      margin-left: -145px;
      top: 50%;
      margin-top: -16px;
      z-index: 9999;
    }
    #about_text {
      width: 310px;
      position: relative;
      left: 50%;
      margin-left: -155px;
      padding: 10px 0;
    }
    
    #movie {
      width: 310px;
      height: auto;
      position: relative;
      left: 50%;
      margin-left: -155px;
      padding: 20px 0;
    }
    h3 {
      font-family: "Titillium", sans-serif;
      font-size: 20px;
      text-transform: uppercase;
      font-weight: 700;
      padding: 20px 0 0 0;
      border-bottom: 3px #000 solid;
      letter-spacing: 1px;
    }
    
    h5 {
      font-family: "Titillium", sans-serif;
      font-size: 14px;
      font-weight: 400;
      padding: 20px 0;
      line-height: 20px;
    }

}