@charset "UTF-8";
/* CSS Document */

div.subpage {padding:0 0 20px 0; margin:0 0 20px 0;   position:relative;}


/* Gas Price Breakdown */
div.badge {position:absolute; background-repeat:no-repeat; background-position:center center; opacity:0;}
div#wyo {width:176px; height:72px; background:url(../images/wyo.png); top:309px; left:167px;}
div#calif {width:211px; height:72px; background:url(../images/calif.png); top:188px; left:488px;}
/* specify wyo animation */
@keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}
@-moz-keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}
@-webkit-keyframes wyom {from {opacity:0; top:289px;} to {opacity:1; top:309px;}}
/* specify calif animation */
@keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}
@-moz-keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}
@-webkit-keyframes califm {from {opacity:0; top:168px;} to {opacity:1; top:188px;}}
/* speficy drop */
div#wyo {animation:wyom 1s ease-out 0.3s; -webkit-animation:wyom 1s ease-out 0.3s; -moz-animation:wyom 1s ease-out 0.3s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#calif {animation:califm 1s ease-out 0.5s; -webkit-animation:califm 1s ease-out 0.5s; -moz-animation:califm 1s ease-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}


/* Gas Pumping Infographic */
div#mini-y {width:251px; height:146px; background: url(../images/yellow-mini.png) no-repeat; position: absolute; top: 313px; left: 324px;}
div#mini-b {width:251px; height:146px; background: url(../images/blue-mini.png) no-repeat; position: absolute; top: 501px; left: 252px;}
/* yellow mini */
@keyframes ymove {from {left: 324px;} to{left: 416px;}}
@-moz-keyframes ymove {from {left: 324px;} to{left: 416px;}}
@-webkit-keyframes ymove {from {left: 324px;} to{left: 416px;}}
/* blue mini */
@keyframes bmove {from {left: 252px;} to{left: 322px;}}
@-moz-keyframes bmove {from {left: 252px;} to{left: 322px;}}
@-webkit-keyframes bmove {from {left: 252px;} to{left: 322px;}}
div#mini-y {animation:ymove 1s ease-in-out 0.5s; -webkit-animation:ymove 1s ease-in-out 0.5s; -moz-animation:ymove 1s ease-in-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}
div#mini-b {animation:bmove 1s ease-in-out 0.5s; -webkit-animation:bmove 1s ease-in-out 0.5s; -moz-animation:bmove 1s ease-in-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards;}