/**/

/*Global styles*/

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: 10px;
}

body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.w100 {
  width: 100%;
}

.section-wrapper {
  width: 80%;
  margin: 0 auto;
  max-width: 1100px;
  min-width: 320px;
}

/*Header*/

header {
  background: #fff;
  padding: 1rem;
  height: 5.2rem;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
}

header.fixed {
  position: fixed;
  z-index: 5;
  top:0;
}

.header-wrapper {
  width: 95%;
  margin: 0 auto;
}

h1 {
  float: left;
}

h1 a img {
  display: block;
  height: 3.5rem;
}

header div > a {
  color: #000;
  text-decoration:none;
  float: right;
  font-weight: 300;
  margin-right: 2.5rem;
  margin-top: .7rem;
  font-size: 1.6rem;
}

a.download {
  color: #FF4081;
  text-decoration:none;
  text-transform: uppercase;
  font-weight: 500;
}

.select-dropdown {
  float: right;
  height: 37px;
  border: .25px solid #000000;
  font-size: 9px;
}

/*Notice - Chinese only*/
#notice {
    display: none;
    position: fixed;
    left: 0;
    top: 5.2rem;
    max-width: 360px;
    max-height: 170px;
    background-color: #f50057;
    z-index: 10;
}
#notice * {
    color: #fff;
    font-size: 18px;
}
a#close-notice {
    padding: 10px;
    display: block;
    float: right;
}
#notice p {
    display: block;
    float: left;
    padding: 10px;
    width: 90%;
}

/*Intro Desktop*/

#intro-desktop {
  width: 100%;
  margin-top: 5rem;
}

#intro-desktop div {
  padding: 6.4rem 0 0 0;
  text-align: center;
  height: 25rem;
}

#intro-desktop .intro-bg {
  background-color: #F5F6F7;
  padding: 5rem 5rem;
  height: auto;
}

#intro-desktop .intro-bg.with-images {
  background-color: #F5F6F7;
  background-image: url('../images/2560_Large_Laptop.png'), url('../images/1024_Standard_Phone.png');
  background-repeat: no-repeat;
  background-position: left -115px top 23px, right -85px top -45px;
  background-size: 415px 260px, 377px 417px;
  padding: 6rem 0 12rem 0;
}

#intro-desktop .intro-bg.with-images.ch-lang {
  background-color: #F5F6F7;
  background-image: url('../images/2560_Large_Laptop_ch.png'), url('../images/1024_Standard_Phone_ch.png');
  background-repeat: no-repeat;
  background-position: left -115px top 23px, right -85px top -45px;
  background-size: 415px 260px, 377px 417px;
  padding: 6rem 0 12rem 0;
}


#intro-desktop h2 {
  font-size: 6.1rem;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
  border-bottom: 3px solid #000;
}

#intro-desktop span {
  font-size: 2.7rem;
  font-weight: 100;
  display: block;
  margin-top: 1rem;
}

#intro-desktop .intro-bg p {
  font-size: 1.7rem;
  font-weight: 300;
}

#intro-desktop .intro-bg > span {
  font-size: inherit;
  font-weight: 100;
}

#intro-desktop .intro-bg > span a {
  text-decoration: inherit;
  color: inherit;
  font-weight: 300;
}

a.download-btn {
  line-height: 4rem;
  width: 20rem;
  background: #FF4081;
  color: #fff;
  display: block;
  margin: 2rem auto 1rem auto;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 300;
  text-align: center;
}


.google-badge {
  margin: 20px 0;
  display: block;
}

.google-badge img {
  width: 14rem;
}

.google-badge.on-mobile img {
  width: 10rem;
}

/*Intro Mobile*/

#intro-mobile {
  display: none;
  background: url('../images/mobile_image_en.jpg') no-repeat left bottom;
  background-size: auto 440px;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  margin-top: 10vh;
  padding: .3rem .2rem 2rem .2rem;
}

#intro-mobile.ch-lang {
  background: url('../images/mobile_image_cn.jpg') no-repeat left bottom;
  background-size: auto 440px;
}

