@font-face {
    font-family:font1; /* Имя шрифта */
    src: url(arial.ttf); /* Путь к файлу со шрифтом f Lucida Fax Italic.ttf*/
   }



body{
margin: 0;
}

#krugi{
    display:none;
}

#sss{
    text-decoration:none;
    color:#FFFFFF;
    font-size:28px;
    font-family: font1 , cursive;
    position:absolute;
    margin: 0px 0 0 30px;
    top:10px;
    left:-300px;
}

#pan1{
    width:0px;
    height:55px; 
background-image: url(img/fff2.png);
    margin-top:-0px;
    position: absolute;
    z-index: :9999;
    top:0px;
}

#pan2{
   display:none;
}

  #bbb {
        display:block;
    }
    





#fon1{
    width:100%;
    height: 100vh;
    background-image: url(img/334.jpg);
position: absolute;
    top:0px;
    background-position: 50%;

    background-size: cover;
    top:0;left:0;opacity: 0 ;
    display: none;
}


#blog{
    position:absolute;
    font-size:1.0em;
    top:110px;
    font-family: font1 , cursive ;
    text-indent: 1.3em;    
    padding: 20px;
}

#blog2{
    position:absolute;
    font-size:1.0em;
    top:60px;
    width:90%;
    font-family: font1 , cursive ;
    left:20px;
    text-indent: 1.5em;
    
    
}


#ia{
    width:30%;
    position:relative; 
    top:20px;
    opacity: 0;
    margin-left: -30px;
    float: left;
}


@media (min-width: 1024px) {
    
    #ia{
    width:30%;
    position:relative; 
    top:10px;
    opacity: 0;
     
        
}
    
    #blog2{
    position:absolute;
    font-size:1.2em;
    top:90px;
    width:60%;
    font-family: font1 , cursive ;
    right:200px;
    text-indent: 1.5em;
        margin: auto;
    
}
    
    #blog{
    position:absolute;
    font-size:1.3em;
    top:150px;
    width:40%;
    font-family: font1 , cursive ;
    margin-left:30px;
    text-indent: 1.5em;
   
    
    
}
    
    #fon1{
       display: inline;  
           background-size: cover;
    }
    
     #fon2{
                background-image: url(img/3333.jpg);

       height: 100%;  
         background-size: cover;
    }
    
    #krugi{
    display:inline;
}

    #bbb {
       
         display:none;
    }
    
    #mob_menu
    {
        display:none; 
    }
        #pan1
    {
        height: 50px; 
    }
    
    #sss{

    font-size:29px;
    top:10px;

}
    
    #pan2{
   display:inline;
}
    
}









