@charset "UTF-8";
/******************************************************************
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); }
/*
// 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; }

/*
// Proceon kleuren
color1 $lightgray: #AFBCC3;
color2 $darkgray: #485A60;
color3 $pink: #EAC1B7;
color4 $lightgreen: #B8DBCE;
color5 $yellow: #F5DEA5;
color6 $blue: #7CC3D6;
color7 $red: #FC8B88;

// Pastel:
color3 $pink: #EAC1B7;
color4 $lightgreen: #B8DBCE;
color5 $yellow: #F5DEA5;
color6 $blue: #7CC3D6;

*/
/*
$blue: blue;
$pink: pink;
$lightgreen: lightgreen;
$yellow: yellow;
$red: red;
*/
/*

Warinschool

homepage kleur: #eac2b8

Opmerkingen
Kleur 3 is onze eerste keus bovenaan op de homepagina. De Proceon kleuren zijn gekozen om af te steken bij het nieuwe logo. De kleuren erbij kleuren bij het nieuwe interieur dat de school gaat krijgen. De button kleur is gekozen om op te vallen.
stap0.1 = #485f64 stap0.2 = #8f9ea8. stap1.1 = #eac2b8. stap1.4 = #f5dea5
stap2.5 = #87c7b3 stap2.6 = #bed3c3. stap2.9 = #b0dce0. stap3.1 = #f28f86



- Home: roze #eac2b8 
  - Button: felroze #F28F86
- Over ons: lichtgeel #f5dea5

- Voor ouders: donkergroen #87c7b3

- Groepen: lichtgroen #C0DDCC
- Nieuws: lichtblauw #b0dce0

- Agenda: zeeblauw #7DC2D6

- Peuters en BSO: lichtgeel #f5dea5

- Contact: lichtgroen #C0DDCC


*/
.btn, .bel-ons-popup {
  background: #F28F86;
  border-color: #F28F86; }

.btn:focus, .btn:hover {
  color: #F28F86 !important; }

#header .wrap a.logo {
  height: 4.2em;
  top: 0.4em; }

#header .wrap a.logo, .page-header a.logo {
  background-image: url(/site/logo-warinschool.svg); }

body #content .page-header, body #content .page-header .head-text:after {
  background: #7DC2D6; }

body.top_over-ons #content .page-header {
  background: #f5dea5; }
  body.top_over-ons #content .page-header .head-text:after {
    background: #f5dea5; }

body.top_voor-ouders #content .page-header {
  background: #87c7b3; }
  body.top_voor-ouders #content .page-header .head-text:after {
    background: #87c7b3; }

body.top_nieuws #content .page-header {
  background: #b0dce0; }
  body.top_nieuws #content .page-header .head-text:after {
    background: #b0dce0; }

body.top_agenda #content .page-header {
  background: #eac2b8; }
  body.top_agenda #content .page-header .head-text:after {
    background: #eac2b8; }

body.top_bso #content .page-header {
  background: #f5dea5; }
  body.top_bso #content .page-header .head-text:after {
    background: #f5dea5; }

body.top_contact #content .page-header {
  background: #bed3c3; }
  body.top_contact #content .page-header .head-text:after {
    background: #bed3c3; }

#content .over_ons {
  background: #eac2b8; }
  #content .over_ons .wrap .logo .outline-logo {
    background-image: url(/site/outline-logo.svg); }
    @media (min-width: 1024px) and (min-width: 740px) {
      #content .over_ons .wrap .logo .outline-logo {
        top: -0.5em; } }
    @media (min-width: 740px) {
      #content .over_ons .wrap .logo .outline-logo {
        width: 4em; } }

.wrap.agenda-summary .bg-color1 {
  background: #bed3c3; }

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