/*   
Theme Name: VIACOLOR
Theme URI: 
Description: 
Author: Roman Kuznetsov
Author URI: 
Template: 
Version: 1.0
.
Развёрнутое описание темы/Лицензия-если-нужно.
.
*/
html{width:100%;font-size:10px;padding:0;margin:0;position:relative;overflow-x:hidden;}
body{width:100%;padding:0;margin:0;font-size:1.4rem;font-family:'Montserrat',sans-serif;font-weight:normal;color:#2F302F;line-height:1.2;background:#F7F4EA;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;--scrollbar-width:none;position:relative;overflow-x:hidden;overflow-y:auto;}
body::-webkit-scrollbar{width:0px;background-color:#fff}
body::-webkit-scrollbar-thumb{background-color:#f4e5cd}

main{width:100%;height:auto;min-height:100vh;}

header{width:100%;height:auto;display:block;position:fixed;top:0;left:0;z-index:1000}
header .container{width:80%;margin:0 0 0 10%;display:flex;justify-content: space-between;}
header .container .logo{width:10%;display:block;}
header .container .logo img{width:100%;}

nav#menu{width:100%;max-width:1170px;padding:0;margin:0 auto;min-height:35px;display:flex;justify-content:flex-end;align-items:center;align-content:center;flex-direction: column;}
nav#menu div,nav#menu ul{width:100%;padding:0}
nav#menu ul{display:flex;justify-content:flex-end;align-items:center;align-content:center;margin:5px 0 10px 0;}
nav#menu li,#footer li{list-style:none;}
nav#menu li a{width:auto;margin:0 10px;padding:5px;font-size:1.8rem;color:#ffffffcf;text-decoration:none;position:relative;display:block;border-bottom:1px solid #1D1D1D;white-space:nowrap;}
nav#menu li.current-menu-item > a,nav#menu li:hover > a,.single-post nav#menu li.news > a{color:#fff}
nav#menu li > a:after {content:'';width:0;height:2px;background:#991C28;position:absolute;bottom:0;left:0;}
nav#menu li.current-menu-item > a:after,nav#menu li:hover > a:after,.single-post nav#menu li.news > a:after,.page-template-page-gallery nav#menu li.gallery > a:after {animation: 0.5s linear 0.05s 1 normal forwards linew;}
/*nav#menu li li {border-bottom:1px solid #e4e4dd}*/
nav#menu li li:last-child{border-bottom:none}
nav#menu li ul.sub-menu li a{padding:5px 5px 9px 5px;margin-left:0;border:none}

#slidy {color:#fff;background-size:cover;background-position: center center;position:relative;z-index:3;height:100vh;max-height:900px;-moz-transition:background-image 0.2s ease-out;-webkit-transition:background-image 0.2s ease-out;-o-transition:background-image 0.2s ease-out;}
#slidy:before {
    content: '';
    background: #171918;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* opacity: 0.5; */
    opacity: 0.2;
    transition: 2s;
}
#slidy:after {
    content: '';
    -webkit-box-shadow: 0px 0px 52px 20px rgb(0 0 0 / 12%) inset;
    -moz-box-shadow: 0px 0px 52px 20px rgba(0, 0, 0, 0.12) inset;
    box-shadow: 0px 0px 92px 40px rgb(0 0 0 / 12%) inset;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: 2s;
}

div.title {width:80%;box-sizing: border-box;position:absolute;display:block;bottom:10%;left:10%}
div.title div.one {max-width:65%;display:none;position:relative;}
div.title div.one.active {display:block;z-index:10;}
div.title div.one p.title a {color:#fff;border-bottom:7px solid rgb(126 228 230 / 0%);font-weight:500;text-decoration:none}
div.title div.one p.title a:hover {color:#7ad0d1;border-bottom:7px solid hsl(63deg 100% 68% / 0%);text-decoration: none;}
div.title div.one p.title {line-height:1.1;font-size:7.2rem;letter-spacing:2.4px;margin: 0 0 25px 0;text-transform: uppercase;}
div.title div.one  a.more {display:inline-block;cursor:pointer;transition:color 500ms ease 0s, background-color 500ms ease 0s;color: var(--light-white);border-radius:4px;padding:10px 20px;backdrop-filter: blur(12px);background: rgb(255 255 255 / 20%);text-transform: uppercase;font-weight:500;text-decoration:none}
div.title div.one  a.more:hover {background: rgb(255 255 255 / 30%);text-decoration: none;}
div.title div.one div.desc {font-size: 20px;line-height: 24pt;margin-bottom: 5%;}
div.title div.one ul.more {margin: 30px 0 0;list-style-type: none;font-size: 20px;padding: 0;}
div.title div.one ul.more li {float: left;margin: 0 55px 25px 0;}
div.title div.one ul.more li:last-child {margin-right: 0;}
div.title div.one ul.more li a {border-bottom: 3px solid rgb(126 228 230 / 0%);}
div.title div.one ul.more li a:hover {text-decoration: none;color: #f6ff5d;	border-bottom: 3px solid #f6ff5d;}

div.pagination {bottom: auto;top: 27%;display: block;position: absolute;right: 5%;left: inherit;text-align: right;}
div.pagination ul {margin: 0%;padding: 0%;list-style-type: none;display: block;font-size: 18px;position:relative;}
div.pagination ul:before {content: '';display: block;height: 121%;top: -30px;bottom: -30px;position: absolute;background: rgb(255 255 255 / 42%);width: 2px;left: 6px;}
div.pagination ul li {position:relative;float:none;margin:600% 0;width:13px;height:13px;border-radius:100%;background:#fff;cursor:pointer;}
div.pagination ul li.active {background:#7ad0d1;}
div.pagination ul li img {display:none;}
div.pagination ul li span.name {text-transform: uppercase;position: absolute;right: 30px;top: -3px;opacity: 0.5;}
div.pagination ul li:hover span.name {opacity: 0.7;}
div.pagination ul li.active span.name {opacity: 1;}
div.pagination ul li span.name a{color:#fff;font-weight:500;text-decoration:none}


@media screen and (max-width:1024px){
header .container {max-width:96%;margin:0 0 0 2%}
/*mobil menu */
nav#menu{display:none;}
nav#menu.active{display:block;width:300px;height:100%;padding:5%;position:fixed;top:0;overflow:auto;overflow-x:auto!important;background-color:#1D1D1D;z-index:1000;box-shadow: -7px 0px 20px 2px #000;}
.menu-icon {width:30px;height:30px;margin:0 .5em 0 0;color:#F0F0F0;text-align:right;font-size:24px;position:relative;display:block;vertical-align:middle;z-index:102;-webkit-transition:none;transition:none;}
.menu-icon span {position:absolute;top:5px;right:0;display:block;width:30px;height:2px;margin-top:0;background:#fff;font-size:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.menu-icon span:before,.menu-icon span:after {position:absolute;right:0;width:30px;height:2px;background:#fff;content:" ";-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.68, 0, 0.265, 1);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);transition:transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transition-timing-function:cubic-bezier(0.68, 0, 0.265, 1);-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);-moz-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);-o-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.menu-icon span:before {top:17px;-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);-ms-transform:translateY(-8px);-o-transform:translateY(-8px);transform:translateY(-8px);}
.menu-icon span:after {bottom:-10px;-webkit-transform:translateY(8px);-moz-transform:translateY(8px);-ms-transform:translateY(8px);-o-transform:translateY(8px);transform:translateY(8px);}
#menu-close {width:100%;height:30px;}
#menu-close:after,#menu-close:before {content:'';position:absolute;top:2em;right:1em;width:30px;height:3px;background:#fff}
#menu-close:after {-webkit-transform:translateY(0) rotate(-45deg);-moz-transform:translateY(0) rotate(-45deg);-ms-transform:translateY(0) rotate(-45deg);-o-transform:translateY(0) rotate(-45deg);transform:translateY(0) rotate(-45deg);}
#menu-close:before {-webkit-transform:translateY(0) rotate(45deg);-moz-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);-o-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg);}
nav#menu.active ul{flex-wrap:wrap}
#menu.active li {}
#menu.active li {width:100%;font-size:1.8rem;line-height:1.5;margin:1em 0 0 0;padding:0px;text-align:right}
#menu.active li a {width:100%;font-size:2.4rem;padding:0!important;margin:0}
}