/* colors */

header {
    background-color: #004354;
}

.header-nav a {
    background-color: #c8d4de;
}

@media (min-width: 64em) {

    .header-nav a {
        background-color: transparent;
        color: #c8d4de;
    }

    .navlist-2 {
        background-color: #255666;
    }

    ul.navlist-2 {
        background-color: #255666;
    }

}

.header-nav a:hover,
.header-nav .current a {
    color: #c8d4de;
    background-color: #007093;
}

.sidebarmenue a {
    background-color: #f1f1f1;
}

.sidebarmenue li.active a,
.sidebarmenue li a:hover {
    background-color: #525252;
    color: #e8e8e8;
}

h1 {
    color: #525252;
}

h2 {
	color: #007093;
}

a {
    color: #007093;
}

a:hover {
    color: #104354;
}

.preisliste:before {
    background-image: url(pdf.svg);
}

.transb {
    border-bottom: 1px solid #007093;
}

.productgallery a {
    border: 1px solid #e7ece1;
    color: #525252;
}

.productgallery a:hover {
    border-color: #007093;
    background-color: #007093;
}

button,
.button {
    background-color: #007093;
}



/* logo, Footer on home site and other changes */

.logo {
    width: 150px;
    margin-top: 0.9rem;
}


@media (min-width: 64em) {

  .logo {
      margin-top: 1.4rem;
      width: auto;
  }

}

@media (min-width: 80em) {

  .logo {
      width: auto;
  }

}

.logo img {
    height: 40px;
}

@media (min-width: 64em) {

    .header-nav a {
        padding: 0.6rem 0.7rem;
    }

}

@media (min-width: 80em) {

    .header-nav a {
        padding: 0.6rem 0.9rem;
    }

}

.home .content {
    padding-top: 2rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 115em) {

	.home .footer {
	    color: #aaa;
	    position: static;
	}

	.home .footer-nav a {
	    color: #aaa;
	    border-right: 1px solid #aaa;
	}

}

@media (min-width: 64em) {

	.icons {
	    max-width: none;
	}

}

@media (min-width: 80em) {

    .shoplink {
        padding-top: 0.2rem;
    }

}



/* new styles */

.slide img {
    width: 100%;
    height: 230px;
}

.home .content-main {
    overflow: hidden;
}

.slidetitle {
    position: absolute;
    bottom: 1rem;
    right: 2rem;
    font-size: 2rem;
    color: #535355;
}

.slidetext {
    position: absolute;
    top: 9rem;
    right: 9rem;
    width: 21rem;
    color: #525252;
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 3.5rem;
}

.content i  {
    color: #68a828;
    font-style: normal;
}

.slider .slidetext i {
    font-weight: normal;
    font-size: 2.29rem;
}

.tiles {
    margin: -0.5rem;
    display: inline-block;
}

.tile {
    width: calc(50% - 1rem);
    float: left;
    margin: 0.5rem;
    position: relative;
    background-color: #f1f1f1;
    transition: ease all 0.5s;
    height: 165px;
    overflow: hidden;
}

.tile.big {
    width: calc(100% - 1rem);
    height: 230px;
}



@media (min-width: 35em) {

    .tile {
        width: calc(25% - 1rem);
    }

    .tile.big {
        width: calc(50% - 1rem);
    }

}


@media (min-width: 64em) {

    .tile {
        width: calc(16.666% - 1rem);
    }

    .tile.big {
        width: calc(33.333% - 1rem);
        height: 260px;
    }

}




.tile:hover {
    background-color: #c9d4df;
}

.tile a {
    height: 100%;
}

@media (min-width: 25em) {

    .tile a {
        display: -webkit-flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

}

.tile img {
    position: relative;
    width: 100%;
    margin: auto;
    max-width: 25rem;
}

.tiletitle {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.7);
    color: #1d1d1b;
    width: 100%;
    padding: 0.2rem 1rem;
    transition: ease all 0.5s;
    text-align: center;
}

a:hover .tiletitle {
    color: #fff;
    background-color: rgb(0, 112, 147, 0.7);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}




/* tileheader vers.1 

.tileheader {
    position: absolute;
    width: 100%;
    height: 3rem;
    background-color: rgba(255,255,255,0.7);
    transition: ease all 0.5s;
}

.tile:hover .tileheader {
    background-color: rgba(201, 212, 223, 0.7);
}

.tiletitle {
    background-color: none;
}*/


