/* media="only screen and (max-width:768px)" */

html, body	{
	background: #fff url(../img/background_body_mobile.gif) repeat-x;
	}
	
body	{
  -webkit-text-size-adjust:none;
  padding: 0;
	height: auto;
}

div#shadow	{
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	}

#welkomTitle {
    display:none;
}
	
#wrapper {
   float: right;
   width: 100%;
   transition: width 0.3s ease;
}

body.loggedin #topMenu ul li.private_menu  {
  display: block;
}

body.loggedin #topMenu ul li.public_menu  {
  display: none;
}

#topMenu	{
	height: 100%;	
	margin-top: 30px; /* MenuOptie  padding-top 0 ipv 30  */
 	padding-top: 0px;
	display: inline-block;
	z-index: 1;
	}
	
#topMenu ul li {
  float: none;
  text-align: left;
  /* border-bottom: 1px solid #555;
  border-bottom: 1px solid #a9a9a9;  MenuOptie grijs */
  border-bottom: 1px solid #e1e1e1; /* MenuOptie licht grijs */
}

#topMenu ul li a {
  border: none;
  xcolor: #bbbbbb; 
  color: #654998; /* MenuOptie paars */
  display: block;
  text-decoration: none;
  margin: 8px 5px 8px 0;
	line-height: 1.2em;
  padding: 5px 0;
  font-size: 1.1em;
}

#topMenu ul li.currentpage > a	{
	xcolor: #fff;
	xfont-weight: normal;
	xfont-style: normal;
	background: none;	
	}
	
#topMenu ul li.currentpage > a ul li a	{
	color: #999;
	}

#topMenu ul li a:hover	{
  color: #333;
	border: none;
	background: none;
	}

#topMenu ul ul {
  position: relative;
  display: block;
  margin-left: 0;
  text-align: left;
}

#topMenu ul ul li {
  margin: 0;
  border-bottom: none;
}

#topMenu ul ul li a {
    background: none;
    line-height: 18px;
  padding: 0 0 0 12px;
}

#right	{
	width: auto;
	min-height: 100%;
	bottom: 0;
	line-height: 1.4em;
	left: 0;
	z-index: 1;
	float: none;
	margin-top: -20px;
	}

#right h3	{
	margin: 0 0 8px 4px;
	}
	
/*div#right img	{
	display: none;
	}*/

#aanmeldenVrouwKnop	{
	width: 176px;
	float: left;
	}

div#rightLogo	{
  margin: 0 auto;
  width: 310px;
	}

div#rightLogo a#erasmusmc	{
	background-size: 95%;
	min-height: 70px;
	margin-top: 5px;
	background: url(../img/logo_erasmusmc_mobile.png) no-repeat right;
  margin-bottom: 0;
}

/* Styles for screens that are atleast 320px; */
@media only screen and (max-width: 20em) {
div#rightLogo a#erasmusmc	{
	xmargin-top: 0;
	xbackground: url(../img/logo_erasmusmc_mobile320.png) no-repeat right;
  }
}

#header	{
	height: auto;
  padding: 5px 8px;
}
	
#header h1	{
	background: url(../img/logo_slimmer-zwanger_mobile.gif) no-repeat 0;
	width: 254px;
	height: 43px;
	padding-top: 8px;
	margin-right: 2px;
	margin-left: 6px;
	}

#content	{
	width: 100%;
  padding: 0;
  background: #fff none;
	min-height: 100%;
	margin: auto;
	float: none;
}

#content h2	{
	font-size: 1.7em;
	line-height: 1.2em;
	}

#payoffPosition	{
	xwidth: 95%;
	xfont-size: inherit;
	xtop: 0;
	xright: 0;
	margin-left: 8px;
	xfloat: none;
	xpadding-left: 6px;
	}

.line	{
	margin-bottom: 15px;
	}

#header .gender	{
	width: 35px;
	height: 70px;
	top: 4px;
	right: 2px;
	left: 0;
	float: right;
	}
	
span.niceSubmit, p.niceSubmit	{
  margin-top: 8px;
}

div#footer	{
	height: 100%;
	font-size: 0.9em;
	}

div#footer-links {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
}

div#footer div.innerLeft	{
	padding-top: 10px;
	float: none;
	text-align: center;
	}

div#footer div.innerRight	{
	float: none;
	text-align: center;
	}

#celogo {
  margin-left: 0;
    display:block;
    text-align:right;
}

#celogo img {
  margin-top: 6px;
}

div#logocontainer {
  text-align: center;
  width: 100%;
}

div#footer a.logo {
    padding-bottom: 14px;
}

body.female .gender	{
	background-image: url(../img/gender_female_mobile.gif);
	width: 35px;
	height: 70px;
	}
	
body.male .gender	{
	background-image: url(../img/gender_male_mobile.gif);
	width: 35px;
	height: 70px;
	}
	
.risk_factor	{
	margin-top: 5px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	}
	
