@font-face {
    font-family: "VIC Regular";
    src: url("../fonts/VIC-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "VIC Light";
    src: url("../fonts/VIC-Light.ttf") format("truetype");
}

@font-face {
    font-family: "VIC Medium";
    src: url("../fonts/VIC-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "VIC SemiBold";
    src: url("../fonts/VIC-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "VIC Bold";
    src: url("../fonts/VIC-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "VIC ExtraLight";
    src: url("../fonts/VIC-ExtraLight.ttf") format("truetype");
}

@font-face {
    font-family: "Nexa Bold";
    src: url("../fonts/nexa-bold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Black";
    src: url("../fonts/static/Montserrat-Black.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Black Italic";
    src: url("../fonts/static/Montserrat-BlackItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Bold";
    src: url("../fonts/static/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Bold Italic";
    src: url("../fonts/static/Montserrat-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Extra Bold";
    src: url("../fonts/static/Montserrat-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Extra Bold Italic";
    src: url("../fonts/static/Montserrat-ExtraBoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Extra Light";
    src: url("../fonts/static/Montserrat-ExtraLight.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Extra Light Italic";
    src: url("../fonts/static/Montserrat-ExtraLightItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Italic";
    src: url("../fonts/static/Montserrat-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Light";
    src: url("../fonts/static/Montserrat-Light.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Light Italic";
    src: url("../fonts/static/Montserrat-LightItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Medium";
    src: url("../fonts/static/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Medium Italic";
    src: url("../fonts/static/Montserrat-MediumItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Regular";
    src: url("../fonts/static/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Semibold";
    src: url("../fonts/static/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Semibold Italic";
    src: url("../fonts/static/Montserrat-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Thin";
    src: url("../fonts/static/Montserrat-Thin.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat Thin Italic";
    src: url("../fonts/static/Montserrat-ThinItalic.ttf") format("truetype");
}

/* Style the header: fixed position (always stay at the top) */
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
}

/* The progress container */
.progress-container {
    width: 100%;
    height: 8px;
    /*background: #fff;*/
}

/* The progress bar (scroll indicator) */
.progress-bar {
    height: 8px;
    background: linear-gradient(to right,
            aquamarine,
            violet);
    width: 0%;
    display: block;
}

body {
    /* feel free to change height */
    height: 5000px;
    /*background: #00004a;*/
    background: linear-gradient(
    to bottom,
    /*#FDCDDD,
    #fd5b78*/
        #eae9e9,
        #dac8ba
  );
}

@-webkit-keyframes hvr-wobble-vertical {
    5.56% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    11.11% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    16.67% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    22.22% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    27.75% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    33.33% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes hvr-wobble-vertical {
    5.56% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px)
    }

    11.11% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    16.67% {
        -webkit-transform: translateY(4px);
        transform: translateY(4px)
    }

    22.22% {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px)
    }

    27.75% {
        -webkit-transform: translateY(1px);
        transform: translateY(1px)
    }

    33.33% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.hvr-wobble-vertical {
    /*display: inline-block;*/
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation-name: hvr-wobble-vertical;
    animation-name: hvr-wobble-vertical;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes hvr-wobble-horizontal {
    5.56% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    11.11% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    16.67% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    22.22% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    27.75% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    33.33% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes hvr-wobble-horizontal {
    5.56% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px)
    }

    11.11% {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px)
    }

    16.67% {
        -webkit-transform: translateX(4px);
        transform: translateX(4px)
    }

    22.22% {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px)
    }

    27.75% {
        -webkit-transform: translateX(1px);
        transform: translateX(1px)
    }

    33.33% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.hvr-wobble-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    -webkit-animation-name: hvr-wobble-horizontal;
    animation-name: hvr-wobble-horizontal;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

h1 {
    font-family: "Nexa Bold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    color: white;
    text-transform: uppercase;
    text-align: center;
    font-size: 22px;
    letter-spacing: 5px;
    font-weight: 100;
    padding: 25px 15px;
    text-shadow: 1px 1px 1px #333;
}

/*svg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2000px;
    height: 2000px;
    margin: -450px 0 0 -350px;
    
}*/
svg {
    position: relative;
    /*top: 45%;*/
}

svg path {
    fill: none;
    stroke: #555555;
    /*stroke: palevioletred;*/
    stroke-width: 2;
}

.btn {
    background-image: linear-gradient(to right, #008bff, #00bfff, #00e3f6, #00ffbc);
    border-radius: 40px;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font: 1.125rem "Nexa Bold", "VIC SemiBold", sans-serif;
    /*18*/
    height: 50px;
    letter-spacing: 1px;
    margin: 300px auto;
    left: 50%;
    margin-left: -125px;
    padding: 4px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    width: 250px;
    z-index: 2;
}

.btn:hover {
    color: #000;
}

.btn span {
    align-items: center;
    background: rgb(8, 15, 130);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    height: 100%;
    transition: background .5s ease;
    width: 100%;
}

.btn:hover span {
    background: transparent;
}

.btn-bottom {
    background-image: linear-gradient(to right, #f4ff00, #ffc000, #ff6c4e, #ff00a0, #ff00f4);
    border-radius: 40px;
    box-sizing: border-box;
    color: #fff;
    display: block;
    font: 1.125rem "Nexa Bold", "VIC SemiBold", sans-serif;
    /*18*/
    height: 50px;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-left: -130px;
    margin-top: 50px;
    padding: 4px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    width: 250px;
    z-index: 2;
}

.btn-bottom:hover {
    color: #000;
}

.btn-bottom span {
    align-items: center;
    background: rgb(8, 15, 130);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    height: 100%;
    transition: background .5s ease;
    width: 100%;
}

.btn-bottom:hover span {
    background: transparent;
}