/*
Theme Name: Veilig Thuis
Theme URI: http://www.020veiligthuis.nl/
Description: The wordpress theme for Veilig Thuis.
Version: 1.5
Author: GGD Amsterdam
Author URI: http://www.ggd.amsterdam.nl/
*/


@media only screen and (min-width: 1000px) {
  .wrapper { width: 980px; }
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
  .wrapper { width: 740px; }
  .grid-12 { width: 720px; }
  .grid-11 { width: 660px; }
  .grid-10 { width: 600px; }
  .grid-9 { width: 540px; }
  .grid-8 { width: 480px; }
  .grid-7 { width: 420px; }
  .grid-6 { width: 360px; }
  .grid-5 { width: 300px; }
  .grid-4 { width: 240px; }
  .grid-3 { width: 180px; }
  .grid-2 { width: 120px; }
  .grid-1 { width: 60px; }
  #header-image { height: 310px; }
  #header-image-front { height: 461px; }
  #nav-front {
    height: 105px;
    margin-top: -308px;
    margin-bottom: 183px;
  }
  #nav-main-front UL LI.menu-item  A {
    display: inline-block;
    height: 68px;
    margin: 18px 0px;
    padding: 10px 25px;
    border-left: 2px solid #FFFFFF;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  #header-top { height: auto; min-height: 113px; }
  #home-category { display: none; }
  #logo { top: 10px; width: 58px; height: 91px; left: 20px; }
  .header-text {
    padding-top: 10px;
    font-size: 13px;
  }
  .header-text-column {
    display: block;
    padding: 0px;
    margin-left: 70px;
  }
  .header-text SPAN {
    font-size: 20px;
  }
  .header-icons { display: block; }
  .meldbtn.link-more {
    margin-top: 10px;
  }
  #header-flags { margin-top: 11px; }
  #search {
    display: none;
    float: none;
    margin: 10px 5px;
  }
  #search.search-show { display: block; }
  #search INPUT.search-field {
    border: 0px solid #000000;
    border-right: 5px solid #000000;
    background-color: #000000;
    background-image: url(images/vergrootglas-wit.svg);
    background-repeat: no-repeat;
    background-size: 19px auto;
    background-position: right center;
    color: #FFFFFF;
    width: 100%;
    font-size: 15px;
    padding: 4px 8px;
    height: 27px;
  }
  #nav { display: none; }
  #nav-mobile.menu-show { display: block; }
  .agenda-tile { width: 335px; }
  .news-tile { width: 335px; }
  .document-content {
    width: 240px; 
    left: 200px;
  }
  .document-download {
    width: 180px; 
    left: -240px;
  }
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
  .wrapper { width: 100%; padding: 0 20px 0 20px; }
  #nav-mobile .wrapper { padding: 0; }
  #nav-front .wrapper { padding: 0; }
  .hide-on-mobile { display: none; }
  .grid { width: 100%; margin-bottom: 20px; }
  .grid-padding-right { padding-right: 0px; }
  #header-top { height: auto; min-height: 113px; }
  #home-category { display: none; }
  #logo { top: 10px; width: 58px; height: 91px; left: 20px; }
  .header-text {
    padding-top: 10px;
    font-size: 13px;
  }
  .header-text-column {
    display: block;
    padding: 0px;
    margin-left: 70px;
  }
  .header-text SPAN {
    font-size: 20px;
  }
  .header-icons { display: block; }
  .meldbtn.link-more {
    margin-top: 10px;
  }
  #header-flags {
    padding-right: 14px;
    margin-top: 10px;
  }
  .header-flags-icons { padding-bottom: 0px; }
  .header-flag {
    margin-bottom: 10px;
    width: 36px;
    height: 22px;
    background-size: 36px 22px;
  }
  #search {
    display: none;
    float: none;
    margin: 10px 5px;
  }
  #search.search-show { display: block; }
  #search INPUT.search-field {
    border: 0px solid #000000;
    border-right: 5px solid #000000;
    background-color: #000000;
    background-image: url(images/vergrootglas-wit.svg);
    background-repeat: no-repeat;
    background-size: 19px auto;
    background-position: right center;
    color: #FFFFFF;
    width: 100%;
    font-size: 15px;
    padding: 4px 8px;
    height: 27px;
  }
  #header-image-front,
  #header-image { height: 200px; }
  #button-weg-van-deze-website {
    margin-top: 115px;
  }
  #nav { display: none; }
  #nav-mobile.menu-show { display: block; }
  #nav-front {
    height: auto;
    margin-top: 15px;
    margin-bottom: 0;
    background: none;
  }
  #nav-main-front { float: none; }
  #nav-main-front UL LI.menu-item { display: block; }
  #nav-main-front UL LI.menu-item  A {
    display: block;
    background-color: #057EB2;
    padding: 10px 20px;
    margin: 0;
    height: auto;
    border-top: 2px solid #FFFFFF;
    border-left: 0;
    text-align: left;
    font-size: 30px;
  }
  #nav-main-front UL LI.menu-item:first-child A { border-top: 0px; }
  .page-menu-sub-mobile { display: block; }
  .page-menu-sub-desktop { display: none; }
  UL.page-menu-sub { margin-right: 0; }
  #footer UL LI { display: block; }
  .button-doorlink {
    display: block;
    width: auto;
    margin-left: 0;
  }
  .button-popup { display: none !IMPORTANT; }
  .agenda-tile {
    width: auto;
    height: auto;
    margin-right: 0px;
    float: none;
  }
  .news-tile {
    width: auto;
    height: auto;
    margin-right: 0px;
    float: none;
  }
  .document-tile {
    flex-basis: 47%;
  }
  .document-tile-summary { height: auto; }
  .document-content {
    display: block;
    position: relative;
    float: none;
    width: auto;
    left: 0;
  }
  .document-download {
    display: block;
    position: relative;
    float: none;
    width: auto;
    left: 0;
  }
  FORM.wpcf7-form { width: auto; }
}

