.mainclr {
   clear: both;
   height: 0;
   line-height: 0;
   font-size: 0;
   margin: 0;
   padding: 0;
   display: block;
 }
 
 html, body {
   background: #fff;
   font-family: 'Roboto Condensed', sans-serif;
   padding: 0;
   margin: 0;
   height: 100%;
 }
 p.work span {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  line-height: 25px;
  color: #e7e7e7;
  line-height: 35px;
  padding-right: 20px;
  font-weight: 300;
  transform: translate(20px);
  position: absolute;
  left: -200px;
  background: #404040dc;
  width: 140px;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  top: 0;
  transition: all 0.2s ease-in-out;
  z-index: 900;
 }
 p.work:hover span {
   left: 15px;
 }
 #logo {
   background: url('../2018images/logo.png') no-repeat center center;
   width: 100%;
   height: 80px;
   background-size: contain;
   margin: 70px 0
 }
 #logo span {
   display :block;
   width: 100%;
   height: 80px;
 }
 #logo a{
   text-indent: -5000px;
 }
 
  .webpreview {
    box-sizing: border-box;
    margin-right: 10px;
    width:  calc((100% - 30px)/4);
    height: 16vw; 
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    border-radius: 10px;
    border: 5px solid #efefef;
    margin-top: 10px;
    opacity: 0.9;
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    background-color: #f8f8f8;
    padding: 0 20px;
    overflow: hidden;
    
  }
  .webpreview:nth-of-type(4n + 4) {
    margin-right: 0px;
  }
  .webpreview:hover {
    -webkit-filter:  none;
    filter: none; 
    opacity: 1;
  }
   .webpreview:after,  .webpreview:before  {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image: url(https://cdnjs.cloudflare.com/ajax/libs/vegas/2.3.1/overlays/03.png);
}
.contact:before ,  .contact:after , .webpreview:hover:after, .webpreview:hover:before {
  display: none;
}
.work {
  color: #fff;
  position: absolute;
  top: 0px;
  left: -70px;
  z-index:  1000;
  font-size: 20px;
  padding: 5px;
  min-width: 35px;
  height:35px;
  font-weight: normal;
  text-align: center;
  line-height: 35px;
  transition: all 0.5s ease-in-out;
  opacity: 1;
  margin: 0;
  padding: 0;
  text-align: center;
}
.work:nth-of-type(2){
  top: 35px;
}
.work:nth-of-type(3){
  top: 70px;
}
.work:nth-of-type(4){
  top: 105px;
}
.work:nth-of-type(5){
  top: 140px;
}

.webpreview:hover .work{
  left: 0;
  z-index: 1000;
  opacity: 1
}
.fa-code {
  font-size: 15px;
}
.work i {
  position: absolute;
  z-index: 1000;
  display: block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #404040dc;
}


.webName {
  position: absolute;
  bottom: 0;
  background: #404040dc;
  color: #e7e7e7;
  width: 100%;
  padding: 20px;
  left: 0;
  bottom: -100px;
  transition: all 1s ease-in-out;
}
.webName h2 {
  font-size: 15px;
  margin: 0;
  font-weight: 300;
}
.webpreview:hover .webName{
  bottom: 0;
}
.webName a{
  color: #e7e7e7
}
.webName a:hover{
  text-decoration: none;
}
a{
   color: #404040;
}

footer{
clear: both;
  min-height: 200px;
background: #c0c0c0;
 border-top: 50px solid #fff;
 text-align: center;
 
 margin: 0;
 padding: 60px 0 0 0;
 color: #e7e7e7;
}
footer a{
  color: #e7e7e7;
}
 
#webz {
  padding: 10px 1%;
}

#contact {
	width: 200px;
	height: 110px;
  background: #bb9113;
  background: #939393;
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%)
} 
#contact:before {
	content: "";
	position: absolute;
	top: -50px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
  border-bottom: 50px solid #bb9113;
  border-bottom: 50px solid #939393;
}
#contact:after {
	content: "";
	position: absolute;
	bottom: -50px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
  border-top: 50px solid #bb9113;
  border-top: 50px solid #939393;
}
					
 #contact p{
  padding-top: 15px;
 }




@media all and (max-width: 1200px) {
  .webpreview {
    width:  calc((100% - 20px)/3);
    height: 20vw; 
  }
  .webpreview:nth-of-type(2n + 1) {
    clear: none;
    margin-right: 0px;
  }  
  .webpreview:nth-of-type(3n + 1) {
    clear: none;
    margin-right: 10px;
  }    
}

@media all and (max-width: 900px) {
  .webpreview {
    width:  calc((100% - 10px)/2);
    height: 30vw; 
  }
  .webpreview:nth-of-type(1n + 1) {
    clear: none;
    margin-right:  0px!important;
  }    
  .webpreview:nth-of-type(2n + 1) {
    clear: none;
    margin-right: 10px!important;
  }   
  #logo {
    max-width: 90%;
    margin-left: 5%;
  } 
}

@media all and (max-width: 450px) {
  .webpreview {
    width:  100%;
    height: 60vw; 
    clear: left!important;
    margin: 0!important;
  }
   
}