/******************************************************************
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;


homepage kleur: #aad1e7 // Lichtblauw

Opmerkingen

Deze kleur vormt al de basis in al onze communicatie. Van flyers tot posters/kaarten etc. Een andere opmerking van mijn kant gaat om de te gebruiken foto op de homepage. De eerste indruk dus. Graag zou ik, in samenspraak met de directeur uiteraard, de beeldkeuze willen maken. Uiteraard uit het bestaande stockwerk.

stap0.1 = #485f64 // Proceon donkergrijs

stap0.2 = #8f9ea8 // Proceon lichtgrijs

stap1.1 = #eac2b8 // Zalm

stap1.2 = #c0ddcc // Lichtgroen

stap2.1 = #f19b9f // Rood

stap2.10 = #d5a8cd // Roze

stap2.7 = #aad1e7 // Lichtblauw

stap3.4 = #fbc263 // Geel


$zalm: #eac2b8 // Zalm stap1.1 EIGEN
$lightgreen: #c0ddcc; // Lichtgroen stap1.2
$red: #f19b9f; // Rood stap2.1
$pink: #d5a8cd // Roze stap2.10
$blue #aad1e7; // Lichtblauw stap2.7
$yellow: #fbc263; // Geel stap3.4


*/
.btn {
  background: #fbc263;
  border-color: #fbc263; }

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

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

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

/*
Hoi, hierbij de kleuren voor de website:
- Home > donkergeel (dan komt het logo beter uit) -- $yellow
- Over ons > fel roze -- $red
- Voor ouders > lichtgroen -- $lightgreen
- Nieuws > paars -- $pink
- Contact > lichtblauw -- $blue
*/
body #content .page-header, body #content .page-header .head-text:after {
  background: #aad1e7; }

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

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

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

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

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

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

#content .over_ons {
  background: #b8dbce; }
  @media (min-width: 740px) {
    #content .over_ons .wrap .logo {
      max-width: 49%; } }
  #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; } }
  @media (max-width: 739px) {
    #content .over_ons .wrap .logo br {
      display: none; } }

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

.wrap.tour3d iframe {
  border: 0;
  width: 100%;
  height: 80vh;
  min-height: 480px; }

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