/*GENERAL*/ body { font-family: 'Montserrat', sans-serif; background: #f8f8ff; } @gray: #2b2b2b; @red: #990000; @white: #f8f8ff; @lightred: rgba(153, 0, 0, 0.5); @superlightred: rgba(153, 0, 0, 0.2); @black: #C3C4BE; @lightwhite: rgba(255, 255, 255, 0.5); @dark: #454545; @darkgray: #eaeaf2; /* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /*HEADER*/ header { padding: 25px 0; &.notfront { border-bottom: 1px solid @red; } .site-mobile-menu { display: none; padding-top: 2px; button.menu-btn { background: transparent; border: none; font-size: 18px; outline: none; &:hover, &:focus { color: @red; text-decoration: none; } } } .site-menu { ul { list-style: none; padding-left: 0; text-align: right; margin-bottom: 0; padding-top: 18px; li { display: inline-block; margin-left: 20px; font-size: 14px; font-weight: 500; a { color: @gray; &:hover, &:focus { color: @red; text-decoration: none; } } &.active { a { color: @red; } } } } } .site-logo { img { max-width: 100%; } } } .pushy-content { ul { list-style: none; padding-left: 20px; } } @media (max-width: 767px) { header .site-menu ul li { margin-left: 15px; } header .site-menu ul { padding-top: 5px; } } @media (max-width: 575px) { .site-menu { display: none; } header .site-mobile-menu { display: block; } header .container { width: 320px; } } /*FRONT PAGE*/ .front-page-slider { .services-slider { .front-slide { position: relative; text-align: center; height: 480px; overflow: hidden; .slide-title { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 38px; color: @white; font-weight: 700; background: @lightred; padding: 15px 40px; text-transform: uppercase; width: fit-content; text-align: center; p { margin-bottom: 0; } } img { margin: 0 auto; position: absolute; left: 50%; top: 0; height: 100%; width: auto; transform: translateX(-50%); } } .slick-next { right: auto; left: 50%; bottom: 15px; top: auto; width: 21px; height: 25px; transform: translateX(-490px); z-index: 900; &:before { background: url(../img/arrow_button_1.png); width: 100%; height: 100%; background-repeat: no-repeat; content: " "; position: absolute; top: 0; left: 0; } } .slick-prev { right: auto; left: 50%; bottom: 15px; top: auto; width: 21px; height: 25px; transform: translateX(-520px); z-index: 900; &:before { background: url(../img/arrow_button_2.png); width: 100%; height: 100%; background-repeat: no-repeat; content: " "; position: absolute; top: 0; left: 0; } } } } section.front-news { padding-top: 40px; .section-title { color: @red; font-size: 20px; font-weight: 500; position: relative; padding-left: 30px; &:before { content: " "; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: @red; } } .news-row { margin-top: 40px; } .big-news { .inner { position: relative; height: 540px; overflow: hidden; img { position: absolute; top: 50%; left: 50%; height: 100%; transform: translateX(-50%) translateY(-50%); } .news-info { bottom: 0; position: absolute; width: 100%; .news-title { width: 100%; margin-bottom: 0; background: @lightred; color: @white; font-size: 20px; font-weight: 600; padding: 20px 50px; } .news-date { color: @white; background: @superlightred; margin-bottom: 0; width: fit-content; padding: 15px 20px; font-size: 20px; font-weight: 700; } } &:hover, &:focus { .news-info { .news-title { color: @black; text-decoration: underline; } } } } } .mini-news { .inner { position: relative; height: 255px; overflow: hidden; img { position: absolute; top: 50%; left: 50%; height: 100%; transform: translateX(-50%) translateY(-50%); } .news-info { bottom: 0; position: absolute; width: 100%; .news-title { width: 100%; margin-bottom: 0; background: @lightred; color: @white; font-size: 14px; font-weight: 600; padding: 10px 15px; } .news-date { color: @white; background: @superlightred; margin-bottom: 0; width: fit-content; padding: 10px 15px; font-size: 14px; font-weight: 700; } } &:hover, &:focus { .news-info { .news-title { color: @black; text-decoration: underline; } } } } &:nth-child(n+3) { margin-top: 30px; } } .more-news { text-align: center; margin-top: 40px; margin-bottom: 40px; a { color: @dark; font-size: 18px; font-weight: 600; text-decoration: underline; &:hover, &:focus { color: @red; } } } } @media ( max-width: 1199px) { .front-page-slider .services-slider .front-slide { height: 370px; } .front-page-slider .services-slider .slick-prev { transform: translateX(-450px); } .front-page-slider .services-slider .slick-next { transform: translateX(-420px); } section.front-news .big-news .inner { height: 450px; } section.front-news .mini-news .inner { height: 210px; } } @media ( max-width: 991px) { .front-page-slider .services-slider .slick-prev { transform: translateX(-350px); } .front-page-slider .services-slider .slick-next { transform: translateX(-320px); } section.front-news .big-news .inner { height: 600px; margin-bottom: 30px; } section.front-news .mini-news .inner { height: 330px; } } @media ( max-width: 767px) { .front-page-slider .services-slider .front-slide .slide-title { font-size: 26px; } .front-page-slider .services-slider .front-slide { height: 290px; } .front-page-slider .services-slider .slick-prev { transform: translateX(-270px); } .front-page-slider .services-slider .slick-next { transform: translateX(-240px); } section.front-news .big-news .inner { height: 510px; } section.front-news .mini-news .inner { height: 240px; } } @media ( max-width: 575px) { .front-page-slider .services-slider .front-slide { height: 250px; } .front-page-slider .services-slider .front-slide .slide-title { font-size: 20px; padding: 15px; width: 100%; } .front-page-slider .services-slider .slick-prev { transform: translateX(-140px); } .front-page-slider .services-slider .slick-next { transform: translateX(-110px); } .front-news .container { width: 320px; } section.front-news .big-news .inner .news-info .news-date { font-size: 14px; padding: 10px 15px; } section.front-news .big-news .inner .news-info .news-title { font-size: 14px; padding: 10px 15px; } section.front-news .big-news .inner { height: 290px; } section.front-news .mini-news .inner { height: 290px; margin-bottom: 30px; } section.front-news .mini-news:nth-child(n+3) { margin-top: 0px; } } /*FOOTER*/ footer { background: @darkgray; padding: 60px 0; .footer-contacts { font-size: 14px; font-weight: 500; color: @dark; p { margin-bottom: 0; } a { color: @dark; &:hover, &:focus { color: @red; text-decoration: none; } } } .footer-policy { text-align: center; font-size: 14px; font-weight: 500; color: @dark; a{ color: @dark; &:hover, &:focus { color: @red; text-decoration: none; } } .footer-social { width: 100%; text-align: center; height: 50px; position: relative; a { width: 33px; height: 33px; position: absolute; &.vk-link { transform: translateX(-45px); background: url(../img/vk_01.png); background-repeat: no-repeat; left: 50%; &:hover, &:focus { background: url(../img/vk_02.png); } } &.instagram-link { transform: translateX(45px); background: url(../img/instagram_01.png); background-repeat: no-repeat; right: 50%; &:hover, &:focus { background: url(../img/instagram_02.png); } } } } } .footer-wsw-copy { text-align: right; font-size: 14px; font-weight: 500; color: @dark; a{ color: @dark; &:hover, &:focus { color: @red; text-decoration: none; } } } } @media (max-width: 991px) { footer .footer-wsw-copy { margin-top: 30px; text-align: center; img { margin-top: -4px; } } } @media (max-width: 767px) { footer .footer-contacts { text-align: center; margin-bottom: 30px; } } @media (max-width: 575px) { footer .container { width: 320px; } } /*BREADCRUMBS*/ .page { .page-breadcrumbs { padding: 50px 0 30px; ol { list-style: none; padding-left: 0; color: @dark; font-size: 20px; font-weight: 500; li { color: @red; display: inline-block; a { color: @dark; &:hover, &:focus { color: @red; } } } } } } @media (max-width: 991px) { .page .page-breadcrumbs { padding: 30px 0 15px; } } @media (max-width: 767px) { .page .page-breadcrumbs ol { font-size: 16px; } } @media (max-width: 575px) { .page .page-breadcrumbs ol { margin-bottom: 5px; font-size: 14px; } } /*PAGE*/ .page { margin-bottom: 20px; h1 { color: @white; font-size: 48px; font-weight: 500; background: @red; width: fit-content; padding: 5px 45px; margin-bottom: 50px; } } @media (max-width: 991px) { .page h1 { font-size: 40px; } } @media (max-width: 575px) { .page { .container { width: 320px; } h1 { font-size: 30px; margin-bottom: 30px; } } } /*SERVICES PAGE*/ .page.services-page { .services-row { .service-block { margin-bottom: 30px; .inner { width: 100%; height: 540px; overflow: hidden; position: relative; img { position: absolute; height: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .service-title { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 75%; p { color: @white; background: @lightred; font-size: 24px; font-weight: 500; padding: 15px; } } &:hover, &:focus { .service-title { p { color: @black;; text-decoration: underline; } } } } } } } @media (max-width: 1199px) { .page.services-page .services-row .service-block .inner { height: 450px; } .page.services-page .services-row .service-block .inner .service-title { width: 90%; } } @media (max-width: 991px) { .page.services-page .services-row .service-block .inner { height: 330px; } .page.services-page .services-row .service-block .inner .service-title p { font-size: 20px; } } @media (max-width: 767px) { .page.services-page .services-row .service-block .inner { height: 510px; } .page.services-page .services-row .service-block .inner .service-title { width: 75%; } } @media (max-width: 575px) { .page.services-page .services-row .service-block .inner { height: 290px; } .page.services-page .services-row .service-block .inner .service-title { width: 100%; text-align: center; } .page.services-page .services-row .service-block .inner .service-title p { font-size: 16px; } } /*NEWS PAGE*/ .news-row { .news-block { margin-bottom: 30px; .news-inner-row { .image-div { .inner { position: relative; overflow:hidden; width: 100%; height: 255px; img { position: absolute; width: 100%; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } } } .text-div { .news-info { .news-date { color: @white; font-size: 18px; background: @red; width: fit-content; padding: 2px 15px; margin-top: 10px; } .news-title { color: @red; font-size: 20px; font-weight: 600; &:hover, &:focus { text-decoration: none; } } } .news-short-text { font-size: 16px; color: @dark; padding-top: 10px; line-height: 20px; } .news-link { padding-top: 10px; a { color: @dark; font-size: 18px; font-weight: 600; text-decoration: underline; &:hover, &:focus { color: @red; } } } } } } } @media (max-width: 1199px) { .news-row .news-block .news-inner-row .image-div .inner { height: 290px; } } @media (max-width: 991px) { .news-row .news-block .news-inner-row .image-div .inner { height: 210px; } .news-row .news-block .news-inner-row .text-div .news-info .news-date { font-size: 16px; margin-top: 5px; } .news-row .news-block .news-inner-row .text-div .news-info .news-title { font-size: 18px; line-height: 20px; } .news-row .news-block .news-inner-row .text-div .news-short-text { font-size: 14px; line-height: 18px; } .news-row .news-block .news-inner-row .text-div .news-link a { font-size: 16px; } .news-row .news-block { margin-bottom: 50px; } } @media (max-width: 767px) { .news-row .news-block .news-inner-row .image-div .inner { height: 240px; margin-bottom: 15px; } } @media (max-width: 575px) { .news-row .news-block .news-inner-row .text-div .news-info .news-title { font-size: 16px; } } /*SINGLE SERVICE*/ .page.single-service-page { .page-text { .service-header { position: relative; img { max-width: 100%; } h1 { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: @lightred; } } .inner { margin-top: 30px; color: @dark; font-size: 18px; a { color: @red; font-weight: 500; } } .back { padding: 50px 0; a { color: @dark; font-size: 18px; font-weight: 600; text-decoration: underline; &:hover, &:focus { color: @red; } } } } } @media (max-width: 767px) { .page.single-service-page .page-text .service-header h1 { text-align: center; width: 100%; padding: 10px 0; } } @media (max-width: 575px) { .page.single-service-page .page-text .service-header h1 { font-size: 20px; } } /*SINGLE NEWS PAGE*/ .page.single-news-page { .page-text { h1 { font-size: 32px; background: transparent; color: @red; padding: 0; margin-bottom: 15px; font-weight: 600; } .inner { color: @dark; font-size: 16px; .news-img { width: 448px; float: left; padding: 15px 25px 15px 0; img { max-width: 100%; } } p.news-date { font-size: 18px; color: @dark; margin-bottom: 30px; } a { color: @red; font-weight: 500; } } } .back { padding: 50px 0; a { color: @dark; font-size: 18px; font-weight: 600; text-decoration: underline; &:hover, &:focus { color: @red; } } } } @media (max-width: 991px) { .page.single-news-page .page-text .inner .news-img { width: 348px; float: left; padding: 15px 15px 5px 0; } .page.single-news-page .page-text .inner p.news-date { font-size: 16px; margin-bottom: 20px; } } @media (max-width: 767px) { .page.single-news-page .page-text h1 { font-size: 28px; } .page.single-news-page .page-text .inner .news-img { width: 100%; float: none; padding: 0 0 15px; } } @media (max-width: 575px) { .page.single-news-page .page-text h1 { font-size: 24px; } } /*ABOUT PAGE*/ .page.about-page { .about-text { .section-title { color: @red; font-size: 20px; font-weight: 500; position: relative; padding-left: 30px; &:before { content: " "; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: @red; } } .about-text-content { padding-left: 100px; font-size: 18px; color: @dark; .certificates-div { .cert-div { text-align: center; margin-bottom: 30px; img { max-width: 100%; } } } a { color: @red; } } } .about-reviews { padding-bottom: 40px; .section-title { color: @red; font-size: 20px; font-weight: 500; position: relative; padding-left: 30px; &:before { content: " "; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: @red; } } .inner { padding-left: 100px; .reviews { padding: 0 40px; .reviews-slider { position: relative; a.slick-slide { outline: none; .reviews-img { outline: none; padding: 10px 15px; img { max-width: 100%; height: auto; } } } .slick-next { right: auto; right: -40px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); z-index: 900; &:before { background: url(../img/arrow_right.png); width: 100%; height: 100%; background-repeat: no-repeat; content: " "; position: absolute; top: 0; left: 0; } } .slick-prev { right: auto; left: -40px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); z-index: 900; &:before { background: url(../img/arrow_left.png); width: 100%; height: 100%; background-repeat: no-repeat; content: " "; position: absolute; top: 0; left: 0; } } } } } } .about-contacts { .section-title { color: @red; font-size: 20px; font-weight: 500; position: relative; padding-left: 30px; &:before { content: " "; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background: @red; } } .inner { padding-left: 100px; .contacts-row { padding-top: 20px; .contacts-block { position: relative; p.title { color: @dark; font-size: 20px; font-weight: 700; margin-bottom: 30px; } .ct-label { position: absolute; left: 5px; transform: translateX(-100%); } .content-block { font-size: 16px; line-height: 30px; color: @dark; a { color: @dark; &:hover, &:focus { color: @red; } } } } } } .about-map { margin-top: 30px; margin-bottom: 40px; } } } @media (max-width: 991px) { .page.about-page .about-contacts .inner .contacts-row .contacts-block { margin-bottom: 15px; } } @media (max-width: 767px) { .page.about-page .about-text .about-text-content, .page.about-page .about-reviews .inner { padding-left: 0; } .page.about-page .about-contacts .inner { padding-left: 40px; } } /*CONTENT PAGE*/ .page.content-page { .page-text { h1 { font-size: 32px; background: transparent; color: #990000; padding: 0; margin-bottom: 15px; font-weight: 600; } } } @media (max-width: 767px) { .page.content-page .page-text h1 { font-size: 28px; } } @media (max-width: 575px) { .page.content-page .page-text h1 { font-size: 24px; } } /*404*/ .page.content-page.page-404 { .page-text { min-height: 500px; } } /*SCIENCE ART*/ .page.services-page { .services-row { .service-block.science-art-block { .inner { height: 350px; .service-title { position: absolute; top: auto; left: 0; transform: none; width: 100%; bottom: 0; height: 100px; background: @lightred; p { margin-bottom: 0; background: transparent; } } } } } .sa-text { margin-top: 30px; color: @dark; font-size: 18px; padding-bottom: 30px; } } @media (max-width: 1199px) { .page.services-page .services-row .service-block.science-art-block .inner { height: 290px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title p { font-size: 20px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title { height: 90px; } } @media (max-width: 991px) { .page.services-page .services-row .service-block.science-art-block .inner { height: 330px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title p { font-size: 24px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title { height: 100px; } } @media (max-width: 575px) { .page.services-page .services-row .service-block.science-art-block .inner { height: 290px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title p { font-size: 20px; } .page.services-page .services-row .service-block.science-art-block .inner .service-title { height: 90px; } }