/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #2D051E;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #FF683D;
    text-shadow: none;
}

::selection {
    background: #FF683D;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}



.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Skrollr's styles from fixed-positioning.css
   ========================================================================== */
html, body {
width: 100%;
height:100%;
overflow-x: hidden;
position: relative;
font-family: 'Quicksand', sans-serif;
font-weight: 400;
}

.skrollable {
position: fixed;
z-index: 100;
}

.skrollr-mobile .skrollable { position:absolute; }
.skrollable .skrollable { position:absolute; }
.skrollable .skrollable .skrollable { position:static; }

/* ==========================================================================
   Preload background images
   ========================================================================== */
/* Preloader */
#preloader {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

.preload-images {
position: absolute;
left: -9999px;
top: -9999px;    
background: url(../img/chewy-head-neck.svg) no-repeat -9999px -9999px;
background: url(../img/chewy-head-neck.svg) no-repeat -9999px -9999px, 
url(../img/chewy-head-face.svg) no-repeat -9999px -9999px, 
url(../img/chewy-head-ear.svg) no-repeat -9999px -9999px, 
url(../img/chicken.svg) no-repeat -9999px -9999px, 
url(../img/hotdog.svg) no-repeat -9999px -9999px, 
url(../img/banana.svg) no-repeat -9999px -9999px, 
url(../img/watermelon.svg) no-repeat -9999px -9999px, 
url(../img/apple.svg) no-repeat -9999px -9999px, 
url(../img/peanut-butter.svg) no-repeat -9999px -9999px, 
url(../img/cheese.svg) no-repeat -9999px -9999px, 
url(../img/pizza.svg) no-repeat -9999px -9999px, 
url(../img/yogurt.svg) no-repeat -9999px -9999px, 
url(../img/drip.svg) no-repeat -9999px -9999px,
url(../img/sad-face-body.svg) no-repeat -9999px -9999px,
url(../img/head.svg) no-repeat -9999px -9999px,
url(../img/ears.svg) no-repeat -9999px -9999px,
url(../img/eyebrows.svg) no-repeat -9999px -9999px,
url(../img/nose.svg) no-repeat -9999px -9999px,
url(../img/eyes.svg) no-repeat -9999px -9999px,
url(../img/whites.svg) no-repeat -9999px -9999px,
url(../img/arrow-head.png) no-repeat -9999px -9999px,
url(../img/arrow-ears.png) no-repeat -9999px -9999px,
url(../img/arrow-eyes.png) no-repeat -9999px -9999px,
url(../img/arrow-furry.png) no-repeat -9999px -9999px,
url(../img/arrow-dark.png) no-repeat -9999px -9999px,
url(../img/arrow-face.png) no-repeat -9999px -9999px,
url(../img/arrow-belly.png) no-repeat -9999px -9999px,
url(../img/royce-mouth-bg.svg) no-repeat -9999px -9999px,
url(../img/royce-eyes.svg) no-repeat -9999px -9999px,
url(../img/royce-glasses.svg) no-repeat -9999px -9999px,
url(../img/royce-outline.svg) no-repeat -9999px -9999px,
url(../img/walk-tail2.svg) no-repeat -9999px -9999px,
url(../img/walk-hind2.svg) no-repeat -9999px -9999px,
url(../img/walk-leg2.svg) no-repeat -9999px -9999px,
url(../img/walk-body.svg) no-repeat -9999px -9999px,
url(../img/walk-head.svg) no-repeat -9999px -9999px,
url(../img/dog-body-sniffing.svg) no-repeat -9999px -9999px,
url(../img/dinosaur.svg) no-repeat -9999px -9999px,
url(../img/downward-dog-body.svg) no-repeat -9999px -9999px,
url(../img/downward-dog-shoulder.svg) no-repeat -9999px -9999px,
url(../img/downward-dog-chest.svg) no-repeat -9999px -9999px,
url(../img/ardenroyce-logo.svg) no-repeat -9999px -9999px,
url(../img/twitter.png) no-repeat -9999px -9999px,
url(../img/linkedin.png) no-repeat -9999px -9999px,
url(../img/mail.png) no-repeat -9999px -9999px,
url(../img/ipad.svg) no-repeat -9999px -9999px,
url(../img/chrome.svg) no-repeat -9999px -9999px;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin-bottom: .75em; }
b, strong { font-weight: 700; }
i, em { font-weight: 400; font-style: italic; }

h1 { 
font-family: 'Averia Sans Libre', sans-serif;
font-size: 4em;
font-weight: 400;
line-height: 1.2;
margin: .25em 0;
}

h2 { 
font-family: 'Delius Unicase', cursive;
font-size: 2em;
font-weight: 700;
margin: .25em 0 .5em 0;
}

h3 { 
font-family: 'Averia Sans Libre', sans-serif;
font-size: 1.6em;
font-weight: 400;    
margin: .25em 0;
}

h4 { 
font-size: 1.3em;
font-weight: 700;    
letter-spacing: -.03em;
margin: .25em 0 .15em 0;
}

#bg {
top: 0; 
left: 0;
width: 100%; 
height: 100%;
}

#question {
width:75%;
left:41%;
top: 30em;
margin-left:-30%;
text-align:center;
}

#ipad { 
background-image: url(../img/ipad.svg);    
width: 21.65em;
height: 18.5em;
left:40.5%;
-webkit-animation: ipad-float .75s infinite ease-out alternate;
-moz-animation: ipad-float .5s infinite ease alternate;
-o-animation: ipad-float .5s infinite ease alternate;
animation: ipad-float .5s infinite ease alternate;
}

@-webkit-keyframes ipad-float { 
    from { margin-top: 0; }
    to { margin-top: .75em; }
}
@-moz-keyframes ipad-float { 
    from { margin-top: 0; }
    to { margin-top: .75em; }
}
@-o-keyframes ipad-float { 
    from { margin-top: 0; }
    to { margin-top: .75em; }
}
@keyframes ipad-float { 
    from { margin-top: 0; }
    to { margin-top: .75em; }
}


#answer {
width:75%;
left:41%;
top:30%;
bottom: 0%;
margin-left:-30%;
text-align:center;
}

.quicksand { font-family: 'Quicksand', sans-serif; }

#who {
width:75%;
left:41%;
margin-left:-30%;
text-align:center;
}

#hungry {
width:75%;
left:41%;
margin-left:-30%;
text-align:center;
}

