/*
--------------------------------------------------
    Variables
--------------------------------------------------
*/
:root {
    --wrap-width: 96rem;
    --padding-x: calc((100% - var(--wrap-width))/2);
}


/*
--------------------------------------------------
    Global
--------------------------------------------------
*/
.wrap {
    width: var(--wrap-width)
}

.g-title {
    font-size: 4em;
}

.g-gallery .vr-slide-frame-menu {
    bottom: 7rem;
}

/*
------------------------------
*/
.g-product-items {
    --item-gap: 3rem;
    grid-template-columns: 1fr 1fr 1fr;
}

/*
------------------------------
*/

.g-blog-items .item {
    width: 33.333%;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Home page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#banner .call {
    left: calc((100% - var(--wrap-width))/2 + 10rem);
}
#banner .call p {
    font-size: 1.2em;
}

#home .s-power .wrap {
    padding: 7rem 10rem;
}
#home .s-power .g-items {
    grid-gap: 3rem 7rem;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Project page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#service .service-item {
    margin: 15rem auto;
}
#service .service-items h2 {
    margin-top: .5em;
}

#service .cover {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}
#service .cover:before {
    content: '';
    width: 90%;
    height: 75%;
    background: linear-gradient(to top, var(--shadow-color), transparent);
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(5em);
}
#service .cover .box-L {
    width: 65%;
    position: relative;
    transition: var(--duration-fade);
    transform-origin: left bottom;
}
#service .cover .box-R {
    display: block;
    width: 30%;
    transition: var(--duration-fade);
    transform-origin: right bottom;
}

#service .text .taxonomy {
    position: absolute;
    margin-top: 0;
    top: -4rem;
    left: 0;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Project Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#serviceSingle .navigation a:nth-child(n+2) {
    margin-left: 7rem;
}

#serviceSingle .blocks {
    width: 65%
}
#serviceSingle .g-agent {
    width: calc(0.25*var(--wrap-width));
    margin: 0;
}
#serviceSingle .g-agent[data-fixed] {
    padding: 2rem;
    position: fixed;
    right: calc((100% - var(--wrap-width))/2);
    top: 50%;
    transform: translateY(-50%);
}
#serviceSingle .g-agent[data-fixed] > :nth-child(n+2) {
    margin-top: 3rem;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Product Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#productSingle .g-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#productSingle .blocks {
    width: 65%
}
#productSingle aside {
    width: calc(0.25*var(--wrap-width));
    margin: 0;
}
#productSingle .other .frame {
    grid-template-columns: 1fr 1fr 1fr;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Blog page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blog .contain {
    width: 70%;
}
#blog .sidebar {
    width: 25%;
    margin-top: 0;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Blog Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blogSingle .head h1 {
    max-width: calc(0.7*var(--wrap-width));
    padding-bottom: 18rem;
}
#blogSingle .fb-share {
    padding: 2rem 5rem;
}
#blogSingle .vr-paragraph {
    max-width: 75%;
}
#blogSingle .vr-paragraph img {
    max-width: 125%;
}
#blogSingle .other a {
    margin: 2rem 0;
}

#blogSingle.gallery .images {
    column-count: 3
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#contact .map {
    padding-bottom: calc(.7*66.667%);
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Search
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#searchResult .item h3 {
    font-size: 2em;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.ui-gallery-items {
    grid-template-columns: 1fr 1fr 1fr;
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Mobile contact
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tpl-mobile {
    display: none;
}