/*-----------------------------*\
	Responsive --> DEBUT <--
\*-----------------------------*/


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* Ipad */
/* Portfolio */

	aside.img{
		width: 50%;
	}
	div.filtre.grid-wrapper {
	    margin-top: 0;
	}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* Ipad */
/* Portfolio */
	div#noir{
		height: auto;
	}
	div#main div#row div.article div.pres {
	    margin-bottom: 0px;
	    margin-top: 0px;
	}
/* Projet x */
	section div#box a#first {
	    width: 62vw;
	    height: 46vw;
	    margin-bottom: 10px;
	}
	section div#box div#flex {
	    width: 62vw;
	}
    section div#box a {
	    width: 12vw;
	    height: 12vw;
	}
	div#box div#flex a img {
    	height: 12vw;
	}
	section article ul li ul li,
	section article ul li ul li:last-child{
		padding-left: 0;
	}
	section article {
	    margin-left: 0;
	}
	h6, a#site {
	    font-size: 2.5vw;
	}
	p, li {
	    font-size: 2vw;
	}
}

@media screen and (max-width: 1440px){
}

@media screen and (max-width: 1440px) and (min-width: 1024px){
	.wrappe-vertical{
		min-height: 75vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
}

@media screen and (max-width: 1366px){
	div#noir{
		top: 300px;
	}
	div#main div#row div.article div.project:hover div#noir {
	    top: 300px;
	}
	div.lien{
		bottom: 0;
	}
	h4, h5, div#main div#row div.article div.project div.pres p{
		color: #fff;
	}
	div#main div#row div.pres {
	    padding: 20px 20px;
	}
}

@media screen and (max-width: 1200px){
	div#main div#row div.article div.pres{
		padding: 17px 20px;
		margin-bottom: 0;
		margin-top: 0;
	}
	article ul li, article ul li p{
		font-size: 1.75vw;
	}
	h6, a#site{
		font-size: 2.25vw;
	}
	/* div#main div#row div.article div.project:hover div#noir {
	    top: 240px;
	} */
}

@media screen and (max-width: 1024px){
	div#loader svg.logo-loader{
		margin-top: 25%;
	    transform: translateY(-50%);
	}
	div#menu-mobile{
		display: block;
	}
	div#content-fixe{
		display: none;
	}
	div.sect{
		display: block;
    	height: auto;
	}
	div.sect > div{
		display: block;
    	padding-top: 100px !important;
    	min-height: 0;
	}
	div.sect > div > div{
		margin-bottom: 50px;
	}
	div#competences{
		padding-top: 100px;
	}
	div#competences > div{
		padding-top: 0 !important;
	}
	div#title {
	    margin-bottom: 50px;
	    margin-top: 50px;
	}
	section.projet div#title{
		margin-bottom: 20px;
		margin-top: 20px;
	}
	div.filtre.grid-wrapper {
	    margin-top: 0;
	}
	div.article div.filter {
	    top: 25px;
	}
	div.project {
	    overflow: auto;
	    margin-top: 25px;
	}
	/*projet x*/
	section div#box a#first {
	    width: 62vw;
	    height: 46vw;
	    margin-bottom: 10px;
	}
	section div#box div#flex {
	    width: 62vw;
	}
    section div#box a {
	    width: 12vw;
	    height: 12vw;
	}
	div#box div#flex a img {
    	height: 12vw;
	}
	div.grid12.xl12.m4.xs12.scenter{
		padding-left: 1%;
	}
	@keyframes parallax{
		from{height: 0;}
		to{height: 50vh;}
	}
}

@media screen and (max-width: 992px){
	div#loader svg.logo-loader{
		height: 30vw;
	}
	div#noir{
		top: 0;
	}
	div#main div#row div.article div.project:hover div#noir {
	    top: 0;
	}
	h4{
		font-size: 25px;
		margin-top: 0;
	}
	div.article{
		margin-bottom: 25px;
	}
	div.article div.filter {
	    bottom: 0px;
	}
	div.project {
	    margin-top: 0;
	}
	div#main div#row div.article div.pres{
		padding: 5px 15px;
	}
	div#main div#row div.pres,
	div#noir{
		height: auto;
	}
	.prj img{
		height: 250px;
	}
	div.article div.filter{
		top: 0;
	}
	div.return {
	    margin-bottom: 50px;
	}
}

@media screen and (max-width: 960px) {
	section div#box a#first {
	    width: 84vw;
	    height: 46vw;
	    margin-bottom: 10px;
	}
	section div#box div#flex {
	    width: 83vw;
	}
    section div#box a {
	    width: 15vw;
	    height: 15vw;
	}
	div#box div#flex a img {
    height: 15vw;
	}
	article ul li.link{
		text-align: right;
	}
	article ul li.link:after{
		left: auto;
	}
	li.link:after{
		width: 30%;
	}
	article ul.clt li:first-child{
		font-size: 5vw;
	}
	article ul.clt li:last-child,
	article ul.demande li:first-child,
	article ul.outils li:first-child{
		font-size: 4vw;
	}
	article ul.demande li:last-child{
		font-size: 3vw;
	}
	div.compt img {
	    margin: auto;
	}
	div#competences div.compt p{
		display: block;
	}
}

