html, body{
    margin:0;
    padding:0;
    font-size:10px;
    height:100%;
}
body{
    font-family: 'Roboto Condensed', sans-serif;
    font-weight:400;
    font-size:1.6rem;
}

h2{
    font-size:5rem;
    text-transform:uppercase;
    font-weight:400;
    margin:0;
    padding:0;
}
section{padding:5rem 0;}
section > h2{
    text-align:center;
    padding:1rem 2rem 3rem;
}
.grid{
    display:grid;
    grid-gap:2rem;
    padding:0 2rem;
    list-style:none;
    margin:0;
}
.grid.grid-4{grid-template-columns:repeat(4,1fr);}
.grid.grid-5{grid-template-columns:repeat(5,1fr);}

.table{display:table;width:100%;height:100%;}
.table .table-cell{display:table-cell;vertical-align: middle;}

.btn{
    font-size:3rem;
    text-align:center;
    margin:3rem auto;
    border:0.3rem solid rgb(125, 109, 173);
    background:rgba(125, 109, 173,0);
    border-radius:1rem;
    display:block;
    width:30rem;
    padding:0.5rem 1rem;
    text-decoration:none;
    color:#000;
    transition:0.2s;
}
.btn:hover{
    background:rgba(125, 109, 173,0.2);
}

/* HEADER */
body > header{
    display:grid;
    grid-template-columns:48rem 1fr;
    grid-gap:0 2rem;
    min-height:15rem;
    background:#8b86b9;
    border-bottom:0.5rem solid rgb(125, 109, 173);
}

body > header > .site-title{
    font-family: 'Miama Nueva';
    font-size:6rem;
    color:#d9d8e7;
    text-shadow: 1px 1px 10px rgb(255 240 0 / 30%);
    margin:0;
    padding:6rem 0 0 4rem;    
    grid-row: 1/3;
    background: #7d6dad;
    border-radius: 0 10rem 10rem 0;
    box-shadow: 4px 0px 8px 0px rgba(34, 60, 80, 0.2);
}
body > header > .site-title a{
    color:inherit;
    text-decoration:none;
}
body > header > .site-title a img{
    width:80%;
}
body > header > .site-title:before{
    background-image:url('../img/logo.png');
    background-size:100%;
    content:"";
    display:block;
    width:7.5rem;
    height:9.5rem;
    top: 1rem;
    left: 1rem;
    position:absolute;
    z-index:2;
}
body > header > .home-menu{
    grid-row:2/3;
}
body > header > .home-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}
body > header > .home-menu ul > li{
    display:inline-block;
    font-size:2.5rem;  
    font-weight:700;
    color:#f3f3f3;
    padding:0 3rem;
}
body > header > .home-menu ul > li:last-child{padding-right:0;}
body > header > .home-menu ul > li a{
    display:block;
    text-decoration:none;
    color:inherit;
    transition:0.2s;
}
body > header > .home-menu ul > li a:hover{
    color:#fffd75;
    border-color:#fffd75;
}
body > header > .contacts{
    grid-row:1/2;
    font-size:2.2rem;
    font-weight:700;
    color:#fffd75;
    display:block;   
    padding:2rem 0 1rem 0;
    text-align:center;    
}
body > header > .contacts > .contact{
    display:inline-block;
    vertical-align:middle;
    margin-right:5rem;
    background:rgb(125, 109, 173);
    padding:1.5rem;
    border-radius:5rem;
}
body > header > .contacts > .contact p{margin:0;}

/* home */
body.home > header{    
    display:block;
    background-image:url('../img/header-bg.jpg');
    /*background-size:auto 100%;*/
    height:100%;
    position:relative;
    border:none;
}
body.home > header:after{
    background:rgba(125, 109, 173, 0.7);
    content: "";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:7rem;
    z-index:1;
}

body.home > header > .site-title{        
    font-size:8rem;
    padding:0;
    top:13rem;
    left:12rem;
    position:absolute;
    z-index:2;
    background:none;
    border-radius:none;
    box-shadow:none;
}
body.home > header > .site-title:before{
    background-image:url('../img/logo.png');
    content:"";
    display:block;
    width:154px;
    height:191px;
    top: -9.5rem;
    left: -7rem;
    position:absolute;
    z-index:2;
}
body > header > .site-title a img{width:95%;}
body.home > header > .home-menu{    
    position:absolute;
    z-index:3;
    top:30rem;
    left:15rem;
}

body.home > header > .home-menu ul > li{
    display:block;
    font-size:6rem;
    font-weight:500;
    padding:0;
}
body.home > header > .home-menu ul > li a{
    border-left:1rem solid rgba(255,255,255,0.5);
    padding:0.5rem 5rem;
}
body.home > header > .home-menu ul > li a:hover{
    color:#fffd75;
    border-color:#fffd75;
}

