@charset "UTF-8";
* {
      margin:0px;
      padding:0px;
      }
header, section, footer, aside, nav, article, figure {
      display:block;
      }
      
/* Smartphones (portrait and landscape) ----------- */
@media   screen and (min-width : 20px) and (max-width : 400px) and (orientation : landscape) {
#warpper{ width:100%; }
#banner img{ width:300; }
#welcome_title{ margin-top:0px; color:blue; font: bold 40px Arial;}
}
@media   screen and (min-width : 20px) and (max-width : 400px) {
#warpper{ width:100%; }
#banner img{ width:100%; }
#welcome_title{ margin-top:0px; color:orange; font: bold 25px Arial;}
#subtitle{ font: normal 15px Arial;}
#red_subtitle{ display:none;}
#my_job{font: bold 17px Arial; margin-top:30px; margin-left:10px; }
#discover{font: normal 15px Arial; margin-top:20px; margin-left:10px; ;}
#consultant_image{       background-size:135px 200px; background-repeat:no-repeat; height:200px; margin-top:-50px; width:135px; float:right;}
#next_text{ font: bold 20px Arial;  text-decoration:none; }
#next_arrow img{ width:40px;}
#start_button{ padding-left:50px; padding-top:60px; float:left;}
#select_product{ margin-left:10px;  margin-top:20px; font: normal 17px Arial; }
#mobile1, #mobile2, #mobile3 {  width:250px; height:50px; margin:0 auto; margin-top:20px; }
#mobile1_title,  #mobile2_title,  #mobile3_title{ font: bold 15px Arial; top:-20px; padding-left:10px;}
#mobile1 img, #mobile2 img, #mobile3 img{ width:50px; height:50px;}
#image1, #image2, #image3, #image4, #image5  { display:none; }
#questions{ margin-left:10px;  }
#question_title{ margin-top:15px; font: bold 15px Arial; width:300px;}
#question_options{font: normal 15px Arial; }
#nextexist_image{ display:none;}
#AdvisorQ_image{display:none;}
#prevnext{ padding-left:10px;  text-align:center;  position:relative;  top:20px;  left:0px; }
#prevnext_text{  font: bold 16px Arial; padding-top:10px; color:red; text-decoration:none;  float:left; padding-left:30px; }
#next_arrow, #prev_arrow{ float:left;  padding-left:30px;  cursor:pointer; }
#the_input input{ width:200px;}
#email_image{       background-size:100px 150px; background-repeat:no-repeat; height:150px; margin-top:-10px; width:100px; float:right;}
}

/* Smartphones (portrait and landscape) ----------- */
@media   screen and (min-width : 400px) and (max-width : 800px) and (orientation : landscape) {
#warpper{ width:100%; }
#banner img{ width:100%; }
#welcome_title{ margin-top:0px; color:brown; font: bold 25px Arial;}
#subtitle{ font: normal 15px Arial;}
#red_subtitle{ display:none;}
#my_job{font: bold 20px Arial; margin-top:30px; margin-left:10px; }
#discover{font: normal 13px Arial; margin-top:0px; margin-left:10px; ;}
#consultant_image{       background-size:135px 200px; background-repeat:no-repeat; height:200px; margin-top:-80px; width:135px; float:right;}
#next_text{ font: bold 20px Arial;  text-decoration:none; }
#next_arrow img{ width:30px;}
#start_button{ padding-left:50px; padding-top:40px; float:left;}
#select_product{ margin-left:10px;  margin-top:20px; font: normal 17px Arial; }
#mobile1, #mobile2, #mobile3 {  width:250px; height:50px; margin:0 auto; margin-top:20px; }
#mobile1_title,  #mobile2_title,  #mobile3_title{ font: bold 15px Arial; top:-20px; padding-left:10px;}
#mobile1 img, #mobile2 img, #mobile3 img{ width:50px; height:50px;}
#image1, #image2, #image3, #image4, #image5  { display:none; }
#questions{ margin-left:10px;  }
#question_title{ margin-top:15px; font: bold 20px Arial; width:500px;}
#question_options{font: normal 12px Arial; }
#nextexist_image{    background-size:135px 200px; background-repeat:no-repeat; height:200px; margin-top:-80px; width:135px; float:right;}
#AdvisorQ_image{display:none;}
#prevnext{ margin:0px auto; text-align:center;  position:relative;  top:20px;  left:0px;  width:300px;}
#prevnext_text{  font: bold 16px Arial; padding-top:10px; color:red; text-decoration:none;  float:left; padding-left:30px; }
#next_arrow, #prev_arrow{ float:left;  padding-left:30px;  cursor:pointer; }
#the_input input{ width:200px;}
#email_image{       background-size:100px 150px; background-repeat:no-repeat; height:150px; margin-top:-10px; width:100px; float:right;}
}
@media   screen and (min-width : 400px) and (max-width : 800px) and (orientation : portrait) {
#warpper{ width:100%; }
#banner img{ width:100%; }
#welcome_title{ margin-top:30px; color:pink; font: bold 40px Arial;}
#subtitle{ font: normal 20px Arial;}
#red_subtitle{ font: normal 20px Arial; width:600px;}
#my_job{font: bold 18px Arial; margin-top:40px; margin-left:60px; }
#discover{font: normal 18px Arial; margin-top:20px; margin-left:60px; }
#consultant_image, #email_image{       background-size:270px 400px; background-repeat:no-repeat; height:400px; margin-top:-160px; width:270px; float:right;}
#next_text{ font: bold 25px Arial; text-decoration:none; }
#next_arrow img{ width:30px;}
#start_button{ padding-left:150px; padding-top:150px; float:left;}
#nav_mobile { display:none; }
#mobile1, #mobile2, #mobile3 {  display:none; }
#select_product{ margin-left:50px;  margin-top:50px; font: normal 20px Arial; }
#questions{ margin-left:10px;  margin-top:50px;}
#question_title{ margin-top:15px; font: bold 25px Arial; width:500px;}
#question_options{font: normal 20px Arial; }
#nextexist_image{ left:400px;   top:-170px; background-size:300px 400px;  background-repeat:no-repeat; height:400px; //margin-top:-160px; width:300px; position:relative;}
#AdvisorQ_image{background-size:270px 350px; background-repeat:no-repeat; height:350px;  margin-top:-250px; width:270px;  float:right; }
#prevnext{ padding-left:150px;  text-align:center;  position:relative;  top:40px;  left:0px; }
#prevnext_text{  font: bold 16px Arial; padding-top:10px; color:red; text-decoration:none;  float:left; padding-left:30px; }
#next_arrow, #prev_arrow{ float:left;  padding-left:30px;  cursor:pointer; }
#next_arrow img, #prev_arrow img{ width:40px; }
}

