@font-face
{
	font-family: '1942';
	src: url('Fuentes/1942-report/1942.ttf') format('truetype');
}

@font-face
{	
	font-family: 'journal';
	src: url('Fuentes/Journal/journal.ttf') format('truetype');
}

@font-face
{	
	font-family: 'Hands';
	src: url('Fuentes/Jr-Hand/Tepid Monkey Fonts.ttf') format('truetype');
}


/*Código escrito por Bertrand Maridor, code écrit par Bertrand Maridor*/



.colonne_gauche,section,aside
{
	display: inline-block;
	vertical-align: top;
}

ul.menu
{
	list-style: none; /* Remove HTML bullets */
	padding-right: 3%;
	padding-left: 8%;
}

header
{
	position: absolute;
	border: 2px solid black;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 10px 10px 3px black;
	height: 27.5%;
	width: 99%;
	top: 0px;
	left: 0px;
	background: url('photos/mar_banner.jpg');
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	z-index: 1;
}

	body
	{
		background-image: url(photos/nube.jpg);
	}

	em
	{
		font-style: oblique;
	}

		.colonne_gauche
		{
			width: 15%;
			background-color: rgb(90,150,200);
			background-image: url('photos/planche1.jpg');
			background-size: cover;
			height: 450px;
			position: absolute;
			left: 0px;
			top: 29.75%;
			border: 3px solid black;
			border-radius: 5px;
			box-shadow: 10px 10px 3px black;
		}

		#soleil
		{				
			width: 100%;
			border-bottom: solid 2px black;
			border-top: solid 2px black;
		}
		
		h3, h4
		{	
			font-weight: bold;
		}

		
		a:link
		{
			color:black;
		}

		a:visited
		{
			color: black;
		}

		a:hover
		{
			color: rgb(153,189,219);
			text-shadow: solid black 1px 1px;
		}
		

		nav
		{	
			display: block;
		    position: absolute;
		    height: 26%;
		    width: 16%;
		    right: 1%;
			top: 5%;
			border-radius: 8px;
		}

		.drapeau1
		{	
			position: relative;
			display: inline-block;
			vertical-align: top;
			margin-left: 8%;
			margin-bottom: 4%;
			margin-top: 3%;
			margin-right: 0%;
			border: solid 1px white;
		}

		.drapeau
		{
			display: block;
			width: 100%;
		}
		

		.drapeau:hover
		{
 		   border: 1px solid grey;
		}	

	section
	{
		position: absolute;
		padding: 1%;
		left: 15%;
		top: 30%;
		width: 57%;
		z-index: 0;
		height: 425px;
		overflow-y: scroll;
		overflow-x: hidden;
		background-attachment: scroll;
	}	
		
		h1
		{
			font-family:'1942', sans serif;
			font-size: 1.5em;
			text-align: center; 
			word-wrap: break-word;
			margin-right: 25%;
			margin-left: 15%;
			border: 3px solid green;
			border-style: outset;
			margin-top: 1%;
		}	

		ul.contact
		{
			list-style: none; /* Remove HTML bullets */
		}


		strong
		{
			font-weight: bold;
		}	

		article
		{
			display: block;
			width: 100%;
			word-wrap: break-word;
			padding: 1%;
			vertical-align: top;
			border: 0px solid black;
		}

		.imagen_flotante
		{
			float: right;
			width: 30%;
			padding-left:10px;
			padding-right: 5px;
			padding-bottom: 0px;
			padding-top: 4px;
		}

		ul.idiomas
		{
			margin-left: 15%;
			text-transform: uppercase;
			line-height: 1.5;
		}

		.casilla
		{
			float: right;
			margin-right: 1%;
			display: block;
		}

		.casillader
		{
			float: right;
			margin-right: 40%;
			display: block;
		}

		ul.Formación
		{
			line-height: 200%;
			list-style: none; /* Remove HTML bullets */
			padding-left: 5%;
			padding-left: 10%;
			text-indent: -8%;
		}
		
		li.formación:before
		{
			content: /* content: "•"○; Insert content that looks like bullets */
  			padding-right: 1%;
  			color: grey; /* Or a color you prefer */
  			font-size: 12px;
  		}

		ul.experiencia
		{
			line-height: 1.4;
			list-style: none; /* Remove HTML bullets */
			text-indent: -3%;
			text-align: justify;

		}


		ul.Otras_formaciones 
		{
			list-style: none; /* Remove HTML bullets */
			padding-left: 10%;
			padding-right: 0%;
			line-height: 1.6;
			text-indent: -11%;
		}

		li.otras_formaciones:before
		{
			content: "֎";/* content: "•"○; Insert content that looks like bullets */
			font-size: 13px;
  			padding-right: 0%;
  			padding-left: 2%;
  			color: blue; /* Or a color you prefer */
  			vertical-align: top;
		}
	
		th
		{
			border: solid black 2px;
			text-align: center;
			font-weight: bold;
		}

		td
		{
			border: solid black 2px;
			text-align: center;
		}

		table
		{	
			border-collapse:collapse;
		}

		.intereses_col1
		{
			width: 15%;
		}

		.intereses_col2
		{
			width: 15%;
		}

		.intereses_col3
		{
			width: 40%;
		}

		.intereses_colfoto
		{
			width: 30%;
		}

		.forja
		{
			width: 49%;
			vertical-align: middle;
		}
		.api
		{
			width: 100%;
			vertical-align: middle;
		}



		h2
		{
			color: rgb(153,189,219);
			text-shadow: 1px 1px rgb(40,40,40);
			border: 2px solid black;
			border-radius: 15px;
			background-image: url('photos/planche1.jpg');
			width: 45%;
			text-align: center;
			border-style: outset;
		}

		h3, h4
		{
			text-align: center;
		}

	aside
	{
		right: 0.75%;
		top: 29.75%;
		width: 22.7%;
		border: 3px solid black;
		height: 451px;
		padding-left: 1%;
		padding-right: 1%;
		border-radius: 5px; 
		box-shadow: 10px 10px 3px black;
		background-image: url(photos/tableau_noir1.jpg);
		background-size: cover;
		background-clip: border-box;
		background-repeat: no-repeat;			
	}

		.photo
		{
			display: block;
			width: 100%;
		}

		#autor
		{
			text-align: center;
			color: white;
			font-family: 'Hands','journal', sans serif;
			font-size: 1.2em;
			font-style: normal;
			text-decoration-line: underline;
		}

		.photo1
		{
			width: 33%;
			box-shadow: 10px 10px 3px black;
			border: 3px solid black;
			border-radius: 5px;
			margin-left: 31%;	
		}	

		#presentation
		{
			text-align: justify;
			padding-left: 1%;
			padding-right: 1%;
			color: white;
			font-family: 'Hands', 'journal', sans serif;
			font-size: 1.05em;
			text-indent: 15px;
		}

		.colonne_gauche, aside, header
		{
			position: fixed;
		}

		.second_choice
		{
			display: none;
		}

		

@media screen and (max-width: 1024px)

{
	.colonne_gauche, .first_choice
	{
		display: none;
	}




	header, aside, section
	{
		display: block;
		position: relative;
		z-index: 0;
		margin-top: 4px;
	}

	header
	{
		margin-left: -1%;
		height: 200px;
	}

	section
	{
		background-attachment: local;
		overflow: initial;
		top: 100%;
		left: 2%;
		right: 2%;
		width: 96.5%;
		}

		#idiomas
		{
			margin-left: 5%;
		}

		.casillader
		{
			float: right;
			margin-right: 35%;
			display: block;
		}

	aside
	{
		width: 96.5%;
		height: 300px;
		margin-left: 0%;
		background-image: url('photos/tableau_noir.jpg');
		background-repeat: no-repeat;
		background-size: cover; 
	}

	.imagen_flotante
	{
		float: right;
		width: 20%;
	}

	.photo1
	{
		margin-left: 2%;
		margin-right: 3%;
		float: left;
		width: 12%;
	}
	
	.second_choice
	{
		display: block;
		text-align: justify;
		padding-left: 1%;
		padding-right: 1%;
		color: white;
		font-family: 'Hands', 'journal', sans serif;
		font-size: 1.1em;
		text-indent: 15px;
	}
}