:root {
    --logo_color: rgb(22, 255, 177);
    --blue_color: rgb(87, 132, 255);
    --black_color: rgb(38, 40, 43);
    --grey_color: rgb(58, 62, 63);
    --blue_color_opasity_9: rgba(87, 132, 255, 0.9);
    --black_color_opasity_9: rgba(38, 40, 43, 0.95);
}

body {
    font-family: "Montserrat", sans-serif;
    font-size: calc(20px*var(--size));
    letter-spacing: calc(3px*var(--size));
    line-height: calc(40px*var(--size));
    word-spacing: calc(3px*var(--size));
}

a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
}

a:hover {
    cursor: pointer;
    box-shadow: 0 calc(-5px*var(--size)) 0 var(--blue_color) inset;
}

hr {
    position: relative;
    width: 90%;
    height: calc(6px*var(--size));
    border-radius: calc(2px*var(--size));
    border: none;
    background: var(--blue_color);
}

img {
    border-radius: calc(5px*var(--size));
}


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


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

#up_сorners_1 {
    height: calc(50px*var(--size));
    width: 45%;
    background: linear-gradient(135deg, transparent 10%, var(--black_color) 0);
    margin-left: 55.5%;
    margin-top: 5%;
}

#up_сorners_2 {
    height: calc(50px*var(--size));
    width: 40%;
    background: linear-gradient(135deg, transparent 10%, var(--black_color) 0);
    margin-left: 60.5%;
}

#up_сorners_3 {
    height: calc(50px*var(--size));
    width: 37.5%;
    background: linear-gradient(135deg, transparent 10%, var(--black_color) 0);
    margin-left: 63%;
}

#d_сorners_1 {
    height: calc(50px*var(--size));
    margin-top: -0.1%;
    width: 35%;
    background: linear-gradient(-45deg, transparent 10%, var(--black_color) 0);
    margin-left: -0.6%;
}

#d_сorners_2 {
    height: calc(50px*var(--size));
    margin-top: -0.1%;
    width: 40%;
    background: linear-gradient(-45deg, transparent 10%, var(--black_color) 0);
    margin-left: -0.6%;
}


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


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

.logotype {
    position: absolute;
    width: 15%;
    margin-top: 2%;
    margin-left: 10%;
}

#first_backhround {
    margin-left: -0.65%;
    position: absolute;
    width: 100.1%;
    object-fit: cover;
    height: calc(700px*var(--size));
}


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


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

.header {
    position: fixed;
    top: 0;
    z-index: 40;
    width: 47.48%;
    height: calc(60px*var(--size));
    white-space: nowrap;
    margin-left: 52%;
    color: #ffffff;
    background: linear-gradient(45deg, transparent 3%, var(--black_color_opasity_9) 0);
}

.header a {
    color: #ffffff;
    padding: 1.4% 2.5%;
    font-size: 85%;
}


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


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

.greeting article {
    position: relative;
    margin-left: -0.6%;
    margin-top: -3%;
    height: calc(700px*var(--size));
    width: 50%;
    z-index: 1;
    background: linear-gradient(-45deg, transparent 15%, var(--black_color_opasity_9) 0);
}

.greeting article h1 {
    padding-top: 7.5%;
    color: var(--logo_color);
    text-decoration: overline var(--logo_color);
}

.greeting article h1::after {
    content: '';
    display: block;
    width: 34.5%;
    border-bottom: calc(4px*var(--size)) solid var(--logo_color);
    padding-bottom: 2%;
}

.greeting hr {
    margin-top: 20%;
}

.greeting section {
    position: absolute;
    background: linear-gradient(135deg, transparent 16%, var(--black_color_opasity_9) 0);
    margin-left: 55.5%;
    width: 40%;
    padding: 1% 2%;
    margin-top: -10%;
    text-align: center;
}

.greeting section a {
    border-radius: calc(5px*var(--size));
    padding: 1.5% 3%;
    margin-left: 35%;
    background: var(--blue_color_opasity_9);
}


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


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

.about_us {
    margin-top: 5%;
    margin-bottom: -2%;
}

.about_us article {
    background: linear-gradient(-45deg, transparent 16%, var(--blue_color_opasity_9) 0);
    color: #ffffff;
    padding: 1% 1%;
    margin-top: 3%;
}

#about_us-first_block {
    margin-top: 2%; 
    width: 90%;
    margin-left: -1%;
}

#about_us-second_block {
    text-align: right; 
    background: linear-gradient(45deg, transparent 14.5%, var(--black_color_opasity_9) 0); 
    width: 80%;
    margin-left: 18.5%;
}

#about_us-third_block {
    width: 70%;
    margin-left: -1%;
}



.about_us p {
    margin-left: 7.5%;
    width: 80%;
    font-size: 105%;
    line-height: 140%;
}


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


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

.projects {
    color: #ffffff;
    background: var(--black_color);
    width: 101.1%;
    margin-left: -0.6%;
    margin-top: -2%;
}

.projects img {
    display: inline-block;
    width: 30%;
    right: 0;
    margin-top: -1%;
}


#centre_crane_img {
    margin-left: 17%;
}


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


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

.approachs {
    color: var(--black_color);
    margin-top: 5%;
    margin-left: 7.5%;
    margin-right: 5%;
    margin-bottom: 10%;
}

.approachs article {
    display: inline-block;
    width: 30%;
    height: calc(50px*var(--size));
    text-align: center;
    font-size: 85%;
    line-height: 120%;
    padding: 5% 1%;
}

#last_approach {
    margin-left: 33.2%;
}


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


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

.fotos {
    color: #ffffff;
    background: var(--black_color);
    width: 101.1%;
    margin-left: -0.6%;
    margin-top: -2%;
}

.fotos img {
    display: inline-block;
    width: 30%;
}


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


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

.preparation {
    margin-top: 3%; margin-bottom: 1%; 
}

.preparation section article img {
    border-radius: 10%;
    display: inline-block;
}

#last_stand_1 {
    width: 101%;
}

#last_stand_1 img {
    margin-left: 3.6%;
    width: 5.5%;
}

#last_stand_2 {
    width: 88.5%;
    background: linear-gradient(-45deg, transparent 15%, var(--black_color_opasity_9) 0);
}

#last_stand_2 img {
    margin-left: 4.3%;
    width: 6%;
}

#last_stand_3 {
    width: 75.5%;
}

#last_stand_3 img {
    margin-left: 5%;
    width: 7.5%;
}

.preparation section article {
    background: linear-gradient(-45deg, transparent 15%, var(--blue_color_opasity_9) 0);
    margin-left: -0.6%;
    margin-top: 2%;
}

.preparation section article h3 {
    margin-left: 2.5%;
    display: inline-block;
    width: 70%;
    font-size: 105%;
    line-height: 170%;
}


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


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

.contacts {
    width: 101%;
    height: calc(500px*var(--size));
    margin-top: -2%;
    margin-left: -0.6%;
    background: var(--black_color);
    color: #ffffff;
}

.contacts hr {
    margin-left: 15%;
    width: 60%;
    margin-bottom: 2%;
}

.contacts h2 {
    margin-left: 15%;
    padding-top: 2%;
}

.contacts section {
    margin-left: 15%;
    line-height: 100%;
    margin-top: 2%;
}

.contacts article {
    width: 60%;
    margin-left: 15%;
    background: var(--grey_color);
}

.contacts article a {
    padding: 2% 1.5%;
}


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


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