div.at-container{display:flex;align-items:center;justify-content:center;height:100%}.at-item{width:1296px;height:216px;background:url(../images/ava-r.jpg) no-repeat;animation-name:vibrate-fast;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:none}@keyframes vibrate-fast{0%{-webkit-transform:translate(0);transform:translate(0)} 10%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)} 20%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)} 30%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)} 40%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)} 50%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)} 60%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)} 70%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)} 80%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)} 90%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)} 100%{-webkit-transform:translate(0);transform:translate(0)}}
h2{
  font-family: “Courier”, monospace;
  text-align: center;
  color: #ffffff;
  font-size:300%;
}
p{
  font-family: “Courier”, monospace; 
  color: #ffffff; 
  position: absolute;
  float: right;
  

  
}
p1{
  animation:myanimation 8s infinite ;
  float:right;
  font-size:500%;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  font-family: “Courier”, monospace;
  color: #ffffff; 
  text-align: center;
}
p2{background-color: #ffffff;
}
p3{background-color: #ffffff;
}
a, a:visited { 
  color:red; text-decoration:none;
  
}
    
A IMG { 
  text-decoration:none;
  color:red;
  background-color: none;
  }


body{
 background: radial-gradient(circle, #9f0606, #000000, #e46719);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

.clip {
  background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
  background-size: 600vw 600vw;
  -webkit-animation: 'slide' 10s infinite linear forwards;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text; }

@keyframes myanimation {
    50% {transform:rotateY(180deg);}
    50% {transform:rotateY(180deg);}
}

@keyframes myanimation2 {
    50% {transform:rotateY(180deg);}
    5% {transform:rotateX(180deg);}
}

h3 {
    animation:myanimation 1.1s infinite ;
    float:right;
    font:10px;
  width: 1000px;
  position: absolute;
  left: 50%;
  margin-left: -500px;
}

h7 {
    animation:myanimation 10s infinite ;
    float:right;
    font:100px;
  width: 1000px;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  font-family: “Courier”, monospace;
  color: #ffffff; 
  text-align: center;
}

h5 {
    animation:myanimation2 2.5s infinite alternate linear;
    float:up;
  width: 1000px;
  position: absolute;
  left: 50%;
  margin-left: -500px;
}

h5l {
    animation:myanimation2 2.5s infinite alternate linear;
    float:up;
  font-size:200px;
  width: 1000px;
  position: absolute;
  text-align: center
  outer: before
  left: 50%;
  margin-left: -500px;
}


h4 {
  background: repeating-linear-gradient(-45deg, red 0%, yellow 7.14%, lime 14.28%, cyan 21.42%, cyan 28.56%, blue 35.7%, magenta 42.84%, red 50%);
  background-size: 600vw 600vw;
  -webkit-animation: 'slide' 10s infinite linear forwards;
  margin: 0 0 0 0;
  line-height: 1.15em;
  font-weight: bold; }
      font-size: 6em; } }
  @media (max-width: 640px) {
    h4 {
      font-size: 2em; } }
    
#colophon {
  color: #ccc; }
  @media (min-width: 640px) {
    #colophon {
      margin: 140px auto 0 auto; } }
  @media (max-width: 640px) {
    #colophon {
      margin: 30px auto 0 auto;
      width: 80vw; } }


@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
 
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
 
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}


.dsongentom{
  position: relative;
  top: 50%;  
  width: 30em;
  margin: 0 auto;
  border-right: 2px solid rgba(255,255,255);
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%); 
  color: #ffffff;  
}

.desetungavon{
  animation: typewriter 3s steps(44) 1s 1 normal both,
  blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24.77em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(255,255,255);}
  to{border-right-color: transparent;}
}

.top-menu li{
    list-style:none;/*Убираем маркер*/ 
    display:inline-block;/*Выстраиваем пункты в ряд*/
    background:#ccc;/*Цвет фона для пункта*/
    position:relative;
  font-family: “Courier”, monospace

}
.top-menu li:hover{
    background:#eee;/*Цвет фона при наведение на пункт*/

}
.top-menu li a{
    color:red; text-decoration:none;
  background-color: #ffffff;	
    padding:5px 7px;
    text-decoration:none;
    display:block;
  font-family: “Courier”, monospace
}
.top-menu li ul{
    display:none;/*Прячем выпадающее меню*/
    position:absolute;
    padding-left:0;
    width:120px;/*Ширина выпадающего меню*/
    padding-top:3px;/*Отступ сверху у выпадающего меню*/

}
.top-menu li:hover ul{
    display:block;/*Показываем выпадающее меню при наведение*/
    left:0px;

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes tada {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  } 
  
.cover{height:100%;width:100%;position:absolute;z-index:1}.blur-in{-webkit-animation:blur 2s forwards;-moz-animation:blur 2s forwards;-o-animation:blur 2s forwards;animation:blur 2s forwards}.blur-out{-webkit-animation:blur-out 2s forwards;-moz-animation:blur-out 2s forwards;-o-animation:blur-out 2s forwards;animation:blur-out 2s forwards}@-webkit-keyframes blur{0%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}100%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}}@-moz-keyframes blur{0%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}100%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}}@-o-keyframes blur{0%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}100%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}}@keyframes blur{0%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}100%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}}@-webkit-keyframes blur-out{0%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}}@-moz-keyframes blur-out{0%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}}@-o-keyframes blur-out{0%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}}@keyframes blur-out{0%{-webkit-filter:blur(4px);-moz-filter:blur(4px);-o-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px)}100%{-webkit-filter:blur(0px);-moz-filter:blur(0px);-o-filter:blur(0px);-ms-filter:blur(0px);filter:blur(0px)}}.content{width:650px;margin:0 auto;padding-top:100px}span{color:dimgray}.pop-up{position:fixed;margin:5% auto;left:0;right:0;z-index:2}.box{background-color:whitesmoke;text-align:center;margin-left:auto;margin-right:auto;margin-top:10%;position:relative;-webkit-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);box-shadow:0 4px 6px 0 rgba(0,0,0,0.1)}.button{margin 0 auto;background-color:#FF8566;margin-bottom:33px}.button:hover{background-color:#7CCF29;-webkit-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);box-shadow:0 4px 6px 0 rgba(0,0,0,0.1)}
.allah{background-color:whitesmoke;text-align:center;margin-left:auto;margin-right:auto;margin-top:10%;position:relative;-webkit-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px 0 rgba(0,0,0,0.1);box-shadow:0 4px 6px 0 rgba(0,0,0,0.1)}.pop-up2{position:fixed;margin:5% auto;left:0;right:0;z-index:2}.button2{margin 0 auto;background-color:#FF8567;margin-bottom:55px}