/*----------------------------------------------------------------------------*\
    Headhesive Specific Styles
/*----------------------------------------------------------------------------*/

/**
 * Headhesive element clone
 * > `clone` class for the cloned element:
 *
 |  var options = {
 |      classes {
 |          clone: 'banner--clone';
 |      }
 |  }
 *
 */
.banner--clone {

    /* Required styles */
    position: fixed;
    top: 0;
    left: 0;
    padding: 3% 2%;
    /* Additional styles */
    background: rgb(96,96,96); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(96,96,96,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96,96,96,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(96,96,96,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(96,96,96,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    /* Translate -100% to move off screen */
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);

    /* Animations */
    -webkit-transition: all 300ms ease-in-out;
       -moz-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;

}
.banner--clone .eight.columns {
    margin-top: 0;
}


/**
 * Headhesive stick
 * > `stick` class for the cloned element:
 *
 |  var options = {
 |      classes {
 |          stick: 'banner--stick';
 |      }
 |  }
 *
 */
.banner--stick {

    /* Translate back to 0%; */
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
}


/**
 * Headhesive unstick
 * > `unstick` class for the cloned element:
 *
 |  var options = {
 |      classes {
 |          unstick: 'banner--unstick';
 |      }
 |  }
 *
 */
.banner--unstick {
    /* Not required to use, but could be useful to have */
}