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 {
	color:#b4cee9;
	font-weight:400;
}

input[type=text]{
	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);
}

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

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