@font-face {
    font-family: "RobotoLight";
    src: url("../fonts/Roboto-Light.woff2") format("woff2"), 
        url("../fonts/Roboto-Light.woff") format("woff"), 
        url("../fonts/Roboto-Light.ttf") format("truetype");
}
@font-face {
    font-family: "RobotoRegular";
    src: url("../fonts/Roboto-Regular.woff2") format("woff2"), 
        url("../fonts/Roboto-Regular.woff") format("woff"), 
        url("../fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "RobotoBold";
    src: url("../fonts/Roboto-Bold.woff2") format("woff2"), 
        url("../fonts/Roboto-Bold.woff") format("woff"), 
        url("../fonts/Roboto-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "RobotoCondBold";
    src: url("../fonts/RobotoCondensed-Bold.woff2") format("woff2"), 
        url("../fonts/RobotoCondensed-Bold.woff") format("woff"), 
        url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
}

body, html {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f0f0f0;
}
* {
    box-sizing: border-box;
}
img {
    max-width: 100%;
}
 /* HEADER  START*/

header#header {
    display: flex;
    flex-direction: row;
    width: 100%;    
    justify-content: center;
    height:9.3vw;
}
.header_inner {
    width: 85%;
    display: flex;
    flex-direction: row;
    background: url(../images/header-bg.png) 85% center no-repeat;
    background-size: 60% 100%;
    justify-content: space-between;
    align-items: center;
}
.header_logo {
    display: flex;
    width: 10.62%;
    height: 100%;
    padding: 0.8% 1.6%;
    box-sizing: border-box;
}
.header_logo a {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}
.header_logo img {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}
.header_info {
    display: flex;
    flex-direction: column;
    width: 64%;
}
.header_info p {
    margin: 0;
    color: #000080;
    font-family: RobotoRegular;
    text-shadow: 0 0 0px #000080;
}
p.header_info-type {
    font-size: calc(10px + 0.65vw);
}
p.header_info-name {
    font-size: calc(10px + 1.04vw);;
    text-transform: uppercase;
}
p.header_info-description {
    font-size: calc(10px + 0.65vw);
}
.header_contacts {
    display: flex;
    flex-direction: column;
    width: 25%;        
    justify-content: center;
    align-items: flex-end;
    margin-top: 1.7vw;
}
.header_phones {
    font-size: calc(10px + 1.04vw);;
    font-family: 'RobotoRegular';
    justify-content: center;
    align-items: flex-end;
}
.header_phones a {
    text-decoration: none;
    color: #000080;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: 0 0 0px #000080;
}
.header_phones p {
    margin: 0;
    font-size: calc(10px + 1.04vw);;
}
.header_phones-main_icon {
    background: url("../images/phone.png");
    width: 24px;
    height: 24px;
    display: flex;
    background-size: 100% 100%;
    margin-right: 1vw;
}
.header_phones-mobile_icon {
    background: url("../images/mobile_phone.png");
    width: 24px;
    height: 24px;
    display: flex;
    background-size: 100% 100%;
    margin-right: 1vw;
}
.header_social {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 35%;
    margin-top: 0.8vw;
}
.header_social-vk {
    background: url("../images/vk.png");
    width: 30px;
    height: 30px;
    display: flex;
    background-size: 100% 100%;
}
.header_social-ok {
    background: url("../images/ok.png");
    width: 30px;
    height: 30px;
    display: flex;
    background-size: 100% 100%;
}
.header_social-telegram {
    background: url("../images/telegram.png");
    width: 30px;
    height: 30px;
    display: flex;
    background-size: 100% 100%;
}


 /* HEADER  END*/


  /* NAVIGATION  START*/

  #navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    background: #d0d0d0;
    position: relative;
}

#navigation > ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 85%;
    padding: 7px 0 2px;
    margin: 0;
    list-style-type: none;
    position: relative;    
}
#navigation > ul > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative; 
    background: url("../images/menuitem-bg.png");
    background-size: 100% 100%;
}
#navigation > ul > li:hover {
    background: url("../images/menuitem-bg-hover.png");
    background-size: 100% 100%;
}
#navigation > ul > li > a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    color: white;
    align-items: center;
    text-align: center;
    text-decoration: none;
    font-size: calc(10px + 0.45vw);
    text-transform: uppercase;
    font-family: 'RobotoCondBold';
    letter-spacing: 0.25px;
    padding: 5px;
}

