/*
Theme Name: Matthew Thomas Designs — Portfolio
Theme URI: matthewthomasdesigns.com
Description: Custom WordPress theme for Matthew Thomas's Portfolio.
Version: 6.0
Author: Matthew Thomas
Author URI: matthewthomasdesigns.com
*/
html {box-sizing:border-box}
*, *:before, *:after {box-sizing:inherit}

body {margin:0; padding:0; font-family:"Open Sans", Arial, sans-serif; font-weight:300; background:transparent}

#header {width:100%; overflow:auto}
#header .logo {width:250px; height:100px; margin:20px auto; background:url(mtdlogo.svg) no-repeat; background-size:contain}
#header .description {width:100%; margin:0 0 10px 0; font-size:18px; color:#707070; text-align:center}
#header .description br {display:none}

#content-homepage {display:flex; flex-wrap:wrap; margin:20px; gap:20px}
#content-homepage div {position:relative; width:calc( (100% - 80px) / 5); color:#FFFFFF; text-align:center; overflow:hidden}
#content-homepage img {display:block; width:100%; height:auto; transform:translateZ(0); opacity:1; transition:.3s}
#content-homepage img.blur {position:absolute}
#content-homepage a {display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; background:rgba(0,0,0,.5); transition:.3s}
#content-homepage .name {font-weight:400; font-size:1.5vw; line-height:125%}
#content-homepage .mediatype {margin-top:6px; padding-top:5px; font-weight:300; font-size:1vw; border-top:1px solid #B7B7B7}

#content-page {margin:40px; color:#FFFFFF; line-height:0; text-align:center}
#content-page a:link, #content-page a:visited, #content-page a:active, #content-page a:hover {color:#FFFFFF; font-weight:600; text-decoration:underline}
#content-page .headline {width:100%; max-width:1300px; margin:0 auto 60px auto; font-size:22px; line-height:normal; text-align:center}
#content-page .headline span {display:block; margin:0 0 .3em 0; font-size:48px; font-weight:700}
#content-page .headline-midpage {margin:60px auto}
#content-page .images {display:flex; justify-content:center; gap:25px; margin:0 auto 25px auto; width:100%; max-width:1400px}
#content-page .images:last-of-type {margin:0 auto}
#content-page .images div {width:100%}
#content-page .images div img {display:block; width:100%}
#content-page .images-single {margin:0 auto 25px auto}
#content-page .images-single img {display:block; margin:0 auto; width:auto; max-width:1400px; height:auto; max-height:1300px}
#content-page .web {display:inline-block; position:relative}
#content-page .web .desktop {position:absolute; top:10%; right:24.5%; bottom:13.8%; left:13.1%; overflow:scroll}
#content-page .web .mobile {position:absolute; top:37%; right:5.2%; bottom:11.88%; left:80%; overflow:scroll}
#content-page .web .desktop img, #content-page .web .mobile img {width:100%; max-height:none}

#footer {clear:both; width:100%; margin:5px 0 25px 0; font-size:14px; color:#707070; text-align:center}


/* HOVER EFFECTS */
@media (hover: hover) { 
#content-homepage div:hover a {opacity:1; cursor:pointer; transition:.3s}
#content-homepage div:hover img.thumb {opacity:0; transition:.3s}
}


/* 1300px HEIGHT BREAKPOINT */
@media only screen and (max-height:1380px) {
#content-page .images-single img {max-height:calc(100vh - 80px)}
}


/* 1400px BREAKPOINT */
@media only screen and (max-width:1480px) {
#content-page .images-single img {max-width:100%}
}


/* 1200px BREAKPOINT */
@media only screen and (max-width:1200px) {
#header .description {font-size:16px}

#content-homepage div {width:calc( (100% - 60px) / 4)}
#content-homepage .name {font-size:1.8vw}
#content-homepage .mediatype {font-size:1.38vw}

#content-page .headline {font-size:20px}
#content-page .headline span {font-size:40px}
}


/* 700px BREAKPOINT */
@media only screen and (max-width:700px) {
#header .logo {width:190px; height:76px}
#header .description {font-size:14px}
#header .description br {display:inline}

#content-homepage {margin:10px; gap:10px}
#content-homepage div {width:calc( (100% - 20px) / 3)}
#content-homepage .name {font-size:2.5vw}
#content-homepage .mediatype {font-size:1.92vw}

#content-page {margin:20px}
#content-page .headline {margin:0 auto 20px auto; font-size:16px; text-align:left}
#content-page .headline span {font-size:30px}
#content-page .headline-midpage {margin:20px auto}
#content-page .images {gap:15px; margin:0 auto 15px auto}
#content-page .images-single {margin:0 auto 15px auto}
}