/* colors
    dark green: #566E3D
    olive: #B9A44C
    orange: #FE9920
    cream: #FBE8D0
*/

body {
    margin: 0px auto;
}

main {
    position: relative;
    margin: 0px auto;
    width: 1440px;
    height: 3317px;
}

h1 {
    font-family: 'sweet_apricotregular';
    font-size: 72px;
    color: #FE9920;
}

h2 {
    font-family: 'sweet_apricotregular';
    font-size: 48px;
    color: #FE9920;
}

h3 {
    font-family: 'charminglinesregular';
    font-size: 100px;
    color: #fff;
}

p {
    font-family:'proxima-nova', sans-serif;
    font-size: 21px;
    color: #1D1D1D;
}

a {
    color: #fff;
    text-decoration: none;
}

.link2 {
    font-weight: 600;
    color: #FE9920;
    text-decoration: none;
}

.link2:hover {
    color: #FBE8D0;
    transition: all .5s ease;
}

nav {
    position: absolute;
    top: 10px;
    left: 580px;
    width: 700px;
    height: 85px;
    font-size: 24px;
    font-family: 'sweet_apricotregular';
    text-align: center;
    z-index: 100;
}

nav ul {
    height: auto;
    padding: 40px 15px;
    margin: 0px;
}

nav li {
    display: inline;
    padding: 15px;
}

nav a {
    text-decoration: none;
    color: #fff;
    transition: all .75s ease;
}

nav a:hover {
    color:#FE9920;
    cursor: pointer;
}

.logo {
    position: relative;
    top: 25px;
    left: 65px;
    width: 112px;
    height: 122px;
    z-index: 100;
}

.logo:hover {
    transition:all .5s ease;
	transform:scale(1.1);
}

.social-instagram {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 45px;
    left: 1270px;
    z-index: 99;
}

.social-facebook {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 45px;
    left: 1315px;
    z-index: 99;
}

.social-twitter {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 45px;
    left: 1360px;
    z-index: 99;
}

.social-instagram:hover, .social-facebook:hover, .social-twitter:hover {
    transition: all .5s ease;
    transform:scale(1.1);
    cursor: pointer;
}

.banner {
    position: absolute;
    width: 100%;
    height: 790px;
    top: 0px;
    left: auto;
    background-image: url(img/interior-header.png);
    background-size: cover;
    background-position: center center;
    z-index: -99;
}

#banner-cat {
    position: absolute;
    width: 985px;
    height: 703px;
    top: -335px;
    left: -5px;
    z-index: 99;
}

#banner-headline {
    position: absolute;
    width: auto;
    height: 183px;
    top: 355px;
    left: 1075px;
}

.banner2 {
    position: absolute;
    width: 100%;
    height: 2359px;
    top: 887px;
    left: 0px;
    background-image: url(img/interior-header2.png);
    background-size: cover;
    background-position: center center;
    z-index: -99;
}

.updated {
    position: absolute;
    top: 1040px;
    left: 460px; 
    width: auto;
    height: 43px;
    font-size: 50px;
    color: #FBE8D0;
}

.updated2 {
    position: absolute;
    top: 1115px;
    left:455px;
    width: auto;
    height: 20px;
    font-size: 24px;
    color: #fff;
}

hr.line {
    position: absolute;
    border: #B9A44C solid 1px;
    width: 923px;
    top: 1175px;
    left: 250px;
    z-index: 99;
}

hr.line2 {
    position: absolute;
    border: #B9A44C solid 1px;
    width: 923px;
    top: 3234px;
    left: 250px;
    z-index: 99;
}

.note {
    position: absolute;
    top: 1180px;
    left: 258px;
    width: 923px;
    height: 116px;
    color: #fff;
}

/* available section */

.available-text {
    position: absolute;
    top: 1325px;
    left: 95px;
    width: auto;
    height: 41px;
    font-size: 48px;
    color: #FBE8D0;
}

/* row 1 cats */

#row1-jax {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1458px;
    left: 109px;
    cursor: pointer;
}

#row1-suni {
    position:absolute;
    width: 230px;
    height: 230px;
    top: 1458px;
    left: 440px;
    cursor: pointer;
}