/* tileheader vers.2 */

.tileheader {
    position: absolute;
    width: 65%;
    height: 0.15rem;
    top: 2.9rem;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgb(34, 112, 147);
    transition: ease all 0.5s;
}

.tile.ssamcontrol .tileheader {
    background-color: rgba(15, 46, 115, 1)
}

.tile.ssamcontrolturbo .tileheader {
    background-color: rgba(224, 82, 17, 1);
}

.tile.visonic .tileheader {
    background-color: rgb(104, 168, 40, 1);
}

.tile.paradox .tileheader {
    background-color: rgba(167, 4, 87, 0.1);
}

.tile.ssamvision .tileheader {
    background-color: rgba(242, 92, 39, 0.1);
}

.tile:hover .tileheader {
    #background-color: rgba(201, 212, 223, 0);
}



/* tileheader vers.3 

.tile.big {
    overflow: hidden;
}

.tileheader {
    position: absolute; 
    width: 2rem;
    height: 2rem;
    top: -1rem;
    right: -1rem;
    background-color: rgb(34, 112, 147);
    transition: ease all 0.5s;
    transform: rotate(45deg);
}

.tile.ssamcontrol .tileheader {
    background-color: rgba(15, 46, 115, 1)
}

.tile.visonic .tileheader {
    background-color: rgb(104, 168, 40, 1);
}

.tile.paradox .tileheader {
    background-color: rgba(167, 4, 87, 0.7);
}

.tile.ssamvision .tileheader {
    background-color: rgba(242, 92, 39, 0.7);
}

.tile:hover .tileheader {
    #background-color: rgba(201, 212, 223, 0);
}

*/










.blocks .grid-col {
    background-color: #f1f1f1;
}

.blocks h2 {
    margin-bottom: 0;
    padding: 0.5rem 1rem;
    background-color: #007093;
    color: #fff;
}

.blocks ul {
    padding: 1rem 2rem;
}

.blocks p {
    padding: 1rem;
    margin-bottom: 0;
}

.blocks a {
    display: block;
    height: 100%;
}

.blocks a:hover {
    background-color: #007093;
}

.blocks li,
.blocks strong {
    color: #1d1d1b;
}

.blocks a:hover p,
.blocks a:hover li,
.blocks a:hover strong {
    color: #fff;
}



/* SSAM Styles */

@media (min-width: 48em) {

    .grid-col-7 {
        -ms-flex-preferred-size: calc(100% / 12 * 7 - 2 * 1.5rem);
        flex-basis: calc(100% / 12 * 7 - 2 * 1.5rem);
        width: calc(100% / 12 * 7 - 2 * 1.5rem);
    }

}

h3:first-child {
    margin-top: 0;
}

.header-nav .navlist-2 a {
    padding: 0.6rem 0.77rem;
}

.form-search {
    margin-bottom: 0;
}


input {
  border-radius: 0;
}

input[name="q"]:focus {
    outline: 0 none;
}

input[name="q"] {
  -webkit-appearance: none;
}

.form-search input {
    width: calc(100% - 2.5rem);
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    background-color: #1e6180;
    color: #c9d4df;
    border: 0;
    margin: 0;
}

@media (min-width: 64em) {

    .form-search input {
        width: 10rem;
    }

}

.form-search button {
    padding: 0.6rem 0.9rem;
    font-size: 0.95rem;
    background-color: #227093;
    background-color: #1e6180;
    color: #c9d4df;
    background-image: url(search.svg);
    background-size: 1.0rem;
    background-repeat: no-repeat;
    background-position: 0.7rem;
    text-indent: -9999px;
    text-align: left;
    width: 2.5rem;
    margin-bottom: 0;
}

.form-search button:hover {
    background-color: #227093;
    color: #c9d4df;
    opacity: 0.8;
}

.pics img {
    margin-bottom: 1rem;
}

.slider.owl-carousel.owl-theme {
    width: calc(100% + 2 * 0.5rem);
    margin-top: 0.2rem;
}

.owl-wrapper {
    margin: 0 -0.5rem;
}

.owl-carousel .owl-item {
    padding: 0.5rem;
}

.slider .tile {
    width: 100%;
    margin: 0;
}

.owl-pagination {
    display: none;
}

.owl-controls {
    position: absolute;
    top: 35%;
    width: calc(100% - 1rem);
}

.owl-prev,
.owl-next {
    position: absolute;
}

.owl-prev {
    left: 0;
}

