/*ALL*/

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Segoe UI", "Trebuchet MS";
}


/*LOADER*/

.loader {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	width: 50px;
	height: 50px;
	border: 4px solid #f3f3f3;
	border-radius: 50%;
	border-top: 4px solid #555;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/*IMAGE BANNER*/

@media only screen and (min-width: 1100px) {
    /*For desktop*/
	.img-banner img {
		width: 100%;
		box-shadow: 0px 10px 15px -15px rgba(0,0,0,0.75);
		border-bottom: 2px solid white;
	}

	.langages img {
		width: 20px;
		margin-right: 10px;
	}
}

@media only screen and (max-width: 1100px) {
    /*For mobile*/
	.img-banner img {
		width: 100%;
		box-shadow: 0px 10px 15px -15px rgba(0,0,0,0.75);
		border-bottom: 2px solid white;
	}

	.langages img {
		width: 15px;
		margin-right: 5px;
	}
}

.pp {
	width: 15%;
	height: 0;
	margin-left: 50%;
}

.pp img {
	width: 100%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	box-shadow: 0px 10px 15px -15px rgba(0,0,0,0.75);
	border: 2px solid white;
}

.langages {
	position: absolute;
	right: 0;
	top: 0;
}


/*BODY*/

@media only screen and (min-width: 1100px) {
    /*For desktop*/
	.body {
		display: none;
		width: 75%;
		margin-left: 12.5%;
		margin-top: 8%;
	}

	.heading {
		display: none;
	}
}

@media only screen and (max-width: 1100px) {
    /*For mobile*/
	.body {
		display: none;
		width: 95%;
		margin-left: 2.5%;
		margin-top: 8%;
	}

	.heading {
		display: none;
	}
}

.body h1 {
	font-weight: normal;
	font-variant: small-caps;
}

.body p {
	font-weight: lighter;
	margin-bottom: 0.5em;
}

.body h3 {
	font-size: x-large;
	font-weight: normal;
	margin-bottom: 1em;
	margin-top: 0.2em;
}


/*CONTAINER SECTIONS*/

@media only screen and (min-width: 1100px) {
    /*For desktop*/
    .container {
		background-color: rgba(245,245,245,1);
		box-shadow: 0px 10px 15px -15px rgba(0,0,0,0.75);
		padding: 0.2em 1.2em 1.2em 1.2em;
		margin-bottom: 1.7em;
	}

	.container-left {
		width: 68%;
		display: inline-block;
		vertical-align: top;
	}

	.container-right {
		width: 28.5%;
		display: inline-block;
		vertical-align: top;
		margin-left: 2.5%;
	}

	.container-images {
		width: 10%;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		font-size: small;
	}
}

@media only screen and (max-width: 1100px) {
    /*For mobile*/
    .container {
		background-color: rgba(245,245,245,1);
		box-shadow: 0px 10px 15px -15px rgba(0,0,0,0.75);
		padding: 0.2em 0.2em 1.2em 1.2em;
		margin-bottom: 1.7em;
	}

	.container-left {
		width: 90%;
		margin-left: 5%;
	}

	.container-right {
		width: 90%;
		margin-left: 5%;
	}

	.container-images {
		display: none;
	}
}

.container-images img {
	width: 100%;
}

.container-icons img {
	width: 50%;
	border: 2px solid white;
	border-radius: 50%;
}

.container-text {
	width: 89%;
	display: inline-block;
}

.container-text p {
	padding-left: 2%;
	text-align: justify;
}


/*TEXT SECTIONS*/

.container-text .p-title, .container .text .p-title {
	font-weight: 400;
}

.container-text .p-center {
	text-align: center;
}

.p-title a:link {
	color: inherit;
}

.p-title a:hover {
	color: rgb(80,80,80);
}


/*ICONES CONTAINER RIGHT*/

.container-right .container i {
	opacity: 0.75;
}

.low-opacity {
	opacity: 0.85;
}


/*FLAGS RIGHT*/
.container-right .container .container-right-flag, .container-right .container .container-right-images {
	width: 15%;
	display: inline-block;
	vertical-align: top;
}

.container-right .container .container-right-flag img, .container-right .container .container-right-images i {
	width: 100%;
}

.container-right .container .container-right-images i {
	margin-left: 25%;
}

.container-right .container .container-right-text {
	width: 80%;
	display: inline-block;
	margin-left: 2%;
}