@font-face {
	font-family:'Avenir Next LT Pro Regular';
	font-style:normal;
	font-weight:400;
	src:url(../css/AvenirNextLTPro-Regular.woff) format("woff");
}

@media screen and (min-width: 200px) {
	html {
		padding:0!important;
		margin:0!important;
	}

	body {
		padding:0!important;
		margin:0!important;
		overflow:hidden!important;
		text-align:center;
		color:#e74c3c;
		font-family:'Avenir Next LT Pro Regular';
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale;
		background:#ecf0f1;
	}  
    #wait{
        width: 100%;
            height : 100%;
        background-color: #465478;
        position: fixed;
        z-index: 200;
    }
	
	.main {
		width:100%;
		display:relative;
		margin:0;
		padding:0;
		overflow:hidden!important;
		z-index:1;
	}
	
	.main .page_container {
		width:auto!important;
		position:relative;
		margin:0!important;
		padding:0;
		z-index:2;
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	.main .page_container > img {
		max-width:100%;
		z-index:15;
	}
	
	.blocO {
		color:#ecf0f1;
		background-color:#e74c3c;
	}
	
	h1 {
		display:inline-block;
		padding:0!important;
		margin:0;
		font-size:80px;
	}
	
	h2 {
		margin:0;
		padding:1% 0;
		font-size:40px;
	}
	
	h3 {
		margin-bottom:0;
		color:#34495e;
		font-size:30px;
	}
	
	#menu {
		min-height:10%;
		width:100%;
		position:relative;
		z-index:10;
		background-color:#465478;
	}
	
	#menu ul {
		height:100%;
		width:90%;
		padding:0 5%;
		margin:0;
		list-style:none;
	}
	
	#menu ul li {
		height:100%;
		display:inline-block;
		padding:0!important;
		margin:0!important;
		color:#ecf0f1;
		font-size:100%;
	}
	
	#menu ul li:hover {
		color:#ecf0f1;
		background-color:#e74c3c;
	}
	
	#menu ul li.whiteTab:hover {
		color:#465478!important;
		background-color:#ecf0f1!important;
	}
	
	.selectedW {
		color:#465478!important;
		background-color:#ecf0f1!important;
	}
	
	.selectedO {
		color:#ecf0f1!important;
		background-color:#e74c3c!important;
	}
	
	.main >#home {
	}
	
	.main >#prez {
		min-height:500px;
	}
	
	.blocContent {
		height:auto;
		width:70%;
		position:absolute;
		padding:2% 15% 0;
		z-index:3;
		background-color:#c0392b;
	}
	
	.blocContentV2 {
		height:80%;
		width:70%;
		position:absolute;
		padding:2% 15% 0;
		z-index:3;
	}
	
	/*    About section*/
	.describe {
		width:100%;
		height:auto;
		float:left;
		text-align:justify;
	}
    .logo {
		float:left;
		width:30%;
		margin-top:1%;
		background-size:100%;
		background-image:url(../img/logo.svg);
		background-position:center;
		background-repeat:no-repeat;
		border-radius:100%;
		border-style:solid;
		border-width:15%;
		border-color:#ecf0f1;
		margin-bottom:5%;
	}
	
	.fiche {
		width:auto;
		height:auto;
		float:left;
		margin-left:3%;
		text-align:left;
	}
	
	.fiche p {
		width:auto;
		padding:1% 2%;
		border-style:dotted;
		border-width:0;
		border-bottom-width:2px;
		border-color:#465478;
		background-color:#e74c3c;
	}
	
	.detail {
        float: left;
	}
	
	.infos {
		padding-left:3%;
	}
	
	
	
	/*	Formation*/
	#skillz {
		width:80%;
		height:80%;
		background-image:url(../img/studies.svg);
		background-repeat:no-repeat;
		background-size:contain;
		position:absolute;
		display:block;
		margin-left:10%;
		margin-top:5%;
	}
	
	/* work experience */
	#anid {
		background-color:#9460a4!important;
		background-image:url(../img/anid.svg);
		background-size:auto 100%;
	}
	
	#tvfil {
		background-image:url(../img/tvfil78.svg);
		background-size:100% auto;
	}
	
	.work {
		width:30%;
		height:20%;
		float:left;
		overflow:hidden;
		background-color:#ecf0f1;
		background-position:center;
		background-repeat:no-repeat;
		margin:1%;
	}
	
	.info {
		background-color:blue;
		width:100%;
		height:100%;
		position:relative;
		overflow:hidden;
		display:block;
		background-color:rgba(0,0,0,0.8);
	}
	
	.information {
		display:none;
	}
	
	.place {
		font-size:150%!important;
		padding-bottom:0;
		color:#ecf0f1;
		margin:2% 0;
	}
	
	.job {
		margin:0;
		padding:0;
	}
	
	.date {
		font-size:80%!important;
		margin:2% 0 0;
	}
	
	/*
		    Visu Work Experience
			
		*/
	#fsDesc {
		width:100%;
		height:100%;
		position:absolute;
		overflow:hidden;
		background-color:rgba(0,0,0,0.8);
		display:none;
		z-index:50;
	}
	
	#Content {
		width:80%;
		heigth:80%;
		position:absolute;
		margin-top:100%;
		margin-left:10%;
		color:#ecf0f1;
	}
	
	#logo {
		width:20%;
		background-position:center;
		background-repeat:no-repeat;
		border-radius:15%;
		background-size:100% auto;
	}
	
	#place {
		color:#ecf0f1;
	}
	
	#date {
		z-index:51;
	}
	
	#job {
		z-index:51;
	}
	
	/*
		    
		    Portfolio 
		*/
	.bubble {
		width:10%;
		position:absolute;
		overflow:hidden;
		border-radius:100%;
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		opacity:.8;
	}
	
	.bubble:hover {
		opacity:1;
	}
	
	.hiddenInfo {
		display:none;
	}
	
	/*Porfolio Visu*/
	#buttonInfo {
		width:8%;
		position:absolute;
		left:-4%;
		top:25%;
		z-index:51;
		background-image:url(../img/iconInfo.svg);
		background-repeat:no-repeat;
		background-size:auto 100%;
		background-position:right center;
		transition:.5s;
	}
	
	#buttonInfo:hover {
		background-color:rgba(255,255,255,0.7);
		left:-2%;
	}
	
	#fsArt {
		width:100%;
		height:100%;
		position:absolute;
		display:none;
		overflow:hidden;
		background-color:rgba(0,0,0,0.8);
		z-index:50;
	}
	
	#displayArt {
		width:100%;
		height:100%;
		position:relative;
		background-size:auto 80%;
		background-repeat:no-repeat;
		background-position:center;
	}
	
	#ArtDesc {
		width:100%;
		height:0;
		position:relative;
		margin:0;
		padding:0;
		bottom:0;
		color:#ecf0f1;
	}
	
	#artTitle {
		color:#ecf0f1;
	}
	
	#artLink:link {
		font-size:100%;
		color:#ecf0f1;
		padding:0 20%;
		z-index:51;
	}
	
	#artLink:active {
		color:#e74c3c;
	}
	
	#artLink:hover {
		color:#e74c3c;
	}
	
	#artLink:visited {
		color:#ecf0f1;
	}
	
	#artInfo {
		text-align:left;
		z-index:51;
		padding:0 20%;
	}
}