/* nodes styles */

.node--container {
    max-width: 1050px;
    height: 140px;
    background-size: 
    14px 14px, 14px 14px, 14px 14px;
    background-repeat: 
    repeat-y, repeat-y, repeat-x;
    margin: 0 auto;
    position: relative;
}

.diagonal--container {
    padding: 0 20vw;
}

.diagonal-r-l-node--container {
    max-width: 1050px;
    height: 140px;
    background-size: 
    0 0, 14px 14px, 14px 14px;
    background-repeat: 
    repeat-y, repeat-y, repeat-x;
    margin: 0 auto;
    position: relative;
}

.diagonal-l-r-node--container {
    max-width: 1050px;
    height: 140px;
    background-size: 
    14px 14px, 0 0, 14px 14px;
    background-repeat: 
    repeat-y, repeat-y, repeat-x;
    margin: 0 auto;
    position: relative;
}

.vertical-node--container {
    height: 140px;
    max-width: 1050px;
    margin: 0 auto;
}

.point-down {
    background-image: 
    radial-gradient(circle at 0 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%),
    radial-gradient(circle at 100% 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%),
    radial-gradient(circle at 50% 100%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: 
    left center, right center, bottom center;
}

.point-up {
    background-image:
    radial-gradient(circle at 0 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%),
    radial-gradient(circle at 100% 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%),
    radial-gradient(circle at 50% 0, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%),
    background-position: 
    left center, right center, top center;
}

.point-up-alt {
    background-image:
    radial-gradient(circle at 0 50%, hsla(0, 0%, 100%, .6) 10%, hsla(0, 0%, 100%, 0) 0), 
    radial-gradient(circle at 100% 50%, hsla(0, 0%, 100%, .6) 10%, hsla(0, 0%, 100%, 0) 0), 
    radial-gradient(circle at 50% 0, hsla(0, 0%, 100%, .6) 10%, hsla(0, 0%, 100%, 0) 0);
    background-position: 
    left center, right center, top center;
}

.d1 {
    background-image: radial-gradient(circle at 0 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: 0 0;
    background-repeat: repeat-y;
    background-size: 14px 14px;
    height: 140px;
    margin: 0 auto;
    max-width: 1050px;
    position: relative;
}

.d2 {
    background-image: radial-gradient(circle at 100% 50%, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: 100% 0;
    background-repeat: repeat-y;
    background-size: 14px 14px;
    height: 140px;
    margin: 0 auto;
    max-width: 1050px;
    position: relative;
}

.point-down .card-node-overlay {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 290px;
    width: 2px;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: left;
    background-size: 2px 14px;
    background-repeat: repeat-y;
}

.point-down .node-position {
    position: absolute;
    bottom: -4px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-up .card-node-overlay {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 290px;
    width: 2px;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: left;
    background-size: 2px 14px;
    background-repeat: repeat-y;
}

.point-up .node-position {
    position: absolute;
    top: -4px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-position .node {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 100%;
}

.vertical-node-overlay {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 140px;
    width: 2px;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(102, 102, 102, 1) 10%, rgba(102, 102, 102, 0) 0%);
    background-position: left;
    background-size: 2px 14px;
    background-repeat: repeat-y;
}

@media only screen and (max-width: 1350px) {
    .node--container {
        display: none;
    }
}

@media only screen and (max-width: 640px) {
    .diagonal-r-l-node--container, .diagonal-l-r-node--container, .d1, .d2 {
        height: 80px;
    }
}