body {
  background-color: rgb(11, 11, 11);
  font-size: .6rem;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
b{
  font-size: 11px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
}
.homecontainer{
  background-image: url(images/random.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #000000;
  height: 300px;
}
.title {
  font-size: 12px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  padding-top: 8px;
  padding-left: 10px;
}
.tag {
  font-size: 10px;
  color: rgb(85, 85, 85);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  padding-left: 10px;
  padding-bottom: 8px;
}
a {
  font-size: 11px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-decoration: none;
}
a:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}
.thumbnail:hover{
  color: black;
}
.logo {
  width: 45px;
}
.logohome {
  width:80px;
}
.work-col a{
  text-decoration: none;
}
.work-col a:hover{
  text-decoration: none;
}
h1 {
  font-size: 25px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin: 0;
}
h2 {
  font-size: 12px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  margin: 0;
}
h3 {
  display: inline-block;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 800;
  margin: 0;
  padding-bottom: 5px;
}
p {
  font-size: 13px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0;
  padding-top:5px;
}
.nav-container {
  padding-top: 1rem;
  margin: 0;
}
.info-container {
padding-top: 3rem;
margin: 0;
}
.nav-container a {
  font-size: 13px;
}
.nav-row {
  padding: 0px;
  margin: 0px;
}
.nav-col {
  padding:0;
}
.infocopy-col {
  line-height: .9rem;
  padding-left: 5rem;
  padding-right: 0rem;
}
.infocopy-col h1 {
  font-size: 1.3rem;
}
.copy-col {
  line-height: .9rem;
  padding-top: 1rem;
}
.copy-container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.infocredit-container {
padding-top: 2rem;
padding-bottom: 2rem;
}
.projectcopy-container {
  padding: 0;
}
.copy-col a {
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 700; 
}
.copy-col h1 {
  font-size: 1rem;
}
.copy-col h2 {
  font-size: .5rem;
  font-weight: 500;
  padding-bottom: .2rem;
  
}
.copy-col h3{
  font-size: 14px;
  color: rgb(255, 255, 255);
  font-family: 'Roboto', sans-serif;
  font-weight: 700; 
}
.copy-row {
  margin: 0;
  padding: 0;
}
.copy-row a{
  color: rgb(107, 107, 107);
}
.projectcopy-col {
  padding-top:3rem;
}
.title-container{
padding: 20px;
}
.work-row {
  margin: 0px;
}
.work-col {
  padding: 1px;
}
.work-col h1{
  font-size: 12px;
}
.work-col h2{
  font-size: 10px;
  color: rgb(107, 107, 107);
}
.work-col:hover {
  background-color: rgb(255, 255, 255);
}
.work-col:hover h1 {
  color:black;
}
img {
  width: 100%;
}
.link-col {
  display: inline;
  padding-right: .4rem;
}
.linkcolor-col {
  display: inline;
  padding-right: .4rem;
}
.linkcolor-col a {
  color: white;
  text-decoration: underline;
}
.project-row {
  padding: 0;
  margin: 0px;
}
.project-col {
  padding: 1px;
}
.textcopy-col {
  padding-top:.5rem;
}
.contactcredit-col {
  padding: 0;
}
.credit-row {
  margin: 0px;
}
.contactcredit-col h1 {
  color: rgb(255, 255, 255);
  font-size: 12px;
  padding-top:10px;
  padding-bottom:5px; 
}
.credit-col {  
  padding: 1px;
  line-height: 1rem;  
}
.credit-col h1 {
  color: rgb(255, 255, 255);
  font-size: 12px;
  padding-top:10px;
  padding-bottom:5px;
  
}
.credit-col h2 {
  margin: 0;
  color: rgb(107, 107, 107);
  font-size: 11px;
  padding: 0;
}
.credit-col a {
  margin: 0;
  padding-top: 5px;
  color: rgb(255, 255, 255);
  font-size: .6rem;
  font-weight: 800;
 
}
hr {
  border: 0;
  clear:both;
  display:block;
  width: 100%;              
  background-color:rgb(255, 255, 255);
  height: 1px;
  margin: 0px;
}
.image-gallery {
  padding: 0;
}
.image-gallery img {
  width: 33.3333333%;
  float: left;
  display: block;
  padding: 2px;
}
.image-gallery figure {
  display: block;
  margin: 0px;
}
.image-gallery figcaption {
  display: none;
}
.image-gallery {
  padding: 0;
}
.image-gallery-four img {
  width: 25%;
  float: left;
  display: block;
  padding: 2px;
}
.image-gallery-four figure {
  display: block;
  margin: 0px;
}
.image-gallery-four figcaption {
  display: none;
}
.image-highlight {
    padding: 0;
   
    padding-bottom: 5px;
}
.photo-highlight {
  padding: 0;
}
.image-single {
  padding: 0px;
  padding-bottom: 2px;
}
.image-single figure {
  margin: 0;
}
.image-half {
  padding: 0;
  padding: 0px;
}
.image-half img {
  width: 50%;
  float: left;
  display: block;
  padding: 2px;
}
.image-half figure {
  display: block;
  margin: 0px;
}
::-moz-selection { /* Code for Firefox */
  color: rgb(34, 34, 34);
  background: rgb(29, 245, 137);
}
::selection {
  color: rgb(34, 34, 34);
  background: rgb(29, 245, 137);
}
figure {
  margin: 0;
}
.image-highlight {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
.project-container img {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
.work-container img {
  animation: fadeIn 3s;
  -webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

.image-gallery figure a img {
  width: 100%!important;
  float: none;
}
.image-hightlight figure a img {
width: 100%!important;
float: none;
}
.image-single figure a img {
width: 100%!important;
float: none;
}
.image-gallery-four figure a img {
width: 100%!important;
float: none;
}
.textcopy-col p {
padding: 0;
}




/* Mobile (320px and up) */
@media (min-width:320px) {  
  p {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  h1 {font-size: 1.3rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .nav-col a {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .copy-col a {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .nav-col {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .logo {width:1.5rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .projectcopy-col h1 {font-size:.9rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .projectcopy-col h2 {font-size:.5rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .credit-col h1 {font-size:.7rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .credit-col h2 {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .credit-col b {font-size:.6rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .contactcredit-col h1 {font-size:.7rem;} /*1rem = 16px*/
}
@media (min-width:320px) {  
  .contactcredit-col {padding:1rem;} /*1rem = 16px*/
}




/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size: 1.5rem;}
}
@media (min-width: 768px) {  
  .nav-container {padding: 3rem;}
}
@media (min-width:768px) {  
  .info-container {padding: 3rem;}
}
@media (min-width:768px) {  
  .credit-container {padding: 1rem;}
}
@media (min-width:768px) {  
  .infocredit-container {padding: 3rem;}
}
@media (min-width: 768px) {  
  .projectcopy-col {padding-top: 0;}
}
@media (min-width: 768px) {  
  .projectcopy-col {padding-left: 3rem;}
}
@media (min-width: 768px) {  
  .projectcopy-col {padding-right: 0;}
}
@media (min-width: 768px) {  
  .copy-col {padding: 0;}
}
@media (min-width: 768px) {  
  .copy-col h1 {font-size: 1rem;}
}
@media (min-width: 768px) {  
  .copy-container {padding-top: 4rem;}
}
@media (min-width: 768px) {  
  .copy-container {padding-bottom: 4rem;}
}
@media (min-width: 768px) {  
  .copy-container {padding-left: 0rem;}
}
@media (min-width: 768px) {  
  h3 {font-size:5rem;}
}
@media (min-width: 768px) {  
  .textcopy-col {padding:0;}
}
@media (min-width: 768px) {  
  .contactcredit-col {padding: 0;}
}
@media (min-width:768px) {  
  .logo {width: 2rem} 
} 
@media (min-width: 768px) {  
  .image-gallery figure a img {width: 33.3%!important;}
}
@media (min-width: 768px) {  
  .image-gallery figure a img {float: left;}
}
@media (min-width: 768px) {  
  .image-highlight figure a img {width: 33.3%!important;}
}
@media (min-width: 768px) {  
  .image-highlight figure a img {float: left;}
}
@media (min-width: 768px) {  
  .image-single figure a img {width: 100%!important;}
}
@media (min-width: 768px) {  
  .image-single figure a img {float: left;}
}
@media (min-width: 768px) {  
  .image-gallery-four figure a img {width: 33.3%!important;}
}
@media (min-width: 768px) {  
  .image-gallery-four figure a img {float: left;}
}





@media (min-width: 1024px) {  
  .credit-container {padding-left: 4rem;}
}
@media (min-width: 1024px) {  
  .credit-container {padding-right: 4.5rem;}
}
@media (min-width: 1024px) {  
  .copy-container {padding: 0rem;}
}
@media (min-width: 1024px) {  
  .nav-container {padding: 4rem;}
}
@media (min-width: 1024px) {  
  .copy-col h1 {font-size: 1.2rem;} 
}
@media (min-width: 1024px) {  
  .copy-col h2 {font-size: .7rem;} 
}
@media (min-width:1024px) {  
  .nav-col a {font-size:.7rem;} 
}
@media (min-width:1024px) {  
  .projectcopy-container {padding: 5rem;} 
}
@media (min-width:1024px) {  
  .logo {width: 2rem;} 
}
@media (min-width:1024px) {  
  p {font-size:.7rem;} 
}
@media (min-width:1024px) {  
  .copy-col {line-height:1.3rem;}
}
@media (min-width:1024px) {  
  .copy-col a {font-size:.7rem;} 
}
@media (min-width:1024px) {  
  .work-container {padding:4rem;} 
}
@media (min-width: 1024px) {  
  .projectcopy-col {padding-left:0rem;}
}
@media (min-width: 1024px) {  
  .copy-container {padding-left: 0;}
}
@media (min-width: 1024px) {  
  .textcopy-col {padding: 0}
}




@media (min-width: 1440px) {  
  .copy-col h1 {font-size: 1.6rem;}
}
@media (min-width: 1440px) {  
.credit-col h1 {font-size: .9rem;}
}
@media (min-width: 1440px) {  
.credit-col  {font-size: .8rem;}
}
@media (min-width: 1440px) {  
.credit-col  {line-height: 1.2rem;}
}
@media (min-width: 1440px) {  
.credit-col b {font-size: .8rem;}
}
@media (min-width: 1440px) {  
.credit-col a {font-size: .8rem;}
}
@media (min-width: 1440px) {  
  .copy-col h2 {font-size: .7rem;} 
}
@media (min-width:1440px) {  
  .nav-col a {font-size: .9rem;} 
}
@media (min-width:1440px) {  
  .nav-container {padding: 5rem;} 
}
@media (min-width:1440px) {  
  .info-container {padding: 5rem;} 
}
@media (min-width:1440px) {  
  .infocredit-container {padding: 5rem;} 
}
@media (min-width:1440px) {  
  .logo {width: 2.5rem;} 
}
@media (min-width:1440px) {  
  p {font-size:.8rem;} 
}
@media (min-width:1440px) {  
  p {line-height: 1.1rem;} 
}
@media (min-width:1440px) {  
  .copy-col {line-height:1.1rem;}
}
@media (min-width:1440px) {  
  .copy-col a {font-size:.7rem;} 
}
@media (min-width:1440px) {  
  .work-container {padding:4rem;} 
}
@media (min-width:1440px) {  
  .link-col a {font-size:.8rem;} 
}
@media (min-width:1440px) {  
  .linkcolor-col a {font-size:.8rem;} 
}
@media (min-width:1440px) {  
  .projectcopy-col h1 {font-size: 1.4rem;} 
}
@media (min-width:1440px) {  
  .projectcopy-col h2 {font-size: .7rem;} 
}
@media (min-width:1440px) {  
  .thumbnail h1 {font-size: .8rem;} 
}
@media (min-width:1440px) {  
  .thumbnail h2 {font-size: .6rem;} 
}






@media (min-width: 2560px) {  
  .copy-col h1 {font-size: 2rem;}
}
@media (min-width: 2560px) {  
  .copy-col h2 {font-size: 1rem;} 
}
@media (min-width: 2560px) {  
.copy-col {line-height: 2rem;} 
}
@media (min-width:2560px) {  
  .nav-col a {font-size: 1.5rem;} 
}
@media (min-width:2560px) {  
  .logo {width: 4rem;} 
}
@media (min-width:2560px) {  
  p {font-size: 1.2rem;} 
}
@media (min-width:2560px) {  
  p {line-height: 1.5rem;} 
}
@media (min-width:2560px) {  
  .copy-col a {font-size:1rem;} 
}
@media (min-width:2560px) {  
  .work-container {padding:4rem;} 
}
@media (min-width:2560px) {  
  .link-col a {font-size:1.3rem;} 
}
@media (min-width:2560px) {  
  .linkcolor-col a {font-size:1.3rem;} 
}
@media (min-width:2560px) {  
  .projectcopy-col h1 {font-size: 2rem;} 
}
@media (min-width:2560px) {  
  .projectcopy-col h2 {font-size: .8rem;} 
}
@media (min-width:2560px) {  
  .thumbnail h1 {font-size: 1.2rem;} 
}
@media (min-width:2560px) {  
  .thumbnail h2 {font-size: 1rem;} 
}
@media (min-width: 2560px) {  
  .credit-col h1 {font-size: 1.2rem;}
}
@media (min-width: 2560px) {  
  .credit-col  {line-height: 1.8rem;}
}
@media (min-width: 2560px) {  
  .credit-col  {font-size: 1.2rem;}
}
@media (min-width: 2560px) {  
  .credit-col b {font-size: 1.2rem;}
}
@media (min-width: 2560px) {  
  .credit-col a {font-size: 1.2rem;}
}
@media (min-width: 2560px) {  
  .contactcredit-col {font-size: 1rem;}
}
@media (min-width: 2560px) {  
  .contactcredit-col h1 {font-size: 1.2rem;}
}
@media (min-width: 2560px) {  
  .contactcredit-col a {font-size: 1rem;}
}