/*
* Supernav V1.0
* Copyright 2014, Farukul Islam Rana
* 10/02/2014
*/


/* Table of Content of This "responsive.css" File
==================================================
  
  1#max-width: 479px  
  2#(min-width:480px) and (max-width: 767px) 
  3#(min-width:768px) and (max-width: 959px) 
  4#(min-width: 960px) and (max-width: 1169px) 



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

@media ( max-width: 479px ) {

/*------------- Basic ------------------*/

  ul.nav2,
  ul.nav2 ul,
  ul.nav2 li > div,
  ul.nav2 > 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.nav2 div.links h3 { padding: 10px; }
  ul.nav2 > li a { padding: 12px 10px; }
  ul.nav2 > li:last-child { float: left; width: 310px; padding-right: 10px; }
  ul.nav2 > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.nav2 li:hover > ul { display: block; position: absolute; z-index: 999999; width: 320px;}
  ul.nav2 > li:nth-last-child(2) > ul ul { left: -200px; }
  ul.nav2 ul { top: 0px; left: 0px; }
  ul.nav2 ul ul { top: 0px; left: 0px; }
  ul.nav2 > li  { border-right: none; }
  ul.nav2 > li:last-child  { border-left: none; }

/*------------------ Resizing Column width -----------------*/

  ul.nav2 .wrapper-column-1, .nav2 .column-1, 
  ul.nav2 .wrapper-column-2, .nav2 .column-2,
  ul.nav2 .wrapper-column-3, .nav2 .column-3,
  ul.nav2 .wrapper-column-4, .nav2 .column-4, 
  ul.nav2 .wrapper-column-5, .nav2 .column-5, 
  ul.nav2 .wrapper-column-6, .nav2 .column-6 {
    width: 320px;
  }

  /* -------------- Sub Mega Menu Positionig -------------- */

  ul.nav2 .links,
  ul.nav2 .gallery, 
  ul.nav2 .blog, 
  ul.nav2 .portfolio, 
  ul.nav2 .about, 
  ul.nav2 .contact {
    left: 0px;
  }

  /* --------------------- Gallery ---------------- */

  ul.nav2 .video-gallery, ul.nav2 .image-gallery { padding: 10px 10px 15px; }
  ul.nav2 .video-gallery iframe { width: 300px; height: 250px; }
  ul.nav2 .image-gallery img { width: 300px; height: 250px; }
  ul.nav2 #contact-form { float: left; padding: 10 10px 15px; }
  ul.nav2 > li:nth-last-child(2) > ul ul { left: 0px; }


  /* -------------- Blog ----------------------- */
  
  ul.nav2 div.article-meta { width: 280px; height: 60px; }
  ul.nav2 .article img { width: 280px; height: 80px; }

  /* ---------------- Portfolio ------------------ */

  ul.nav2 .portfolio-item { padding: 10px 10px 15px; }
  ul.nav2 .portfolio-item img { width: 300px; height: 180px; }

  /*---------------------- About --------------------*/

   ul.nav2 .team-member img { height: 160px; width: 160px; border-radius: 80px;  margin-left: 50px; }

 /*------------------- Contact -------------------*/

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

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

  ul.nav2 #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.nav2 #search input[type="text"]:hover { width: 310px; }
}


/* 2#(min-width:480px) and (max-width: 767px) 
 *
 * iPad and other tablets (portrait) 
============================================= */

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

  ul.nav2,
  ul.nav2 ul,
  ul.nav2 li > div,
  ul.nav2 > 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.nav2 > li a { padding: 12px 20px; }
  ul.nav2 > li:last-child { float: left; width: 470px; padding-right: 10px; }
  ul.nav2 > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.nav2 li:hover > ul { display: block; position: absolute; z-index: 999999; }
  ul.nav2 li:hover > ul { display: block; width: 480px; }
  ul.nav2 > li:nth-last-child(2) > ul ul { left: -180px; }
  ul.nav2 ul, ul.nav2 ul ul { top: 0px; left: 0px; }
  ul.nav2 > li  { border-right: none; }
  ul.nav2 > li:last-child  { border-left: none; }


  /*---------------- Resizing Column Width----------------*/

  ul.nav2 .wrapper-column-1, .nav2 .column-1, 
  ul.nav2 .wrapper-column-2, .nav2 .column-2, 
  ul.nav2 .wrapper-column-3, .nav2 .column-3,
  ul.nav2 .wrapper-column-4, .nav2 .column-4, 
  ul.nav2 .wrapper-column-5, .nav2 .column-5, 
  ul.nav2 .wrapper-column-6, .nav2 .column-6 {
    width: 480px;
  }

  /* ----------------- Sub Mega Menu Positionig ---------------- */

  ul.nav2 .links,
  ul.nav2 .gallery, 
  ul.nav2 .blog, 
  ul.nav2 .portfolio, 
  ul.nav2 .about, 
  ul.nav2 .contact {
    left: 0px;
  }

  /* ----------------Gallery ----------------- */

  ul.nav2 .video-gallery, .nav2 .image-gallery { padding: 10px 20px 15px; }
  ul.nav2 .video-gallery iframe { width: 440px; height: 300px; }
  ul.nav2 .image-gallery img { width: 440px; height: 300px; }

  /* ---------------- Blog ------------------------ */

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

  /* ----------------- Portfolio -------------------- */

  ul.nav2 .portfolio-item { padding: 10px 20px 15px; }
  ul.nav2 .portfolio-item img { width: 440px; height: 250px; }
  ul.nav2 > li:nth-last-child(2) > ul ul { left: 0px; }

  /*----------------- About --------------*/

  ul.nav2 .team-member img { height: 300px; width: 300px; margin-left: 65px; border-radius: 150px; }

  /* ---------------- Contact ----------------------- */

  ul.nav2 #contact-form, ul.nav2 .address { padding: 10px 30px 15px; }
  ul.nav2 form#contact-form input[type="text"] { width: 250px; }
  ul.nav2 form#contact-form textarea { width: 300px; }

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

  ul.nav2 #search input[type="text"] { 
    width: 200px; 
    float: left; 
    padding-left: 20px; 
     text-align: left;
    border-left: none !important;
    -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.nav2 #search input[type="text"]:hover { width: 460px; }


}



