/*======================================================================================================================
Generaal
======================================================================================================================*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans); 


/* Resetting Defaults for All Elements */
* {
    font-family:        'Open Sans', sans-serif;    
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

/* Body */
body {
    margin: 0;                  
    padding: 0;                 
    background-color: white;    
}
body,
body.ovf_hidden {
    overflow: hidden;
}
body.ovf_auto {
    overflow: auto;
}

h1 {
    margin: 24px 0 24px 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #1a438c; 
}

h2 {
    margin: 20px 0 10px 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 23px;
    font-weight: 200;
    color: #e22291; 
}

body > .page-text {
    max-width: 700px;
}


input[type="text"], select {
    min-width: 275px;
    height: 50px;
    font-size: 16px;
    color: #1a438c;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #859bc2;
    padding: 5px;
    width: 100%;
    max-width: 375px;
}

label {
    font-size: 22px;
    color: #1a438c;
}

/*======================================================================================================================
    Menu Settings
======================================================================================================================*/

.menu {
    display: none;
}

/* Disable text selection */
nav * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

nav {
    display:            block;
    position:           relative;
    width:              100%;
    min-height:         32px;
    /* margin:             0px auto 32px auto; */
    border:             none;
}

/* Remove style from UL */
nav ul {
    padding: 0;
    list-style: none;
    margin: 0 0 40px;
}

/* Remove style from LI and force horizontal orientation */
nav ul li {
    position:           relative;
    display:            inline-block;
    vertical-align:     top;
    cursor:             pointer;
    padding:            0;
    margin:             0 6px 0 0;
}
nav ul li > a {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: inline-block;
}

/* Let anything after the menu behave normal */
nav ul:after {
    content: "";
    clear: both;
    display: block;
}

/* Hide submenu's */
nav ul ul {
    display: none;
}

/* Main menu item */
nav ul > li {
    width:                  100%;

    line-height:            40px;
    background-color:       #efefef;              
    border:                 1px solid;
    border-color:           #efefef;              
    -moz-border-radius:     8px;
    -webkit-border-radius:  8px;
    border-radius:          8px;
    font-size:              14px;
    font-weight:            normal;
    color:                  black;                
    text-align:             center;
    text-transform:         lowercase;
    margin:                 0 0 5px 0;
}

nav ul > li:hover:not(.disabled) {
    background-color:   #74c7fd;            
    border-color: #74c7fd;                  
}

nav ul > li:hover:not(.disabled) a {
    color: #fff;                            
    font-weight: 600;
}

    /* Main menu item link */
nav ul > li > a, nav ul > li > span {
    font-size:              14px;
    font-weight:            normal;
    text-decoration:        none;
    color:                  black;              
    text-transform:         lowercase;
}

/*------------------------------------
SUB MENU
------------------------------------*/

/* Sub menu item */
nav ul ul > li {
    width: 180px;
    background-color: #bac3db;          
}

/* Sub menu item link */
nav ul ul > li > a, nav ul ul > li > span {
    font-size: 13px;
}

/* Sub menu item hover */
nav ul ul > li:hover {
    background-color:   #d3d9e9;                   
}

/* Sub menu item hover link */
nav ul ul > li:hover a {
    color: white;           
}

/*------------------------------------
SELECTED
------------------------------------*/

nav li.selected {
    background-color: #74c7fd;           
    border: 1px solid;
    border-color: #74c7fd;               
    cursor: default;
}

nav li.selected > a, nav li.selected > span {
    color:          white;              
    cursor:         default;
    font-weight:    600;
}
nav li.selected:hover,
nav li.selected > a:hover,
nav li.selected > span:hover {
    background-color:   #74c7fd;            
}

/*------------------------------------
DISABLED
------------------------------------*/
nav li.disabled,
nav li.disabled > a,
nav li.disabled > span {
    color: #c7c7c7;                             
    background-color:  transparent;                 
    cursor: default;
    font-weight: 600;
}
nav li.disabled {
    border: 1px solid #d6d6d6;
}

/*------------------------------------
RESPONSIVE
------------------------------------*/

@media screen and (min-width: 500px) and (min-device-width: 500px) {

    .menu {
        display: block;
    }

    nav {
        margin:             0px auto 40px auto;
    }

    nav ul li {
        width:              160px;
        margin:             0 8px 0 0;
    }

    /*nav ul li:after, nav ul li:before {
        left:              100%;
        top:               50%;
        border:            solid transparent;
        content:           " ";
        height:            0;
        width:             0;
        position:          absolute;
        pointer-events:    none;
        z-index:           998;
    }*/
    nav ul li:hover:after{
        border-color:      rgba(0,0,0,0);
        border-left-color: #d3d9e9;          
    }
    nav ul li:after {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #d3d9e9;         
        border-width:      16px;
        margin-top:        -16px;
        margin-left:       0px;
    }
    nav ul li:before {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #ffffff;
        border-width:      23px;
        margin-top:       -23px;
    }
    nav ul li.selected:after {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #24418f;     
    }
    nav ul li.disabled:after {
        border-color:      rgba(0,0,0, 0);
        border-left-color: #d3d9e9;         
    }

    nav ul li.right:after, nav ul li.right:before,
    nav ul li.last:after, nav ul li.last:before {
        display:           none;
    }

}

/*======================================================================================================================
Buttons
======================================================================================================================*/

.buttons {
    width: 100%;
    height: 52px;
    margin-top: 35px;
    clear: both;
}

.button {
    background-color: #74c7fd; 
    color: white;              
    font-size: 1.2rem;
    text-align: center;
    cursor: pointer;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 0;
    padding: 0.8rem 1.4rem;
    min-width: 160px;
    text-transform: capitalize;
}

.button.button-backward i {
    margin-right: 5px;
}

.button.button-forward i {
    margin-left: 5px;
}

.button.button-backward {
    border-radius: 0 12px 12px 0;
}

.button.button-forward {
    border-radius: 12px 0 0 12px;
}

.button.button-signout {
    background-color: #00a652;
}

.button:hover:not(.disabled) {
    background-color: #df1d84;
    color: white;
}

.button.disabled {
    background-color: transparent;  
    color: #c7c7c7;                 
    cursor: default;
    border: 1px solid #d6d6d6;
}

/*======================================================================================================================
    General
======================================================================================================================*/

.profs-container.hidden {
    display: none;
}

.content-row {
    display: flex;
    flex-direction: row;
}

.content-row > .content-block {
    flex: 1 1 auto;
}

.content-row > .content-block.left {
    flex: 0 0 20%;
    display:flex;
    justify-content: center;
}

.content-row > .content-block.left img {
    width: 160px;
    height: 260px;
}

.content-row > .content-block.right {
    flex-basis: 100%;
    display:flex;
    flex-direction: column;
}

.content-row blockquote {
    background: #f2f2f2;
    border-left: 10px solid #df1d84;
    margin: 1.5em;
    padding: 2em;
    quotes: "\201C""\201D""\2018""\2019";
    max-width: 700px;
    flex: 0 0 auto;
}
.content-row blockquote:before {
    color: #df1d84;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.content-row blockquote:after {
    color: #df1d84;
    content: close-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-left: 0.25em;
    vertical-align: -0.55em;
}
.content-row blockquote p {
    display: inline;
    font-style: italic;
}

.content-row > .content-block .content-redirects {
    flex: 0 0 auto;
    margin: 1.5em 1.5em 0 1.5em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.content-row > .content-block .content-redirects a {
    color: #df1d84;
    font-size: 1.5em;
    text-decoration: none;
    margin-right: 40px;
    border: 1px solid #df1d84;
    padding: 5px;
    border-radius: 6px;
    flex: 0 0 auto;
    display: flex;
    margin-bottom: 20px;
    min-width: 224px;
    justify-content: center;
}

.content-row > .content-block .content-redirects a:hover {
    color: #fff;
    background-color: #df1d84;
}

.content-row > h3 {
    color: #000;
    padding: 0;
    margin: 40px 0;
    font-size: 1.4em;
}

.content-row.profs {
    flex-direction: column;
}

.content-row.info {
    margin: 60px 0;
}

.content-row > .prof-example {
    display: flex;
    flex-direction: row;
    margin-bottom: 60px;
}

.content-row > .prof-example > .prof-image {
    flex: 0 0 40%;
}

.content-row > .prof-example > .prof-text {
    flex: 1 1 100%;
    padding: 0 60px;
}

.content-row > .prof-example > .prof-text h3 {
    margin-top: 0;
    padding-top: 0;
}

.content-row > .prof-example > .prof-image img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 5px;
}

@media (max-width: 1024px)
{
    .content-row > .prof-example {
        flex-direction: column;
    }

    .content-row > .prof-example > .prof-text {
        padding: 30px 60px 0 0;
    }

    .content-row > .content-block .content-redirects a {
        width: 100%;
    }
}

@media (max-width: 576px)
{
    .content-row > .content-block.left {
        display: none;
    }
}

@media (max-width: 468px)
{
    .content-row blockquote {
        margin: 0;
    }

    .content-row > .content-block .content-redirects {
        margin: 3em 0 0 0;
    }

    .content-row > .prof-example > .prof-text {
        padding: 30px 0 0 0;
    }
}

/*======================================================================================================================
Intro
======================================================================================================================*/

.page-intro > .intro-lof {
    margin-top: 40px;
    background-color: #f2f2f2;
    border-radius: 6px;
    padding: 24px;
}