@charset "utf-8";
/* CSS Document */

/* -------------------------------------------- 
GLOBAL STYLING ELEMENTS 
-------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700&display=swap');


HTML {
	width: 100%;
	height: 100%;
	margin: 0px;
}

:root {
	--basecolor: #000;
    
    --mainbrown: #B65500;
    
	--maingreen: #00a2ca;
	--maingreendark: #005864;

	--mainblue: #e3e8f9;
	--mainblue2: #b8bce6;
	--mainblue3: #81a0ce;
	--mainblue4: #3b409f;
  
	--blue1:		#eef7fd;
	--blue2:		#e0edf5;
	--blue3:		#c4d9e7;

	--grey1:		#f8f8f8;
	--grey2:		#f0f0f0;
	--grey3:		#C0C0C0;
    --grey4:		#A0A0A0;
    --grey5:		#505050;
    

	--darkgreen:	#390;
}

BODY {
	margin: 0px;
	padding: 0px;
    background: #fff url('../images/back_body.png') repeat-x top left;
	font-family: 'Noto', serif;
	font-size: 18px;  /* 1rem  = 18px */
	font-weight: 300;
	line-height: 17pt;
	color: var(--basecolor);
	-webkit-text-size-adjust: none;
}              

i { margin: 0px 5px; }			/* icons */
P { margin: 0.5em 0px; }		/* base paragraph */
* { box-sizing: border-box; }	/* default boxes */
ul {
  line-height: 1.2em; 
  list-style-position: outside;
  padding-left: 25px;
}


a, a:link, a:visited {
	color: blue;
	font-weight: 500;
	text-decoration: none;
}
a:hover, a:active {
	color: darkblue;
}
a.nolink {
	color: var(--basecolor);
	font-weight: 300;
	text-decoration: none;
}
a.intlink {
	background: transparent url('images/icons/icon_intlink.png') no-repeat scroll 100% 50%;
	padding-right: 17px;
}
a.extlink {
	background: transparent url('images/icons/icon_extlink.png') no-repeat scroll 100% 50%;
	padding-right: 17px;
}

h1 { /*Sectiekop*/
  margin: 20px 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1rem;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--mainbrown);
}
h2 { /*Hoofdstukkop*/
  margin: 20px 0px 15px 0px; 
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #000;
}
h2.browntitle {
  margin: 15px 0px 10px 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mainbrown);
}
h3 { /*Paragraafkop*/
  margin: 15px 0px 10px 0px; 
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}
h4 { /*Vet kopje*/
  margin: 10px 0px -5px 0px;
  font-family: 'Noto', serif;
  font-size: 1.2rem;
  font-weight: 600;
}
h5 /*Custom*/ { 
  margin: 5px 0px;
  font-family: 'Noto', serif;
  font-weight: 600;
  font-size: 1em;
  font-style: italic;
  line-height: 1.1em;
}
h6 { /*Kleine text*/
  margin: 5px 0px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight : normal;
}

p.intro { /*Paragraaf Intro*/
  margin: 15px 0px 20px 0px;
  padding-bottom: 10px; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.3em;
  border-bottom: dashed thin #CCCCCC;
  border-dasharray: 10 5;
}


HR {
	height: 0; 
	border: none;
	border-top: 1px solid #000;
}
HR.solidgrey {
	height: 0; 
	border: none;
	border-top: 1px solid #ccc;
}
HR.dotted {
	height: 0;
	border: none;
	border-top: 1px dotted #ccc;
}
HR.dashed {
	height: 0;
	border-top: dashed thin #ccc;
	border-dasharray: 10 5;
}


SPAN.small {
	font-size: 0.7em;
}
SPAN.highlight {
	background-color: Yellow;
}
SPAN.meer {
	white-space: nowrap;
}

IMG.scale {
	width: 100%;
    height: auto;
}
IMG.zoom {
  transition: all .2s ease-in-out;
}
.zoom:hover {
  transform: scale(1.1);
}

/* set images in div flags */
A.normal img {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
A:hover.normal img  {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}


/* ---------------------------------------------------- 
STRUCTURAL ELEMENTS 
------------------------------------------------------- */

#container {
  max-width: 1020px;
  margin: 0px auto 20px auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  min-height: 100vh;
}

#header {
  position: relative;
  height: 120px;
  border-bottom: 1px solid #B65500;
  padding: 0px;
  z-index: 100;
}
    .headerfixed {
      border-bottom: 1px solid var(--mainbrown);
      -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
      -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
      box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
    }

    #sitename {
        height: 110px;
        margin-left: 15px;
		padding: 0px 5px 0px 5px;
    }

    #menu {
        position: relative;
        padding: 0px;
        text-align: right;
        border-bottom: 1px solid var(--mainbrown);
    }
    .menufixed {
        border-bottom: 1px solid var(--mainbrown);
        -webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.4);
    }

    #language {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 80px;
        text-align:right;
    }


