/* 
=====================================================================
*   GravyWoo v.1.1 Media Queries
*   12-19-2021
=====================================================================

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

   /* Portfolio Section
   ------------------------------------------------------------------- */
   #portfolio .inside_left { width: 170px; margin-right: 10px; }
   #portfolio .inside_right { width: 170px; margin-left: 20px; }

}



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

   /* Portfolio Section
   ------------------------------------------------------------------- */
   #portfolio .sideblock_left, #portfolio .sideblock_right { display: none; }

}



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

   /* General And Common Styles */
   h1 { font-size: 30px; line-height: 40px; margin-bottom: 25px; }
   h2 { font-size: 23px; line-height: 30px; margin-bottom: 15px; }
   h4 { font-size: 18px; line-height: 22px; }
   h5 { font-size: 15px; line-height: 22px; }
   h6 { font-size: 13px; line-height: 13px; }
   p { font-size: 14px; line-height: 20px; margin: 0 0 30px 0;}

   /* Header Styles
   ------------------------------------------------------------------- */
   header .logo img { height: 75px; }
   header .taglines { max-width: 440px; width: calc(100% - 20% - 200px); }
   header .taglines p { font-size: 12px; line-height: 12px; }
   header .hotline h6 { font-size: 13px; margin-bottom: 3px; }
   header.sticky { height: 70px; }
   header.sticky .logo img { height: 50px; }
   header.sticky .taglines { max-width: 330px; width: 330px; width: calc(100% - 480px); }
   header.sticky .hotline { min-width: 340px; width: 30%; }

   /* nav-wrap */
   #nav-wrap { font: 12px 'montserrat-regular', sans-serif; }

   /* Footer Styles
   ------------------------------------------------------------------- */
   footer .info { padding-right: 15px; }
   footer .right-cols .columns { width: 50% !important; }

   /* Callout Section
   ------------------------------------------------------------------- */
   #callout .button { font: 12px/14px 'montserrat-bold', sans-serif; min-width: 200px; } 
   #callout .text p { font-size: 14px; }

   /* Catalog Section
   ------------------------------------------------------------------- */
   .catalog-tables { margin: 0 auto; }
   #catalog .catalog-tables p { height: auto; font-size: 14px; }

   /* Contacts Section
   ------------------------------------------------------------------- */
   #contacts h1, #contacts .contact-block, #contacts .contacts-content { margin-bottom: 18px; }
   #contacts .contact-block { padding 5px; }
   #contacts .contacts-content table td { font-size: 15px; line-height: 22px; }
   #contacts #embed_form { margin: 5px auto 25px auto; }
}



