*{
    overflow: hidden;
    font-family: 'Raleway';
}

html{
    overflow-y: scroll;
}

h2{
    font-size: 2em;
}

div {
    display: block;
    width : 100%;
}

div.header {
    padding-bottom: 30px;
    padding-top :30px;
    display: block;
}

.header h1 {
    font-size : 3em;
    margin-bottom: 5px;
    margin-top: 5px;
}

div.briefPart{
    margin-bottom: 50px;
    margin-top: 50px
}

h2{
    font-size: 1.5em;
    margin-bottom: 30px;
    margin-top: 0px;
    text-align: center;
    width: 100%;
    color: #2c3e50;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

div.ribbonBrief{
    height : 30%;
    width : 100%;
    min-height : 150px;
    display: inline-flex;
}

div.photoContainer{
    width : 25%;
    background-color: transparent;
    max-height: 33%;
}

div.skillContainer{
    width : 100%;
}


div.choice:hover{
    background-color:#004f52;
    transition : background-color .5s;
}

div.choice{
    background-color: transparent;
    cursor: pointer;
}


div.projectsPictures{
    width : 19.6vw;
    height : 19.6vw;
    position : relative;
    display: inline-flex;
}

.projectsPictures img{
    width : 100%;
    height : 100%;
    -webkit-filter: grayscale(20%);
    -moz-filter: grayscale(20%);
    -o-filter: grayscale(20%);
    -ms-filter: grayscale(20%);
}

div.hoveredProject{
    height : 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s;
    width : 100%:
}

div.hoveredProject:hover{
    background-color : rgba(183,183,183,.7);
    height : 100%;
    opacity: 1;
    transition: opacity 0.5s;
}

div.projectChoice{
    display: inline-flex;
}

div.projectsPictures{
    display: inline-flex;
}

div.technoDiv{
    display: inline-flex;
}

div.elementTechno{
    margin: 0 auto;
    width : 150px;
    text-align: center;
}

.technoDiv img,
.elementLink img{
    height : 50%;
    width: auto;
    z-index: 2;
    margin: auto;
}

h4{
    margin-bottom: 10%;
    text-align: center;
    font-size: 1.5em;
    white-space: nowrap;
}

div.links{
    display: inline-flex;
    text-align: center;
}

.links img{
    max-width: 35px;
    max-height: 35px;
    filter : grayscale(100%);
    transition : filter 0.5s;
}

.links img:hover{
    filter: grayscale(0%);
    transition : filter 0.5s;
}

a{
    cursor: pointer;
    max-width: 35px;
    max-height: 35px;
    margin: auto;
}

div.contactElement{
    margin-bottom: 20px;
}

h3{
    text-align: center;
}

html{
    background-color: #ecf0f1;
}

div.contactMe{
    margin-top: 20px;
}

.photoContainer{
    text-align: center;
}

.photoContainer img{
    margin: auto;
}

img.autoSize{
    max-width: 75%;
    max-height: 75%;
}

img{
    display: block;
}

.photoContainer{
    position: relative;
}

.center{
    position: absolute;
    top: 50%;
    left : 50%;
    transform: translate(-50%,-50%);
}

.skillContainer img{
    height: 100%;
    margin: auto;
}

.allStudies {
    height : 15%;
    display: inline-flex;
    width : 80%;
    margin-left : 10%;
    margin-right: 10%;
}

.tier{
    width : 33%;
    height: 100%;
}

.center{
    margin: auto;
}

.relative{
    position: relative;
}

.allStudies h4{
    color : #2980b9;
}

div.projectChoice{
    width: 80%;
    margin-left: 10%;
}

h3{
    user-select: none;
    transition: color 0.5s;
}

h1{
    text-align: center;
    color: #34495e;
    font-size: 3em;
    margin-bottom: 5px;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

h3.unselected{
    color: grey;
}

.threePart{
    height : 33.333%;
    position: absolute;
}

.threePart h5
{
    margin : 0;
    height : 50%;
    vertical-align: middle;
}

.sixthPart
{
    height: : 16.5%;
    position: absolute;
}

.study{
    padding-left: 10px;
    padding-right: 10Px;
    font-size: 0.8vw
}

.colorFade{
    cursor: pointer;
    max-width: 35px;
    max-height: 35px;
    filter : grayscale(100%);
    transition : filter 0.5s;
}

.colorFade:hover{
    filter: grayscale(0%);
    transition : filter 0.5s;
}

.threePart h5
{
    text-align: center;
    font-style: italic;
    color: rgba(60,60,60,1);   
}

.projects h5
{
    text-align: center;
    font-style: italic;
}

.studies h2
{
    margin-top: 100px;
}