.hungee { 
background: #FFF;
-webkit-border-radius: 3em;    
-moz-border-radius: 3em;
border-radius: 3em;
color: #EBEBE3;    
font-family: 'Delius Unicase', cursive; 
font-weight: 700;
left:91%;
top: 35%;
margin-left:-20%;
padding: 2em;
text-transform: uppercase;
}

.talk { 
background: #95D4E1;
-webkit-border-radius: 3em;    
-moz-border-radius: 3em;
border-radius: 3em;
color: #E6E8E1;    
font-weight: 700;
/*margin-left:-20%;*/
padding: 1.5em;
}

.call { background: #D1868F; }

#arrow-big {
color: #FF683D;
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size: 1.25em;
width:30%;
left: 35%;
top: 60%;
bottom: 5%;
/*margin-left:-20%;*/

text-align:center;
text-transform: uppercase;
}

.big-triangle { 
width: 0; 
height: 0;
border-top: 40px solid #FF683D;
border-left: 65px solid transparent; 
border-right: 65px solid transparent; 
margin: 1em auto;
opacity: 1;
-webkit-animation: triangle .5s infinite ease alternate;
-moz-animation: triangle .5s infinite ease alternate;
-o-animation: triangle .5s infinite ease alternate;
animation: triangle .5s infinite ease alternate;
}

#scroll-down {
color: #FF683D;
font-family: 'Quicksand', sans-serif;
font-weight: 700;
width:20%;
left: 50%;
top: 85%;
bottom: 0%;
margin-left:-10%;
text-align:center;
text-transform: uppercase;
}

.down-triangle { 
width: 0; 
height: 0;
border-top: 20px solid #FF683D;
border-left: 15px solid transparent; 
border-right: 15px solid transparent; 
margin: 1em auto;
opacity: 1;
-webkit-animation: triangle .5s infinite ease alternate;
-moz-animation: triangle .5s infinite ease alternate;
-o-animation: triangle .5s infinite ease alternate;
animation: triangle .5s infinite ease alternate;
}

@-webkit-keyframes triangle { 
    from { opacity: 1; }
    to { opacity: .7; }
}
@-moz-keyframes triangle { 
    from { opacity: 1; }
    to { opacity: .7; }
}
@-o-keyframes triangle { 
    from { opacity: 1; }
    to { opacity: .7; }
}
@keyframes triangle { 
    from { opacity: 1; }
    to { opacity: .7; }
}

/* Dog snout */
#chewy-snout {
width: 32.9375em;  
height: 23.1875em; 
/*left:50%;*/
right: -70%;
bottom: 10%;
font-size: 1.2em;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;

-webkit-animation: snout 4s 2 ease-out alternate;
-moz-animation: snout 4s 2 ease-out alternate;
-o-animation: snout 4s 2 ease-out alternate;
animation: snout 4s 2 ease-out alternate;
}

@-webkit-keyframes snout { 
    0% { right: -70%; }
    25% { right: -30%; }
    60% { right: -70%; }
    100% { right: -70%; }
}
@-moz-keyframes snout { 
    0% { right: -70%; }
    25% { right: -30%; }
    60% { right: -70%; }
    100% { right: -70%; }
}
@-o-keyframes snout { 
    0% { right: -70%; }
    25% { right: -30%; }
    60% { right: -70%; }
    100% { right: -70%; }
}
@keyframes snout { 
    0% { right: -70%; }
    25% { right: -30%; }
    60% { right: -70%; }
    100% { right: -70%; }
}

/* Dog snout 2 */
/*#chewy-snout2 {
width: 32.9375em;  
height: 23.1875em; 
left:  -130%;
bottom: 10%;
font-size: 1.2em;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;

-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";

-webkit-animation: snoutl 5s 2 ease-out alternate;
-moz-animation: snoutl 5s 2 ease-out alternate;
-o-animation: snoutl 5s 2 ease-out alternate;
animation: snoutl 5s 2 ease-out alternate;
}

@-webkit-keyframes snoutl { 
    0% { left: -130%; }
    60% { left: -130%; }
    80% { left: -75%; }
    100% { left: -130%; }
}
@-moz-keyframes snoutl { 
    0% { left: -130%; }
    60% { left: -130%; }
    80% { left: -75%; }
    100% { left: -130%; }
}
@-o-keyframes snoutl { 
    0% { left: -130%; }
    60% { left: -130%; }
    80% { left: -75%; }
    100% { left: -130%; }
}
@keyframes snoutl { 
    0% { left: -130%; }
    60% { left: -130%; }
    80% { left: -75%; }
    100% { left: -130%; }
}*/

/* Dog head container */
#chewy-head {
width: 40.25em; 
height: 26.625em;
/*left:50%;*/
right: 0;
bottom: 0%;
margin-left:-10%;
font-size: 1.5em;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}

#nose, #neck, #face, #ear, #ipad,
.chicken, .hotdog, .banana, .watermelon, .apple, .peanut-butter, .cheese, .pizza, .yogurt, .chrome, .drip,
#sad-face-body, #head, #ears, #eyebrows, #sniff, #eyes, #whites,
.arrow-head, .arrow-ears, .arrow-eyes, .arrow-furry, .arrow-dark, .arrow-face, .arrow-belly,
#royce-body, #royce-mouth-bg, #royce-eyes-bg, #royce-glasses-bg, .drop, #logo, #social ul li a {  
background-color: transparent;
background-repeat: no-repeat;
background-size: contain; 
}

#nose, #neck, #face, #ear { 
position: absolute;
}

#nose { 
-webkit-border-radius: 1.75em;
-moz-border-radius: 1.75em;
border-radius: 1.75em;
top: 11.5%;
left: 2.5%;
width: 3.5em;
height: 3.5em;
background: #2D051E;
opacity: .2;
-webkit-animation: nose .25s infinite ease-in alternate;
-moz-animation: nose .25s infinite ease-in alternate;
-o-animation: nose .25s infinite ease-in alternate;
animation: nose .25s infinite ease-in alternate;
}
/* Animation for nose */
@-webkit-keyframes nose { 
    from { opacity: .2; }
    to { opacity: 0; }
}
@-moz-keyframes nose { 
    from { opacity: .2; }
    to { opacity: 0; }
}
@-o-keyframes nose { 
    from { opacity: .2; }
    to { opacity: 0; }
}
@keyframes nose { 
    from { opacity: .2; }
    to { opacity: 0; }
}

