/************************
********Typography*******
*************************/

@import url('https://fonts.googleapis.com/css?family=Orbitron|Dosis|Quattrocento+Sans');
/* USE AS HEADER BIG CAPTION: font-family: 'Orbitron', sans-serif; */
/* USE AS SUB HEADER CAPTION: font-family: 'Dosis', sans-serif; */
/* USE AS EVERYTHING ELSE   : font-family: 'Quattrocento Sans', sans-serif; */

html
{
	scroll-behavior: smooth;
}

body {  
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #c1c1c1;
  background-color: #343D46;
}

.float-shadow
{
	border: 1px solid #101010;
	-webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.75);
}

.round-cnr
{
  border-radius: 7px;
}

@media only screen and (max-width : 992px)
{
	.round-cnr
	{
	  margin: 10px 0; 
	}
}

.ContentWrapper
{
	/* Fix for Chrome over scrolling when Divs are hidden */
	overflow:hidden;
}

p
{	
	font-family: 'Quattrocento Sans', sans-serif;
	font-size: 16px;
}

p.Big
{
	font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
  color: #c1c1c1;
}

h1
{	
	font-family: 'Orbitron', sans-serif;	
}

h1 small {
    display: block;       /* ensures it sits below the main H1 */
    font-size:50%;       /* adjust as needed */
    font-weight: thin;  /* optional, less bold than H1 */
    color: #CCC;          /* subtle gray for softer appearance */
    line-height: 1.4;     /* spacing under the H1 text */
}

.heading h1
{
	font-family: 'Dosis', sans-serif;
	font-size: 45px;
}

h2 {
  
  font-family: 'Dosis', sans-serif;
  font-size: 30px;
  margin-bottom: 20px;
}

h3 {
  
  font-family: 'Dosis', sans-serif;
  font-size: 22px;
}

.heading h2
{
	font-size: 45px;
}

hr.fadeToRight
{
	border: 0;
	height: 2px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0)); 
}

/* Predefined margins */
.mb-d
{
	margin-bottom: 30px;
}
.mt-d
{
	margin-top: 30px;
	
}

.space-t-5
{
	margin: 20px 0 0 0;	
}

.green-text
{
	color: #00CC00;
}

.GreenTxt
{
	color: #00CC00 !important;
}
.GreenTxt:hover
{
	color: #0099FF !important;
}

li
{
	margin-bottom: 10px;
}
li:last-child
{
	margin-bottom: 0px;
}

/*--------------------------------------------------------------
# Back to Top Styles
--------------------------------------------------------------*/
.back-to-top
{
    position: fixed;
    display: none;
    background: rgba(0, 0, 0, 0.50);
	color: #00CC00;
	right: 45px;
    bottom: 45px;
    z-index: 99;	
	border: none !important;
	line-height: 25px;
	text-aligh: center;
	margin: 0 auto;	
	width: 40px;
	height:40px;
	transition: all 0.3s ease-in-out;	
	outline: none;
}
.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active
{
	color: #0099FF;
	background: #000000;	
	outline: none;
}
@media(max-width: 990px)
{
	.back-to-top
	{
		right: 5px;
		bottom: 5px;	
		outline: none;
	}
}

/*************************
******Parallax BG CSS*****
**************************/

.parallax {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  
  background-image: url(../images/CBBG.jpg);  
}

.parallax-Solstus {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  
  background-image: url(../images/sl.jpg);  
}

.parallax-PowerSentinel 
{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  
  background-image: url(../images/s2.jpg);  
}

.parallax-DJ 
{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;  
  background-image: url(../images/CBBG-DJ.jpg);  
}

.parallax,
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6 {
  color: #fff;
}

.parallax input[type="text"],
.parallax input[type="text"]:hover,
.parallax input[type="email"],
.parallax input[type="email"]:hover,
.parallax input[type="url"],
.parallax input[type="url"]:hover,
.parallax input[type="password"],
.parallax input[type="password"]:hover,
.parallax textarea,
.parallax textarea:hover {
  font-weight: 600;
  color: #fff;
}

.parallax textarea
{
	color: #000 !important;
}

#SuccessSection
{
	padding-top: 8%;
	height: 100vh;
}

.btn {
  border: 0;
  border-radius: 0;  
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

.btn-more
{
	border: 1xp solid #101010;
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	color: #fff;
	background: #101010;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
	margin: 10px 0 20px 0 !important;
	display:block;  
}

.btn-more-Small
{
	border: 1xp solid #101010;
	border-radius: 5px;
	padding: 10px;
	width: 30%;
	color: #fff;
	background: #101010;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms; 
}

.btn-more:hover, .btn-more-Small:hover
{
	color: #000;
	background: #00CC00;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
}

.btn.btn-primary:hover {
	background-color: #017fb5;
	color: #00CC00;
}

.btn-dark
{
	cursor: pointer;
	border: 1xp solid #000000 !important;
	border-radius: 5px;
	padding: 10px;
	width: 100%;
	color: #CACACA;
	background: #101010;
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
	margin: 10px 0 20px 0 !important;
	display:block;  
	text-align: center;
}
.btn-dark:hover
{
	cursor: pointer;
	color: #00cc00;
	background: #000;
}

/*************************
	Navigation Header 
**************************/

.navbar-header
{
	padding: 0;
	margin: 0;
}	

.navbar-brand
{
	padding: 2px 0 0 0;
	margin: 0;
}

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

.main-nav
{
	padding: 8px 0 0 0;
    background: rgba(20, 20, 20, 0.5) !important; /* semi-transparent */
    backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px); /* Safari support */
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);	
	height: 60px;
}

/* --- NAV LINKS --- */
.navbar-nav > li > a {
    color: #e0e0e0 !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    transition: all 0.25s ease;
    line-height: 1.2em;
    height: auto;
	border-radius: 8px;
	margin: 0 5px;
}

/* Modern hover effect: subtle scale + glowing text */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus
{
    color: #00cc00 !important;
    background: rgba(20, 20, 20, 0.90) !important;
}

