/******************************************************************
Site Name   : Proceon
Author      : Roelof Bos | Ragfijn.nl
Stylesheet	: Variables
******************************************************************/
@import url("https://use.typekit.net/qcm5zvr.css");
@font-face {
  font-family: proxima-nova-alt;
  font-weight: 400;
  src: url(/inc/fonts/ProximaNovaAltRegular.otf); }
@font-face {
  font-family: proxima-nova-alt;
  font-weight: 600;
  src: url(/inc/fonts/ProximaNovaAltBold.otf); }
/******************************************************************
Author      : Roelof Bos | Ragfijn.nl
Stylesheet	: Mixins
******************************************************************/
/* @include transition( ... ); */
/* @include border-radius( ... ); */
/* @include transform( ... ); */
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* @include box-sizing(border-box); */
/*
// Proceon kleuren
color1 $lightgray: #AFBCC3;
color2 $darkgray: #485A60;
color3 $pink: #EAC1B7;
color4 $lightgreen: #B8DBCE;
color5 $yellow: #F5DEA5;
color6 $blue: #7CC3D6;
color7 $red: #FC8B88;
*/
.bg-color1 {
  background-color: #AFBCC3; }

.bg-color2 {
  background-color: #485A60; }

.bg-color3 {
  background-color: #EAC1B7; }

.bg-color4 {
  background-color: #B8DBCE; }

.bg-color5 {
  background-color: #F5DEA5; }

.bg-color6 {
  background-color: #7CC3D6; }

.bg-color7 {
  background-color: #FC8B88; }

.fg-color1 {
  color: #AFBCC3; }

.fg-color2 {
  color: #485A60; }

.fg-color3 {
  color: #EAC1B7; }

.fg-color4 {
  color: #B8DBCE; }

.fg-color5 {
  color: #F5DEA5; }

.fg-color6 {
  color: #7CC3D6; }

.fg-color7 {
  color: #FC8B88; }

.border-color1 {
  border-color: #AFBCC3; }

.border-color2 {
  border-color: #485A60; }

.border-color3 {
  border-color: #EAC1B7; }

.border-color4 {
  border-color: #B8DBCE; }

.border-color5 {
  border-color: #F5DEA5; }

.border-color6 {
  border-color: #7CC3D6; }

.border-color7 {
  border-color: #FC8B88; }

#header .wrap a.logo span, .page-header a.logo span {
  display: block; }
  #header .wrap a.logo span svg, .page-header a.logo span svg {
    height: 3.6em; }

.logo path, .logo .stip {
  fill: #485A60; }

.page_home #content .page-header .logo {
  margin-top: 0; }
.page_home #content .page-header .head-text .inner {
  padding: 3em 0 1em; }
  @media (min-width: 740px) {
    .page_home #content .page-header .head-text .inner h1 {
      padding-top: 0.5em; } }
.page_home #content .page-header .head-text .fg {
  margin-top: -1em; }

#content .page-header, #content .page-header .head-text:after {
  background: #B8DBCE; }

.top_over-ons .logo .stip {
  fill: #FC8B88; }
.top_over-ons #content .page-header, .top_over-ons #content .page-header .head-text:after {
  background: #FC8B88; }

.top_onze-scholen .logo .stip {
  fill: #EAC1B7; }
.top_onze-scholen #content .page-header, .top_onze-scholen #content .page-header .head-text:after {
  background: #EAC1B7; }

.top_nieuws .logo .stip {
  fill: #7CC3D6; }
.top_nieuws #content .page-header, .top_nieuws #content .page-header .head-text:after {
  background: #7CC3D6; }

.top_vacatures .logo .stip {
  fill: #B8DBCE; }
.top_vacatures #content .page-header, .top_vacatures #content .page-header .head-text:after {
  background: #B8DBCE; }

.top_innovatie .logo .stip,
.top_contact .logo .stip {
  fill: #F5DEA5; }
.top_innovatie #content .page-header, .top_innovatie #content .page-header .head-text:after,
.top_contact #content .page-header,
.top_contact #content .page-header .head-text:after {
  background: #F5DEA5; }
.top_innovatie #content .page-header.bg-color5 .fg,
.top_contact #content .page-header.bg-color5 .fg {
  color: #ffffff !important; }

/* // 24 sept 2019 Speciale lay-out van header op Proceon site doorgevoerd naar CORE
#content {
  .page-header {
    @media (min-width:$desktop_start) {
      margin-bottom:-2em;
      .head-img {
        left:43%;
        overflow: hidden;
        background-position: center top;
        background-size: 100%;
        &:after {
          content: " ";
          background-image:url(/site/head-curve.svg);
          background-position:center center;
          background-size:104% 104%;
          background-repeat:no-repeat;
          position: absolute;
          width:102%;
          height:0;
          //padding-bottom:40%; // todo check
          height:55%;
          bottom:-1px;
          left:-1%;
          
          // Test
          //opacity:0.5;
        }
      }
      .head-text {
        left:0;

        overflow: hidden;
        background: #fff;

        // Test
        //outline:1px dotted red;
        
        .inner {
          line-height:1;
          span {
            font-family:$sans;
            font-size:80%;
          }
        }
        
        &:after {
          content: "";
          position: absolute;
          z-index:1;
          width:400%;
          height: 320%;
          right: -200%;
          bottom:2em;
          border-radius: 50%;
          background: $lightgreen;
        }
        .fg {
          z-index:2;
          margin-top: -1.3em;
        }
      }
    }
  }
}
.page_home #content {
  .page-header {
    .head-text .inner h1 {
      font-family:$sans;
    }
    .head-text {
      .logo {
        display:none;
      }
    }
    @media (min-width:$desktop_start) {
      .head-text {
        .inner h1 {
          font-size:100%;
          padding-top:1em;
        }
        .logo {
          display:block;
          @include transition(opacity 0.4s ease);
          opacity:1;
          svg {
            width:60%;
          }
        }
      }
      margin-bottom:0em;
      padding-bottom:42%;
      @media (max-height: 500px) and (min-width: 900px), (max-height: 600px) and (min-width: 1000px), (max-height: 900px) and (min-width: 1100px), (min-width: 1300px) {
        padding-bottom:29em;
      }
      .head-img {
        background-size: cover;
        &:after {
          background-image:url(/site/head-curve-home.svg);
          //background-size:cover;
          //height:0;
          //padding-bottom:30%; 
          height:40%;
        }
      }
    }
  }
}
*/
#content .submenu ul li {
  font-size: 100%; }
#content .wrap.corporate_home_block {
  -webkit-border-radius: 2.6em 0 2.6em 0;
  -moz-border-radius: 2.6em 0 2.6em 0;
  border-radius: 2.6em 0 2.6em 0;
  margin-bottom: 4em;
  padding: 0; }
  #content .wrap.corporate_home_block .text {
    position: relative;
    z-index: 3;
    min-height: 18em;
    width: 100%;
    max-width: 100%;
    padding: 2em; }
    @media (min-width: 1024px) {
      #content .wrap.corporate_home_block .text {
        padding: 2.6em 2.8em; } }
    @media (min-width: 1100px) {
      #content .wrap.corporate_home_block .text {
        padding: 3.2em 2.6em; } }
    @media (min-width: 1200px) {
      #content .wrap.corporate_home_block .text {
        padding: 4em 3.8em; } }
    #content .wrap.corporate_home_block .text h1, #content .wrap.corporate_home_block .text h2 {
      margin: -0.2em 0 0.6em; }
  #content .wrap.corporate_home_block .image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 18em;
    background-size: cover;
    background-position: center center; }
    @media (min-width: 425px) {
      #content .wrap.corporate_home_block .image {
        height: 21em; } }
    @media (min-width: 625px) {
      #content .wrap.corporate_home_block .image {
        height: 24em; } }
  @media (min-width: 740px) {
    #content .wrap.corporate_home_block .text {
      width: 50%;
      max-width: 50%; }
    #content .wrap.corporate_home_block .image {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      right: 0; } }
#content .wrap.corporate_intro {
  background: #f0d3cc;
  margin-bottom: 10em;
  position: relative; }
  #content .wrap.corporate_intro .image {
    background: #EAC1B7;
    -webkit-border-radius: 0 0 2.6em 0;
    -moz-border-radius: 0 0 2.6em 0;
    border-radius: 0 0 2.6em 0; }
    #content .wrap.corporate_intro .image:after {
      content: " ";
      position: absolute;
      background-image: url(/site/home-img.svg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      width: 60%;
      height: 120%;
      left: 20%;
      top: 3em; }
#content .wrap.werken_bij {
  background: #8C9EA9;
  overflow: hidden; }
  #content .wrap.werken_bij .h1, #content .wrap.werken_bij .text {
    color: #ffffff; }
  @media (min-width: 740px) {
    #content .wrap.werken_bij .text {
      position: relative;
      left: 50%; }
    #content .wrap.werken_bij .image {
      right: auto;
      left: 0; } }
#content .bg-scholen_map {
  text-align: center;
  padding: 0.5em 0 1em;
  margin-bottom: 3em; }
  #content .bg-scholen_map h2 {
    margin-bottom: 0.8em;
    margin-top: 0; }
  #content .bg-scholen_map .map {
    border: 0;
    -webkit-border-radius: 2.6em 0 2.6em 0;
    -moz-border-radius: 2.6em 0 2.6em 0;
    border-radius: 2.6em 0 2.6em 0;
    overflow: hidden;
    margin-bottom: 2em; }
    #content .bg-scholen_map .map .inner {
      padding-bottom: 16em; }
    @media (min-width: 1000px) {
      #content .bg-scholen_map .map {
        width: 100%;
        float: none; }
        #content .bg-scholen_map .map .inner {
          padding-bottom: 35%; } }
  #content .bg-scholen_map .wrap > img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 2.6em 0 2.6em 0;
    -moz-border-radius: 2.6em 0 2.6em 0;
    border-radius: 2.6em 0 2.6em 0;
    overflow: hidden;
    margin-bottom: 2em; }

