/**************** RESET STYLES IS A GOOD THING *************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, 
menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;}

main, article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

a{text-decoration: none; color: inherit; transition: .5s;}
a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}

img{user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}

label{cursor: pointer;}

textarea, input, button, select{background: none; border: none; border-radius: 0; font: inherit; -webkit-appearance: none;}

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;}

html{width: 100%; height: 100%; min-height: 100%}

/**** FONTS *****/

@font-face {
    font-family: 'Suisse Intl';
    src: url('/assets/fonts/swissintl/SuisseIntl-Semibold.eot');
    src: url('/assets/fonts/swissintl/SuisseIntl-Semibold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/swissintl/SuisseIntl-Semibold.woff2') format('woff2'),
        url('/assets/fonts/swissintl/SuisseIntl-Semibold.woff') format('woff'),
        url('/assets/fonts/swissintl/SuisseIntl-Semibold.ttf') format('truetype'),
        url('/assets/fonts/swissintl/SuisseIntl-Semibold.svg#SuisseIntl-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
  
  
  
@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.eot');
    src: url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.woff2') format('woff2'),
        url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.woff') format('woff'),
        url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.ttf') format('truetype'),
        url('/assets/fonts/fontawesomebrands/FontAwesome5Brands-Regular.svg#FontAwesome5Brands-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/**** GENERAL *****/

html, body{background-color: #191615; position: relative; font-size: 12px; min-height: 100vh; -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased; color: white;}
::selection {background: #464646;}
body{font-family: 'Source Code Pro'}
main{padding-bottom: 180px;}

h1, h2, h3{font-family: 'Suisse Intl';}
h1{font-size: 20px;}
h2{font-size: 32px;}
h3{font-size: 20px;}

header{width: 100%; padding: 40px 20px; z-index: 5; margin-bottom: 0px;}
header .profile-picture{width: 60px; height: 60px; border-radius: 100px; display: inline-block; margin-right: 20px; background-size: cover; background-position: center center; background-color: grey; vertical-align: middle; border: 1px solid rgb(135, 135, 135);}
header .headertext{display: inline-block; vertical-align: middle; max-width: calc(100% - 90px);}


footer{position: fixed; bottom: 0; left: 0; width: 100%; background: black; z-index: 5;}
footer nav{width: 100%;}
footer nav ul{list-style: none; display: flex; width: 100%;}
footer nav ul a {flex-grow: 1; flex-shrink: 1; position: relative; display: block; transition: all 0.3s ease-in-out; border-radius: 2px;}
footer nav ul a:hover{background: #c4c4c4;}
footer nav ul a li{width: 100%; text-align: center; font-family: 'Font Awesome 5 Brands'; padding: 20px 10px; font-size: 20px;}

section.hub-content{max-width: 1000px; width: calc(100% - 40px); margin: 20px auto 0 auto;}
section.hub-content .promotion{background-color: #C4C4C4; width: 100%; height: 300px; padding: 20px 20px 0px 0px; display: flex; margin-bottom: 20px; background-size: cover; background-position: center center; transition: all 0.3s ease-in-out; box-sizing: border-box; position: relative; z-index: 2;}
section.hub-content .promotion:before{content:""; font-size: 0; line-height: 0; display: block; position: absolute; top: 0px; left: 0px; box-sizing: content-box; border: 2px solid #c4c4c4; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; z-index: -1;}
section.hub-content .promotion .promotion-text{align-self: flex-end; background: white; padding:15px 20px 0px 0px; margin-bottom: -10px;}
section.hub-content .promotion:hover:before{opacity: 1; top: 20px; left: 20px;}


section.hub-content section{margin: 60px auto 0 auto; max-width: 440px;}
section.hub-content section h2{margin: 0px 0px 20px 0px; color: black;}
section.hub-content section .project{background-color: #C4C4C4; width: calc(100% - 30px); height: 200px; padding: 20px 20px 0px 0px; display: flex; margin: 0 auto; margin-bottom: 60px; max-width: 400px; position: relative; background-blend-mode: normal; position: relative; border-radius: 4px; transition: all 0.3s ease;}
section.hub-content section .project:hover{transform: scale(1.06); box-shadow: 0px 9px 23px -1px rgba(0,0,0,1);}
/*section.hub-content section .project:before{content:""; font-size: 0; line-height: 0; display: block; position: absolute; top: 0px; left: 0px; box-sizing: content-box; border: 2px solid #c4c4c4; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease; z-index: 2;}
section.hub-content section .project:hover:before{opacity: 1; top: 20px; left: 20px;}*/
section.hub-content section .project .img{position: absolute; top: 0; right: 0; height: 100%; width: 100%; background-size: cover; background-position: center center;}
section.hub-content section .project .project-text{align-self: flex-end; z-index: 3; background: #191615; padding: 10px 20px 10px 10px; border-radius: 0px 8px 0px 4px; }







.cf:after{content: "."; font-size: 0; line-height: 0; clear: both; display: block; visibility: hidden; opacity: 0;}
/*** RESPONSIVE MEDIA QUERIES ***/

@media all and (max-width: 950px){
	section.hub-content .promotion{height: 200px;}
    section.hub-content section{margin: 30px auto 0 auto;}
}

@media all and (max-width: 500px){
    

}