/* lines animamtion*/
.svg-code-bg *{cursor:default;}
#path1744{
clip-path: inset(100% 100% 0% 0%);
    transition: all .5s;
}

#ovalo-main:hover ~ #ovalo6>#path1744{
   clip-path: inset(0 0 0 0); 
    transition: all .5s;
  animation-name: none !important;
}
#aws{
clip-path: inset(0 0 100% 100%);
    transition: all .5s;
}
#ovalo-main:hover ~ #lines>#aws{
   clip-path: inset(0 0 0 0); 
    transition: all .5s;
  animation-name: none !important;
}
#oracle-lines, #venti,#line-mg{
    clip-path: inset(100% 100% 0 0);
    transition: all .5s;
}
#ovalo-main:hover ~ #oracle-lines,#ovalo-main:hover ~ #venti,#ovalo-main:hover ~ #line-mg{
    clip-path: inset(0 0 0 0); 
    transition: all .5s;
  animation-name: none !important;
}

#animationforfor{
clip-path: inset(100% 100% 0% 0%);
    transition: all .5s;
}
#line-aws{
clip-path: inset( 0% 0% 100% 100%);
    transition: all .5s;
}
#ovalo-main:hover ~ #animationforfor{
    clip-path: inset(0 0 0 0); 
    transition: all .5s;
  animation-name: none !important;
}
.section-redwood-connect>.row-fluid{position:initial;}
.svg-code-bg svg{
position: absolute;
    right: 165px;
    transform: scale(1.6);
}
/*
#ovalo-main.active ~ #animationforfor,
#ovalo-main.active ~ #lines>#aws,
#ovalo-main.active ~ #oracle-lines,
#ovalo-main.active ~ #venti,
#ovalo-main.active ~ #line-mg,
#ovalo-main.active ~ #ovalo6>#path1744{
clip-path: inset(0 0 0 0);
    transition: all .5s;
}
*/


.svg-code-bg.active #ovalo-main ~ #lines>#aws,
.svg-code-bg.active #ovalo-main ~ #oracle-lines,
.svg-code-bg.active #ovalo-main ~ #venti,
.svg-code-bg.active #ovalo-main ~ #line-mg,
.svg-code-bg.active #ovalo-main ~ #ovalo6>#path1744{
  animation-iteration-count: infinite; animation-duration: 2s;animation-name: linesAnimation;animation-delay: 1s;
  transition: all .5s;
}
.svg-code-bg.active #line-aws{
animation-iteration-count: infinite; animation-duration: 2s;animation-name: linesAnimation2;animation-delay: 1s;
  transition: all .5s;
} 
.svg-code-bg.active #ovalo-main ~ #animationforfor{
animation-iteration-count: infinite; animation-duration: 2s;animation-name: linesAnimation3;animation-delay: 1s;
  transition: all .5s;
}


.svg-code-bg #letters{transform: translate(9px, 49px);transition: all 1.2s;}
.svg-code-bg.active #letters{transform: translate(24px, 22px);transition: all 2s;}
.svg-code-bg #path-1-main{transform: translate(-5px, 29px);transition: all 2s;}
.svg-code-bg #path-2-main{transform: translate(-8px, 29px);transition: all 2s;}
.svg-code-bg.active #path-1-main{transform: translate(0px, 0px);transition: all 2s;}
.svg-code-bg.active #path-2-main{transform: translate(0px, 0px);transition: all 2s;}
.svg-code-bg.active .hide-path-main{opacity:1;transition: all 2.5s;}
.svg-code-bg.active .shadow-main{animation-delay: 1.7s;animation-name: show;}

.svg-code-bg #lines,.svg-code-bg .hide-lines{opacity:0;transition: all .3s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1.5s;}
.svg-code-bg.active #lines,.svg-code-bg.active .hide-lines{animation-delay: 1.7s;animation-name: show;}

.svg-code-bg .hide-path-main{opacity:0;}
.svg-code-bg .shadow-main{opacity:0;transition: all .3s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1.5s;}

