.hh {
  position: relative;
 
    border-radius: 2%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   margin-top:30px;
}

.hh::after {
  content: "";
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top:30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hh:hover {
  -webkit-transform: scale(1.13, 1.13);
  transform: scale(1.04, 1.04);
  
}

.hh:hover::after {
    /*opacity: 1;*/
   
 
}
.ggg{
  position: relative;
  display: inline-block;
    border-radius: 2%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  height:200px;
}
.ggg:hover{
color:#000;
background:#fff;
box-shadow:rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;
transition:all 300ms ease-out;
transform:scale(1);
 -webkit-transform: scale(1.13, 1.13);
  transform: scale(1.04, 1.04);
}
.ggg:hover img{filter:none;}
.butn{
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    border-width: 3px;
    border-radius: 50px;
    background-color: #002d3a;
    text-align: center;
    color: #fff;
    transition: opacity .2s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
 
    /*height:35px;
    width:18%;
    background-color:#002d3a;
    border-radius:8%;
    font-size:21px;
    border:1px solid #002d3a;
    color:white;*/
}
.butn:hover{
     font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    border-width: 3px;
    border-radius: 50px;
    background-color: #002d3a;
    text-align: center;
    color: #fff;
    transition: opacity .2s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
 background-color:#ed174c;
 
}
.animateed-bg-btn {
    background: -webkit-gradient(linear, right top, left top, from(#6bec10), color-stop(#0ecb84), color-stop(#cc0ebc), color-stop(#f0104c), to(#ff5b11));
    background: -webkit-linear-gradient(right, #6bec10, #0ecb84, #cc0ebc, #f0104c, #ff5b11);
    background: -o-linear-gradient(right, #6bec10, #0ecb84, #cc0ebc, #f0104c, #ff5b11);
    background: linear-gradient(270deg, #6bec10, #0ecb84, #78f308, #800c88, #002d3a);
    background-size: 1000% 1000%;
    -webkit-animation: btnbganim 30s infinite;
    animation: btnbganim 30s infinite;
    color: #fff!important;
    font-weight: 700
}

@-webkit-keyframes btnbganim {
    0%,
    100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

@keyframes btnbganim {
    0%,
    100% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 113px solid transparent;
  border-right: 113px solid transparent;
  margin-top:-19px;
  border-top: 123px solid #002d3a;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-left: 143px solid transparent;
  border-right: 143px solid transparent;
  
  border-top: 222px solid #002d3a;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}
.imggg {
    background-image: url('../imgg/r.png');
    background-repeat:no-repeat;
    background-position:right;
    background-size:200px;
}

.arrow-reset {
  width: 0; 
  height: 0; 
  border-left: 113px solid transparent;
  border-right: 113px solid transparent;
  margin-top:-19px;
  border-top: 123px solid #002d3a;
}
.arrow-confirm {
  width: 0; 
  height: 0; 
  border-left: 142px solid transparent;
  border-right: 142px solid transparent;
  margin-top:-19px;
  border-top: 123px solid #002d3a;
}


  

    .aaa {
     font-family: futura;
      font-style: italic;
      
      width:100%;
      
      margin: 0 auto;
   
      
      color:#313131;
      font-size:45px;
      font-weight: bold;
      position: absolute;
      -webkit-animation:colorchange 20s infinite alternate;
      
      
    }

    @-webkit-keyframes colorchange {
      0% {
        
        color: blue;
      }
      
      10% {
        
        color: #8e44ad;
      }
      
      20% {
        
        color: #1abc9c;
      }
      
      30% {
        
        color: #d35400;
      }
      
      40% {
        
        color: blue;
      }
      
      50% {
        
        color: #34495e;
      }
      
      60% {
        
        color: blue;
      }
      
      70% {
        
        color: #2980b9;
      }
      80% {
     
        color: #f1c40f;
      }
      
      90% {
     
        color: #2980b9;
      }
      
      100% {
        
        color: pink;
      }
    }