.mobile-only { display:none; }


/* Switch to Responsive mode when the screen is narrower than the main container (900px) */
@media (max-width: 899px) {

  .mobile-only { display: block; }
  .mobile-hidden { display:none !important; }
  
  #wrapper {
    margin:0;
    width: 100%;
  }

  #header {
    height: auto;
    background-image: none;
  }

  #header .umai_logo {
    position: static;
    width: 100%;
    margin:0;
    text-align:center;
    height: auto;
    background-position: center bottom !important;
	padding-top:35px;
  }

  #header .header_links {
    width: 100%;
    float:none;
    margin:0;
    box-sizing: border-box;
    padding: 8px 0 0 8px;
    text-align:left;
	position:absolute;
	top:0;
	text-align:center
  }
  
  #header .header_links img{
	  max-height:25px;
	  width:auto;
  }

  #header .header_links div.translate {
    margin-right: 10px;
  }

  #footer {
    background-image:none;
    height: auto;
    padding-bottom: 15px;
  }

  #footer ul { padding-top: 15px; } 
  #footer li {
    display:block;
    text-align:center;
    padding: 10px;
  }

  #left_nav {
    width: 100%;
    display:none;
    box-sizing: border-box;
    padding: 0 15px;
  }

  #left_nav ul li { padding: 3px 0 3px 0;}
    
  .responsive_nav_toggle a { 
    padding:10px 25px; 
    margin:10px 10px; 
    display:block; 
    background-color: #85796D;
    border: 1px solid #B5ABA2;
    color:#FFFFFF;
    font-weight:bold;
    border-radius: 4px 4px 4px 4px;
    font-style: normal;
	font-size:20px;  
	
	background: #38040a url('../_images/heading_responsive.png') right top no-repeat;
	border:none;
  }

  .responsive_nav_toggle a:hover{ 
    /* background-color: #a99f95;
    border: 1px solid #B5ABA2; */
    color:#FFFFFF;
  }


  #body_structure {
    background-image:none;
  }
  
  .#body_main h1{
	  font-size:20px;
  }

  .shop #body_main,
  #body_main, 
  #left_half,
  #right_half {
    float:none;
    clear:both;
    min-height: 100px;
    width: 100% !important;
    margin:0;
    padding: 0;
    overflow:visible;
    background-image:none;
  }

  .shop #body_main .shop_nav img{
	  width:75px;
  }

  #left_half { 
    padding-bottom: 30px;
  }


  #body_main {
    box-sizing: border-box;
    padding: 10px 10px 15px 10px !important;
    background-color: #92867A;
  }

  #body_main img {
    max-width: 100%;
  }

  #body_main .blue_button { display: inline-block; } /* on the Tools + Toys page */


  #heading_small,
  #heading_wide {
    width: 100%;
    box-sizing: border-box;
    background: #38040a url('../_images/heading_responsive.png') right top no-repeat;
    font-size: 20px;
    margin: 30px 0 5px 0;
    float:none;
    clear:both;
    border-radius: 4px;
    height: auto;
  }

  .cycle, 
  .cycle img { height: auto; } /* home page top banner */

  #body_main  .banner_image {
    display:block;
    margin: 0 auto 8px auto !important;
  }

  .half,
  .half.right,
  .half p {
    float:none;
    width: 100%;
    margin:0;
    text-align: center !important;
  }

  .half .videos {
    margin-bottom: 30px;
    padding-left: 0 !important;
  }

  .recipe_archive_section {
    border-bottom: solid 1px #c9c3bd !important;
  }


  a.compare_chart {
    display:block;
    text-align: center;
    padding-bottom: 10px;
  }

  .shop_product,
  .three_column {
    width: 90% !important;
    box-sizing: border-box;
    margin: 25px auto 25px auto !important;
    float:none !important;
    display:block;
  }

  .three_column a { display:block; }
  .three_column img { margin-bottom: 5px; }

  .shop_product h1 {
    margin:0 auto 5px auto !important;
    position: static !important;
  }

  .videos .video-single {
    float:none !important;
    margin: 0 auto 0 auto;
  }

  .videos .video-single img { margin-bottom: 5px; }
  
  #contactForm textarea { max-width: 92%; }

  object, 
  embed,
  iframe  {
    max-width: 100%;  /* fixes embedded Youtube videos */
  }


  #fancybox-wrap,
  #fancybox-content {
    max-width: 100% !important;
  }


}  /* END max-width: 899px ===== */



/* === Sealer Comparison Modal Window: === */
/* switch when narrower than the modal's normal width (800px) */
/* reduce padding etc, to make sure all content fits within the modal's fixed 600px height */
@media (max-width: 799px) {
    .wrap { 
      max-width: 100%;
      height: auto;
      padding:0;
      background-image:none;
    }

    .comparison_logo { display:none !important; }

    .table_wrap { padding: 10px 10px; }
    .table_wrap ul { margin: 0 0 15px 0;  padding-left: 10px;}

    .sealers { margin: 0 10px; }
}