* {
    opacity: 1;
    animation: fadeIn 2s ease;
  }
  
  @keyframes fadeIn{
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  
  html {
      scroll-behavior: smooth;
  }


/***********                            MARGIN CHANGE 8-17-19 @ 4:06 pm                            ***********/

body {
    font-family: "comic sans ms";
    color: white;
    background-color: black;               
        text-shadow: 5px 5px 4px black;
        /* text-align: center; */
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;  
        text-align: center;        
}

* {
    outline: none;
}
/* AUDIO */
.audio {
    /* width: 50px; */
    z-index: 1;
    position: fixed; 
    right: 0px; 
    top: 80px;
    background-color: transparent;
}


.selectCont {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* border: #990000 solid 3px;          */
}

.selectCont2 {
    width: ;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: blue solid;          */
}


.selectVideos, .selectPg2Add {
    width: 90%;
}

.randVidIcon {
    /* border: solid yellow 2px; */
    width: 40px;
    text-align: right;
    padding-top: 15px;
}

.indexLogo {    
    width: 80%;
    border: gray 2px solid;
    padding: 30px;
    border-radius: 20px;
}

.indexLogoDiv {
    width: 100%;
}

/* .buttonDiv4Brdr */
.buttons {
    border: solid 1.5px gray;
    border-radius: 20px;
    padding-bottom: 20px;
    width: 80%;
    margin: auto;
}


img {
    margin-left: auto;
    margin-right: auto;
}

a:hover {    
    color: #0066ff;    
}

a {
    color: silver; 
    border-radius: 5px;    
    text-decoration: none;    
}

a:visited {
    color: silver;
}

.container {
    display: flex;
    flex-direction: column;
}

/* TITLE: ABL WEB TOOL */

.ablWebToolTitle  {
    font-family: 'Kranky', cursive;
    /* font-family: 'cooper black'; */
}

.ablWebTooltitleB {
    color: #0066ff;
}

/***   SELECT   ***/
.ie {
    color: #0066ff;
    
}

.yt500 {
    background-color: yellow;
    color: green;
}

.mjPrime {
    background-color: black;
    color: red;
    /* font-family:"comic sans ms";   */
    /* font-size: 20px;   */
}

.theDeparted {
    color: #fff0b3;
    background-color: #990000;
}

.span500:hover {
    background-color: black;
    color: yellow;
}

.princeCanBall {
    background-color: purple;
    font-weight: bold;
    /* color: lavender; */
    color: #e9c4e3;
}

.moreVids {
    font-size: 30px;
    background-color: aqua;
    color : #0066ff;
}

.DIV_1 {
    background-color: gray;
    width: 90%;   
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    height: 130px;
    border-radius: 30px;
    font-size: 40px;
    border: solid 5px;
    border-color: black;
    text-shadow: 5px 5px 4px black;   
}


.DIV_1:hover {
    background-color: black;
    color: orange;
    border: red solid 5px;
    text-shadow: 5px 5px 4px gray;    
}

li {
    display: flex;
    flex-wrap: wrap;
}

.CODE_LINKS {
    border-radius: 20px;
}



.NAV_UL {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: scroll;

    /* background-color: gray; */

}



/*  S C R O L L B A R S ******************************/

/* width */
::-webkit-scrollbar {
    width: 20px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black; 
    border-radius: 10px;
    box-shadow: inset 0 0 5px grey;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #0066ff; 
  }


  /*   ----   B U T T O N S   ----   */

  button {
    padding: 8px;
    border-radius: 8px;
    border-width: 8px;    
    font-size: 13px;
    font-family: "fira sans heavy"; 
    outline : none;  
    color: #0066ff;     
}


/* BUTTON: Change BG COLOR */

#bgBtn {
    border: 2px solid gray;
    background-color: transparent;    
    -webkit-text-stroke-width: .5px;
   -webkit-text-stroke-color: black;
   font-size: 30px;
}