#intro-mobile h2 {
  font-size: 2.8rem;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  text-align: center; 
}

#intro-mobile span {
  font-size: 1.8rem;
  font-weight: 100;
  display: block;
  margin-top: .7rem;
  text-align: center;
}

#intro-mobile .bottom-info {
  position: absolute;
  bottom: 0rem;
  width: 100%;
  left: 0;
  text-align: center;
}

#intro-mobile .bottom-info span {
  font-size: 1rem;
  font-weight: 300;
}

#intro-mobile .bottom-info span a {
  text-decoration: inherit;
  color: inherit;
}


/*Features*/

#features {
  background-color: #F5F6F7;
  padding: 3rem 0 6rem 0;
}

.feat-col {
  width: 20%;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 0 2%;
}

.feat-col:first-child p, .feat-col:first-child li{
  text-align: left;
}

.feat-col img {
  height: 6rem;
}

.feat-col h3 {
  font-size: 1.9rem;
  margin: 1rem 0;
}

.feat-col p, .feat-col li, .feat-col a {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2rem;
}

.feat-col a {
  color: #00BCD4;
}

.feat-col li {
  list-style: inside url(../images/x.svg);
}

/*Reviews*/

#reviews {
  border-top: none;
  padding: 8rem 0;
}

.carousel {
  width: 100%
}

.car-item {
  width: 100%
}

.car-item img {
  height: 3rem;
  display: block;
  margin: 0 auto;
}

.car-item p.quote, .car-item p.quote b {
  font-size: 3.6rem;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  width: 90%;
  margin: 2rem auto;
  line-height: 4.6rem;
}

.car-item p.quote b {
  font-weight:500; 
}

.car-item span {
  font-size: 1.3rem;
  font-weight: 300;
  text-align: center;
  width: 90%;
  display: block;
  margin: 0 auto;
}


/*Press*/

#press {
  padding: 3rem 0;
  background: #F5F6F7;
}

#press h3 {
  color: #000000;
  font-size: 2.25rem;
  text-align: center;
  font-weight: bold;
}

.press {
  width: 100%;
  padding: 0;
  min-height: 50px;
  margin: 3rem 0 2rem 0;
  text-align: center;
}

.press a {
  display: inline-block;
  height: 3.5rem;
  margin: 1rem 2%;
  vertical-align: top;
  width: 16%;
  line-height: 3rem;
}

.press a img {
  height: auto;
  width: 90%;
  max-height: 2.5rem;
  vertical-align: middle;
}


/*Footer*/

footer {
  background: #FFF;
  width: 100%;
  padding: 2rem 6rem 2rem 6rem;
  overflow: auto;
}

.footer-link {
  display: inline-block;
  margin-right: 1rem;
  padding: 1rem .5rem;
}

.footer-link a, .footer-link a span {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2rem;
  font-weight: 300; 
}

.desktop-txt {
  display: block;
}

.mobile-txt {
  display: none;
}

.follow-us {
  float: left;
  margin-top: 1rem;
  width: 55%;
}

.follow-us.ch-site {
  width: 100%;
}

.footer-address {
  margin-top: 16px;
  clear: both;
  color: #fff;
  text-decoration: none;
  font-size: .7rem;
}

.newsletter {
  float: right;
  margin-top: 1rem;
}

h4 {
  color: #000;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 2rem;
}

input[type="email"] {
    border: 1px solid #000;
    border-radius: 0;
    height: 3.4rem;
    display: block;
    padding: 0 .5rem;
    background: #fff;
    color: #000;
    float: left;
    width: 25rem;
    outline: none;
    font-size: 1.6rem;
}

button[type="submit"],
input[type="submit"] {
    display: block;
    height: 3.4rem;
    border: none;
    background: #000;
    padding: 0 10px;
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    font-weight: normal;
    float: left;
    outline: none;
    font-size: 1.6rem;
}

form.news-form {
    display: block;
    margin: .5rem 0;
}