/*  3#(min-width:768px) and (max-width: 959px) 
 *
 * Landscape phone to portrait tablet 
============================================== */

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


  ul.nav2 { width: 768px; }
  ul.nav2 > 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.nav2 > li a { padding: 12px 13px; }
  ul.nav2 > li:last-child { float: right; width: 256px; padding: 0px; }
  ul.nav2 > li:hover > div { float: none; display: block; position: absolute; z-index: 999999; }
  ul.nav2 li:hover > ul { display: block; position: absolute; z-index: 999999; }
  ul.nav2 ul > li a { padding: 12px 20px; }
  ul.nav2 > li:nth-last-child(2) > ul ul { left: -150px; }
  ul.nav2 ul ul { top: 0; left: 100px; }
  ul.nav2 > li:nth-last-child(6) > ul ul { left: -181px; }
  ul.nav2 > li:nth-last-child(6) > ul { right: 0; }
  ul.nav2 > li:nth-last-child(6) { border-right: none ;}
  ul.nav2 > li:last-child { border-right: none; }



  /* ----------------- Resizing Column Width ---------------------- */

  ul.nav2 .wrapper-column-1, .nav2 .column-1 { width: 256px; }
  ul.nav2 .wrapper-column-2, .nav2 .column-2 { width: 256px; }
  ul.nav2 .wrapper-column-3, .nav2 .column-3 { width: 384px; }
  ul.nav2 .wrapper-column-4, .nav2 .column-4 { width: 512px; }
  ul.nav2 .wrapper-column-5, .nav2 .column-5 { width: 640px; }
  ul.nav2 .wrapper-column-6, .nav2 .column-6 { width: 768px; }

  /* --------------- Sub Mega Menu Positionig ---------------- */

  ul.nav2 .links { left: -128px; }
  ul.nav2 .gallery { left: -384px; }
  ul.nav2 .blog { left: -256px; }
  ul.nav2 .portfolio { left: 0px; }
  ul.nav2 .about { left: 0px; }
  ul.nav2 .contact { left: 0px; }

  /* -------------- Gallery ----------------- */

  ul.nav2 .video-gallery, .nav2 .image-gallery { padding: 0px 0px 0px 10px; }
  ul.nav2 .video-gallery iframe { width: 230px;  height: 200px; }
  ul.nav2 .image-gallery img { width: 230px;  height: 200px; }
  ul.nav2  #contact-form { float: left;  padding: 0 20px 10px; }


  /* --------------------- Blog ----------------------- */

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

  /*------------------------ About -------------------------*/

  ul.nav2 .team-member img {  height: 200px;  width: 200px;  border-radius: 100px;}

  /* ------------------- "portfolio" responsive Layout  CSS code----------------- */


  ul.nav2 .portfolio-item img { width: 230px; height: 150px; }

  /* ----------------- Contact ----------------------------- */

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

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

  ul.nav2 #search input[type="text"] {
   float: right; 
   margin-right: 0px; 
   width:128px; 
   -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.nav2 #search input[type="text"]:hover { width: 256px; }

}



/*  4#(min-width: 960px) and (max-width: 1169px) 
 *  
 *  Portrait tablet to landscape and desktop ]
============================================= */

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


  /* ------------------- Resizing Column Width --------------------- */

  ul.nav2 .wrapper-column-1, .nav2 .column-1 { width: 160px; }
  ul.nav2 .wrapper-column-2, .nav2 .column-2 { width: 320px; }
  ul.nav2 .wrapper-column-3, .nav2 .column-3 { width: 480px; }
  ul.nav2 .wrapper-column-4, .nav2 .column-4 { width: 640px; }
  ul.nav2 .wrapper-column-5, .nav2 .column-5 { width: 800px; }
  ul.nav2 .wrapper-column-6, .nav2 .column-6 { width: 960px; }

  /* --------------------- Sub Mega Positionig --------------------- */

  ul.nav2 .links { left: 20px; }
  ul.nav2 .gallery { left: -230px; }
  ul.nav2 .blog { left: -150px; }
  ul.nav2 .portfolio { left: -443px; }
  ul.nav2 .about { right: -200px; }
  ul.nav2 .contact { right: 0; }

  /* ---------------- Gallery --------------------- */

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

  /* ----------------- Blog ---------------------------- */

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

  /* ------------------- Portfolio ------------------------- */

  ul.nav2 .portfolio-item { padding: 5px 10px 15px; }
  ul.nav2 .portfolio-item img { width: 139px; height: 110px; }

  /*-------------------- About ------------------------*/
  
  ul.nav2 .team-member img { height: 120px; width: 120px; border-radius: 60px; }

  /* ------------------- Contact ------------------------ */

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

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

  ul.nav2 #search input[type="text"]:hover { width: 130px; }


}