/*Standart*/

:root {
	--cassiopeia-color-primary: #010156;
	--cassiopeia-color-link: #224faa;
	--cassiopeia-color-hover: #6d757e;
  

	
  --blue: #010156;
  --indigo: #6812f3;
  --purple: #6f42c2;
  --pink: #e93f8e;
  --red: #a51f18;
  --orange: #fd7e17;
  --yellow: #ad6200;
  --green: #448344;
  --teal: #5abfdd;
  --cyan: #30638d;
  --white: white;
  --gray-100: #f9fafb;
  --gray-200: #eaedf0;
  --gray-300: #dfe3e7;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6d757e;
  --gray-700: #484f56;
  --gray-800: #353b41;
  --gray-900: #22262a;
  --primary: #010156;
  --secondary: #6d757e;
  --success: #448344;
  --info: #30638d;
  --warning: #ad6200;
  --danger: #a51f18;
  --light: #f9fafb;
  --dark: #353b41;
  --yellow-broun: #E5E5CB;
  --deepdark-rgb: 50, 50, 50;
  --primary-rgb: 1, 30, 30;
  --secondary-rgb: 109, 117, 126;
  --success-rgb: 68, 131, 68;
  --info-rgb: 48, 99, 141;
  --warning-rgb: 173, 98, 0;
  --danger-rgb: 165, 31, 24;
  --light-rgb: 249, 250, 251;
  --dark-rgb: 53, 59, 65;
  --white-rgb: 255, 255, 255;
  --yellow-broun-rgb: 229, 229, 203;
  --black-rgb: 0, 0, 0;
  --body-color-rgb: 34, 38, 42;
  --body-bg-rgb: 255, 255, 255;
  --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --gradient: linear-gradient(180deg, rgba(48, 8, 8, 0.15), rgba(17, 92, 9, 0));
  --body-font-family: var(--cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color: #22262a;
  --body-bg: white;

}


.mybanner {
  min-width: 100%;
}

/*Цвет хеадера*/

.container-header {
	position: relative;
  z-index: 10;
  background-color: rgb(124, 24, 24);
  background-image: linear-gradient(0deg, var(--primary) 70%, var(--cassiopeia-color-hover) 70%);
  box-shadow: 0 0px 0px rgba(0, 5, 0, 0.03) inset;
  }

/*Цвет и толщина Главного меню */
.container-header .mod-menu {
    color: rgb(255, 255, 255);
  	font-weight: 700;
  }

/*Размер иконки Z 
 .container-header .navbar-brand a img {
    height: 5vh;
   }
*/
/*Величина и цвет Описания бренда Z*/ 
.container-header .site-description {
    font-size: 2rem;
    color: rgb(165, 31, 24);
    white-space: normal;
  	font-weight: 700;
  }

/*Цвет хеадера*/

.container-footer {
	position: relative;
  z-index: 10;
  background-color: rgb(24, 24, 24);
  background-image: linear-gradient(0deg, var(--gray-600) 100%, var(--cassiopeia-color-hover) 80%);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.03) inset;
  }

/*Резиновый шрифт для баннера */

.fontsize {
    position: relative;
}
.fontsize img {
    width: 100%;
}
.fontsize .text {
    width: 100%;
    position: absolute;
    font-family: 'Roboto', sans-serif;  
    color: #337AB7;
    font-size: 48px;
    top: 40px;
    left: 130px;
}

/*3D карточка вращения*/

}
.wrapp {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #BBDEFB;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardd {
  width: 300px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}
.front, .back1, .back2, .back3, .back4 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 3s;
  backface-visibility: hidden;
  border-radius: 10px;
}
.front {
  background-color: #fff;
}

.back1 {
  background-color: #8ebc9f;
  transform: rotateY(180deg);
}

.back2 {
  background-color: #a2d5f7;
  transform: rotateY(180deg);
}

.back3 {
  background-color: #E5E5CB;
  transform: rotateY(180deg);
}

.back4 {
  background-color: #d0d0fb;
  transform: rotateY(180deg);
}

.cardd:hover .front {transform: rotateY(180deg);}
.cardd:hover .back1 {transform: rotateY(360deg);}
.cardd:hover .back2 {transform: rotateY(360deg);}
.cardd:hover .back3 {transform: rotateY(360deg);}
.cardd:hover .back4 {transform: rotateY(360deg);}

