* { margin: 0; padding: 0; box-sizing: border-box; }
img {
    height: 100%;
}
.border {
    border: 1px solid #000;    
}

.grid {
    display: grid;
    grid-template-rows: 120px 500px minmax(300px, auto) 800px minmax(400px, auto) minmax(600px, auto);
    overflow: hidden;
}
.grid .header {
    background: #111;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 130px auto;
    z-index: 20;
}
.grid .header .logo {
    height: 120px;
    transform: translateX(-8cm) rotate(-360deg);
    animation: noTransform 1s 1.5s forwards;
}
@keyframes noTransform {
    to { transform: none; }
}
.grid .header nav {
    display: grid;
    grid-template-columns: repeat(5, auto);
    align-items: center;
    justify-content: space-evenly;
}
.grid .header nav a {
    color: #fff;
    font: bold 22px sans-serif;
    text-decoration: none;
    position: relative;
    top: -100%;
    animation: navLink 1s calc(var(--i) * .8s) forwards;
}
@keyframes navLink {
    to { top: 0; }
}
.grid .header nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #0f0;
    transition: .4s;
    transform: scaleX(0);
}
.grid .header nav a:hover::after {
    transform: none;
}
.grid .slider {
    overflow: hidden;
    position: relative;
    top: -150%;
    transition: 1s;
    animation: slide 2s forwards;
}
@keyframes slide {
    to { top: 0; }
}
.grid .slider .big {
    display: grid;
    grid-template-columns: repeat(5, 100%);
    grid-template-rows: 32rem;
    position: relative;
    left: 0;
    transition: 1s;
}
.grid .slider .big .item {
    height: 100%;
    overflow: hidden;
}
.grid .slider .big .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: sliderImg 8s infinite;
}
@keyframes sliderImg {
    50% { transform: scale(1.2); }
}
.grid .slider input {
    position: absolute;
    bottom: -10%;
    left: 50%;
    z-index: 10;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    cursor: pointer;
    transition: .5s;
    transform: translateX(calc(var(--i) * 50px));
    animation: inp 1s calc(var(--t) * .8s) forwards;
}
@keyframes inp {
    to { bottom: 3%; }
}
.grid .slider input:checked {
    background: #00b71c;
    box-shadow: inset 0 0 6px #000, 0 0 5px #fff, 0 3px 15px #fff;
    border-radius: 50% 0;
}
.grid .slider input:nth-child(2):checked ~ .big {
    left: -100%;
}
.grid .slider input:nth-child(3):checked ~ .big {
    left: -200%;
}
.grid .slider input:nth-child(4):checked ~ .big {
    left: -300%;
}
.grid .slider input:nth-child(5):checked ~ .big {
    left: -400%;
}
.grid .slider h1 {
    position: absolute;
    left: 0;
    top: 250px;
    color: #fff;
    z-index: 10;
    font: bold 5rem sans-serif;
    width: 100%;
    text-align: center;
    text-shadow: 0 5px 2px #000, -3px 8px 10px #fff, 0 -4px 3px #f00;
    animation: title 1.5s .5s forwards;
}
@keyframes title {
    to { top: 100px; }
}
.grid .content {
    padding: 5%;
    background: #111;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    grid-row-gap: 200px;
}
.grid .content .blockItem {
    perspective: 850px;
}
.grid .content .item {
    width: 400px;
    border: 2px solid #000;
    position: relative;
    background: #fff;
    padding: 5px 0;
    text-align: center;
    overflow: hidden;
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, transparent, #0009);
    transition: 1s;
}
.grid .content .item:hover {
    animation: hover 1s linear forwards;
}
@keyframes hover {
    30% { transform: rotateY(-10deg) translateZ(100px); }
    60% { transform: rotateY(10deg) translateZ(200px); }
    100% { transform: rotateY(0) translateZ(100px); }
}
.grid .content .item .itemImg {
    height: 300px;
    overflow: hidden;
    transition: .3s;
}
.grid .content .item .itemImg .slide {
    width: 400%;
    height: 100%;
    display: flex;
    position: relative;
    left: 0;
    transition: .8s;
}
.grid .content .item .itemImg .slide .list {
    width: 100%;
    height: 100%;
}
.grid .content .item .itemImg .slide .list img {
    width: 100%;
    height: 80%;
    object-fit: contain;
}
.grid .content .item input {
    position: absolute;
    left: 50%;
    top: 280px;
    transform: translateX(calc(var(--i) * 30px));
    appearance: none;
    width: 30px;
    height: 7px;
    background: #222;
    transition: .4s;
    cursor: pointer;
    transform-origin: bottom;
    z-index: 10;
}
.grid .content .item input:checked {
    background: #fa0;
    transform: translateX(calc(var(--i) * 30px)) scaleY(1.8);
    border-radius: 8px 8px 0 0;
}
.grid .content .item input:nth-child(2):checked ~ .itemImg .slide {
    left: -100%;
}
.grid .content .item input:nth-child(3):checked ~ .itemImg .slide {
    left: -200%;
}
.grid .content .item input:nth-child(4):checked ~ .itemImg .slide {
    left: -300%;
}
.grid .content .item h2 {
    font: bold 2rem cursive;
    text-shadow: 0 3px 2px #fff, -2px 7px 5px #ff3b3b;
    margin-top: 10px;
    transition: .4s;
}
.grid .content .item p {
    font: bold 30px fantasy;
    text-shadow: 0 3px 2px #fff, -2px 7px 5px #000;
    margin: 10px 0;
    transition: .6s;
}
.grid .content .item a {
    display: inline-block;
    margin: 15px 0;
    font: bold 25px cursive;
    background: #080;
    color: #fff;
    padding: 8px 25px 12px;
    text-decoration: none;
    border-radius: 25px;
    box-shadow: 0 5px 2px #000;
    transition: .5s;
}
.grid .content .item a:hover {
    background: #222;
}
.grid .content .item:hover .itemImg {
    transform: translateY(-3px);
}
.grid .content .item:hover h2 {
    transform: rotate(360deg) translateY(-3px);
}
.grid .content .item:hover input {
    top: 275px;
}
.grid .content .item:hover p {
    transform: translateY(-3px);
    letter-spacing: 15px;
}
.grid .content .item:hover a {
    transform: rotate(-360deg) translateY(-3px);
}
.grid .content .item span {
    --deg: 90deg;
    position: absolute;
    width: 100%;
    height: 6px;
    background: linear-gradient(var(--deg), transparent, #ff34ff);
}
.grid .content .item span:nth-of-type(1) {
    top: 0;
    left: -100%;
    --to: 100%;
    animation: border 2s linear infinite;
}
.grid .content .item span:nth-of-type(2) {
    --deg: -90deg;
    bottom: 0;
    left: 100%;
    --to: -100%;
    animation: border 2s linear infinite;
}
.grid .content .item span:nth-of-type(3) {
    --deg: 0;
    top: 100%;
    left: 0;
    width: 6px;
    height: 100%;
    --to: -100%;
    animation: border2 2s linear 1s infinite;
}
.grid .content .item span:nth-of-type(4) {
    --deg: 180deg;
    top: -100%;
    right: 0;
    width: 6px;
    height: 100%;
    --to: 100%;
    animation: border2 2s linear 1s infinite;
}
@keyframes border {
    to { left: var(--to); }
}
@keyframes border2 {
    to { top: var(--to); }
}
.grid .miniSlider {
    background: url(img/1.jpg) no-repeat center / cover;
    z-index: 1;
    animation: miniSlider 8s infinite;
}
@keyframes miniSlider {
    20% {
        background-image: url(img/2.jpg);
    }
    40% {
        background-image: url(img/3.webp);
    }
    60% {
        background-image: url(img/4.jpg);
    }
    80% {
        background-image: url(img/5.jpg);
    }
}
.grid .info .pic {
    height: 70vh;
    background: url(https://pandokyerevan.com/application/themes/frontend/default/img_corp/paronyan2.jpg) center / 100% fixed;
    animation: filter 20s infinite;
}
.grid .info .pic:nth-child(2) {
    background-image: url(https://pandokyerevan.com/application/themes/frontend/default/img_corp/khorenatsi5.jpg);
}
.grid .info .pic:nth-child(3) {
    background-image: url(https://images.ctfassets.net/3s5io6mnxfqz/3EuHWu82P4XceecziHui2N/d84ecafc41e610945edba1eb7b043ef7/AdobeStock_270448728.jpeg);
}
.grid .info .pic:nth-child(4) {
    background-image: url(https://images.unsplash.com/photo-1572698956650-e93c619c0451?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80);
}
@keyframes filter {
    50% {
        background-position-y: -150rem;
    }
}    
.grid .info .shape {
    padding: 0 25px;
    background: #111;
    color: #fff;
}
.grid .info .shape img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    object-fit: cover;
    float: left;
    shape-outside: circle(50%);
    margin-right: 25px;
    box-shadow: 0 0 15px #fff;
}
.grid .info .shape p {
    font: 18px/1.5 cursive;
    word-break: break-all;
    text-align: justify;
    position: relative;
    z-index: 1;
}
.grid .info .shape:nth-last-child(1) img {
    float: right;
    margin-right: 0;
    margin-left: 30px;
    shape-outside: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
    clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
    box-shadow: none;
    animation: shape 5s infinite;
    z-index: 2;
}
.grid .info .shape:nth-last-child(2) {
    padding-top: 25px;
}
.grid .info .shape:nth-last-child(1) {
    padding-bottom: 40px;
}
@keyframes shape {
    50% {
        clip-path: polygon(0 0, 60% 0, 100% 0, 100% 100%, 62% 100%, 0 100%, 0% 50%);
        border-radius: 0;
    }
}
.grid .footer {
    background: linear-gradient(to top, #1d1d1d 89%, #111);
    padding-top: 15rem;
}
.grid .footer .wave {
    --wavy: -100vw;
    height: 200px;
    background: url(img/wave.svg) repeat-x 0 50% / cover;
    animation: wave 5s linear infinite;
    position: relative;
}
.grid .footer .wave::before {
    --wavy: 100vw;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/wave.svg) repeat-x 0 50% / cover;
    opacity: .7;
    animation: wave 4s linear infinite;
}
.grid .footer .wave::after {
    --wavy: 100vw;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/wave.svg) repeat-x 0 50% / cover;
    opacity: .3;
    animation: wave 6s linear infinite;
}
@keyframes wave {
    to {
        background-position-x: var(--wavy);
    }
    50% {
        transform: scaleY(1.3);
        background-position-y: 30%;
        transform-origin: bottom;
    }
}
.grid .footer .body {
    height: 100%;
    background: #393939FF;
    position: relative;
}
.grid .footer .body .sponsor {
    text-align: center;
}
.grid .footer .body .sponsor img {
    height: 150px;
    width: 200px;
    object-fit: contain;
    margin: 0 2%;
    transition: .4s;
}
.grid .footer .body .sponsor a:nth-child(4) img {
    width: 150px;
    border-radius: 15px;
}
.grid .footer .body .sponsor img:hover {
    filter: drop-shadow(0 12px 3px #0009);
}
.grid .footer .body p {
    text-align: center;
    color: #6c6c6c;
    font: 18px cursive;
    margin: 8rem 0 1rem;
}