@media screen and (max-width: 1024px)
{
/* propriétés pour tablette */
/* propriétés pour mobile */
.not_mobile { display: none; }
.mobile{display:block;}
#toggle-bar { display: block; }
#mmenu { display: block; }

img { max-width: 100%; }

main{width:100%;}

section{width:100%;
	min-width:100%;}

#slide-1 .bcg {
background-image:url('../img/slide1mobile.jpg');
}

.even{
	font-size:30px;
}

#slide-2 .description{
	display:block;
	width:90%;
	margin-top:50px;
}

#hobbies{
	display:block;
	width:90%;
	margin-left:5%;
}

#hobbies img{
	width:75px;
	height:75px;
	margin-left:0;
	margin-right:5%;
}

.legende{
	margin-left:0;
}

.uneven{
	font-size:30px;
	padding-top:15px;
}

.competences{
	margin-top:75px;
	margin-bottom:75px;

}

.logoComp div{
	width:120px;
	height:120px;
	border-width:7px;
}

#devLogo{
	width:80px;
	margin-top:25%;
}

.logoComp p{
	width:85px;
	font-size:11px;
}

.logoComp p:first-of-type{
	margin-top:13%;
}

#responsiveLogo{
	width:90px;
	margin-top:30%;
}

#logoPrint{
	width:75px;
	margin-top:17%;
}

#progressBar{
	width:80%;
}

#steps, #bulles{
	width:90%;
}

#steps a{
	margin-left:12%;
	 word-wrap: break-word;
}

#carte {
	width:60%;
	margin-top:50px;
}

form{
	margin-left:0;
	margin-top:50px;
	display:block;
	width:90%;
	float:none;
}

form h1{
	font-size:20px;
}

form td{
	font-size:18px;
}

.say{
	font-size:15px;
	width:70%;
}

#progress-button{
	margin-top:25px;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.demo-4 .elastislide-horizontal {
	background-color: transparent;
	border-radius: 20px 20px 0 0;
}

.demo-4 .elastislide-horizontal.elastislide-loading {
	background-image: url(../img/loading_dark.gif);
}

.demo-4 .elastislide-carousel ul li a{
	padding: 2px;
}

.demo-4 .elastislide-carousel ul li a img {
	border-radius: 10px;
	border: none;
	box-shadow: 0 1px 2px #000;
}

.demo-4 .elastislide-wrapper nav span {
	background-color: #666;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}

.demo-4 .image-preview img {
	border-radius: 20px;
	max-width: 100%;
	display: block;
	margin:0 auto;
}

.demo-4 .elastislide-carousel ul li.current-img a img {
	box-shadow: 0 0 3px 2px rgba(220, 82, 72,0.8);
}

.navicon {
    float: right;
    height: 4px;
    width: 30px;
    margin: 8px;
    border-top: 14px double #FFF;
    border-bottom: 5px solid #FFF;
    font-size:0;
	border-radius:0;
	padding:0;
	margin-right:25px;
}

#navigation ul li {
    clear:both;
    list-style:none;
    }
 
#navigation ul li a {
    display:block;
    background-color:#dc5248;
    text-transform:uppercase;
    letter-spacing:.2em;
    margin:2px 0;
    padding:6px 0 6px 8px;
}

#navigation ul{
	top:100%;
	right:15px;
}

#navigation ul li{
	float:none;
}

nav a{
	border-radius:0;
}
} 

@media screen and (max-width: 600px)
{
/* propriétés pour mobile */
.not_mobile { display: none; }
.mobile{display:block;}
#toggle-bar { display: block; }
#mmenu { display: block; }

img { max-width: 100%; }

main{width:100%;}

section{width:100%;
	min-width:100%;}

#slide-1 .bcg {
background-image:url('../img/slide1mobile.jpg');
}

.even{
	font-size:30px;
}

#slide-2 .description{
	display:block;
	width:90%;
	margin-top:50px;
}

#hobbies{
	display:block;
	width:90%;
	margin-left:5%;
}

#hobbies img{
	width:75px;
	height:75px;
	margin-left:0;
	margin-right:5%;
}

.legende{
	margin-left:0;
}

.uneven{
	font-size:30px;
	padding-top:15px;
}

.competences{
	margin-top:75px;
	margin-bottom:75px;
}

.logoComp div{
	width:95px;
	height:95px;
	border-width:5px;
}

#devLogo{
	width:60px;
	margin-top:25%;
}

.logoComp p{
	width:75px;
	font-size:9px;
}

.logoComp p:first-of-type{
	margin-top:13%;
}

#responsiveLogo{
	width:70px;
	margin-top:30%;
}

#logoPrint{
	width:60px;
	margin-top:18%;
}

#progressBar{
	width:80%;
}

#steps, #bulles{
	width:90%;
}

#steps a{
	margin-left:12%;
	 word-wrap: break-word;
}

#carte {
	width:60%;
	margin-top:50px;
}

form{
	margin-left:0;
	margin-top:50px;
	display:block;
	width:90%;
}

form h1{
	font-size:20px;
}

form td{
	font-size:18px;
}

.say{
	font-size:15px;
	width:70%;
}

#progress-button{
	margin-top:25px;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.demo-4 .elastislide-horizontal {
	background-color: transparent;
	border-radius: 20px 20px 0 0;
}

.demo-4 .elastislide-horizontal.elastislide-loading {
	background-image: url(../img/loading_dark.gif);
}

.demo-4 .elastislide-carousel ul li a{
	padding: 2px;
}

.demo-4 .elastislide-carousel ul li a img {
	border-radius: 10px;
	border: none;
	box-shadow: 0 1px 2px #000;
}

.demo-4 .elastislide-wrapper nav span {
	background-color: #666;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2);
}

.demo-4 .image-preview img {
	border-radius: 20px;
	max-width: 100%;
	display: block;
	margin:0 auto;
}

.demo-4 .elastislide-carousel ul li.current-img a img {
	box-shadow: 0 0 3px 2px rgba(220, 82, 72,0.8);
}

.navicon {
    float: right;
    height: 4px;
    width: 30px;
    margin: 8px;
    border-top: 14px double #FFF;
    border-bottom: 5px solid #FFF;
    font-size:0;
	border-radius:0;
	padding:0;
	margin-right:25px;
}

#navigation ul li {
    clear:both;
    list-style:none;
    }
 
#navigation ul li a {
    display:block;
    background-color:#dc5248;
    text-transform:uppercase;
    letter-spacing:.2em;
    margin:2px 0;
    padding:6px 0 6px 8px;
}

#navigation ul{
	top:100%;
	right:15px;
}

#navigation ul li{
	float:none;
}

nav a{
	border-radius:0;
}

}