﻿.mobileonly {display:none;}

@media only screen and (max-width: 1024px) {


    #searchmodilediv {
        background-color: #424245;
    }

    #searchprodduct_input_header2 {
        width: 87%;
        background-color: #6C6C71;
        color: #BCBEC0;
        border: solid 1px #6C6C71;
        margin: 10px;
        margin-top: 12px;
        padding: 8px;
    }

    #searchbtn {
        padding-left: 5%;
        width: 4%;
    }

    .fa-home {
        display: none !important;
    }

    .fa-search {
        display: none;
    }

    #search {
        display: none;
    }

    #nav {
        width: 300px;
        height: auto;
        background: #4c8dce;
        position: absolute;
        left: -300px;
        top: 0;
        -webkit-transition: .5s ease all;
        -moz-transition: .5s ease all;
        -o-transition: .5s ease all;
        transition: .5s ease all;
        /* By default, rotate the menu 90deg inwards */
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -ms-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }


    #container.display-nav #canvas {
        -webkit-transform: translateX(300px);
        -moz-transform: translateX(300px);
        -ms-transform: translateX(300px);
        -o-transform: translateX(300px);
        transform: translateX(300px);
    }

    /* transition the menu with perspective on "show-nav" */
    #container.display-nav #nav {
        -webkit-transform-origin: 100% 50%;
        -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transform: perspective(600px) rotateY(0deg);
        -moz-transform: perspective(600px) rotateY(0deg);
        -ms-transform: perspective(600px) rotateY(0deg);
        -o-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
    }

    #toggle {
        list-style: none;
        display: inline-block;
        width: 300px;
    }

        #toggle div {
            display: block;
            width: 300px;
            float: left;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        #toggle div:first-child {
            border-bottom:solid 1px #fff;
        }

        #toggle ul li {                             /**********************submenu style, preventing double underline**********/
            border-bottom:none !important;
        }

        #toggle ul li a {                           /**********************submenu style, text/link color***************************/
            padding-top: 1.6%;
            width: 300px;
            background-color:#0071cf;
            color:#ffffff;
            border-bottom:solid 1px #4c8dce;
        }

        #toggle ul li a:hover {                     /***********************submenu style, text/link hover color******************************************/
            background-color:#E6E7E8;
            color:#424245 !important;
        }

        #toggle li a {                              /***********************top level style, text/link color**********************************************/
            display: inline;
            color: #fff !important;
            list-style: circle;
            padding: 0;
            width: 300px;
            margin-left: 1em;
        }

        #toggle li a:hover {                        /************************top level, no submenu items, text/link hover color *************************/
            color: #fff !important;
        }

        #toggle li ul {
            float:left;
            position:relative;
        }

        #toggle ul {
            border:none;
        }

        #toggle li ul li a {
            width: 277px;
            padding-left:15px;
            padding-top:8px;
            padding-bottom:8px;
        }



    span.the-btn {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #container.display-search #searchproducts {
        display: inline-block;
    }

    .mobileonly {display:block;}



}
