*, ::after, ::before {box-sizing: border-box;}

html, body {
  min-height: 100%;
  width: 100%;
  font-family: Arial;
  margin: 0;
  cursor: default;
}

main{
  width: 100%;
  margin:0 auto;
}

a{text-decoration:none; color: #000}

:target {
  scroll-margin-top: 60px;
}

.slide-up-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpFadeIn 1s forwards;
}

@keyframes slideUpFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.left{text-align: left !important;}

.basic_container{
  width: 100%;
  min-height: calc(100vh - 60px);
  position: relative;
  margin: 0 auto; 
  margin-top: 60px;
  padding-top: 60px;
  max-width: 1400px;
  text-align: center; 
  align-items: center;
}
.basic_container .heading.with_arrow{ margin: -50px 0 0px 60px;}

.cont_30{
  display: inline-block;
  vertical-align: top;
  width: 29%;
  height: auto;
  line-height: normal;
}

.cont_30 img{
  width: 80%;
  max-width: 300px;
  line-height: 45px;
}

.cont_70{
  height: 100%;
  width: 69%;
  display: inline-block;
  padding: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  margin: auto 0;
}

.cont_40{
  display: inline-block;
  vertical-align: top;
  width: 39%;
  height: auto;
  line-height: normal;
}

.cont_40 img{
  width: 100%;
}

.cont_60{
  height: 100%;
  width: 59%;
  display: inline-block;
  padding: 40px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  margin: auto 0;
}

.cont_60 .heading, .cont_70 .heading{ margin: -50px 0 30px 60px;}
.cont_60 .tab_bn{ margin-top: 30px;}

@media (max-width: 1200px) {
  .cont_70, .cont_30, .cont_60, .cont_40{
    width: 100%;
  }
  .cont_40 img{max-width: 450px;}
}

.bold{font-weight: bold;}

