/*  1#max-width: 479px  
 *
 * iPhone and other smartphones (portrait & landscape) 
=================================================== */

@media ( max-width: 479px ) {

  ul.menu,
  ul.menu ul,
  ul.menu li > div,
  ul.menu > li { 
    width: 320px;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }  
  ul.menu div.links h3 { padding: 10px; }
  ul.menu > li a { padding: 12px 10px; }
  ul.menu > li:last-child { float: left; width: 310px; padding-right: 10px; }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; width: 320px;}
  ul.menu > li:nth-last-child(2) > ul ul { left: -200px; }
  ul.menu ul { top: 0px; left: 0px; }
  ul.menu ul ul { top: 0px; left: 0px; }
  ul.menu > li  { border-right: none; }
  ul.menu > li:last-child  { border-left: none; }
 

/*===============================
 Resizing Column width =================================== */

  ul.menu .dropdown-col-1, .menu .col-1, 
  ul.menu .dropdown-col-2, .menu .col-2,
  ul.menu .dropdown-col-3, .menu .col-3,
  ul.menu .dropdown-col-4, .menu .col-4, 
  ul.menu .dropdown-col-5, .menu .col-5, 
  ul.menu .dropdown-col-6, .menu .col-6 {
    width: 320px;
  }

/*===============================
 Sub Mega Menu Positionig =================================== */

  ul.menu .gallery, 
  ul.menu .blog, 
  ul.menu .portfolio, 
  ul.menu .about, 
  ul.menu .contact,
  ul.menu .team,
  ul.menu .client {
    left: 0px;
  }
  
  .menu .team { left:-0px; }
.menu .client { left:-0px; }

  /*===============================
  Jnix Gallery =================================== */

  ul.menu .video-gallery, ul.menu .image-gallery { padding: 10px 10px 15px; }
  ul.menu .video-gallery iframe { width: 300px; height: 250px; }
  ul.menu .image-gallery img { width: 300px; height: 250px; }
  ul.menu #jnix-contact-form { float: left; padding: 10 10px 15px; }
  ul.menu > li:nth-last-child(2) > ul ul { left: 0px; }
  ul.menu div.article-meta { width: 280px; height: 60px; }
  ul.menu .article img { width: 280px; height: 80px; }

  ul.menu .p-item { padding: 10px 10px 15px; }
  ul.menu .p-item img { width: 300px; height: 180px; }
  ul.menu .my-team img { height: 160px; width: 160px; border-radius: 80px;  margin-left: 50px; }

 /*=============================== Jnix Contact Form =================================== */

  ul.menu form#jnix-contact-form label { display: none; }
  ul.menu form#jnix-contact-form input[type="text"] { width: 260px; }
  ul.menu form#jnix-contact-form textarea { width: 260px; } 

  /*===============================
 - Search ----=================================== */

  ul.menu #search input[type="text"] { 
    width: 150px; 
    float: left; 
    padding-left: 10px;   
    border-left: none !important; 
    text-align: left;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }
  ul.menu #search input[type="text"]:hover { width: 310px; }
}


/* iPad and other tablets  
============================================= */

@media (min-width:480px) and (max-width: 767px) {

  ul.menu,
  ul.menu ul,
  ul.menu li > div,
  ul.menu > li  { 
    width: 480px;
    -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }  
  ul.menu > li a { padding: 12px 20px; }
  ul.menu > li:last-child { float: left; width: 470px; padding-right: 10px; }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; width: 480px; }
  ul.menu > li:nth-last-child(2) > ul ul { left: -180px; }
  ul.menu ul, ul.menu ul ul { top: 0px; left: 0px; }
  ul.menu > li  { border-right: none; }
  ul.menu > li:last-child  { border-left: none; }


