body {
    margin: 0;
}

.main{
    margin: 0;
    display: grid;
    grid-template-areas: 
    "block1"
    "block2"
    "block3"
    "block4"
    "block5";
    height: auto;

    grid-template-columns: 100%; 
    grid-template-rows: repeat(5, 100vh);
}
.block1, .block2, .block3, .block4, .block5{

}
.block1{
    display: grid;
    grid-area: block1;
    background-image: url(../materials/Webmaterial/top.png);
    height: 99vh;
    background-size: auto 115%;
    background-position-x: 30%;
    background-position-y: 60%;
    grid-template-areas: "block1_title block1_title"
 "block1_nav block1_man";
    grid-template-rows: 20% 90%;
    grid-template-columns: 50% 61.6%;
    border-bottom: 1vh solid rgb(255, 90, 17);
}

.block1_title {
    grid-area: block1_title;
    padding-top: 7%;
    left: -11%;
    position: relative;
    padding-left: 12%;
}

.fok {
    text-align: center;
    font-size: 30px;
    font-family: 'condensed_light';
    line-height: 0.8;
    letter-spacing: 0.1em;
    color: darkslategray;
}

.avtotor {
    text-align: center;
    font-size: 66px;
    color: #f5f5f5;
    /* text-align: center; */
    /* font-size: 30px; */
    font-family: 'condensed_light';
    line-height: 0.8;
    letter-spacing: 0.4em;
    /* color: darkslategray; */
    padding-left: 4%;
    font-weight: bold;
}

.block1_nav {
    grid-area: block1_nav;
    display: grid;
    grid-template-areas: "block1_nav_but1"
 "block1_nav_but2"
 "block1_nav_but3"
 "block1_nav_but4";
    grid-template-rows: repeat(4, 16%);
    padding: 60% 10%;
    text-align: center;
    color: white;
    grid-gap: 5%;
    font-size: 3.5vh;
    font-family: 'condensed_medium';
    letter-spacing: 0.1em;
}

.block1_nav_but1 {
    grid-area: block1_nav_but1;
    border-style: none;
    border-radius: 5vh;
    background-color: rgba(255,255,255,0.2);
    padding: 0.5em 0;
}

a, a:link, a:active, a:visited, a:hover, a:focus {
    text-decoration: none;
    cursor: pointer;
    color: white;
  }

.block1_nav_but2 {
    grid-area: block1_nav_but2;
    border-style: none;
    border-radius: 5vh;
    background-color: rgba(255,255,255,0.2);
    padding: 0.5em 0;
}

.block1_nav_but3 {
    grid-area: block1_nav_but3;
    border-style: none;
    border-radius: 5vh;
    background-color: rgba(255,255,255,0.2);
    padding: 0.5em 0;
}

.block1_nav_but4 {
    grid-area: block1_nav_but4;
    border-style: none;
    border-radius: 5vh;
    background-color: rgba(255,255,255,0.2);
    padding: 0.5em 0;
}

.block1_man {
    grid-area: block1_man;
    position: relative;
    background-image: url(../materials/Webmaterial/Спортсмен.png);
    background-size: 111% auto;
    background-repeat: no-repeat;
    background-position: 0% 67%;
    left: -19%;
    top: -11%;
}