.front_container{
  width: 100%;
  min-height: calc(100vh - 60px);
  position: relative;
  max-width: 1400px;
  margin: auto;
  text-align: center; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.container{
  width: 100%;
  position: relative;
  max-width: 1400px;
  margin: auto;
  text-align: center; 
  justify-content: center; 
  height: calc(100vh - 60px);
  min-height: 650px;
}

.bg_fixed{
  width: 100%;
  min-height: 400px;
  margin-top: 60px;
  overflow: hidden;
}

.bg_fixed.white, .bg.white{background: #fff;}

.heading{
  line-height: normal;
  margin: 0 auto;  
  font-size: 35px;
  color: #000;
  text-align: center;
  margin-top: 60px;
}
.heading.small{font-size: 31px; padding-top: 10px;}

@media (max-width: 650px) {
  .heading{ font-size: 30px;}
  .heading.small{font-size: 28px;}
}

@media (max-width: 500px){
  .heading {font-size: 28px;}
  .heading.small{font-size: 26px;}
}

@media (max-width: 400px){
  .heading {font-size: 23px;}
  .heading.small{font-size: 22px;}
}

.bg{
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #9cc7ff, #dff6ff);
  /*background:  
    linear-gradient(217deg, rgba(255, 244, 145, 1), rgba(0, 0, 0, 0) 70.71%), /*жёлтый*/
   /* linear-gradient(127deg, rgba(255, 207, 228, 1), rgba(0, 0, 0, 0) 70.71%), /*розовый*/
   /* linear-gradient(336deg, rgba(137, 226, 250, 1), rgba(0, 0, 0, 0) 70.71%); /*голубой*/
  position: fixed;
  z-index: -10;
}

/*------------------------NAVBAR----------------------*/
.navbar{
  width: 100%;
  height: 60px;
  background: #fff;
  color: #000;
  position: fixed;
  top: 0;
  z-index: 10;
}

.navbar_name{
  height: 100%;
  display: inline-block;
  float: left;
  margin-left: 15px;
  line-height: 60px;
}

.navbar_name img{
  height: 16px;
  vertical-align: middle;
}

.navbar_name > img:first-child{
  height: 32px;
  margin-right: 10px;
}

.navbar_tabs{
  display: flex;
  width: 75%;
  max-width: 1000px;
  float: right;
  font-size: 0px;
}

.tab, .tab_bn{
  height: 60px;
  text-align: center;
  width: 100%;
  max-width: 250px;
  line-height: 60px;
  display: inline-block;
  font-size: 17px;
  margin: 0 auto;
  transition: transform 0.3s ease;
}
.tab{cursor: pointer;}
.navbar .tab_bn{
  margin-right: 20px;
}
.tab:hover, .button:hover {
  transform: scale(1.1);
}

.button, .bn {
  height: 35px;
  cursor: pointer;  
  text-align: center;
  width: 100%;
  line-height: 35px;
  margin-top: 10px;
  border-radius: 20px;
  border: none;
  color: #000;
  position: relative; 
  transition: transform 0.3s, border 0.3s ease;
}
.button.black{background: #000; color: #fff;}
.button.white{background: #fff; color: #000;   box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.04);}
.button.blue{background: #9cc7ff; color: #000;  border: 1px solid #000;}
.button.disable{background: #e1e4ea; color: #a5a7a8;  border: 1px solid #a5a7a8; cursor:default;}
.button.disable:hover {transform: none;}
.bn {
  border: 1px solid #000;
  border-bottom: 1px solid #105bbe;
  border-right:  1px solid #105bbe;
  color: #000;
  z-index: 5;
  background: #9cc7ff;
}
.bn_bg{
  height: 35px;
  width: 100%;
  margin-top: -31px;
  margin-left: 3px;
  border-radius: 20px;
  border: 1px solid #000;
  background: #76b2ff;
  position: relative;
  z-index: 4;
}
.tab_bn:hover .bn{
  transform: translate(3px, 4px);
  border: 1px solid #000;
}
.burger{
  display: none;
  position: absolute;
  z-index: 1000;
  align-items: center;
  justify-content: flex-end;
  width: 60px;
  height: 100%;
  top: 0; right: 0;
  padding: 29px 15px 29px 0px;
  cursor: pointer;
}
.burger span{
  height: 2px;
  width: 35px;
  position: absolute;
  transform: scale(1);
  background-color: #000;
}
.burger::before{
  content: '';
  position: absolute;
  height: 2px;
  width: 35px;
  margin-top: 18px;
  background-color: #000;
  transition: all 0.3s ease 0s;
}
.burger::after{
  content: '';
  position: absolute;
  height: 2px;
  width: 35px;
  top: 40px;
  background-color: #000;
  transition: all 0.3s ease 0s;
}
.burger::before { top: 0 }
.burger::after { bottom: 0 }
.burger.active span { transform: scale(0) }
.burger.active::before{
  top: 12px;
  transform: rotate(-45deg);
}
.burger.active::after{
  top: 30px;
  transform: rotate(45deg);
}

.hide_navbar{
 right: -350px!important;  
}

@media (max-width: 900px) {
  .navbar_name{position: absolute;}
  .burger { display: block;}
  .navbar_tabs{
    width: 350px;
    display: block;
    height: 1500px;
    line-height: normal;
    background: #fff;
    display: static;
    position: relative;
    right: 0;
    padding: 40px;
    border-left: 1px solid #000;
    padding-top: 60px;
    z-index: 102;
    transition: right .3s ease-in;
    cursor: default;
  }
  .tab, .tab_bn {
    line-height: 50px;
    height: 50px;
  }
  .bg_black{
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  .bg_black.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5);
  }
}
/*-------------------------------FRONT PAGE----------------------------------*/
.front_page {
  width: 100%;
  max-width: 1500px;
  text-align: right;
  position: relative;
  margin: auto;
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}

.main_information{
  width: 33%;
  max-height: 50%;
  position: absolute;
  bottom: 5%;
  left: 1%;
  line-height: 20px;
  text-align: left;
  z-index: 5;
  font-size: 20px;
  line-height: 25px;
}

.main_information img{
  width: 100%;
}

.Vi{
  width: 90%;
  max-width: 1300px;
  max-height: calc(100vh - 100px);  
  min-height: 550px;
  vertical-align: middle;
  margin-right: 30px;
  z-index: 0;
}

.vi{
  display: none;
  width: 95%;
  height: auto;
  margin: 50px auto;
}

@media (max-width: 1200px) {
  .front_page {padding-top: 10px;}
  .Vi{display: none;}
  .vi{display: block;}
  .main_information{
    width: 80%;
    position: static;
    margin: 0 auto;
    font-size: 18px;
  }

  .main_information img{margin-bottom: 10px;}
}

@media (max-width: 500px) {
  .front_page {padding-top: 70px;}
}
/*----------------------------------SERVINGS---------------------------------------*/
.srv_container{
  width: 100%;
  position: relative;
  width: 100%;
  min-height: 350px;
  max-width: 1400px;
  margin: 0px auto;
  padding: 70px 0 40px 0; 
  text-align: center; 
  display: flex;
  flex-wrap: wrap;
}
#servings{padding: 50px 0;}
.srv_container .tab_bn{margin-top: 30px;}

.srv_con{
  flex: 1 1 calc(25% - 10px); /* для 4-х элементов в строке */
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  align-items: stretch;
}

.srv_con_50{
  flex: 1 1 calc(100% - 10px);
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 30px;
  align-items: stretch;
}

.con_50_r, .con_50_l{
  display: inline-block;
  width: 40%;
  color: #9da8c9;
  text-align: left;
  position: absolute;
  vertical-align: top;
  bottom: 40px;
  align-items: stretch;
  font-size: 13px; 
}

.con_50_r div, .con_50_l div{
  color: #0073de;
  text-align: left;
  margin-top: 5px;
  font-size: 22px; 
}

.con_50_r{right: 35px;}
.con_50_l{left: 35px;}

.srv_card{
  width: 100%;
  padding: 10px;
  height: 100%;
  min-height: 200px;
  border-radius: 15px;
  border: 1px solid #e4ecfd;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.04);
  margin: auto;
  background: #fff;
  cursor: pointer;
}
.srv_con_50 .srv_card{
  max-width: 1000px;
  cursor: default;
  padding-bottom: 100px;
  position: relative;
}
.srv_con_50 .tab_bn{
  width: 200px;
  height: 50px;
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%); 
}
.srv_card li{
  text-align: left;
  margin: 7px 0;
}
.srv_img{
  height: 220px;
  border-radius: 15px;
  margin: 15px auto;
}
.srv_img img{
  height: 100%;
  transition-duration: 0.5s;
  transition-property: transform;
}
.srv_card:hover .srv_img img{
  transform: scale(1.04);
}
.srv_header{
  width: 100%;
  margin: 20px 0 20px 0;
  font-size: 22px;
  color: #000;
  padding-top: 10px;
}
.srv_text{
  width: 100%;
  font-size: 16px;
  text-align: left; 
  color: #2263b0; 
  opacity: .7;
}
@media (max-width: 1200px) {
  .container, .front_container, .srv_container, .basic_container{
    max-width: 600px;
    padding: 30px 0;
  }
  .srv_con{flex: 1 1 calc(50% - 10px);}
  .srv_con_50{flex: 1 1 calc(100% - 10px);}
  .srv_con.hide_img {flex: 1 1 calc(100% - 10px); padding: 3px 10px;}
  .srv_con.hide_img .srv_img{ display: none;}
  .srv_con.hide_img .srv_header{margin: 15px 0;padding:0px;}
  .srv_con.hide_img .srv_card{min-height: 0px;}
}

@media (max-width: 500px) {
  .srv_container{
    margin: 40px auto;
    padding: 0;
  }
  #servings{padding: 0; }
  .srv_con{
    width: 440px;
    max-width: 100%;
    height: auto;
    flex: 1 1 calc(100% - 10px);
  }
  .srv_con_50{
    padding: 10px 0px;
  }
  .srv_con_50 .srv_card{
    width: 90%;
    padding: 10px;
    padding-bottom: 90px;
  }
  .con_50_r, .con_50_l{ 
    width: 100%; 
    position: static; 
    padding-left: 25px; 
    padding-top: 10px;
  }
}
/*-------------------------------PORTFOLIO----------------------------------*/
input[type=radio] {
  display: none;
}
.portfolio{
  width: 100%;
  height: 100%;
  min-height: 450px;
  line-height: normal;
}
#portfolio{margin-top: 0;}
#portfolio .container{min-height: 690px;}
.card_container{
  height: calc(100vh - 150px);
  min-height: 690px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background .4s ease-in;
}
.card_container .heading{ 
  padding-bottom: 40px;
}
.cards{
  position: relative;
  width: 100%;
  height: 90%;
  max-height: 500px;
}
.card{
  position: absolute;
  width: 55%;
  height: 100%;
  min-height: 350px;
  left: 0; right: 0;
  margin: auto;
  transition: transform .4s ease;
  cursor: pointer;
  justify-content: center;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #c7ccd7;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.06);
  background: #fff;
  padding: 0px;
  overflow: hidden;
}
.portfolio_navi{
  width: 300px;
  max-width: 80%;
  padding-top: 50px;
  margin: 20px auto; 
}
.portfolio_navi label{
  display: inline-block;
  width: 10px;
  margin: 4px;
  height: 10px;
  border-radius: 10px;
  background: #c4cde8; 
  cursor: pointer;
}
.arrow_left, .arrow_right{
  width: 60px;
  height: 60px;
  position: absolute;
  background: #fff;
  margin-top: -52px;
  z-index: 8;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.04);
}
.card_container .arrow_right{position: absolute; margin: 0 -62% 0 0;}
.card_container .arrow_left {position: absolute;margin: 0 0 0 -62%;}

.arrow_right::before, .arrow_right::after, .arrow_left::before, .arrow_left::after{
  content: '';
  position: absolute;
  height: 4px;
  border-radius: 2px;
  width: 20px;
  background-color: #c4cde8;
  transition: background-color 0.3s; 
}
.arrow_right::before{transform: rotate(45deg); top: 23px; right: 17px}
.arrow_right::after {transform: rotate(-45deg);top: 35px; right: 17px}
.arrow_left::before {transform: rotate(45deg); top: 35px; left:  17px}
.arrow_left::after  {transform: rotate(-45deg);top: 23px; left:  17px} 
.arrow_right:hover::before, .arrow_right:hover::after, .arrow_left:hover::before, .arrow_left:hover::after{background-color: #000;}
.card:hover img{
  transform: scale(1.03);
}
.card_bg{
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.card_bg img{
  width: 100%;
  transition-duration: 0.5s;
  transition-property: transform;
}
.card_title{
  width: 100%;
  height: 100px;
  font-size: 21px;
  position: relative;
  text-align: left;
  margin-top: -80px;
  padding-left: 20px;
  z-index: 5;
  line-height: normal;
  overflow: hidden;
}
.card_text{
  width: 100%;
  height: 130px;
  font-weight: normal!important;
  font-size: 15px;
  padding-top: 10px;
  overflow: hidden;
  opacity: .7;
}

#item-1:checked ~ .portfolio_navi #point-1, #item-2:checked ~ .portfolio_navi #point-2, #item-3:checked ~ .portfolio_navi #point-3, #item-4:checked ~ .portfolio_navi #point-4, #item-5:checked ~ .portfolio_navi #point-5 {
background: #000;}

#item-1:checked ~ .cards #slide-4, #item-2:checked ~ .cards #slide-5, #item-3:checked ~ .cards #slide-1, #item-4:checked ~ .cards #slide-2, #item-5:checked ~ .cards #slide-3 {
  transform: translatex(-50%) scale(.7);
  z-index: 0;
  filter: brightness(85%);
}

#item-1:checked ~ .cards #slide-3, #item-2:checked ~ .cards #slide-4, #item-3:checked ~ .cards #slide-5, #item-4:checked ~ .cards #slide-1, #item-5:checked ~ .cards #slide-2 {
  transform: translatex(50%) scale(.7);
  z-index: 0;
  filter: brightness(85%);
}

#item-1:checked ~ .cards #slide-5, #item-2:checked ~ .cards #slide-1, #item-3:checked ~ .cards #slide-2, #item-4:checked ~ .cards #slide-3, #item-5:checked ~ .cards #slide-4{
  transform: translatex(-30%) scale(.8);
  z-index: 1;
  filter: brightness(95%);
}

#item-1:checked ~ .cards #slide-2, #item-2:checked ~ .cards #slide-3, #item-3:checked ~ .cards #slide-4, #item-4:checked ~ .cards #slide-5, #item-5:checked ~ .cards #slide-1 {
  transform: translatex(30%) scale(.8);
  z-index: 1;
  filter: brightness(95%);
}

#item-1:checked ~ .cards #slide-1, #item-2:checked ~ .cards #slide-2, #item-3:checked ~ .cards #slide-3, #item-4:checked ~ .cards #slide-4, #item-5:checked ~ .cards #slide-5 {
  transform: translatex(0) scale(1);
  z-index: 2;
}