#neck { 
background-image: url(../img/chewy-head-neck.svg); 
background-position: right bottom;
width: 40.25em;
height: 18.4375em;
bottom: -3%;
right: -43%;
}

#face { 
background-image: url(../img/chewy-head-face.svg); 
background-position: left top;
width: 32.9375em;  
height: 23.1875em; 
top: 3%;
left: 3%;
}

#ear { 
background-image: url(../img/chewy-head-ear.svg); 
width: 13.8125em;
height: 11.8125em;
top: 6%;
left: 39%;

-webkit-animation: ear 2s infinite ease-in alternate;
-moz-animation: ear 2s infinite ease-in alternate;
-o-animation: ear 2s infinite ease-in alternate;
animation: ear 2s infinite ease-in alternate;

-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
/* Animation for ear */
@-webkit-keyframes ear { 
    0% { -webkit-transform: rotate(0deg); }
    10% { -webkit-transform: rotate(3deg); }
    90% { -webkit-transform: rotate(3deg); }
    1000% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes ear { 
    0% { -moz-transform: rotate(0deg); }
    10% { -moz-transform: rotate(3deg); }
    90% { -moz-transform: rotate(3deg); }
    1000% { -moz-transform: rotate(0deg); }
}
@-o-keyframes ear { 
    0% { -o-transform: rotate(0deg); }
    10% { -o-transform: rotate(3deg); }
    90% { -o-transform: rotate(3deg); }
    1000% { -o-transform: rotate(0deg); }
}
@keyframes ear { 
    0% { transform: rotate(0deg); }
    10% { transform: rotate(3deg); }
    90% { transform: rotate(3deg); }
    1000% { transform: rotate(0deg); }
}

/* food div width and height */
.chicken { width: 14.0625em; height: 5.1875em; }
.hotdog { width: 14.625em; height: 3.875em; }
.banana { width: 17.125em; height: 6.3125em;}
.watermelon { width: 12.375em; height: 12.25em; }
.apple { width: 8.25em; height: 4.25em; }
.peanut-butter { width: 7em; height: 11.0625em; }
.cheese { width: 9.875em; height: 10.5em; }
.pizza { width: 13.75em; height: 15.125em; }
.yogurt { width: 10.375em; height: 7.3125em; }
.chrome { width: 9em; height: 9em; }
.drip { width: .75em;  height: 1.5625em; }

/* food background image */
.chicken { background-image: url(../img/chicken.svg); }
.hotdog { background-image: url(../img/hotdog.svg); }
.banana { background-image: url(../img/banana.svg); }
.watermelon { background-image: url(../img/watermelon.svg); }
.apple { background-image: url(../img/apple.svg); }
.peanut-butter { background-image: url(../img/peanut-butter.svg); }
.cheese { background-image: url(../img/cheese.svg); }
.pizza { background-image: url(../img/pizza.svg); }
.yogurt { background-image: url(../img/yogurt.svg); }
.chrome { background-image: url(../img/chrome.svg); }
.drip { background-image: url(../img/drip.svg); }


/* food */
.food { 
background-position: left top;
font-size: 1.5em;
}

#drool {
position: absolute;
bottom: -5%;
font-size: 1em; 
left: 40%;
width: .75em; 
height: 50%; 
}

.drop { 
background-image: url(../img/drip.svg);
background-position: center top;
width: .75em;  
height: 1.5625em;
position: absolute;
top: 0%;
-webkit-animation: drop 400ms infinite ease normal;
-moz-animation: drop 400ms infinite ease normal;
-o-animation: drop 400ms infinite ease normal;
animation: drop 400ms infinite ease normal;
}

@-webkit-keyframes drop { 
    from { top: 0%; }
    to { top: 100%;  }
}
@-moz-keyframes drop { 
    from { top: 0%; }
    to { top: 100%;  }
}
@-o-keyframes drop { 
    from { top: 0%; }
    to { top: 100%;  }
}
@keyframes drop { 
    from { top: 0%; }
    to { top: 100%;  }
}

/* Sad face Chewy */
#sad, #faces, #text-royce, .text-about, #psf {
width:75%;
left:41%;
margin-left:-30%;
text-align:center;
}

.wide { 
width:90%;
left:5%;
text-align:center;
}

.widex { 
color: #EBEBE3;
width:96%;
left:2%;
text-align:center;
}

/* dog bust container */
#front-view {
/*width: 24.5%;
margin-left: 37.75%;*/
width: 36.75%;
margin-left: 31.625%;
top: 20%;
bottom: 0%;
font-size: 1.5em;
}

#royce {
font-size: 1.5em;   
margin-left: 4%;
bottom: 0%;
top: 20%;
width: 52.875%;
}

#sad-face-body, #head, #ears, #eyebrows, #sniff, #eyes, #whites,
.arrow-head, .arrow-ears, .arrow-eyes, .arrow-furry, .arrow-dark, .arrow-face, .arrow-belly,
#royce-body, #royce-mouth-bg, #royce-eyes-bg, #royce-glasses-bg { 
background-position: center bottom;
position: absolute;
width: 100%;
height: 100%;
}

/* #head container holds ears, eyes, nose... */
#sad-face-body { background-image: url(../img/sad-face-body.svg); }
#head { background-image: url(../img/head.svg); }
#ears { background-image: url(../img/ears.svg); }
#eyebrows { background-image: url(../img/eyebrows.svg); z-index: 1; }
#sniff { background-image: url(../img/nose.svg); }
#eyes { background-image: url(../img/eyes.svg); z-index: 3; }
#whites { background-image: url(../img/whites.svg); z-index: 2; }

.arrow-head { background-image: url(../img/arrow-head.png); }
.arrow-ears { background-image: url(../img/arrow-ears.png); }
.arrow-eyes { background-image: url(../img/arrow-eyes.png); }
.arrow-furry { background-image: url(../img/arrow-furry.png); }
.arrow-dark { background-image: url(../img/arrow-dark.png); }
.arrow-face { background-image: url(../img/arrow-face.png); }
.arrow-belly { background-image: url(../img/arrow-belly.png); }

#royce-body { background-image: url(../img/royce-outline.svg); }
#royce-mouth-bg { background-image: url(../img/royce-mouth-bg.svg); }
#royce-eyes-bg { background-image: url(../img/royce-eyes.svg); z-index: 1; }
#royce-glasses-bg { background-image: url(../img/royce-glasses.svg); z-index: 2; }

