html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroupe, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0px;
    padding: 0px;
    border: 0px none;
    font-family: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-size-adjust: inherit;
    font-stretch: inherit;
    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font-family:"khmer_uiregular";
    font-size: 18px;
    background: none repeat scroll 0% 0% #000;
}
h1, h2, h3, h5, h6 {
    font-family:"Khmer UI";
	font-weight:normal;
}
h2 {
    font-size: 2.11em;
    line-height: 1.368em;
    margin: 0px 0px 0.342em;
    color: #EBEADB;
	transition: all 1s ease-in-out 0s;
}
h4 {
    font-family: "khmer_uiregular";
    font-style: italic;
}
h4 a{
    color:#0b2530;
}
h4 a:hover{
    color:grey;
}
h5 {
    font-size: 2em;
    color: #0b2530;
    line-height: 1.083em;
    margin: 0px 0px 0.361em;
}
h6 {
    font-family: "khmer_uiregular";
    color: #245E88;
    font-size: 1em;
    margin: 0px 0px 1.444em;
    line-height: 1.444em;
}
ol, ul {
    list-style: outside none none;
}
section {
    width: 100%;
    padding: 120px 0px;
    position: relative;
    background: none repeat scroll 0% 0% #FFF;
    box-sizing: border-box;
}
section p {
    font-family: "khmer_uiregular";
    color: #76756E;
    line-height: 1.444em;
    font-size: 1em;
}
section header {
    margin: 0px 0px 2.889em;
}
section header h3 {
    color: #0b2530;
    font-size: 2.667em;
    line-height: 1.083em;
    text-transform: uppercase;
    margin: 0px 0px 0.271em;
	font-weight:bold;
	
}
section header h4 {
    color: #4A4C4D;
    font-size: 1.33em;
    padding: 0.542em 0px;
    line-height: 1.625em;
}
img {
    width: 100%;
    display: block;
    margin: 0px auto;
}
.theContainer {
    max-width: 1080px;
    width: 100%;
    padding: 0px 30px;
    margin: 0px auto;
    box-sizing: border-box;
}
.fader > li{
    transform: scale(0);
    opacity: 0.6;
    transition: all 0.6s ease-in-out 0s;
}
.fader > li.animScale{
	transform: scale(1);
    transition: all 0.7s ease-in-out 0s;
}
.fader > li.animOpacity{
	opacity: 1;
	transition: all 0.7s ease-in-out 0s;
}
.animMove{
	margin-left:-4000px;
	transition: all 1s ease-in-out 0s;
}
.groupe:after, #main{
    content: "";
    display: table;
    clear: both;
}
figure{
	cursor:pointer;
	transition: all 0.5s ease-in-out 0s;
}
figure:hover{
	background: none repeat scroll 0% 0% rgba(11, 37, 48, 0.75);
}
/*Overlay=========================================================================================================================================================================








==================================================================================================================================================================================
*/

#overlay {
display:none;
width:100%;
height:100%;
position:fixed;
background-color:black;
opacity:0.7;

}
#total{
z-index:9999;
display:none;
position:fixed;
background-color:white;
height:100%;
width: 100%;
background-color:#041015;
overflow-y:scroll;
}
#closeProjet{
font-size:4em;
font-weight:normal;
font-family:'mv_boliregular';
color:#eeeeee;
float: left;
padding-top: 2%;
padding-left: 3%;
cursor:pointer;
}
#closeProjet:hover{
	 color: grey;
}
#closeProjet:active{
color:#bcdcff;		
}
.projets{
	width:100%;
	max-height:0px;
	float:left;
}
.gaucheProjet {
    padding-left: 10%;
    float: left;
    width: 40%;
    height: 100%;
	text-align:center;
}


