@font-face {
   font-family: Gilroy;
   src: url("../fonts/Gilroy/GILROY-MEDIUMITALIC.OTF") format("opentype");
   font-weight: 500;
   font-style: italic;
}

@font-face {
   font-family: Gilroy;
   src: url("../fonts/Gilroy/GILROY-THIN.OTF") format("opentype");
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: Gilroy;
   src: url("../fonts/Gilroy/GILROY-REGULAR.OTF") format("opentype");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: Gilroy;
   src: url("../fonts/Gilroy/GILROY-BOLD.OTF") format("opentype");
   font-weight: 600;
   font-style: normal;
}

@font-face {
   font-family: Gilroy;
   src: url("../fonts/Gilroy/GILROY-BOLDITALIC.OTF") format("opentype");
   font-weight: 600;
   font-style: italic;
}

@font-face {
   font-family: Blender;
   src: url("../fonts/Blender\ Pro/BlenderPro-Medium.ttf") format("truetype"),
      url("../fonts/Blender\ Pro/BlenderPro-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: Blender;
   src: url("../fonts/Blender\ Pro/BlenderPro-Medium.ttf") format("truetype"),
      url("../fonts/Blender\ Pro/BlenderPro-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
}

@media (min-width: 1200px) {
   .container,
   .container-lg,
   .container-md,
   .container-sm,
   .container-xl {
      max-width: 980px;
   }
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
   margin: 0;
}

h1 {
   font-family: Gilroy, monospace, Helvetica, sans-serif;
   font-style: italic;
}

img {
   display: block;
   width: 100%;
   height: auto;
}

.main-section {
   /* background-color: #0143c9; */
   background-color: #272727;
   color: #fff;
   padding: 40px 0 72px 0;
}

.top-nav {
   margin-bottom: 40px;
}

.top-nav h3 {
   font-family: "Gilroy", sans-serif;
}

.logo-main {
   display: flex;
}

.logo-main img {
   width: 168px;
   height: 49px;
   object-fit: contain;
}

.logo-main h3 {
   font-family: Gilroy, Helvetica, sans-serif;
   font-style: italic;
   margin-left: 13px;
}

.contacts {
   font-family: Gilroy, sans-serif;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   letter-spacing: 0.3px;
   height: 100%;
   justify-content: center;
}

.contacts i {
   background-color: #fff;
   /* color: #0145cd; */
   color: #272727;
   transform: rotate(90deg);
   border-radius: 100%;
   padding: 4px;
   font-size: 14px;
   margin-right: 8px;
}

.contacts .phone a,
.contacts .web a {
   color: #fff;
}

.contacts .phone a strong {
   font-size: 20px;
}

.contacts .phone {
   margin-bottom: 5px;
}

.contacts .web i {
   display: flex;
   text-align: center;
}

.contacts .phone,
.contacts .web {
   display: flex;
   align-items: center;
}

.partner-wrapper {
   width: 100%;
   max-width: 280px;
   height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   /* border: 1px solid #0395f5; */
   border: 1px solid #fff;
   border-radius: 13px;
   position: relative;
   cursor: pointer;
   background-color: transparent;
   transition: all 0.5s ease;
   perspective: 1000px;
}

.partners-parent .col-lg-4.mb-5:nth-child(3n) .partner-wrapper {
   margin-left: auto;
}

.partner-wrapper .front img {
   display: block;
   width: 60%;
   height: 50%;
   fill: #fff;
   color: #fff;
   filter: brightness(0) invert(1);
}

.partner-wrapper .front img.partner-bigger {
   width: 65%;
   height: auto;
}

.partner-wrapper .front {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.partner-wrapper .front,
.partner-wrapper .back {
   position: absolute;
   background-color: #fff;
   width: 100%;
   height: 100%;
   border-radius: 13px;
   overflow: hidden;
   top: 0;
   left: 0;
   -webkit-perspective: 0;
   -webkit-transform: translate3d(0, 0, 0);
   -webkit-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   visibility: visible;
}
.partner-wrapper .front {
   /* background-color: #0145cb; */
   background-color: #272727;
   -webkit-transition: all 0.25s ease;
   -o-transition: all 0.25s ease;
   transition: all 0.25s ease;
}

.partner-wrapper .back {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background: rgb(0, 57, 173);
   font-family: Gilroy, Helvetica, sans-serif;
   font-style: italic;
   padding: 20px 0 0 0;
   position: relative;
   background: -o-linear-gradient(
      88.2deg,
      #ffffff -9.87%,
      #999999 -9.86%,
      #272727 53.55%
   );
   background: linear-gradient(
      1.8deg,
      #ffffff -9.87%,
      #999999 -9.86%,
      #272727 53.55%
   );
   /* background: #3f3f3f; */
   -webkit-box-shadow: inset 2px 2px 10px rgba(255, 255, 255, 0.5),
      inset -2px -2px 10px rgba(255, 255, 255, 0.5);
   box-shadow: inset 2px 2px 10px rgba(255, 255, 255, 0.5),
      inset -2px -2px 10px rgba(255, 255, 255, 0.5);
}

.partner-wrapper:hover {
   -webkit-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}

.partner-wrapper:hover .front {
   background: -o-linear-gradient(
      88.2deg,
      #ffffff -9.87%,
      #999999 -9.86%,
      #272727 53.55%
   );
   background: linear-gradient(
      1.8deg,
      #ffffff -9.87%,
      #999999 -9.86%,
      #272727 53.55%
   );
   /* background: #3f3f3f; */
   -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
}

/* .partner-wrapper:hover .front {
   transform: rotateY(180deg);
}

.partner-wrapper:hover .back {
   transform: rotateY(360deg);
} */

.partner-wrapper.active .front {
   transform: rotateY(180deg);
}

.partner-wrapper.active .back {
   transform: rotateY(360deg);
}

.partner-wrapper .back h4 {
   text-align: center;
   height: 30px;
   margin-bottom: 12px;
}

.partner-wrapper .back h4.smaller-h4 {
   font-size: 1.38rem;
}

.partner-wrapper .back .location {
   /* height: 45px; */
}

.partner-wrapper .back .delivery {
   position: absolute;
   bottom: 60px;
}

/* .partner-wrapper .back .location.short-height {
   height: 30px;
}

.partner-wrapper .back .location.large-height {
   height: 55px;
} */

.partner-wrapper .back .location span {
   line-height: 18px;
   max-height: 55px;
   overflow: hidden;
}

.partner-wrapper .back .location,
.partner-wrapper .back .delivery {
   font-family: Blender, monospace;
   font-style: normal;
   display: flex;
   justify-content: flex-start;
   padding: 0 11% 0 12%;
}

.partner-wrapper .back .location img,
.partner-wrapper .back .delivery img {
   width: 25px;
   height: 25px;
   margin-right: 15px;
   font-size: 25px;
   filter: brightness(0) invert(1);
}

.partner-wrapper .back .socials,
.partner-wrapper .back .phone-contact {
   /* background-color: #023fba; */
   background-color: #272727;

   border-radius: 13px;
   padding: 7px 10px;
   width: 170px;
   margin: 15px auto 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 15px;
   /* box-shadow: inset 2px 2px 1px #042f85,
      inset -1px -1px 1px rgb(255 255 255 / 50%); */
   box-shadow: inset 2px 2px 1px #fff,
      inset -1px -1px 1px rgb(255 255 255 / 50%);
}

.partner-wrapper .back .phone-contact {
   display: none;
   justify-content: center;
   flex-direction: column;
   bottom: 10px;
   margin: 0;
   padding: 5px;
   min-height: 40px;
}

.partner-wrapper .back .phone-contact a {
   color: #fff;
   font-style: normal;
   font-weight: 300;
   font-size: 13px;
}

.partner-wrapper .back .phone-contact a strong {
   color: #fff;
   font-weight: 500;
   letter-spacing: 1px;
}

.partner-wrapper .back .socials a,
.partner-wrapper .back .socials span {
   /* color: #023eb6; */
   color: #272727;
   width: 24px;
   height: 24px;
   background-color: #fff;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 220ms ease;
}

.partner-wrapper .back .socials span i.fa-phone {
   transform: rotate(90deg);
}

.partner-wrapper .back .socials a div {
   width: 21px;
   height: 21px;
   /* background-color: #023eb6; */
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   border-radius: 100%;
}

.partner-wrapper .back .socials a.empty-url {
   background-color: #888;
   /* background-color: #3463c4; */
   pointer-events: none;
   cursor: default;
}

.partner-wrapper .back .socials a.empty-url:hover {
   text-decoration: none;
   color: #023eb6;
}

.partner-wrapper .back .socials a.unclickable {
   /* pointer-events: none; */
}

.partner-wrapper .back .socials a:hover,
.partner-wrapper .back .socials span:hover {
   text-decoration: none;
   color: #fff;
   background: linear-gradient(
      180deg,
      #023fba 0%,
      #023fba 99.99%,
      rgba(255, 255, 255, 0) 100%
   );
   box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.1),
      inset 0px 2px 2px rgba(0, 0, 0, 0.2);
}

.partner-wrapper .back .socials a:hover i.unique {
}

@media (max-width: 991.98px) {
   .top-nav h3 {
      font-size: 1.7rem;
   }
   .partners-parent .col-lg-4.mb-5:nth-child(3n) .partner-wrapper {
      margin-left: 0;
   }
   .partners-parent .col-lg-4.mb-5:nth-child(2n) .partner-wrapper,
   .partners-parent .col-lg-4.mb-5:nth-child(2n) .partner-wrapper.m-auto {
      margin-left: auto !important;
      margin-right: 0 !important;
   }
   .partner-wrapper.m-auto {
      margin-left: 0 !important;
   }
}

@media (max-width: 768px) {
   .partners-parent .col-lg-4 .partner-wrapper {
      margin: 0 auto !important;
   }
   .partners-parent .col-lg-4.mb-5:nth-child(2n) .partner-wrapper,
   .partners-parent .col-lg-4.mb-5:nth-child(2n) .partner-wrapper.m-auto {
      margin-left: auto !important;
      margin-right: auto !important;
   }
   .top-nav {
      margin-bottom: 30px;
   }
   .logo-main img {
      width: 80%;
      height: auto;
   }
   .top-nav h3 {
      margin-top: 15px;
   }
   .contacts a {
      font-size: 14px;
   }
   .contacts .phone a strong {
      font-size: 16px;
   }
   .contacts .phone,
   .contacts .web {
      width: 100%;
   }
   .contacts .phone {
      margin-bottom: 0;
   }
   .contacts i {
      padding: 3px;
      font-size: 12px;
   }
}