@media only screen and (min-width: 320px) {
	/*Variables*/
    :root{
        --gradient_size:400px;
        --gradient_position:-200px;
    }
	/**/
	.pos-relative{position: relative;}
	/*Corner gradient*/
	.gradient-container{width:100%; height:100%; position: absolute; bottom:auto; top:auto; left:auto; right:auto; z-index: 1;}
	.gradient-container svg{width: 100%; height:100%;}
    .container{z-index: 2;}
	/*Circle gradient*/
	.gradient-circle-container{width:var(--gradient_size); height:var(--gradient_size); z-index:1;}
	.gradient-circle-container svg{overflow: visible;}
	/*Gradient positions*/
	/*top left*/
	.diagonal_tb{left:var(--gradient_position); top:var(--gradient_position);}
	/*bottom left*/
	.diagonal_bt{left:var(--gradient_position); bottom:var(--gradient_position);}
	/*top right*/
	.diagonal_bt_rev{right:var(--gradient_position); top:var(--gradient_position);}
	/*bottom right*/
	.diagonal_tb_rev{right:var(--gradient_position); bottom:var(--gradient_position);}

	/*Top blue grdient fade*/
    .top-blue-gradient{position: relative;}
    .top-blue-gradient:before{z-index:9; width:150%; height:210%; top:-200px; right:0%; background:url('../img/blue-fade-bg-cropped.png') no-repeat;  display: block; content:'';  background-size:100% auto; position: absolute; background-position:right top;}
    /*Front page*/
    #top #wrap_all .front-page-section{position: relative;}
    #top #wrap_all .front-page-section .post-entry, #top #wrap_all .front-page-section .entry-content-wrapper, #top #wrap_all .front-page-section .flex_column{height: 100%;}
    #top #wrap_all .animated-blobs{position: absolute; width:100%; height:100%; position: absolute; top:0px; left:0px;}
    #top #wrap_all .animated-blobs svg{width: 100%; height:100%; overflow: visible;}
    #top #wrap_all .animated-blobs svg ellipse{width:50px; height:auto;}
    /*#top #wrap_all .front-page-section:after{position: absolute; left:0px; top:0px; width:100%; height:100%; display: block; content:''; background-position: center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 450' opacity='0.56'%3E%3Cdefs%3E%3Cfilter x='-100%' y='-100%' width='400%' height='400%' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='26' x='0%' y='0%' width='100%' height='100%' in='SourceGraphic' edgeMode='none' result='blur'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23bbblurry-filter)'%3E%3Cellipse rx='130' ry='131' cx='488.1569047407671' cy='218.94522788307887' fill='%231a00ffff'%3E%3C/ellipse%3E%3Cellipse rx='130' ry='131' cx='317.42937677556824' cy='226.90140047940338' fill='%23fcd9f5'%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E");}*/
    /*Four blobs graph*/
    #top #wrap_all #main .four-blobs-title .av-special-heading-tag{font-size:16px;}
    #top #wrap_all #main .four-blobs-title .av-subheading{font-size:10px; margin-bottom: 0px;}
    #top #wrap_all #main .four-blobs-title .av-subheading p{margin-bottom: 0px;}
    #top #wrap_all #main .four-blobs text{display:none; color:var(--pink); font-family:'Termina', sans-serif; font-size:10px;}
    #top #wrap_all #main .four-blobs .right-blob{transform:translate(-90px, 0px);}
    #top #wrap_all #main .four-blobs .left-blob{transform:translate(90px, 0px);}
    #top #wrap_all #main .four-blobs .top-blob{transform:translate(0px, -20px);}
    #top #wrap_all #main .four-blobs .bottom-blob{transform:translate(0px, 15px);}
    /*Background blob*/
    #top #wrap_all .background-blob{width:100%; height:250px; opacity:0; left:auto; top:auto; position: relative;}
    #top #wrap_all .background-blob.visible{opacity: 1;}
    /*Service description*/

}
@media only screen and (min-width: 540px) {
    .top-blue-gradient:before{top:-270px;}
}
@media only screen and (min-width: 768px) {
	/*Variables*/
    :root{
        --gradient_size:600px;
        --gradient_position:-300px;
    }
    #top #wrap_all .animated-blobs svg{width: auto; height:auto;}

    /*Four blobs graph*/
    #top #wrap_all #main .four-blobs-title .av-special-heading-tag{font-size:20px;}
    #top #wrap_all #main .four-blobs .right-blob{transform:translate(-30px, 0px);}
     #top #wrap_all #main .four-blobs .left-blob{transform:translate(30px, 0px);}
     #top #wrap_all #main .four-blobs text{font-size:12px; display: block;}

     /*Top Blue gradietn*/
     .top-blue-gradient:before{top:-300px; right:-90px;}
}
@media only screen and (min-width: 990px) {
	/*Variables*/
    :root{
        --gradient_size:1000px;
        --gradient_position:-500px;
    }

    /*Four blobs graph*/
    #top #wrap_all #main .four-blobs-title .av-special-heading-tag{font-size:24px;}
    #top #wrap_all #main .four-blobs-title .av-subheading{font-size:16px;}
    #top #wrap_all #main .four-blobs text{font-size:16px;}

    /*Top Blue gradietn*/
     .top-blue-gradient:before{top:auto; right:0%; bottom:0px; height:140%; background-size:auto 100%;}
}
@media only screen and (min-width: 1200px) {
	/*Four blobs graph*/
    #top #wrap_all #main .four-blobs-title .av-special-heading-tag{font-size:40px;}
	#top #wrap_all #main .four-blobs-title .av-subheading{font-size:16px;}
	#top #wrap_all #main .four-blobs text{font-size:10px;}
    #top #wrap_all #main .four-blobs .right-blob{transform:translate(-30px, 0px);}
    #top #wrap_all #main .four-blobs .left-blob{transform:translate(30px, 0px);}
     /*Service description*/
    #top #wrap_all #main .service-description-section .flex_column_table .service-description-column .background-blob{left:-50px; top:-50px;}
    #top #wrap_all #main .service-description-section .flex_column_table .service-description-column .background-blob svg{height:150%; width:150%;}
    /*Top blue gradient fade*/
    /*Top blue grdient fade*/
    .top-blue-gradient{position: relative;}
    .top-blue-gradient:before{right:0%; height:150%; background-size:100% 100%;}

}
@media only screen and (max-width: 768px) {
    .footer.top-blue-gradient:before{display: none;}

}