/**
* @author    JNConsult.nicoara.ch http://JNConsult.nicoara.ch
* @copyright Copyright (C) 2008 - 2011 JoomlaShine.com. All rights reserved.
* @license   JoomlaShine.com Proprietary License
*/
/*==============================CUSTOM CSS for RESTAURANT==============================*/
/*                    (guided by the styles of JSN Gruve template.css)                    */

/* =============== LAYOUT - OVERALL PAGE =============== */
/***-------------- master & page backgrounds: different --------------*/
/* bg image on demo front page only => menuitem class "jnc-demoresto" */
/* Gruve template.css#197 & 200 :
*/
/* important to have #eee surrounding all jsn-page elements*/
#jsn-master {             /*important: .jnc-demoresto #jsn-master does NOT work!?*/
  background: #eee;
}
.jnc-demoresto #jsn-page {
  color: #000;
  margin: 0 auto;
  /*margin: 20px auto;*/
  /*width: 960px;*/     /*otherwise NO scaling on mobile devices! */
  width: 90%;           /*from demo3_index.php_en.html. Not found in gruve's template.css!?*/
  /*min-width: 90%;*/
}
.jnc-demoresto #jsn-page {
  background-size: 100% auto;
  background-repeat: no-repeat;
  /*background: #eee;*/
}
.jnc-demoresto #jsn-page {
  background-image: url(../images/backgrounds/bgmaster_resto.png);
  /*background-color: #eee;*/
}
/***---- tweak size of different containers (templace.css#197): px -> relative(%) ----*/
#jsn-pos-topbar,
#jsn-topheader-inner,
#jsn-promo-full-inner,
#jsn-header-inner,
#jsn-promo-inner,
#jsn-pos-content-top,
#jsn-pos-content-top-over,
#jsn-pos-content-top-below,
#jsn-content_inner,
#jsn-content-bottom-over-inner,
#jsn-content-bottom-inner,
#jsn-content-bottom-below-inner,
#jsn-content-bottom-under-inner,
#jsn-usermodules3-inner,
#jsn-footer-inner {
 /*
  margin: 0 auto;
  width: 960px;
  position: relative;
 */
  width: 99%;      /*99 95% 100*/ /*to get the l- & r-modules borders visible as on mobile*/
}
/***                   this + width:100% above do not lead to the result wanted
#jsn-mainbody {
  /padding: 10px;/
  margin-left: 5px;
  magin-right: 5px;
}
***/
/***tweak for wide screens jsn-wide.css#10 : with the tweaking above (normal desktop) NO more needed
@media only screen and (min-width: 1200px) {  
  #jsn-pos-topbar,
  #jsn-topheader-inner,
  #jsn-header-inner,
  #jsn-promo-inner,
  #jsn-promo-full-inner,
  #jsn-pos-content-top,
  #jsn-pos-content-top-over,
  #jsn-pos-content-top-below,
  #jsn-content_inner,
  #jsn-content-bottom-over-inner,
  #jsn-content-bottom-inner,
  #jsn-content-bottom-below-inner,
  #jsn-content-bottom-under-inner,
  #jsn-usermodules3-inner,
  #jsn-footer-inner{
    /width: 1140px;/
    max-width: 95%;
  }
}
***/
/***--- jsn-footer- : some padding left (as in jsn_mobile.css) ---*/
#jsn-footer-below{  /*template.css#495*/
 /*
  padding: 40px 0;
    border-bottom: 1px solid #252c3b;
  */
  padding: 40px 10px;
}
#jsn-footermodules{
 /*
   padding: 30px 0 20px;
  */
   padding: 30px 0 20px 10px;
}
/***--- sticky menu  ---*/
  .jsn-menu-sticky #jsn-header-inner {
    margin: 0;
    width: 90%;
  }
@media only screen and (max-width: 768px), (max-device-width: 768px) {
  .jsn-menu-sticky #jsn-header-inner {
    width: 95%;
  }
}

/** NAVIGATION BUTTONS **/
/** ------------------ **/
/** 'goback' button (as input of type 'submit' **/
/** --------------- **/
/*.btn-goback {
  border: none;
  border-radius: 10px;
  background: #eee8aa url(/images/arrowBackward.png) no-repeat;
  cursor:pointer;
}*/
div.btn-goback input {
  background: transparent url("../../../images/arrowBackward16.png") no-repeat center center; /* img file in <siteroot>/immages/)*/
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: none;
}
/**/
/** 'goto' button (as :after pseudoelement)**/
/** ------------- **/
div.goto-after-img a {
  /* NO need */
}
div.goto-after-img a:after {
  content: "";
  padding: 1px 20px 1px 5px;  /* right padding to get space for the bg.image*/
  background: transparent url("../../../images/arrowForward16.png") no-repeat center center;
}

