/* Slideshow container */ .slideshow-container { height:600px; width: 920px; position: relative; margin: auto; border: none; } @media screen and (max-width: 920px) { .slideshow-container, .slideshow-container img { height:auto; width:100%; } } /* Hide the images by default */ .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: #494f63; opacity: 0.9; } /* Caption text */ .text-inf { color: #555; font-size: 13px; padding:0; position: relative; bottom: -8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 6px; width: 6px; margin: 28px 0 36px 8px; background-color: #D6D6D6; border-radius: 50%; display: inline-block; transition: background-color 0.8s ease; } .active-dot, .dots:hover { background-color: #869791; } /* Fading animation */ .fade { animation-name: fade; animation-duration: 1.8s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } /*! * Mmenu Light * mmenujs.com/mmenu-light * * Copyright (c) Fred Heusschen * www.frebsite.nl * * License: CC-BY-4.0 * http://creativecommons.org/licenses/by/4.0/ */:root{--mm-ocd-width:80%;--mm-ocd-min-width:200px;--mm-ocd-max-width:440px}body.mm-ocd-opened{overflow-y:hidden;-ms-scroll-chaining:none;overscroll-behavior:none}.mm-ocd{position:fixed;top:0;right:0;bottom:100%;left:0;z-index:9999;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:contain;background:rgba(0,0,0,0);-webkit-transition-property:bottom,background-color;-o-transition-property:bottom,background-color;transition-property:bottom,background-color;-webkit-transition-duration:0s,.3s;-o-transition-duration:0s,.3s;transition-duration:0s,.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:.45s,.15s;-o-transition-delay:.45s,.15s;transition-delay:.45s,.15s}.mm-ocd--open{bottom:0;background:rgba(0,0,0,.25);-webkit-transition-delay:0s;-o-transition-delay:0s;transition-delay:0s}.mm-ocd__content{position:absolute;top:0;bottom:0;z-index:2;width:var(--mm-ocd-width);min-width:var(--mm-ocd-min-width);max-width:var(--mm-ocd-max-width);background:#fff;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease}.mm-ocd--left .mm-ocd__content{left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mm-ocd--right .mm-ocd__content{right:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mm-ocd--open .mm-ocd__content{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mm-ocd__backdrop{position:absolute;top:0;bottom:0;z-index:3;width:clamp(calc(100% - var(--mm-ocd-max-width)),calc(100% - var(--mm-ocd-width)),calc(100% - var(--mm-ocd-min-width)));background:rgba(3,2,1,0)}.mm-ocd--left .mm-ocd__backdrop{right:0}.mm-ocd--right .mm-ocd__backdrop{left:0}.mm-spn,.mm-spn a,.mm-spn li,.mm-spn span,.mm-spn ul{display:block;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}:root{--mm-spn-item-height:50px;--mm-spn-item-indent:20px;--mm-spn-line-height:24px;--mm-spn-panel-offset:30%}.mm-spn{width:100%;height:100%;-webkit-tap-highlight-color:transparent;-webkit-overflow-scrolling:touch;overflow:hidden;-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.mm-spn ul{-webkit-overflow-scrolling:touch;position:fixed;top:0;left:100%;bottom:0;z-index:2;width:calc(100% + var(--mm-spn-panel-offset));padding-right:var(--mm-spn-panel-offset);line-height:var(--mm-spn-line-height);overflow:visible;overflow-y:auto;background:inherit;-webkit-transition:left .3s ease 0s;-o-transition:left .3s ease 0s;transition:left .3s ease 0s;cursor:default}.mm-spn ul:after{content:"";display:block;height:var(--mm-spn-item-height)}.mm-spn>ul{left:0}.mm-spn ul.mm-spn--open{left:0}.mm-spn ul.mm-spn--parent{left:calc(-1 * var(--mm-spn-panel-offset));overflow:visible}.mm-spn li{position:relative;background:inherit;cursor:pointer}.mm-spn li:before{content:"";display:block;position:absolute;top:calc(var(--mm-spn-item-height)/ 2);right:calc(var(--mm-spn-item-height)/ 2);z-index:0;width:10px;height:10px;border-top:2px solid;border-right:2px solid;-webkit-transform:rotate(45deg) translate(0,-50%);-ms-transform:rotate(45deg) translate(0,-50%);transform:rotate(45deg) translate(0,-50%);opacity:.4}.mm-spn li:after{content:"";display:block;margin-left:var(--mm-spn-item-indent);border-top:1px solid;opacity:.15}.mm-spn a,.mm-spn span{position:relative;z-index:1;padding:calc((var(--mm-spn-item-height) - var(--mm-spn-line-height))/ 2) var(--mm-spn-item-indent)}.mm-spn a{background:inherit;color:inherit;text-decoration:none}.mm-spn a:not(:last-child){width:calc(100% - var(--mm-spn-item-height))}.mm-spn a:not(:last-child):after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;border-right:1px solid;opacity:.15}.mm-spn span{background:0 0}.mm-spn.mm-spn--navbar{cursor:pointer}.mm-spn.mm-spn--navbar:before{content:"";display:block;position:absolute;top:calc(var(--mm-spn-item-height)/ 2);left:var(--mm-spn-item-indent);width:10px;height:10px;margin-top:2px;border-top:2px solid;border-left:2px solid;-webkit-transform:rotate(-45deg) translate(50%,-50%);-ms-transform:rotate(-45deg) translate(50%,-50%);transform:rotate(-45deg) translate(50%,-50%);opacity:.4}.mm-spn.mm-spn--navbar.mm-spn--main{cursor:default}.mm-spn.mm-spn--navbar.mm-spn--main:before{content:none;display:none}.mm-spn.mm-spn--navbar:after{content:attr(data-mm-spn-title);display:block;position:absolute;top:0;left:0;right:0;height:var(--mm-spn-item-height);padding:0 calc(var(--mm-spn-item-indent) * 2);line-height:var(--mm-spn-item-height);opacity:.4;text-align:center;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}.mm-spn.mm-spn--navbar.mm-spn--main:after{padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--navbar ul{top:calc(var(--mm-spn-item-height) + 1px)}.mm-spn.mm-spn--navbar ul:before{content:"";display:block;position:fixed;top:inherit;z-index:2;width:100%;border-top:1px solid currentColor;opacity:.15}.mm-spn.mm-spn--light{color:#444;background:#f3f3f3}.mm-spn.mm-spn--dark{color:#ddd;background:#333}.mm-spn.mm-spn--vertical{overflow-y:auto}.mm-spn.mm-spn--vertical ul{width:100%;padding-right:0;position:static}.mm-spn.mm-spn--vertical ul ul{display:none;padding-left:var(--mm-spn-item-indent)}.mm-spn.mm-spn--vertical ul ul:after{height:calc(var(--mm-spn-item-height)/ 2)}.mm-spn.mm-spn--vertical ul.mm-spn--open{display:block}.mm-spn.mm-spn--vertical li.mm-spn--open:before{-webkit-transform:rotate(135deg) translate(-50%,0);-ms-transform:rotate(135deg) translate(-50%,0);transform:rotate(135deg) translate(-50%,0)}.mm-spn.mm-spn--vertical ul ul li:last-child:after{content:none;display:none} /* ------------------------------------------------- */ /*@import "fonts/montserrat/fonts.css";*/ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} body {font-family: Arial, Helvetica, sans-serif; color: #444; font-style: normal; font-weight: normal; background:none;} .wrapper {width: 920px; margin: 0 auto 0 auto; padding: 0 10px 30px 10px;} .wrapper-main {width: 620px; margin: 0 auto 0 auto; padding: 0 10px 15px 10px; background:none;} :focus {outline:none;} ::-moz-focus-inner {border:0;} em {font-style:oblique;} strong {font-weight:bold;} u {text-decoration:underline;} /* Headings--------------------------------------------------- */ h1,h2,h3,h4,h5,h6 {font-family: Arial, Helvetica, sans-serif; color: #222; line-height: 1.2; margin: 0 0 0.6em 0;} h2 {font-weight:normal} h4,h5,h6 {font-weight:normal} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family: Arial, Helvetica, sans-serif; line-height: 1; text-decoration:none; color: #222;} h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0; margin-bottom: 0px; margin-top: 0px;} h1 {font-size: 1.9em;} h2 {font-size: 1.68em; margin: 1.78em 0 1.1em 0;} h3 {font-size: 1.5em;} h4 {font-size: 1.24em; margin: 0 0 24px 0;} h5 {font-size: 1.1em;} h6 {font-size: 1em;} /* Text elements--------------------------------------------------- */ p, p a {font-family: Arial, Helvetica, sans-serif; margin-bottom: 25px; font-size:14px; line-height:1.5;} p a {color:#069;} p a:hover {color:#09F;} a {font-family: Arial, Helvetica, sans-serif; color:#444; text-decoration:none;} ::selection {background: #e0e0e0; color:#000;} ::-moz-selection {background: #e0e0e0; color:#000;} .quiet {color: #333; font-size: 13px;} .quiet a {color:#069; font-size: 13px;} .quiet a:hover {color:#09F;} .ul-section, .ul-section a {font-size: 13px; color: #333; font-weight: bold; margin: 16px 0px 10px 0px; background-color:#f1f3f4; padding: 0 0 0 10px;} .inf {margin-bottom: 14px;} .inf::after {display: table; clear: both; content: '';} li.quiet {line-height: 1.2;} .dot-borders, .dot-borders a {padding: 10px 10px 10px 0px; margin: 0 18px 10px 0; display:block; float:left; border: #FFF dotted 1px; border-bottom: #333 solid 2px; width:85px; font-weight:bold;} .caps {text-transform:uppercase;} .geo {background: url(../img/contacts/location.svg) no-repeat right; background-size: 18px 18px; padding-right:25px;} /* Separators------------------------------------------------------ */ .content-separator, .archive-separator, .hidden-separator, .hidden-separator-2 {background: #E5E5E5; clear: both; color: #FFE; display: block; font-size: 0; line-height: 0; height: 1px;} .cards-separator {background: #494f63; clear: both; color: #494f63; display: block; font-size: 0; line-height: 0; height: 2px; margin: 50px 0 50px 0;} .hidden-separator, .hidden-separator-2 {background: none;} .content-separator, .hidden-separator {margin-top: 36px; margin-right: 0; margin-bottom: 36px; margin-left: 0;} .hidden-separator-2 {margin-top: 28px; margin-right: 0; margin-bottom: 28px; margin-left: 0;} .marker { padding:5px 10px 5px 28px; border-left: #111 2px solid;} .marker-quotes { padding:5px 10px 5px 40px; border: none; background: url(../img/quotes.png) no-repeat top left;} .marker-red { padding:5px 10px 5px 20px; border-left: #F00 8px solid;} .marker-silent { padding:5px 10px 5px 20px; border-left: #f1f3f4 3px solid;} .devider-a4u {background: url(../img/a4u-devider.png) no-repeat center; height: 50px; margin-top: 18px; margin-right: 0; margin-bottom: 16px; margin-left: 0; clear: both;} .devider-small { background: #E5E5E5; clear: both; color: #FFE; display: block; font-size: 0; line-height: 0; height: 1px; margin: 36px auto 36px auto; width: 38%; } /* Lists------------------------------------------------------------ */ .content-items { border: none; padding: 40px 40px 20px 40px; margin: 6px 6px 6px 6px; -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); } .navi { background: url(../img/navi.svg) 92% 32px no-repeat; background-size: 32px 32px; } .li-item li, .li-item li a { background: url(tick-3.png) no-repeat left 8px; background-size:auto; border: none; font-family: sans-serif; font-size: 14px; list-style: none; text-decoration:none; padding: 10px 0 10px 40px; } ul.li-item {margin-bottom:28px;} .li-item a:hover {color:#09F;} .push {list-style: none; font-family: Arial, Helvetica, sans-serif; font-size:14px; line-height:17px; margin: 25px 0 25px 8px;} .push li {position: relative; padding: 20px 15px 15px 30px; color: #444; font-weight: normal;} .push li a:hover {cursor: pointer; color: #09F;} .push li:before { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #000; content: ""; left: 0; transition: .3s ease-in-out; top: 25px; } .push li:after { position: absolute; border-left: 1px dotted #4F5151; width: 1px; bottom: -12px; content: ""; left: 3px; top: 44px; } .push li:hover:before{box-shadow: 0 0 0 7px #e6eaed} .push li:last-child:after {content: none;} .push-navi {list-style: none; font-family: Arial, Helvetica, sans-serif; font-size:14px; margin: 22px 0 38px 8px; line-height:1.5;} .push-navi li {position: relative; padding: 7px 0 10px 30px; color: #444; font-weight: normal} .push-navi li a:hover {cursor: pointer; color: #09F;} .push-navi li::before { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #000; content: ""; left: 0; transition: .3s ease-in-out; top: 13px; } .push-navi li::after { position: absolute; border-left: 1px dotted #4F5151; width: 1px; bottom: -5px; content: ""; left: 3px; top: 25px; } .push-navi li:hover:before{box-shadow: 0 0 0 7px #e6eaed} .push-navi li:last-child:after {content: none;} .push-navi h5 {padding: 14px 0 0 0;} /* Images--------------------------------------------------- */ img.logo-filter {-webkit-filter: opacity(75%); filter: opacity(75%);} img.grey-color {-webkit-filter: grayscale(100%); filter: grayscale(100%);} img.grey-color:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%);} .autosize {width: auto; height: auto} .centered {margin-left: auto; margin-right:auto;} img.bordered,img.alignleft,img.alignright,img.aligncenter {background-color: #FFF; border: none;} img.alignleft, img.left {margin: 0 1.3em 1em 0;} img.alignright, img.right {margin: 0 0 1em 1.5em;} .img-block-respon img {padding: 0 0 18px 0;} .dotted { border:#ccc dotted 1px;} .title_pic { height: auto; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555; text-align: left; border: none; border-spacing: 0; padding: 0 0 0 0; margin-bottom: 28px; margin-top: 10px; } .look { background:url(../img/eye.png) no-repeat left; height:auto; padding-left:35px; margin-bottom:12px; } .title_pic2 { height: auto; width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333; text-align: left; border: none; padding: 0 0 0 0; margin: 10px 0 12px 0; } .slider620 img {width:100%; max-width:620px; height:auto;} /* Floats--------------------------------------------------- */ .aligncenter {text-align:center;} .left,.alignleft {float: left;} .right,.alignright {float: right;} .clear,.clearer {clear: both;} .clearfix {display: table; clear: both; content: '';} .clearer {display: block; font-size: 0; line-height: 0; height: 0;} /* Forms--------------------------------------------------- */ .form-popup { position: relative; background: #CCC; width: auto; padding: 20px; max-width: 650px; margin: 0 auto; -webkit-transition: linear 1.2s; -moz-transition: linear 1.2s; -o-transition: linear 1.2s; } /* Columns-------------------------------------------------- */ .col2-left, .col2-right {width: 48%; float:left; height:auto; margin-bottom: 20px;} .col2-left {margin-right:24px;} .col2-left img, .col2-right img {-moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s;} .col2-left img:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s;} .col2-right img:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s;} .col3-left, .col3-mid, .col3-right {width: 32%; float:left; height:auto; margin-bottom: 20px; background:#FFF;} .col3-left a {color:#069;} .col3-mid a {color:#069;} .col3-right a {color:#069;} .col3-left a:hover {color:#06F;} .col3-mid a:hover {color:#06F;} .col3-right a:hover {color:#06F;} .col3-left, .col3-mid {margin-right:12px;} .col3-left p, .col3-mid p, .col3-right p {padding: 8px 0 0 0;} .col3-left img, .col3-mid img, .col3-right img {-moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s;} .col3-left img:hover, .col3-mid img:hover, .col3-right img:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s;} /* Tables------------------------------------------------- */ .table-35 {width: 35%;} .table-65 {width: 65%;} table.table_folio { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight:normal; color: #333; text-align: left; border: none; border-spacing: 0; line-height:1.4; } table.table_folio td {padding: 0 0 10px 0;} .bold-item {font-weight:bold; color:#222; vertical-align:top;} table.data-table { font-family: Arial, Helvetica, sans-serif; border: 1px solid #CCB; border-top: 1px solid #373e51; margin-bottom: 35px; width: 100%; } table.data-table th { background: #FCFCFC; border: 1px solid #DDD; color: #444; text-align: left; line-height:16px; padding: 25px 20px 10px 20px; } table.data-table tr {border-bottom: 1px solid #DDD} table.data-table td, table th {padding: 10px;} table.data-table td {background: #FFF; border: 1px solid #DDD; padding: 10px 10px 0 20px;} table.data-table tr.even td {background: #FFF; padding: 15px 20px 10px 20px;} table.data-table tr.accent td {background: #f7f7f7;} table.data-table tr.tabhead th {background: #373e51; border-left:1px solid #0E2749; border-right:1px solid #0E2749; } .white{color:#FFF;} table.data-table ul { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height:18px; list-style: circle; margin: 0px 0 18px 20px; } .shadow img {-webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .4); -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .4); box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .4);} .buklet img { border:#CCC solid 1px; width:100%; height:auto; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); } .buklet img:hover {box-shadow: 0 10px 14px 0 rgba(0,0,0,0.4);} .buklet2 img { width:100%; height:auto; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; filter: brightness(0.97); background-color: #ebeced; } .buklet2 img:hover { -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; transform: scale(1.07); box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); -webkit-box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); filter: brightness(1); } .tables-tags a { font-family:Arial, Helvetica, sans-serif; color:#999; font-size:12px; padding: 8px 10px 8px 10px; border: #999 dotted 1px; text-align:left; margin: 18px 0 18px 18px; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; line-height:1.2; display:block; float:left; width:auto; } .tables-tags a:hover {color:#555; border: #555 solid 1px;} .table-info { font-family:Arial, Helvetica, sans-serif; color:#444; font-size:13px; text-align:left; font-weight:normal; margin: 0 0 20px 0; padding: 0 0 0 0; line-height:1.1; } .tab-h3 {font-family:Arial, Helvetica, sans-serif; color:#444; font-size:16px; text-align:left; font-weight:bold;} /* Cards --------------------------------------------- */ .card-team {position:relative; width: 100%; height:auto; margin: 0 0 35px 0; border:none; float:left;} .card-team img { float:left; width:200px; height:268px; margin: 0 0 0 0; padding: 0 0 0 0; display:block; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } .card-team img:hover { box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); -webkit-box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); } .team-info { margin: 0 0 0 20px; padding: 0 0 0 0; float:left; width:46%; height:140px; } .card { width: 100%; height:174px; margin: 0 0 40px 0; border:none; float:left; } .card2 { width: 100%; height:310px; margin: 0 0 40px 0; border:none; float:left; } .card img { float:left; width:310px; height:174px; margin: 0 0 0 0; padding: 0 0 0 0; display:block; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } .card2 img { float:left; width:310px; height:310px; margin: 0 0 0 0; padding: 0 0 0 0; display:block; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.8); filter: brightness(0.92); -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; } .card img:hover, .card2 img:hover {box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); -webkit-box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); filter: brightness(1);} .folio-info {margin: 0 0 0 20px; padding: 0 0 0 0; float:left; width:46%; height:174px; position:relative;} .folio-info-310h {margin: 0 0 0 20px; padding: 0 0 0 0; float:left; width:46%; height:310px; position:relative;} @media only screen and (max-width: 640px) { .folio-info, .folio-info-310h {height:auto; border-bottom:#333 solid 2px; padding-bottom:48px;} } .title-foliio, .title-foliio a { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight:bold; line-height:17px; color: #333; text-align: left; text-decoration:none; margin: 0 0 0 0; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; } .title-foliio a:hover {color:#06F;} .folio-info-2 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight:normal; color: #888; text-align: left; text-decoration:none; line-height:15px; border-top: #333 solid 1px; margin: 12px 0 15px 0; padding: 8px 0 20px 0; height:45px; background: none; } .folio-tags a { font-family:Arial, Helvetica, sans-serif; color:#999; font-size:12px; padding: 8px 10px 8px 10px; border: #999 dotted 1px; text-align:left; margin: 0 0 0 0; -o-transition: 0.3s linear; -webkit-transition: 0.3s linear; transition: 0.3s linear; line-height:1.2; } .folio-tags a:hover { color:#555; border: #555 solid 1px; } .info a { font-family: sans-serif; font-size: 14px; font-weight:normal; color: #333; text-align: left; text-decoration:none; } .portfolio-sections img { border:none; width:100%; height:auto; margin: 0 0 0 0; } .portfolio-sections h2 { font-weight: 100; margin: 20px 0 20px 20px; } .portfolio-sections p { font-size:13px; margin: 20px 0 20px 20px; line-height:16px; } .album-project { width: 100%; } .album-project::after { display: table; clear: both; content: ''; } .list3 { position:relative; float: left; width: 32.2%; margin: 1.5% 1.1% 0 0; height: auto; border: none; } .list3 a img { display:block; width: 100%; height: auto; border: none; } /* Buttons------------------------------------------------ */ .opn-btn-sml-l a {font-size:12px; border: #999 dotted 1px; color:#777; height:auto; width:auto; padding:6px 10px 6px 10px; margin:15px 0 0 0; text-align:center; text-transform:none; position:absolute; bottom:0; left:0; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease;} .opn-btn-sml-l a:hover {color:#555; border: #555 solid 1px;} .opn-btn-sml a {font-size:12px; border: #999 dotted 1px; color:#777; height:auto; width:auto; padding:6px 10px 6px 10px; margin:15px 0 0 0; text-align:center; text-transform:none; position:absolute; bottom: 0; right:0; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease;} .opn-btn-sml a:hover {color:#555; border: #555 solid 1px;} @media only screen and (max-width: 640px) {.opn-btn-sml a, .opn-btn-sml-l a {bottom: 12px;}} .to-top { background-color:#999; position:absolute; width:32px; height:32px; bottom: 0; right: 0; position: sticky; position: -webkit-sticky; z-index:3; } .form-calc { position:relative; width:auto; margin: 40px 0 20px 6px; height:auto; } .form-calc-2 { position:relative; width:auto; margin: 40px 0 35px 0; height:auto; } .pole2 { background-color: #f7f8f9; width: 100px; height: 41px; border: 1px solid #2c3247; padding: 4px; margin: 0 5px 0 0; font: 24px sans-serif; color: #222; font-weight: bold; text-align:center; background-image: none; border-radius: 0; } .pole2:hover { box-shadow: 0px 5px 27px 5px rgba(54, 97, 129, 0.31); -webkit-box-shadow: 0px 5px 27px 5px rgba(54, 97, 129, 0.31); -moz-box-shadow: 0px 5px 27px 5px rgba(54, 97, 129, 0.31); -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; } input.text, textarea, select { background: #FCFCFC; border: 1px inset #AAA; margin: 0.5em 0; padding: 4px 5px; } input.text:focus, textarea:focus, select:focus {background: #FFF;} input.button { width: 120px; height: 34px; border: 1px outset #3385ff; padding: 5px; background-color: #3385ff; color: #FFF; font: 14px Arial; font-weight: bold; cursor: pointer; -webkit-appearance: none; border-radius: 0; } input.button:active {border-style: inset;} input.button:hover { background: #003582; transition: 0.3s linear;} .button-small { padding: 10px 20px; margin: 0 0 25px 0; text-align: center; text-decoration: none; display: inline; font-size: 14px; background-color: white; color: #777; border: 2px solid #ccc; } .button-small:hover { color:#06F; border: 2px solid #06F; transition: 0.3s linear; cursor:pointer; } .button-small:active {color:#06F; border: 2px solid #039; cursor:pointer;} /* Filtering gallery-------------------------------------------------- */ .fixmidnav { border: none; background: #FFF; opacity: 0.95; height:auto; width:100%; padding: 16px 0 0 0; margin: 0 0 20px 0; visibility:visible; z-index:10; position:-webkit-sticky; position:sticky; top:44px; } .filterDiv { float: left; display: none; } .show { display: block;} .container {margin-top: 20px; overflow: hidden;} /* Style the buttons */ .btn { width: auto; border: none; outline: none; padding: 12px 14px; margin: 0 0 3px 0; background-color: #fcfcfc; cursor: pointer; z-index: 10; opacity:0.90; backdrop-filter: blur(5px); box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s; } .btn:hover {background-color: #ddd;} .btn.active { background-color: #228b22; color: white;} /* Price-------------------------------------------------- */ .s36 {font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666;} .s39 {font-family: Arial, Helvetica, sans-serif; font-size: 22px; color: #0E2749; font-weight: 100;} .st-li {display:block; float:right;} .s-li-rub {font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666;} .s-li { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #003153; font-weight: bold; } .table-price {width:100%; height:auto;} .table-price:after {clear:both;} .columns {float: left; width: 31.7%; padding: 5px; margin: 15px 0 50px 0;} .price {list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s;} .price:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); cursor: pointer;} .price .header-price {font-family: sans-serif; background-color: #353d59; color: white; border: #2c3247 solid 1px; font-size: 18px; font-weight:200; -webkit-box-shadow: 0px -5px 5px -5px rgba(34, 60, 80, 0.6) inset; -moz-box-shadow: 0px -5px 5px -5px rgba(34, 60, 80, 0.6) inset; box-shadow: 0px -5px 5px -5px rgba(34, 60, 80, 0.6) inset;} .price li {border-bottom: 1px solid #E5E5E5; padding: 20px; text-align: left;} .price .grey {background-color: #f7f8f9; font-size: 13px; font-family: sans-serif;} ul.li-sostav li {padding: 6px 0 6px 5px; font-size: 13px; font-family: sans-serif;} .button-price { background-color: #2F70AF; transition: 0.3s linear; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } .button-price:hover {background-color: #353d59; transition: 0.3s linear;} /* Change the width of the three columns to 100% (to stack horizontally on small screens) */ @media only screen and (max-width: 640px) { .columns {width: 100%;} } /* Contacts------------------------------------------------*/ .our-contacts { width:auto; height: auto; background:#FFF; border-top: #4CAF50 solid 4px; padding: 28px 22px 22px 22px; box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);} .our-contacts a:hover {color:#09C;} .contacts-item {width:auto; height: 80px; background:#f5f5f5;} /* Header----------------------------------------------------------------------------*/ .header { height: 32px; width: 920px; /*border-bottom: solid 1px #ccc;*/ border: none; background-color: rgba(255, 255, 255, 0.80); backdrop-filter: blur(2px); text-align: left; padding: 12px 0 0 0; /*box-shadow: rgba(0, 0, 0, 0.14) -1px 2px 10px 2px;*/ } .header:after {display: table; clear: both; content: '';} a.bg-email, a.bg-phone, a.bg-telegram, a.bg-viber, a.bg-whatsapp { display: inline-block; vertical-align: middle; border: none; width: 20px; height: 20px; background: url('../img/contacts/css_sprites.png'); } a.bg-email, a.bg-phone { margin: 0 8px 0 0px; opacity: 0.7; } a.bg-telegram, a.bg-viber, a.bg-whatsapp { margin: 0 9px 0 0px; opacity: 0.6; } a.bg-email {background-position: -3px -3px;} a.bg-phone {background-position: -29px -3px;} a.bg-telegram {background-position: -55px -3px;} a.bg-viber {background-position: -81px -3px;} a.bg-whatsapp {background-position: -107px -3px;} a.bg-email:hover, a.bg-phone:hover, a.bg-telegram:hover, a.bg-viber:hover, a.bg-whatsapp:hover { opacity: 1; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .head-contacts-left img {margin: 0 8px 0 0px; border: none; opacity: 0.7;} .head-contacts-right img, .archcont img {margin: 0 15px 0 0px; border: none; opacity: 0.6;} .head-contacts-left a, .head-contacts-left, #head-contacts-right a, #head-contacts-right, .archcont a {vertical-align:middle; display:inline-block;} .head-contacts-left img:hover, .head-contacts-right img:hover, .archcont img:hover { opacity: 1; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s; } .header a:hover {color: #09F;} .head-contacts-right {width: 250px;} .head-contacts-left, .head-contacts-right {height:20px; float:left;} .archcons {margin: 0 0 0 0;} .archcons::after {display: table; clear: both; content: '';} .archcont {height:20px; position: relative; float:right; background:none; margin: 0px 0px 15px 0;} .head-contacts-left {float:left; margin: 0px 17px 10px 18px;} .head-contacts-left a, .head-contacts-left { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:400; color: #000; text-decoration: none; font-weight:bold;} .head-contacts-right {float:right; margin: 0px 25px 10px 0; display: table-cell; vertical-align: middle} .head-contacts-right a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight:400; color: #000; text-decoration: none; font-weight:normal; color:#777; display: table-cell; vertical-align: middle } .logocontainer {width: 100%; height: auto;} .logocontainer:after {display: table; clear: both; content: '';} .logoblock { float: left; width: 620px; height: 290px; padding: 0 0 0 0; margin-bottom: 30px; } .logoblock-wide { float: left; width: 100%; height: 290px; padding: 0 0 0 0; margin-bottom: 28px; } .logoblock-wide:after {display: table; clear: both; content: '';} .logoblock-main { float: left; width: 620px; height: 270px; padding: 0 0 0 0; margin-bottom: 30px; } .logo { width: 521px; padding: 0 0 0 0; margin: 0 auto; margin-top: 74px; background: none; } .logo-main { width: 521px; padding: 0 0 0 0; margin: 0 auto; margin-top: 138px; } .main-pic { width: 620px; padding: 0 0 0 0; margin: 0 0 16px 0; border-bottom: #000 solid 2px; } .main-pic-info { position:absolute; opacity:0.0; width: 100%; z-index:50; display:block; top:-15px; left:0; -webkit-transition: all 1.5s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 1.5s cubic-bezier(0.23,1,0.32,1); -o-transition: all 1.5s cubic-bezier(0.23,1,0.32,1); transition: all 1.5s cubic-bezier(0.23,1,0.32,1); } .main-pic-info:hover { opacity:0.7; -webkit-transition: all 1.0s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 1.0s cubic-bezier(0.23,1,0.32,1); -o-transition: all 1.0s cubic-bezier(0.23,1,0.32,1); transition: all 1.0s cubic-bezier(0.23,1,0.32,1); } /* Middle-------------------------------------------------------------------*/ .middle { width: 100%; position: relative; background: none; } .middle::after { display: table; clear: both; content: ''; } .content { float: left; width: 620px; padding: 0 0 0 0; background: none; border: none; } .content-main { width: 620px; padding: 0 0 0 0; background: #FFF; border: none; } .content-wide { float: left; width: 100%; padding: 0 0 0 0; background: none; border: none; } .section-title1, a.section-title1 { background: none; border: none; margin-bottom: 12px; margin-top: 30px; padding: 0px 0px 0px 0px; text-decoration: none; } .section-title2, a.section-title2 { background-color: none; font-family:Arial, Helvetica, sans-serif; color: #333; font-size:19px; font-weight: normal; border-top: 3px #444 solid; border-bottom: 1px #CCC dotted; margin: 0 0 19px 0; padding: 8px 0px 8px 0px; text-decoration: none; } .block-640 { width: 100%; height:auto; background: none; margin: 0 0 50px 0; } .block-640 a img, .block-640 img { width: 100%; height:auto; padding: 0 0 0 0; margin: 0 0 0 0; } .block-640 a img { -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; } .block-640 a img:hover {box-shadow:0 8px 12px 0 rgba(0,0,0,0.25); -webkit-box-shadow:0 8px 12px 0 rgba(0,0,0,0.25);} .block-640-title a { width: 100%; display:block; font-family:Arial, Helvetica, sans-serif; font-weight: normal; font-size: 22px; color: #000; margin: 0 0 10px 0; -webkit-transition: 0.6s ease; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; } .block-640-title a:hover {color:#06F} .block-640-info { width: 100%; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size: 12px; color: #999; margin: 10px 0 12px 0; line-height:1.1; } .block-640-button a { border: #888 solid 2px; } .zakaz-button a { border: #888 solid 1px; } .block-640-button a, .zakaz-button a { display: inline-block; font-family:Arial, Helvetica, sans-serif; color:#888; font-size:14px; padding: 8px 15px 8px 15px; text-align:left; margin: 0 12px 0 0; -moz-transition: 0.6s ease; -o-transition: 0.6s ease; -webkit-transition: 0.6s ease; transition: 0.6s ease; line-height:1.2; } .block-640-button a:hover {color: #FFF; border: #111 solid 2px; background-color:#2869d1;} .zakaz-button a:hover { color: #FFF; border: #111 solid 1px; background-color: #3E5F8A; } .block-3-info {width:100%; height:auto;} .block-3-info:after {display: block; clear: both; content: '';} .columns-info { width: 200px; height:120px; padding: 5px; background:#999; margin: 0 5px 15px 0; } .owl-carousel .item {height: auto; background: none; padding: 0 0 0 0; border: none;} .owl-carousel .item img { width: 100%; height: auto; margin: 5px 0 5px 0; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; } .owl-carousel .item-menu img { width: 100%; height: auto; margin: 10px 0 10px 0; border-left: #222 solid 3px; -moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s; transition: 0.5s; filter: brightness(0.96); } .owl-carousel .item img:hover { } .owl-carousel .item-menu img:hover { border-left: #09F solid 3px; } .owl-item-info a { display:block; height: auto; background: none; padding: 14px; border: #ccc dotted 1px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; line-height:1.3; color: #444; -moz-transition: 0.9s; -o-transition: 0.9s; -webkit-transition: 0.9se; transition: 0.9s; } .owl-item-info-q a { display:block; height: auto; background: url(../img/quotes-item.png) no-repeat top left;; padding: 10px; border: #ccc dotted 1px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; line-height:1.2; color: #444; -moz-transition: 0.8s; -o-transition: 0.8s; -webkit-transition: 0.8se; transition: 0.8s; } .owl-item-info-light a { display:block; height: auto; padding: 0px 10px 0px 10px; margin: 16px 10px 16px 0px; border-left: 3px #222 solid; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; line-height:1.2; color: #333; -moz-transition: 0.8s; -o-transition: 0.8s; -webkit-transition: 0.8se; transition: 0.8s; } .owl-item-info-light a:hover {border-left: 3px #09F solid;} .quotes-s {background: url(../img/quotes-item.png) no-repeat top left;} .owl-item-info a:hover {border: #444 solid 1px} .owl-item-info-q a:hover {background: url(../img/quotes-item-hover.png) no-repeat top left; border: #444 solid 1px; color: #333;} /* Fix Top Nav----------------------------------------------------------------------*/ .fix {width: 100%; padding: 0 0 0 0; height: 42px; background:#FFF;} .fixnav {width: 100%; padding: 0 0 0 0; height: 42px; background:#FFF;} .fixnav li a { float:left; display: inline-block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size: 19px; letter-spacing: 4px; width: 24.5%; height: 25px; margin: 0 3px 0 0; text-decoration: none; text-align:left; background: #FFF; color:#333; border:none; } .fixnav li a:hover {color: #09F;} .fixnav:after { display: table; clear: both; content: ''; } /* Bottom Nav---------------------------------------- */ .smartnav-main { width: 100%; height: auto; padding: 0 0 0 0; background: none; } .footer2 { width: 620px; border:none; background: none; } .footer2:after { display: table; clear: both; content: ''; } #workshop2, #folio2, #works2, #archinfo2 { float: left; background-color: none; margin: 0 0 18px 0; padding: 3px 0 10px 0; width: 152px; height: auto; border:none; border-top: #CCC solid 3px; text-decoration: none; } #workshop2, #folio2, #works2 {margin-right: 3px;} #archinfo2 {margin-right: 0;} #workshop2:hover, #menu-navi2:hover {border-top-color: #B00000;} #workshop2 .ai2 a:hover {color: #B00000;} #folio2:hover {border-top-color: #FF7E00;} #folio2 .ai2 a:hover {color: #FF7E00;} #works2:hover {border-top-color: #FFBA00;} #works2 .ai2 a:hover {color: #FFBA00;} #archinfo2:hover {border-top-color: #228B22;} #archinfo2 .ai2 a:hover {color: #228B22;} ul.ai2 { font-family: sans-serif; font-size: 13px; color: #000; font-weight: normal; font-style: normal; line-height: 22px; margin-left: 0px; padding-left: 0px; margin-bottom: 0px; padding-bottom: 0px; margin-top: 3px; position: relative; list-style-image: none; list-style-type: none; text-decoration: none; } .ai2 a, .ai2 a:visited {color: #000;} .topmnblock-main, .topmnblock { width: 100%; padding: 0 0 0 0; background:#FFF; } .topmnblock-main {height: 28px;} .topmnblock {height: 40px;} .topmnblock-main li a, .topmnblock li a { float:left; display: inline-block; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size: 19px; letter-spacing: 4px; width: 24.5%; height: 25px; margin: 0 3px 0 0; text-decoration: none; text-align:left; background: #FFF; color:#333; border:none; } .topmnblock-main li a:hover {color: #09F;} .topmnblock li a:hover {color: #09F;} /* Right Sidebar---------------------------------------------------------------------*/ .right-sidebar { float: right; margin: 0 0 0 30px; width: 270px; background: #FFF; } .nav-item, .nav-item a { width:100%; margin: 0 0 10px 0; padding: 0 0 0 0; background: #FFF; letter-spacing: 4px; height: 25px; color: #333; font-family: Arial, Helvetica, sans-serif; font-size:19px; border:none; text-decoration:none; } .nav-item a:hover { color: #09F; } .nav-content li a { display:block; width:270px; border-top: 1px #CCC dotted; list-style: none; color: #444; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:400; border-bottom: none; text-decoration:none; padding: 7px 0 10px 0; } .nav-content:first-child {border-top: none;} .nav-content li a:hover {color: #09F;} ul.nav-content {width: 270px; margin-bottom:22px;} /* Sticky-----------------------------------------------------------------------------*/ .sticky-content.fixed {position: fixed; top: 65px;} .sticky-content.fixed section { -moz-transition: 0.8s ease-in; -o-transition: 0.8s ease-in; -webkit-transition: 0.8s ease-in; transition: 0.8s ease-in; opacity: 0.8; background: none; z-index: 10; } .sticky-content.fixed section:hover { -moz-transition: 0.4s ease-out; -o-transition: 0.4s ease-out; -webkit-transition: 0.4s ease-out; transition: 0.4s ease-out; opacity:1.0; } /* Footer-----------------------------------------------------------------------------*/ .footer { width: 920px; height: 170px; background: none; border-top:#ccc 1px solid; padding: 0 0 4px 0; margin: 35px 0 0 0; } .footer-tags { height: auto; background: none; margin: 0 0 20px 0; } .footer-tags a { font-family:Arial, Helvetica, sans-serif; color:#999; font-size:12px; padding: 8px 10px 8px 10px; border: #999 dotted 1px; text-align:left; margin: 5px 5px 0 0; display:inline-block; } .footer-tags a:hover { color:#555; border: #555 solid 1px; -moz-transition: 0.3s linear; -o-transition: 0.3s linear; -webkit-transition: 0.3s linear; transition: 0.3s linear; } .footer-main { height:170px; background: none; border-top:#ccc 1px solid; padding: 0 0 4px 0; margin: 14px 0 0 0; } .footer-main:after { display: table; clear: both; content: ''; } .footer-tags-main { height: auto; background: none; width: 100%; margin: 0 0 18px 0; } .footer-tags-main a { font-family:Arial, Helvetica, sans-serif; color:#999; font-size:11px; padding: 3px 5px 5px 5px; border: #999 dotted 1px; text-align:left; margin: 4px 4px 0 0; display:inline-block; } .footer-tags-main a:hover { color:#555; border: #555 solid 1px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } .ftr-logo-soc-left img { margin: 3px 16px 0 0px; border: none; opacity: 0.6; float:left; } .ftr-logo-soc-right img { margin: 7px 16px 0 0px; border: none; opacity: 0.6; } .ftr-logo-soc-left img:hover, .ftr-logo-soc-right img:hover { opacity: 1; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; cursor:pointer; } .ftr-logo-soc-left, .ftr-logo-soc-right { height:45px; position: relative; float:left; background:none; font-family:Arial, Helvetica, sans-serif; color:#888; font-size:13px; line-height:14px; } .ftr-logo-soc-left, .ftr-logo-soc-right {vertical-align:middle; display:inline-block;} .ftr-logo-soc-left { float:left; margin: 10px 100px 15px 0; width:360px; } .ftr-logo-soc-right { float:left; margin: 10px 0 15px 0; } /* Responsive ------------------------------------------------------------------------------------*/ @media screen and (min-width: 940px) { .header {top: 0px; position: sticky; position: -webkit-sticky; z-index:2;} .archcons {display: none;} .hide {display: none;} .mobile-menu-top {display: none;} .desktop-hide {display: none;} } @media screen and (max-width: 940px) { .mobile-menu-top {visibility:visible; width:100%; height:50px; background-color:#494f63; top: 0px; position: sticky; position: -webkit-sticky; z-index:20; border-bottom: #4f5569 solid 1px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; -webkit-box-shadow: 0px 5px 5px 0px rgba(34, 60, 80, 0.42); -moz-box-shadow: 0px 5px 5px 0px rgba(34, 60, 80, 0.42); box-shadow: 0px 5px 5px 0px rgba(34, 60, 80, 0.42); } .mobile-menu-top nav#menu {display: none;} .mobile-logo { display: block; text-indent: -9999px; width: 35px; height: 35px; border:#FFF solid 1px; border-radius: 50%; margin-left: 0.4em; background: url(../img/logo/a4u-logo.svg); background-size: 35px 35px; } .mobile-menu-top-ul { display: flex; flex-flow: nowrap; list-style-type: none; flex-flow: nowrap; flex-direction: row; justify-content: center; align-items: center; transition: .5s; } .mobile-menu-top-ul li a { padding: 8px 0.9em; text-transform: uppercase; text-decoration: none; color: #FFF; font-weight: 400; font-size:0.9em; } .mobile-menu-top-ul li a:hover { background: #383e52; transition: .5s } .wrapper {width: 100%; min-width: 300px; max-width: 920px;} .footer { width: 100%; max-width: 920px; height: auto;} .ftr-logo-soc-left {display: none;} .right-sidebar, .header {display: none;} .logoblock {height: auto;} .logo img, .logo-main img {width: 100%;height: auto;} .wrapper {max-width: 620px;} .qrcode {display: none;} } @media (hover: none) and (pointer: coarse) { .logoblock-wide {height: auto; margin-bottom: 20px;} } @media screen and (max-width: 375px) { .card img, .card2 img { float:left; width:100%; height:auto; } .mobile-menu-top-ul li:first-child {display: none;} .mobile-menu-top-ul li:nth-child(2) {display: none;} .mobile-menu-top-ul li:nth-child(3) {display: none;} .content, .wrapper, .fixmidnav {width:100%;} .fix {display: none;} h3.tab-h3 {font-size: 3.4vw} h3.white {font-size: 5.1vw} .section-title1 h1 {margin-bottom: 10px; margin-top: 20px; font-size: 5.5vw;} .logoblock-wide {height: auto; margin-bottom: 20px;} } @media screen and (max-width: 430px) { .update-date {display: none;} .content, .wrapper {width:100%;} .content, .wrapper, .fixmidnav {width:100%;} .section-title1 h1 {margin-bottom: 10px; margin-top: 20px; font-size: 5.5vw;} .logoblock-wide {height: auto; margin-bottom: 20px;} .title-foliio, .title-foliio a {font-size: 18px; font-weight:bold;} .folio-info-2 {font-size: 14px; font-weight:normal; padding-top:20px;} } @media screen and (max-width: 640px) { .col2-left img, .col2-right img, .col3-left img, .col3-mid img, .col3-right img {width: 100%; float:left; height:auto; margin-bottom: 5vw;} .title_pic {font-size: 2.8vw;} .main-pic-info, .fixmidnav {display: none;} .wrapper-main {width: 100%; min-width: 300px; max-width: 620px;} .logoblock {width: 100%; max-width: 620px; max-height: 290px;} .logoblock-main {width: 100%; max-width: 620px; max-height: 270px;} .logo {width: 100%; max-width: 521px;} .logo-main {width: 100%; max-width: 521px;} .main-pic {width: 100%; max-width: 620px;} .content, .content-main, .footer2 { width: 100% !important; max-width: 620px; float: none; box-sizing: border-box; transition: all 0.4s ease-in-out; } .topmnblock, .footer {display: none;} /* Общий стиль подвала */ .footer2 { margin-top: 35px; background-color: #3C3F4A; color: #eee; padding: 18px 12px 50px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; } .footer2 a, .footer2 a:visited { color: #9d9ea8; transition: color 0.3s ease-in-out; } .footer2 a:hover { color: #fff; } .mobile-copyright { padding-top: 12px; border-top: #9d9ea8 solid 1px; color: #9d9ea8; transition: color 0.3s ease-in-out; } /* Блоки меню */ #workshop2, #folio2, #works2, #archinfo2 { float: none; width: 48%; min-width: 150px; background: none; border: none; border-top: 2px solid #9d9ea8; margin-bottom: 24px; transition: all 0.4s ease-in-out; } /* Размеры шрифтов для читаемости */ .ai2, .ai2 a { font-size: 15px; line-height: 1.6; } .wrapper {padding-bottom:0;} .ftr-logo-soc-right {display: none;} /*.content {width: 100%; max-width: 620px;} */ /* .content-main {width: 100%; max-width: 620px;}*/ /* .ftr-logo-soc-right {margin: 10px 0 35px 0;}*/ .archcont {float: left; margin: 15px 0 20px 0;} .title_pic {width: 100%; height:auto;} .responsive {width: 100%; height:auto;} .wrapper {width:92vw;} .wrapper-main {width:92vw;} .fix {height: 10vw; box-shadow: 0 4px 2px -4px rgba(0, 0, 0, 0.1);} .fixnav li a { font-size: 2.8vw; font-weight:bold; margin: 1vw 0.30vw 1.7vw 0; padding: 1.8vw 0 1.8vw 0; width:24.0%; height:auto; text-align:center; background-color: rgba(255, 255, 255, 0.85); border:none; } .smartnav-main {height: 12vw;} .topmnblock-main li a { font-size: 2.8vw; font-weight:bold; margin: 1vw 0.30vw 1.7vw 0; padding: 1.8vw 0 1.8vw 0; width:24.0%; height:auto; text-align:center; background:#FFF; border:#CCC dotted 1px; } .topmnblock-main li a:hover { border:#333 solid 1px; color:#000; } .head-contacts-right {} .alignleft {float: none;} .card {margin: 6vw 0 0 0; padding: 0 0 2vw 0; height:auto;} .card-team {margin: 2.8vw 0 0 0; padding: 0 0 2vw 0;} .folio-info {margin: 20px 0 20px 0; width:100%; height:auto;} .team-info {margin: 20px 0 10px 0; width:100%; height:auto;} /*.footer2 {display: none;}*/ .col2-left, .col2-right { width: 100%; float:left; height:auto; margin-bottom: 20px; } .col3-left, .col3-mid, .col3-right { width: 100%; float:left; height:auto; } .img-block-respon img { width: 100%; float:left; height:auto; padding: 0 0 25px 0; } } @media (hover: none) and (pointer: coarse) { .fix {display:none;} } @media handheld, all and (max-width: 430px) { h1 {font-size: 5.4vw; font-weight: bold;} h2 {font-size: 5.4vw;} h3 {font-size: 5.3vw;} h5 {font-size: 4.5vw;} .fix {display:none;} .rounded-image-main {border-radius: 0;} .round-pic-color {display:none;} .round-pic-grey {display:none;} .main-pic-info, .fixmidnav {display: none;} .footer {display: none;} .section-title2, .section-title2 a {font-size: 4.5vw; font-weight: 500; margin: 0 0 5.3vw 0;} img.alignleft, img.left {width:97%;height:auto;} .footer2 {display: none;} .fixnav li a, .topmnblock-main li a { font-size: 3.15vw; font-weight:bold; margin: 1.4vw 0.3vw 1.7vw 0; padding: 1.8vw 0 1.8vw 0; width:24.0%; height:auto; text-align:center; letter-spacing:2px; background-color: rgba(255, 255, 255, 0.85); border:none; } .card {margin-top: 9vw;} .ftr-logo-soc-left, .ftr-logo-soc-right, .footer-tags-main {display:none;} .wrapper {width:92vw;} .columns { float: left; width: 97%; padding: 5px; margin: 15px 0 50px 0; } .card img { float:left; width:100%; height: auto; } .list3 { width: 48.8%; margin: 1.5% 1.1% 0 0; } .card-team {margin: 0 0 0.5vw 0;} .owl-carousel img { width: 100%; height: auto; } .content, .content-main, .footer2 { width: 100% !important; max-width: 620px; float: none; box-sizing: border-box; transition: all 0.4s ease-in-out; } .topmnblock, .footer {display: none;} /* Общий стиль подвала */ .footer2 { margin-top: 35px; background-color: #3C3F4A; color: #eee; padding: 18px 12px 50px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out; } .footer2 a, .footer2 a:visited { color: #9d9ea8; transition: color 0.3s ease-in-out; } .footer2 a:hover { color: #fff; } .mobile-copyright { padding-top: 12px; border-top: #9d9ea8 solid 1px; color: #8d8f99; transition: color 0.3s ease-in-out; } /* Блоки меню */ #workshop2, #folio2, #works2, #archinfo2 { float: none; width: 48%; min-width: 140px; background: none; border: none; border-top: 2px solid #9d9ea8; margin-bottom: 24px; transition: all 0.4s ease-in-out; } /* Размеры шрифтов для читаемости */ .ai2, .ai2 a { font-size: 15px; line-height: 1.7; } .wrapper {padding-bottom:0;} .ftr-logo-soc-right {display: none;} } /* Mosaic flow------------------------------ */ #imgflowcont, #imgflowcont2, #imgflowcont3 {width:100%; margin-bottom:40px;} #imgflowcont::after, #imgflowcont2::after, #imgflowcont3::after {display: table; clear: both; content: '';} .mosaicflow {width:100%;} .mosaicflow__column {float:left;} .mosaicflow__item {position:relative; margin: 3px 3px 6px 3px;} .mosaicflow__item img {background-color: #f7f8f9; display:block; width:100%; height:auto;} .mosaicflow__item:hover p, .list3:hover p {opacity:0.8;} .mosaicflow__item p, .list3 p { position:absolute; bottom:0; left:0; width:100%; margin:0; padding:5px; background:#494f63; color:#fff; font-size:12px; text-shadow:1px 1px 1px hsla(0,0%,0%,.75); opacity:0; box-sizing:border-box; } /* Twenty-twenty----------------------------------- */ .z:hover {opacity:1; cursor: zoom-in;} .z { z-index:50; display:block; width: 22px; height: 22px; position:absolute; top:6px; right:3px; margin:0; border: #FFF 2px solid; box-sizing:border-box; background: url(../img/increase-size.png) center no-repeat; opacity:0.9; -webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); -o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1); transition: all 0.4s cubic-bezier(0.23,1,0.32,1); } .twenty, .twenty img {width: 100%; max-width: 920px; height: auto; background:none} .title-owl-twenty {font-size:13px; color:#555; padding: 10px 0 0 0} .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {width: 3px; height: 9999px; left: 50%; margin-left: -1.5px;} .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {width: 9999px; height: 3px; top: 50%; margin-top: -1.5px;} .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {position: absolute; top: 0; width: 100%; height: 100%;} .twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {-webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s;} .twentytwenty-before-label, .twentytwenty-after-label {-webkit-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity;} .twentytwenty-before-label:before, .twentytwenty-after-label:before {color: white; font-size: 13px; letter-spacing: 0.1em;} .twentytwenty-before-label:before, .twentytwenty-after-label:before { position: absolute; background: rgba(255, 255, 255, 0.2); line-height: 38px; padding: 0 22px;} .twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {top: 10%; margin-top: -12px;} .twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {left: 50%; margin-left: -50px; text-align: center; width: 90px;} .twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow { width: 0; height: 0; border: 6px inset transparent; position: absolute; } .twentytwenty-left-arrow, .twentytwenty-right-arrow { top: 50%; margin-top: -6px; } .twentytwenty-up-arrow, .twentytwenty-down-arrow { left: 50%; margin-left: -6px; } .twentytwenty-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; z-index: 0; overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .twentytwenty-container img { max-width: 920px; position: absolute; top: 0; display: block; } .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay { background: rgba(0, 0, 0, 0); } .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {opacity: 0;} .twentytwenty-container * {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} .twentytwenty-before-label {opacity: 0;} .twentytwenty-before-label:before {content: attr(data-content);} .twentytwenty-after-label {opacity: 0;} .twentytwenty-after-label:before {content: attr(data-content);} .twentytwenty-horizontal .twentytwenty-before-label:before {left: 3px;} .twentytwenty-horizontal .twentytwenty-after-label:before {right: 3px;} .twentytwenty-vertical .twentytwenty-before-label:before {top: 10px;} .twentytwenty-vertical .twentytwenty-after-label:before {bottom: 10px;} .twentytwenty-overlay { -webkit-transition-property: background; -moz-transition-property: background; transition-property: background; background: rgba(0, 0, 0, 0); z-index: 25; } .twentytwenty-overlay:hover {background: rgba(0, 0, 0, 0.5);} .twentytwenty-overlay:hover .twentytwenty-after-label {opacity: 1;} .twentytwenty-overlay:hover .twentytwenty-before-label {opacity: 1;} .twentytwenty-before {z-index: 20;} .twentytwenty-after {z-index: 10;} .twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid #FFF; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; } .twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); } .twentytwenty-left-arrow {border-right: 6px solid white; left: 50%; margin-left: -17px;} .twentytwenty-right-arrow {border-left: 6px solid white; right: 50%; margin-right: -17px;} .twentytwenty-up-arrow {border-bottom: 6px solid white; top: 50%; margin-top: -17px;} .twentytwenty-down-arrow {border-top: 6px solid white; bottom: 50%; margin-bottom: -17px;} /* Block downloads------------------------------------- */ .docs_block { max-width:620px; border: 1px dotted #e1e1e1; padding: 10px; margin-bottom:32px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height: 21px; color: #777; } .docs_block a { font-size: 12px; color: #024c8b; text-decoration: none; -moz-transition: 0.3s linear; -o-transition: 0.3s linear; -webkit-transition: 0.3s linear; transition: 0.3s linear; } .docs_block a:hover {color: #03F;} .pdf_bl_docs, .doc_bl_docs, .xls_bl_docs, .jpg_bl_docs { padding-left: 41px; min-height: 36px; margin-bottom: 10px; overflow: hidden; } .pdf_bl_docs {background: url(../img/docs/ico_pdf.png) no-repeat;} .doc_bl_docs {background: url(../img/docs/ico_doc.png) no-repeat;} .xls_bl_docs {background: url(../img/docs/ico_xls.png) no-repeat;} .jpg_bl_docs {background: url(../img/docs/ico_jpg.png) no-repeat;} .pdf_bl_docs span, .doc_bl_docs span, .xls_bl_docs span, .jpg_bl_docs span { font-size: 12px; display: block; color: #8f97a2; } /* Txt slider--------------------------------------------------------- */ #options {width:270px; margin:10px auto; text-align:right; color:#E5E5E5} #options a {text-decoration:none; color:#E5E5E5} #options a:hover {color:#E5E5E5} #acc {width:270px; list-style:none; color:#333; margin:0 auto 15px; line-height: inherit;} #acc h5 {width:230px; border:1px solid #eee; padding:10px 10px 10px; font-weight: 500; margin-top:10px; cursor:pointer; font-size:14px; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 0px; background-color: #f7f8f9} #acc h5:hover {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s;} ul#acc h5 { padding-left:25px; width:auto} #acc .acc-section {overflow:hidden; background:#fff} #acc .acc-content {width:250px; padding: 9px 9px 9px 9px; border:1px solid #eee; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#444; line-height:18px;} #acc .acc-content a {font-weight:bold; font-size:13px; color: #000;} #acc .acc-content a:hover {color: #06C;} #nested {width:248px; list-style:none; color:#444; margin-bottom:8px} #nested h5 {width:218px; border:1px solid #E5E5E5; padding: 28px 20px 28px 8px; font-weight: 500; margin-top:10px; cursor:pointer} #nested h5:hover {} #nested .acc-section {overflow:hidden; background:none} #nested .acc-content {width:216px; padding:18px 24px 22px 20px; border:none; background: none;} #nested .acc-selected {box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; transition: 0.3s} h5#type2 {text-transform:lowercase;} /* Lazyload----------------------------------------------------------- */ .lazy-load-box { opacity: 0; -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } /* Owl min---------------------------------------------------- */ .slider920 {} .owl-carousel, .owl-carousel .owl-item {-webkit-tap-highlight-color: transparent; position: relative} .owl-carousel {display: none; width: 100%; z-index: 1; margin: 0 0 30px 0;} .owl-carousel .owl-stage {position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden;} .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0 } .owl-carousel .owl-stage-outer {position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0);} .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0) } .owl-carousel .owl-item {min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none;} .owl-carousel .owl-item img {display: block; width: 100%;} .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {display: none} .no-js .owl-carousel, .owl-carousel.owl-loaded {display: block} .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0 0; color: inherit; border: none; padding: 0!important; font: inherit } .owl-carousel.owl-loading {opacity: 0; display: block;} .owl-carousel.owl-hidden {opacity: 0} .owl-carousel.owl-refresh .owl-item {visibility: hidden} .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .owl-carousel.owl-grab {cursor: move; cursor: grab;} .owl-carousel.owl-rtl {direction: rtl} .owl-carousel.owl-rtl .owl-item {float: right} .owl-carousel .animated {animation-duration: 1s; animation-fill-mode: both;} .owl-carousel .owl-animated-in {z-index: 0} .owl-carousel .owl-animated-out {z-index: 1} .owl-carousel .fadeOut {animation-name: fadeOut} @keyframes fadeOut { 0% {opacity:1} 100% {opacity:0} } .owl-height {transition: height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy {opacity: 0; transition: opacity .4s ease} .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] {max-height: 0} .owl-carousel .owl-item img.owl-lazy {transform-style: preserve-3d} .owl-carousel .owl-video-wrapper {position: relative; height: 100%; background: #000} .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease } .owl-carousel .owl-video-play-icon:hover {-ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn {display: none} .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease } .owl-carousel .owl-video-frame {position: relative; z-index: 1; height: 100%; width: 100%} /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots, .owl-theme .owl-nav {text-align: center; -webkit-tap-highlight-color: transparent;} .owl-theme .owl-nav {margin-top: 10px;} .owl-theme .owl-nav [class*=owl-] { color: #FFF; font-size: 16px; margin: 16px; padding: 4px 8px; background: #ccc; display: inline-block; cursor: pointer } .owl-theme .owl-nav [class*=owl-]:hover {background: none; color: #000; text-decoration: none;} .owl-theme .owl-nav .disabled {opacity: .2; cursor: default;} .owl-theme .owl-nav.disabled+.owl-dots {margin-top: 10px} .owl-theme .owl-dots .owl-dot {display: inline-block; zoom: 1;} .owl-theme .owl-dots .owl-dot span { width: 6px; height: 6px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #869791;} /* To top---------------------------------------------------- */ #back-top {position:fixed; bottom: 20px; right: 20px; padding: 0; margin: 0; z-index: 100;} #back-top a {width:64px; display:block; text-align:center; background-color: transparent; -webkit-transition:1s; -moz-transition:1s; transition:1s;} #back-top span {width:64px; height: 64px; display:block; margin: 0; padding: 0; background: url(../img/site-arrow-1.png) no-repeat center center; -webkit-transition:1s;-moz-transition:1s; transition:1s;} #back-top a:hover span {background-color: rgba(0,0,0,0.1);} #back-top span.wsap {width:64px; height: 64px; display:block; margin: 0; padding: 0; background: url(../img/wsap.png) no-repeat center center; -webkit-transition:1s;-moz-transition:1s; transition:1s;} #back-top span.mobile-menu {width:64px; height: 64px; display:block; margin: 0; padding: 0; background: url(../img/mobile-menu.svg) no-repeat center center; -webkit-transition:1s;-moz-transition:1s; transition:1s; background-size:50%; opacity:0.8} @media (max-width:550px) { #back-top {position:fixed; width: 100%; height: 58px; bottom: 0; right: 0; padding: 0; margin: 0; background-color: rgba(54,61,84,0.75); backdrop-filter: blur(2px); border-top:#CCC solid 1px;} #back-top a.verh {width:100%; display:block; text-align:center; } #back-top a {width:100%; display:block; text-align:center;} #back-top span {width: 18%; height: 30px; margin: 0; padding: 12px; background: url(../img/site-arrow-2.png) no-repeat center center; float:right;} #back-top span.wsap {width: 30%; height: 30px; margin: -12px; padding: 0; background: url(../img/wsap.svg) no-repeat center center; float:left; background-size: 30px 30px;} #back-top span.mobile-menu {margin:-22px; filter: invert(1); opacity:1} } /* Magnific popup---------------------------------------- */ .white-popups { position: relative; background: #FFF; padding: 22px; width: auto; max-width: 500px; margin: 20px auto; -webkit-box-shadow: 0px 5px 10px 11px rgba(34, 60, 80, 0.2); -moz-box-shadow: 0px 5px 10px 11px rgba(34, 60, 80, 0.2); box-shadow: 0px 5px 10px 11px rgba(34, 60, 80, 0.2); } .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur {cursor: progress;} .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-pointer; cursor: -webkit-pointer; cursor: pointer; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure {display: none;} .mfp-hide {display: none !important;} .mfp-preloader { color: #fff; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a {color: #fff;} .mfp-preloader a:hover {color: #FFF;} .mfp-s-ready .mfp-preloader {display: none;} .mfp-s-error .mfp-content {display: none;} button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner {padding: 0; border: 0;} .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus {opacity: 1;} .mfp-close:active {top: 1px;} .mfp-close-btn-in .mfp-close {color: #333;} .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #fff; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active {margin-top: -54px;} .mfp-arrow:hover, .mfp-arrow:focus {opacity: 1;} .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left {left: 0;} .mfp-arrow-left:after {border-right: 17px solid #FFF; margin-left: 31px;} .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F;} .mfp-arrow-right {right: 0;} .mfp-arrow-right:after {border-left: 17px solid #FFF; margin-left: 39px;} .mfp-arrow-right:before {border-left: 27px solid #3F3F3F;} .mfp-iframe-holder {padding-top: 40px; padding-bottom: 40px;} .mfp-iframe-holder .mfp-content {line-height: 0; width: 100%; max-width: 1400px;} .mfp-iframe-holder .mfp-close {top: -40px;} .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure {margin: 0;} .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; font-size: 13px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content {max-width: 100%;} .mfp-gallery .mfp-image-holder .mfp-figure {cursor: pointer;} @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /* Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow {-webkit-transform: scale(0.75); transform: scale(0.75);} .mfp-arrow-left {-webkit-transform-origin: 0; transform-origin: 0;} .mfp-arrow-right {-webkit-transform-origin: 100%; transform-origin: 100%;} .mfp-container {padding-left: 6px; padding-right: 6px; } } /* Облако тегов */ #tagscloud{ background: url(../zakazat-proekt-doma/zakazat-proekt-doma-brain.jpg) center no-repeat; width:320px; height:320px; position:relative; font-size:14px; color:#333; margin:20px auto 0; text-align:center; } #tagscloud a{ position:absolute; top:0px; left:0px; color:#333; font-family:Arial; text-decoration:none; margin:0 10px 15px 0; line-height:18px; text-align:center; font-size:12px; padding:1px 5px; display:inline-block; border-radius:3px; } #tagscloud a.tagc1{background:#666; color:#fff;} #tagscloud a.tagc2{background:#F16E50; color:#fff;} #tagscloud a.tagc3{background:#006633; color:#fff;} #tagscloud a:hover{color:#fff; background:#0099ff;} /* Flying particles */ #particles-js{width: auto; height: 500px; background: #FFF; margin-bottom: 48px;} /* Scrolling progress */ .progress-container {width: 100%; height: 2px; background: #ccc; position:relative; clear:both; border: none; backdrop-filter: blur(5px);} .progress-bar {height: 2px; background: #09F; width: 0%;} /* Loader IMG owl */ #pre-div { background-color: #FFF; bottom: 0; height: 100%; width: 100%; left: 0; position: fixed; right: 0; top: 0; z-index: 10000; } #loader { background-image: url("../img/rhombusloader.gif"); background-position: center center; background-repeat: no-repeat; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 200px; } label { display: block; } .option-input { vertical-align: middle; } .option-label { display: flex; align-items: center; } .highlight-text { font-weight:bold; background-color: #FFFF00; } p.btmspc { margin-bottom: 8px;} .blockquote-1 { box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2); margin: 16px 16px 65px 16px; padding: 10px 24px; position: relative; font-size: 16px; background: #efefef; color: #000; font-style: italic; } .blockquote-1::before { border: 14px solid transparent; border-top: 14px solid #efefef; border-bottom: 0; height: 0; width: 0; border-top-width: 25px; content: ''; display: block; position: absolute; left: 40px; bottom: -25px; transform-origin: center; transform: rotate(90deg) skew(-25deg) translateY(17px); } .blockquote-1 cite { position: absolute; bottom: -24px; left: 62px; font-size: 13px; font-style: normal; font-weight: 300; color: #000; } /*_____Author Box_____*/ .author-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; background: #f7f7f7; max-width: 620px; padding: 28px 20px 20px 28px; margin-top: 50px; border-radius: 5px; } .author-img { height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .author-img img {width:100px;border-radius: 50% 50% 50% 50%;} .author-txt { margin-left: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .author-txt h4 {font-weight:500;font-size:18px;padding:0;} .author-txt p {font-size: 12px;} .grayscale {-webkit-transition: all 1s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;-ms-transition: all 2s ease;transition: all 1s ease;-webkit-filter: grayscale(100%) opacity(70%);filter: grayscale(100%) opacity(70%);} .grayscale:hover {-webkit-transition: all 1s ease;-moz-transition: all 2s ease;-o-transition: all 2s ease;-ms-transition: all 2s ease;transition: all 1s ease;-webkit-filter: grayscale(0%);filter: grayscale(0%) opacity(100%);} .grid1 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3px; align-items: start; justify-items: center; } .grid1 img { max-width: 100%; vertical-align:middle; line-height:none; display: block; } .grid1 img:nth-child(1) { grid-column: span 3; grid-row: span 2; } .grid2 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3px; align-items: start; justify-items: center; } .grid2 img { max-width: 100%; vertical-align:middle; line-height:none; display: block; } .grid2 img:nth-child(2) { grid-column: span 2; grid-row: span 2; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 3px; align-items: start; justify-items: center; } .grid3 img { max-width: 100%; vertical-align:middle; line-height:none; display: block; } .grid3 img:nth-child(2) { grid-column: span 1; grid-row: span 3; } .feedback { border-radius: 10px; padding: 30px 150px 40px 40px; margin-top: 40px; -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2); } @media (max-width:620px) { padding: 20px 195px 20px 20px; } .facades {background: url(../img/feed-1.png) right bottom no-repeat; background-color:#F5F5F5;} .facades2 {background: url(../img/feed-5.png) right bottom no-repeat; background-color:#F5F5F5;} .facades3 {background: url(../img/feed-7.png) right bottom no-repeat; background-color:#F5F5F5;} .facades4 {background: url(../img/feed-8.png) right bottom no-repeat; background-color:#F5F5F5;} .facades5 {background: url(../img/feed-19.png) right no-repeat; background-color:#F5F5F5;} .facades6 {background: url(../img/feedback-facades6.png) right no-repeat; background-color:#F5F5F5;} .facades7 {background: url(../img/feedback-facades7.png) right no-repeat; background-color:#F5F5F5;} .facades8 {background: url(../img/feedback-facades8.png) right no-repeat; background-color:#F5F5F5;} .facades-ghotic {background: url(../img/feed-15.png) right bottom no-repeat; background-color:#F5F5F5;} .zabor1 {background: url(../img/feed-9.png) right bottom no-repeat; background-color:#F5F5F5;} .kotelnaja {background: url(../img/feed-2.png) right no-repeat; background-color:#F5F5F5;} .electro {background: url(../img/feed-3.png) right bottom no-repeat; background-color:#F5F5F5;} .engineering {background: url(../img/feed-4.png) right bottom no-repeat; background-color:#F5F5F5;} .coloristics {background: url(../img/feed-6.png) right no-repeat; background-color:#F5F5F5;} .constructions {background: url(../img/feed-10.png) right no-repeat; background-color:#F5F5F5;} .architecture1 {background: url(../img/feed-11.png) right no-repeat; background-color:#F5F5F5;} .architecture2 {background: url(../img/feed-14.png) right no-repeat; background-color:#F5F5F5;} .architecture3 {background: url(../img/feed-18.png) right no-repeat; background-color:#F5F5F5;} .architecture4 {background: url(../img/feedback-architecture4.png) right no-repeat; background-color:#F5F5F5;} .architecture5 {background: url(../img/feedback-architecture5.png) right no-repeat; background-color:#F5F5F5;} .electro-video {background: url(../img/feed-13.png) right no-repeat; background-color:#F5F5F5;} .illumination {background: url(../img/feed-16.png) right bottom no-repeat; background-color:#22314e; color:#ccc;} .summer-kitchen {background: url(../img/feed-17.png) right no-repeat; background-color:#F5F5F5;} .txt-illumi {color: #FFF; text-shadow: 0 0 6px #ebd491;} .backfeed {background: url(../img/patterns/paper_fibers.png);} .rounded-image {border-radius: 12px;} .rounded-image-gallery {border-radius: 6px;} .rounded-image-main {border-radius: 20px;} .title-rounded-image { height: auto; width: 92%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #555; text-align: left; border: none; border-spacing: 0; padding: 0 0 0 0; margin: 0 4% 28px 4%; margin-top: 10px; } .animated-underline li a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size .4s; } .animated-underline li a:hover { background-size: 100% 1px; } .round-pic-grey { filter: grayscale(100%); border-radius: 50%; object-fit: cover; overflow: hidden; } .round-pic-color { filter: opacity(90%); border-radius: 50%; object-fit: cover; overflow: hidden; } .dark-filter { filter: brightness(0.97); background-color: #ebeced; } .tg-border {border: #09F solid 2px;} .highlight { font-size:21px; font-weight:lighter; background: #546778; padding: 14px 14px 14px 32px; color: #FFF; } .highlight-small { background: #3d97f0; padding: 2px 18px 6px 18px; color: #FFF; -webkit-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); -moz-box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2); } .round-pic-architects { filter: opacity(90%); border-radius: 10px; object-fit: cover; overflow: hidden; } .easy-zoom-effect { transition: transform 0.5s ease; } .easy-zoom-effect:hover { transform: scale(1.07); } .hide-all {color:#CCC; display: none;} .txt-block-accent-1 {background-color:#f7f8f9; padding: 28px; border: 1px #f7f8f9 solid; border-radius:0px;} .txt-block-accent-2 {background-color:#E8FDF9; padding: 28px; border: 1px #f7f8f9 solid; border-radius:0px;} .h2-effect-1 {border-bottom: 1px #E5E5E5 solid; padding-bottom: 6px;} .centered-position { display: block; margin-left: auto; margin-right: auto; text-align:center; } .update-date { background: none; padding: 2px 2px 2px 2px; color: #999; font-size:14px; text-align:right; margin-bottom: 28px; width:auto; } .effect-grey-red-underline, .effect-grey-orange-underline, .effect-grey-yellow-underline, .effect-grey-green-underline {position: relative; display: block; margin: 0; padding-bottom: 6px;} .effect-grey-red-underline::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #E5E5E5;} .effect-grey-red-underline::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #B00000; transition: width 0.4s ease;} .effect-grey-orange-underline::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #E5E5E5;} .effect-grey-orange-underline::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #FF7E00; transition: width 0.4s ease;} .effect-grey-yellow-underline::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #E5E5E5;} .effect-grey-yellow-underline::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #FFBA00; transition: width 0.4s ease;} .effect-grey-green-underline::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #E5E5E5;} .effect-grey-green-underline::after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #228B22; transition: width 0.4s ease;} /* При hover на блоке красная линия растёт на всю ширину */ .col2-left:hover .effect-grey-red-underline::after {width: 100%;} .col2-right:hover .effect-grey-orange-underline::after {width: 100%;} .col2-left:hover .effect-grey-yellow-underline::after {width: 100%;} .col2-right:hover .effect-grey-green-underline::after {width: 100%;} /* --- Блок автора / даты публикации --- */ .publish-meta { margin: 20px 0 30px 0; padding: 15px 20px; background: #f7f8f9; border: 1px solid #ebebeb; border-radius: 0.2em; display: flex; align-items: center; gap: 20px; color: #a29cb0; } .author-block { display: flex; align-items: center; gap: 20px; } .author-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid #ebebeb; opacity:0.7; } .author-info { display: flex; flex-direction: column; } .author-name { font-size: 0.95rem; font-weight: 600; color: #555; } .publish-date { font-size: 0.82rem; margin-top: 6px; color: #a29cb0; } /* --- Адаптивность --- */ @media (max-width: 620px) { .publish-meta { display:none; } .publish-meta { flex-direction: column; text-align: center; gap: 12px; } .author-block { flex-direction: column; gap: 12px; } .author-photo { width: 50px; height: 50px; } .author-name { font-size: 0.9rem; font-weight: 600; color: #555; } } .share-block { display: flex; align-items: center; gap: 14px; padding: 12px 0; max-width: 620px; } .share-title { color: #555; font-weight: 600; white-space: nowrap; font-size: 15px; } .share-icon img { width: 20px; height: 20px; display: block; opacity: 0.5; transition: opacity .2s ease, transform .2s ease; } .share-icon:hover img { opacity: 1; transform: translateY(-1px); } /* Адаптив */ @media (max-width: 480px) { .share-block { flex-wrap: wrap; gap: 10px 24px; } .share-title { flex-basis: 100%; margin-bottom: 4px; font-size: 15px; } .share-icon img { width: 25px; height: 25px; } } .share-count { font-size: 14px; color: #d1d1d1; margin-left: 10px; white-space: nowrap; } /* Для адаптива под мобильные */ @media (max-width: 480px) { .share-count { flex-basis: 100%; margin-left: 0; margin-top: 6px; } }