/* screenwidth less than 800px - mobile/smaller tablets ( W =< 801px )
---------------------------------------------------------------------- */
@media only screen and (max-width: 801px) {

   /* Header Styles
   -------------------------------------------------------------------- */
   header { height: 110px; }
   header .logo { margin-top: 27px; }
   header .taglines p, header .hotline { display: none; }
   header .taglines { max-width: 400px; width: calc(100% - 400px); padding-top: 15px; }
   header .hotline-mobile { display: block; height: 50px; }
   header .hotline-mobile h6, header .hotline i, header .hotline a { display: inline-block; }
   header .hotline-mobile h6 { font-size: 16px; padding-left: 15px; }
   header .hotline-mobile h6 i { color: #009640; }
   header .hotline-mobile h6:hover { color: #009640; }
   header #nav-wrap { width: 190px; float: right; }
   header #nav-wrap ul#nav li { display: block; height: auto; }
   header #nav-wrap ul#nav li a {padding: 0; line-height: 16px; }

   /* Header Sticky Styles
   -------------------------------------------------------------------- */
   header.sticky .taglines, header.sticky .hotline { display: none; }
   header.sticky .hotline-mobile { display: block; height: 43px; }
   header.sticky #nav-wrap { padding-top: 43px; width: auto; float: none; }
   header.sticky #nav-wrap ul#nav li { display: inline; height: auto; }
   header.sticky #nav-wrap ul#nav li a {padding-left: 15px; line-height: 16px; }

   /* Footer Styles
   ------------------------------------------------------------------------ */
   footer .info p { font-size: 11px; line-height: 28px; }

   /* Callout Section
   ----------------------------------------------------------------- */
   #callout h2 { font-size: 20px; }
   #callout .button { font: 11px/14px 'montserrat-bold', sans-serif; }

   /* Catalog Section
   ----------------------------------------------------------------- */
   #catalog .catalog-tables .column { padding: 0px 5px; }

   /* Contacts Section
   ------------------------------------------------------------------- */
   #contacts .contacts-content table td { padding-top: 15px; }

}



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

   /* General And Common Styles */
   h1 { font-size: 25px; line-height: 30px; margin-bottom: 15px; }

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font: 12px 'montserrat-regular', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;  
      color: #515968;
      position: absolute;
      top: 48px;
      right: 0;
   }
   #nav-wrap > a {	   
      text-align: left;
	  border: none;            
      color: #fff;
      font-size: 12px;
      height: 54px;
      line-height: 54px; 
      float: right;     
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      position: relative;
      top: 0px;
      right: 30px;
   }
	#nav-wrap > a:before {
	  font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      content: "\f0c9";
      color: #000;
      margin: 0;
      font-size: 40px;
      line-height: 36px;
      text-align: left;      
      display: block; 
      float: right;     
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 40px 40px 40px 40px;
      background: #fff; 
      height: auto;
      display: none;
      clear: both;
      width: auto; 
      border: 1px solid black;
      position: relative;
      top: -10px;
      right: 40px;  
      -webkit-filter: drop-shadow(1px 1px 3px #000000);
      filter: drop-shadow(1px 1px 3px #000000);
   }
   
   /* 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;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted; 
   }
  
   ul#nav li a {  
      display: block;   
      width: auto;  
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 54px */
      border: none;
      text-shadow: none;

   }  

   /* Header Styles
   -------------------------------------------------------------------- */
   header { height: 100px; }
   header .taglines { max-width: 450px; width: calc(100% - 100px); }
   header .logo { margin-top: 15px; left: 20px; margin-right: 36px; }
   header .hotline-mobile { display: block; height: 40px; }
   header .hotline-mobile h6 { font-size: 15px; padding-left: 15px; }
   header .taglines h6 { font-size: 14px; padding-left: 15px; }
   header #nav-wrap { width: auto; float: right; padding-top: 0px; }

   /* Header Sticky Styles
   -------------------------------------------------------------------- */
   header.sticky { height: 100px; }
   header.sticky .logo { margin-top: 15px; left: 20px; margin-right: 36px; }
   header.sticky .logo img { height: 75px; }
   header.sticky .hotline-mobile { display: block; height: 40px; }
   header.sticky .hotline-mobile h6 { font-size: 15px; padding-left: 15px; }
   header.sticky #nav-wrap { padding-top: 0px; }
   header.sticky #nav-wrap ul#nav li { display: block; }

   /* Footer Styles
   ------------------------------------------------------------------------ */
   footer { text-align: center; }
   footer .info { padding-right: 30px; }
   footer .info p { margin-bottom: 18px; }
   footer h3:before { text-align: center; }
   footer .right-cols {  
      margin: 0 auto ;
      margin-bottom: 30px; 
      text-align: center;
   }
   footer .right-cols .columns {
      float: left;       
      padding: 0 10px;
   }
   footer .right-cols .columns:last-child { 
      clear: none; 
      float: right;
   }   

   /* Go To Top Button */
   #go-top { margin-left: -22px; }
   #go-top a { width: 54px; height: 54px; font-size: 16px; line-height: 54px; }
   #go-top i {margin: 0; font-size: 28px; }

   /* Portfolio Section
   ------------------------------------------------------------------- */
   #portfolio-wrapper .columns { margin-bottom: 36px; }
   #portfolio-wrapper .item-wrap { border-radius: 25px; }
   .portfolio-content h1 { font-size: 24px; } 

   /* DoubleTable Section
   ------------------------------------------------------------------- */
   #doubletable h4 { font-size: 16px; }
   #doubletable p { font-size: 11px; }
   #doubletable .feature { margin-top: 0px; margin-bottom: 0px;}
   #doubletable .three { width: 30% !important; float:left; }
   #doubletable .six { padding-top: 30px !important; }
   #doubletable .nine { width: 70% !important; float: right; }

   /* Callout Section
   ----------------------------------------------------------------- */
   #callout { text-align: center; }
   #callout img { width: 150px; padding-bottom: 15px; }
   #callout .button { font: 10px/14px 'montserrat-bold', sans-serif; }

   /* Catalog Section
   ----------------------------------------------------------------- */
   #catalog h2 { font-size: 30px; }   
   #catalog h6 { height: auto; font-size: 18px; }
   #catalog .catalog-block img:hover { padding: 10px; }
   #catalog .catalog-tables p { height: auto; font-size: 16px; }
   #catalog .catalog-tables { display: block; }
   #catalog .catalog-tables .column { padding: 10px; }
   #catalog .catalog-tables .column:last-child { margin-bottom: 0px; }

   /* Contacts Section
   ------------------------------------------------------------------- */
   #contacts h1 { font-size: 20px;} 
   #contacts h3 { font-size: 18px;}
   #contacts .columns { padding: 30px 10px !important; }
   #contacts .contacts-content table td { font-size: 15px; line-height: 20px; }
   #embed_form { width: 96%; }
   #embed_form .eff_message {height: 160px; }

}