/* --- ACTIVE ITEM --- */
.navbar-right li.active > a {
    color: #00cc00 !important;
    background: rgba(20, 20, 20, 0.90); /* semi-transparent dark gray */
}

/* Remove ugly bootstrap bottom border */
.navbar-right li.active:after {
    display: none !important;
}

/* --- DROPDOWNS — DESKTOP --- */
.nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
}

.nav-link.dropdown-toggle
{
	border-radius: 8px 8px 0 0;
}

.dropdown-menu {
    position: absolute;
	left: 5px !important;
    right: 0;
    width: 350px;
    margin-top: 0;
    background: rgba(20, 20, 20, 0.90); /* semi-transparent dark gray */
    border: none;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    backdrop-filter: none; /* remove, does nothing here */
	border-radius: 8px;	
}

/* Dropdown links */
.dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 20px;
    color: #ddd;
    text-transform: uppercase;
    font-size: 13px;
    transition: all 0.2s ease;
    background: transparent;
}

/* Dropdown items hover & active */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active {
    color: #00CC00 !important;          /* highlight text green */
    background: rgba(20, 20, 20, 0.90); /* semi-transparent dark gray */ /* subtle highlight */
}

.TargetActive
{
	color: #00CC00 !important;
	background: rgba(20, 20, 20, 0.90) !important;
}

/* Hamburger button */
.navbar-header .navbar-toggle {
	display: none;
	width: 35px;
    height: 35px;
    border: 0px;
    background: transparent;
    padding: 0px 6px;
    position: relative;          /* keep Bootstrap positioning */
    cursor: pointer;
	margin: 5px;
	transition: all 0.3s ease;
}

/* Remove default focus outline */
.navbar-header .navbar-toggle:focus,
.navbar-header .navbar-toggle:hover {
	outline: none;
}

/* Hamburger lines */
.navbar-toggle .icon-bar {
    display: block;      /* ensures it renders as a block */
    width: 100%;         /* full width of button */
    height: 3px;         /* thickness */
    background-color: #00CC00 !important; /* force green */
    border-radius: 2px;
    margin: 5px 0;       /* spacing between bars */
    transition: all 0.3s ease;
}
/* Optional hover effect */
.navbar-header .navbar-toggle:hover .icon-bar,
.navbar-header .navbar-toggle:focus .icon-bar {
	background-color: #0099FF !important;
}

/* --- Tablet Custom Nav --- */
@media (min-width: 768px) and (max-width: 1100px)
{	
	header
	{
		margin-bottom: 30px; 	/* Add special padding on smaller screens */
	}

	.navbar-brand
	{
		width: 100%;
	}
	
    .main-nav {
        height: auto;		
    }

    /* Center the nav items horizontally and vertically */
    .navbar-nav {
        display: flex;
        justify-content: center;   /* horizontally center items */
        align-items: stretch;      /* make all <li> equal height */
        width: 100%;
        flex-wrap: nowrap;         /* prevent wrapping */
    }

    .navbar-nav > li 
	{
        float: none;               /* remove float */
        display: flex;             /* make <li> a flex container */
        align-items: center;       /* vertically center contents */
        margin: 0px 1px 6px 1px;
        height: 100%;              /* ensure equal height */
    }

    .navbar-nav > li > a {
        display: flex;
        align-items: center;       /* vertically center text */
        font-size: 12px;
        padding: 12px 8px;
        line-height: 1.2em;
        height: 100%;              /* match parent <li> height */
        border-radius: 8px;
    }

    /* Active item */
    .navbar-right li.active > a {
        height: 100%;
        padding: 12px 8px !important;
        line-height: 1.2em !important;
        display: flex;
        align-items: center;
    }	
	
	#OpenCartWindow .fa {
		margin-right: 5px;
		vertical-align: middle;
	}
}

/* --- MOBILE COLLAPSE MENU --- */
@media (max-width: 776px)
{	
	header
	{
		margin-bottom: 30px; /* Add special padding on smaller screens */
	}
	
	.main-nav
	{
		height: auto;
	}

    .navbar-header .navbar-toggle
	{
		display: block;
	}	
	
	.navbar-brand
	{
		display: block;
	}

    .navbar-collapse
	{
        background: #303030 !important;			
		max-height: 60vh;       
		height: 60vh;       
        overflow-y: auto !important;  
        overflow-x: hidden;
        padding-bottom: 15px;	
		-webkit-overflow-scrolling: touch;		
    }

	.navbar-nav > li > a 
	{
		padding: 14px 20px;
        font-size: 13px;
		line-height: 1.2em;
		height: auto;
		border-radius: 8px;
		margin: 0 4px;
	}

    .dropdown-menu {
        width: 100% !important;
        background: #282828 !important;
        box-shadow: none;
        border: none;
    }

    .dropdown-menu .dropdown-item {
        padding: 10px 30px;
        border-bottom: 1px solid rgba(255,255,255,0.05);	
    }

    .dropdown-menu .dropdown-item:hover {
        padding-left: 40px;
    }
}

/*****************************************/

a {
  text-decoration: none;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus, 
a:hover {
  text-decoration: none;
  outline: none
}

section {
  padding: 90px 0 60px 0; 
}

.heading {
  padding-bottom:5px;
}
.heading img{
margin: 0 auto;
}

.preloader 
{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: #343D46;
  color: #FFF;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.preloader > img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 150px;
  width: 150px;
  margin-top: -75px; /* Half of set height and width */
  margin-left: -75px;/* Half of set height and width */
  display: inline-block;

  -webkit-animation:spin 3s linear infinite;
  -moz-animation:spin 3s linear infinite;
  animation:spin 3s linear infinite;
    
}

.preloader > progress {
  position: absolute;
  top: 60%;
  left: 40%;
  right: 40%;
  width: 20%; 
}

#LoadThumb > img {
	position: inherit; 
	margin: 0 auto;
	height: 150px;
	width: 150px;
   display: inline-block;

  -webkit-animation:spin 3s linear infinite;
  -moz-animation:spin 3s linear infinite;
  animation:spin 3s linear infinite;
    
}

