/* 0. Mobiele versie al vanaf < 991px (oude homepage: < 768px).
   Kopie van de mobiele regels uit main.css (max-width: 767px en 480-767px), hier ook
   toegepast op 768-990px. Regels voor andere paginatypes (body.page, body.news, ...) zijn
   weggelaten: dit bestand wordt alleen door home2027 geladen.
   Staat bewust bovenaan, zodat de 2027-regels hieronder net als op mobiel voorgaan.
   Let op: wijzig je de mobiele regels in main.css, werk dit blok dan ook bij. */
@media only screen and (min-width: 768px) and (max-width: 990px) {
	#pay-off {
		bottom: 80px;
		left: 0;
		/* padding: 0 6%; */
	}
	.banner-container.klaarvoor2026 {
		top:80px;
		width: calc(100% - 40px);
	}
	.banner-right {
    font-size: 24px;
    padding: 8px 10px;
    margin-right: 40px;
    /* text-align: right; */
    float: left;
	}
	#samenlerenengroeien {
		bottom: 80px;
		left: 0;
		padding: 0 6%;
		font-size:24px;
	}
	#banner_voorlichtingsavonden {
    right: auto;
    left: 40px;
	}
  table#form_table td {
    display: block;
  }
  .show_responsive {
    display: block;
  }
  form div.formrow.floatleft {
    width: 98%;
    max-width: 400px;
  }
  form div.formrow.small.floatleft {
    width:25%;
  }
  table.ouderraad td {
    display: block;
    width: 100%;
    padding-bottom: 40px;
  }
  table.ouderraad td:nth-child(2n) {
    padding-left: 0;  
    width: 100%;
  }
	.wrapper {
		width:96%;
		padding:0 2%;
	}
	header, .scroll header {
		height:60px;
		background-image:none;
		z-index:100;
		position:fixed;
		border-bottom: 1px solid #c6c5c6;
	}
	#header-content {
		width:96%;
		padding:0 2%;
	}
	a#logo, .scroll a#logo  {
		width:150px;
		height: 46px;
		top:8px;
		left:2%;
	}
	#topnav-container {
		border:none;
	}
	#mobile-nav-icon {
		display:block;
		width:38px;
		height:34px;
		background-image: url(../images/mmenu.png);
		background-repeat: no-repeat;
		position:absolute;
		right:10px;
		top:12px;
	}
	.topnav, #topnav-container .nav-icons, .scroll #topnav-container .nav-icons, .scroll #subnav, #bigmenu, .scroll #bigmenu, #smallmenu, .scroll #smallmenu {
		display:none;
	}
	#navmenu {
		visibility: visible;
		z-index:999;
	}
	#topnav, #subnav, .scroll #subnav{
		display:none;
	}
	#search, .scroll #search {
		display:none;
	}
	/*nav *********************************/
	#mainnav {
		display:none;
	}
	/* home ***************************/
	#slider {
		margin-top:60px;
	}
  #slider:after {
    content: " ";
    z-index: 9;
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
/*     background: rgba(0, 0, 0, 0.3);
 */  }
	#pay-off {
		left:40px;
		/* top:30px; was 20 voor kerstmuts */
	}
	#pay-off .po1 {
		font-size:20px;
		margin-bottom:14px;
		min-height:28px;
		padding:5px 10px;
	}
	#pay-off .po2 {
		font-size:20px;
		line-height:36px;
		min-height:28px;
		min-width:130px;
	}
	#banner.head {
		left:2%;
		top:220px;
	}
	#banner.head .logo {
		margin-bottom:5px;
	}
	#banner.head .logo img {
		width:100px;
		height:inherit;
	}
	#banner.head .text {
		font-size:14px;
		line-height:18px;
		padding:4px 0 6px 0;
	}
  /* .banner-container {
    top: 140px;
    left: 2%;
    width: 96%;
  }
   */
  .banner-container h2 {
    font-size: 28px;
  }
  #banner_opendag {
    margin: 0;
    width: 320px;
    float: right;
  }
  #banner_opendag img {
    width: 320px;
    height: inherit;
  }
  #banner_voorlichtingsavonden {
    margin: 0;
    width: 320px;