#main {
  width: 100%;
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}

#main_wide {
  width: 100%;
  height: auto;
}

#main-2column, #main-3column {
  display: grid;
  align-content: start;
  grid-row-gap: 10px;
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}

#footer {
  background-color: #ccccff;
  padding: 5px;
}
#footer > div {
  white-space: nowrap;
	text-align: center;
  padding: 0px 10px;
  font-size: 0.9em;
  color: #000066;
}


/* -------------------------------------------------- 
 MENU
----------------------------------------------------- */

.main-nav {
  border-bottom: 0px solid #bbb;
  background: #fff;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 41px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

}

.main-nav:after {
  clear: both;
  content: "\00a0";
  display: block;
  height: 0;
  font: 0px/0 serif;
  overflow: hidden;
}

.nav-brand {
  float: right;
  margin: 0;
}

.nav-language {
  float: right;
  margin: 8px 10px;
}

.nav-brand a {
  display: block;
  padding: 11px 11px 11px 20px;
  color: #555;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

#main-menu {
  clear: both;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

@media (min-width: 768px) {
  #main-menu {
    float: left;
    clear: none;
  }
}

/* Mobile menu toggle button */
.main-menu-btn {
  float: right;
  margin: 5px 10px;
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  text-indent: 29px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #555;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}

.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}

/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
  display: none;
}
#main-menu-state:checked ~ #main-menu {
  display: block;
}

@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  #main-menu-state:not(:checked) ~ #main-menu {
    display: block;
  }
}



/* -------------------------------------------------- 
  COMMON
----------------------------------------------------- */

.titlebox {
  grid-column: 1/-1;
  margin: 20px 0px 10px 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--main);
}

.title_selectbox {
  display: inline-block;
  float: right;
}

#content {
  max-width: 650px;
  margin: 10px auto;
}

#content_wide {
  width: 100%;
  margin: 10px auto;
}

#imageContainer_archief {
	width: 100%;
	height: 580px
}

#content_archief {
	background: url('../images/safe.jpg') no-repeat center center;
	background-size: auto 100%;
	height: 580px;
	padding: 30px 20px 20px 20px;
	color: #fff;
}

.itembox {
  background-color: #404040;
  border: 1px solid #000;
  padding: 10px;
}

.carouselbox {
  width: 95%;
  margin: 10px auto;
}

/* -------------------------------------------------- 
 HOME
----------------------------------------------------- */


/* -------------------------------------------------- 
 NIEUWS
----------------------------------------------------- */

#archief {
	position: relative;
	float: right;
	width: auto;
	text-align: right;
	margin: 5px 0px 10px 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
}

.nws_homebox{
  color: #000;
  background-color: var(--grey1);
  border: 1px solid var(--grey3);
  padding: 5px;
  margin-bottom: 10px;
}

p.nws_homedate{
	font-style: italic;  
	font-weight: 300;
	font-size: 0.9rem;
	margin-top: 0px;	
}
p.nws_hometitle{
    margin: 5px 0px;
    font-family: 'Noto', serif;
    font-weight: 800;
    font-size: 1.3rem;
}
p.nws_hometxt{
    font-family: Arial, 'Open Sans', sans-serif;
	font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.2em;
	color: var(--grey5);
}


.newsbox{
	color: #000;
	background-color: var(--grey1);
	border: 1px solid var(--grey3);
	padding: 10px;
	margin-bottom: 10px;
}
p.newsdate{
	color: var(--grey5);
	font-size: 0.9rem;
	font-style: italic;
	margin: 10px 0px 5px 0px;
}
p.newstitle {
	margin: 5px 0px 10px 0px;
}
.overzicht_title, a.overzicht_title, .newstitle {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
    color: #000;
}

.newsback  {
	margin: 10px;
}
.newsback A {
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
}


/* -------------------------------------------------- 
LINKS
----------------------------------------------------- */


a.help {
	background: transparent url('../images/icons/help.png') no-repeat scroll 100% 50%;
	height: 14px;  /* = 16 minus 2 padding */
	padding: 2px 18px 0px 0px;
}
a.help:hover {
	background: transparent url('../images/icons/help_hover.png') no-repeat scroll 100% 50%;
}