.page_home #content .bg.nieuwsbericht {
  padding-bottom: 1em;
  margin-bottom: 3em; }
@media (max-width: 739px) {
  .page_home #content .page-header .head-text {
    margin-bottom: 7em;
    padding-bottom: 7em; } }
  @media (max-width: 739px) and (min-width: 560px) {
    .page_home #content .page-header .head-text {
      padding-bottom: 5em; } }

.page_home #content .vacature-popup {
  width: 14em;
  height: 14em;
  position: absolute;
  margin-top: -14em;
  right: 1em; }
  @media (min-width: 740px) {
    .page_home #content .vacature-popup {
      right: 3em;
      margin-top: -16em; } }
  @media (min-width: 1024px) {
    .page_home #content .vacature-popup {
      right: 20%;
      margin-right: -10em; } }
  .page_home #content .vacature-popup a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    top: 0;
    -webkit-transition: top 0.2s ease;
    -moz-transition: top 0.2s ease;
    -o-transition: top 0.2s ease;
    -ms-transition: top 0.2s ease;
    transition: top 0.2s ease;
    background-image: url(/site/vacatures.svg);
    background-repeat: no-repeat;
    background-size: contain; }
    .page_home #content .vacature-popup a:hover {
      top: -0.2em; }
    .page_home #content .vacature-popup a span {
      display: none; }

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