@media screen and (max-width:1024px) {
	.wrap{
		padding:0 2%;
	}
	.block-title{
		font-size:1em;	
	}
}
@media screen and (max-device-width:768px){
	#olivier, #top #presentation, #next-div{
		position:absolute;
	}
}
@media screen and (max-width:767px) {
	#logo #nom {
    	font-size: 1.7em;
	}
	#menu li a{
		padding:0 10px;
		font-size: 0.9em;
	}
	#top #presentation{
		font-size: 1.4em;
	}
	#competences {
	    height: 1400px;
	}
	#competences .block, #apropos .block {
	    margin: 0;
	    width: 100%;
	}
	.block-chart{
		text-align:center;
	}
	#timeline-wrapper #line{
		left:5%;
	}
	#timeline-wrapper .one-moment{
		width:95%;
	}
	#timeline-wrapper .one-moment.studies {
	    float: right;
	    padding-left: 60px;
	    padding-right: 0;
	}
	#timeline-wrapper .one-moment.studies .bullet {
	    left: -30px;
	}
	#timeline-wrapper .one-moment.studies .moment-inner h3:after {
	    border-color: rgba(222, 222, 13, 0) #222222 rgba(222, 222, 13, 0) rgba(222, 222, 13, 0);
	    left: auto;
    	right: 100%;
	}
	#contact #contact-form fieldset.input-name span{
		left:8px;
	}
	#contact #contact-form fieldset.input-email span{
		left:8px;
	}
	#contact #contact-form fieldset.input-message span{
		left:8px;
	}
	
}
@media only screen and (max-device-width:767px) and (orientation:landscape){
	#olivier {
		top:10%;
	}
}
@media screen and (max-width:599px) {
	body{
		font-size:13px;
	}
	#olivier img{
		width:33%;
		height:auto;
	}
	#top #presentation {
	    font-size: 1.3em;
	}
	#logo #nom {
	    font-size: 1.3em;
	}
	#logo #baseline {
	    font-size: 0.8em;
	}
	#menu li a {
	    font-size: 0.90em;
	    padding: 0 5px;
	}
	#logo {
	    line-height: 19px;
	    margin-top: 7px;
	}
	#contact #contact-form fieldset.input-name span{
		left:4px;
	}
	#contact #contact-form fieldset.input-email span{
		left:4px;
	}
	#contact #contact-form fieldset.input-message span{
		left:4px;
	}
	.contact-column {
	    margin-right: 0;
	    width: 100%;
	}
	#timeline-wrapper .one-moment .moment-inner h3{
		font-size:1.154em;
	}
	canvas {
	    width: 70% !important;
	}
	#chat{
		float:none;	
		max-width: 300px;
   		width: 100%;	
        margin-left:0;
	}
	#apropos .wrap{
		text-align:center;
	}
	#apropos .texte{
		text-align:left;
	}
	#timeline-wrapper .one-moment .moment-inner h3{
		padding:5px 15px;
	}
	.block-title{
		height:45px;
		line-height:45px;
	}
	#competences {
	    height: 1340px;
	}
   

}
@media only screen and (max-device-width:599px) and (orientation:landscape){
	body {
    	font-size: 12px;
	}
	#top #presentation {
	    font-size: 0.7em;
	}
	#olivier{
		top:5%;
	}
	#next-div{
		top:72%;
	}
	#olivier img {
	    width: 24%;
	    height:auto;
	}
}
@media screen and (max-width:479px) {
	#top #presentation {
	    font-size: 1.2em;
	    top: 43%;
	}
	.page-wrapper{
		font-size:0.923em;
	}
	#contact ul.share-contact{
		width:auto; 
	}
	#menu{
		height:auto;
		width: 100%;
		
	}
	#timeline-wrapper .one-moment .moment-inner h3 {
    	margin: -16px -11px 10px;
	}
	#competences {
	    height: 1150px;
	}
	#timeline-wrapper .one-moment .moment-inner{
		padding:10px;
	}
	#header{
		height:40px;
	}
	#header .wrap{
		text-align:center;
		padding:0;
	}
	#logo{
		height: 37px;
		float:none;
		display:inline-block;
		margin-top: 3px;
	}
	nav {
    	background: none repeat scroll 0 0 #222;
	}
	nav input[type="checkbox"] {
	    display: none;
	}
	nav a {
	    display: block;
	    padding: 0.9em;
	    text-decoration: none;
	}
	nav label, nav input {
	    display: none;
	}
	nav ul {
	    margin: 0;
	    max-height: 25em;
	    padding: 0;
	    transform: translateZ(0px);
	    transition: max-height 0.4s ease 0s;
	}
	nav label {
	    color: #FFFFFF;
	    cursor: pointer;
	    display: inline-block;
	    float: right;
	    height: 2.6em;
	    margin-top: -4.4em;
	    padding: 8px 10px 0;
	}
	
	nav label:after {
	    content: "\2630";
	    color:#FFF;
	    font-size:1.5em;
	    
	}
	nav a:hover, nav a:focus {
	    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
	}
	nav input:invalid + ul, nav input:not(:checked) + ul {
	    max-height: 0;
	    overflow: hidden;
	}
	#timeline-wrapper .one-moment .moment-inner h3 {
	    font-size: 1em;
	}
	#timeline-wrapper .one-moment .bullet .bullet-inner{
		left:12px;
	}
	#timeline-wrapper #line {
	    left: 7%;
	    margin-left:-1px;
	}
	#contact #contact-form fieldset #envoyer-form{
		font-size:1.1em;
		height: 45px;
		line-height: 45px;
	}
	#contact #contact-form fieldset input[type="text"], #contact #contact-form fieldset textarea{
		height:45px;
		font-size:1.1em; 
	}
	#contact #contact-form fieldset.input-email span{
		top: 12px;
	}
	#contact ul.share-contact li{
		margin:0 10px;
	}
	#menu ul li{
		width:25%;
	}
	#menu li a{
		padding:0;
	}
	#menu ul li:last-child{
		width:23%;
	}
	#menu ul li:nth-child(2){
		width:27%;
	}
	#contact #contact-form fieldset textarea{
		height:80px;
	}
	#olivier{
		top:10%;
	}
	#next-div{
		top:72%;
	}

}