#leSlider{
	width:80%;
	background-color:rgba(19,37,55,0.70);
	margin:32px 7% 20px 7%;
	padding:2% 2% 2% 2%;
	position:relative;
}
#leSlider img{
	width:100%;
	max-height:100%;
}
.imageNope{
	position:fixed;
	opacity:0;
	max-width:100%;
	max-height:100%;
	display:none;
}
.imageYep{
	display:block;
	opacity:1 !important;
	position:relative !important;
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	-ms-transition: all 1.5s ease-in-out;
	-o-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
}
#btnSli{
	padding: 0px 41%;
	width: 20%;
}
.rondSlider{
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	-o-border-radius:100%;
	border-radius:50%;
	width:10px;
	height:10px;
	background: #818181;
	display:inline-block;
	text-align:center;
	padding:1px;
	margin-left:3px;
	margin-right:3px;
	margin-bottom:20px;
}
.actif{
	background: #132537 !important;
}


.droiteProjet {
    padding-right: 10%;
    float: right;
    width: 40%;
    height: 100%;
	color:white;
}
.droiteProjet h1{
	font-weight: bold;
	font-size:1.5em;
}
.droiteProjet h3{
	font-weight: bold;
	font-size:1.2em;
}
.droiteProjet p{
	margin: 20px auto;
}
#voirP{
	display: inline-block;
	font-size: 1.5em;
	color: #FFF;
}
#voirP a{
text-decoration:underline;
color: #FFF;
}
#voirP:hover{
color: grey;
}
#voirPM{
	margin: 0px 22%;
	font-size: 1.5em;

	display: none;
	margin: 0px 40%;
}
#voirPM a{
text-decoration:underline;
}
#voirPM a:hover{
text-decoration:none;
}
#titreP{
margin: 0 5%;
font-size: 2em;
color: white;
}
.titreProjet{
    border-bottom: white solid 1px;
}
.petitTitreProjet{
    border-bottom: white solid 1px;
}
.petitTitreProjet2{
    border-bottom: white solid 1px;
}
.texteEquipe a{
	color:white;
}
.texteEquipe a:hover{
	color:grey;
}
/*-----------------------------Background-----------------------*/
#background {
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    overflow: hidden;
}
#background:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
/*-----------------------------top-----------------------*/
#top {
    background: none repeat scroll 0% 0% transparent;
    position: relative;
    max-width: 100%;
    padding: 0px;
    width: 100%;
    height: 800px;
    overflow: hidden;
}
#top .accueil {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: #EBEADB;
    text-align: left;
    padding: 45px 55px 85px;
    text-shadow: 0px 3px 32px rgba(0, 0, 0, 0.8);
    box-sizing: border-box;
	transition: all 1s ease-in-out 0s;
}
#top .accueil h2 {
	font-family:"mv_boliregular";
    transition: all 1s ease-in-out 0s;
	font-weight:bold;
}
#top .accueil p {
    font-size: 1.222em;
    font-family: 'mv_boliregular';
    color: #EBEADB;
    font-style: italic;
    max-width: 70%;
    line-height: 1.182em;
    text-shadow: 3px 5px 13px #000;
	transition: all 1.5s ease-in-out 0s;
}
.description
{
	margin: 0px 0px 1.182em;
	transition: all 1.5s ease-in-out 0s;
}
/*-----------------------------Main-----------------------*/
#main {
    padding: 0px;
}
#main nav {
    position: fixed;
    z-index: 998;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 80px;
    background-color: rgba(236, 234, 219, 0.5);
}
#main nav .theContainer {
    position: relative;
}
#main nav ul {
    font-size: 18px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 30px;
    display: inline-block;
}
#main nav ul li {
    float: left;
    margin: 30px 10px;
    font-family: "khmer_uiregular";
	font-weight:bold;
}
#main nav ul li a, #main nav ul li a:link, #main nav ul li a:visited, #main nav ul li a:active {
    color: #0b2530;
    text-decoration: none;
}
#main nav ul li:last-child {
    margin-right: 0px;
}
/*-----------------------------Top nav-----------------------*/
.theAccueil #main nav {
    position: absolute;
    top: -80px;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5) !important;
}
.theAccueil #main nav .theContainer {
    max-width: none;
    padding: 0px;
    margin: 0px;
}
.theAccueil #main nav .logo {
    opacity: 0;
}
.theAccueil #main nav ul {
    left: 45px;
}
.theAccueil #main nav ul li a{
    color: #EBEADB;
}
.theAccueil #main nav ul li a:hover {
    color: #B4B179;
}
/*-----------------------------Logo-----------------------*/
#main nav .logo {
    opacity: 1;
    width: 50px;
    height: 50px;
    margin: 15px 0px;
    position: absolute;
    top: 0px;
    left: 30px;
    display: inline-block;
}
#main nav .logo a {
    text-decoration: none;
}
/*-----------------------------Portfolio-----------------------*/

