﻿body {
    background-image: url('../Материалы FOK/Фон/Full.png');
    background-position: center top;
    margin: 0;
    height: auto;
    display: grid;
    grid-template-areas:
    "nav"
    "main";
    grid-template-rows: 170px 1fr;
    grid-template-columns: 1fr;
    min-width: 1510px;
}

.main {
    margin: 0;
    display: grid;
    grid-template-areas:
    "header"
    "content"
    "footer";
    grid-template-rows: 1990px 2160px 1080px;
    grid-template-columns: 1fr;

}

.navigation, .footer, .header, .content {
    text-align: center;
}

a, a:link, a:active, a:visited, a:hover, a:focus {
  text-decoration: none;
  cursor: pointer;
  color: rgb(78, 78, 78);
}

#nav {
    display: grid;
    grid-area: nav;
    grid-template-areas: "nav1 nav2 nav3 nav4";
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 10%;
    padding: 60px 15% 0% 15%;
    font: 25px "Gill Sans Nova", sans-serif;
    font-weight: bold;
    color: rgb(78, 78, 78);
}

.nav_button1{
    grid-area: nav1;
}
.nav_button1:hover{
    text-shadow: 4px -4px 7px rgba(150, 150, 150, 0.4);
}

.nav_button2{
    grid-area: nav2;
}
.nav_button2:hover{
    text-shadow: 4px -4px 7px rgba(150, 150, 150, 0.4);
}

.nav_button3{
    grid-area: nav3;
}
.nav_button3:hover{
    text-shadow: 4px -4px 7px rgba(150, 150, 150, 0.4);
}

.nav_button4{
    grid-area: nav4;
    color: rgb(255, 90, 17);
}
.nav_button4:hover{
    text-shadow: 4px -4px 7px rgba(255, 90, 17, 0.3);
}


#main {
    grid-area: main;
}


/*Header*/
/*------------------------------------------------------------*/
#header {
    margin: 0;
    grid-area: header;
    display: grid;
    grid-template-areas: 
    "header_content1"
    "header_content2"
    "header_content3";
    grid-template-rows: 910px 415px 665px;
}
#header_content1{
    background-image: url('../Материалы FOK/Фон/контент1.png');
    background-position: center top;
    background-repeat: cover;
    grid-area: header_content1;
    display: grid;
    grid-template-areas: "header_content1_block1 header_content1_block2 header_content1_block3";
    grid-template-columns: 50% 80% 50%;
    grid-template-rows: 1fr;
}

.header_content1_block1 {
    position: relative;
    padding-top: 550px;
    padding-right: 120px;
    text-align: right;
    font: 20px "condensed_light", sans-serif;
    letter-spacing: 0.1em;
    color: lightgray;
    line-height: 1;
    z-index: 2;
}

.header_content1_block2 {
    background-image: url('../Материалы FOK/PNG/АВТОТОР.png') ,url('../Материалы FOK/PNG/Спортсмен.png');
    background-position: 50% 26%, center;
    background-size: 700px, 430px;
    background-repeat: no-repeat, no-repeat;
    position: relative;
    display: grid;
    grid-template-areas:
    "header_content1_block2_title"
    "header_content1_block2_place";
    grid-template-rows: 20% 80%;
    left: -50%;
    top: -3%;
    height: 590px;
    z-index: 1;
    font: 40px "condensed_light", sans-serif;
    letter-spacing: 0.3em;
    font-weight: bold;
    color: lightgray;
    padding-top: 340px;
}

.header_content1_block2_title {
    z-index: 2;
    font: 40px "condensed_light", sans-serif;
    letter-spacing: 0.3em;
    font-weight: bold;
    color: lightgray;
}

.header_content1_block2_place {
    display: none;
}

.header_content1_block3 {
    position: relative;
    left: -160%;
    padding-top: 480px;
    padding-left: 200px;
    text-align: left;
    font: 20px "condensed_light", sans-serif;
    letter-spacing: 0.2em;
    color: lightgray;
    line-height: 2;
    z-index: 2;
}

