@font-face { 	font-family: "Reinsenberg"; 	src: url('../css/fonts/Reinsenberg-Italic.otf'); }
@font-face { 	font-family: "HK-Guise"; 	src: url('../css/fonts/HK-Guise-SemiBold.otf'); }
@font-face { 	font-family: "Annonce"; 	src: url('../css/fonts/Annonce.otf'); }

html {
    scroll-behavior: smooth;
}

body {
    line-height:1;
    overflow-x:hidden;
}
body > a:visited {
    color:blue;
}
* {
    outline:none;
    margin:0;
    padding:0;
}
*, ::before, ::after {
    box-sizing: inherit;
}
*, ::after, ::before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

header {
    top:0;
    left:0;
    width: 7%;
    min-width: 100px;
    height:100%;
    display: block;
    position:fixed;
    background-color: white;
    border: 2px black solid;
    z-index:2;
}
header > a {
    display: block;
}
header > a > img {
	margin-top:8% !important;
    margin-left:auto;
    margin-right:auto;
    display: block;
}
.secondnav {
    display: none;
}

.bg-container {
    top:0;
    display:block;
    width:92%;
    height:100%;
    float:right;
    z-index:1;

}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .secondnav {
        display: block;
    }
    #menuToggle
    {

        display: block;
        position: relative;
        top: 50px;
        left: 50px;

        z-index: 1;

        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a
    {
        text-decoration: none;
        color: black;

        transition: color 0.3s ease;
    }

    #menuToggle a:hover
    {
        color: blue;
    }


    #menuToggle input
    {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    /*
     * Just a quick hamburger
     */
    #menuToggle span
    {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: black;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
        opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }

    /*
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menuToggle input:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: black;
    }

    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
     * Make this absolute positioned
     * at the top left of the screen
     */
    #menu
    {
        position: absolute;
        width: 300px;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;
        font-family:"HK-Guise",sans-serif;
        background: white;
        border: 2px solid black;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu li
    {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
     * And let's slide it in from the left
     */
    #menuToggle input:checked ~ ul
    {
        transform: none;
    }
    header {
        display: none;
    }
    .bar > img {
        width:50px;
        display: block;
        margin-right:auto;
        margin-left:auto;
        margin-top: 20px;
    }
    body {
        line-height:1.6;

        overflow-x: hidden !important;
    }
    .bg-container {
        float:none;
        width:100%;
    }
    .infos .txt {
        display:block;
        width: 90% !important;
        float: none !important;
        margin-left: 10%;
        font-size: 0.8em !important;
        font-family: "HK-Guise",sans-serif;
    }
    .bg-container > .footer {
        display:block;
        margin-top:100% !important;
    }
    .bg-container > .footer > p {
        font-size: 0.6em;
    }
}



header div > .slogan {
    display: inline-block;
    height:100%;
    width:100%;
    margin-top:350%;
    top: 0;
    left:0;
    z-index: 1;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: 0.8em;
    font-family:"HK-Guise",sans-serif;
    color: black;
    -webkit-transform-origin: 50% 53%;
    -webkit-transition: color .3s;
    transition: color .3s;
}
.core-nav>ul>li>a {
    text-decoration: none;
    font-family:"HK-Guise",sans-serif;
    color: black;
    font-size: 0.8em;

}
.core-nav>ul>li>a:hover {
    color: blue;
}


.core-nav> ul> li > .titlenav {
    font-size: 1.4em;
    font-weight: bold;
    font-family: "HK-Guise",sans-serif;
}
.core-nav> ul> li {
    list-style-type: none;
}

.core-nav> ul> li > .active {
    color: blue;
}

.core-nav> ul {
    margin-left:8%;
    margin-top:15%;
}
.core-nav {
    bottom:0;
    width:100%;
    height:20%;
    display: block;
    border-top: black 2px solid;
    margin-top:200%;
}


/* LIST PROJECTS */
.bg-container > ul > li {
    list-style-type: none;
}
.bg-container > ul> li > a {
    text-decoration: none;
    font-family: "Annonce",sans-serif,monospace;
    font-size: 5em;
    color: black;
    margin-left:2%;
}


.bg-container > ul > li > a > span {
    margin: 0;
    padding: 0;
    position: relative;
    transform: translate(-50%,-50%);
    -webkit-text-stroke: 2px black;
    color: transparent;
    text-transform: uppercase;
    white-space: pre-wrap;
}

.bg-container > ul > li > a > span::before {
    content: attr(data-text);
    position: absolute;
    left:0;
    color:black;
    width:0%;
    overflow:hidden;
    transition:1.5s;
    height:100%;
    font-family: "Annonce",sans-serif,monospace;

}
.bg-container > ul > li > a > span:hover:before {
    width:100%;
}


/* ABOUT */

.infos {
    border-top: 2px solid black;

    width:100%;
    margin-top: 10%;
}
.infos img {
    width: 30%;
    display:block;
    float:left;

    margin: 10% auto 10% 10%;
}
.infos p {
    font-size: 1.2em;
    font-family: "HK-Guise",sans-serif;
    width:70%;
    float:right;


}
.infos .txt {
    width: 69%;
    float:right;
    vertical-align: center;
    margin: 13% 1% 10% auto;
}
.infos h3 {
    font-size: 1.2em;
    font-weight: bold;
    font-family: "HK-Guise",sans-serif;
}

/* FOOTER */
.footer {
    border-top: 2px solid black;
    display:block;
    margin-top:37%;

}
.footer p {
    font-family: "HK-Guise",sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding-top:2%;
    padding-bottom:2%;
}

/* WEHUB */

.bg-container .content .photo1 {
    width: 900px;
    margin-left:2%;
    margin-top:1%;
}

.bg-container .content .photo2 {
    width: 300px;
    position:absolute;
    left:47%;
    top:55%;
}
.content > .credits > p {
    font-size: 1.2em;
    font-family: "HK-Guise",sans-serif;
    margin-left:2%;

}
.content > .credits > p:first-child {
    margin-top:5%;
}
.content > .challenge {
    position: absolute;
    font-size: 1.2em;
    font-family: "HK-Guise",sans-serif;
    width:35%;
    left:60%;
    top:30%;

}

.footerwehub {
    border-top: 2px solid black;
    display:block;
    margin-top:15%;

}
.footerwehub p {
    font-family: "HK-Guise",sans-serif;
    font-size: 1.2em;
    text-align: center;
    padding-top:2%;
    padding-bottom:2%;
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .bg-container > ul> li > a {
        text-decoration: none;
        font-family: "Annonce",sans-serif,monospace;
        font-size: 2em;
        color: black;
        margin-left:10px;
        margin-top: 10px;
        display:block;
    }
    .bg-container > ul > li > a > span::before {
        content: attr(data-text);
        position: absolute;
        left:0;
        color:black;
        width:0%;
        overflow:hidden;
        transition:1.5s;
        height:100%;
        font-family: "Annonce",sans-serif,monospace;
    }
    .infos{
        border-top: 2px solid black;
        width:100%;
    }
    .infos img {
        width: 30%;
        display:block;
        float:left;
        margin-top: 10px !important;
    }
    .bg-container .content .photo1 {
        width: 300px;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    .bg-container .content .photo2 {
        width: 200px;
        display:block;
        left:20%;
        top:70%;
    }
    .content > .credits > p {
        font-size: 0.8em;
        font-family: "HK-Guise",sans-serif;
        margin-left:10%;

    }
    .content > .credits > p:first-child {
        margin-top:5%;
    }
    .content > .challenge {
        position: static;
        font-size: 0.8em;
        font-family: "HK-Guise",sans-serif;
        margin-left:10%;
        margin-top: 90%;
        width:80%;



    }
    .footerwehub {
        border-top: 2px solid black;
        display:block;
        margin-top:15%;

    }
    .footerwehub p {
        font-family: "HK-Guise",sans-serif;
        font-size: 0.6em;
        text-align: center;
        padding-top:2%;
        padding-bottom:2%;
    }
    .gen2 {
        margin-top: 28% !important;
        left:20% !important;
    }
    .gen1 {
        width: 300px !important;
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    .gen3 {
        margin-top: 50% !important;
    }
    .gen4 {
        margin-top:5% !important;
    }
    .gen5 {
        width:150px !important;
        margin-top: 30%;
        left: 30% !important;
    }
    .gen6 {
        width:150px !important;
        margin-top: 65%;
        left: 30% !important;
    }
    .edit {
        margin-top:10% !important;
    }

}