/*===========================================================

    Project:    Gilde Opleidingen Studentenportaal Styling Update
    Client:     Gilde Opleidingen
    Company:    IlionX Team BettyBlocks
    Developer:  Jasper Zuidhof 
    E-mail:     jzuidhof@ilionx.com
    DOB:        August 2020

===========================================================*/

/*===========================================================

  Font Includes
  
===========================================================*/

@font-face
{
    font-family: "Maax Regular";
    src: url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-regular.woff2") format("woff2"), 
    url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: "Maax Medium";
    src: url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-medium.woff2") format("woff2"), 
    url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-medium.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: "Maax Bold";
    src: url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-bold.woff2") format("woff2"), 
    url("https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/maax-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/*===========================================================

  Var Specification
  
===========================================================*/

:root {
    /* Colors */
    --color-fuchsia: #dd0069;
    --color-blue: #00365e;
    --color-yellow: #f8e800;
    --color-green: #00b588;

    --color-fuchsia-darker: #c4005d;
    ----color-blue-darker: #001d45;
    --color-yellow-darker: #dfcf00;
    --color-green-darker: #009c6f;

    --color-fuchsia-lighter: #f71a83;
    --color-blue-lighter: #1a5078;
    --color-yellow-lighter: #ffff1a;
    --color-green-lighter: #1acfa2;

    --color-fuchsia-very-light: #FCE5F0;
    --color-blue-very-light: #E5EBEF;
    --color-yellow-very-light: #FEFDE5;
    --color-green-very-light: #E5F7F3;

    --color-gray: #ccc;
    --color-gray-darker: #bfbfbf;
    --color-gray-lighter: #f6f6f6;

    --color-white: #fff;
    --color-black: #000;
    --color-black-lighter: #222;

    --color-text: #222;
    --color-text-mild: #ccc;


    /* Grid Base PX */
    --grid: 15px;

    /* Z-index Overlay */
    --overlay-z-index: 9999;

    /* Container Widths */
    --max-site-width: 1920px;
    --max-site-width-mijngilde: 1600px;

    /* Breakpoints */
    --screen-xs-min: 480px;
    --screen-sm-min: 768px;
    --screen-md-min: 992px;
    --screen-lg-min: 1200px;
    --screen-xl-min: 1600px;

    --screen-xxs-max: calc(var(--screen-xs-min) - 1px);
    --screen-xs-max: calc(var(--screen-sm-min) - 1px);
    --screen-sm-max: calc(var(--screen-md-min) - 1px);
    --screen-md-max: calc(var(--screen-lg-min) - 1px);
    --screen-lg-max: calc(var(--screen-xl-min) - 1px);

    /* Fonts */
    --font-maax-regular: "Maax Regular", Arial, sans-serif;
    --font-maax-medium: "Maax Medium", Arial, sans-serif;
    --font-maax-bold: "Maax Bold", Arial, sans-serif;

    /* Font Defaults */
    --font-default-size-: 15px;
    --font-default-line-height: 25px;

    /* Input Defaults */
    --input-default-padding: 5px 5px 5px 15px;
    --input-default-font-size: 14px;
    --input-default-border: 1px solid #bbb;

    /* Button defaults */
    --button-default-padding: 15px 30px;
    --button-default-border-radius: 999px;
    --button-default-background-color: #000;
    --button-default-color: #fff;


    /* BG Defaults */
    --bg-style-A: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzA4Mjk1N0QwNUNFMTFFODkwM0RGODc2M0RCNjIzMzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzA4Mjk1N0MwNUNFMTFFODkwM0RGODc2M0RCNjIzMzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4MzQzNTA4RTU1RjExRTdBMkE2RTRDRDgxRTQxOTEyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4MzQzNTA5RTU1RjExRTdBMkE2RTRDRDgxRTQxOTEyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5F+bkwAAABJQTFRF+/v7/Pz87O3t7+/v7e3t6urqMeuMZQAAACNJREFUeNpiYGVhBAIGBgYmZiiDkREbg5UFymBiZsACAAIMAAp8ADmUcJ+AAAAAAElFTkSuQmCC");
}

/*===========================================================

  Var Applicant
  
===========================================================*/

body {
    font-family: var(--font-maax-regular);
    font-size: var(--grid);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: var(--font-default-line-height);
    background-image: var(--bg-style-A);
}

body > header {
    background-color: var(--color-white);
    box-shadow: 5px 5px 25px 0 rgba(0,0,0,0.25);
}

button,
.button {
    padding: var(--button-default-padding);
    border-radius: var(--button-default-border-radius);
    color: var(--button-default-color);
    outline: none !important;
}


input[type="password"], input[type="email"], input[type="text"], input[type="number"] {
    background-color: var(--color-white);
    color: var(--color-text);
    font-size: var(--input-default-font-size);
}


/*===========================================================

  Wallpapers
  
===========================================================*/

.achtergrond-positie {
    width: 100%;
    height: 460px;
    border-radius: 0 0 100% 100%;
    overflow: hidden;
    background-color: #00365e;
}

.achtergrond-positie:before {
    content:"";
    position: absolute;
    top:0; right:0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center top;
}

.welcome:before{   
    background-image: url(https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/go-a.jpg);
}

.register:before{   
    background-image: url(https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/go-b.jpg);
}

.forgot-password:before{   
    background-image: url(https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/go-c.jpg);
}

.reset-password:before{   
    background-image: url(https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/go-d.jpg);
}

.afgerond:before{   
    background-image: url(https://assets.bettyblocks.com/a56fe88ad6284176aed0c3890fa93b1d_assets/files/go-e.jpg);
}

.achtergrond-positie + * {
  margin-top: 115px;
}

a, a:hover, a:active, a:visited {
  color: white;
}