body {background: #000; margin: 0; padding: 0 2% 66px;}
a, p, li, h1, h2, h3 {color: #fff; font-family: 'Work Sans', sans-serif; text-decoration: none;}
a:hover, h1 a {color: #fff;}
h1, h2, h3, p {margin: 0; }
h1 {font-size: 23px; display: inline-block; }
h2 {font-size: 30px; margin: 30px 0 15px;}
h3 {font-size: 22px; font-weight: normal; margin-bottom: 5px;}
p {font-size: 18px; line-height: 30px; margin-bottom: 20px; color: #cdcdcd;}
ul {list-style: none;}

#nav {padding-top: 20px; margin: 0 0 30px 0;}
#nav ul {display: inline-block;}
#nav ul li {display: inline-block; font-size:18px; margin-right: 25px;}
#nav ul li a.active {padding-bottom: 8px; color:#fff; border-bottom: 2px solid #1774FF; font-weight:600;}
#nav ul li:last-child {margin-right:0;}

#work {display: flex; flex-wrap: wrap; justify-content: space-between;}
.thumbnail {width: calc(33.333% - 20px); text-align: center; margin-bottom: 35px;}
.thumbnail a {color: #cdcdcd; transition: color 250ms; font-size: 21px;}
.thumbnail a:hover {color:#fff;}
.thumbnail img {width: 100%; border: 1px solid #000; margin-bottom: 5px; border-radius: 4px; transition: border 250ms, transform 250ms;}
.thumbnail img:hover {border-color: #303030; transform: scale(1.02);}

#about {display: flex; align-items: flex-start;}
#about .col1 {flex: 0 1 auto; max-width: 400px; margin-right: 40px;} 
#about .col1 img {width: 100%; height: auto; border-radius: 4px;}
#about .col2 {flex: 1 1 auto; max-width: 800px;}
#about ul {font-size: 18px; padding: 0; list-style: none; display: flex; flex-direction: column;}
#about ul li {margin: 0 0 19px; display: flex; align-items: center;}
#about ul li img {margin-right: 8px;}
#about ul li a, #about ul li a:hover {color: #cdcdcd; display: flex; align-items: center;}
#about ul li a:hover {color: #fff;}
#about .col2 ul span {color: #1774FF;}

#content {text-align:center;  width:90%; margin: 0 auto;}
#content h2 {margin-bottom:30px;}
#content .halfwidth { width:60%; margin: 0 auto;}
#content p {color: #999;}
#content img {width:100%; }
#content video {width:100%;}
#content #emailgifs {margin-right: -1%;margin-bottom:25px;}
#content #emailgifs img {display:inline-block; width:31%;padding: 0 1% 1% 0;}

#footer {text-align: center;margin: 50px 0 100px 0;}
#footer a {padding: 15px 25px; border: 1px solid #1774FF;}
#footer a:hover {background-color:#1774FF;}

.vidcontainer {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;margin-bottom:10px;}
.video {width: 100%; height:100%; position: absolute; top: 0; left: 0;}

@media (min-width: 1854px) {#content {width:50%;}}
@media (max-width: 1253px) {.thumbnail {width: calc(50% - 20px);}}
@media (max-width: 992px) {body {padding:0 2%;}#about .col2 {width:90%;}}
@media (max-width: 743px) {.thumbnail {width: 100%;} body {padding:0 8%;}}
@media (max-width: 422px) {
	body, #content, .halfwidth, #emailgifs img, #nav, #about, #work, a.back, #nav ul, #work h2, #about .col1, #about .col2, #about .col1 img {padding: 0; margin: 0 auto; text-align: center; width: 95%;}
	#nav {margin-top: 30px; text-align: center; margin-bottom: 35px;}
	#nav ul {padding: 0; width: 100%; margin-top: 25px;}
	#about {display: flex; flex-direction: column; align-items: flex-start; padding: 0; margin: 0 auto; width: 85%;}
	#about .col1, #about .col2 {width: 100%; margin: 0;}
	#about .col1 {position: relative; width: 100%; padding-top: 90%; overflow: hidden; border-radius: 4px;}
	#about .col1 img {position: absolute; top: -8%; left: 0; width: 100%; height: auto; object-fit: cover; border-radius: 4px;}
	#about .col2 {padding: 15px 0 0 0;}
	#about .col2 p, #about .col2 ul {text-align: left;}
	
	body {margin-bottom: 90px;}
}