@import url(fonts/fonts.css);
/** Reset de basiselementen */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/** algemene styling */
body { color: #111; background-color: #fdfdfd; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; font-weight: 300; -webkit-text-size-adjust: 100%; }

/** aanpassing van margin-bottom in aantal elementen voor vloeiende layout */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** Hoofddingen */
h1, h2, h3, h4, h5, h6 { font-weight: 300; }

.text-center { text-align: center; }

/** Afbeeldingen */
img { max-width: 100%; vertical-align: middle; }

/** Figuren */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lijsten */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

@media screen and (max-width: 730px) { h1 { font-size: 1.4em; margin-top: 30px; } }

.home h2 { font-size: 14px; display: table; white-space: nowrap; width: 100%; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: bold; color: #3e484f; margin-top: 20px; }

.home h2:after { background-clip: padding; background-image: linear-gradient(transparent 47%, #dddddd 48%, #dddddd 52%, transparent 52%); content: ""; display: table-cell; width: 100%; border-left: 10px solid #FDFDFD; }

h4 { font-weight: bold; margin-bottom: 10px; }

/** Links */
a { color: #016ac9; text-decoration: none; }

a:visited { color: #014f96; }

a:hover { color: #111; text-decoration: underline; }

/** Blockquotes */
blockquote { color: #3e484f; border-left: 4px solid #ced7dd; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #ced7dd; border-radius: 3px; background-color: #dae3e8; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: scroll; }

pre > code { border: 0; padding-right: 0; padding-left: 0; word-wrap: normal; white-space: pre; }

/** Wrapper */
.wrapper, .hero.slim div.container { max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }

@media screen and (max-width: 800px) { .wrapper, .hero.slim div.container { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.wrapper:after, .hero.slim div.container:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.icon > svg path { fill: #3e484f; }

/** Site header */
.site-header { min-height: 56px; position: relative; }

.site-title { margin-bottom: 7px; margin-left: 0px; margin-top: 7px; padding-left: 0px; font-size: 26px; line-height: 56px; letter-spacing: -1px; float: left; }

.site-title img { max-width: 250px; margin-bottom: 18px; margin-top: 10px; margin-right: 15px; }

@media screen and (max-width: 730px) { .site-title img { max-width: 200px; } }

.site-title, .site-title:visited { color: #424242; }

.site-nav { float: right; line-height: 56px; margin-top: 10px; }

.site-nav .menu-icon { display: none; }

.site-nav .page-link { color: #111; line-height: 1.5; }

.site-nav .page-link:not(:first-child) { margin-left: 20px; }

@media screen and (max-width: 730px) { .site-nav { position: absolute; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; margin-top: 0; top: 28px; right: 18px; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon > svg { width: 18px; height: 15px; } .site-nav .menu-icon > svg path { fill: #424242; } .site-nav .trigger { clear: both; display: none; } .site-nav:hover .trigger { display: block; padding-bottom: 5px; } .site-nav .page-link { display: block; padding: 5px 10px; } }

.hero.tall { padding: 70px 0; text-align: center; background: #E1DCD2 url(/images/squares/fushia.jpg) no-repeat center center; background-size: cover; }

.text-container { text-align: center; }

@media screen and (max-width: 730px) { .hero.tall { padding: 50px 0; } }

.hero.tall div.container { background-color: rgba(254, 254, 254, 0.7); border: 1px solid rgba(254, 254, 254, 0.85); border-radius: 10px; padding: 30px 10px; width: 90%; max-width: 950px; margin: 0 auto; }

.hero.tall div.container > img { float: left; margin-left: 7%; margin-top: 1.75%; }

@media screen and (max-width: 730px) { .hero.tall div.container { max-width: 90%; border-radius: 0; padding: 10px 10px; } }

.hero.tall h1 { font-weight: 300; margin-bottom: 10px; font-size: 46px; color: #2C3C69; margin-top: 10px; }

@media screen and (max-width: 730px) { .hero.tall h1 { font-size: 26px; } }

.hero.tall h1 span { color: #e26d01; }

.hero.tall h2 { font-weight: normal; margin-bottom: 0; font-size: 20px; }

.hero.slim { padding-top: 25px; padding-bottom: 18px; text-align: center; background: #E1DCD2 url(/images/squares/fushia.jpg) no-repeat center center; background-size: cover; }

.hero.slim div.container { text-align: left; width: 90%; margin: 0 auto; }

.hero.slim div.container h1 { font-weight: normal; }

@media screen and (max-width: 730px) { .hero.slim div.container { max-width: 90%; border-radius: 0; } }

.hero.slim h1 { font-weight: 300; margin-bottom: 10px; font-size: 46px; display: inline-block; width: auto; background-color: rgba(254, 254, 254, 0.5); border-radius: 8px; padding: 10px 20px; }

@media screen and (max-width: 730px) { .hero.slim h1 { font-size: 30px; margin-top: 10px; } }

.hero.slim h1 span { color: #1678D3; }

.sponsors h1 { margin-top: 40px; margin-bottom: 0; }

.institutions img { padding: 20px; }

@media screen and (max-width: 730px) { .sponsors img { max-width: 60% !important; max-height: 60px; } }

.home { margin-top: 10px; }

.grid-container { padding: 20px; }

@media screen and (max-width: 730px) { .grid-container { padding: 0; } }

/** Site footer */
.site-footer { background: #3e484f; padding: 30px 0; margin-top: 40px; }

.site-footer a { color: #3fa3fe; text-decoration: none; }

.site-footer a:visited { color: #2697fe; }

.footer-heading { font-size: 18px; margin-bottom: 15px; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper { font-size: 15px; color: #dae3e8; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(65% - (30px / 2)); width: calc(65% - (30px / 2)); }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } }

@media screen and (max-width: 730px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

/** Page content */
.page-content { padding: 30px 0; }

.page-heading { font-size: 20px; }

.post-list { margin-left: 0; list-style: none; }

.post-list h2 { margin-bottom: 5px; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #3e484f; }

.post-link { display: block; font-size: 28px; }

@media screen and (max-width: 730px) { .post-link { font-size: 20px; } }

.home .post-link { font-size: 22px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-title { font-size: 42px; letter-spacing: -1px; line-height: 1; }

@media screen and (max-width: 800px) { .post-title { font-size: 36px; } }

.post-content { margin-bottom: 30px; }

.post-content h2 { font-size: 32px; }

@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }

.post-content h3 { font-size: 26px; }

@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }

.post-content h4 { font-size: 20px; }

@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

/* Images in About */
.about-figure { text-align: center; }

.about-figure img { padding: 10px; }

/* webstart buttons */
.webstart-container { text-align: center; padding-top: 25px; padding-bottom: 40px; }

a.webstart-button { padding: 15px; width: 100px; /*same as the height*/ height: 100px; /*same as the width*/ color: #fff; font-size: 16px; /*set the border-radius at half the size of the width and height*/ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; /*give the button a small drop shadow*/ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.75); }

/***NOW STYLE THE BUTTON'S HOVER STATE***/
a.webstart-button:hover { text-decoration: none; }

a.webstart-button:active { text-decoration: none; /*reduce the size of the shadow to give a pushed effect*/ -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); }

.webstart-experimenter a.webstart-button { background-color: #6ac901; border: 1px solid #6ac901; /*same colour as the background*/ }

.webstart-experimenter a.webstart-button:hover { background: #5db001; border: 1px solid #5db001; }

.webstart-experimenter a.webstart-button:active { background: #427d01; border: 1px solid #427d01; }

.webstart-experimenter-beta a.webstart-button { background-color: #01c9a3; border: 1px solid #01c9a3; /*same colour as the background*/ }

.webstart-experimenter-beta a.webstart-button:hover { background: #01b08e; border: 1px solid #01b08e; }

.webstart-experimenter-beta a.webstart-button:active { background: #017d65; border: 1px solid #017d65; }

.webstart-probe a.webstart-button { background-color: #015db0; border: 1px solid #015db0; /*same colour as the background*/ }

.webstart-probe a.webstart-button:hover { background: #015097; border: 1px solid #015097; }

.webstart-probe a.webstart-button:active { background: #013564; border: 1px solid #013564; }

.webstart-automated-testing a.webstart-button { background-color: #b0015d; border: 1px solid #b0015d; /*same colour as the background*/ }

.webstart-automated-testing a.webstart-button:hover { background: #970150; border: 1px solid #970150; }

.webstart-automated-testing a.webstart-button:active { background: #640135; border: 1px solid #640135; }

dd { margin-left: 40px; }

/* login buttons */
.login-container { text-align: center; padding-top: 25px; padding-bottom: 25px; }

.login-button { padding: 15px; width: 100px; /*same as the height*/ height: 100px; /*same as the width*/ color: #fff; font-size: 16px; /*set the border-radius at half the size of the width and height*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*give the button a small drop shadow*/ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.75); box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.75); }

.login-button:hover { text-decoration: none; }

.login-button:active { text-decoration: none; /*reduce the size of the shadow to give a pushed effect*/ -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); }

.login-fed4fire a.login-button { background-color: #e20177; border: 1px solid #e20177; /*same colour as the background*/ }

.login-fed4fire a.login-button:hover { background: #c9016a; border: 1px solid #c9016a; }

.login-fed4fire a.login-button:active { background: #96014f; border: 1px solid #96014f; }

.login-geni a.login-button { background-color: #FB8C00; border: 1px solid #FB8C00; /*same colour as the background*/ }

.login-geni a.login-button:hover { background: #e27e00; border: 1px solid #e27e00; }

.login-geni a.login-button:active { background: #af6100; border: 1px solid #af6100; }

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