* {
    box-sizing: border-box;
}

body {
    background-color: rgba(217, 232, 221, 1);
    background-image: url('../images/svetlii-fon.jpg'); /* .. подъем в родит. каталог*/
    background-attachment: fixed;
   /* background-size: 75%; /*cover;*/
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica;
    font-size: 18px;
    min-height: 100%;
    }

.baner{
    height: 17vw;
    /*width: auto;*/
    background-image: url('../images/banner1.jpg');

    background-blend-mode: luminosity;
    background-color: rgba(23, 43, 121, 0.65);

    background-size: cover;
    /*-webkit-filter: saturate(30%); /* Safari 6.0 - 9.0
    filter: saturate(30%);*/
    -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
    filter: blur(3px);
    }

.baner-container {
    position: relative;
    text-align: center;
    color: rgba(23, 43, 121, 1);
}

/*.banner-container img{
    height: 50px;
    position: absolute;
    top: 5%;
    left: 5%;
    float: left;
    }*/

header {
    position: absolute;
    top: 10%;
    left: 20%;
    /*transform: translate(-50%, -50%);*/
    font-weight: 1000;
    font-size: 2.6vw;
    text-transform: uppercase;
    /*text-shadow: 0.2vw 0.2vw 0.2vw rgba(252, 166, 0, 1);*/
    -webkit-text-stroke: 0.09vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки */
    text-stroke: 0.09vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки (стандартное свойство) */
}

.wrapper {
    min-height: calc(100vh - 75px);
}


/*----------------------------------- меню -----------------------------------*/
ul.menu {
    position: sticky; /*чтоб работало нельзя помещать в div*/
    position: -webkit-sticky; /* Required for Safari */
    width: 100%;
    top: 0;
    margin: 0;
    padding:  1.5vw 0 1.5vw 0;/* 27% 10px 27%;*/
    list-style-type: none;
    background-color: rgba(23, 43, 121, 1); /* oracal #049 King blue RAL5002    #030D1F; (RAL 5004)  #090147;
    /*background-image:  -webkit-radial-gradient(#E1F76E,#090147); /*#9656D7;
    background-image:  -moz-radial-gradient(#E1F76E ,#090147);
    background-image:  -o-radial-gradient(#E1F76E ,#090147);
    background-image:  radial-gradient(#E1F76E ,#090147);*/
    overflow: auto; /*hidden;*/
    white-space: nowrap;
    z-index: 1; /* Add z-index, any positive integer (basically: not "auto") will pull this above */
    }

ul.menu li {
    display: inline-block;
    width: 20%;
    /*float: left;*/
    /*padding-inline-start: 5.7vw;*/
    /*padding-left: 14%;*/
    /*top: 1%;
    left: 23%;*/
    /*transform: translate(-50%, -50%);*/
    /*margin: 5px;*/
    padding:0 5px 0 5px;
    text-align: center;
    }

ul.menu li a {
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 12px;
    letter-spacing: 0.2vw;
    }

ul.menu li a:hover {
    /*background-color:   /*#494375; #7D39A2;*/
    background-image: linear-gradient(rgba(252, 166, 0, 1), orange 5%, rgba(128, 128, 128, 0.7) 30%);
    border-radius: 3px;
    }

ul.menu li a.active {
    background-color: rgba(252, 166, 0, 1); /* oracal #020 Golden yellow RAL1033    #FCBD1F;  (RAL 1021) #DDF877; /*#F8D568;*/
    /*background-image: linear-gradient(#D0FF14, #F8D568; 30%);*/
    color: black;
    border-radius: 3px;
    }
/*-----------------------------------------------------------------------------*/


@media screen and (max-width: 918px){
    ul.menu {font-size: 2.8vw; line-height: 3.5vw;}
    ul.menu li a {padding: 7px 5px;}
    .center-content h2{font-size: 2.5vw; line-height: 3vw;}
    .center-content h3{font-size: 2.2vw; line-height: 2.8vw;}
    div.center-content {font-size: 2.8vw; line-height: 3.5vw; padding-left:3%;
    padding-right:3%;}/* {font-size: 2.2vw; line-height: 3vw;} */
    .right-side, .left-side {top: -6vw; position: relative;}
    .contact p{font-size: 11px;}
    header{font-size: 2.5vw;/* 2 */
        -webkit-text-stroke: 0.07vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки */
        text-stroke: 0.07vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки (стандартное свойство) */}
    
    }
@media screen and (max-width: 520px){
    ul.menu {font-size: 2.2vw; line-height: 3vw;}
    ul.menu li a {padding: 7px 5px;}
    ul.service-list {grid-gap: 2 vw;}
    .contact p{font-size: 8px;}
    .center-content {font-size: 2.8vw; line-height: 2vw;  padding-left:1%;
    padding-right:1%;} /*{font-size: 1.7vw; line-height: 2.5vw;}*/
    .area1 img{width: 48px; height:48px;}
    header{font-size: 2.5vw;
        -webkit-text-stroke: 0.05vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки */
        text-stroke: 0.05vw rgba(252, 166, 0, 1); /* Толщина и цвет обводки (стандартное свойство) */}
    }


