/*180px;*/
/*#B9FFB9;*/
/*#E1C4FF;*/
/*#FFFFC8;*/
@font-face {
  font-family: 'NoSpace';
  src: url("../fonts/zerowidthspaces.eot");
  src: url("../fonts/zerowidthspaces.eot?#iefix") format("embedded-opentype"), url("../fonts/zerowidthspaces.woff") format("woff"), url("../fonts/zerowidthspaces.ttf") format("truetype"), url("../fonts/zerowidthspaces.svg#NoSpace") format("svg"); }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: "Century Gothic";
  overflow: hidden; }

h3 {
  color: #0c4d77;
  text-transform: uppercase;
  margin-bottom: 4px; }

.desktop header {
  background-image: url("../images/menubalk.png");
  background-position: bottom;
  background-repeat: repeat-x; }

header {
  width: 100%;
  position: fixed;
  background-color: #ffffff;
  border-bottom: 2px solid darkgray;
  z-index: 1000; }
  header #logo {
    width: 30%;
    position: relative; }
    header #logo.hide img {
      /*	opacity:0;
      	transition:1s;*/
      display: none; }
    header #logo img {
      max-height: 60%;
      max-width: 60%;
      min-height: 145px;
      min-width: 157px; }
  header nav {
    width: 70%;
    font-size: 23px; }
    header nav #mobile_menu {
      display: none; }
    header nav a {
      color: #0C4D77;
      text-decoration: none;
      padding: 8px 10px 8px 10px;
      /*&.select {
      	color:black;
      	text-decoration:underline;
      }*/ }
    header nav > ul {
      text-align: center; }
      header nav > ul > li.select > a {
        color: black;
        /*text-decoration:none;*/ }
      header nav > ul > li ul {
        display: none;
        position: absolute;
        font-size: 20px;
        margin-top: 5px;
        top: 0;
        opacity: 0;
        /*left:-5%;*/
        /*right: 25%;*/
        /*&.slide {
        	animation-name:show_submenu;
        	animation-duration:2s;
        	top:40px;
        	opacity:1;
        	
        }*/ }
        header nav > ul > li ul a {
          margin-left: 10px;
          position: relative;
          text-decoration: none;
          color: white; }
          header nav > ul > li ul a.select {
            color: black;
            text-decoration: none; }

.show {
  display: block; }

.hide {
  display: none; }

.desktop nav ul.slide {
  animation-name: show_submenu;
  animation-duration: 2s;
  top: 40px;
  opacity: 1; }

.desktop.small header #logo {
  /*left:-20px;
  top:-20px;*/
  width: 20%; }
  .desktop.small header #logo img {
    max-height: 100%;
    max-width: 100%; }
.desktop.small header nav {
  width: 80%;
  /*left:-70px;*/
  margin-top: 0;
  top: 35px; }
  .desktop.small header nav > ul {
    text-align: right; }
    .desktop.small header nav > ul > li:last-of-type a:after {
      content: ""; }
    .desktop.small header nav > ul > li > a {
      padding: 8px 0 8px 0; }
      .desktop.small header nav > ul > li > a:first-of-type {
        padding-left: 0; }
      .desktop.small header nav > ul > li > a:after {
        content: "|";
        display: inline-block;
        margin: 0;
        padding: 0; }
    .desktop.small header nav > ul > li ul {
      left: 45%;
      /*right: 1%;*/ }

.mobile header #logo {
  display: none; }
  .mobile header #logo img {
    max-height: 100%;
    max-width: 100%;
    min-width: 350px;
    min-height: 325px; }