.newsletter input[type="email"]::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */

    color: #000;
}

.newsletter input[type="email"]::-moz-placeholder {
    /* Firefox 19+ */

    color: #000;
}

.newsletter input[type="email"]:-ms-input-placeholder {
    /* IE 10+ */

    color: #000;
}

.newsletter input[type="email"]:-moz-placeholder {
    /* Firefox 18- */

    color: #000;
}

.address {
  width: 100%;
  float: left;
}

.address address {
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  padding: 1rem .5rem;
  line-height: 1.5rem;
}


/*FAQ HOME*/

section#faq-section {
  padding: 15rem 0 4rem 0;
}

#faq-section .section-wrapper {
  width: 55%;
  text-align: center;
}

#faq-section h2 {
  font-size: 4rem;
  font-weight: 400;
  display: inline-block;
  border-bottom: 3px solid #000;
  margin: 0 auto 3rem auto;
}

#faq-section p.centered, #faq-section p.centered a {
  margin-bottom: 2rem;
  font-size: 1.7rem;
  font-weight: 300;
}

#faq-section p.centered a {
  color: #2B8C9D;
}

.question {
  width: 100%;
}

.question > a {
  font-size: 1.8rem;
  color: #000000;
  text-decoration: none;
  display: block;
  width: 100%;
  border-bottom: 1px solid #000000;
  padding: 1.5rem 0;
  font-weight: 500;
  text-align: left;
}

.question a i {
  color: #00BCD4;
  float: right;
  margin-top: .2rem;
  font-size: 2.4rem;
  margin-right: .5rem;
}

.show i.fa.fa-angle-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.answer {
  width: 100%;
  margin: 2.5rem 0;
  display: none;
}

.answer p {
  font-size: 1.8rem;
  color: #000000;
  display: block;
  width: 100%;
  padding: 1.5rem 0;
  font-weight: 300;
  text-align: left;
}

.answer p b {
  font-size: 1.8rem;
  font-weight: 500;
}

.answer p a {
  color: #2B8C9D;
  font-size: 1.8rem;
}

.show .answer {
  display: block;
}



/*Media queries*/


/*Tablet*/

@media all and (max-width: 800px) and (min-width: 500px){
  
  body, html {
    font-size: 12px;
    zoom: 80%;
  }

  .section-wrapper {
    width: 100%;
  }
  
  .select-dropdown {
    width: 220px !important;
    font-size: 9px !important;
    padding: 14px !important;
    height: 46px;
  }
  
  .select-dropdown .dropdown {
    width: 220px !important;
    left: -2px !important;
  }
  
  .select-dropdown .dropdown li a {
    width: 217px !important;
    font-size: 9px !important;
    border: none;
  }
  
  
}
  
  


/*Mobile*/

@media all and (max-width: 499px) and (min-width: 300px) {
  
  body, html {
    font-size: 12px;
  }
  
  header {
    height: 4rem;
  }
  
  h1 a img {
    height: 2.8rem;
    margin: -.5rem;
  }
  
  .select-dropdown {
    height: 37px;
    border: none;
    width: 105px !important;
    padding: 13px 10px !important;
    margin-top: -5px !important;
  }
  
  .select-dropdown .dropdown {
    width: auto !important;
  }
  
  header div > a {
    display: none;
  }
  
  .intro-desktop {
    display: none;
  }
  
  #intro-mobile {
    display: block;
  }
  
  #features {
    padding-bottom: 3rem;
    background: #fff;
  }
  
  .feat-col {
    width: 90%;
    margin: 0 4% 4rem 4%;
  }
  
  #reviews {
    border-top: 1px solid #e5e5e5;
    padding: 4rem 0;
  }

  .car-item p.quote,
  .car-item p.quote b{
    font-size: 1.9rem;
    line-height: 2.4rem;
  }

  .car-item span {
    font-size: 1.1rem;
  }
  
  #press {
    padding: 1rem 0;
  }
  
  #press .section-wrapper {
    width: 90%;
  }
  
  .press {
    margin: 1rem 0;
  }
  
  .desktop-txt {
    display: none;
  }

  .mobile-txt {
    display: block;
  }
  
  footer {
    padding: 2rem 0;
  }

  .follow-us {
    width: 100%;
    text-align: center;
  }

  .footer-link {
    padding: 1rem 0rem;
    width: 32.5%;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
    margin-right: 0;
  }
  
  div.footer-link:nth-child(n+7) {
    width: 48%;
  }
  
  .newsletter {
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  form.news-form {
    margin: .5rem auto;
    display: inline-block;
  }

  input[type="email"] {
    height: 2.8rem;
    width: 70%;
  }

  button[type="submit"],
  input[type="submit"] {
    height: 2.8rem;
    width: 30%;
  }
  
  .address {
    text-align: center;
    padding: 1rem 0;
  }
  
  #faq-section p.centered, 
  #faq-section p.centered a,
  .answer p, .answer p a,
  .question > a {
    font-size: 1.4rem;
  }
  
  .question > a {
    padding-right: 4rem;
  }
  
  .question a i {
    margin-right: -3rem;
  }

  #faq-section .section-wrapper {
    width: 90%;
  }
  
  #faq-section h2 {
    font-size: 2.2rem;
  }
  
}

