html, body, div, span, h1, h2, p, a, img, ul, li, table, tr, th, td
 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
body {
	line-height: 1;
    font-family: 'Lato';
}html, body{
    width: 300px;
    height: 600px;
    text-align:left;
}
div,span,h1,a{
    margin:0;
    padding:0;
}
h2{
    color: #FFFFFF;
    max-height:132px;
    overflow:hidden;
}
#main{
    width: 300px;
    height: 600px;
    overflow:hidden;
    position:relative;
    background: #47B6FE url(vehicle-1.jpg) center top no-repeat;
}

h1{text-align:left;text-transform:uppercase;overflow:hidden;font-size:32px;max-height:56px;color:#FFFFFF;line-height:0.9;}
h2{font-size:17px;color:#FFFFFF;line-height:1.3;}
#intro .year{font-weight:300;font-size:24px;}
#intro .make, #intro .model{font-size:24px;font-weight:900;display:inline;}
#intro .variant {font-size: 24px;font-weight:900;}
#intro .was-price {font-weight:300;font-size:14px;color:rgba(255,255,255, 0.75);text-decoration:line-through;display:block;padding-bottom: 0.25rem;}
#intro .current-price{font-size: 24px;color:#252525;display:block;}
.ts{
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
       -moz-transition: all 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
         -o-transition: all 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
            transition: all 300ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */

    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
       -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
         -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); 
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
}
.ts2{
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
#buynow{
    background: #FF0000; 
    color:#FFFFFF;
    text-transform:uppercase;
    text-align:right;
    position:absolute;
    right: 0;
    top:10px;
    z-index: 50;
    font-family:'Roboto Condensed';
    font-weight:bold;
    font-size:20px;
    padding:4rem 2rem 0.5rem 0;
    width:145px;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    -ms-transform-origin:100% 100%;
    -moz-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;
    transform-origin:100% 100%;

}
#buynow .buynow-content{
    display:block;
    width:80px;
    text-align:center;
    float:right;
}
#buynow.show{
    right:0;
    bottom:150px;
}
#intro{
    position:absolute;
    left:0;
    top: 225px;
    height: 170px;
    width: 300px;
    padding: 1.5rem 1.5rem 0;
    background: rgba(0,0,0,0.15);
}
#intro-content{
    position:absolute;
    left:1.5rem;
    right: 1.5rem;
    top:50%;
    -ms-transform:translateY(-55%);
    -moz-transform:translateY(-55%);
    -o-transform:translateY(-55%);
    -webkit-transform:translateY(-55%);
    transform:translateY(-55%);
}
#intro .price{
    padding-top: 0.5rem;
}
#intro.hide{
    -ms-transform:translateY(-250px);
    -moz-transform:translateY(-250px);
    -o-transform:translateY(-250px);
    -webkit-transform:translateY(-250px);
    transform:translateY(-250px);
}
#features{
    position:absolute;
    bottom: 375px;
    left:0;
    overflow:hidden;
    background: rgba(0,0,0,0.5);
    text-overflow:clip;
    white-space:nowrap;
    height: 36px;
    line-height: 36px;
}
.features-inner{
    display:inline-block;
}
.feature{
    overflow: hidden;
    position:relative;
    text-align:center;
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}
.feature:after{
    display:inline;
    content: '-';
    margin: 0 0.25rem;
}
.feature-content{
    width:100%;
    position:absolute;
    top:50%;
    -ms-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    padding: 0 1.5rem;
}

#message{
    position:absolute;
    width: 100%;
    top: 395px;
    height: 124px;
    overflow:hidden;
}

#message-1, #message-2{
    position:absolute;
    top:1.25rem;
    left:1.5rem;
    right:1.5rem;
}
#message-2{
    -ms-transform:translateX(300px);
    -moz-transform:translateX(300px);
    -o-transform:translateX(300px);
    -webkit-transform:translateX(300px);
    transform:translateX(300px);
}

.info{
    background: #47B6FE;
    text-align:left;
    padding:5.5rem 1.5rem 1.5rem;
}
#logo{
    border: 1px solid transparent;
    background: #252525;
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    height:4rem;    
    padding:0.5rem 1.5rem;
}
#logo img{
    position:absolute;
    top:50%;
    -ms-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    max-height:32px;
}

.learn-more{
    position:absolute;
    left:1.5rem;
    bottom:0;
    width: 180px;
    text-transform:uppercase;
    line-height: 44px;
    color:#FFFFFF;
    background: #458FBF;
    font-size: 11px;
    letter-spacing:1px;
    text-align:center;
}

.messagestart{
    -ms-transform: translateX(300px) !important;
    -moz-transform: translateX(300px) !important;
    -o-transform: translateX(300px) !important;
    -webkit-transform: translateX(300px) !important;
    transform: translateX(300px) !important; 
    -moz-transition:none!important;
    -o-transition:none!important;
    -webkit-transition:none!important;
    transition:none!important;
}
.messageshow{
    -ms-transform: translateX(0) !important;
    -moz-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0);
}
.messageout{
    -ms-transform: translateX(-300px) !important;
    -moz-transform: translateX(-300px) !important;
    -o-transform: translateX(-300px) !important;
    -webkit-transform: translateX(-300px) !important;
    transform: translateX(-300px);
}