.mobile header nav {
  width: 100%;
  margin-top: 0;
  height: 50px; }
  .mobile header nav.open {
    height: auto; }
    .mobile header nav.open > ul {
      display: block; }
      .mobile header nav.open > ul > li {
        /*&.hassub {
        	
        	a:after{
        		content:">";
        	}
        	
        }*/ }
        .mobile header nav.open > ul > li .submenu {
          display: none; }
  .mobile header nav.close > ul {
    /*display:none;*/
    margin-top: -54px; }
    .mobile header nav.close > ul > li:not(.select) {
      display: none; }
    .mobile header nav.close > ul > li.select {
      /*position: absolute;
      top:0;	*/
      width: 100%;
      margin-left: 70px;
      padding-right: 70px;
      min-width: 200px;
      /*margin-top:-50px;*/
      height: 50px; }
      .mobile header nav.close > ul > li.select.opensub {
        height: auto; }
        .mobile header nav.close > ul > li.select.opensub > a:after {
          /*font-family:Arial;*/
          position: relative;
          height: 100%;
          left: 10%;
          content: "\25BC"; }
      .mobile header nav.close > ul > li.select.closesub > a:after {
        /*font-family:Arial;*/
        height: 100%;
        position: relative;
        left: 10%;
        content: "\25B6"; }
      .mobile header nav.close > ul > li.select.closesub ul {
        display: none; }
  .mobile header nav #mobile_menu {
    display: block;
    font-size: 35px;
    border-bottom: 1px solid darkgray; }
    .mobile header nav #mobile_menu #menu_btn {
      background-image: url("../images/menu_btn.png");
      background-repeat: no-repeat;
      background-position: left;
      display: inline-block;
      display: inline-block;
      width: 70px;
      height: 50px; }
    .mobile header nav #mobile_menu span {
      display: inline-block;
      width: 75%;
      text-align: center;
      vertical-align: top; }
  .mobile header nav > ul {
    /*&.open {
    	display:block;
    }
    
    &.close {
    	display:none
    }*/ }
    .mobile header nav > ul > li {
      width: 100%; }
      .mobile header nav > ul > li > a {
        /*border-bottom:1px solid black;*/
        display: block;
        line-height: 1.5;
        /*&:after{
        			font-family:Arial;
        			position:relative;
        			left:10%;
        			content:"\25BC";
        		}*/ }
      .mobile header nav > ul > li ul {
        /*display:none;*/
        opacity: 1;
        position: static;
        background-color: gray;
        margin: 0; }
        .mobile header nav > ul > li ul li {
          display: block;
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: 110%; }

.mobile.tablet header nav > ul > li > ul > li {
  display: inline-block; }