.owl-next {
    right: 0;
}

.owl-theme .owl-controls .owl-buttons .owl-prev,
.owl-theme .owl-controls .owl-buttons .owl-next {
    height: 53px;
    width: 53px;
    border-radius: 0px;
    margin: 0;
    opacity: 1;
    background-image: url(arrow.svg);
    background-size: 2rem 2rem;
    background-repeat: no-repeat;
    background-position-y: 0.7rem;
    background-position-x: right;
    background-color: transparent;
    opacity: 0.3;
}

.owl-theme .owl-controls .owl-buttons .owl-prev {
    transform: rotate(180deg);
}

.tileprice {
    position: absolute;
    right: 0;
    color: #000;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.3rem;
    background-color: rgba(255,255,255,0.7);
    transition: ease all 0.5s;
}

a:hover .tileprice {
    background-color: rgba(201, 212, 223, 0.7);
    color: #fff;
    color: #f50600;
    font-size: 1.8rem;
}

/*.slider a:hover .tiletitle {
    background-color: rgba(187, 15, 33, 0.7);
}

.slider .tile:hover {
    background-color: rgb(230, 220, 221);
}*/

.tile.ssamcontrol:hover {
    background-color: #d4dbea;
}

.tile.ssamcontrol a:hover .tiletitle {
    background-color: rgba(15, 46, 115, 0.7);
}

.tile.ssamcontrolturbo:hover {
    background-color: #f3e3de;
}

.tile.ssamcontrolturbo a:hover .tiletitle {
    background-color: rgba(224, 82, 17, 0.7);
}

.tile.visonic:hover {
    background-color: #e6ece0;
}

.tile.visonic a:hover .tiletitle {
    background-color: rgba(104, 168, 40, 0.7);
}

.tile.paradox:hover {
    background-color: rgb(230, 220, 221);
}

.tile.paradox a:hover .tiletitle {
    background-color: rgba(191, 0, 0, 0.7);
}

.tile.ssamvision:hover {
    background-color: rgb(234, 224, 221);
}

.tile.ssamvision a:hover .tiletitle {
    background-color: rgba(140, 62, 37, 0.7);
}

.tile.warnfernschalt:hover {
    background-color: #f1efe2;
}

.tile.warnfernschalt a:hover .tiletitle {
    background-color: rgba(172, 156, 0, 0.7);
}

.tile.sale:hover {
    background-color: #decece;
}

.tile.sale a:hover .tiletitle {
    background-color: rgba(245, 6, 0, 0.7);
}

.tile.sale strong,
.tile.sale br {
    display: none;
}

@media (min-width: 80em) {

    .tile.sale strong,
    .tile.sale br {
        display: inline-block;
    }

}

.tile .content-de .tiletitle {
    display: none;
}

.country-de .tile .content-de .tiletitle {
    display: block;
}

.tile h1 {
    color: #525252;
    padding: 3rem 2rem;
    font-size: 1.0rem;
    line-height: 1.8rem;
    text-align: center;
}

@media (min-width: 80em) {

    .tile h1 {
        font-size: 1.8rem;
        line-height: 2.2rem;
    }

}

.tile h1 strong {
    color: #007093;
}

.tile.event img {
    max-width: 100%;
}

.tile.event {
    background-color: transparent;
    height: auto;
}

.background h3 {
    color: #525252;
    background-color: #f1f1f1;
    padding: 0.5rem;
    margin-bottom: 0;
}

.background p {
    background-color: #f1f1f1;
    padding: 0.5rem;
}


@media (min-width: 48em) {

    .c-4cols > .grid-col-3 {
        -ms-flex-preferred-size: calc(100% / 12 * 6 - 2 * 1.5rem);
        flex-basis: calc(100% / 12 * 6 - 2 * 1.5rem);
        width: calc(100% / 12 * 6 - 2 * 1.5rem);
    }

}

@media (min-width: 64em) {

    .c-4cols > .grid-col-3 {
        -ms-flex-preferred-size: calc(100% / 12 * 3 - 2 * 1.5rem);
        flex-basis: calc(100% / 12 * 3 - 2 * 1.5rem);
        width: calc(100% / 12 * 3 - 2 * 1.5rem);
    }

}


.bannerinfo {
    background-color: #f1f1f1;
    padding: 1rem 1rem 0.1rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.bannerinfo strong {
    font-size: 1.5rem;
    color: #6f6f6f;
}

.hide {
    display: none;
}