:root{
	--menu-height: 4.64vw;
	--gray-color-alt : #ccc;
}

.os-btn i.top.right, .os-btn i.bottom.left{
    width: calc(100% - (var(--20px) * 2));
    height: 2px;
    transition: all .35s ease-in;
}
.os-btn i.top.left, .os-btn i.bottom.right{
    height: calc(100% - (var(--20px) * 2));
    width: 2px;
    transition: all .35s ease-in;
}
.os-btn:hover i.top.right, .os-btn:hover i.bottom.left{width: 100%;}
.os-btn:hover i.top.left, .os-btn:hover i.bottom.right{height: 100%;}

.mbottom-in{padding-bottom: var(--menu-height)}
.mpadding{padding-top: var(--menu-height); padding-bottom: var(--menu-height)}
.vh100-alt{height: calc(100vh - var(--menu-height))}
.mask{background-image : linear-gradient(134.72deg, #040C47 0%, #545C83 100%);
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.bg-success-alt{background-color: var(--success-color-alt);}
.success-alt{color: var(--success-color-alt);}
.dot{margin-bottom: var(--20px)!important;}
#header + div{height: calc(100% - var(--header-height))}
#menu, .olateams > div:nth-child(2){height: var(--menu-height); }
.partner{height: 12vw; width: calc(25% - var(--20px)); padding: var(--10px);}
.partner figure:hover {filter: none;}
#services figure{height: 8vw; width: 8vw;}
.work-content{
	width : 57.8125vw;
	max-height: 0vh;overflow:hidden!important;
}
.project{height : 20vw;}
.work-content.opened {z-index: 99;max-height: 32.66vw!important;padding-bottom:var(--20px);padding-top: var(--20px);}
#testimony{height: 36.15vw;}

.circle{
    height: 0.5vw;
    width: 0.5vw;
    border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 5px 0px rgba(0,0,0,.5);
}

.circle.alt{
    height: var(--slide-dot-size);
    width: var(--slide-dot-size);
}

#service-h .os-tab-head.active{background: var(--tab-active-color);font-weight: 700;}
#service-h > div{
	border-top : 1px solid #fff;
	border-right : 1px solid var(--success-color);
}
#service-h > div:first-child{border-left : 1px solid var(--success-color);}
#service-c div  p{border-right : 1px solid #fff;}

.olateams{box-shadow: 18px 24px 22px 0 rgba(0, 0, 0, 0.2);}

.olateams-fig{
	width : 20vw;
	height : 20vw;
}

.actu-height{
	height : 13vw;
}

.anim-dash {
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  animation: dash 5s linear;
}

@keyframes dash {
  from {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dasharray: 2000;
    stroke-dashoffset: -0;
  }
}


.anim-bg {
    opacity: 0;
    animation: animBg 5s linear normal none infinite;
}

.anim-bg.delay-1 {
    animation-duration: 4s;
    animation-delay: 1s;
}
.anim-bg.delay-2 {
    animation-duration: 3.80s;
    animation-delay: 2s;
}
.anim-bg.delay-3 {
    animation-duration: 3.60s;
    animation-delay: 3s;
}
.anim-bg.delay-4 {
    animation-duration: 3.40s;
    animation-delay: 4s;
}
.anim-bg.delay-5 {
    animation-duration: 3.20s;
    animation-delay: 5s;
}
.anim-bg.delay-6 {
    animation-duration: 3.00s;
    animation-delay: 6s;
}
.anim-bg.delay-7 {
    animation-duration: 2.80s;
    animation-delay: 7s;
}
.anim-bg.delay-8 {
    animation-duration: 2.60s;
    animation-delay: 8s;
}
.anim-bg.delay-9 {
    animation-duration: 2.40s;
    animation-delay: 9s;
}
.anim-bg.delay-10 {
    animation-duration: 2.20s;
    animation-delay: 10s;
}
.anim-bg.delay-11 {
    animation-duration: 2.00s;
    animation-delay: 11s;
}
.anim-bg.delay-12 {
    animation-duration: 1.80s;
    animation-delay: 12s;
}

@keyframes animBg {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 1;}
}


#vectorsBox > *{transition: all .5s ease-in;}