a.info {
	background: transparent url('../images/icons/info.png') no-repeat scroll 100% 50%;
	height: 14px;   /*= 16 minus 2 padding */
	padding: 1px 22px 1px 0px;
}
a.info:hover {
	background: transparent url('../images/icons/info_hover.png') no-repeat scroll 100% 50%;
}

a.extlink {
	background: transparent url('../images/icons/icon_extlink.png') no-repeat scroll 100% 50%;
	padding-right: 13px;
}

a.intlink {
	background: transparent url('../images/icons/icon_intlink.png') no-repeat scroll 100% 50%;
	padding-right: 18px;
}

a.pdflink {
	padding: 2px 20px 2px 0px;
	background: transparent url('../images/icons/icon_pdf.png') no-repeat scroll 100% 50%;
}

a.phone {
	background: transparent url('../images/icons/icon_telephone.png') no-repeat scroll 0% 50%;
	height: 14px;   /*= 16 minus 2 padding */
	padding: 1px 0px 1px 24px;
	cursor: default;
}

a.email {
	background: transparent url('../images/icons/icon_email.png') no-repeat scroll 0% 50%;
	height: 14px;   /*= 16 minus 2 padding */
	padding: 1px 0px 1px 24px;
}

a.bigpijl_r {
	font-size: 1.4em;
	padding: 2px 20px 2px 20px;
	color: #fff;
}
a.bigpijl_r:hover {
	background: transparent url('../images/icons/pijl_r.gif') no-repeat scroll 100% 50%;
	text-decoration: none;
}

a.imgzoom img{
    -webkit-transition: all .2s ease-in-out; /* Safari and Chrome */
  	-moz-transition: all .2s ease-in-out; /* Firefox */
  	-o-transition: all .2s ease-in-out; /* IE 9 */
  	-ms-transition: all .2s ease-in-out; /* Opera */
  	transition: all .2s ease-in-out;
}
a:hover.imgzoom img {
	-webkit-transform:scale(1.05); /* Safari and Chrome */
    -moz-transform:scale(1.05); /* Firefox */
    -ms-transform:scale(1.05); /* IE 9 */
    -o-transform:scale(1.05); /* Opera */
    transform:scale(1.05);
}


/* -------------------------------------------------- 
	BUTTONS & ICONS
----------------------------------------------------- */

.trigger {
  cursor: pointer;
}