/* screenwidth less than or equal 680px - mobile wide ( W =< 681px )
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 681px) {

   /* Header Styles
   -------------------------------------------------------------------- */
   header .taglines, header .hotline {display: none; }
   header h6 { font-size: 15px; padding-left: 10px; }

   /* Header Sticky Styles
   -------------------------------------------------------------------- */
   header.sticky .taglines, header.sticky .hotline {display: none; }
   header.sticky h6 { font-size: 15px; padding-left: 10px; }

   /* DoubleTable Section
   ------------------------------------------------------------------- */
   #doubletable h4 { font-size: 20px; }
   #doubletable p { font-size: 14px; }

   /* Callout Section
   ----------------------------------------------------------------- */
   #callout h2 { font-size: 22px; }
   #callout .button { font: 14px/16px 'montserrat-bold', sans-serif; }

}



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

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

   /* Header Styles
   -------------------------------------------------------------------- */
   header #nav-wrap { width: 100%; float: none; }
   header .taglines, header .hotline {display: none; }
   header .hotline-mobile { position: absolute; width: 100%; text-align: right; float: right; display: block; padding-right: 40px; top: 0px; }
   header .hotline-mobile h6 { display: inline; padding-left: 20px; }

   /* Header Sticky Styles
   -------------------------------------------------------------------- */
   header.sticky #nav-wrap { width: 100%; float: none; }
   header.sticky .taglines, header.sticky .hotline {display: none; }
   header.sticky .hotline-mobile { position: absolute; width: 100%; text-align: right; float: right; display: block; padding-right: 40px; top: 0px; }
   header.sticky .hotline-mobile h6 { display: inline; padding-left: 20px; }

   /* Footer
   ------------------------------------------------------------------- */
   footer .right-cols .columns { padding: 0 10px; }        

   /* Portfolio Section
   ------------------------------------------------------------------- */
   .portfolio-content h1 { font-size: 22px; } 

   /* Contacts Section
   ------------------------------------------------------------------- */
   #contacts .columns { padding: 30px 10px !important; }
   #contacts .contacts-content { padding-bottom: 10px; }

}



/* screenwidth less than or equal 420px - mobile wide ( W =< 421px )
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 421px) {

   /* Header Styles
   -------------------------------------------------------------------- */
   header .logo { margin-top: 35px; left: 20px; margin-right: 36px; }
   header .logo img { height: 55px; }
   header .hotline-mobile { padding-right: 40px; }

   /* Header Sticky Styles
   -------------------------------------------------------------------- */
   header.sticky .logo { margin-top: 35px; left: 20px; margin-right: 36px; }
   header.sticky .logo img { height: 55px; }
   header.sticky .hotline-mobile { padding-right: 40px; }

}



/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {
   
   #nav-wrap ul#nav { display: block !important; }

}