/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

.ocean {
  height: 80px; /* change the height of the waves here */
  width: 100%;
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
  overflow-x: hidden;
}

.wave {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%239C0808'/%3E%3C/svg%3E");
  position: absolute;
  width: 200%;
  height: 100%;
  animation: wave 10s -3s linear infinite;
  transform: translate3d(0, 0, 0); 
  opacity: 1;
}

.wave:nth-of-type(2) {
  bottom: 0;
  animation: wave 18s linear reverse infinite;
  opacity: 0.5;
}

.wave:nth-of-type(3) {
  bottom: 0;
  animation: wave 20s -1s linear infinite;
  opacity: 0.5;
}

@keyframes wave {
    0% {transform: translateX(0);}
    50% {transform: translateX(-25%);}
    100% {transform: translateX(-50%);}
}


/*nav menu css waves*/

.box p {    text-align: center;
    font-size: 25px;
    display: flex;
    align-items: center;
    height: 100%;
    color: #fff;
    z-index: 111;
    position: relative;
    margin: 0;
    justify-content: center;}

.box {
  height: 97px;
  width: 97px;
  position: relative;
  top: 10%;
/*   left: 10%; */
  /*transform: translate(-50%, -50%);*/
  background: #f5f5f5;
/*   border:1px solid #800000; */
  border-radius: 100%;
  overflow: hidden;
}

.box .percent { 
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
/*   width: 100%; */
  height: 100%;
  display: flex;
  display: -webkit-flex;
  align-items: flex-end;
  justify-content: center;
  color: #FFBC65;
  font-size: 50px;
  padding-bottom: 100px;
}

.box:hover .water.newclass {transform: translate(0px, 50%); animation-delay: 80s; top: -15px;}
.box.active .water.newclass  {transform: translate(0px, 50%); animation-delay: 80s; top: -15px;}
.box.active .water.newclass a {color:#fff !important; animation-delay: 80s;}
.box:hover .water.newclass a {color:#fff !important; animation-delay: 80s;}

.box .water {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: translate(0, 110%);
  transition: 0.50s ease-in-out all;
  background: #990000;
}
.box .water_wave {
  width: 200%;
  position: absolute;
  bottom: 99%;
}
.box .water_wave_back {
  right: 0;
  fill:rgba(156,8,8, 1);
  animation: wave-back 1.5s infinite linear;
}
.box .water_wave_front {
  left: 0;
  fill:rgba(156,8,8, 0.5);
  margin-bottom: -1px;
  animation: wave-front 0.7s infinite linear;
}

@keyframes wave-front {
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes wave-back {
  100% {
    transform: translate(50%, 0);
  }
}



@media only screen and (max-width: 1199px){
    .box  {height: 90px; width: 90px;}
}