@media only screen and (device-width: 768px) {
  /* iPad screen size rules */
  	div#loader svg.logo-loader{
		margin-top: 50%;
	}
	label:after{
		top: 32px;
	}
	textarea + label:after{
		top: 185px;
	}
	textarea:focus + label:after, textarea:valid + label:after{
		top: 210px;
	}
	input:valid + label:after, input:focus + label:after, div input.invalid + label:after{
		top: 60px;
	}
	section#propos p, section#propos p strong{
		font-size: 20px;
	}
	h3, h1{
		font-size: 35px;
	}
	div#noir{
		top: 0;
	}
	section#propos p, section#propos p strong{
		font-size: 20px;
	}
	div#noir{
		top: 0;
	}
	.grid-wrapper .grid12.xs12 {
	    padding: 0;
	}
	section article ul li {
	    margin: 5px 0;
	}
	a#site {
	    font-size: 3.25vw;
	}
	div.return {
	    margin-bottom: 0;
	}
	section article ul li p, section article ul li {
	    font-size: 2.5vw;
	}
	article ul li.link{
		text-align: left;
	}
	article ul li.link:after{
		left: 0;
	}
	article ul div,
	article ul div li,
	article ul div ul,
	article ul li,
	article ul li ul{
		padding: 0 !important;
	}
	div.compt img {
		margin-right: 0;
	    margin: auto;
	}
	div#competences div.compt p{
		display: block;
	}
}

@media screen and (max-width: 768px){
	div.compt img {
		margin-right: 0;
	    margin: auto;
	}
	div#competences div.compt p{
		display: block;
	}
}

@media screen and (max-width: 720px){
	h4{
		font-size: 3.35vw;
	}
	h5{
		font-size: 2.5vw;
	}
	div#main div#row div.pres p{
		font-size: 2.25vw;
	}
	h3, h1{
		font-size: 35px;
	}
	div.return {
	    margin-bottom: 0;
	}
	section article ul li p, section article ul li {
	    font-size: 3vw;
	}
	article ul li.link{
		text-align: left;
	}
	article ul li.link:after{
		left: 0;
	}
	article ul div,
	article ul div li,
	article ul div ul,
	article ul li,
	article ul li ul{
		padding: 0 !important;
	}
}


@media screen and (max-width: 567px){
	.prj img{
		height: 350px;
	}
	div.article aside,
	div#main div#row div.article div.pres{
		width: 100%;
	}
	div#main div#row div.article div.pres{
		padding: 8vw;
		background: #201F1E;
	}
	div#noir{
		opacity: 0
	}
	h4{
		font-size: 5.5vw;
	}
	h5{
		font-size: 4vw;
	}
	div#main div#row div.article div.pres p{
		font-size: 3.5vw;
	}
	h3, h1{
		font-size: 8vw;
	}
	h6, a#site{
		font-size: 5vw;
	}
	li.link:after{
		width: 55%;
	}
	section article ul li p, section article ul li {
	    font-size: 4vw;
	}
	div.grid12.xl4.m12.xs4.compt.left{
		width: 100%
	}
	div.grid12.xl12.m4.xs12.scenter{
		text-align: left;
	}
	div.grid12.xl12.m4.xs12.scenter img{
		margin-right: 20px;
	}
	div#competences div.compt p{
		display: inline-block;
	}
}

@media screen and (max-device-width: 480px) {
  /* All devices with display width less then 480px 
  will obey the following rules */
	label:after{
		top: 32px;
	}
	textarea + label:after{
		top: 185px;
	}
	textarea:focus + label:after, textarea:valid + label:after{
		top: 210px;
	}
	input:valid + label:after, input:focus + label:after, div input.invalid + label:after{
		top: 60px;
	}
	h1{
	    font-size: 8vw;
	}
	ul#btns li{
		font-size: 5vw;
	}
	article{
		padding: 25px 0;
	}
	article ul.clt li:first-child{
		font-size: 6vw;
	}
	article ul.clt li:last-child,
	article ul.demande li:first-child,
	article ul.outils li:first-child{
		font-size: 5vw;
	}
	article ul.demande li:last-child{
		font-size: 4vw;
	}
	article ul.clt{
		margin-bottom: 50px;
	}
	article ul.demande{
		margin-bottom: 25px;
	}
	@keyframes parallax{
		from{height: 0;}
		to{height: 75vw;}
	}
}

@media screen and (max-width: 425px){
	section#propos p, section#propos p strong{
		font-size: 18px;
	}
	.head-index, h2{
		font-size: 25px;
	}
	ul#btns {
	    justify-content: space-between;
	}
}

@media screen and (max-width: 320px){
	ul#btns{
		width: 49%;
	}
	h5 {
	    font-size: 15px;
	    line-height: 17px;
	}
	div#main div#row div.article div.pres p {
	    font-size: 13px;
	    line-height: 15px;
	}
}