/*
* Tinman.css | v1.0.0 | MIT | July 4th, 2017
* Copyright 2023, Selwyn Orren @ Linuxweb
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 04/07/2017
*/

/* Overides
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#serviceContainer, #aboutContainer, #galleryContainer, #contactContainer {
  padding-top: 121px;
  margin-top: -121px;
}

/* Layout Structure
–––––––––––––––––––––––––––––––––––––––––––––––––– */

form {
  margin-bottom: 0;
}

html {
  scroll-behavior: smooth;
}

hr {
    height: 0.5px;
}

#hamNavigation {
  display: none;
}

.onBlack {
    border-top: 1px solid #545454;  
}

.background-light {
    background-color: white;
}

.background-dark {
    background-color: black;
}

.sectionHeading {
    margin-top: 6rem;
    margin-bottom: 6rem;
    font-size: 8rem;
    color: #333;
}

.darkback-text {
    color: white;
}

.error-box {
  margin-bottom: 30px;
}

.confirmation-box {
  margin-bottom: 30px;
}

#header {
    background-color: black;
}

#footer {
    padding-top: 50px;
    background-color: black;
}

.align-right {
  text-align: right;
}


/* About Us - Vertical Tabs Panel */
    /* Style the tab */
	.tabMobileContainer {
    display: none;
  }

  .tabDesktop {
		float: left;
		background-color: #ffffff;
		width: 25%;
		height: 300px;
		margin-right: 1rem;
		padding-right: 1rem;
	  }

		/* Style the buttons that are used to open the tab content */
	  .tabContainer{
		margin-left: 0;
		margin-right: 1rem;
		margin-top: 2rem;
		min-height: 470px;
	  }

	  .tabDesktop button {
		display: block;
		background-color: inherit;
		color: black;
		/* padding: 10px 16px; */
		width: 100%;
		border: none;
		outline: none;
		text-align: center;
		cursor: pointer;
		transition: 0.3s;
	  }

		/* Change background color of buttons on hover */
	  .tabDesktop button:hover {
		background-color: #ddd;
	  }

		/* Create an active/current "tab button" class */
	  .tabDesktop button.active {
		background-color: #d01324;
		color: #ffffff;
	  }

		/* Style the tab content */
	  .tabcontent {
		float: left;
		padding: 0px 12px;
		width: 70%;
		border-left: none;
		height: auto;
	  }

	  .tabcontent p {
		font-family: 'Lato', sans-serif;
		line-height: 1.8;
		letter-spacing: 1.5px;
	  }

/* End - About Us - Vertical Tabs Panel */

#parallaxA {
    /* The image used */
    background-image: url("../images/photos/group-security-cameras-sitting-each-oth.jpg");
    min-height: 400px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Center scrolling banner */
    position: relative;
  }

#parallaxB {
    /* The image used */
    background-image: url("../images/photos/surveillance-cctv-security-camera-3d-rendering.jpg");
    min-height: 400px;
    margin-top: 70px ;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
     /* Center scrolling banner */
     position: relative;


    /* display:flex;
    align-items: center;
    justify-content: center; */
  }

/* #parallaxB h1 {
    font-size: 7rem;
    text-align: center;
    width: 100%;
  } */

#parallaxC {
    /* The image used */
    background-image: url("../images/photos/cyber-security-network-internet-network-security-padlock-internet-technology-protecting-data.jpg");
    min-height: 400px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Center scrolling banner */
    position: relative;
  
  }


/* Scrolling Banner   */

div.jp-title{
    position: absolute;
    top: 35%;
    height:100px;
    width:100%;
    display:block;
    overflow:hidden;
    background: transparent;
}
.scrollingtext{
    position: absolute;
    white-space: nowrap;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 100px;
    line-height: 110px;
    background: transparent;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #DBFDD3E8;
}

#parallaxB div.jp-title .scrollingtext {
  -webkit-text-stroke-color: black;  
}

/* End - Scrolling Banner */

/* Service Card */

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 25px;
    margin-top: 30px;
}

.card div i {
    color: #d01324;
    font-size: 50px;
    display: block;
    margin: 20px auto;
    width: 15%;
}

.card h5 {
    color: #d01324;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1.4px;
    line-height: 1;
    text-align: left;
    font-size: 36px;
}