/* ======================================================== */
/* =============== Restaurant-specific part =============== */
/* ======================================================== */

/* =============== DEFAULT HTML - HEADING STYLES =============== */
/*                (overrides taken from JSN Gruve template.css)                    */
/*                (+more of my own, partly taken from custom_jnc.css)              */
/* JSN Dona template.css #101 */
h1 {
  color: #3C7191;
  font-size: 1.6em;
}
h2 {                /* used for article titles */
  color: #80A138;
  font-size: 1.6em; /*1.5em*/
}
h3 {
  color: #C43654;
  font-size: 1.4em;
}
h4 {
  color: #D67527;
  font-size: 1.3em;
}
h5 {
  color: #A063AF;
}
h6 {
  color: #3B8B8C;
}
h5, h6 {
  font-size: 1.1em;
  font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
/*
  margin: 10px 0;
  font-weight: 400;
  line-height: 1.2;
*/
  margin: 0.5em 0;
  font-weight: normal;
  text-transform: none;
}
/* =============== DEFAULT HTML - LINK STYLES =============== */
/* JSN Dona template.css #131*/
/**/
a:hover {
  text-decoration: underline;
}
/**/
/* =============== MENU - MAIN MENU =============== */
/***----- GENERAL ----- */
div.jsn-modulecontainer ul.menu-mainmenu > li > a {
/*                  override template.css values:
  font-size: 13px;
  line-height: 20px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  padding: 11px 20px;
  */
  /*border-radius: 20px;*/

  font-size: 1.2em;
  font-weight: normal;
  text-transform: none;
}
/***----- ACTIVE STATE ----- */
/* override green.css#101*/
div.jsn-modulecontainer ul.menu-mainmenu > li.active > a, div.jsn-modulecontainer ul.menu-mainmenu li.active > a {
  color: #ccff66; /*ori: #86b522 new:#ccff66*/
}
/***--- Sticky ---*/
/*
#jsn-header.jsn-menu-sticky div.jsn-modulecontainer ul.menu-mainmenu > li:hover > a,
#jsn-header.jsn-menu-sticky div.jsn-modulecontainer ul.menu-mainmenu > li > a:hover,
#jsn-header.jsn-menu-sticky div.jsn-modulecontainer ul.menu-mainmenu > li.active > a {
  color: #fff;
}
*/
/* ----- ACTIVE STATE ----- */
#jsn-header.jsn-menu-sticky div.jsn-modulecontainer ul.menu-mainmenu > li.active > a {
  color: #ccff66; /*ori: #fff new:#ccff66*/
}

/* =============== HEADER CUSTOMIZATION =============== */
/***---- Shift down the mainmenu and get the background image atop ----*/
/* top-pad the header + transparency -> mainmenu shifted down, bg.image visible */

.jnc-demoresto #jsn-header:not(.jsn-menu-sticky) {
  padding-top: 130px;       /* joolmashine image: 140px; tratt.napoli: 210px*/
}
.jnc-demoresto #jsn-header {  /* make header transparent */
/*(from template.css)
  border-bottom: 1px solid rgba(255,255,255, 0.1);
  position: relative;
  z-index: 99999;
  background-color: #1e232d;
  */
  background-color: transparent !important; /* none; #fff; */
}
/*same for menu sticky - add: (cf. support, "Dona Menu Questions"/  #227013)*/
#jsn-header.jsn-menu-sticky {
    background: transparent !important;
}
#jsn-header {
}
/*tweak the logo margins in header (to cope with the tweak of the height of the mainmenu module container)*/
#jsn-logo a {
  /*                      in template.css#281
  line-height: 100%;
  margin: 25px 0;
  display: block;
  */
  margin: 5px 0;
}

/* =============== LAYOUT - MENU AREA =============== */
/*already defined in template.css #304 :
#jsn-menu {
  z-index: 999;
  position: relative;
}
*/
/***--- mainmenu height & color ---*/
/*tweak the padding of the mainmenu module container (the box is too high)*/
div.jsn-modulecontainer ul.menu-mainmenu > li {
  /*padding: 28px 0;                                template.css#779*/
    padding: 5px 0;
}
#jsn-header.jsn-menu-sticky ul.menu-mainmenu > li {
  /*padding:  18px 0px;                             template_pro.css#735*/
    padding: 5px 0;
}

