@font-face {
    font-family: 'Fixedsys Excelsior 3.01';
    src: url('fonts/FixedsysExcelsiorIIIb.eot');
    src: url('fonts/FixedsysExcelsiorIIIb.eot?#iefix') format('embedded-opentype'),
        url('fonts/FixedsysExcelsiorIIIb.woff2') format('woff2'),
        url('fonts/FixedsysExcelsiorIIIb.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    font-family: 'Fixedsys Excelsior 3.01';
}

body {
    margin: 0;
    padding: 0;
}

.parent {
display: grid;
height: 100%;
grid-template-columns: repeat(4, 1fr) 214px 214px;
grid-template-rows: 240px 220px 205px 226px;
}

.block1 {
grid-row: 1 / span 4;  
grid-column: 1;         
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr) 226px;
}

.block1_1 {  
    display: flex;
    justify-content: center;
    align-items: center;
background-color: #71B23C;
height: 240px;
}



.block1_2 {  
grid-row: 2 / span 2;  
grid-column: 1;        
background-color: #fff;
position: relative;
overflow: hidden;
}

.block1_green1 {
position: absolute;
top: -20px;
left: 30%;
animation: block1_green 2s linear infinite both;
}

.block1_green2 {
position: absolute;
top: -60px;
right: 10%;
animation: block1_green 2s linear infinite both;
}

.block1_yellow2 {
position: absolute;
bottom: -20px;
right: 30%;
animation: block1_yellow 2s linear infinite both;

}

.block1_yellow1 {
position: absolute;
bottom: -60px;
left: 10%;
animation: block1_yellow 2s linear infinite both;
}

.block1_3 {  
background-color: #F8EA1D;
 display: flex;
    justify-content: center;
    align-items: center;
}

.block1_3_round {
background-color: #71B23C;
border-radius: 50%;
overflow: hidden;
border: 8px solid #E9DD28;
text-align: center;
height: 148px;
width: 148px;
}

.block1_1_round {
background-color: #F8EA1D;
border-radius: 50%;
overflow: hidden;
border: 8px solid #6AA638;
text-align: center;
height: 148px;
width: 148px;
}


.block2,.block3, .block4{ 
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}

.block2_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
}


.block2_4 {
    background-color: #2F6336;
    position: relative;
}
.block2_2 {
    background-color: #E87713;
    position: relative;
}

.block3_2 {
    background-color: #A42E2E;
    position: relative;
}

.block3_4 {
    background-color: #000;
    position: relative;
}

.block4_2 {
    background-color: #E9DD28;
    position: relative;
}

.block4_4 {
    background-color: #1E1E1E;
    position: relative;
}

.block_text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: #f5f5f5;
text-shadow: 0px 0px 8.8px #FFFFFF;

}

.block2_4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}

.block2_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}

.block3_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}

.block3_4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}

.block4_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}

.block4_4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 10;
    position: relative;
}
.block2_4:hover img, .block2_2:hover img, .block3_2:hover img, .block3_4:hover img, .block4_2:hover img, .block4_4:hover img {
    animation: surprise 3s ease-in-out infinite;
}

.block3_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.block3_4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.block4_2 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.block4_4 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.block2_2, .block2_4, .block3_2, .block3_4, .block4_2, .block4_4 {
    overflow: hidden;
}





.block5 img {
width: 100%;
height: 100%;
object-fit: cover;
}