/* Animation for ears */
#ears { 
-webkit-animation: ears 4s infinite ease alternate;
-moz-animation: ears 4s infinite ease alternate;
-o-animation: ears 4s infinite ease alternate;
animation: ears 4s infinite ease alternate;
}
@-webkit-keyframes ears { 
    0% { margin-top:0; }
    4% { margin-top: -3px;  }
    91% { margin-top: -3px; }
    1000% { margin-top:0; }
}
@-moz-keyframes ears { 
    0% { margin-top:0; }
    4% { margin-top: -3px;  }
    91% { margin-top: -3px; }
    1000% { margin-top:0; }
}
@-o-keyframes ears { 
    0% { margin-top:0; }
    4% { margin-top: -3px;  }
    91% { margin-top: -3px; }
    1000% { margin-top:0; }
}
@keyframes ears { 
    0% { margin-top:0; }
    4% { margin-top: -3px;  }
    91% { margin-top: -3px; }
    1000% { margin-top:0; }
}
/* moz o normal for ears needed */

#sniff { 
-webkit-animation: sniff .2s infinite ease alternate;
-moz-animation: sniff .2s infinite ease alternate;
-o-animation: sniff .2s infinite ease alternate;
animation: sniff .2s infinite ease alternate;
}

@-webkit-keyframes sniff { 
    from { margin-top:0; }
    to { margin-top: 1px;  }
}
@-moz-keyframes sniff { 
    from { margin-top:0; }
    to { margin-top: 1px;  }
}
@-o-keyframes sniff { 
    from { margin-top:0; }
    to { margin-top: 1px;  }
}
@keyframes sniff { 
    from { margin-top:0; }
    to { margin-top: 1px;  }
}

/* Sad face symptoms */
#symptoms { 
width: 80%;
margin-left: 10%;
opacity: .8;
top: 20%;
bottom: 0%;
font-size: 1.5em;
}

#gauge {
/*background: #222;*/
border: 1px solid #222;
-webkit-border-radius: 13.5em;
-moz-border-radius: 13.5em;
border-radius: 13.5em;
-webkit-box-shadow: 3px 3px 10px 1px #666;
-moz-box-shadow:    3px 3px 10px 1px #666;
box-shadow:         3px 3px 10px 1px #666;
width: 27em;
height: 27em;
text-align:center;
font-size: 1.5em;
left: 13%;
}

#gauge-inner {
background: #f5f5f5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTFlOGRhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover,  #f5f5f5 0%, #ffffff 43%, #e1e8da 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f5f5f5), color-stop(43%,#ffffff), color-stop(100%,#e1e8da)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #f5f5f5 0%,#ffffff 43%,#e1e8da 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #f5f5f5 0%,#ffffff 43%,#e1e8da 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #f5f5f5 0%,#ffffff 43%,#e1e8da 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #f5f5f5 0%,#ffffff 43%,#e1e8da 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e8da',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

border: 1px solid #565656;
-webkit-border-radius: 12.5em;
-moz-border-radius: 12.5em;
border-radius: 12.5em;
-moz-box-shadow:    inset 0 0 10px #2D051E;
-webkit-box-shadow: inset 0 0 10px #2D051E;
box-shadow:         inset 0 0 10px #2D051E;
width: 25em;
height: 25em;
left: 1em;
top: 1em;
position: absolute;

}

#reading { 
background: #f5f5f5;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;  
line-height: 2.5em;
position: absolute;
left: 25%;
top: 15em;
width: 50%;
height: 2.5em;
text-align: center;
text-transform: uppercase;
}

.level { 
-webkit-border-radius: .25em;
-moz-border-radius: .25em;
border-radius: .25em;  
-moz-box-shadow:    inset 0 0 10px #2D051E;
-webkit-box-shadow: inset 0 0 10px #2D051E;
box-shadow:         inset 0 0 10px #2D051E;
display: block;
font-family: 'Quicksand', sans-serif;
font-size: 1.75em; 
font-weight: 700;
letter-spacing: -1px;
width: 100%; 
}

.happy { background: #f5f5f5; }
.sad { background: #f5f5f5; }
.sleepy { background: #f5f5f5; }
.play { background: #DAE6CE; }
.hungry { background: #F5F5E2; }
.feed { background: #F5E6B9; }
.smell { background: #F59370; }

#dog-o-matic { 
color: #222;
/*font-family: 'Quicksand', sans-serif;*/
/*font-family: 'Offside', cursive;*/
font-family: 'Fugaz One', sans-serif;
font-size: 1.5em; 
font-weight: 400;
left: 25%;
top: 5em;
width: 50%;
height: 2.5em;
position: absolute;
}


#dial { 
background: transparent;
border-right: .375em solid transparent;
border-bottom: 9.375em solid #FF683D;
border-left: .375em solid transparent;
position: absolute;
left: 13.2em;
top: 4em; 
width: 0; 
height: 0;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
z-index: 1;
}

#gauge-dot {
/*background: #222;*/
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em; 
-webkit-box-shadow: 0 8px 6px -6px #666;
-moz-box-shadow: 0 8px 6px -6px #666;
box-shadow: 0 8px 6px -6px #666;
height: 2em; 
width: 2em;
left: 12.5em;
top: 12.5em;
position: absolute;
z-index: 2;
}

#gauge, #gauge-dot {
background: #565656; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU2NTY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM5JSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  #565656 0%, #222222 39%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565656), color-stop(39%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #565656 0%,#222222 39%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #565656 0%,#222222 39%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #565656 0%,#222222 39%); /* IE10+ */
background: linear-gradient(to bottom,  #565656 0%,#222222 39%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#222222',GradientType=0 ); /* IE6-8 */
}

#window {
border: 6px solid #D4DADA;
background: #E8E8E8;
width:20%;
left: 40%;
top: 8%;
bottom: 50%;
text-align:center;
}

#outside { 
background: #95D4E1;
/*background: #3D4460;*/
left: 2.5%;
top: 2.5%;
width: 95%;
height: 95%;
position: absolute;
z-index: 1;
}

#ledge {
background: #D4D2D4;
-webkit-box-shadow: 0 8px 16px -6px #2D051E;
-moz-box-shadow: 0 8px 16px -6px #2D051E;
box-shadow: 0 8px 16px -6px #2D051E;
bottom: -4.5%;
left: -5%;
width: 110%;
height: 4.5%;
position: absolute;
}

#bar-h {
background: #E8E8E8;
left: 2.5%;
top: 48.75%;
width: 95%;
height: 2.5%;
position: absolute;   
z-index: 2;
}

