/*
figcaption :hover {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
*/

.discription{margin-top: 0px;
margin-left: 8px;
margin-right: 8px;
margin-bottom:25px;}


.frame-border{border: 1px;
border-style: solid;
border-color: lightgray;
margin-bottom: 15px;}
.blue{background-color: deepskyblue;}
.green{background-color: lightgreen;}
.orange{background-color: orange;}



footer{background-color: black; height: 80px;
clear: both; text-align: center; align-content: center;
padding-top:33px; }

.bottom-buffer{padding-bottom:10px;}



.demo-reel{margin-top: 20px;
margin-left: 8px;
margin-right: 8px;
margin-bottom:20px;}

p{font-size: 12pt;}

.blue{height: 100px; background-color: lightskyblue;}
.orange{height: 100px; background-color: orange}
.green{height: 100px; background-color: lightgreen;}

.go-away{}
.come-back{padding-bottom: 20px; }
.come-back-head{padding-bottom: 0px; }



figure {
  overflow: hidden;
  position: relative;
    display: table;
}

figure img {
    display: table-cell;
}

figcaption {
  position: absolute;
  left: 0;
right: 0;
    bottom: 0;
  top: 0;
  text-align: center;
  font-weight: bold;
  width: 100%;
  display: table-cell;
    vertical-align: middle;
font-size: 10pt;}


figcaption div {
  display: flex;
    align-items: center;
    justify-content: center;
  position: relative;
/*  margin-top: 50%;*/
  opacity: 0;
  color: white;
    width: 100%;
    height: 100%;
  
}

/*
figcaption div:after {
  position: absolute;
  content: "";
  left: 0;
  right: 0;
  bottom: 40%;
  text-align: center;
  margin: auto;
  width: 0%;
  height: 2px;
  background: white;
}
*/

figure img {
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

figure:hover figcaption  {
  background: rgba(55, 55, 55, 0.5);
 transition: all 0.5s ease-in-out;
}

figcaption:hover div {
  opacity: 1;
  top: 0;
 transition: all 0.5s ease-in-out;

}

figcaption:hover div:after {
  width: 50%;
 transition: all 0.5s ease-in-out;


}

figure:hover img {
  -webkit-transform: scale3d(1.2, 1.2, 1);
  transform: scale3d(1.2, 1.2, 1);

}



.push-top{margin-top: -50px;}
.push-top-text{margin-top: 40px;}

.social{margin-top: 25px;
float: left;}

.facebook{animation: pulse .1s;
transition: fill .1s ease;
height: 23px;
padding-right: 10px;
fill:white;
float: left;

}

.facebook:hover {
 fill:grey;
transition: fill .5s ease;

}



.instagram:hover {
 fill:grey;
transition: fill .5s ease;

}


.instagram{animation: pulse .1s;
padding-top: 0px;
transition: fill .1s ease;
height: 60px;
float: left;
width: 22px;
fill:white;
margin-right: 10px;
margin-top: -6px;}

.vim:hover {
 fill:grey;
transition: fill .5s ease;

}



.vim{animation: pulse .1s;

transition: fill .1s ease;
height: 60px;
width: 22px;
fill:white;
margin-top: -18px;
float: left;
margin-right: 10px;
}


.no-hover a:hover {color: white;}
.no-hover a:visited {color: white;}
.no-hover a:active {color: white;}
.no-hover a:link {color: white;}

h2{color: white; letter-spacing: 1px; font-size: 5.5pt; line-height: 12pt;  }

h1 a:visited {color: white;}

li a:link {color: white;}

li a:visited {color: white;}

li a:hover {color: grey;
 -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;}

li a:active {color: white;}
.main-nav{}
h1{color: white;
font-size: 20px;
padding-top: 35px;
padding-bottom: 18px;
letter-spacing: 1px;
}

h3{
font-size: 20px;
padding-top: 35px;
padding-bottom: 5px;
}

label {font-family: sans-serif;}

.box{padding-left: 30px;}
.push-top{padding-top: 65px;}
.push-top-sml{padding-top: 20px;}
.push-bottom{padding-bottom: 50px;}
.push-bottom-sml{padding-bottom: 20px;}

.test{margin-top: 40px;
float: right;
margin-right: 57px;}

.test-two{
float: right;
margin-right: 59px;}


li{padding-bottom: 8px;
font-size: 8pt;}
.box li {   
    display: inline-block;
    letter-spacing: 1px;
}

@media (max-width: 1300px){

    .test-two{
        margin-right: 50px;}}

@media (max-width: 1020px){
.test{margin-top: 95px; margin-right: 0px;}
.test-two{margin-top: -45px; margin-right: 0px;}

.box{padding-left: 10px;}
h1{ padding-top: 25px;}

    }




@media (min-width: 64em){
    .black{background-color: black;
 min-height: 100vh; z-index: 2;
position: fixed;}
    .box li { display: block;}
    .come-back{display: none;}
    .come-back-head{display: none;}    


}

    





@media (max-width: 64em){


    .black{background-color:black; z-index: 1}
    li{padding-right: 10px;}
   h1{padding-bottom: 5px;}
    .box{margin-left: 10px;}
    .main-nav{padding-bottom: 10px;}
    .main-nav-bar{position: fixed;}
    .push-top{padding-top: 53px;}
    li{padding-bottom: 0px;}
    .go-away{display: none;}
    .social{float: right; margin-top: -45px;}
    .push-top-text{margin-top: 90px;}
    .demo-reel{margin-top: 20px;}
     

.push-top-sml{padding-top: 15px;}
.sticky.is-stuck {
  position:relative;}
    .design{margin-top: 32px;
margin-bottom: 170px;}
    .contact{margin-bottom: 125px;}
    .discription{margin-top: 10px;}
}



@media (max-width: 370px){
    .instagram{ height: 30px; width: 11px;
    margin-right: 5px; margin-top: 4px;} 
    .facebook{ height: 11px; padding-right: 5px; margin-top: 6px;}
    .vim{ height: 30px; width: 11px; margin-top: -2px;}
 .design{margin-top: 10px; margin-bottom: 10px;}
}