*{
  padding: 0;
  margin: 0;
  list-style-type:none;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

body{
	background-color: #F8F8F8;
}

.wrapper{
	width: 100%;
} 

/*Header*/
.header-wrapper{
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);;
  position: fixed;
  top: 0;
  z-index: 999999;
  padding: 20px 0;
}

header{
  width: 96%;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  padding:5px 0;
}

nav{
  width: 80%;
  margin: 0 auto;
}

nav ul{
  display: flex;
  justify-content: space-around;
  width: 100%
}

nav li{
  margin-left: 3%;
}

nav a{
  color: #000;
  font-size: 24px;
  display: inline-block;
  font-family: "CaviarDreams"; 
}

nav a:hover{
  color: #FF0000;
}

.menu ul li a:hover,.menu ul li:hover > a {
  background-color: #000;
  color: #fff;
}

.menu li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0,0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px,20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li > ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0,0);
}

.responsive-menu {
  display: none;
  width: 100%;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.responsive-menu:hover {
  color: #fff;
  text-decoration: none;
}

.nav-active{
    color: #f84e40!important;
}
/*Header*/

/*Main section*/
.social-header{
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	padding-top: 10vh;
}

.social-left{
	width: 52%;
	text-align: right;
}

.social-right{
	width: 48%;
	text-align: right;
}

.social-right > a{
	color: #fff;
	font-size: 30px;
	margin: 2%;
}

.social-right > a:hover{
	color: #E12F29;
}
/*Main section*/

/*Footer*/
#gallery{
  padding: 40px;
}

.gallery-wrapper{
  width: 90%;
  margin: 15px auto;
}

.gallery-row{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.image{
  width: 24%;
  margin-left: 1%;
}

.image > p{
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 10px 2%;
    min-height: 60px;
    font-weight: 400;
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
  width: 100%;
}

.img-wrapper img {
  width: 100%;
  display: block;
  height: 50vh;
  max-height: 320px;
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.img-overlay i {
  color: #fff;
  font-size: 48px;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#overlay img {
  margin: 0;
  width: 40%;
  height: auto;
  object-fit: contain;
  padding: 5%;
}

#nextButton {
  color: #fff;
  font-size: 32px;
  transition: opacity 0.8s;
}

#nextButton:hover {
  opacity: 0.7;
}

#prevButton {
  color: #fff;
  font-size: 32px;
  transition: opacity 0.8s;
}
#prevButton:hover {
  opacity: 0.7;
}

#exitButton {
  color: #fff;
  font-size: 32px;
  transition: opacity 0.8s;
  position: absolute;
  top: 13vh;
  right: 20%;
}
#exitButton:hover {
  opacity: 0.7;
}


