@charset "utf-8";
/* CSS Document */

@charset "UTF-8";
* {
      margin:0px;
      padding:0px;
      }
header, section, footer, aside, nav, article, figure {
      display:block;
      }

#warpper{ max-width:825px; margin:30px auto 0;     padding: 0 30px;}      
/* Smartphones (portrait and landscape) ----------- */
@media   screen and (min-width : 20px) and (max-width : 400px) and (orientation : landscape) {
#welcome_title{ margin-top:0px; color:blue; font: bold 40px Arial;}
}
@media   screen and (min-width : 20px) and (max-width : 400px) {
#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; width:135px; float:right;}
#next_text{ font: bold 20px Arial;  text-decoration:none; }
#start_button{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;}
#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;   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) {
#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:-40px; width:135px; float:right;}
#next_text{ font: bold 20px Arial;  text-decoration:none; }
#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;}
#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) {
#welcome_title{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; }
#discover{font: normal 18px Arial; margin-top:20px;}
#consultant_image, #email_image{       background-size:100%; 
    background-position: right;background-repeat:no-repeat; height:400px;  width:270px; float:right;}
#next_text{ font: bold 25px Arial; text-decoration:none; }
#start_button{ padding-left:0; padding-top:150px; float:left;    line-height: 400px;}
#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; }
}

/* Computers----------- */
@media  screen and (min-width : 800px)  {
#welcome_title{ color:red; font: bold 40px Arial;}
#subtitle{ font: normal 20px Arial;}
#red_subtitle{ font: normal 20px Arial; width:550px;}
#my_job{font: bold 18px Arial; margin-top:40px; }
#discover{font: normal 18px Arial; margin-top:20px;  }
#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:100px; 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;*/ }
}
#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;
      } */
.flex_content {
    display: flex;
    justify-content: center;
}
.images_right {text-align:center;}
#next_text{
       text-decoration:none;
       float:left;
       padding-top:10px;
       color:red;
       text-decoration:none;
      }
.step span{
    padding-bottom:10px !important;
}
#image1, #image2, #image3, #image4, #image5 {
    text-align: center;
    width: auto;
    height: 200px;
    display: inline-block;
    margin: 0 20px;
    float: none !important;
    position: relative;
}
#image1_title,  #image2_title,  #image3_title,  #image4_title,  #image5_title{
       font: normal 13px Arial;
       text-align:center;
      }
#image1{
      top:40px;      
}
#image2{
      top:40px;
}
#image3{
      top:40px;
}
#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;
}
.stask_3 input{
    margin-bottom: 0px;
}
@media (max-width:650px) { 

	#five .flex_content td {display:block;margin-bottom:10px;}
    body #start_button{line-height: normal;margin-top: 10px;padding-top: 10px;}
}
@media (max-width:600px) {
	.flex_content {display:block }
}