#bgBtnReset {
    border: 2px solid gray;
    background-color: transparent;
    color: transparent;
    -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: #333333;
   font-size: 30px;
}

#BgImage1 {
    border: 2px solid gray;
    background-color: transparent;    
    -webkit-text-stroke-width: .5px;
   -webkit-text-stroke-color: black;
   font-size: 30px;
   color: orange;
}


.header_btn_span {
    color: green;     
}

.toggle_btn_span {
    color: orangered;        
}

.footer_btn_span {
    color: #0066ff;        
}

li {
    display: inline-block;
    padding-left: 50px;
        padding-right: 50px;
        
        }
        
    .LI_2 {
        /*  background-color: red; */
        width: 30%;
        height: 150px;
        vertical-align: middle;
       
    }

    ul {
        color: #0066ff;
        /* background-color: green; */
    }
    
    a:visited {
        color: #0066ff;
        
    }

    /* -----   V I D E O S   ----- */
    
    .if_else {
        width:552px;
       background-color: transparent;
       border: solid red 18px; 
       border-style: double;
       border-radius: 10px;
       margin-left: auto;
       margin-right: auto;
       font-family: fira sans;
       font-size: 25px;
       vertical-align: middle;
       
    }

    .if_else_P {
        background-color: black;
        padding: 5px;
        
    }
    
    .YT_Videos {
        font-size: 35px;
        background-color: black;
        color: orange;
        border-radius: 20px;
        border: solid green 5px;
        padding: 12px;
    }

    
    .video {
        color: #0066ff;
    }
    
    .query {
        color: orangered;
    }    
    
    .NAV_Wrapper {
        height: 130px;        
    
    }
    
    
    /* ------------------------------- N A V ---------------------------- */
    #NAV {
        display: none;  
    }
    
    .NAV_UL {
        /* background-color: #29293d; */
        /* background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/19/Comerica-Park-Detroit-MI-Panorama.jpg); */
        /* background-image: url(https://images.fineartamerica.com/images-medium-large-5/detroit-skyline-and-ambassador-bridge-john-mcgraw.jpg); */
        background-color: rgb(0, 0, 0, 0.7);
        background-color: rgb(51, 51, 51, 0.7);
        background-repeat: no-repeat;
        background-size: 100%;
        


        height: 250px;        
        overflow: scroll;
        padding-top: 25px;
    }
    
    
    
    button:hover {
        background-color: transparent;
    }
    
    .googleLink {
        border-radius: 10px;
    }
    
    
    /*  ------------------- H E A D E R  ------------------- */
    
    .header_1 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* overflow-y: scroll; */
        overflow-y: visible;
        height: 100px;
        
        background-color: black;
        border-bottom: 5px solid orangered;
        /* background-color: black; */
        font-size: 25px;
        padding: 12px;
        width: 100%;
        text-shadow:
        3px 3px 0 #000,
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    }

    /****  S C R O L L B A R  ****************************************************/
    
    /* width */
    ::-webkit-scrollbar {
    width: 20px;
}
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black; 
    border-radius: 10px;
    box-shadow: inset 0 0 5px grey;
}
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
      /* background: #b30000;  */
    background: #0066ff; 
}
    


    




    .header_1_Wrapper {
        /* background-color: green; */
        height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    
    
    
    /*   -----   H E A D E R  --  L I N K S   -----   */
    
    .autosNavLink {
        border-radius: 120px;
        border: 1.5px gray solid;
        padding-right: 6px;
        padding-left: 6px;
    }

    .musicLink {
        border-radius: 90px;
        border: 2px gray solid;
        /* position: sticky;
        z-index: 15; */
    }
    
    .greenPath {
        /* background: green; */
        border: 2px green solid;
        border-radius: 90px;
    }
    
    .bBallReflink {
        border-radius: 90px;
        border: 2px orangered solid;
    }
    
    .nbaWebSiteLink {
        border-radius: 90px;
        border: solid 1.5px gray;
        padding-right: 6px;
        padding-left: 6px;
    }

    .jordanStatsLink {
        border-radius: 90px;
        border: 1.5px gray solid;
        padding-right: 5px;
        padding-left: 5px;
        overflow: hidden;
    }
    
    /*     -----     I M A G E S     -----     */
    
    .myADI {
        border: #000000 5px solid;
        border-radius: 13px;
    }
    
    .Half_Mar_2018 {
        border-radius: 13px;
    }

    /* WIDGET DIV */
    .weatherAndLogCont {
        display: flex;
        justify-content: space-between;
        z-index: -1;
        
        /* align-items: center; */
        /* border: solid red 3px; */
        padding: 0px;
        /* background-color: yellow; */
        width: 90%;

        margin-left: auto;
        margin-right: auto;  
        text-align: center;
    }
    

    
    /*  ------------------- F O O T E R  ------------------- */
    
    .footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        overflow: scroll;
        
        position: fixed;
        bottom: 0;
        background-color: black;
        font-size: 25px;
        padding: 12px;
        width: 100%;
        text-shadow:
        3px 3px 0 #000,
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
        border-top: 5px solid orangered;
    }
    
    .codeLinkIMG {
        color: white;
        height: 30px;
        background: white;
        border-radius: 15px;
        border: 1px gray solid;        
    }

    .footerLink {
        border-radius: 15px;
        border: 1px gray solid;
        padding-right: 6px;
        padding-left: 6px;
    }
    
    .races_link {
        border-radius: 15px;
        border: 2px solid gray;
    }
    
    .CODE_LINKS {
        border-radius: 20px;
    }
    

    /* select */

    select {
        /* width: 50%; */
        padding: 5px;
        color: silver;
        background-color: #000000;
        margin: 10px;
        margin-top: 20px;
        border-radius: 10px;
        font-size: 1em;        
    }

    .pages2Add {
        /* background-color: red; */
    }

    .fatherMag {
        background-color: black;
        color: silver;        
    }


    .weatherWidgetBLK {        
        z-index: -1;
    }

    .D_LGHT_DwnTwn {
        position: fixed;
        top: -125px;
        z-index: -3;
        width: 100%;
        border-radius: 20px;
        border-bottom: solid 4px #0066ff;
    }

    .ABL_Login_Btn {
        /* position: fixed;
        right: 15px;
        top: 150px; */
        width: 60px;
        border: 4px;
        color: black;
        background-color: gray;
    }

    .ablLogIn_Cont {
        position: fixed;
        display: flex;
        align-items: center;
        right: 15px;
        top: 150px;
        /* border: yellow solid; */
    }

    .errorMsg {
        position: fixed;
        right: 158px;
        top: 170px;
        border-radius: 5px;
        /* padding-left: 8px;
        padding-left: 8px;
        padding-left: 8px; */
        padding: 8px;
        /* background-color: rgb(0, 0, 0, 0.5);
        border: red solid; */
        color: orange;
    }


    input {
        /* display: none; */
        background-color: rgb(0, 0, 0, 0.5);
        color: white;
        border: solid black;
        border-radius: 5px;
    }

    #submit, #username, #password {
        display: none;
    }

    .submit {
        display: flex;
        align-items: center;
        border: solid 2px;
        border-radius: 5px;
        height: 25px;
        margin: 0px;
        padding: 0px;
        padding-left: 4px;
        padding-right: 4px;
        color: silver;
        font-weight: normal;
        background-color: black;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .xIcon {
        background-color: black;
        border-radius: 50%;
        width: 20px;
        padding: 4px;
        color: red;
        font-weight: bold;
    }

    .musicDivNAV {
        display: flex;
        flex-direction: column;
        /* border: solid white ; */
        /* position: absolute; */
        text-align: center;
    }
    
    /* ************ Genre ************ */

    #GenreListID {
        display: none;
    }

    .musicLinkDIV {
        /* border: solid yellow 3px; */
        margin-top: -30px;
        margin-bottom: -130px;

    }


    .GenreList {

        position: relative;
        /* position: relative; */
        top: 131px;
        /* left: 230px; */
        width: 155px;
        border: gray solid 1.5px;
        border-radius: 10px;
        font-size: 20px;
        color: white;
        /* background-color: rgb(0, 0, 0, 0.5); */
        background-color: black;
        /* margin-right: 20px; */
        /* : none; */
    }

    .genreLI {
        color: white;
    }

    .genreLIb {
        color: gray
    }

    .genreLI:hover, .genreLIb:hover {
        background-color: gray;
    }

    hr.genreLIbHR {
        border: 1px solid gray;
    }

    li {
        text-align: center;
        width: 100%;
    }

    #HdrTop4MblID {
        display: none;
    }

    #showTopNAV2ID, .HdrTop4Mbl {
        display: none;
    }

    #GenreMobileSelectID {
        display: none;
    }