#bar-v {
background: #E8E8E8;
left: 48.75%;
top: 2.5%;
height: 95%;
width: 2.5%;
position: absolute;   
z-index: 2;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - dog walk animation - - - - - - - - - */

.walk-container { /*transports dog from one side to another */
bottom: 0;
left: -50%;
right: -50%;
width: 200%; 
/*left: 0;
right: 0;
width: 100%; */
}

.kitchen {
top: 0;
width: 100%;
height: 100%;
margin-left: 0%;
}

/* each holds dog parts */
#breakfast, #brunch, #lunch, #dinner {
position: absolute;
bottom: 0;
height: 16.19em;
width: 24.56em;
font-size: 1.5em;
left: 27%;
left: 27%;
-webkit-animation: timeToEat 2s infinite normal linear;
-moz-animation: timeToEat 3s infinite normal linear;
-o-animation: timeToEat 3s infinite normal linear;
animation: timeToEat 2s infinite normal linear;
}

@-webkit-keyframes timeToEat {
    from { left: -15%; }
    to { left: 115%; }
}
@-moz-keyframes timeToEat {
    from { left: -15%; }
    to { left: 115%; }
}
@-o-keyframes timeToEat {
    from { left: -15%; }
    to { left: 115%; }
}
@keyframes timeToEat {
    from { left: -15%; }
    to { left: 115%; }
}

.flip { /* mirror dog */
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

.walk-tail, 
.walk-hind,
.walk-hind2,
.walk-leg,
.walk-leg2,
.walk-head,
.walk-body,
.sniff-body,
.sniff-tail,
.sniff-head,
.sniff-hind,
.sniff-hind2,
.sniff-leg,
.sniff-leg2,
.down-tail, 
.down-hind,
.down-hind2,
.down-leg,
.down-leg2,
.down-head,
.down-shoulder,
.down-chest,
.down-body { 
position: absolute; 
background-color: transparent;
background-position: left top;
background-repeat: no-repeat;
background-size: contain; 
} 

.walk-tail { top: 27%; left: 0%; }
.walk-hind { bottom: 0%; left: 24%; }
.walk-hind2 { bottom: 0%; left: 26%; }
.walk-leg { bottom: 0%; left: 56%; }
.walk-leg2 { bottom: 0%; left: 56%; }
.walk-head { top: 6%; left: 52%; }
.walk-body { top: 15%; left: 21%; }

.sniff-tail { 
left: -1%; 
top: 33%; 
-webkit-transform: rotate(25deg); 
-moz-transform: rotate(25deg); 
-o-transform: rotate(25deg); 
transform: rotate(25deg); 
}

.sniff-head { 
left: 54%; 
top: 45%; 
-webkit-transform: rotate(70deg); 
-moz-transform: rotate(70deg); 
-o-transform: rotate(70deg); 
transform: rotate(70deg); 
}

.sniff-body { top: 28%; left: 21%; }
.sniff-leg { bottom: 0%; left: 52%; }
.sniff-hind { bottom: 0%; left: 24%; }
.sniff-hind2 { bottom: 0%; left: 24%; 
-webkit-transform: rotate(-20deg); 
-moz-transform: rotate(-20deg); 
-o-transform: rotate(-20deg); 
transform: rotate(-20deg); 
}

.sniff-leg2 { bottom: -1%; left: 52%; 
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.walk-body {
background-image: url(../img/walk-body.svg); 
width: 14.625em;
height: 7.5625em;
}

.sniff-body {
background-image: url(../img/dog-body-sniffing.svg); 
width: 15.3125em; 
height: 7.5em;
}

.down-body {
background-image: url(../img/downward-dog-body.svg); 
width: 15.375em;
height: 7.8125em;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}

.down-shoulder {
background-image: url(../img/downward-dog-shoulder.svg); 
width: 10.75em; 
height: 4.5em;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}

.down-chest {
background-image: url(../img/downward-dog-chest.svg); 
width: 3.0625em;
height: 3.625em;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
}

.walk-head, 
.sniff-head,
.down-head {
background-image: url(../img/walk-head.svg); 
width: 11.6875em;
height: 6em;
}

.walk-tail, 
.sniff-tail,
.down-tail {
background-image: url(../img/walk-tail2.svg); 
width: 6.875em;
height: 1.625em;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}

.walk-hind, .walk-hind2, 
.sniff-hind, .sniff-hind2,
.down-hind, .down-hind2 {
background-image: url(../img/walk-hind2.svg); 
width: 2.4375em;
height: 7.875em;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
}

.walk-leg, .walk-leg2, 
.sniff-leg, .sniff-leg2,
.down-leg, .down-leg2 {
background-image: url(../img/walk-leg2.svg); 
width: 1.9375em;
height: 7.875em;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
}

.trot2, .trot4 { /* start position of leg */
-webkit-transform: rotate(-25deg); 
-moz-transform: rotate(-25deg); 
-o-transform: rotate(-25deg);
transform: rotate(-25deg); 
}

.wag { /* tail wag */
-webkit-animation: aniTail 300ms infinite alternate;
   -moz-animation: aniTail 300ms infinite alternate;
     -o-animation: aniTail 300ms infinite alternate;
        animation: aniTail 300ms infinite alternate;
}
@-webkit-keyframes aniTail {
from { -webkit-transform: rotate(0deg);  }
to { -webkit-transform: rotate(8deg);  }
}
@-moz-keyframes aniTail {
from { -moz-transform: rotate(0deg);  }
to { -moz-transform: rotate(8deg);  }
}
@-o-keyframes aniTail {
from { -o-transform: rotate(0deg);  }
to { -o-transform: rotate(8deg);  }
}
@keyframes aniTail {
from { transform: rotate(0deg);  }
to { transform: rotate(8deg);  }
}

.trot3 { 
-webkit-animation: aniHind 200ms infinite linear alternate;
   -moz-animation: aniHind 200ms infinite linear alternate;
     -o-animation: aniHind 200ms infinite linear alternate;
        animation: aniHind 200ms infinite linear alternate;
}
@-webkit-keyframes aniHind {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-25deg); }
}
@-moz-keyframes aniHind {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(-25deg); }
}
@-o-keyframes aniHind {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(-25deg); }
}
@keyframes aniHind {
from { transform: rotate(0deg); }
to { transform: rotate(-25deg); }
}