@media all and (max-width: 350px) and (min-width: 300px) {
  #intro-mobile h2 {
    font-size: 2.4rem;
  }
  #intro-mobile, #intro-mobile.ch-lang {
    background-size: auto 425px;
  }
  
  #intro-mobile .bottom-info {
    bottom: 0rem;
  }
}


/*Mid Screen*/

@media all and (max-width: 1400px) and (min-width: 800px){ 
  .select-dropdown {
    height: 32px;
    padding: 10px 10px !important;
  }

}

@media all and (max-width: 1600px) and (min-width: 1400px){ 

  * {
    font-size: 12px;
  }
  
  #intro-desktop .intro-bg.with-images {
    background-image: url('../images/2560_Large_Laptop.png'), url('../images/900_Large_Phone.png');
    background-position: left -130px top 23px, right -100px top -45px;
    background-size: auto 310px, auto 470px;
  }

  #intro-desktop .intro-bg.with-images.ch-lang {
    background-image: url('../images/2560_Large_Laptop_ch.png'), url('../images/900_Large_Phone_ch.png');
    background-position: left -130px top 23px, right -100px top -45px;
    background-size: auto 310px, auto 470px;
  }

}

/*Large Screen*/

@media all and (max-width: 2100px) and (min-width: 1601px){ 

  * {
    font-size: 13px;
  }
  
  #intro-desktop .intro-bg.with-images {
    background-image: url('../images/2560_Large_Laptop.png'), url('../images/1540_Large_Phone.png');
    background-position: left -150px top 23px, right -100px top -45px;
    background-size: auto 378px, auto 553px;
  }

  #intro-desktop .intro-bg.with-images.ch-lang {
    background-image: url('../images/2560_Large_Laptop_ch.png'), url('../images/1540_Large_Phone_ch.png');
    background-position: left -150px top 23px, right -100px top -45px;
    background-size: auto 378px, auto 553px;
  }


}

/*Extra Large Screen*/

@media all and (max-width: 3000px) and (min-width: 2101px){ 

  * {
    font-size: 15px;
  }
  
  #intro-desktop .intro-bg.with-images {
    background-image: url('../images/2560_Large_Laptop.png'), url('../images/1540_Large_Phone.png');
    background-position: left -215px top 23px, right -170px top -45px;
    background-size: 791px 494px, 696px 770px;
    padding: 9rem 0 15rem 0;
  }

  #intro-desktop .intro-bg.with-images.ch-lang {
    background-image: url('../images/2560_Large_Laptop_ch.png'), url('../images/1540_Large_Phone_ch.png');
    background-position: left -215px top 23px, right -170px top -45px;
    background-size: 791px 494px, 696px 770px;
    padding: 9rem 0 15rem 0;
  }


}