.left-side{
    float: left;
    width: 15%;
    background-color: rgba(186, 172, 199, 0.5);
    /*border: 3px solid #73AD21;*/
    padding: 5px;
    overflow: auto;
    top: -4.7vw;
    position: relative;
    }

.center-content{
    /*float: left;*/
    width: 100%;
    height: 100%;
    /*border: 3px solid #73AD21;*/
    padding: 5px;
    text-indent: 35px; /*отступ красной строки*/
    /*font-size: 22px;*/
    line-height: 35px;
    padding-left:17%;
    padding-right:17%;
    }

.center-content h2{
    background: rgba(128, 128, 128, 0.25);
    border-radius: 3px;
    }

.center-content h3{
    text-align:center;
    text-indent: 0;
    color: rgba(252, 166, 0, 1); /*#DDF877;*/
    /*text-shadow: 1px 1px 2px black;*/
    }

/*------------------------------- контент главной -----------------------------*/
.index-container::after{
    content: "";
    display: table;
    height: 10px;
    clear: both;
    }

.index-column-img{
    float: left;
    margin-left: 0px;
    width: 20%;
    }

.index-column-p{
    float: right;
    margin-left: 0px;
    width: 80%;
    /*border-radius: 5px;
    background-color:  rgba(9, 1, 71, 0.3);*/
    }

.index-img{
    float: left;
    height: 100%;
    width: 100%;
    }
/*--------------------------------------------------------------------------*/

.right-side{
    float: left;
    width: 15%;
    background-color: rgba(186, 172, 199, 0.2);
    border: 3px solid #73AD21;
    padding: 5px;
    overflow: auto;
    top: -4.58vw;
    position: relative;
    }

.blockcontent-clearfix::after {
    content: "";
    clear: both;
    display: table;
    }

.contact{
   /* background-color:  rgba(9, 1, 71, 0.3); /*rgba(173, 216, 230, 0.5); /*lightblue; /*rgba(186, 172, 199, 0.2);*/
    /*border: 3px solid #73AD21;*/
    background-image: linear-gradient(rgba(23, 43, 121, 1), rgba(128, 128, 128, 0.4) 15%, rgba(128, 128, 128, 0.4) 85%, rgba(23, 43, 121, 1));
    padding: 5px;
    text-align: center;
    font-size: 14px;
    }

/*--------------------------------  отзывы    -------------------------*/
#content.row{
    height: 10vw;
    overflow: auto;
    }

.image-min img{
    height: auto;
    width: 70%;
    padding: 1.5vw 0 1.5vw 0;
    cursor: zoom-in;
    }
/*.image-size:hover {
    width: 60%;
    position: absolute;
    left:20%;
    }*/

.image-big img {
    width: 50%;
    position: absolute;
    left:25%;
    cursor: zoom-out;
    }

.true-img-sz {      /*target="_blank"*/
    height: 100%;
    width: 100%;
    }

.review-name:after {

    /*padding: 0 20px 0 20px;*/
    display: table;
    content: "";
    clear: both;
    /*width: 100%;*/
    }

#p1{
    float: left;
    /*text-decoration-skip-ink: auto;
    text-decoration: underline;*/
    padding: 0 0 0 3vw;
    width: 50%;
    background-color: rgba(23, 43, 121, 1); /*rgba(9, 1, 71, 0.05); rgba(186, 172, 199, 0.8);*/
    border-radius: 5px 0 0 5px;
    color: rgba(252, 166, 0, 1); /*#DDF877;*/
    /*text-shadow: 1px 1px 2px black;*/
    }
#p2{
    float: left;
    width: 50%;
    background-color: rgba(23, 43, 121, 1); /*rgba(186, 172, 199, 0.8);*/
    text-align: right;
    padding: 0 2vw 0 0;
    border-radius: 0 5px 5px 0;
    color: rgba(252, 166, 0, 1); /* #DDF877;*/
    /*text-shadow: 1px 1px 2px black;*/
    }

.review-list {
    list-style-type: none;
    text-indent: 0px;
    padding: 0 ;
    }

.review-text-65{
    text-indent: 35px;
    float: left;
    width: 65%;
    }

.review-photo-35 {
    float: left;
    width: 35%;
    text-align: center;
    }

.review-form{
    margin: 10px;
    border-radius: 5px;
    padding: 20px;
    background-color: rgba(23, 43, 121, 1); /*rgba(9, 1, 71, 0.05); /*rgba(186, 172, 199, 0.3);*/
    color: white;
    }

/* Clear floats after the columns */
form.row:after {
    content: "";
    display: table;
    clear: both;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

.review-form button{
    width:120px;
    height: 30px;
    margin: 12px;
    /*border-radius:8px;*/
    font-size: auto;
    cursor: pointer;
    background-color: rgba(252, 166, 0, 1); /*#DDF877;*/
    border-radius: 5px;
    /*float: right;*/
    }

.review-form label{
    padding: 12px 12px 12px 0;
    display: inline-block;
    }

.review-form input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 12px;
    /*border: 1px solid #ccc;
    border-radius: 4px;*/
    resize: vertical;
}

