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

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


/* Car of the Year */
div.label {position:absolute; opacity:0;}
div#car-price {width:155px; height:93px; background:url(../images/car-price.png); top:199px; left:564px;}
div#car-sale {width:155px; height:93px; background:url(../images/car-sale.png); top:199px; left:363px;}
div#car-fuel {width:257px; height:123px; background:url(../images/car-fuel.png); top:398px; left:462px;}
div#truck-price {width:155px; height:93px; background:url(../images/truck-price.png); top:171px; left:833px;}
div#truck-sale {width:155px; height:93px; background:url(../images/truck-sale.png); top:171px; left:1006px;} 
div#truck-fuel {width:257px; height:123px; background:url(../images/truck-fuel.png); top:396px; left:1230px;}
/* specify one animation */
@keyframes cpm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
@-moz-keyframes cpm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
@-webkit-keyframes cpm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
/* specify two animation */
@keyframes csm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
@-moz-keyframes csm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
@-webkit-keyframes csm {from {opacity:0; top:179px;} to {opacity:1; top:199px;}}
/* specify three animation */
@keyframes cfm {from {opacity:0; top:378px;} to {opacity:1; top:398px;}}
@-moz-keyframes cfm {from {opacity:0; top:378px;} to {opacity:1; top:398px;}}
@-webkit-keyframes cfm {from {opacity:0; top:378px;} to {opacity:1; top:398px;}}
/* specify four animation */
@keyframes tpm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
@-moz-keyframes tpm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
@-webkit-keyframes tpm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
/* specify five animation */
@keyframes tsm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
@-moz-keyframes tsm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
@-webkit-keyframes tsm {from {opacity:0; top:151px;} to {opacity:1; top:171px;}}
/* specify six animation */
@keyframes tfm {from {opacity:0; top:376px;} to {opacity:1; top:396px;}}
@-moz-keyframes tfm {from {opacity:0; top:376px;} to {opacity:1; top:396px;}}
@-webkit-keyframes tfm {from {opacity:0; top:376px;} to {opacity:1; top:396px;}}
/* speficy drop */
div#car-price {animation:cpm 0.5s ease-out; -webkit-animation:cpm 0.5s ease-in; -moz-animation:cpm 0.5s ease-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }
div#car-sale {animation:csm 0.5s ease-out 0.3s; -webkit-animation:csm 0.5s ease-in 0.3s; -moz-animation:csm 0.5s ease-out 0.3s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }
div#car-fuel {animation:cfm 0.5s ease-out 0.5s; -webkit-animation:cfm 0.5s ease-in 0.5s; -moz-animation:cfm 0.5s ease-out 0.5s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }
div#truck-price {animation:tpm 0.5s ease-out 0.1s; -webkit-animation:tpm 0.5s ease-in 0.1s; -moz-animation:tpm 0.5s ease-out 0.1s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }
div#truck-sale {animation:tsm 0.5s ease-out; -webkit-animation:tsm 0.5s ease-in; -moz-animation:tsm 0.5s ease-out; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }
div#truck-fuel {animation:tfm 0.5s ease-out 0.2s; -webkit-animation:tfm 0.5s ease-in 0.2s; -moz-animation:tfm 0.5s ease-out 0.2s; animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; }