html {
   scroll-behavior: smooth
}

body {
   overflow-x: hidden
}

body p {
   font-family: 'Open Sans', sans-serif;
   font-size: 15px
}

body a,
body h4 {
   font-family: 'Open Sans', sans-serif;
   font-size: 16px
}

body h3 {
   text-transform: uppercase;
   font-size: 30px;
   font-family: 'Open Sans', sans-serif
}

body .action {
   padding: 10px 85px;
   display: inline-block;
   margin-top: 20px;
   margin-bottom: 15px;
   background-color: #ff0202;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
   color: #fff;
   text-transform: uppercase
}

body .action:hover {
   background-color: #fff;
   text-decoration: none;
   color: #ff0202
}

#menu_burger .menu_md nav {
   background-image: url(../../dist/img/bg_menu_mob.jpg);
   background-repeat: repeat;
   text-align: center
}

#menu_burger .menu_md nav .active {
   color: #ff0202
}

#menu_burger .menu_md nav a {
   color: #fff
}

#menu_burger .menu_md nav a:hover {
   color: red
}

#menu_burger .menu_md nav button,
#menu_burger .menu_md nav button:active,
#menu_burger .menu_md nav button:focus,
#menu_burger .menu_md nav button:link,
#menu_burger .menu_md nav button:visited {
   border: none
}

#header {
   background-image: url(../../dist/img/bg_header.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
   max-width: 100%;
   height: 1920px
}

#header .up {
   scroll-behavior: smooth;
   position: fixed;
   right: 40px;
   top: 90%;
   z-index: 200;
   -webkit-transition: .3s ease-in-out;
   -o-transition: .3s ease-in-out;
   transition: .3s ease-in-out
}

#header h2 {
   font-family: 'Open Sans', sans-serif;
   color: #fff;
   text-transform: uppercase;
   font-size: 24px
}

#header .menu {
   margin-top: 10px;
   margin-bottom: 20px
}

#header .menu nav {
   -webkit-box-shadow: none;
   box-shadow: none
}

#header .menu nav a {
   color: #fff
}

#header .menu nav a:hover {
   background-color: red;
   color: #fff
}

#header .menu nav .active {
   color: red
}

#header #about h3 {
   margin-top: 123%;
   color: #fff;
   text-align: right
}

#header #about p {
   color: #fff
}

#header #about .text_about {
   text-align: justify
}

#masters {
   background-image: url(../../dist/img/bg_masters.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
   max-width: 100%;
   height: 1372px
}

#masters .box_masters {
   padding: 0
}

#masters h3 {
   margin-top: 100px;
   margin-bottom: 25px;
   color: #fff
}

#masters p {
   color: #fff;
   margin-top: 20px
}

#services h3 {
   margin-top: 40px;
   margin-bottom: 40px
}

#services .accordion .card .card-header {
   background-image: url(../../dist/img/bg_button_acardeon.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
   max-width: 100%;
   height: 82px
}

#services .accordion .card .card-header a {
   color: #fff;
   text-decoration: none;
   display: block;
   width: 100%;
   text-transform: uppercase;
   text-align: center;
   padding-top: 19px;
   margin: 0 auto
}

#services .accordion .card .card-header a:hover {
   color: #ff0202
}

#services .action_services {
   margin-bottom: 100px
}

#school {
   background-image: url(../../dist/img/bg_school_xl.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
   max-width: 100%;
   height: 1518px
}

#school h3 {
   margin-top: 70px;
   color: #fff
}

#school p {
   color: #fff;
   margin-top: 30px;
   margin-bottom: 30px
}

#school .box_school {
   padding: 0;
   text-align: center
}

#school .button_school {
   padding: 10px 40px;
   background-color: #fff;
   color: #404040;
   text-transform: uppercase;
   font-size: 14px
}

#school .button_school:hover {
   text-decoration: none;
   color: #fff;
   background-color: #ff0202
}

#gallery h3 {
   margin-top: 70px;
   margin-bottom: 30px
}

#gallery .container_gallery {
   padding: 0
}

#contacts {
   background-image: url(../../dist/img/bg_contact.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
   max-width: 100%;
   height: 1709px;
   margin-top: 150px;
   color: #fff
}

#contacts ul {
   padding: 0
}

#contacts ul li {
   list-style: none
}

#contacts ul li .tel1 {
   margin-top: 20px
}

#contacts ul li .tel2 {
   margin-bottom: 20px;
   margin-top: 10px
}

#contacts ul li p {
   margin-bottom: 0
}

#contacts ul li span {
   text-transform: uppercase
}

#contacts ul li a {
   color: #fff
}

#contacts ul li a:hover {
   color: red;
   text-decoration: none
}

#contacts .row_social {
   margin-top: 50px
}