#navigation > ul > li:hover > ul.submenu , #navigation > ul > li:hover >ul.mod-menu__sub {
    display: flex;
}
ul.submenu, ul.mod-menu__sub {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    list-style-type: none;
    min-width: 200%;
    top: 100%;
    padding: 0;
    margin: 0;
    left:0;
    z-index: 30;
}
ul.submenu > li, ul.mod-menu__sub > li {
    background: #0c3a67bf;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-top: 2px;
}
ul.submenu > li:hover , ul.mod-menu__sub > li:hover {
    background: #ff0000bf;
}
ul.submenu > li > a , ul.mod-menu__sub > li > a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    color: white;
    align-items: center;
    text-decoration: none;
    font-size: calc(10px + 0.25vw);
    text-transform: uppercase;
    font-family: 'RobotoRegular';
    letter-spacing: 0.1px;
    padding: 5px;
}

  /* NAVIGATION  END */

  /* SLIDER  START*/
.itc-slider  img {
    max-width: 100%;
    height: 100%;    
    width: 100%;
}
.slider_title {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 85%;
    left: 7.5%;
    background: #00000075;
    color: white;
    font-family: 'RobotoBold';
    font-size: 1.23vw;
    padding: 0.75vw 1.75vw;
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}
.slider_title .title {
    line-height: 100%;
    margin: 0;
    font-size: calc(10px + 1.35vw);
}
.corner_black {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent #000000 transparent;
}
  /* SLIDER  END*/

  /* SERVICE  START*/
#service, #service > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.service-wrapper {
    width: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 0;
}
.h3_main {
    font-family: "RobotoBold";
    font-size: calc(14px + 0.6925vw);
    text-transform: uppercase;
    color:#000080;
    letter-spacing: 0.25px;
    margin: 0.75vw 0;
}
.service-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0.75vw 0;
}