/*     float: right;
 */  }
  #banner_voorlichtingsavonden img {
		width: 96%;
    max-width: 320px;
    height: inherit;
  }
  #banner_meldjeaan {
    width: 160px;
    float: none;
  }
  #banner_meldjeaan img {
    width: 160px;
    height: inherit;
  }
	#banner.prijsvraag {
    left: calc(4% + 136px);
    top: 278px;
	}
	#banner.prijsvraag img {
		width: 70px;
	}
	#shortlinks {
		left:2%;
		top:130px;
	}
	#shortlinks ul li a {
		font-size: 14px;
		//height: 27px;
		line-height: normal;
		margin: 0 30px 10px 0;
		padding: 5px 30px 5px 10px;
		background-position: 95% center;
		//width: 146px;
	}
	a.ga-verder {
		background-size: contain;
		font-size: 14px;
		height: 30px;
		padding-top: 20px;
		width: 100px;
	}
	/* content blokken */
	.container {
		padding:40px 0 0 0;
	}
	div.borders {
		margin-top: 24px;
		margin-bottom:20px;
		min-height: 170px;
		padding-top: 16px;
	}
	ul.agenda li span.date {
		line-height: 28px;
	}
	ul.agenda li span.text {
    	font-size: 16px;
	    line-height: 22px;
		min-height: 64px;
	}
	ul.agenda li {
		padding:10px 0 0 0;
	}
	ul.agenda li img {
    max-width: 100%;
    height: inherit!important;
	}
	.container.news-agenda li.item {
		min-height: inherit;
	}
	li.item h3 {
	    font-size: 18px;
		line-height:24px;
	}
	li.item {
		font-size: 15px;
		line-height:20px;
	}
	.expand .title {
		font-size:22px;
	}
	.overlay a.expand {
		bottom: 50%;
	}
	.container.jouw-candea ul {
		margin-left: 0;
	}
	.col.one-third {
		margin-left: 0;
		width: 100%;
	}
	.col.two-third {
		width: 100%;
	}
	.col {
		float: none;
	}
  .twocol {
      width: 100%;
      margin-left: 0;
  }
	
  .twocol:first-child {
    margin-bottom: 40px;
  }
  .xlarge {
		font-size:22px;
	}
	.maincontent img[style] {
		width:100% !important;
		height:inherit !important;
	}
	.maincontent img.noresize[style] {
		width: auto !important;
		height:inherit !important;
	}
	.maincontent .col1 {
		display:none;
	}
	.maincontent table.apps td {
		width: 25% !important;
		padding: 0 5px;
	}
	/* .maincontent table.apps td p a {
		display: none;
	}
 */
	.maincontent table.apps td img[style], .maincontent table.apps td img.noresize[style] {
		/* width:30% !important; */
	}
	ul#group8 {
		margin-left:0;
		margin-top:60px;
	}
	ul#group8 li {
		float:none;
		width:100%;
		margin-left:0;
	}
	li.img-mouseover.hover .overlay {
	  height: 0%;
	}
	#act-content {
		width:100%;
		margin:0 auto 10px;
	}
	#act-content img, #act-content iframe {
		width:100%;
	}
	#act-content img {
		height:inherit;
	}
	#act-overview {
		padding-top:0px;
		width:96%;
		padding:20px 2% 0 2%;
	}
	.textblock {
		padding:10px 10px 10px;
		font-size:14px;
		line-height:18px;
		margin-top:0px;
	}
	.textblock.first {
		font-size:16px;
		line-height:22px;
		margin-top:60px;
	}
	.group78 #act-content img.act-img, .group78 #act-content iframe {
		padding-left:0;
		margin-top:0px;
	}
  .subcontent .content {
    font-size: 14px;
    line-height: 1.5em;
}
	
	/* contact */
	td.label {
		width:120px;
	}
	.formfield, textarea {
		width:100%;
	}
	
	/* footer **********************************/
	.footer-content {
		width:96%;
		padding:0px 2% 0 2%;
	}
	.footercol {
		float:none;
	}
	#bigmenu .wrapper {
		padding: 0 2%;
		width: 96%;
	}
	#bigmenu ul.bigmenu-nav {
    margin: 0 0 0 -2%;
    padding: 0;
	}
	
	#bigmenu.footer {
		display:block;
	}
	#bigmenu.footer li {
		width: 48%;
		min-height: inherit;
		margin-bottom: 40px;
		/* padding-left: 0; */
		margin-left: 2%;
		max-width: 270px;
		box-sizing: border-box;
		margin-right: 0;
	}
	#bigmenu.footer li li {
		margin-bottom:0;
		float: none;;
	}
	#color1 .footer-content {
		padding:0;
	}
	#color2 .col1 {
		width:100%;
	}
	#color2 .col2 {
		padding-top: 24px;
		width: 100%;
	}
	#credits {
		width: 100%;
		padding:60px 0 20px 0;
		text-align:center;
		background-position: center top;
	}
/* (main.css: 480-767px) */
	.wrapper {
		width:96%;
		padding:0 2%;
	}
