@media screen and (min-width:20px) and (max-width:418px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 16px sans-serif;
    padding: 15px 18%;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:418px) and (max-width:1347px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 14px sans-serif;
    padding: 15px 45px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:428px) and (max-width:926px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 14px sans-serif;
    padding: 15px 45px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:844px) and (max-width:897px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 29px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:430px) and (max-width:843px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 16px sans-serif;
    padding: 15px 101px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:930px) and (max-width:932px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 16px sans-serif;
    padding: 11px 52px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:933px) and (max-width:1023px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 157px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}
@media screen and (min-width:768px) and (max-width:1024px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 3px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}

@media screen and (min-width:1024px) and (max-width:768px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 3px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}

@media screen and (min-width:1365px) and (max-width:1400px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 3px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}

@media screen and (min-width:1401px) and (max-width:4047px) {
footer {
    background-color: #0f0f0f;
    box-shadow: 0 9px 70px 0 rgb(247, 0, 255);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;
    padding: 15px 157px;
    margin-top: 50px;
    bottom: 0;
    color: #fff
}}

.footer-navigation h3 {
    margin: 0;
    font: normal 36px Cookie, cursive;
    margin-bottom: 20px;
    color: #fff
}

.footer-navigation h3 a {
    text-decoration: none;
    color: #fff
}

.footer-navigation h3 span {
    color: #5383d3
}

.footer-navigation p.links a {
    color: #fff;
    text-decoration: none
}

.footer-navigation p.company-name {
    color: #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin-top: 20px
}

@media (max-width:767px) {
    .footer-contacts {
        margin: 30px 0
    }
}

.footer-contacts p {
    display: inline-block;
    color: #ffffff;
    vertical-align: middle
}

.footer-contacts p a {
    color: #fff;
    text-decoration: none
}

.fab.footer-contacts-icon {
    background-color: #33383b;
    color: #fff;
    font-size: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    margin: 10px 15px 10px 0
}

span.new-line-span {
    display: block;
    font-weight: normal;
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2
}

.footer-about h4 {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px
}

.footer-about p {
    line-height: 20px;
    color: #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0
}

div.social-links {
    margin-top: 20px;
    color: #fff
}

.social-links a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color: #33383b;
    border-radius: 2px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;
    margin-right: 5px;
    margin-bottom: 5px
}


.social-links a svg {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 20px;
  fill: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 0px;
  margin-bottom: 3px;
}
.social-links a svg:hover {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: #33383b;
  border-radius: 2px;
  font-size: 20px;
  fill: #CB13D1;
  text-align: center;
  line-height: 35px;
  margin-right: 0px;
  margin-bottom: 3px;
}

.social a svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 20px;
  fill: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 0px;
  margin-bottom: 3px;
}
.social a svg:hover {
  display: inline-block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 20px;
  fill: #CB13D1;
  text-align: center;
  line-height: 35px;
  margin-right: 0px;
  margin-bottom: 3px;
}