..svg-code-bg.active svg #dot1{animation-delay: 1.1s;}
.svg-code-bg.active svg #dot2{animation-delay: 1.2s;}
.svg-code-bg.active svg #dot3{animation-delay: 1.3s;}
.svg-code-bg.active svg #dot4{animation-delay: 1.4s;}
.svg-code-bg.active svg #dot5{animation-delay: 1.5s;}
.svg-code-bg.active svg #dot6{animation-delay: 1.6s;}
.svg-code-bg.active svg #dot7{animation-delay: 1.7s;}
.svg-code-bg.active svg #dot8{animation-delay: 1.8s;}
.svg-code-bg.active svg #dot9{animation-delay: 1.9s;}
.svg-code-bg.active svg #dot10{animation-delay: 2s;}
.svg-code-bg.active svg #dot11{animation-delay: 2.1s;}
.svg-code-bg.active svg #dot12{animation-delay: 2.1s;}
.svg-code-bg.active svg #dot13{animation-delay: 2.2s;}
.svg-code-bg.active svg #dot14{animation-delay: 2.3s;}
.svg-code-bg.active svg #dot15{animation-delay: 2.4s;}
.svg-code-bg.active svg #dot16{animation-delay: 2.5s;}
.svg-code-bg.active svg #dot17{animation-delay: 2.6s;}
.svg-code-bg.active svg #dot18{animation-delay: 2.7s;}
.svg-code-bg.active svg #dot19{animation-delay: 2.8s;}
.svg-code-bg.active svg #dot20{animation-delay: 2.9s;}
.svg-code-bg.active svg #dot21{animation-delay: 3s;}
.svg-code-bg.active svg #dot22{animation-delay: 3.1s;}
.svg-code-bg.active svg #dot23{animation-delay: 3.2s;}
.svg-code-bg.active svg #dot24{animation-delay: 3.3s;}
.svg-code-bg.active svg #dot25{animation-delay: 3.4s;}



.svg-code-bg.active svg #ovalo4{animation-delay: 2s;}
.svg-code-bg.active svg #ovalo2{animation-delay: 2.8s;}
.svg-code-bg.active svg #ovalo3{animation-delay: 3s;}
.svg-code-bg.active svg #ovalo5{animation-delay: 3.4s;}
.svg-code-bg.active svg #ovalo1{animation-delay: 3.8s;}

