@font-face {
    font-family: 'Gilroy';
    src: url('../../fonts/Gilroy.eot'); /* IE9+ Compat Modes */
    src: url('../../fonts/Gilroy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/Gilroy.woff2') format('woff2'), /* Super modern browsers */
    url('../../fonts/Gilroy.woff') format('woff'), /* Modern browsers */
    url('../../fonts/Gilroy.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../../fonts/Gilroy.svg#FontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'GilroyBold';
    src: url('../../fonts/GilroyBold.eot'); /* IE9+ Compat Modes */
    src: url('../../fonts/GilroyBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../fonts/GilroyBold.woff2') format('woff2'), /* Super modern browsers */
    url('../../fonts/GilroyBold.woff') format('woff'), /* Modern browsers */
    url('../../fonts/GilroyBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../../fonts/GilroyBold.svg#FontName') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: Gilroy;
    src: url("../../fonts/Gilroy.otf") format("opentype");
}

@font-face {
    font-family: GilroyBold;
    font-weight: bold;
    src: url("../../fonts/GilroyBold.otf") format("opentype");
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

html {
	background: #fff;
}

body {
    font-family: Gilroy, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    min-height: 100vh;
    color: #57585c;
    /*color: var(--color-text);*/
    background-color: #fff;
    /*background-color: var(--color-bg);*/
    -webkit-font-smoothing: antialiased;
    /*-moz-osx-font-smoothing: grayscale;*/
    overflow: hidden;
}

/* Color schemes */
.demo-1 {
    --color-text: #000;
    --color-bg: #ffffff;
    --color-link: #000;
    --color-link-hover: #ffffff;
    --color-stitle: #000;
    --fontsize-stitle: 12vw;
    --color-sdesc: #000;
    --color-slink: #000;
    --color-slink-hover: #000;
    --color-slink-bg: #fff;
    --color-slink-hover-bg: #ffffff;
    --color-nav: #000;
    --color-nav-hover: #ffffff;
}

@media screen and (max-width: 720px) {
    .demo-1 {
        --fontsize-stitle: 18vw;
    }
}

@media screen and (max-width: 360px) {
    .demo-1 {
        --fontsize-stitle: 16vw;
    }
}

    /* Fade effect */
    .js body {
        opacity: 0;
        transition: opacity 0.3s;
    }

        .js body.render {
            opacity: 1;
        }

    /* Page Loader */
    .js .loading::before {
        content: '';
        position: fixed;
        z-index: 100000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: var(--color-bg);*/
    }

    .js .loading::after {
        content: '';
        position: fixed;
        z-index: 100000;
        top: 50%;
        left: 50%;
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
        pointer-events: none;
        border-radius: 50%;
        opacity: 0.4;
        /*background: var(--color-link);*/
        animation: loaderAnim 0.7s linear infinite alternate forwards;
    }

    @keyframes loaderAnim {
        to {
            opacity: 1;
            transform: scale3d(0.5,0.5,1);
        }
    }

    a {
        text-decoration: none;
        color: var(--color-link);
        outline: none;
    }

        a:hover,
        a:focus {
            /*color: var(--color-link-hover);*/
            outline: none;
        }

    .hidden {
        position: absolute;
        overflow: hidden;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    /* Icons */
    .icon {
        display: block;
        width: 1.5em;
        height: 1.5em;
        margin: 0 auto;
        /*fill: currentColor;*/
    }

    .icon--arrow-rot {
        transform: rotate(180deg);
    }

    main {
        position: relative;
        width: 100%;
    }

    .content {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        min-height: 100vh;
    }

    .content--fixed {
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        display: grid;
        align-content: space-between;
        width: 100%;
        max-width: none;
        min-height: 0;
        height: 100vh;
        padding: 1.5em;
        pointer-events: none;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto 4em;
    }

        .content--fixed a {
            pointer-events: auto;
        }

    /* Header */
    .codrops-header {
        position: relative;
        z-index: 100;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        align-items: center;
        align-self: start;
        grid-area: header;
        justify-self: start;
    }

    .codrops-header__title {
        font-size: 1em;
        font-weight: normal;
        margin: 0;
        padding: 0;
    }

    .github {
        display: block;
        align-self: start;
        grid-area: github;
        justify-self: end;
        padding: 0.5em 0;
    }

    .demos {
        position: relative;
        display: block;
        align-self: end;
        text-align: center;
        grid-area: demos;
    }

    .demo {
        margin: 0 0.15em;
    }

        .demo:hover,
        .demo:focus {
            opacity: 0.5;
        }

        .demo span {
            white-space: nowrap;
            text-transform: lowercase;
            pointer-events: none;
        }

            .demo span::before {
                content: '#';
            }

    a.demo--current {
        pointer-events: none;
    }

    /* Top Navigation Style */
    .codrops-links {
        position: relative;
        display: flex;
        justify-content: center;
        margin: 0 1em 0 0;
        text-align: center;
        white-space: nowrap;
    }

    .codrops-icon {
        display: inline-block;
        margin: 0.15em;
        padding: 0.25em;
    }

    .slideshow {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .slides {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .slide--current {
        opacity: 1;
        pointer-events: auto;
    }

    .slide__img {
        position: absolute;
        top: 0;/*-200px;*/
        left: 0;/*-200px;*/
        width: 100%;/*calc(100% + 400px);*/
        height: 100%;/*calc(100% + 400px);*/
        background-size: cover;
        background-position: 50% 50%;
        opacity: 0.5;
    }

    .slidenav {
        position: fixed;
        width: 20%;
        /*left: 24px;
        bottom: 24px;*/
            right: 24px;
            top: 24px;
            left: unset;
            bottom: unset;
        text-align: center;
        padding: 1em;
        background: #ffffff;
        font-family: GilroyBold;
        font-weight: bold;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
        border-radius: 50px;
        min-width: 215px;
        max-width: 245px;
    }

@media screen and (max-width: 720px) {
    .slidenav {
        right: 24px;
        top: 24px;
        left: unset;
        bottom: unset;
    }
}

    .slidenav__item {
        border: 0;
        background: none;
        font-weight: bold;
        color: #678cfc;
        font-family: GilroyBold;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .slidenav__item--prev {
        float: left;
    }

    .slidenav__item--next {
        float: right;
    }

    .slidenav__item:focus {
        outline: none;
    }

    .slidenav__item:hover {
        color: var(--color-nav-hover);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .shape {
        position: absolute;
        width: 100%;
        height: 100%;
        fill: var(--color-shape-fill);
        top: 0;
        pointer-events: none;
    }

    .slide__title {
        position: relative;
        font-size: var(--fontsize-stitle);
        margin: 0.1em;
        cursor: default;
        line-height: 1;
        color: var(--color-stitle);
        background: -webkit-linear-gradient(left top,#517bfc,#8728fe);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-family: GilroyBold;
    }

    .slide__desc {
        /*position: relative;
        font-size: 1.5em;
        margin: 1em 0 1em 0;
        cursor: default;
        color: var(--color-sdesc);
        padding: 0.5em 1em;
        text-align: center;
        background: #ffffff;
        font-family: Gilroy;*/
    }

    .slide__link {
        position: relative;
        font-size: 1em;
        padding: 1em 2em;
        display: block;
        color: white;
        background: var(--color-slink-bg);
        transition: color 0.3s, background 0.3s;
        border-radius: 50px;
        background: -webkit-linear-gradient(left top,rgba(81,123,252,.75),rgba(135,40,254,.75));
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        font-family: Gilroy;
        text-transform: uppercase;
        /*background: -webkit-linear-gradient(left top,rgba(81,123,252,1),rgba(135,40,254,1));*/
        /*min-width: 88px;
    min-height: 36px;*/
        margin: 6px 8px;
        letter-spacing: 2.5px;
        padding: .5em 1em;
    }

        .slide__link:hover {
            box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px rgba(0, 0, 0, 0.14), 0 1px 14px rgba(0, 0, 0, 0.12);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            /*background: var(--color-slink-hover-bg);*/
        }

    @media screen and (min-width: 55em) {
        .demos {
            display: flex;
            justify-self: end;
        }

        .demo {
            display: block;
            width: 17px;
            height: 17px;
            margin: 0 4px;
            border-radius: 50%;
            background: var(--color-link);
        }

        a.demo--current {
            background: var(--color-link-hover);
        }

        .demo span {
            line-height: 1;
            position: absolute;
            right: 100%;
            display: none;
            margin: 0 1em 0 0;
        }

        .demo--current span {
            display: block;
        }
    }

    @media screen and (max-width: 55em) {
        body {
            padding: 0 0 4em 0;
        }

        .content {
            flex-direction: column;
            height: auto;
            min-height: 0;
            padding-bottom: 10em;
        }

        .content--fixed {
            position: relative;
            z-index: 1000;
            display: block;
            padding: 0.85em;
        }

        .codrops-header {
            flex-direction: column;
            align-items: center;
        }

        .codrops-header__title {
            font-weight: bold;
            padding-bottom: 0.25em;
            text-align: center;
        }

        .github {
            display: none;
        }

        .codrops-links {
            margin: 0;
        }

        /*.slide__desc {
            font-size: 1em;
        }*/

        .slide__link {
            font-size: 0.85em;
        }
    }

    .link {
        color: #517bfc !important;
        position: relative;
        text-decoration: none !important;
    }

        .link:hover {
            color: #517bfc !important;
        }

        .link:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #517bfc;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
        }

        .link:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(0.8);
            transform: scaleX(0.8);
        }

        .link:visited {
            color: #517bfc !important;
        }

.link2 {
    display: flex;
}

@media screen and (max-width: 720px) {
    .link2 {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
}

/*.link3 {
    background: white;
    color: #5575fc;
}*/

.link4 {
    background: white;
    color: #832efe;
}