#header_content2{
    grid-area: header_content2;
    display: grid;
    margin: 0;
    grid-template-areas:
    "header_content2_block1 header_content2_block2 header_content2_block3 bracer_png";
    grid-template-columns: 22.85% 22.85% 54.2% 24%;
    grid-template-rows: 1fr;
}
.header_content2_block1{
    background-color:  rgba(62, 63, 62, 0.7);
    grid-area: header_content2_block1;
    padding-top: 100px;
    padding-right: 85px;
    text-align: right;
    font: 20px "condensed_light", sans-serif;
    letter-spacing: 0.1em;
    color: lightgray;
    line-height: 1;
}
.header_content2_block2{
    background: none;
    grid-area: header_content2_block2;
    border: 2px solid lightgray;
}
.header_content2_block3{
    background-color:  rgba(62, 63, 62, 0.7);
    grid-area: header_content2_block3;
    padding-top: 100px;
    padding-left: 85px;
    text-align: left;
    font: 20px "condensed_light", sans-serif;
    letter-spacing: 0.1em;
    color: lightgray;
    line-height: 1;
}
.header_content2_lock3_text{
    margin-left: 1px;
}

.header_content2_block_head {
    line-height: 2;
    font-size: 50px;
}

span {
    color: rgb(255, 90, 17);
}

.bracer_png {
    grid-area: bracer_png;
    position: relative;
    left: -100%;
    top: -70%;
    height: 172%;
    background-image: url("../Материалы FOK/PNG/Браслет.png");
    background-position: 5% center;
    background-size: 380px;
    background-repeat: no-repeat;
    font: 24px "condensed_medium", sans-serif;
    letter-spacing: 0.1em;
    padding-left: 106px;
    text-align: left;
    padding-top: 58px;
    color: black;
    line-height: 1;
}


#header_content3{
    grid-area: header_content3;
    display: grid;
    grid-template-areas: 
    "header_content3_psevdo1 header_content3_block1 header_content3_block2 header_content3_block3 header_content3_psevdo2"
    "header_content3_psevdo3 header_content3_text1 header_content3_text2 header_content3_text3 header_content3_psevdo4";
    grid-template-columns:  1fr 300px 211px 300px 1fr;
    grid-template-rows: 211px 50px;
    grid-column-gap: 30px;
    grid-row-gap: 25px;
    padding-top: 200px;
}

.header_content3_block1{ 
    grid-area: header_content3_block1;
    background-image: url("../Материалы FOK/PNG/3.png") ,url("../Материалы FOK/PNG/Прямоугольник.png");
    background-position: 0% 45%, right;
    background-size: 300px, 211px;
    background-repeat: no-repeat, no-repeat;
}

.header_content3_block2{
    grid-area: header_content3_block2;
    background-image: url("../Материалы FOK/PNG/1.png") ,url("../Материалы FOK/PNG/Прямоугольник.png");
    background-position: 50% 35%, center;
    background-size: 155px, 211px;
    background-repeat: no-repeat, no-repeat;
}
.header_content3_block3{
    grid-area: header_content3_block3;
    background-image: url("../Материалы FOK/PNG/2.png") ,url("../Материалы FOK/PNG/Прямоугольник.png");
    background-position: 0% 45%, left;
    background-size: 300px, 211px;
    background-repeat: no-repeat, no-repeat;
}
.header_content3_text1,.header_content3_text2,.header_content3_text3{
    text-align: right;
    font-family: "condensed_medium";
    letter-spacing: 3px;
    font-size: 21px;
}
.header_content3_text3{
    padding-right: 97px;
}
.header_content3_text2{
    padding-right: 15px;
}
.header_content3_text1{
    padding-right: 27px;

}
/*------------------------------------------------------------*/



#content {
    grid-area: content;
    display: grid;
    grid-template-areas:
    "content_mobile"
    "content_album";
    grid-template-rows: 1080px 1080px;
}

.content_mobile {
    grid-area: content_mobile; 
    display: grid;

}
.content_mobile_background_container{
    display: grid;
    grid-template-areas:
    "content_mobile_block1 content_mobile_block1"
    "content_mobile_block2 content_mobile_block3";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-image: url("../Материалы FOK/PNG/6.png");
    background-position: 50% 90%;
    background-size: 1400px;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}
.content_mobile_block1{
    grid-area: content_mobile_block1;
    font-family: "condensed_bold";
    color: white;
    font-size: 70px;
    letter-spacing: 13px;
    padding-top: 329px;
    padding-right: 248px;
}
.content_mobile_block2{
    grid-area: content_mobile_block2;
    padding-top: 259px;
    padding-right: 291px;
    letter-spacing: 5px;
    font: 33px "condensed_bold";
    color: lightgrey;
    text-align: right;
}
.content_mobile_block3{
    padding: 212px 43% 0px 155px;
    grid-area: content_mobile_block3;
    font: 20px "condensed_light", sans-serif;
    letter-spacing: 0.1em;
    color: lightgray;
    line-height: 1;
    text-align: right;
}