.trot4 { 
-webkit-animation: aniHind2 200ms infinite linear alternate;
   -moz-animation: aniHind2 200ms infinite linear alternate;
     -o-animation: aniHind2 200ms infinite linear alternate;
        animation: aniHind2 200ms infinite linear alternate;
}
@-webkit-keyframes aniHind2 {
from { -webkit-transform: rotate(-25deg); }
to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes aniHind2 {
from { -moz-transform: rotate(-25deg); }
to { -moz-transform: rotate(0deg); }
}
@-o-keyframes aniHind2 {
from { -o-transform: rotate(-25deg); }
to { -o-transform: rotate(0deg); }
}
@keyframes aniHind2 {
from { transform: rotate(-25deg); }
to { transform: rotate(0deg); }
}

.trot1 { 
-webkit-animation: aniLeg 200ms infinite linear alternate;
   -moz-animation: aniLeg 200ms infinite linear alternate;
     -o-animation: aniLeg 200ms infinite linear alternate;
        animation: aniLeg 200ms infinite linear alternate;
}
@-webkit-keyframes aniLeg {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-25deg); }
}
@-moz-keyframes aniLeg {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(-25deg); }
}
@-o-keyframes aniLeg {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(-25deg); }
}
@keyframes aniLeg {
from { transform: rotate(0deg); }
to { transform: rotate(-25deg); }
}

.trot2 { 
-webkit-animation: aniLeg2 200ms infinite linear alternate;
   -moz-animation: aniLeg2 200ms infinite linear alternate;
     -o-animation: aniLeg2 200ms infinite linear alternate;
        animation: aniLeg2 200ms infinite linear alternate;
}
@-webkit-keyframes aniLeg2 {
from { -webkit-transform: rotate(-25deg); }
to { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes aniLeg2 {
from { -moz-transform: rotate(-25deg); }
to { -moz-transform: rotate(0deg); }
}
@-o-keyframes aniLeg2 {
from { -o-transform: rotate(-25deg); }
to { -o-transform: rotate(0deg); }
}
@keyframes aniLeg2 {
from { transform: rotate(-25deg); }
to { transform: rotate(0deg); }
}

.look { /* head bobbing up down */
-webkit-animation: aniHead 200ms infinite alternate;
   -moz-animation: aniHead 200ms infinite alternate;
     -o-animation: aniHead 200ms infinite alternate;
        animation: aniHead 200ms infinite alternate;
} 
@-webkit-keyframes aniHead {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-3deg); }
}
@-moz-keyframes aniHead {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(-3deg); }
}
@-o-keyframes aniHead {
from { -o-transform: rotate(0deg); }
to { -o-transform: rotate(-3deg); }
}
@keyframes aniHead {
from { transform: rotate(0deg); }
to { transform: rotate(-3deg); }
}

.bounce { /* dog body bouncing while walking */
-webkit-animation: aniBody 300ms infinite alternate;
   -moz-animation: aniBody 300ms infinite alternate;
     -o-animation: aniBody 300ms infinite alternate;
        animation: aniBody 300ms infinite alternate;
} 
@-webkit-keyframes aniBody {
from { top: 15%; }
to { top: 16%; }
}
@-moz-keyframes aniBody {
from { top: 15%; }
to { top: 16%; }
}
@-o-keyframes aniBody {
from { top: 15%; }
to { top: 16%; }
}
@keyframes aniBody {
from { top: 15%; }
to { top: 16%; }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* - - - - - - - - - Dog sniffing animation - - - - - - - - - */

#ground {
width: 100%;
height: 100%;
margin-left: 0%;
opacity: .8;
top: 80%; /* drop ground down below fold to hide dino */
}



#grass {
background: #a1c917; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYzkxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZDUyMzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a1c917 0%, #4d5238 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1c917), color-stop(100%,#4d5238)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a1c917 0%,#4d5238 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a1c917 0%,#4d5238 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a1c917 0%,#4d5238 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a1c917 0%,#4d5238 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1c917', endColorstr='#4d5238',GradientType=0 ); /* IE6-8 */
position: absolute;
height: 25%;
width: 100%;
}

#dirt {
background: #333312; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjE0MTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #333312 0%, #261417 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333312), color-stop(100%,#261417)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #333312 0%,#261417 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #333312 0%,#261417 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #333312 0%,#261417 100%); /* IE10+ */
background: linear-gradient(to bottom,  #333312 0%,#261417 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333312', endColorstr='#261417',GradientType=0 ); /* IE6-8 */

margin-left: 0%;
position: absolute;
top: 25%;
height: 75%;
width: 100%;
}

#dino {
background: transparent url(../img/dinosaur.svg) no-repeat bottom center;
background-size: contain ;
bottom: 0;
position: absolute;
width: 100%;
height: 100%;
}

#sniffing {
position: absolute;
top: -15.9em; 
height: 16.19em;
width: 24.56em;
font-size: 1.5em;
left: 27%;
left: 27%;
}

.waggy { /* tail wag */
-webkit-animation: aniTailwag 10s infinite alternate ease-out;
   -moz-animation: aniTailwag 10s infinite alternate ease-out;
     -o-animation: aniTailwag 10s infinite alternate ease-out;
        animation: aniTailwag 10s infinite alternate ease-out;
}
@-webkit-keyframes aniTailwag {
    0% { -webkit-transform: rotate(16deg); }
    25% { -webkit-transform: rotate(16deg); }
    30% { -webkit-transform: rotate(24deg); }
    75% { -webkit-transform: rotate(24deg); }
    80% { -webkit-transform: rotate(16deg); }
    100% { -webkit-transform: rotate(16deg); }
}
@-moz-keyframes aniTailwag {
    0% { -moz-transform: rotate(16deg); }
    25% { -moz-transform: rotate(16deg); }
    30% { -moz-transform: rotate(24deg); }
    75% { -moz-transform: rotate(24deg); }
    80% { -moz-transform: rotate(16deg); }
    100% { -moz-transform: rotate(16deg); }
}
@-o-keyframes aniTailwag {
    0% { -o-transform: rotate(16deg); }
    25% { -o-transform: rotate(16deg); }
    30% { -o-transform: rotate(24deg); }
    75% { -o-transform: rotate(24deg); }
    80% { -o-transform: rotate(16deg); }
    100% { -o-transform: rotate(16deg); }
}
@keyframes aniTailwag {
    0% { transform: rotate(16deg); }
    25% { transform: rotate(16deg); }
    30% { transform: rotate(24deg); }
    75% { transform: rotate(24deg); }
    80% { transform: rotate(16deg); }
    100% { transform: rotate(16deg); }
}

