svg.notification {
	position:absolute;
	left:calc(50% - 200px);
	bottom:10px;
	width:400px;
	height:400px;
}
svg.notification .icon {

  fill: #ffffff10;
  stroke: #ffffff30;
  stroke-width:10px;
  animation: draw 4s linear forwards;
}

svg.notification .bounce { animation: 4s bounce infinite; }

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes bounce { 50% { transform: translateY(105px); } }




.machine {
  width: 80vmin;
  fill: #ffffff10; }



.small {
  -webkit-animation: counter-rotation 5.5s infinite linear;
	   -moz-animation: counter-rotation 5.5s infinite linear;
	     -o-animation: counter-rotation 5.5s infinite linear;
	        animation: counter-rotation 5.5s infinite linear;
  -webkit-transform-origin: 100.136px 225.345px;
      -ms-transform-origin: 100.136px 225.345px;
          transform-origin: 100.136px 225.345px; }

 

.medium {
  -webkit-animation: rotation 7.75s infinite linear;
	   -moz-animation: rotation 7.75s infinite linear;
	     -o-animation: rotation 7.75s infinite linear;
	        animation: rotation 7.75s infinite linear;
  -webkit-transform-origin: 254.675px 379.447px;
      -ms-transform-origin: 254.675px 379.447px;
          transform-origin: 254.675px 379.447px; }

 
.large {
  -webkit-animation: counter-rotation 10s infinite linear;
     -moz-animation: counter-rotation 10s infinite linear;
	     -o-animation: counter-rotation 10s infinite linear;
        	animation: counter-rotation 10s infinite linear;
  -webkit-transform-origin: 461.37px 173.694px;
      -ms-transform-origin: 461.37px 173.694px;
          transform-origin: 461.37px 173.694px; }

 

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to   {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

@-webkit-keyframes counter-rotation {
    from {-webkit-transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes counter-rotation {
    from {-moz-transform: rotate(359deg);}
    to   {-moz-transform: rotate(0deg);}
}
@-o-keyframes counter-rotation {
    from {-o-transform: rotate(359deg);}
    to   {-o-transform: rotate(0deg);}
}
@keyframes counter-rotation {
    from {transform: rotate(359deg);}
    to   {transform: rotate(0deg);}
}




.ocean { 
  height:40px;
  width:100%;
  position:absolute;
  bottom:0px;
  left:0;
  background: #eee;
}

.probootstrap-section.probootstrap-feature-first .ocean {
bottom:-50px;
height:0;
}

.wave {
  background: url(../img/wave.svg) repeat-x; 
  position: absolute;
  top: -178px;
  width: 6400px;
  height: 228px;
  animation: wave 12s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0); 
}

.probootstrap-section.probootstrap-feature-first .wave{
  background: url(../img/wave-white.svg) repeat-x;
  top: -180px;
}

.wave:nth-of-type(2) {
  top: -155px;
  animation: wave 12s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 10s ease -1.25s infinite;
  opacity: 1;
}



@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-35px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

input::-webkit-input-placeholder {/* Chrome/Opera/Safari/Edge */
	/*styles here*/
}

input::-ms-input-placeholder { /* Microsoft Edge */
   /*styles here*/
}

input:-ms-input-placeholder {/* IE 10+ */
	/*styles here*/
}

input::-moz-placeholder {/* Firefox 19+ */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input:-moz-placeholder {/* Firefox 18- */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input::placeholder,textarea::placeholder  {
	color:#ddd;
	font-weight:400;
}

input[type=text], textarea{
	margin:0.5em 0em;
	min-width:50%;
	padding:0.3em 0.4em;
	background:#fafafa;
	border-radius:4px;   
	font-size:19px;
	border:1px solid #ddd;
}

input[type=text]:focus,textarea:focus{
outline: none;
  border: 1px solid #ccc;
  }

@media screen and (max-width: 768px) {
  input[type=text],textarea{
    min-width:90%;
  }
}

div.message-form-success{
	color:#fff;
	font-size:1.6em;
	margin:1em auto;
	background-color:rgba(255,255,255,0.3);
	padding:1em; 
	display:none;
}

div.message-form-success.offer{
background-color:var(--main-color); 

}

div.message-form-success i{
	font-size:2.1em;
	border:2px solid #fff;
	border-radius:50%;
	padding:0.5em;
	margin-bottom:1em;
}


.probootstrap-section.probootstrap-section-colored input::placeholder,textarea::placeholder  {
	color:#b4cee9;
	font-weight:400;
}

.probootstrap-section.probootstrap-section-colored input[type=text], textarea{
	margin:0.5em 0em;
	min-width:50%;
	padding:0.5em 0.4em;
	border-radius:4px; 
	background:rgba(255,255,255,0.2);
	color:#fff; 
	font-size:19px;
	border:1px solid rgba(255,255,255,0.4);
}

.probootstrap-section.probootstrap-section-colored input[type=text]:focus,textarea:focus{
outline: none;
  border: 1px solid #fff;
  }

@media screen and (max-width: 768px) {
  .probootstrap-section.probootstrap-section-colored input[type=text],textarea{
    min-width:90%;
  }
}

.probootstrap-section.probootstrap-section-colored div.message-form-success{
	color:#fff;
	font-size:1.6em;
	margin:1em auto;
	background-color:rgba(255,255,255,0.3);
	padding:1em;
}
.probootstrap-section.probootstrap-section-colored div.message-form-success i{
	font-size:2.1em;
	border:2px solid #fff;
	border-radius:50%;
	padding:0.5em;
	margin-bottom:1em;
}


div.price-box{
background:#f8f8f8;
padding:1em;
width:100%;
margin-bottom:3em;
border-radius:4px;
opacity:0;
 -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

div.price-box.show{
opacity:1;
}

div.price-box table td{
	vertical-align:top;
	padding:0.2em;
}

div.price-box table td:first-child{
	width:400px; 
}

div.price-box table td:last-child{
	font-weight:400;
}

div.price-box table td span{
	line-height:12px;
	font-size:10px;
	display:inline-block;
	}
div.price-box table td:first-child span{
	vertical-align:top; 
}

div.price-box table tr.sum{
	border-top:1px solid #d2d2d2;
	}
div.price-box table tr.sum td{
	padding-top:0.4em;
	font-weight:500;
}

/*************************
	START ANIMATION
*************************/

.start-animation{
	opacity:0.0;
	animation: fadeIn 2s ease forwards; 
    -webkit-animation-delay: 5s;
   
}

.counter{
 
}
.counter span {
	position:absolute; 
	color:#fff;
	font-size:5em;
	font-weight:600;
    animation: grow,scale 2s ease; 
    opacity:0;
    display:block; 
    width:100%;
    text-align:center;  
    margin-top:1em;
}

.counter .text{ 
 animation: grow,scale 2s ease; 
}

.counter .c1{
 -webkit-animation-delay: 1s
}

.counter .c2{
 -webkit-animation-delay: 2s;
 font-size:8em;
  margin-top:0.2em;
}
.counter .c3{
 -webkit-animation-delay: 3s;
 font-size:13em;
  margin-top:-0.2em;
}

@media screen and (max-width: 768px) {
	.counter .text{
		font-size:3em!important; 
	}
	 
	 
}

.counter .text{
 -webkit-animation-delay: 4s; 
 font-size:10em;
 margin-top:-0.2em;
}

@keyframes scale {
    0% { -webkit-transform: scale(0.1);opacity:1 }
    100% { -webkit-transform: scale(2.0);opacity:0 }
}

@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes wait {
  from { opacity: 0; }
    to { opacity: 1; }
}


@keyframes fadeIn {
   from {transform: scale(0); opacity:0}
  to { transform: scale(1);opacity:1}
}



.fader.fadein {
    position:relative;
    top:0px;
    margin:auto; 
    
}

@media screen and (max-width: 768px) {
  .fader.fadein {   
    height:400px;
    overflow:hidden;
    display:block;
    margin-bottom:1em;
	}
}

.fader.fadein img { 
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 12s;
    position:absolute;
    top:0px;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    
}
#f2 {
    -webkit-animation-delay: -8s;
    
}
#f3 {
    -webkit-animation-delay: -4s;
   
}



.cc-banner{
	background:#f2f2f2!important;
	z-index:9999;
	position:fixed;
	bottom:-15px;
	left:5%;
	right:5%;
	padding:2em;
	box-shadow:0px 0px 10px #ccc;
	border-radius:12px;
}

.cc-banner .cc-btn{ 
	background:var(--main-color);
	padding:0.5em 1.2em;
	border-radius:6px;
	display:inline-block;
	position:relative;
}