@supports (-ms-accelerator:true) {

.svg-1 .square-1,
.svg-2-path-1 .line-1,
.svg-2-circle .outer-circle-1,
.svg-2-circle .outer-circle-2,
.svg-2-circle .inner-circle-1,
.svg-2-circle .inner-circle-2,
.svg-2-path-2 .line-1,
.svg-2-path-3 .line-1,
.svg-2-path-4 .line-1,
.svg-3-path-1 .line-1,
.svg-3-path-2 .line-1,
.svg-3-circle .line-1,
.svg-3-circle .left-path,
.svg-3-circle .right-path,
.svg-3-circle .circle-path,
.svg-4-path-1 .line-1,
.svg-5-path-1 .line-1,
.svg-5-square .polyline-1,
.svg-5-square .polyline-2,
.svg-5-path-2 .line-1,
.svg-6-path-1 .line-1,
.svg-6-circle .outer-circle-1,
.svg-6-circle .outer-circle-2,
.svg-6-circle .inner-circle-1,
.svg-6-circle .inner-circle-2,
.svg-7-path-1 .line-1,
.svg-7-square .polygon-1,
.svg-7-square .polygon-2,
.svg-7-path-2 .line-1,
.svg-6-path-2 .line-1,
.svg-8-path-1 .line-1,
.svg-9-path-1 .line-1,
.svg-9-circle .polyline-1,
.svg-9-circle .polyline-2{
  stroke-dashoffset: 0;
  transition-delay: 0;
  -webkit-transition-delay: 0;
}

.svg-1.animated .square-1,  
.animated .svg-2-path-1 .line-1,
.animated .svg-2-circle .outer-circle-1,
.animated .svg-2-circle .outer-circle-2,
.animated .svg-2-circle .inner-circle-1,
.animated .svg-2-circle .inner-circle-2,
.animated .svg-2-path-2 .line-1,
.animated .svg-2-path-3 .line-1,
.animated .svg-2-path-4 .line-1,
.animated .svg-3-path-1 .line-1,
.animated .svg-3-path-2 .line-1,
.animated .svg-3-circle .line-1,
.animated .svg-3-circle .left-path,
.animated .svg-3-circle .right-path,
.animated .svg-3-circle .circle-path,
.animated .svg-4-path-1 .line-1,
.animated .svg-5-path-1 .line-1,
.animated .svg-5-square .polyline-1,
.animated .svg-5-square .polyline-2,
.animated .svg-5-path-2 .line-1,
.animated .svg-6-path-1 .line-1,
.animated .svg-6-circle .outer-circle-1,
.animated .svg-6-circle .outer-circle-2,
.animated .svg-6-circle .inner-circle-1,
.animated .svg-6-circle .inner-circle-2,
.animated .svg-6-path-2 .line-1,
.animated .svg-7-path-1 .line-1,
.animated .svg-7-square .polygon-1,
.animated .svg-7-square .polygon-2,
.animated .svg-7-path-2 .line-1,
.animated .svg-8-path-1 .line-1,
.animated .svg-9-path-1 .line-1,
.animated .svg-9-circle .polyline-1,
.animated .svg-9-circle .polyline-2 {
   animation: none;
}
.svg-2-circle .circle-water,
.svg-3-circle .circle-opacity,
.svg-4-brain svg,
.svg-6-circle .circle-water,
.svg-9-circle .outer-circle-1,
.svg-9-circle .outer-circle-2,
.svg-9-circle .inner-circle-1,
.svg-9-circle .inner-circle-2,
.svg-9-circle .polyline-3 {
  opacity: 1;
}

.layer-1-content p,
.layer-2-content h2, 
.layer-2-content .circle-txt, 
.layer-2-content .your-personality, 
.layer-2-content .their-personality,
.layer-3-content h2,
.layer-3-content .circle-txt,
.layer-3-content .tool-txt,
.layer-4-content h2,
.layer-4-content p,
.layer-5-content h2,
.layer-5-content h3,
.layer-5-content p,
.layer-6-content h2,
.layer-6-content .circle-txt,
.layer-9-content .circle-txt,
.layer-8-content h2,
.layer-7-content h2,
.layer-7-content p,
.layer-7-content .circle-txt {    
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);   
}
.svg-1 .square-1 {
  z-index: 10;
}

.layer-1-content{
  z-index: 1;
}

.red-txt {
  transition-delay: 0.1s;
}

.yellow-txt {
  transition-delay: 0.25s;
}

.blue-txt {
  transition-delay: 0.4s;
}