#row1-phoebe {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1458px;
    left: 770px;
    cursor: pointer;
}

#row1-unnamed {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1458px;
    left: 1099px;
    cursor: pointer;
}

/* row 2 cats */

#row2-xray {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1775px;
    left: 109px;
    cursor: pointer;
}

#row2-meg {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1775px;
    left: 440px;
    cursor: pointer;
}

#row2-twinkles {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1775px;
    left: 770px;
    cursor: pointer;
}

#row2-jersey {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 1775px;
    left: 1099px;
    cursor: pointer;
}

/* row 3 cats */

#row3-cash {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2092px;
    left: 109px;
    cursor: pointer;
}

#row3-figaro {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2092px;
    left: 440px;
    cursor: pointer;
}

#row3-george {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2092px;
    left: 770px;
    cursor: pointer;
}

/* row 4 cats */

#row4-lola {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2539px;
    left: 109px;
    cursor: pointer;
}

#row4-abbigail {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2539px;
    left: 440px;
    cursor: pointer;
}

#row4-cinnabun {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2539px;
    left: 770px;
    cursor: pointer;
}

#row4-muffin-man {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2539px;
    left: 1099px;
    cursor: pointer;
}

/* row 5 cat */

#row5-honeydew {
    position: absolute;
    width: 230px;
    height: 230px;
    top: 2857px;
    left: 109px;
    cursor: pointer;
}

/* application pending section */

.pending-text {
    position: absolute;
    top: 2402px;
    left: 112px;
    width: auto;
    height: 41px;
    font-size: 48px;
    color: #FBE8D0;
    
}

/* text position and style */

.row1-jax-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 1690px;
    left: 210px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row1-suni-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 1690px;
    left: 535px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row1-phoebe-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 1690px;
    left: 845px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row1-unnamed-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 1690px;
    left: 1173px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row2-xray-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2007px;
    left: 210px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row2-meg-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2007px;
    left: 535px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row2-twinkles-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2007px;
    left: 845px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row2-jersey-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2007px;
    left: 1186px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row3-cash-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2324px;
    left: 210px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row3-figaro-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2324px;
    left: 526px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row3-george-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2324px;
    left: 851px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row4-lola-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2772px;
    left: 210px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row4-abbigail-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2772px;
    left: 516px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row4-cinnabun-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2772px;
    left: 840px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row4-muffin-man-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 2772px;
    left: 1160px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row5-honeydew-text {
    position: absolute;
    width: auto;
    height: 25px;
    top: 3085px;
    left: 175px;
    font-weight: 700;
    color: #fff;
    z-index: 99;
}

.row1-jax-text a:hover, .row1-suni-text a:hover, .row1-phoebe-text a:hover, .row1-unnamed-text a:hover,

.row2-xray-text a:hover, .row2-meg-text a:hover, .row2-twinkles-text a:hover, .row2-jersey-text a:hover,

.row3-cash-text a:hover, .row3-figaro-text a:hover, .row3-george a:hover, 

.row4-lola-text a:hover, .row4-abbigail-text a:hover, .row4-cinnabun-text a:hover, .row4-muffin-man-text a:hover,

.row5-honeydew-text a:hover {
    transition: all .5s ease;
    color: #FE9920;
    cursor: pointer;
}

.pending {
    position: absolute;
}

footer {
    position: absolute;
    width: 1440px;
    height:75px;
    top: 3245px;
    left: 0px;
    background-color: #566E3D;
}

footer a:hover {
    transition: all .5s ease;
    color: #FE9920;
}

.foot-text {
    position: absolute;
    bottom: 5px;
    right: 415px;
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    z-index: 99;
}

@-webkit-keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob {
    0% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
    50% {
      -webkit-transform: translateY(-4px);
      transform: translateY(-4px);
    }
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @-webkit-keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
  @keyframes hvr-bob-float {
    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }
.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  }
  .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
  }  

@font-face {
    font-family: 'charminglinesregular';
    src: url('charminglines-webfont.woff2') format('woff2'),
         url('charminglines-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sweet_apricotregular';
    src: url('sweetapricot-webfont.woff2') format('woff2'),
         url('sweetapricot-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}