@media (max-width: 1055px) {
  .column1 {
    width: 100%;
    float: none;
    margin-left: 0;
  }
  .block.links {
    float: none;
    width: 100%;
  }
  
  #slider .background, #header, #footer #skyline, #footer, .container {
    overflow: hidden;
    min-width: 100%;
    box-sizing: border-box;
  }
  #slider .content {
    box-sizing: border-box;
    padding: 60px 20px 0 20px;
    width: 100%;
  }
  .block input {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #slider .content .controls {
    right: auto;
    left: 20px;
    float: none;
    max-width: 100%;
  }
  #slider .content a.button {
    float: none;
    max-width: 100%;
    display: inline-block;
  }
  .container {
    width: 100%;
  }
  #footer #skyline .container {
    padding: 60px 0 40px 25px;
  }
  #footer #skyline ul {
    position: static;
  }
  /* End home CSS */
  /* Other page CSS */
  .overview .column1,
  .overview .column2,
  .pagination,
  .pagination .pagination-pages,
  .intro .photo,
  .intro .photo .mask
  {
    width: 100%;
  }
  .column1_2 {
    margin-left: 0;
  }
  .main .content .border {
    margin-right: 20px;
  }
  .related .block span.title {
    padding-left: 20px;
  }
  .intro .photo .mask .content {
    padding-right: 0;
    width: 95%;
    box-sizing: border-box;
  }
  .intro .photo {
    height: auto;
  }
  .container.intro .mask {
    height: auto;
    padding-left: 25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .pagination a.previous,
  .pagination a.next {
    display: none;
  }
  .main .bar .right {
    /* margin: 5px 45px; */
  }
  .block.course div.left,
  .main .content img,
  .main .content .rotator .rotator-container ,
  .column1_2 {
    max-width: 100%;
  }
  .main .content .rotator .rotator-container {
    height: auto;
  }
  html h1 {
    max-width: 100%;
    word-break: break-all;
    line-height: 44px;
    font-size: 30px;
  }
  h1.times {
    line-height: 36px;
    font-size: 28px;
  }
  .intro {
    height: auto;
  }
  p {
    box-sizing: border-box;
    word-break: break-word;
  }
  img.border.left {
    float: none;
    max-width: 100%;
  }
  .block.course img.border.left {
    float: left;
  }
  #filterForm .search button {
    
  }
  .main ul.course-list li a {
    width: 100%;
  }
  /* For Google Map */
  .content p iframe {
    max-width: 100%;
  }
  /* Tables */
  .table-wrapper {
    overflow: auto;  
  }
  table {
    overflow: auto;
  }
  html #header #menu li a.active {
    color: #0289a1 !important;
  }
  ul.news-list li a span.description {
    width: 100%;
  }
  #slider {
    max-width: 100%;
  }
  .main {
    margin-top: 2%;
  }
  .intro .photo .mask {
    padding-bottom: 24px;
  }
  /* Slider overlay image */
  html #slider .background {
    background-size: cover !important;    
    background-position: center !important;     
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
    /* Slider actual image */
    #slider .background .photo {
      background-position: center top;
      background-size: cover;
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      margin-left: auto;
      margin-right: auto;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      opacity: 0.6 !important;
    }
      /* Dark image overlay */
      html #slider .background .photo::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
        /* background-color: rgba(0,0,0,0.56); */
      }
      /* Slider image mask */
      #slider .background .mask {
        background-position: center top;
        background-size: cover;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      }
  .intro.subscribe .photo .mask {
    padding-left: 25px;
  }
  #slider .content .controls a {
    margin-right: 5px;
  }
  #slider .content .controls a, #slider .content .controls a span {
    width: 15px;
    height: 15px;
  }
  .intro .photo, .intro .photo .mask {
    min-height: 360px;
  }
}

.hamburger-button {
  display: none;
}