main section {
  position: relative;
  /*padding-top:$header_height;*/
  border-bottom: solid 1px black;
  /*border-image: url("../images/line.png") 100% 0% repeat;*/ }
  main section .vcard {
    color: #808080; }
    main section .vcard P {
      font-size: 1.9em;
      text-align: center; }
    main section .vcard a {
      text-decoration: none;
      color: inherit; }
  main section#home {
    position: relative;
    background-image: url("../images/script.png");
    background-repeat: no-repeat;
    background-position: left bottom; }
    main section#home > div {
      /*background-image:url("../images/stolp.jpg");
      background-repeat: no-repeat;		*/
      padding-right: 20%;
      width: 100%;
      margin: auto; }
      main section#home > div > div {
        width: 100%;
        padding-top: 20%; }
        main section#home > div > div h1 {
          font-size: 2.8em;
          font-weight: normal;
          text-align: center;
          color: black; }
          main section#home > div > div h1.sub {
            color: white;
            position: fixed;
            top: 30px;
            left: 140px;
            z-index: 1000; }
        main section#home > div > div h2 {
          font-size: 2em;
          font-weight: normal;
          color: #0C4D77;
          text-align: center; }
      main section#home > div figure {
        width: 40%;
        padding-left: 2%; }
        main section#home > div figure img {
          max-width: 100%;
          max-height: 100%; }
  main section#partners {
    /*background-image:url("../images/krul.png");
    background-repeat:no-repeat;*/ }
    main section#partners article div {
      width: 33.3333333333333333333333333333%;
      padding-left: 0;
      padding-top: 10%; }
      main section#partners article div img {
        max-height: 100%;
        max-width: 100%; }
    main section#partners article div:nth-child(2) {
      margin-top: 80px; }
    main section#partners article div:last-of-type {
      width: 100%;
      display: block;
      max-width: 1366px;
      padding-left: 20px;
      padding-right: 20px;
      margin: 0 auto;
      padding-top: 0; }
  main section#contact {
    background-color: #ffffff; }
    main section#contact > div {
      /*padding-left:8%;*/
      width: 80%;
      background-image: url("../images/contact.jpg");
      background-repeat: no-repeat;
      /*background-position:100% 25%;
      background-size:50%;*/
      margin: auto; }
      main section#contact > div > div {
        width: 55%;
        padding-top: 4%; }
        main section#contact > div > div:first-child {
          padding-top: 10%; }
        main section#contact > div > div span {
          display: inline-block; }
      main section#contact > div form {
        padding-left: 10%; }
        main section#contact > div form label {
          width: 130px;
          line-height: 2; }
          main section#contact > div form label:last-of-type {
            width: 100%; }
        main section#contact > div form input[type=checkbox] {
          vertical-align: middle;
          margin-left: 10px;
          width: 15px;
          height: 15px; }
        main section#contact > div form button {
          margin-top: 5px;
          width: 80px;
          padding: 8px; }
        main section#contact > div form input[type=text],
        main section#contact > div form input[type=email] {
          width: 300px;
          line-height: 2;
          padding-left: 5px; }
  main section article {
    width: 100%;
    /*max-width:1366px;*/
    display: none;
    margin: auto;
    padding-left: 3%; }
    main section article.trans-actief, main section article.trans-passief, main section article.actief {
      display: block;
      position: absolute;
      top: 0; }
    main section article > div {
      padding-right: 5%; }
    main section article P {
      margin-bottom: 8px; }
    main section article.col3-2-1 {
      background-repeat: no-repeat; }
      main section article.col3-2-1 > div {
        /*width:33.33333333333333333333333333333333333333%;
        padding-top:31%;*/ }
        main section article.col3-2-1 > div:first-child {
          /*padding-top:30%;*/ }
    main section article.col2-1-1 {
      background-repeat: no-repeat;
      /*background-position: 100% 120px;
      background-size: 50%;*/ }
      main section article.col2-1-1 > div {
        width: 50%;
        padding-top: 18%;
        /*15%;*/
        padding-left: 4%; }
        main section article.col2-1-1 > div ul li {
          padding-bottom: 2%; }
        main section article.col2-1-1 > div h3 {
          margin-bottom: 5px; }
      main section article.col2-1-1.hor-h {
        width: 90%; }
        main section article.col2-1-1.hor-h > div {
          padding-left: 0;
          padding-right: 0;
          max-width: 965px;
          padding-top: 10%; }
        main section article.col2-1-1.hor-h h4 {
          width: 24%;
          max-width: 140px; }
        main section article.col2-1-1.hor-h p {
          width: 70%;
          /*position: relative;
          left: 14%;*/
          margin-bottom: 5%; }

.desktop main section#helloworld article, .mobile.tablet main section#helloworld article {
  background-image: url("../images/opleidingpic.jpg"); }
.desktop main section article#doel, .mobile.tablet main section article#doel {
  background-image: url("../images/opleiding_boeken_pic.jpg");
  background-size: 65%; }
.desktop main section article#talen, .mobile.tablet main section article#talen {
  /*background-image:url("../images/hello_world.jpg");	*/ }

.desktop main #home > div {
  background-image: url("../images/stolp.jpg");
  background-repeat: no-repeat; }
.desktop main #partners {
  background-image: url("../images/krul.png");
  background-repeat: no-repeat; }
.desktop main article.col3-2-1 {
  background-position: center 120px;
  background-size: 50%; }
  .desktop main article.col3-2-1 > div {
    width: 33.33333333333333333333333333333333333333%;
    padding-top: 30%;
    /*&:first-child {
    	padding-top:30%;
    }*/ }
.desktop main article.col2-1-1 {
  background-position: 100% 120px;
  background-size: 50%; }
.desktop main article#voorwie {
  background-image: url("../images/leerling.jpg");
  background-position: 100% 120px;
  background-size: 50%; }
.desktop main article#waarom {
  background-image: url("../images/waaromHorizontaal.jpg");
  background-position: 50% 0;
  background-size: 100%; }
.desktop main article#nodig {
  background-image: url("../images/voor_wiepic.jpg"); }
.desktop main article#kosten {
  background-image: url("../images/kosten.jpg"); }