/* add a background color, as done in JSN Gruve */
#jsn-menu { /*from green.css #12*/
    background: #87a114 url("../images/colors/green/bg-mainmenu.png") repeat-x scroll left bottom;
}
#jsn-menu { /*from template_pro.css #1499*/
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
#jsn-menu { /*from template.css #551*/
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 15px;
}
/***--- Sticky ---*/
/* tweak sticky menu from jsn_mobile.css#79: backgound as for the "normal" menu above*/
  #jsn-menu.jsn-menu-sticky {
  /*
    position: fixed;
    top: 0;
    width: 100%;
    background: #333;
  */
    background: #87a114 url("../images/colors/green/bg-mainmenu.png") repeat-x scroll left bottom;
}

/* =============== LAYOUT - FOOTER AREA =============== */
/** tweak the background image file (ori: White House) displayed such as it is on Galaxy/Android;**/
/**                                  it is not overridden by a black image as on other devices   **/
#jsn-footer .img-ft-bg{   /*template.css#448*/
  /*...*/
  /** background: url("../images/backgrounds/footer.jpg"); **/
  background: url("") !important;
}
/** tweak text styling **/
/** ------------------ **/
/**lists without bullets**/
.jnc-footer ul {        /*bootstrap.min.css#9*/
  list-style-type: none;
}
/**indendation of list elements**/
ul li {                 /*template.css#148*/
/*
  padding: 0;
  margin: 0.3em 0 0.3em 1.6em;
*/
  margin: 0.3em 0 0.3em 0;
}

/* =============== SITE TOOLS - GENERAL PRESENTATION =============== */
/* tweak definition in template_pro.css#1002 for the color choice sitetool */
#jsn-sitetoolspanel {
/*
  margin: 45px 5px 0 0;
  position: fixed;
  right: 0;
*/
  margin: 10px 5px 0 0;   /*as for sticky menu below*/
  position: static !important; /*static; relative absolute */
}
/*NOTE: Firefox: pos. static or relative: sitetool is NOT inline with the other menu modules, but below !??*/
/*                    absolute: sitetool IS inline, BUT overlaps the menu module */
/*for info only
.jsn-menu-sticky #jsn-sitetoolspanel {
  margin: 10px 5px 0 0;
}
*/
/*** ----- DROP DOWN ----- */
/* tweak background color of color choice sitetool (template_pro.css#1017*/
ul#jsn-sitetools-menu li {
/*
  padding: 0;
  margin: 0;
  background: #444 url(../images/icons/icons-uni-white.png) center -1888px no-repeat;
*/
  background-color: #739900;
}
/* ============================== MODULE STYLES ============================== */
/* tweak definition in template.css#1024 as for MAIN MENU above */
/*                    module title (h3) with same typography as article title (class h2.item-title)*/
.jsn-modulecontainer h3.jsn-moduletitle {
/*  margin: 0;
  color: #000;
  font-size: 1.1em;
  padding-bottom: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
*/
  color: #80A138;
  font-size: 1.5em;       /*1.2em*/
  font-weight: normal;
  text-transform: none;
}
.jsn-modulecontainer h3.jsn-moduletitle span {
/*
  display: block;
  line-height: 24px;
*/
  line-height: 1.1em;
}
/*module subtitle (h4) with same color style as module subtitle (h4), ie. override #24*/
.jsn-modulecontainer h4 {
  color: #80A138 !important;
}

/* ========= SLIDER / ImageShow ========== */
/* tweak top margin & add background color */
div.demo-env-slider{  /*custom.css#864*/
  margin-top: 20px;   /*15px 0 */
  /*top: 200px !important;*/  /* no effect ? */
  background-color: #cce5ff;  /* */
}

/* == BREADCRUMBS module on position 'bottom-under': reduce padding top&bottom(20px) ==*/
/* template.css#175 */
div#jsn-content-bottom-under .jsn-modulescontainer {
  padding: 2px 0 ;  /* 20px */
}

/* ========= Responsive Images (transform) ========== */
/* as does JSN PageBuilder with its bootstrap.min.css (class jsn-bootstrap3) in 
   \plugins\system\pagebuilder\assets\3rd-party\bootstrap3\css\ */
/* New classes: img-zoom 
                img-rotate*/
