@import url(//fonts.googleapis.com/css?family=Fjalla+One:300italic,400italic,600italic,700italic,800italic,400,600,800,700,300&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);

@import url(//fonts.googleapis.com/css?family=Poppins:300italic,400italic,600italic,700italic,800italic,400,600,800,700,300&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);

a {color:#396EB3;text-decoration:none;}
.header-top {
    background-color: #fafafa!important;
}
/*.navbar-brand img {width:180px!important;}*/
#header_menu{text-align:right;}
.navbar-nav .nav-link {
    color: #333;
  	font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.navbar-nav .nav-link:hover{color:#396EB3;}
.dropdown:hover .dropdown-menu {
  display: block;
}
.dropdown-menu li{ border-bottom: 1px solid #ebeaea;}
.dropdown-menu li:nth-last-child(1) {border: 0px!important;}
.main-navigation {border:0!important;}
#mainHeader.sticky-top .navbar-brand img { width: 120px!important;transition: all .3s linear; }
#mainHeader.sticky-top .header-top {display:none!important;opacity:0;transition: opacity .6s linear;}
#mainHeader.sticky-top .navbar-expand-lg {padding: 10px 0px!important;transition: padding .6s linear;}
#mainHeader.sticky-top .main-navigation{   
  -webkit-box-shadow: 0 1px 10px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 20%);}
.navbar-toggler {
	color: rgba(0,0,0,.55);
  	border-color: none;
}
 #mainHeader.sticky-top .navbar-nav {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}
@media (max-width: 767px){
  .navbar-nav {width:100%!important;}
  .navbar-nav .nav-link{font-size:20px!important;}
  .navbar-toggler-icon i {
	font-size:25px;
  }
  .navbar-toggler {
  	border-color: none!important;
	font-size:inherit!important;
	}
  .navbar-nav .dropdown-menu .nav-link {color:#777;}
  .navbar-nav .dropdown-menu {
  	position: relative!important;
    transform: translate3d(13px,0px, 0px)!important;
    background: none!important;
    border: 0!important;
  }
  .dropdown-toggle::after {float:right!important;}
  #header_menu {text-align:inherit!important;}
  .dropdown:hover .dropdown-menu {display: inherit!important;}
}
.header-top .nav-link {color:#396EB3!important;}
.header-top .nav-link:hover {color:#396EB3!important;}
.soc-icons li a img:hover{ width:23px;height:23px;border-radius:50%;box-shadow:0 .5rem 1rem rgba(0,0,0,.15); transition: width .2s;}
.soc-icons-footer li a img:hover{ border-radius:50%;box-shadow:0 .5rem 1rem rgba(0,0,0,.15); transition: all .2s;}
.home-slider .slide .img-holder {min-height:550px;
	align-items: center;
    justify-content: center;
    display: flex;
    background-size: cover;
    /* background-position: top center; */
  	background-position: bottom right;
    background-repeat: no-repeat;
    min-height: 550px;
    max-height: auto;
    opacity: 0.8;
}
.info-holder {
  padding-right: 30rem;
}
@media (max-width:767px){
  .info-holder {
  padding-right: 0rem!important;
}
  .pertalife-slider-heading {
  	font-size: 1.5rem!important;
    font-weight: bold;
}
  .pertalife-slider-subtitle span {font-size:15px!important;}
}
/** Added animation title in slider KR **/
.pertalife-slider-heading{
  	font-size: 3rem;
    font-weight: bold;
  	opacity: 0;
    -webkit-transition: all .25s cubic-bezier(.39,.575,.565,1);
    transition: all .25s cubic-bezier(.39,.575,.565,1);
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}
.active-slide .pertalife-slider-heading {
	opacity:1;
  -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: .50s;
    transition-delay: .50s;
}
.pertalife-slider-subtitle {
  	opacity: 0;
    -webkit-transition: all .25s cubic-bezier(.39,.575,.565,1);
    transition: all .25s cubic-bezier(.39,.575,.565,1);
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}
.active-slide .pertalife-slider-subtitle {
	opacity:1;
  -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: .70s;
    transition-delay: .70s;
}
.info-holder .button {
  	opacity: 0;
    -webkit-transition: all .25s cubic-bezier(.39,.575,.565,1);
    transition: all .25s cubic-bezier(.39,.575,.565,1);
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}
.active-slide .info-holder .button {
	opacity:1;
  -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: .90s;
    transition-delay: .90s;
}
.bx-wrapper {
  background-color: #f0f0f0!important;
  border: 0!important;
  box-shadow: none!important;
  margin-bottom: 0!important;
}
.bx-wrapper .bx-pager {
  display: none!important;
}
@media (max-width: 767px) {
  .home-slider .slide .img-holder {align-items:normal!important;padding:70px 10px!important;}
    .home-slider .slide .img-holder,.home-slider .bx-viewport {
	  background-position: top center!important;
	 	height: 500px!important;
        max-width: 100%;
	  min-height: 500px!important;
    }
.pertalife-slider-subtitle{
  line-height:1;
  }
  .pertalife-slider-heading .cf{display:inline-block;margin-bottom:10px;}
  .pertalife-slider-heading {margin-bottom:15px!important;}
}
.inner-wproduk .bg-white:hover {
 box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
 margin-top: -10px; 
 transition: margin-top 0.5s ease;
}
.footer-menu-group a {
  font-size: 17px;
  padding:0.2rem 1rem!important;
}
@media (max-width: 767px){.footer-menu-group a {
    padding: 0.2rem 0.6rem!important;
	}
}
.navbar-expand-lg .navbar-nav .nav-link.active {
  color: #396EB3;
}
hr.solid {
    border-top: 2px solid #ACC537;
  color: #ACC537;
    width: 100px;
   	opacity:1!important;
}
.mw-breadcrumb a{color:#333;text-decoration:none;}
.mw-breadcrumb-current {color:#396EB3;font-weight:700;line-height:19px;}
.mw-breadcrumb a::after {
  padding-inline-start: 0.7rem;
    padding-inline-end: 0.5rem;
    content: url(https://www.pertalife.com/web/userfiles/media/default/divider.png);
}
#cs {
  background: linear-gradient(322.21deg, #396EB3 31.99%, #9CB7D9 141.53%);
  border-radius:10px;
}
@media (max-width: 767px){
  #cs .row {
	padding-bottom: 30px;
  }
  #cs img {border-radius: 50%;margin-bottom:30px;}
}
.mw-social-share-links a {background-color:#ccc;}
/* timeline AB */

.timeline {
    border-left: 1px dashed rgba(0, 0, 0, 0.4);
    margin: 0 10px 0 150px;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 0px 30px 30px 30px;
    list-style: none;
    text-align: left;
    max-width: 100%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
	  	margin: 0 10px 0 10px;
    }
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.timeline .event {
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -180px;
    content: attr(data-date);
    text-align: right;
    font-weight: 700;
    font-size: 40px;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    left: -35px;
    background: #396EB3;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid #727cf5;
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}
  .tabs-au {
    border-left: 1px solid #ccc;
  }
   .tabs-au .nav-pills .nav-link { border-radius: 0;color:#333;}
  .tabs-au .nav-pills .nav-link.active {
  background-color:  rgba(57, 110, 179, 0.1);
  border-left: 3.5px solid #396EB3;
  color: #396EB3;
  
  opacity:0.9;
}
/* End Au */

#mw-tabs-module-tabs-20220724100543 .mw-ui-btn-nav-tabs,#mw-tabs-module-tabs-20220829081819 .mw-ui-btn-nav-tabs {
  	border-bottom: 1px solid #ccc;
    margin: 0 auto;
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
}
@media (max-width:767px){
  #mw-tabs-module-tabs-20220724100543 .mw-ui-btn-nav-tabs,#mw-tabs-module-tabs-20220829081819 .mw-ui-btn-nav-tabs{overflow-x:scroll;justify-content:flex-start;}
}
#mw-selector-1658547290593 {font-weight:inherit!important;}
#mw-tabs-module-tabs-20220724100543 .mw-ui-box {
  box-shadow:none!important;
}
.mw-ui-btn-nav-tabs .mw-ui-btn {
  background: none;
    border: 0;
    font-size: 24px;
    font-weight: 500;
    padding: 0px 0px 20px 0px;
    margin: 0 20px;
}
.mw-ui-btn-nav-tabs .mw-ui-btn:first-child,.mw-ui-btn-nav-tabs .mw-ui-btn:last-child{ border-radius:0;}
.mw-ui-btn.active-info { 
  color:#396EB3!important;
  background:none!important;
  border-bottom:5px solid #396EB3;
  box-shadow:none!important;
  font-size: 24px;
  font-weight: 700;
}
/* utilities **/


.text-nu {
    text-decoration: none!important;
}
.h-227 {
  height: 227px;
}
.h-320{
  height: 320px;
}
.h-650 {
  height: 650px;
}
.h-390 {
  height: 390px;
}
.h-420 {
  height: 420px;
}
.h-460 {
  height: 460px;
}
.solid-blue {
  color:#396EB3;
    width: 100px;
    height: 5px!important;
    border: 5px solid #396EB3;
    opacity: 1;
    margin:0;
}
#accordion .card-header button, #accordion .card-body {
	padding: 25px!important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #639DE8!important;
}
#mod-wa-wrapper {text-align: center;width:62px;height:115px!important;box-shadow:2px 2px 3px #999;}
.mod-wa, .mod-claim {box-shadow:none!important;border-radius:0!important;}

#mw-tabs-module-tabs-20220724100543 .mw-ui-box,.mw-ui-box .card {background-color:#f0f0f0;}

/* Form */
.form-group {
  padding-bottom: 30px;
}
.form-control {
  border-radius: 0;
}
/* EF */

/* blog */
.view {
  position: relative;
  cursor: default;
  overflow: hidden;
}
.view img {
  position: relative;
  display: block;
}
.overlay .mask {
    opacity: 1;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.view .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    background-attachment: fixed;
    z-index: 2;
}

.view .container { z-index: 99; }

.border-all-15 {
  border-radius: 15px!important;
}
.blog-inner-page .mw-breadcrumb a {color:#777;}
.blog-inner-page .mw-breadcrumb-current {font-weight:normal;}
/* enblog */

#footer-layout section {
  background-color:#ffffff!important;
  border-top: 1px solid #ddd!important;
}
#footer-layout section.py-2 { 
  background-image:url(https://www.pertalife.com/web/userfiles/media/default/bg-footer-lb-02_1.png);
  background-position: left top;
  background-size: auto;
  background-repeat: no-repeat;
}

.pertalife-news-1 .thumbnail {
    padding-top: 56.25%;
    width: 100%;
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
    -webkit-background-size: cover;
}
/* search module */
#module-pages .pages-nav-default li a {font-size:24px;padding:10px 0;}
#module-pages .pages-nav-default ul {padding:0!important;}

/* Page Header 
.edit[field="layout-skin-1-module-layouts-40"][rel="module"],
.edit[field="layout-skin-1-layouts-20220728132115"][rel="module"],
.edit[field="layout-skin-1-layouts-20220728095303"][rel="module"],
.edit[field="layout-skin-1-layouts-20220724100219"][rel="module"],
.edit[field="layout-skin-1-module-layouts-55"][rel="module"],
.edit[field="layout-skin-1-layouts-20220722054904"][rel="module"] {
  background-attachment: fixed;
  background-size:auto!important;
}*/
.ico-hp::before {
  content:'';
  display: inline-block;
  background-image:url(/userfiles/media/default/lg-hp.png);
  background-repeat:no-repeat;
  width: 110px;
  height:90px;
  margin-right: -50px;
}
/* End PH */
/* Header & Footer Modules & Search*/
@media (max-width: 767px){
  #element_1658300519148, #element_1657791023614, #element_1657791023624 { 
  	text-align: left!important;
  }
  #element_1658300519132{padding-left:1rem!important;padding-right:1rem!important;}
  #element_1658300519148 {display:block!important;}
  #element_1658300519705 {margin-bottom: 50px;}
  .module {padding:0 3px;}
  #element_1657791023625 {margin:0px!important;}
  .soc-icons-footer{justify-content:center;}
  table[class*='mw-wysiwyg-table'] {table-layout:auto!important;}
  .bx-wrapper .bx-pager {
    transform: translateY(-70%)!important;
	}
}
/* END HF */
/* pages Responsive */
/*Homepage */
 #element_1658279177267,#mw-cl-id-1658279177442,#mw-cl-id-1658279177857 {padding: 0px 150px!important;}
.blog-lists {transition:transform 0.3s ease;}
.blog-lists:hover {
  transform: translateY(-14px);
}
.edit[field="layout-features-skin-2-layouts-20220720010052"][rel="module"] {overflow:hidden;}
@media (max-width: 767px){
  /* Homepage */
  #layouts-20220709081359 {display:none;}
 #element_1658279177267,#mw-cl-id-1658279177442,#mw-cl-id-1658279177857 {padding: 0px 10px!important;z-index:5;}
  .edit[field="layout-features-skin-2-layouts-20220720010052"][rel="module"],
  .edit[field="layout-text-block-skin-3-layouts-20220723033202"][rel="module"],
  #footer-layout section.py-2{ background-image:none!important;}
  #element_1658300519148 img{ margin-left:16px;margin-right:16px;}
  #blob,.section .dots span:nth-child(1),.section .dots span:nth-child(2), .section .dots span:nth-child(4) { display:none!important; }
	#btn-layouts-20220719074740-btn {margin-bottom:50px;}
  .edit[field="layout-text-block-skin-1-layouts-20220719074740"][rel="module"] {
    background-size: 200% !important;
    background-position: 0% 100%!important;
    padding-bottom: 250px!important;
	}
  .edit[field="layout-blog-skin-3-layouts-20220720065622"][rel="module"] {background-image:none!important;}
  
}

/* en pr*/
#mainHeader {
	z-index: 20;
  position: relative;
}
#mainHeader #header-layout {
  background:none!important;
	background-color: transparent !important;
}

#mainHeader.sticky-top {
	position: sticky;
}
#mainHeader.sticky-top #header-layout {
  
	background-color: #fff !important;
}

/* Custom Home Slider */
.home-slider .bx-viewport {
  height: calc(100vh - 94px);
}

@media screen and (min-width: 1024px) {
  .home-slider .bx-viewport {
  	height: calc(100vh - 41px);
	margin-top: -125px;
  }
  .navbar-nav {display: inline-flex;}
  #home-page .navbar-nav {
    display: inline-flex;
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 5px #fff, 0 2px 10px 5px rgb(0 0 0 / 20%);
    box-shadow: 0 0 0 5px #fff, 0 2px 10px 5px rgb(0 0 0 / 20%);
    border-radius: 2px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	}
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem!important;
    padding-left: 0.5rem!important;
	}
}
.home-slider .bxSlider, 
.home-slider .slide, 
.home-slider .img-holder {
	height: 100%;
}
/* ---- */
/* product-slider-holder */
.product-slider-holder .img-holder {
	position: relative;
  	overflow: hidden;
  transition:transform 0.3s ease;
}
.product-slider-holder .img-holder::after {
	content: "";
  	display: block;
  	position: absolute;
  z-index: 2;
  width: calc(100% - 1rem);
  height: calc(100% - 6px);
  top: 0;
  left: 0.5rem;
  /* background: linear-gradient(to top, rgba(0,0,0,0.1), rgba(0,0,0,0) 80%); */
  background-image: url('/userfiles/media/default/grad-bg.png');
  background-size: cover;
  background-repeat: none;
  background-position: bottom;
  border-radius: 10px;
  background-blend-mode: multiply;
  pointer-events: none;
}
/*.product-slider-holder .img-holder:hover::after {
	/* display: none; 
}*/
.product-slider-holder .img-holder img {
	/*filter: grayscale(1);*/
  	background-color: #ffffff;
  	border-radius: 10px;
  	overflow: hidden;
  	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  	margin: 2px 0 6px;
  	width: 170;
  	transition: all 0.9s ease;
}
.product-slider-holder .img-holder:hover {
	transform: translateY(-14px);
}
.product-slider-holder .slick-list {
  	padding: 16px 0;
	overflow-y: visible;
}
/* ----- */
.cards {}
/**
.cards__item {
  background-image: url(/userfiles/media/default/bg-wing-produks.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: right bottom;
  position: relative;
  margin-top: 48px;
  padding-top: 72px !important;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.07);
  text-align: center;
}
/*/
.cards__item {
  background-image: url(/userfiles/media/default/bg-wing-produks.png);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: right bottom;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.07);
  text-align: center;
  transition: background-size 0.9s ease-in;
  z-index:5;
}
.cards__item:hover {
 background-size: 35%;
}
/*
.cards__item img {
	position: absolute;
  	top: 0;
  	left: 50%;
  	transform: translate(-50%, -50%)
}*/
.cards__item a {flex-direction: column!important;}
/* TATA KELOLA */
.tata-kelola .img-holder {
	position: relative;
}
.tata-kelola .img-holder::after {
 content: '';
  	display: block;
  	position: absolute;
  z-index: 2;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  background: linear-gradient(to left, #396EB3, rgba(57,110,179,0));
}



/* ----- */
.footer-background {
	border-top: 1px solid #DDD !important;
}
#footer-layout section:nth-child(2) {
  background-image: none !important;
	background-color: #396EB3 !important;
  	color: #fff;
}
#footer-layout section:nth-child(2) .container {
	border: none !important;
}
#footer-layout section:nth-child(2) .container small {
	
}

