@media only screen and (max-width:1200px)
{
	nav#hornav ul.menu li.parent ul {
      display:block;
      position:static;
      width:100%;
      padding: 0px;
      background:#efefef;
      
      margin:10px 0px;
    }
    
    #logo {
       width: 60%;
      text-align: center;
    }
    
    .mobport {
       display: inline-block;
      width: 15%;
      float: left;
      margin-top: 35px;
    }
    
    .mobport_menu {
     display:block;
      position:fixed;
      top:0px;
      left:-260px;
      z-index:999; 
      height:100%;
      background:#3c4551;
      width:260px;
      padding:20px 0px;
      overflow-y:scroll;
    }
    
    body {
      overflow-x:hidden;
    }
    
    .mobport_menu ul li a, .mobport_menu ul li span {
      padding: 5px 0px;
      color:#fff;
      display:block;
      font-weight:700;
      padding-left: 15px;
    }
    
    .mobport_menu ul li:hover > a, .mobport_menu ul li:hover > span, .mobport_menu ul li.active > a, .mobport_menu ul li.active > span {
      background: #0378ad !important;
    }
    
    .mobport_menu ul li ul li a, .mobport_menu ul li ul li span {
    font-weight:400;
    font-size:13px;
    padding-left: 30px;
    }
    
    .mobport_menu ul li {
      
    margin-left: 0px;
    }
    
    .body {
      position:relative;
    }
    
    #top_detail {
      padding-left: 0px;
      width: 25%;
    }

  .mobport a {
  color: #0378ad;
  text-align: right;
    margin-top: 50px;
    font-weight: 700;
    margin-top: 26px;
  }
  
    
  .menu_container {
    display: none;
  }
    
  .mobport {
    display: block;
  }
    
    #logo,#top_detail {
        
        float: left;
    }
    
    div#logo img {
        max-width:200px;
    }
    
    .mobport_menu_a {
          display:block;
          width:100%;
          text-align:right;
          margin-bottom:10px;
        }
        
        .mobport_menu_a img {
          width:25px;
          margin-right:10px;
        }
    
}


/*************  Note: Design for a width bigger than 960px   ***************/
@media only screen and (max-width: 1650px)  
{ 
   
  
  
}

@media only screen and  (min-width: 1280px) and (max-width: 1659px)
{
   div.body {
      border: 1px solid yellow!important;
    }
    
} 
@media only screen and  (min-width: 1199px) and (max-width: 1279px)
{
    div.body{
      border: 1px solid red!important;
    }
  
  
}  
@media only screen and  (min-width: 1178px) and (max-width: 1200px)
{
     div.body {
      border: 1px solid magenta!important;
    }
     
    
}
 
@media only screen and  (min-width: 1120px) and (max-width: 1177px)
{
    div.body {
      border: 1px solid green!important;
   
}  
@media only screen and  (min-width: 992px) and (max-width: 1119px)
{
    div.body{
      border: 1px solid yellow!important;
    }
   
}  
@media only screen and (min-width: 960px) and (max-width: 991px) 
{
   
    div.body{
      border: 1px solid magenta!important;
    }
   

}

/*************************************/
/*************************************/
/*************************************/

/*******    Note: Design for a width between 800px and 959px       **********/

@media only screen and (min-width: 800px) and (max-width: 959px)
{
	div.body{
      border: 1px solid blue!important;
    }
    
    
	
}

/*************************************/
/*************************************/
/*************************************/
/******       Note: Design for a width between 768px and 799px        ********/
@media only screen and (min-width: 768px) and (max-width: 799px)	
{
   div.body{
      border: 1px solid green!important;
    }
  
	
}


/*************************************/
/*************************************/
/*************************************/

/************   Note: Design for a width between  640px and 767px  ***********/
	
@media only screen and (min-width: 640px) and (max-width: 767px)
{
  body{
    
  }
    div.body{
      border: 1px solid cyan!important;
    }
   
  
  	
}

/*************************************/
/*************************************/
/*************************************/

/* Note: Design for a width between  480px and 639px */
 
@media only screen and (min-width:480px) and (max-width: 639px)
{
	 body{
    
  }
   div.body{
      border: 1px solid red!important;
    }
  

}

/*************************************/
/*************************************/
/*************************************/

/* Note: Design for a width between  480px and 639px */
 
@media only screen and (max-width:479px)
{
	body{
  
  }
   div.body{
      border: 1px solid cyan!important;
    }
  
}