/*=============================== Resizing Column Width=================================== */

  ul.menu .dropdown-col-1, .menu .col-1, 
  ul.menu .dropdown-col-2, .menu .col-2, 
  ul.menu .dropdown-col-3, .menu .col-3,
  ul.menu .dropdown-col-4, .menu .col-4, 
  ul.menu .dropdown-col-5, .menu .col-5, 
  ul.menu .dropdown-col-6, .menu .col-6 {
    width: 480px;
  }

/*=============================== Positionig of sub menu =================================== */

  ul.menu .space_2col,
  ul.menu .space_3col, 
  ul.menu .space_4col, 
  ul.menu .space_5col, 
  ul.menu .space_6col, 
  ul.menu .space_7col,
  ul.menu .links,
  ul.menu .gallery, 
  ul.menu .blog, 
  ul.menu .portfolio, 
  ul.menu .about, 
  ul.menu .contact,
  ul.menu .team, 
  ul.menu .client {
    left: 0px;
  }
  ul.menu .video-gallery, .menu .image-gallery { padding: 10px 20px 15px; }
  ul.menu .video-gallery iframe { width: 440px; height: 300px; }
  ul.menu .image-gallery img { width: 440px; height: 300px; }
  
  /*=============================== Client =================================== */

  .c-logo img{ width: 440px;height:auto;margin:10px 20px 10px;}

  /*=============================== Blog =================================== */

  ul.menu div.article-meta { width: 440px; height: 30px; }
  ul.menu .article img { width: 440px; height: 80px; }

  /*=============================== Portfolio =================================== */

  ul.menu .p-item { padding: 10px 20px 15px; }
  ul.menu .p-item img { width: 440px; height: 250px; }
  ul.menu > li:nth-last-child(2) > ul ul { left: 0px; }
  ul.menu .my-team img { height: 300px; width: 300px; margin-left: 65px; border-radius: 150px; }

   /*=============================== Jnix Contact Form =================================== */

  ul.menu #jnix-contact-form, ul.menu .address { padding: 10px 30px 15px; }
  ul.menu form#jnix-contact-form input[type="text"] { width: 250px; }
  ul.menu form#jnix-contact-form textarea { width: 300px; }
  ul.menu .right { float: left !important; }

}



/*Landscape phone to portrait tablet 
============================================== */

@media (min-width:768px) and (max-width: 959px) {
 


  ul.menu { width: 768px; }
  ul.menu > li  { 
  width: 127px; 
  -webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2);
  }
  ul.menu > li a { padding: 12px 13px; }
  .right{ float: right; padding: 0px; }
  ul.menu > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.menu li:hover > ul { display: block; position: absolute; z-index: 999999; }
  ul.menu ul > li a { padding: 12px 20px; }
  ul.menu > li:nth-last-child(2) > ul ul { left: -150px; }
  ul.menu ul ul { top: 0; left: 100px; }
  ul.menu > li:nth-child(6) > ul ul { left: -181px; }
  ul.menu > li:nth-child(6) > ul { right: 0; }
  ul.menu > li:nth-child(6) { border-right: none ;}
  ul.menu .right { padding-left:10px; }



   /*=============================== Column Width =================================== */

  ul.menu .dropdown-col-1, .menu .col-1 { width: 256px; }
  ul.menu .dropdown-col-2, .menu .col-2 { width: 256px; }
  ul.menu .dropdown-col-3, .menu .col-3 { width: 384px; }
  ul.menu .dropdown-col-4, .menu .col-4 { width: 512px; }
  ul.menu .dropdown-col-5, .menu .col-5 { width: 640px; }
  ul.menu .dropdown-col-6, .menu .col-6 { width: 768px; }

   /*=============================== Positionig of Sub Mega Menu  =================================== */

  ul.menu .links { left: -128px; }
  ul.menu .gallery { left: -384px; }
  ul.menu .blog { left: -256px; }
  ul.menu .portfolio { left: 0px; }
  ul.menu .about { left: 0px; }
  ul.menu .contact { right: 0px; }
  ul.menu .space_2col { left: -128px; }
  ul.menu .space_3col { right: 0px; }
  ul.menu .space_4col { left: -383px; }
  ul.menu .space_5col { left: -511px; }
  ul.menu .team { left: 0; }
  ul.menu .client { left: 0; }
  ul.menu .video-gallery, .menu .image-gallery { padding: 0px 0px 0px 10px; }
  ul.menu .video-gallery iframe { width: 230px;  height: 200px; }
  ul.menu .image-gallery img { width: 230px;  height: 200px; }
  ul.menu  #jnix-contact-form { float: left;  padding: 0 20px 10px; }


  /*=============================== Blog =================================== */

  ul.menu div.article-meta { width: 470px; height: 30px; }
  ul.menu .article img { width: 470px; height: 80px; }
  ul.menu .my-team img {  height: 200px;  width: 200px;  border-radius: 100px;}
  ul.menu .p-item img { width: 230px; height: 150px; }

  /*=============================== Jnix Contact Form =================================== */

  ul.menu #jnix-contact-form, ul.menu .address { padding: 10px 10px 15px;}
  ul.menu form#jnix-contact-form label {  display: none; }
  ul.menu form#jnix-contact-form input[type="text"] { width: 220px;}
  ul.menu form#jnix-contact-form textarea { width: 220px;} 
  ul.menu .right { margin-left:-10px; }

}