@media screen and (max-width:600px)
{
	.preloader > progress
	{
		position: absolute;
		top: 60%;
		left: 5%;
		right: 5%;
		width: 90%; 
	}
}

progress {
  display: block; /* default: inline-block */
  width: 100%;
  margin: 2em auto;
  padding: 4px;
  border: 0 none;
  background: #444;
  border-radius: 14px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
progress::-moz-progress-bar {
  border-radius: 12px;
  background: #00CC00;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);
  
}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  progress {
    height: 25px;
  }
}
progress::-webkit-progress-bar {
    background: transparent;
}  
progress::-webkit-progress-value {  
  border-radius: 12px;
  background: #00CC00;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3); 
} 

/*************************
********Home CSS**********
**************************/
#home-slider {
  overflow: hidden;
  position: relative;
}

#home-slider img {
	-webkit-filter: drop-shadow(0px 0px 8px #000000); /* b2ff00 */
	filter: drop-shadow(0px 0px 8px #000000);
}

@media screen and (max-width:600px)
{	
	.SiteLogo
	{
		width: 50%;
	}
}

.CastImgFrame
{		
	margin: 0 auto;
	display:block;
	border: 5px solid #00cc00;
	border-radius: 5px;
	overflow: hidden;
}

#home-slider .caption {
  position: absolute;
  top: 40%;
  margin-top: -104px;  
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  z-index: 15;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
}

#home-slider .caption h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #000000;
}

.caption .btn-start {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding:14px 40px;
  border: 1px solid #6e6d6c;
  border-radius: 4px;
  margin-top: 40px;
}

.caption .btn-start:hover {
  color: #000  
}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  background-repeat: no-repeat;
  background-size: cover;
  height: 2037px;
}

.carousel-fade .carousel-inner .item:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  //background: rgba(0,0,0,.1); /* Controls the Blackness of the Slider Overlay */
  
  background:
	radial-gradient(black 15%, transparent 16%) 0 0;
	//background-color:#282828; /* uncomment to make bg solid else its transparent */
	background-size:6px 6px;
  
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}

.left-control, .right-control {
  position: absolute;
  top: 50%;
  height: 51px;
  width: 51px;
  line-height: 48px;
  border-radius: 50%;
  border:1px solid #fff;  
  z-index: 20;
  font-size: 24px;
  color: #fff;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.left-control {
  left: -51px
} 

.right-control {
  right: -51px;
}

.left-control:hover, 
.right-control:hover {
  color: #fff;
}

#home-slider:hover .left-control {
  left:30px
} 

#home-slider:hover .right-control {
  right:30px
}

#home-slider .fa-angle-down {
  position: absolute;
  left: 50%;
  bottom: 50px;
  color: #fff;
  display: inline-block;
  width: 24px;
  margin-left: -12px;
  font-size: 24px;
  line-height: 24px;
  z-index: 999;
  -webkit-animation: bounce 3000ms infinite;
  animation: bounce 3000ms infinite;
}

.PromoVideo
{
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}

/* ==================================================
   Alerts
================================================== */

.alert {	
  	margin-bottom: 20px;
  	padding: 15px 35px 15px 15px;
	border: none;
	text-shadow: none;
  	-webkit-border-radius: 0px;
       -moz-border-radius: 0px;
          	border-radius: 0px;
  	background-color: #DBA571;	
}

.alert,
.alert h4 {
	color: #FFFFFF;	
	text-shadow: 1px 1px 2px #000000;		
}

.alert h4 {
  	margin: 0;
}

.alert ul
{	
    list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

.alert .close {
 	position: relative;
  	top: 2px;
  	right: -22px;
  	line-height: 20px;
	color: #FFFFFF;	
	text-shadow: none;
	
	-webkit-transition: opacity 0.1s linear 0s;
	-moz-transition: opacity 0.1s linear 0s;
	-ms-transition: opacity 0.1s linear 0s;
	-o-transition: opacity 0.1s linear 0s;
	transition: opacity 0.1s linear 0s;
}

.alert .close:hover {
	opacity: 1;	
}

.alert-standard {
  	background-color: #3C3F45;
}

.alert-success {  	
	background-color: #002b0c; /*Green #1F7F5C*/
	color: #00CC00;	
}

.alert-warning {  	
	background-color: #393a01;	
	color:#FFFF00;
}

.alert-danger,
.alert-error {  	
	background-color: #3a0101;
	color:#FF0000;	
}

.alert-info {
  	background-color: #5A9AA8;
}


.alert-block {
  	padding-top: 14px;
    padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
  	margin-bottom: 0;
}

.alert-block p + p {
  	margin-top: 5px;
}

.status-alert
{
	padding: 15px;
	margin-bottom: 20px;
	text-align: center;
}

.status-alert .title
{
	font-size: 2.2rem;
	margin: 0 0 10px 0;
	color: #ffffff;
}

.status-alert.status-good
{	
	background: #002B0C;	
	background: linear-gradient(90deg,rgba(0, 43, 12, 0) 0%, rgba(0, 43, 12, 1) 25%, rgba(0, 43, 12, 1) 75%, rgba(0, 43, 12, 0) 100%);		
}

.status-alert.status-warn
{
	background: #AB4100;
	background: linear-gradient(90deg,rgba(171, 65, 0, 0) 0%, rgba(171, 65, 0, 1) 25%, rgba(171, 65, 0, 1) 75%, rgba(171, 65, 0, 0) 100%);	
}

.status-alert.status-bad
{
	background-color: #3a0101;
	background: linear-gradient(90deg,rgba(58, 1, 1, 0) 0%, rgba(58, 1, 1, 1) 25%, rgba(58, 1, 1, 1) 75%, rgba(58, 1, 1, 0) 100%);	
}

/*************************
********Service CSS*******
**************************/

.our-services .col-sm-4 {
	display: flex;
}

.our-services .row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;   /* ? forces equal heights */
}

