/* start slider */
.slide{background: url("../image/8.jpg") no-repeat center center fixed;height: 662px;-webkit-bacground-size :cover;}
.slide .slideopacity .info .hello a i {color: #ddd;margin-top: 90px;font-size: 40px;}
/* end slider */

/* start portfolio */
.portfolio{background: url("../image/12flip.jpg") no-repeat center center fixed;height:auto;background-size: cover;}
.portfolio .portopacity{text-align: center}
.portfolio .portopacity  i{color: #c64955;padding-top: 50px;font-size: 90px}
.portfolio .content{margin-top: 80px}
.portfolio .content .mockup{margin-bottom: 50px}
.portfolio .content .mockup img{ background:none;border: none;border-radius: 10%;padding-top: 10px;}
.portfolio .imac{
    position: relative;
    background-image:url('../image/imac.png');
    width: 550px;
    height: 400px;
    margin: 10px;
}
.portfolio .pre{
    position: absolute;
    overflow: hidden;
    width: 503px;
    height: 253px;
    top: 22px;
    left: 22px
}
.imac .pre img{height:2204px;width: 503px;margin-top: 0px;transition:all 5s ease-in-out }
.pre:hover img ,.pre:focus img {margin-top:-1930px}
.imac .pre img:nth-of-type(2){width: 510px}
.footer p{color: #eee;font-size: 10px;padding: 5px 0 3px 0;}
.footer h2{color: #c64955;padding-bottom: 30px;font-size:10px;font-family: monospace}

/* end portfolio */

/* start media query*/
@media(max-width:1199px){ .portfolio .imac{margin-left: 140px} }
@media(max-width:750px){ .portfolio .imac{margin-left: 100px} }
@media(max-width:700px){
  .portfolio .imac{
        position: relative;
        background-image:url('../image/imacsx.png');
        width: 250px;
        height: 400px;
        margin: 30px;}
  .portfolio .pre{
    position: absolute;
    overflow: hidden;
    width: 231px;
    height: 253px;
    top: 12px;
    left: 9px}
  .imac .pre img{height:2204px;width: 231px;}    
}
@media (min-width:620px) and (max-width:701px){.portfolio .imac:last-of-type{margin-left: 190px}}
@media(max-width:619px){.portfolio .imac{margin-left: 180px}}
@media(max-width:550px){.portfolio .imac{margin-left: 130px}}
@media(max-width:450px){.portfolio .imac{margin-left: 90px}}
@media(max-width:390px){.portfolio .imac{margin-left: 60px}}
@media(max-width:320px){.portfolio .imac{margin: 20px}}
@media(max-width:270px){.portfolio .imac{margin: 10px}}
/*end media query */
.heading2{color: #c64955;margin-bottom: 15px;font-weight: 700;}
.link{position: relative;margin-bottom: 5px;}
.link .overlay{
  width: 93%;
  height: 100%;
  position: absolute;
}
.link .overlay a{
  text-decoration: none;
  border: none;
  outline: none;
  appearance: none;
  position: absolute;
  top: 20%;
  left: 45%;
  opacity: 0;
  transition: .5s;
}
.link .overlay a i{
  color:#c64955;
  font-size: 70px;
}
.link .overlay:hover a{opacity: 1;}