.card p {
    color: #333;
    text-align: left;
    font-family: 'Lato', sans-serif;
    line-height: 1.4;
    letter-spacing: 1px;
    font-size: 16px;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.service-card {
  min-height: 300px;
}

#statPanel {
  padding-top: 60px;
  padding-bottom: 60px;
}

.statCard {
    padding: 50px 10px 75px 10px;
}

.statCard .counter {
    font-family: 'Bebas Neue', sans-serif;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #333;
    color: #ffffff;
    font-size: 5rem;
}

.statCard .perc-counter {
  font-family: 'Bebas Neue', sans-serif;
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #333;
  color: #ffffff;
  font-size: 5rem;
}

.statCard h3 {
    margin-top: -20px;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: #d01324;
    font-size: 1.5rem;
}

/* End - Service Cards */

/* Contact Card */

.contactCard {
    margin-bottom: 50px;
}

.contactCard input {
    width: 100%
}

.contactCard textarea {
    width: 100%
}

.contactCard button {
    color: #ffffff !important;
    background-color: #d01324 !important;
    border-color: #d01324 !important;
}

.contactCard button:hover {
    color: #ffffff !important;
    background-color: #910e19 !important;
    border-color: #910e19 !important;
}

.btn-submit {
  margin-top: 20px;
}

.addressCard p {
    margin: 0;
}

#social-media a {
  display: inline-block;
  margin-right: 35px
}

#social-media a i {
  font-size: 35px;
}

