:root {

  /* COLORS */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #455560;
  --color-red: #ee2e24;
  --color-blue: #eaf7fd;
  --color-blue-deep: #48c8ee;
}


html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* BODY MAIN PAGE 
============================================================================ */

.main-page {
  background-color: var(--color-black);
}

/* [END MAIN PAGE] ======================================================= */

/* BODY ABOUT US 
============================================================================ */

.about-us {
  background-color: var(--color-white);
}

/* [END BODY ABOUT US] ======================================================= */


/* FPG CONTENT 
============================================================================ */

.tfpg {
  background-color: var(--color-white);
}

/* [END FPG CONTENT] ======================================================= */

/* NAVBAR 
============================================================================ */

nav {
  background-color: var(--color-black);
  color: var(--color-white);
  border-bottom: 1px solid var(--color-red);
  animation-duration: 1s;
  animation-delay: 0.3s;
}

nav a {
  color: var(--color-white);
  text-decoration: none;
}

nav a:hover {
  color: var(--color-red);
}

nav a.active {
  color: var(--color-red);
  font-weight: bold;
}

nav .nav-item:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  -moz-text-decoration-color: var(--color-red);
}


nav .navbar-brand {
  display: inline-flex;
  margin-right: 0;
  animation-delay: 1s;
}

nav .navbar-brand img {
  height: 60px;
  width: auto;
}

nav .logo-text {
  display: inline-block;
  line-height: 20px;
}

nav .navbar-toggler {
  animation-delay: 1s;
}

nav .collapse.navbar-collapse {
  animation-delay: 1s;
}

nav .nav-link {
  text-transform: uppercase;
  font-size: 1.2rem;
  padding: 8px 16px 0;
}

/* [END NAVBAR] ======================================================= */


/* MAIN PAGE CONTENT 
============================================================================ */

.main_page-content {
  min-height: calc(100vh - 80px);
}

.main_page-content .main-image {
  width: 370px;
  max-width: 100%;
  height: auto;
  animation-delay: 1.7s;
}

.main_page-content .sc-img {
  animation-delay: 2s;
}

.main_page-content .sal-img {
  animation-delay: 2.4s;
}

.main_page-content .etb-img {
  animation-delay: 2.8s;
}

.main_page-content .cd-img {
  animation-delay: 3.6s;
}

.main_page-content .fp-image {
  animation-delay: 3.2s;
}

/* [END MAIN PAGE CONTENT] ================================================= */


/* ABOUT US CONTENT 
============================================================================ */

.about-us_content {
  margin-top: 120px;
}

.about_us-text {
  font-size: 1rem;
  animation-delay: 2.3s;
}

.about_us-text br {
  line-height: 1.8rem;
}

.list-title {
  color: var(--color-red);
  font-weight: bold;
  font-size: 1rem;
}

.about-us_content .list-unstyled {
  font-size: 0.9rem;
}


.about_us-main_image {
  animation-delay: 2s;
}

.about_us_image_1 {
  animation-delay: 2.6s;
}

.about_us_image_2 {
  animation-delay: 2.8s;
}

.about_us_image_3 {
  animation-delay: 3s;
}

.about_us-list-1 {
  animation-delay: 3.2s;
}

.about_us-list-2 {
  animation-delay: 3.4s;
}

.about_us-list-3 {
  animation-delay: 3.6s;
}

.about_us-list-4 {
  animation-delay: 3.8s;
}

/* [END ABOUT US CONTENT] ======================================================= */

/* PRODUCTS CONTENT 
============================================================================ */

.products {
  margin-top: 120px;
}

.products h3 {
  color: var(--color-red);
}

.products .animated {
  animation-delay: 2s;
}

/* [END PRODUCTS CONTENT] ======================================================= */

/* FPG CONTENT
============================================================================ */

