body																{background-color: #333449; height: 100%; color:#444; font-size:18px; font-weight: 300; font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 
html																{height: 100%;}

h1, h2, h3, .h1, .h2, .h3                                           {word-wrap:break-word; line-height: 1.4em; display: block; font-weight: 600; font-family: 'Raleway';}
h1, .h1                                                             {font-size: 36px; margin-bottom: 30px; color: #000;}
h2, .h2                                                             {font-size: 24px; margin-bottom: 15px; color: #89C539;}
h3, .h3                                                             {font-size: 18px;}

a 																	{outline:0; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
a:link, a:visited, a:active											{}
a:hover																{}
 
strong  															{font-weight: 700;}
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:0px 80px;}
.basicContainer.small   											{max-width: 1060px;}

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

nav#topBar 	{padding:60px 0px; position: fixed; top:0; left: 0; right:0; z-index: 1003; transition:ease 0.2s; background-color: #fff;}
    nav#topBar .basicContainer {display: flex; align-items: center; height:40px;}

nav#topBar.scrolled      {background-color:#fff; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.10); padding:15px 0px;}

#navGhost   {height: 160px; background-color: #fff;}

    #logo       {display: flex; align-items: center; text-decoration: none; margin-right: 20px;}
    #logo img       {height: 40px;}
    #logo span      {margin-left: 10px; font-family: 'Raleway'; font-weight: 400; font-size: 14px; line-height: 1.4em; color: #444; max-width: 80px;}

    .partNavigation-h  {font-family: 'Raleway'; font-weight: 600; font-size: 18px; flex:1 0 auto; margin-right: 20px;}

	nav#topBar .partButton  	{margin-bottom: 0;}
    nav#topBar .partButton.green {margin-left: auto;}

.basicContainer 		{max-width: 1600px; margin:0px auto; padding:0px 50px;}

#mainContainer  {display: flex; flex-wrap: wrap; position: relative; min-height: calc(100% - 160px); background-color: #fff;}
    #leftTextContainer     {width: 50%; display: flex; flex-direction: column; }   
      #leftTextContainerContent {padding:30px 100px 100px 50px; max-width: 800px; margin-left: auto;}

    #rightImageContainer         {width: 50%; top:160px; bottom: 0; right:0; position: fixed; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; transition: position 0.3s ease;}
    #rightImageContainer.scrolled {top: 70px;}
    #rightImageContainer.scrolled .waveContainer {display: none;}

    #rightImageContainer .partContentFileImageGallery.single {height: 100%;}
    #rightImageContainer .partContentFileImageGallery.single * {height: 100%;}

    #rightImageContainer .waveContainer {
        width: 100%;
        padding-bottom: 3.488372093%;
        position: absolute;
        top:0;
        left:0;
        z-index: 1;
    }

    #rightImageContainer .waveContainer svg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    #rightImageContainer .waveContainer svg path {
      fill: #fff;
    }

/********************************************** 
Data 
**********************************************/

#introDataContainer                     {background-color: #fff; padding-bottom: 15px;}
#introDataContainer .basicContainer     {}

#dataContainer                          {background-color: #333449;}
#dataContainer .waveContainer           {width: 100%; padding-bottom: 6.25%; position: relative; z-index: 1; background-color: #fff;}
#dataContainer .waveContainer svg       {position: absolute; width: 100%; height: 100%;}
#dataContainer .waveContainer svg path  {fill: #333449; }
#dataContainer .footerMenu              {background-color: #333449; }
#dataContainer .footerMenu .basicContainer {}
#dataContainer .basicContainer          {position: relative; z-index: 1; padding-bottom: 60px; margin-top: calc(-6.25%);}

    #dataFilter     {background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); border-radius: 4px; margin-bottom: 20px; padding:20px; padding-bottom: 5px; display: flex; flex-wrap: wrap;}
        #dataFilter .partDropDown {margin-right: 15px; margin-bottom: 15px; width: 100%; max-width: 400px;}
        #dataFilter .partDropDown .dropDownButton {border-radius: 4px;}
        #dataFilter .partDropDown  .dropDownButtonValue span {font-weight: 500;}
        #dataFilter .partSearchBar {margin-bottom: 15px; max-width: 400px;}
        /* #of             {color: #000; font-size: 18px; font-weight: 600; margin:0 15px; height: 40px; line-height: 40px;} */
    

    #dataTable      {background: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.15); border-radius: 4px; overflow: hidden;}

    #dataTable .noResults           {padding:30px 15px; text-align: center; background-color: #F5F5F5;}
        #dataTable .noResults span      {font-size: 24px; font-weight: 600; font-family: 'Raleway'; line-height: 1.4em; color:#000;}

    #dataTable table                                {width: 100%; line-height: 1.4em;}
    #dataTable table thead                          {background-color: #89C539; color: #fff; font-family: 'Raleway'; font-size: 18px; }
    #dataTable table tbody                          {font-size: 16px;}
    #dataTable table tbody tr:nth-child(even)       {background-color: #F5F5F5;}
    #dataTable table th, #dataTable table td        {padding: 12px 20px;}
    #dataTable table th                             {font-weight: 600;}
    #dataTable table td                             {}

    #dataTable .partButton                          {margin-bottom: 0; height:27px; border-radius: 18.5px; padding: 0px 12px; font-size: 14px; background-color: #333449; margin:5px 0;}


        .popupCustomContainer h2                    {margin-bottom: 5px; margin-top: 20px;}
        .contactDataList                            {line-height: 1.3em; margin-bottom: 30px; border-bottom:solid 1px rgba(0,0,0,0.10); }
            .contactDataList li                         {border-top:solid 1px rgba(0,0,0,0.10); padding:15px 0;}
                .contactDataList li span                {display: block; font-size: 14px;}
                .contactDataList li a                    {color: inherit; font-weight: 500;}


    .educationModule                                {display: flex; flex-wrap: wrap; font-size: 13px;}
    .educationModule li                             {margin-right: 10px; margin-top:5px; margin-bottom: 5px; background-color: #fff; border:solid 1px #bbb; padding:0px 8px; border-radius: 16px}
    .educationModule li:last-child                  {margin-right: 0px;}

/********************************************** 
Registereren 
**********************************************/

#buttonExtraModule                                  {height: 30px; font-size: 14px; margin-bottom: 30px; font-weight: 600; background-color: #333449;}

/* Form CourseContainer */
.courseContainer                                    {background-color: #F3F9EC; padding: 20px; padding-bottom: 5px; margin-bottom: 20px;}
.courseContainer.hidden                             {display: none;}
.hidden                                             {display: none;}

/********************************************** 
Footer 
**********************************************/

footer                 {}
    footer ul              {display: flex; justify-content: flex-end; flex-wrap: wrap; font-family: 'Raleway'; font-size: 12px; line-height: 1.3em; padding:15px 0px 30px 0px;}
    footer ul li                {margin-left: 40px;}
    footer ul li:first-child    {margin-left: 0px;}
        footer ul li a             {color: #fff; transition: 0.3s; text-decoration: none;}
        footer ul li a:hover       {color: #fff; text-decoration: underline;}
  
#leftTextContainer footer             {width: 200%; position: relative; z-index: 1; margin-top: auto;}

footer .waveContainer {
    width: 100%;
    padding-bottom: 6.25%;
    position: relative;
    z-index: 1;
}

footer .waveContainer svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

footer .waveContainer svg path {
  fill: #333449;
}

footer .footerMenu {
    background-color: #333449;
}

footer .footerMenu .basicContainer {
    
}

#dataContainer + footer .waveContainer {display: none;}

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

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

#mobileMenuToggle                                         {position:relative; color: #fff; z-index: 1004; display: none; margin-left: 20px; font-weight: 600;}

#mobileMenuToggle .mobileMenuButtonLabel                         {margin-left:5px;}
#mobileMenuToggle .mobileMenuButtonHamburger          {width: 20px; height:20px; display:flex; flex-direction:column; justify-content:center;}
#mobileMenuToggle .mobileMenuButtonHamburger span         {width: 20px; height: 2px; background-color: #fff; margin: 2px 0px; transition: all 0.3s ease-in-out;}

#mobileMenuToggle.active .mobileMenuButtonHamburger span              {}
#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: 160px; width: 100%; height: 100%; box-shadow: 0 3px 5px 0 rgba(0,0,0,0.10); opacity: 0; visibility: hidden; position: fixed; background-color:#fff; z-index: 1002; transition:0.3s;}
body.mobileMenuToggleActive #mobileMenuToggleContainer  {opacity: 1; visibility: visible;} 

#mobileMenuToggleContainerScroll                      {overflow-y: auto; height: 100%; padding:50px; padding-top: 0px;}


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