.table-sm {
  font-size: 10px;
}

.gidro h1 {
    padding-top: 3rem;
   }

   .gidro h3 {
    padding-top: 4rem;
    padding-bottom: 3rem;
   }

   .gidro h4 {
    padding-top: 3rem;
   }

.gidro-header {
 text-align: center;
 background: #015fad; 
}

.gidro .text-bl {
	text-align: justify;
}




/*Градиентный фон текста*/
.gradient-background {
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    font-size: 40px;
    line-height: 50px;
    text-transform: uppercase;
    background: linear-gradient(to top, #337AB7, #BFE2FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-background1 {
    font-family: Tahoma, sans-serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 50px;
    text-transform: uppercase;
    background: linear-gradient(to top, #337AB7, #BFE2FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-bl {
	text-align: justify;
}




/*Капли воды*/
.gidro-header {
    --bubble-radius: 100px;
    --bubble-shadow: calc((var(--bubble-radius) / 25) * -1) calc(var(--bubble-radius) / 18) 8px 0 rgba(0,0,0,0.8);  
    position: relative;
    height: 200px;
    background-image: url(/demo/1280/fantasy-3.jpg);
    background-size: cover;
    background-position: center;
    margin: 20px 0;
        
}
.gidro-header .droplet {
    content: "";
    display: block;
    width: var(--bubble-radius);
    height: calc(var(--bubble-radius) - 0.8rem);
    border-radius: 50%;
    position: relative;
    box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 rgba(0,0,0,0.7);
    position: absolute;
    background-color: rgba(255,255,255,0.22);
}
.gidro-header .droplet:after {
    position: absolute;
    content: " ";
    background: #fff;
    width: 15%;
    height: 15%;
    border-radius: 50%;
    transform: skew(11deg, 2deg);
    top: 20%;
    left: 63%;
    z-index: 10;
    opacity: 0.9;
}
.gidro-header .droplet:before {
    position: absolute;
    content: " ";
    background-color: #fff;
    width: 9%;
    height: 9%;
    border-radius: 50%;
    transform: skew(10deg, 0deg);
    top: 40%;
    left: 75%;
    z-index: 20;
    opacity: 0.4;
}
.gidro-header .droplet:nth-child(1) {
    left: 50%;
    top: 50%;
}
.gidro-header .droplet:nth-child(2) {
    transform: scale(0.7);
    left: 6%;
    top: 10%;
}
.gidro-header .droplet:nth-child(3) {
    transform: scale(0.5);
    top: 40%;
    left: 70%;
}
.gidro-header .droplet:nth-child(4) {
    transform: scale(0.48);
    top: 63%;
    left: 75%;
}
.gidro-header .droplet:nth-child(5) {
    transform: scale(0.24);
    top: 20%;
    left: 60%;
}
.gidro-header .droplet:nth-child(6) {
    transform: scale(0.3);
    top: 30%;
    left: 10%;
}
.gidro-header .droplet:nth-child(7) {
    transform: scale(0.4);
    top: 71%;
    left: 30%;
}

/*Разделители для разноцветных секций */
.section {
     font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: rgb(14, 5, 141);
}        

.section-color {
    background-color: #337AB7;
    background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 675 134' style='enable-background:new 0 0 675 134;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .s%7Bfill:%23FFF;%7D %3C/style%3E %3Cg%3E %3Cg%3E %3Cpolygon class='s' points='63.3,54.7 63.3,42.5 52.8,36.4 42.2,42.5 42.2,54.7 52.8,60.8 '/%3E %3Cpolygon class='s' points='31.7,36.3 31.7,24.1 21.1,18 10.6,24.1 10.6,36.3 21.1,42.4 '/%3E %3Cpolygon class='s' points='84.4,18.3 84.4,6.1 73.9,0 63.3,6.1 63.3,18.3 73.9,24.4 '/%3E %3Cpolygon class='s' points='147.7,18.3 147.7,6.1 137.1,0 126.6,6.1 126.6,18.3 137.1,24.4 '/%3E %3Cpolygon class='s' points='232.1,18.3 232.1,6.1 221.5,0 211,6.1 211,18.3 221.5,24.4 '/%3E %3Cpolygon class='s' points='284.8,36.3 284.8,24.1 274.2,18 263.7,24.1 263.7,36.3 274.2,42.4 '/%3E %3Cpolygon class='s' points='379.7,18.3 379.7,6.1 369.2,0 358.6,6.1 358.6,18.3 369.2,24.4 '/%3E %3Cpolygon class='s' points='506.3,18.3 506.3,6.1 495.7,0 485.2,6.1 485.2,18.3 495.7,24.4 '/%3E %3Cpolygon class='s' points='675,18.3 675,6.1 664.5,0 653.9,6.1 653.9,18.3 664.5,24.4 '/%3E %3Cpolygon class='s' points='643.4,36.3 643.4,24.1 632.8,18 622.3,24.1 622.3,36.3 632.8,42.4 '/%3E %3Cpolygon class='s' points='559,36.3 559,24.1 548.4,18 537.9,24.1 537.9,36.3 548.4,42.4 '/%3E %3Cpolygon class='s' points='147.7,54.7 158.2,60.8 168.8,54.7 168.8,42.5 158.2,36.4 147.7,42.5 '/%3E %3Cpolygon class='s' points='232.1,54.7 232.1,42.5 221.5,36.4 211,42.5 211,54.7 221.5,60.8 '/%3E %3Cpolygon class='s' points='316.4,54.7 316.4,42.5 305.9,36.4 295.3,42.5 295.3,54.6 284.8,60.6 284.8,72.8 295.3,78.9 305.9,72.8 305.9,60.8 '/%3E %3Cpolygon class='s' points='358.6,54.7 358.6,42.5 348.1,36.4 337.5,42.5 337.5,54.7 348.1,60.8 '/%3E %3Cpolygon class='s' points='411.3,36.4 400.8,42.5 400.8,54.7 411.3,60.8 421.9,54.7 421.9,42.5 421.9,42.4 432.4,36.3 432.4,24.1 421.9,18 411.3,24.1 411.3,36.3 '/%3E %3Cpolygon class='s' points='506.3,54.7 516.8,60.8 527.4,54.7 527.4,42.5 516.8,36.4 506.3,42.5 '/%3E %3Cpolygon class='s' points='675,54.7 675,42.5 664.5,36.4 653.9,42.5 653.9,54.7 664.5,60.8 '/%3E %3Cpath class='s' d='M664.5,133.7l-10.5-6.1v-12.2l10.5-6.1V97.2l10.5-6.1V78.8l-10.5-6.1L654,78.8V91l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0V97.1L611.7,91V78.8l-10.5-6.1l0,0v-12l10.5-6.1V42.4l-10.5-6.1l-10.5,6.1v12.1l-10.5,6.1v12.2l0,0 l-10.5,6.1V91l10.5,6.1l10.5-6.1l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1V97.2l-10.5-6.1 l-10.5,6.1l0,0l-10.5-6.1l0,0V78.9l-10.5-6.1l-10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.6-6.1V97.2L443,91.1l-10.5,6.1l0,0L422,91.1l0,0V78.9l-10.5-6.1L401,78.9v12.2l10.5,6.1 l0,0v12.2l0,0l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l0,0l10.5-6.1V97.2L380,91.1V78.9l0,0l10.5-6.1V60.6L380,54.5 l-10.5,6.1v12.2l0,0L359,78.9v12.2l10.5,6.1l0,0v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2L338,91.1V78.9l-11-6.1l-10.5,6.1v12.2 l10.5,6.1l0,0v12.2l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.5-6.1V97.2l-10.5-6.1L285,97.2v12.2l0,0l-10.5,6.1l0,0 l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2l-10.5-6.1l0,0V78.9L222,72.8l-11,6.1v12.2l-10.5,6.1v12.2l10.5,6.1l0,0v12.2 l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l0,0V97.2L169,91.1V78.9l-10.5-6.1L148,78.9v12.2l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V97.4L127,91.3l-11,6.1l0,0l-10.5-6.1V79.1L94.9,73l-10.5,6.1v12.2l10.5,6.1v12.2l10.5,6.1 v12l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V79.1L52.8,73l-10.5,6.1v12.2l-10.5,6.1v12 l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0L0,127.6v6.4h675v-6.4L664.5,133.7z M527.4,127.6l-10.5,6.1l-10.5-6.1v-12.2l10.5-6.1l10.5,6.1 V127.6z'/%3E %3Cpolygon class='s' points='10.6,60.6 10.6,72.8 21.1,78.9 31.7,72.8 31.7,60.6 21.1,54.6 '/%3E %3Cpolygon class='s' points='116,72.8 126.6,78.9 137.1,72.8 137.1,60.6 126.6,54.6 126.6,42.5 116,36.4 105.5,42.5 105.5,54.7 116,60.8 '/%3E %3Cpolygon class='s' points='200.4,72.8 200.4,60.6 189.9,54.6 179.3,60.6 179.3,72.8 189.9,78.9 '/%3E %3Cpolygon class='s' points='253.1,78.9 253.1,91.1 263.7,97.2 274.2,91.1 274.2,78.9 263.7,72.8 263.7,72.8 263.7,60.6 253.1,54.6 242.6,60.6 242.6,72.8 '/%3E %3Cpolygon class='s' points='453.5,72.8 453.5,60.6 443,54.6 432.4,60.6 432.4,72.8 443,78.9 '/%3E %3Cpolygon class='s' points='537.9,60.6 537.9,72.8 548.4,78.9 559,72.8 559,60.6 548.4,54.6 '/%3E %3Cpolygon class='s' points='643.4,72.8 643.4,60.6 632.8,54.6 622.3,60.6 622.3,72.8 632.8,78.9 '/%3E %3Cpolygon class='s' points='485.2,54.6 485.2,54.6 485.2,42.5 474.6,36.4 464.1,42.5 464.1,54.7 474.6,60.8 474.6,60.8 474.6,72.7 474.6,72.7 464.1,78.8 464.1,91 474.6,97.1 485.2,91 485.2,78.9 485.2,78.9 495.7,72.8 495.7,60.6 '/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
    background-size: auto 60px;
    background-repeat: repeat-x;
    background-position: center bottom;
    padding-top: 40px;
    padding-bottom: 100px;
    color: rgb(255, 255, 255);
}

.section-no {
    background-color: #FFF;
    padding-top: 40px;
    padding-bottom: 40px;
}



/*Карточки для заметок, комментариев или отзывов*/

.deck-wrap {
    overflow: hidden;
}    
.deck {
    position: relative;
    max-width: 500px;
    width: 100%;
    margin: 40px auto;
}
.deck:before {
    content: "";
    position: absolute;
    width: 120%;
    height: 100%;
    top: -20px;
    left: 0;
    border-radius: 16px;
    background: #337AB7;
}
.card-price {
    position: relative;
    background-color: #BFE2FF;
    padding: 10px;
    z-index: 5;
    border-radius: 12px;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4);
    transition: 200ms ease-in-out;
    transform: scale(0.95);
}
.card-price:hover {
    z-index: 7;
    transform: scale(1);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}
.card-price:nth-of-type(even) {
    margin-top: -120px;
    margin-left: 55px;
    margin-right: -85px;
}
.card-price:nth-of-type(odd) {
    margin-top: -50px;
    margin-left: -40px;
    margin-right: 0;
}
.card-price:first-of-type {
    margin-top: 0;
    margin-left: -90px;
    margin-right: 50px;
}
.cardHeader {
    font-size: 26px;
    color: #337AB7;
    text-transform: uppercase;
    padding: 8px 10px;
    font-family: 'Roboto', sans-serif;
}
.cardBody {
    padding: 0 10px;
}
.cardBody p {
    color: #000;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 10px;
    font-family: Verdana, sans-serif;   
}
.cardFooter {
    font-family: Verdana, sans-serif; 
    font-size: 16px;
    text-align: right;
    line-height: 1.5;
    margin-bottom: 10px;
    color: #337AB7;  
    padding: 0 10px;
}
@media (max-width: 767px) {
    .card-price {
        transform: scale(1);
    }
    .card-price:nth-of-type(even) {
        margin-left: 40px;
        margin-right: -40px;
        margin-top: 20px;
    } 
    .card-price:nth-of-type(odd) {
        margin-left: -40px;
        margin-right: 40px;
        margin-top: 20px;
    }  
}
@media (max-width: 620px) {
    .card-price:nth-of-type(even),
    .card-price:nth-of-type(odd){
        margin: 20px;
    } 
}

/*Фотографии ромбиком*/
.rhomb {
    margin: auto;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 1vmin;
}
.rhomb a {
    grid-column: span 2;
    z-index: 1;
    position: relative;  
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);    
    margin-bottom: -52%;
    transform: scale(1);
    transition: all .25s;  
}
.rhomb a:nth-child(7n + 1) {
    grid-column: 2 / span 2;
}
.rhomb a:hover {
    z-index: 2;
    transform: scale(1.2);
    clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
}
.rhomb img {
    max-width: 100%;
}

