body {margin:0;font-family:Arial, sans-serif;font-family: "Cutive Mono", monospace;background-color:#f4f4f4;background-image:url("../images/bg-sat.gif")}

body.night {background-color:#333;color:#f4f4f4;background-image:url("../images/bg-sat_b.gif")}
body.night header {background: #ededed;
background: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.2) 85%, rgba(0, 0, 0, 0.0) 100%);}
body.night header .brand  {background-color:#fff;color:#000;}
body.night main {background-color:transparent;}

header {background: #ededed;
background: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 85%, rgba(0, 0, 0, 0.2) 85%, rgba(0, 0, 0, 0.0) 100%);min-height:250px;display:flex;align-items:stretch}

header .brand {background-color:#000;color:#fff;padding:18px 20px; font-size:32px;display:inline-block;vertical-align:top;}
header .person {height:100px;position:absolute;bottom:0;right:0}
header .container {position:relative;}

main,
footer,
.container {width:90%; max-width:1200px;margin:0 auto}

.ttl {font-size:28px;position:relative;padding-left:12px;text-transform:uppercase;}
.ttl:before {content:"";min-height:10px;width:5px;background-color:#000;display:inline-block;margin:3px 8px 0 0;vertical-align:top;position:absolute;top:0;bottom:0;left:0}

main {background-color:transparent;display:flex;justify-content:space-between}
article {width:70%;}
aside {width:20%;}

figure {background-color:#fff;padding:10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);filter: grayscale(100%);display:inline-block;}
figure .thumb {filter: invert(100%);display:block;}
figure:hover {box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.15);}

aside p {}
aside p.ttl {text-transform:uppercase;margin:20px 0 0 0;padding:0 0 0 10px;font-size:14px;font-weight:600;}
aside p.ttl:before {content:"";height:10px;width:5px;background-color:#000;display:inline-block;margin:3px 8px 0 0;vertical-align:top;}
aside ul {list-style:none;margin:10px 0 20px 0;padding:0}
aside ul li {padding:0 0 10px 0}
aside ul li span {display:block;padding:4px 0}

footer a,
main a {color:#666;text-decoration:none;border-bottom:1px dotted #666}
footer a:hover,
main a:hover {color:#000}

footer {display:flex;justify-content:flex-end;margin:50px auto;border-top:1px dotted #333;text-align:right}

section {padding:30px 0 60px 0;border-bottom:1px dotted #666}


hr {border:0;border-bottom:2px dotted #333;margin:30px 0;display:block;}


.btn {background-color:#333;border-radius:20px;padding:10px 18px;text-transform:uppercase;display:inline-block;color:#ccc}
.btn:hover {background-color:#000;color:#fff}


@media only screen and (min-width: 100px) and (max-width: 576px) {	

main {background-color:#f4f4f4;display:flex;justify-content:space-between;flex-direction:column}
article {width:100%;}
aside {width:100%;}

figure {margin:0;width:46%;padding:6px;}
figure img {width:100%;}

}