@font-face {
    font-family: "Exo_2_Extra_Light";
    src: url(/fonts/Exo_2_Extra_Light.otf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Exo_2_Extra_Light";

}

body {
    display: flex;
    width: 100%;
    height: auto;
    /*overflow: hidden;*/
}

.wrapper {
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
h1.colorBlue {
    font-size: 3rem;
    color: #84BD00;
    text-transform: uppercase;
    text-align: center;
    margin: 30px 0 30px 0;
    font-weight: bold;
    padding: 0 10%;
}

.aboutUs h1 span {
    color: #00558C;
}

.whyDrones h3 {
    font-size: 1.6rem;
    color: #84BD00;
    text-transform: unset;
    text-align: center;
    margin: 10px 0 10px 0;
    font-weight: bold;
}

.whyDrones p {
    font-size: 1.2rem;
    color: darkslategrey;
    text-transform: unset;
    text-align: center;
    margin: 10px 0 10px 0;
}

.header {
    width: 100%;
    height: 70px;
    background-color: white;
    /*background-color: #84BD00;*/
    /*background: linear-gradient(60deg, rgba(132,189,0 1) 0%, rgba(52,100,186, 1) 100%);*/
    display: flex;
    flex-direction: row;
}

a {
    text-decoration: none;
}

.nav-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.nav-title img {
    width: auto;
    height: 62px;
    margin-right: 20px;
}

.whyDrones {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(132, 189, 0, 0.1);
    border-top-left-radius: 10%;
    border-top-right-radius: 10%;
    padding-bottom: 50px;
}

.whyDronesLine {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin: 20px 0;
}

.whyDronesBlock {
    width: 22%;
    height: auto;
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 4px solid #84BD00;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 0 10px -2px green;
    background-color: white;
}

.whyDronesBlock img {
    width: 38%;
    height: auto;
}

/* ---------------------------------- div.main ----------------------------------- */
.main {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.pic {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
}

#textPhone {
    animation: appear;
    animation-duration: 1s;
    transition: ease-in-out .6s;
}

@keyframes appear {
    0% {
        opacity: .66;
    }

    50% {
        opacity: .88;
    }

    100% {
        opacity: 1;
    }
}
/* ---------------------------------- div.main ----------------------------------- */

/* ---------------------------------- div.feedback ----------------------------------- */
.feedback p {
    font-size: 1.6rem;
    padding: 20px;
    text-align: justify;
}
/* ---------------------------------- div.feedback ----------------------------------- */


/* ---------------------------------- div.aboutUS ----------------------------------- */
.aboutUs {
    box-sizing: border-box;
    margin: 0 20px 20px 20px;
}

#aboutUs {

}

.aboutUs h2 {
    font-size: 2rem;
    color: #84BD00;
    text-transform: unset;
    text-align: center;
    margin: 10px 0 10px 0;
    font-weight: bold;
}

.aboutUs p, .aboutUs ul li {
    font-size: 1.2rem;
    color: darkslategrey;
    text-transform: unset;
    text-align: justify;
    text-indent: 40px;
    margin: 10px 0 10px 0;
    padding: 20px 50px 10px 50px;
}

.aboutUsLine {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aboutUsImage {
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: ease-in-out .8s;
}

.txt {
    width: 98%;
}

.aboutUsImage img {
    width: 100%;
    height: auto;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}

div.div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.blockImg {
    width: 40%;
}

.blockImg img {
    width: 100%;
    height: auto;
}

.blockTxt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
}

.blockTxt ul li {
    list-style-type: disc;
}

.facts {
    padding: 0 20px 40px 20px;
}

.lineFlexWrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.lineFlexWrapBlock-left {
    width: 30%;
    min-height: 200px;
    border: 1px dashed #84BD00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    padding: 4px;
}

.lineFlexWrapBlock-center {
    width: 30%;
    min-height: 200px;
    border: 1px dashed #84BD00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
}

.lineFlexWrapBlock-right {
    width: 30%;
    min-height: 200px;
    border: 1px dashed #84BD00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    padding: 4px;
}

.lineFlexWrap h2 {
    font-size: 7rem;
    color: #00558C;
}

.lineFlexWrap p {
    font-size: 1.6rem;
}
/* ---------------------------------- div.aboutUS ----------------------------------- */


/* ---------------------------------- div.ourServices ----------------------------------- */
.ourServices {
    background-image: url(/assets/gallery-3-opacity60.png);
    background-position: center;
    background-repeat: no-repeat;
    background-clip: content-box;
    /*background-color: rgba(132, 189, 0, 0.1);*/
    height: auto;
    width: 100%;
    padding: 20px;
    border-bottom-left-radius: 15%;
    border-bottom-right-radius: 15%;
    box-shadow: 0px 2px 12px white;
}

.ourServicesLine {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.ourServiceBlock {
    width: 30%;
    /*min-width: 300px;*/
    height: 150px;
    display: flex;
    justify-content: flex-start;
    padding: 0 20px;
    align-items: center;
    border: 1px solid rgba(0, 85, 140, 0.39);
    border-radius: 4px;
    background-color: white;
    margin: 10px;
}

.ourServiceBlock img {
    padding: 16px 0;
    width: 34%;
    height: auto;
    margin-right: 20px;
}

.ourServices h3 {
    font-size: 1.6rem;
    color: black;
    text-transform: unset;
    text-align: left;
    margin: 10px 0 10px 0;
    font-weight: bold;
}

.ourServices p {
    font-size: 1.2rem;
    text-align: justify;
    padding: 20px;
}
/* ---------------------------------- div.ourServices ----------------------------------- */


/* ---------------------------------- div.dronePark ----------------------------------- */
.dronePark {
    /*background-color: rgba(132, 189, 0, 0.1);*/
    height: auto;
    width: 100%;
    padding: 20px;
    border-bottom-left-radius: 15%;
    border-bottom-right-radius: 15%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.card {
    width: 46%;
    height: auto;
    min-height: 444px;
    /*border: 4px solid #00558C;*/
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: linear-gradient(-45deg, #00558C, #008c7c, #2fd523, #84BD00);
    background-size: 400% 400%;
    animation: gradient 12s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.card h1 {
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.card p {
    color: white;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2rem;
    padding-top: 20px;
}

.card div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.droneType {
    height: 30vh;
    width: 100%;
}

.card img {
    width: auto;
    height: 100%;
}

.dronePark video {
    width: 100%;
    height: auto;
}
/* ---------------------------------- div.dronePark ----------------------------------- */


/* ---------------------------------- div.contacts ----------------------------------- */
.contacts {
    width: 100%;
    /*height: 400px;*/
    background-color: #84BD00;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contactsLeftBlock {
    padding: 20px 0 20px 40px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.logo {
    height: auto;
    width: 100%;
}

.logo img {
    height: auto;
    width: 74%;
}

.contactsBlock {
    width: 100%;
    height: auto;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.contactsBlock h1 {
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
}

.contactsBlock a {
    /*width: 100%;*/
    font-size: 1.4rem;
    text-decoration: none;
    color: white;
    margin: 0 10px;
    transition: ease-in-out .3s;
}

.contactsBlock a:hover {
    color: #00558C;
}

.contactsBlock a.noMargin {
    width: 100%;
    margin-left: 0;
}

.contactsBlock a > svg {
    height: 40px;
}

svg {
    transition: ease-in-out .4s;
}

svg:hover {
    color: #00558C;
}

.contactsBlock img {
    height: 100%;
    width: auto;
}

.contactsBlock p {
    /*width: 100%;*/
    font-size: 1.4rem;
}

.contactsBlock .webLink {
    font-size: 1rem;
    color: lightgrey;
}

.contactsBlock .webLink a {
    font-size: 1rem;
    color: whitesmoke;
}

.contactsBlock .webLink a:hover {
    color: #00558C;
}

.contactsRightBlock {
    width: 50vw;
    height: 400px;
/*    border-top: 10px solid #84BD00;
    border-bottom: 10px solid #84BD00;*/
}

.disappear {
    display: flex;
}

/* ---------------------------------- div.contacts ----------------------------------- */

/* ----------------------------------- google map ----------------------------------- */
.contactsRightBlock iframe {
    width: 100%;
    height: 100%;
}



/* ---------------------------------- div.steps ----------------------------------- */
.steps {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.steps p {
    font-size: 1.2rem;
    color: darkslategrey;
    text-transform: unset;
    text-align: center;
    margin: 10px 0 10px 0;
}

.containerBlock {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 20px 0 30px 0;
}

.block {
    width: 17%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around; /*center;*/
    border: 2px solid #84BD00;
    margin: 10px;
    border-radius: 15px 15px;
    padding: 6px;
    transition: ease-in-out .4s;
}

.block:hover {
    border: 6px double #84BD00;
    /*background-color: rgba(132, 189, 0, 0.15);*/
}

.block:hover p {
    color: #00558C;
}

.block .imgBlock {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block .imgBlock img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94%;
    height: auto;
}

.blockArrow {
    width: 10%;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*border: 2px solid #00558C;*/
    margin: 10px;
    /*border-radius: 15px 15px;*/
}

.blockArrow img.arrow {
    width: 60%;
    height: auto;
    animation-name: breathe;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-delay: 0s;
}

@keyframes breathe0 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes breathe {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.blockArrow img.arrow2 {
    width: 60%;
    height: auto;
    animation-name: breathe2;
    animation-iteration-count: infinite;
    animation-duration: 9s;
    animation-delay: 1s;
}

@keyframes breathe2 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.blockArrow img.arrow3 {
    width: 60%;
    height: auto;
    animation-name: breathe3;
    animation-iteration-count: infinite;
    animation-duration: 8s;
    animation-delay: 2s;
}

@keyframes breathe3 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.blockArrow img.arrow4 {
    width: 60%;
    height: auto;
    animation-name: breathe4;
    animation-iteration-count: infinite;
    animation-duration: 7s;
    animation-delay: 3s;
}

@keyframes breathe4 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.blockArrow img.arrow5 {
    width: 60%;
    height: auto;
    animation-name: breathe5;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    animation-delay: 4s;
}

@keyframes breathe5 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
/* ---------------------------------- div.steps ----------------------------------- */


/* ---------------------------------- div.order ----------------------------------- */
.bg-grey {
    background-color: #F2F8E5;
    padding: 20px;
}

.order {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: white;
    border: 3px solid #84BD00;
    border-radius: 10px;
    margin: 20px 60px;
}

.orderTxt {
    width: 60%;
}

.orderHeader {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
}

.form {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 0;
}

form input {
    height: 58px;
    width: 94%;
    font-size: 1.6rem;
    border: 3px solid #7aaf02;
    border-radius: 30px;
    padding: 6px 20px;
    margin: 10px 20px;
}

form input:focus::placeholder {
    color: transparent;
    transition: all .6s;
}

form input.submitButton {
    height: 58px;
    width: 94%;
    font-size: 1.4rem;
    font-weight: bold;
    border: 3px solid rgba(0, 85, 140, 0.71);
    border-radius: 30px;
    background-color: #00558C;
    /*padding: 6px 20px;*/
    color: white;
    text-transform: uppercase;
    transition: ease-in-out .5s;
}

form input.submitButton:hover {
    /*background-color: rgba(0, 85, 140, 0.18);*/
    background-color: white;
    font-weight: bold;
    box-shadow: 0 0 6px 1px rgba(0, 85, 140, 0.68);
    color: #00558C;
}

.order p {
    font-size: 1.2rem;
    color: darkslategrey;
    text-transform: unset;
    text-align: center;
    margin: 10px 0 10px 0;
}

.orderImg {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.orderImg img {
    width: 65%;
    height: auto;
}
/* ---------------------------------- div.order ----------------------------------- */



a.toBeginning {
    width: 60px;
    height: 60px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    color: white;
    border-radius: 50%;
    z-index: 100;
    font-size: .8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 14px 1px #00558C;
    opacity: .6;
    transition: ease-in-out .5s;
}

a.toBeginning:hover {
    opacity: 1;
}

a.toBeginning img {
    outline: none;
    transform: none;
    box-shadow: none;
    z-index: 100;
}

a.toBeginning img:hover {
    outline: none;
    transform: none;
    box-shadow: none;
}



/* ------------------------------------------- @media ------------------------------------------ */
@media screen and (min-width: 1241px) {
    .order h1 {
        margin: 30px 0 0 0;
    }

    .card img {
        width: auto;
        height: 100%;
    }
}



@media screen and (min-width: 1160px) and (max-width: 1240px) {
    .block {
        width: 15%;
    }

    /*.blockArrow img.arrow {
        width: 40%;
    }*/
}

@media screen and (min-width: 930px) and (max-width: 1159px) {
    .block {
        width: 16%;
    }

    .orderImg img {
        width: 93%;
    }

    .block .imgBlock img {
        width: 75%;
    }
}

@media screen and (min-width: 930px) and (max-width: 1210px) {
    .orderImg img {
        width: 93%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    input, .orderBlock button {
        height: 50px;
    }

    .whyDronesBlock {
        width: 28%;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 2.6rem;
    }

    .ourServiceBlock img {
        width: 32%;
    }

    .ourServiceBlock {
        width: 31%;
    }

    .ourServices h3 {
        font-size: 1.2rem;
    }

    .lineFlexWrap h2 {
        font-size: 4.8rem;
    }

    .lineFlexWrap p {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 860px) and (max-width: 929px) {
    .contactsBlock h1 {
        font-size: 1.8rem;
    }

    .contactsBlock p, .contactsBlock a {
        font-size: 1.2rem;
    }
}


@media screen and (min-width: 860px) and (max-width: 929px) {
    .orderImg img {
        width: 103%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    input {
        font-size: 1.4rem;
    }

    input, .orderBlock button {
        height: 50px;
    }

    .block {
        width: 16%;
        min-height: 210px;
    }

    .block .imgBlock img {
        width: 75%;
    }

    .steps p {
        font-size: 1rem;
    }

    .whyDronesBlock {
        width: 28%;
        min-height: 360px;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 2.6rem;
    }

    .aboutUsImage {
        width: 68%;
    }

    .ourServiceBlock img {
        width: 31%;
    }

    .ourServiceBlock {
        width: 46%;
    }

    .ourServices h3 {
        font-size: 1.6rem;
    }

    .lineFlexWrapBlock-right, .lineFlexWrapBlock-left, .lineFlexWrapBlock-center {
        min-height: 180px;
    }

    .lineFlexWrap h2 {
        font-size: 4rem;
    }

    .lineFlexWrap p {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 800px) and (max-width: 859px) {
    .contactsBlock h1 {
        font-size: 1.8rem;
    }

    .contactsBlock p, .contactsBlock a {
        font-size: 1.2rem;
    }

    .orderImg img {
        width: 112%;
    }

    input {
        font-size: 1.4rem;
    }

    .order h1 {
        margin-bottom: 0;
    }

    input, .orderBlock button {
        width: 100%;
        height: 50px;
    }

    .block {
        width: 16%;
        min-height: 200px;
    }

    .block .imgBlock img {
        width: 75%;
    }

    .steps p {
        font-size: 1rem;
    }

    .whyDronesBlock {
        width: 44%;
        min-height: 342px;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 2.2rem;
    }

    .aboutUsImage {
        width: 68%;
    }

    .ourServices {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ourServiceBlock img {
        width: 17%;
    }

    .ourServiceBlock {
        width: 96%;
    }

    .ourServices h3 {
        font-size: 1.8rem;
    }

    .lineFlexWrapBlock-right, .lineFlexWrapBlock-left, .lineFlexWrapBlock-center {
        min-height: 180px;
    }

    .lineFlexWrap h2 {
        font-size: 4rem;
    }

    .lineFlexWrap p {
        font-size: 1.15rem;
    }
}

@media screen and (min-width: 600px) and (max-width: 800px) {
    .contactsBlock h1 {
        font-size: 1.6rem;
    }

    .contactsBlock p, .contactsBlock a {
        font-size: 1rem;
    }

    .order {
        margin: 20px;
    }

    .orderImg img {
        width: 114%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    form input, form input.submitButton {
        width: 100%;
        height: 50px;
        font-size: 1.2rem;
    }

    .block {
        width: 20%;
        min-height: 174px;
    }

    .blockArrow {
        width: 6%;
    }

    .block .imgBlock img {
        width: 75%;
    }

    .steps p {
        font-size: 1rem;
    }

    /*.feedback h1, .whyDrones h1 {
        font-size: 2.6rem;
    }*/

    .card {
        width: 98%;
        margin-bottom: 30px;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 2rem;
    }

    .aboutUsImage {
        width: 80%;
    }

    .ourServiceBlock img {
        width: 23%;
    }

    .ourServiceBlock {
        width: 96%;
    }

    .ourServices h3 {
        font-size: 1.8rem;
    }

    .whyDronesBlock {
        width: 44%;
        min-height: 330px;
    }

    .lineFlexWrapBlock-right, .lineFlexWrapBlock-left, .lineFlexWrapBlock-center {
        min-height: 180px;
    }

    .lineFlexWrap h2 {
        font-size: 3rem;
    }

    .lineFlexWrap p {
        font-size: 1.2rem;
        text-align: center;
    }
}


@media screen and (min-width: 500px) and (max-width: 599px) {
    .contacts {
        flex-direction: column-reverse;
        align-items: center;
    }

    .contactsRightBlock, .contactsLeftBlock {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .contactsLeftBlock {
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .contactsBlock {
        text-align: center;
        justify-content: center;
    }

    .logo {
        display: flex;
        justify-content: center;
    }

    .order {
        margin: 20px;
    }

    .orderTxt {
        width: 100%;
    }

    .orderImg img {
        width: 114%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    form input, form input.submitButton {
        width: 100%;
        height: 50px;
        font-size: 1.2rem;
    }

    form input {
        margin: 10px 0;
    }

    .block {
        width: 26%;
        min-height: 182px;
    }

    .blockArrow {
        width: 10%;
    }

    .block .imgBlock img {
        width: 75%;
    }

    .steps p {
        font-size: 1rem;
    }

    /*.feedback h1, .whyDrones h1 {
        font-size: 2rem;
    }*/

    .card {
        width: 98%;
        margin-bottom: 30px;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 1.8rem;
    }

    .aboutUsImage {
        width: 80%;
    }

    .aboutUs p {
        line-height: 30px;
    }

    .ourServices {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ourServiceBlock img {
        width: 26%;
    }

    .ourServiceBlock {
        width: 96%;
    }

    .ourServices h3 {
        font-size: 1.6rem;
    }

    .whyDronesBlock {
        width: 44%;
        min-height: 249px;
    }

    .whyDronesBlock img {
        width: 31%;
    }

    .whyDrones h3 {
        font-size: 1.1rem;
    }

    .whyDrones p {
        font-size: .9rem;
    }

    .lineFlexWrapBlock-right, .lineFlexWrapBlock-left, .lineFlexWrapBlock-center {
        min-height: 160px;
    }

    .lineFlexWrap h2 {
        font-size: 2.4rem;
    }

    .lineFlexWrap p {
        font-size: 1rem;
        text-align: center;
    }
}

@media screen and (min-width: 350px) and (max-width: 499px) {
    .contacts {
        flex-direction: column-reverse;
        align-items: center;
    }

    .contactsRightBlock, .contactsLeftBlock {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .contactsLeftBlock {
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .contactsRightBlock {
        height: 320px;
    }

    .contactsBlock a, .contactsBlock p {
        font-size: 1.2rem;
    }

    .contactsBlock a > svg {
        height: 32px;
    }

    .contactsBlock {
        text-align: center;
        justify-content: center;
    }

    .disappear {
        display: none;
    }

    .logo {
        display: flex;
        justify-content: center;
    }

    .order {
        margin: 0;
    }

    .orderTxt {
        width: 100%;
    }

    .orderImg img {
        width: 114%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    form input {
        margin: 10px;
        font-size: 1.2rem;
    }

    .block {
        width: 31%;
        min-height: 166px;
    }

    .blockArrow {
        min-height: unset;
        width: 15%;
    }

    .block .imgBlock img {
        width: 72%;
    }

    .blockArrow img.arrow, .blockArrow img.arrow2, .blockArrow img.arrow3, .blockArrow img.arrow4,
    .blockArrow img.arrow5 {
        animation: none;
        /*transform: rotate(90deg);*/
    }

    .steps p {
        font-size: .9rem;
    }

    .card {
        width: 98%;
        margin-bottom: 30px;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 1.6rem;
    }

    .aboutUsImage {
        width: 80%;
    }

    .ourServices {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ourServiceBlock img {
        width: 26%;
    }

    .ourServiceBlock {
        width: 96%;
    }

    .ourServices h3 {
        font-size: 1.36rem;
    }

    .ourServices p {
        font-size: 1.18rem;
    }

    .whyDronesBlock {
        width: 86%;
        min-height: 175px;
    }

    .whyDronesBlock img {
        width: 25%;
    }

    .whyDrones h3 {
        font-size: 1.1rem;
    }

    .whyDrones p {
        font-size: .9rem;
    }

    .lineFlexWrapBlock-right, .lineFlexWrapBlock-left, .lineFlexWrapBlock-center {
        min-height: 120px;
    }

    .aboutUs p {
        font-size: 1rem;
        padding: 0;
        line-height: 30px;
    }

    .aboutUsImage {
        width: 96%;
    }


    .lineFlexWrap h2 {
        font-size: 1.5rem;
    }

    .lineFlexWrap p {
        font-size: .7rem;
        text-align: center;
    }

    .whyDronesLine {
        justify-content: center;
        flex-direction: column;
    }

    .whyDronesBlock {
        width: 88%;
    }

    .whyDronesBlock img {
        width: 28%;
    }

    .whyDrones h3 {
        font-size: 1.6rem;
    }

    .whyDrones p {
        font-size: 1.2rem;
    }

    .card img {
        width: 80vw;
        height: auto;
    }
}

@media screen and (min-width: 240px) and (max-width: 349px) {
    .contacts {
        flex-direction: column-reverse;
        align-items: center;
    }

    .contactsRightBlock, .contactsLeftBlock {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .contactsLeftBlock {
        justify-content: center;
        align-items: center;
        padding: 30px;
    }

    .contactsRightBlock {
        height: 300px;
    }

    .contactsBlock a, .contactsBlock p {
        font-size: 1.2rem;
    }

    .contactsBlock a > svg {
        height: 32px;
    }

    .contactsBlock {
        text-align: center;
        justify-content: center;
    }

    .disappear {
        display: none;
    }

    .logo {
        display: flex;
        justify-content: center;
    }

    .order {
        margin: 0;
    }

    .orderTxt {
        width: 100%;
    }

    .orderImg img {
        width: 114%;
    }

    .order h1 {
        margin-bottom: 0;
    }

    form input, form input.submitButton {
        width: 100%;
        margin: 10px 0;
        height: 50px;
        font-size: 1.1rem;
    }

    .block {
        width: 62%;
        min-height: 182px;
    }

    .blockArrow {
        width: 62%;
        height: auto;
        min-height: unset;
    }

    .block .imgBlock img {
        width: 75%;
    }

    .blockArrow img.arrow, .blockArrow img.arrow2, .blockArrow img.arrow3, .blockArrow img.arrow4,
    .blockArrow img.arrow5 {
        animation: breath0;
        animation-iteration-count: infinite;
        animation-duration: 10s;
        animation-delay: 0s;
        transform: rotate(90deg);
        width: 30%;
    }

    .steps p {
        font-size: 1rem;
    }

    .aboutUs p {
        font-size: 1rem;
        padding: 0;
    }
    .aboutUsImage {
        width: 96%;
    }

    .ourServices {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ourServiceBlock {
        width: 96%;
    }

    .ourServices h3 {
        font-size: 1rem;
    }

    .ourServices p {
        font-size: .9rem;
    }

    .feedback h1, .whyDrones h1, .aboutUs h1, .facts h1, .ourServices h1, .steps h1, .order h1,
    h1.colorBlue {
        font-size: 1.8rem;
    }

    .lineFlexWrap h2 {
        font-size: 1.5rem;
    }

    .lineFlexWrap p {
        font-size: .7rem;
        text-align: center;
    }

    .whyDronesLine {
        justify-content: center;
        flex-direction: column;
    }

    .whyDronesBlock {
        width: 88%;
    }

    .whyDronesBlock img {
        width: 42%;
    }

    .whyDrones h3 {
        font-size: 1.4rem;
    }

    .card {
        width: 100%;
        margin-bottom: 20px;
    }

    .card img {
        width: 64vw;
        height: auto;
    }
}