#krm{
    width:48%;height:48%;border-radius:20px; border: 1.5px solid #305B86;margin:auto; background-color:#E3E8FB; box-shadow:
   0px 0px 0px 2px #E4E9FC,   0px 0px 0px 3px #305B86;
}
     
       
       
       
    .transition {
  transition: 0.5s;
}       
       
       
       .krug8{
             border-radius:90px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB;
           position: relative;     

	animation-fill-mode: both;
	animation-delay: 20s;
	animation-duration: 30s;
	animation-name: move8;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
           
             box-shadow:
               0px 0px 0px 2px #E4E9FC,
               0px 0px 0px 3px #305B86,
            inset 2px 1px 0px 6px #89AEDB, 
                 inset 5px -6px 0px 6px #FCFCFC;
           
       }
      
  @keyframes move8 {
	from {
		left: 650px;
         height:80px;
         width:80px;
        opacity:0.8;
        margin-top: 100px;
       
        
	}
	to {
		left: -500px;
         height:20px;
           width:20px;
        opacity:0.1;
         margin-top: 200px;
            
	}
}     
         

        .krug7{
             border-radius:90px;
           border:3.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#A7CDE2;
           position: relative;     

	animation-fill-mode: both;
	animation-delay: 16s;
	animation-duration: 20s;
	animation-name: move7;
	animation-iteration-count: 1;
	animation-timing-function: linear;

           
       }
      
  @keyframes move7 {
	from {
		left: 910px;
         height:60px;
         width:60px;
        opacity:0.7;
        margin-top: -150px;
       
        
	}
	to {
		left: -500px;
         height:20px;
           width:20px;
        opacity:0;
         margin-top: 250px;
            
	}
}      
       
     
        .krug6{
             border-radius:90px;
           border:2.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#B4D7DB;
           position: relative;     

	animation-fill-mode: both;
	animation-delay: 8s;
	animation-duration: 30s;
	animation-name: move6;
	animation-iteration-count: 1;
	animation-timing-function: linear;

           
       }
      
  @keyframes move6 {
	from {
		left: 810px;
         height:70px;
         width:70px;
        opacity:0.7;
        margin-top: -150px;
       
        
	}
	to {
		left: -500px;
         height:20px;
           width:20px;
        opacity:0;
         margin-top: -150px;
            
	}
}      
       

       .krug5{
             border-radius:90px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB; 
           position: relative;     

	animation-fill-mode: both;
	animation-delay: 12s;
	animation-duration: 30s;
	animation-name: move5;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
           
             box-shadow:
               0px 0px 0px 2px #E4E9FC,
               0px 0px 0px 3px #305B86,
            inset 2px 1px 0px 6px #89AEDB, 
                 inset 5px -6px 0px 6px #FCFCFC;
           
       }
      
  @keyframes move5 {
	from {
		left: 850px;
         height:90px;
         width:90px;
        opacity:0.8;
        margin-top: -300px;
       
        
	}
	to {
		left: -500px;
         height:60px;
           width:60px;
        opacity:0.1;
         margin-top: -150px;
            
	}
}     
       
       
       
       
       
       
       
       
       .krug4{
             border-radius:30px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB;
           position: relative;     

	animation-fill-mode: both;
	animation-delay: 8s;
	animation-duration: 30s;
	animation-name: move4;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
       }
      
  @keyframes move4 {
	from {
		left: 650px;
         height:20px;
         width:20px;
        opacity:0.8;
        margin-top: 200px;
       
        
	}
	to {
		left: -500px;
         height:10px;
           width:10px;
        opacity:0.1;
         margin-top: -150px;
            
	}
}     
       
       
       
       
       
       
       .krug{
          height:40px;
           width:40px;
           border-radius:30px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB;
           position: relative;     
            box-shadow:
               0px 0px 0px 2px #E4E9FC,
               0px 0px 0px 3px #305B86,
               inset 1px 0px 1px 2px #89AEDB,
               inset 4px -3px 1px 2px #FCFCFC;
          
           margin-top:200px;
	animation-fill-mode: both;
	animation-delay: 4s;
	animation-duration: 25s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
       }
       
      .krug3{
          height:30px;
           width:30px;
           border-radius:30px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB;
            left:600px;  
           position: relative;     
            box-shadow:
               0px 0px 0px 2px #E4E9FC,
               0px 0px 0px 3px #305B86;
          
           margin-top:100px;
	animation-fill-mode: both;
	animation-delay: 5s;
	animation-duration: 30s;
	animation-name: move3;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
       }
      
  @keyframes move3 {
	from {
		left: 650px;
         height:30px;
         width:30px;
        opacity:0.8;
        margin-top: -200px;
       
        
	}
	to {
		left: -500px;
         height:10px;
           width:10px;
        opacity:0.1;
         margin-top: -150px;
            
	}
}    
        
       
       
        .krug2{
          height:30px;
           width:30px;
           border-radius:30px;
           border:1.5px solid #305B86;
           position:absolute;
           padding: 5px 0 0 5px;
           background-color:#89AEDB; 
           position: relative;     
            box-shadow:
               0px 0px 0px 2px #E4E9FC,
               0px 0px 0px 3px #305B86;
          
           margin-top:100px;
	animation-fill-mode: both;
	animation-delay: 6s;
	animation-duration: 40s;
	animation-name: move2;
	animation-iteration-count: 1;
	animation-timing-function: linear;
           
       }
      
  @keyframes move2 {
	from {
		left: 700px;
         height:30px;
         width:30px;
        opacity:0.8;
       
        
	}
	to {
		left: -100px;
         height:10px;
           width:10px;
        opacity:0.1;
	}
}    
      
@keyframes move {
	from {
		left: 750px;
         height:40px;
         width:40px;
        opacity:1;
         margin-top: 200px;
        
	}
	to {
		left: -100px;
         height:10px;
           width:10px;
        opacity:0.1;
         margin-top: 400px;
	}
}
       .menu{
           text-align:center;
           width:190px;
           height:35px; 
           padding:18px 0 0 0; 
           float:left;
            font-family: Arial;
            color: #FFFFFF; 
           cursor: pointer;
           text-decoration: none;
           
       }
       
       .menu:hover{
          color: #5b90e6; 
           
       }
       
        .menu2{
          
            font-family: Arial;
            color: #FFFFFF; 
           cursor: pointer;
           text-decoration: none;
            font-size:20px;
           
       }
       
       .menu2:hover{
          color: #034ca5; 
           
       }


       .menu3{
           text-align:right;
           margin:45px 0 0 0; 
          
            font-family: Arial;
            color: #FFFFFF; 
           cursor: pointer;
           font-size:19px;
           text-decoration: none;
           
       }
       
#mob_menu{
    opacity: 0;
    width:150px;
    height:300px;
    background-image: url(img/fff.png);
    position:absolute;
    right:0px;
    z-index:99999999;
    top:0px;
    text-align:left;
    padding:40px 30px; 
    box-shadow:
               1px 1px 20px 4px #305B86;
    
}


  
       
       
       
       .cmn-toggle-switch {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 60px;
  height: 54px;
           border: 2px solid #042d5f;
           border-radius: 8px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
}

.cmn-toggle-switch:focus {
  outline: none;
}
  
       
       .cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 21px;
  left: 6px;
  right: 6px;
  height: 3px;
  background: white;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  content: "";
}

.cmn-toggle-switch span::before {
  top: -11px;
}

.cmn-toggle-switch span::after {
  bottom: -11px;
}
       
       
 .cmn-toggle-switch__htx {
  background-color: #5780C2;
}

.cmn-toggle-switch__htx span {
  -webkit-transition: background 0 0.3s;
          transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
          transition-delay: 0.3s, 0;
}

.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
  background-color: transparent;

    border:none;
}

.cmn-toggle-switch__htx.active span {
  background: none;
}

.cmn-toggle-switch__htx.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0, 0.3s;
          transition-delay: 0, 0.3s;
}