/* 
/* 
/*  custom.css
/*
/*  If not using Gulp and Sass, add your custom CSS below then include it
/*  in your page by adding a reference to assets/css/custom.css in the head of each page.
/*
*/

.bg-image {
  background: url(/assets/img/lost.jpg) no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  overflow: hidden;
}

.icon{
  color: #8BD4DE;
}

.feat{
  color: #6c757d;
}

.title{
  font-family: 'Sanchez', serif;
}

.text-green{
  color: #007E8E !important;
}
.text-lt-gray{
  color: #D1D1D1 !important;
}


.bg-pxp {
  /*background-image: linear-gradient(#CCD4D7, #B3BABC);*/
  /*background-image: linear-gradient(#CFEBEC, #CFEBEC);*/
  /*background-image: linear-gradient(#464946, #464946);*/
  background-image: linear-gradient(#373737, #373737);
}

#fastRange {
  direction: rtl
}






input[type=range] {
  height: 39px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 2px #A6A6A6;
  background: #E52525;
  border-radius: 4px;
  border: 2px solid #F27B7F;
}
.range-grey input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 2px #A6A6A6;
  background: #e2e2e2;
  border-radius: 4px;
  border: 2px solid #ccc;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 2px #A6A6A6;
  border: 2px solid #F27B7F;
  height: 30px;
  width: 30px;
  border-radius: 0px;
  background: #FF96AB;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -11px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FF96AB;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 2px #A6A6A6;
  background: #FF96AB;
  border-radius: 4px;
  border: 2px solid #F27B7F;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 2px #A6A6A6;
  border: 2px solid #F27B7F;
  height: 30px;
  width: 30px;
  border-radius: 0px;
  background: #FF96AB;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #FF96AB;
  border: 2px solid #F27B7F;
  border-radius: 8px;
  box-shadow: 1px 1px 2px #A6A6A6;
}
input[type=range]::-ms-fill-upper {
  background: #FF96AB;
  border: 2px solid #F27B7F;
  border-radius: 8px;
  box-shadow: 1px 1px 2px #A6A6A6;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 2px #A6A6A6;
  border: 2px solid #F27B7F;
  height: 30px;
  width: 30px;
  border-radius: 0px;
  background: #FF96AB;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #FF96AB;
}
input[type=range]:focus::-ms-fill-upper {
  background: #FF96AB;
}





  .video-background-holder {
    position: relative;
    background-color: black;
    height: calc(100vh - 72px);
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
  }

  .video-background-holder video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
  }

  .video-background-content {
    position: relative;
    z-index: 2;
  }

  .video-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #cbd3d7;
    background-image: url(../img/lines.png);
    opacity: 0.8;
    z-index: 1;
  }














.machine {
  width: 60vmin;
  fill: #fff; 
}
.machine_medium {
  fill: #7DCECE; 
}
.machine_large {
  fill: #007E8E; 
}

.small-shadow, .medium-shadow, .large-shadow {
  fill: rgba(0, 0, 0, 0.05); }

.small {
  -webkit-animation: counter-rotation 2.5s infinite linear;
	   -moz-animation: counter-rotation 2.5s infinite linear;
	     -o-animation: counter-rotation 2.5s infinite linear;
	        animation: counter-rotation 2.5s infinite linear;
  -webkit-transform-origin: 100.136px 225.345px;
      -ms-transform-origin: 100.136px 225.345px;
          transform-origin: 100.136px 225.345px; }

.small-shadow {
  -webkit-animation: counter-rotation 2.5s infinite linear;
	   -moz-animation: counter-rotation 2.5s infinite linear;
	     -o-animation: counter-rotation 2.5s infinite linear;
	        animation: counter-rotation 2.5s infinite linear;
  -webkit-transform-origin: 110.136px 235.345px;
      -ms-transform-origin: 110.136px 235.345px;
          transform-origin: 110.136px 235.345px; }

.medium {
  -webkit-animation: rotation 3.75s infinite linear;
	   -moz-animation: rotation 3.75s infinite linear;
	     -o-animation: rotation 3.75s infinite linear;
	        animation: rotation 3.75s infinite linear;
  -webkit-transform-origin: 254.675px 379.447px;
      -ms-transform-origin: 254.675px 379.447px;
          transform-origin: 254.675px 379.447px; }

.medium-shadow {
  -webkit-animation: rotation 3.75s infinite linear;
	   -moz-animation: rotation 3.75s infinite linear;
	     -o-animation: rotation 3.75s infinite linear;
	        animation: rotation 3.75s infinite linear;
  -webkit-transform-origin: 264.675px 389.447px;
      -ms-transform-origin: 264.675px 389.447px;
          transform-origin: 264.675px 389.447px; }

.large {
  -webkit-animation: counter-rotation 5s infinite linear;
     -moz-animation: counter-rotation 5s infinite linear;
	     -o-animation: counter-rotation 5s infinite linear;
        	animation: counter-rotation 5s infinite linear;
  -webkit-transform-origin: 461.37px 173.694px;
      -ms-transform-origin: 461.37px 173.694px;
          transform-origin: 461.37px 173.694px; }

.large-shadow {  
  -webkit-animation: counter-rotation 5s infinite linear;
	   -moz-animation: counter-rotation 5s infinite linear;
	     -o-animation: counter-rotation 5s infinite linear;
	        animation: counter-rotation 5s infinite linear;
  -webkit-transform-origin: 471.37px 183.694px;
      -ms-transform-origin: 471.37px 183.694px;
          transform-origin: 471.37px 183.694px; }

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to   {-o-transform: rotate(359deg);}
}
@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}

@-webkit-keyframes counter-rotation {
    from {-webkit-transform: rotate(359deg);}
    to   {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes counter-rotation {
    from {-moz-transform: rotate(359deg);}
    to   {-moz-transform: rotate(0deg);}
}
@-o-keyframes counter-rotation {
    from {-o-transform: rotate(359deg);}
    to   {-o-transform: rotate(0deg);}
}
@keyframes counter-rotation {
    from {transform: rotate(359deg);}
    to   {transform: rotate(0deg);}
}



/* Threat calculator */

/* Body */
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Sections */
section {
  padding: 60px 0;
}

/* Header Inner */
.header-inner {
  background-color: #007bff;
}

.header-inner h1 {
  cursor: pointer;
}

/* Form */
form {
  margin-bottom: 20px;
}

form label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

form select,
form input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button[type="submit"] {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #8BD4DE;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Results */
#results {
  margin-bottom: 20px;
}

#results p {
  margin-bottom: 10px;
}

#calculator h2,
#calculator h3 {
  margin-top: 0;
}

#calculator p {
  margin-bottom: 10px;
}

#calculator em {
  font-style: italic;
}

#calculator form {
  margin-bottom: 20px;
}

#calculator input[type="number"] {
  margin-right: 10px;
}

#losses {
  margin-bottom: 20px;
}

/* end threat calculator */


/* Home page services */
.services-check {
  color: #8BD4DE;
}
/* end Home page services */


/* Background Nav Video */
.bg-nav-video--wrapper {
  position: relative;
}

.bg-nav-video--wrapper > .navbar {
  border-bottom: 0px;
}

.bg-nav-video {
  overflow:hidden;
  width: 100vw;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: -75px;
  z-index: -1;
}
/* end Background Nav Video */