@media screen and (min-width: 48em) {
  #footer-layout section:nth-child(2) .container small {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  	-webkit-box-orient: horizontal;
  	-webkit-box-direction: reverse;
  	    -ms-flex-direction: row-reverse;
  	        flex-direction: row-reverse;
  	-webkit-box-align: center;
  	    -ms-flex-align: center;
  	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
  }
}

.bx-wrapper .bx-pager {
	display: block !important;
  top: 100%;
  transform: translateY(-200%);
}

.header-top .nav-link {
	color: #868686 !important;
}

.header-top .nav-link:hover {
	color: #396EB3 !important;
}
/** animation paralax */

.square-red {
  width: 50px;
  height: 100px;
  background: red;
}
/*blobs*/
#blob::before {
  content: '';
  display: block;
  right: -200px;
  position:absolute;
  min-height: 350px;
  min-width: 350px;
  width: 40vh;
  height: 40vh;  
  background-color: #fff;  
  box-shadow: inset 10px 0 40px #509cfa,
            inset -80px 0 100px #509cfa,
            inset -40px 10px 100px #509cfa;
  background-size: 1600% 1600%;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 1000px;
  -webkit-animation: 
    transform 10s ease-in-out infinite both alternate,
    movement 10s ease-in-out infinite both;
          animation: 
    transform 10s ease-in-out infinite both alternate,
    movement 10s ease-in-out infinite both;
  z-index:1;
}


