/* COLORS AND FONTS AND STYLES STANDARD 

Topper: purple -> navyblau -> hellblau 

Breaks: RAL 5012 Lichtblau

purple: rgb(128,0,128)
navyblue: rgb(0,0,128)
licht blau: rgb(0,137,182)

Color Main: rgb(119, 0, 255) Purple

*/

/* PRELOADER IMG*/
.centerLoad 
{
    margin-bottom:10%;
    margin-right:5%;
}

.menu_position 
{
 color:rgba(255, 255, 255, 0) !important;
 
}

.menu_box 
{
    background-color: rgb(0, 0, 0);
    border-radius:30px;
}

    /*Swiper*/
.swiper-container {
	width: 100%;
	height: 100vh;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
    background: #fff;
    text-shadow: 1px 1px 1px black;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;

	-ms-flex-align: center;
	-webkit-align-items: center;
    align-items: center;
    height: 100%;
}
.main-slider .slider-bg-position {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   
	background-position: center !important;
}
.firstslide
{
    background-image: url("../CustomPictures/securitymar.jpg");
/* Full height */
height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
.main-slider .swiper-button-prev, .main-slider .swiper-button-next {
	background-image: none!important;
	color: #fff;
	width: 50px;
	height: 50px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
}
.main-slider h2 {
	color: #fff;
	font-size: 48px;
	line-height: 59px;
	padding: 0 19%;
	text-transform: uppercase;
}
.main-slider .swiper-pagination-bullet {
	width: 20px;
	height: 20px;
	background: rgba(255,255,255,0.9)
}
.main-slider .swiper-pagination-bullet-active {
	background: #0297ff
}
.highlight-text
{
    color:purple;  
}
.highlight-text2
{
    color:rgb(0,132,182);
}
.swiper-wrapper h2 
{
    font-size: 30px;
}
/************CAROUSEL*******************/
.carousel-control-prev-icon 
{
    color:black;
    background-color: black;
}
.carousel-control-next-icon 
{
    color:black;
    background-color: black;
}
.carousel-indicators li
{
color:black;
background-color: #343434;
}
.carousel-indicators .active 
{
color:black;
background-color: rgb(0,137,182);
}
.carousel-caption h3
{
    color:rgb(0, 183, 255);
    text-shadow: 1px 1px 1px rgb(255, 255, 255);
}

/*==================DIAGONAL SUBSITE PART=====================*/
.diagonal 
{
    margin-top:3%;
    margin-bottom:5%;
    float: right;
    width:60%;
    height:250px;
    background-image: url("../CustomPictures/walking.jpg");
    border-right: 350px solid rgb(255, 255, 255);
    border-top:700px solid rgba(255, 255, 255, 0);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.textEdit 
{
margin-top:20%;
}
.textEdit h2 
{
    color:purple;
    font-size: 40px;
    margin-bottom: 10%;
}
.cities 
{
    margin-bottom:5%;
    padding-bottom: 5%;
}
.cities ul 
{
    border:1px solid purple;
    border-radius: 5px;
    transition: 0.3s;
    height:300px;
}
.cities ul:hover 
{
    transition: 0.3s;
    border:1px solid rgba(255, 255, 255, 0);
    -webkit-box-shadow: -1px 0px 12px 0px rgba(0,0,128,1);
-moz-box-shadow: -1px 0px 12px 0px rgba(0,0,128,1);
box-shadow: -1px 0px 12px 0px rgba(0,0,128,1);
}

.highlight-para 
{
    border:3px solid purple;
}


/* HERO IMAGE*/
body, html {
    height: 100%;
    
}
body 
{
   
}
/* The hero image */


.hero-text1 
{
margin-top:30%;
}

.hero-text2 
{
margin-bottom: 25%;
}

.topper 
{
font-size: 20px !important;
}
.menu-button 
{
    Color:rgb(0, 102, 255);
    font-size: 20px;
    margin-top:10px;
}
.menu-button:hover 
{

    color:rgb(119, 0, 255);
}
.custom-lack 
{
    background-color:black;
    padding: 550px;
}
.main-box 
{
   text-shadow: 1px 1px 1px rgb(34, 34, 34);
}

.normal-p
{
    font-size:18px;
}
/*TOP INFO BAR ABOVE NAVIGATION*/
.info-top 
{
    background: rgba(129,0,129,1);
    background: -moz-linear-gradient(left, rgba(129,0,129,1) 3%, rgba(86,0,129,1) 18%, rgba(23,0,128,1) 40%, rgba(0,0,128,1) 48%, rgba(0,0,128,1) 60%, rgba(0,95,165,1) 87%, rgba(0,137,182,1) 99%, rgba(0,137,182,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(3%, rgba(129,0,129,1)), color-stop(18%, rgba(86,0,129,1)), color-stop(40%, rgba(23,0,128,1)), color-stop(48%, rgba(0,0,128,1)), color-stop(60%, rgba(0,0,128,1)), color-stop(87%, rgba(0,95,165,1)), color-stop(99%, rgba(0,137,182,1)), color-stop(100%, rgba(0,137,182,1)));
    background: -webkit-linear-gradient(left, rgba(129,0,129,1) 3%, rgba(86,0,129,1) 18%, rgba(23,0,128,1) 40%, rgba(0,0,128,1) 48%, rgba(0,0,128,1) 60%, rgba(0,95,165,1) 87%, rgba(0,137,182,1) 99%, rgba(0,137,182,1) 100%);
    background: -o-linear-gradient(left, rgba(129,0,129,1) 3%, rgba(86,0,129,1) 18%, rgba(23,0,128,1) 40%, rgba(0,0,128,1) 48%, rgba(0,0,128,1) 60%, rgba(0,95,165,1) 87%, rgba(0,137,182,1) 99%, rgba(0,137,182,1) 100%);
    background: -ms-linear-gradient(left, rgba(129,0,129,1) 3%, rgba(86,0,129,1) 18%, rgba(23,0,128,1) 40%, rgba(0,0,128,1) 48%, rgba(0,0,128,1) 60%, rgba(0,95,165,1) 87%, rgba(0,137,182,1) 99%, rgba(0,137,182,1) 100%);
    background: linear-gradient(to right, rgba(129,0,129,1) 3%, rgba(86,0,129,1) 18%, rgba(23,0,128,1) 40%, rgba(0,0,128,1) 48%, rgba(0,0,128,1) 60%, rgba(0,95,165,1) 87%, rgba(0,137,182,1) 99%, rgba(0,137,182,1) 100%);
  

}



/*=================== INFO TOP BAR ============= */
.info-top  a
{
 color:rgb(255, 255, 255);
 font-size:20px;
}
.info-top  a:hover
{
 color:rgb(238, 255, 0);
}

/*=============== Über Uns / H2 und HR================== */
.aboutHeader 
{
    font-size:40px !important;
    font-weight: 800 !important;
    color: rgb(58, 58, 58);
    letter-spacing: 2px;
     margin-top:60px;
}


#AboutHr
{
    width:130px;
    color:gray;
    background-color: gray;
    border: 0 none;
    height:1px;
}

/*===================== TYPED.JS AUTO CSS======================*/

.autoText span  
{
    font-size: 30px;
    color:white;
    text-shadow: 1px 1px 1px black;
}

.autoText p  
{
    font-size: 40px;
    color:white;
    font-weight: 500;
    text-shadow: 1px 1px 1px black;
}

.autoText a 
{
    color:yellow !important;
}

.span-parent 
{
    width:100%;
    height:100px;
}

.js__parallax-window 
{
    background-image: url(/CustomPictures/break5.jpg);

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    
}
.js__parallax-window1
{
    background-image: url(/CustomPictures/break2.jpg);

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}
.js__parallax-window2 
{
    background-image: url(/CustomPictures/break1.jpg);

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}
.js__parallax-window3 
{
    background-image: url(/CustomPictures/break3.jpg);

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

.break-btn 
{
    color:white;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0);
    border:1px solid white;
    padding:20px 40px 20px 40px;
    border-radius: 30px;
    transition: 0.4s;
    margin-left:auto;
}

.break-btn:hover
{
    transition: 0.4s;
    color:rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    padding:20px 40px 20px 40px;
    border-radius: 30px;
}
/*==================== ABOUT US / VOLTAGE SECURITY=========================*/
.headerBig
{
    font-weight: 600;
}
.about-text 
{
    margin-top:5%;
    margin-bottom:3%;
}
.about-text h4 
{
    margin-bottom:3%;
}

.separated-p 
{
    background-color: rgba(255, 255, 255, 0.459);
    padding:2%;
    color:rgb(0, 0, 0);
    border-radius: 2px;
    border:1px solid rgb(233, 233, 233);
    transition: 0.3s;
    font-weight: 600;
}

.separated-p:hover 
{
    -webkit-box-shadow: 0px 0px 8px 1px #8C27FF; 
    box-shadow: 0px 0px 8px 1px rgb(212, 174, 255);
}

.separated-p b 
{
    color:rgb(0,137,182);
}

/*==================== Unser Service =========================== */

h3 {
    color: rgba(0, 0, 0, 0.9);
  }
  .text{
      color: rgb(128,0,128);
      text-align: center;
  }
  
  
  .folded-corner:hover .text{
      visibility: visible;
      color:rgb(0, 0, 128);
  }
  .Services-tab{
      margin-top:20px;
  }
  .service-row 
  {
      margin-bottom:3%;
  }
  /*
    nav link items // BIG BOXES
  */
  .folded-corner{
    padding: 25px 25px;
    position: relative;
    font-size: 90%;
    text-decoration: none;
    color: #999; 
    background: transparent;
    transition: all ease .5s;
  }
  .folded-corner:hover {
      background-color: rgb(255, 255, 255);
   
  }

  
  /*
    paper fold corner
  */
  
  .folded-corner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 0px 0px 0;
    border-color: #ddd rgb(0, 132, 255);
    transition: all ease .3s;
  }
  
  /*
    on li hover make paper fold larger
  */
  .folded-corner:hover:before {
      background-color: #D00003;
    border-width: 0 50px 50px 0;
    border-color: #eee rgb(61, 126, 224);
  }
  
  .service_tab_1{
      background-color: rgb(255, 255, 255);
      height:450px;
      overflow: hidden;
      border:1px solid rgb(230, 230, 230);
      
  }
  .service_tab_2 
  {
    background-color: rgb(255, 255, 255);
      height:auto;
      border:1px solid rgb(230, 230, 230);
  }

.svg-animation svg, .svg-animation svg rect 
  {
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      fill:transparent;
  }

  .svg-animation svg rect 
  {
      stroke:transparent;
      stroke-width: 4;
      stroke-dasharray: 400;
    stroke: transparent;
  }


  .svg-animation svg rect:hover 
  {
      stroke: rgb(61, 126, 224);
      animation: animate 6s linear infinite;
  }
  @keyframes animate 
  {
      0% 
      {
        stroke-dashoffset: 800;
      }

    
      100% 
      {
        stroke-dashoffset: 0;
      }
  }

  .service_tab_1:hover 
  {
    -webkit-box-shadow: 0px 2px 15px 2px #545454; 
    box-shadow: 0px 2px 15px 2px #cccccc;
  }

  .service_tab_2:hover 
  {
    -webkit-box-shadow: 0px 2px 15px 2px #545454; 
    box-shadow: 0px 2px 15px 2px #dbdbdb;

  }
 

  .svg-animation2 svg, .svg-animation2 svg rect 
  {
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      fill:transparent;
  }

  .svg-animation2 svg rect 
  {
      stroke:transparent;
      stroke-width: 9;
      stroke-dasharray: 400;
    stroke: rgb(150, 0, 150);
    animation: animate2 6s linear infinite;
  }

  @keyframes animate2 
  {
      0% 
      {
        stroke-dashoffset: 800;
      }

    
      100% 
      {
        stroke-dashoffset: 0;
      }
  }

  
  .text p 
  {
     text-align: left; 
  }
  
  .fa-icon-image{
      color: rgb(172, 0, 172);
      position: relative;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1;
      font-size-adjust: none;
      font-stretch: normal;
      text-rendering: auto;
      transition: all .65s linear 0s;
      text-align: center;
      transition: all 1s cubic-bezier(.99,.82,.11,1.41);
  }

.list-align li 
{
    text-align: left;
}


.bullet-align  li 
{
    list-style-position:inside;
}



/*======================= Einsatzgebiete und Locations ==================== */

.con-map 
{
    margin-top:3%;
    margin-bottom: 1%;
}

.myText  {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    color: rgb(0, 0, 0);
    overflow: auto;
    border:1px solid rgb(231, 231, 231);
    margin-top:40%;
}
.myText h3 
{
    color:rgb(51, 51, 51);
    font-weight: 600;
}
.myText p 
{
    color:rgb(39, 39, 39);
    font-style: oblique;
    margin:2%;
}

.myText a 
{
  color: rgb(49, 49, 49);
}

/* Specific mapael css class are below
 * 'mapael' class is added by plugin
*/

.mapael .map {
    position: relative;
}

.mapael .mapTooltip {
    position: absolute;
    background-color: #fff;
    opacity: 0.90;
    filter: alpha(opacity=90);
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    max-width: 200px;
    display: none;
    color: #343434;
}

.acco-list 
{
margin-top:3%;
margin-bottom:5%;
}

.acco-list-inner 
{
    margin-top:5%;
}
.weitere-service h2
{
margin-top:2%;
margin-bottom:3%;
}

.color-dif 
{
    background-color: rgb(250, 250, 250);
}
/*============================== Kontakt Formular======================= */


.comments textarea
{
    height:20px;
}
.dienstSpace 
{
    margin-top:1%;
}
.checkBox label
{
    border:1px solid rgb(0, 51, 128);
    padding:15px;
    transition:0.3s;
    border-radius: 2px;
}
.checkBox label:hover 
{
    border: 1px solid white;
    transition: 0.3s;
    color:rgb(0, 0, 0);
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 12px 1px #4C4C4C; 
    box-shadow: 0px 0px 12px 1px #4C4C4C;
}

.checkBox input 
{
    display: none;
}


.personalFragen 
{
margin-top: 2%;
background-color: rgb(0,137,182);
padding:20px;
border:1px solid black;
}

.personalFragen p 
{
    color:rgb(0, 0, 0);
}
.personalFragen h6 
{
    color:rgb(2, 2, 2);
}
.personalFragen label 
{
    color:rgb(0, 0, 0);
}
.personalFragen input 
{
    color:black;
}

/*#personalFragen{
    display:none;background:#eef;
    padding:10px;
    text-align:center;
}

*/

.dienstFragen 
{
border:1px solid black;
margin-top: 1%;
background-color: rgb(0,137,182);
padding:15px;
}
.dienstFragen p 
{
    color:rgb(0, 0, 0);
}
.dienstFragen h6 
{
    color:rgb(0, 0, 0);
}
.dienstFragen label 
{
    color:rgb(0, 0, 0);
}
.dienstFragen 
{
    margin-top:2%;
}


.containerx 
{
    width:900px;
    height:400px;
}
.ip-loader h2 
{
    margin-left:22%;
    margin-bottom:10%;
    color:rgba(0, 0, 0, 0.699);
    user-select: none;
}
.br-on-mobile {
    display: none;
}




/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

        h1,h2,h3,h4,h5,h6 
        {
            text-transform: uppercase !important;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

         /*============= TOP PART HERO =============*/
        h1,h2,h3,h4,h5,h6 
        {
            text-transform: uppercase !important;
        }
         .info-top  a
         {
          color:rgb(255, 255, 255);
          font-size:18px !important;
         }
         .info-top  a:hover
         {
          color:rgb(238, 255, 0);
         }
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
         /*============= TOP PART HERO =============*/

         h1,h2,h3,h4,h5,h6 
        {
            text-transform: uppercase !important;
        }
         .info-top  a
         {
          color:rgb(255, 255, 255);
          font-size:14px !important;
         }
         .info-top  a:hover
         {
          color:rgb(238, 255, 0);
         }
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) 
    {

        /*============HEADINGS===============*/
        h1,h2,h3,h4,h5,h6 
        {
            text-transform: uppercase !important;
        }


        .aboutHeader 
{
    font-size:35px !important;
    color:rgb(119, 0, 255);
    margin-top:30% !important;
}
.br-on-mobile {
    display: static !important;
}

.hero-text1 
{
font-size: 16px !important;
margin-top:65% !important;

}

.hero-text2 
{
font-size: 16px !important;
margin-bottom:40% !important;
}

/*=============== NABAR MENU==================*/
        .s-header__nav-menu-link {
            display: inline-block;
            font-size: 1.25rem;
            font-weight: 300;
            color: #fff;
            opacity: .85;
            padding: .3125rem;
            transition-duration: 300ms;
            transition-property: all;
            transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
          }
/*===============Preloader================*/
.ip-loader h2 
{
    font-size: 26px;
    margin-left:15%;
    margin-bottom:10% !important;
    color:rgb(255, 255, 255);
    text-shadow: 1px 1px 1px black;
    user-select: none;
}

.loader-logo
{
    max-width:250px !important;
    margin-left: 15% !important;
    margin-bottom:4% !important;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */   
}
.centerLoad img 
{
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */   
}
.ip-inner
{
	margin-left: 40% !important;
    margin-bottom:4% !important;
    -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */   
}

/*===============SWIPER================*/        
.swiper-wrapper h2 
{
    font-size: 20px;
}
        .info-top  a
{
 color:rgb(255, 255, 255);
 font-size:12px !important;
}
.info-top  a:hover
{
 color:rgb(238, 255, 0);
}
/*============= TYPED.JS AUTO CSS==============*/

.autoText span  
{
    font-size: 16px !important;
    color:white;
}

.autoText p  
{
    font-size: 22px !important;
    color:white;
    font-weight: 500;
}

.autoText a 
{
    color:yellow !important;
}

.span-parent 
{
    width:100%;
    height:100px;
}
          /*=========== PARALAX BREAK ==========*/

          .js__parallax-window 
          {
              background-attachment: scroll !important;
          }
          .js__parallax-window1
          {
              background-attachment: scroll !important;
          }
          .js__parallax-window2 
          {
              background-attachment: scroll !important;
          }
          .js__parallax-window3 
          {
              background-attachment: scroll !important;
          }

          .break-btn 
{
    color:white;
    text-transform: uppercase;
    background-color: rgba(255, 255, 255, 0);
    border:1px solid white;
    padding:10px 30px 10px 30px !important;
    border-radius: 30px;
    transition: 0.4s;
    margin-left:auto;
}

.break-btn:hover
{
    transition: 0.4s;
    color:rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    padding:10px 30px 10px 30px !important;
    border-radius: 30px;
}

/*===========DIAGONAL SUB SITE==============*/
.diagonal
{
    background-image: none;
    display: none;
}
.cities h2 
{
    font-size: 18px !important;
}

.cities 
{
    margin-bottom:5%;
    padding-bottom: 5%;
}
.cities ul 
{
    border:1px solid purple;
    border-radius: 5px;
    transition: 0.3s;
    height:300px;
}
.cities h4 
{
    font-size: 18px !important;
}
.cities li a 
{
    font-size: 18px !important;
}

/*===============EINSATZGEBIETE LOCATIONS ==============*/
.myText h3 
          {
              font-size: 20px !important;
              font-style: oblique;
          }

          .myText  {
            padding: 10px;
            color: rgb(0, 195, 255);
            overflow: hidden;
            margin-top:10%;
        }
        
/*=============== Kontakt ==============*/
          .checkBox label
          {
              border:1px solid purple;
              padding:5px;
              transition:0.3s;
              border-radius: 2px;
          }      
          
          .s-btn 
          {
            margin-left:26% !important;
          }

    }

    /* Custom, iPhone Retina  iPhone SE/5*/ 
    @media only screen and (max-width : 320px) {

         /*============= TOP PART HERO =============*/

         .info-top  a
         {
          color:rgb(255, 255, 255);
          font-size:12px !important;
         }
         .info-top  a:hover
         {
          color:rgb(238, 255, 0);
         }

         .br-on-mobile {
            display: static !important;
        }
         /*============HEADINGS===============*/
        .aboutHeader 
        {
            font-size:20px !important;
            color:rgb(3, 3, 3);
            margin-top:40% !important;
        }
        h1,h2,h3,h4,h5,h6 
        {
            text-transform: uppercase !important;
        }
        /*=============== NABAR MENU==================*/
        .s-header__nav-menu-link {
            display: inline-block;
            font-size: 0.95rem;
            font-weight: 300;
            color: #fff;
            opacity: .85;
            padding: .3125rem;
            transition-duration: 300ms;
            transition-property: all;
            transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
          }
          /*===============EINSATZGEBIETE LOCATIONS ==============*/
          .myText h3 
          {
              font-size: 20px !important;
              font-style: oblique;
          }
          /*=============== Kontakt ==============*/
          .checkBox label
          {
              border:1px solid purple;
              padding:1px;
              transition:0.3s;
              border-radius: 2px;
          }   

          .s-btn 
          {
            margin-left:22% !important;
          }
          /*=========== PARALAX BREAK ==========*/

.js__parallax-window 
{
    background-attachment: scroll !important;
}
.js__parallax-window1
{
    background-attachment: scroll !important;
}
.js__parallax-window2 
{
    background-attachment: scroll !important;
}
.js__parallax-window3 
{
    background-attachment: scroll !important;
}


    }