/*NOTE 1: img-zoom - touch as replacement of hover on mobile dev does not work correctly: image remains zoomed
          whereas other transforms (as rotate) do work ok.
  FIX: add in the element's div after the class declaration the empty scripts ontouchstart and ontouchend, eg.:
      <div class="img-zoom" ontouchstart ontouchend> ... </div>
      combined with a style for element's :active
  Works well on iOS, less on Android. See details in jnconsult3_sitecontent.docx
*/
/*NOTE 2: relationship between class' float and overflow properties:
          without float & but with overflow: the image will NOT float, even if its inline style specifies float=... !
        ->the float: right or left should be embedded into the css class (and its name should be differentiated r/l)
        ->if you want the inline style float=... acting, you delete the class property float, and:
          - either do NOT use the overflow property,
          - or apply the overflow property to the parent element of the image (eg. .img-zoom.div) 
*/
.img-zoom *,
.img-zoom *:before,
.img-zoom *:after,
.img-rotate *,
.img-rotate *:before,
.img-rotate *:after { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/**/
.img-rotate,
.img-zoom  {
  max-width: 100%;
  border: none;   /* 2px solid #ccc; testing*/
  /*float: left;*/
}
.img-zoom {
/*overflow: hidden;*/ 
}
.img-rotate {
  /*overflow: hidden;*/ 
  background: #ffff00;  /*yellow, for tests ->never triggers!*/
}

.img-rotate img,
.img-zoom img {
  border: 0;
  outline: none;
  vertical-align: middle;
  /*max-width: 100%;
  width: auto\9;
  height: auto;
  display: block;*/
}

.img-zoom img {   /*  interpolation algorithm for scaling an image. http://help.dottoro.com/lcasdhhx.php*/
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
}
/*
*/
.img-rotate a,
.img-zoom a {
  /*vertical-align: middle;*//*let be the default(baseline). middle shifts the line down if parent elem. has asym. padding/margins */
  /*display: inline-block;*/ /* on transform leads to "no float" ie. image and text on 2 lines*/
  /*display: block;*/        /*              leads to an image shift left (no centering anymore) ??*/
  display: inline;           /*              floating ok*/
  max-width: 100%;
}
/*.img-zoom a,*/ /*wwith style on a: img is contained in a ->transition twice, irregulary */
.img-rotate img,
.img-zoom img {
  transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
}
.img-rotate a:focus,
.img-zoom a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/* .img-zoom a:active {...} seems not to have any effect for scale fix on mobile dev.*/
.img-rotate a:active,
.img-zoom a:active {
  background: #ffff00;  /*yellow, for tests ->never triggers!*/
}
/** hover for img-zoom **/
/*.img-zoom a:hover,*/ /*with style on a: img is contained in 'a' ->transform twice, irregulary */
.img-zoom img:hover {
  cursor: pointer;
  background: #d9ffb3;  /*light green #ccff99*/
 /**/
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/* as done in JSN Dona demo data (see custom.css. to cope with smartphones partially supporting transform?
                                 (see caniuse.com/#feat=transforms2d, caniuse.com/#feat=transforms3d     */
/*                           DOES NOT work! see also comment on FIX above */
.img-zoom img:hover:before,
.img-zoom img:hover:after {
 /*
  -ms-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  */
  display: none !important; /*cf. joomlashine support topic 'how do more effects on the image mouseover'*/
}

/** hover for img-rotate **/
.img-rotate img:hover {
  cursor: pointer;
  background: #d9ffb3;  /*light green #ccff99*/
 /**/
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}

/**/
/* ==============================FOOD PRESENTATION STYLES============================ */
/*                    (new styles taken from JSN Gruve template.css#2294)             */

.jnc-demoresto #jsn-body #jsn-content-bottom  {
  background: #fff url(../images/backgrounds/bg-module_resto.png) left bottom repeat-x;
  border-radius: 5px;
  box-shadow: 0 1px 3px #bdbdbd;
  margin-bottom: 15px;
}

/*.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jnc-demoresto .jsn-modulecontent .food-content {*/
/*(with menuitem's (displaying Food module) PageClass .jnc-demoresto & food module class .jnc-demoresto)*/
/*Finally I cleared the module class ->*/
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content {
  padding: 15px;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .food-title {
  margin-bottom: 40px;
  text-align: center;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .food-title h1 {
  font-size: 2.6em;
  color: #63750F;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .food-link {
  padding: 10px;
  min-height: 24em; /*290px;*/  /*cope with different heights of food-desc when grid with >1 lines*/
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .grid-layout.food-first {
  margin-bottom: 10px;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .grid-col {
  width: 25%;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .grid-layout .grid-lastcol .grid-col_inner {
  margin-right: 10px !important;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .grid-layout .grid-lastcol .food-desc {
  padding-right: 10px;
}
/*** ----- Title colors ('green' only) ----- */
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-title h1,
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .grid-layout .food-desc h2,
.jnc-demoresto #jsn-body #food-menu .menu-caption,
.jnc-demoresto #jsn-body #food-menu .main-menu .menu-item h3,
.jnc-demoresto #jsn-body #food-menu .main-menu header h1,
.jnc-demoresto #jsn-body #food-menu .main-menu .menu-item .menu-price .price {
.jnc-demoresto #jsn-body #jsn-pos-content-bottom-below #our-team h3,
.jnc-demoresto #jsn-body #jsn-pos-content-bottom-below #our-team .team-item h2,
.jnc-demoresto #jsn-body #jsn-mainbody-content-inner .article h2,
  color: #63750F;
}
/*** ----- end title colors ----- */

.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-link {
  display: block;
  text-decoration: none;
}

/*** ----- Background items colors ('green' only) ----- */
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-link:hover {
  background-color: #63750F;
}
/*** ----- end Background items colors ----- */

.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-link:hover .food-desc h2,
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-link:hover .food-desc p {
  color: #fff;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-img {
  max-width: 100%;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-item a {
  background: #eee;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-desc h2 {
  font-family: 'Pacifico', Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  padding-left: 14px;
}
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-desc p {
  padding-left: 14px;
  padding-bottom: 10px;
  text-decoration: none;
  color: #000;
}

/*** ----- (food) animation colors ----- */ /*seems not to be used! CHECK IT*/
.animation {
  -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

/*** ----- layout on mobile: only one column: tweak template.css#585 & jsn_mobile.css#692 ----- */

@media only screen and (max-width: 768px), (max-device-width: 768px) {
/*desktop (#388 above):
.jnc-demoresto #jsn-body #jsn-pos-content-bottom .jsn-modulecontent .food-content .grid-col {
  width: 25%;
}
*/
  div.grid-layout4 div.grid-col {
  /**both left**  **without !important the 'with' value for desktop (25%) will not be overridden**
    float: left;
    width: 24.96%;
    **
    clear: left;  
    width: 100% !important;
  tweak more generally, all grid-layout classes: below*/
  }
  div[class*="grid-layout"] div.grid-col {  /*jsn_mobile.css#692 has query break below 480px (ie. smartphone only)*/
    width: 100% !important;
    margin-bottom: 1% !important; /*separation of 2 grid lines*/
    /*clear: left;*/
  }
  .jnc-demoresto #jsn-body #jsn-pos-content-bottom .grid-layout .grid-lastcol .grid-col_inner {
    margin-right: 0 !important;
  }
}
/***----- tablet wide layout (481 - 960): 2 columns ----- ***/
/*@media only screen and (min-width: 481px) and (max-width: 960px), (min-device-width: 481px) and (max-device-width: 960px) {*/
@media only screen and (min-width: 481px) and (max-width: 1024px), (min-device-width: 481px) and (max-device-width: 1024px) {
  div.grid-layout4 div.grid-col {
    width: 49.0% !important;
    margin-bottom: 1% !important; /*separation of 2 grid lines*/
  }
  .jnc-demoresto #jsn-body #jsn-pos-content-bottom .grid-layout .grid-lastcol .grid-col_inner {
    margin-right: 2% !important;  /*100-2x49*/
  }
}

/**/
/*=== Responsive, general ===*/
/*===========================*/
/*@media screen and (max-width: 768px) {*/
@media only screen and (max-width: 768px), (max-device-width: 768px) {
  /* reduce the header padding because the background image will be resized down */
  .jnc-demoresto #jsn-header.jsn-menu-sticky {
    padding-top: none;
  }
  .jnc-demoresto #jsn-header:not(.jsn-menu-sticky) {
    padding-top: 70px !important;  /*70px 50px*/
  }
  .jnc-demoresto #jsn-page {
    width: 95%;               /*vs 90% on desktop screen*/
    /*min-width: 95%;*/
  }

}

@media only screen and (max-width: 960px){  /*ie. up to iPad mini*/
 /** tweak the top margin of ShowImage module. NO effect, is overridden by jsn_mobile.css#507: margin:0 !important**/
  div.demo-env-slider{
    margin-top: 10px !important;
    /*top: 100px !important;*/
  }
}

/* test ->commented
@media only screen and (max-device-width: 960px) {
  .jsn-desktop-on-mobile #jsn-page {
    width: 100%;
    min-width: 100%;
  }
}
*/

/* ============================== Google Map ============================== */
/* mapsplugin.com, by Mike Reumer : creates the style class "map" under #mapplaceholder24_XXXXX_0 > #mapbody24_XXXXX_0 */
/*                                                                     (XXXXX changes when resizing the screen!        */
/* extend the class with max-width: 100%; in order to cope with module border overflow when down-resizing the screen   */

div [id*="mapbody"] .map {
  max-width: 100%;
}