#header{background: #0E0C3A;color: #fff;text-align: center;padding: 0 12.1rem 6.1rem;}
#header .pre{font-size: .9rem;}
#articles{background: #fff;color: #070762;padding: 3.1rem 12.1rem;}
h2{text-align: center;color: #070762;margin: 4.6rem auto;font-weight: bold;}
.stages{background: url(../media/support/line.png) no-repeat;display: flex;flex-direction: column;background-size: 18.8rem;background-position: 47% 1.5%;}
.stage .inner{border-radius: .2rem;border: 0.05rem solid #4D8FF7;padding: 1.6rem;color: #070762;position: relative;background: #fff;}
.stage  .dot{display: block;border-radius: 50%;background: #070762;position: absolute;}
.stage  .dot::after{content:'';display: block;border-radius: 50%;background: #070762;position: absolute;animation:pulsate 1.5s ease-in-out forwards infinite;border: .05rem solid #070762;;position:absolute;top:0;left:0;transform-origin:50% 50%;}
.stage.vc .inner{background: #F4F8FE;}
.stage.es .dot{right: -.4rem;top: 0;}
.stage.gs .dot{left: -.55rem;top: 0;}
.stage.cs .dot{right: -.7rem;top: 0;}
.stage.vc .dot{left: -.875rem;top: 3rem;}
.stage p{margin-bottom: .5rem;}
.stage.es .dot,.stage.es .dot::after{width: .8rem;height: .8rem;}
.stage.gs .dot,.stage.gs .dot::after{width: 1.1rem;height: 1.1rem;}
.stage.cs .dot,.stage.cs .dot::after{width: 1.4rem;height: 1.4rem;}
.stage.vc .dot,.stage.vc .dot::after{width: 1.75rem;height: 1.75rem;}
.stage .link{line-height: 1;z-index: 99;position: relative;}
.stage .link .opened,.stage.active .link .closed{display: none;}
.stage .link a{color: #070762;font-size: .7rem;line-height: 120%;display: inline-flex;align-items: center;}
.stage .link a::after{content:'';display: block;margin-left: .4rem;background: url(../media/support/chevron.png) no-repeat;background-size: contain;width: .5rem;height: .5rem;}
.stage.active  .link a::after{transform: rotate(180deg);}
.stage.active .link a{align-items: flex-start;}
.stage.active .opened,.stage.active .opened{display: block;}
.stage h3,.cont h3{font-size: 1.2rem;line-height:1;font-weight: 700;margin: 0;text-transform: uppercase;}
.stage .sub,.cont .sub{font-size: .9rem;font-weight: bold;line-height: 120%;margin-bottom: .65rem;}
.stage{display: inline-flex;width: fit-content;}
.stage.es .icon{margin:-1rem 1rem 0 0;}
.stage:not(.es) .icon{margin-bottom: 1rem;}
.stage.gs .icon{margin-left: auto;}
@keyframes pulsate{
    0%{transform:scale(1);opacity:1;background: #070762;}
    100%{transform:scale(2);opacity:0;background: #4D8FF7;}
    }
@media(max-width:1000px){
    h1{white-space: nowrap;margin-bottom: 0;}
    h2{margin: 3.1rem auto;}
    #header .sub{margin-bottom: .75rem;}
    #header .pre{font-size: 1rem;}
    .stages{position: relative;max-width: 90vw;margin: 0 auto 4rem;background: url(../media/support/linem.png) no-repeat;background-position: 6rem 6rem;background-size: 10.5rem;}
    .stage{margin-bottom: 5.8rem;position: relative;}
    .stage .link a::after{content:'';display: block;margin-left: .4rem;background: url(../media/support/circle-alert.png) no-repeat;background-size: contain;width: .75rem;height: .75rem;}
.stage .content{display: none;}
.stage .inner{padding: .9rem;}
.stage h3,.cont h3{font-size: 1.375rem;}
.stage .sub,.cont .sub{font-size: 1rem;}
.stage .link a{font-size: .9rem;}
#header{padding: 0 1.1rem 5.1rem;}
/* .stage.active .content{display: block;}
.stage.active .inner{position: absolute;z-index: 9999;background: #Fff;width: 90vw;right: 50%;transform: translate(50%,50%);bottom: 50%;padding: 1.6rem;border-radius: .2rem;}
.stage.active .dot{display: none;} */
.stage.es,.stage.cs{flex-direction: row-reverse;}
.stage.es .inner{width: 15.25rem;}
.stage.gs .inner,.stage.cs .inner{width: 14.425rem;}
.stage.es .icon{position: absolute;right: -6em;bottom: -2rem;margin: 0;}
.stage.gs .icon{position: absolute;left: -7em;top: -2rem;margin: 0;}
.stage.cs .icon{position: absolute;right: -7em;top: -3.5rem;margin: 0;}
.stage.vc .inner{width: 17.75rem;padding-left: 2rem;}
.stage.vc .icon{position: absolute;left: -2rem;top: -5rem;}
.stage.vc{flex-direction: column;margin: auto;}
.stage.gs{margin-left: auto;}
.stage.es .dot,.stage.cs .dot,.stage.gs .dot{top: 90%;}
.modal-content{padding: 1.5rem 1.1rem;color: #070762;border: 1px solid #4D8FF7;
border-radius: .2rem;background: #fff;}
.close{color: #070762;text-align: right;text-decoration: none;}
.close span{font-size: 1.25rem;}
.modal-dialog{max-width: 90vw;margin: auto;}
.modal.show{background: rgba(14, 12, 58, 0.60);backdrop-filter: blur(5px) ;}
.gstart{margin-bottom: 2.9rem;}
}
@media(min-width:1001px){
    .stage:not(.es){flex-direction: column;}
    .stages{padding: 0 0 4rem;position: relative;height: 47rem;width: 54rem;margin: auto;}
    #stages .gstart{margin-bottom: 8rem;}
    .stage{position: absolute;}
    .stage.es{top: 0;right: 42%;}
    .stage.gs{top: 5.5rem;right: .5rem;}
    .stage.cs{top: 15.7rem;left: -3.5rem;}
    .stage.vc{top: 26rem;right: 7rem;}
    .stage .inner{width: 21rem;}
    .stage.vc .inner{width: 22.5rem;}
    .stage .content{font-size: .7rem;line-height: 135%;}
/* .stage .content{height: 0;font-size: .7rem;line-height: 139%;
    overflow: hidden;
    transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-radius .3s linear, background-color .3s linear;}
    .stage.active .content{height: auto;} */
}