#contacts .row_social .ico_telegram {
   background-image: url(../../dist/img/telegram.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_telegram:hover {
   background-image: url(../../dist/img/telegram_hover.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_youtube {
   background-image: url(../../dist/img/youtube.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_youtube:hover {
   background-image: url(../../dist/img/youtube_hover.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_fb {
   background-image: url(../../dist/img/fb.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_fb:hover {
   background-image: url(../../dist/img/fb_hover.png);
   background-repeat: no-repea
}

#contacts .row_social .ico_insta {
   background-image: url(../../dist/img/insta.png);
   background-repeat: no-repeat
}

#contacts .row_social .ico_insta:hover {
   background-image: url(../../dist/img/insta_hover.png);
   background-repeat: no-repea
}

#contacts .row_social a {
   margin-left: 10px;
   margin-right: 10px;
   padding: 31px 47px 17px 17px
}

#contacts #map {
   width: 100%;
   height: 800px;
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   margin-top: 100px
}

#contacts #map iframe {
   width: 100%;
   height: 600px
}

#contacts h3 {
   margin-top: 120px;
   color: #fff
}

#contacts .footer {
   margin-top: 50px
}

#contacts .footer h3 {
   margin-top: 33px
}

#contacts .footer .logo_sii-art {
   background-image: url(../../dist/img/logo_sii-art.png);
   background-repeat: no-repeat;
   padding: 11px 105px
}

#contacts .footer .logo_sii-art:hover {
   background-image: url(../../dist/img/logo_sii-art_hover.png)
}

@media (max-width:2400px) {
   #header {
      height: 3000px
   }
}

@media (max-width:1200px) {
   #header {
      background-image: url(../../dist/img/bg_header_lg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1790px
   }

   #about h3 {
      margin-top: 20%;
      text-align: right
   }

   #masters {
      background-image: url(../../dist/img/bg_masters_lg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1262px;
      color: green
   }
}

@media (max-width:992px) {
   #header {
      background-image: url(../../dist/img/bg_header_md.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1419px
   }

   #header .logo {
      margin-top: 50px
   }

   #header #about h3 {
      margin-top: 90%;
      text-align: left
   }

   #masters {
      background-image: url(../../dist/img/bg_masters_md.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1032px
   }

   #masters h3 {
      margin-top: 100px
   }

   #school {
      background-image: url(../../dist/img/bg_school_md.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1240px
   }
}

@media (max-width:768px) {
   #header {
      background-image: url(../../dist/img/bg_header_sm.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 1101px
   }

   #header .action {
      padding: 10px 30px
   }

   #header #about h3 {
      margin-top: 60%;
      text-align: left
   }

   #header #about .text_about {
      text-align: left
   }

   #masters {
      background-image: url(../../dist/img/bg_masters_sm.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 944px
   }

   #services .accordion .card .card-header a {
      font-size: 14px
   }

   #school {
      background-image: url(../../dist/img/bg_school_sm.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 944px
   }
}

@media (max-width:576px) {
   #header #about .text_about {
      text-align: left
   }

   #services .accordion .card .card-header a {
      font-size: 14px
   }

   #school {
      background-image: url(../../dist/img/bg_school_xs.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 724px
   }
}

@media (max-width:450px) {
   #services .accordion .card .card-header a {
      font-size: 12px
   }

   #school {
      background-image: url(../../dist/img/bg_school_320.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      max-width: 100%;
      height: 580px
   }

   #school p {
      font-size: 14px
   }

   #school h3 {
      margin-top: 20px
   }

   #contacts .row_social {
      margin-top: 50px
   }

   #contacts .row_social .ico_telegram {
      background-image: url(../../dist/img/telegram2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_telegram:hover {
      background-image: url(../../dist/img/telegram_hover2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_youtube {
      background-image: url(../../dist/img/youtube2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_youtube:hover {
      background-image: url(../../dist/img/youtube_hover2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_fb {
      background-image: url(../../dist/img/fb2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_fb:hover {
      background-image: url(../../dist/img/fb_hover2.png);
      background-repeat: no-repea
   }

   #contacts .row_social .ico_insta {
      background-image: url(../../dist/img/insta2.png);
      background-repeat: no-repeat
   }

   #contacts .row_social .ico_insta:hover {
      background-image: url(../../dist/img/insta_hover2.png);
      background-repeat: no-repea
   }

   #contacts .row_social a {
      margin-left: 0
   }
}

@media (max-width:340px) {
   #services .accordion .card .card-header a {
      font-size: 10px
   }
}


/* ************************* Временная плашка с инфой ************************* */
.header {
   position: relative;
}




@media (max-width:550px) {


   #header .logo {
      margin-top: 200px;
   }

   #header #about h3 {
      margin-top: 40%;
   }

}

@media (max-width:1000px) {
   #menu_burger {
      position: relative;
      z-index: 2000;
   }
}