.desktop main article#talen {
  background-image: url("../images/hello_world.jpg");
  background-size: 40%;
  background-position: 90% 120px; }

.desktop.small main section {
  font-size: 85%; }
  .desktop.small main section#home {
    padding-top: 10%; }
    .desktop.small main section#home > div {
      background-position: 90% 50%;
      background-size: 30%; }
      .desktop.small main section#home > div > div h1.sub {
        top: 45px;
        left: 100px;
        font-size: 2em; }
  .desktop.small main section#partners {
    background-position: 120% 0; }
  .desktop.small main section#contact > div {
    width: 95%;
    background-position: 100% 180px;
    background-size: 40%; }
    .desktop.small main section#contact > div > div:first-child {
      width: 80%;
      padding-top: 10%; }
    .desktop.small main section#contact > div textarea {
      width: 80%;
      min-width: 432px; }
  .desktop.small main section article.col2-1-1.hor-h {
    width: 95%; }

.desktop.large main section {
  font-size: 120%;
  /*
  &#deschool {
  	
  }
  */ }
  .desktop.large main section#home > div {
    /*background-image:url("../images/stolp.jpg");
    background-repeat: no-repeat;*/
    background-position: 90% 50%;
    background-size: 30%; }
  .desktop.large main section#partners {
    background-position: 100% 100px; }
  .desktop.large main section#contact > div {
    background-position: 100% 180px;
    background-size: 40%; }
  .desktop.large main section article.col3-2-1 {
    /*background-position:center 120px;
    background-size:50%;*/ }

.mobile.tablet main #home {
  /*padding-top:120px;*/ }
  .mobile.tablet main #home > div {
    padding-left: 30%;
    padding-top: 12%; }
    .mobile.tablet main #home > div > div {
      /*width:70%;*/ }
.mobile.tablet main #contact > div {
  background-size: 550px;
  background-position: 50% 150px; }
  .mobile.tablet main #contact > div > div {
    width: 90%;
    margin: auto; }
.mobile.tablet main #partners article {
  padding-top: 10%; }
.mobile.tablet main article.col3-2-1 {
  background-position: left 25%;
  background-size: 50%; }
  .mobile.tablet main article.col3-2-1 > div {
    width: 50%;
    padding-top: 5px; }
    .mobile.tablet main article.col3-2-1 > div:first-child {
      width: 100%;
      padding-top: 60px;
      padding-left: 50%; }
.mobile.tablet main article.col2-1-1 {
  background-position: center 80px;
  background-size: 100%; }
  .mobile.tablet main article.col2-1-1 > div {
    padding-top: 15%; }
.mobile.tablet main article#voorwie {
  background-image: url("../images/leerlingTablet.jpg"); }
.mobile.tablet main article#nodig {
  background-image: url("../images/benodigdhedenTablet.jpg"); }
.mobile.tablet main article#kosten {
  background-image: url("../images/kostenTablet.jpg"); }
.mobile.tablet main article#waarom {
  background-image: url("../images/waaromTablet.jpg");
  /*background-size:100%;
  background-position:center top;*/ }
.mobile.tablet main article#talen {
  background-image: url("../images/hello_worldTablet.jpg"); }

.mobile.phone main #home > div {
  padding: 30% 0; }
  .mobile.phone main #home > div h1 {
    font-size: 2.6em; }
  .mobile.phone main #home > div .email a {
    letter-spacing: -1.5px; }
.mobile.phone main #contact > div {
  background-size: 80%;
  background-position: 50% 280px; }
  .mobile.phone main #contact > div form {
    min-width: 100%; }
    .mobile.phone main #contact > div form label {
      display: none; }
    .mobile.phone main #contact > div form textarea {
      width: 100%; }
    .mobile.phone main #contact > div form > input[type=text], .mobile.phone main #contact > div form input[type=email] {
      width: 80%;
      margin-bottom: 5px; }

