﻿@font-face {
    font-family: 'Geometria';
    src: url('../fonts/GEOMETRIA.OTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Geometria';
    src: url('../fonts/GEOMETRIA-BOLD.OTF');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'IMPACT';
    src: url('../fonts/IMPACT.TTF');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-size: 16px;
    font-family: 'Geometria', sans-serif;
    color: #333;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

.layout {
    width: 1170px;
    position: relative;
    margin: auto;
}

.bold {
    font-weight: bold;
}

a {
    color: #000;
}


/*HEader*/

#header {
    background-image: url("/img/back1.1.png");
    height: 760px;
    min-width: 1170px;
}

#logo {
    left: 25px;
    position: absolute;
    top: 30px;
}

#title {
    left: 165px;
    top: 10px;
    position: absolute;
    width: 652px;
    z-index: 1;
}

#title>h1 {
    color: #fff;
    font-size: 30.5px;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: normal;
}

.yellow {
    color: #f9e900;
}

.parall {
    background-image: url("/img/parall.png");
    background-repeat: no-repeat;
    height: 48px;
    left: -13px;
    position: absolute;
    top: 20px;
    width: 170px;
    z-index: -1;
}

#youtube {
    background-color: #000;
    border: 6px solid #f9e900;
    height: 243px;
    left: 170px;
    position: absolute;
    top: 200px;
    width: 443px;
}

#box {
    position: absolute;
    right: 8px;
    top: 33px;
}

#stupor {
    left: 19px;
    position: absolute;
    top: 488px;
}

#button {
    background-image: url("/img/button.png");
    height: 182px;
    position: absolute;
    right: 0;
    top: 662px;
    width: 445px;
}

.term {
    font-size: 23px;
    font-weight: bold;
    left: 170px;
    position: absolute;
    width: 244px;
}

.price {
    font-size: 40px;
}


/*block 2*/

#hellow {
    background-image: url("/img/back2.png");
    background-position: center;
    height: 1055px;
    min-width: 1170px;
}

.text {
    font-size: 18px;
    line-height: 1.3;
    margin: auto;
    position: absolute;
    text-align: center;
    top: 38px;
    width: 100%;
}

.red {
    color: #ed1c24;
}

.hey {
    font-size: 29px;
}

.znak {
    color: #f9bf01;
    font-size: 65px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 218px;
    width: 100%;
}

.text-bottom {
    font-size: 18px;
    position: absolute;
    text-align: center;
    top: 304px;
    width: 100%;
}

.video {
    color: #fff;
    font-size: 23px;
    position: absolute;
    text-align: center;
    top: 495px;
    width: 100%;
}

.best {
    color: #f9e900;
    font-size: 35px;
    line-height: 1.1;
}

.video-list {
    color: #fff;
    font-size: 22px;
    left: 50px;
    line-height: 1.1;
    position: absolute;
    top: 649px;
    width: 785px;
}

.video-list img {
    float: left;
    margin-right: 12px;
}

.box-small {
    position: absolute;
    right: 48px;
    top: 630px;
}


/*block 3*/

.age {
    height: 234px;
    min-width: 1170px;
}

.photo1 {
    left: 20px;
    position: absolute;
    top: 60px;
}

.text2 {
    font-size: 18px;
    position: absolute;
    right: 223px;
    text-align: center;
    top: 32px;
}

.photo2 {
    position: absolute;
    right: 11px;
    top: 60px;
}

.time-cource {
    bottom: -91px;
    left: -7px;
    position: absolute;
}

.time-blue {
    color: #fff;
    font-size: 15px;
    position: absolute;
    right: 46px;
    text-align: left;
    top: 9px;
}

.time-yellow {
    font-size: 17px;
    position: absolute;
    right: 12px;
    top: 47px;
}

.author-cource {
    position: absolute;
    right: 242px;
    top: 165px;
}

.author-blue {
    color: #fff;
    font-size: 15px;
    left: 28px;
    position: absolute;
    text-align: left;
    top: 10px;
}