.map {
    margin-top: 30px;
	  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.map:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.map iframe {
  display: block;
}

/* End - Contact Card */


/* Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#hamContainer {
  display: none;
}

#navigation {
    position: fixed;
    float: left;
    text-align: left;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    z-index: 10;
  }

  #navigation ul {
    text-align: right;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    display: inline-block;
    margin: 30px 0 25px;
    padding: 0;
  }

  #navigation li {
    float: left;
    position: relative;
	  list-style: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    color: #FFFFFF;
    margin-bottom: initial;
  }

  #navigation li a {
    display: block;
	  padding: 17px 16px 17px 16px;
	  text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing:1px;
  }

  #navigation li a:hover {
    color: #ffffff;
  }

  #navigation ul ul {
    position: absolute;
    right: 0;
    top: 100%;
    visibility: hidden;
    opacity: 0;
    min-width:180px;
    z-index: 999;
  }

 #navigation ul ul ul {
    left: 100%;
    top: 0;
  }
  #navigation ul ul a {
    min-width:150px;
    color:#fff;
  }
  #navigation ul li:hover > a {
    color: #fff;
  }
  #navigation li:hover, #navigation li:hover li {
    background: #999;
    color: #fff;
  }
  #navigation li li:hover, #navigation li li:hover li {
    background: #333;
  }
  #navigation li li li:hover {
    background: #999;
  }
  #navigation li:hover > ul {
    visibility: visible;
    opacity: 1;
  }

  #navigation li:has(> a.active) {
    background: #d01324;
  }

  #navigation li a.active > a {
    color: #fff;
  }

  #logoContainer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 5px !important;
    margin-top: 23px !important;
    padding: 5px;
    text-align: center;
  }

  #menuContainer {
    text-align: right;
	margin-bottom: 0 !important;

  }


/* Sub Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Responsive Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Contact Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Gallery
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Image Sliders
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Styling for the Home Slider */

.css-slider-wrapper {
    float: none;
    display: block;
    background: #FFF;
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
  }

  .slider {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
    -webkit-transition: -webkit-transform 400ms;
    transition: -webkit-transform 400ms, transform 400ms;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  /* Slides Background Color */
  .slide-1 {
    background: #000000;
    left: 0;
  }
  .slide-2 {
    background: #000000;
    left: 100%
  }
  .slide-3 {
    background: #000000;
    left: 200%
  }

  .slide-4 {
    background: #000000;
    left: 300%
  }

  .slider {
    display: flex;
    justify-content: flex-start;
  }
  .slider-content {
    width: 900px;
    padding-left: 100px;
  }

  /* Slider Inner Slide Effect */
  .slider h2 {
    color: white;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 80px;
    line-height: 1.1;
    opacity: 0;
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
    margin-top: 0;
    letter-spacing: 2.5px;
  }

  .slider h4 {
    font-size: 30px;
    font-family: 'Prompt', sans-serif;
    color: white;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 2.5px;
    opacity: 0;
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
  }

  .slider p {
    font-size: 22px;
    font-family: 'Lato', sans-serif;
    color: white;
    line-height: 1.4;
    letter-spacing: 1.5px;
    opacity: 0;
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
  }

  .slider img {
    position: absolute;
    top: 0;
    left: 0;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    min-height: 100%;
    width: 105%;
    opacity: 0;
    /* -webkit-transform: translateX(400px);
    transform: translateX(400px); */
  }

  .slide-radio1, .slide-radio2, .slide-radio3, .slide-radio4 {
    z-index: 2;
  }


/* Slider Animations */
.slider h2 {
    -webkit-transition: opacity 400ms, -webkit-transform 400ms;
    transition: transform 400ms, opacity 400ms;
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
  }
  .slider h4 {
    -webkit-transition: opacity 400ms, -webkit-transform 400ms;
    transition: transform 400ms, opacity 400ms;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
  }
  .slider p {
    -webkit-transition: opacity 400ms, -webkit-transform 400ms;
    transition: transform 400ms, opacity 400ms;
    -webkit-transition-delay: 0.75s;
    transition-delay: 0.75s;
  }

  .slider > img {
    -webkit-transition: opacity 400ms, -webkit-transform 400ms;
    transition: transform 400ms, opacity 400ms;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

/* Slider Pagger */
  .slider-pagination {
    position: absolute;
    bottom: 30px;
    width: 575px;
    left: 100px;
    display: flex;
    align-items: center;
    z-index: 1;
  }
  .slider-pagination label {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #fff;
    margin: 0 10px;
    cursor: pointer;
  }

  /* Slider Pagger Event */
.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4 {
  width: 14px;
  height: 14px;
  border: 2px solid #ea2e49;
  background: transparent;
}

/* Slider Slide Effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%);
  }

.slide-radio1:checked ~ .slide-1 h2,
.slide-radio2:checked ~ .slide-2 h2,
.slide-radio3:checked ~ .slide-3 h2,
.slide-radio4:checked ~ .slide-4 h2,
.slide-radio1:checked ~ .slide-1 h4,
.slide-radio2:checked ~ .slide-2 h4,
.slide-radio3:checked ~ .slide-3 h4,
.slide-radio4:checked ~ .slide-4 h4,
.slide-radio1:checked ~ .slide-1 p,
.slide-radio2:checked ~ .slide-2 p,
.slide-radio3:checked ~ .slide-3 p,
.slide-radio4:checked ~ .slide-4 p,
.slide-radio1:checked ~ .slide-1 > img,
.slide-radio2:checked ~ .slide-2 > img,
.slide-radio3:checked ~ .slide-3 > img,
.slide-radio4:checked ~ .slide-4 > img
{
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}


/* Carousels
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Owl Carousel Styles */

.owl-carousel {
    margin-top: 20px;
    margin-bottom: 90px;
}

.carousel-img {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20rem;
    overflow: hidden;
}

.carousel-img img {
    height: 100%;
    width: auto;
}

.owl-dots {
  display: none;
}

/* About Us - Carousel */

.imageContainer {
    width: 100%;
    margin-top: 3rem;
    animation: fadeIn 500ms;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.imageContainer:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.imageContainer img {
    width: 100%;
    display: block;
}

/* End - Carousel Styles */



/* Back to Top
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Cookie Cutter
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Animations
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.heartbeat {
	-webkit-animation-name: heartbeat;
	        animation-name: heartbeat;
	-webkit-animation-duration: 1.5s;
	        animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
}

@-webkit-keyframes heartbeat {
	0% {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1); }
	50% {
	-webkit-transform: scale(0.8);
	        transform: scale(0.8); }
	100% {
	-webkit-transform: scale(1);
	        transform: scale(1); }
}

@keyframes heartbeat {
	0% {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1); }
	50% {
	-webkit-transform: scale(0.8);
	        transform: scale(0.8); }
	100% {
	-webkit-transform: scale(1);
	        transform: scale(1); }
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/*
The following media queries are calculated using the universal em measurement
and are geared toward the base grid as setup in the skeleton.css file. As a base its using 16px
Example
=============
30em = 480px
60em = 960px
So we are targeting all three core viewpoints for each typical device.
*/


/* Mobile Devices */
@media screen and (max-width: 30em) {

.scrollingtext {
  font-size: 70px;
}

  /* Navigation */

  #serviceContainer, #aboutContainer, #galleryContainer, #contactContainer {
    padding-top: 70px;
    margin-top: -70px;
}

#hamNavigation {
    display: block;
    position: absolute;
    right: 30px;
  }

#navigation {
  max-height: 70px;
}

#menuContainer {
  display: none;
}

#hamContainer {
  display: block;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  position: relative;
  right: -11px;
  top: 63.6px;
}