/*
*******************************************   @  M E D I A   **********************************
*/


    @media only screen and (max-width: 640px) {

        body {
            padding-right: 0px;
            display: flex;
            flex-direction: column;
            align-content: center;
            margin: 0%;
        }

        .audio {
            width: 100px;
            height: 30px;
            border-bottom: solid gray 5px;
            border-radius: 20px;
            margin-top: 30px;
        }

    /* WIDGET DIV */
        .weatherAndLogCont {
            display: block;
        }

        select {
            width: 100%;
            padding: 5px;
            color: silver;
            background-color: #000000;
            margin: 5px;
            margin-bottom: 15px;
        }

        .selectCont {
            width: 90%;              
        }


        .bgImage {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .gcClass {
            width: 100%;
        }
    
    
        .buttons {
            display: flex;
            flex-direction: column; 
            align-items: center; 
            border: none;
            top: 45%;           
            width: 100%;
        }

        button {
            border-width: 2px;
            width: 90%; 
            background-color: ; 
            padding-right: 0px;            
        }

        #images, .if_else, iframe {
            width: 90%;
        }

        .imgMegatron {
            height: auto;
        }

        .NAV_UL {                      
            background-size: ;
            /* background-image: url(https://media.defense.gov/2019/Feb/26/2002093457/1300/700/0/190226-A-TH030-001.JPG); */
        }

        .weatherWidgetBLK {
            width: 100%;
            background-color: #000000;
            z-index: -1;
        }

        .ablLogIn_Cont {
            flex-direction: column;
        }

        /* .header_1 {
            display: flex;
            flex-direction: column;
        } */

        .header_1_Wrapper {
            display: none;
            /* display: flex; */
            flex-direction: column;
        }

        .HdrTop4Mbl {
            display: flex;
            flex-direction: column;
            position: fixed;
            z-index: 5;
            top: 40px;
            left: 0px;
            overflow: scroll;
            width: 200px;
            height: 100%;
            background-color: black;
        }

        #showTopNAV2ID {
            display: block;
            position: fixed;
            color: silver;
            z-index: 20;
            top: 10px;
            left: 10px;
            width: 100px;
            background-color: black;
            border: solid silver 2px;
        }
        
        .showTopNAVBtn {

            background-color: #0066ff;
            height: 50px;
            width: 50px;
            margin-bottom: 100px;
            border: solid silver 2px;
        }
    
}   /*  -------------------------------------------    @media  CLOSE    ----------------------------------------------------------------*/




@media only screen and (max-width: 600px) {


    body {
        padding-right: 0px;
        margin-right: auto;
        margin-left: auto;
    }

    .randVidIcon {
        padding-top: 1px;
        /* border: solid red; */
    }

    .D_LGHT_DwnTwn {
        top: 100px;
        border-radius: 0px;
        /* border: 0px; */

    }

    .badBoys, video, iframe {
        width: 90%;
    }




}