.service-box
{
	display: flex;                    /* FLEXBOX */
	flex-direction: column;           /* Stack items vertically */
	justify-content: space-between;   /* Pushes content to fill height */
	background: rgba(0, 0, 0, 0.20);
	border: 1px solid #232323;
	width: 100%;
	height: 100%;                     /* Allows equal height */
	border-radius: 8px;
	padding: 8px;
	margin: 10px;	
	overflow: hidden;

}

/* --------------------------- */
/* DESKTOP: equal-height rows  */
/* --------------------------- */
@media (min-width: 992px) {

	.our-services .row {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		margin: 20px;
	}

	.our-services .col-sm-4 {
		display: flex;
		
	}

	.service-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;	
	}
}

/* -------------------------------------- */
/* MOBILE + TABLET: return Bootstrap flow */
/* -------------------------------------- */
@media (max-width: 991px) {

	.our-services .row {
		display: block;     /* back to normal stack */
		margin: 0px;
	}

	.our-services .col-sm-4 {
		display: block;     /* normal block columns */
		width: 100%;        /* full width */
		margin: 10px 0;
	}

	.service-box {
		height: auto;       /* allow natural height */
		margin: 0;	
	}
	
	.service-icon
	{
		width: 150px !important;
		height: 150px!important;
	}
}

.service-icon 
{
	border-radius: 4px;
	color: #fff;
	display: block;
	height: 120px;
	width: 120px;
	transition: all 0.2s ease;
	text-shadow: 0px 5px 5px #000000;
	overflow: hidden;	
	background: #636363;
	transition: all 200ms ease-in-out;
	margin: 0 auto;                  	/* keep icon centered */
}

.service-info
{
	flex-grow: 1;                     	/* Makes middle text stretch */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;      	/* Keep title + desc together */
	margin-top: 15px;
}

.service-info .title 
{
	margin: 0 0 10px 0;
	font-size: 1.8rem;
	color: #FFFFFF;
}

.service-icon img
{
	position: inherit;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}


/* Service Page Cards */

.services-grid
{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: center;
	margin-top: 20px;
}

.service-card {
	background: #303030;
	border-radius: 8px;
	padding: 10px;
	width: 320px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.20);
	transition: all 0.25s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}

.service-card h2 {
	font-size: 2.3rem;
	margin-bottom: 15px;
	font-weight: 400;
	color: #00CC00;
	text-align: center;
}

.service-card .price {
	font-size: 2.2rem;
	text-align: center;
	font-weight: 600;
	margin-bottom: 20px;
	color: #0099ff;
}

.service-card .price span {
	display: block;
	font-size: 1.2rem;
	font-weight: 400;
	color: #CCC;
	margin-top: 4px;
}

.service-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 25px 0;
}

.service-card ul li {
	margin: 8px 0;
	color: #C1C1C1;
	font-size: 1.2rem;
	border-left: 3px solid #0074ff;
	padding-left: 10px;
}

.modern-btn {
	display: block;
	text-align: center;
	padding: 12px 20px;
	border-radius: 10px;
	background: #202020;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.modern-btn:hover
{
	color: #000000 !important;
	background: #00CC00;
	text-decoration: none !important;
}

/* Tablet – 2 cards per row */
@media (max-width: 991px) {
	.service-card {
		width: calc(50% - 20px);
	}
}

/* Mobile – full width stacked */
@media (max-width: 600px)
{
	.services-grid
	{
		gap: 20px;
	}

	.service-card
	{
		width: 100%;
	}
}

/*************************
*********Team CSS*********
**************************/
#team {
  padding-top: 0;
}

.team-members {
  margin-bottom: 25px;
}

.member-image
{
	width: 60%;
	height: auto;
	margin: 0 auto;
}

.social-icons {
  margin-top:30px;
  text-align: center;
}

.social-icons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.social-icons ul li {
  float: left;
  margin-right: 8px;
}

.social-icons ul li:last-child {
  margin-right: 0;
}

.social-icons ul li a {
  color:#fff;
  background-color: #303030;
  height: 36px;
  width: 36px;
  line-height: 36px;
  display: block;
  font-size: 16px;
  opacity: 0.8;
}

.social-icons ul li a:hover {
  opacity: 1;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.team-member-Wrapper
{
	display: block;
	margin: 0 auto;
	width: 100%;
}

.team-member-Wrapper img
{
	position: inherit;
	display: block;
	margin: 0 auto;
	border-radius: 8px;	
}

.team-member {
  text-align: center;
  color: #333;
  font-size: 14px;  
}

.team-member:hover .social-icons ul li a.facebook {
  background-color: #3b5999;
}
.team-member:hover .social-icons ul li a.twitter {
  background-color: #2ac6f7;
}
.team-member:hover .social-icons ul li a.linkedin {
  background-color: #036dc0;
}
.team-member:hover .social-icons ul li a.rss {
  background-color: #ff6b00;
}
.team-member:hover .social-icons ul li a.whatsapp {
  background-color: #2AB200;
}
.team-member:hover .social-icons ul li a.instagram {
  background-color: #bc2a8d;
}

#team .img-responsive {
  width: 100%;  
}

.member-info h3 {
  margin-top: 35px;
}

.member-info h4 {
  font-size: 14px;
  margin-bottom: 15px;
  color: #2c3e5b;
}


/*************************
*******Features CSS*******
**************************/
#features {
  text-align: center; 
}
#features i {
  font-size: 65px;
}
#features h3 {
  margin-top: 15px;
  font-size: 30px;
  margin-bottom: 7px;
  color: #00CC00;
}
#features .slider-overlay {
  opacity: 0.8;
}

/*************************
*****Pricing Table CSS****
**************************/
.pricing-table
{
  text-align: center;  
}

.single-table
{	 
  padding: 30px 20px 20px;
  border:1px solid #000;
  background: #303030;
  color: #FFF;
  -webkit-box-shadow: 0 0 10px 0 #000000;
  box-shadow: 0 0 10px 0 #000000; 
}

.single-table h2
{
  margin-top: 0;
  padding: 0;  
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #00CC00;
}

.single-table h3
{
  margin-top: 0;
  padding: 0;
  font-size: 18px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: #00CC00;
}

