/* bootstrap style */
body {
  margin: 0;
  padding: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {
  vertical-align: middle;
}
.container {
  width: 1170px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}
.col-md-12 {
  width: 100%;
}
.col-md-11 {
  width: 91.66666667%;
}
.col-md-10 {
  width: 83.33333333%;
}
.col-md-9 {
  width: 75%;
}
.col-md-8 {
  width: 66.66666667%;
}
.col-md-7 {
  width: 58.33333333%;
}
.col-md-6 {
  width: 50%;
}
.col-md-5 {
  width: 41.66666667%;
}
.col-md-4 {
  width: 33.33333333%;
}
.col-md-3 {
  width: 25%;
}
.col-md-2 {
  width: 16.66666667%;
}
.col-md-1 {
  width: 8.33333333%;
}
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.clearfix:after,
.container:after,
.row:after {
  clear: both;
}
.text-center {
  text-align: center;
}
/* End bootstrap style */
.wrap {
  max-width: 1920px;
  min-width: 1093px;
  margin: 0 auto;
  background: url(../images/sites/third_planet/logo_bg.png) no-repeat left -62% top -1.9%, url(../images/sites/third_planet/logo_bg.png) no-repeat right -39% bottom 3.5%;
  background-color: #fff;
  overflow-x: hidden;
  overflow-y: hidden;
}
.wrap h2,
.wrap h3,
.wrap h4,
.wrap h5,
.wrap h6,
.wrap p {
  margin: 0;
  padding: 0;
}
.wrap h2,
.wrap p {
  font-size: 32px;
  line-height: 18px;
  color: #000;
}
.wrap h2 {
  margin-bottom: 45px;
  position: relative;
}
.wrap h3 {
  font-size: 16px;
  line-height: 18px;
  color: #000;
  margin-top: 10px;
}
.wrap p {
  font-size: 16px;
}
.wrap p + p {
  padding-top: 20px;
}
.wrap .big-padding {
  padding-top: 57px;
}
.stage {
  position: relative;
  width: 40%;
}
.line {
  border-left: 2px solid #ff6c36;
}
.column-seven {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  width: 14.2857%;
  float: left;
}
.screen_h1_animate,
.screen_h2_animate,
.screen_h3_animate,
.macbook,
.iphone7,
.orange-slider,
.green-slider,
.autumn,
.thancks,
.form,
.list-of-things,
.ipad,
.iphone,
.wordpress {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
/* circle */
.circle-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.circle {
  content: '';
  position: absolute;
  left: -22px;
  top: 0;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid #ff6c36;
  border-radius: 50%;
  background: #fff;
}
.filled-circle {
  background: #ff6c36;
}
.z-100 {
  position: relative;
  z-index: 100;
}
/* End circle */
/* header */
.planet {
  padding-top: 110px;
}
.planet .task {
  padding-left: 100px;
}
.planet .task > div:first-child {
  margin-bottom: 45px;
}
.planet .task h2:before {
  display: none;
}
/*End header*/
/* section.screen_animate */
.screen_animate {
  position: relative;
  padding-top: 360px;
}
.screen_animate .step-1 {
  padding-bottom: 420px;
}
.screen_animate .screen_h1_animate {
  background: url(../images/sites/third_planet/screen_h1.png) no-repeat;
  background-position: right 30px top 127px;
}
.screen_animate .screen_h2_animate {
  background: url(../images/sites/third_planet/screen_h2.png) no-repeat;
  background-position: right -32px top 75px;
}
.screen_animate .screen_h3_animate {
  background: url(../images/sites/third_planet/screen_h3.png) no-repeat;
  background-position: right -86px top 0px;
}
/*End section.screen_animate*/
/* before-after-wrap */
.before-after {
  padding-top: 90px;
}
/* .colors-wrap */
.colors-wrap .column-seven {
  padding-top: 110px;
  padding-bottom: 150px;
  text-align: center;
}
.colors-wrap .column-seven .color {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 70px;
  height: 70px;
  border-radius: 5px;
  background: url('../images/sites/third_planet/drop.png') no-repeat center center;
}
.colors-wrap .column-seven .orange div {
  background-color: #ff713e;
}
.colors-wrap .column-seven .orange h4 {
  color: #ff713e;
}
.colors-wrap .column-seven .yellow div {
  background-color: #ffb842;
}
.colors-wrap .column-seven .yellow h4 {
  color: #ffb842;
}
.colors-wrap .column-seven .brown div {
  background-color: #c6a17f;
}
.colors-wrap .column-seven .brown h4 {
  color: #c6a17f;
}
.colors-wrap .column-seven .green div {
  background-color: #aed581;
}
.colors-wrap .column-seven .green h4 {
  color: #aed581;
}
.colors-wrap .column-seven .darkgreen div {
  background-color: #4caf50;
}
.colors-wrap .column-seven .darkgreen h4 {
  color: #4caf50;
}
.colors-wrap .column-seven .blue div {
  background-color: #00c4f9;
}
.colors-wrap .column-seven .blue h4 {
  color: #00c4f9;
}
.colors-wrap .column-seven .gray div {
  background-color: #4d4d4d;
}
.colors-wrap .column-seven .gray h4 {
  color: #4d4d4d;
}
/* .animate-macbook-iphone7 */
.animate-macbook-iphone7 {
  position: relative;
}
.animate-macbook-iphone7 .step-2 {
  padding-bottom: 888px;
}
.animate-macbook-iphone7 .macbook {
  background: url(../images/sites/third_planet/macbook.png) no-repeat;
  background-position: 50% 280px;
}
.animate-macbook-iphone7 .iphone7 {
  background: url(../images/sites/third_planet/iphone_7.png) no-repeat;
  background-position: 93% 400px;
}
/* .animate-many-block */
.animate-many-block {
  position: relative;
}
.animate-many-block .stap-5 {
  height: 1435px;
}
.animate-many-block .orange-slider {
  background: url(../images/sites/third_planet/orange_slider.png) no-repeat;
  width: 996px;
  height: 336px;
  left: -9.5%;
  right: auto;
  bottom: auto;
}
.animate-many-block .autumn {
  background: url(../images/sites/third_planet/autumn.png) no-repeat;
  background-position: center top;
  width: 100%;
  height: 791px;
  left: auto;
  right: auto;
  top: 12.5%;
  bottom: auto;
}
.animate-many-block .green-slider {
  background: url(../images/sites/third_planet/green_slider.png) no-repeat;
  width: 939px;
  height: 271px;
  left: auto;
  bottom: auto;
  right: -5%;
  top: 57%;
}
.animate-many-block .thancks {
  background: url(../images/sites/third_planet/thanks.png) no-repeat;
  width: 397px;
  height: 302px;
  left: auto;
  bottom: auto;
  right: 14%;
  top: 8.5%;
}
.animate-many-block .form {
  background: url(../images/sites/third_planet/form.png) no-repeat;
  background-position: 21% 93%;
  width: 395px;
  height: 548px;
  bottom: auto;
  right: auto;
  left: 14%;
  top: 57%;
}
.animate-many-block .list-of-things {
  background: url(../images/sites/third_planet/list_of_things.png) no-repeat;
  background-position: -1% 38%;
  width: 412px;
  height: 537px;
  bottom: auto;
  right: auto;
  left: 0%;
  top: 23.5%;
}
/* .animate-ipad-iphone */
.animate-ipad-iphone {
  position: relative;
}
.animate-ipad-iphone .ipad {
  background: url(../images/sites/third_planet/ipad.png) no-repeat;
  background-position: 65% 97%;
}
.animate-ipad-iphone .iphone {
  background: url(../images/sites/third_planet/iphone.png) no-repeat;
  background-position: 135% 61%;
}
.animate-ipad-iphone .stap-3 {
  width: 50%;
  padding-bottom: 1000px;
}
.animate-wordpress {
  position: relative;
}
.animate-wordpress .stap-6 {
  padding-bottom: 780px;
}
.animate-wordpress .wordpress {
  background: url(../images/sites/third_planet/wordpress.png) no-repeat;
  background-position: center top;
}
/* .last-step */
.last-stap {
  position: relative;
  padding-bottom: 100px;
}
.last-stap .row {
  margin-left: -13px;
}
.last-stap .stap-4 {
  width: 60%;
}
.last-stap .planet-link {
  display: inline-block;
  padding-top: 35px;
  color: #ff713e;
  font-size: 32px;
  text-decoration: none;
}
.last-stap .planet-link:hover {
  text-decoration: underline;
}
@media screen and (min-width: 1367px) {
  .wrap {
    background: url(../images/sites/third_planet/logo_bg.png) no-repeat -35% -1.9%, url(../images/sites/third_planet/logo_bg.png) no-repeat right -17% bottom 3.5%;
    background-color: #fff;
  }
  .animate-macbook-iphone7 .iphone7 {
    background-position: 87.5% 400px;
  }
  .animate-many-block .orange-slider {
    left: -5%;
  }
  .animate-many-block .green-slider {
    right: .5%;
  }
  .animate-many-block .thancks {
    right: 17.8%;
  }
  .animate-many-block .form {
    left: 19.5%;
  }
  .animate-many-block .list-of-things {
    left: 5.5%;
  }
  .animate-ipad-iphone .ipad {
    background-position: 83% 97%;
  }
  .animate-ipad-iphone .iphone {
    background-position: 114% 61%;
  }
}
@media screen and (min-width: 1700px) {
  .wrap {
    background: url(../images/sites/third_planet/logo_bg.png) no-repeat -16.6% -1.9%, url(../images/sites/third_planet/logo_bg.png) no-repeat right -2% bottom 3.5%;
    background-color: #fff;
  }
  .animate-macbook-iphone7 .iphone7 {
    background-position: 82.5% 400px;
  }
  .animate-many-block .orange-slider {
    left: 1.5%;
  }
  .animate-many-block .green-slider {
    right: 6%;
  }
  .animate-many-block .thancks {
    right: 21.3%;
  }
  .animate-many-block .form {
    left: 22.5%;
  }
  .animate-many-block .list-of-things {
    left: 10%;
  }
  .animate-ipad-iphone .ipad {
    background-position: -20% 97%;
  }
  .animate-ipad-iphone .iphone {
    background-position: 99% 61%;
  }
}
@media screen and (min-width: 1800px) {
  .wrap {
    background: url(../images/sites/third_planet/logo_bg.png) no-repeat -8.6% -1.9%, url(../images/sites/third_planet/logo_bg.png) no-repeat right 4% bottom 3.5%;
    background-color: #fff;
  }
  .animate-macbook-iphone7 .iphone7 {
    background-position: 80% 400px;
  }
  .animate-many-block .orange-slider {
    left: 4.5%;
  }
  .animate-many-block .green-slider {
    right: 9%;
  }
  .animate-many-block .thancks {
    right: 23%;
  }
  .animate-many-block .form {
    left: 24.5%;
  }
  .animate-many-block .list-of-things {
    left: 12.5%;
  }
  .animate-ipad-iphone .ipad {
    background-position: 24% 97%;
  }
  .animate-ipad-iphone .iphone {
    background-position: 93% 61%;
  }
}
@media screen and (min-width: 1850px) {
  .wrap {
    background: url(../images/sites/third_planet/logo_bg.png) no-repeat -2.1% -1.9%, url(../images/sites/third_planet/logo_bg.png) no-repeat right 9.3% bottom 3.5%;
    background-color: #fff;
  }
  .animate-macbook-iphone7 .iphone7 {
    background-position: 78% 400px;
  }
  .animate-many-block .orange-slider {
    left: 7.3%;
  }
  .animate-many-block .green-slider {
    right: 11.5%;
  }
  .animate-many-block .thancks {
    right: 24.8%;
  }
  .animate-many-block .form {
    left: 26%;
  }
  .animate-many-block .list-of-things {
    left: 14.8%;
  }
  .animate-ipad-iphone .ipad {
    background-position: 34% 97%;
  }
  .animate-ipad-iphone .iphone {
    background-position: 86% 61%;
  }
}