/*
blau: #00b1eb
dunkel-blau: #006991
rot: #e30613
*/

/* audiowide-regular - latin */
@font-face {
  font-family: 'Audiowide';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/audiowide-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/audiowide-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/audiowide-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/audiowide-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/audiowide-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/audiowide-v16-latin-regular.svg#Audiowide') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/open-sans-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v28-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

html,body {height:initial !important;}
section.header {background-position: center top;
    background-image: url(../images/bg.jpg);background-size: cover;}

section.headershine {background-position: center top;
    background-image: url(../images/3s_shine_beleuchtung.jpg);background-size: cover;}


section.headersecurity {background-position: center top;
    background-image: url(../images/3s_security_sicherheit.jpg);background-size: cover;}


section.headersafety {background-position: center top;
    background-image: url(../images/3s_safety_mobilitaet.jpg);background-size: cover;}


section.header-small {background-position: center center;}
section.header-small .slogan {padding-bottom:5%;}
section.erfahrung::after {background-image: url(../images/bg.jpg);background-size: cover;
    content: "3S Schick Smart Solutions – smarte Beleuchtung und innovative Sicherheitstechnik für Industrie, Gewerbe und Kommunen";
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.home p {font-size:12pt; letter-spacing:0px; line-height:16pt;}
.home .text-einleitung p {font-size:12pt;line-height:16pt;}

p,li,td,th {font-family: 'Open+Sans', sans-serif;color:#004070;font-size:12pt;letter-spacing:0px;
    line-height:16pt;}
body:not(.home) section.kontakt {padding-top:40px;}

.blue-border {height:10px; background-color:#006991; }
.header .fp-tableCell {vertical-align: top;}

.home .header .uk-navbar {position: absolute;bottom:0;height:10%;}
.header .uk-navbar {background-color:#00b1eb;width:100%;}
.header .uk-navbar ul {width:100%;}
.header .uk-navbar ul li {width:25%;text-align: center;}
.home .header .uk-navbar ul li a {letter-spacing: 0px;
    font-size:36px;height:auto;
    color:#006991;text-transform: uppercase;font-weight:400;font-family: 'Audiowide', sans-serif;}
.header .uk-navbar ul li a {letter-spacing: 0px;height:auto; line-height:40px;font-size:36px;
    color:#006991;text-transform: uppercase;font-weight:400;font-family: 'Audiowide', sans-serif;}
.header .uk-navbar ul li a:hover {background-color: transparent;color:#fff;}
.header .logo-slogan-wrapper {height:45%;}
.header .logo {padding-top:5%;text-align: center;}
.header .logo img {max-width: 80%;}
.header .slogan h2 {color:#ffffff;text-transform: uppercase;font-weight:400;letter-spacing: 0px;
    font-family: 'Audiowide', sans-serif;text-align: right;margin-top:100px;margin-right:5%;font-size:36px;line-height:55px;}
.header .sloganshine h2 {color:#ffffff;text-transform: uppercase;font-weight:400;letter-spacing: 0px;
    font-family: 'Audiowide', sans-serif;text-align: right;margin-top:100px;margin-right:5%;font-size:36px;line-height:50px;}
.header .slogansecurity h2 {color:#ffffff;text-transform: uppercase;font-weight:400;letter-spacing: 0px;
    font-family: 'Audiowide', sans-serif;text-align: center;margin-top:100px;margin-right:5%;font-size:36px;line-height:50px;}
.header .slogansafety h2 {color:#ffffff;text-transform: uppercase;font-weight:400;letter-spacing: 0px;
    font-family: 'Audiowide', sans-serif;text-align: center;margin-top:100px;margin-right:5%;font-size:36px;line-height:50px;}
.header .kasten-vogel {height:45%;position: relative;}
.header .kasten-vogel .uk-grid {position: absolute;bottom: 0px;width: 100%;}
.header .kasten-vogel .uk-grid > div {position: relative;}
.header .kasten-vogel .briefkasten {margin-left:20%;width:800px;max-width:100%; float:right;
    position: absolute;bottom:200px;}
.header .kasten-vogel .vogel {text-align: right;color:#fff;text-transform: uppercase;line-height:40px;
    font-weight: 400;letter-spacing:0px; font-size:36px; font-family: 'Audiowide', sans-serif;
    margin:0 auto;height:250px;display: inline-block;position: relative;}
.header .kasten-vogel .vogel p {    font-family: 'Audiowide', sans-serif;
    color: #fff;    font-style: normal;
    padding-top: 90px;
    padding-right: 180px;
    font-size: 24pt; line-height: 36pt; letter-spacing: 5px;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5);
}
.header .kasten-vogel .vogel-bild {width: 800px;
    position: absolute;right:0;
    margin-top: -60px;}

h2 {color: #006991;
    font-weight: 400;
    font-family: 'Audiowide', sans-serif;letter-spacing: 0px;line-height:30px;
    font-size: 24px;}

h4 {color: #006991;
    font-weight: 400;
    font-family: 'Audiowide', sans-serif;letter-spacing: 0px;line-height:24px;
    font-size: 18px;}



.main-content h1,.likeh1 {color:#006991;text-transform: uppercase;font-weight:400;font-size: 36px;
    line-height: 42px; font-family: 'Audiowide', sans-serif;text-align: center;margin:0;letter-spacing: 0px;}
.main-content h1,.likeh1 {margin-bottom:30px;margin-top:30px;}

.main-content .grid-wrapper {margin-bottom:00px;}
.main-content .leistungs-grid { max-width: 90%;margin: 0 auto;}
.main-content .leistungs-grid .uk-panel {text-align: center;}
.main-content .content-wrapper {
    width: 80%;
    margin: 0 auto;
    text-align:center; color:#006991;
    font-family:'Open+Sans';color:#fff; 
    font-size: 20px;
    line-height: 36px;}

.leistungen .red-kontakt {height:17%;background-color:#e30613;color:#fff;text-align: center;padding:00px 0;}
.leistungen .red-kontakt a {color:#fff;}
.leistungen .red-kontakt p {font-size:30px;line-height:35px; color:#fff;}
.leistungen .red-kontakt .big {font-family: 'Audiowide', sans-serif;text-transform: uppercase;font-weight:900;
    font-size:42px;line-height:50px;letter-spacing:0px;color:#fff;margin-top:0;}
.leistungen .red-kontakt .underline {font-family:'Open+Sans';color:#fff;}
#karte {min-height:510px;}
.erfahrung .grid-wrapper {max-width: 1000px;margin:0 auto;}
.erfahrung .content-wrapper {padding-top:00px;max-width:90%;margin:0 auto;text-align: center;
    text-align: center;color:#006991;
    font-size: 20px;
    line-height: 30px;}
#preise .uk-table {max-width: 70%;}
#preise .uk-overflow-container + .uk-overflow-container {margin-top:50px;}
#preise .uk-table:first-of-type {margin-top:0px;}
.leistungs-grid .uk-overlay.uk-overlay-hover {overflow: visible;}
.leistungs-grid .uk-overlay.uk-overlay-hover:hover img {opacity: 0.2;}
.uk-link, a {color:#006991;}

.erfahrungen-grid {margin-top:20px;margin-bottom:20px;}
.erfahrungen-grid  div.uk-panel .uk-overlay {background-repeat: no-repeat;background-position: center;background-size:100%;
    text-align: center;}
.erfahrungen-grid  .uk-overlay-panel {
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition:         transform .8s ease-in-out;
}
.erfahrungen-grid  .uk-overlay:hover .uk-overlay-panel {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.button-wrapper {}
.blue-button {padding:5px 40px;color:#fff;background-color:#00b1eb;font-family: 'Audiowide', sans-serif;
    letter-spacing: 0px;display:inline-block;
    text-transform: uppercase;margin-top:20px;
    font-weight: 400;    font-size: 24px;
    line-height: 35px;}
.blue-button:hover {color:#fff;text-decoration: none;background-color: #00b1eb;}
.erfahrungen-grid  div.uk-panel img {opacity: 0;max-width: 250px;}
.erfahrungen-grid  .uk-overlay-panel { font-family: 'Audiowide', sans-serif;text-transform: uppercase;font-weight:400;
    font-size:36px;line-height:36px;letter-spacing: 0px;color:#fff;}
.erfahrungen-grid .preiswert .uk-overlay-panel {color:#00b1eb;}
.erfahrungen-grid .verlaesslich .uk-overlay-panel {color:#00b1eb;}
.erfahrungen-grid .persoenlich .uk-overlay-panel {color:#00b1eb;}
.erfahrungen-grid .preiswert .uk-overlay {background-image:url("../images/3s_integral.png");z-index: 100000;position: absolute;}
.erfahrungen-grid .verlaesslich .uk-overlay {background-image:url("../images/3s_integral.png");}
.erfahrungen-grid .persoenlich .uk-overlay {background-image:url("../images/3s_integral.png");}
.uk-vertical-align-middle {width:100%;}
.kontakt .kontaktgrid {height:90%;max-width: 80%;margin: 0 auto;}
.kontakt .kontaktgrid > div {padding-top:20px;}
.home .kontakt footer {    margin-top: 0;
    position: absolute;
    bottom: 0;    width: 100%;}
.kontakt footer {padding:20px 0;background-color: #00b1eb;color:#fff;margin-top:40px;text-align: center;}

.kontakt footer ul {list-style: none;padding:0;margin:0;text-align: center;display: inline-block;}
.kontakt footer ul li {padding:0;margin:0; display:inline-block;padding:0 50px;}
.kontakt footer ul li a {color:#fff;text-transform: uppercase;font-family: 'Audiowide', sans-serif;
    letter-spacing:0px;
    font-weight:400;font-size:15px;line-height:35px;}

.offcanvas-menu-bar {text-align: right;}
.offcanvas-menu-bar a {padding-right:20px;color:#fff;line-height: 40px;}

.uk-form input[type=text], .uk-form textarea,
.uk-form select {  border: 2px solid #00b1eb;
    width: 100%;
    display: block;
    font-size: 15px;
    line-height: 30px;
    height: 30px;}
.uk-form input[type=submit] {background-color: #00b1eb;color:#fff;padding:10px 20px;border:0;box-shadow: none;
    text-transform: uppercase;
    font-weight: 400; font-family: 'Open+Sans', sans-serif;
    text-align: center;cursor: pointer;letter-spacing: 0px;
}
.uk-form input[type=submit]:hover {background-color:#006991;}
.uk-form textarea {height:100px;}
label {color: #006991;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Open+Sans', sans-serif;
    text-align: center;letter-spacing: 2px;
    margin-top: 50px;
    margin-bottom: 0;}

#karte h3 {color: #006991;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Open+Sans', sans-serif;
    text-align: center;letter-spacing: 2px;
    margin-top: 50px;
    margin-bottom: 0;}

@keyframes pulse {
    0% {transform: scale(1, 1); }
    50% { transform: scale(1.1, 1.1);    }

    100% { transform: scale(1, 1); }
}

.puzzle-piece.pc3 img {
    animation: pulse 3s linear infinite;
}

.puzzle .puzzle-piece {display: inline-block;position: absolute;display:none;}
.puzzle .puzzle-piece img {max-width: 100%;max-height: 100%;}
.puzzle .puzzle-piece.pc1 {text-align: right;}
.puzzle .puzzle-piece.pc9 {text-align: left;}
.puzzle .puzzle-piece.pc3 {cursor: pointer;display: block;}

.uk-offcanvas-bar .uk-navbar-nav>li {display: block;width: 100%;}
.uk-offcanvas-bar .uk-navbar-nav>li>a {    letter-spacing: 2px;
    font-size: 15px;    height: auto;    text-transform: uppercase;
    font-weight: 400;    font-family: Open+Sans, sans-serif;color:#fff;}

.offcanvas-menu-bar {font-family: Open+Sans, sans-serif;font-size:20px;}
.uk-offcanvas-bar {background-color:#004070;}
.back-to-top {position: fixed;
    z-index: 10000;
    bottom: 20px;
    right: 20px;
    background-color: #006991;
    color: #fff;
    font-size: 40px;
    line-height: 60px;
    font-weight: bold;
    border-radius: 50px;
    text-align: center;
    width: 50px;
    height: 50px;}
@media (max-width: 768px) {
    .erfahrungen-grid-small {max-width:80%;margin:0 auto;margin-top:20px;}
    .puzzle-wrapper-small li {font-size: 15pt;
    letter-spacing: 1px;    line-height: 21pt;}
    .puzzle-wrapper-small {}
    .puzzle-wrapper-small .uk-accordion-title {background-color:transparent; color:#fff;padding:20px;}
    .home .kontakt footer {position: relative;margin-top:20px;}
    .button-wrapper {margin-bottom:20px;}
    .fp-responsive section.header.fp-auto-height-responsive.fp-section {
        height: 100vh !important;
        width: 100%;
    }
    .text-einleitung {margin-top:20px;}
    .header .slogan h2 {display: none;}
    #preise .uk-table {max-width: 100%}
    .leistungen .red-kontakt p { font-size: 21px;line-height: 25px;}
    .fp-responsive .header .logo {
        padding-top: 30px;
    }

    .header .logo img {
        max-width: 80%;
    }

    .header .logo-slogan-wrapper {
        height: 25%;
    }

    .header .kasten-vogel {
        height: 90vh;
    }

   

    .main-content h1, .likeh1 {
        font-size: 30px;
        line-height: 38px;
    }

    .main-content .content-wrapper {
        width: 95%;
    }

    .header .kasten-vogel .briefkasten {
        max-width: 100%;
        position: relative;
        float: none;
        text-align: left;
        margin: 0 auto;
        clear: both;
        display: block;}
    .home .logo-slogan-wrapper {display:block;position: absolute;}
}
@media (max-width: 1024px) {
    .header .kasten-vogel .vogel-bild {max-width:200px;margin-top:-30px;}
    .header .kasten-vogel .vogel {}
}