.green-txt {
  transition-delay: 0.55s;
}

.style-list ul li.list-1 img {
  transition-delay: 0.1s;
}

.style-list ul li.list-2 img {
  transition-delay: 0.2s;
}

.style-list ul li.list-3 img {
  transition-delay: 0.3s;
}

.style-list ul li.list-4 img {
  transition-delay: 0.4s;
}

.style-list ul li.list-5 img {
  transition-delay: 0.5s;
}

.style-list ul li.list-6 img {
  transition-delay: 0.6s;
}

.style-list ul li.list-7 img {
  transition-delay: 0.7s;
}

.style-list ul li.list-8 img {
  transition-delay: 0.8s;
}

.style-list ul li.list-9 img {
  transition-delay: 0.9s;
}

.style-list ul li.list-10 img {
  transition-delay: 1s;
}

.style-list ul li.list-11 img {
  transition-delay: 1.1s;
}

.style-list ul li.list-12 img {
  transition-delay: 1.2s;
}

.style-list ul li.list-1 span {
  transition-delay: 0.15s;
}

.style-list ul li.list-2 span {
  transition-delay: 0.25s;
}

.style-list ul li.list-3 span {
  transition-delay: 0.35s;
}

.style-list ul li.list-4 span {
  transition-delay: 0.45s;
}

.style-list ul li.list-5 span {
  transition-delay: 0.55s;
}

.style-list ul li.list-6 span {
  transition-delay: 0.65s;
}

.style-list ul li.list-7 span {
  transition-delay: 0.75s;
}

.style-list ul li.list-8 span {
  transition-delay: 0.85s;
}

.style-list ul li.list-9 span {
  transition-delay: 0.95s;
}

.style-list ul li.list-10 span {
  transition-delay: 1.05s;
}

.style-list ul li.list-11 span {
  transition-delay: 1.15s;
}

.style-list ul li.list-12 span {
  transition-delay: 1.25s;
}

.layer-5-content .style-txt, .layer-5-content .style-txt p {
  transition-delay: 1.5s;
} 

.layer-5-content .tool-txt, .layer-5-content .tool-txt h3 {
  transition-delay: 1.8s;
}

.layer-6-content .char-1, .layer-6-content .char-2 {
  transition-delay: 0.15s;
}

.layer-6-content .char-3, .layer-6-content .char-4 {
  transition-delay: 0.3s;
}

.layer-6-content .char-5 {
  transition-delay: 0.45s;
}

.svg-7-square svg {
  width: 100%;
}

.section-7.section-bg {
  background-position: 50% 70%; 
}

.svg-7-square svg {
  width: 695px;
  height: 684px;
}

.layer-7-content .square-txt {
  transition-delay: 0.25s;
}

.arrow polygon {
      display: none;
  }
.approach-scroll {
  display: none;
}
}

@supports (-ms-accelerator:true) and (min-width: 1400px) {

  .arrow polygon {
    display: none;
  }
  .section-7 {
    height: 933px;
  }

  
  .svg-7-square {
    top: 250px;
    margin-left: -332px;
  }

  .layer-7-content .square-txt {
    position: absolute;
    top: 361px;
      width: 380px;
      height: 430px;
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: 100%;
      opacity: 0;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.5s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out, opacity 0.5s ease-in-out;
    transition: transform 0.2s ease-in-out, opacity 0.5s ease-in-out;
    transition-delay: 2.2s;
  }

  .animated .layer-7-content .square-txt{
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
    background-size: 98%;
  }

  .layer-7-content .square-txt img {
      display: block;
      margin-top: 40px;
      margin-bottom: 10px;
  }

  .layer-7-content .square-txt h3 {
    color: #fff;
      text-align: center;
      margin-bottom: 0;
  }

  .layer-7-content .square-txt p {
    font-size: 14px;
    background: none;
    width: 230px;
    padding: 5px 0;
  }

  .layer-7-content .react-txt {
    left: -25px;
    background-image: url(../images/left-rect.png);
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }

  .layer-7-content .react-txt img {
    margin-left: 193px;
  }

  .layer-7-content .react-txt h3{
    margin-left: 50px;
  }

  .layer-7-content .react-txt p {
    margin-left: 105px;
  }

  .layer-7-content .respond-txt {
    right: -33px;
    background-image: url(../images/right-rect.png);
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
  }

  .layer-7-content .respond-txt img {
    margin-left: 143px;
  }

  .layer-7-content .respond-txt h3{
    margin-right: 35px;
  }

  .layer-7-content .respond-txt p {
    margin-left: 67px;
  }

}