/* Computers----------- */
@media  screen and (min-width : 800px)  {
#warpper{ width:780px; }
#banner img{ width:100%; }
#welcome_title{ margin-top:30px; color:red; font: bold 40px Arial;}
#subtitle{ font: normal 20px Arial;}
#red_subtitle{ font: normal 20px Arial; width:500px;}
#my_job{font: bold 18px Arial; margin-top:40px; margin-left:60px; }
#discover{font: normal 18px Arial; margin-top:20px; margin-left:60px; }
#consultant_image, #email_image{       background-size:270px 400px; background-repeat:no-repeat; height:400px; margin-top:-160px; width:270px; float:right;}
#next_text{ font: bold 20px Arial; text-decoration:none; }
#next_arrow img{ width:50px;}
#start_button{ padding-left:150px; padding-top:150px; float:left;}
#nav_mobile { display:none; }
#mobile1, #mobile2, #mobile3 {  display:none; }
#select_product{ margin-left:50px;  margin-top:50px; font: normal 20px Arial; }
#question_title{ margin-top:20px; font: bold 18px Arial; width:450px;}
#question_options{font: normal 14px Arial; }
#nextexist_image{ left:500px;   top:-100px; background-size:270px 350px;  background-repeat:no-repeat; height:350px; //margin-top:-160px; width:270px; position:relative;}
#AdvisorQ_image{background-size:270px 350px; background-repeat:no-repeat; height:350px;  margin-top:-250px; width:270px;  float:right; }
#prevnext{ padding-left:150px;  text-align:center;  position:relative;  top:40px;  left:0px; }
#prevnext_text{  font: bold 16px Arial; padding-top:10px; color:red; text-decoration:none;  float:left; padding-left:30px; }
#next_arrow, #prev_arrow{ float:left;  padding-left:30px;  cursor:pointer; }
#next_arrow img, #prev_arrow img{ width:40px; }
}

#warpper{
      //border:1px solid lightgray;
      margin: 0 auto;  /*Center*/
}
#welcome_title{
      text-align:center;
      }
#subtitle{
      text-align:center;
      }
#red_subtitle{
      text-align:center;
      color:red;
      margin: 0 auto;  /*Center*/
      }
 #next{
      padding-left:150px;
      padding-top:150px;
       float:left;
      }

#next_text{
       text-decoration:none;
       float:left;
       padding-top:10px;
       color:red;
       text-decoration:none;
      }

#image1, #image2, #image3, #image4, #image5 {
      text-align:center;
      width:250px;
      height:200px;
      position:relative;
      }
#image1_title,  #image2_title,  #image3_title,  #image4_title,  #image5_title{
       font: normal 13px Arial;
       text-align:center;
      }
#image1{
      top:40px;
      left:20px;
       margin-bottom: -100px;
      }
#image2{
      top:-60px;
      left:520px;
      margin-bottom: -100px;
      }
#image3{
      top:-50px;
      left:270px;
      margin-bottom: -100px;
      }
#image4{
      top:-20px;
      left:20px;
      margin-bottom: -100px;
      }
#image5{
      top:-120px;
      left:520px;
      margin-bottom: -100px;
      }
#mobile1, #mobile2, #mobile3, #mobile4, #mobile5 {
      border:1px solid lightgray;
      text-align:left;
      -moz-box-shadow:0px 0px 50px 9px rgba(119, 119, 119, 0.8);
      -webkit-box-shadow:0px 0px 50px 9px rgba(119, 119, 119, 0.8);
      box-shadow:0px 0px 50px 9px rgba(119, 119, 119, 0.8);
      }
#mobile1_title,  #mobile2_title,  #mobile3_title{
       text-align:left;
       position:relative;
      }
#the_lable{
      font: normal 14px Arial;
      }

#notshare{
      font: normal 12px Arial;
      width:500px;
      }
#screen_info{
       font: normal 16px Arial;
      position:relative;
      top:300px;
      left:0px;
      background:yellow;
}