#main #portfolio ul {
    width: 100%;
    list-style: outside none none;
    margin: 0px 0px 2.889em;
}
#main #portfolio ul li {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: table;
    margin: 0px 0px 2.889em;
}
#main #portfolio ul li:last-child {
    margin: 0px;
}
#main #portfolio ul li figure {
    width: 37%;
    background-size: theContainer;
    background-position: center center;
    background-repeat: no-repeat;
    display: table-cell;
}
#main #portfolio ul li .description {
    width: 63%;
    font-size: 0.88em;
    padding: 1.641em 35px;
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.75);
    overflow: hidden;
    display: table-cell;
    box-sizing: border-box;
}
#main #portfolio ul li .description a{
    color: inherit;
	font-weight:bold;
    text-decoration: inherit;
    transition: color 0.2s ease-in-out 0s;
}
#main #portfolio ul li .description a:hover{
    color: grey;
}
#main #portfolio ul li .description h6 {
    line-height: 0.821em;
    margin: 0px 0px 0.821em;
}
/*-----------------------------Propos-----------------------*/
#main #propos .niveau {
    width: 30%;
    float: left;
    margin: 0px 3% 0px 0px;
}
#main #propos .niveau figure {
    position: relative;
    width: 100%;
    margin: 0px 0px 1.444em;
    overflow: hidden;
    box-sizing: border-box;
}
#main #propos .niveau figure:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: theContainer !important;
    background-repeat: no-repeat !important;
}
#main #propos span{
	color: #0B2530;
}
/*-----------------------------Footer-----------------------*/
footer {
    width: 100%;
    position: relative;
    background: none repeat scroll 0% 0% rgba(11, 37, 48, 0.75);
    text-align: center;
    box-sizing: border-box;
}
footer .footcontact {
    text-align: left;
    color: #FFF;
    padding: 1.444em 0px;
}
footer .footcontact .col {
    position: relative;
    float: left;
    width: 47.5%;
    margin: 0px 5% 0px 0px;
}
footer .footcontact .col:nth-child(2n) {
    margin: 0px;
}
footer .footcontact .col .contactinfo {
    margin: 0px 0px 1.444em;
}
footer .footcontact .col .contactinfo h5 {
    font-size: 1.444em;
    color: #FFF;
    padding: 0.5em 0px;
    margin: 0px 0px 1em;
    border-bottom: 1px solid #FFF;
    box-sizing: border-box;
}
footer .footcontact .info {
    line-height: 1.444em;
}
footer .footcontact #find-us .col > div:first-child {
    margin: 0px;
}
footer .footcontact #find-us .col p{
	width:40%;
}
footer .footcontact #find-us span {
    font-family: "khmer_uiregular";
    display: block;
    margin: 0px 0px 0.722em;
}
footer .footcontact #update a{
    color: #FFF;
    text-decoration: none;
}
footer .footcontact #update a:hover{
    color: grey;
    text-decoration: none;
}

footer .pied {
    /*background: none repeat scroll 0% 0% #0b2530;*/
    padding: 40px 0px 45px;
    width: 100%;
    position: relative;
    overflow: hidden;
    color: #FFF;
}
footer .pied:before, footer .pied:after {
    content: "";
    position: absolute;
    bottom: -180px;
    left: 0px;
    width: 100%;
    height: 180px;
}
footer .pied .theContainer {
    transition: transform 0.8s ease-in-out 0s;
}
footer .pied p {
    font-size: 0.95em;
    margin: 0px 0px 1.25em;
    -moz-user-select: none;
}


