/*
--------------------------------------------------
    Variables
--------------------------------------------------
*/
:root {
    --wrap-width: 117rem;
}

/*
--------------------------------------------------
    User Interface
--------------------------------------------------
*/
.ui-button:hover {
    background: var(--color);
    border: solid 1px var(--color);
    color: var(--color-light)
}
.ui-button:hover:after {
    width: 0;
}

/*
------------------------------
*/
.ui-overlay-bottom:before {
    height: 100%;
}
.g-blog-items .item:hover .ui-overlay-bottom:before,
.g-product-items .item:hover .ui-overlay-bottom:before {
    height: 15%;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Global
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.g-blog-items .item:hover .ui-overlay:before,
.g-service-items .item:hover .ui-overlay:before {
    opacity: 0;
}

/*
------------------------------
*/
.g-blog-items .item {
    --padding-blog-item: 3rem;
    width: 25%;
}

/*
------------------------------
*/
.g-slider-menu-line .vr-slide-frame-menu > * {
    width: 4rem;
}
.g-slider-menu-line .vr-slide-frame-menu > :hover {
    cursor: pointer;
}
.g-slider-menu-line .vr-slide-frame-menu > :hover:before {
    opacity: .4;
}

/*
------------------------------
*/
.g-gallery .vr-tag-cover-1-1 {
    padding-bottom: 100vh
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Elements
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
header .logo {
    width: 20%;
}
header .group {
    max-width: 80%;
    flex-direction: row;
}
header .group .menu-icon {
    display: none !important;
}

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

#menuItems {
    width: auto;
    height: 100%;
    overflow-x: visible;
    overflow-y: visible;
    opacity: 1;
    background: none;
    position: static;
    top: auto;
}
#menuItems > ul {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
}
#menuItems > ul > li {
    height: 100%;
}
#menuItems > ul > :last-child {
    margin-bottom: 0;
}
#menuItems > ul > li > a {
    height: 100%;
    display: flex;
    align-items: center;
}
#menuItems > ul > li > a label {
    font-size: 1em;
    padding: 0 1em;
    white-space: nowrap;
}
#menuItems .toggle-icon {
    display: none !important;
}

#menuItems [data-show] {
    position: relative;
}
#menuItems .menu-toggle {
    min-width: 20rem;
    max-width: 32rem;
    height: auto;
    padding: 1rem 4rem 3rem 4rem;
    overflow: visible;
    background: rgba(0,0,0,.8);
    position: absolute;
    top: 100%;
    right: -3rem;
    transform: scale(0);
    transform-origin: top right;
    transition: var(--duration-toggle);
}
#menuItems [data-show]:hover > .menu-toggle {
    transform: scale(1);
}
#menuItems .menu-toggle ul {
    padding-bottom: 0;
}
#menuItems .menu-toggle ul a label {
	font-size: .9em;
	letter-spacing: .05em;
    white-space: nowrap;
}

#menuItems .menu-toggle ul a label:hover,
#menuItems > ul > li > a label:hover {
    color: var(--color)
}


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

#footerLetter {
    max-width: 50%;
}

#footerContact .message {
    width: 40%;
    margin: 0 auto;
}
#footerContact .hotline {
    font-size: 9em;
}

#footerContact .social a:hover {
    background: var(--color);
}
#footerContact .social a:hover:before {
    border: none;
}
#footerContact .social a:hover svg {
    fill: var(--color-light);
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Home page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#banner .cover {
    padding-bottom: 100vh
}


#banner .text {
    width: 50%;
    max-width: 60rem;
    bottom: 20rem;
}
#banner .text h1 {
    font-size: 5em;
}
#banner .call {
    max-width: calc(.4*var(--wrap-width));
}
#banner .call a {
    font-size: 2em;
    padding: .5em 1em;
}
#banner .call p {
    font-size: 1.4em;
    margin-top: 1em;
}

#home .slogan {
    width: 70%;
    margin: 0 auto 10rem;
}

#home .s-power .wrap {
    width: calc(.7*var(--wrap-width));
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Project page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#service .service-items {
    width: var(--wrap-width);
    margin: auto;
}
#service .service-items h2 {
    width: 65%;
    padding-left: 5%;
}

#service .service-item:hover .box-L {
    transform: scale(.95);
}

#service .service-item:hover .box-R {
    transform: scale(1.2);
}



/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Product Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blog .contain .item:hover .vr-tag-cover-3-2 {
    opacity: .6;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Blog Single page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#blogSingle .head {
    min-height: 80vh
}
#blogSingle .head h1 {
    font-size: 3.5em;
}

#blogSingle .fb-share:hover {
    background: var(--color);
    color: #fff;
}
#blogSingle .fb-share:hover svg {
    fill: #fff;
}
#blogSingle .other a {
    transition: var(--duration-fade);
}
#blogSingle .other a:hover {
    color: var(--color)
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Search
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#searchResult .item:hover .R,
#searchResult .item {
    transition: var(--duration-fade);
}
#searchResult .item:hover {
    background: var(--shadow-color);
    box-shadow: var(--shadow-around);
}
#searchResult .item:hover .R {
    padding: 2rem 2rem 2rem 0;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Gallery
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.ui-gallery-items {
    grid-template-columns: repeat(3, 1fr);
}
.ui-gallery-items .item h2 {
    font-size: 1.3em;
    transition: .3s ease-out;
}
.ui-gallery-items .item:hover h2 {
    min-height: 100%;
}
.ui-gallery-items .item:hover:before {
    opacity: 0;
}

#gallerySingle .head {
    min-height: 80vh;
}
#gallerySingle .head h1 {
    font-size: 3.5em;
}
#gallerySingle .images {
    column-count: 3;
    padding: 2rem;
}


/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Video
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#video-player [class*="mes-close-"]:hover {
    transform: translateX(-50%) scale(1.2);
    cursor: pointer;
}