:root{
    --ss-first-color: var(--main_color);
    --ss-screenWidth: 84%;
    --ss-right: 8%;
    --ss-left: 8%;
    --ss-animation-timing: ease;
    --ss-animation-time: 0s;
    --ss-perspective: 1000px;
    --aws-duration: 0;
    --aws-delay: 0;
    --aws-easing: cubic-bezier(.175,.885,.32,1.275);

    --aws-distance: 50px;
    --aws-ndistance: -50px
}
body.home{
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
.container {
    width: calc(var(--ss-screenWidth));
    padding-right: 0;
    padding-left: 0;
}
#header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*width: var(--width);*/
    margin: 20px auto 0 auto;
    z-index: 100;
}
section{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 5;
    transition: var(--ss-animation-time);
    transition-timing-function: var(--ss-animation-timing);
    overflow: hidden;
}

.fix{
    position: absolute;
    z-index: 100;
}
.top{
    top: 0
}
.top-10{
    top: 10px
}
.top-20{
    top: 20px
}
.top-30{
    top: 30px
}
.top-40{
    top: 40px
}
.top-50{
    top: 50px
}
.bottom{
    bottom: 0
}
.bottom-10{
    bottom: 10px
}
.bottom-20{
    bottom: 20px
}
.bottom-30{
    bottom: 30px
}
.bottom-40{
    bottom: 40px
}
.bottom-50{
    bottom: 50px
}
.right{
    right: var(--ss-right);
}
.left{
    left: var(--ss-left)
}
.x-center{
    left: 0;
    right: 0;
    margin: auto;
}
.y-center{
    top: 0;
    bottom: 0;
    margin: auto;
}
.center{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.sections-nav{
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: center;
    z-index: 50;
    height: 100%;
    top: 0;
}
.sections-nav .position-left,.sections-nav .position-right{
    height: 100%;
}
.sections-nav > ul{

}
.sections-nav ul ul{
    display: flex;
}
.sections-nav li{

}
.sections-nav.position-left{
    left: var(--ss-left);
    direction: ltr;
}
.sections-nav.position-left li[data-name]:before{
    left: 0;
}
.sections-nav.position-right{
    left: var(--ss-right);
}
.navtype-1 li{
    /*position: relative;*/
    pointer-events: all;
}
.navbullet-1 li[data-name]{
    display: block;
    background: 0 0;
    padding: 3px 2px;
    cursor: pointer;
}
.navbullet-1 li[data-name]:after {
    content: "";
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 6px;
    background: #fff2;
    transition: all .2s linear;
}
.navbullet-1 li[data-name]:before {
    /*content: attr(data-name);*/
    transition: all .2s linear;
    font-family: var(--main_font);
    position: absolute;
    opacity: 0;
    visibility: hidden;
}
.navbullet-1 li[data-name]:hover:before {
    opacity: 1;
    visibility: visible;
}
.navbullet-1 li:hover:after{
    background: var(--ss-first-color);
}

/******************************************************
    animations
******************************************************/
body[data-animation='flip'],body[data-animation='flip'],body[data-animation='box'],body[data-animation='box']{
    perspective: var(--ss-perspective)
}
body[data-animation='default'] section.before{
    transform: translateY(-100%) scale(0.8);
    opacity: 0;
}
body[data-animation='default'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='default'] section.after{
    transform: translateY(100%) scale(0.8);
    opacity: 0;
}
/*** horizontal ***/
body.horizontal[data-animation='default'] section.before.horizontal{
    transform: translateX(-100%) scale(0.8);
    opacity: 0;
}
body.horizontal[data-animation='default'] section.after.horizontal{
    transform: translateX(100%) scale(0.8);
    opacity: 0;
}
/******/
body[data-animation='stack'] section.before{
    transform: translateY(0) scale(0.8);
    opacity: 0;
}
body[data-animation='stack'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='stack'] section.after{
    transform: translateY(100%) scale(0.8);
    opacity: 1;
}
/*** horizontal ***/
body.horizontal[data-animation='stack'] section.before.horizontal{
    transform: translateX(0) scale(0.8);
    opacity: 0;
}
body.horizontal[data-animation='stack'] section.after.horizontal{
    transform: translateX(100%) scale(0.8);
    opacity: 1;
}
/******/
body[data-animation='film'] section.before{
    transform: translateY(-100%) scale(1);
    opacity: 0;
}
body[data-animation='film'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='film'] section.after{
    transform: translateY(100%) scale(1);
    opacity: 1;
}
/*** horizontal ***/
body.horizontal[data-animation='film'] section.before.horizontal{
    transform: translateX(-100%) scale(1);
    opacity: 0;
}
body.horizontal[data-animation='film'] section.after.horizontal{
    transform: translateX(100%) scale(1);
    opacity: 1;
}
/******/
body[data-animation='card'] section.before{
    transform: translateY(-100%) scale(1);
    opacity: 1;
}
body[data-animation='card'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='card'] section.after{
    transform: translateY(100%) scale(1);
    opacity: 0;
}
/*** horizontal ***/
body.horizontal[data-animation='card'] section.before.horizontal{
    transform: translateX(-100%) scale(1);
    opacity: 1;
}
body.horizontal[data-animation='card'] section.after.horizontal{
    transform: translateX(100%) scale(1);
    opacity: 0;
}
/******/
body[data-animation='vertigo'] section.before{
    transform: translateY(0) scale(1.2) rotate(-5deg);
    opacity: 0;
}
body[data-animation='vertigo'] section.active{
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
}
body[data-animation='vertigo'] section.after{
    transform: translateY(0) scale(0.8) rotate(5deg);
    opacity: 0;
}

/******/
body[data-animation='zoom'] section.before{
    transform: translateY(0) scale(1.2);
    opacity: 0;
}
body[data-animation='zoom'] section.active{
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
}
body[data-animation='zoom'] section.after{
    transform: translateY(0) scale(0.8);
    opacity: 0;
}
/******/
body[data-animation='flip'] section.before{
    transform: translateY(-80%) scale(1) rotate3d(1, 0, 0, -60deg);
    opacity: 0;
}
body[data-animation='flip'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='flip'] section.after{
    transform: translateY(80%) scale(1) rotate3d(1, 0, 0, 60deg);
    opacity: 0;
}

/*** horizontal ***/
body.horizontal[data-animation='flip'] section.before.horizontal{
    transform: translateX(-80%) scale(1) rotate3d(0, 1, 0, -60deg);
    opacity: 0;
}
body.horizontal[data-animation='flip'] section.after.horizontal{
    transform: translateX(80%) scale(1) rotate3d(0, 1, 0, 60deg);
    opacity: 0;
}
/******/
body[data-animation='box'] section.before{
    transform: translateY(-80%) scale(1) rotate3d(1, 0, 0, 60deg);
    opacity: 0;
}
body[data-animation='box'] section.active{
    transform: translateY(0) scale(1);
    opacity: 1;
}
body[data-animation='box'] section.after{
    transform: translateY(80%) scale(1) rotate3d(1, 0, 0, -60deg);
    opacity: 0;
}
/*** horizontal ***/
body.horizontal[data-animation='card'] section.before.horizontal{
    transform: translateX(-80%) scale(1) rotate3d(0, 1, 0, 60deg);
    opacity: 0;
}
body.horizontal[data-animation='card'] section.after.horizontal{
    transform: translateX(80%) scale(1) rotate3d(0, 1, 0, -60deg);
    opacity: 0;
}
/******************************************************
    animation in attr
******************************************************/
section.before[data-animation='default']{
    transform: translateY(-100%) scale(0.8) !important;
    opacity: 0  !important;
}
section.active[data-animation='default']{
    transform: translateY(0) scale(1)  !important;
    opacity: 1 !important;
}
section.after[data-animation='default']{
    transform: translateY(100%) scale(0.8) !important;
    opacity: 0 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='default']{
    transform: translateX(-100%) scale(0.8) !important;
    opacity: 0 !important;
}
.horizontal section.after.horizontal[data-animation='default']{
    transform: translateX(100%) scale(0.8) !important;
    opacity: 0 !important;
}
/******/
 section.before[data-animation='stack']{
    transform: translateY(0) scale(0.8) !important;
    opacity: 0 !important;
}
 section.active[data-animation='stack']{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
 section.after[data-animation='stack']{
    transform: translateY(100%) scale(0.8) !important;
    opacity: 1 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='stack']{
    transform: translateX(0) scale(0.8) !important;
    opacity: 0 !important;
}
.horizontal section.after.horizontal[data-animation='stack']{
    transform: translateX(100%) scale(0.8) !important;
    opacity: 1 !important;
}
/******/
 section.before[data-animation='film']{
    transform: translateY(-100%) scale(1) !important;
    opacity: 0 !important;
}
 section.active[data-animation='film']{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
 section.after[data-animation='film']{
    transform: translateY(100%) scale(1) !important;
    opacity: 1 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='film']{
    transform: translateX(-100%) scale(1) !important;
    opacity: 0 !important;
}
.horizontal section.after.horizontal[data-animation='film']{
    transform: translateX(100%) scale(1) !important;
    opacity: 1 !important;
}
/******/
 section.before[data-animation='card']{
    transform: translateY(-100%) scale(1) !important;
    opacity: 1 !important;
}
 section.active[data-animation='card']{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
 section.after[data-animation='card']{
    transform: translateY(100%) scale(1) !important;
    opacity: 0 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='card']{
    transform: translateX(-100%) scale(1) !important;
    opacity: 1 !important;
}
.horizontal section.after.horizontal[data-animation='card']{
    transform: translateX(100%) scale(1) !important;
    opacity: 0 !important;
}
/******/
 section.before[data-animation='vertigo']{
    transform: translateY(0) scale(1.2) rotate(-5deg) !important;
    opacity: 0 !important;
}
 section.active[data-animation='vertigo']{
    transform: translateY(0) scale(1) rotate(0deg) !important;
    opacity: 1 !important;
}
 section.after[data-animation='vertigo']{
    transform: translateY(0) scale(0.8) rotate(5deg) !important;
    opacity: 0 !important;
}

/******/
 section.before[data-animation='zoom']{
    transform: translateY(0) scale(1.2) !important;
    opacity: 0 !important;
}
 section.active[data-animation='zoom']{
    transform: translateY(0) scale(1) rotate(0deg) !important;
    opacity: 1 !important;
}
 section.after[data-animation='zoom']{
    transform: translateY(0) scale(0.8) !important;
    opacity: 0 !important;
}
/******/
 section.before[data-animation='flip']{
    transform: translateY(-80%) scale(1) rotate3d(1, 0, 0, -60deg) !important;
    opacity: 0 !important;
}
 section.active[data-animation='flip']{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
 section.after[data-animation='flip']{
    transform: translateY(80%) scale(1) rotate3d(1, 0, 0, 60deg) !important;
    opacity: 0 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='card']{
    transform: translateX(-80%) scale(1) rotate3d(0, 1, 0, -60deg) !important;
    opacity: 0 !important;
}
.horizontal section.after.horizontal[data-animation='card']{
    transform: translateX(80%) scale(1) rotate3d(0, 1, 0, 60deg) !important;
    opacity: 0 !important;
}
/******/
 section.before[data-animation='box']{
    transform: translateY(-80%) scale(1) rotate3d(1, 0, 0, 60deg) !important;
    opacity: 0 !important;
}
 section.active[data-animation='box']{
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}
 section.after[data-animation='box']{
    transform: translateY(80%) scale(1) rotate3d(1, 0, 0, -60deg) !important;
    opacity: 0 !important;
}
/*** horizontal ***/
.horizontal section.before.horizontal[data-animation='card']{
    transform: translateX(-80%) scale(1) rotate3d(0, 1, 0, 60deg) !important;
    opacity: 0 !important;
}
.horizontal section.after.horizontal[data-animation='card']{
    transform: translateX(80%) scale(1) rotate3d(0, 1, 0, -60deg) !important;
    opacity: 0 !important;
}
/******************************************************
    AWS
******************************************************/
[data-aws^=slice-x] {
    opacity: 0;
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    transition-property: opacity,clip-path;
}
[data-aws^=slice-y] {
    opacity: 0;
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transition-property: opacity,clip-path;
}
.aws [data-aws^=slice] {
    opacity: 1;
    clip-path: polygon(0 -30px, 100% -30px, 100% calc(100% + 30px), 0 calc(100% + 30px))
}
[data-aws^=fade][data-aws^=fade] {
    opacity: 0;
    transition-property: opacity,transform;
}

.aws [data-aws^=fade][data-aws^=fade] {
    opacity: 1;
    transform: translateZ(0);
}
[data-aws=fade-up] {
    transform: translate3d(0,var(--aws-distance),0);
}

[data-aws=fade-down] {
    transform: translate3d(0,var(--aws-ndistance),0);
}

[data-aws=fade-right] {
    transform: translate3d(var(--aws-ndistance),0,0);
}

[data-aws=fade-left] {
    transform: translate3d(var(--aws-distance),0,0);
}

[data-aws=fade-up-right] {
    transform: translate3d(var(--aws-ndistance),var(--aws-distance),0);
}

[data-aws=fade-up-left] {
    transform: translate3d(var(--aws-distance),var(--aws-distance),0);
}

[data-aws=fade-down-right] {
    transform: translate3d(var(--aws-ndistance),var(--aws-ndistance),0);
}

[data-aws=fade-down-left] {
    transform: translate3d(var(--aws-distance),var(--aws-ndistance),0);
}

[data-aws^=zoom][data-aws^=zoom] {
    opacity: 0;
    transition-property: opacity,transform;
}

.aws [data-aws^=zoom][data-aws^=zoom] {
    opacity: 1;
    transform: translateZ(0) scale(1);
}

[data-aws=zoom-in] {
    transform: scale(.75);
}

[data-aws=zoom-in-up] {
    transform: translate3d(0,var(--aws-distance),0) scale(.75);
}

[data-aws=zoom-in-down] {
    transform: translate3d(0,var(--aws-ndistance),0) scale(.75);
}

[data-aws=zoom-in-right] {
    transform: translate3d(var(--aws-ndistance),0,0) scale(.75);
}

[data-aws=zoom-in-left] {
    transform: translate3d(var(--aws-distance),0,0) scale(.75);
}

[data-aws=zoom-out] {
    transform: scale(1.2);
}

[data-aws=zoom-out-up] {
    transform: translate3d(0,var(--aws-distance),0) scale(1.2);
}

[data-aws=zoom-out-down] {
    transform: translate3d(0,var(--aws-ndistance),0) scale(1.2);
}

[data-aws=zoom-out-right] {
    transform: translate3d(var(--aws-ndistance),0,0) scale(1.2);
}

[data-aws=zoom-out-left] {
    transform: translate3d(var(--aws-distance),0,0) scale(1.2);
}

[data-aws^=slide][data-aws^=slide] {
    transition-property: transform;
}

.aws [data-aws^=slide][data-aws^=slide] {
    transform: translateZ(0);
}

[data-aws=slide-up] {
    transform: translate3d(0,100%,0);
}

[data-aws=slide-down] {
    transform: translate3d(0,-100%,0);
}

[data-aws=slide-right] {
    transform: translate3d(-100%,0,0);
}

[data-aws=slide-left] {
    transform: translate3d(100%,0,0);
}

[data-aws^=flip][data-aws^=flip] {
    backface-visibility: hidden;
    transition-property: transform;
}

[data-aws=flip-left] {
    transform: perspective(2500px) rotateY(-100deg);
}

.aws [data-aws=flip-left] {
    transform: perspective(2500px) rotateY(0);
}

[data-aws=flip-right] {
    transform: perspective(2500px) rotateY(100deg);
}

.aws [data-aws=flip-right] {
    transform: perspective(2500px) rotateY(0);
}

[data-aws=flip-up] {
    transform: perspective(2500px) rotateX(-100deg);
}

.aws [data-aws=flip-up] {
    transform: perspective(2500px) rotateX(0);
}

[data-aws=flip-down] {
    transform: perspective(2500px) rotateX(100deg);
}

.aws [data-aws=flip-down] {
    transform: perspective(2500px) rotateX(0);
}
[data-aws]{
    transition: 0s;
}
.aws [data-aws]{
    transition-duration: var(--aws-duration);
    transition-timing-function: var(--aws-easing);
    transition-delay: var(--aws-delay);
}

/********************* Responsive *********************/
@media screen and (min-width: 768px) {
    .container {
        padding-left: 50px;
    }

}