@media screen and (min-width: 1700px) { .page article.title { top: -100px; height: 300px; }
  .page article.title h1 { height: 300px; line-height: 300px; padding: 0 75px; }
  #works #grid { top: -100px; } }
@media screen and (max-width: 1180px) { .page article.title { top: -50px; }
  #works #grid ul li { height: 290px; }
  #works #grid ul li .info blockquote { width: 240px; font-size: 1.5em; }
  #works #grid ul li .info p.category { left: 50px; }
  #works #grid ul li .info p.year { right: 50px; }
  #works #grid ul li:nth-child(4n+1) .info blockquote { margin-left: -moz-calc(100% - 290px); margin-left: -webkit-calc(100% - 290px); margin-left: calc(100% - 290px); }
  #works #grid ul li:nth-child(4n+2) .info blockquote { margin-left: 40px; }
  #works #grid ul li:nth-child(4n+3) .info blockquote { margin-left: 40px; }
  #works #grid ul li:nth-child(4n+4) .info blockquote { margin-left: -moz-calc(100% - 290px); margin-left: -webkit-calc(100% - 290px); margin-left: calc(100% - 290px); }
  #works #grid ul li .thumb { width: 290px; height: 290px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 435px); left: -webkit-calc(50% - 435px); left: calc(50% - 435px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { left: -116px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -112.5px; left: -162.5px; border-bottom: 200px solid #0ceb46; border-left: 75px solid transparent; border-right: 75px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 7.5px; left: -262.5px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% + 145px); left: -webkit-calc(50% + 145px); left: calc(50% + 145px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  footer #footer-box { padding: 0 50px; } }
@media screen and (max-width: 980px) { #works #grid ul li { height: 340px; }
  #works #grid ul li .info blockquote { width: 280px; font-size: 1.75em; }
  #works #grid ul li .info p.category { left: 50px; }
  #works #grid ul li .info p.year { right: 50px; }
  #works #grid ul li:nth-child(4n+1) .info blockquote { margin-left: -moz-calc(100% - 340px); margin-left: -webkit-calc(100% - 340px); margin-left: calc(100% - 340px); text-align: right; }
  #works #grid ul li:nth-child(4n+2) .info blockquote { margin-left: 50px; text-align: left; }
  #works #grid ul li:nth-child(4n+3) .info blockquote { margin-left: -moz-calc(100% - 340px); margin-left: -webkit-calc(100% - 340px); margin-left: calc(100% - 340px); text-align: right; }
  #works #grid ul li:nth-child(4n+4) .info blockquote { margin-left: 50px; text-align: left; }
  #works #grid ul li .thumb { width: 340px; height: 340px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 340px); left: -webkit-calc(50% - 340px); left: calc(50% - 340px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { top: 40px; left: -140px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -135px; left: -195px; width: 0; height: 0; border-bottom: 240px solid #0ceb46; border-left: 90px solid transparent; border-right: 90px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 9px; left: -315px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: 50%; }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% - 340px); left: -webkit-calc(50% - 340px); left: calc(50% - 340px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: 50%; }
  #portfolio article.content .next-prev { left: 20px; width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); width: calc(100% - 90px); }
  #portfolio article.content .back-to-page { right: 20px; }
  #portfolio article.content .box { padding: 50px 20px 25px; }
  #portfolio article.content .box ul.traduction { left: 50px; }
  #portfolio article.content .box ul.share { right: 50px; } }
@media screen and (max-width: 900px) { #portfolio article.picture { width: 50%; }
  #portfolio article.content { width: 50%; }
  .common article.content { width: 100%; padding: 50px 0; }
  .common article.content .box { width: 75%; margin: 0 auto; -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
  .common article.content .box h2, .common article.content .box h3, .common article.content .box h4, .common article.content .box h5, .common article.content .box h6, .common article.content .box ul, .common article.content .box p, .common article.content .box form { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } }
@media screen and (max-width: 820px) { #works #grid ul li { height: 290px; }
  #works #grid ul li .info blockquote { width: 240px; font-size: 1.5em; }
  #works #grid ul li:nth-child(4n+1) .info blockquote { margin-left: -moz-calc(100% - 290px); margin-left: -webkit-calc(100% - 290px); margin-left: calc(100% - 290px); }
  #works #grid ul li:nth-child(4n+2) .info blockquote { margin-left: 40px; }
  #works #grid ul li:nth-child(4n+3) .info blockquote { margin-left: -moz-calc(100% - 290px); margin-left: -webkit-calc(100% - 290px); margin-left: calc(100% - 290px); }
  #works #grid ul li:nth-child(4n+4) .info blockquote { margin-left: 40px; }
  #works #grid ul li .thumb { width: 290px; height: 290px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 290px); left: -webkit-calc(50% - 290px); left: calc(50% - 290px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { left: -116px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -112.5px; left: -162.5px; border-bottom: 200px solid #0ceb46; border-left: 75px solid transparent; border-right: 75px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 7.5px; left: -262.5px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: 50%; }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% - 290px); left: -webkit-calc(50% - 290px); left: calc(50% - 290px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: 50%; }
  #portfolio { height: 100%; display: flex; flex-direction: column; }
  #portfolio article.panel { float: none; height: auto; overflow: hidden; }
  #portfolio article.picture { width: 100%; order: 2; }
  #portfolio article.content { width: 100%; order: 1; padding-bottom: 150px; }
  #portfolio article.content .next-prev { left: 50px; width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); width: calc(100% - 150px); }
  #portfolio article.content .back-to-page { right: 50px; }
  #portfolio article.content .box { padding: 50px 50px 25px; }
  #portfolio article.content .box ul.traduction { left: 100px; }
  #portfolio article.content .box ul.share { right: 100px; } }
@media screen and (max-width: 700px) { .page article.title { top: -30px; height: 220px; }
  .page article.title h1 { height: 220px; line-height: 220px; font-size: 4em; }
  #works #grid { top: -30px; }
  #works #grid ul li { height: 600px; }
  #works #grid ul li .info blockquote { top: 170px; width: 80%; font-size: 1.75em; }
  #works #grid ul li:nth-child(4n+1) .info blockquote { margin-left: 8.5%; text-align: center; }
  #works #grid ul li:nth-child(4n+2) .info blockquote { margin-left: 8.5%; text-align: center; }
  #works #grid ul li:nth-child(4n+3) .info blockquote { margin-left: 8.5%; text-align: center; }
  #works #grid ul li:nth-child(4n+4) .info blockquote { margin-left: 8.5%; text-align: center; }
  #works #grid ul li .thumb { width: 340px; height: 340px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { top: 40px; left: -140px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -135px; left: -195px; width: 0; height: 0; border-bottom: 240px solid #0ceb46; border-left: 90px solid transparent; border-right: 90px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 9px; left: -315px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); }
  footer { top: 60px; } }
@media screen and (max-width: 640px) and (orientation: portrait) { section#home article .content { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
  #contact .content .box .button { width: 100%; } }
@media screen and (max-width: 520px) { #works #grid ul li { height: 560px; }
  #works #grid ul li .info blockquote { top: 140px; }
  #works #grid ul li .thumb { width: 290px; height: 290px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { left: -116px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -112.5px; left: -162.5px; border-bottom: 200px solid #0ceb46; border-left: 75px solid transparent; border-right: 75px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 7.5px; left: -262.5px; border-right: 250px solid transparent; border-bottom: 175px solid #0ceb46; border-left: 250px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: -moz-calc(50% - 145px); left: -webkit-calc(50% - 145px); left: calc(50% - 145px); }
  #portfolio article.content .next-prev { left: 20px; width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); width: calc(100% - 90px); }
  #portfolio article.content .back-to-page { right: 20px; }
  #portfolio article.content .box { padding: 50px 20px 25px; }
  #portfolio article.content .box ul.traduction { left: 100px; width: 100px; }
  #portfolio article.content .box ul.share { right: 100px; width: 100px; }
  #contact .content .box .message h3 { font-size: 1.5em; }
  #contact .content .box .message h4 { font-size: 1em; } }
@media screen and (max-width: 420px) { .page article.title { top: -20px; height: 225px; }
  .page article.title h1 { height: 225px; line-height: 225px; font-size: 2em; text-align: center; padding: 0 25px; }
  #works { top: -20px; }
  #works #grid ul li { height: 500px; }
  #works #grid ul li .info blockquote { top: 120px; font-size: 1.5em; }
  #works #grid ul li .thumb { width: 240px; height: 240px; }
  #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 120px); left: -webkit-calc(50% - 120px); left: calc(50% - 120px); }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { top: 26.6px; left: -93.3px; border-right: 200px solid transparent; border-bottom: 140px solid #0ceb46; border-left: 200px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { top: -90px; left: -130px; border-bottom: 160px solid #0ceb46; border-left: 60px solid transparent; border-right: 60px solid transparent; }
  #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { top: 6px; left: -210px; border-right: 200px solid transparent; border-bottom: 140px solid #0ceb46; border-left: 200px solid transparent; }
  #works #grid ul li:nth-child(4n+2) .thumb { left: -moz-calc(50% - 120px); left: -webkit-calc(50% - 120px); left: calc(50% - 120px); }
  #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% - 120px); left: -webkit-calc(50% - 120px); left: calc(50% - 120px); }
  #works #grid ul li:nth-child(4n+4) .thumb { left: -moz-calc(50% - 120px); left: -webkit-calc(50% - 120px); left: calc(50% - 120px); }
  #works #grid ul li .thumb a div.content h2 { font-size: 1.5em; }
  #works #grid ul li .thumb a div.content h2 span { padding: 0 10px; }
  #works #grid ul li .thumb a div.content h3 { font-size: 1em; }
  #works #grid ul li .thumb a div.content h3 span { width: 125px; height: 30px; line-height: 30px; }
  #works #grid ul li .thumb:hover a div.content h3 span:before { top: 30px; width: 125px; height: 30px; line-height: 30px; }
  #portfolio article.content .box ul.icons { height: 40px; text-align: left; }
  #portfolio article.content .box ul.icons li { display: block; height: 18px; margin: 4px 0; padding: 5px 0; }
  #portfolio article.content .box ul.traduction { left: 50px; }
  #portfolio article.content .box ul.share { right: 50px; } }
@media screen and (max-width: 380px) { footer { top: 25px; height: 50px; }
  footer #footer-box { height: auto; padding: 0 25px; }
  footer #footer-box p { height: auto; line-height: 15px; }
  footer #footer-box p#copyright { float: none; text-align: center; }
  footer #footer-box p#mentions { float: none; text-align: center; } }
@media screen and (max-width: 340px) { #works #grid { top: -70px; padding: 50px 0 0; overflow: hidden; }
  #portfolio article.content .next-prev a p:first-of-type { display: none; } }
@media screen and (max-height: 390px) { header nav ul li { margin: 0 -15px; padding: 0 15px; }
  header nav ul li a { font-size: .7em; font-weight: 700; padding: 0 15px; }
  .social { display: none; } }
@media screen and (max-height: 300px) { .lang { display: none; } }