* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}


header {
    background: #80b412;
    width: 100%;
}
header .wrapper {
    display: flex;
    justify-content: space-around;
}
.wrapper .img_links {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.img_links img:hover {
    -webkit-filter: grayscale(100%);
}

.wrapper .links {
    display: flex;
    width: 30%;
    justify-content: space-between;
    align-items: center;
}
.wrapper .links h1 {
    color: #fff;
    font-size: 11.5pt;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}
.wrapper .links h1:hover {
    color: #696969;
}



/*
header {
    background: #80b412;
    display: grid;
}
.img_links {
    margin: 1.2% 0 1.2% 12.1%;
}
.img_links img {
    border-radius: 15px;
    margin-right: 1.2%;
}
.img_links img:hover {
    -webkit-filter: grayscale(100%);
}
.links {
    position: absolute;
    display: flex;
    margin: 1.7% 0 1.5% 58.1%;
    flex-wrap: wrap;
}
.links h1 {
    font-size: 13.5pt;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    color: #fff;
    margin-right: 23px;
}
.links h1:hover {
    color: #696969;
}
*/

/*  +------------+    
    |   БЛОК 1   |
    +------------+  */

main .block_1 {
    display: grid;
    width: 100%;
    max-height: 100vh;
    height: 600px;
}
.block_1 .background {
    width: 100%;
    height: 598px;
    background: url(img/block_1_green_background.png) bottom center no-repeat, url(img/block_1_background.png) no-repeat;
    background-size: 1013px 149px, 100% 598px; /* Первые два отвечают за рр зеленой картинки, 3 и 4 за рр бекграунда*/
}

/* Можно было тупо иконки good service, High perfomance, Experience вместе с линиями и полу прозрачным зеленым фоном ебнауть как картинку, так как я не вижу что это должна быть ссылка, а значит так было бы легче, но я еблан решил делать как тяжелее и напоролся на говно в виде палочек, из-за того что я ебанул эти иконки как грид они начали двигатся вместе (что есть правильно), НО grid-template-columns ебашит их тупо в право и когда ставишь эту ебаную палку border-right она слипается с картинкой следующей. Было решено убрать нахуй эти палки они нам погоды не делают, только ебатся с ними надо! */

.block_1 .background .icons {
    display: grid;
    grid-template-columns: repeat(3, 20.3%);
    margin: 32% 0 0 32.5%;
}
.block_1 .background .icons .icon_1 p {
    font-family: 'Exo 2', sans-serif;
    font-weight: lighter;
    color: #fff;
}
.block_1 .background .icons .icon_2 p {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-weight: lighter;
}
.block_1 .background .icons .icon_3 p {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-weight: lighter;
}


/*  +------------+    
    |   БЛОК 2   |
    +------------+  */


*  {
    box-sizing: border-box;
}
img {
    max-width: 100%;
}
.block_2 .about_us {
    padding: 1.6% 0 1.6% 0;
}
.block_2 .about_us h1 {
    overflow: hidden;
    position: relative;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
}
.block_2 .about_us h1:before,
.block_2 .about_us h1:after {
    content: '';
    display: inline-block;
    position: relative;
    top: -2px;
    width: 29.9%;
    height: 2px;
    vertical-align: middle;
    background: #000;
}
.block_2 .about_us h1:before {
    left: -1.1%;
    margin-left: -50%;
}
.block_2 .about_us h1:after {
    left: 1.1%;
    margin-right: -50%;
}
.block_2 .about_us h1 {
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
}
.block_2 .content p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}
.block_2 .text p {
    font-family: 'Roboto', sans-serif;
    font-weight: bold; 
}


.block_2 .content {
    display: flex;
    max-width: 100%;
}
.block_2 .image {
    padding: 0 0 0 12%;
}
.block_2 .all_text  {
    max-width: 37.1%;
    padding: 0 0 0 1.6%;
}
.block_2 .all_text .paragraph {
    padding: 0 0 2% 0;
}
.block_2 .all_text .text img {
    padding: 3% 0.6% 0% 0;
}
.block_2 .all_text .text p {
    padding: 0% 0 0.7% 0;
}