/* (main.css: 480-767px) */
	#bigmenu.footer li {
		float:left;
		/*width:auto;*/
		min-height:300px;
		margin-bottom:40px;
	}
/* (main.css: 480-767px) */
	#bigmenu.footer li li {
		min-height:inherit;
		margin-bottom:0;
	}
/* (main.css: 480-767px) */
	#search, .scroll #search {
		display:block;
		right: 110px;
		top: 14px;
	}
/* (main.css: 480-767px) */
	.nav-icons.footer {
		width: 420px;
	}
/* (main.css: 480-767px) */
	/* groep 7-8 */
	ul#group8 li {
		margin: 0 0 55px 50px;
		width: calc(49% - 50px);
		float:left;
	}
/* (main.css: 480-767px) */
	ul#group8 {
		margin-left:-50px;
	}
/* (main.css: 480-767px) */
	li.item {
		float:left;
	}
/* (main.css: 480-767px) */
  #banner_opendag {
    padding: 0;
  }
/* (main.css: 480-767px) */
  #banner_meldjeaan {
  }
/* (main.css: 480-767px) */
  #banner_opendag img {
  }
/* (main.css: 480-767px) */
  #banner_meldjeaan img {
  }

	/* tablet-regels uit main.css (768-991px) die mobiel niet overschrijft: terug naar basiswaarde */
	#bigmenu li {
		padding-left: 25px;
		font-size: inherit;
	}
	body.home .wrapper.top {
		margin-top: 220px;
	}
	.banner-container {
		left: 40px;
	}
	.wrapper.slider-overlay {
		top: auto;
	}
}

header {
	background-color: transparent;
    position: absolute;
}
.bxslider li::before {
	display: none;
}
.scroll a#logo {
    top:47px;
}
#slider {
    margin-top: 0;
}
#search {
    display: none;
}
#topnav-container {
	border-bottom: none;
}
.topnav.left {
	display: none;
}
.topnav.right {
    margin-right: 60px;
}
.nav-icons {
	display: none;
}
.topnav.right.fontlight {
	/* padding: 0 40px 0; */
	margin-top: 56px;	
}
.topnav ul li a {
    padding: 10px 0;
    font-size: 20px;
    font-family: 'acumin-pro';
    color: #fff;
    border: none;
    margin-left: 20px;
    height: auto;
}
.topnav ul li a:hover {
	background-color:transparent;
}
.topnav ul li a.active {
	background-color:transparent;
}
.topnav.right ul li:nth-child(3) a {
	display: none;
}
.topnav.right ul li:last-child a {
	/* background-image:none; */
	border: none;
    margin-left: 20px;
}
.topnav.right ul li:last-child a {
    background-position: 84% 67%;
    padding-bottom: 10px;
    background-image: url("../images/sign-in-alt-solid-y.svg");
    background-size: 24px;
    padding-right: 50px;
}

#mainnav {
    position: absolute;
    margin: 0;
    top: 53px;
    z-index: 0;
    left: 18.6vw;
}
#mainnav ul li a {
    font-family: 'acumin-pro';
    font-size: 26px;
    font-weight: 400;
    padding-bottom: 0;
    height: auto;
    border: none;
    color: #fff;
    padding: 0;
    margin-right: 0;
}
#mainnav > ul li a {
	text-transform: none;
}
#mainnav > ul li a:hover, #mainnav > ul li.active a, #mainnav > ul li a.active, #mainnav > ul li a.hover {
	border-bottom:none;
}
#mainnav ul ul {
    background-color: transparent;
    background-image: url('/images/achtergrond_menu.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -95px;
    border-top: none;
    opacity: 0.95;
}
#mainnav ul ul li a {
    color: #fff;
}
a#logo {
    background-image: url('/images/svg/Candea College_logo_met_pay_off_diap.svg');
    top: 47px;
    left: 61px;
    width: 237px;
    height: 243px;
}

#maakkennis {
    position: absolute;
    right: 8.3vw;
    top: 23.4vw;
}
#maakkennis h1 {
    font-family: acumin-pro-extra-condensed, sans-serif;
    font-weight: 900;
    font-size: 6.2vw;
    color: #fff;
    text-transform: none;
    line-height: 0.86em;
    margin-bottom: 50px;
}
a.button-homepage {
    display: inline-flex;
    padding: 1.6vw 4.6vw 1.9vw 1.6vw;
    background-color: #FFB404;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 100px;
    font-size: 2.8vw;
    align-items: center;
    transition: background-color 0.3s ease;
}
a.button-homepage:hover {
    background-color: #000;
}
a.button-homepage:after {
    content: '';
    background-image: url('/images/svg/bt-arrow.svg');
    display: inline-block;
    width: 1.2vw;
    height: 2.2vw;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 20px;
}



