*{
    padding: 0%;
    /*box-sizing: inherit;*/
    color: rgba(255, 255, 255, 0.55);
}

h1, h2, h3, h4{
    color: #ffffff;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 0.5em 0;
}

p{

}

#navbar{
    position: fixed;
    height:100vh;
    left:0;
    background-color: #081E31;
    z-index: 10000;
    text-align: right;
    width: 20em;
    padding: 2.5em 2.5em 0.5em 2.5em;
    overflow-x: hidden;
	overflow-y: auto;
}

#navbar + #wrapper{
    margin-left:20em;
    background-color: #284259;
}

nav{
    display: block;
}

.wrapper{
    position: relative;
}

.fullscreen{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#navbar>.inner{
    min-height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#navbar>.inner ul{
    list-style: none;
    padding: 0;
    margin: 0 0 2em 0;
}

#navbar>.inner ul>li{
    display: block;
    padding: 1.35em 0;
    width: 100%;
    position: relative;
}

#navbar a{
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.15em;
    border: 0;
    transition: color 0.2s ease;
}

#navbar a:hover{
    color: rgba(255, 255, 255, 0.55);
}

#navbar a.active{
    color: white;
}

#navbar a::before{
    border-radius: 0.2em;
    bottom: 0;
    content: '';
    height: 0.2em;
    position: absolute;
    right: 0;
    width: 100%;
    background: #173148;
}

#navbar nav a:after {
    border-radius: 0.2em;
    bottom: 0;
    content: '';
    height: 0.2em;
    position: absolute;
    right: 0;
    width: 0%;
    background-image: linear-gradient(to right, #173148, #3D5870);
    transition: all 0.2s ease;
}

#navbar nav a.active:after{
    width: 100%;
}

/* Robin Peignet */

#welcome>.inner{
    max-width: 100%;
    max-height: 50%;
    padding: 4em 4em 2em 4em;
    animation-name: fade-up;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-up{
    from{
        opacity: 0;
        transform: translateY(1em);
    }to{
        opacity: 1.0;
	    transform: translateY(0);
    }
}

#welcome>.inner>h1{
    font-size: 2.75em;
}

#welcome>.inner>p{
    font-size: 1.25em;
}

/* Portfolio */

.portfolio{
    /*display: flex;
    flex-direction: column;
    background-color: #484679;*/

    display: flex;
    flex-wrap: wrap;
    background-color: #484679;
}

.portfolio>section{
    /*display: flex;
    flex-direction: row;
    min-height: 22em;
    padding: 4em 4em 2em 4em;
    opacity: 0;
    width: 50%;*/

    display: flex;
    flex-direction: row;
    min-height: 22em;
    padding: 3em 2em 1em 3em;
    opacity: 0;
    width: 50%;
}

.fade-left{
    animation-name: fade-left;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes fade-left{
    from{
        opacity: 0;
        transform: translateX(-1em);
    }to{
        opacity: 1.0;
        transform: translateX(0em);
    }
}

/* Button */

.portfolioButton {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: border-color 0.2s ease;
    -webkit-transition: border-color 0.2s ease;
    -ms-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
    background-color: transparent;
    border: solid 1px !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 3em;
    color: #ffffff !important;
    cursor: pointer;
    display: inline-block;
    font-size: 0.6em;
    font-weight: bold;
    height: calc(4.75em + 2px);
    letter-spacing: 0.25em;
    line-height: 4.75em;
    outline: 0;
    padding: 0 3.75em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.portfolioButton:after {
    -moz-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    -ms-transform: scale(0.25);
    transform: scale(0.25);
    pointer-events: none;
    -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
    -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
    -ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background: #ffffff;
    border-radius: 3em;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.portfolioButton.icon:before {
    margin-right: 0.75em;
}

/*button.fit,
.button.fit {
    width: 100%;
}

button.small,
.button.small {
    font-size: 0.4em;
}

button.large,
.button.large {
    font-size: 0.8em;
}

button.primary,
.button.primary {
    background-color: #ffffff;
    color: #312450 !important;
}

button.primary:after,
.button.primary:after {
    display: none;
}

button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}*/

.portfolioButton:hover {
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.portfolioButton:hover:after {
    opacity: 0.05;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.portfolioButton:hover:active {
    border-color: #ffffff !important;
}

.portfolioButton:hover:active:after {
    opacity: 0.1;
}

/* Veille Technologique */

.veille{
    align-items: center;
}

#veille>.inner{
    max-width: 100%;
    max-height: 50%;
    padding: 4em 10em 2em 10em;
}

.carousel-item{
    background-color: #484679;
}

.carousselContent{
    min-height:33em;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* padding: 6em 7em 2em 7em; */
    padding: 3em 5em 2em 5em;
}

.carousselContent>h2{
    font-weight: lighter;
}

.carousselContent>p{
    font-size: 0.9em;
}

.carousel-control-prev, .carousel-control-next{
    width: 10%;
}