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;
    background: url(vehicle-1.jpg) center no-repeat;
    font-family: 'Lato';
}html, body{
    width: 300px;
    height: 250px;
    text-align:center;
}
div,span,h1,h2,a{
    margin:0;
    padding:0;
}
}
#main{
    width: 300px;
    height: 250px;
    overflow:hidden;
}
.panel{
    width: 300px;
    height: 250px;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}

#intro{
    background: rgba(71,182,254,0.9);
    text-align:left;
    overflow:hidden;
}
h1{text-transform:uppercase;overflow:hidden;font-size:32px;max-height:140px;color:#FFFFFF;}
h2{font-size:26px;font-weight:900;color:#FFFFFF;line-height:1.3;max-height:132px;overflow:hidden;}
#intro .year{font-weight:300;display:block;font-size:36px;}
#intro .make, #intro .model{font-size:36px;font-weight:900;display:inline-block;}
#intro .variant {font-size: 34px;font-weight:900;display:block;}
#intro .was-price {font-weight:300;font-size:14px;color:rgba(255,255,255, 0.75);text-decoration:line-through;}
#intro .current-price{font-size: 36px;font-weight:bold;color:#252525;display:block;padding-top: 0.25rem;}
.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;
}
#intro #buynow{
    background: #FF0000; 
    color:#FFFFFF;
    text-transform:uppercase;
    text-align:right;
    position:absolute;
    right:-100px;
    bottom:250px;
    font-family:'Roboto Condensed';
    font-weight:bold;
    font-size:20px;
    padding:4rem 2rem 0.5rem 0;
    width:145px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
    -moz-transform-origin:100% 100%;
    -ms-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;
    transform-origin:100% 100%;

}
#intro #buynow .buynow-content{
    display:block;
    width:80px;
    text-align:center;
    float:right;
}
#intro #buynow.show{
    right:0;
    bottom:150px;
}
#intro-text{
    line-height: 0.95;
}
#intro-content{
    width: 300px;
    height: 250px;
    position:relative;
    -moz-transform:translateX(-300px);
    -ms-transform:translateX(-300px);
    -webkit-transform:translateX(-300px);
    -o-transform:translateX(-300px);
    transform:translateX(-300px);
    padding:1.5rem 0 0 1.5rem;
}
#intro-content.show{
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#intro .price{
    position:absolute;
    left:1.5rem;
    bottom:1.625rem;
}
#intro.hide{
    -moz-transform:translateY(-250px);
    -ms-transform:translateY(-250px);
    -o-transform:translateY(-250px);
    -webkit-transform:translateY(-250px);
    transform:translateY(-250px);
}
.feature{
    height:125px;
    overflow: hidden;
    position:relative;
    text-align:center;
    font-size: 34px;
    font-weight:900;
}
.feature-content{
    width:100%;
    position:absolute;
    top:50%;
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    padding: 0 1.5rem;
}
.feature.colour-1{
    background: #458FBF;
    color:#FFFFFF;                
}
.feature.colour-3{
    background:#47B6FE;
    color:#FFFFFF;                
}
.info{
    background: #47B6FE;
    text-align:left;
    padding:5.5rem 1.5rem 1.5rem;
}
.logo{
    border: 1px solid transparent;
    border-bottom:none;    
    background: #252525;
    position:absolute;
    left:0;
    top:0;
    right:0;
    height:4rem;    
    padding:0 1.5rem;
}
.logo img{
    position:absolute;
    top:50%;
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.learn-more{
    position:absolute;
    left:1.5rem;
    bottom:1.5rem;
    width: 140px;
    line-height: 40px;
    color:#FFFFFF;
    background: #458FBF;
    font-size: 13px;
    text-align:center;
}

#features-1{
    position: absolute;
    top:0;
    left:0;
    z-index: 5;
}
#features-2{
    position:absolute;
    top:0;
    left:0;
    z-index:20;
}