.mobile main section {
  /*
  &#deschool {
  	
  }
  
  &#leerlingen {
  	
  	article {
  		> div {
  			width:100%;
  			
  			img {
  				max-width:50%;
  				max-height:50%;
  				display: block;
  				margin: auto;
  			}
  			
  			
  			
  		}
  	}
  	
  	
  }
  */ }
  .mobile main section#home {
    /*padding-top:120px;*/
    padding-top: 55px; }
    .mobile main section#home > div > div {
      padding-top: 0; }
      .mobile main section#home > div > div h1.sub {
        position: static; }
  .mobile main section#partners {
    padding-top: 60px; }
    .mobile main section#partners div {
      margin: 0 auto;
      padding-top: 0; }
      .mobile main section#partners div figure img {
        max-width: 60%;
        max-height: 60%; }
      .mobile main section#partners div:nth-of-type(1) {
        padding-left: 10%;
        width: 60%;
        margin-top: 40px; }
      .mobile main section#partners div:nth-of-type(2) {
        margin-top: 60px;
        width: 40%; }
      .mobile main section#partners div:nth-of-type(3) {
        width: 33%;
        display: block;
        margin: auto; }
        .mobile main section#partners div:nth-of-type(3) figure {
          margin: auto; }
          .mobile main section#partners div:nth-of-type(3) figure img {
            max-width: 100%;
            max-height: 100%; }
      .mobile main section#partners div:last-of-type {
        display: block;
        width: 90%; }
  .mobile main section#contact > div {
    padding-left: 0;
    width: 95%; }
    .mobile main section#contact > div > div {
      padding-top: 60px;
      width: 100%; }
      .mobile main section#contact > div > div:nth-of-type(2) {
        padding-top: 5px; }
      .mobile main section#contact > div > div h2 {
        margin-top: 5px;
        width: 70%;
        text-align: center; }
      .mobile main section#contact > div > div form {
        width: 70%;
        min-width: 540px;
        opacity: 0.9; }
  .mobile main section article.col2-1-1 {
    padding-left: 0; }
    .mobile main section article.col2-1-1 > div {
      width: 100%;
      padding-top: 60px; }
  .mobile main section article.col3-2-1 {
    padding-top: 60px; }
  .mobile main section aside.footer {
    height: 40%;
    background-image: url("../images/script.png");
    background-repeat: no-repeat; }

/*animatie*/
@keyframes header_small {
  from {
    height: 10%; }
  to {
    height: 100px; } }
/* The element to apply the animation to */
.desktop header.small_header {
  height: 100px;
  animation-name: header_small;
  animation-duration: 2s;
  background-color: #B4B4B4; }

.desktop.small header.small_header #logo {
  left: -20px;
  top: -20px; }

@keyframes header_large {
  from {
    height: 100px; }
  to {
    height: 180px;
    /*$header_height_home;*/ } }
/* The element to apply the animation to */
/*header.large_header {
	height:$header_height_home;   
}*/
.mobile header.large_header, .mobile header.small_header {
  height: auto;
  background-color: #B4B4B4; }

.desktop.large header.large_header {
  animation-name: header_large;
  animation-duration: 2s; }

@keyframes main_menu_large {
  from {
    top: 0;
    font-size: 23px; }
  to {
    top: 60px;
    font-size: 30px; } }
.desktop .large_header nav {
  position: relative;
  top: 60px;
  /*30px;*/
  font-size: 30px; }
  .desktop .large_header nav > ul > li:hover {
    padding-bottom: 50px; }
    .desktop .large_header nav > ul > li:hover > a {
      color: #FF9933; }
    .desktop .large_header nav > ul > li:hover ul.submenu {
      display: block;
      opacity: 1;
      /*top:60px;*/ }
      .desktop .large_header nav > ul > li:hover ul.submenu > li a {
        color: white; }
        .desktop .large_header nav > ul > li:hover ul.submenu > li a:hover {
          color: #FF9933; }
.desktop .large_header #logo img {
  max-height: 80%;
  max-width: 80%; }
.desktop.small .large_header nav > ul > li:hover .submenu {
  top: 50px; }
.desktop.large .large_header nav > ul > li:hover .submenu {
  top: 60px; }

.mobile .large_header nav {
  position: static; }
.mobile .large_header #logo {
  /*left:-5%;*/
  position: absolute;
  /*right:-70px;*/
  /*top:45px;*/
  display: block;
  /*img {
  	max-height: 100%;
  	max-width: 100%;	
  	min-width:350px;
  	min-height:325px;
  }*/ }
  .mobile .large_header #logo.hide {
    display: none; }

