﻿html																{}
body																{color:#751c71; font-size:16px; font-weight: 600; font-family: 'Open Sans', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 

h1, h2, h3, h4, .h1, .h2, .h3, .h4									{word-wrap:break-word; line-height: 1.1em; font-family:'Exo', sans-serif;}
h1, .h1																{font-size: 45px; font-weight: 800; margin-bottom: 15px;}
h2, .h2																{font-size: 30px; font-weight: 800;}
h3, .h3																{font-size: 26px; font-weight: 800;}
h4, .h4																{font-size: 20px; font-weight: 300;}

a                                                                   {}
a:link, a:visited, a:active                                         {}
a:hover                                                             {}
 
strong                                	                            {font-weight: 700; font-style: inherit;}
em                                    	                            {font-style: italic; font-weight: inherit;}

.buttonContainer 													{display: flex; flex-wrap: wrap; padding-bottom: 15px;}
.buttonContainer .partButton 										{margin-right: 15px; margin-bottom: 15px;}
.buttonContainer .partButton:last-child 							{margin-right: 0px;}

.basicContainer   													{max-width: 1360px; margin:0px auto; padding:120px 80px 90px 80px;}

/********************************************** 
Fundementals 
**********************************************/

.stickyScroll               {width: 100%; position: fixed; left: 0; top: 0; z-index: 1003; background-color:#fff; transition:ease 0.3s; /* fade out */}
.stickyScroll, .stickyScrollGhost   {height: 100px;}
.stickyScrollGhost              {background-color: #751c71;}

.stickyScroll.scrolled      {height:70px; transition: ease 0.5s; box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1); /* fade in */ }
.stickyScroll.scrolled #logo img {height: 40px;}
.stickyScroll .basicContainer   {display: flex; align-items: center; padding-top: 0; padding-bottom: 0; height:100%;}

    #logo                       {margin-bottom: 10px; margin-right: auto;}
    #logo img                   {display: block; height:55px;}

/* green quote */
.partContentText.greenQuote              {font-family:'Exo', sans-serif; font-weight: 300; color: #73b3b2; max-width: 800px; margin-left: auto; margin-right: auto; text-align: center;}
.partContentText.greenQuote p            {line-height: 1.3em; margin-bottom: 30px;}
.partContentText.greenQuote, .partContentText.greenQuote h2   {font-size: 30px;}

/* green background */
.lightGreenBackground {background-color: #e4f6f5;}

.noPaddingTop .basicContainer {padding-top: 0;}

/***********************************************
Home
***********************************************/

header          			{position: relative; /* overflow: hidden; IE bug fix */}
header .basicContainer      {padding-top: 0; padding-bottom: 0;}
header:after 					{content:''; position: absolute; z-index: 3; top:0; right:0; width: 60%; height:100%; background: url('/images/style/dotted-line.png') no-repeat; background-size: contain;}
header#googleMapsHeader:after {display: none;}

    #headerContainer            {position: absolute; top:0; left:50%; transform: translateX(-50%); z-index: 2; max-width: 1360px; width: 100%; padding:115px 80px 0px 80px;}
        #headerText                 {max-width: 500px; color: #fff; position: relative; z-index: 1;}

            #headerText h1                  {max-width: 400px;}
            #headerText .partContentText    {margin-left: 30px;}
            #headerText .partButton         {margin-left: 15px;}
    #headerOverlay              {position: absolute; top:0; left:-350px; width: 100%; max-width: 1252px; padding-bottom: 56.3099041534%; z-index: 0; background:url('/images/style/home-header-overlay.svg') no-repeat; background-size: contain; color: #fff;}

    #smallHeader                {height:220px; position: relative; background-color: #751c71; overflow: hidden;}
    #smallHeader #smallHeaderContainer  {position: relative; height:220px; margin-left: auto; margin-right: auto; width: 100%; max-width: 1200px;}
    #smallHeader #smallHeaderContainer:after      {content: ''; position: absolute; top:0; right:-970px; height:220px; width: 1000px; background: url(/images/style/background-smallHeader.png) no-repeat; background-size: contain;}

        #basicHeader            {display: flex; align-items: flex-start; z-index: 4; position: relative;}
            #basicHeaderLeft        {width: 46.6666666667%; margin-top: -80px; margin-right: -10.8333333334%; box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05); background-color: #fff; padding:35px; padding-bottom: 5px; border-radius: 10px; position: relative; z-index: 2;}
            #basicHeaderLeft .partContentText p {font-size: 20px; margin-left: 30px; line-height: 1.7em;}
            
            #basicHeaderRight       {width: 64.1666666667%; margin-top: -120px; border-radius: 10px; overflow: hidden; background-color: #fff; position: relative;}
            #basicHeaderRight .popUpVideoButton:before {content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; cursor: pointer; background:url('/images/style/icon-video-play.png') no-repeat center; background-size: 150px auto; transition: background-color 0.3s;}
            #basicHeaderRight .popUpVideoButton:hover:before {background-color: rgba(0, 0, 0, 0.2);}

#services   {z-index: 4; position: relative;}
#services .basicContainer {padding-top: 0;}
    #serviceList {margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); display: flex; flex-wrap: wrap; margin-top: -60px; position: relative; z-index: 3;}
        .serviceItem    {width: calc(25% - 30px); display: flex; flex-direction: column; margin-bottom: 30px; position: relative; background-color: #fff; margin-left: 15px; margin-right: 15px; border-radius: 10px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 40px 30px -30px rgba(0, 0, 0, 0.05); padding:35px; padding-bottom: 5px; color: #751c71; text-decoration: none;}
        .serviceItem:hover  {transform: translateY(-15px); box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);} 
            .serviceItem .partContentFileImageGallery.single {margin-bottom: 20px;}
            
            .serviceItemText {display: flex; flex-direction: column; flex: 1;}
            .serviceItem h2 {margin-bottom: 10px;}
            .serviceItem .partContentText {}
            .serviceItem .partContentText p {margin-bottom: 20px; line-height: 1.7em;}
            .serviceItem .readMore       {background:url('/images/style/icon-arrow-right-purple.svg') no-repeat left center; background-size: 14px 14px; padding-left: 30px; margin-top: auto; align-self: flex-start; margin-bottom: 30px;}
            .serviceItem:hover .readMore       {background:url('/images/style/icon-arrow-right-pink.svg') no-repeat left center; background-size: 14px 14px; color: #ff5f80;}

/* usp container */
#uspContainer   {}
    #uspContainer .basicContainer {padding-bottom: 20px;}
    .contentContainer.centerContent + #uspContainer .basicContainer {padding-top: 0;}

        #uspList    {display: flex; justify-content: center; flex-wrap: wrap; width: calc(100% + 30px); margin-left: -15px; margin-right: -15px; text-align: center;}
            .uspItem    {color: #751c71; width: calc(33.3333333333% - 30px); margin-left: 15px; margin-right: 15px; margin-bottom: 70px;}
            a.uspItem   {text-decoration: none;}
            a.uspItem h3 {text-decoration: underline; transition: color 0.3s;}
            a.uspItem:hover h3 {color: #ff5f80;}
            
                .uspItem .partContentFileImageGallery.single {margin-bottom: 20px;}
                    .uspItem .partContentFileImageGallery.single figure {margin-left: auto; margin-right: auto;}

                .uspItem h3                 {color: #751c71; margin-bottom: 5px; max-width: 280px; margin-left: auto; margin-right: auto;}
                .uspItem .partContentText   {}
  
/* blue bottom */
#blueBottomContainer    {}
    #blueBottomContainer .basicContainer {padding-bottom: 0; padding-top: 0;}
    #downloadContainer + #blueBottomContainer .basicContainer, #signupFormContainer + #blueBottomContainer .basicContainer {padding-top: 120px;}


        #blueBottomHeader           {background-color: rgb(118, 209, 207); border-radius: 10px; display: flex; position: relative; z-index: 1;}

            #blueBottomContent          {padding:60px; padding-right: 0; padding-bottom: 0; color: #751c71; width: 50%;}
                #blueBottomContent h2   {color: #fff; font-size: 50px; margin-bottom: 0;} 
                #blueBottomContent h3   {color: #fff; font-size: 30px; margin-bottom: 20px; font-weight: 400;} 
                #blueBottomContent .partContentText {margin-bottom: 60px;}
            
                #blueBottomContainer .partContentFileImageGallery.single {width: 50%; position: relative; border-top-right-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden;}
                #blueBottomContainer .partContentFileImageGallery.single:after 
                {
                    content: ''; position: absolute; left:0; right:0; top:0; bottom: 0; background-image:
                    linear-gradient(
                        to right, 
                        rgb(118, 209, 207), rgb(118, 209, 207, 0.3)
                );}

                #blueBottomContainer .partContentFileImageGallery.single .contentFileImage, #blueBottomContainer .partContentFileImageGallery.single .contentFileImage figure, #blueBottomContainer .partContentFileImageGallery.single .contentFileImage figure .imagePlaceholderContainer {height: 100%;}
                #blueBottomContainer .partContentFileImageGallery figure .imagePlaceholderContainer .imagePlaceholder {display: none;}
                #blueBottomContainer .partContentFileImageGallery figure .imagePlaceholderContainer img {object-fit: cover;}

                #blueBottomContent .partButton {margin-bottom: -25px;}

/* content */
.contentContainer   {}

    .contentContainer .basicContainer {padding-bottom: 80px;}

    #uspContainer + .contentContainer .basicContainer {padding-top: 0;}
    header + .contentContainer .basicContainer {padding-top:120px;}
       
        .contentContainer.centerContent .partButtonContentContainer {justify-content: center;}
    
        .contentContainer main {}
        .contentContainer main > * {width: 100%; max-width: 760px; margin-left: auto; margin-right: auto;}

        .contentContainer main .partButtonContentContainer {padding-bottom: 45px;}

        .contentContainer main .partContentText p, .contentContainer main .partContentFileImageGallery.single,  .contentContainer main .partContentText ul, .contentContainer main  .partContentText ol, .contentContainer main  .partContentText table, .contentContainer main  .partContentVideo, .contentContainer .partContentFileAdmin {margin-bottom: 40px;}
        .contentContainer main .partContentFileImageGallery.multiple {max-width: 1200px; margin-bottom: 30px;}
        .contentContainer main .partContentFileImageGallery.imagesInRow .contentFileImageContainer {flex-wrap: nowrap; align-items: center;}

            .contentContainer main .partContentFileImageGallery.multiple .contentFileImageContainer .contentFileImage {position: relative;}
            .contentContainer main .partContentFileImageGallery.multiple .contentFileImageContainer .contentFileImage:nth-child(1) {width: 65.8333333333%; border-radius: 10px; overflow: hidden;}       
            .contentContainer main .partContentFileImageGallery.multiple .contentFileImageContainer .contentFileImage:nth-child(2) {width: 44.1666666667%; margin-left: -10%; border-radius: 10px; overflow: hidden; z-index: 1;}   

/* zorgverleners */
#healthcareProviders {scroll-margin-top: 70px;}
    #healthcareProviders .basicContainer {padding-top: 90px; padding-bottom: 70px;}
        #healthcareList {margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); display: flex; flex-wrap: wrap;}
        .healthcareItem    {width: calc(25% - 30px); margin-bottom: 30px; position: relative; display: flex; flex-direction: column; align-items: flex-start; background-color: #fff; margin-left: 15px; margin-right: 15px; border-radius: 10px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 40px 30px -30px rgba(0, 0, 0, 0.05); padding:35px; padding-bottom: 5px; color: #751c71; text-decoration: none;}
        .healthcareItem:hover  {transform: translateY(-15px); box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);}
			.healthcareItem .partContentFileImageGallery.single {margin-bottom: 20px; height:100px; display: flex; align-items: center;}
			.healthcareItem .partContentFileImageGallery.single .contentFileImage {max-width: 100%;}
            .healthcareItem h3 {margin-bottom: 20px; word-break: break-word;}
            .healthcareItem .healthcareType  {margin-bottom: 30px; display: block; color: #76d1cf;}
            .healthcareItem .readMore       {margin-bottom: 30px; background:url('/images/style/icon-arrow-right-purple.svg') no-repeat left center; background-size: 14px 14px; padding-left: 30px; margin-top: auto;}
            .healthcareItem:hover .readMore       {background:url('/images/style/icon-arrow-right-pink.svg') no-repeat left center; background-size: 14px 14px; color: #ff5f80;}

    #filterContainer {display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px;} 
        #filterContainer h2     {margin-bottom: 20px; margin-right: auto;}
        #filterContainer .partNavigation  {margin-bottom: 5px; font-size: 18px; padding-left: 38px; font-family:'Exo', sans-serif; font-weight: 300; background:url('/images/style/icon-filter.png') no-repeat left 0px; background-size: 18px 18px;}
   
/* downloads */
#downloadContainer .basicContainer {}
#downloadContainer h2 {margin-bottom: 60px;}
    #downloadList {margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); display: flex; flex-wrap: wrap; position: relative; z-index: 3;}
        .downloadItem    {background-color: #fff; width: calc(25% - 30px); margin-bottom: 30px; padding:35px; display: flex; flex-direction: column; align-items: flex-start; position: relative; margin-left: 15px; margin-right: 15px; border-radius: 10px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 40px 30px -30px rgba(0, 0, 0, 0.05); padding-bottom: 5px; color: #751c71; text-decoration: none;}
        .downloadItem:hover  {transform: translateY(-15px); box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);} 
            .downloadItem img {max-width: 105px; margin-bottom: 20px;}
            .downloadItem h3 {margin-bottom: 20px; word-break: break-word;}
            .downloadItem .download       {margin-top: auto; margin-bottom: 30px; background:url('/images/style/icon-arrow-right-purple.svg') no-repeat left center; background-size: 14px 14px; padding-left: 30px; display: inline-block;}
            .downloadItem:hover .download       {background:url('/images/style/icon-arrow-right-pink.svg') no-repeat left center; background-size: 14px 14px; color: #ff5f80;}      

/* downloads brochure */
#downloadBrochureContainer .basicContainer {}
#downloadBrochureContainer h2 {margin-bottom: 60px;}
    #downloadBrochureList {margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); display: flex; flex-wrap: wrap; position: relative; z-index: 3;}
        .downloadBrochureItem    {background-color: #fff; width: calc(33.3333333333% - 30px); margin-bottom: 30px; padding:35px; position: relative; margin-left: 15px; margin-right: 15px; border-radius: 10px; transition: transform 0.3s, box-shadow 0.3s; padding-bottom: 5px; color: #751c71; text-decoration: none;}
        .downloadBrochureItem:hover  {transform: translateY(-15px); box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);} 
            .downloadBrochureImage {position: relative; max-width: 160px; margin-bottom: 20px;}
            .downloadBrochureImage:after {content: ''; width: 100%; height:90%; margin-top: 7.5%; background-image: linear-gradient(to bottom, #f5f5f5, #ececec); position: absolute; top:0; right:-30px; z-index: 1;}
            .downloadBrochureImage .partContentFileImageGallery.single {position: relative; z-index: 2; transform: perspective(600px ) rotateY( -25deg );}
            .downloadBrochureItem h3 {margin-bottom: 20px;}
            .downloadBrochureItem .download       {margin-bottom: 30px; background:url('/images/style/icon-arrow-right-purple.svg') no-repeat left center; background-size: 14px 14px; padding-left: 30px; display: inline-block;}
            .downloadBrochureItem:hover .download       {background:url('/images/style/icon-arrow-right-pink.svg') no-repeat left center; background-size: 14px 14px; color: #ff5f80;}      

/* veelgestelde vragen */
#faqContainer            {}
    #faqContainer .basicContainer {display: flex; align-items: flex-start;}

        #faqContainerLeft        {width: 60%; display: flex; margin-right: -10%; margin-top: -60px; box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05); background-color: #fff; padding:35px; border-radius: 10px; position: relative; z-index: 1; margin-bottom: 30px;}
            
            #faqContainerLeft .partContentFileImageGallery.single {flex: 0 0 auto; margin-right: 10px;}
            #faqContainerContent        {flex: 1 1 auto; padding-top: 30px;}
            #faqContainerContent h2     {margin-left: 30px; margin-bottom: 30px;}

        #faqContainerRight       {width: 50%; border-radius: 10px; overflow: hidden; background-color: #fff; margin-bottom: 30px;}
 
/* login professionals */
.contentContainer#loginProfessionals    {}
.contentContainer#loginProfessionals .basicContainer {display: flex; flex-wrap: wrap; padding-top: 60px;}

.contentContainer#loginProfessionals nav    {padding-right: 60px; width: 35%;}
#loginContent   {width: 65%;} 
#loginContent .partContentFileImageGallery.single {margin-bottom: 30px;}

#spanEmail {display: block; font-weight: 600; margin-bottom: 30px; font-size: 20px;}

/* signup newsletter */
#signupFormContainer   {}
    #signupFormContainer .basicContainer {}


#imageTextContainer {background-image:
    linear-gradient(
      to bottom, 
      #e4f6f5,
      #e4f6f5 200px,
      #fff 200px,
      #fff 100%
    );}
    #imageTextContainer .basicContainer {display: flex; align-items: center; z-index: 1; position: relative; padding-top: 0;}  
        #imageTextContainerLeft       {width: 64.1666666667%; border-radius: 10px; overflow: hidden; background-color: #fff; margin-bottom: 30px; position: relative;}

        #imageTextContainerLeft .popUpVideoButton:before {content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; cursor: pointer; background:url('/images/style/icon-video-play.png') no-repeat center; background-size: 150px auto; transition: background-color 0.3s;}
            #imageTextContainerLeft .popUpVideoButton:hover:before {background-color: rgba(0, 0, 0, 0.2);}

        #imageTextContainerRight        {width: 46.6666666667%; margin-left: -10.8333333334%; box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, 0.05); margin-bottom: 30px; background-color: #fff; padding:35px; padding-bottom: 5px; border-radius: 10px; position: relative; z-index: 1; box-shadow: 0 40px 30px -30px rgba(0, 0, 0, 0.05);}
        #imageTextContainerRight .partContentText {font-size: 20px; margin-left: 30px;}

/* contact */

#googleMapsContainer    {}
	#googleMapsContainer .basicContainer {display: flex; justify-content: flex-end; z-index: 1; position: relative; margin-top: -290px;}
		#locationCard 			{background-color: #751c71; width: 100%; max-width: 440px; border-radius: 10px; color: #fff; padding:50px; padding-top: 0; padding-bottom: 20px;}
		#locationCard img 		{margin-top: -25px; margin-bottom: 25px;}
		#locationCard a 		{color: #fff;}

/********************************************** 
Footer 
**********************************************/
#blueBottomContainer + footer                  {margin-top: -100px;}
#blueBottomContainer + footer .basicContainer  {padding-top: 220px;}

header + footer             {margin-top: 120px;}
#uspContainer + #blueBottomContainer .basicContainer, #healthcareProviders + #blueBottomContainer .basicContainer {padding-top: 0;}

footer          			{background-color: #e4f6f5;}
    footer .basicContainer      {display: flex; padding-bottom: 60px;}
			#vigeoStandaard 		{flex:1 1 auto; padding-right: 30px;}
			#vigeoPro 				{flex:0 0 auto; max-width: 290px;}
                    .footerHeading 		{font-family:'Exo', sans-serif; line-height: 1.2em; margin:0px 0px 15px 30px; color: #751c71; font-size: 24px; display: block;}
                    
/* bottom footer */
#bottomFooter .basicContainer   {padding-top: 40px; padding-bottom: 30px; display: flex; flex-wrap: wrap;}

#bottomFooter ul                {display: flex; flex-wrap: wrap; padding:0px 30px;}
#bottomFooter ul li             {color: #76d1cf; border-left: solid 1px #76d1cf; padding-left: 20px; margin-right: 20px; margin-bottom: 10px;}
#bottomFooter ul li:first-child {border-left: none; padding-left: 0;}

#bottomFooter ul li a           {color: #76d1cf; text-decoration: none; display: inline-block;}
#bottomFooter ul li a:hover     {color: #751c71;}

#logoMM                         {margin-left: auto; opacity: 0.3;}
#logoMM:hover                   {opacity: 1;}
#logoMM svg                     {fill: #35D9C6; width: 51px; height:20px; display: block;}

/***********************************************
Mobile toggle menu
***********************************************/

body.mobileMenuToggleActive                               {position: fixed; /* prevents scrolling bug at the bottom of the screen  */ }

#mobileMenuToggle                                         {position:relative; z-index: 1002; align-items:center; cursor: pointer; display: none;}      

#mobileMenuToggle .mobileMenuButtonLabel                         {margin-left:6px; font-size: 13px; font-weight: 800; text-transform: uppercase;}
#mobileMenuToggle .mobileMenuButtonHamburger 					{width: 20px; height:20px; display:flex; flex-direction:column; justify-content:center;}
#mobileMenuToggle .mobileMenuButtonHamburger span 				{width: 20px; height: 2px; background-color: #751c71; margin: 2px 0px; transition: all 0.3s ease-in-out;}
#mobileMenuToggle .mobileMenuButtonHamburger span:nth-child(2) 	{width: 15px;}

#mobileMenuToggle.active .mobileMenuButtonHamburger span 				      {background-color: #ff5f80;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(2) {opacity: 0;}
#mobileMenuToggle.active .mobileMenuButtonHamburger span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}

/* Menu overlay */
#mobileMenuToggleContainer 			{left: 0%; top: 70px; width: 100%; height: 100%; display:none; position: fixed; background-color:#e4f6f5; z-index: 1002;}
body.mobileMenuToggleActive #mobileMenuToggleContainer 	{display:block;} 

#mobileMenuToggleContainerScroll                      {overflow-y: auto; height: calc(100% - 70px);}

@media screen and (min-width: 1023px){
	body.mobileMenuToggleActive 							{position: static;}
}

@media (max-width: 1023px){
  #mobileMenuToggleContainerScroll {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
}

/***********************************************
Form
***********************************************/

.formV2 .formTwoColumn {display: flex; flex-wrap: wrap;}
.formV2 .formTwoColumn .formItemContainer {width: calc(50% - 15px);}
.formV2 .formTwoColumn .formItemContainer:first-child {margin-right: 15px;}
.formV2 .formTwoColumn .formItemContainer:last-child {margin-left: 15px;}

@media (max-width: 767px){
    .formV2 .formTwoColumn .formItemContainer {width: 100%; margin-left: 0!important; margin-right: 0!important;}
}