/* 1. #mainnav: flex-container met twee lijsten, rechts uitgelijnd:
   ul.bigmenu-nav (hoofdmenu met uitklapmenu's) en ul.smallnav (Agenda, Contact, Inloggen).
   #mainnav loopt over de volle headerbreedte: het uitklapmenu (#mainnav ul ul) is absoluut
   gepositioneerd met width:100% t.o.v. #mainnav, net als in de oude versie (main.css). */
#mainnav {
    position: absolute;
    top: 53px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    padding-right: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    pointer-events: none; /* lege deel van de nav mag logo e.d. niet blokkeren */
}

/* 2. Beide lijsten horizontaal */
#mainnav > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}
#mainnav > ul > li {
    display: block;
    pointer-events: auto;
}
#mainnav > ul > li > a {
    text-decoration: none;
    display: block;
}

/* 3. Uitklapmenu: li is flex-item, zonder left start het paneel bij het menu-item i.p.v. links */
#mainnav ul ul,
.scroll #mainnav ul li ul {
    left: 0;
    top: auto; /* direct onder het menu-item; main.css zet bij .scroll top:44px (overlapt) */
    text-align: left;
}
/* menu-item altijd boven het paneel, ook tijdens de fade */
#mainnav ul.bigmenu-nav > li > a {
    position: relative;
    z-index: 3;
}
/* Infaden i.p.v. display:none/block (main.css).
   Wisselen tussen items: het oude paneel blijft nog .3s volledig staan (opacity-delay) en
   faadt pas daarna uit; het nieuwe paneel faadt er bovenop (z-index) in. Zo blijft de witte
   achtergrond doorlopen en zie je de slider er niet tussendoor.
   visibility schakelt pas na de fade uit, zodat een verborgen paneel geen hover meer vangt. */
#mainnav ul.bigmenu-nav > li > ul {
    display: block;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    /*transform: translateY(10px);*//* schuift van onder op z'n plek, niet over het menu-item */
    transition: opacity .2s ease .3s, transform .2s ease .3s, visibility 0s linear .5s;
}
#mainnav ul.bigmenu-nav > li:hover > ul {
    visibility: visible;
    opacity: 1;
    z-index: 2; /* nieuw paneel boven het nog zichtbare oude */
    /* transform: translateY(0); */
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
}

/* 4. Smallnav: de items die voorheen in de topnav stonden */
#mainnav ul.smallnav {
    border-left: 2px solid #ffffff;
    padding-left: 30px;
}
#mainnav ul.smallnav li a {
    font-size: 20px;
    font-weight: 300;
    color: #ffffff;
    font-family: acumin-pro, sans-serif;
    padding: 3px 0;
}

/* 5. Inloggen met icoon */
#mainnav ul.smallnav li a.login {
    background-image: url("../images/sign-in-alt-solid-y.svg");
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: 84% 57%;
    padding: 10px 50px 10px 1px;
}

/* 6. Tot en met 1400px: smallnav als eigen regel boven het hoofdmenu, rechts uitgelijnd */
@media (max-width: 1400px) {
    #mainnav {
        top: 33px;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px; /* ruimte tussen smallnav en hoofdmenu */
    }
    #mainnav ul.smallnav {
        order: -1;
        border-left: none;
        padding-left: 0;
    }
    #mainnav ul.bigmenu-nav {
        margin-right: 20px;
    }
}


/* Mobiel 2027: < 991px (zie blok 0 bovenaan) */
@media only screen and (max-width: 990px) {
    #mainnav {
        display: none; /* mobiel: mmenu i.p.v. mainnav (zoals main.css) */
    }
    a#logo, .scroll a#logo {
        width: 100px;
        height: 103px;
        top: 8px;
        left: 4%;
    }
    #maakkennis {
    right: 60px;
    top: 300px;
}
    #maakkennis h1 {
        font-size: 50px;
        line-height: 0.86em;
        margin-bottom: 50px;
    }
    a.button-homepage {
        font-size: 22px;
        padding: 10px 40px 10px 20px;
    }
    a.button-homepage:after {
        width: 20px;
        height: 20px;
    }
    #mobile-nav-icon {
        display: block;
        width: 42px;
        height: 26px;
        background-image: url(../images/svg/hamburger.svg);
        background-repeat: no-repeat;
        position: absolute;
        right: 10px;
        top: 17px;
    }
    header, .scroll header {
        border-bottom: none;
    }

}