.review-form input[type=file] {
    background-color: rgba(255, 255, 255, 1);
    color: gray;
    width: 100%;
    border: none;
    /*border-radius: 4px;*/
    /*cursor: pointer;*/
    padding: 12px;
    font-size: auto;
    /*visibility:hidden;*/
    }
/*--------------------------------------------------------------------------*/

/*--------------------------------- сетка контактов ------------------------*/
.map{
    /*float: left;
    margin-left: 5px;*/
    border: 1px solid gray;
    border-radius: 3vw;
    width: 95%;
    height: 68%;
    }

.mymap{
    grid-area: mymap;
    }

.grid-container {
    display: grid;
    grid:
        'mymap .  .'
        '. .  .';
    grid-gap: 1vw;
    padding: 1px;
    }

.grid-container div {
    /*background-color: rgba(255, 255, 255, 0.4);*/
    text-align: center;
    /*color: #A6ABB5;*/
    padding: 0.5vw 0;
    text-indent: 0; /*отступ красной строки*/
    overflow: auto;
    border-radius: 5px;
    background-color: rgba(128, 128, 128, 0.25);
    }

.area1 img {float: left; padding: 0 0 0 2vw;}
/*------------------------------------------------------------------------*/

/*----------------------------- сетка услуг ----------------------------------*/
.service-list{
    list-style-type: none;
    display: grid;
    /*grid:
        '. . . '
        '. . . ';*/
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%; /*32.3% 32.3% 32.3%;*/
    grid-gap: 1vw;
    padding: 1px;
    overflow: auto;
    justify-content: center;
    }

.service-list li{
    background-color: rgba(23, 43, 121, 1);  /*rgba(255, 255, 255, 0.4);*/
    border-radius: 5px;
    text-shadow: 1px 1px 2px black;
    padding: 0 4px 0 4px;
    }

.service-list p{color: rgba(252, 166, 0, 1); text-indent: 0; text-align: center;}

.service-list img{
    display: block;
    width: 7vw;
    padding: 3px;
    margin-left: auto;
    margin-right: auto;
    }

/*----------------------------------------------------------------------------*/

/*----------------------------- сетка описания услуги ------------------------*/
/*.item1 { grid-area: icon; }
.item2 { grid-area: header; }*/
.item3 { grid-area: photo; }
.item4 { grid-area: post; }

.grid-post-container{
    display: grid;
    grid:
        /*'header header header header header header'*/
        'photo photo photo photo photo photo'
        'post post post post post post';
    grid-gap: 0.5vw;
    /*padding: 0.5vw;*/
    }

/*.grid-post-container>div{
    background-color: rgba(9, 1, 71, 0.3); /*rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 0.5vw;
    }*/

.post-icon{
    width: 100%;
    display: block;
    /*margin: auto;*/
    background-color: rgba(9, 1, 71, 0.05); /*rgba(255, 255, 255, 0.2);*/
    border-radius: 5px;
    }

.post-photo{
    height: auto;
    width: 32%;
    }

.item2 h3{
    /*text-indent: 1.5vw;*/
    position: relative;
    /*top: 25%;*/
    color: rgba(252, 166, 0, 1); /*#DDF877;*/
    text-shadow: 1px 1px 2px black;
    }
.item2{ background-color: rgba(128, 128, 128, 0.25); border-radius: 5px;}

.item3{text-align: center;
    text-indent: 0;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 5px;
    }

.item4{padding: 0 1.5vw 0 1.5vw;}
/*---------------------------------------------------------------------------*/

/*--------------------------------- наши работы ------------------------------*/
#gallery{
    background-color: rgba(23, 43, 121, 1); /*rgba(128, 128, 128, 0.25); /*rgba(255, 255, 255, 0.8);*/
    border-radius: 5px;
    }
#gallery h3{
    background-color: rgba(23, 43, 121, 1);
    }
/*---    ---    ---    ---    ---    ---    ---    ---    ---    ---   --- */
/* Position the image container (needed to position the left and right arrows)*/

/*.gallery-container {
  position: relative;
}*/

/* Hide the images by default */
.mySlides {
  display: none;
  overflow: auto;
  text-align: center;
  text-indent: 0;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 5 columns side by side */
.column {
  float: left;
  width: 26%;  /*8    12.5%; 5*/
  align-content: center;
  text-indent: 0px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  background-color: rgba(255, 255, 255, 0.5);
  filter: sepia(95%);
  -webkit-filter: sepia(95%);
  color: red;
  /*opacity: 0.3;*/
}

.active,.demo:hover {
  opacity: 1;
  filter: sepia(0%);
  -webkit-filter: sepia(0%); /*grayscale(0%);*/
}
/*-----------------------------------------------------------------------*/

footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    margin:auto;
    /*padding: 1px;*/
    background-color: rgba(23, 43, 121, 1); /*#7D39A2;*/
   	color: #aaa;
    text-align: right;
	font-size: 9px;
	font-family: Times New Roman;
    }