/*Оформление списков ul li для информационных блоков  https://atuin.ru/blog/oformlenie-spiskov-ul-li-dlya-tekstov/ */

.gidromaster {
    padding:0;
    list-style: none;
}
.gidromaster li{
    padding:6px;
}
.gidromaster li:before {
    padding-right:10px;
    font-weight: bold;
    color: #C0C0C0;
    content: "\2714";
    transition-duration: 0.5s;
}
.gidromaster li:hover:before {
    color: #337AB7;
    content: "\2714";
}    





/*Cписки материалов */
	
.gidrolist {
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.gidrolist li {
    position: relative;
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.gidrolist li:hover {
    background: #F0F5FB;
    border: 2px solid #ADCEE9;
}
.gidrolist li:before {
    line-height: 32px;
    position: absolute;
    top: 4px;
    left:-40px;
    width:40px;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #77AEDB;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.gidrolist li:hover:before {
    width:46px;
    background: #337AB7;
}
.gidrolist li:after {
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #77AEDB;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}
.gidrolist li:hover:after {
    margin-left: 6px;
    border-left-color: #337AB7;
}






.laserlist {
    padding:0;
    list-style: none;
}    
.laserlist li {
    position: relative;
    padding: 10px 30px;
    background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
    border: 2px solid #C0C0C0;
    color: #696b50;
    box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
    margin-bottom: 5px;
    text-align:center;
    background-size: 100% 100%;
    z-index: 1;
}
.laserlist li:hover {
    border: 2px solid #f6b491;
}
.laserlist li:before {
    content: "";
    position:absolute;
    width: 0;
    height: 100%;
    top: 50%;
    left: 50%;
    background: linear-gradient(to left, #fae2e2 0%, #FFF, #fae3e2);
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.laserlist li:hover:before {
    width: 100%;
    opacity: 1;
}

/*Тень блока */

.shadowgidro {
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), -23px 0 20px -23px rgba(0,0,0,0.8), 23px 0 20px -23px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.1) inset;    
}

/*____ЛАЗЕРНАЯ*/

/*3D текст */

.lazertext3d {
    margin: 0;
    margin-bottom: 100px;
    padding: 0;
     position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.lazer3d {
    margin-top: -12px;
    align-self: center;
    transform: perspective(300px) rotateX(15deg) scaleY(0.8);
    transition: all 0.5s;
    font-family: Impact, Charcoal, sans-serif;
    font-size: 90px;
    letter-spacing: 3px;
    color: #FFF;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 10px 0 #6b3535;
}
.lazertext3d:hover .lazer3d {
    transform: perspective(1000px) rotateX(15deg) scale(1.07);
    text-shadow: 0 0 10px black, 0 2px 0 #694e12;
}

@media (max-width:1400px) {
    .lazer3d {
        font-size: 60px;
        margin-left: 4cm;
    }
}

@media (max-width:767px) {
    .lazer3d {
        font-size: 50px;
        margin-left: 2cm;
    }
}

@media (max-width:540pxpx) {
    .lazer3d {
        font-size: 20px;
        margin-left: 0,5cm;
    }
}

/*Лазерные преимущества */

.lazer-hi {
    padding:0;
    list-style: none;
}
.lazer-hi li{
    padding:6px;
}
.lazer-hi li:before {
    padding-right:10px;
    font-weight: bold;
    color: #67094e;
    content: "\270E";
    
    transition-duration: 0.5s;
}
.lazer-hi li:hover:before {
    color: #14650b;
    content: "\270F";
}

/* Видео лазерной резки  */

.video-lazer {
    position: relative;
    margin: 10px auto;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.video-lazer .fonlazer  {
    position: relative;
    z-index: 1;
    font: 0/0 a;
}
.video-lazer .fonlazer img  {
    width: 100%;
}
.video-lazer video {
    width: 120%;
    position: absolute;
    top: 10%;
    left: -10%;
}

/*Блоки из фигур */

.stanki-lazer {
    margin: 10px auto;
    padding: 30px 0;
    position: relative;
    max-width: 800px;
}
.stanki-lazer .triangle-1, 
.stanki-lazer .triangle-2, 
.stanki-lazer .triangle-1:after,
.stanki-lazer .triangle-2:after,
.stanki-lazer .triangle-1:before,
.stanki-lazer .triangle-2:before  {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.stanki-lazer .triangle-1, 
.stanki-lazer .triangle-2 {
    filter: drop-shadow(2px 6px 6px rgba(88, 0, 0, 0.4));
}
.stanki-lazer .triangle-1:after,
.stanki-lazer .triangle-1:before {    
    clip-path: polygon(0 0, 40% 0, 20% 100%, 20% 100%);
    content: "";
    transition: all .5s ease-in-out;    
    background-size: cover;
    background-position: center center;
    background-image: url('/images/STANKI/laser0.png');        
}
.stanki-lazer .triangle-1:before {    
    background: rgb(150, 151, 151);
 
    z-index: 2;
}
.stanki-lazer:hover .triangle-1:after,
.stanki-lazer:hover .triangle-1:before {
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0  100%);    
} 
.stanki-lazer:hover .triangle-1:before {
    background-color: rgba(51, 122, 183, 0);    
} 
 
.stanki-lazer .triangle-2:after,
.stanki-lazer .triangle-2:before {
    clip-path: polygon(80% 0, 100% 100%, 60% 100%, 80% 0);
    content: "";
    transition: all .5s ease-in-out;    
    background-size: cover;
    background-position: center center;
    background-image: url('/images/STANKI/lasernoi.jpg');    
}
.stanki-lazer .triangle-2:before {    
    background: rgb(127, 34, 15);    
    z-index: 2;
}
.stanki-lazer:hover .triangle-2:after,
.stanki-lazer:hover .triangle-2:before {
    clip-path: polygon(100% 0, 100% 100%, 40% 100%, 60% 0);
} 
.stanki-lazer:hover .triangle-2:before {
    background-color: rgba(191, 226, 255, 0);    
}
.stanki-lazer .triangle-txt {
    position: relative;
    text-align: center;
    z-index: 1;
    padding: 20px;
    margin: 0 50px;
    left: 0;
    background: #FFF;
    box-shadow: 2px 12px 15px rgba(0, 0, 0, 0.4);    
    transition: all .5s ease-in-out;    
}
.stanki-lazer:hover .triangle-txt {
    left: 100%;
}
.stanki-lazer .triangle-txt h4 {  
    text-transform: uppercase;
    color: #831656;
    font-weight: bold;
    font-family: Verdana, sans-serif;
    font-size: 20px; 
    margin: 6px 0;
}
.stanki-lazer .triangle-txt p { 
    font-family: Verdana, sans-serif;
    font-size: 16px; 
    margin: 6px 0;
}
@media (max-width: 540px) {
    .stanki-lazer .triangle-txt h3 {  
        font-size: 18px; 
    }
    .stanki-lazer .triangle-txt p { 
        font-size: 14px; 
    }
}
@media (max-width: 400px) {
    .stanki-lazer .triangle-txt h3 {  
        font-size: 16px; 
    }
    .stanki-lazer .triangle-txt p { 
        font-size: 13px; 
    }
}


/* свойств резки */

.rezka-container {
    width: 100%;
    position: relative;
    background: url('/images/image2.jpg') repeat;
    background-size: cover;
    background-position: 50% 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;    
    height: 500px;
    margin: 10px 0;
}
.rezka-container:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(252, 246, 246, 0.5);
}
.rezka-container .rezka {
    margin: -20px 20px;
    width: 400px;
}
.rezka-container .rezka .face {
    width: 100%;
    height: 250px;
    transition: 0.5s;
    background: #FFF;
    overflow: hidden;
}
.rezka-container .rezka .face-1 {
    position: relative;
    z-index: 2;
    transform: translateY(50px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.rezka-container .rezka:hover .face-1 {
    transform: translateY(0);
}
.rezka-container .rezka .face-1 img {
    filter: brightness(0.8);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.rezka-container .rezka:hover .face-1 img {
    filter: brightness(1)
}
.rezka-container .rezka .face-1 h3 {
    padding: 10px 0;
    margin: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    width: 100%;
    color: #fff;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
}
.rezka-container .rezka .face-2 {
    position: relative;
    z-index: 1;
    opacity: 0;
    background: #fff;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    transform: translateY(-100px);
    height: 100px;
    transition: 0.5s;
}
.rezka-container .rezka:hover .face-2 {
    transform: translateY(0);
    opacity: 1;
}
.rezka-container .rezka:nth-child(1):hover .face-2 {
    height: var(--face_height_1);
}
.rezka-container .rezka:nth-child(2):hover .face-2 {
    height: var(--face_height_2);
}
.rezka-container .rezka:nth-child(3):hover .face-2 {
    height: var(--face_height_3);
}

.rezka-container .rezka:nth-child(4):hover .face-2 {
    height: var(--face_height_4);
}

.rezka-container .rezka .face-2 p {
    margin: 0;
    padding: 0 0 10px;
    font-size: 12px;
    line-height: 1.3;
    font-family: Verdana, sans-serif; 
}
@media screen and (max-width: 696px) {
    .rezka-container {
        margin: 140px 0;
    }
}


/* Списки резки материалов  */


.laserlist {
    padding:0;
    list-style: none;
}    
.laserlist li {
    position: relative;
    padding: 10px 30px;
    background: linear-gradient(to left, #EFEFEF 0%, #FFF, #EFEFEF);
    border: 2px solid #C0C0C0;
    color: #696b50;
    box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
    margin-bottom: 5px;
    text-align:center;
    background-size: 100% 100%;
    z-index: 1;
}
.laserlist li:hover {
    border: 2px solid #f6b491;
}
.laserlist li:before {
    content: "";
    position:absolute;
    width: 0;
    height: 100%;
    top: 50%;
    left: 50%;
    background: linear-gradient(to left, #fae2e2 0%, #FFF, #fae3e2);
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    z-index: -1;
}
.laserlist li:hover:before {
    width: 100%;
    opacity: 1;
} 

/*БЛОКИ С ИКОНКАМИ */

.iconlazer {
    margin:10px 0;
    transition: all 0.7s ease 0s;
    text-align:center;
}
.iconlazer i, 
.iconlazer .icon {
    font-size:64px;
    color:#7e046e;
    border: 6px double #4f5a64;
    display: block;
    height: 64px;
    width:64px;
    margin:0 auto;
    text-align: center;
    padding:18px;
    border-radius:100px;
    box-sizing: content-box;
}
.iconlazer:hover i, 
.iconlazer:hover .icon{
    transition: all 0.7s ease 0s;
    border: 6px double #fff;
    color:#fff;
    background: #967e28; 
}
.iconlazer h4{
    transition: all 0.7s ease 0s;
    color: #6d0331;
    position: relative;
    display:inline-block;    
    margin:0 0 6px 0;
    padding:6px;
    font-size:20px;
}    
.iconlazer:hover h4{
    color: #000;
}    
.iconlazer h4:before {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height:2px;
    background: #337AB7;
    content: '';
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(6px);
}
.iconlazer:hover h4:before,
.iconlazer:focus h4:before {
    opacity: 1;
    transform: translateY(0px);
}

/*Секция Заказа для Лазерной */
.zakaz-laser {
    max-width: 100%;
    border: 2px solid #fdeede;
    background: rgba(189, 188, 188, 0.5);

 }

 .lazer-master p {
    padding-left: 16px;
    margin-left: 16px;
 
 }


/*Список составления чертежа цена для Лазерной  */

.list-acad {
    padding-left:20px;
    font-size: 16px;
    color: #01018e;
    list-style: none;
}
.list-acad li{
    padding:4px;
}
.list-acad li:before {
    padding-left:10px;
    font-weight: bold;
    color: #c60303;
    content: "\2711";
    transition-duration: 0.5s;
}
.list-acad li:hover:before {
    color: #029727;
    content: "\2611";
} 


/*Иконки для Лазерной  */

.fa-shopify {
    font-size:25px;
    color: #7b0303;
}    

.fa-handshake {
    font-size:25px;
    color: #06a939;
}    

.fa-people-carry {
    font-size:25px;
    color: #605502;
}    

.fa-truck-moving {
    font-size:25px;
    color: #01018e;
}

.fa-hourglass-start {
    font-size:25px;
    color: #ae8404;
}    


/*Форма заказа */
.form-control {
    
    border: 1px solid #fdeede;

    background: rgba(252, 248, 240, 0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
 
}

/*Список от чего зависит цена для Лазерной  */

.list-zakaz {
    padding:6px;
    list-style: none ;
   
}
.list-zakaz li{
    padding:3px;
    padding-left: 2cm;
    margin-left: 2cm;
    font-style: italic;
    color: rgb(7, 101, 34);
}
.list-zakaz li:before {
    padding-right:10px;
    font-weight: bold;
    color: #8c0715;
    content: "\2714";
    transition-duration: 0.5s;
}
.list-zakaz li:hover:before {
    color: #4d7905;
    content: "\270E";
}    

/*СТРЕЛКА */

.strelka {
    margin: 40px auto 10px auto;
    width: 38px;
    height: 100px;
}
.strelka span {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #702c45;
    border-right: 5px solid #702c45;
    transform: rotate(45deg);
    margin: -16px 0;
    animation: strelka 4s linear infinite;
}
.strelka span:nth-child(2){
    animation-delay: -0.2s;
}
.strelka span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes strelka {
    0%{
        opacity: 0;
        transform: translate(0,-20px) rotate(45deg);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translate(0,20px) rotate(45deg);
    }
}

/*ФОТОГРАФИИ Лазерной резки */

figure.img-laser * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}            
figure.img-laser {
    position: relative;
    max-width: 100%;
    display: inline-block;
    border: 3px solid #8d8c8b;
    background: #746c57;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 15px 0;
    font-size: 0;
}
figure.img-laser img {
    transition: all 300ms;
    position: relative;
    top: 0;
    left: 0;
}
figure.img-laser:hover img {
    transition: all 700ms;
    transform: scale(1.1);
}
figure.img-laser figcaption {
    position: absolute;
    background: #f5f5f5;
    transition: transform 300ms;
    padding: 12px;
}
figure.img-laser:hover figcaption {
    transform: translateY(0);
}
figure.inf-bot:hover img {
    top: -40px;
}
figure.inf-bot figcaption {
    bottom: 0;
    transform: translateY(100%);
    border-top: 6px solid #7e735b;
}
figure.inf-lazer-top:hover img {
    top: 40px;
}
figure.inf-lazer-top figcaption {
    top: 0;
    transform: translateY(-100%);
    border-bottom: 6px solid #7e735b;
}
figure.inf-bot figcaption, 
figure.inf-lazer-top figcaption {
    width: 100%;
}
figure.inf-lazer-left:hover img {
    left: 90px;
}
figure.inf-lazer-left figcaption {
    left: 0;
    top: 0;
    transform: translateX(-180px);
    border-right: 6px solid #7e735b;
}
figure.inf-lazer-right:hover img {
    left: -90px;
}
figure.inf-lazer-right figcaption {
    right: 0;
    top: 0;
    transform: translateX(180px);
    border-left: 6px solid #7e735b;
}
figure.inf-lazer-left figcaption, 
figure.inf-lazer-right figcaption {
    width: 180px;
    height: 100%;
}
figure.img-laser figcaption .inf-lazer span {
    font-size: 13px;
    font-family: Verdana, sans-serif;  
    display: block;
}
figure.img-laser figcaption .inf-lazer h4 {
    font-size: 18px;
    display: inline-block;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #337AB7;
}