@media only screen and (max-width: 499px) {
  .wrapper { width: 100%; padding: 0 20px 0 20px; }
  #nav-mobile .wrapper { padding: 0; }
  #nav-front .wrapper { padding: 0; }
  .hide-on-mobile { display: none; }
  .grid { width: 100%; margin-bottom: 20px; }
  .grid-padding-right { padding-right: 0px; }
  #header-top { height: auto; min-height: 113px; }
  #home-category { display: none; }
  #logo { top: 10px; width: 58px; height: 91px; left: 20px; }
  .header-text {
    padding-top: 10px;
    font-size: 13px;
  }
  .header-text-column {
    display: block;
    padding: 0px;
    margin-left: 70px;
  }
  .header-text SPAN {
    font-size: 20px;
  }
  .header-icons { display: block; }
  .meldbtn.link-more {
    margin-top: 10px;
  }
  #header-flags {
    padding-right: 14px;
    margin-top: 10px;
  }
  .header-flags-icons { padding-bottom: 0px; }
  .header-flag {
    margin-bottom: 10px;
    width: 36px;
    height: 22px;
    background-size: 36px 22px;
  }
  #search {
    display: none;
    float: none;
    margin: 10px 5px;
  }
  #search.search-show { display: block; }
  #search INPUT.search-field {
    border: 0px solid #000000;
    border-right: 5px solid #000000;
    background-color: #000000;
    background-image: url(images/vergrootglas-wit.svg);
    background-repeat: no-repeat;
    background-size: 19px auto;
    background-position: right center;
    color: #FFFFFF;
    width: 100%;
    font-size: 15px;
    padding: 4px 8px;
    height: 27px;
  }
  #header-image-front,
  #header-image { height: 200px; }
  #button-weg-van-deze-website {
    margin-top: 115px;
  }
  #nav { display: none; }
  #nav-mobile.menu-show { display: block; }
  #nav-front {
    height: auto;
    margin-top: 15px;
    margin-bottom: 0;
    background: none;
  }
  #nav-main-front { float: none; }
  #nav-main-front UL LI.menu-item { display: block; }
  #nav-main-front UL LI.menu-item  A {
    display: block;
    background-color: #057EB2;
    padding: 10px 20px;
    margin: 0;
    height: auto;
    border-top: 2px solid #FFFFFF;
    border-left: 0;
    text-align: left;
    font-size: 30px;
  }
  #nav-main-front UL LI.menu-item:first-child A { border-top: 0px; }
  .page-menu-sub-mobile { display: block; }
  .page-menu-sub-desktop { display: none; }
  UL.page-menu-sub { margin-right: 0; }
  #footer UL LI { display: block; }
  .tekst-meldpunt { margin-top: 20px; }
  .button-doorlink {
    display: block;
    width: auto;
    margin-left: 0;
  }
  .button-popup { display: none !IMPORTANT; }
  .agenda-tile {
    width: auto;
    height: auto;
    margin-right: 0px;
    float: none;
  }
  .news-tile {
    width: auto;
    height: auto;
    margin-right: 0px;
    float: none;
  }
  .document-tile {
    flex-basis: 100%;
  }
  .document-tile-summary { height: auto; }
  .document-content {
    display: block;
    position: relative;
    float: none;
    width: auto;
    left: 0;
  }
  .document-download {
    display: block;
    position: relative;
    float: none;
    width: auto;
    left: 0;
  }
  FORM.wpcf7-form { width: auto; }
}