@media only screen 

and (min-device-width : 200px) 

and (max-device-width : 710px) { /* STYLES GO HERE */







#menu {



    width: 77%!important;

 

}







#logo{



  width: 23%!important;

}





#menu ul li a, #menu ul li {



  font-size: 24px!important;

}





#menu ul li {

   

    padding-right: 11px!important;

    padding-left:11px!important;

   

}



#logo img{



margin-left: 40px!important;

}



.mobiledrop1 {



font-size: 16px!important;



}





} 

 







/* __________________________________________________________  */





 html, body {

            margin:0 !important;

            padding: 0 !important;

            height: 100%;

       

        }





.mobiledrop1 {



font-size: 13.5px!important;



}

        #websiteheader {

         

            height: 85px;

            background-color: white !important;



 



        }



        #Logo {

            float: left;

            

            background: white; /* Old browsers */

            width: 25%;

            position: relative;

            height: 100%;

            display: flex;

    align-items: center;

    justify-content: flex-end;

            }





        #placeholder {



            color: #595959;

            font-size: 35px;

            font-weight: normal;

            font-family:'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;

            text-align: left;

            padding: 17px;

            padding-left: 20px;

            

            float:left;



    

            }











        #Info {

            position: relative;

            float: right;

          /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e9f9+0,c3cedb+100 */

background: white; /* Old browsers */





            padding: 0;

            height: 100%;

            width: 13%;





        }



        #login { 



            text-align: center;

            height: 22px !important;

            width:145px !important;

            font-weight: bold;

            border-radius: 20px;

            border: 1px solid #4dd2ff;

            box-shadow: 0 0 4px #cccccc;

            margin:auto;

            margin-top:15px;

            margin-right:40px;

            padding-bottom:3px;

            background-color: white;

            



        }



        #login:hover { 

            font-weight:bold;

                border-radius: 20px;

                border: 1px solid #4dd2ff;

                box-shadow: 0 0 8px #80dfff;

                cursor: pointer;

                -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;

        }



        #login:hover a{

            color:#1ac6ff;

            -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;

        }



        #login a {display: block;      /* links and some other elemetns are fixed unelss you declare them a block then you can add padding and stuff */

            padding: 5px;

            text-decoration:none !important;

            color: #1e6d82;

            text-overflow:ellipsis;

            overflow:hidden;

            white-space:nowrap;

            width:120px;

            text-align:center;

            margin:auto;

        font-size: 13.5px;

        }



        













        #login2 { 



            text-align: center;

            height: 60px;

            width: 160px;

            font-weight: bold;

            border: solid #51b2c8 2px;

            border-radius: 6px;

            margin: auto;

            padding:auto;

            margin-top:20px;

            background-color: white;



        }



        #login2:hover { 

            background: #51b2c8;   /* use this color for active page #660000 */

                color: white !important;

                

        }



        #login2 a {display: block;      /* links and some other elemetns are fixed unelss you declare them a block then you can add padding and stuff */

            padding-top: 18px;

            padding-bottom:20px;

            text-decoration:none !important;

            color: #51b2c8;

            font-size:18px;



        }





        #login2 a:hover {

            color:white;

        }









        #number {



            height: 38%;

            width:160px;

            font-weight: 600;

            color: black;

            text-align:center;

            margin:auto;

            margin-right:40px;

            padding-top:12px;

            position:static;

            



        }



        #su {

            font-size: 11px;

            font-family:'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;



        }



        







     #websiteheader   p {margin: 0;

            padding: 0;}







            #menu { 

                text-align: center;

height: 100%;

float: right;

width: 75%;

z-index: 999999;



background:white;

    display: flex;

    align-items: center;

    justify-content: center;





            }



          #menu  ul {



font-size: 0;



                list-style-type: none;

                margin: 0;

                padding: 0;

                list-style: none;

                

                background:white;

                overflow:hidden;

               

            }

            #menu ul li {

height: 35px;

                display:inline-block;

                padding-right: 18px;

                padding-left: 18px; 

background:white;



            }





            #menu ul li a {

                font-family:'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;

                display: inline-block;

                text-decoration: none;

                color: #354449;

                padding: 0px auto;

                height: 100%;

                

                line-height:35px;

                font-size: 15px;

                font-weight: 500;

                text-align:center;

                text-overflow:ellipsis;

            overflow:hidden;

            white-space:nowrap;

            margin:auto;

            background:white;

            -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;



           

            }



            #menu ul li a:hover { 



                color: #1ac6ff; 

                -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;

                    

                





            }





            .fad:before {

                content:   "\f0d7";

                color:#007a99;

            }



            li.how {

                display: inline-block;

                  -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

            }



            .how-content {

               margin-left: -20px;

                display:none;

                position:absolute;

                width:270px;

                background-color:white;

                text-overflow:ellipsis;

                border-radius:2px !important;

                border-bottom:2.5px solid #007a99;

                z-index:1000;

                  -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

            }



            .how-content a {

                color: #767676 !important;

                padding: 5px 0px 5px 20px;

                font-size:15px !important;

                text-decoration: none;

                display: block;

                text-align: left !important;

               width: 250px!important;

                float:left;

              

                z-index:1000;

                  -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

            }



            .how-content a:hover 

                {color: #1ac6ff !important;

                  -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

}



            .how:hover .how-content {

                display: block;

                  -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

            }





    .navbar-fixed {

                top: 0;

                z-index: 999999;

                position: fixed;

                width: 100% !important;

                background:white;

                padding-top: 15px !important;

                padding-bottom:15px;

                border-bottom:2px solid #007a99;

        



            }



            .et{



               top:60px!important;

            }



             #menu ul li a.active{



                    color: rgba(88, 134, 183, 0.94);

                   height: 100%;                 

 font-weight: 600;

                

                }



  .customer {  display: block;

              

            width: 100%;

            } 





        .buy:hover {

            color:#29a329 !important;

              -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;



        }







        .soft-link {

            color:#63cad6 !important;



        }



        .soft-link:hover {

            color:#1e62d0 !important;

              -webkit-transition: all .2s ease-in;

    -moz-transition: all .2s ease-in;

    -o-transition: all .2s ease-in;

    transition: all .2s ease-in;

        }



/*footer css here-------------------------------------------------------------------------------------------------------------------------------------------*/



#footer { 

                    bottom: 0px;

                    height: 120px;

                    background: #007a99;



min-width: 100%!important;

                    color: white;

                    font-weight: bold;



                }







 #footerlinks { 

                text-align: center;

height: 70%;

            padding-top: 5px;  

         background: #007a99;

min-width: 100%!important;

                    color: white;

                    font-weight: bold;

z-index: 999999;



            }



           #footerlinks  ul {



font-size: 0;

                font-weight: bold;

                margin: 0;

                padding: 0;

                list-style: none;

               

            }

             #footerlinks ul li {



                display:inline-block;

width: 21%;                

            }





             #footerlinks ul li a {

                font-family: Arial, Verdana;

                display: inline-block;

                text-decoration: none;

                color: white;

                padding: 0px auto;

                width:100%;

                line-height:35px;

                font-size: 15px;

                text-align:center;

           



            }

               



 #footerlinks ul li:hover a { 

                    color: #00324d;   

                }







                #copyright {height:25%;

                    text-align: center;



                }



                .copy{



                    font-size: small;

                }























                

/*----*/