@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600,700&display=swap');

.accordion_wrap ul li.active .accordion_menu{
    width: 100%;
    display: flex !important;
}

.main_title{
  font-size: 32px;
  color: #fff;
  letter-spacing: 2px;
  background: #edc856;
  padding: 15px 25px;
  border-radius: 3px;
  text-align: center;
  width: 700px;
  margin: 0 auto 25px;
}
.accordion_wrap{
  display: inline-flex;
    position: relative;
    /*left: 27px;*/
}

.accordion_wrap ul{
  display: flex;
  justify-content: center;
}

.accordion_wrap .accordion_item{
  list-style: none;
  width: 160px;
  height: 128%;
  color:#fff;
  background: #000;
  border-right: 1px solid #a48d2d;
  cursor: pointer;
  position: relative;
  transition: all 0.2s linear;
}

.accordion_wrap .accordion_item:hover,
.accordion_wrap li.active .accordion_item{
  background: #0097e6;
  box-shadow: inset 0 0 22px 2px #2672af, inset 5px 0 5px -5px #2672af, inset -4px 0 0 -4px #2672af;
  border-right: 1px solid #edc856;
}

.accordion_wrap li:first-child .accordion_item{

}

.accordion_wrap li:last-child .accordion_item,
.accordion_wrap li:last-child .accordion_menu{
  border-right: 0px;

}

.accordion_wrap ul li .icon{
  position: absolute;
transform: translate(-69%,31%);
    
}

.accordion_wrap ul li.walk .icon{
  background-position: 0 0;
  width: 100%;
  height: 100%;
  font-size: 13px;
  white-space: break-spaces;
}

.accordion_wrap ul li.walk .accordion_item:hover .icon,
.accordion_wrap ul li.walk.active .icon{
  background-position: right 20% center
}

.accordion_wrap ul li{
  display: flex;
}

.accordion_menu{
  width: 0px;
  height: 175px;
  background: #7a8ea6;
  color: #000;
  overflow: hidden;
  transition: width 0.2s ease;
}

.accordion_wrap ul li.active .accordion_menu{
   width: auto;
}

.accordion_menu .inner_am{
  text-align: center;
  padding: 35px 7px 66px 40px;
    color: #fff;
    border-right: 1px solid #8d9fb5;
}

.accordion_menu .title{
  font-weight: 600;
}

.accordion_menu .content{
  font-size: 13px;
  font-weight: 300;
  margin: 10px 0;
}

.accordion_menu .view_more{
  padding: 5px;
  background: #a48d2d;
  color: #fffaeb;
  width: 125px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}

.accordion_menu .view_more:hover{
  text-decoration: underline;
}

.scrollTo.active{
  background: #000;
  box-shadow: inset 0 0 22px 2px #2b3a46, inset 5px 0 5px -5px #2b3a46, inset -4px 0 0 -4px #2b3a46;
}
.scrollTo{
background-color: #404040;
    
}

@-webkit-keyframes flipped {
  from { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flipped {
  from { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); }
  to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

.flipped {
  -webkit-animation-name: flip;
          animation-name: flip;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

@-webkit-keyframes fadeOutDown {
     0% {
        opacity: 1;
        -webkit-transform: translateY(0);
     }
     100% {
        opacity: 0;
        -webkit-transform: translateY(20px);
     }
  }
  
  @keyframes fadeOutDown {
     0% {
        opacity: 1;
        transform: translateY(0);
     }
     100% {
        opacity: 0;
        transform: translateY(20px);
     }
  }
  
  .fadeOutDown {
     -webkit-animation-name: fadeOutDown;
     animation-name: fadeOutDown;
  }

.accordion_menu {
animation: fadeOutDown 0.5s 1;
}