@media only screen and (max-width: 1350px) {
	[class^="workpost-"] {
		width:calc((100%/3) - 20px);
	}

}


@media only screen and (max-width: 1045px) {
	[class^="workpost-"] {
		width:calc((100%/2) - 20px);
		margin:8px;
		position: relative;
		display: inline-block;
	}
}

@media only screen and (max-width: 700px) {

	body {
	}

	.global{
		z-index: -10;
		overflow: hidden;
		width:100%;
		height:100vh;
	}

/* GRADIENT BCKG ANIM
	.animbckg{
		background-size: 400% 200%;
		background-image: linear-gradient(120deg, #1C62FF 0%, #FF8EFF 100%);
		animation: BckgAnim 10s ease infinite;
	}

	@keyframes BckgAnim{
		0%{background-position:0% 50%;}
		80%{background-position:100% 50%;};
		100%{background-position:0% 100%;};
	}	
*/


	#post:after {
		display: none;
	}


	.headerhp{
		margin-top:-20px;
	}
	.container{
		padding:0;
	}

	.headerhp .logoheader{
		content: url(../img/valentinsignatureblack.png);
	    display: inline-grid;
	    background-size: 100%;
	    background-repeat: no-repeat;
	    width: 120%;
	    height:inherit;
	    margin-left: -10%;
	    border: 0;
	}

	.logoheader{
		height:inherit;
		margin:20px auto;
		width:60%;
	    background-image:none;
		content: url(../img/valentinsignature.jpg);
	    display: block;
	    background-repeat: no-repeat;
	}

	.stick{
		position:fixed !important;
		z-index: 99;
		top:0;
		background-color:#3B5EF7 !important;
	}

	.white{
		color: white !important;
	}

	[class^="workpost-"] {
		font-size:140%;
		width:100%;
		margin:10;
		position: relative;
		display: inline-block;
	}

	.workinfo {
		top: 0;
    	transform: inherit;
	}

	.featuredimg{
	}

	.worktitre{
		width:100%;
	}

	.hp{
		display: none;
	}

	.hpmobile{
		margin:0;
		display: inherit;
		font-family: 'Montserrat', sans-serif;
		text-align: center;
		color: blue;
	}

	.hpmobile h1{
		display: block;
		font-weight: 200;
		width:100%;
		font-size:6vw;
		letter-spacing: 1vw;
	}

	.hpmobile h2{
		display: block;
		font-weight: 100;
		width:100%;
		font-size:6vw;
		letter-spacing: 1vw;
	}

	.hpmobile .menu{
		margin-top:5vh;
	}

	.hpmobile .menu a{
    font-weight: 200;
    margin: 20px 10px;
    font-size: 1.3em;
    width: 80%;
    padding: 20px 20px;
    color: #0031ff;
    text-decoration: none;
    border: 1px solid #4566f1;
	}

	.hpmobile .socials{
		position:initial;
	    width: 100%;
	    left: 0;
	    bottom:0;
	    margin-top:8vh;
	    filter: brightness(5) saturate(0) contrast(2);
	}

	.hpmobile .socials a{
		opacity:1;
		display: inline-block;
		margin:0 30px;
		transform:scale(1.8);
	}

	.hpmobile .socials a.social-li,
	.hpmobile .socials a.social-vimeo,
	.hpmobile .socials a.social-mail{
		display: none;
	}


	header{
		position:relative;
		padding:0;
		height:inherit;
		top:0;
		display: block;
	}

	header #nav{
		background-color:#fff;
		display: block;
		margin:0;
		position:relative;
		width: 100%;
	}

	header #nav.menu{
		border-top: 1px solid #eaeaea;
		border-bottom: 1px solid #eaeaea;
		position:relative;
		left:0;
	}

	header #nav a{
		padding:10px 10px;
		color: #404040;
		font-size:1.6em;
		font-weight: 200;
		border:0;
		margin: 0;
	}

	header #nav a.active{
		border-top:0;
		color:#3B5EF7;
	}

	header #nav.language{
		display: none;
	}

	.workcontainer{
		background-color:#ffffff;
		padding:0 0 0px 0;
	}
	a.worktitre{
		text-decoration:none;
		display: block;
	}

	.workview .workinfo ul{
		display: none;
	}

	#post {
		display: block;
		background-color: #fafafa;
		margin: 0;
		padding:30px 0 40px 0;
	}

	#post .bluemask{
		background-color:transparent;
		position:relative;
		opacity:1;
		margin-bottom:0;
	}

	#post .workinfo {
		text-align: center;
		position:relative;
		padding: 0;
		margin-bottom:0.4em;
	}

	#post .workinfo a{
		text-decoration:none;
	}
	#post .workinfo ul{
		margin-top:10px;
		color:blue;
	}
	
	#post .workinfo h1,
	.post .postinfo h1{
		color:#0031ff;
		line-height: 1em;
		font-family:'Shrikhand', cursive;
		font-size: 10vw;
		padding: 0 20px;
		margin: 10px 0 30px 0;
		word-break: keep-all;
	}

	#post .workinfo h2 {
		font-size:1em;
		margin-bottom:15px;
		font-weight: 200;
		color: #2249f5;
		border:1px solid #2249f5;
		display: inline-block;
		padding:2px 20px;
	}

	#post:after{
		content:'>';
	}

	.post .socials{
		display: none;
	}

	.navpost{
		margin:0em 0;
		display: inline-block;
		padding: 0;
		position:relative;
	    box-sizing: content-box;
	}
	.navpost,
	.navpost .lefttt,
	.navpost .righhht{
		width:100%;
		position:relative;
	}

	.navpost span{
		background-color:transparent !important;
		right:0 !important;
		left:0 !important;
		margin:0 5px;
		padding: 0 !important;
		color: #ffffff !important;

	}

	.navpost a{
		font-size: 1.5em;
		font-weight: 200;
		margin:10px auto;
		border: 1px solid blue;
		padding: 20px;
		text-align: center;
		background-color: #3B5EF7;
		display: block;
		width:100%;
	}

	.prev.collapse{
		float:initial;
	    left: 0;
	}

	.next.collapse{
		float:initial;
		right:0
	}

	.postcontent{
		margin-top:0;
		padding:10px;
		background-color:#ffffff;
	}

	.post .postinfo{
		bottom:0;
		padding: 10px 0;
		position:absolute;
	}

	.post .postinfo h1{
		color: #ffffff;
		line-height: 1em;
		font-family:'Shrikhand', cursive;
		font-size:8vw;
		margin: 10px 0;
	}

	.post .postinfo h2{
		margin:10px 0;
		font-size: 4vw;
		color: #ffffff;
	}

	.postintro{
		padding: 30px 10px;
		background-color:#ffffff;
	}

	.postintro p{
		background-color:#ffffff;
	}

	.postcontent blockquote{
		font-size:1.2em;
		padding: 0 20px;

	}

	.postcontent h3{
		margin:2em 0;
	}

	.postcontent img{
		max-width:100%;
		margin:0;
	}

	.embed-container{
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.embed-container iframe,
	.embed-container object,
	.embed-container embed	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%; 
	}


	.skills{
		font-size: 150%;
		padding-top:50px;
	}
	.skills li{
		width:100%;
	}

	.skills li:before {
	    display: inline-block;
	    width: 40%;
	    margin-bottom: 30px;
	}

	.formulaire form{
		padding:10px;
	}

	.formulaire h3, .formulaire h4, .formulaire input, .formulaire textarea{
		font-size:120%;
		margin-bottom:1em;
	}

	footer{
		margin-top:3em;
	}
}