/* Responsive font size for phone numbers */

/* ==========================================================================
1. IMPORT GOOGLE FONTS
========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700|Open+Sans");
/* ==========================================================================
2. GENERAL
========================================================================== */

@media screen and (min-width: 993px) {
body {
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
color: #546E7A;
font-size: 18px;
font-weight: 400;
background: #EEEEEE;
overflow-x: hidden;
width: 100%;
}

h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
font-weight: 700;
color: #546E7A;
}

h2 {
font-size: 32px;
}

h3 {
font-size: 24px;
}


h4 {
font-size: 20px;
}

p {
font-size: 18px;
color: #546E7A;
line-height: 26px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 0;
}

.header-image-logo {
width:100%;
background-image:url('../img/HelixHerentals_Logo.jpg');
background-position:50%;
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 100%;
}

#navbar {
position: fixed;
left: 0;
top: 0;
width: 70%;
z-index: 10;
margin: 0% 15% 0% 15%;
height: auto;
}
}

@media screen and (max-width: 992px) {
body {
margin: 0px 0px;
font-family: 'Open Sans', sans-serif;
color: #546E7A;
font-size: 14px;
font-weight: 400;
background: #fff;
overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
color: #546E7A;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 20px;
}

h4 {
font-size: 16px;
}

p {
font-size: 14px;
color: #546E7A;
line-height: 20px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 0;
}

.header-image-logo {
visibility: hidden;
width:100%;
margin-left: 0%;
height: 0px;
background-image:url('../img/HelixHerentals_Logo.jpg');
background-position:50%;
background-repeat:no-repeat;
background-size:contain;
}

#navbar {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 10;
margin: 0%;
height: auto;
}
}

@media(min-width: 768px) {

.header-image-logo {
width:100%;
visibility: visible;
/* margin-left: 0%; */
/* height: 400px; */
background-image:url('../img/HelixHerentals_Logo.jpg');
background-position:50%;
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 100%;
}

#navbar {
position: fixed;
top: 0;
left: auto;
width: 100%;
z-index: 10;
margin: 0% auto;
height: auto;
}
}

@media screen and (min-width: 140vh) {
body {
margin: 0px auto;
font-family: 'Open Sans', sans-serif;
color: #546E7A;
font-size: 18px;
font-weight: 400;
background: #EEEEEE;
overflow-x: hidden;
width: 140vh;
/* border: 2px solid #546E7A; */
}

#navbar {
position: fixed;
top: 0;
left: auto;
width: 140vh;
z-index: 10;
margin: 0% auto;
height: auto;
}
}



/* body { */
/* margin: 0px 0px; */
/* font-family: 'Open Sans', sans-serif; */
/* color: #546E7A; */
/* font-size: 18px; */
/* font-weight: 400; */
/* background: #fff; */
/* overflow-x: hidden; */
/* } */

html {
overflow-x: hidden;
}

a:visited, a:link{ 
text-decoration: none; 
color: #546E7A;
}

a:hover,
a:focus {
text-decoration: none;
outline: none;
color: #747B4F;
}

a:active {
color: #747B4F;
}	

h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
font-weight: 700;
color: #546E7A;
}

h2 {
font-size: 32px;
}

h3 {
font-size: 24px;
}

h4 {
font-size: 20px;
}

p {
font-size: 18px;
color: #546E7A;
line-height: 26px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 0;
}

.full-width {
width: 100%;
background: #fab24c;
padding: 0px 0px 2px 0px;
margin: 0px 0px 0px 0px;
}

.empty {
background: #FFF;
/* margin: 76px 0px 0px 0px; */
padding-top: 75px;
}

.no-margin {
padding: 0px;
}

.textwidget ul li {
	font-size: 18px;
	color: #546E7A;
	line-height: 26px;
	font-family: 'Open Sans', sans-serif;
	margin-bottom: 0;
}


/* ==========================================================================
2.1 Section Title
========================================================================== */
.section {
padding: 40px 0;
background: #FFF
}

.section-header {
color: #546E7A;
margin-bottom: 40px;
text-align: center;
position: relative;
}

