@viewport { width: 1200px;}


@font-face {
font-family: 'Century Gothic2';

src: url(/static/fonts/11528.ttf);

}

@font-face {
font-family: 'Casandra';

src: url(/static/fonts/4250.ttf);

}
.Casandra{
font-family:Casandra;
}






@font-face {
font-family: 'MyriadPro-Cond';

src: url(/static/fonts/MyriadPro-Cond.ttf);

}
@font-face {
font-family: 'TTSlabs-Black';

src: url(/static/fonts/TTSlabs-Black.ttf);

}
body{

padding: 0;
margin: 0;
font-size: 20px;
font-family: Century Gothic2;
color:#f00;
color:#000;

background: #fff repeating-linear-gradient(
  45deg,
  #0000,
  #0000 150px,
  #00000005 150px,
  #00000005 300px
);
}

input,textarea{
font-family: Century Gothic2;
font-size: inherit;
padding: 10px;
border:2px solid #aaa;
border-radius:4px;
margin:3px;
}
input[type=submit]{
background:#33f;color:#fff;cursor:pointer;border:none;padding:10px 40px;
border:2px solid #0000;
}
input[type=submit]:hover{
background:#00f;

}


input,textarea{
outline:none;
transition:0.3s;

}
input:focus,textarea:focus{
border:2px solid #35f;



}

label{
padding:5px 10px;
}

.footer{

min-height:90vh;

}
.sub_block{
text-align:center;
position:relative;
min-height:900px;
    box-sizing: border-box;
padding:20px;
/*max-width:400px;*/
margin:auto;
}
.about{

    padding: 20px 20px;
    font-size: 20px;
}
.circle .value{
font-size:50px;
line-height: 1;
}
.circle .field{
font-size:20px;
line-height: 1;
}
.circle>div{

display:table;
width: 100%;
height: 100%;
}
.circle>div>div{
vertical-align:middle;
display:table-cell;

}
.circle {
line-height: 1;
/*font-family:MyriadPro-Cond;*/
/*font-weight:bold;*/
width: 140px;

font-weight: bold;
display: inline-block;
border-radius: 100%;
box-sizing: content-box;
border: 5px dashed #000;
margin:5px;
aspect-ratio: 1;
}


.header_goods a img{
width:80px;margin:10px;
transition:0.2s;

}

.header_goods a:hover img{

transform:scale(1.5);

}


.header_goods{
background:#fff;padding:100px 20px;max-width:1000px;margin:auto;text-align:center;
}

.header_goods .h1{

color:#a00;font-family: TTSlabs-Black;font-size:60px;
}




.or{

    width: 100%;
    position: absolute;
    top: 5px;
}