.fpg-content {
  margin-top: 90px;
  min-height: calc(100vh - 130px);
  background: url(./../img/format_prints_group-page/bg-image.png) no-repeat;
  background-position: center center;
  background-size: contain;
  animation-delay: 1.8s;
}

.fpg-content h1 {
  font-weight: bolder;
}

.fpg-content a {
  color: var(--color-red);
  font-size: 0.8rem;
}

.fpg-content a img {
  height: 100px;

}

.fpg-content .animated {
  animation-delay: 2s;
}

/* [END FPG CONTENT] ======================================================= */

/* CONTACT US CONTENT 
============================================================================ */

.contact_us {
  margin-top: 100px;
  min-height: calc(100vh - 100px);
}


.contact_us hr {
  height: 1px;
  color: var(--color-blue-deep);
  background-color: var(--color-blue-deep);
  border: 0;
}

.contact_us .contact-form {
  padding: 25px;
  background-color: var(--color-blue-deep);
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
}

.contact-form:after {
  content: "\A";
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent var(--color-blue-deep) transparent transparent;
  position: absolute;
  left: -14px;
  bottom: 20px;
  z-index: -9999;
}

.contact_us label {
  color: var(--color-white);
  margin-bottom: 0;
}

.contact_us .btn {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.contact_us .animated {
  animation-delay: 2s;
}

.contact_us p {
  font-size: 0.9rem;
  line-height: 1rem;
}

.contact_us p b {
  font-size: 1rem;
  line-height: 2rem;
}

.contact_us .img-fluid {
  max-height: 50px;
}

.success_message {
  min-height: calc(100vh);

}

/* [END CONTACT US CONTENT] ================================================ */

/* =========================================================================
============================================================================
MEDIA 
============================================================================
============================================================================ */

@media all and (max-width:1199px) {
  /* NAVBAR =============================================================== */

  nav .logo-text {
    font-size: 1rem;
  }

  nav .nav-link {
    font-size: 1rem;
    padding-top: 4px;
  }

  /* [END NAVBAR] ======================================================= */

  /* FPG CONTENT ========================================================= */

  .fpg-content a img {
    height: 90px;
  }

  /* [END FPG CONTENT] ======================================================= */
}


@media all and (max-width:991px) {
  /* NAVBAR =============================================================== */

  nav .navbar-brand img {
    height: 50px;
  }

  nav .logo-text {
    font-size: 0.7rem;
    line-height: 1.5;
  }

  nav .nav-link {
    font-size: 0.76rem;
    padding-top: 0;
  }

  /* [END NAVBAR] ======================================================= */

  /* FPG CONTENT ========================================================= */

  .fpg-content a img {
    height: 66px;
  }

  .fpg-content .display-2 {
    font-size: 4rem;
  }

  /* [END FPG CONTENT] ======================================================= */


}


@media all and (max-width:767px) {
  /* NAVBAR =============================================================== */

  nav .navbar-brand img {
    height: 40px;
  }

  nav .logo-text {
    font-size: 14px;
    line-height: 14px;
  }

  nav .nav-link {
    font-size: 1.4rem;
    padding-top: 15px;
  }

  /* [END NAVBAR] ======================================================= */

  /* FPG CONTENT ========================================================= */

  .fpg-content {
    background: none;
  }

  .fpg-content a img {
    height: 100px;
  }

  .fpg-content .display-2 {
    font-size: 3rem;
  }

  .fpg-body {
    background-color: var(--color-blue);
  }

  /* [END FPG CONTENT] ======================================================= */

  /* CONTACT US 
  ============================================================================ */

  .contact-form:after {
    content: "";
    border-width: 0;
  }

  /* [END CONTACT US] ======================================================= */

}


@media all and (max-width:379px) {
  /* NAVBAR =============================================================== */

  nav .navbar-brand img {
    height: 30px;
  }

  nav .logo-text {
    font-size: 11px;
    line-height: 11px;
  }

  /* [END NAVBAR] ======================================================= */

}


/* [END MEDIA] ======================================================= */