/* CSS for the fadein and fadeout css*/
.animate-in {
    -webkit-animation: fadeIn .5s ease-in;
    animation: fadeIn .5s ease-in;
}

.animate-out {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* CSS for centering the table*/
table, th, td {
    border: 0px solid black;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

    table.center {
        margin-left: auto;
        margin-right: auto;
    }

/* CSS for video background*/
#myVideo {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.content {
    position: relative;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: -20px;
}

/* CSS for placing the logo & Grid button */
.logo {
    position: fixed;
    top: 0;
    left: 0;
}

.grid {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.btnGrid {
    background-image: url(/images/gridv60.png?123);
    width: 150px;
    height: 115px;
}

/* CSS for the circular buttons*/
.circle-container {
    position: relative;
    width: 46em;
    height: 46em;
    padding: 2.8em;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: none;
    border-radius: 50%;
    margin: 2.65em 1.9em 0; /*offset van de bovenkant*/
    z-index: 50;
}

    .circle-container a {
        display: block;
        position: relative;
        top: 50%;
        left: 50%;
        width: 2em;
        height: 2em;
        margin: -2.1em;
    }

    .circle-container img {
        display: block;
        width: 100%;
    }

.center {
    width: 4em;
}

.deg325 {
    transform: rotate(325deg) translate(23em) rotate(-325deg);
}
/* 12em = half the width of the wrapper */
.deg344 {
    transform: rotate(344deg) translate(23em) rotate(-344deg);
}

.deg7 {
    transform: rotate(7deg) translate(23em) rotate(-7deg);
}

.deg28 {
    transform: rotate(28deg) translate(23em) rotate(-28deg);
}

.deg47 {
    transform: rotate(47deg) translate(23em) rotate(-47deg);
}

.deg70 {
    transform: rotate(70deg) translate(23em) rotate(-70deg);
}

.deg85 {
    transform: rotate(85deg) translate(23em) rotate(-85deg);
}

.deg100 {
    transform: rotate(100deg) translate(23em) rotate(-100deg);
}

.deg115 {
    transform: rotate(115deg) translate(23em) rotate(-115deg);
}

.deg130 {
    transform: rotate(130deg) translate(23em) rotate(-130deg);
}

.deg145 {
    transform: rotate(145deg) translate(23em) rotate(-145deg);
}

.deg170 {
    transform: rotate(170deg) translate(23em) rotate(-170deg);
}

.deg183 {
    transform: rotate(183deg) translate(23em) rotate(-183deg);
}

.deg196 {
    transform: rotate(196deg) translate(23em) rotate(-196deg);
}

.deg210 {
    transform: rotate(210deg) translate(23em) rotate(-210deg);
}

.deg235 {
    transform: rotate(235deg) translate(23em) rotate(-235deg);
}

.deg258 {
    transform: rotate(258deg) translate(23em) rotate(-258deg);
}

.deg282 {
    transform: rotate(282deg) translate(23em) rotate(-282deg);
}

.deg305 {
    transform: rotate(305deg) translate(23em) rotate(-305deg);
}

.cohort {
    width: 30px;
    height: 30px;
    background: url("../images/icon-cohort-normal.png") no-repeat;
    display: inline-block;
}

    .cohort:hover {
        background: url("../images/icon-cohort-hoover.png?1") no-repeat;
    }

.student {
    width: 30px;
    height: 30px;
    background: url("../images/icon-student-normal.png") no-repeat;
    display: inline-block;
}

    .student:hover {
        background: url("../images/icon-student-hoover.png") no-repeat;
    }

.company {
    width: 30px;
    height: 30px;
    background: url("../images/icon-company-normal.png") no-repeat;
    display: inline-block;
}

    .company:hover {
        background: url("../images/icon-company-hoover.png") no-repeat;
    }

.staff {
    width: 30px;
    height: 30px;
    background: url("../images/icon-lecturer-normal.png") no-repeat;
    display: inline-block;
}

    .staff:hover {
        background: url("../images/icon-lecturer-hoover.png") no-repeat;
    }

.vendors {
    width: 30px;
    height: 30px;
    background: url("../images/icon-inperson-normal.png") no-repeat;
    display: inline-block;
}

    .vendors:hover {
        background: url("../images/icon-inperson-hoover.png") no-repeat;
    }

.financials {
    width: 30px;
    height: 30px;
    background: url("../images/icon-statement-normal.png") no-repeat;
    display: inline-block;
}

    .financials:hover {
        background: url("../images/icon-statement-hoover.png") no-repeat;
    }

.schedule {
    width: 30px;
    height: 30px;
    background: url("../images/icon-schedule-normal.png") no-repeat;
    display: inline-block;
}

    .schedule:hover {
        background: url("../images/icon-schedule-hoover.png") no-repeat;
    }

.emailing {
    width: 30px;
    height: 30px;
    background: url("../images/icon-emailing-normal.png") no-repeat;
    display: inline-block;
}

    .emailing:hover {
        background: url("../images/icon-emailing-hoover.png") no-repeat;
    }

.attendance {
    width: 30px;
    height: 30px;
    background: url("../images/icon-attendance-normal.png") no-repeat;
    display: inline-block;
}

    .attendance:hover {
        background: url("../images/icon-attendance-hoover.png") no-repeat;
    }

.grades {
    width: 30px;
    height: 30px;
    background: url("../images/icon-grades-normal.png") no-repeat;
    display: inline-block;
}

    .grades:hover {
        background: url("../images/icon-grades-hoover.png") no-repeat;
    }

.evaluations {
    width: 30px;
    height: 30px;
    background: url("../images/icon-evaluation-normal.png") no-repeat;
    display: inline-block;
}

    .evaluations:hover {
        background: url("../images/icon-evaluation-hoover.png") no-repeat;
    }

.transcript {
    width: 30px;
    height: 30px;
    background: url("../images/icon-transcript-normal.png") no-repeat;
    display: inline-block;
}

    .transcript:hover {
        background: url("../images/icon-transcript-hoover.png") no-repeat;
    }

.graduation {
    width: 30px;
    height: 30px;
    background: url("../images/icon-graduation-normal.png") no-repeat;
    display: inline-block;
}

    .graduation:hover {
        background: url("../images/icon-graduation-hoover.png") no-repeat;
    }

.thesis {
    width: 30px;
    height: 30px;
    background: url("../images/icon-thesis-normal.png") no-repeat;
    display: inline-block;
}

    .thesis:hover {
        background: url("../images/icon-thesis-hoover.png") no-repeat;
    }

.alumni {
    width: 30px;
    height: 30px;
    background: url("../images/icon-alumni-normal.png") no-repeat;
    display: inline-block;
}

    .alumni:hover {
        background: url("../images/icon-alumni-hoover.png") no-repeat;
    }

.schools {
    width: 30px;
    height: 30px;
    background: url("../images/icon-university-normal.png") no-repeat;
    display: inline-block;
}

    .schools:hover {
        background: url("../images/icon-university-hoover.png") no-repeat;
    }

.inhoud {
    width: 30px;
    height: 30px;
    background: url("../images/icon-course-normal.png") no-repeat;
    display: inline-block;
}

    .inhoud:hover {
        background: url("../images/icon-course-hoover.png") no-repeat;
    }

.quality {
    width: 30px;
    height: 30px;
    background: url("../images/icon-lo-normal.png") no-repeat;
    display: inline-block;
}

    .quality:hover {
        background: url("../images/icon-lo-hoover.png") no-repeat;
    }

.programs {
    width: 30px;
    height: 30px;
    background: url("../images/icon-academic-normal.png") no-repeat;
    display: inline-block;
}

    .programs:hover {
        background: url("../images/icon-academic-hoover.png") no-repeat;
    }


/*    Ouwe css*/

a:link {
    color: rgb(0, 0, 255);
    text-decoration: none;
}

a:active {
    color: rgb(0, 0, 255);
}

a:visited {
    color: rgb(0, 0, 255);
    text-decoration: none;
}

body {
    color: rgb(0, 0, 0);
    font-family: 'Tahoma';
    font-size: 13px;
    line-height: 130%;
}

ul {
    margin-bottom: 0;
    margin-top: 0;
}

li {
    margin-top: 0;
    margin-bottom: 0;
}

ol {
    margin-bottom: 0;
    margin-top: 0;
    list-style-position: outside;
    list-style-type: decimal;
}

h1 {
    margin-top: 12px;
    color: rgb(102, 0, 0);
    font-weight: bold;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-style: normal;
    font-size: 16pt;
}

h2 {
    color: rgb(102, 0, 0);
    font-style: normal;
    font-weight: bold;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 14pt;
}

h3 {
    color: rgb(102, 0, 0);
    font-weight: bold;
    font-style: normal;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-size: 10pt;
    line-height: normal;
    margin-bottom: 0px;
}

h4 {
}

h5 {
}

h6 {
    margin-top: 16px;
    color: rgb(102, 0, 0);
    font-weight: bold;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    font-style: normal;
    font-size: 14pt;
    margin-bottom: 0px;
}

}

hr {
}

form {
    margin-bottom: 0;
    margin-left: 0;
    text-indent: 0;
    margin-right: 0;
    margin-top: 0;
}

p {
    margin-bottom: 0;
    margin-left: 0;
    text-indent: 0;
    margin-right: 0;
    margin-top: 0;
}

table {
}

td {
    margin-left: 40px;
}

th {
}

tr {
}

th {
}

hr {
}

button {
}

label {
}

textarea {
}

fieldset {
}

legend {
}

select {
}

caption {
}

.search {
    font-size: 8pt;
}