@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Roboto:300,400,500,700&display=swap&subset=latin-ext');
 *, *::after, *::before {margin:0;padding: 0;box-sizing: inherit;}
html{font-size:62.5%;}

body{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #2b2a29;
  box-sizing: border-box;
  font-size: 1.4rem;
}

img{border:0;max-width: 100%;}

a{text-decoration: none;color: inherit;-webkit-transition:all .3s;-moz-transition:all .3s;transition: all .3s;}
button, input, textarea{border:0;}
button{cursor: pointer;}
ul{padding-left: 2rem;}
h1, h2, h3, h4, h5, h6 {font-family: 'Bree Serif', serif;letter-spacing: 0.7px;font-weight: 300;}
h1, .title h2{font-size: 3.2rem;text-transform: uppercase;text-align: center;letter-spacing: 3px;}
.container {
    position: relative;
    width: 100%;
    max-width: 128rem;
    padding: 0 2rem;
    margin: 0 auto;
    box-sizing: border-box;
}
.container::after, .section::after{content: "";display: table;clear: both;}
.none{display: none;}
.content{padding: 0 0 8rem 0;}
/*------FLEX------*/
.flex{display: flex;justify-content: space-between;align-items: center;}
.flex-box{display: flex;flex-wrap: wrap;}
/*------BX SLIDER------*/
.bx-wrapper .bx-viewport{border:0; left: 0; box-shadow: none;}
/*------HEADER------*/
.header{
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 8;
}
.header.change{
  -webkit-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 19px 1px rgba(0,0,0,0.2);
}
.main-menu{display: flex;list-style: none;margin-left: auto;}
.main-menu li a{padding: 0 1rem;text-transform: uppercase;font-size: 1.6rem;}
.main-menu li a:hover, .main-menu li a.mslc{ color: #00a0e3;}
.btn-upit {
  margin-left: 3rem;
  background-color: #00a0e3;
  color: #fff;
  text-transform: uppercase;
  padding: 3.2rem 1.5rem;
  font-size: 1.6rem;
}
.btn-upit:hover{opacity: .7;}
/*------HERO SLIDER------*/
.hero{margin-top: 9.12rem;}
.slide{
  width: 100%;
  height: 55vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  display: flex;
}
.hero-slider{padding:0; margin:0;}
.hero-txt{
  position: absolute;
  left: 0;
  bottom: 20%;
  background: #00a0e3;
  align-self: flex-end;
  padding: 4rem;
  max-width: 50rem;
  width: 100%;
  -webkit-box-shadow: 0px 4px 1.6rem 1rem rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 4px 1.6rem 1rem rgba(0,0,0,0.3);
  box-shadow: 0px 4px 1.6rem 1rem rgba(0,0,0,0.3);
}
.hero-txt h2{color: #fff;font-size: 1.8rem;}
.color-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
}
/*------TITLE------*/
.title{padding:8rem 0; }
h1, .title h2{padding-bottom: 2rem;position: relative;}
h1::after, h1::before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
h1::after{width: 30%;height: 1px;background: #aaaaaa;}
h1::before{width: 10%;height: 3px;z-index: 2;}
/*------PINK TITLE------*/
.pink h1, .pink h2{color: #e71887;}
.pink h1::before{background: #e71887;}
/*------BLUE TITLE------*/
.blue h1, .blue h2{color: #00a0e3;}
.blue h1::before{background: #00a0e3;}
/*------BLUE TITLE------*/
.black h1, .black h2{color: #2b2a29;}
.black h1::before{background: #2b2a29;}
/*------CONTENT------*/
.other-main-content{margin-top: 9.12rem;}
.bg-grey{ background: #eeeeee;}
.item{width: 50%;display: flex;margin-bottom: 3rem;align-items: flex-start;}
.item-icon{
  padding: 3rem;
  background: #e71887;
}
.item-icon img{width: 4rem;}
.item-txt{padding: 0 2rem; width: 100%;}
.item h3{font-size: 2.8rem;text-transform: uppercase;color:#e71887;}
.item p{color: #333333;}
.item:last-child{width: 70%;}
.item:hover .item-icon{
  -webkit-box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
  -moz-box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
  box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
}

.box{width: 23.5%;margin-right: 2%;margin-bottom: 2%;position: relative;}
.box img{width: 100%;}
.box:nth-child(4n+4){margin-right: 0;}
.box-title{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  background-color: rgba(0,160,227,.7);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: height .3s ease-in-out;
  -moz-transition: height .3s ease-in-out;
  transition: height .3s ease-in-out;
}
.box-title h3{
  color: #fff;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out;
  -moz-transition: opacity .6s ease-in-out;
  transition: opacity .6s ease-in-out;
  text-align: center;
}
.box:hover{
  -webkit-box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
  -moz-box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
  box-shadow: .4rem .4rem 1.4rem 1px rgba(0,0,0,0.5);
}
@media only screen and (min-width: 48em){
.box:hover .box-title{height: 100%;}
.box:hover .box-title h3{opacity: 1;}
}
.btn-wrapper{text-align: center;}
.btn {
  display: inline-block;
  margin: 5rem auto;
  font-size: 1.6rem;
  text-transform: uppercase;
  border: 5px solid #00a0e3;
  border-radius: 5rem;
  padding: 1.5rem 4rem;
  color: #00a0e3;
  font-weight: 700;
}
.btn:hover{color: #fff;background: #00a0e3;}
.references .bx-wrapper .bx-viewport{background: transparent;}
.ref {margin-right: 4%;}
.ref:nth-child(6n+6){margin-right: 0;}
.ref img{width: 100%;}
.ref-txt{width: 16.6%;text-align: center;margin-bottom: 4rem;}
.ref-txt h3{margin-top: 1.5rem;}
.flex-blog{display: flex;justify-content: space-between;}
.refr-flex{justify-content: space-between;}
.inner-box {
  width: 40%;
  padding: 0 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.blog-txt{padding:0 3rem 4rem 2rem;}
.blog-txt h3{
  font-size: 1.8rem;
  color:#e71887;
  text-transform: uppercase; 
  margin-bottom: 2rem;
}
.blog-btn{
  display:inline-block;
  color: #e71887;
  font-size: 1.4rem;
  font-family: 'Bree Serif', serif;
  position: relative;
  margin-top: 2rem;
}
.blog-btn::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3rem;
  height: 1px;
  background: #e71887;
  -webkit-transition: width .3s ease-in-out;
  -moz-transition: width .3s ease-in-out;
  transition: width .3s ease-in-out;
}
.blog-btn:hover::after{width: 4rem;}
.bg-blue{background: #00a0e3; padding-top: 7rem;}
.bg-pink{background: #e71887;}
.contact-us{padding: 8rem 0;text-align: center;}
.contact-us h2{color: #fff;font-size: 3.2rem; text-align: center;}
.contact-us p{margin: 0 auto; width: 60%; color: #fff;margin-top: 5rem;}
.btn.btn-white{color: #fff; border-color: #fff;}
.btn.btn-white:hover{background: #fff; color: #00a0e3;}


/*------FOOTER------*/
.footer{padding-top: 8rem;}
.footer .flex-box{justify-content: space-between;}
.footer-box h3{
  font-size: 1.8rem;
  color: #00a0e3; 
  margin-bottom: 2rem;
}
.footer-box ul{padding: 0;list-style: none;}
.footer-box ul li{display: block;}
.footer-box a:hover{color: #00a0e3;}
.footer-logo{display:inline-block; margin-bottom: 3rem;}
.clear{padding: 2rem 0;color: #fff;}
.clear-flex{display: flex;justify-content: space-between;align-items: center;}
/*------COOKIES------*/
.cookie-container{
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #e71887;
  padding: 3rem;
}
.cookie-flex{display: flex;justify-content: space-between;}
.cookie-txt h3{color: #fff; font-size: 1.8rem;text-transform: uppercase;margin-bottom: 2rem;}
.btn.btn-white.cookie-btn{padding: 1rem 2rem;font-size: 1.4rem;}
.cookie-txt{width: 60%;}
.cookie-txt p{color: #fff;}
/*------BREADCRUMBS------*/
.pink-bc, .pink-after::after{background-color: #e71887;}
.blue-bc, .blue-after::after{background-color: #00a0e3;}
.black-bc, .black-after::after{background-color: #2b2a29;}
.breadcrumbs{padding: 1rem 0;}
.breadcrumbs ul{padding: 0;list-style:none;display: flex;}
.breadcrumbs ul li a{ color: #fff; }
.breadcrumbs ul li{color: #fff;font-size: 1.3rem;}
.breadcrumbs ul li:not(:last-child){padding-right: 2rem;}
.breadcrumbs ul li:not(:last-child)::after{
  content: '|';
  display: inline-block;
  margin-left: 2rem;
}
  .breadcrumbs ul li:last-child{opacity: .8;}
/*------OTHER PAGES------*/
.txt, .content-box{border-bottom: 1px solid #ccc;padding-bottom: 8rem;position: relative;}
.txt::after, .content-box::after{
  content: '';
  position: absolute;
  bottom: -.5rem;
  left: 50%;
  transform: translateX(-50%);
  width:1rem;
  height: 1rem;
}

.txt h2{margin-bottom: 2rem;}
.txt ul{margin-top: 1rem;list-style: none;}
.txt ul li:before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height:1rem;
  background-color: #2b2a29;
  margin-right: 1.5rem;
}
.txt-center{text-align: center;}
.images{
  display: flex;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 8rem;
  flex-wrap: wrap;
}
.images a{width:50%;position: relative;border: 3px solid #fff;}
.images a img{width: 100%;}
.images a::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: opacity ease-in-out .3s;
  -moz-transition: opacity ease-in-out .3s;
  transition: opacity ease-in-out .3s;
  opacity: 0;
}
.pink-img-hover a::after{background: rgba(231,124,135,.4);}
.blue-img-hover a::after{background: rgba(0,160,227,.4);}
.black-img-hover a::after{background: rgba(43,42,41,.4);}
.images a:hover::after{opacity: 1;}

.content-wrapper{display: flex;margin-top:5rem;}
.content-wrapper h3{font-size: 1.8rem;color: #e71887;}
.usluge-boxes div:not(:last-child){margin-right: 5rem;}
.content-box h2{font-size: 2.8rem;}
.content-box:not(:last-child){margin-bottom: 8rem;}
.content-box:last-child::after{content: none;}
.content-box:last-child{border-bottom: 0;}
/*------FORM------*/
#form-hide{padding: 8rem 0;}
.form-wrapper{display: flex;flex-wrap: wrap;}
.form-box{display: flex;flex-wrap: wrap;width: 33.333%;margin-bottom: 2rem;}
label,input{width: 100%;}
label{color: #fff;margin-bottom: 1.5rem;font-size: 1.5rem;}
input{padding: 2rem;margin-right: 1rem;}
.form-box:last-child{width: 100%;}
textarea{width: 100%;padding: 2rem;}
input, textarea{font-family: inherit;font-size: 1.4rem;}
#form-hide h2{
  text-align: center;
  color: #fff;
  font-size: 2.8rem;
  margin-bottom: 3rem;
}
.msg_1{color: #fff;margin-bottom: 1rem;}
input.contact-send-btn{
  display: inline-block;
  width: auto;
  background: transparent;
  border-color: #fff;
  color: #fff;
  cursor: pointer;
  margin-top: 4rem;
 }
 input.contact-send-btn:hover{background: #fff;color: #00a0e3;}
/*------ERROR------*/
 .error {
  background-image: url(../images/error.svg);
  background-position: right 15px center;
  background-repeat: no-repeat;
  border: 3px dashed #e81500 !important;
  padding: 1.5rem;
}
.txt_error {
  background-image: url(../images/error.svg);
  background-position: right 15px center;
  background-repeat: no-repeat;
  border: 3px solid #e81500 !important;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;

}
.success {
  background-image: url(../images/sucess-32.svg);
  background-position: left 15px center;
  background-repeat: no-repeat;
  border: 3px dashed #7ac143;
  padding: 1.5rem 1.5rem 1.5rem 6.5rem;
  color:white;
}
.error_img {
  background-image: url(../images/error-32.svg);
  background-position: left 15px center;
  background-repeat: no-repeat;
  border: 3px dashed #e81500;
  padding: 1.5rem 1.5rem 1.5rem 6.5rem; 
}
/*------TOGGLE------*/
.toggle-open, .toggle-close{display: none;}
@media only screen and (max-width: 105em){} /*1680px*/ 
@media only screen and (max-width: 100em) {}/*1600px*/ 
@media only screen and (max-width: 90em) {}/*1440px*/ 
@media only screen and (max-width: 85.375em) {}/*1366px*/ 
@media only screen and (max-width: 85em) {}/*1360px*/ 
@media only screen and (max-width: 80em) {}/*1280px*/ 
@media only screen and (max-width: 76.25em) {}/*1220px*/
@media only screen and (max-width: 67.5em) { /*1080px*/
  .header .flex{flex-wrap: wrap;}
  .toggle-open{display: block;order:3;}
  .main-menu {
    order: 4;
    width: 100%;
    position: absolute;
    left: 0;
    top: 9.12rem;
    background: #00a0e3;
    text-align: center;
    padding: 3rem 0;
    flex-wrap: wrap;
  }
  .btn-upit{margin-right: 3rem;margin-left: auto;}
  .main-menu li a{color: #fff;}
  .main-menu li a:hover, .main-menu li a.mslc{color: #fff; opacity: .7;}
  .main-menu li{display: block;padding: 2rem 0;width: 100%;text-align: center;}
  .close{display: none;}
  #nav {
    width: 100%;
    right: 0;
    top: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #00a0e3;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    overflow-y: auto;
  }
  #nav.change-menu {opacity: 1;visibility: visible;height: 100%;}
  .toggle-close {
    display: block;
    position: absolute;
    right: 2rem;
    top: 3.8rem;
    z-index: 5;
  }
  .services .flex-box{flex-direction: column;}
  .item-icon {
    width: auto;
    margin: 0 auto;
  }
  .item {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 100%;
  }
  .item:last-child{width: 100%;}
  .item:not(:last-child){margin-bottom: 6rem;}
  .item-txt h3{line-height: 1.2;margin: 2rem 0;}
  .inner-box{width: 100%;justify-content: flex-start;}
  .inner-box .inner-img{display: none;}
  .ref-txt{width: 25%;}
}
@media only screen and (max-width: 64em) {}/*1024px*/ 
@media only screen and (max-width: 61.25em) {}/*980px*/ 
@media only screen and (max-width: 56.25em) {/*900px*/ 
  .box-title h3{font-size: 2.2rem;}
}
@media only screen and (max-width: 50em) {}/*800px*/ 
@media only screen and (max-width: 48em), only screen and (hover:none){
  .box-title{height: auto;opacity: 1;left:auto;top: auto;position: relative;flex:1;}
  .box-title h3{opacity: 1;padding: 2rem 0;}
  .box{display: flex;flex-direction: column;}
} 
@media only screen and (max-width: 48em) { /*768px*/ 
  html{font-size: 50%;}
  .logo img{width: 12rem;}
  .box{width: 49%;}
  .box:nth-child(4n+4){margin-right: 2%;}
  .box:nth-child(2n+2){margin-right: 0;}
  body{font-size: 1.6rem;}
  .txt-columns{-webkit-column-count: 1;-moz-column-count: 1;column-count: 1;}
  .images{width: 100%;}
  .usluge-boxes div{width: 100%;margin-right: 0;}
  .usluge-boxes div:not(:last-child){margin-bottom: 1.5rem;}
  .usluge-boxes{
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .content-box h2{line-height: 1.1;margin-bottom: 1.5rem;}
  }
@media only screen and (max-width: 42.5em) { /*680px*/ 
  .flex-blog{flex-direction: column;}
  .inner-box{padding: 0;}
  .blog-txt{padding: 4rem 0 0 0;}
  .contact-us p{width: 100%;}
  .footer .flex-box{flex-direction: column;justify-content: center;text-align: center;}
  .footer .footer-box:not(:last-child){margin-bottom: 3rem;}
  .clear-flex{flex-direction: column;text-align: center;}
  .copy{font-size: 1.4rem;}
  .box-title h3{font-size: 2rem;}
  .ref-txt{width: 50%;}
  .form-box{width: 100%;}
}
@media only screen and (max-width: 40em) {}/*640px*/ 
@media only screen and (max-width: 38.75em) {}/*620px*/ 
@media only screen and (max-width: 37.5em) {}/*600px*/ 
@media only screen and (max-width: 30em) { /*480px*/ 
  .logo img{width: 10rem;}
  .hero-txt{max-width: 100%;}
  .ref-txt{width: 100%;}

  }
@media only screen and (max-width: 22.5em) {}/*360px*/