/* CSS Document */





    /* ======================================================================== */
    /* ======================================================================== */
    /* ========================= MEDIA QUERIES   ============================== */
    /* ======================================================================== */
    /* ======================================================================== */



    /* ======================================================================== */
    /* =========================   XXX Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 1641px){
      .sidebar{ float:left; max-width:250px; position:absolute; z-index:1000; display:block;}
      .sidebar-content{ float:left; width: 100%; position: relative; z-index:1000; display:block; padding-left:75px; margin-top: 50px;}
      #side-menu{ padding:0 0 0 20px; margin:0; border-left:solid 4px #fff; }
      #side-menu > li{ padding:0 10px 15px 0; position:relative;}
      #side-menu > li:last-child{ padding:0 10px 15px 0; position:relative;}
      #side-menu a { padding:0; font-weight:bold; color:#333;}
      #side-menu a:hover { color:#416fae;}
      #side-menu:hover{ border-left:none; border-left:solid 4px #ebebeb; border-right:none;}

      #side-menu > li > ul {  left: -9999px;   padding: 10px 0px;   position: absolute;   width: 80px; top:-75%; display: block;}
      #side-menu > li > ul > li{ text-align:left; padding-left:8px;}
      #side-menu > li > ul > li a{ color:#FFF; text-decoration:none;}
      #side-menu > li:hover > ul{ left:-110px;}

      #side-menu-content{ padding:0 0 0 20px; margin:0; border-left:solid 4px #fff; }
      #side-menu-content > li{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content > li:last-child{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content a { padding:0; font-weight:bold; color:#333;}
      #side-menu-content a:hover { color:#416fae;}
      #side-menu-content:hover{ border-left:none; border-left:solid 4px #ebebeb; border-right:none;}


      #side-menu-content > li > ul {  left: -9999px;   padding: 10px 0px;   position: absolute;   width: 80px; top:-75%; display: block;}
      #side-menu-content > li > ul > li{ text-align:left; padding-left:8px;}
      #side-menu-content > li > ul > li a{ color:#FFF; text-decoration:none;}
      #side-menu-content > li:hover > ul{ left:-120px;}
      #side-menu-content > li > ul > li > img{ width: 66px; height: 66px;}

      ul.nav{	position:relative; float:right;}
      #side-menu .widget{ position:absolute; right:-10px; left:auto; top:35px; background-color:#416fae; width:4px; height:15px;}
      #side-menu-content .widget{ position:absolute; right:-20px; left:auto; top:35px; background-color:#416fae; width:4px; height:15px;}

      .sidebar-content-mobile{display: none;}
    }

    /* ======================================================================== */
    /* =========================  XX Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 1601px) and (max-width : 1640px) {
      .sidebar{ float:left; max-width:250px; position:absolute; z-index:1000; display:block;}
      .sidebar-content{ float:left; width: 100%; position: relative; z-index:1000; display:block; padding-left:70px; margin-top: 50px;}

      #side-menu-content{ padding:0 0 0 20px; margin:0; border-left:solid 4px #fff; }
      #side-menu-content > li{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content > li:last-child{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content a { padding:0; font-weight:bold; color:#333;}
      #side-menu-content a:hover { color:#416fae;}
      #side-menu-content:hover{ border-left:none; border-left:solid 4px #ebebeb; border-right:none;}


      #side-menu-content > li > ul {  left: -9999px;   padding: 10px 0px;   position: absolute;   width: 80px; top:-75%; display: block;}
      #side-menu-content > li > ul > li{ text-align:left; padding-left:8px;}
      #side-menu-content > li > ul > li a{ color:#FFF; text-decoration:none;}
      #side-menu-content > li:hover > ul{ left:-110px;}
      #side-menu-content > li > ul > li > img{ width: 66px; height: 66px;}

      ul.nav{	position:relative; float:right;}
      #side-menu-content .widget{ position:absolute; right:-20px; left:auto; top:35px; background-color:#416fae; width:4px; height:15px;}

      .sidebar-content-mobile{display: none;}
    }

    /* ======================================================================== */
    /* =========================   Largest    ========================== */
    /* ======================================================================== */
    @media  (min-width : 1201px) and (max-width : 1600px) {

      .sidebar{ float:left; max-width:550px; position:absolute; z-index:1000; display:block;}
      .sidebar-content{ float:left; width: 100%; position: relative; z-index:1000; display:block; padding-left:10px; margin-top: 50px;}
      .sidebar-right{max-width:250px; z-index:1000; display:block;}



      .nav-content{margin: 0 0 0 60px;}
      #side-menu-content{ padding:0 0 0 10px; margin:0; border-left:solid 4px #fff; font-size: 12px;}
      #side-menu-content > li{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content > li:last-child{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content a { padding:0; font-weight:bold; color:#333;}
      #side-menu-content a:hover { color:#416fae;}
      #side-menu-content:hover{ border-left:none; border-left:solid 4px #ebebeb; border-right:none;}


      #side-menu-content > li > ul {  left: -9999px;   padding: 10px 0px;   position: absolute;   width: 80px; top:-35px; display: block;}
      #side-menu-content > li > ul > li{ text-align:left; padding-left:8px;}
      #side-menu-content > li > ul > li a{ color:#FFF; text-decoration:none;}
      #side-menu-content > li:hover > ul{ left:-110px;}
      ul.nav{	position:relative; float:right;}
      #side-menu-content > li > ul > li > img{ width: 66px; height: 66px;}


      #side-menu-content .widget{ position:absolute; right:-20px; top:40px; background-color:#416fae; width:4px; height:15px;}

      .sidebar-content-mobile{display: none;}
    }
    /* ======================================================================== */
    /* ========================= Second Largest    =========================== */
    /* ======================================================================== */

    @media (min-width : 993px) and (max-width : 1200px) {
      .sidebar{ float:left; max-width:550px; position:absolute; z-index:1000; display:block;}
      .sidebar-content{ float:left; width:100%; position:relative; z-index:1000; display:block;}
      .sidebar-right{max-width:250px; z-index:1000; display:block;}

      .nav-content{margin: 0 0 0 0 ;}
      #side-menu-content{ padding:0 0 0 10px; margin:0; border-left:none; font-size: 14px;}
      #side-menu-content > li{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content > li:last-child{ padding:0 10px 15px 0; position:relative;}
      #side-menu-content a { padding:0; font-weight:bold; color:#333;}
      #side-menu-content a:hover { color:#416fae;}
      #side-menu-content:hover{ border-left:none;  border-right:none;}


      #side-menu-content > li > ul {display: none}
      #side-menu-content > li > ul > li{ text-align:left; padding-left:8px;}
      #side-menu-content > li > ul > li a{ color:#FFF; text-decoration:none;}
      #side-menu-content > li:hover > ul{ left:-80px;}
      ul.nav{	position:relative; float:right;}
      #side-menu-content > li > ul > li > img{ width: 40px; height: 40px;}

      #side-menu-content .widget{ position:absolute; right:-10px; top:40px; background-color:#416fae; width:4px; height:15px;}

      .sidebar-content{margin-top: 50px;}
      .sidebar-content-mobile{display: none;}
    }

    /* ======================================================================== */
    /* =========================   Second  Smallest  ========================== */
    /* ======================================================================== */
    @media (min-width : 769px) and (max-width : 992px) {
      .sidebar{ display:none;}
      .sidebar-content{ display:none;}
      .sidebar-content-mobile{display: block;}
      .sidebar-content-mobile a{color:#337ab7; font-size: 16px;}
      .sidebar-content{margin-top: 0px;}
      .sidebar-content-mobile li {list-style-type: none; vertical-align: top; display: inline-flex; padding: 5px 20px; font-size: 14px;}
      .sidebar-content-mobile ul { padding: 0; text-align: center;}
    }

    /* ======================================================================== */
    /* =========================        Smallest    =========================== */
    /* ======================================================================== */
    @media (min-width : 421px) and (max-width : 768px) {
      .sidebar{ display:none;}
      .sidebar-content{ display:none;}
      .sidebar-content-mobile{display: block;}
      .sidebar-content{margin-top: 0px;}
      .sidebar-content-mobile li {list-style-type: none; vertical-align: top; display: inline-flex; padding: 5px 20px; font-size: 14px;}
      .sidebar-content-mobile ul { padding: 0; text-align: center;}

    }

    /* ======================================================================== */
    /* =========================  XXx   Smallest    =========================== */
    /* ======================================================================== */
    @media (max-width : 420px) {
      .sidebar{ display:none;}
      .sidebar-content{ display:none;}
      .sidebar-content-mobile{display: block;}
      .sidebar-content{margin-top: 0px;}
      .sidebar-content-mobile li {list-style-type: none; vertical-align: top; display: inline-flex; padding: 5px 20px; font-size: 14px;}
      .sidebar-content-mobile ul { padding: 0; text-align: center;}
    }