/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 13 févr. 2018, 10:22:58
    Author     : MaxiH


-webkit-transform:
  -moz-transform:    
  -ms-transform:     
  -o-transform:      
  transform: 

*/
*, *:after, *:before{
    box-sizing: border-box;
}


html, body{
    margin:0;
    padding:0;
    min-height:100%;
    font-family: Roboto, sans-serif;
    background-color:black;
    overflow-x: hidden;
}

body{
    background: url("../images/test2.png") repeat;
    display:none;
    background-size: cover;
    background-position: center top;
}

p, span, div, h1, h2, h3, a{
    color:white;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.1em;
    font-weight:300;
}

::-webkit-scrollbar{
    width:15px;
}

::-webkit-scrollbar-button{
    background:black;
    display:none;
}

::-webkit-scrollbar-track{
    background-color:black
}

::-webkit-scrollbar-thumb{
    background-color: rgba(255,255,255,0.1);
}

::-webkit-scrollbar-corner{
    background-color: black;
    display:none;
}
::-webkit-resizer{
    display:none;
    background-color: black;
}


.bkground{
   min-height: 100%;
   z-index:0;
   position:absolute;
}

#spiders{
    background-color: rgba(0,0,0,0);
    position:fixed;
    min-height: 100%;
    margin-right: 15px;
    z-index:0;
}

#container{
    width: 100%;
    margin:0;
    z-index:1;
    position:relative;
}

#navMenu{
    display:none;
}

#menu{
    position:fixed;
    list-style: none;
    font-size: 15pt;
    top:0;
    z-index:3;
}


#menu_img1{
    width:160px;
    position:fixed;
    top:-128px;
    left:-120px;
}

#menu_img2{
    position:fixed;
    height:218px;
    top:25px;
    left:37px;
}

#menu_img3{
    position:fixed;
    top:218px;
    height:110px;
    width:5px;
    left:73px;
    transform: rotate(135deg);
}

#hexagon{
    width:50px;
    position:fixed;
    left:107px;
    top:285px;
}

.menuButton{
    padding: 10px 0;
    font-size:10px;
    border-bottom: 2px solid white;
    width: 90px;
    text-align: center;
}

.menuButton:hover{
    font-size:14pt;
    width:150px;
}

.link{
    color:white;
    text-decoration: none;
    display:block;
}

.link:hover{
    width:150px;
}

.active{
    font-size:14pt;
    width:150px;
    color:white;
}

.row{
    width:100%;
    min-width:800px;
    height: 1060px;
    margin:0;
}

.row-center{
    width: 70%;
    min-width: 800px;
    margin:0 auto;
    text-align: center;
    height:100%;
}

.rowTitle{
    font-size:30pt;
    font-family: Tahoma;
    font-weight: 800;
}

/******************###################################### PROJECT ##################################************************/
#projectVisual{
    min-width: 700px;
    background-color: rgba(255,255,255,.4);
    border: 5px solid rgba(255,255,255,0.9);
    height:600px;
    margin:150px auto 200px auto;
}

.projectHeader{
    width:50%;
    float:left;
    height:60px;
    margin:0;
    border-top: 2px solid black;
    border-left: 2px solid black;
    border-right: 2px solid black;
    display:inline-block;
    position:relative;
    cursor:pointer;
    color:black;
}

.projectHeader:hover{
    background-color: rgba(0,0,0,0.5);
}

.projectHeader h1{
    font-size:18pt;
}

.projectActive{
    background-color: rgba(0,0,0,0.5);
}

.projectContent{
    background-color: rgba(0,0,0,0.5);
    height:530px;
    margin-top:60px;
}

#design{
    display:none;
}

.projectList{
    list-style: none;
    display:none;
}

.first{
    display:block;
}

.projectContent ul div{
    display:inline-block;
    float:left;
}

.projectContent ul, .projectContent ul li{
    height:100%;
}

.summary{
    height:320px;
    font-size:11pt;
}

.projectGraphic{
    width:57%;
    height:100%;
    float:left;
}

.projectGraphicCode{
    width:50%;
    height:100%;
    float:left;
}

.projectGraphic span, .projectGraphicCode span{
    top:50px;
    position:relative;
    font-size:11pt;
}

.competences{
    list-style: none;
    position:relative;
    top:20px;
    padding:0;
}

.competences li{
    display:inline-block;
    padding:0 5px;
    border: 1px solid white;
}

.competencesTitle{
    top:5px !important;
    font-weight:600;
    font-size: 15pt;
}

.projectTitle{
    margin-top:50px;
}

.competencesBoxe{
    position:relative;
    height:100px;
}

.projectSummary{
    width:37%;
    height:100%;
}

