.projects {
  box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
  /*0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);*/
  /*margin: 20px;*/
  margin-top: 20px;
  max-width: 100%;
  padding:0px;
  border-radius: 5px;
  -moz-border-radius: 5px; 
  -webkit-border-radius: 5px; 
  overflow:hidden;
}
.projects header {
  position: relative;
}
.projects header img {
  display: block;
  width: 100%;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  align:center;
}
.projects header:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: -webkit-linear-gradient(black 0%, rgba(0, 0, 0, 0.917) 5.3%, rgba(0, 0, 0, 0.834) 10.6%, rgba(0, 0, 0, 0.753) 15.9%, rgba(0, 0, 0, 0.672) 21.3%, rgba(0, 0, 0, 0.591) 26.8%, rgba(0, 0, 0, 0.511) 32.5%, rgba(0, 0, 0, 0.433) 38.4%, rgba(0, 0, 0, 0.357) 44.5%, rgba(0, 0, 0, 0.283) 50.9%, rgba(0, 0, 0, 0.213) 57.7%, rgba(0, 0, 0, 0.147) 65%, rgba(0, 0, 0, 0.089) 72.9%, rgba(0, 0, 0, 0.042) 81.4%, rgba(0, 0, 0, 0.011) 90.6%, transparent 100%);
  background: linear-gradient(black 0%, rgba(0, 0, 0, 0.917) 5.3%, rgba(0, 0, 0, 0.834) 10.6%, rgba(0, 0, 0, 0.753) 15.9%, rgba(0, 0, 0, 0.672) 21.3%, rgba(0, 0, 0, 0.591) 26.8%, rgba(0, 0, 0, 0.511) 32.5%, rgba(0, 0, 0, 0.433) 38.4%, rgba(0, 0, 0, 0.357) 44.5%, rgba(0, 0, 0, 0.283) 50.9%, rgba(0, 0, 0, 0.213) 57.7%, rgba(0, 0, 0, 0.147) 65%, rgba(0, 0, 0, 0.089) 72.9%, rgba(0, 0, 0, 0.042) 81.4%, rgba(0, 0, 0, 0.011) 90.6%, transparent 100%);
  */
  }
.projects header .text-wrap {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
}
.projects header .text-wrap h2 {
  font-size: 3.5rem;
  margin-top: 20px;
}
.projects header .text-wrap h3 {
  margin-top: 5px;
  font-weight: 100;
}
.projects main .info-wrap{
  color: #444;/*white;*/
  padding: 20px;
}

    @media (min-width: 300px) { 
        
        .projects main .info-wrap h2 {
            font-family: 'Roboto', sans-serif;
          margin-top:0px;
          font-size: 24px;
          color: #4a4a4a;
          font-weight:500;
        }
        .projects main .info-wrap h3 {
            font-family: 'Roboto', sans-serif;
          margin-top:20px;
          font-size: 16px;
          color: #888;
          font-weight:400;
        }
        .projects main .info-wrap h4 {
            font-family: 'Roboto', sans-serif;
          margin-top:20px; 
          font-size: 16px;
          color: #5a5a5a;
          font-weight:400;
        }
        .projects main .info-wrap h4 span{
            font-family: 'Roboto', sans-serif;
          margin-top:20px; 
          font-size: 16px;
          color: rgba(0,26,123,.7);
          font-weight:400;
        }
        .projects main .info-wrap p {
            font-family: 'Roboto', sans-serif;
          margin-top:-5px;
          font-size: 16px;
          color: rgba(0,26,123,.7);
          font-weight:400;
        }
        
	}
 
	/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint*/ 
	@media (min-width: 768px) {  
	
	.projects main .info-wrap h2 {
	    font-family: 'Roboto', sans-serif;
          margin-top:0px;
          font-size: 22px;
          color: #4a4a4a;
          font-weight:500;
        }
        .projects main .info-wrap h3 {
            font-family: 'Roboto', sans-serif;
          margin-top:20px;
          font-size: 14px;
          color: #888;
          font-weight:400;
        }
        .projects main .info-wrap h4 {
            font-family: 'Roboto', sans-serif;
          margin-top:20px; 
          font-size: 14px;
          color: #5a5a5a;
          font-weight:400;
        }
        .projects main .info-wrap h4 span{
            font-family: 'Roboto', sans-serif;
          margin-top:20px; 
          font-size: 14px;
          color: rgba(0,26,123,.7);
          font-weight:400;
        }
        .projects main .info-wrap p {
            font-family: 'Roboto', sans-serif;
          margin-top:-5px;
          font-size: 14px;
          color: rgba(0,26,123,.7);
          font-weight:400;
        }
	
	}
 
	/* Large devices (desktops, 992px and up)
	@media (min-width: 992px) { 
	    
	}*/
 
	/* Extra large devices (large desktops, 1200px and up)
	@media (min-width: 1300px) {  
	p.section_title {font-size:26px;}   
	} */