/*Portrait tablet to landscape and desktop 
============================================= */

@media (min-width: 960px) and (max-width: 1169px) {
 
  ul.menu { width: 960px; }
  ul.menu > li a { padding: 12px 13px; }
  ul.menu ul > li a {  padding: 12px 20px; }
  ul.menu > li:last-child { border-right: none; }


  /*=============================== Resizing Column Width =================================== */

  ul.menu .dropdown-col-1, .menu .col-1 { width: 160px; }
  ul.menu .dropdown-col-2, .menu .col-2 { width: 320px; }
  ul.menu .dropdown-col-3, .menu .col-3 { width: 480px; }
  ul.menu .dropdown-col-4, .menu .col-4 { width: 640px; }
  ul.menu .dropdown-col-5, .menu .col-5 { width: 800px; }
  ul.menu .dropdown-col-6, .menu .col-6 { width: 960px; }

  /*=============================== Sub Mega Positionig =================================== */

  ul.menu .links { left: -68px; }
  ul.menu .gallery { left: -230px; }
  ul.menu .blog { left: -150px; }
  ul.menu .portfolio { left: -443px; }
  ul.menu .about { right: -200px; }
  ul.menu .contact { right: 0; }
  ul.menu .space_2col {left: -66px;}
  ul.menu .space_3col {left: -160px;}
  ul.menu .space_4col {left: -236px;}
  ul.menu .space_5col {left: -317px;}
  ul.menu .space_6col {left: -473px;}
  ul.menu .space_7col {left: -500px;}
  ul.menu .space_10col {right:0px;}
  

  /*=============================== Gallery =================================== */

  ul.menu .video-gallery, .menu .image-gallery { padding: 5px 11px 15px; }
  ul.menu .video-gallery iframe { width: 286px; height: 200px; }
  ul.menu .image-gallery img { width: 286px; height: 200px; }

  ul.menu div.article-meta { width: 600px; height: 30px; }
  ul.menu .article img { width: 600px; height: 80px; }

  ul.menu .p-item { padding: 5px 10px 15px; }
  ul.menu .p-item img { width: 139px; height: 110px; }
  
  ul.menu .my-team img { height: 120px; width: 120px; border-radius: 60px; }

  /*=============================== Jnix Contact Form =================================== */

  ul.menu #jnix-contact-form, ul.menu .address { padding: 10px 20px 15px; }
  ul.menu form#jnix-contact-form label { display: none;}
  ul.menu form#jnix-contact-form input[type="text"] { width: 260px; }
  ul.menu form#jnix-contact-form textarea { width: 260px; } 

  .c-logo img{ width:130px;height:auto;margin:10px 20px 10px;}

}