.projectSummaryCode{
    width:44%;
    height:100%;
}

.projectImage{
    width:95%;
    position:relative;
    top:50px;
    cursor:pointer;
    z-index:5;
}

#projectActive{
    position:absolute;
    width:70%;
}

.next{
    height:0;
    width:6%;
    float:right;
}

.prev{
    float:left;
    height:0;
}

#nextProject{
    width:60px;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    position:relative;
    top:205px;
    cursor:pointer;
}

#prevProject{
    width:60px;
    position:relative;
    top:205px;
    cursor:pointer;
}

#prevLink[data-tip]:hover:after{
    content: attr(data-tip);
    padding: 4px 8px;
    color: white;
    position:relative;
    top:205px;
    white-space: nowrap;
    border-radius: 5px ;
    background: rgba(0,0,0,0.5);
    z-index:6;
}


#nextLink[data-tip]:hover:after{
    content: attr(data-tip);
    padding: 4px 8px;
    color: white;
    position:relative;
    top:205px;
    white-space: nowrap;
    border-radius: 5px ;
    background: rgba(0,0,0,0.5);
}

#blurLayer{
    z-index:4;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.7);
    position:fixed;
    display:none;  
}

#diapoExit{
    width:30px;
    position:absolute;
    right:70px;
    top:40px;
    cursor:pointer;
}

#diapoNext{
    width:50px;
    position:absolute;
    right:10%;
    top:50%;
    cursor:pointer;
}

#diapoPrev{
    width:50px;
    position:absolute;
    left:10%;
    top:50%;
    transform: rotate(180deg);
    cursor:pointer;
}
/********######################################### SKILLS ROWS #################################*************/
#progLanguage{
    width:80%;
}

#wordcloud{
    width:60%;
    transform: rotate(-45deg);
}

#skillsProg{
    width:80%;
    float:left;
    display:none;
    text-align: left;
}

#skillsDesign{
    width:80%;
    float:right;
    display:none;
    text-align:right;
}

#splitview {
    position: relative;
    width: 100%;
    height: 450px;
    top:70px;
}

#splitview:after {
  content:''; 
  width:535px; 
  height:2px; 
  background:white; 
  position:absolute; 
  bottom:-4px;
  display:inline-block;
  margin:0 auto;
}

/* Panels. */
.panel {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

#right{
    z-index:1;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    width:50%;
    height:100%;
    float:right;
}

#left{
    z-index:2;
    width:50%;
    height:100%;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    position:absolute;
}

#handleBar {
    height: 100%;
    position: absolute;
    display: block;
    background-color: white;
    width: 1px;
    top: 0;
    left: 50%;
    z-index: 2;
}

#handle{
    height:40px;
    width:60px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-30px;
    z-index:4;
    cursor: pointer;
}

.contentLeft{
    color:white;
    height:100%;
    width:100%;
    min-width:100%;
}

.contentRight{
    color:white;
    height:100%;
    width:100%;
    float:right;
}



#promoLeft{
    position:relative;
    float:left;
    top:150px;
    text-align: center;
    width:20%;
}


#promoRight{
    position:relative;
    float:right;
    top:150px;
    text-align: center;
    width:20%;
}

.promoTitle{
    font-size:12pt;
    font-weight: 600;
}

#skillsMisc{
    top:100px;
    position:relative;
}

#skillsMisc ul{
    list-style: none;
    padding:0;
    width:800px;
    margin:0 auto;
    background-color:rgba(0,0,0,0.6);
    position:relative;
    top:150px;
}

#skillsMisc a{
    position:absolute;
    top:160px;
    font-size:15pt;
    left:40%;
    width:20%;
}

#skillsMisc a:hover{
    text-shadow: 1px 1px 0px white;
}

#leftSkill{
    position:absolute;
    top:150px;
    left:0px;
    width:20%;
    background:rgba(0,0,0,0.6);
    border:1px white solid;
    padding:10px 0;
}

#rightSkillBar{
    position:absolute;
    top:170px;
    right:20%;
    width:20%;
    height:3px;
    background: white;
}

#leftSkillBar{
    position:absolute;
    top:170px;
    left:20%;
    width:20%;
    height:3px;
    background: white;
}

#rightSkill{
    position:absolute;
    top:150px;
    right:0px;
    width:20%;
    background:rgba(0,0,0,0.6);
    border:1px white solid;
    padding:10px 0;
}

#leftSkill:hover, #rightSkill:hover{
    box-shadow: 0px 0px 80px 10px rgba(255,255,255,0.3);
}

#skillsMisc img{
    position:absolute;
    width:25%;
    left:37.5%;
    top:50px;
}

