@charset "UTF-8";
/* CSS Document */
@media only screen 
   and (min-width: 2132px) {

.on .imaginetxt {
    left: 20%;
}
.on .phoneimg {
    right: 20%;
}

}

@media only screen 
   and (min-width: 1819px) {
    .managers .content ul li a {background-size: 50%;}  
    .managers .content ul li a:hover {background-size: 55%;}   
}

@media only screen 
   and (min-width: 1740px) {

.on .imaginetxt {
    left: 15%;
}
.on .phoneimg {
    right: 15%;
}

}

@media only screen 
   and (min-width: 1448px) {

.on .imaginetxt {
    left: 10%;
}
.on .phoneimg {
    right: 10%;
}

}

@media only screen 
   and (max-width: 866px) {
   .tsbg {height: 570px; width: 520px; margin: -70px 0px 30px 20%;}
    .content {min-width: 750px;} 
    .someone {left: 50px;bottom: 385px;font-size: 34px;}
    .on .phoneimg {height: 384px; width: 351px;}
    .on .imaginetxt { width: 296px;left: 60px; bottom: 100px;}
    .imagine {height: 406px;}
    .imagine .content {height: 390px;}
    .managers .content ul { height: 255px;}
    .managers .content ul li { height: 255px;}
    .managers .content ul li a {font-size: 18px;padding: 187px 33px 20px 33px;}
    .managers .content ul li a span {font-size: 30px; margin-top: -12px;}
    .zone3 img {width: 90%;}
    
}

@media only screen 
   and (max-width: 780px) {
   .tsbg {height: 570px; width: 520px; margin: -70px 0px 30px 18%;}
  .content { min-width: 600px; width: 90%} 
  .statments {right: -2%; bottom: 120px;}
   .managers .content ul { height: 235px;}
    .managers .content ul li { height: 235px;}
    .managers .content ul li a {font-size: 18px;padding: 173px 13px 20px 13px;}
    .managers .content ul li a span {font-size: 30px; margin-top: -12px;}
    p.explan {width: 31%;margin-left: 3%;}   
    .on .phoneimg {right: 0px;}
    .on .imaginetxt {width: 296px;left: 30px; bottom: 100px;}
    .tab2 { margin-bottom: 200px;display: block;}

}
@media only screen 
   and (max-width: 630px) {
   .content { min-width: 400px; width: 95%}
   
   .managers .content ul {height: 205px; margin-left: -12px; margin-right: -12px;} 
   .managers .content ul li {width: 32.8%; height: 205px;}
   .managers .content ul li a {font-size: 14px;padding: 143px 13px 29px 13px;}
   .managers .content ul li a span {font-size: 24px; margin-top: -8px;} 
      
   .wf-wrapper { display: inline-block;width: 98%;}
   p.explan {width: 85%;margin-left: 10%;height: auto;margin: 10px 0 25px 0;}
   .tab2 .explan {width: 95%;float: none;}
   .s-wrapper { width: 65%;}
    .tab2 { margin-bottom: 20px;display: block;}
   .tab3 .explan {float: none;width: 85%; margin: 50px 0 0px 0;}
}   

