/* SET VARIABELEN */
:root {
  --blauw: #002349;
  --goud: #c29b40;
  --grijs: #f2f3f4;
  --schaduw: 0px 0px 10px #c1c1c1;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://dutchcaribbean.com/app/themes/go-online-child/css/fonts/lato/Lato-Light.ttf');
}

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('https://dutchcaribbean.com/app/themes/go-online-child/css/fonts/josefin-sans/JosefinSans-Light.ttf');
}

@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('https://dutchcaribbean.com/app/themes/go-online-child/css/fonts/josefin-sans/JosefinSans-Bold.ttf');
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

	body {
		font-size:1.1rem;
	}

	.container{
		width: 90%;
	}

	.fonds-popup {
		width:50vw;
	}


	/* MENU */

	header.mobile i{
		font-size: 28px;
		line-height: 45px;
	}

	.mobile-menu-container ul li a {
		font-size: 25px;
	}

	.mobile-menu-container .logo img {
		width: 50%;
	}
	
	.menu-sluiten{
		font-size: 28px;
	}

	/* FOTO HEADER */

	.foto-header{
		float: left;
		width: 100%;
		clear: both;
		margin-bottom: 40px;
	}

	.header-tekst{
		width: 80%;
		margin: 0 auto;
	}

	.header-tekst h1 span::after {
		margin-top: 10px;
		margin-bottom: 5px;
		width: 50%;
	}

	.header-foto{
		position: relative;
		float: right;
		margin-top: -73%;
		transform: translateY(50%);
		width: 80%;
	}

	.header-buttons{
		clear: both;
		float: left;
		width: 100%;
	}

	.header-buttons .button-container{
		width: 48%;
		margin-right: 15px;
		float: left;
	}

	.header-buttons .button-container:last-child{
		margin-right: 0;
	}

	/* RASTER */

	.tekst-raster{
		/* float: left;
		width: 100%;
		clear: both; */
	}

	.tekst-raster .owl-carousel{
		display: block;
	}

	.tekst-raster .owl-carousel > div{
		float: left!important;
	}

	.raster-box{
		text-align: left;
	}

	/* CALL TO ACTION BLOCK */

	.cta-inner{
		/* position: absolute;
		top: 50%;
		left: 15px;
		transform: translate(0, -50%); */
		display: flex;
		flex-direction: column;
		height:100%;
		justify-content: center;
	}


	/* FOOTER */
	.footer-logo .logo {
		width: 30%;
	}

	/* COPY */

	.copy ul li{
		display: block;
	}

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

	.container-fluid {
		width:80%;
	}

	/* BUTTONS */

	a.button-gold{
		display: inline-flex;
	}

	.fonds-popup {
		width:60vw;
	}

	/* HEADER */

header.header-new {
	padding:100px 0px;
}

	header ul{
		margin: 0;
		padding: 0;
	}

	header ul.menu{
		position: absolute;
		right: 170px;
		top: 50%;
		transform: translate(0, -50%);
	}

	header ul li{
		list-style-type: none;
		display: inline-block;
	}

	header ul li a{
		font-weight: 500;
		text-transform: uppercase;
		display: block;
		font-size: 14px;
		padding-right: 5px;
		margin-right: 5px;
		/*border-right: 1px dotted var(--goud);*/
		color: #ffffff;
		transition: all 300ms ease-in-out;
	}

	header ul li a:hover{
		color: var(--goud);
		text-decoration: none;
	}

	header ul li:last-child a{
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}

	header ul li.menu-item-has-children > a:after{
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f107";
		margin-left: 10px;
		font-size: 14px;
	}

	header ul li ul{
		display: none;
	}

	header ul li:hover ul{
		display: block;
		position: absolute;
		background: var(--blauw);
		padding: 20px;
		margin-left: -15px;
	}

	header ul li ul li{
		display: block;
	}

	header ul li ul li a{
		padding-bottom: 10px;
		margin-bottom: 10px;
		/*border-bottom: 1px dotted var(--goud);*/
		border-right: 0;
		display: block;
		width: 100%;
		text-align: left;
	}

	header ul li ul li:last-child a{
		padding-bottom: 0;
		margin-bottom: 0;
	}

	/* TAAL SWITCH */

	.taal-switch{
		width: auto;
		position: absolute;
		right: 125px;
		top: 50%;
		transform: translate(0, -50%);
		margin-top: 0;
	}

	.taal-switch ul{
		margin: 0; padding: 0;
	}

	.taal-switch ul li{
		list-style-type: none;
		display: inline-block;
		margin-right: 15px;
	}

	.taal-switch ul li:last-child{
		margin-right: 0;	
	}
	
	.koersticker{
		overflow: hidden;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translate(0, -50%);
		width: 100px;
	}



	/* FOTO HEADER */

	.header-tekst{
		width: 51%;
	}

	.header-foto{
		margin-top: -44%;
		width: 51%;
	}


	/* COPY */

	.copy ul li{
		display: inline-block;
		margin-right: 15px;
	}

	.copy ul li:last-child{
		margin-right: 0;
	}


}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

	.fonds-popup {
		width:40vw;
	}

	.investor-popup{
		width: 60%;
	}

	.investor-popup .button-container{
		width: 40%;
		float: left;
		margin-right: 15px;
	}

	.investor-popup .button-container:last-child{
		margin-right: 0;
	}

	/* HEADER */

	header ul.menu{
		right: 200px;
	}

	header ul li a{
		font-size: 14px;
		padding-right: 10px;
		margin-right: 10px;		
	}

	/* TAAL SWITCH */

	.taal-switch{
		right: 140px;
	}

	.koersticker{
		overflow: hidden;
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translate(0, -50%);
		width: 100px;
	}

	.header-buttons {
		margin-top: 20px;
	}

	/* PORTFOLIO ITEM */

	.portfolio-specs{
		background: none;
	}

	.foto-thumbs{
		width: 80%;
		margin: 0 auto;
	}

	.single-portfolio,.portfolio-maps{
		z-index: 10;
		position: relative;
	}

	.acf-map{
		height: 320px;
	}
	.grey-bg{
		width: 100%;
		position: absolute;
		top: 42vh;
		left: 0;
		background: #f7f7f7;
		height: 100vh;
		z-index: 0;
	}

}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

	.fonds-popup {
		width:70vw;
	}

	.container {
		width: 70%;
	}

	header ul li a{
		padding-right: 15px;
		margin-right: 15px;
		font-weight:800;
	}

	header.desktop figure.logo {
		height: 85px;
	}

	/* FOTO HEADER */

	.foto-header{
		padding-bottom: 12%;
	}

	.header-tekst{
		margin-top: 10%;
	}

	.header-foto{
		margin-top: -59%;
		width: 80%;
	}

	/* CONTENTBLOCK */

	.content-block{
		margin: 60px 0;
	}

	.content-block:first-child figure{
		margin-top: -14%;
	}

	/* PERSBERICHTEN BLOCK */

	.persberichten{
		padding: 60px 0;
	}

	.persbericht-box .persbericht-foto{
		max-height: 300px;
	}


	/* PORTFOLIO BLOCK */

	.portfolio-box .portfolio-foto{
		max-height: 300px;
	}

	/* PORTFOLIO ITEM */



	.grey-bg{
		top: 38vh;
		height: 80vh;
		z-index: 0;
	}


	/* COPY */

	.footer-logo .logo {
	  width: 200px;
	}

}