#features-1 .feature-top, #features-2 .feature-top{
    -ms-transform: translateX(-300px);
    -moz-transform: translateX(-300px);
    -o-transform: translateX(-300px);
    -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
}
#features-1 .feature-bottom, #features-2 .feature-bottom{
    -ms-transform: translateX(300px);
    -moz-transform: translateX(300px);
    -o-transform: translateX(300px);
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
}
#features-1.show-1 .feature-top{
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#features-1.show-2 .feature-bottom{
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -webkit-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0);

}

#features-2 .feature-top{
    -ms-transform: translateY(-125px);
    -moz-transform: translateY(-125px);
    -o-transform: translateY(-125px);
    -webkit-transform: translateY(-125px);
    transform: translateY(-125px);
}
#features-2 .feature-bottom{
    -ms-transform: translateY(125px);
    -moz-transform: translateY(125px);
    -o-transform: translateY(125px);
    -webkit-transform: translateY(125px);
    transform: translateY(125px);
}
#features-2.show .feature-top, #features-2.show .feature-bottom{
    -ms-transform:translateY(0);
    -moz-transform:translateY(0);
    -o-transform:translateY(0);
    -webkit-transform:translateY(0);
    transform:translateY(0);
}
#features-2.show-out .feature-top{
    -ms-transform:translate(0, -125px);
    -moz-transform:translate(0, -125px);
    -o-transform:translate(0, -125px);
    -webkit-transform:translate(0, -125px);
    transform:translate(0, -125px);
    transform:translate(0, -125px);
}
#features-2.show-out .feature-bottom{
    -ms-transform:translate(0, 125px);
    -moz-transform:translate(0, 125px);
    -o-transform:translate(0, 125px);
    -webkit-transform:translate(0, 125px);
    transform:translate(0, 125px);
}


#info-1{
    position: absolute;
    top:0;
    left:0;
    z-index: 15;
    -ms-transform:translateX(-300px);
    -moz-transform:translateX(-300px);
    -o-transform:translateX(-300px);
    -webkit-transform:translateX(-300px);
    transform:translateX(-300px);
}
#info-1 h2{
    -ms-transform:translateX(-300px);
    -moz-transform:translateX(-300px);
    -o-transform:translateX(-300px);
    -webkit-transform:translateX(-300px);
    transform:translateX(-300px);
}
#info-1.show{
    z-index:10;
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#info-1.in h2{
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#info-1.out h2{
    -ms-transform:translateX(300px);
    -moz-transform:translateX(300px);
    -o-transform:translateX(300px);
    -webkit-transform:translateX(300px);
    transform:translateX(300px);
}


#info-2{
    position: absolute;
    top:0;
    left:0;
    z-index:15;
    -ms-transform:translateX(-300px);
    -moz-transform:translateX(-300px);
    -o-transform:translateX(-300px);
    -webkit-transform:translateX(-300px);
    transform:translateX(-300px);
}
#info-2 h2{
    -ms-transform:translateX(-300px);
    -moz-transform:translateX(-300px);
    -o-transform:translateX(-300px);
    -webkit-transform:translateX(-300px);
    transform:translateX(-300px);
}
#info-2.show{
    z-index:15;
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#info-2.in h2{
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}
#info-2.out h2{
    -ms-transform:translateX(300px);
    -moz-transform:translateX(300px);
    -o-transform:translateX(300px);
    -webkit-transform:translateX(300px);
    transform:translateX(300px);
}
.learn-more-2{
    position:absolute;
    right:0;
    bottom:0;
    background: #458FBF;
    color: rgba(255,255,255,0.8);
    padding: 0 1rem 0 0.75rem;
    line-height: 20px;
    height: 20px;
    text-transform:uppercase;
    font-size: 12px;
    -ms-transform:translateX(300px);
    -moz-transform:translateX(300px);
    -o-transform:translateX(300px);
    -webkit-transform:translateX(300px);
    transform:translateX(300px);
}
.learn-more-2:before{
    border-right: 10px solid #458FBF;
    border-top: 20px solid transparent;
    left:-10px;
    top:0;
    position:absolute;
    content:'';
    width: 0;
    height: 0;

}
.show-more .learn-more-2{
    -ms-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -webkit-transform:translateX(0);
    transform:translateX(0);
}