.risk_factor h3	{
	background-size: 30px;
	right: 0;
	height: 30px;
	padding-top: 4px;
	padding-left: 40px;
	font-size: 1.3em;
	vertical-align: middle;
	
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-right: 18px;
	}

.risk_factor a.info	{
	top: 15px;
	right: 48px;
	}

.risk_factor.expanded a.info	{
    right: 12px;
    top: 66px;
	}

.risk_factor a.infoArrow     {
        background: url(../img/toggle_expand_mobile.png) no-repeat;
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 15px;
        right: 12px;
        opacity:0.6;
        }
	
.risk_factor.expanded a.infoArrow     {
  background-image: url(../img/toggle_collapse_mobile.png);
	}
	
	
div.csseten07.slider label, div.cssdrinken07.slider label {
	display: table-cell !important;
	width: 14%;
	margin: 0;
	}

div.csseten07.slider label.last, div.cssdrinken07.slider label.last {
	width: 0 !important;
	}

div.css12345ofmeer.slider label {
	display: table-cell;
	width: 25%;
	margin: 0;
}

div.css12345ofmeer.slider label.last {
	margin: 0 !important;
	width: 0 !important;
	text-align: right;
	}

#subMenu	{
  display: none;
	}

#subMenu.main-nav	{
  display: block;
}

#right ul.ribbon	{
	right: 0;
	}
	
#right ul.ribbon li	{
	line-height: inherit;
	padding: 0;
	margin: 0;
	float: left;
	}

#right p.niceSubmit, #werving-small p.niceSubmit	{
	background: none;
	xdisplay: inline;
	margin: 0;
	padding: 2px 0 0;
	}

#aanmeldenExtraInfo	{
	font-size: 0.7em;
	padding-left: 7px;
	margin-top: 0;
	margin-bottom: 0;
	}

#right ul.ribbon li a	{
	font-size: 0.9em;
	font-weight: normal;
	font-style: normal;
	display: block;
	line-height: 1em;
	margin: 0 5px 5px 3px;
	padding: 4px;
	text-decoration: none;
	border: 1px solid #ecdf64;
	border-radius: 4px 4px 4px 4px;
	color: #5661a3;
	background: #fdfcef;
	
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#fdfcef));
	background: -webkit-linear-gradient(#fff, #fdfcef);
	background: -moz-linear-gradient(#fff, #fdfcef);
	background: -ms-linear-gradient(#fff, #fdfcef);
	background: -o-linear-gradient(#fff, #fdfcef);
	background: linear-gradient(#fff, #fdfcef);
	}

#right p.niceSubmit a, #werving-small p.niceSubmit a	{
	font-size: 1.1em;
	display: block;
	line-height: 1em;
	padding: 6px;
	text-decoration: none;
	border: 1px solid #ecdf64;
	border-radius: 4px 4px 4px 4px;
	color: #5661a3;
	background: #fdfcef;
	
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fdfcef), to(#ecdf64));
	background: -webkit-linear-gradient(#fdfcef, #ecdf64);
	background: -moz-linear-gradient(#fdfcef, #ecdf64);
	background: -ms-linear-gradient(#fdfcef, #ecdf64);
	background: -o-linear-gradient(#fdfcef, #ecdf64);
	background: linear-gradient(#fdfcef, #ecdf64);
	margin: 0 5px 5px 3px;
	}

.niceSubmitBtns  {
  text-align: center;
}

.niceSubmitBtns p.niceSubmit  {
	width: 29%;
}

#zelftest_buttons_mobile {
  display:none;
}

#zelftestChooser {
  padding: 0 8px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#zelftestChooser p {
  float: left;
}

#zelftestChooser .niceSubmit {
  /*width: 100%;*/
}

#content div.paddington, div.paddington	{
	padding: 8px 8px 26px;
	}

#content .paddington	{
	}
	
#home_slider_container {
  width: 300px;
  margin: 0 auto 15px;
}

#homeBoxes	{
	right: 0px;
	}

div.homeBox div.paddington	{
	top: 0 !important;
	padding: 13px 16px 5px 34px !important;
	height: auto;
	}
	
div.homeBox	{
	background: url(../img/background_homebox_top_mobile.png) no-repeat top left;
	float: none;
	/* width: 100%; */
	/* width:297px; */
	margin: 0 !important;
	margin-bottom: 8px;
	}
	
div.homeBox h4	{
	padding: 0 0 5px;
	margin-left: 16px;
	}
	
div.resultButtons a.print {
  display: none;
	}
	
div.alertBox, div.info-alertBox {
	background: url("../img/background_alertbox.png") no-repeat scroll -10px -10px;
	font-weight: bold;
  margin: 0 70px 40px;
  padding: 0 0 10px 30px;
	border: 1px solid #5661A3;
	border-radius: 4px 4px 4px 4px;
	width: auto !important;
	right: 0;
  position: static;
}

div.alertBox div.bottom, div.info-alertBox div.bottom {
    display: none;
}

.progressWrapper li	{
	width: 134px;
	}

.progressTop	{
	display: none;
	}

.progressBottom	{
	display: block;
	}

form#user_create_form label, form#user_login_form label	{
	display: block;
	width: auto;
	}