@-webkit-keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   80% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}


@keyframes transform {
    0%,
  100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   80% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}


@-webkit-keyframes movement {
    0%,
  100% { transform: none; }
   50% { transform: translateY(20%) rotateY(30deg); }
}


@keyframes movement {
    0%,
  100% { transform: none; }
   50% { transform: translateY(20%) rotateY(30deg); }
}
#mw-cl-id-1658279177442 {z-index:5;position:relative;}
/*blob span*/
.section .dots {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:1;
}
.section .dots span {
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #509cfa, #ffffff);
  border-radius: 38% 62% 55% 45%/32% 53% 47% 68%;
  animation: vawe 7s linear infinite;
  z-index:1;
}
.section .dots span:nth-child(1) {
  top: 10%;
  left: calc(100% - 360px);
  width: 45px;
  height: 45px;
  z-index:1;
}
.section .dots span:nth-child(2) {
  top: 15px;
  left: 180px;
  width: 50px;
  height: 50px;
  border-radius: 38% 62% 33% 67%/60% 53% 47% 40%;
  transform: rotate(90deg);
  z-index:1;
}
.container .dots span:nth-child(3) {
  right: 180px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  border-radius: 38% 62% 55% 45%/52% 53% 47% 48%;
}
.section .dots span:nth-child(4) {
  bottom: 50px;
  left: 80px;
  width: 20px;
  height: 20px;
  border-radius: 38% 62% 55% 45%/52% 53% 47% 48%;
  z-index:1;
}
.container .dots span:nth-child(5) {
  right: 280px;
  bottom: 80px;
  width: 25px;
  height: 25px;
  border-radius: 38% 62% 55% 45%/52% 53% 47% 48%;
}
.container .dots span:nth-child(6) {
  top: 6%;
  left: calc(100% - 400px);
  width: 25px;
  height: 25px;
}
@keyframes vawe {
  20% {
    border-radius: 45% 55% 62% 38%/53% 51% 49% 47%;
  }
  40% {
    border-radius: 45% 55% 49% 51%/36% 51% 49% 64%;
  }
  60% {
    border-radius: 60% 40% 57% 43%/47% 62% 38% 53%;
  }
  80% {
    border-radius: 60% 40% 32% 68%/38% 36% 64% 62%;
  }
}
/* eap*/