/*------------------------------------------------------------*/
.block2{
    display: grid;
    grid-area: block2;
    grid-template-areas: 
    "block2_top"
    "block2_mid"
    "block2_bot";
    grid-template-rows: 30% 50% 20%;

}
.block2_top{
    display: grid;
    grid-template-areas:
    "block2_top_head"
    "block2_top_img";
    grid-template-rows: 40% 60%;
    grid-area: block2_top;
    background-image: url("../materials/Webmaterial/3.png");
    background-size: auto 100%;
}   
.block2_top_head {
    grid-area: block2_top_head;
    padding-left: 25%;
    padding-top: 14%;
    font-size: 4vh;
    color: white;
    font-family: condensed_medium;
    letter-spacing: 0.1em;
}
.block2_top_img {
    grid-area: block2_top_img;
    background-image: url(../materials/Webmaterial/31.png), url(../materials/Webmaterial/32.png);
    background-size: auto 90%, auto 100%;
    background-position: 35% 50%, -23% 4vh;
    background-repeat: no-repeat;
}
.block2_mid{
    display: grid;
    grid-template-areas:
    "block2_mid_top block2_mid_right"
    "block2_mid_bot block2_mid_right";
    grid-template-rows: 50% 50%;
    grid-template-columns: 45% 55%;
    grid-area: block2_mid;
    background-image: url("../materials/Webmaterial/2.png");
    background-size: auto 100%;
    background-position-x: 50%;
    border-bottom: 1vh solid rgb(255, 90, 17);
}
.block2_mid_top {
    grid-area: block2_mid_top;
    border: 0.3vh lightgray solid;
    font-family: condensed_light;
    font-size: 4vh;
    letter-spacing: 0.1em;
    text-align: center;
    color: #1b1b1b;
}
.block2_mid_bot {
    grid-area: block2_mid_bot;
    border: 0.3vh lightgray solid;
    background-image: url(../materials/Webmaterial/asset-1.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position-y: 80%;
    font-family: condensed_light;
    font-size: 4vh;
    letter-spacing: 0.1em;
    text-align: center;
    color: #1b1b1b;
}
.block2_mid_right {
    grid-area: block2_mid_right;
    position: relative;
    background-image: url(../materials/Webmaterial/Браслет.png);
    background-size: auto 38%;
    background-repeat: no-repeat;
    background-position: 136% 0.4%;
    height: 136%;
    top: -36%;
    padding-top: 123%;
    padding-left: 7%;
}
.sistema{
    font-family: condensed_light;
    font-size: 3vh;
    letter-spacing: 0.1em;
    text-align: left;
    line-height: 0.5;
    color: #1b1b1b;
}
.dig_dir {
    font-family: condensed_medium;
    font-size: 3vh;
    letter-spacing: 0.1em;
    text-align: left;
    color: #1b1b1b;
}
.block2_text {
    font-family: condensed_light;
    font-size: 3vh;
    text-align: left;
    line-height: 1;
    color: #1b1b1b;
}
.block2_bot{
    grid-area: block2_bot;
    background-color: white;
    background-size: 100% 100%;
    display: grid;
    grid-template-areas:
    "block2_bot_cam"
    "block2_bot_text";
    grid-template-rows: 50% 50%;
}
.block2_bot_cam {
    background-image: url(../materials/Webmaterial/1.png);
    background-size: auto 75%;
    background-repeat: no-repeat;
    background-position: 75% 0%;
    height: 160%;
    top: -60%;
    position: relative;
}
.block2_bot_text {
    text-align: center;
    font-family: condensed_medium;
    font-size: 3vh;
    letter-spacing: 0.1em;
    color: darkslategray;
}
/*------------------------------------------------------------*/
.block3{
    display: grid;
    grid-area: block3;
    grid-template-areas:
    "block3_top"
    "block3_mid"
    "block3_bot";
    grid-template-rows: 24% 38% 38%; 
    background-color: white;
    background-size: 100% 100%;
    height: 99vh;
    border-bottom: 1vh solid rgb(255, 90, 17);
}
.block3_top{
    grid-area: block3_top;
    display: grid;
    grid-template-areas:
    "block3_top_head"
    "block3_top_png";
    grid-template-rows: 50% 50%;
}
.block3_top_head {
    grid-area: block3_top_head;
    text-align: center;
    padding-top: 10%;
    text-align: center;
    font-family: condensed_medium;
    font-size: 5vh;
    letter-spacing: 0.1em;
    color: darkslategray;
}
.block3_top_png {
    grid-area: block3_top_png;
    background-image: url(../materials/Webmaterial/XMLID_47_.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 101% 0%;  
}
.block3_mid{
    grid-area: block3_mid;
    position: relative;
    background-image: url(../materials/Webmaterial/6.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 47% 0%;
    height: 117%;
    top: -17%;
}
.block3_bot{
    grid-area: block3_bot;
    display: grid;
    grid-template-areas: "block3_bot_png block3_bot_text";
    grid-template-columns: 43% 67%;
    background-image: url(../materials/Webmaterial/swim.png);
    background-size: auto 85%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
.block3_bot_png {
    grid-area: block3_bot_png;
    background-image: url(../materials/Webmaterial/333.png);
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: 69% 0%;
}
.block3_bot_text {
    grid-area: block3_bot_text;
    position: relative;
    left: -15%;
    text-align: right;
    padding-right: 10%;
    padding-top: 24%;
    font-family: condensed_medium;
    font-size: 3vh;
    letter-spacing: 0.1em;
    color: darkslategray;
}
/*------------------------------------------------------------*/
.block4{
    display: grid;
    grid-area: block4;
    grid-template-areas:
    "block4_head"
    "block4_back"
    "block4_album";
    grid-template-rows: 20% 80% 60%;
    background-color: white;
    background-size: 100% 100%;
}
.block4_head {
    grid-area: block4_head;
    padding-top: 10%;
    text-align: center;
    font-family: condensed_medium;
    font-size: 5vh;
    letter-spacing: 0.1em;
    color: darkslategray;
    line-height: 1;
}
.block4_back {
    grid-area: block4_back;
    background-image: url(../materials/Webmaterial/IPhone_XS_Max_Silver.png);
    background-size: auto 90%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
.block4_album {
    border-top: 1vh solid rgb(255, 90, 17);
    padding: 0% 0%;
    display: grid;
    grid-template-areas: "img1 img4"
 "img2 img4"
 "img3 img5";
    grid-template-rows: 25% 34% 41%;
    grid-area: block4_album;
    position: relative;
    top: -123%;
    z-index: 1;
}
.img1 {
    grid-area: img1;
    background-image: url(../materials/Webmaterial/Изображение-1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
.img2 {
    grid-area: img2;
    background-image: url(../materials/Webmaterial/Изображение-3.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
.img3 {
    grid-area: img3;
    background-image: url(../materials/Webmaterial/Изображение-2.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
.img4 {
    grid-area: img4;
    background-image: url(../materials/Webmaterial/Изображение-4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
.img5 {
    grid-area: img5;
    background-image: url(../materials/Webmaterial/Изображение-5.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
/*----------------------------------------------------------------*/
.block5{
    display: grid;
    height: 99vh;
    grid-area: block5;
    grid-template-areas:
    "block5_head"
    "block5_back"
    "block5_map";
    grid-template-rows: 10% 90% 50%;
    background-color: white;
    background-size: 100% 100%;   
    border-bottom: 1vh solid rgb(255, 90, 17);
}
.block5_head {
    grid-area: block5_head;
    padding-top: 5%;
    text-align: center;
    font-family: condensed_medium;
    font-size: 5vh;
    letter-spacing: 0.1em;
    color: darkslategray;
    line-height: 1;
}
.block5_back {
    grid-area: block5_back;
    background-image: url(../materials/Webmaterial/IPhone_XS_Max_Silver.png);
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    text-align: center;
    padding-top: 125%;
    color: lightgray;
    font-family: condensed_medium;
    font-size: 4vh;
    letter-spacing: 0.1em;
}
.block5_map {
    grid-area: block5_map;
    position: relative;
    top: -163%;
    padding: 0% 12%;
}

/*---------------------------------------------------*/

#toTop {
    position: fixed;
    bottom: 3%;
    right: 5%;
    cursor: pointer;
    display: none;
    font: 6vh "condensed_bold", sans-serif;
    /* letter-spacing: 10px; */
    /* line-height: 1.45; */
    color: lightgray;
    /* font-weight: 700; */
    text-align: center;
    width: 10%;
    height: 9%;
    border: 0.2vh solid;
    border-color: lightgray;
    border-radius: 20vw;
    background-color: rgb(95, 95, 95);
    z-index: 5;
    opacity: 0.75;
}

@font-face{
    font-family:"condensed_light";
    src: url("../font/Gill_Sans_Nova_Condensed_Light.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family:"condensed_medium";
    src: url("../font/Gill_Sans_Nova_Condensed_Medium.otf") format("opentype");
    font-style: normal;
    font-weight: normal;   
}
@font-face{
    font-family: "condensed_bold";
    src: url("../font/Gill_Sans_Nova_Condense_Bold.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "condensed_ultra";
    src: url("../font/Gill_Sans_Nova_Condensed_Ultralight.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "condensed_extra";
    src: url("../font/Gill_Sans_Nova_Condensed_Extrabold.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "taurus";
    src: url("../font/taurus_light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}