/* * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
} */

.bgr {
   background-image: url(../image/portrait-male-security-guard-with-uniform.jpg);
   /* Image by <a href="https://www.freepik.com/free-photo/portrait-male-security-guard-with-uniform_41554911.htm">Freepik</a> */
   /* height: 100vh;
   width: 100vw; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
}

.bgr2 {
   background-image: url(/);
   /* https://i.blogs.es/2e1551/jobsite-security-camera-2427499_1280/1366_2000.jpg */
   height: 100vh;
   width: 100vw;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;
}

#borde {
   margin-top: 85px;
   padding-top: 250px;
   font-weight: bold;
   font-size: 6rem;
   z-index: 1;
   text-shadow:
      1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000,
      -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000,
      -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
      0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000,
      2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000,
      1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000,
      -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
}

#bordecito {
   font-weight: bold;
   font-size: 3.5rem;
   z-index: 1;
   text-shadow:
      1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000,
      -1px -1px 0 #000, 0px 1px 0 #000, 0px -1px 0 #000,
      -1px 0px 0 #000, 1px 0px 0 #000, 2px 2px 0 #000,
      -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000,
      0px 2px 0 #000, 0px -2px 0 #000, -2px 0px 0 #000,
      2px 0px 0 #000, 1px 2px 0 #000, -1px 2px 0 #000,
      1px -2px 0 #000, -1px -2px 0 #000, 2px 1px 0 #000,
      -2px 1px 0 #000, 2px -1px 0 #000, -2px -1px 0 #000;
}

.bg-gradiant {
   background-color: #1392FD;
}

.miicono {
   font-size: 32px;
   color: #0804d4;
}

.elicono {
   font-size: 32px;
   color: #85C34A;
}

.carousel-caption {
   width: 300px;
   margin-inline: auto;
}

.shadows:hover {
   box-shadow: 5px 5px 5px 5px #2c80fd;
}

/* #demo2{
   inline-size: 80vh;
   width: 80vh;
} */
/* .container {
   padding: 0.65rem 0;
} */

@media only screen and (min-width : 200px) {
   .bgr {
      background-image: url(../image/portrait-male-security-guard-with-uniform.jpg);
      /* Image by <a href="https://www.freepik.com/free-photo/portrait-male-security-guard-with-uniform_41554911.htm">Freepik</a> */
      height: 100vh;
      width: 100vw;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
   }

   .bgr2 {
      background-image: url(../image/jobsite-security-camer.jpg);
      /* https://i.blogs.es/2e1551/jobsite-security-camera-2427499_1280/1366_2000.jpg */
      height: 100vh;
      width: 100vw;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
   }

   .navbar-brand {
      font-size: 16px;
   }

   .navbar-nav {
      font-size: 10px;
   }

   #borde {
      padding-top: 90px;
      font-size: 38px;
   }

   #bordecito {
      font-size: 1.5rem;
   }

   .carousel-caption {
      font-size: 0.7rem;
      width: 180px;
      margin-inline: auto;
   }
}

@media only screen and (min-width : 768px) {
   .navbar-brand {
      font-size: 1.5rem;
   }

   #borde {
      font-size: 6rem;
   }

   #bordecito {
      font-size: 3.5rem;
   }

   .carousel-caption {
      font-size: .9rem;
      width: 300px;
      margin-inline: auto;
   }
}

@media only screen and (min-width : 992px) {
   .navbar-brand {
      font-size: 2rem;
   }

   #borde {
      font-size: 8rem;
   }

   #bordecito {
      margin-top: 20px;
      font-size: 4rem;
   }
}