.price
{
  font-size: 36px;
  line-height: 36px;
}

.price span
{
  font-size: 14px;
  line-height: 14px;
}

/*Fix For mobile Devices and Alignments*/ 
@media screen and (max-width:1000px)
{
	.single-table h2
	{
		font-size: 2em !important;
	}
	.price
	{
		padding: 0 !important;
		margin: 0 auto !important; 
		text-align: center !important;
	}
	.price span
	{
		padding: 0;
		text-align: center !important;
		font-size: 1em !important;
		line-height: 1em !important;
	}
}

.single-table ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.single-table ul li {
  line-height: 30px;
}

.single-table  {  
  margin-bottom: 10px;
}

.single-table .btn.btn-primary {
  margin-bottom: 10px;
  background-color: #00CC00;
  color: #000;
  width: 100%;
}
.single-table .btn.btn-primary:last-child {
 margin-bottom: 0px;
}

/******************************************
*
* NEW INFO BLOCK - Used with Pricing Table 
*
*******************************************/
.BlockElement
{
	width: 100%;
	display: block;			
	border: 2px solid #000000;
	border-radius: 10px;			
	height: 100%;			
	background:#303030;
	overflow: hidden;	
	margin-bottom: 20px;
	
	-webkit-box-shadow: 0 0 10px 0 #000000;
	box-shadow: 0 0 10px 0 #000000;	
}
.TopBar
{
	position:inherit;
	height: 100%;
	min-height: 60px;
	display: block;			
	width: 100%;	
	padding: 10px;

}
.TopBar h2
{
	color: #00CC00;
	float: left;	
}

.TopBar img
{
	display: inline-block;
	width: 60px;
	height: 60px;
	float: left;
}

.Content
{
	color: #ffffff;
	position:inherit;
	display: block;
	background: #303030;
	width: 100%;
	height: 100%;
	margin-top: 5%;
	padding: 10px;
	//min-height: 300px;
}

.ContentSpliter
{
	width: 100%;
	height: auto;
}

.ContentSplitLeft
{
	float: left;
	position:inherit;
	width: 50%;
	height: auto;	
}
.ContentSplitRight
{
	float: right;
	position:inherit;
	width: 50%;
	height: auto;	
}

.PriceTag
{
	font-size: 36px;
	line-height: 36px;
	color: #FFFFFF;	
	margin-bottom: 20px;
}

.PriceTag span 
{
  font-size: 14px;
  line-height: 14px;
  color: #FFFFFF;
}
.Content ul {
  text-align: left;
  padding: 0;
  margin: 30px 30px;
}

.BottomBar
{
	display: block;
	width: 100%;
	background: #606060;			
}
.BottomBtn
{		
	height: 60px;
	line-height: 60px;			
	display: block;			
	background: #00CC00;
	color: #000000;
	font-size: 18px;
	
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;			
}
.BottomBtn:hover
{	
	background: #101010;
	color: #00CC00;		
}

/*Fix For mobile Devices and Alignments*/ 
@media screen and (max-width:1000px)
{
	.ContentSplitLeft, .ContentSplitRight
	{
		width: 100%;		
	}
	.TopBar h2
	{
		font-size: 2em !important;
	}
	.PriceTag
	{
		padding: 0 !important;		
		margin: 0 auto 10px auto !important;		
		text-align: center !important;
		font-size: 1.5em !important;
		line-height: 1.5em !important;
	}
	.PriceTag span
	{
		padding: 0;
		text-align: center !important;
		font-size: 1em !important;
		line-height: 1em !important;
	}
}

/*************************
* Product Download Buttons
**************************/

.DLButton
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 160px;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	transition: all 0.25s ease;
}

.DLButton i
{
	font-size: 48px;
	margin-bottom: 15px;
	opacity: 0.9;
}

.DLButton sub
{
	margin-top: 15px;
	color: #0099ff;
}

.DLButton:hover
{
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	text-decoration: none;					
}	

/*************************
**********Contact CSS*****
**************************/

#contact {
  padding-top: 45px;
  padding-bottom: 0;
}

#google-map {
  height: 450px;
}

#contact-us {
  background-image:url(../images/contact-bg.jpg);
  padding-bottom: 90px;
}

#contact-us .heading {
  padding-top: 95px;
}

.form-control {
  background-color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.1);
  height: 50px;
  border-radius: 0;  
  -webkit-box-shadow: 0 0 8px 0px #909090;
  box-shadow: 0 0 8px 0px #909090;  
}

/* Fix for responsive padding  */
@media screen and (max-width:1000px)
{	
	#FileName, .btn-file 
	{
		padding-left: 20px !important;
		padding-right: 20px!important;
	}	
}

input
{
	color: #000 !important;
}

textarea.form-control {
  min-height: 180px;
  resize:none;
}

.form-group {
  margin-bottom: 30px;
}

.contact-info {
  padding-left:70px;
  font-weight: 300;
}

ul.address {
  margin-top: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-info ul li {
  margin-bottom: 8px;
}

.contact-info ul li a {
  color: #fff;
}

.btn-submit {
  display: block;
  padding: 12px;
  width: 100%;
  color: #000;
  border:0;
  margin-top: 40px;
}

.btn-file {
	position: relative;
	overflow: hidden;
}
.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;	
}

/* Remove the ugly button casted on the dropdown box by OS */
select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */    
}

.btn-upload {
  display: block;
  padding: 12px;
  width: 100%;
  color: #000 !important;
  border:0;
  margin-top: 40px;
  text-align: left;
  
  background-color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.1);
  
  -webkit-box-shadow: 0 0 8px 0px #909090;
  box-shadow: 0 0 8px 0px #909090; 
}

.PreviewImage
{
	display:block;
	margin: 0px auto 20px auto;
	margin-top: 30px;
	width: 100%;
	height: auto;
	background: #303030;
	border: 5px solid #303030;
	overflow: hidden;
}

