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: 728px;
    height: 90px;
    text-align:left;
}
div,span,h1,a{
    margin:0;
    padding:0;
}
#main{
    background: url(vehicle-1.jpg) #47B6FE left center no-repeat;
    width: 728px;
    height: 90px;
    position:relative;
    overflow:hidden;
}
#main-content{
    position:relative;
    width: 594px;
    height: 90px;
    overflow:hidden;
    float:right;
}
.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{
    -ms-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;

    -ms-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

h1{
    
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;    
    color: #FFFFFF;
}
h2{
    font-size: 22px;
    color: #FFFFFF;
    padding-right: 230px;
}
.year{
    font-size: 20px;
    font-weight:300;
}
.make, .model, .variant{
    font-size: 20px;
    font-weight:bold;
}
.was-price{
    color: rgba(255,255,255, 0.75);
    font-size: 18px;
    text-decoration: line-through;
    margin-right: 0.25rem;
}
.current-price{
    color: #252525;
    font-size: 20px;
    font-weight:bold;
}
    
.content{
    height: 90px;
    padding: 17px 0px 17px 24px;
    line-height: 28px;
}
#intro .content{
    padding-right:17px;
}

#fixed-section{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width: 198px;
    z-index:50;
    background: #252525;
}
#fixed-section:before{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
    border: 1px solid transparent;
    content:'';
}
#logo{
    position:absolute;
    z-index:5;
    left:1rem;
    top:0;
    line-height: 90px;
    max-width: 116px;
}
#logo img{
    width: 100%;
    vertical-align:middle;
}
.action{
    position:absolute;
    right:-51px;
    top:-217px;
    z-index:60;

    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    -ms-transform-origin: 200px 100%;
    -moz-transform-origin: 200px 100%;
    -o-transform-origin: 200px 100%;
    -webkit-transform-origin: 200px 100%;
    transform-origin: 200px 100%;

    background: #FF0000;
    padding-top:10rem;
    padding-bottom: 0.5rem;
    padding-right: 2rem;
    width: 375px;
    text-align:center;
    text-transform:uppercase;
    color: #FFFFFF;
    font-family: 'Roboto Condensed';
    font-size: 16px;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    border-bottom-left-radius:20px;
}
.action-text{
    float:right;
    display:block;
    width: 64px;
    text-align:center;
}
.final .action{
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
    -ms-transform: rotate(90deg);    
    -moz-transform: rotate(90deg);    
    -o-transform: rotate(90deg);    
    -webkit-transform: rotate(90deg);    
    transform: rotate(90deg);    
    right: 50px;
    padding-top: 15rem;
}
.final .action .action-text{
    opacity:0;
    transition: all 0.3s;
}
.learn-more{
    opacity:0;
    -moz-transform:translateX(350px) translateY(-50%);
    -ms-transform:translateX(350px) translateY(-50%);
    -o-transform:translateX(350px) translateY(-50%);
    -webkit-transform:translateX(350px) translateY(-50%);
    transform:translateX(350px) translateY(-50%);

    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition:all 1s;

    z-index:65;
    position:absolute;
    right:2.5rem;
    top:50%;
    color: #FFFFFF;
    font-size: 16px;
    font-weight:900;
    text-transform:uppercase;
}
.final .learn-more{
    opacity:1;
    -ms-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    -webkit-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
}
.loop .learn-more{
    -ms-transform: translateX(350px) translateY(-50%);
    -moz-transform: translateX(350px) translateY(-50%);
    -o-transform: translateX(350px) translateY(-50%);
    -webkit-transform: translateX(350px) translateY(-50%);
    transform: translateX(350px) translateY(-50%);
    -moz-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    -webkit-transition: all, 0.5s;
    transition: all, 0.5s;
    opacity:1;
}
.loop .action{
    -ms-transform: rotate(0deg) scale(5);
    -moz-transform: rotate(0deg) scale(5);
    -o-transform: rotate(0deg) scale(5);
    -webkit-transform: rotate(0deg) scale(5);
    transform: rotate(0deg) scale(5);
    top: 420px;
    -moz-transition: all 1.4s;
    -o-transition: all 1.4s;
    -webkit-transition: all 1.4s;
    transition: all 1.4s;
}
.loop2 .action{
    -ms-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
    top: -100px;
    right: -420px;
}
.reset .action{
    -moz-transition:none;
    -o-transition:none;
    -webkit-transition:none;
    transition:none;
}
.panel{
    position:absolute;
    top:0;
    left: 0;
    width: 594px;
    height: 90px;
}

.panel.start{
    -ms-transform: translateY(90px);
    -moz-transform: translateY(90px);
    -o-transform: translateY(90px);
    -webkit-transform: translateY(90px);
    transform: translateY(90px);
    -moz-transition:none!important;
    -o-transition:none!important;
    -webkit-transition:none!important;
    transition:none!important;
}
.panel.show{
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.panel.out{
    -ms-transform: translateY(-90px);
    -moz-transform: translateY(-90px);
    -o-transform: translateY(-90px);
    -webkit-transform: translateY(-90px);
    transform: translateY(-90px);
}