/* ----------- LAPTOP ----------- */
/* ----------- Non-Retina Screens ----------- */


/*Max width 800px*/
@media screen 
  and (max-device-width: 800px){ 
    .leaflet-top {
        top: 8%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 30px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 35px;
        height: 35px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 35px 35px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 16px;
        color: white;
        line-height: 18px;
        margin: 2px;
    }
    .icons-font-active{
        font-size: 16px;
        color: orange;
        line-height: 18px;
        margin: 2px;
    }

    .custom-bar{
        top: 120px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 38px;
        height: 38px;
        line-height: 38px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 38px;
        height: 38px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1000%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 11px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/*Min width 800px*/
@media screen 
  and (min-device-width: 800px){ 
    .leaflet-top {
        top: 8%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 30px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 35px;
        height: 35px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 35px 35px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 16px;
        color: white;
        line-height: 18px;
        margin: 2px;
    }
    .icons-font-active{
        font-size: 16px;
        color: orange;
        line-height: 18px;
        margin: 2px;
    }

    .custom-bar{
        top: 120px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: rgba(68,65,65,0.60);
        border-bottom: 1px solid #ccc;
        width: 38px;
        height: 38px;
        line-height: 38px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 38px;
        height: 38px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1000%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 11px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- iPhone 4 and 4S ----------- */



/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

    .leaflet-top {
        top: 7%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 60px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 100px;
        height: 100px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 70px 70px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 50px;
        color: white;
        line-height: 50px;
        margin: 7px;
    }
    .icons-font-active{
        font-size: 50px;
        color: orange;
        line-height: 50px;
        margin: 7px;
    }

    .custom-bar{
        top: 260px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 50px;
        height: 50px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1000%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -50px;
        background: transparent;
        font-size: 28px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 50px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  .leaflet-top {
        top: 3%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 50px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 50px;
        height: 50px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 50px 50px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 20px;
        color: white;
        line-height: 25px;
        margin: 3px;
    }
    .icons-font-active{
        font-size: 20px;
        color: orange;
        line-height: 25px;
        margin: 3px;
    }

    .custom-bar{
        top: 120px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 100px;
        height: 100px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1200%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 14px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .leaflet-top {
        top: 5px;
    }

    .leaflet-touch .leaflet-bar a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 40px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 40px 40px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 20px;
        color: white;
        line-height: 25px;
        /*margin: 2px;*/
    }
    .icons-font-active{
        font-size: 20px;
        color: orange;
        line-height: 25px;
        /*margin: 2px;*/
    }

    .custom-bar{
        top: 100px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 100px;
        height: 100px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1200%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 14px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
    .leaflet-top {
        top: 5px;
    }

    .leaflet-touch .leaflet-bar a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 40px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 40px 40px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 20px;
        color: white;
        line-height: 25px;
        /*margin: 2px;*/
    }
    .icons-font-active{
        font-size: 20px;
        color: orange;
        line-height: 25px;
        /*margin: 2px;*/
    }

    .custom-bar{
        top: 100px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 100px;
        height: 100px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1200%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 14px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .leaflet-top {
        top: 5px;
    }

    .leaflet-touch .leaflet-bar a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 40px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 40px 40px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 20px;
        color: white;
        line-height: 25px;
        /*margin: 2px;*/
    }
    .icons-font-active{
        font-size: 20px;
        color: orange;
        line-height: 25px;
        /*margin: 2px;*/
    }

    .custom-bar{
        top: 100px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 100px;
        height: 100px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1200%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 14px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- iPhone X ----------- */
/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
    .leaflet-top {
        top: 0;
    }

    .leaflet-touch .leaflet-bar a {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 40px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 40px;
        height: 40px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 40px 40px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 16px;
        color: white;
        line-height: 18px;
        margin: 2px;
    }
    .icons-font-active{
        font-size: 16px;
        color: orange;
        line-height: 18px;
        margin: 2px;
    }

    .custom-bar{
        top: 90px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 38px;
        height: 38px;
        line-height: 38px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 38px;
        height: 38px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1000%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -25px;
        background: transparent;
        font-size: 11px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 25px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- Galaxy S3 ----------- */
/*No need css*/

/* ----------- Galaxy S4, S5 and Note 3 ----------- */
/* Landscape */
/*No need css*/

/* ----------- Galaxy S6 ----------- */
/*No need css*/

/* ----------- Google Pixel ----------- */
/*No need css*/

/* ----------- HTC One ----------- */
/*No need css*/

/* ----------- Windows Phone ----------- */
/* Portrait */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px)  
  and (orientation: portrait) {
    .leaflet-top {
        top: 2%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 90px;
        height: 90px;
        line-height: 90px;
        font-size: 60px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 90px;
        height: 90px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 90px 90px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 54px;
        color: white;
        line-height: 70px;
        margin: 3px;
    }
    .icons-font-active{
        font-size: 54px;
        color: orange;
        line-height: 70px;
        margin: 3px;
    }

    .custom-bar{
        top: 230px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 100px;
        height: 100px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1000%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -100px;
        background: transparent;
        font-size: 32px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 100px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .leaflet-top {
        top: 2%;
    }

    .leaflet-touch .leaflet-bar a {
        width: 65px;
        height: 65px;
        line-height: 65px;
        font-size: 48px;
    }

    .leaflet-touch .leaflet-control-layers-toggle {
        width: 65px;
        height: 65px;
    }

    .leaflet-retina .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        background-size: 70px 70px;
    }

    .menu-text {
        height: 22px;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
        position: relative;
        text-shadow: 0 0 4px black;
        right: 100%;
        top: -120%;
        line-height: 1.4;
        padding-left: 11px;
        padding-right: 11px;
        margin-top: 1.5px;
        /*right: 22px;*/
        margin-top: -20%;
        border-radius: 1.2em;
        color: white;
        text-align: right;
        z-index: 9999;
    }

    .icons-font {
        font-size: 41px;
        color: white;
        line-height: 60px;
        /*margin: 7px;*/
    }
    .icons-font-active{
        font-size: 41px;
        color: orange;
        line-height: 60px;
        /*margin: 7px;*/
    }

    .custom-bar{
        top: 230px;
    }

    .leaflet-control-layers-selector {
        margin-top: 2px;
        position: relative;
        top: 1px;
        display: none;
        }
    .leaflet-control-layers-expanded {
        padding: 6px 10px 6px 6px;
        color: #333;
        background: rgba(68,65,65,0.60);
        }


    .leaflet-bar a,
    .leaflet-bar a:hover {
        background-color: #000000;
        /*background-color: rgba(68,65,65,0.60);*/
        border-bottom: 1px solid #ccc;
        width: 52px;
        height: 52px;
        line-height: 52px;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        }

    .leaflet-bar a:hover {
        /*background-color: rgba(25,20,20,0.84);*/ background-color:#000000;
        color: white;
        }

    .leaflet-bar a.leaflet-disabled {
        cursor: default;
        background-color: rgba(25,20,20,0.84);
        color: grey;
    }


    .leaflet-control-layers {
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        background-color: rgba(68,65,65,0.60);
        border-radius: 5px;
    }

    .leaflet-control-layers-toggle {
        background-image: url(//resource.goweatherradar.com/dist/images/layers.png);
        width: 65px;
        height: 65px;
    }

    /*CSS TOOL TIP*/
    .tooltiptext {
        display: block;
        min-width: 1200%;
        /* background-color: black; */
        color: #fff;
        text-align: right;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        padding-right: 12px;
        right: 115%;
        margin-top: -60px;
        background: transparent;
        font-size: 28px;
        font-family: roboto, sans-serif;
        font-weight: 300;
        line-height: 60px;
    }


    .tooltiptext:hover {
        background: rgba(68,65,65,0.60);
        text-decoration: underline; 
    }

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/*No need css*/

/* ----------- iPad Pro 10.5" ----------- */
/*No need css*/

/* ----------- Galaxy Tab 2 ----------- */
/*No need css*/

/* ----------- Galaxy Tab S ----------- */
/*NO NEED CSS*/

/* ----------- Nexus 7 ----------- */
/*NO NEED CSS*/


/* ----------- Kindle Fire HD 7" ----------- */
/*NO NEED CSS*/

/* ----------- Kindle Fire HD 8.9" ----------- */
/*NO NEED CSS*/

/* ----------- Nexus 9 ----------- */
/*NO NEED CSS*/

.fa, .fas{
    cursor: pointer;
}