/* - - - Desktop - - - */

@media only screen and (max-width:1439px) {
/* division */
.container {width:80%;}
.highlight {border-top-width:30px; border-bottom-width:30px;}
.highlight:after {width:calc(100% + 60px); height:calc(100% + 60px); top:-30px; left:-30px;}
.portfolio, .title.large {width:90%; width:calc(100% - 120px);}
.portfolio {grid-template-columns:auto auto auto;}
.portfolio a:nth-child(8n-7), .portfolio a:nth-child(8n-5), .portfolio a:nth-child(8n-2), .portfolio a:nth-child(8n) {grid-column:auto;}
.portfolio a:nth-child(4n-3), .portfolio a:nth-child(4n+0) {grid-column:span 2;}
}

/* - - - Tablet - - - */

@media only screen and (max-width:1079px) {
/* type */
h1 {font-size:90px; line-height:100px;}
/* division */
.title.small {padding:20px 0;}
}

/* - - - Mobile - - - */

@media only screen and (max-width:799px) {
/* type */
h1 {font-size:55px; line-height:60px;}
h2 {font-size:45px; line-height:50px;}
h3 {font-size:30px; line-height:35px;}
/* element */
footer .menu .empty, footer .menu .link {display:none;}
header .menu .container {width:100%;}
section .container {margin-bottom:45px;}
section .container > hr {margin-top:45px;}
section .container > h2 {margin-top:30px;}
section .container > h3 {width:100%;}
section .container > p {width:100%; margin:10px 0 0;}
section .container > img {margin-top:45px;}
section .container > hr {margin-top:45px;}
section .container > span {margin-top:27px;}
/* division */
.arrow {display:none;}
.container, .portfolio, .title.large {width:90%;}
.grid {grid-gap:10px; margin-top:45px;}
.grid + .grid {margin-top:10px;}
.grid.three, .grid.four {grid-template-columns:auto auto;}
.grid.three img:nth-child(3n) {grid-column:span 2;}
.highlight {border-top-width:5px; border-bottom-width:5px;}
.highlight:after {width:calc(100% + 10px); height:calc(100% + 10px); top:-5px; left:-5px;}
.portfolio {grid-template-columns:auto auto;}
.portfolio a:nth-child(4n-3), .portfolio a:nth-child(4n+0) {grid-column:auto;}
.portfolio a:nth-child(3n-2) {grid-column:span 2;}
.title.large {padding:120px 0;}
.title.small {padding:0;}
.vimeo > .vimeo {margin-top:45px;}
/* identity */
#contact .container {margin:90px auto 135px;}
}

/* - - - Tiny - - - */

@media only screen and (max-width:539px) {
/* division */
.portfolio {grid-template-columns:auto;}
.portfolio a:nth-child(3n-2) {grid-column:auto;}
}