.button, a.button, trigger.button {
	margin: 0px 2px;
	border: 1px solid #999;
	border-radius: 3px;
	font-family: 'Open Sans', sans-serif;
	background-color: var(--grey1);
	color: #666;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}
.button, trigger.button {
	padding: 3px 8px;
	font-size: 13px;
	line-height: 13px;	
}
a.button  {
	padding: 3px 8px;
	font-size: 12px;
	line-height: 12px;
}

.button:hover, a.button:hover  {
	color: #fff;
	background-color: var(--mainblue);
	border-color: #000;
}

  .button::before,
  a.button::before,
  trigger.button::before,
  .button::after,
  a.button::after,
  trigger.button::after {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	pointer-events: none; /* prevents non-action on clicking the icon */
  }
  .button::before,
  a.button::before,
  trigger.button::before {
	margin: 0 5px 0 0px;  
  }
  .button::after,
  a.button::after,
  trigger.button::after {
	margin: 0 0 0 5px;
  }

  .save::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c7"; font-size: 1.1em;}
  .delete::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f2ed"; font-size: 1.1em;}
  .cancel::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f05e"; font-size: 1.1em;}
  .envelop::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0"; }
  .bulkmail::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f674"; font-size: 1.2em;}  
  .link::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c1"; font-size: 1.2em;}
  .fileupload::before	{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f574"; font-size: 1.2em;}
  .file::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f15b"; }
  .folderopen::before 	{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f07c"; }
  .edit::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f044"; font-size: 1.2em;}
  .editA::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f14b"; }
  .pen::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f304"; }
  .user::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; }
  .users::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f500"; }
  .userplus::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f234"; }
  .usermin::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f503"; }
  .copy::before			{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c5"; }
  .export::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f56e"; }
  .reset::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f021"; }
  .anglel::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f104"; }
  .angler::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; }
  .arrowl::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f060"; }
  .arrowr::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; }
  .search::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f002"; }
  .info-circle::before	{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f05a"; }
  .check::before		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; font-size: 1.2em;} 


  .arrowrr::after		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; }
  .anglerr::after		{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; }
  .extlinkbig::after	{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f360"; font-size: 1.2em;} 


.iconbutton, a.iconbutton {
  margin: 0px;
  padding: 0px 8px;
  border: none;
  font-family: Arial, Helvetica, sans-serif;
  background-color: transparent;
  color: #666;
  font-size: 13px;
  line-height: 13px;	
  text-decoration: none;
  cursor: pointer;
}
  .iconbutton.blue, a.iconbutton.blue { color: var(--mainblue); }
  .iconbutton.blue:hover, a.iconbutton.blue:hover { color: var(--orange3); }

  .iconbutton.green, a.iconbutton.green { color:#390; }	/* geen hover voor checked e.d.*/
  .iconbutton.grey, a.iconbutton.grey { color:#CCC; }	/* geen hover voor checked e.d.*/

  .iconbutton.grey2, a.iconbutton.grey2 { color:#666; }
  .iconbutton.grey2:hover, a.iconbutton.grey2:hover { color: var(--mainblue); }


/* ----------------- BASETABLE ---------------------- */
  .basetable {
    font-size: 13px;
	  border: 1px solid #ccc;
	  margin: 10px 0px;
  }
  .basetable tr {
    background-color: var(--grey1);
    border-bottom: 1px solid #ccc;
  }
  .basetable th {
    padding: 2px 2px;
    background-color: var(--mainblue3);
    border-left: 1px solid #fff;
    color: #fff;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.2em;
  }
  .basetable td {
    padding: 5px 5px;
    font-size: 1em;
  }
 

/* ----------------- DATATABLE ---------------------- */
  .datatable {
	font-size: 13px;
	border-collapse: collapse;
	border-bottom: 10px solid var(--mainblue);
	margin-bottom: 0px;
  }
  .datatable tr:nth-child(odd) {
	background-color: var(--grey1);
  }
  .datatable tr:nth-child(even) {
	background-color: #fff;
  }
  .datatable tr {
	border-bottom: 1px solid #fff;
  }
  .datatable tr:hover {
	background-color: var(--blue2);
  }
  .datatable th {
	padding: 0px 2px;
	background-color: var(--mainblue3);
	border: 1px solid #fff;
  }
  .datatable th a:link, .datatable th a:visited {
	width: 100%;
	height: 100%;
	display: block;
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 14pt;
  }
  .datatable th a:hover{
	background-color: var(--mainblue4);
  }  
  .datatable td, .datatable td a {
	padding: 5px 5px;
	font-size: 1em;
  }
  .datatable td:hover {
	cursor: pointer;
  }

/* -------------------------- TABLE DATA -------------------------------- */
  table.data {
	font-size: 13px;
	border-collapse: collapse;
	border-bottom: 10px solid var(--mainblue3);
	margin-bottom: 0px;
  }
  .data tr:nth-child(odd) {
	background-color: var(--grey1);
  }
  .data tr:nth-child(even) {
	background-color: #fff;
  }
  .data tr {
	border-bottom: 1px solid #fff;
  }
  .data th {
	padding: 0px 2px;
	border: 1px solid #fff;
	background-color: var(--mainblue3);
	color: #fff;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 14pt;	
  }
  .data th a:link, .data th a:visited {
	width: 100%;
	height: 100%;
	display: block;
	color: #fff;
	font-weight: 600;
	line-height: 14pt;
  }
  .data th a:hover{
	background-color: var(--mainblue4);
  }  
  .data td {
	padding: 3px 5px;
	font-size: 1em;
  }
  .data td a {
	color: var(--mainblue);
  }
  .data td a:hover {
	color: var(--orange3);
	cursor: pointer;
  }
  .data td.icon, .data td.icon a {
	font-size: 1em;
	text-align: center;
  }



/*----------------------------------------------------------------------------
                              MEDIA SIZES
-----------------------------------------------------------------------------*/


@media screen and (max-width: 600px) {
    #main, #main_wide, #main-2column, #main-3column {
      padding: 20px 7px 10px 7px;
    }
}


@media screen and (min-width: 600px) {
	BODY {
	  font-size: 16px;
	}
	#main-3column {
	  grid-template-columns: repeat(2, 1fr);
	  grid-gap: 10px;
	}
}


@media screen and (min-width: 700px) {
	BODY {
	  font-size: 18px;
	}
	#logo {
	  flex-grow: 0;
	  flex-shrink: 1;
	  flex-basis: 350px;
	  padding-bottom: 2px;
	}
	#menu {
	  flex-grow: 1;
	  flex-shrink: 1;
	  flex-basis: 350px;
	}
	#main-2column {
	  grid-template-columns: 3fr 2fr;
	  grid-gap: 10px;
	}
}


@media screen and (min-width: 800px) {
	#main-2column {
	  grid-template-columns: 4fr 2fr;
	  grid-gap: 20px;
	}
	#main-3column {
	  grid-template-columns: repeat(3, 1fr);
	  grid-gap: 10px;
	}

}