@font-face {
		    font-family: 'Ubuntu';
		    src: url('/fonts/Ubuntu-Medium.woff2') format('woff2'),
			url('/fonts/Ubuntu-Medium.woff') format('woff');
		    font-weight: normal;
		    font-style: normal;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Ubuntu';
		    src: url('/fonts/Ubuntu-Light.woff2') format('woff2'),
			url('/fonts/Ubuntu-Light.woff') format('woff');
		    font-weight: 300;
		    font-style: normal;
		    font-display: swap;
		}

		@font-face {
		    font-family: 'Ubuntu';
		    src: url('/fonts/Ubuntu-Bold.woff2') format('woff2'),
			url('/fonts/Ubuntu-Bold.woff') format('woff');
		    font-weight: bold;
		    font-style: normal;
		    font-display: swap;
		}

		html, body{
			margin: 0;
		    padding: 0;
		    font-family:'Ubuntu';
		}

		body{
			width: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			text-rendering: optimizeSpeed;
			color: #383838;

			overflow-y:scroll !important;
		}

		a{
			text-decoration: none;
			color: #000;
		}

		input, select{

			max-width: 90%;
		}

		#modal{

			background: #59CDE4 !important;
			text-align: center !important;
		}

		#modal h2{
			color: #fff;
			text-align: center;
		}

		#modal .action-button{
			display: block;
			margin: 40px auto;
			max-width: 300px;
			background-color:#F6C511;
			border-color:#F6C511;
			color:#383838;
	
		}

		#modal input{
			font-size: 1.5em;

		}

		.blocker{

			background-color: rgba(0,0,0,0.35) !important;
		}
		.wrapper{
			display: flex;
			flex-direction: column;


		}

		.container{
			margin: 0 auto;
			max-width: 1280px;
			padding: 0 30px;
			width: 100%;
			box-sizing: border-box;
		}

		#footer-contact{
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;         
                        font-size: 1.2em;
			flex-wrap: wrap;
			//margin-bottom: 20px;
                }

                #footer-contact > a{

                        margin-left: 40px;
                        color: #fff;
                        cursor: pointer;
			white-space: nowrap;
                }

                #footer-contact > a:nth-child(1), #footer-contact > a:nth-child(2){
                        font-size: 1.3em;
			color: #000;
		
                }

		#links-holder{



		}

		#links-holder > a{

			display: block;
			position: absolute;
			right: 320px;
			background-color: rgb(0,0,0, 0);
			z-index:10;
		}

		#why-holder{
			width:100%;
			display:flex;
			justify-content: center;
			flex-wrap:wrap;	
            column-gap: 5%;
		}

		.why-block, .spectr-item{
			display: inline-flex;
			flex-direction: column;
			box-shadow: -16px 16px 20px 0px rgb(0 0 0 / 10%);
			margin-bottom: 30px;
			border-radius: 17px 17px 17px 17px;
			align-items: center;
		}

		#spectr-holder{
			width:100%;
			display:flex;
			justify-content:space-between;
			flex-wrap:wrap;
		}

		.spectr-item span{
			text-align: center;
		}

		.spectr-item img{
			border-radius: 17px 17px 0px 0px;
		}

		.spectr-item h3{
			text-align: center;
			font-size: 1em;
		}

		.spectr-item .action-button{

			color: #fff;

		}

		.action-button{
		
			text-shadow: 1px 1px 9px rgb(0 0 0 / 30%);
			background-color: #59CDE4;
			border-radius: 32px 32px 32px 32px;
			box-shadow: -5px 5px 13px 0px rgb(0 0 0 / 13%);
			padding: 15px 10px 15px 10px;
			text-align: center;
			color: #383838;
			border: 1px solid #59cde4;
			-webkit-transition : border 350ms ease-out;
			-moz-transition : border 350ms ease-out;
			-o-transition : border 350ms ease-out;
			transition : border 350ms ease-out;
			margin: 30px;
		}
		.action-button:hover{
			border: 1px solid #f0f0f0;
			cursor: pointer;

		}

		.left{

			/*max-width: 700px;*/

		}

		.advantages-holder{
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;

		}

		.advantage{
			max-width: 45%;
			width: 100%;
			display: inline-flex;
			padding: 19px 19px 19px 19px;
			border-radius: 69px 69px 69px 69px;
			box-shadow: -11px 13px 20px -4px rgb(0 0 0 / 16%);
			margin-bottom: 20px;
		
		}

		.advantage .desc-holder:nth-child(2){
			padding-left: 30px;

		}


		.advantage .desc-holder:nth-child(1){
			display: flex;
			align-items: center;

		}

		.desc-holder p{
			font-weight: 300;
		}

		.icon-holder{
			padding: 20px;
			border-radius: 50px;
			background-color: #59CDE4;
		}

		.icon-holder svg{
			fill: #fff;

		}

		.bubble {
		    -webkit-border-radius: 50%;
		    -moz-border-radius: 50%;
		    border-radius: 50%;
		    
		    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
		    -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
		    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
		    
		    height: 200px;
		    position: fixed;
		    width: 200px;
		}

		.bubble:after {
		    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
		    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
		    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
		    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
		    background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
		    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

		    -webkit-border-radius: 50%;
		    -moz-border-radius: 50%;
		    border-radius: 50%;
		    
		    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		    -moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		    box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
		    
		    content: "";
		    height: 180px;
		    left: 10px;
		    position: absolute;
		    width: 180px;
		}
		/* ANIMATIONS */

		.x1 {
		    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate; 
		    left: -5%;
		    top: 5%; 
		    -webkit-transform: scale(0.6);
		    -moz-transform: scale(0.6);
		    transform: scale(0.6);
		}
		.x2 {
		    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    
		    left: 5%;
		    top: 80%;
		    
		    -webkit-transform: scale(0.4);
		    -moz-transform: scale(0.4);
		    transform: scale(0.4);
		}

		.x3 {
		    -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    
		    left: 10%;
		    top: 40%;
		    
		    -webkit-transform: scale(0.7);
		    -moz-transform: scale(0.7);
		    transform: scale(0.7);
		}

		.x4 {
		    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    
		    left: 20%;
		    top: 0;
		    
		    -webkit-transform: scale(0.3);
		    -moz-transform: scale(0.3);
		    transform: scale(0.3);
		}

		.x5 {
		    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    
		    left: 30%;
		    top: 50%;
		    
		    -webkit-transform: scale(0.5);
		    -moz-transform: scale(0.5);
		    transform: scale(0.5);
		}

		.x6 {
		    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    
		    left: 50%;
		    top: 0;
		    
		    -webkit-transform: scale(0.8);
		    -moz-transform: scale(0.8);
		    transform: scale(0.8);
		}

		.x7 {
		    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    
		    left: 65%;
		    top: 70%;
		    
		    -webkit-transform: scale(0.4);
		    -moz-transform: scale(0.4);
		    transform: scale(0.4);
		}

		.x8 {
		    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
		    
		    left: 80%;
		    top: 10%;
		    
		    -webkit-transform: scale(0.3);
		    -moz-transform: scale(0.3);
		    transform: scale(0.3);
		}

		.x9 {
		    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
		    
		    left: 90%;
		    top: 50%;
		    
		    -webkit-transform: scale(0.6);
		    -moz-transform: scale(0.6);
		    transform: scale(0.6);
		}

		.x10 {
		    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    -moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
		    
		    left: 80%;
		    top: 80%;
		    
		    -webkit-transform: scale(0.3);
		    -moz-transform: scale(0.3);
		    transform: scale(0.3);
		}

		/* KEYFRAMES */

		@-webkit-keyframes animateBubble {
		    0% {
			margin-top: 1000px;
		    }
		    100% {
			margin-top: -100%;
		    }
		}

		@-moz-keyframes animateBubble {
		    0% {
			margin-top: 1000px;
		    }
		    100% {
			margin-top: -100%;
		    }
		}

		@keyframes animateBubble {
		    0% {
			margin-top: 1000px;
		    }
		    100% {
			margin-top: -100%;
		    }
		}

		@-webkit-keyframes sideWays { 
		    0% { 
			margin-left:0px;
		    }
		    100% { 
			margin-left:50px;
		    }
		}

		@-moz-keyframes sideWays { 
		    0% { 
			margin-left:0px;
		    }
		    100% { 
			margin-left:50px;
		    }
		}

		@keyframes sideWays { 
		    0% { 
			margin-left:0px;
		    }
		    100% { 
			margin-left:50px;
		    }
		}


		@media screen and (max-width:400px){
			#header .container img{
				left: 0 !important;

			}


		}

                @media screen and (max-width:500px){


			#links-holder > a:nth-child(1), #links-holder > a:nth-child(2){
                                right: 20px !important;


                        }	

			#links-holder > a:nth-child(4){

				top: 160px;	
			}

		}

		@media screen and (max-width:600px){
                        .advantage{flex-direction: column;}

                        .left h1{
                         
                                font-size: 2em !important;
                        }

                }


		@media screen and (max-width:700px){
			
			.left h1{

				font-size: 2em !important;
			}

                        #links-holder > a:nth-child(3){

                                display: none !important;
                        }

			#links-holder > a:nth-child(1), #links-holder > a:nth-child(2){
				right: 100px;

			}

            #links-holder > a:nth-child(1){font-size: 1.6em !important;}

            #links-holder > a:nth-child(2){

                top: 130px;
            }

		}

		@media screen and (max-width:800px){


			#spectr-holder{
				justify-content: space-around;
			}


			#why-holder{
				justify-content: center;				
			}

			#footer-contact{

				margin-bottom: 20px;
			}

		}

		@media screen and (max-width:900px){
			.advantage{max-width: unset;}	


		}