/* Пример 1
.block_2 .about_us {
    padding: 1.6% 0 1.6% 0;
}
.block_2 .about_us h1 {
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
}
.block_2 .content p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    width: 37.1%;
}
.block_2 .text p {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;  
}


.block_2 .content {
    display: flex;
    max-width: 100%;
}
.block_2 .image  {
    width: 478px;
    padding: 0 1.6% 0 12%;
    
}
.block_2 .all_text  {
    flex-direction: column;
    
}
*/


/* пример 2
.block_2 img {
    width: 37.3%;
    height: 9.5%;
    margin: 0 1.6% 0 12%;
}

.block_2 .content p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    width: 37.1%;
}
.block_2 .text {
    display: flex;
    justify-content: flex-end;
}
.block_2 .text img {
    width: 18px;
    height: 18px;
}
.block_2 .text p {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    
}
*/


/*  +------------+    
    |   БЛОК 3   |
    +------------+  */


.block_3 {
    background: url(img/block_3_bg.jpg);
}
.block_3 .latest_news {
    padding: 1.6% 0 1.6% 0;
    max-width: 100%;
}
.block_3 .latest_news h1 {
    color: #fff;
    overflow: hidden;
    position: relative;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    
}
.block_3 .latest_news h1:before,
.block_3 .latest_news h1:after {
    content: '';
    display: inline-block;
    position: relative;
    top: -2.5px;
    width: 27.5%;
    height: 2.5px;
    vertical-align: middle;
    background: #fff;
}
.block_3 .latest_news h1:before {
    left: -1.1%;
    margin-left: -50%;
}
.block_3 .latest_news h1:after {
    left: 1.1%;
    margin-right: -50%;
}
.block_3 .news-1 {
    display: flex;
    width: 79.3%;
    height: 12.4%;
    background-color: #fff;
    margin-left: 10.4%;
    margin-bottom: 1%;
}
.block_3 .news-1 .image {
    margin: 1.7%;
    height: 9%;
    width: 69%;
}
.block_3 .news-1 .image img {
    width: 100%;
}
.block_3 .news-1 .head-1 {
    width: 100%;
}
.block_3 .news-1 .head-1 h1 {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 23px;
    padding-bottom: 0.8%;
}
.block_3 .news-1 .head-1 .posted  {
    color: #a2a2a2;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 14px;
    margin-bottom: 0.6%;
}
.block_3 .news-1 .head-1 .paragraph {
    width: 90%;
}
.block_3 .news-1 .head-1 .paragraph p {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 2%;
}
.block_3 .news-1 .head-1 .button {
    float: right;
    margin-right: 15%;
    background-color: #80b412;
    padding: 0.4%;
    margin-bottom: 1.7%;
}
.block_3 .news-1 .head-1 .button a {
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}
.block_3 .news-1 .head-1 .button a:hover, .block_3 .news-2 .head-2 .button a:hover {
    color: #696969;
}

.block_3 .news-2 {
    display: flex;
    width: 79.3%;
    height: 12.4%;
    background-color: #fff;
    margin-left: 10.4%;
}
.block_3 .news-2 .image {
    margin: 1.7%;
    height: 9%;
    width: 69%;
}
.block_3 .news-2 .head-2 {
    width: 100%;
    margin: 0.7% 0 0 1.9%;
}
.block_3 .news-2 .head-2 h1 {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 23px;
    padding-bottom: 0.8%;
}
.block_3 .news-2 .head-2 .posted  {
    color: #a2a2a2;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 14px;
    margin-bottom: 0.6%;
}
.block_3 .news-2 .head-2 .paragraph {
    width: 90%;
}
.block_3 .news-2 .head-2 .paragraph p {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 16px;
    margin-bottom: 2%;
}
.block_3 .news-2 .head-2 .button {
    float: left;
    background-color: #80b412;
    padding: 0.4%;
    margin-bottom: 1.7%;
}
.block_3 .news-2 .head-2 .button a {
    color: #fff;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    margin-bottom: 0.7%;
}
.block_3 .news-3 {
  min-height: 4.5em;
  line-height: 4.5;
}


