@import 'https://fonts.googleapis.com/css?family=Lato:900';

*,*:before,*:after{webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html,body {
    margin: 0;
    padding: 0;
    color:#ffffff;
    font-size: 100%;
    font-family: 'Lato', sans-serif;
}
:focus {
    outline: 0;
}
::-moz-focus-inner {
    border: 0;
}
#banner,
#wrapper{
    margin: 0 auto;
    width: 728px;
    height: 90px;
}
#wrapper {
    overflow: hidden;
    position: relative;
    background-color: #b5bd04;
    background: #b5bd04; 
    cursor: pointer;
    cursor: hand;
}
.abp{
    position: absolute;
    padding: 0;
    margin:0; 
}
.copy{
   font-family: 'Lato', sans-serif;
   font-weight: 900;
   font-style: normal;
   color: #FFFFFF;  
   font-size: 28px;
   line-height: 33px;
   text-align: left;
   height: auto;
   -webkit-font-smoothing:antialiased;
}

#banner {
    overflow: hidden;
    border: solid 1px #000000;
}

#model{ 
    right: -110px;
    top: 0px;
}

#copy1{
    left: 33px;
    top: 13px;
}
#copy2{
    left: 167px;
    top: 13px;
}
#copy3{
    left: 33px;
    top: 110px;
    font-size: 37px;
    color: #00205c;
}

#logo{
    left: 295px;
    top:-60px;
}
#cta{
    left: 450px;
    top:44px;    
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   opacity: 0;
}
.button{
    color: #00205c;
    display: inline-block;
    background: #ffffff;
    font-size: 15px;
    border-radius: 4px;
    padding: 8px 0;
    width: 125px;
    text-align: center;
    font-weight: 700;
}

#banner:active #cta,
#banner:focus #cta,
#banner:hover #cta {

    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -moz-animation-name: hvr-pop;
    -ms-animation-name: hvr-pop;
    -o-animation-name: hvr-pop;

    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -moz-animation-duration: .3s;
    -o-animation-duration: .3s;
    -ms-animation-duration: .3s;

    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;

    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    -ms-animation-iteration-count: 2;
    -o-animation-iteration-count: 2;
}

@-webkit-keyframes hvr-pop {
50% {-webkit-transform: scale(1.1);}
}
@keyframes hvr-pop {
50% {transform: scale(1.1)}
}
@-ms-keyframes hvr-pop  {
 50% {-ms-transform: scale(1.1);}
}
@-moz-keyframes hvr-pop {
 50% {-moz-transform: scale(1.1);}
}
@-moz-keyframes hvr-pop {
 50% {-moz-transform: scale(1.1);}
}
@-o-keyframes hvr-pop {
 50% {-o-transform: scale(1.1);}
}



@-webkit-keyframes typing {
  from {
    width: 0
  }
  to {
    width: 4.55em
  }
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 4.55em
  }
}
@-webkit-keyframes typingtwo {
    0% {width: 0; opacity: 0;}
    10% {opacity: 1;}
    100% { width: 5.55em;  opacity: 1;}
}
@keyframes typingtwo {
    0% {width: 0; opacity: 0;}
    10% {opacity: 1;}
    100% { width: 5.55em;  opacity: 1;}
}

@-webkit-keyframes caret {
    0% { border-color: transparent;}
    20% {border-color: #00205c;}
    90% {border-color: #00205c;}
    100% {border-color: transparent;}
}
@keyframes caret {
    0% { border-color: transparent;}
    20% {border-color: #00205c;}
    90% {border-color: #00205c;}
    100% {border-color: transparent;}
}
@-webkit-keyframes carettwo {
    0% { border-color: transparent;}
    20% {border-color: #00205c;}
    90% {border-color: #00205c;}
    100% {border-color: transparent;}
}
@keyframes carettwo {
    0% { border-color: transparent;}
    20% {border-color: #00205c;}
    90% {border-color: #00205c;}
    100% {border-color: transparent;}
}
#copy1,#copy2 {
  white-space: nowrap;
  overflow: hidden;
  border-right: .1em solid #00205c;
}
#copy1 {
  width: 4.5em;
  -webkit-animation: typing 1s steps(9, end),caret 1.4s forwards;
  animation: typing 1s steps(9, end),caret 1.4s forwards;
}
#copy2 {
    opacity: 0;
  width: 5.55em;
 -webkit-animation: typingtwo 1s steps(10, end) 2s forwards, carettwo 1.4s 2s forwards;
  animation: typingtwo 1s steps(10, end) 2s forwards, carettwo 1.4s 2s forwards;
}