/* Mobile navigation */
@media (max-width: 1055px) {
  /* CSS for JS collapse */
  .collapse {
    display: block;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  }
  .collapse.show {
    max-height: 99em;
    transition: max-height .5s ease-in-out;
  }
  .nav-scroll-wrapper {
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
    max-height: calc(100vh - 99px);
    padding-bottom: 40px;
  }
  .collapse.collapse-menu.show::after {
    content: '';
    height: 45px;
    width: 100%;
    background: red;
    position: absolute;
    pointer-events: none;
    bottom: 15px;
    left: 0;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 23%, rgba(255,255,255,0.8) 29%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 23%,rgba(255,255,255,0.8) 29%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 23%,rgba(255,255,255,0.8) 29%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 );
  }
  .hamburger-button {
    display: block;
    background: none;
    border: none;
    float: right;
    position: relative;
    top: 16px;
  }
  .hamburger-button span {    
    display: block;
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
  }
  #header.header2014 #search:before {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  #header.header2014 {
    
  }
  #header #submenu, #header.header2014 #menu, #header #othermenu, #header div.right, #header .left, #header #search input {
    float: none;
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
  }
  #header.header2014 {
    padding-left: 25px;
  }
  #header.header2014 #header-bar {
    padding-top: 0;
  }
  /* logo */
  #header img.logo {
    margin: 0;
    width: 140px;
  }
  #header .left {
    padding: 10px 0 20px;
    margin: 0;
  }
  /* Compleet cursusaanbod */
  #header #othermenu {
    margin-bottom: 0;
  }
  #header #othermenu li a {
    padding: 0;
  }
  /* Searchbar */
  #header.header2014 #search {
    float: none;
    display: block;
    margin-top: 8px;
  }
  #header #search input, #header #search button {
    position: static;
    display: inline-block;
  }
  /* menu top / submenu */
  #header #submenu {
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 2px;
  }
  #header #submenu li {
    float: none;
    display: block;
  }
  #header #submenu {
    background: none;
  }
  #header #submenu li a.button {
    margin: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-left: 0;
    margin-right: 0;
  }
  /* menu bottom / primary menu */
  #header.header2014 #menu {
    
  }
  #header #menu li {
    float: none;
  }
  #header #othermenu {
    
  }
  /* Style all menu items identically on mobile */
  #header #submenu li a {
    border-left: none;
    padding-left: 0;
  }
  #header #othermenu li {
    float: none;
  }
  #header #submenu li a,
  #header.header2014 #menu li a, 
  html #header.header2014 #menu li.green a,
  html #header.header2014 #menu li.red a,
  html #header.header2014 #menu li.yellow a,
  html #header.header2014 #menu li.purple a,
  #header #othermenu li:first-child a {
    float: none;
    background-color: #fff;
    color: #000;
    padding: 10px;
  }
  #header.header2014 #menu li a:hover, #header #submenu li a:hover,
  #header #othermenu li:first-child a:hover {
    background-color: #f2f2f2 !important;
    color: #000;
  }
  #header.header2014 #menu li a:hover:before, #header.header2014 #menu li a.active:before, 
  #header.header2014 #menu li.purple a:hover:after, #header.header2014 #menu li.purple a.active:after {
    content: none !important;
  }
  /* Menu CTA */
  #header #submenu li a.button {
    background-color: #03adcc;
    margin-top: 8px;
  }
  #header #submenu li a.button:hover {
    background-color: #008da7 !important;
  }
  
  /* Remove stuff from .fixed for mobile */
  #header.fixed {
    padding-bottom:0px;
    position: fixed;
    top: 0;
  }
	#header.fixed #header-bar {
	  position:static; 
    top: auto;
    margin-left:0; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none;
    box-shadow: none; 
  }
	#header.fixed #header-bar #menu {
	  padding-left:0;
  }
	#header.fixed #header-bar #search {
	  margin-right:0;
  }
  #header.fixed.header2014 #header-bar { 
    margin-left: 0; 
  }
  #header.fixed.header2014 #header-bar #menu { 
    margin-left: 0; 
    padding-left: 0; 
  }
  #header .logofeest {
    display: none !important;
  }
  /* searchbar */
  #header #search form {
    position: relative;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #header #search form input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
  #header #search button  {
    position: absolute;
  }
}

/* Font-size adjustments */
@media (max-width: 500px) {
  html h1 {
    font-size: 26px;
    line-height: 38px;
  }
  
}

/* *** Tablet Addons *** */
@media (min-width: 640px) and (max-width: 1055px) {
  .intro .photo {
    background-position: center top;
  }
  .intro .photo .mask {
    background-position: center top;
    background-size: 76%;
  }
  .column1, .block.links {
    width: 48%;
    margin-left: 1% !important;
    margin-right: 1%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }  
  .overview .column1 {
    width: 36%;
    margin-left: 1% !important;
    margin-right: 1%;
    float: left;
  }
  .overview .column2 {
    width: 60%;
    margin-left: 1% !important;
    margin-right: 1%;
    float: left;
  }
  .intro .photo {
    background-position: center top;
  }
  .intro .photo .mask {
    background-position: center top;
    background-size: cover;
    position: relative;
  }
  .intro .photo .mask::before {
    position: absolute;
    content: '';
    background: rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .intro .photo .mask .content {
    position: relative;
    z-index: 1;
  }
  
}
@media (max-width: 640px) {
  .intro .photo {
    background-position: center top;
  }
  .intro .photo .mask {
    background-position: center top;
    background-size: cover;
    position: relative;
  }
  .intro .photo .mask::before {
    position: absolute;
    content: '';
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .intro .photo .mask .content {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 640px) {
  #slider .background .photo {    
    opacity: 0.46 !important;
  }
}