.section-header .section-title {
font-size: 36px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #263238;
position: relative;
display: inline-block;
}

.section-header .section-title:before {
content: '';
position: absolute;
bottom: -8px;
width: 100%;
height: 2px;
bottom: 0;
left: 0%;
background: #747B4F;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}

.section-people {
color: #546E7A;
margin-bottom: 40px;
text-align: left;
position: relative;
}

.section-header .section-title {
font-size: 36px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
color: #747B4F;
/* #263238; */
position: relative;
display: inline-block;
}

.section-header .section-title:before {
content: '';
position: absolute;
bottom: -8px;
width: 100%;
height: 2px;
bottom: 0;
left: 0%;
background: #fab24c;
/* #747B4F; */
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}

/* ==========================================================================
Navigation bar (bootstrap)
========================================================================== */

/* .navbar { */
/* /* background-color: #333; */ */
/* position: fixed; /* Set the navbar to fixed position */ */
/* top: 0; /* Position the navbar at the top of the page */ */
/* width: 100%; /* Full width */ */
/* z-index: 1000; */
/* } */

/* .navbar-default .navbar-nav > li.dropdown:hover > a,  */
/* .navbar-default .navbar-nav > li.dropdown:hover > a:hover, */
/* .navbar-default .navbar-nav > li.dropdown:hover > a:focus { */
/* background-color: rgb(231, 231, 231); */
/* color: rgb(85, 85, 85); */
/* } */

/* li.dropdown .dropdown-menu{ */
/* display: block; */
/* visibility: hidden; */
/* opacity: 0; */
/* transition: visibility 0.2s, opacity 0.1s linear; */
/* transition-delay: 0.3s; */
/* } */

/* li.dropdown:hover .dropdown-menu{ */
/* display: block; */
/* visibility: visible; */
/* opacity: 1; */
/* transition-delay:0s;  //set delay here */
/* } */

.header-image-opleiding {
width:100%;
height:0;
background-image:url('../img/Index_Groot2.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}

.header-image-index {
width:100%;
height:0;
background-image:url('../img/Index_Groot2.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}

.header-image-huisbezoek {
width:100%;
height:0;
background-image:url('../img/Huisbezoeken_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}

.header-image-artsen {
width:100%;
height:0;
background-image:url('../img/Artsen_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}

.header-image-paramedici {
width:100%;
height:0;
background-image:url('../img/Paramedici_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}

.header-image-consultaties {
width:100%;
height:0;
background-image:url('../img/Consultaties_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-zorgaanbod {
width:100%;
height:0;
background-image:url('../img/Zorgaanbod_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-preventie {
width:100%;
height:0;
background-image:url('../img/Preventie_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-wachtdienst {
width:100%;
height:0;
background-image:url('../img/Wachtdienst_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-noodnummers {
width:100%;
height:0;
background-image:url('../img/Noodnummers_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-links {
width:100%;
height:0;
background-image:url('../img/Links_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-adressen {
width:100%;
height:0;
background-image:url('../img/Adressen_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
.header-image-secretariaat {
width:100%;
height:0;
background-image:url('../img/Secretariaat_Groot.jpg');
background-repeat:no-repeat;
background-size: 100%;
padding-bottom: 50%;
}
/* ==========================================================================
Footer Style
========================================================================== */
.block-title {
font-size: 14px;
font-weight: 500;
color: #263238;
margin-bottom: 30px;
text-transform: uppercase;
position: relative;
}

footer .footer-Content {
background-color: #ffffff;
padding: 60px 0;
color: #546E7A;
}

.textwidget {
font-size: 14px;
line-height: 24px;
margin-bottom: 10px;
}

.textwidget p {
color: #546E7A;
}

footer .menu {
padding-left: 0;
}

footer .menu li {
padding-bottom: 12px;
}

footer .menu li a {
color: #546E7A;
}

footer .menu li a:hover {
color: #D6D2AE;
}

/* ==========================================================================
People Style
========================================================================== */
#artsen {
	margin-left: 5%;
	width: 90%;
}

.people-resume {
text-align: left;
padding-left: 0;
float:center;
}

.people-resume a{
	color: #747B4F;
	text-decoration: none;
	font-weight: 600;
}

.people-resume a:hover, a:focus{
	color: #747B4F;
	text-decoration: underline;
}

.people-image {
text-align: left;
padding: 0px 0px 0px 20px;
float:left;
width: 20%;
}

.links {
width: 100%;
padding: 0px 0px 10px 0px;
padding-left: 20%;
padding-right: 20%;
}

.phone-numbers {
width:100%;
}

.phone-numbers td{
height:40px;
}

.phone-numbers th, td {
border-bottom: 1px solid #ddd;
}

.phone-numbers .phone-name{
font-weight: 700;
min-width: 400px;
}

.phone-numbers .phone-number{
min-width: 150px;
}

.info {
width: 100%;
padding: 0px 0px 10px 0px;
padding-left: 0%;
padding-right:0%;
text-align: justify;
}

.infobutton {
  background-color: #747B4F;
  border: 2px solid #fab24c;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  padding-left: 0%;
  padding-right:0%;
  width: 100%;
}

.infobutton a{
  color: white;
}

.appointment {
border: 2px solid #747B4F;
padding: 10px; 
border-radius: 5px;
text-align: center;
vertical-align: middle;
}


.row.display-flex {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
margin-bottom: 10px;
}
.thumbnail {
height: 100%;
text-align: center;
border: 2px solid #747B4F;
border-radius: 5px;
vertical-align: middle;
background-color: #747B4F;
color: #FFFFFF;
}

/* extra positioning */
.thumbnail {
display: flex;
flex-direction: column;
float: none;
padding: 10px;
justify-content: space-evenly;
}

.thumbnail .caption {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

.thumbnail .caption h4{
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 700;
color: #FFFFFF;

}

.thumbnail .caption a { 
text-decoration: none; 
color: #FFFFFF;
}

.thumbnail .caption a:hover, .thumbnail .caption a:focus {
text-decoration: underline;
color: #FFFFFF;
}

/* ==========================================================================
Navbar Style
========================================================================== */

.navbar {
background-color: #747b4f;
}
.navbar .navbar-brand {
color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
color: #ffffff;
}
.navbar .navbar-text {
color: #ecf0f1;
}
.navbar .navbar-text a {
color: #ffffff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
color: #ffffff; 
}
.navbar .navbar-nav .nav-link {
color: #ecf0f1;
border-radius: .25rem;
margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
color: #ffffff;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #ffffff;
background-color: #fab24c;
}
.navbar .navbar-toggler {
border-color: #fab24c;
background-color: #FFFFFF;
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
background-color: #fab24c;
}
.navbar .navbar-toggler .navbar-toggler-icon {
/* color: #ecf0f1; */
/* background-color: #FFFFFF; */
z-index=1000;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
border-color: #ecf0f1;
}
.navbar .navbar-link {
color: #ecf0f1;
}
.navbar .navbar-link:hover {
color: #ffffff;
}

.navbar-brand{
padding: 0;
margin: 0;
}

@media (max-width: 575px) {
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #000000;
}
.navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #000000;
background-color: #fab24c;
}
}

@media (max-width: 767px) {
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #000000;
}
.navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #000000;
background-color: #fab24c;
}
}

@media (max-width: 991px) {
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #000000;
}
.navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #000000;
background-color: #fab24c;
}
}

@media (max-width: 1199px) {
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
color: #000000;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #000000;
}
.navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #000000;
background-color: #fab24c;
}
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
color: #ffffff;
background-color: #fab24c;
}

@media screen and (max-width: 578px) {
	.section-header .section-title {
	font-size: 6.3vw;
	margin-bottom: 6.3vw;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #747B4F;
	/* #263238; */
	position: relative;
	display: inline-block;
	}
	
	.section-header {
	color: #546E7A;
	margin-bottom: 6.3vw;
	text-align: center;
	position: relative;
}
}

/* Safari fix */
.row:before, .row:after {display: none !important;}
