@font-face {
    font-family: 'NavFont'; /*a name to be used later*/
    src: url('../fonts/GeldoticaFamily/GelDotica.ttf'); /*URL to font*/
}


body {
	font-family: 'Roboto', sans-serif;
	background-color: #d3d3d3;
}

.container {
	width: 100%;
	height: 99%;
}

#header {
	position: relative;
    margin-top: 15px;
    float: right;
    margin-left: auto;
    right: 0;
}
#header #nav-full {
	position:relative; 
	margin:0 20px;
}
#header #header-nav {
	position:relative; 
	-webkit-backface-visibility: hidden;
}
#header #header-nav li {
	position:relative; 
	display:inline-block; 
	*display:inline; 
	zoom:1; 
	-webkit-backface-visibility: hidden; 
	vertical-align:middle; 
}
a {
    color: #0060B6;
    text-decoration: none;
}

a:hover 
{
     color:#00A0C6; 
     text-decoration:none; 
     cursor:pointer;  
}

.span-nav {
	color: white;
	font-size:30px;
	font-family: 'NavFont';
	margin: 0 10px 0 0;

}


.nav-item-div:hover {

    -webkit-transform: rotate(360deg); /* Safari */
	-webkit-transition-duration: 3s; /* Safari */
    transition-duration: 3s;
    transform: rotate(360deg);
}

div.screens {
	width: 100%;
	padding-top: 50px;
	height: calc(100% - 36px - 15px);
}
.div-section-title {
	color: #467AAC;
	text-align: center;
}
span.section-title {

	font-size: 60px;

}
.my-informations {
	float: left;
	width: 55%;
	height: calc(100% - 80px);
}
.my-informations ul {
	margin: 0;
	padding: 0;
	height: 100%;
	list-style: none;
}

.my-informations ul li {
    border-bottom: 2px solid #dfdfdf;
    height: 20%;
    display: flex;
}
.picture-and-global-infos {
	float: right;
	width: 40%;
	height: calc(100% - 2% - 80px);
	margin-left: 5%;
	margin-top: 2%;
}



.resume-about {
	height: 100%;
	width :100%;
	display: inline-block;
}

.information-container {
	position: relative;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
    text-align: center;
}

i.list-logo {
	font-size: 8vmin;
	vertical-align: middle;
	margin-left: 2%;
	margin-right: 2%;
	color: #467AAC;
}

span.list-name {
	font-size: 2.5vmin;
	margin-right: 1%;
	font-weight: bold;

}

span.information-separator {
	font-size: 2vmin;
	margin-right: 1%;

}

span.information-value {
	font-size: 3vmin;
}

/* hover div */
.information-container:hover i.information-logo {
	font-size: 10vmin;
	
}

.information-container:hover span.information-name {
	font-size: 3.5vmin;
}

.information-container:hover span.information-separator {
	font-size: 3vmin;
}

.information-container:hover span.information-value {
	font-size: 4vmin;
}

.picture-and-global-infos h2 {
	color: #467AAC;
	font-size: 4vmin;
}
.picture-and-global-infos .my-picture img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 50%;
    width: auto;
    border-radius: 25%;
    margin-bottom: 5%;
}

.job-profile  {
	margin-left: 5%;
}

.job-profile p {
	font-size: 3vmin;
}


@media screen and (max-width: 480px) {
  .picture-and-global-infos {
    float :none;
   	width: 90%;

    margin-top: 5%;
  }
  .job-profile p {
	font-size: 5vw;
}
   .my-informations {
    float :none;
    width: 100%;
  }
  i.information-logo {
	font-size: 10vw;

}

span.information-name {
	font-size: 4vw;

}

span.information-separator {
	font-size: 3vw;

}

span.information-value {
	font-size: 5vw;
}
}

@media screen and (max-height: 300px) {
.picture-and-global-infos {
    float :none;
   	width: 90%;

    margin-top: 5%;
  }
  .job-profile p {
	font-size: 5vh;
}
   .my-informations {
    float :none;
    width: 100%;
  }
  i.information-logo {
	font-size: 10vh;

}

span.information-name {
	font-size: 4vh;

}

span.information-separator {
	font-size: 3vh;

}

span.information-value {
	font-size: 5vh;
}
}
/* Grid properties */

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
    position: relative;
}
.col-12 {
    width: 100%;
}
.col-11 {
    width: 91.66666667%;
	width: calc(100% *(11/12));
}
.col-10 {
    width: 83.33333333%;
	width: calc(100% *(5/6));
}
.col-9 {
    width: 75%;
}
.col-8 {
    width: 66.66666667%;
	width: calc(100% *(2/3));
}
.col-7 {
    width: 58.33333333%;
	width: calc(100% *(7/12));
}
.col-6 {
    width: 50%;
}
.col-5 {
    width: 41.66666667%;
	width: calc(100% * (5/12));
}
.col-4 {
    width: 33.33333333%;
	width: calc(100% / 3);
}
.col-3 {
    width: 25%;
}
.col-2 {
    width: 16.66666667%;
	width: calc(100% / 6 );
}
.col-1 {
    width: 8.33333333%;
	width: calc(100% / 12);
}

/* studies specific functions */

.my-studies {
	height: calc(100% - 80px);
	margin-left : 5%;
	margin-right : 5%;
}

.my-studies ul {
  list-style-type: none;
  padding : 0;
  -webkit-margin-after : 0 ;

}

.my-studies ul li {
    border-bottom: 2px solid #dfdfdf;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
    height: 33.333333%;
	height: calc(100% / 3);
	width : 100%;
}

.my-studies ul li div{
	display: flex;
}

.studies-col-div {
	display: flex;
	height: 100%;
}

.studies-col-div i {
	margin : auto;
}

.studies-col-div span {
	margin: auto;
}


.studies-school-global {
	margin: auto;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	font-family : merriweather;
}

.studies-school-global span {
	margin-left : 0 ;
}

.france-map {
	height : 85%;
	margin : auto;
}

.france-map-hover {
	display : none;
}

.studies-container .studies-school-name {
	font-size: 2.5vmin;
}

.studies-container .studies-school-infos  {
	font-size: 3vmin;
	font-weight: bold;

}
.studies-container .studies-school-years  {
	font-size: 2vmin;
}
.studies-container:hover .france-map  {
	height: 90%;
}

.studies-container:hover .studies-school-name {
	font-size: 3.5vmin;
}

.studies-container:hover .studies-school-infos  {
	font-size: 4vmin;
}

.studies-container:hover .studies-school-years  {
	font-size: 3vmin;
}
.studies-container:hover i  {
	font-size: 15vmin;
}