@font-face {
    font-family: GilL; /* Имя шрифта */
    src: url(../fonts/Gilroy-Light.otf); /* Путь к файлу со шрифтом */
} 
@font-face {
    font-family: GilB; /* Имя шрифта */
    src: url(../fonts/Gilroy-ExtraBold.otf); /* Путь к файлу со шрифтом */
} 
@font-face {
    font-family: GilH; /* Имя шрифта */
    src: url(../fonts/Gilroy-Heavy.ttf); /* Путь к файлу со шрифтом */
} 
body {
	font-family: GilB;
	margin: 0;
	padding: 0;
}

.block {
	height: 100vh;
    position: relative;
    overflow: hidden;
}
.block1 {
	background: url(../images/block1-bg.jpg);
    background-size: 100%;
}
.block1 .logo {
	display: block;
    margin: 120px auto 0;
    background: url(../images/logo-main.png);
    width: 70%;
    height: 70%;
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
}
.block1 .logo .img-logo {
    width: 100%;
}
.block1 .logo .par-logo {
	width: 40%;
    position: absolute;
    left: 0;
    top: -200px;
    right: 0;
    bottom: 105px;
    margin: auto;
    background: url(../images/par.png);
    background-size: contain;
    background-position: 0px 0px;
    opacity: 0.6;

    animation-duration: 160s;
    animation-iteration-count: infinite;
    animation-name: bounce-2;
    animation-timing-function: linear;
}

@keyframes bounce-2 {
    0%   { background-position: 0 0; }

    100% { background-position: 0 -5000px;}
}