/* BG CIRCLE */
.bg-circles {
  	z-index: -1;
  
}

.bg-circles .circles {
	display: block;
  position: fixed;
  z-index: -1;
  width: calc(100vw - 6px);
  height: 100%;
  top: 0;
  left: 3px;
  overflow: hidden;
  -webkit-transform: perspective(0) rotateX(0) rotateY(0); /* Safari */
  transform: perspective(0) rotateX(0) rotateY(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bg-circles .circles img {
	position: absolute;
  	user-select: none;
}

.bg-circles .circle--top {
  top: 108px;
  right: 0;
  transform: translateY(0) scale(0.5);
  transform-origin: top right;
}
.bg-circles .circle--middle {
  top: 50%;
  left: 0;
  transform: translateY(-50%) scale(0.5);
  transform-origin: left;
}
.bg-circles .circle--bottom {
  bottom: 0;
  right: 0;
  transform: translateX(0) scale(0.5);
  transform-origin: bottom right;
}

@media (max-width: 767px){
  .bg-circles .circles {display:none!important;}
}
@media screen and (min-width: 767px) {
  
  .bg-circles .circles {
  	width: 100%;
	left: 0;
  }
  .bg-circles .circle--top {
	width: 15vw;
  	top: 0;
	transform: translateY(0) scale(1);
  }
  .bg-circles .circle--middle {
  	transform: translateY(-50%) scale(1);
  }
  .bg-circles .circle--bottom {
	width: 20vw;
  	transform: translateX(0) scale(1);
  }
}

.bg-circles > .container {
	position: relative;
  z-index: 2;
}