.bg-wrapper{
  width: 100%;
  background-image: url(../images/main-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 15vh 0 5vh 0;
}

.bg-text{
  width: 80%;
  padding: 5vh 10%;
  text-align: center;
}

.bg-text h2{
  color: #fff;
  margin-bottom: 7vh;
  font-weight: 400;
}

.bg-text h1{
  color: #fff;
  font-family: "CaviarDreams";
}

.bg-text p{
  color: #fff;
  font-size: 18px;
  margin: 7vh 5%;
}

.bg-text a{
  color: #fff;
  font-size: 18px;
  padding: 15px 50px;
  background: #f84e40; /* Old browsers */
  background: -moz-linear-gradient(left,  #f84e40 0%, #ff6527 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #f84e40 0%,#ff6527 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #f84e40 0%,#ff6527 100%); /* W3C, IE10+, FF16+, Chrome26+,  Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f84e40',  endColorstr='#ff6527',GradientType=1 ); /* IE6-9 */
  border-radius: 50px;
  width: 25%;
  margin: 0 auto;
  display: block;
}

.bg-text a:hover{
  font-weight: 700;
}

.about-wrapper{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
	justify-content: space-between;
}

.about{
  width: 40%;
  display: flex;
  flex-wrap: wrap;
}

.about-red{
	width: 25%;
	margin-top: 6%;
}

.about-red > img{
	width: 100%;
}

.about-green{
	width: 25%;
	margin-top: 7%;
}

.about-green > img{
	width: 100%;
}

.about-left{
  width: 94%;
  padding: 3%;
  font-size: 24px;
  color: #000;
  text-align: center;
}

.about-right{
  width: 96%;
  padding: 2%;
}

.about-right > img{
  width: 100%;
  min-width: 200px;
}

.work-wrappe{
  width: 100%;
}

.line{
	width: 90%;
	margin: 10vh auto;
	background-color: #000;
	height: 1px;
}

.work-text-wrapper{
  width: 100%;
}

.work-text{
  width: 90%;
  padding: 0 5%;
  text-align: center;
}

.bg-title{
  width: 70%;
  margin: 0 auto;
  border-radius: 10px;
  padding: 5vh 5%;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.bg-title-2{
  padding: 2vh 2%;
  margin-top: 15px;
}

.bg-title > h2{
  color: #000000;
  margin-bottom: 5vh;
}

.bg-title-2 > h2{
  margin-bottom: 0;
}

.bg-title-2 > h2 > span{
  color: #F9E99E;
}

.bg-title > p{
  color: #000;
  font-size: 18px;
  margin-bottom: 5vh;
}

.work-img{
  width: 90%;
  margin: 25px auto;
  display: flex;
  flex-wrap: wrap;
}

.block-img{
  width: 24%;
  margin-left: 1%;
  margin-bottom: 10px;
}

.block-img > img{
  width: 100%;
  display: block;
}

.block-img > p{
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 10px 2%;
  min-height: 60px;
  font-weight: 400;
}

.contacts{
  width: 40%;
  padding: 2vh 1%;
}

.contacts > h2{
  margin-bottom: 2vh;
}

.footer-wraper{
  width: 100%;
  background-color: #F76D6D;
  background-image: url(../images/footer-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 5vh;
}

footer{
  width: 94%;
  padding: 3vh 3%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family: "CaviarDreams";
}

footer h3{
	font-family: "CaviarDreams";
	margin-bottom: 15px;
	font-size: 20px;
}

footer p{
	font-family: "CaviarDreams";
	margin-bottom: 10px;
	font-size: 20px;
}

.footer-right > a{
	color: #fff;
    font-size: 30px;
    margin: 2%;
}

.footer-right > a:hover{
	color: #E12F29;
}

.footer-right{
	width: 110px;
}

.footer-center{
	width: 170px;
}

.footer-left{
	width: 350px;
}

.reserv{
	text-align: center;
	color: #fff;
	font-family: "CaviarDreams";
	padding: 10px;
	font-size: 12px;
}

/*Footer*/

.form-wrapper{
	width: 1005px;
	height: 680px;
	margin: 0 auto;
	background-image: url(../images/form-bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.form{
	width: 500px;
	margin: 0 auto;
	text-align: center;
	padding: 5% 0;
}

.form > h2{
	color: #000;
    margin-bottom: 20px;
}

.form > p{
    margin-bottom: 15px;
	font-size: 24px;
}

.phone-mob{
	display: none;
}

/*contacts*/
.contact-wrapper{
  width: 100%;
}

.contact-main{
  width: 90%;
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
}

.contact-left{
  width: 50%;
}

.contact-right{
  width: 50%;
}

.contact-right > .form{
	width: 100%;
}

.contact-left img{
	width: 100%;
}

.contact-map{
  width: 100%;
}

.contact-map > iframe{
  width: 100%;
  height: 40vh;
}
/*contacts*/

/*NEWS*/
.news-wrapper{
  width: 100%;
}

.news-main{
  width: 90%;
  padding: 5%;
}

.article{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5vh;
}

.article-left{
  width: 40%;
  max-width: 400px;
}

.article-left > img{
  width: 100%;
  min-width: 250px;
  height: 40vh;
}

.article-right{
  width: 55%;
  padding-left: 5%;
  color: #000;
}

.article-right > a{
	color: deepskyblue;
	margin: 5vh auto;
	display: block;
	padding: 10px 25px;
	width: 100px;
	text-align: center;
	border-radius: 50px;
	border: 2px solid deepskyblue;
}

.article-right > a:hover{
  font-weight: 700;
}

.article-date{
	margin: 2vh 0;
}

.article-wrapper{
	width: 80%;
	padding:10px 10%;
	margin-top: 82px;
	text-align: left;
}

.article-wrapper > h1{
	color: #fb4545;
}

.article-wrapper > img{
	width: 200px;
	float: left;
	margin: 0 50px 40px 0;
}

.article-wrapper > p{
	color: #000;
	margin-bottom: 5vh;
}

.back{
	color: #fff;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 0 10px 10px 0;
	padding: 10px 20px;
}
/*NEWS*/

.bg-text-art{
	text-align: left;
	width: 365px;
	margin: 0 auto;
}


@media screen and (max-width: 1200px) {
  .image{width: 32%;}
}

@media screen and (max-width: 1024px){
.header-wrapper{
    padding:10px 0;
}
    
.menu {
    display: none;
    position: absolute;
    top: 67px;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .responsive-menu {
    display: block;
    font-size: 32px;
  }

  nav {
    margin: 0;
    background: none;
    text-align: left;
    align-items: center;
  }

  .menu li {
    display: block;
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .menu li a {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    width: 100%;
    padding: 10px 0;
  }

  .menu li a:hover,.menu li:hover > a {
    background-color: rgba(0, 0, 0, 0.7);
    color: #dd3333;
  }

  .menu ul {
    visibility: hidden;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    transform: initial;
  }

  .menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    position: relative;
    transform: initial;
  }

  .menu ul ul {
    left: 0;
    transform: initial;
  }

  .menu li > ul ul:hover {
    transform: initial;
  }
  
  .responsive-menu i{
      color: #f84e40;
  }

.active {
  top: 80px !important;
  right: 0 !important;
  width: 100%;
  text-align: center;
}

.nav-flags{text-align: left; width: 35%;}
	
.bg-text{width: 90%; padding: 10vh 5%!important;}

.bg-text p{margin: 5vh 0; font-size: 16px;}

.work-text{padding: 2vh 5%;}

.bg-title{padding: 3vh 2%; width: 76%;}

.bg-title > h2{margin-bottom: 2vh;}

.bg-title > p{font-size: 16px}

.about-left{width: 94%; text-align:center; font-size: 16px;}

.block-img{width: 32%;}

.bg-title-2 > h2{margin-bottom: 0;}
	
#overlay img{width: 46%;}  .contact-left > .contacts{width: 80%;}
 
.contact-wrapper .bg-text{width: 90%;}
	
.news-wrapper .bg-text{width: 90%;}

.image{width: 48%;}
	
.form-wrapper{width: 90%;background-image: none; height: auto;}

.form{width: 80%; padding: 0;}
	
.phone-mob{display: block;}
	
.phone-des{display: none;}
}

@media screen and (max-width: 768px) {
  #prevButton {font-size: 20px;}

  #nextButton {font-size: 20px;}

  #exitButton {font-size: 20px;}

  .bg-title{width: 96%;}

  .about-left > p{font-size: 16px;}

  .bg-text h1{font-size: 24px;}

  .bg-text a{font-size: 18px; padding: 15px 25px;}

  .block-img{width: 48%;}

  .bg-text h2{font-size: 16px;}
	
  .block-img > p{font-size: 14px; min-height: 40px;}
	
  #overlay img{width: 62%;}
	
  .article-right{width: 100%; padding-left: 0; margin-top: 3vh;}
	
  .article-left{max-width: 800px; width: 100%;}
	
  .about-red, .about-green{display: none;}
	
	.about{width: 70%; margin: 0 auto;}
}

@media screen and (max-width: 650px){
	.footer-left{width: 100%; margin-bottom: 15px;}
	
	.contact-left{display: none;}

	.contact-right{width: 100%;}
}

@media screen and (max-width: 480px) {
  .image{width: 100%;}

  .bg-text a{width: 40%; font-size: 16px;}

  .bg-text h1{font-size: 18px;}

  .bg-title > h2{font-size: 18px;}

  .about-left > p{font-size: 14px;}

  .bg-text p{font-size: 14px;}

  .bg-title > p{font-size: 14px;}

  .block-img{width: 100%; margin-left: 0;}
	
  #overlay img{width: 83%;}
	
  #exitButton{right: 5%;}
	
	.social-header{flex-direction: column-reverse; padding-top: 0;}
	
	.social-left{width: 100%; text-align: center; padding-top: 10vh;}
	
	.social-right{width: 100%; text-align: center;}
	
	.about{width: 100%;}
	
	.form{width: 100%;}
	
	.footer-center{width: 100%; margin-bottom: 15px;}
	
	.article-wrapper > img{float: none; width: 100%; margin: 20px 0;}
	
	.article-wrapper{margin-top: 20px;}
	
	.art-arr{margin-right: 43%;}
}

@font-face {
font-family: "CaviarDreams"; 
src: url("../fonts/CaviarDreams.ttf") format("truetype"); 
font-style: normal; 
font-weight: normal; 
}