.or_table{
aspect-ratio: 0.8;
    margin: auto;

    width: 70%;
	max-width: 300px;
}
.or_table_title{

position: relative;
    line-height: 1;
    font-family: 'Century Gothic2';
    font-size: 32px;
    font-weight: bold;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.sub_block{
position:relative;
}

.BLOCK{
/*
display:table;table-layout: fixed;
*/
margin:auto;

width:100%;

}
.BLOCK>div.main{
   width: 500px;

}
.BLOCK>div.block_bg{
width: calc(50% - 500px);
    height: 900px;
}
.BLOCK>div{

vertical-align: top;
display:inline-block;
}
.right{
text-align:right;
}

.left{

text-align:left;
}

.tare{
margin-top:150px;
width:150px;
position:absolute;   

/*top: 150px;*/
transition:0.3s;
z-index: 50;
}
.tare:hover{
transform:scale(1.5);
}


@keyframes bloom {
0% {
 top: 0;
 }
 10% {
 top: 10px;
 }
 20% {
   top: 0px;
 }

30% {
   top: 10px;
 }
 40% {
   top: 0px;
 }

}

@keyframes rotate-user {

 0% {
  transform: rotate(3deg);
 }
 

 
 50% {
  transform: rotate(-3deg);
 }

 
 100% {
    transform: rotate(3deg);
 }


}


.can_ani{
 animation: rotate-user 1s ease infinite;

 transition:0.3s;
 top:0;
}



.can_ani:hover{

 animation: rotate-user 0.5s ease infinite;
top:-2vh;


}











.right .tare{
left:-85px; 

}

.left .tare{
right:-85px; 

}
.space{
width:0;
}


.block_bg{

opacity:0.5;

}


#FORM .Input input,
#FORM .Input textarea
{
box-sizing: border-box;
width:100%;
}
.table{
text-align:center;
margin:auto;

/*display:table;*/
color:#000;}




.td{
padding: 5px;
vertical-align:middle;
/*display:table-cell;*/
display: inline-block;
}
.tr{

/*display:table-row;*/

}


.table .Input{
box-sizing: border-box;
width: 100%;
max-width: 550px;
}
.table .Right{
box-sizing: border-box;
text-align:right;
width: 100%;
max-width: 300px;

}


.BUY{


font-weight: bold;
    border-radius: 100px;
    width: 100px;
    height: 100px;
	margin-left:-50px;
	margin-top:-50px;
    background: red;
    box-shadow: 0 0 50px #0007;
    color: #fff;
    text-align: center;
    padding: 32px 0;
    transition: 0.3s;
    font-size: 38px;
    position: fixed;
    transform: rotate(-14deg);
    box-sizing: border-box;
    bottom: 5%;
    line-height: 1;
    left: 50%;
    text-decoration: none;
    z-index: 9999;
}

.BUY:hover{

    transform: scale(1.5);
}






@keyframes Pulse-3 {
 20% {

	  transform: scale(0.8) ;
  }
 50% {

	  transform: scale(0.9) ;
  }

 80% {
   
	
	  transform: scale(0.7) ;
  }



}
@keyframes Pulse {
 20% {

	  transform: scale(0.8) rotate(93deg);
  }
 50% {

	  transform: scale(0.9) rotate(95deg);
  }

 80% {
   
	
	  transform: scale(0.7) rotate(93deg);
  }



}


@keyframes Pulse-2 {
 45% {
   
	
	  transform:scale(1) rotate(0);
  }

 50% {

	  transform: scale(0.95) rotate(3deg);
  }


 55% {
   
	
	   transform:scale(1) rotate(0);
  }



}



.logo:active{

_transform:rotate(5deg) scale(0.8);
}



@keyframes opacity-1-animation {
 20% {

	  transform:rotate(0deg) scale(1);
  }
 50% {

	  transform:rotate(0deg) scale(0.7);
  }

 100% {
   
	 opacity:0;
	  transform:rotate(360deg) scale(1.5);
  }



}

.logo.rotate{

animation: opacity-1-animation 3s linear ;

}
.logo_scroll.world{





top:10%;


 margin-bottom: 0;
margin-right:0;
width:200px!important;
}

.logo.world{

position: fixed;


}
.logo{


animation: Pulse-2 3s linear infinite;

transition: 0.2s;

filter: drop-shadow(2px 2px 2px #0007);
position: fixed;
z-index:9999;

}

.logo_world{
  width:60vh;
    height:60vh;
}




@media screen and (max-device-width: 900px) {
.logo_world{
  width:40vh;
    height:40vh;
}

.BLOCK{
position: relative;
text-align: center;



}
.sub_block{

}
.BLOCK>div.main{
    margin: auto;
}
.BLOCK>div{

display: block;
}

.BLOCK>div.block_bg {
display:none;
width: 100%;
    position: absolute;
    left: 0;
	    top: 0;
}

}
@media screen and (max-device-width: 600px) {


.logo.home{

width: 30vh;
    margin-left: -15vh;
    top: 30vh;
}
.BLOCK{

text-align: center;



}
.sub_block{

}
.BLOCK>div{

display: block;
}

.BLOCK>div.block_bg {

width: 100%;
    position: absolute;
    left: 0;
}

.table .Right{

    text-align: center;
}
body{
/*background:red;*/
    font-size: 20px;
}
/*
.logo{
margin-right: -300px;
width:900px;
}
*/

.BUY{

zoom: 0.8;
}



.BLOCK{
display: block;
}

.BLOCK>div.main{
width:100%;

}

.sub_block{
/*padding:100px;*/
}
.tare{

margin:100px auto 20px;
display:block;
right:unset !important;
left:unset !important;
top:unset !important;
width:20vh;
position:relative; 

/*

*/

/*
width:30%;

position:relative; 


right:0 !important;
float:left;
*/
}

.circle,.tare{}
.circle{
/*
width: 200px;
    height: 200px;
	*/

}
/*
.circle .field{
    font-size: 30px;
}


.circle .value{
    font-size: 60px;
}
*/


.or{
/*
margin-left: -225px;
width: 450px;
*/
}
.or_table{
/*
    height: 530px;
    width: 600px;
	*/

}
.or_table_title {
/*
  font-size: 50px;
  */
}











.aftertaste {
/*

*/
display:inline-block;

position:relative; 
top:20px !important;
left:20px !important;
right:unset !important;
float:left;
}







}






@keyframes color-red-white {


 0% {
		color:red;
  }

 50% {
			color:white;
  }

 100% {
			color:red;
  }



}



@keyframes color-gold-white {



 50% {
			color:white;
  }



}




@keyframes meove-top {


 0% {
		margin-top:-200px;
  }

 100% {
		margin-top:0px;
  }



}


.logo_{

margin-top:0px;

animation: meove-top 0.5s linear



}



.dna{
    margin-right:-20px;
    margin-bottom: -450px;


    transition: 0.4s;

    filter: drop-shadow(2px 2px 2px #0005);
    position: absolute;
z-index:9999;
    bottom: 50%;
    right: 50%;
 margin-bottom:-400px;
    margin-right: -30px;

/*animation: Pulse 5.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)  infinite;*/
}

.logo_scroll.dna{
animation:none;
transform: rotate(0) !important;
margin-bottom: -310px !important;
margin-right: -310px !important;
width:50px!important;
}
.logo_scroll{





top:unset!important;
left:unset!important;

bottom:5%!important;
right:5%!important;


 margin-left: 0!important;
 margin-bottom: 0!important;
margin-right:0!important;
width:15vh!important;
}





.form_radio_btn {
	display: inline-block;
	margin: 5px;
}
.form_radio_btn input[type=radio] {
	display: none;
}
.form_radio_btn label {

    transition: 0.2s;
	display: inline-block;
	cursor: pointer;
	padding: 10px 15px;
background: #ccc;
	border: 0px solid #999;
	border-radius: 6px;
	user-select: none;
}

/* Checked */
.form_radio_btn input[type=radio]:checked + label {
	background: #00f;
	color:#fff;
}

/* Hover */
.form_radio_btn label:hover {
	background: #33f;
	color:#fff;
}

/* Disabled */
.form_radio_btn input[type=radio]:disabled + label {
	background: #efefef;
	color: #666;
}









.form_body{

/*
background:#eee;
*/
}







.content p{
text-align:justify;
}
.content{
max-width:1000px;
padding:20px;
margin:auto;

}




.footer{
background:#0001;

}
.footer .w{
max-width:800px;
padding:20px;
margin:auto;

}



input[type="checkbox"]{

    height: 20px;
    width: 20px;


}

td{
text-align: left;
}











.window {
    box-shadow: 0 0 50px #0007;
    background: #2d6094;
    color: #fff;
    max-width: 600px;
    margin:100px auto;
    padding: 20px;
    font-size: 16px;
}
.ft>div {

    display: table-cell;
    vertical-align: top;
}
.ft {

    top: 0;
    left: 0;
    display: table;
    z-index: 10;
    width: 100%;
	min-width:300px;
    height: 100%;
  
}




.button1 {
    border: 5px solid white;
    width: auto !important;
    color: #fff;
    background: #f00 !important;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 10px 20px;
    margin: 20px;
    font-size: 20px;
    display: inline-block !important;
    text-decoration: none;
    cursor: pointer;
}
.mid {
    clear: both;
    text-align: center;
}


.left .aftertaste{

    right: -100px;
}
.right .aftertaste{

    left: -90px;
}




.aftertaste{
position:absolute;
z-index:999;
color:black;

}


.aftertaste h1{
    transform: rotate(
-16deg);
color:red;


font-size:35px;

animation: color-red-white 3s ease infinite;

}


.aftertaste.gold h1{
    transform: rotate(
-16deg);
color:#e5aa3e;


font-size:35px;

animation: color-gold-white 2s linear infinite;

}




.aftertaste .aftertaste_text{

text-align:left;
background:#fff;
width:300px;
font-weight:bold;
padding:20px;
border-radius:10px;
position:absolute;
z-index:999;
box-shadow:0 0 20px #0007;
display:none;
}




.aftertaste:hover  .aftertaste_text{

display:block;


}








button .spinner{
    margin: -7px 0;

}
button{

   
	
	
	font-family: Century Gothic2;
    font-size: inherit;
    padding: 10px;

    border-radius: 4px;
    margin: 3px;
	
	outline: none;
    transition: 0.3s;
	
	
	
	 background: #33f;
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 10px 40px;
    border: 2px solid #0000;
}

.spinner {
  animation: rotate 2s linear infinite;
padding:50px;
  width: 100px;
  height: 100px;
  

}

.spinner .path {
  stroke: #00f;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite;
}


@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}