.service-items > a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin:0 0 1vw 0;
}
.service-item {
    height: 10.94vw;
    width: 16.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.service-item img {
    height: 99%;
    width: 99%;
}
img.service-item-image {
    display: flex;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 99%;
}
.service-item-bg {
    background: url(../images/service-item-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.service-item:hover .service-item-bg {
    background: url(../images/service-item-bg-hover.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.service-item-title {
    font-family: "RobotoRegular";
    text-transform: uppercase;
    color: white;
    letter-spacing: 0.1px;
    font-size: calc(10px + 0.45vw);
    margin: 0;
    position: absolute;
    z-index: 15;
    bottom: 0;
    padding: 0.3vw 0.45vw;
    line-height: 110%;
    width: 100%;
}
  /* SERVICE  END*/

  /* FORM  START*/

div#form-ordercall {
    background: #5dafff;
    padding: 0.625vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.form-ordercall_inner {
    display: flex;
    width: 85%;
    align-items: center;
    justify-content: space-between;
}
.form-ordercall_inner > div{
    display: flex;
    width: 31.5%;
    align-items: center;
    justify-content: left;
    position: relative;
}
.form-ordercall_inner input {
    display: flex;
    font-family: 'RobotoLight';
    width: 100%;
    font-size: calc(10px + 0.45vw);
    color: #000080;
    letter-spacing: 0.25px;
    padding: 0.834vw 1.2vw;
    border: none;
    outline: none;
    text-transform: uppercase;
}
.form-ordercall_inner input::placeholder {
    color: #000080;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}
.form-ordercall_top-corner {
    position: absolute;
    width: 0.85vw;
    height: 1.8vw;
    background: #5dafff;
    transform: rotate(45deg);
    top: -0.9vw;
    left: -0.2vw;
}
.form-ordercall_bottom-corner {
    position: absolute;
    width: 0.85vw;
    height: 1.8vw;
    background: #5dafff;
    transform: rotate(45deg);
    bottom: -0.9vw;
    right: -0.2vw;
}
.form-ordercall_submit-wrapper-button {
    padding: 0.834vw 1.2vw;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/callbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-transform: uppercase;
    font-size: calc(14px + 0.4vw);
    font-family: 'RobotoBold';
    letter-spacing: 0.25px;
    color:white;
    cursor:pointer;
}
  /* FORM  END*/

  /* BANNERS  START*/

#banners {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background: #d0d0d0;
}

.banners_inner {
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.75vw 0;
}
.banners_inner a {
    width: 31.5%;
}
  /* BANNERS  END*/

  /* MAIN  START*/
#main {
    width: 85%;
    margin: 0 7.5vw;
    flex-grow: 1;
}
#main .page-header h1 {
    text-transform: uppercase;
    font-size: calc(14px + 0.6925vw);
    font-family: 'RobotoBold';
    letter-spacing: 0.25px;
    color: #000080;
    text-align: center;
    width: 100%;
}

.com-content-category-blog__items.blog-items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}
.com-content-category-blog__item.blog-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 31.5%;
    margin: 20px 0;
}
figure.left.item-image {
    display: flex;
    width: 43%;
    margin: 0;
    padding: 0;
    margin-right: 2%;    
}
figure.left.item-image  a{
    display: flex;  
}
figure.left.item-image img {
    height: 100%;
}
.item-content {
    width: 55%;
}
.item-content .page-header h2 {
    margin: 0;
}
.item-content .page-header h2 a {
    font-family: 'RobotoBold';
    color: #000080;
    text-decoration: none;
    font-size: calc(10px + 0.45vw);
}
.item-content  dl.article-info.text-muted {
    margin-bottom: 0;
}
.item-content .published {
    margin: 0;
    padding: 0;
    font-size: calc(14px + 0.15vw);
    font-family: 'RobotoBold';
}
.item-content  p {
    font-size: calc(14px + 0.15vw);
    font-family: 'RobotoRegular';
    padding: 0;
    margin: 0;
}
p.readmore {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
}
p.readmore > a {
    background: #80c0ff;
    padding: 5px 10px;
    clip-path: polygon(0% 30%, 8% 0, 100% 0%, 100% 70%, 92% 100%, 0% 100%);
    text-decoration: none;
    font-family: 'RobotoRegular';
    text-transform: uppercase;
    font-size: calc(10px + 0.25vw);
    color: black;
    text-shadow: 0 0 black;
    cursor: pointer;
}
p.com-content-category-blog__counter.counter {
    display: none;
}

nav.pagination__wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
}
ul.pagination {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    margin: 10px 0 20px;
    list-style-type: none;
    width: 45%;
}
li.page-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
a.page-link {
    font-size: calc(14px + 0.375vw);
    text-decoration: none;
    font-family: 'RobotoBold';
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/page-wrap.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
    align-items: center;
    justify-content: center;
}
a.page-link:hover {
    color:red;
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/page-wrap-hover.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
}
li.active.page-item  a.page-link{
    color:red;
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/page-wrap-hover.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
}
li.disabled.page-item {
    filter: grayscale(1);
}
span.page-link {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/page-wrap.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
}
span.page-link:hover {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/page-wrap-hover.png);
    background-size: 35px 35px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-double-left {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/prev-start.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-double-left:hover {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/prev-start-hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-left {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/prev.png);
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-left:hover {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/prev-hover.png);
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-right {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/next.png);
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-right:hover {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/next-hover.png);
    background-size: 10px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-double-right {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/next-end.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
span.icon-angle-double-right:hover {
    display: flex;
    width: 35px;
    height: 35px;
    background: url(../images/next-end-hover.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}
  /* MAIN  END*/

  /* MAP  START*/

#map {
    display: flex;
    width: 100%;
    height: 100%;
    border-top:3px solid #000080;    
}
#map > p {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
#map img {
    display: flex;
    width: 100%;
}

/* MAP  END */

  /* FOOTER  START*/

#footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: url(../images/footer-bg.png) right center no-repeat;
    background-size: 100% 100%;
    border-top:2px solid #000080;
}
.footer_inner {
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.footer-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    width: 85%;
    padding: 0.75vw 0;
}
.footer-info p {
    margin: 0;
    font-size: calc(10px + 0.45vw);
    color: #000080;
    font-family: "RobotoRegular";
    line-height: 125%;
    text-shadow: 0 0 0px #000080;
}
.footer-info a {
    color: #000080;
    text-decoration: none;
}
p.footer-copyright {
    margin-bottom:1vw;
}
p.footer-privacy {
    color: #0000c8;
    margin-top:1vw;
    font-family: "RobotoLight";
}
.footer-icons {
    display: flex;
    flex-direction: column;
    width: 15%;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 2vh 0;
}
  /* FOOTER  END*/


@media screen and (min-width:1680px) and (max-width:1919px) {
    p.header_info-type, p.header_info-description  {
        font-size: calc(10px + 0.55vw);
    }
    p.header_info-name, .header_phones p {
        font-size: calc(10px + 0.94vw);
    }
    #navigation > ul > li > a {
        font-size: calc(10px + 0.366vw);
    }
    .header_social-vk, .header_social-ok, .header_social-telegram {
        width: 26px;
        height: 26px;
    }
    .slider_title .title {
        font-size: calc(10px + 1.25vw);
    }
    .h3_main, #main .page-header h1 {
        font-size: calc(12px + 0.67vw);
    }
    ul.submenu > li > a, ul.mod-menu__sub > li > a {
        font-size: calc(10px + 0.22vw);
    }
    .service-item-title {
        font-size: calc(10px + 0.39vw);
    }
    .item-content .page-header h2 a {
        font-size: calc(11px + 0.42vw);
    }
    .item-content .published, .item-content p {
        font-size: calc(13px + 0.14vw);
    }
    p.readmore > a {
        font-size: calc(11px + 0.15vw);
    }
    a.page-link {
        font-size: calc(14px + 0.2vw);
    }
    .footer-info p {
        font-size: calc(10px + 0.39vw);
    }
}