section.portfolio{position: relative; margin: 0 0 60px}
#portfolio-content{position: absolute; top: -100px; width: 1px; height: 1px}
section.portfolio .items {list-style: none; overflow: hidden}
section.portfolio .items li {margin-top: 30px; border: 1px solid #ee1e3b; border-radius: 6px; overflow: hidden}
section.portfolio .img{display: block; position: relative}
section.portfolio .img img{display: block}
section.portfolio .img:before{
    content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: 50% 50%;
    transition-duration: 0.3s; opacity: 0.6
}
section.portfolio .img:hover:before{background-color: rgba(0,0,0,0.6); background-image: url('img/hover-magnify.png')}
section.portfolio .desc{text-align: center; padding: 26px 10px 23px; box-sizing: border-box}
section.portfolio h3{color: #323232; font-size: 26px; font-weight: normal; margin: 0}
section.portfolio h3 a{color: #323232}
section.portfolio .desc p{font-size: 16px; margin: 0}
section.portfolio .type{font-weight: normal}
section.portfolio .company{font-weight: normal; color: #ee1e3b; margin: 0 0 2px 0; line-height: 1.1}

section.portfolio-item{position: relative; margin: 50px 0 100px}
section.portfolio-item .h2{font-size: 27px; font-weight: normal; margin: 0}
section.portfolio-item .info{}
section.portfolio-item .type{font-weight: normal; font-size: 22px; display: inline-block}
section.portfolio-item .company{font-weight: normal; font-size: 22px; display: inline-block; color: #ee1e3b; margin: 0 0 0 10px; line-height: 1.1}

section.portfolio-item p{margin: 0; font-weight: 300; font-size: 18px}
section.portfolio-item p.text{}
section.portfolio-item p ~ p{margin-top: 1px}
section.portfolio-item a{text-decoration: none}
section.portfolio-item .links img{max-height: 87px; border-radius: 6px; display: inline-block; margin-left: 20px; border: 1px solid #cccccc}


@media screen and (max-width: 760px) {
    section.portfolio-item{padding-bottom: 50px}
    section.portfolio-item .company{margin: 15px 0}
    section.portfolio-item .links{margin: 15px 0}
    section.portfolio-item .links span{text-decoration: underline}
}
@media screen and (max-width: 340px) {
}
@media screen and (min-width: 760px) {
    section.portfolio-item .zz{display: table; width: 100%; max-width: 940px; margin: 0 auto; padding: 20px 0 15px; font-weight: normal; font-size: 20px}
    section.portfolio-item .zz > *{display: table-cell; vertical-align: bottom}
    section.portfolio-item .links{text-align: right}

    .safari-wrapper{padding: 0 30px}
    .safari{
        border-radius: 15px; margin: 0 auto;
        box-shadow: 0px 0px 30px rgba(000,000,000,0.2);
        -moz-box-shadow: 0px 15px 15px rgba(000,000,000,0.18);
        -webkit-box-shadow: 0px 15px 15px rgba(000,000,000,0.18);
        -o-box-shadow: 0px 15px 15px rgba(000,000,000,0.18);
        -ms-box-shadow: 0px 15px 15px rgba(000,000,000,0.18);
    }
    .safari .top{height: 55px; position: relative; padding: 0 236px 0 165px}
    .safari .top:before{content: ''; display: block; position: absolute; left: 0; top: 0; height: 100%; background: url('img/safari/left.gif') no-repeat; width: 165px}
    .safari .top img{width: 100%; height: 55px}
    .safari .top .overlay{position: absolute; width: 100%; height: 55px; top: 0; left: 165px; z-index: 1; font-size: 13px; padding: 28px 0 0 0}
    .safari .top:after{content: ''; display: block; position: absolute; right: 0; top: 0; height: 100%; background: url('img/safari/right.gif') no-repeat; width: 236px}
    .safari .bottom img{width: 100%; display: block}

    .safari .image{display: block; margin-top: -2px}

}