/* ----- */

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

html,
body { 
	height: 100%;
	margin: 0;
}

/* ----- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li{
	color: #444;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 10px 0;
	font-family: 'Raleway', sans-serif;
}
td{
	color: #FFF;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 0 0;
	font-family: 'Raleway', sans-serif;
}
#jro_bottomOfSite p {
	color: #f4f4f4;
}

h1 { font-size: 45px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
p, li, a, td{ font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

h5,
h6 { font-weight: bold; }

h5,
h6 { margin-bottom: 20px; }

/* Als je tekst selecteert */
::selection {
	background: #005c47; /* #efe4b0 */
	color: #FFF;
	text-shadow: none;
}
::-moz-selection {
	background: #005c47; /* Firefox */
	color: #FFF;
	text-shadow: none;
}
::-webkit-selection {
	background: #005c47; /* Safari */
	color: #FFF;
	text-shadow: none;
}

/* Landing CSS */
#jro_landing {
    width: 100%;
	/* de hoogte zet ik tegoei in JS */
}
/* ----- */

/* Menu CSS */
.navbar {
	/* position: -webkit-sticky; */ /* Safari */
	/* position: sticky;         */ /* Ik maak sticky in .js, ipv in .css. Sticky maken in .css lukt om de een of de andere reden niet. Of ja, het lukt wel, maar als je dan op een smal scherm, het menu uitklapt, dan klapt het menu niet uit OVER het venster waardoor je merel haar foto ziet, maar duwt dat venster naar onder. Dit is ongewenst. (Bijkomstig zie je dat de scrollbar korter wordt tijdens het versmallen van de sticky menu. Als je de scrollbar naar beneden schuift, dan kan je een onstabiel gebied vinden.)*/
	/* top: 0;                   */ /* hoort bij sticky */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
	width: 100%;   /* breedte van achtergrond kleur, dus laten staan op 100% */
	margin:0 auto; /* display:block horizontaal centreren */
	z-index:1000;
}
.navbar-uitlijning {
	width: 100%;   /* breedte van menu tekst, dus mag je aanpassen */
	margin:0 auto; /* display:block horizontaal centreren */
}
.locatie-uitlijning {
	width: 100%;   /* breedte van menu tekst, dus mag je aanpassen */
	margin:0 auto; /* display:block horizontaal centreren */
}
.navbar .navbar-header .navbar-toggle{ /* Kleur van hamburger tekentje (buitenrand)*/
    border-color: #FFF;
}
.navbar .navbar-header .navbar-toggle:hover{ /* Kleur van hamburger tekentje (buitenrand)*/
    border-color: #ddd;
}
.navbar.is-sticky .navbar-header .navbar-toggle:hover{ /* Kleur van hamburger tekentje (buitenrand)*/
    border-color: #005c47;
}
.navbar .navbar-header .navbar-toggle .icon-bar { /* Kleur van hamburger tekentje (binnenste streepjes)*/
	background-color: #FFF;
}
.navbar .navbar-header .navbar-toggle:hover > .icon-bar { /* Kleur van hamburger tekentje (binnenste streepjes)*/
	background-color: #ddd;
}
.navbar.is-sticky .navbar-header .navbar-toggle:hover > .icon-bar { /* Kleur van hamburger tekentje (binnenste streepjes)*/
	background-color: #005c47;
}
.navbar .navbar-nav {
    padding: 5px 40px 5px 40px; /* initiele hoogte v tekst in menubalk. Deze 5px op 15px zetten indien je menubalk wil laten krimpen. */
    transition: .3s;
}
.navbar .navbar-header {
    padding: 5px 0 5px 40px; /* initiele hoogte v logo in menubalk. Deze 5px op 15px zetten indien je menubalk wil laten krimpen. */
    transition: .3s;
}
.locatie-uitlijning .locatie {
	padding: 15px 40px 15px 40px; /* initiele hoogte v tekst in menubalk */
	text-align: right;
}
.navbar li,
.navbar a {
	margin: 0 0 0 0;
}
.locatie a {
	padding: 15px;
}

/*
ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  display: block;
}
*/

