body {
  margin: -16px 0px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.top-container {
  margin: 0 auto;
  background: #888 url(../img/back.jpg) fixed no-repeat;
  background-size: 100% auto;
  height: 1100px;
}
/*
  background: #888 url(../img/back.jpg) fixed top center no-repeat;

div {
  margin: 0 auto;
  background: #888 url(hd_1600x1040.jpg) no-repeat;
  background-size: 100% auto;
  height: 600px;
}
*/

.header {
  padding: 8px 16px;
  background: #888;
  color: #f1f1f1;
}

.content {
  /* background: url(../img/jk-logo.jpg) fixed no-repeat; */
  padding: 0px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 112px;
}



/* unvisited link */
a:link { color: black; }
/* visited link */
a:visited { color: black; }
/* mouse over link */
a:hover { color: red; }
/* selected link */
a:active { color: red; }

p {
    width: 280px;
    background-color:yellow;
}

p:hover {
    width: 280px;
    background-color:yellow;
}

div .info-1 {
 /* position:absolute; */
    position:relative;
    width: 110px;
    height: 30px;
	  overflow: hidden;
	  white-space: nowrap;
    padding: 10px;
    font-weight: 80;
    font-size: 1.2em;
    color: white;

    -moz-transition:    padding 10s;
    -webkit-transition: padding 10s;
    -o-transition:      padding 10s;
    transition:         padding 10s;
}

div .info-1:hover {
    padding: 10px 180px 360px 10px;

    -moz-transition:    padding 3s;
    -webkit-transition: padding 3s;
    -o-transition:      padding 3s;
    transition:         padding 3s;
}



div .info-2  {
    background-color: #caffee;
    color: blue;
    width: 500px;

    -moz-transition-property:           background-color, color, width;
    -moz-transition-duration:           3s, 2s, 3000ms;
    -moz-transition-timing-function:    linear, ease-in, ease;
    -moz-transition-delay:              0s, 2500ms, 0s;

    -webkit-transition-property:        background-color, color, width;
    -webkit-transition-duration:        3s, 2s, 3000ms;
    -webkit-transition-timing-function: linear, ease-in, ease;
    -webkit-transition-delay:           0s, 2500ms, 0s;

    -o-transition-property:             background-color, color, width;
    -o-transition-duration:             3s, 2s, 3000ms;
    -o-transition-timing-function:      linear, ease-in, ease;
    -o-transition-delay:                0s, 2500ms, 0s;

    transition-property:                background-color, color, width;
    transition-duration:                3s, 2s, 3000ms;
    transition-timing-function:         linear, ease-in, ease;
    transition-delay:                   0s, 2500ms, 0s;
}

div .info-2:hover  {
    background-color: blue;
    color: yellow;
    width: 100%;
}


div .info-3 {
    width: 200px;
    padding: 10px;
    font-weight: 700;
    text-align: center;
    font-size: 30px;
    background-color: white;
    border: 1px solid #999;
    color: #ff0000;

    -moz-transition:    padding 300ms ,background-color linear  300ms 0s;
    -webkit-transition: padding 300ms ,background-color linear  300ms 0s;
    -o-transition:      padding-left 300ms ,padding-right 300ms ,background-color linear  300ms 0s;
    transition:         padding 300ms ,background-color linear  300ms 0s;
}

div .info-3:hover {
    background-color: #00f000;
    padding: 10px 200px;

    -moz-transition:    padding 3s ,background-color linear  1s 2s;
    -webkit-transition: padding 3s ,background-color linear  1s 2s;
    -o-transition:      padding-left 3s ,padding-right 3s ,background-color linear  1s 2s;
    transition:         padding 3s ,background-color linear  1s 2s;
}