@keyframes show {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes hide {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}


@keyframes linesAnimation {
    0% {
    clip-path: inset(100% 100% 0 0);
      transition: all .5s;
  }
  50%{
  clip-path:inset(0 0 0 0);
    transition: all .5s;
  }
  100% {
    clip-path: inset(100% 100% 0 0);
    transition: all .5s;
  }
}

@keyframes linesAnimation2 {
    0% {
    clip-path: inset(0 0 100% 100%);
      transition: all .5s;
  }
  50%{
  clip-path:inset(0 0 0 0);
    transition: all .5s;
  }
  100% {
    clip-path: inset(0 0 100% 100%);
    transition: all .5s;
  }
}
/*
@keyframes linesAnimation3 {
    0% {
    clip-path:inset(0% 100% 100% 0%);
      transition: all .5s;
  }
  50%{
  clip-path:polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
    transition: all .5s;
  }
  100% {
    clip-path: inset(0% 100% 100% 0%);
    transition: all .5s;
  }
}*/

@keyframes linesAnimation3 {
    0% {
    clip-path:inset(0% 100% 100% 0%);
      transition: all .5s;
  }
   15% {
    clip-path:inset(0% 0% 70% 0%);
      transition: all .5s;
  }
  50%{
  clip-path:inset(0 0 0 0);
    transition: all .5s;
  }
   65% {
    clip-path:inset(0% 0% 70% 0%);
      transition: all .5s;
  }
  100% {
    clip-path: inset(0% 100% 100% 0%);
    transition: all .5s;
  }
}


/* hover ovalo main */
.svg-code-bg.active svg #ovalo-main:hover  #path-1-main,.svg-code-bg.active svg #ovalo-main:hover  #path-2-main{animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1s;animation-name: bounce1;stroke: #be2629;stroke-width: 0px;}
.svg-code-bg.active svg #ovalo-main:hover .hide-path-main{animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1s;animation-name: bounce3;transform: scale(0.995);}
.svg-code-bg.active svg #ovalo-main:hover .shadow-main{opacity:0;display:none;}
.svg-code-bg.active svg #ovalo-main:hover #letters{animation-fill-mode: forwards; animation-iteration-count: 1; animation-duration: 1s;animation-name: bounce2;}


@keyframes bounce1 {
  0% {
    transform: translate(0);
    stroke-width: 0px;
  }
  50% {
    transform: translate(-6px, 26px);
    stroke-width: 3px;
  }
   100% {
    transform: translate(0);
     stroke-width: 0px;
  }
}
@keyframes bounce2 {
  0% {
    transform: translate(24px,22px);
  }
  50% {
    transform: translate(16px,49px);
  }
   100% {
    transform: translate(24px,22px);
  }
}
@keyframes bounce3 {
  0% {
   clip-path:inset(0% 0% 0% 0%);
    transition: all .3s;
    stroke-width:0px;
  }
  45% {
   /*clip-path:polygon(0 28%, 100% 64%, 100% 100%, 0% 100%)*/
    clip-path:inset(55% 4% 0 0);
    transition: all .3s;
    stroke-width:5px;
  }
   100% {
     clip-path:inset(0% 0% 0% 0%);
    transition: all .3s;
    stroke-width:0px;
  }
}
/*
@keyframes bounce3 {
  0% {
   clip-path:initial;
    transition: all .3s;
  }
  50% {
   /*clip-path:polygon(0 28%, 100% 64%, 100% 100%, 0% 100%)*/
    clip-path:polygon(0 25%, 100% 64%, 100% 100%, 0% 100%);
    transition: all .3s;
  }
   100% {
     clip-path:initial;
    transition: all .3s;
  }
}*/
.svg-code-bg.active svg .oval-icon:hover {}
.svg-code-bg.active svg .oval-icon:hover path {animation-fill-mode: backwards; animation-iteration-count: 3; animation-duration: 1s;animation-name: bouncebg;}
.svg-code-bg.active svg .oval-icon:hover path + path{animation-fill-mode: backwards; animation-iteration-count: 3; animation-duration: 1s;animation-name: bounceOvalo;stroke: #4e4f4f;}
.svg-code-bg.active svg .oval-icon:hover image{animation-fill-mode: backwards; animation-iteration-count: 3; animation-duration: 1s;animation-name: bounceShadow;}
.svg-code-bg.active svg .oval-icon:hover #gdemo2{animation-fill-mode: backwards; animation-iteration-count: 3; animation-duration: 1s;animation-name: bounceOvalo;}


@keyframes bounceOvalo {
  0% {
    transform: translate(0);
    stroke-width: 0px;
  }
  50% {
    transform: translate(-1px, 10px);
    stroke-width: 2px;
  }
   100% {
    transform: translate(0);
    stroke-width: 0px;
  }
}
@keyframes bounceShadow {
  0% {
    transform: initial
  }
  50% {
    transform: translate(-1px, 5px);
  }
   100% {
    transform: initial;
  }
}
@keyframes bouncebg {
  0% {
   clip-path: circle(100% at 15px 0px);
    stroke-width: 0px;
  }
  50% {
   clip-path:circle(100% at 10px 52px);
    stroke: #fff;
    stroke-width: 6px;
  }
   100% {
   clip-path: circle(100% at 15px 0px);
    stroke-width: 0px;
  }
}


/* REDWOOD CONNECT */
.page-4-1-1-redwood-connect .section-redwood-connect .svg-code-bg svg{width:558px !important;height:528px !important;}
/* medias */
/* XS */
@media (max-width: 767px){
  .svg-code-bg svg {
    position: relative;
    right: 0;
    transform: scale(1);
    width: 119%;
    height: 600px;
}
}

@media (min-width:768px) and (max-width:991px){

.page-4-1-1-redwood-connect .section-redwood-connect .svg-code-bg svg{width: 398px!important; right: 50px;}
}

/* MD */
@media (min-width:992px) and (max-width:1199px){

.page-4-1-1-redwood-connect .section-redwood-connect .svg-code-bg svg{width: 468px!important; right: 50px;}
}


/* MD */
@media (min-width:1200px) and (max-width:1300px){

.page-4-1-1-redwood-connect .section-redwood-connect .svg-code-bg svg{width: 508px!important; right: 117px;}
}

@media (min-width:1400px) and (max-width:1620px){
  .page-1-0-shippers .svg-code-bg svg{ right: 95px; transform: scale(1.5);
  }
}


@media (min-width: 1400px){
  .page-4-1-1-redwood-connect .section-redwood-connect .svg-code-bg svg {
      /* height: 44vw !important;*/
    right: 125px;
    width: 32vw !important;
}
}


@media (min-width:767px) and (max-width:1024px ){

  .svg-code-bg.active {
    margin-left: calc(50% + 20vw);
    margin-top: 43%;
    transform: scale(.4);
  }
}

@media (min-width:1025px) and (max-width:1177px ){

.svg-code-bg.active{
    transform: scale(0.5);
    margin-left: calc(50% + 22vw);
    margin-top: 21%;
  }
  
}

@media (min-width:1141px) and (max-width:1300px){
.svg-code-bg.active{
    margin-left: calc(50% + 25vw);
    margin-top: 20%;
    transform: scale(0.7);

  }
}