* {
  padding:0px;
  margin:0px;
}

body {
  background:#111;
  font-family: 'PT Sans Caption', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: all .5s ease-in-out;
     -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
       -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;
}


a.contact {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 200px;
  height: 60px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0px;
  margin:30px auto 15px auto;
  opacity: 0;
  position: relative;
  -webkit-transition: all 1.1s ease-in-out;
     -moz-transition: all 1.1s ease-in-out;
      -ms-transition: all 1.1s ease-in-out;
       -o-transition: all 1.1s ease-in-out;
          transition: all 1.1s ease-in-out;
  -webkit-transform: translateX(0) translateY(20px);
     -moz-transform: translateX(0) translateY(20px);
      -ms-transform: translateX(0) translateY(20px);
       -o-transform: translateX(0) translateY(20px);
          transform: translateX(0) translateY(20px);
}

a.contact.active {
  opacity: 1;
  -webkit-transform: translateX(0) translateY(0px);
     -moz-transform: translateX(0) translateY(0px);
      -ms-transform: translateX(0) translateY(0px);
       -o-transform: translateX(0) translateY(0px);
          transform: translateX(0) translateY(0px);
}

.contact .top:before, .contact .bottom:before {
  width: 100%;
  top: -4px;
  height: 1px;
  background:#fff;
  left: 0px;
  right: 0px;
  content: ' ';
  display: block;
  position: absolute;
  opacity: .5;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

.contact .bottom:before {
  bottom:-4px;
  top: auto;
}

.contact .right:before, .contact .left:before {
  height: 100%;
  right: -4px;
  width: 1px;
  top: 0px;
  bottom: 0px;
  background:#fff;
  content: ' ';
  display: block;
  position: absolute;
  opacity: .5;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

.contact .left:before {
  left:-4px;
  right: auto;
}

.contact .top:after, .contact .bottom:after {
  width: calc(100% + 8px);
  top: 0px;
  height: 1px;
  background:#fff;
  left: -4px;
  right: 4px;
  content: ' ';
  display: block;
  position: absolute;
  opacity: .5;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

.contact .bottom:after {
  bottom:0px;
  top: auto;
}

.contact .right:after, .contact .left:after {
  height: calc(100% + 8px);
  right: 0px;
  width: 1px;
  top: -4px;
  bottom: 4px;
  background:#fff;
  content: ' ';
  display: block;
  position: absolute;
  opacity: .5;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

.contact .left:after {
  left:0px;
  right: auto;
}

.contact .white-text, .contact .dark-text {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 16px;
  top: 22px;
  left: 0px;
  opacity: 1;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
  -webkit-transform: translateX(0) translateY(0);
     -moz-transform: translateX(0) translateY(0);
      -ms-transform: translateX(0) translateY(0);
       -o-transform: translateX(0) translateY(0);
          transform: translateX(0) translateY(0);
  z-index: 10;
}

.contact .dark-text {
  color: #333;
  opacity: 0;
  -webkit-transform: translateX(0) translateY(15px);
     -moz-transform: translateX(0) translateY(15px);
      -ms-transform: translateX(0) translateY(15px);
       -o-transform: translateX(0) translateY(15px);
          transform: translateX(0) translateY(15px);
}

.contact:hover .white-text {
  -webkit-transform: translateX(0) translateY(-15px);
     -moz-transform: translateX(0) translateY(-15px);
      -ms-transform: translateX(0) translateY(-15px);
       -o-transform: translateX(0) translateY(-15px);
          transform: translateX(0) translateY(-15px);
  opacity: 0;
}

.contact:hover .dark-text {
  -webkit-transform: translateX(0) translateY(0px);
     -moz-transform: translateX(0) translateY(0px);
      -ms-transform: translateX(0) translateY(0px);
       -o-transform: translateX(0) translateY(0px);
          transform: translateX(0) translateY(0px);
  opacity: 1;
}

.contact .inner {
  width: 100%;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  display: block;
  z-index: 5;
  background:#fff;
  opacity: 0;
  -moz-transform: scale(.9);
  -webkit-transform: scale(.9);
  -o-transform: scale(.9);
  -ms-transform: scale(.9);
  transform: scale(.9);
  top: 4px;
  left: 4px;
  -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
       -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
  box-shadow: rgba(255, 255, 255, .7) 0px 0px 77px;
}

.contact:hover .inner {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.contact:hover .bottom:after, .contact:hover .top:after {
  left: 0px;
  right: 0px;
  width: 100%;

  opacity: 1;
}

.contact:hover .right:after, .contact:hover .left:after {
  top: 0px;
  bottom: 0px;
  height: 100%;

  opacity: 1;
}

.contact:hover .right:before    { bottom:0px; top:auto; height: 0px; }
.contact:hover .bottom:before   { left:0px; right:auto; width: 0px; }
.contact:hover .top:before      { right:0px; left:auto; width: 0px; }
.contact:hover .left:before     { top:0px; bottom:auto; height: 0px; }

h1, h2 {
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 40px;
  margin: 0px;
  opacity: 0;
  -webkit-transition: all .7s ease-in-out;
     -moz-transition: all .7s ease-in-out;
      -ms-transition: all .7s ease-in-out;
       -o-transition: all .7s ease-in-out;
          transition: all .7s ease-in-out;
          margin-bottom: 110px;
  letter-spacing: -1px;
  -webkit-transform: translateX(0) translateY(-15px);
     -moz-transform: translateX(0) translateY(-15px);
      -ms-transform: translateX(0) translateY(-15px);
       -o-transform: translateX(0) translateY(-15px);
          transform: translateX(0) translateY(-15px);
}

h1 {
  padding-top: 14%;
  width: 100%;
}

h2 {
  font-size:18px;
  position: relative;
  letter-spacing: 0px;
  margin: 20px auto 0px auto;
  max-width: 60%;
  line-height: 1.6;
}

h1.active, h2.active {
  -webkit-transform: translateX(0) translateY(0px);
     -moz-transform: translateX(0) translateY(0px);
      -ms-transform: translateX(0) translateY(0px);
       -o-transform: translateX(0) translateY(0px);
          transform: translateX(0) translateY(0px);
  opacity: 1;
}

.ctholder {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 5%;
  max-width: 90%;

}