@media (max-width: 1200px) {

  #portfolio .container{height: 2160px;}
  .portfolio_navi, .portfolio .arrow_left, .portfolio .arrow_right{display:none;}
  .portfolio .heading{margin-top: 30px; padding-bottom: 20px;}
  .card_container{
    height: 1200px;
    display: block;
  }
  .cards{
    position: static;
    width: calc(100% - 20px);
    max-height: 500px;
    margin: 10px;
    height: 370px;
  }
  .card{
    position: static;
    border: none;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.0);
    background: #fff;
    padding: 0px;
    width: 100%;
    justify-content: top;
  }
  .card_bg{overflow: hidden;}
  .card_title{
    margin-top: -80px;
    font-size: 16px;
    height: 90px;
  }
  .cards #slide-1, .cards #slide-2, .cards #slide-3, .cards #slide-4, .cards #slide-5 {
    filter: brightness(100%)!important;
  }

}

@media (max-width: 500px) {
  #portfolio .container{height: 1720px;}
  .portfolio .heading{margin-top: 30px; padding-bottom: 10px;}
  .cards{height: 310px;}
}

@media (max-width: 400px) {
  #portfolio .container{height: 1570px;}
  .cards{height: 280px;}
}
/*-----------------------------FEEDBACK---------------------------*/
.feedback{
  width: 500px;
  max-width: 90%;
  height: 200px;
  border-radius: 15px;
  padding: 40px;
  background: #fff;
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  margin: auto; 
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.04);
}
.feedback .heading{ 
  margin-top: 0px;
  margin-bottom: 30px;
}