@media only screen 
  and (min-width: 471px) 
  and (max-width: 660px) {
  #logo {top: 40px;}
  .tsbg {
    height: 570px;
    width: 80%;
    margin: 0px 0px 30px 15%;
}
.someone {bottom: 505px;}
.statments {
    right: 13%;
    bottom: 115px;
    padding: 20px;
    background-color: rgba(255, 255, 255, .6);
}
 .hometopnav .nav {position: fixed; top: 0px; left: 0px; width: 100%; background-color: #666; color: #fff; z-index: 1000;}
 .hometopnav .nav ul {margin: 0px; padding: 0px;}
 .hometopnav .nav ul li {width: 50%; margin: 0px; padding: 0px;}
 .hometopnav .nav ul li a {width: 100%; text-align: center; color: #fff; padding: 10px;}

     
  
  }
@media only screen 
  and (min-width: 538px) 
  and (max-width: 900px) {
  
.tab1 .nextbtn {
    bottom: -250px;
    right: 20px;
}
.tab2 .nextbtn {
    bottom: -250px;
    right: 30px;
}
.tab3 .nextbtn {
    bottom: -210px;
    right: 20px;
    opacity: .08;
}
.homefooter {
 margin-top: 200px;
} 
.zone1 {width: 60%;}
.zone2 {width: 35%;} 
.zone3 { padding-left: 0px;
    text-align: left;width: 100%;} 
.zone3 i {float: none;
 margin-top: 45px;
 margin-bottom: 50px;
 width: 88%;}
.zone3 img {
    width: 65%;
    float: right;
    margin-right: 50px;
}
 
  }  
@media only screen 
  and (min-width: 471px) 
  and (max-width: 614px) {
  
  .on .phoneimg {
    right: 0px;
    bottom: -95px;
    width: 260px;
}
  .on .imaginetxt {width: 246px;left: 30px; bottom: 150px;}
  
}  

@media only screen 
  and (min-width: 620px) 
  and (max-width: 900px) {
  
  .zone3 img {
    width: 45%;
    float: right;
    margin-right: 30px;
}
  
}  

@media only screen 
  and (min-width: 900px) 
  and (max-width: 1078px) {
  
  .zone3 img {
    width: 65%;
    float: right;
    margin-right: 30px;
}
  
}   

@media only screen 
  and (min-width: 471px) 
  and (max-width: 538px) {
  
.managers h2 {
    margin: 50px 0 10px 0;
    font-size: 28px;
}
.wf-wrapper {
    width: 93%;
}

.commenttop {
    margin-bottom: 0px;
    padding: 6px;
    font-size: 14px;
    margin-left: 0%;
}
.commentbottom {
    margin-top: 0px;
    font-size: 14px;
    padding: 6px;
    margin-left: 0%;
}
p.explan {
    width: 93%;
    padding: 10px;
    float: none;
}
.s-wrapper {
    width: 93%;
}
.tab1 .tab1content {
    display: block;
    margin-bottom: 70px;
}
.tab2 .explan {
    width: 85%;
    float: none;
}
.zone1 {width: 60%;}
.zone2 {width: 35%;} 
.zone3 { padding-left: 0px;
    text-align: left;width: 100%;} 
.zone3 i {float: none;
 margin-top: 45px;
 margin-bottom: 50px;
 width: 88%;}
.zone3 img {
    width: 65%;
    float: right;
    margin-right: 50px;
}

.tab1 .nextbtn {
    bottom: -90px;
    right: 20px;
}
.tab2 .nextbtn {
    bottom: -120px;
    right: 30px;
}
.tab3 .nextbtn {
    bottom: -120px;
    right: 20px;
    opacity: .03;
}
    
}  
  
  /* mobile */
@media only screen 
  and (min-width: 245px) 
  and (max-width: 470px) {
 body {border-left: 5px solid #666666; border-right: 5px solid #666666;margin-left: 0px; margin-right: 0px;}
 .hometopnav .nav {position: fixed; top: 0px; left: 0px; width: 100%; background-color: #666; color: #fff; z-index: 1000;}
 .hometopnav .nav ul {margin: 0px; padding: 0px;}
 .hometopnav .nav ul li {width: 50%; margin: 0px; padding: 0px;}
 .hometopnav .nav ul li a {width: 100%; text-align: center; color: #fff; padding: 10px;}
 
 
  #logo {top: 40px;}
  .content { min-width: 115px; width: 98%;padding: 10px 0px 0px 10px;} 
  .tsbg {
    height: 350px;
    width: 95%;
    margin: 0px 0px 30px 5%;
}
.someone {bottom: 280px; left: 20px;font-size: 24px;}
.statments {
    right: 7%;
    bottom: -120px;
    padding: 20px;
    background-color: rgba(255, 255, 255, .6);
}
.on .imaginetxt {
    width: 286px;
    left: 3%;
    bottom: 180px;
}
.on .phoneimg {
    height: 234px;
    width: 231px;
    right: 0px;
    bottom: -7px;
}
.managers h1 {font-size: 20px;margin: 20px 30px;}

.managers .content ul { height: 129px; margin-left: -10px; margin-right: 0px;}
.managers .content ul li {width: 32.5%; height: 129px;}

.managers .content ul li a {font-size: 14px;padding: 93px 8px 29px 8px;}
.managers .content ul .strategy a {
    padding: 78px 8px 29px 8px;
}
.managers .content ul li a span {font-size: 17px; margin-top: -8px; font-weight: bold;}

.managers h2 {
    margin: 50px 0 10px 0;
    font-size: 20px;
}
.wf-wrapper {
    width: 95%;
}

.commenttop {
    margin-bottom: 0px;
    padding: 4px;
    font-size: 11px;
    margin-left: 0%;
}
.commentbottom {
    margin-top: 0px;
    font-size: 11px;
    padding: 4px;
    margin-left: 0%;
}
p.explan {
    width: 85%;
    padding: 10px;
    float: none;
}
.s-wrapper {
    width: 85%;
}
.tab2 .explan {
    width: 85%;
    float: none;
}
.tab1 .nextbtn {
    bottom: -90px;
    right: 20px;
}
.tab2 .nextbtn {
    bottom: -120px;
    right: 30px;
}
.tab3 .nextbtn {
    bottom: -120px;
    right: 20px;
    opacity: .03;
}
.zone2 ul {
    margin: 10px 0 20px 55px;
}

 span[class^="zone"] {width: 100%; text-align: left; font-size: 14px;} 
 span[class^="zone"] H4 {margin-right: 0px; font-size: 18px;}
 .zone1 {margin-bottom: 20px;}
 .zone3 {padding-left: 0px;}
 .zone3 i {width: 90%; float: none;} 
 
 .footer {overflow: hidden;}  
  
  }