.block1 .logo-round {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: bounce-1;
    animation-timing-function: linear;
}
@keyframes bounce-1 {
    0%   { transform: translateY(10px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(10px); }
}

.block1 .logo-round img {
	position: absolute;
}
.block1 .logo-round .img1 {
	top: 0%;
    left: 10%;
    width: 3%;
}
.block1 .logo-round .img2 {
    top: 18%;
    left: -11%;
    width: 10%;
}
.block1 .logo-round .img3 {
bottom: -2%;
    left: -8%;
    width: 9%;
}
.block1 .logo-round .img4 {
    top: 2%;
    right: 18%;
    width: 4%;
}
.block1 .logo-round .img5 {
    bottom: 16%;
    left: 29%;
    width: 8%;
}
.block1 .logo-round .img6 {
bottom: 3%;
    left: 48%;
    width: 14%;
}
.block1 .logo-round .img7 {
    top: -10%;
    right: 0%;
    width: 10%;
}
.block1 .logo-round .img8 {
    bottom: 50%;
    right: -12%;
    width: 16%;
}
.block1 .logo-round .img9 {
bottom: 0%;
    right: 0%;
    width: 35%;
}
.block1 .logo-round .img10 {
bottom: -12%;
    right: -8%;
    width: 7%;
}



.block2 {
	background: url(../images/block2-bg.jpg);
    background-size: 100%;
}
.block2 .ball-active {
    display: none;
}
.command-block {
    color: #fff;
}
.block2 .logo-small {
    position: absolute;
    background: url(../images/logo-main.png);
    width: 210px;
    height: 138px;
    background-size: contain;
    left: 50%;
    margin-left: -105px;
    margin-top: 40px;
}
.command-div {
	display: inline-block;
    width: 50%;
    vertical-align: top;
}
.left-command {

}
.right-command {
margin-left: -5px;
}
.left-command-title input,
.right-command-title input{
	margin: 30px 0 0 160px;
    background: none;
    border: none;
    font-size: 22px;
    text-transform: uppercase;
    font-family: GilB;
    color: #fff;
    outline: none !important;
}
.command-balls {
	color: #ffc300;
    display: block;
    font-size: 20px;
    margin: 10px 0 0 160px;
}
.command-balls:after {
	content: '';
    width: 14px;
    height: 19px;
    background: url(../images/fire-min.png);
    background-size: contain;
    display: inline-block;
}
.word-balls {
	font-family: GilL;
}

.pizza {
	position: relative;
}
.main-pizza {
	position: relative;
	margin: 50px 0 0;
}
.round-ing {
	position: absolute;
}
.img-ing img {
	position: absolute;
	width: 100%;
}
.img-ing {
    width: 70px;
    height: 70px;
    display: block;
    position: relative;
}
.ing-name {
font-size: 14px;
    font-family: GilB;
}
.ing-count {
display: block;
}


.ingr-1 {
    right: 50px;
    top: 0px;
}
.ingr-2 {
right: 100px;
    bottom: 10px;
}
.ingr-3 {
left: 30px;
    top: 100px;
}
.ingr-4 {
right: 40px;
    top: 206px;
}
.ingr-5 {
    left: 40px;
    top: 204px;
}
.ingr-6 {
    left: 90px;
    bottom: 35px;
}
.ingr-7 {
    left: 100px;
    top: 18px;
}
.ingr-8 {
    right: 0px;
    top: 90px;
}

.blank-pizza {
text-align: center;
    padding: 220px 0;
    position: relative;
}
.blank-pizza img {
	width: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.act-ing-img {
	display: block;
}
.noact-ing-img {
	display: none;
}

.blank-pizza .img1,
.blank-pizza .img2,
.blank-pizza .img3,
.blank-pizza .img4,
.blank-pizza .img5,
.blank-pizza .img6,
.blank-pizza .img7,
.blank-pizza .img8 {
	display: none;
}
.blank-pizza .img1.left-p-img-active,
.blank-pizza .img2.left-p-img-active,
.blank-pizza .img3.left-p-img-active,
.blank-pizza .img4.left-p-img-active,
.blank-pizza .img5.left-p-img-active,
.blank-pizza .img6.left-p-img-active,
.blank-pizza .img7.left-p-img-active,
.blank-pizza .img8.left-p-img-active {
	display: block;
}

.blank-pizza .img1.right-p-img-active,
.blank-pizza .img2.right-p-img-active,
.blank-pizza .img3.right-p-img-active,
.blank-pizza .img4.right-p-img-active,
.blank-pizza .img5.right-p-img-active,
.blank-pizza .img6.right-p-img-active,
.blank-pizza .img7.right-p-img-active,
.blank-pizza .img8.right-p-img-active {
	display: block;
}

.block3,
.block4,
.block5,
.block6 {
	background: url(../images/block-raund.jpg);
    background-size: 100%;
    color: #fff;
    text-align: center;
}
.img-raund {

}
.img-raund img {
    width: 20%;
    margin: 40px 0 20px;
}
.raund-name {
font-size: 30px;
    text-transform: uppercase;
}
.question {

}
.title-question {

}
.images-question {
margin: 20px 0;
}
.quest-img {
display: inline-block;
    width: 30%;
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: 10px;
}
.quest-img img {
position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
}
.question {
	display: none;
}
.question.q-active {
	display: block;
}

.time-count {
margin: 15px 0;
    font-size: 30px;
}
.timer .seconds {
background: #333;
    text-align: center;
    padding: 0 10px 0 14px;
    letter-spacing: 4px;
    display: inline-block;
    border-radius: 4px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #ffe88e;
}
.answer {
    font-size: 22px;
    margin: 10px;
    display: none;
    text-transform: uppercase;
}

.block-balls {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 30px;
    padding: 0 30px;
    box-sizing: border-box;
}
.block6 .left-command-balls {
    display: inline-block;
    width: 50%;
    text-align: left;
}
.block6 .right-command-balls {
display: inline-block;
    width: 50%;
    margin: 0 0 0 -5px;
    text-align: right;
}
.ball-active {
	width: 30px;
    height: 30px;
    display: inline-block;
    background: #fea71f;
    border-radius: 50%;
}

.noactive-block {
	display: none;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transform: scale(0.8) translateZ(0);
    transform: scale(0.8) translateZ(0);
}
.active-block {
	display: block;
	-webkit-transition: .6s ease-in-out .8s;
    transition: .6s ease-in-out .8s;
    padding: 0;
    opacity: 1;
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
}

.btn-game {
	background: #ff6012;
    border: 1px solid #fff;
    border-radius: 16px;
    box-shadow: 0 -4px 0 3px #e45e1c inset, 0 5px 5px rgba(0, 0, 0, 0.16), 0 8px #ffffff61 inset;
    cursor: pointer;
    display: none;
    padding: 10px 30px 15px;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    text-decoration: none !important;
}

.btn-game.show {
    display: table; 
}

audio {
    display: none;
}