pre{
  tab-size: 4;
}
body{
  font-family: arial;
  margin: 0;
  padding: 0;
}
/*Logo*/
header{
  background: #222222;
  padding: 8px 0;
}
.top_wrap{
  border-bottom: 1px solid #dfdfdf;
  border-top: 1px solid #dfdfdf;
}
.top_wrap > div{
  display: flex;
  align-items: center;
  width: 80%;
  height: 70px;
  margin: 0 auto;
}
.top_wrap .description{
  flex-basis: 40%;
  color: #a9abaa;
  font-size: 13px;
}
.container{
  width: 80%;
  margin: 0 auto;
}
/*Menu*/
.menu{
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #dfdfdf;
}
.menu nav > ul{
  display: flex;
  padding: 0;
  margin: 0;
  height: 50px;
}
.menu nav > ul li{
  display: flex;
  align-items: center;
  padding: 0 20px 0 0;
  list-style-type: none;
  position: relative;
}
.menu nav ul li a{
  text-decoration: none;
  color: #000;
  font-size: 1.25vw;
}
.menu nav > ul li:hover .submenu{
  display: block;
}
.menu .submenu{
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  width: 200px;
  padding: 10px;
  z-index: 1;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  top: 40px;
}
.menu .submenu li{
  padding: 5px;
}
.menu .submenu li a{
  color: #fff;
}
.menu .submenu li a:hover{
  text-decoration: underline;
}
.menu form input{
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  outline: 0;
  padding: 5px;
}
.menu form button{
  border: 0;
  background: 0;
  outline: 0;
  cursor: pointer;
}
.menu img{
  position: absolute;
  right: 20px;
  bottom: -5px;
}
/*Social icons*/
.soc_icons p{
  display: inline-block;
  font-size: 14px;
  color: #757575;
}
.soc_icons a{
  display: inline-block;
  color: #00a1ad;
  margin: 0 3px;
}
/*Banner and slider*/
.banner .slider{
  display: flex;
  align-items: center;
  position: relative;
}
.banner .slider .arrow_left{
  background: url("../images/alb.png") no-repeat center center;
  width: 48px;
  height: 48px;
  position: absolute;
  left: 20px;
  cursor: pointer;
}
.banner .slider .arrow_right{
  background: url("../images/arb.png") no-repeat center center;
  width: 48px;
  height: 48px;
  position: absolute;
  right: 20px;
  cursor: pointer;
}
.banner .slider .photo{
  height: 300px;
  flex-basis: 100%;
  background: url("../images/slider.jpg") no-repeat center bottom/cover;
} 
.banner .slider .photo p{
  display: inline-block;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  left: 20px;
  bottom: 10px;
  font-size: 20px;
}
.slider_switch{
  
  text-align: center;
  margin-top: 10px;
}
.slider_switch span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 2px solid #278a87;
  cursor: pointer;
}
.slider_switch .active{
  background: #efc01a;
}
/*block content left*/
.content{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
section{
  flex-basis: 27%;
}
section h2{
  border-left: 3px solid #83b85c;
  padding-left: 5px;
  font-weight: normal;
}
article{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40px 0;
}
article img{
  border-radius: 100%;
  height: 70px;
}
article p{
  flex-basis: 70%;
}
section aside{
  background: url("../images/aside.jpg") no-repeat center top/cover;
  height: 200px;
  position: relative;
}
aside p{
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  margin: 0;
}
/*block content right*/
.content .right{
    flex-basis: 70%;
  }
.wrap_title{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.wrap_title img{
  width: 100%;
}
.wrap_title .title{
  flex-basis: 30%;
  margin-bottom: 25px;
  position: relative;
}
.wrap_title .title:hover .icons{
  display: block;
}
.wrap_title .title .icons{
  position: absolute;
  padding: 5px;
  display: none;
}
.wrap_title .icons span{
  display: inline-block;
  font-size: 18px;
  color: #919191;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px 8px;
  cursor: pointer;
}
.wrap_title .icons span:hover{
  color: rgba(33, 198, 74, 0.5);
}
.wrap_title p{
  font-size: 14px;
}
.wrap_title p:nth-of-type(1){
  color: #595858;
  font-weight: bold;
}
.wrap_title p:nth-of-type(2){
  color: #8d8d8d;
}
.wrap_title .title .bottom{
  border-top: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  display: flex;
  justify-content: space-between;
  padding: 5px;
  font-size: 14px;
}
.wrap_title .title .bottom span{
  color: #bab6b6;
}
.wrap_title .title .bottom a{
  color: #83b85c;
  text-decoration: none;
} 
.wrap_title .title .bottom a:hover{
  text-decoration: underline;
}
.pagination{
  text-align: center;
}
.pagination span{
  display: inline-block;
  background: #13a2b2;
  color: #fff;
  width: 20px;
  padding: 3px;
  border-radius: 6px;
  cursor: pointer;
}
.pagination span:hover{
  background: #8dca3e;
}
/*Gallery*/
.gallery h2{
  border-left: 3px solid #83b85c;
  padding-left: 5px;
  font-weight: normal;
  width: 80%;
  margin: 40px auto 20px;
}
.gallery .slider{
  display: flex;
}
.gallery .slider .arrow_left{
  background: url("../images/arrow_left.png") no-repeat center center;
  height: 48px;
  width: 48px;
  cursor: pointer;
}
.gallery .slider .arrow_right{
  background: url("../images/arrow_right.png") no-repeat center center;
  height: 48px;
  width: 48px;
  cursor: pointer;
}
.gallery .slider{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d9d9d7;
  padding: 5px 0 3px;
}
/*Footer*/
footer{
  margin-top: 20px;
}
footer nav{
  background: #19a3ac;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer nav ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 60%;
  height: 100%;
  padding: 0;
}
footer nav ul li{
  list-style-type: none;
  height: 100%;
  flex-basis: 100%;
}
footer nav ul li a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #000;
  height: 100%;
}
footer nav ul li a:hover{
  background: #128991;
}
footer .titles{
  background: #272727;
  padding: 10px 0;
}
footer .titles .links{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
footer.titles div{
  color: #3e3e3e;
  padding: 10px 0;
  flex-basis: 40%;
  text-align: center;
}
.links a{
  text-decoration: none;
  color: #dedede;
  display: block;
  font-size: 14px;
  margin: 5px 0;
}
.links a:hover{
  text-decoration: underline;
}
.links a:before{
  content: "\00BB";
  margin-right: 10px;
  color: #8cc34c;
}
footer p{
  text-align: center;
}