@media screen and (min-width:710px) {
    .wrap {
        width:650px;
        max-width:650px;
        min-width:650px
    }
    .pf-item {
        width:320px;
        height:223px
    }
    .pf-grid-sizer{width: 320px}
}
@media screen and (min-width:1024px) {
    .wrap {
        width:820px;
        max-width:820px;
        min-width:820px
    }
    .pf-item {
        width:266px;
        height:209px
    }
    .pf-grid-sizer{width: 266px}
}
@media screen and (min-width:1280px) {
    .wrap {
        width:940px;
        max-width:940px;
        min-width:940px
    }
    .pf-item {
        width:299px;
        height:209px
    }
    .pf-grid-sizer{width: 299px}
}
@media screen and (min-width:1460px) {
    .wrap {
        width:1410px;
        max-width:1410px;
        min-width:1410px
    }
    .pf-item {
        width:345px;
        height:240px
    }
    .pf-grid-sizer{width: 345px}
}


@media screen and (max-width:1240px) {
    .wrapbig {width: 100%}
    #menu{display: none}
    #mobmenubutton{display: block;}
    #header #logo{left: 90px;}
    #mobmenu{display: block}
    /*#header{position: relative}
    .main #header{position: fixed}
*/
    #about{width: 90%;}
    #footer{width: 90%; margin: auto}
    .prevproject,.nextproject{display: none}
    /*.page.nobanner{margin-top: 0;}*/

    .projectpage-content{width: 90%}
}
@media screen and (max-width:710px) {
    .wrap {
        width:auto;
        margin:0 30px
    }
    .pf-item {
        width:100%;
        height:0;
        box-sizing:border-box;
        padding-top:70%;
        margin-bottom:15px
    }
    .pf-grid-sizer{width: 100%}

    #header #phone{display: none}
    #about{width: 80%}
    #about img{float:none; margin: 50px auto; display: block; width: 200px}
    #abouttext{width: 100%; float: none; text-align: center;}

    #studio h1{margin-bottom: 20px;}

    .tip-item{width: 100%;padding: 0 20px;}

    #biglogo{width: 300px; margin-left: -150px;}
    #header #logo{width: 220px; margin-top: 3px;}
    #header #logo img{width: 100%}

    #footer .copy{float: none; margin: auto; padding: 80px 0 0 0; text-align: center; background-position: top center}
    #footer .socials{float: none; margin: auto; text-align: center; padding: 20px 0; }

    .serviceblock .left,.serviceblock .right{float:none; width: 80%; margin: auto;}
    .serviceblock .left{text-align: center; margin-bottom: 20px;}

    .pf-itemtitle{opacity: .8; }
    .pf-itemtitle .title,.pf-itemtitle .descr{opacity: 1; transform: translate(0,0);}

    .page h1:after {top: auto; bottom: -20px}


    .projectpage-title{font-size: 26px;}

    .projectpage-description {padding-top: 15px;}
    .projectpage-top{height: 580px;}

    #contacts div{width: 90%;}
    #contacts div span{display: block;width: 70px; text-align: left;}

    .page{padding-bottom: 60px;min-height: 0;}
}
@media screen and (max-width:450px) {
    #studio h1{line-height: 40px;}
    #studio h1::after{display: none}
    .tip-title {font-size: 20px; font-weight: bold;}
    #header #logo img {width: 80%; margin-top: 3px;}
    .serviceblock .right .services-text{padding-left: 0;}
    .pf-itemtitle .descr {line-height: 16px;}
    .projectpage-description{padding: 15px 10px 10px;}
}