body { margin: 0px; padding: 0px; }
/* this is for theway 

#TheWay { background-color:white; background-repeat: no-repeat; background-size: cover; font-family:Helvetica Neue, Helvetica, Arial, sans-serif;}
#TheWay div.currTime{font-weight:bold;text-align:center;color:#FF00FF;font-size:15pt; position:fixed; bottom:10px; right:10px;}
#TheWay div.currTime{font-weight:bold;text-align:center;color:#FF00FF;font-size:15pt; position:fixed; bottom:10px; right:10px;}
#TheWay div.daysLeft{font-weight:bold;text-align:center;color:#FF00FF;font-size:15pt; position:fixed; bottom:10px; left:10px;}
#TheWay {width:90%;  margin:0px auto; background-color:rgb(255,255,255, .9); border:2px solid orange; padding:10px 10px 30px 10px; position: fixed; top: 55%; left: 50%; transform: translate(-50%, -50%); display: table;}
#TheWay div.myrow {display: table-row;}
#TheWay div.mycell {display: table-cell;}
#TheWay div.container{width:80% !important;}
#TheWay div.title{background-image:url('/assets/Images/subaruLogo.png'); background-size:200px 41px; background-repeat:no-repeat; font-size:35px; color:#1164ff; height: 58px; text-align:center; font-weight:bold;}
#TheWay div.counterTitle{ text-align:center; font-size:22px;}

#TheWay div.counter { background-image:url('/assets/Images/subaru_logo1.png'); background-size: 900px 483px; background-repeat:no-repeat; background-position:center center;}
#TheWay div.progress-bar {
	  position: relative;  border: #ccc solid 1px;  width: 926px;   line-height: 40px;  vertical-align: midle;  overflow: hidden;  margin: 10px auto 50px;  font-family: arial, sans-serif; 
    font-weight: bold;  font-size: 45px;  box-shadow: 0 4px 10px -5px rgba(0, 0, 0, 0.25);
}
#TheWay div.progress-bar .bar { position: absolute;  top: 0;  height: 100%;  overflow: hidden; }
#TheWay div.progress-bar .bar span {  position: absolute;  display: block;  width: 926px;  height: 100%;  text-align: center;  padding-top:160px;}
#TheWay div.progress-bar .bar.positive {  background: #fff;   left: 0; width:95%;    -webkit-animation: animate-positive 1s;  animation: animate-positive 1s;}
#TheWay div.progress-bar .bar.positive span {  left: 0;  color: #fff;  text-shadow: 2px 2px 2px #000;}
#TheWay div.progress-bar .bar.negative { margin-left:100px; background: #222;  right: 0;  width: 100%;  -webkit-animation: animate-negative 1s;  animation: animate-negative 1s; opacity:0.5}
#TheWay div.progress-bar .bar.negative span {  right: 0;  color: #fff;  text-shadow: 2px 2px 2px #000;}
#TheWay div.progress-bar .bar.carover {  right: 0;  width: 100%;  background-repeat: no-repeat; background-size: cover;}
#TheWay div.progress-bar .bar.carover span {  right: 0;  color: #fff;}

 this is the end for theway */


 #theWay div.counterNumber {vertical-align: middle; font-size:180px; line-height:1; text-align:center; opacity: .8; color:#6495ED; text-shadow: 2px 2px 2px #FF0000; font-weight:bold;}
 #theWay div.status {font-weight:bold;text-align:center;color:#FF00FF;font-size:22px; position:fixed; bottom:10px;}
 #theWay div.currTime{right:10px;}
 #theWay div.daysLeft{left:10px;}


 /*Love Promise Banner*/
 .lovePromiseBanner{width: 95%;margin:0px auto; position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer;}
 .drivingAnalytics{width:55%; margin: 0px auto; text-align: center; box-sizing: border-box; padding-top: 5px; }
 .drivingAnalytics img{width: 100%; cursor: pointer; }
 /*End of Love Promise Banner*/

 

 





 @media only screen and (min-width: 650px) and  (max-width: 900px){ 
    .lovePromiseBanner{
        height:95%;
        width:80%;
    }
    .drivingAnalytics img{
        width: 47%; 
     } 

 }