/* 
=====================================================================
*   Woo Media Queries
*   url: styleshout.com
*   05-02-2014
/* ================================================================== */

/* UA 
--------------------------------------------------------------------- */
/* menu toggle */
.tb #u-page-menu{ display:none; }


/* screenwidth less than or equal 1024px
--------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

	#u-page-menu ul{display:none;}
	#nav-wrap{ display:block !important; }

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font: 11px 'montserrat-regular', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;  
      color: #515968;
      position: absolute;
      top: 0;
      right: 0;
   }

   #nav-wrap > a {	   
      text-align: left;
      border: none;
      color: #fff;
      width: 70px;
      height: 70px;
      float: right;     
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      position: relative;
      top: 0px;
	  right: 0;
   }
   
   #toggle-btn{
	  background:url(../images/common/btn-open.png) #4087BB no-repeat center;
}
   .active{
	  background:url(../images/common/btn-close.png) #4087BB no-repeat center !important;
}   
   
	#nav-wrap > a:before {
      color: #fff;
      margin: 0;
      line-height: 50px;
      text-align: left;      
      display: block; 
      float: right;     
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      height: auto;
      display: none;
      clear: both;
   }
   
   /* display toggle buttons */
	.no-js #nav-wrap:not( :target ) > a:first-of-type,
	.no-js #nav-wrap:target > a:last-of-type  {
	   display: block;
	}
	
   .js #nav-wrap a { display: block; }  

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target > ul#nav  {
      display: block;           
   }

   ul#nav li {
      display: block;
      height: auto;
      text-align: left;
	  background:#FFF;
      border-bottom: 1px solid #E6E6E6;
   }

   ul#nav li a {
      display: block;   
      width: auto;  
      margin: 0;
      border: none;
   }  

}

/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {


    /* Hero Section
   ------------------------------------------------------------------ */
   #top { padding-top: 60px; }
  
   /* nav-wrap */
   #nav-wrap { font: 10px 'montserrat-regular', sans-serif; }

   /* Features Section
   ------------------------------------------------------------------- */
   #features .right { padding-left: 18px; }
   #features .left { padding-right: 18px; }
   #features h3 { margin-bottom: 6px; } 

}


/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

	/* customize */
	#menu-btn{
		display:none;
	}


   /* Hero Section
   -------------------------------------------------------------------- */
   #top { padding-top: 48px; }


   /* Features Section
   --------------------------------------------------------------------- */   

   #features .right {
      padding-left: 30px;
      float: none;
   }
   #features .left {
      padding-right: 30px;
      float: none;
   }
   #features h3 { text-align: center; }  

   
   /* footer
   ------------------------------------------------------------------------ */
   footer { text-align: center; }
   footer .info { padding-right: 30px; }
   footer .info p { margin-bottom: 18px; }
   footer h3:before { text-align: center; }
   footer .right-cols {       
      width: 90% !important;
      margin: 0 auto ;
      margin-bottom: 42px; 
      text-align: center;
   }
   footer .right-cols .columns {
      float: left;       
      padding: 0 30px;    
   }
   footer .right-cols .columns:last-child { 
      clear: both; 
      float: left;
   }   
   footer .copyright {
      padding: 20px 20px;
	}
}
@media only screen and (min-width: 768px) {
   
	#nav-wrap ul#nav li{
		width:100%;
	}
	footer .copyright {
   		padding: 40px 20px;
	}
}


/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap { width: 100%; }
   #nav-wrap ul#nav { 
      width: 100%;
      float: none;
      right: 0;             
   }

   /* Hero Section
   -------------------------------------------------------------------- */
   #top { padding-top: 42px; }

}