html {
height:100%;
width: 100%;
margin: 0; padding: 0;
}
* html body {height: 100%;}
body{
font-family: Roboto, Arial, Calibri, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #333;
min-height: 100%;
position: relative;
line-height:1.5;
background: #fff;
}
body:-moz-full-screen {background: #fff;}
body:-moz-fullscreen {background: #fff;}
body:-webkit-full-screen {background: #fff;}
body:-webkit-fullscreen {background: #fff;}
body:fullscreen {background: #fff;}
body:full-screen {background: #fff;}
header {
background: #f5f5f5;
height:fit-content;
min-height: 96px;
position: fixed;
top: 0;
transition: top 0.5s ease-in-out;
width: 100%;
z-index: 1000;
}
.nav-up {
top: -100%;
}
a{
text-decoration: none;
color: #222222;
}
a:hover {
text-decoration: underline;
color: #EB5402;
color: #000000;
}
a.blu {
color: #0087D7;
}
.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.left{
float:left;
}
.right{
float:right;
}
img { vertical-align: middle }
#all {
padding-top: 90px;
--min-width: 950px;
}
#footer{
height:40px;
width:100%;
position:absolute;
bottom:0;
font-size:11px;
color:#bbbbbb;
}
body.tablet #footer{
height:60px;
}
#footer a{
color:#bbbbbb;
}
#footer .left{
margin:8px 0 0 39px;
}
#footer .right{
margin:10px 39px 0 0;
}
#footer .center{
position: absolute;
left: 340px;
right: 340px;
top: 10px;
text-align:center;
}
.wrapper{
}
header .nav-container{
width: 100%;
text-align: left;
display: grid;
grid-template-columns: 1fr 1fr 72px;
--height: fit-content;
position: absolute;
top: 50%;
transform: translate(0px, -50%);
}
header .nav-container > div{
display: flex;
align-items: center
}
header .nav-container .aux{
}
header .nav-container .menuswitcher{
--position: absolute;
--left: 24px;
--top: 19px;
--bottom: 19px;
cursor: pointer;
--display: none;
}
#ya_share {
display: block;
width:40px;
height:40px;
background-image: url("data:image/svg+xml;utf8,");
position:absolute;
top:50%;
margin-top: -20px;
right:123px;
cursor:pointer;
border: transparent 1px solid;
transition: all 0.3s ease-in-out;
}
body.tablet #ya_share {
--top: 50%;
--right:66px;
transition: none;
}
.ya-share2__container_size_m .ya-share2__item_more.ya-share2__item_has-pretty-view .ya-share2__link_more.ya-share2__link_more-button-type_short {
opacity: 0;
}
.switch_language{
font-size:22px;
height:38px;
cursor:pointer;
border: transparent 1px solid;
margin-left: 40px;
transition: all 0.3s ease-in-out;
}
header .switch_language{
position:absolute;
top:50%;
transform: translate(0px, -50%);
right:62px;
--width:38px;
}
.switch_language:hover{
border-color:#000;
}
.switch_language a, .switch_language span {
color:#000;
display:block;
padding: 3px 7px 0;
text-decoration: none;
text-transform: uppercase;
text-align: center;
}
.switch_language span {
display:none;
}
body.menuOpened {
overflow-y: hidden;
}
.hamburger {
display: inline-block;
vertical-align: middle;
}
.hamburger > span{
width: 24px;
height: 3px;
background-color: #000000;
display: block;
margin: 0 0 4px 0;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger > span:nth-child(3){
margin: 0;
}
.menuOpened .hamburger > span:nth-child(1) {
-webkit-transform: translateY(5px) rotate(45deg);
-ms-transform: translateY(5px) rotate(45deg);
-o-transform: translateY(5px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.menuOpened .hamburger > span:nth-child(2) {
opacity: 0;
}
.menuOpened .hamburger > span:nth-child(3) {
-webkit-transform: translateY(-5px) rotate(-45deg);
-ms-transform: translateY(-5px) rotate(-45deg);
-o-transform: translateY(-5px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg);
}
header .nav-container .menuswitcher span.title{
font-size: 16px;
display: none;
vertical-align: middle;
padding: 0 0 0 8px;
}
header .nav-container .menuswitcher span.title.active{
display: inline-block;
}
header div.links{
justify-content: right;
padding-right: 100px;
}
header div.links > a,
header div.title,
.menu div.title{
font-size:24px;
font-family: Roboto;
vertical-align: middle;
line-height: 24px;
text-align: left;
/*height: 50px;*/
margin: 18px 0;
padding-right: 40px;
}
header div.links > a{
color: var(--customFontColor);
}
body.variant3 header div.links > a{
color: #ffffff;
}
header div.title,
.menu div.title{
margin-left: 40px;
}
header div.links > a:last-of-type{
padding-right: 27px;
}
header div.title span,
header div.title a{
vertical-align: middle;
line-height: 24px;
opacity: 1;
margin: 0 0 0 0;
}
header div.title a:hover{
text-decoration: none;
}
header div.title span{
font-family: Roboto-Light;
display: block;
vertical-align: middle;
/*max-height: 50px;*/
overflow: hidden;
text-align: left;
padding-left:9px;
}
header div.title .logo,
header div.title a.home .logo{
width:255px;
height: 90px;
background: transparent url(../../images/trans.gif) no-repeat 0 center;
background-size: contain;
vertical-align:middle;
margin: 0 10px 0 0;
display: inline-block;
}
header div.title a.home .siteTitle{
display: none;
}
.menuSwitcher {
display: block;
position: absolute;
width: 50px;
height: 50px;
right: 26px;
top: 26px;
z-index: 999;
cursor: pointer;
--transform: scale(1.5);
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
background: transparent url('data:image/svg+xml,') no-repeat center center;
}
body.variant2 .menuSwitcher,
body.variant3 .menuSwitcher {
background: transparent url('data:image/svg+xml,') no-repeat center center;
}
.menu{
padding-left: 50%;
display: block;
width: 100%;
height: calc(100vh - 60px);
position: fixed;
left: 0;
top: 0;
z-index: 19;
background: #F5F5F5;
transform: translate(100%, 0);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
margin-top: 96px;
overflow-y: scroll;
}
.menuOpened .menu{
transform: translate(0, 0);
}
body.menuOpened{
overflow: hidden;
}
body.menuOpened .nav-up{
top: 0;
}
body.menuOpened .scrollhoch{
display: none !important;
}
/*
.menu .ScrollPane{
height: calc(100vh - 60px - 24px);
margin-left: 20px;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.menuOpened .menu .ScrollPane{
margin-left: 50%;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
*/
.menu ul{
font-size:1.2rem;
overflow: hidden;
padding-bottom: 70px;
}
.menu ul >li{
margin-bottom:10px;
}
.menu ul >li >a{
color:#333333;
}
.menu ul >li.active >a{
font-family: Roboto-Bold;
color:#000000;
}
.menu ul >li >ul{
margin: 5px 0 10px 20px;
display:none;
padding:0 15px 0 0;
}
.menu ul >li >ul.active{
display:block;
}
.menu ul >li >ul >li{
text-transform: none;
margin-bottom:10px;
}
.menu ul >li >ul >li >a{
color:#333333;
}
.menu ul >li >ul >li:not(.folder) >a.active{
font-family: Roboto-Bold;
color:#000000;
}
.menu .jspPane>ul{
padding:0 15px 60px 0;
}
.menu li.social{
--
}
.menu li.social a{
display: inline-block;
background: none;
margin-right: 15px;
transform: scale(1.3) translateX(2px);
}
.menu li.social >a svg {
}
.menu li > a + span{
font-size: 1.5em;
font-weight:bold;
transition: transform 0.4s ease-in-out 0s;
transform: scaleY(1.5) rotate(-90deg) translateY(-2px) translateX(-3px);
}
.menu li > a + span.up{
transform: scaleY(1.5) rotate(90deg) translateY(-2px) translateX(1px);
}
.wrapper .content{
padding:0 0 40px 0;
position:relative;
}
.galleryTitle{
line-height: 32px;
font-size: 24px;
text-align: center;
padding: 12px 24px;
background: #ffffff;
}
.galleryCaption{
position: fixed;
left: 0;
top: 0;
max-height: 100vh;
z-index: 17;
text-align: center;
transform: translateY(-100%);
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #ffffff;
width: 100%;
overflow-y: auto;
}
.galleryCaption.open{
transform: translateY(0);
}
body.tablet .galleryCaption.open{
position: static;
}
.galleryCaption .description{
max-width: 814px;
margin: 108px auto 24px;
padding: 0 12px;
text-align: left;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.galleryCaption.open.nav-up .description{
margin-top: 40px !important;
}
body.tablet .galleryCaption .description{
margin-top: 24px;
}
.galleryCaption a.close{
display: inline-block;
margin: auto;
background: transparent url(../../i/nonstop/portfolio/icons/close.svg) 0 0 no-repeat;
height: 24px;
padding-left: 24px;
cursor:pointer;
margin-bottom: 12px;
}
body.variant2 .galleryCaption a.close,
body.variant3 .galleryCaption a.close{
color: #ffffff;
background-image: url('data:image/svg+xml,')
}
header div.title a.openCaption {
}
h1 a.openCaption {
display: inline-block;
background: none;
width: 18px;
height: 18px;
cursor:pointer;
margin: 0 0 0 6px;
--transform: translateY(-10px);
border: 2px #505150 solid;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
border-radius: 10px;
position: relative;
}
h1 a.openCaption::before,
h1 a.openCaption::after{
display: block;
position:absolute;
left:8px;
top:4px;
content: '';
width:2px;
height:2px;
background: #505150;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
h1 a.openCaption::after{
top:8px;
height:6px;
}
h1 a.openCaption.open::before{
top:2px;
height:14px;
transform: rotate(-45deg);
}
h1 a.openCaption.open::after{
top:2px;
height:14px;
transform: rotate(45deg);
}
.content > .page{
width: 950px;
margin: auto;
}
.content h1{
font-family: Roboto-Light;
line-height: 57px;
font-size: 60px;
text-align: center;
width: calc(100% - 100px);
margin: auto;
padding: 24px 0 24px 0;
}
body.variant3 .content h1 a{
color: #ffffff;
}
.content .page > h1{
font-family: 'Roboto-Bold';
font-size: 64px;
line-height: 64px;
}
.content .page .avatar {
background: url('../i/trans.gif') no-repeat scroll center center / cover transparent;
height: 261px;
margin: 0 auto 70px;
width: 261px;
}
.content .page .description {
padding: 0;
width: 950px;
font-size: 1em;
line-height: 1.5em;
}
.content .page .description p{
width: 814px;
margin: 0 auto 20px;
}
.content .page .description p + .inlinePic{
padding-top: 22px;
}
.blog .description .inlinePic,
.page .description .inlinePic{
text-align: center;
padding: 42px 0 42px;
}
.page .description .inlinePic .caption .t {
font-family: Roboto-Medium;
font-weight: normal;
opacity: 0.6;
}
.page .description .inlinePic .caption .d {
opacity: 0.6;
}
.page .description .inlinePic:first-child{
padding: 20px 0 42px;
}
.page .description figure .inlinePic:first-child{
padding-bottom: 0px;
}
div.contact{
margin:0 auto 0;
}
.contact .contacts{
padding: 0 0 30px;
width: 510px;
text-align: center;
margin: auto;
}
.contact .contacts .author_name{
font-family: Roboto-Bold;
}
.contact .contacts .social {
padding: 8px 0 0 0;
}
.contact .feedback {
padding: 0px 0px 0px 0;
}
.contact .feedback h2{
font-family: Roboto-Medium;
padding:0 0 20px 0;
text-align: center;
}
#subscribe .field{
background: none repeat scroll 0 0 #ffffff;
margin-bottom: 20px;
width: 100%;
border:1px #cccccc solid;
width: 510px;
}
#subscribe .field input {
background: none repeat scroll 0 0 #fff;
border: 0 none;
display: block;
font-size: 15px;
margin: 0;
padding: 6px 0 6px 6px;
width: 500px;
}
#subscribe .field textarea {
background: none repeat scroll 0 0 #fff;
border: 0 none;
font-size: 15px;
height: 140px;
margin: 0;
padding: 6px 0 6px 6px;
width: 500px;
max-width: 500px;
}
#subscribe input[type="submit"] {
background: #999999;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
font-size: 17px;
margin-top: 2px;
padding: 8px 16px 8px 16px;
}
#subscribe #thanx{
margin-top:5px;
opacity:0;
}
.errortooltip {
color: #cc0000;
height: 15px;
margin: 1px 0 0;
padding: 1px 10px 3px 11px;
text-align: left;
width: 250px;
z-index: 11000;
}
.errortooltip p {
color: #cc0000;
font-size: 12px;
margin: 0;
}
.series_caption{
background:#eeeeee;
color:#555555;
margin: 0 10px 10px 0;
padding:25px 30px 20px 30px;
position:relative;
}
.series_caption .container{
height:auto;
font-size:15px;
font-style: normal;
font-family: Arial, sanserif;
line-height: 21px;
overflow:hidden;
}
.series_caption .container .title{
display:none;
}
.series_caption .hellip{
display:block;
position:absolute;
right:20px;
top:63px;
display:none;
}
.series_caption a.switcher{
width:23px;
height:23px;
margin:10px auto 0;
background: transparent url(../../i/nonstop/portfolioicons.png) no-repeat 0 -300px;
display:none;
opacity:0.4;
}
.series_caption a.switcher.show{
display:block;
}
.series_caption a.switcher:hover{
opacity:1;
}
.series_caption a.switcher.open{
background-position:-25px -300px;
}
.sharer .nav{
display:inline-block;
vertical-align:middle;
opacity:0.4;
}
.itemCaptionOpenerContainer #ya_share {
width:32px;
height:32px;
display: inline-block;
position:relative;
top: auto;
right:auto;
margin: -20px 10px 0;
--transform: translateY(-8px);
background: transparent url(../../i/nonstop/portfolio/icons/share_24px.svg) no-repeat 0 0;
opacity: 1;
border:none;
}
.itemCaptionOpenerContainer #ya_share .ya-share2__list.ya-share2__list_direction_horizontal {
position: absolute;
left: 0
}
.itemCaptionOpenerContainer #ya_share:hover {
background-position: 0 0;
}
#ya_share .b-share{
width:40px;
height:40px;
overflow: hidden;
padding: 0 !important;
}
.b-share__handle{
width:40px !important;
height:40px !important;
}
#ya_share .b-share a {
opacity: 0;
}
#dbgdiv {
background: none repeat scroll 0 0 #ffffff;
display: none;
left: 10px;
padding: 5px;
position: fixed;
top: 20px;
}
.loading{
position:fixed;
top:0;
left:0;
width:100%;
height:20px;
}
.loading .percent{
position:absolute;
bottom:0;
left:0;
height:20px;
width:10%;
background:#aaaaaa;
}
iframe.iframer{
display:inline-block;
height:21px;
vertical-align: bottom;
}
body.iframer{
font-size: 11px;
color: #bbbbbb;
}
body.iframer a.redaktor{
height:15px;
display:inline-block;
position:relative;
padding: 5px 0 0 30px;
margin-left:10px;
color: #bbbbbb;
}
body.iframer a.redaktor:before{
display:block;
position:absolute;
left:10px;
top:4px;;
content:'';
width:15px;
height:15px;
background: url(../../i/nonstop/portfolioicons.png) no-repeat -60px 0px;
opacity:0.4;
}
body.iframer a.redaktor:after{
display:block;
position:absolute;
left:0;
top:6px;
content:'';
width:1px;
height:14px;
background: #bbbbbb;
}
.slidetabs .item .load{
width:128px;
height:128px;
/*background: url('../../i/nonstop/portfolio/loading0.gif') no-repeat scroll center center transparent;*/
background-image: none !important;
position: absolute;
left:50%;
top:50%;
margin:-64px 0 0 -64px;
}
.sk-circle {
margin: 44px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #fff;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.slidetabs {
/*background: #c0c0c0; */
}
.slidetabs div.browse{
width: 33.33%;
/*
background: #cc0000;
background: url('../../i/nonstop/portfolio/zoom-icon@1x.png') no-repeat scroll center center transparent;
*/
position: absolute;
left:33.33%;
top:0;
bottom:40px;
margin: 0 0 0 0;
opacity: 0.4;
transition:0.25s linear opacity;
cursor:zoom-in;
z-index: 999;
}
.slidetabs div.browse.hidden,
.slidetabs div.lupa.hidden{
display: none;
}
.slidetabs:hover div.browse,
.slidetabs:hover div.lupa {
opacity: 0.4;
transition:0.25s linear opacity;
}
.slidetabs div.browse:hover ,
.slidetabs div.lupa:hover {
opacity: 0.99;
transition:0.25s linear opacity;
}
.slidetabs div.browse {
opacity: 0;
left:0%;
cursor:pointer;
---z-index: 999;
}
.slidetabs div.browse.forward {
left:auto;
right:0%;
}
.slidetabs div.browse:before {
display:block;
content: '';
width:38px;
height:80px;
background: #ff0000;
background: transparent url("../../i/nonstop/arrows_slideshow.png") no-repeat scroll 0 0;
position: absolute;
top: 50%;
left: 20px;
}
.slidetabs div.browse.forward:before {
background-position: -48px 0;
left: auto;
right: 20px;
}
body.hidemenu .slidetabs div.lupa {
/*background-image: url('../../i/nonstop/portfolio/zoom-out-icon@1x.png');*/
cursor:zoom-out;
}
body.hidemenu .wrapper .menu .ScrollPane ,
body.hidemenu .wrapper .menu .slidetabsNavigation .arrnav .thumbs,
body.hidemenu .wrapper .menu .slidetabsNavigation .arrnav > span,
body.hidemenu .wrapper .menu .slidetabsNavigation .arrnav .play ,
body.hidemenu #footer,
body.hidemenu #ya_share,
body.hidemenu .switch_language{
display: none;
}
body.hidemenu .wrapper .menu {
padding: 0;
}
body.hidemenu .wrapper .content {
margin-left: 0;
padding: 0;
}
body.hidemenu .slidetabsNavigation,
body.hidemenu .slidetabsNavigation .arrnav{
position:fixed;
left:0;
top:0;
right:0;
z-index:100;
height: 1px;
}
body.hidemenu .arrnav a.nav{
background: transparent none repeat scroll 0 0;
cursor: pointer;
display: block;
left: 0;
top: 0;
bottom:0;
position: fixed;
width: 100px;
height: auto;
opacity:0;
display: none;
}
body.hidemenu .arrnav a.nav.forward{
left: auto;
right: 0;
}
body.hidemenu .arrnav a.nav i{
background: rgba(0, 0, 0, 0) url("../../i/nonstop/arrows_slideshow.png") no-repeat scroll 0 0;
cursor: pointer;
display: block;
height: 80px;
left: 20px;
margin-top: -40px;
position: absolute;
top: 50%;
width: 38px;
}
body.hidemenu .arrnav a.nav.forward i{
background-position: -48px 0;
left: auto;
right: 20px;
}
body.hidemenu:hover .arrnav a.nav{
opacity:0.5;
transition:0.15s linear opacity;
}
body.hidemenu .arrnav a.nav:hover{
opacity:1;
transition:0.15s linear opacity;
}
body.hidemenu .slidetabs {background: #fff;}
.social {
}
.social >a {
display:inline-block;
margin-right: 12px;
--opacity:1;
}
.social >a:hover{
opacity:0.5;
}
.html5-video-player:not(.ytp-transparent),
.html5-video-player.ad-interrupting,
.html5-video-player.ended-mode,
.html5-video-player.ytp-fullscreen {
background-color: #fff !important;
}
.closeFullscreen{
background: url(../../i/nonstop/arrows_slideshow.png) no-repeat scroll 0 -270px transparent;
width: 18px;
height: 18px;
top: 20px;
right: 20px;
display: none;
z-index: 1000;
position: absolute;
}
body.hidemenu .closeFullscreen{
display: block;;
}
.closeFullscreen:hover{
background-position: -30px -270px;
}
body.menuOpened .closemenuhelper {
display: block;
width: 100vw;
height: calc(100vh - 60px);
position: fixed;
left: 0;
top: 60px;
z-index: 18;
}
.prelodBackgrounds{
display:none;
}
.folderItemsList{
overflow:hidden;
}
.folderItemsList > div{
width:100vw;
height:100vh;
background: url(../../images/trans.gif) no-repeat center center scroll;
background-size: cover;
position: relative;
}
.folderItemsList > div.blogAnonses{
background: #ffffff;
height: auto;
}
.folderItemsList > div:before{
display:block;
content: '';
width:100%;
height:100%;
background: #000;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.folderItemsList > div:hover:before{
opacity: 0.5;
}
.folderItemsList > div > a.title{
display: block;
position: absolute;
text-align: center;
top: 0;
left: 0;
color: #fff;
line-height: 96px;
font-size: 96px;
width:100vw;
height: 100vh;
}
.folderItemsList > div > div.title,
.folderItemsList > div > a.title span{
font-family: Roboto-Light;
display: block;
position: absolute;
text-align: center;
top: 50%;
left: 5vw;
transform: translate(0px, -50%);
color: #fff;
line-height: 96px;
font-size: 96px;
max-height: 50vh;
width:90vw;
transition: all 0.3s ease-in-out;
}
.folderItemsList > div > a.title span:hover{
opacity:0.8;
}
.folderItemsList > div.folder > div.title ,
.folderItemsList > div.folder > a.title span{
top: 30%;
transform: translate(0px, -30%);
}
.itemItemsList{
overflow:hidden;
position: absolute;
bottom:0;
height: 40vh;
width: 100vw;
}
.itemItemsList .scroller{
height: 40vh;
width: 20000em;
position: absolute;
}
.itemItemsList .scroller > div{
width:33.333vw;
height:40vh;
background: #cccccc url(../../images/trans.gif) no-repeat center center scroll;
background-size: cover;
position: relative;
float: left;
}
.itemItemsList .scroller > div:before{
display:block;
content: '';
width:100%;
height:100%;
background: #000;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease-in-out;
}
.itemItemsList .scroller > div:hover:before{
opacity: 0.5;
}
.itemItemsList .scroller > div > a.title {
font-family: Roboto-Medium;
display: block;
position: absolute;
text-align: center;
top: 0;
left: 0;
color: #fff;
line-height: 31px;
font-size: 24px;
width:100%;
height:100%;
}
.itemItemsList .scroller > div > a.title span{
display: block;
position: absolute;
text-align: center;
top: 50%;
left: 1.6665vw;
transform: translate(0px, -50%);
max-height: 30vh;
width:30vw;
}
.itemItemsList .scroller > div > a.title span:hover{
--text-decoration: underline;
opacity:0.8;
}
.folderContentList.count1 .itemItemsList .scroller{
width:33.333vw;
margin-left:33.333vw;
}
.folderContentList.count2 .itemItemsList .scroller{
width:66.667;
margin-left:16.665vw;
}
.scrollnav {
width: 33.28125vw;
height: 32px;
position:absolute;
top: calc(60vh - 64px);
left: 50%;
transform: translate(-50%, 0px);
}
.scrollnav a{
display:block;
position:absolute;
top: 0;
right: 0;
height: 32px;
width: 32px;
-margin-left: -24px;
cursor: pointer;
background: transparent url(../../i/nonstop/portfolio/icons/arrow_24px.svg) center center no-repeat;
}
.scrollnav a.prev{
right: auto;
left: 0;
transform: rotate(180deg);
}
.scrollnav a.disabled{
cursor: auto;
opacity: 0.4;
}
.lenta.vadus{
overflow:hidden;
background: #fff;
}
.lenta.vadus > div.item{
width: calc(100% - 48px);
background: #fff;
position: relative;
float: left;
cursor: zoom-in;
--padding: 12px 24px;
margin: 20px 24px;
--transition: all 0.8s ease-in-out;
}
.lenta > div.item img{
display: block;
width:100%;
max-width:100%;
}
.lenta.donotstretch > div.item img{
width:auto;
max-width:100%;
margin: auto;
}
/*
.lenta > div.item:not(.cycle-slide):nth-child(3n) img,
.lenta > div.item:not(.cycle-slide):nth-child(3n+2) img{
max-width:calc( 50vw - 45px);
}
height: 100%;
object-fit: scale-down;
object-position: center center;
*/
/*
.lenta > div.item:nth-child(3n),
.lenta > div.item:nth-child(3n+2){
width: calc( 50vw - 45px) ;
padding: 24px 12px 24px 24px;
}
.lenta > div.item:nth-child(3n){
padding: 24px 24px 24px 12px;
}
*/
.itemCaption{
width: 100%;
overflow: hidden;
margin: auto;
max-height: calc(100% - 100px);
transition: all 0.3s ease-in-out;
}
.itemCaption > div{
padding: 10px 30px 0 30px;
text-align: center;
margin: auto;
}
.itemCaption > div.title{
font-size: 20px;
line-height:normal;
}
.itemCaption > div.description{
font-size: 14px;
}
.itemCaption .title + .description{
padding: 0px 30px 0 30px;
}
.itemCaptionOpenerContainer{
position: absolute;
height: 40px;
width: 100%;
top:11px;
text-align: right;
transition: all 0.3s ease-in-out;
opacity:0;
}
.lenta > div.item:hover .itemCaptionOpenerContainer{
opacity:1;
}
.lenta > div.item:nth-child(3n) .itemCaption,
.lenta > div.item:nth-child(3n+2) .itemCaption{
width: calc(100% - 36px);
bottom:24px;
}
.lenta > div.item:nth-child(3n+2) .itemCaption{
left:24px;
}
.lenta > div.item:nth-child(3n) .itemCaption{
left:12px;
}
body.slideshow header,
body.slideshow #footer{
display:none;
}
body.slideshow .wrapper .content{
padding: 0 !important;
width: 100vw;
height: 100vh;
--overflow:hidden;
}
body.slideshow .lenta > div.item{
width: 100vw !important;
height: 100vh !important;
bottom:0 !important;
padding: 0;
cursor: default;
}
body.slideshow .lenta > div.item > img{
width: 100%;
height: 100%;
object-fit: scale-down;
object-position: center center;
cursor: zoom-out;
}
body.slideshow .moreInFolder{
display:none;
}
div.browse,
div.closeSlideshow{
display: none;
}
body.slideshow div.browse,
body.slideshow div.closeSlideshow{
display: block;
}
.closeSlideshow{
background: url(../../i/nonstop/arrows_slideshow.png) no-repeat scroll 0 -270px transparent;
width: 18px;
height: 18px;
top: 20px;
right: 20px;
display: none;
z-index: 1000;
position: absolute;
cursor: pointer;
}
body.slideshow div.browse{
width: 33.33%;
position: absolute;
left:33.33%;
top:0;
bottom:40px;
margin: 0 0 0 0;
opacity: 0.4;
transition:0.25s linear opacity;
cursor:zoom-in;
z-index: 999;
}
body.slideshow div.browse.hidden{
display: none;
}
body.slideshow:hover div.browse{
opacity: 0.4;
transition:0.25s linear opacity;
}
body.slideshow div.browse:hover{
opacity: 0.99;
transition:0.25s linear opacity;
}
body.slideshow div.browse {
opacity: 0;
left:0%;
cursor:pointer;
---z-index: 999;
}
body.slideshow div.browse.forward {
left:auto;
right:0%;
}
body.slideshow div.browse:before {
display:block;
content: '';
width:38px;
height:80px;
background: #ff0000;
background: transparent url("../../i/nonstop/arrows_slideshow.png") no-repeat scroll 0 0;
position: absolute;
top: 50%;
left: 20px;
}
body.slideshow div.browse.forward:before {
background-position: -48px 0;
left: auto;
right: 20px;
}
a.scrollhoch {
background: transparent url(../../i/nonstop/portfolio/icons/up-arrow.svg) 0 0 no-repeat;
bottom: 130px;
cursor: pointer;
position: fixed;
width: 60px;
height: 60px;
z-index: 9999;
text-decoration: none;
right: -200px;
display: none;
font-size: 13px;
opacity: 0.7;
transition: all 0.3s ease-in-out;
}
a.scrollhoch:hover {
opacity: 1;
}
body.PhotoSwipeSlideshow a.scrollhoch {
display: none !important;
}
.lenta > div.item.video .playButton{
position: absolute;
top: 50%;
left: 50%;
height: 48px;
width: 48px;
margin-left: -24px;
margin-top: -24px;
cursor: pointer;
background: transparent url(../../i/nonstop/portfolio/play-button.png) center center no-repeat;
}
.lenta > div.item.photo .playButton{
display: none;
}
.player{
display: none;
}
.player.playing{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
z-index: 99999;
}
.closePlayer{
position: absolute;
width:70px;
height:70px;
background:rgba(255,255,255,0.5);
right:auto;
left:20px;
top:20px;
opacity:0;
transition: background 0.25s linear 0s, opacity 0.25s linear 0s;
display: none;
z-index: 999999;
cursor:pointer;
}
.closePlayer:before, .closePlayer:after {
position: absolute;
left: 33px;
top: 12px;
content: ' ';
height: 48px;
width: 5px;
background-color: #000;
}
.closePlayer:before {
transform: rotate(45deg);
}
.closePlayer:after {
transform: rotate(-45deg);
}
.player.playing .closePlayer{
opacity:0.5;
display: block;
}
.closePlayer:hover{
background:rgba(255,255,255,1);
transition: background 0.25s linear 0s, opacity 0.25s linear 0s;
opacity:1;
}
.moreInFolder{
position: relative;
overflow:hidden;
}
.moreInFolder .parentTitle{
font-family: Roboto;
font-size: 60px;
background: #000;
min-height: 250px;
color:#fff;
text-align:center;
position: relative;
}
.moreInFolder .parentTitle span {
display: block;
position: absolute;
text-align: center;
top: 50%;
left: 5vw;
transform: translate(0px, -50%);
max-height: 200px;
width: 90vw;
}
.moreInFolder .itemItemsList{
position: relative;
bottom:auto;
background: #000;
}
.moreInFolder .scrollnav{
top:200px;
left:0;
width:100%;
transform: translate(0px, 0px);
}
.moreInFolder .scrollnav a.prev {
left: 32px;
}
.moreInFolder .scrollnav a.next {
right: 32px;
}
.folderContentList.count1 .scrollnav,
.folderContentList.count2 .scrollnav,
.folderContentList.count3 .scrollnav {
display: none;
}
.feedbackButton{
display: inline-block;
background: rgba(245, 245, 245, 0.8) url(../../i/nonstop/portfolio/icons/feedbackButton.svg) no-repeat center center;
background-size: 30px 30px;
width: 32px;
height: 32px;
border-radius:16px;
cursor:pointer;
margin: 0 10px;
}
body.tablet .feedbackButton,
body.tablet.PhotoSwipeSlideshow.pswp__ui--hidden .feedbackButton{
display: none;
}
body.tablet.PhotoSwipeSlideshow .feedbackButton{
width: 44px;
height: 44px;
position: absolute;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
right: 131px;
top: 2px;
opacity: 0.75;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-box-shadow: none;
box-shadow: none;
background: transparent url(../../i/nonstop/portfolio/icons/feedbackButtonWhite.svg) no-repeat center center;
z-index: 99999;
}
.description h2,
.description h3,
blockquote {
width: 814px;
margin: auto;
}
blockquote {
padding-bottom: 22px;
}
header .blogNavButtons{
float: right;
text-align: right;
padding-left: 16px;
padding-top: 2px;
white-space: nowrap;
--position: absolute;
--right: 118px;
--top: 50%;
--transform: translate(0px, -50%);
}
.blogNav{
border-bottom: 1px solid #ffffff;
padding-bottom: 10px;
margin-bottom: 20px;
}
.blogNav a{
display: inline-block;
line-height: 18px;
font-size: 14px;
padding-left: 16px;
position: relative;
}
body.variant2 .blogNav a,
body.variant3 .blogNav a,
body.variant2 .blogNavButtons a,
body.variant3 .blogNavButtons a{
color: #ffffff;
}
.blogNav a.portfolioSubscribe{
padding-left: 16px;
}
.blogNav a.portfolioSubscribe:before {
content: '|';
position: absolute;
left: 7px;
top: 0px;
}
.blogNav .blogBackButtonDiv{
float: left;
}
.blogNav .blogNavButtons{
float: right;
}
.blogNav .blogBackButtonDiv a{
padding: 0;
}
header .blogNavButtons a.portfolioSubscribe{
position: relative;
}
header .blogNavButtons a.portfolioSubscribe:before{
content: '|';
position: absolute;
left: 7px;
top: 0px;
}
header .blogNavButtons a.selectedMonth{
background-color: #ececec;
padding: 10px 30px 10px 10px;
margin-right: 10px;
position: relative;
cursor: pointer;
}
header .blogNavButtons a.selectedMonth:hover {
text-decoration: none;
}
header .blogNavButtons a.selectedMonth::before {
background: url(../../i/nonstop/portfolio/close_24px.svg) no-repeat scroll 0 0 transparent;
width: 24px;
height: 24px;
top: 7px;
right: 4px;
content: '';
position: absolute;
opacity: 0.3;
}
header .blogNavButtons a.selectedMonth:hover::before {
opacity: 1;
}
.content .blog .header {
display: none;
}
.content .blog .entryContent h1 {
padding: 0 0 16px;
width: 950px;
font-size: 40px;
}
.content .blog .waterfall-container .poster {
margin-top: 0;
}
.content .blog .waterfall-container .title,
.content .blog .waterfall-container .caption {
text-align: center;
}
.content .blog .waterfall-container .caption {
font-size: 14px;
}
.content .blog .waterfall-container .item{
border: none;
position: relative;
padding: 10px 0 0 0;
}
.content .blog .waterfall-container .item:after{
display:block;
content:'';
--width:60px;
--height:7px;
--background: #000000;
margin: 30px auto 0;
}
.content .blog .waterfall-container .item .tags{
margin-top: 24px;
}
.content .blog.multi{
width: 90%;
margin: auto;
}
.content .blog.entry{
--max-width: none;
}
.content .blog .entryContent .tags,
.content .blog .entryContent .description p,
.content .blog .entryContent .description ul,
.content .blog .entryContent .description table,
.content .blog .entryContent .description blockquote,
.content .blog .entryContent .description cite,
.content .blog .entryContent .description div,
.content .blog .entryContent .description h1,
.content .blog .entryContent .description h2,
.content .blog .entryContent .description h3,
.content .blog .entryContent .description h4,
.content .blog .entryContent .description h5,
.content .blog .entryContent .description h6,
.content .blog .entryContent .prevnext,
.content .blog .entryContent #disqus_thread {
max-width:790px;
margin: auto;
}
.content .blog.entry .inlineGallery,
.content .blog .entryContent .description figure,
.content .blog .entryContent .description div.inlinePic{
max-width:994px;
}
.content .blog.entry .inlineGallery{
margin: auto;
}
.content .page .description figure figcaption,
.content .page .description div.inlinePic .caption,
.content .blog .entryContent .description figure figcaption,
.content .blog .entryContent .description div.inlinePic .caption{
text-align: center;
}
.content .blog .entryContent .description p{
margin-bottom: 1em;
}
.page .description p + .inlinePic,
.content .blog .entryContent p + .inlinePic{
margin-top: 40px;
}
.content .blog .entryContent .inlinePic + p{
margin-top: 10px;
}
.page .description .inlinePic .caption, .blog .description .inlinePic .caption {
padding: 20px 0 0;
}
.content .blog .entryContent .prevnext{
margin-bottom: 40px;
font-size: 14px;
}
.content .blog .entryContent .description blockquote {
margin-top: 30px;
margin-bottom: 30px;
border-top: 5px solid #E0E0E0;
border-bottom: 5px solid #E0E0E0;
padding: 30px 30px 10px 90px;
position: relative;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: serif;
position: absolute;
left: 20px;
top: 20px;
color: white;
background: #000000;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 50px;
line-height: 1.35;
text-align: center;
}
.blog blockquote p{
margin: 0 0 16px;
font-size: 22px;
letter-spacing: .05em;
line-height: 1.4;
}
.blogAnonses {
padding-top: 24px;
}
.blogAnonses h1{
padding: 24px 0 32px 0
}
.blogAnonses > .blog > .title{
font-size: 40px;
line-height: 42px;
text-align: center;
border-bottom:none;
padding: 74px 0 48px 0;
}
.blogAnonses .blogItemsList{
width: 90%;
margin: auto;
}
.blogAnonses .blogItemsList h2{
}
.blogAnonses .blogItemsList .item{
--padding-top: 0;
border-bottom:none;
position: relative;
padding: 0 0 30px;
}
.blogAnonses .blogItemsList > .item .poster{
margin-top:0;
}
.content .blog .waterfall-container .title {
color: #000;
}
.instaWidget .title{
font-weight: 400;
font-size: 40px;
padding: 20px 0 20px 20px;
}
.instaWidget .stream a{
width: calc((100vw - 20px - 40px) / 5);
height: calc((100vw - 20px - 40px) / 5);
}
.instaWidget .title .controls{
right: 20px;
}
.folderItemsListTitle{
font-size: 32px;
font-weight: 700;
padding: 10px 30px 22px 30px;
text-align: center;
margin: auto;
}
.folderItemsList{
display: flex;
flex-wrap: wrap;
width: 100%;
--margin-top: 60px;
}
.folderItemsList a{
display: block;
width: 25%;
background: #cccccc url(../../images/trans.gif) no-repeat center center scroll;
background-size: cover;
position: relative;
}
.folderItemsList a::before {
content: '';
display: block;
width: 100%;
padding-bottom: 78.21782%;
background: #000;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.folderItemsList a:hover::before {
opacity: 0.5;
transition: all 0.3s ease-in-out;
}
.folderItemsList a .title{
display: block;
position: absolute;
text-align: center;
top: 50%;
transform: translate(0px, -50%);
max-height: 30vh;
width: 100%;
color: #fff;
line-height: 31px;
font-size: 24px;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.folderItemsList a:hover .title{
opacity: 1;
transition: all 0.4s ease-in-out;
}
.folderItemsList a.touched .title{
opacity: 1;
}
.blog .item a{
display: flex;
flex-direction: column;
}
.blog .item .date {
order: 3;
}
.blog .item .poster {
order: 1;
margin-bottom: 16px;
}
.blog .item h2 {
order: 2;
}
.blog .item .about {
order: 4;
}
body.gallery .wrapper > #ya_share {
top: 42px;
right: 67px;
}
body.PhotoSwipeSlideshowOpened.gallery .wrapper #ya_share {
right: 42px;
}
body.PhotoSwipeSlideshowOpened.gallery .pswp__top-bar #ya_share{
float: right;
}
.menu ul >li.links{
display: none;
}
.menu .switch_language{
display: none;
}
.wrapper .menu > .switch_language {
border: none!important;
}
@media screen and (max-width: 1150px) {
.folderItemsList a {
width: calc( 100% / 3 );
}
}
@media screen and (max-width: 950px) {
header div.title, .menu div.title {
margin-left: 20px;
}
#ya_share {
right:66px;
}
.menu{
padding-left: 30%;
width: calc( 100vw - 30% + 17px);
}
.menu ul >li.links{
display: block;
}
.menu .switch_language{
display: block;
margin: 0;
border: none;
}
.menu .switch_language a{
text-align: left;
padding: 0;
}
header .nav-container{
grid-template-columns: 1fr 72px;
}
header .nav-container > div.links {
display: none;
}
header .switch_language{
display: none;
}
.menuOpened .menu .ScrollPane {
margin-left: 40px;
}
.content .blog{
width: calc(100vw - 40px);
margin: auto;
}
.blogAnonses .blogItemsList .item,
.content .blog.multi .waterfall-container .item,
.content .blog.multi .waterfall-container .item:nth-child(3n) {
width: 48%;
margin-right: 4%;
}
.blogAnonses .blogItemsList .item:nth-child(2n),
.content .blog.multi .waterfall-container .item:nth-child(2n) {
margin-right: 0;
}
.description h2,
.description h3,
blockquote {
width: auto;
margin: auto;
}
.content .page .description p,
.content .page .description{
width: auto;
}
.content > .page{
width: auto;
margin: 0 12px;
}
.content .page > h1,
.content h1 {
font-size: 40px;
line-height: 1;
}
}
@media screen and (max-width: 750px) {
header div.title{
max-width: calc(100vw - 40px - 40px - 72px - 40px);
}
.menu{
--padding-left: 20%;
}
#footer .right, #footer .left{
float: none;
margin: 0 0 12px 12px;
}
#footer .right{
margin: 12px 0 0 12px;
}
#footer iframe{
display: none;
}
.menu {
height: calc(100vh - 120px);
}
.content .page > h1,
.content h1,
.folderItemsListTitle {
font-size: 24px;
}
.content h1{
padding: 6px 0 20px 0
}
.folderItemsList a {
width: 50%;
}
.blogAnonses .blogItemsList .item,
.content .blog.multi .waterfall-container .item,
.content .blog.multi .waterfall-container .item:nth-child(2n),
.content .blog.multi .waterfall-container .item:nth-child(3n){
width: 100% !important;
margin-right: 0 !important;
}
.lenta.vadus > div.item {
margin: 20px 0;
width: 100%;
}
.itemCaption > div.title {
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 21px;
}
.itemCaption > div.description {
font-size: 11px;
font-style: normal;
font-weight: 400;
line-height: 18px;
}
}
@media screen and (max-width: 550px) {
.menu{
--padding-left: 20px;
}
.folderItemsList a {
width: 100%;
}
}
@media screen and (max-width: 550px) and (pointer: coarse) {
.folderItemsList {
display: block;
}
.folderItemsList a {
width: 100%;
}
.folderItemsList .flickity-page-dots{
bottom: 20px;
display: inline-flex;
align-items: flex-start;
gap: 6px;
position: absolute;
left: 32px;
z-index: 100;
width: calc(100% - 64px);
justify-content: center;
}
.folderItemsList .flickity-page-dots li {
width: 0;
height: 0;
margin: 0;
opacity: 1;
display: flex;
padding: 0.75px 8px;
align-items: center;
border-radius: 1px;
background: var(--customFontColor);
transition: 0.4s ease-in-out all;
opacity: 0.5;
}
.folderItemsList .flickity-page-dots li.is-selected {
padding: 0.75px 12px;
opacity: 1;
}
}