#FileName
{
  display: block;
  padding: 12px;
  width: 100%;
  color: #999;
  border:0;
  margin-top: 40px;
  text-align: left;
  
  background-color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.1);
  
  -webkit-box-shadow: 0 0 8px 0px #909090;
  box-shadow: 0 0 8px 0px #909090; 
}

#FileText
{
	color: #999;	
}

/* Footer CSS */

#footer {
  color:#fff;
}

#footer .anchor a {
	display: block;
	color:#00cc00;
	background: #101010;
	padding: 5px;
	text-align: center;
	border-radius: 10px;
	width: 50%;
	margin: 0 auto;
  
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;  
}

#footer .anchor a:hover {

  color:#0099ff;
  background: #000000;

}

.footer-top {
  position: relative;
  padding:30px 0
}

#footer .footer-bottom {
  background-color: #fff;
  padding: 20px 0 10px;
}

#footer .footer-bottom a:hover {
  text-decoration: underline;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 5px;
}

#footer .social-icons {
  margin-top: 15px;
  margin-bottom: 20px;
  
}

@media and screen(min-width: 720px)
{
	#footer .anchor a
	{
		width: 100%; 
	}
}

#footer .social-icons ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-icons ul li a {
  background-color: rgba(0,0,0,.2);
  border-radius: 4px;
  line-height: 33px;
}

.social-icons ul li a:hover {
  color: #fff
}

.social-icons ul li a.envelope:hover {
  background-color: #CECB26;
}
.social-icons ul li a.facebook:hover {
  background-color: #3b5999;
}
.social-icons ul li a.twitter:hover {
  background-color: #2ac6f7;
}
.social-icons ul li a.linkedin:hover {
  background-color: #036dc0;
}
.social-icons ul li a.whatsapp:hover {
  background-color: #2AB200;
}
.social-icons ul li a.instagram:hover {
  background-color: #bc2a8d;
}
.social-icons ul li a.tumblr:hover {
  background-color: #ff6b00;
}
.social-icons ul li a.corestatus:hover {
  background-color: #990000;
}

/**************************
 Owl Testimonial
**************************/

.testimonial
{
	display: flex;
	align-items: flex-start;
	gap: 30px;	
	padding: 20px;
	margin: 5px;	
	color: #fff;
	background: #1c1c1c;
	border-radius: 8px;	
	transition: transform 0.25s ease;
	text-align: left;	
}

.testimonial .pic
{
	width: 140px;
	height: 140px;
	border-radius: 5%;
	overflow: hidden;
	border: 6px solid #1c1c1c;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35);
	flex-shrink: 0;
}

.testimonial .pic img 
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-content
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.testimonial-title
{
	font-size: 2.2rem;
	font-weight: 400;
	color: #00CC00;
	margin: 0;
	text-align: left;
}

.testimonial-subtitle
{
	display: block;
	font-size: 1.4rem;
	color: #808080;
	margin-top: 2px;
	text-align: left;
}

.testimonial-description
 {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #eaeaea;
	width: 100%;
	position: relative;
	margin-top: 5px;
}

.owl-dots
{
    text-align: center;
    margin-top: 20px;
}

.owl-dot
{
    display: inline-block;
    margin: 0 6px;
}

.owl-dot span
{
    width: 10px;
    height: 10px;
    display: block;
    background: #777;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.owl-dot.active span
{
    background: #00CC66;
}

/* Mobile layout */
@media (max-width: 767px) {
	.testimonial {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 25px;
	}

	.testimonial-content {
		margin-top: 20px;
	}

	.testimonial-title,
	.testimonial-subtitle {
		text-align: center;
	}

	.testimonial-description:before,
	.testimonial-description:after {
		left: 0;
		right: 0;
	}
}



/*************************
 Add Testimonial CSS
**************************/

@media screen and (max-height:768px)
{
	#tohash
	{
		display: none;
	}
}

/**************************
 CP CSS Shared with Main
**************************/

/* Main CP CSS */
/* Style the buttons that are used to open and close the accordion panel */
.AccButton {
	background-color: #202020;
	color: #c0c0c0;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.AccButton:hover, .AccButton.active
{
	background-color: #101010;
	color: #00CC00;
}

/* Style the accordion panel Inside. */
.collapse-Body {
	padding: 10px 15px;
	background-color: #101010;					
	margin: 0 auto;
	/*text-align: center;*/
} 		

.panel, .panel-group .panel-heading+.panel-collapse>.panel-body{
	border: none;
}

.panel
{
	margin: 0;					
}	

.InfoField
{					
	color: #C0C0C0;
	width: 100%;
	height: inherit;
	background: #101010;	
	padding: 18px;
	margin-bottom: 5px;
	
	-webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, calc(0% + 20px) 100%, 0% calc(100% - 20px));
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, calc(0% + 20px) 100%, 0% calc(100% - 20px));
}	

.img-clip
{
	-webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, calc(0% + 20px) 100%, 0% calc(100% - 20px));
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% calc(0% + 20px), 100% 100%, calc(0% + 20px) 100%, 0% calc(100% - 20px));
}

.InfoField:last
{					
	margin-bottom: 0px;
}

.PreviewImage
{					
	background: #101010;
	border: 5px solid #101010;					
}

/* Settings Menu */
@import url(fonts/fontAwesome.otf);
.fa-fw
{
	width: 40px;
	padding-right: 10px;
}


/* Announcements Block */

.InfoField h2
{
	color: #00CC00;
	font-size: 2.5rem;
	padding: 0;
	margin: 0;
}
.InfoField h6
{
	color: #C0C0C0;	
}
.InfoField p
{
	font-size: 1.2em;
}
.InfoFieldDel
{
	display: block;
	position: inherit;
	float: right;
	padding: 5px 8px;
	background: #303030;
	color: #505050;
	border: none;
	text-align: center;
	font-weight: 200;
	font-size: 2em;											
}
.InfoFieldDel:hover
{						
	color: #FFFFFF;
	background: #FF0000;
}

/* Add Video to Gallery CSS */
.snapshot-generator
{
  display: block;
  height: 1px;
  left: 0;
  object-fit: contain;
  position: fixed;
  top: 0;
  width: 1px;
  z-index: -1;
}

