/******* START:  displays resolutions *******/
@media (min-width: 200px) {
    .container, .page-wrapper{
        width: 100%;
        margin: 0 auto; 
    }
}
@media (min-width: 320px) {
}
@media (min-width: 500px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
    .container, .page-wrapper{
        max-width: 1920px;
    }
}
/******* FINISH: displays resolutions *******/


/******* START:  global styles *******/
body, .side-nav{
    background-color: #000;
    color: #fff;
}
.side-nav{
    border-right: 1px solid #fff; 
}
/******* FINISH: global styles *******/


.row .col {
    padding: 0 0.5rem;
}
.container .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    margin-bottom: 1em;
}

/******* START:  header *******/
.page-wrapper header{
    margin: 0em 1em 0 1em;
}
    .page-wrapper header nav{
        background-color: inherit;
    }
        .page-wrapper header nav .brand-logo{
            font-size: 1.3em;
            margin-top: -0.3em;
            width: 11em;
        }
            .page-wrapper header nav .brand-logo .site-title{
                font-weight: bold;
                letter-spacing: 0.05em;
            }
            .page-wrapper header nav .brand-logo .site-description{
                font-size: 0.5em;
                margin-top: 1.7em;
            }
        .page-wrapper header nav #nav-mobile{
            margin-left: 17em;
        }
            .page-wrapper header nav ul a{
                color: #888;
                text-transform: uppercase;
            }
                .page-wrapper header nav ul li.active a, .page-wrapper header nav ul li:hover a{
                    color: #fff;
                }
                .page-wrapper header nav ul li.active a{
                    font-weight: bold;
                }
/******* FINISH: header *******/



/******* START:  section page content *******/
section.page-content{
    margin: 0em 1em 0 1em;
}
/******* FINISH: section page content *******/



/******* START:  footer *******/
footer{
    height: 3em;
    line-height: 3em;
}
    footer .credits{
        margin-right: 1em;
    }
        footer .credits, footer .credits a{
            color: #999;
            font-size: 0.9em;
        }
            footer .credits a:hover{
                text-decoration: underline;
            }
/******* FINISH: footer *******/



/******* START:  page /index *******/
.portfolio-block__item{
    box-sizing: border-box;
}
    .portfolio-block__item--1x1{
        height: 17em;
    }
    .portfolio-block__item--2x2{
        height: 35em;
    }
    .portfolio-block-item{
        position: relative;
        height: 100%;
        width: 100%;
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
        .portfolio-block-item__hover-box{
            position: absolute;
            height: 100%;
            width: 100%;
            display: block;
            background: #333;
            background: rgba(0, 0, 0, 0.8);
            opacity: 0;
            filter: alpha(opacity=0);
            -moz-transition: 0.4s opacity;
            -webkit-transition: 0.4s opacity;
            -o-transition: 0.4s opacity;
            transition: 0.4s opacity;
        }
            .portfolio-block-item:hover .portfolio-block-item__hover-box{
                opacity: 1;
                filter: alpha(opacity=100);
            }
            .portfolio-block-item-hover-box__inner{
                overflow: hidden;
                position: absolute;
                top: 50%;
                width: 100%;
                padding: 0 10px;
                text-align: center;
                display: block;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                transform: translate(0px, -50%);
            }
                .portfolio-block-item-hover-box__inner i{
                    color: #fff;
                    font: normal 13px/1.1em;
                    padding: 0 0 3px;
                    margin: -5px 0 0 0;
                    display: block;
                    font-style: normal;
                }
                .portfolio-block-item-hover-box__inner b{
                    color: #fff;
                    text-transform: uppercase;
                    letter-spacing: 0.04em;
                    display: block;
                    font-size: 21px;
                    line-height: 1.1em;
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
                }
.no-margin-bottom{
    margin-bottom: 0px !important;
}
.row .col.s12.l6, .row .col.s6.m3{
    margin-bottom: 1em !important;
}
/******* FINISH: page /index *******/


/******* START:  page /portfolio/{id} *******/
.page-portfolio{
    margin-top: 1em;
}
    .page-portfolio-info{
    }
        .page-portfolio hgroup h2.subtitle{
            font-size: 1em;
            color: #999;
            margin: 0 0 0.5em 0;
        }
        .page-portfolio hgroup h1.title{
            font-size: 1.5em;
            color: #fff;
            margin: 0 0 1.5em 0;
        }
        .page-portfolio-info__html{
            padding-right: 2em;
        }
    .page-portfolio-imgs{
    }

.nicescroll-rails.nicescroll-rails-vr, .nicescroll-rails.nicescroll-rails-hr{
    background-color: rgba(200,200,200,0.3);
}
    .nicescroll-rails .nicescroll-cursors{
        left: -1px;
    }
.nicescroll-rails.nicescroll-rails-hr{
    margin-top: 0.5em;
}
    .nicescroll-rails.nicescroll-rails-hr .nicescroll-cursors{
        margin-top: 1px;
        left: 0px;
    }
.page-portfolio-imgs{
    white-space: nowrap;
    margin-left: -0.5em;
}
    .page-portfolio-imgs__item{
        cursor: pointer;
        display:inline-block;
        *display:inline;/* For IE7*/
        *zoom:1;/* For IE7*/
        vertical-align:top;
        margin-left: 30px;
    }
        .page-portfolio-imgs__img{

        }
/******* FINISH:  page /portfolio/{id} *******/



/******* START:  page /portfolio *******/
.portfolio-block-by-width__item{
}
    .portfolio-block-by-width-item{
        position: relative;
        height: 100%;
        width: 100%;
        display: block;
        margin-bottom: 1em;
    }
        .portfolio-block-by-width-item__image{
            width: 100%;
            display: block;
        }
        .portfolio-block-by-width-item__hover-box{
            top: 0px;
            position: absolute;
            height: 100%;
            width: 100%;
            display: block;
            background: #333;
            background: rgba(0, 0, 0, 0.8);
            opacity: 0;
            filter: alpha(opacity=0);
            -moz-transition: 0.4s opacity;
            -webkit-transition: 0.4s opacity;
            -o-transition: 0.4s opacity;
            transition: 0.4s opacity;
        }
            .portfolio-block-by-width-item:hover .portfolio-block-by-width-item__hover-box{
                opacity: 1;
                filter: alpha(opacity=100);
            }
            .portfolio-block-by-width-item__hover-box--inner{
                overflow: hidden;
                position: absolute;
                top: 50%;
                width: 100%;
                padding: 0 10px;
                text-align: center;
                display: block;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                transform: translate(0px, -50%);
            }
                .portfolio-block-by-width-item__hover-box--inner i{
                    color: #fff;
                    font: normal 13px/1.1em;
                    padding: 0 0 3px;
                    margin: -5px 0 0 0;
                    display: block;
                    font-style: normal;
                }
                .portfolio-block-by-width-item__hover-box--inner b{
                    color: #fff;
                    text-transform: uppercase;
                    letter-spacing: 0.04em;
                    display: block;
                    font-size: 21px;
                    line-height: 1.1em;
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
                }
/******* FINISH: page /portfolio *******/


/******* START:  page /contacts *******/
.leaflet-popup-content{
    color: #333;
}
/******* FINISH: page /contacts *******/


/******* START:  *******/
/******* FINISH: *******/


/******* START:  *******/
/******* FINISH: *******/


/******* START:  *******/
/******* FINISH: *******/