.author-yellow {
    font-size: 17px;
    position: absolute;
    right: 25px;
    text-align: left;
    top: 28px;
}

.qua-cource {
    bottom: -90px;
    position: absolute;
    right: 11px;
}

.qua-blue {
    color: #fff;
    font-size: 15px;
    left: 24px;
    position: absolute;
    text-align: left;
    top: 10px;
}

.qua-yellow {
    font-size: 17px;
    position: absolute;
    right: 34px;
    top: 49px;
}


/*block 4*/

.summary {
    background-image: url("/img/back3.png");
    background-position: center center;
    height: 714px;
    min-width: 1170px;
}

.summary-list {
    font-weight: bold;
    left: 213px;
    position: absolute;
    top: 168px;
}

.arrows {
    background-image: url("/img/arrow-blue.png");
    color: #fff;
    display: inline-block;
    margin-bottom: 15px;
    margin-right: 8px;
    text-align: center;
    width: 27px;
}

.summary h2 {
    font-size: 36px;
    position: relative;
    text-align: center;
    top: 52px;
}


/*block 4*/

.sale {
    background-image: url("/img/back5.png");
    background-position: center center;
    height: 701px;
    min-width: 1170px;
}

.stupor2 {
    left: 19px;
    position: absolute;
    top: 53px;
}

.sale-text {
    left: 264px;
    position: absolute;
    top: 45px;
}

.skidka {
    color: #ed1c24;
    font-family: impact;
    font-size: 37px;
    font-weight: bold;
    left: 261px;
    position: absolute;
    text-shadow: 3px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, -2px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    text-transform: uppercase;
    top: 46px;
}

.first {
    color: #fff;
    font-size: 29px;
    font-weight: bold;
    left: 266px;
    position: absolute;
    top: 151px;
}

.first>span {
    color: #f9e900;
    text-transform: uppercase;
}

.price2 {
    background-image: url("/img/yellow-parall.png");
    font-size: 53px;
    font-weight: bold;
    height: 84px;
    left: 236px;
    line-height: 1.4;
    position: absolute;
    text-align: center;
    top: 219px;
    width: 240px;
}

.price2>span {
    font-size: 24px;
    vertical-align: middle;
}

.qua-sale {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    left: 492px;
    position: absolute;
    text-transform: uppercase;
    top: 232px;
}

.qua-sale>span {
    text-decoration: line-through;
    text-transform: none;
}

.timer {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    right: 35px;
    text-transform: uppercase;
    top: 150px;
}

.count {
    margin-top: 12px;
}

#button-bottom {
    background-image: url("/img/button.png");
    height: 182px;
    position: absolute;
    right: 361px;
    top: 357px;
    width: 445px;
}

.term-bottom {
    font-size: 23px;
    font-weight: bold;
    left: 170px;
    position: absolute;
    width: 244px;
}

.fast {
    bottom: -647px;
    font-size: 29px;
    font-weight: bold;
    left: 200px;
    line-height: 1.6;
    position: absolute;
    text-transform: uppercase;
}


/*footer*/

.footer {
    background-image: url("/img/back6.png");
    background-position: center center;
    height: 589px;
    min-width: 1170px;
}

.center {
    width: 610px;
    margin: auto;
}

.vk-group {
    position: relative;
    top: 75px;
}

.vk {
    color: #fff;
    font-size: 21px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: 63px;
}

.logo2 {
    position: relative;
    top: 122px;
}

.link {
    width: 330px;
    color: #fff;
    position: relative;
    right: -295px;
    text-decoration: underline;
    text-transform: uppercase;
    top: -30px;
}

.link a {
    color: #fff;
}

.soc {
    width: 200px;
    position: relative;
    left: 295px;
    top: -15px;
}

.soc>img {
    margin-right: 7px;
}

@keyframes bounce {
    0%,
    20%,
    60%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

#button:hover {
    animation: bounce 1s;
}

#button-bottom:hover {
    animation: bounce 1s;
}