@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400&display=swap');
*{box-sizing:border-box; font-family: Arial, Helvetica, sans-serif;}

body{background:#f0f0f0;  font-size:12px; :0; padding-top:50px; margin:0;display:flex; flex-direction:column; width:100%; align-items: center; justify-content: center; }

.wrap{width:98%; max-width: 1100px; min-width:300px;  position:relative; z-index: 10; margin:0 auto;} 


header{height:100px; display: flex; height:50px; align-items: center; justify-content: center; flex-direction: column;position: fixed; z-index:100; left: 0; top: 0;  width: 100%;}
header .wrap{display: flex; justify-content: space-between;align-items: center; }
.header-logo{width:300px; display: flex; align-items: center;}
.header-logo a{color:#eeeeee; display: flex; flex-direction: column; text-decoration:none; font-size: 22px;}
.header-logo a small{color:#dadada; font-size: 11px; text-transform: uppercase;}

header nav{display: flex;}
header nav ul{display: flex; list-style: none; margin:0; padding:0;}
header nav  ul{display: flex; list-style: none; margin:0; padding:0;}
header nav  ul li a{display: flex; border-right: 1px #3f3f3f solid;; transition:0.3s; height:50px; padding:0 17px; align-items: center; color:#dadada; text-decoration:none; }
header nav  ul li a:hover{color:#fff; background:#3f3f3f;}
header nav  ul li a i{margin:0 5px 0 0;}

header nav  ul li{position: relative;}

header nav  ul li ul{position: absolute; left: 0; top:100%; overflow:hidden; max-height:0; transition:0.3s;}
header nav  ul li:hover ul{max-height:50px; background:#111;}

header nav  ul li.red a{background:#c40e33; color:#fff; border-right: 1px #970220 solid;}
header nav  ul li.red a:hover{background:#970220;}


.header-top{background-image:linear-gradient(to top,#111111,#333);  height:50px; width: 100%; display: flex; }
.header-bottom{background:#fff; height:50px; border-bottom:1px #bbb solid;  width: 100%; display: flex;}


.slide{width: 100%; position: relative; background:url('/images/svalka.jpg') no-repeat center; background-size: cover;}
.slide:before{content:""; width: 100%; height: 100%;  left: 0; top: 0; position: absolute; background:rgba(0,0,0,0.5); z-index: 1;}
.slide .wrap{z-index: 10; position: relative; display: flex; justify-content: space-between;}
.slide .wrap .h1{width: 100%; display: flex; justify-content: center; align-items: center; padding:30px;}
.slide .wrap .h1 h1{font-size: 42px; text-transform: uppercase; color:#fff; text-shadow: 0 0 1px 1px #333;}
.slide .wrap form{width:500px; min-height:515px; flex-shrink: 0; padding:40px 20px; background:rgba(255,255,255,0.5); min-height:300px;}

form .caption {display: flex; flex-direction: column;border-bottom:1px #bbb solid; margin-bottom:10px;padding-bottom:20px; }
form .caption strong{font-size:28px; text-transform: uppercase; color:333; }
form .caption span{color:#5a5a5a; font-size: 14px;}
form .caption {justify-content: center; align-items: center; text-align: center;}

.slide .wrap form>.flex-cols{padding:10px 0;}

form input, form textarea{border:none; font-size: 16px; height:38px; padding:0 10px; width:100%; background:#ebebeb; border-radius: 3px;}

form textarea{padding:10px !important;background:#ebebeb; height:160px !important; }

form button{border:none; font-size: 16px; color:#fff; text-decoration: uppercase; height:40px; padding:0 10px; width:100%; background:#ad4d4d; border-radius: 3px;}


main{width: 100%; padding:20px 0;}
article{min-height:200px; padding:30px; color:#333;  width: 100%; border-radius: 5px; margin:20px 0; box-shadow:0 0 10px rgba(0,0,0,0.3); font-size:18px; }

article img{margin:0 20px 0px 0;}
section.prem{padding:50px 0; width: 100%;background:url('/images/blackFura.jpg'); background-size:cover; min-height:300px; margin: 0;}

.prem h2{font-size:42px; display: block; color:#fff; text-align: center;}
.prem ul{margin:0; padding:0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap;}
.prem ul li{width: 30%; position: relative;  justify-content: center; padding:40px 20px 20px 20px; margin:40px 0; height:180px;  color:#fff; font-size:16px; border:1px #929292 solid;  border-top:none;}
.prem ul li:before{content:""; width:33%; height:3px; background:#fff; position: absolute; left: 0;top: 0;}
.prem ul li strong{display: block; width: 100%; text-align: center; font-size: 20px;}
.prem ul li i{display: flex; position: absolute; left: 50%; top:-25px; margin-left:-25px; font-size: 40px; width: 50px; height: 50px; justify-content: center; align-items: center;}

.prem ul li:after{content:""; width:33%; height:3px; background:#fff; position: absolute; right: 0;top: 0;}

.predFooter{width: 100%; position: relative;  background: #f3f3f3; background:url('/images/whiteFura.jpg') no-repeat center; background-size:cover; }
.predFooter .wrap{z-index: 10; position: relative; display: flex; justify-content: space-between; align-items: center;}
.predFooter .wrap .h1{width: 100%; display: flex; justify-content: center; align-items: center; padding:30px;}
.predFooter .wrap .h1 h1{font-size: 42px; text-transform: uppercase; color:#fff; text-shadow: 0 0 1px 1px #333;}
.predFooter .wrap form{width:500px; flex-shrink: 0; padding:40px 20px; background:rgba(255,255,255,0.5); min-height:300px;}

.predFooter .wrap form .caption {display: flex; flex-direction: column;border-bottom:1px #bbb solid; margin-bottom:10px;padding-bottom:20px; }
.predFooter .wrap form .caption strong{font-size:28px; text-transform: uppercase; color:333; }
.predFooter .wrap form .caption span{color:#5a5a5a; font-size: 14px;}
.predFooter .wrap form .caption {justify-content: center; align-items: center; text-align: center;}

.predFooter .wrap form>.flex-cols{padding:10px 0;}

.predFooter .wrap form input, form textarea{border:none; font-size: 16px; height:38px; padding:0 10px; width:100%; border:1px #bbb solid; background:#ebebeb; border-radius: 3px;}
.predFooter .wrap form textarea{padding:10px; height:160px; }

.predFooter .wrap form button{border:none; font-size: 16px; color:#fff; text-decoration: uppercase; height:40px; padding:0 10px; width:100%; background:#ad4d4d; border-radius: 3px;}


.contactBox{display: flex; padding:0 30px 0 0; width: 100%; list-style: none; flex-direction: column; margin:0;}
.contactBox li{width: 100%; text-align: center; font-size: 18px; color:#3d3d3d; display: flex; justify-content: center; align-items: center; margin:20px 0; height:30%; background:rgba(255,255,255,0.5); padding:20px; height:100px;}


footer{padding:20px; width: 100%; background: #333; color:#dadada; }
.footer_cols{display: flex; justify-content: space-between;}

.footer_cols>div{width: 30%;}

.flex-r {
    display: flex;
    width: 100%;
  }
  .flex-b {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }
  .flex-c {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  .flex-col {
    width: 100%;
  }
  .flex-fix {
    flex-shrink: 0;
  }
  .flex-center {
    justify-content: center;
    align-items: center;
  }
  .flex-margin10 > * {
    margin-left: 10px;
  }
  .flex-margin10 > *:first-child {
    margin-left: 10px;
  }

  .flex-sb {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .flex-sb > * {
    margin-left: 10px !important;
  }
  .flex-sb > *:first-child {
    margin-left: 0px !important;
  }

  .flex-line.flex-border{padding:5px 0; border-bottom:1px #bbb solid;}
  

.flex-line{display: flex;}
.flex-rows{display: flex; flex-wrap: wrap;}
.flex-cols{display: flex; flex-direction: column;}

.flex-center{align-items: center; justify-content: center;}

.flex-item100{display: flex; width: 100%;}
.flex-item75{display: flex; width: 75%;}
.flex-item50{display: flex; width: 50%;}
.flex-item30{display: flex; width: 30%;}
.flex-item25{display: flex; width: 25%;}
.flex-item15{display: flex; width: 15%;}
.flex-item10{display: flex; width: 10%;}

.flex-item5{display: flex; width: 5%;}

.flex-item15{display: flex; width: 15%;}
.flex-fix{display: flex; flex-shrink: 0;}