.content_mobile_block3_head {
    font: 50px "condensed_light", sans-serif;
    letter-spacing: 0.1em;
    color: lightgray;
    text-align: right;
    line-height: 3;
}

.content_album {
    grid-area: content_album;
    display: grid;
    grid-template-areas: 
    "content_album_head"
    "content_album_photos";
    grid-template-rows: 180px 900px; 
}

.content_album_head {
    grid-area: content_album_head;
    padding-top: 70px;
    padding-left: 330px;
    line-height: 2;
    font: 50px "condensed_bold", sans-serif;
    text-align: left;
    color: rgb(95, 95, 95);
}

.content_album_photos {
    grid-area: content_album_photos;
    display: grid;
    grid-template-areas: 
    "photo1 photo2 photo3"
    "photo4 photo5 photo6";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3px; 
}

.content_album_photo1 {
    grid-area: photo1;
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-1.png");
    background-size: auto 100%;
    background-position: center center;
    background-repeat: cover;
}

.content_album_photo2 {
    grid-area: photo2;  
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-2.png");
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: cover;  
}

.content_album_photo3 {
    grid-area: photo3; 
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-3.png");
    background-size: auto 100%;
    background-position: center center;
    background-repeat: cover;
}

.content_album_photo4 {
    grid-area: photo4; 
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-4.png");
    background-size: 100% auto;
    background-position: center center;
    background-repeat: cover;
}

.content_album_photo5 {
    grid-area: photo5; 
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-5.png");
    background-size: auto 100%;
    background-position: center center;
    background-repeat: cover;
}

.content_album_photo6 {
    grid-area: photo6;
    background-image: url("../Материалы FOK/JPG/Изображения/Изображение-6.png");
    background-size: auto 100%;
    background-position: center center;
    background-repeat: cover; 
}

#footer {
    grid-area: footer;
    display: grid;
    grid-template-areas:
    "footer_contacts"
    "footer_map";
    grid-template-rows: 180px 900px;
}

.footer_contacts {
    grid-area: footer_contacts;
    display: grid;
    grid-template-areas: "footer_contacts_header footer_contacts_text";
    grid-template-columns: 50% 50%;
    padding: 93px 20% 0% 20%;
}

.footer_contacts_header {
    grid-area: footer_contacts_header;
    border-bottom: 15px solid rgb(255, 90, 17);
    line-height: 2;
    font: 50px "condensed_bold", sans-serif;
    font-weight: bold;
    text-align: left;
    color: rgb(95, 95, 95);
}

.footer_contacts_text {
    grid-area: footer_contacts_text;
    border-bottom: 15px solid rgb(255, 90, 17);
    line-height: 2;
    font: 50px "condensed_light", sans-serif;
    text-align: right;
    color: rgb(95, 95, 95);
}

.footer_map {
    grid-area: footer_map;
}

#toTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: none;
    font: 32px "condensed_bold", sans-serif;
    letter-spacing: 10px;
    line-height: 1.45;
    color: lightgray;
    /* font-weight: 700; */
    text-align: center;
    width: 11%;
    height: 55px;
    border: 0.2vh solid;
    border-color: lightgray;
    border-radius: 20vw;
    background-color: rgb(95, 95, 95);
}

@font-face{
    font-family:"condensed_light";
    src: url("../Материалы FOK/FRONT/Gill_Sans_Nova_Condensed_Light.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family:"condensed_medium";
    src: url("../Материалы FOK/FRONT/Gill_Sans_Nova_Condensed_Medium.otf") format("opentype");
    font-style: normal;
    font-weight: normal;   
}
@font-face{
    font-family: "condensed_bold";
    src: url("../Материалы FOK/FRONT/Gill_Sans_Nova_Condense_Bold.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "condensed_ultra";
    src: url("../Материалы FOK/FRONT/Gill_Sans_Nova_Condensed_Ultralight.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "condensed_extra";
    src: url("../Материалы FOK/FRONT/Gill_Sans_Nova_Condensed_Extrabold.otf") format("opentype");
    font-style: normal;
    font-weight: normal;
}
@font-face{
    font-family: "taurus";
    src: url("../Материалы FOK/FRONT/taurus_light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}