.sniff-ground { /* head bobbing up down */
-webkit-animation: aniSniff 300ms infinite alternate ease-in;
   -moz-animation: aniSniff 300ms infinite alternate ease-in;
     -o-animation: aniSniff 300ms infinite alternate ease-in;
        animation: aniSniff 300ms infinite alternate ease-in;
} 
@-webkit-keyframes aniSniff {
from { -webkit-transform: rotate(70deg);  }
to { -webkit-transform: rotate(71deg);  }
}
@-moz-keyframes aniSniff {
from { -moz-transform: rotate(70deg);  }
to { -moz-transform: rotate(71deg);  }
}
@-o-keyframes aniSniff {
from { -o-transform: rotate(70deg);  }
to { -o-transform: rotate(71deg);  }
}
@keyframes aniSniff {
from { transform: rotate(70deg);  }
to { transform: rotate(71deg);  }
}

.moveleg { /* slowly move front leg */
-webkit-animation: moveleg 10s infinite alternate ease-in;
-moz-animation: moveleg 10s infinite alternate ease-in;
-o-animation: moveleg 10s infinite alternate ease-in;
animation: moveleg 10s infinite alternate ease-in;
}

@-webkit-keyframes moveleg {
    0% { -webkit-transform: rotate(0deg); }
    20% { -webkit-transform: rotate(0deg); }
    25% { -webkit-transform: rotate(10deg); }
    75% { -webkit-transform: rotate(10deg); }
    80% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes moveleg {
    0% { -moz-transform: rotate(0deg); }
    20% { -moz-transform: rotate(0deg); }
    25% { -moz-transform: rotate(10deg); }
    75% { -moz-transform: rotate(10deg); }
    80% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(0deg); }
}
@-o-keyframes moveleg {
    0% { -o-transform: rotate(0deg); }
    20% { -o-transform: rotate(0deg); }
    25% { -o-transform: rotate(10deg); }
    75% { -o-transform: rotate(10deg); }
    80% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(0deg); }
}
@keyframes moveleg {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(10deg); }
    80% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.raiseleg { /* slowly move hind leg */
-webkit-animation: raiseleg 10s infinite alternate ease-in;    
-moz-animation: raiseleg 10s infinite alternate ease-in;    
-o-animation: raiseleg 10s infinite alternate ease-in;    
animation: raiseleg 10s infinite alternate ease-in;    
}

@-webkit-keyframes raiseleg {
    0% { -webkit-transform: rotate(-20deg); }
    45% { -webkit-transform: rotate(-20deg); }
    50% { -webkit-transform: rotate(-25deg); }
    65% { -webkit-transform: rotate(-25deg); }
    70% { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(-20deg); }
}
@-moz-keyframes raiseleg {
    0% { -moz-transform: rotate(-20deg); }
    45% { -moz-transform: rotate(-20deg); }
    50% { -moz-transform: rotate(-25deg); }
    65% { -moz-transform: rotate(-25deg); }
    70% { -moz-transform: rotate(-20deg); }
    100% { -moz-transform: rotate(-20deg); }
}
@-o-keyframes raiseleg {
    0% { -o-transform: rotate(-20deg); }
    45% { -o-transform: rotate(-20deg); }
    50% { -o-transform: rotate(-25deg); }
    65% { -o-transform: rotate(-25deg); }
    70% { -o-transform: rotate(-20deg); }
    100% { -o-transform: rotate(-20deg); }
}
@keyframes raiseleg {
    0% { transform: rotate(-20deg); }
    45% { transform: rotate(-20deg); }
    50% { transform: rotate(-25deg); }
    65% { transform: rotate(-25deg); }
    70% { transform: rotate(-20deg); }
    100% { transform: rotate(-20deg); }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* - - - - - - - - - Downward dog animation - - - - - - - - - */

#yoga {
width:98%;
left: 1%;
top: 0%;
bottom:0%;
}   

/* Yoga container holding dog parts */
#downward-dog {
position: absolute;
bottom: 0; 
/*height: 16.19em;
width: 24.56em;*/
height: 16.19em;
width: 24.56em;
font-size: 2em;
left: 27%;
}

.down-tail { 
top: 27%; left: -2%; 
}

.down-hind { 
bottom: -1%; 
left: 22%; 
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.down-hind2 { 
bottom: -2%; 
left: 26%;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.down-leg { 
bottom: -2%; 
left: 54%; 
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.down-leg2 { 
bottom: -3%; 
left: 56%; 
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}

.down-head { 
top: 16%; 
left: 52%; 
-webkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg); 
-o-transform: rotate(10deg); 
transform: rotate(10deg); 
}

.down-body { 
top: 16%; 
left: 21%;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.down-shoulder { 
top: 38%; 
left: 31%; 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
transform: rotate(0deg);    
}

.down-chest { 
top: 38%; 
left: 65%; 
}


/* - - - - - - - - - About this site - - - - - - - - - */
#about { 
background: #ee3500;
-webkit-box-shadow: 0px 5px 6px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    0px 5px 6px rgba(50, 50, 50, 0.55);
box-shadow:         0px 5px 6px rgba(50, 50, 50, 0.55);
color: #EBEBE3;
font-size: 1.2em;
text-shadow: 1px 1px 1px #C2683D;
width: 100%;
left: 0%;
top: 0%;
bottom: 0%;
}

#about a { 
background: #c62c00;
color: #FFF; 
}

#write-up { margin-top: 2%; }

#about p, #about h4 { padding: 0 10%; } 

#about h4 { color: #FFF; }

#logo {
background-image: url(../img/ardenroyce-logo.svg);
background-position: top center;
font-size: .5em; 
height: 6.917em;
width: 9.3525em; 
margin: 0 auto;
}

#social { 
margin: 1em auto;
height: 3em;
width: 10em; 
}

#social ul li { 
display: inline; 
float: left;
}

#social ul li:nth-child(2) { 
margin: 0 2em; 
}

#social ul li a { 
background-position: top left; 
display: block;
height: 2em; 
opacity: .7;
width: 2em; 
}

#social ul li a:hover { opacity: 1; }