/* Remove Gallery Image */
#InnerImgRender
{
	-webkit-box-shadow: 0 0px 10px 0 #000;
	box-shadow: 0 0px 10px 0 #000;
	background: #101010;
	margin: 0 auto;
	width:240px;
	height:156px;
	display: block;
	overflow:hidden;
	text-align: center;
}
#LoadThumb
{
	color: #FFFFFF;
	font-size: 2em;
	text-align:center;
	vertical-align: middle;
	padding: 20px;
}											
#AvatarImg
{
	-webkit-box-shadow: 0 0px 10px 0 #000;
	box-shadow: 0 0px 10px 0 #000;
	background: #101010;														
	width:150px;
	height:150px;
	display: block;
	overflow:hidden;
	text-align: left;
}

/* CP and Software button group style */
.btn-group .btn-primary
{
	background: #101010 !important;
	color: #00CC00 !important; 
	border-color: #101010 !important;
	font-wight: 300 !important;
}

#CPMain .btn-group .btn-primary:last-child:hover /* Specific to the CP only*/
{
	background: #9b0909 !important;
	color: #FFFFFF !important;
	border-color: #9b0909 !important;
	font-wight: 300 !important;
}	

.btn-group .btn-primary:hover
{
	background: #00CC00 !important;
	color: #000000 !important;
	border-color: #00CC00 !important;
	font-wight: 300 !important;
}	

/*Windows 10 Acrylic style in CSS*/

.acrylic
{
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0 auto;	
	
	box-shadow: 0 1rem 2rem rgba(0,0,0,.3);
	width: 100%;
	height: 100%;

	-webkit-backdrop-filter: blur(40px) 
		saturate(180%);
	backdrop-filter: blur(40px) 
		saturate(180%);
	background-color: rgba(255,255,255,.3);	
}

.shadow
{
  border-radius: 1px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}


@media screen and (max-width: 40em)
{
	#InnerImgRender,														
	{
		width:100%;
		height:auto;
		overflow:hidden;
	}
	#AvatarImg
	{
		text-align: center;
		margin: 0 auto;
		width:50%;
		height:auto;
		overflow:hidden;
	}
	.btn-group .btn-primary
	{
		font-size: 0.8em;
		font-wight: 300;
	}	
}			

/* Line break */
hr
{
	/* Gradient transparent - color - transparent */
	border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(255,255,255,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(255,255,255,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(255,255,255,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(255,255,255,0.75), rgba(0,0,0,0));
	margin: 20px 0;	
}

/* Horizontal Poster Accordion */
.Division
{
	width: 100%;
	max-width: 1200x;
	height: 250px;
	border-radius: 8px;
	overflow: hidden;
	margin: 50px auto;
	-webkit-box-shadow: 0 0 20px 0 #000000;
	box-shadow: 0 0 20px 0 #000000;							
}

.Division ul
{
	width: 100%;
	display: table;
	table-layout: fixed;
	margin: 0;
	padding: 0;
}

.Division ul li
{
	display: table-cell;
	vertical-align: bottom;
	position: relative;
	width: 16.666%;
	height: 250px;
	background-repeat: no-repeat;
	background-position: center center;
	transition: all 500ms ease;
}

.Division ul li div
{
	display: block;
	overflow: hidden;
	width: 100%;
}

.Division ul li div a 
{
    display: flex;
    flex-direction: column;   
    justify-content: flex-end;
    height: 250px;
    width: 100%;
    position: relative;
    z-index: 3;
    padding: 0;              
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
}

.Division ul li div a *
{
	opacity: 0;
	margin: 0;
	width: 100%;
	text-overflow: ellipsis;
	position: relative;
	z-index: 5;
	white-space: nowrap;
	overflow: hidden;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;	
}

.frosted
{
    position: relative;
    padding: 12px 14px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 400ms ease-in-out;
    z-index: 5;
}

.Division ul li div a h2
{
	text-overflow: clip;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 0;

	color: #00CC00;
	padding: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;		
}

.Division ul li div a p
{
	font-size: 14px;
	padding: 7px 5px 5px 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;	
}

.Division ul li:nth-child(1) { background-image: url("../images/featured/1.jpg"); }
.Division ul li:nth-child(2) { background-image: url("../images/featured/3.jpg"); }
.Division ul li:nth-child(3) { background-image: url("../images/featured/4.jpg"); }
.Division ul li:nth-child(4) { background-image: url("../images/featured/5.jpg"); }

.Division ul li a { background: rgba(0, 0, 0, 0.1); }

.Division ul:hover li { width: 16%; } /* set to 8% if using 6 features, 10% for 5 features, 16% for 4 features and 20% for 3 features */

.Division ul:hover li:hover { width: 60%; }

.Division ul:hover li:hover a { background: rgba(0, 0, 0, 0.0); }

.Division ul:hover li:hover a *
{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
@media screen and (max-width: 600px)
{
	.Division { height: auto; }

	.Division ul li,
	.Division ul li:hover,
	.Division ul:hover li,
	.Division ul:hover li:hover
	{
		position: relative;
		display: table;
		table-layout: fixed;
		width: 100%;
		-webkit-transition: none;
		transition: none;
	}
}

/* ==================================================
   InfoBlock Buttons
================================================== */

.info-block .button
{
  	display: inline-block;
  	margin-bottom: 0;
  	padding: 13px 26px;
    border-radius: 10px;
	background: #303030;
  	
	color:#00CC00;
  	vertical-align: middle;
  	text-align: center;
  	text-transform: uppercase;
  	font-weight:500;
  	font-size: 16px;
  	cursor: pointer;
	border:none;
  
	-webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
  	border: 0.5px solid #000000;
  	*zoom: 1;
}

/*--- Hover/Active/Focus State ---*/

.info-block .button:hover,
.info-block .button:active,
.info-block .button:focus
{
	background: #101010;

	color: #FFFFFF;
	-webkit-transition: all 0.1s linear;
       -moz-transition: all 0.1s linear;
         -o-transition: all 0.1s linear;
            transition: all 0.1s linear;
	
	border: 1px solid #00CC00;	
	
	box-shadow: 0 0 10px 0px #00CC00;
	-webkit-box-shadow: 0 0 10px 0px #00CC00;
	-moz-box-shadow: 0 0 10px 0px #00CC00;	
}

/* --- Button Sizes --- */

.info-block .button.button-large
{
  	padding: 16px 30px;
  	font-size: 18px;
}

.info-block .button.button-small
{
  	padding: 8px 18px;
  	font-size: 14px;
}

.info-block .button.button-mini
{
  	padding: 4px 12px;
  	font-size: 12px;
}

.info-block .button.button-block
{
	padding-right: 0;
	padding-left: 0;
	width: 100%;	
}

.info-block .button + .button
{
	margin-left: 10px;	
}

/* ==================================================
   Info Block
================================================== */

.info-block
{
	padding: 10px;
	position: relative;
		
	background: #101010;
		
	border: 2px solid #000000;
	border-left: 2px solid #00CC00;

	box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);	
}

.info-text
{
	padding-right: 20%;
	position: relative;
}

.info-block h3
{
	font-size: 24px;
	line-height: 1em;
	text-transform: uppercase;
	color: #00CC00;
}

.info-block p
{
	width: 100%;
	display: block;
	clear: both;
	color: #C1C1C1;
}

.info-block a.button
{
	margin-top: -20px;
	position: absolute;
	right: 0;
	top: 50%;
}

.info-text img
{
	display: block;
	position: inherit;
	width: 60px;
	height: 60px;
	float:left;
	margin-right: 10px;
	margin-bottom: 15px;
}

.info-text h3
{		 
	display: block;		
	position: inherit;
	float:left;
}

@media screen and (max-width: 960px)
{
	.info-block a.button
	{
		top: auto;
		margin: 15px 0 10px 0;
		display: block;
		position: inherit;
		width: 100%;
	}
	.info-text
	{
		padding: 5px;			
	}
}

.map-content
{
	background: #FFF;
	color: #000;	
	padding: 5px;
}

.map-content > h2
{
	color: #000;
}

/* Password checker Meter  */

meter {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

margin: 0 auto 1em;
width: 100%;
height: 0.5em;

/* Applicable only to Firefox */
background: none;
background-color: rgba(0, 0, 0, 0.1);
}

meter::-webkit-meter-bar {
background: none;
background-color: rgba(0, 0, 0, 0.1);
}

#password-strength-text
{
color: #FFFFFF;
}

.feedback
{
color: #C1C1C1;
font-size: 90%;
padding: 0 .25em;
font-family: Courgette, cursive;
margin-top: 1em;
}	

/* Webkit based browsers */
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

/* Gecko based browsers */
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: orange; }
meter[value="3"]::-moz-meter-bar { background: yellow; }
meter[value="4"]::-moz-meter-bar { background: green; }

/* Switch Style */

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}		
.Description
{										
	line-height: 34px;
	color: #C1C1C1;
	font-weight: 400;
	text-align: left;
}