@media only screen and (max-width: 479px){
	
	body {
    font-size: 14px;
	}
	section {
    padding: 2.889em 0px;
	}
	.theContainer {
    padding: 0px 15px;
	}
	#closeProjet{
		font-size:3em;
	}
	/*-----------------------------Top-----------------------*/
	#top{
	height:480px
	}
	#top .accueil {
    padding: 38px 15px 60px;
	}
	#top .accueil p {
    max-width: 100%;
	}
	/*-----------------------------Nav-----------------------*/
	#main nav {
    width: 280px;
    height: 100%;
    top: 0px;
    right: -280px;
    left: auto;
    overflow: hidden;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8) !important;
	}
	#main nav .logo {
    position: static;
    top: 0px;
    left: 0px;
	}
	#main nav ul {
    position: relative;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: 15px auto;
    font-family: "khmer_uiregular";
    font-size: 2.3em;
    display: block;
    box-sizing: border-box;
	}
	#main nav ul li {
		margin: 0px 0px 0.5em;
		display: block;
		color: #EBEADB;
		float: none;
	}
	#main nav ul li a, #main nav ul li a:link, #main nav ul li a:visited, #main nav ul li a:active {
		color: #EBEADB;
	}

	/*-----------------------------TopNav-----------------------*/
	.theAccueil #main nav {
    position: fixed;
    top: 0px;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8) !important;
	}
	.theAccueil #main nav .theContainer {
    padding: 0px 15px;
	}
	.theAccueil #main nav .logo {
		opacity: 1;
	}
	.theAccueil #main nav ul {
    left: 0px;
	}
	/*-----------------------------Portfolio-----------------------*/
	#main #portfolio ul li figure {
		width: 100%;
		display: block;
		height: 180px;
	}
	#main #portfolio ul li .description {
		width: 100%;
		display: block;
		padding: 18px 15px;
	}
	/*-----------------------------Propos-----------------------*/
	#main #propos .niveau {
    width: 100%;
    margin: 0px 0px 30px;
	}
	/*-----------------------------Footer-----------------------*/
	footer .footcontact .col {
    width: 100%;
    margin: 0px;
}
	footer .footcontact #find-us .col {
		margin: 0.7em 0px 0px;
	}
	footer .footcontact #find-us .col:first-child {
		margin: 0px;
	}
	.info{
		font-size: 1.444em;
	}
}

@media only screen and (min-width: 480px) and (max-width: 815px){
body{
font-size:14px
}
section {
    padding: 2.889em 0px;
}
#closeProjet{
		font-size:2em;
	}
#top .accueil {
    padding: 38px 30px 28px;
}
#top .accueil p {
    max-width: 78%;
}
#main nav {
    width: 280px;
    height: 100%;
    top: 0px;
    right: -280px;
    left: auto;
    overflow: hidden;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8) !important;
}
#main nav ul {
    position: relative;
    top: 0px;
    right: 0px;
    left: 0px;
    margin: 15px auto;
    font-family: "khmer_uiregular";
    font-size: 1.8em;
    display: block;
    box-sizing: border-box;
}
#main nav ul li {
    margin: 0px 0px 0.5em;
    display: block;
    color: #EBEADB;
    float: none;
}

.theAccueil #main nav {
    position: fixed;
    top: 0px;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.8) !important;
}
.theAccueil #main nav .theContainer {
    padding: 0px 15px;
}
.theAccueil #main nav ul {
    left: 0px;
}

#main #propos .niveau {
    width: 100%;
    margin: 0px 0px 30px;
}
}

@media screen and (max-width: 1000px) 
{
	.gaucheProjet{
	width:100%;
	padding-left:0%;
	text-align:center;
	}
	#leSlider{
		width:80%;
		margin:0px auto;
	}
	.droiteProjet{
		padding:8px 0% 0 0;
		width:90%;
		margin-left:5%;
		margin-right:5%;
	}
	.centre{
		display:none;
	}
	#btnSli{
		display:none;
	}
	#closeProjet{
		font-size:1.5em;
	}
	#voirP{
		display:none;
	}
	#voirPM{
		display:inline-block;
		color:white;
	}
	#voirPM:hover{
		color:grey;
	}
	footer .footcontact #find-us .col {
    width: 100%;
    margin: 0.7em 0px 0px;
	}
	footer .footcontact #find-us .col:first-child {
		margin: 0px;
	}
}