#logoContainer {
  text-align: left;
  max-width: 100px;
  max-height: 40px;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
}

  #logoContainer img {
    max-height: 40px;
  }

/* Hide the links inside the navigation menu (except for logo/home) */
#hamContainer #myLinks {
  display: none;
  position: relative;
}

/* Style navigation menu links */
#hamContainer a {
  text-decoration: none;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing:1px;
  padding: 14px 60px;
  display: block;
}

/* Style the hamburger menu */
#hamNavigation span.icon {
  color: #ffffff;
  padding: 14px 16px;
  display: block;
  position: absolute;
  font-size: 25px;
  margin-top: 10px;
  right: -11px;
}

/* Add a grey background color on mouse-over */
/* #hamContainer a:hover {
  background: #999;
  color: #ffffff;
} */

/* Style the active link */
.active {
  background-color: #d01324;
  color: white;
}

.sectionHeading {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
    font-size: 2.8rem;
}

/* End - Hamburger Navigation */

/* Hero Slider */

.slider img{
  height: 100vh;
  width: auto;
  overflow: hidden;
}

.slider-content {
  width: auto;
  padding: 20px;
}

/* Slider Inner Slide Effect */
.slider h2 {
  font-size: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.slider h4 {
  font-size: 20px;
}

.slider p {
  font-size: 15px;
}

.slider-pagination {
  display: none;
}

/* About Us Tabs */

#storyHead {
  text-align: center;
  font-size: 36px;
}

.aboutHead {
  font-size: 30px;
}

.aboutRow {
  margin: 0px;
}

.tabMobileContainer {
  display: block;
}

.tabDesktop {
  display: none;
}

.tabMobile {
  width: 100%;
  height: auto;
  margin-right: 0rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 20px;
  margin-bottom: 15px;
  display: inline-block;
  text-align: center;
  background: #000000;
}

  .tabMobile button {
    color: #ffffff;
    padding: 0px 8px 0px 8px;
    margin: 5px 1px 5px 1px;
    font-size: 14px;
    letter-spacing: 1.0px;
    width: auto;
    display: inline-block;
    border: none;
		outline: none;
		text-align: center;
		cursor: pointer;
		transition: 0.3s;
  }

  /* Create an active/current "tab button" class */
	  .tab button.active {
		background-color: #d01324;
		color: #ffffff;
	  }

  /* Style the tab content */
  .tabcontent {
    padding: 10px;
    width: 110%;
    font-size: 14px;
  }

  .tabcontent p {
    font-family: 'Lato', sans-serif;
    line-height: 1.5;
    letter-spacing: 1.2px;
    margin-bottom: 0px;
  }

/* End - About Us - Vertical Tabs Panel */

  div.carousel-container {
    display: none;
    /* margin-top: -40px; */
  }

/* Services Section */

  .card.first-card {
    margin-top: 0px;
  }  

  .card h5 {
    font-size: 21px;
  }

  .card p {
    font-size: 14px;
  }

  .statCard {
    padding: 0px 10px 5px 10px;
  }

/* Gallery Section */

.owl-nav {
  font-size: 40px !important;
}

.owl-carousel {
  margin: 0px 0px 90px 0px;
}

.carousel-img img {
  object-fit: cover;
}

/* Contact Us */

.contactCard {
  margin-top: 0px;
  margin-bottom: 8px;  
}

.addressCard {
  margin-top: 0px;
}

#social-media a {
  margin: 10px;
}

#social-media a i{
  font-size: 40px;
}

.captcha {
  transform:scale(0.68);
  transform-origin:0 0;
}

.map {
  margin-bottom: 50px;
}

#footer, .align-right {
  text-align: center;
}

}

/* Phablet to Desktop */
@media screen and (min-width: 30.0625em) and (max-width: 60em) {}

/* Desktop to HD Desktop */
@media screen and (min-width: 60.0625em) {}