.feedback a {font-size: 27px; color:#2871d5; text-decoration: underline;}
.feedback a:hover {font-size: 27px; text-decoration: none;}

.feedback .tab_bn{
  width: 250px;
  height: 10px;
}
.text-fb__input {
  display: block;
  width: calc(100% - 40px);
  font-family: 'Arial';
  height: 35px;
  padding: 10px 10px;
  margin: 20px 0;
  font-size: 18px;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  border-bottom: 1px solid #bdbdbd;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.theme-label {
  color: #212529;
  position: absolute;
  display: block;
  margin: 6px 0 0 45px;
  font-size: 18px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.text-fb__input[type="text"]{padding-left: 65px;}
.text-fb__input::placeholder{
  color: #212529;
  opacity: 0.4;
}
.text-fb__icon_theme:focus-within .theme-label {
  color: #000;  
  opacity: 1;
}
.text-fb__input:focus {
  color: #212529;
  outline: 0;
  border-bottom: 1px solid #000;
}
.text-fb__input:focus .text-fb__icon_telephone {
  filter: brightness(0%);
}
.text-fb__icon {
  position: relative;
}
.text-fb__icon::before {
  content: '';
  color: #bdbdbd;
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0px;
  top: 8px;
}
.text-fb__icon input, .text-fb__icon textarea{
  margin-left: 35px;
  font: 'Arial';
}
.text-fb__icon_name::before, .text-fb__icon_email::before, .text-fb__icon_telephone::before, .text-fb__icon_theme::before, .text-fb__icon_message::before{
  width: 20px;
  background-size: contain;
  background-repeat: no-repeat; 
  opacity: 0.15;transition: opacity 0.3s ease;
}     
.text-fb__icon_name::before {background-image: url("../img/icon/name.png"); }
.text-fb__icon_email::before {background-image: url("../img/icon/email.png");}
.text-fb__icon_telephone::before {background-image: url("../img/icon/telephone.png");}
.text-fb__icon_theme::before {background-image: url("../img/icon/letter.png");}
.text-fb__input:focus + .text-fb__icon::before,
.text-fb__icon:focus-within::before {opacity: 1;}
.text-fb__icon_theme input{margin-bottom: 0px; margin-top: 30px;}
.text-fb__icon_theme textarea {
  height: 150px;
  resize: none;
  margin-top: 0px;
}

@media (max-width: 500px){
  .text-fb__input {
    font-size: 15px;
  }
  .feedback{
    padding: 25px;
  }
  .feedback .heading{
    margin: 20px 0 30px 0; 
  }
  .text-fb__icon input, .text-fb__icon textarea{
    margin-left: 25px;
  }
  .theme-label {
    font-size: 15px; 
    margin: 6px 0 0 35px;
  }
}
.popup {
  width: 100%;
  height: 100%;
  min-height: 550px;
  text-align: center;
  position: fixed;
  overflow: hidden;
  overflow-y: scroll;
  top: 0;left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease,  visibility 0.3s ease;
  cursor: pointer;
}
.popup.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.popup_body {
  width: 350px;
  max-width: 90%;
  height: 310px;
  position: absolute;
  margin: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  color: #000;
  padding: 30px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.04);
  border-radius: 15px;
  background: #fff;
  font-size: 18px;
}
.popup_body img{
  width: 180px;
  margin: 15px auto;
}
.popup_body .tab{
  margin-top: 15px;
}
.cross{
  position: absolute;  
  right: 15px; top: 15px; 
  height: 30px;
  width: 30px;
  cursor: pointer;
}
.cross:before, .cross:after{
  position: absolute;
  top: 0px;
  left: 15px;
  content: ' ';
  height: 35px;
  width: 2px;
  background-color: grey;
  border-radius: 1px; 
  transition: background-color 0.3s; 
}
.cross:before{transform: rotate(45deg);}
.cross:after{transform: rotate(-45deg);}
.cross:hover::before, .cross:hover::after{ background-color: #000;}

/*-------------------------------BASEMENT---------------------------*/
.basement{
  width: 100%;
  min-height: 150px;
  background: #5477af;
  color: #fff;
}

.basement a{color: #fff; text-decoration: underline;}
.basement a:hover{color: #fff; text-decoration: none;}

.basement_container{
  max-width: 1400px;
  padding: 30px;
  margin: 0 auto;
  display: flex; 
  width: 100%;
}

.bmt{
  flex: 1;
  vertical-align: top;
  padding-left: 40px;
}

.bmt_heading{
  width: calc(100% - 50px)!important;
  margin: 20px 0 5px 0px;
  vertical-align: top;
  margin-left: -45px;
}

.bmt_heading img{
  width:25px !important;
  height:25px !important;
  vertical-align: middle;
  margin: 0 10px;
  opacity: 0.4;
}

.bmt_bottom{
  width: 100% !important;
  text-align: center;
  padding: 15px;
  margin-top: 30px;
  opacity: 0.4;
}

.networks {
  padding-top: 50px;
  flex: 0 0 auto!important;
  padding-left: 0px!important;
}

.networks img{
  width:45px;
  height:45px;
  margin: 10px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.networks img:hover{
  opacity: 1;
}
@media (max-width: 1100px) {
  .basement_container{
    display: block !important;
  }
  .bmt{
    display: inline-block !important;
    width: 48%;
  }  
  .networks {
    padding-top: 25px;
  }
}
@media (max-width: 700px) {
  .bmt{
    width: 100%;
  }  
  .bmt_bottom{
    margin-top: 0px;
  }
}
@media (max-width: 500px){
  .basement {
    font-size: 14px;
  }
}

.gallery_container{
  width: 100%;
  position: relative;
  min-height: 350px;
  max-width: 1400px;
  margin: 70px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  line-height: 0;
}
.gallery{
  width: 100%;
  max-width: 445px;
  margin: 5px;
  cursor: default;
  overflow: hidden;
  border-radius: 15px;
  background: #f0f0f0;
}
.gallery img{
  width: 100%;
  transition-duration: 0.5s;
  transition-property: transform;
}
.gallery_container .popup.open{
    opacity: 0;
    visibility: hidden;
}
@media(min-width: 600px) {
  .gallery{cursor: pointer;}
  .gallery:hover img{transform: scale(1.04);}
  .gallery_container .popup.open{
    opacity: 1;
    visibility: visible;
  }
}
/*------------------------- popup gallery --------------------------*/
.popup_gallery{
  width: 90%;
  max-width: 1150px;
  max-height: 95%;
  position: absolute;
  margin: auto;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background: none;
  object-fit: contain;
  cursor: default;
}
.popup .arrow_left, .popup .arrow_right{
  top: 50%;
  position: absolute;
  margin-top: 0px;
}
.popup .arrow_right{right: 0px;}

@media (min-width: 1350px) {
  .popup .arrow_left{margin-left: calc(50% - 650px);}
  .popup .arrow_right{margin-right: calc(50% - 650px);}
}

/*---------------------------- FOR PORTFOLIO --------------------------------*/
.bg_fixed.gz {background: linear-gradient(#2775fa, #1527b7); color: #fff !important;}
.bg_fixed.gz .heading{color: #fff !important;}
.bg_fixed.kolos {background: #fbf9ee; color: #0d4321 !important;}
.bg_fixed.kolos .heading{color: #0d4321 !important;}
.bg_fixed.web_archive, .basement.web_archive {
  background: linear-gradient(217deg, #3382c7, rgba(0, 0, 0, 0) 70.71%), 
              linear-gradient(127deg, rgba(255, 207, 228, 1), rgba(0, 0, 0, 0) 70.71%), 
              linear-gradient(336deg, rgba(137, 226, 250, 1), rgba(0, 0, 0, 0) 70.71%); color: #000 !important;}
.basement.web_archive img{filter: brightness(0%);}
.bg_fixed.web_ipk {background: #accee3;}

.bg_fixed.gz .cont_40 {  
  animation-name: floating;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes floating {
  0% { transform: translate(0,  0px);}
  50%  { transform: translate(0, 6px); }
  100%   { transform: translate(0, -0px);}    
}

.bg_fixed.mv {background: linear-gradient(#001b79, #0048bb); color: #fff !important;}
.bg_fixed.mv .heading{color: #fff !important;}

.basement.gz{background: #1527b7;}
.basement.kolos{background: #002f13;}
.basement.mv{background: #001b79;}
.basement.web_ipk {background: #4a677c;}