/*

    Loader.css

    Style for the loading screen
    ========================================================================
    Author: Alexander Wright © 2019
*/


h2.whiteText {
    color: #FFFFFF;
    margin-right: -0.8em;
    width: auto;
    padding: 10px;
}

.loader {
    border: 50px solid #666666;
/*
    border-top: 50px solid #FF00FF;
    border-bottom: 50px solid #00FFFF;
*/

    border-top: 50px solid #FF88FF;
    border-bottom: 50px solid #88FFFF;


    border-radius: 50%;
    width: 0px;
    height: 0px;
    animation: spin 2.25s ease infinite;
    margin: 0% auto; /* 15% from the top and centered */
}

@keyframes spin {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(1485deg);
    }
}

/*

   About Popup -> modal
   ========================================================================

*/

.modalButtonPink {
    background-color: #bf75b9;
}

.modalButtonPurple {
    background-color: #825ea6;
}

.modalButtonBlue {
    background-color: #5e76a6;
}

.modalButtonCyan {
    background-color: #4e7e99;
}


/* The Modal (background) */
.modal {
   display: table;      /* Hidden by default */
   position: fixed;    /* Stay in place */
   z-index: 5;         /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;        /* Full width */
   height: 100%;       /* Full height */
   overflow: auto;     /* Enable scroll if needed */

   background-color: rgb(0,0,0);       /* Fallback color */
   background-color: rgba(0,0,0,0.4);  /* Black w/ opacity */

   background-color: #333333;
}

.modal-middle {
   display: table-cell;
   vertical-align: middle;
}

/* Modal Content/Box */
.modal-content {
    text-align: center;
    background-color: none;
    margin: 0% auto; /* 15% from the top and centered */
    padding: 0px;
    border: 0px solid #888;
    width: 70%; /* Could be more or less, depending on screen size */
    max-width: 700px;
    /*box-shadow: 0px 2px 2px #333333;*/
}

/* The Close Button */
.close {
   color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
   margin: auto 10px;
}

.close:hover,
.close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
}




/*
.loading {
    font-size: 30px;
}

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
    animation: ellipsis steps(4,end) 900ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character * /
    width: 0px;
    text-align: left;
}

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}
*/