/*  +------------+    
    |   БЛОК 4   |
    +------------+  */


.block_4 .testimonials {
    padding: 1.6% 0 1.6% 0;
    max-width: 100%;
}
.block_4 .testimonials h1 {
    color: #000;
    overflow: hidden;
    position: relative;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    
}
.block_4 .testimonials h1:before,
.block_4 .testimonials h1:after {
    content: '';
    display: inline-block;
    position: relative;
    top: -2.5px;
    width: 27.5%;
    height: 2.5px;
    vertical-align: middle;
    background: #000;
}
.block_4 .testimonials h1:before {
    left: -1.1%;
    margin-left: -50%;
}
.block_4 .testimonials h1:after {
    left: 1.1%;
    margin-right: -50%;
}
.block_4 .portfolio .wrapper {
    display: flex;
    border: 2px solid #80b412;
    width: 30%;
}
.block_4 .portfolio .wrapper .image {
    width: 100%;
    margin: 1.9%;
}
.block_4 .portfolio .wrapper .image img {
    max-width: 100%;
}
.block_4 .portfolio .wrapper .text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    padding-top: 1%;
}
.block_4 .portfolio .wrapper .text p {
    color: #000;
}
.block_4 .portfolio .wrapper .text .coments {
    font-weight: bold;
    margin-top: 3.7%;
}
.block_4 .portfolio {
    display: flex;
    justify-content: space-around;
    margin-bottom: 3.6%;
}
.block_4 .avatar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2.1%;
}

.block_4 .avatar img {
    border-radius: 55%;
    border: 2px solid #000;
    width: 100%;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
 }
 
.block_4 .avatar img:hover {
    border-radius: 55%;
    border: 2px solid #80b412;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
 }


/*  +------------+    
    |   FOOTER   |
    +------------+  */

footer {
    background: url(img/block_3_bg.jpg);
}
.wrapper {
    display: flex;
    justify-content: center;
    color: #fff;
    padding: 1.1% 0 2% 0;
}
.column-1 {
    color: #fff;
    flex-grow: 1;
    padding-left: 11%;
}
.wrapper h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 4%;
}
.wrapper p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
}
.column-2 {
    flex-grow: 1;
    align-items: center;
}
.column-3 {
    flex-grow: 1;
}
.wrapper .column-3 input, .wrapper .column-3 textarea, .wrapper .column-3 button  {
    border: 1px solid #80b412;
    margin: 1%;
    padding: 0.7%;
}
.wrapper .column-3 input {
    width: 61%;
}
.wrapper .column-3 button {
    width: 25%;
    float: right;
    margin-right: 38%;
    background-color: #80b412;
    color: #fff;
}
footer .txt p {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    padding-bottom: 1.5%;
}









@media screen and (max-width: 1280px) {
    
    /* Адаптация для шапки */
    
    header .wrapper .img_links {
        width: 20%;
    }
    .wrapper .links {
        width: 34%;
    }
    .wrapper .links h1 {
        font-size: 10.5pt;
    }

    /* Адаптация для БЛОК 1 */
    
    main .block_1 .background .icons {
        padding: 5% 0 0 0;
    } 
    
    /* Адаптация для БЛОК 2 */
    
    .block_2 .all_text  {
        max-width: 47.1%;
        padding: 0 0 0 1.6%;
    }
    .block_2 .about_us h1:before,
    .block_2 .about_us h1:after {
        width: 28.5%;
    }
}