.block6 {
    background-color: #2F6336;
     background-image: url(images/carrots.gif);
background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.block7 { /*grid-area: 2 / 2 / 3 / 3;*/
background:#000;
position: relative;
overflow: hidden;
}

.block7_1 {
z-index: 2;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: flex-end;
}

.block7_img {
    position: absolute;
    left: -110%;
	top:93px;
	animation: block7_img 5s linear 5s infinite;
    z-index: 5;
}

.block7_circle {
    z-index: 3;
position: absolute;
height: 18PX;
width: 18px;
top: 102px;
left: 38%;
background-color: #FFF4A3;
animation: block7_circle 5s linear  infinite;
border-radius: 50%;
}



.block8 {
    background-color: #E87713;
    position: relative;
}
.block8 h2 {
font-family: 'Fixedsys Excelsior 3.01';
font-weight: 400;
font-size: 70px;
line-height: 60px;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 0px 0px 8.8px #FFFFFF;
}

.block8 div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.block8 .block8_text {z-index:10;     background-color: #E87713;  }
 

.block8 div:nth-child(2) {
animation-delay: 0s;
}
.block8 div:nth-child(3) {
animation-delay: 0.1s;
}
.block8 div:nth-child(4) {
animation-delay: 0.2s;
}
.block8 div:nth-child(5) {
animation-delay: 0.3s;
}
.block8 div:nth-child(6) {
animation-delay: 0.4s;
}
.block8 div:nth-child(7) {
animation-delay: 0.5s;
}
.block8 div:nth-child(8) {
animation-delay: 0.7s;
}
.block8 div:nth-child(9) {
animation-delay: 0.8s;
}
.block8 div:nth-child(10) {
animation-delay: 0.9s;
}


.fruit {
   animation: fruit 1s linear infinite;
 }
.block8:active .fruit{  animation-play-state: paused;}
.block8:active .block8_text {
 display: none;
}  
.block9 { 
    background-color: #1E1E1E;
text-align: center;
position: relative;
padding-top: 5px;
}




.block9_arrow {
    position: absolute;
    top: 12%;
    left: 49%;
    animation: block9_arrow 5s linear infinite;
    transform-origin: 50% 100%;
}

.block10 {
grid-row: 2 / span 2;  
grid-column: 5 / span 2;  
background-color: #f5f5f5;
_height: 428px;
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	box-sizing: border-box;
	    overflow: hidden;
}
.block10_im1 {
	position: absolute;
    left: -110%;
	top:0;
	animation: block10_im1 5s linear  infinite;
}
.block10_im2 {
	position: absolute;
	right: 0;
	top:-110%;
	 transform: rotate(180deg);
animation: block10_im2 5s linear 3s  infinite;
}
.block10_im3 {
	position: absolute;
	right: -110%;
	bottom:0;
	transform: rotate(180deg);
	animation: block10_im3 5s linear 7s infinite;
}
.block10_im4 {
	position: absolute;
	left: 0;
	bottom:-110%;
 animation: block10_im4 5s linear  11s infinite;
}
.block10_1 {
height: 320px;
width: 320px;
position: relative;
background:#1E1E1E;
}

.block10_1_wrap {
    background: url(images/pic_1.svg) no-repeat center bottom;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center; 
align-items: flex-end;
overflow: hidden;
align-content: center;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}

.block10_1 img {
 transform: translateY(100%);
}

.block10_1:hover img {
    animation: pic_2 2s linear infinite both;
animation-duration: 3s;
}



.block11 { grid-area: 3 / 2 / 5 / 5; 
background-color: #2F6336;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 226px;
}

.block11_1 {
    grid-row: 1;
grid-column: 1;  
    background: url(images/pic_40.svg) no-repeat 100%;
    background-size: 100% auto;
    position: relative;
    top: 20px;
}
.block11_4 {
    background: url(images/pic_29.svg) no-repeat 50% 60px;
    background-size: 100% auto;
position: relative;
}

.box {
    position: absolute;
    background: url(images/pic_23_logo.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 107px;
    bottom: 0;
    left: 0;
    z-index: 5;
}

.block11_3{
    background: #A42E2E;
    overflow: hidden;
}

.block11_3 h2 {
font-family: 'Fixedsys Excelsior 3.01';
font-weight: 400;
font-size: 50px;
line-height: 50px;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 0px 0px 26px rgba(255, 255, 255, 0.94);
white-space: nowrap;
display: inline-block;
margin: 5px;
}

.text1, .text3 {
    animation: runningline1 10s linear, marquee1 10s linear 10s infinite;
    display: flex;
}

.text2, .text4 {
    animation: runningline2 10s linear, marquee2 10s linear 10s infinite;
    display: flex;
    justify-content: flex-end;
}

.orange1, .orange2, .orange3 {
    position: absolute;
    top: 25px;
    z-index: 2;
    animation: orangeAnimation 8s linear infinite;
}

.orange1 {
    left: 0px;
    animation-delay: 0s;
}

.orange2 {
    left: -40px;
    animation-delay: -5s;
}

.orange3 {
    left: -60px;
    animation-delay: -3s;  
}


.block12 { grid-area: 4 / 5 / 5 / 7; 
background-color: #1E1E1E;
background-image: url(images/pic_17.svg);
background-repeat: no-repeat;
background-position: 50% 40%;
position: relative;
background-size: 100% auto;
}

.garland1 {
    position: absolute;
    top: 40%;
    left: 9%;
    z-index: 10;
}

.garland2 {
    position: absolute;
    top: 45%;
    left: 30%;
     z-index: 10;
}

.garland3 {
    position: absolute;
    top: 45%;
    left: 51%;
     z-index: 10;
}

.garland4 {
    position: absolute;
    top: 40%;
    left: 72%;
     z-index: 10;
}

.shade1 {
  position: absolute;
    top: 25%;
    left: 1%;
    z-index: 1;  
    animation: flicker 0.5s infinite;
}

.shade2 {
  position: absolute;
    top: 31%;
    left: 23%;
    z-index: 1; 
    animation: flicker 0.5s infinite linear 3s;
}

.shade3 {
  position: absolute;
    top: 31%;
    left: 45%;
    z-index: 1; 
    animation: flicker 0.5s infinite linear; 
}

.shade4 {
  position: absolute;
    top: 25%;
    left: 65%;
    z-index: 1;  
    animation: flicker 0.5s infinite linear 3s;
}

.orange_num {
background-color: #FFBA27;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Fixedsys Excelsior 3.01';
font-style: normal;
font-weight: 400;
font-size: 76px;
_line-height: 84px;
color: #FFFFFF;
text-shadow: 0px 0px 9.5px #FFFFFF;
}
 

.bubbles_wrap{position:relative;left:0;top:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none}

.x1{-webkit-animation:animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;left:2%;top:40%;color:#fff}
.x2{-webkit-animation:animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;left:5%;top:90%;color:#fff}
.x3{-webkit-animation:animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;left:10%;top:80%;color:#fff}
.x4{-webkit-animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;left:20%;top:5%;color:#ffffff}
.x5{-webkit-animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;left:30%;top:20%;color:#fff}
.x6{-webkit-animation:animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;left:50%;top:40%;color:#fff}
.x7{-webkit-animation:animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;left:65%;top:60%;color:#fff}
.x8{-webkit-animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;animation:animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;left:80%;top:3%;color:#fff}
.x9{-webkit-animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;animation:animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;left:90%;top:90%;color:#fff}
.x10{-webkit-animation:animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;animation:animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;left:95%;top:70%;color:#fff}
.bubble{height:15px;position:absolute;width: 15px;}