/* regular screen Styling */
@media all and (min-width: 1025px) {

    body::-webkit-scrollbar {
        opacity: 0;
    }

    body::-webkit-scrollbar-track {
        border-top: 10px solid darkgoldenrod;
        border-bottom: 10px solid darkgoldenrod;
    }

    body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        box-shadow: inset 0 0 6px darkgray;
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-position: center;
        background-size: 83px;
        background-repeat: no-repeat;
        height: 5px;
        border: 1px solid black;
        background-color: darkgreen;
}

    #nav-item {
        display: none;
    }

    #theTop {
        width: 100%;
        position: relative;
        text-align: right;
    }

    #loader {
        border: 16px solid lightgray;
        border-top: 16px solid red;
        border-right: 16px solid green;
        border-bottom: 16px solid red;
        border-left: 16px solid green;
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-size: 350px;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        width: 400px;
        height: 400px;
        animation: spin 2s linear infinite;
        -webkit-animation: spin 2s linear infinite;
        position: absolute;
        top: 15%;
        left: 35%;
}

    @keyframes spin {
        0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); }
        100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); }
    }
    /* #desktopLoader {
        border: 1px solid white;
        position: absolute;
        left: 25%;
        top: 8vh;
        height: 515px;
        width: 100vh;
        z-index: 1;
        background-image: url('/images/backgroundBorder.png');
        background-size: cover;
        background-repeat: no-repeat;
        animation: fadeout 3s linear infinite;
        -webkit-animation: fadeout 3s linear infinite;
} */

    @keyframes fadeout {
        from {
            opacity: 1;
        } to {
            opacity: 0;
        }
    }

    #defaultCanvas0 {
        border: 1px solid white;
        position: absolute;
        left: 37%;
        top: 20%;
        z-index: 1;
        display: none;
    }

    #myDiv {
        display: none;
    }

    * {
        font-family: 'Poppins', sans-serif;
    }

    body {
        height: 2090px;
        margin: 0;
        padding: 0;
    } 

    #nav-item {
        font-size: x-large;
    }

    #mainContainer {
        position: absolute;
        height: 610px;
        background-color: black;
    }

    #aboutMeText {
        font-size: 4.2vh;
    }
    
    #certLink {
        text-decoration: none;
        color: white;
    }

    #asideContainer {
        /* background: linear-gradient(to left top, purple, blue); */
        position: absolute;
        width: 620px;
        height: 190px;
        right: 20%;
        top: 35%;
    }

    .asideTitle {
        display: none;
    }

    /* .asideTitle::after {
        content: "";
        position: inherit;
        display: block;
        margin: 0 auto;
        border-bottom: 1px solid white;
        width: 5%;
    } */

    #gitHubLink {
        position: relative;
        left: 5%;
        top: 35vh;
    }

    #svgBorder {
        height: 85px;
    }

    #linkedinLink {
        position: relative;
        top: 35vh;
        right: -10%;
    }


    #viewProjects{
        position: inherit;
        font-size: 35px;
        top: 30%;
        height: 10vh;
        width: 20vh;
        border: none;
        background: transparent;
        animation: titleMove 3s infinite ease-in-out;
        -webkit-animation: titleMove 3s infinite ease-in-out;
}

    #viewProjects a {
        text-decoration: none;
        color: white;
}

    #viewProjects:hover {
        height: 15vh;
        top: 29%;
        background-color: black;
        box-shadow: 5px 5px white;
    }

    #closeOut {
        position: inherit;
        font-size: 35px;
        left: 25%;
        top: 34%;
        height: 10vh;
        width: 25vh;
        background: transparent;
        border: none;
        color: white;
        animation: titleMove 3s infinite;
        -webkit-animation: titleMove 3s infinite;
}

    #closeOut:hover {
        height: 15vh;
        top: 32%;
        background-color: black;
        color: white;
        box-shadow: 5px 5px white;
    }

    #certsSkills {
        position: inherit;
        font-size: 32px;
        right: 15%;
        top: 34%;
        width: 25vh;
        height: 10vh;
        background: transparent;
        border: none;
        color: white;
        animation: titleMove 3s infinite;
        -webkit-animation: titleMove 3s infinite;
}

    #certsSkills:hover{
        height: 15vh;
        background-color: black;
        color: white;
        box-shadow: 5px 5px white;
    }

    @keyframes titleMove {
        0% {
            top: 30%;
        }
        50% {
            top: 20%;
        }
        100% {
            top: 30%;
        }
    }



    #desktopImage {
        position: absolute;
        height: 330px;
        top: 220px;
    }

    #resume {
        height: 690px;
        position: absolute;
        top: 20px;
        width: 540px;
        left: 33%;
        
    }

    #exitButton {
        position: absolute;
        left: 68%;
        top: 25px;
        border: 0;
        background-color: transparent;
    }

    #crossLabel {
        height: 60px;
    }

    .projectsContainer {
        color: darkgoldenrod;
        position: absolute;
        top: 665px;
        width: 100%;
        text-align: center;
    }

    /* @keyframes animate-on-scroll {
       0% {
        opacity: 0;
        transform: translateX(-300px);
        -webkit-transform: translateX(-300px);
        -moz-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
        -o-transform: translateX(-300px);
        transition: all 0.4s ease-out;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        transition-delay: 0.2s;
} 100% {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform:;
        -moz-transform:;
        -ms-transform:;
        -o-transform:;
}
    } */

    .animate-on-scroll {
        opacity: 0;
        transform: translateX(-300px);
        -webkit-transform: translateX(-300px);
        -moz-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
        -o-transform: translateX(-300px);
        transition: all 0.4s ease-out;
        -webkit-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        transition-delay: 0.2s;
}

    .animate {
        opacity: 1;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
}

    #projectLinkContainer  {
        columns: 2;
        height: 100%;
        border: 2px double darkgoldenrod;
        background-image: url('/images/africanBackground.png');
        margin: 0;
        padding: 0;
        width: 100%;
        list-style: none;
    }

    #projectLinks {
        height: 200px;
        padding-bottom: 10px;
        width: 75%;
        margin-bottom: 15px;
    }
    
    /* #linksProjects :hover{
        border: 5px solid white;
        transition: .4s ease-in-out;
        -webkit-transition: .4s ease-in-out;
        -moz-transition: .4s ease-in-out;
        -ms-transition: .4s ease-in-out;
        -o-transition: .4s ease-in-out;
} */

    /* #projectInnerLink {
        height: 200px;
        padding-bottom: 10px;
        width: 35%;
        margin-bottom: 15px;
        position: absolute;
        left: 110px;
        opacity: 0;
}

    #projectInnerLink:hover {
        opacity: 1;
        z-index: 2;
        transition: .4s ease-in-out;
        -webkit-transition:;
        -moz-transition:;
        -ms-transition:;
        -o-transition:;
} */



    .cadImages {
        position: absolute;
        top: 20vh;
    }

    .cadImages a {
        border: 1px solid blue;
    }

    .linkPoints{
        height: 240px;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .linkPoints:nth-child(1) {
        background-image: url('/images/slideshowA.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }

    .linkPoints:hover:nth-child(1) {
        /* border: 5px solid green; */
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        animation: changeImgA 5s ease-in-out infinite;
        -webkit-animation: changeImgA 5s ease-in-out infinite;
}

    @keyframes changeImgA {
        25% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/slideshowB.png");
        }
        75% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/slideshowC.png");
        }
        100% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/slideshowA.png");
        }
    }

    .calcProject {
        margin-top: 40px;
    }

    .linkPoints:nth-child(2) {
        background-image: url('/images/teacherCalcA.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }

    .linkPoints:hover:nth-child(2) {
        /*border: 5px solid red;*/
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        animation: changeImgB 6s ease-in-out infinite;
        -webkit-animation: changeImgB 6s ease-in-out infinite;
}   

    /* .linkPoints:hover:nth-child(2)::before {
        content: 'Calculator made  for teachers within a Charter School';
        word-wrap: normal;
    }

    .linkPoints:hover:nth-child(2)::after {
        content: 'test Text';
    } */

    @keyframes changeImgB {
        20% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/teacherCalcB.png");
        }
        40% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/teacherCalcC.png");
        }

        60% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/teacherCalcD.png");
        }
        80% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/teacherCalcE.png");
        }
        100% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/images/teacherCalcF.png");
        }
    }

    .linkPoints:nth-child(3) {
        background-image: url('/images/morgageCalcA.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        overflow-y: scroll;
}

    .linkPoints:nth-child(3)::-webkit-scrollbar {
        opacity: 0;
    }

    .linkPoints:nth-child(3)::-webkit-scrollbar-track {
        border-bottom: 5px solid darkgoldenrod;
        border-top: 5px solid darkgoldenrod;
    }

    .linkPoints:nth-child(3)::-webkit-scrollbar-thumb {
        border-radius: 10px ;
        -webkit-border-radius: 10px ;
        -moz-border-radius: 10px ;
        -ms-border-radius: 10px ;
        -o-border-radius: 10px ;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-position: center;
        background-size: 83px;
        background-repeat: no-repeat;
        height: 5px;
        border: 1px solid black;
        background-color: black;
}

    .linkPoints:hover:nth-child(3) {
        /*border: 5px solid red;
        */transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        animation: changeImgC 5s ease-in-out infinite;
        -webkit-animation: changeImgC 5s ease-in-out infinite;
}

    @keyframes changeImgC {
        50% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/morgageCalcB.png");
        }
        100% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/morgageCalcA.png");
        }
    }

    .linkPoints:nth-child(4) {
        background-image: url('/Jeff-Bozier-Portfolio-main/images/gamecornerA.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
        overflow-y: scroll;
    }

    .linkPoints:nth-child(4)::-webkit-scrollbar {
        opacity: 0;
    }

    .linkPoints:nth-child(4)::-webkit-scrollbar-track {
        border-bottom: 5px solid darkred;
        border-top: 5px solid darkred;
    }

    .linkPoints:nth-child(4)::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-position: center;
        background-size: 83px;
        background-repeat: no-repeat;
        height: 5px;
        border: 1px solid black;
        background-color: black;
}

    .linkPoints:hover:nth-child(4) {
        /*border: 5px solid red;
        */transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        animation: changeImgD 7s ease-in-out infinite;
        -webkit-animation: changeImgD 7s ease-in-out infinite;
}

    @keyframes changeImgD {
        15% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerB.png");
        }
        25% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerC.png");
        }

        35% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerD.png");
        }
        55% {
            z-index: 2;
            width: 100%;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerE.png");
        }
        75% {
            z-index: 2;
            width: 100%;
            background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerF.png");
        }
        80% {
            z-index: 2;
            width: 100%;
            background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerG.png");
        }
        90% {
            z-index: 2;
            width: 100%;
            background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
            background-image: url("/Jeff-Bozier-Portfolio-main/images/gamecornerH.png");
        }
    }

    #asideItem {
        float: left;
        word-wrap: break-word;
        width: 15vh;
        height: fit-content;
        font-size: 13px;
        font-weight: 600;
        position: relative;
        color: darkgoldenrod;
        background-color: black;
        border: 3px solid red;
    }

    #asideItemRight {
        float: right;
        word-wrap: break-word;
        width: 15vh;
        height: 100%;
        font-size: 40px;
        position: relative;
        background-color: black;
        border: 3px solid red;
    }

    #asideItemRight::after {
        content: '';
        border-right: 1px solid white;
        margin-right: 3px;
        position: absolute;
        left: 0px;
    }

    #asideItemRight > p {
        font-size: 14px;
        font-weight: 900;
        color: darkgoldenrod;
    }

    #asideItemRight > i {
        font-size: 30px;
        color: darkgoldenrod;
    }

    .innerLinks{
        height: 200px;
        padding-bottom: 10px;
        width: 37%;
        border: 2px solid purple;
        margin-bottom: 15px;
        position: absolute;
        left: 83px;
        opacity: 0;
    }

    /* .innerLinks:hover {
        opacity: 1;
        z-index: 2;
        transition: .4s ease-in-out;
        -webkit-transition:;
        -moz-transition:;
        -ms-transition:;
        -o-transition:;
} */
/* 
    .linkPoints:hover:nth-child(3) {
        border: 5px solid goldenrod;
    } */

    /* .linkPoints:hover:nth-child(4) {
        border: 5px solid blue;
    } */


    #backToTopButton {
    position: fixed;
    bottom: 5%;
    right: 0;
    background-color: #0078d0;
    border: 0;
    border-radius: 56px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
    font-size: 18px;
    font-weight: 600;
    outline: 0;
    padding: 16px 21px;
    text-align: center;
    text-decoration: none;
    transition: all .3s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-border-radius: 56px;
    -moz-border-radius: 56px;
    -ms-border-radius: 56px;
    -o-border-radius: 56px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    z-index: 3;
    opacity: 0;
}

    #backToTopButton:before {
    background-color: initial;
    background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
    border-radius: 125px;
    content: "";
    height: 50%;
    left: 4%;
    opacity: .5;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 92%;
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    -ms-border-radius: 125px;
    -o-border-radius: 125px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

    #backToTopButton:hover {
    box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

    @media (min-width: 768px) {
    #backToTopButton {
        padding: 16px 48px;
    }
}

    .moreInfoContainer {
        position: absolute;
        top: 1240px;
        height: 390px;
        width: 100%;
        z-index: 2;
    }    

    .techToolsItem {
        text-align: center;
        display: block;
        font-size: 16px;
        margin: 0 auto;
        content: "";
        width: 50%;
        border-bottom: 1px solid black;
    }

    #flush-headingOne {
        border-bottom: 3px solid black;
    }

    #techTools {
        list-style: none;
    }

    .questionOne {
        text-decoration: underline;
        font-size: larger;
        color: silver;
        font-weight: bolder;
        text-align: center;
    }

    .questionOne li {
        margin-bottom: 15px;
    }

    .questionOne a {
        color: silver;
        font-weight: bolder;
    }

    .questionTwo {
        height: 200px;
        overflow-y: scroll;
    }

    /* #techTools li {
        margin-bottom: 6px;
        text-decoration: underline;
        color: white;
        font-size: x-large;
        list-style-type: square;
    } */


    .questionTwo::-webkit-scrollbar-track {
        border-right: 5px solid darkred;
    }

    .questionTwo::-webkit-scrollbar {
        width: 50px;
        opacity: 0.5;
    }

    .questionTwo::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-position: center;
        background-size: 83px;
        background-repeat: no-repeat;
        height: 5px;
        border: 1px solid #000;
}

    #collapseButton {
        font-size: x-large;
        text-align: center;
    }

    #questionThree {
        height: 200px;
        overflow-y: scroll;
    }

    #questionThree::-webkit-scrollbar {
        width: 50px;
        opacity: 0.5;
        background-color: black;
    }

    #questionThree::-webkit-scrollbar-track {
        border-left: 5px solid darkred;
    }

    #questionThree::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        box-shadow: inset 0 0 6px silver;
        background-image: url('/Jeff-Bozier-Portfolio-main/images/logoSolo.png');
        background-position: center;
        background-size: cover;
}

    #contactContainer {
        position: absolute;
        top: 1630px;
        text-align: center;
        left: 58vh;
        z-index: 1;
        /* background-color: blue; */
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        -ms-border-radius: 25px;
        -o-border-radius: 25px;
        padding: 0 1em;
        height: 400px;
        border: solid 1.5em rgba(#350, .03);
        box-shadow: 2px 2px 5px rgba(#350, .02),         2px 2px 17px rgba(#350, .35),        2px 2px 25px rgba(#350, .5);
        background: url('/Jeff-Bozier-Portfolio-main/images/moon_sharp_bright.png') 50%/ cover border-box padding-box;
        border: 1px solid white;
}


    #contactTitle {
        color: white;
        position: relative;
    }

    #contactTitle::after {
        content: '';
        position: absolute;
        border-bottom: 3px solid purple;
        width: 40%;
        height: 1px;
        bottom: 0;
        right: 29%;
    }

    

    .contactUserItems {
        display: flex;
        width: 500px;
        text-align: center;
        padding-bottom: 2px;
        margin-bottom: 4px;
        font-weight: bolder;
    }

    /* #submitButton {
        display: block;
        font-size: 20px;
        width: 120px;
        height: 120px;
        background: #fff;
        padding: 10px;
        border: 0;
        outline: 0;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        color: #171717;
        transition: all 200ms;
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        -ms-transition: all 200ms;
        -o-transition: all 200ms;
        cursor: pointer;
        position: absolute;
        left: 40%;
} */

    #submitButton {
        /*background: transparent;
        color: transparent;
        border: none;
        border-top: solid 3px #f8a;
        border-left: solid 3px #fff;
        */
        display: block;
        font-size: 20px;
        font-weight: bold;
        width: 120px;
        height: 120px;
        background: rgb(182, 175, 175);
        padding: 10px;
        border: 0;
        outline: 0;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        color: #171717;
        transition: all 200ms;
        -webkit-transition: all 200ms;
        -moz-transition: all 200ms;
        -ms-transition: all 200ms;
        -o-transition: all 200ms;
        cursor: pointer;
        position: absolute;
        left: 40%;
        /* animation: spin 700ms linear infinite;
        -webkit-animation: spin 700ms linear infinite; */
}

    @keyframes spin {
        to { transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); }
    }
}