input[type=text], input[type=password], input[type=textarea], input[type=email], input[type=tel]	{
	width: 93%;
	}

#werving-big {
	display:none;
}

#werving-small {
	display:block;
	clear:both;
}

#total_stats_img {
  display:none;
}


/* mobile toggle-menu */
/* based on http://codepen.io/jetpacmonkey/pen/ktIJz */

.main-header {
   display: block;
   line-height: 32px;
   /* color: white;
   text-shadow: #222 0px -1px 1px;
   position: fixed;
   width: 100%;
   left: 0;
   transition: all 0.3s ease; */
   .toggle-menu {
     xposition: relative;
     xleft: 20px;
     xtop: 20px;
     xcolor: white;
     font-size: 28px;
     cursor: pointer;
   }
}

.toggle-menu {
  width: 30px;
  height: 30px;
  position: relative;
  display: block;
  top: 0;
  color: white;
  cursor: pointer;
  background: url(../img/toggle_menu_button.png) left top no-repeat;
  z-index: 2;
}

xlabel.toggle-menu img {
  xdisplay: block;
  float: left;
  margin-right: 4px;
  z-index: 3;
  cursor: pointer;
  border: 1px solid #333;
}


span.toggle-menu-text {
  margin-left: 30px;
}

.topMenu-check,
.topSubMenu-check {
   display: none;
}

.main-nav {
   position: fixed;
   top: 0;
   width: 0;
   height: 100%;
   /* background: #0a0a0a;
   background: #bebebe; MenuOptie licht grijs */
   background-color: #eaeaea;
   background: linear-gradient(to left, #eaeaea 0%, #f7f7f7 33.3%); /* MenuOptie erg licht grijs */
   overflow: hidden;
   transition: width 0.3s ease;
   a {
     display: block;
     border-top: 1px solid #484848;
     border-bottom: 1px solid #2E2E2E;
     color: white;
     padding: 15px;
     &:hover, &:focus {
      background: linear-gradient(#484848, #000);
    }
   }
   &:after {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: 34px;
     background: linear-gradient(left, rgba(black, 0), rgba(black, 0.4));
   }
}

.close-menu {
   display: none;
}

#Menu-check:checked + #topMenu {
   width: 22%;
   xmargin-top: 0;
   xpadding-top: 30px;
}
#Menu-check:checked ~ #wrapper {
   /* width: 78%; uit om toggle-menu over de content te schuiven */
   .open-menu {
     display: none; 
   }
   .close-menu {
     display: block;
   }
}

#searchBox {
    display:none;
}


/* =====================================
Smartphones (Portait) & (Landscape) 
===================================== */
@media screen and (max-width: 480px) {  /* was @media screen and */
    #Menu-check:checked + #topMenu {
      width: 40%;
    }
    #Menu-check:checked ~ #wrapper {
      /* width: 60%; uit om toggle-menu over de content te schuiven */
      .open-menu {
        display: none; 
      }
      .close-menu {
        display: block;
      }
    }   
   
    p.payoff	{
    	width: 95%;
    	font-size: inherit;
    	top: 0;
    	right: 0;
    	margin: 0;
    	float: none;
    	padding-top: 6px;
    }    
    .niceSubmitBtns p.niceSubmit  {
    	width: 60%;
    }
    div.alertBox, div.info-alertBox {
    	padding: 0 0 10px 15px;
    	margin-left: 0;
    	margin-right: 0;
    }
    div.alertBox p, div.info-alertBox p	{
    	padding-right: 10px;
    }   
}


/* =====================================
Smartphones (Portait)
===================================== */

@media screen and (max-width: 320px) {
    #Menu-check:checked + #topMenu {
      width: 50%;
    }
    #Menu-check:checked ~ #wrapper {
      /* width: 50%; uit om toggle-menu over de content te schuiven */
      .open-menu {
        display: none; 
      }
      .close-menu {
        display: block;
      }
    }
    
    .niceSubmitBtns p.niceSubmit  {
    	width: 90%;
    }
    div.alertBox, div.info-alertBox {
    	padding: 0 0 10px 15px;
    }
    div.alertBox p, div.info-alertBox p	{
    	line-height: 1.6em;
    	padding-right: 15px;
    }      
}

/* =====================================
Tablet
===================================== */

@media screen and (min-width: 600px) {
    #content	{
      padding: 0 10%;
      width: 80%;
    }
}

@media screen and (max-width: 700px) {
#modalBackground {
    opacity:1;
    background-color:#6f53a2;
}
#onderzoekdemoMobile  {
  box-shadow:none;
}
}