@media screen and (max-width: 1024px) {
    
    /* Адаптация для шапки */
    
    header .wrapper .img_links {
        width: 25%;
    }
    .wrapper .links {
        width: 44%;
    }
    .wrapper .links h1 {
        font-size: 10pt;
    }
    
    /* Адаптация для БЛОК 1 */
    
    main .block_1 .background {
        background-size: 759px 149px, 100% 598px;
    }
    .block_1 .background .icons {
        margin: 42.5% 0 0 21%;
        grid-template-columns: repeat(3, 30.3%);
    }
    
    /* Адаптация для БЛОК 2 */
    
    .block_2 .image {
        padding: 0 0 0 2%;
    }
    .block_2 .image img {
        width: auto;
        height: 95%;
    }
    .block_2 .all_text  {
        max-width: 57.1%;
        padding: 0 0 0 1.6%;
    }
}

@media screen and (max-width: 768px) {
    
    /* Адаптация для шапки */
    
    header .wrapper .img_links {
        width: 20%;
    }
    .wrapper .links {
        width: 50%;
    }
    .wrapper .links h1 {
        font-size: 10pt;
    }
    
    /* Адаптация для БЛОК 1 503px*/
    
    main .block_1 .background {
        background-size: 503px 119px, 100% 598px; 
    }
    .block_1 .background .icons {
        margin: 59.5% 0 0 26.5%;
        grid-template-columns: repeat(3, 25.3%);
    }
    
    /* Адаптация для БЛОК 2 */
    
    .block_2 .about_us h1:before,
    .block_2 .about_us h1:after {
        width: 16%;
    }
    .block_2 .content {
        display: flex;
        max-width: 100%;
        flex-direction: column;
    }
    .block_2 .image {
        text-align: center;
    }
    .block_2 .all_text  {
        max-width: 100%;
    }
    .block_2 .all_text .paragraph {
        text-align: center;
        margin: 3% 0 1% 16.7%;
        max-width: 67%;
    }
    .block_2 .all_text .text img {
        padding: 2% 0.6% 0% 0;
    }
    .block_2 .all_text .text {
        padding: 0 0 0 18%;
    }
    .block_4 .portfolio {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3.6%;
    }
    .block_4 .portfolio .wrapper {
        margin-bottom: 5%;
        flex-wrap: wrap;
        width: 50%;
    }
    .block_4 .portfolio .wrapper .image {
        width: 1000px;
        text-align: center;
        margin: 5% 0 5% 0;
        
    }
    .block_4 .portfolio .wrapper .image img {
        border: 2px solid #80b412;
    }
    .block_4 .portfolio .wrapper .text {
        margin: 0 5% 0 5%;
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    
    header .wrapper .img_links {
        width: 25%;
    }
    .wrapper .links {
        display: none;
    }
    
    /* Адаптация для БЛОК 1 */
    
    main .block_1 .background {
        height: 400px;
        background-size: 400px 109px, 100% 400px; 
        background-position: bottom center, auto;
    }
    .block_1 .background .icons {
        margin: 45% 0 0 21.5%;
        grid-template-columns: repeat(3, 28.3%);
    }
    .block_1 .background .icons .icon_1 p {
        font-size: 11pt;
    }
    .block_1 .background .icons .icon_2 p {
        font-size: 11pt;
    }
    .block_1 .background .icons .icon_3 p {
        font-size: 11pt;
    }
    
    /* Адаптация для БЛОК 2 */
    
    .block_2 .about_us h1:before,
    .block_2 .about_us h1:after {
        width: 21%;
    }
    .block_2 .content {
        display: flex;
        max-width: 100%;
        flex-direction: column;
    }
    .block_2 .image {
        text-align: center;
    }
    .block_2 .all_text  {
        max-width: 100%;
    }
    .block_2 .all_text .paragraph {
        text-align: center;
        margin: 3% 0 1% 8%;
        max-width: 85%;
    }
    .block_2 .all_text .text img {
        padding: 2% 0.6% 0% 0;
    }
    .block_2 .all_text .text {
        padding: 0 0 0 8%;
    }
}