/* Stock List Table*/
/* 
Generic Styling, for Desktops/Laptops 
*/
.table { 
  width: 100%; 
  border-collapse: collapse; 
  border: 0;
  
}								

.table th
{
	background: #000;
	color: #00cc00;
	font-weight: bold;	
	border: 0 !important;
	border-collapse: collapse;	
	
}
.table tr
{
	
	background: rgba(0,0,0,0.5);
	border: 1px solid #000000;
}
.table td
{
	border: 0 !important;
	border-collapse: collapse;
}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, StockList, tbody, th, td, tr { 
		display: block;		
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	/*tr { border: 1px solid #ccc; }*/
	
	td { 
		/* Behave  like a "row" */		
		position: relative;
		padding-left: 50%;	
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}									
	
	/*Label the data									
	td:nth-of-type(1):before { content: "Code"; }
	td:nth-of-type(2):before { content: "Price"; }
	td:nth-of-type(3):before { content: "Description"; }
	td:nth-of-type(4):before { content: "Buy"; margin-right: 50px; }*/
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #007a00; /* Black background color */
	color: #fff; /* White text color */
	font-weight: bold;
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1000; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
	-webkit-box-shadow: 0 20px 30px 0 #000000;
	box-shadow: 0 20px 30px 0 #000000;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

/* Search Field */

#search 
{
	padding: 5px;
	width: 100%;
	background: #000;
	border: 0;
	color: #00cc00 !important;
}

input[type="text"]#search::placeholder {
  color: #c1c1c1;
}

#PersonalInfo-form h5
{
	color: #00cc00;
	text-align: left;
}

/* Only used for Form inside table - Serial comments */

.serialStyle input[type="text"]
{
	display: inline-block;
	color: #FFF !important;
	width: 79%;
	height: 35px;
	border: 1px solid transparent;
	border-radius: 5px;
	background: transparent;
	padding: 5px;	
	
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}
.serialStyle input[type="text"]:focus,
.serialStyle input[type="text"]:active
{
	background: #101010;	
	border: 1px solid #000;
}
.serialStyle .submitComment
{
	display: inline-block;
	border-radius: 5px;
	background: #101010;
	height: 35px !important;
}
.serialStyle .submitComment:hover,
.serialStyle .submitComment:active,
.serialStyle .submitComment:focus
{
	color: #00CC00
}

/**********************************************/

.loaderBar {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
.loaderBar:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #00CC00;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

#NewsLetterBlock
{
	width: 50%;
	margin: 0 auto;
	height: auto;
}

@media screen and (max-width: 960px)
{
	#NewsLetterBlock
	{		
		display: block;		
		width: 100%;
	}	
}

.PayFast
{
	display: block;
	height: 45px;
	width: 140px;
	background-image: url(../images/PayFast-Logo.png);
	background-repeat: no-repeat;
	background-size: 140px 45px;	
	margin: 0 auto;
}

.changelog
{
	text-align: left;
	
}
.changelog li
{
	list-style-position: inside;
	margin-left:10px;
}