a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }



#hero {
            height:100vh;
            width:100%;
            background:black;
            display:flex;
            align-items:center;
            justify-content: center;
}


#hero video {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      z-index:5;
      object-fit:cover;
      font-family:'object-fit: cover';
}


#hero .texture {
      width:100%;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      z-index:15;
      background:url('../texture.png');
}


#hero .caption {

      position:relative;
      z-index:20;	
      text-align:center;
      padding: 40px;
      color:#ffffff;
}



#hero .caption h1 {

      text-transform: none;
      font-size:1.5em;
      font-weight:100;
      font-family: 'Lato', sans-serif;
      margin-bottom:0.5rem;
}

#hero .caption h2 {
      font-weight:100;
      font-size:1em;
      margin-bottom:0.5rem;
      font-family: 'Lato', sans-serif;
}




@media screen and (min-width:768px)
{
      #hero .caption h1 {
            font-size:1.5em;
      }

      #hero .caption h2 {
            font-size:1.50rem;
      }
}




@media screen and (min-width:992px)
{
      #hero .caption h1 {
            font-size:1.5em;
      }

      #hero .caption h2 {
            font-size:2rem;
      }
}



@media screen and (min-width:1200px)
{
      #hero .caption h1 {
            font-size:1.5em;
      }

      #hero .caption h2 {
            font-size:2.0rem;
      }
}
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: 'Open Sans Condensed', sans-serif;
}

div[class*=box] {
  width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
}



.btn {
  line-height: 50px;
  height: 50px;
  text-align: center;
  width: 250px;
  cursor: pointer;
  Margin: 20px;
}

/* 
========================
      BUTTON ONE
========================
*/
.btn-one {
  color: #FFF;
  transition: all 0.3s;
  position: relative;
  width: 200px;
}
.btn-one span {
  transition: all 0.3s;
}
.btn-one::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(255,255,255,0.5);
  border-bottom-color: rgba(255,255,255,0.5);
  transform: scale(0.1, 1);
}
.btn-one:hover span {
  letter-spacing: 2px;
}
.btn-one:hover::before {
  opacity: 10; 
  transform: scale(1, 1); 
}
.btn-one::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s;
  background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
  opacity: 0; 
  transform: scale(0.1, 1);
}


/* 
========================
      BUTTON TWO
========================
*/
.btn-two {
  color: #FFF;
  transition: all 0.5s;
  position: relative; 
}
.btn-two span {
  z-index: 2; 
  display: block;
  position: absolute;
  width: 100%;
  height: 100%; 
}
.btn-two::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.btn-two::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.5s;
  border: 1px solid rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.btn-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}


/* 
========================
      BUTTON THREE
========================
*/
.btn-three {
  color: #FFF;
  transition: all 0.5s;
  position: relative;
}
.btn-three::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(255,255,255,0.1);
  transition: all 0.3s;
}
.btn-three:hover::before {
  opacity: 0 ;
  transform: scale(0.5,0.5);
}
.btn-three::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.5);
  transform: scale(1.2,1.2);
}
.btn-three:hover::after {
  opacity: 1;
  transform: scale(1,1);
}