.mobile.phone .large_header #logo {
  left: 20%;
  top: -35%;
  width: 60%; }
  .mobile.phone .large_header #logo img {
    min-height: 0;
    min-width: 0; }

.mobile.tablet .large_header #logo {
  left: -5%;
  top: 45px;
  width: 40%; }
  .mobile.tablet .large_header #logo img {
    max-height: 100%;
    max-width: 100%;
    min-width: 192px;
    min-height: 177px; }

.desktop.large .large_header nav {
  animation-name: main_menu_large;
  animation-duration: 2s; }
.desktop.large .large_header #logo img {
  animation-name: main_logo_large;
  animation-duration: 1s; }

.desktop.small header.large_header {
  height: 140px; }
  .desktop.small header.large_header nav {
    width: 80%; }
  .desktop.small header.large_header #logo {
    width: 20%; }
    .desktop.small header.large_header #logo img {
      max-width: 130%;
      max-height: 130%; }

.desktop.large header.large_header {
  height: 180px; }

@keyframes main_menu_small {
  from {
    top: 25px;
    font-size: 30px; }
  to {
    top: 0;
    font-size: 23px; } }
@keyframes main_logo_small {
  from {
    max-height: 80%;
    max-width: 80%; }
  to {
    max-height: 30%;
    max-width: 30%; } }
@keyframes main_logo_large {
  from {
    max-height: 30%;
    max-width: 30%; }
  to {
    max-height: 80%;
    max-width: 80%; } }
/* The element to apply the animation to */
.desktop.small .small_header nav {
  top: 0; }

.desktop .small_header nav {
  position: relative;
  top: 0;
  animation-name: main_menu_small;
  animation-duration: 2s; }
.desktop .small_header #logo img {
  /*max-height: 100%;
  max-width: 100%;*/
  /*animation-name: main_logo_small;
  animation-duration: 1s;		*/ }

@keyframes swip_out {
  from {
    right: 0; }
  to {
    right: 100%; } }
.trans-actief {
  z-index: 1;
  position: relative;
  right: 100%; }

.desktop .trans-actief {
  animation-name: swip_out;
  animation-duration: 2.9s; }

@keyframes swip_in {
  	/*from {bottom:0;}
      to {bottom:70%;}*/
  from {
    right: -120%; }
  to {
    right: 0; } }
@keyframes show_submenu {
  from {
    top: -50px;
    opacity: 0; }
  to {
    top: 40px;
    opacity: 1; } }
.trans-passief {
  z-index: 100;
  position: relative;
  right: 0; }

.desktop .trans-passief {
  animation-name: swip_in;
  animation-duration: 2.5s; }

.inline-container {
  font-family: 'NoSpace'; }

.inline-container > * {
  display: inline-block;
  font-family: "Century Gothic";
  vertical-align: top; }

#overlay {
  display: none; }
  #overlay.overlay {
    display: block;
    background-color: rgba(1, 1, 1, 0);
    opacity: 0;
    z-index: 20000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0; }
    #overlay.overlay.dark {
      background-color: rgba(100, 100, 100, 0.7);
      color: #0C4D77;
      font-family: "Century Gothic";
      opacity: 1; }
      #overlay.overlay.dark > div {
        width: 60%;
        max-width: 550px;
        margin: 5% auto;
        border: 1px solid white;
        background-color: white; }
        #overlay.overlay.dark > div > div {
          padding: 20px 8px;
          min-height: 200px; }
        #overlay.overlay.dark > div h2 {
          background-color: #0C4D77;
          color: white;
          text-align: center; }
        #overlay.overlay.dark > div button {
          width: 25%;
          padding: 8px;
          margin: 8px auto;
          display: block; }

#toHome {
  position: fixed;
  bottom: 1px;
  right: 0;
  width: 20%; }
  #toHome img {
    width: 50%;
    float: right; }

/*line break responsive design*/
.rwd-line {
  display: block; }

/*# sourceMappingURL=main.css.map */