body.home > header > .contacts{
    font-size:3rem;
    font-weight:700;
    line-height:7rem;
    background:rgb(125, 109, 173);
    height:7rem;
    display:block;
    position:absolute;    
    left:0;
    right:0;
    bottom:0; 
    padding:0;
}
body.home > header > .contacts > .contact{
    display:inline-block;
    vertical-align:middle;
    margin-right:5rem;
    background:none;
    padding:0;
}
body.home > header > .contacts > .contact:last-child{margin-right:0;}

/* ADVANTAGES */
section#advantages{}
section#advantages > .grid{}
section#advantages > .grid > .item{
    border:0.3rem solid rgb(125, 109, 173);
    height:68rem;
    background-size:auto 100%;
    position:relative;
    
}
section#advantages > .grid > .item.item-1{background-image:url('../img/advantages/opyt.jpg');}
section#advantages > .grid > .item.item-2{background-image:url('../img/advantages/spec.jpg');}
section#advantages > .grid > .item.item-3{background-image:url('../img/advantages/prb.jpg');}
section#advantages > .grid > .item.item-4{background-image:url('../img/advantages/akc.jpg');}
section#advantages > .grid > .item.item-5{background-image:url('../img/advantages/hran.jpg');}
section#advantages > .grid > .item > .caption{    
    font-size:2.6rem;
    background:rgba(125, 109, 173, 0.85);
    color:#fff;
    text-align:center;
    text-transform: uppercase;
    height:7rem;
    padding:0 1rem;
    display:block;
    vertical-align:middle;
    position:absolute;
    left:0.5rem;
    right:0.5rem;
    bottom:0.5rem;
    transition:0.2s;
    cursor:default;
}

section#advantages > .grid > .item:hover > .caption{
    height:calc(100% - 1rem);
}

/* ADVANTAGES */
section#portfolio{}
section#portfolio > .grid{}
section#portfolio > .grid > .item{}
section#portfolio > .grid > .item > .img{
    position:relative;
    width:18vw;
    height:18vw;
    overflow:hidden;
    border-radius:50%;
    border:0.3rem solid #cfcd91;
}
section#portfolio > .grid > .item.item-1 > .img{float:right;}
section#portfolio > .grid > .item.item-1 > .img,
section#portfolio > .grid > .item.item-5 > .img{
    width:13vw;
    height:13vw;    
}
section#portfolio > .grid > .item.item-2 > .img,
section#portfolio > .grid > .item.item-4 > .img{
    margin-top:5rem;
}
section#portfolio > .grid > .item > .img img{
    width:100%;
}
section#portfolio > .grid > .item > .img a{
    content:" ";
    font-size:4rem;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    line-height:18vw;
    display:block;
    position:absolute;
    top:1rem;
    bottom:1rem;
    left:1rem;
    right:1rem;
    color:#fff;
    background:rgba(125, 109, 173, 0.65);
    border-radius:50%;
    z-index:2;
    opacity:0;
    transition:0.2s;
}
section#portfolio > .grid > .item > .img a:after{
    content:"";
    -webkit-mask: url('../img/zoomin.svg') no-repeat 100% 100%;    
    -webkit-mask-size: cover;
    mask: url('../img/zoomin.svg') no-repeat 100% 100%;
    mask-size: cover;
    background-color: #fff;    
    width: 5rem;
    height: 5rem;
    background-size:100%;
    position: absolute;
    z-index: 9;
    top:calc(50% - 2.5rem);
    left:calc(50% - 2.5rem);
    opacity:0.8;
}
section#portfolio > .grid > .item.item-1 > .img a,
section#portfolio > .grid > .item.item-5 > .img a{line-height:13vw;}
section#portfolio > .grid > .item > .img a:hover{
    opacity:1;
}

/* MAP */
section#map:before{
    display:block;
    content:"";
    height:3.5rem;
    background-image:url(../img/sep.png);
    margin-top: -1.75rem;
    position: absolute;
    width: 100%;
    z-index:5
}
section#map{
    padding:0;
    min-height:5rem;
}

/* FOOTER */
body > footer{
    padding:2rem;
    text-align:center;
    border-top:0.5rem solid rgb(125, 109, 173);
}
body.home > footer{
    border:none;
}


/* PAGE */
body > main{
    max-width:140rem;
    min-height:calc(100% - 25rem);
    margin:0 auto;
}
body > main > h2{
    padding:3rem 0;
    text-align:center;
}
body > main > .page-content{
    font-size:2.4rem;
    font-weight:300;
}