#social ul li:first-child a { background-image: url(../img/mail.png); }
#social ul li:nth-child(2) a { background-image: url(../img/twitter.png); }
#social ul li:last-child a { background-image: url(../img/linkedin.png); }

#social ul li a span { display: none; }

#copyright {
top: 96%;
font-size: .6em;
position: absolute;
text-align: center;
width: 100%;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/*1440 x 900 */
@media screen and (max-width: 90em) and (max-height: 56.25em) {
    #chewy-head { font-size: 1.15em; } 
    #arrow-big { top: 75%; }
}

/* 1600 */
@media screen and (max-width: 100em) {
#royce { width: 55%; }
}

/* 1440 */
@media screen and (max-width: 90.5em) {
    #chewy-snout, #chewy-head, .food, #sniffing, #gauge { font-size: 1.3em; }
    #ipad { left:36.5%; }
    #gauge { left: 11%; }
    #drool { height: 45%; }
    #royce { width: 58%; }
    #breakfast, #brunch, #lunch, #dinner { font-size: 1.2em; }
    #downward-dog { left: 20%; }
    h1 { font-size: 3em; }
    h2 { font-size: 2em; }
}

/* 1280 */
@media screen and (max-width: 80em) {
    #drool { height: 40%; }
    #royce { width: 61%; margin-left: 2%; }
    #about { font-size: 1em; }
}

/* 1200 */
@media screen and (max-width: 75em) {
    #chewy-snout, #chewy-head, .food, #sniffing, { font-size: 1.2em; }
    #gauge { font-size: 1em; left: 10; }
    #breakfast, #brunch, #lunch, #dinner { font-size: 1.1em; }
    #downward-dog { left: 18%; }
    h1 { font-size: 2.75em; }
    h2 { font-size: 1.8em; }
}

/* 1024 */
@media screen and (max-width: 64em) {
    /*#arrow-big { top: 65%; }*/
    #chewy-snout, #chewy-head, .food, #sniffing { font-size: 1.1em; }
    #ipad { left:33%; }
    #gauge { font-size: .9em; left: 7%; }
    #drool { 
    font-size: .8em; 
    height: 35%; 
    }
    #downward-dog { left: 12%; }
    h1 { font-size: 2.5em; }
    h2 { font-size: 1.5em; }
}

/* 960 */
@media screen and (max-width: 60em) {
    #chewy-snout, #chewy-head, .food, #sniffing { font-size: 1.0em; }
    #ipad { left:31%; }
    #royce { width: 63%; }
    #gauge { font-size: .8em; left: 5%; }
    #drool { 
    font-size: .7em; 
    height: 32.5%; 
    }
    #bar-v { display: none; }
    #downward-dog { left: 11%; }    
}

/* 820 */
@media screen and (max-width: 51.25em) {
    #chewy-snout, #chewy-head, .food { font-size: .9em; }
    #gauge { font-size: .7em; }
    #drool { 
    font-size: .7em; 
    height: 30%; 
    }
    /*.walk-container { 
    bottom: 0;
    left: -75%;
    right: -75%;
    width: 250%; 
    }*/
    #sniffing { left: 20%; }
    #downward-dog { left: 10%; }    
}

/* 768 */
@media screen and (max-width: 48em) {
    #chewy-snout, #chewy-head, .food { font-size: .8em; }
    #ipad { left:27%; }
    #drool { 
    font-size: .6em; 
    height: 27%; 
    }
    #royce { width: 65%; }
    #downward-dog { 
    font-size: 1.5em; 
    left: 10%; 
    }  
    #about p, #about h4 { padding: 0 2%; } 
    #logo { 
    /*font-size: .3em; */ 
    width: 4.67625em;
    height: 3.4585em;    
    }
}

/* 640 */
@media screen and (max-width: 40em) {
    #chewy-snout, #chewy-head, .food { font-size: .5em; }
    #ipad { display: none; }
    #gauge { font-size: .6em; left: 0%; }
    #drool { 
    font-size: .5em; 
    height: 24%; 
    } 
    #royce { width: 69%; }
   /* .walk-container { 
    bottom: 0;
    left: -95%;
    right: -95%;
    width: 290%; 
    }*/
    #breakfast, #brunch, #lunch, #dinner { font-size: .75em; }    
    #sniffing { font-size: .8em; left: 18%; top: -15em; }
    #downward-dog { 
    font-size: 1em; 
    left: 12%; 
    }  
    #arrow-big { 
    font-size: .75em;  
    top: 70%; 
    }
    #scroll-down { 
    font-size: .75em;    
    top: 80%; 
    }
    h1 { font-size: 1.75em; }
    h2 { font-size: 1.25em; }
    h3 { font-size: 1em; }
    #about { font-size: .8em; }
    .hide { display: none; }
}

/* 560 */
@media screen and (max-width: 35em) {
    .big-triangle { 
    border-top: 30px solid #FF683D;
    border-left: 45px solid transparent; 
    border-right: 45px solid transparent; 
    }
    #chewy-head { font-size: .5em; }
    #front-view { width: 50%; }    
    #symptoms { 
    width: 120%;
    margin-left: -5%;
    opacity: .8;
    top: 20%;
    bottom: 0%;
    font-size: 1.5em;
    }
    #gauge { left: -12%; }
    #drool { 
    font-size: .4em; 
    height: 23%; 
    }    
    #sniffing { font-size: .7em; left: 6%; }
    #downward-dog { 
    font-size: .8em; 
    left: 6%; 
    }   
    #question, #who, #hungry, #sad, #psf, #faces, .text-about, .wide, .widex { 
    width: 96%;
    left:2%;
    margin-left: 0;
    }
}

/* 480 */
@media screen and (max-width: 30em) {
    #chewy-head { font-size: .4em; right: -10%; }
    #chewy-snout { font-size: .4em; }
    #drool { height: 25%; } 
    #royce { width: 71%; margin-left: -2%; }
    #downward-dog { 
    font-size: .7em; 
    left: 3%; 
    }
}

@media screen and (max-height: 30em) {
    .hide-more { display: none; }
}

/* 320 */
@media screen and (max-width: 20em) {
    #chewy-snout { font-size: .3em; }
    #drool { height: 19%; } 
    #royce { width: 79%; margin-left: -5%; }
}

/* 256 */
@media screen and (max-width: 16em) {
#chewy-snout { font-size: .2em; }
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
    .preload-images { 
        visibility: hidden;
        display: none;
    }

}