#skillsMisc ul li{
    padding:20px;
    font-size: 12pt;
    display:inline-block;
}

/* ////////////////////////////////////////////////////// EDUCATION PAGE ///////////////////////////////////////*/

#timeline{
    position:relative;
    width:100%;
    margin:0 auto;
    text-align:center;
    top:50px;
}

.timelineNode{
    width:100px;
    height:50px;
    background: rgba(0,0,0,0.5);
    border: 1px white solid;
    line-height: 280%;
    margin:0 auto;
}

.timelineNode:hover{
    background: rgba(256,256,256,0.2);
}

.timeline{
    height: 200px;
    margin:0 auto;
    display:block;
}

#timeline > span{
    position:absolute;
    margin-top:60px;
    width:400px;
    margin-left:20px;
    font-size:10.5pt;
}

.timelineBold{
    font-size: 12pt;
    font-weight: 800;  
}

#graduate{
    width:130px;
    display:block;
    margin:0 auto;
}

#graduation{
    margin-left:0 !important;
    width:350px !important;
}

.educationLeft{
    margin-left:-450px !important;
}
/* ////////////////////////////////////////////////////// ABOUT PAGE ////////////////////////////////////////////////////*/

#aboutContent{
    position:relative;
    width:100%;
    top:150px;
    height:435px;
}

.aboutSection{
    display:inline-block;
    width:100%;
    position:absolute;
    height:100%;
    left:5%;
}

#aboutGames{
    left:36%;
}

#aboutTravel{
    left:67%;
}

.aboutImages{
    width:100%;
    cursor:pointer;
    -webkit-transition: all 0.2s ease-in; /* Safari */
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    position:absolute;
    margin-left:-50%;
    z-index:6;
}

.aboutImages:hover{
    width:108%;
    z-index:10;
    box-shadow: 0px 0px 80px 10px rgba(255,255,255,0.3);
}


.imageContainer{
    position:absolute;
    width:30%;
    height:100%;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(256,256,256,0.8);
  z-index:11;
  
}

.overlay:hover + .aboutImages{
    width:108%;
    z-index:10;
    box-shadow: 0px 0px 80px 10px rgba(255,255,255,0.3);
}

.imageContainer:hover .overlay {
  opacity: 1;
}

.overlayText {
  color: black;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.aboutContainer{
    width:67%;
    background:white;
    display:none;
    height:108%;
    min-width:500px;
    float:right;
    position:relative;
}

.prog{
    float:right;
}

.aboutClose{
    width:25px;
    position:absolute;
    right:15px;
    top:15px;
    cursor:pointer;
}

.aboutSummary{
    color:black;
    width:80%;
    margin:0 auto;
    position:relative;
    top:50px;
}
/*//////////////////////////////////////////////////////////////////////////////CONTACT//////////////////*/

#contactContent{
    width:100%;
    overflow:hidden;
    position:relative;
    top:100px;
}

#me{
    width:30%;
    float:left;
    background-color:rgba(256,256,256,0.9);
}

#contactList{
    width:70%;
    float:right;
}

#contactList h1, #contact ul, #contact ul li{
    font-family:Tahoma;
}

#contactList ul{
    list-style: none;
    padding:0;
}

#contactList h1{
    margin-top:0;
}

#contactList ul li{
    padding:20px;
}

#creditsTitle{
    position:relative;
    top:150px;
}

#creditsContent{
    position:relative;
    top: 150px;
}

#creditsContent ul{
    list-style: none;
    padding-left:0;
    margin-bottom: 50px;
}

#creditsContent ul li{
    font-size:11pt;
    padding-bottom:10px;
}

#creditsContent h1{
    padding-top:20px;
    font-size: 15pt;
    font-weight: 600;
    text-decoration: underline;
}


footer{
    height:60px;
    color:white;
    text-align:center;
}

#copyright{
    position:relative;
    top:5px;
}

#copyright div{
    position:relative;
    top:15px;
    font-style: italic;
    font-size: 10pt;
}




#header{
    min-height: 900px;
    width:100%;
    height:90%;
}

#intro{
    position:absolute;
    left:57%;
    top:80px;
    display:none;
}

#arrow{
   width:80px;
}

#arrowDiv{
    width:80px;
    margin:0 auto;
    position:relative;
    top:650px;
    display:none;
}

.inline{
    display:inline-block;
}

.centeredWrapper{
    width:80%;
    margin:0 auto;
    padding-top:20px;
}

#noOverflow{
}

.title{
    font-size:30pt;
    letter-spacing: .1em;
    font-weight: 600;
}

.hidden{
    display:none;
}

.subTitle{
    font-size:18pt;
}