.navbar .navbar-nav li a { color: #FFF }
.navbar .navbar-nav li:hover > a {color: #ddd;}
.navbar.is-sticky .navbar-nav li:hover > a {color: #005c47;}
.navbar .navbar-nav li:hover > a,
.navbar .navbar-nav li a,                           /* click eerst op INFO, click dan ergens anders. De achtergrond tijdens de laatste actie.*/
.navbar .navbar-nav li a:focus { background: none } /* click eerst op INFO, hover dan ergens anders. De achtergrond tijdens de laatste actie.*/
.navbar .navbar-nav li.active > a {	                /* Scroll doorheen de website. De sectie waar je je bevindt, wordt nu aangeduid.*/
	color: #005c47;
}


.navbar .navbar-header a { color: #FFF }
.navbar .navbar-header a:hover {color: #ddd;}
.navbar.is-sticky .navbar-header a:hover {color: #005c47;}
.navbar .navbar-header a:hover,
.navbar .navbar-header a:focus { background: none }

.locatie a { color: #FFF }
.locatie a:hover {color: #ddd;}
.locatie a:hover,
.locatie a:focus { background: none }

.navbar { background: none repeat scroll 0 0 #005c47 } /* Dit is alleen bij ines mogelijk, omdat achtergrond dezelfde kleur heeft. Zodat tekst niet onleesbaar wordt door achtergrond. OPGEPAST: bij een smal scherm doe ik deze teniet in @media only screen and (max-width: 768px). */
.navbar.is-sticky { background: none repeat scroll 0 0 #d37247 }
.navbar.is-sticky .navbar-nav { padding: 5px 40px 5px 40px; }   /* na scrollen: hoogte v tekst in menubalk */
.navbar.is-sticky .navbar-header { padding: 5px 0 5px 40px; }   /* na scrollen: hoogte v logo in menubalk */

.navbar.jro_collapsing {background:#d37247;}
/*
.navbar-collapse.collapsing {background:#d37247;}
.navbar-collapse.in {background:#d37247;}
*/

.dropdown-menu{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	background: #d37247;
	border:0 none;
}
@media only screen and (max-width:767px){
	a.dropdown-toggle .caret {
		display: none; /* Hierdoor verdwijnt het pijltje naar beneden achter INFO, als je op een smal scherm kijkt. */
	}
    .dropdown-menu{ /* Hierdoor zijn de opties in INFO direct zichtbaar als je op een smal scherm kijkt. */
        display: contents;
        position: static;
    }
	/*.dropdown a.dropdown-toggle{ display: none; } */ /* Hierdoor verdwijnt INFO, als je op een smal scherm kijkt. */
	/*.dropdown a::before { content: "INFO "; } */ /* Hierdoor schrijf je "INFO " voorafgaand aan alles in het dropdownmenu, als je op een smal scherm kijkt. */
    .navbar-nav .dropdown-menu > li > a {
        padding: 0px 40px 0px 40px; /* Hiermee doe ik de inspringing/tab van de opties in INFO als je op een smal scherm kijkt. */
    }
}


/* ----- */
.button1 {
	-webkit-appearance: none; /* Safari */ /*Zodat layout v submitknop niet verandert op iphone*/
	-moz-appearance: none; /* Mozilla */
	background-color: #026980;
	background-image: linear-gradient(to bottom, #026980, #d37247);
	border: 1px solid #013743;
	box-shadow: inset 0 1px 0 #03A3C5, inset 0 -1px 0 #024650, inset 0 0 0 1px #0287A4, 0 2px 4px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size: 21px;
	padding: 9px 16px 9px;
	margin: 16px 0 1px 0;
	transition: all 20ms ease-out;
	vertical-align: top;
}
.button1:hover, .button1:focus {
	color: #FFF;
	text-decoration: none;
	background: #d37247;
	border-color: #012730;
	box-shadow: inset 0 1px 0 #03A3C5, inset 0 -1px 0 #024650, inset 0 0 0 1px #0287A4;
}
.button1:active {
	background: #d37247;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button2 {
	position: absolute;
	text-align: center;
    left: 50%;                     /* absloute centreren: positionering (vd linker rand) tov schermbreedte */
    transform: translate(-50%, 0); /* absloute centreren: 50% van zijn eigen breedte */
	-webkit-appearance: none; /* Safari */ /*Zodat layout v submitknop niet verandert op iphone*/
	-moz-appearance: none; /* Mozilla */
	background-color: #d37247;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	border-radius: 0px;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	/* font-size: 21px; */
	padding: 8px 16px 8px;
	transition: all 0.3s ease-out;
	vertical-align: center;
}
.button2:hover, .button2:focus {
	color: #FFF;
	text-decoration: none;
	background: #005c47;
	font-size: 19px;
	/* font-size: 22px; */
	padding: 12px 20px 12px;
	margin: -4px 0px 0px;
}
.button2:active {
	background: #005c47;
}
.button3 {
	position: absolute;
	text-align: center;
	left: 25%;                     /* absloute centreren: positionering (vd linker rand) tov schermbreedte */
    transform: translate(-50%, 0); /* absloute centreren: 50% van zijn eigen breedte */
	-webkit-appearance: none; /* Safari */ /*Zodat layout v submitknop niet verandert op iphone*/
	-moz-appearance: none; /* Mozilla */
	background-color: #d37247;
	border: 1px solid #FFF;
	box-shadow: none;
	text-shadow: none;
	border-radius: 0px;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-size: 21px;
	padding: 8px 16px 8px;
	transition: all 0.3s ease-out;
	vertical-align: center;
}
.button3:hover, .button3:focus {
	color: #FFF;
	text-decoration: none;
	background: #d37247; /* #005c47; */
	font-size: 21px;
	padding: 12px 20px 12px;
	margin: -4px 0px 0px;
}
.button3:active {
	background: #005c47;
}
.button3_1 { /* Dit aanpassen bij smartphone-schermafmetingen*/
	top:50%;
	left:188px;
}
.button3_2 { /* Dit aanpassen bij smartphone-schermafmetingen*/
	top:50%;
	left:400px;
}
.button4 {
	display:block;
	background:#d37247;
	width:100%;
	height:100%;
	margin:0 0 0 0;
	color: #FFF;
	transition: all 0.3s ease-out;
}
.button4:hover, .button4:focus {
	color: #000000;
	text-decoration: none;
}


#contact a svg {
	fill:#444; 
	stroke:#444;
}
#jro_bottomOfSite a svg {
	fill:#f4f4f4; 
	stroke:#f4f4f4;
}
#contact a:hover svg,
#jro_bottomOfSite a:hover svg {
	fill:#005c47; 
	stroke:#005c47;
}
#contact a,
#nuttige_links a { 
	color: #444;
}
#jro_bottomOfSite a { 
	color: #f4f4f4; 
}
#jro_bottomOfSite a:hover,
#contact a:hover,
#nuttige_links a:hover {
	color: #005c47;
}




/* --knop onderaan op landing pagina-- */
.jro_bounce {
	position:absolute;
	left:50%;
	bottom:0;
	margin-top:0px;
	margin-left:-25px;
	height:50px;
	width:50px;
	/*background:#FFF;*/
	-webkit-animation:jro_bounce 2s infinite;
	-moz-animation:jro_bounce 2s infinite;
	-o-animation:jro_bounce 2s infinite;
	animation:jro_bounce 2s infinite;
}
@-webkit-keyframes jro_bounce { /* Note: This example does not work in Internet Explorer 9 and earlier versions */
    0%		{ bottom:30px; }
    25%		{ bottom:15px; }
    100%	{ bottom:30px; }
}
@-moz-keyframes jro_bounce {
    0%		{ bottom:30px; }
    25%		{ bottom:15px; }
    100%	{ bottom:30px; }
}
@-o-keyframes jro_bounce {
    0%		{ bottom:30px; }
    25%		{ bottom:15px; }
    100%	{ bottom:30px; }
}
@keyframes jro_bounce {
    0%		{ bottom:30px; }
    25%		{ bottom:15px; }
    100%	{ bottom:30px; }
}
.jro_bounce svg{
	transition: transform 0.3s ease-out;
	stroke: #FFF;
}
.jro_bounce:hover svg{
	stroke: #d37247;
}



/* ----- */
.jro_uitklapbaar {
	background: none; /* #d37247; */
	color: #444; /* #FFF */
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	border-top: 1px solid #005c47;
	text-align: left;
	outline: none;
	font-size: 18px;
	margin-top: none; /* 15px; */
}
.jro_uitklapbaar svg{
	transition: transform 0.3s ease-out;
	stroke: #444; /* #FFF */
}
.uitgeklapt, 
.jro_uitklapbaar:hover {
	color: #d37247;
}
.uitgeklapt svg, 
.jro_uitklapbaar:hover svg{
	stroke: #d37247;
	-webkit-transform: rotate(90deg); /* Safari & Chrome */
	-moz-transform: rotate(90deg); /* Firefox */
	-ms-transform: rotate(90deg); /* Internet Explorer */
	-o-transform: rotate(90deg); /* Opera */
	transform: rotate(90deg); /* W3C */
}
.jro_uitkl_inhoud {
	padding: 0 18px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	/* background-color: #FFF; */
	/* border: 1px solid #d37247; */
}
.laatste {
	border-bottom: 1px solid #005c47;
}
.jro_uitkl_inhoud p {
	margin: 30px 0;
}





/* ----- */
#jro_container {
	overflow: hidden;
	width:696px;
	margin:0 auto; /* display:block horizontaal centreren */
	padding-top:50px;
	padding-bottom:50px;
}
#jro_container_last {
	overflow: hidden;
	width:696px;
	margin:0 auto; /* display:block horizontaal centreren */
	padding-top:0px;
	padding-bottom:0px;
}
.brede_knop {
	width:466px; /* Dit komt overeen met 494px hierboven */
}	
.brede_knop:hover {
	width:492px;
}
.span1of3 {
	padding-top:50px;
	width: 100%;
	padding-right: 0px;
	padding-left: 0px;
	float: left;
}
.span1of2 {
	padding-top:50px;
	width: 348px;
	padding-right: 0px;
	padding-left: 0px;
	float: left;
}
.span1of1 {
	padding-top:50px;
	width: 100%;
}
.jro_table_var {
	border-collapse: separate;
	border-spacing: 4px;
	width: 100%;
	table-layout: fixed;
}
.legende_vert {
	display: none;
}
.legende_hor {
	display: inline-block;
	margin:0 0 0 90px;
}
.verberg_tijdens_smal {
	display: none;
}



@media only screen and (min-width: 1024px) {
	#jro_container, 
	#jro_container_last {
		width:988px;
	}
	.brede_knop {
		width:960px; /* Dit komt overeen met 988px hierboven */ /* TODO: IE fout horizontale schuifbalk ongewenst*/
	}
	.brede_knop:hover {
		width:986px;
	}
	.span1of3 {
		width: 329.33px;
	}
	.span1of2 {
		width: 494px;
	}
	.legende_hor {
		margin:0 0 0 230px;
	}
	.verberg_tijdens_smal {
		display: inline-block;
	}
}
@media only screen and (max-width: 768px) {
	#jro_container, 
	#jro_container_last {
		width:calc(100% - 10px);
	}
	.brede_knop {
		width:calc(100% - 38px); /* Dit komt overeen met 988px hierboven */
	}	
	.brede_knop:hover {
		width:calc(100% - 12px);
	}
	.span1of3 {
		width: 100%;
	}
	.span1of2 {
		width: 100%;
	}
	.locatie-uitlijning .locatie {
		padding: 15px 0px 15px 0px; /* afstand tot rechter rand aanpassen */
	}
	.button3_1 { /* Dit aanpassen bij smartphone-schermafmetingen*/
		/* top:25%; */
		/* top: 45%; */
		top: calc(75% - 100px);
		/* left:50%; */						/* absloute centreren: positionering (vd linker rand) tov schermbreedte */
		/* transform: translate(-50%, 0); */	/* absloute centreren: 50% van zijn eigen breedte */
		left: 50px;
		transform: translate(0, 0);
		width: 175px;
	}
	.button3_2 { /* Dit aanpassen bij smartphone-schermafmetingen*/
		/* top:55%; */
		top: 75%;
		/* left:50%; */						/* absloute centreren: positionering (vd linker rand) tov schermbreedte */
		/* transform: translate(-50%, 0); */	/* absloute centreren: 50% van zijn eigen breedte */
		left: 50px;
		transform: translate(0, 0);
		width: 175px;
	}
	h1 { font-size: 30px; }
	.navbar { background:none }
	.legende_vert {
		margin:0 0 0 calc(50% - 80px);
		display: inline-block;
	}
	.legende_hor {
		display: none;
	}
	.verberg_tijdens_smal {
		display: none;
	}
}



/* ----- */
#artsen, #patienten_praktisch, #vertegenwoordigers{
    background-color: #f4f4f4;
}
#team, #consultatieschema, #patienten_medisch, #contact{
	background-color: #ffffff;
}
#jro_bottomOfSite {
	background-color: #444;
}



/* ----- */
.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
	bottom: 0px;
	z-index: -1000;
	overflow:hidden;
}

@media (min-aspect-ratio: 4196/2556) {
    .fullscreen-bg__video {
        height: 300%;
        top: -100%;
		z-index: -1000;
		overflow:hidden;
    }
}

@media (max-aspect-ratio: 4196/2556) {
    .fullscreen-bg__video {
        width: 300%;
        left: -100%;
		z-index: -1000;
		overflow:hidden;
    }
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../img/Background_11.png') center center / cover no-repeat;
    }
    .fullscreen-bg__video {
        display: none;
    }
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    .fullscreen-bg {
        background: url('../img/Background_11.png') center center / cover no-repeat;
    }
    .fullscreen-bg__video {
        display: none;
    }
}

/* ----- */