/** default for mobile and global */


/** only for sticky-footer required */
html {position: relative; min-height: 100%;}
body {margin-bottom: 0; background: #000; color: #fff; font-family: Calibri, arial, sans-serif; font-size: 15px}

.header {background: url(../images/layout/bg-header.png) repeat-x 0 16px; font-size: 18px;}
.header p {margin-top: 10px; line-height: 24px;}
.header p > strong{color: #50BDF9;}

/**  TEASER  */
#carousel-hifi-gaerber .carousel-caption {left: 0; right: 0; bottom: -20px}
#carousel-hifi-gaerber {margin-left: -15px; margin-right: -15px;}
#carousel-hifi-gaerber .carousel-caption-inner {background: rgba(0, 0, 0, 0.75); padding: 10px; height: 140px}
#carousel-hifi-gaerber .carousel-caption-inner h3 {margin-top: 10px}
#carousel-hifi-gaerber .carousel-indicators {bottom: 0}

/** NAVIGATION */
.navbar { margin-bottom: 0;}
.navbar-default .navbar-brand {color: #ffffff;}
.navbar-default .navbar-nav > li > a {color: #fff;}
.navbar-custom {background: #1A1A1A; border: none; border-radius: 0;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {background: #50BDF9; color: #fff;}

.page-header {margin: 10px 0 15px 0; border-bottom: none;}
.page-header h1 {font-size: 18px; color: #50BDF9; margin: 0 0 4px 0; padding: 0; font-weight: bold;}
.page-header h2 {font-size: 16px; margin: 0; padding: 0; font-weight: bold;}
h3 {font-size: 15px; color: #50BDF9; margin: 25px 0 5px 0; padding: 0; font-weight: bold;}
h3 span {text-transform: uppercase}

.newspannel {background: #1A1A1A; padding: 0 8px 15px; margin-bottom: 20px;}
.newspannel h3 {font-size: 18px; margin: 0; color: #FF9900; text-align: center; text-transform: uppercase; font-weight: bold; padding-top: 10px; padding-bottom: 15px;}
.newspannel h4 {font-size: 18px; margin: 0; color: #FF9900; text-transform: uppercase; font-weight: bold; padding-top: 10px; padding-bottom: 15px;}
.newspannel img {border: 1px solid #FF9900;}
.newspannel a {display: block; text-align: right; color: #ffffff;}

/**  FOOTER  */
.footer {background: #1A1A1A; padding-bottom: 15px;}
.footer .container .container-inner {margin-top: 15px;}

dl.dl-horizontal dt {width: 70px; float: left; text-align: left; line-height: 17px;}
dl.dl-horizontal dd {margin-left: 70px; line-height: 17px;}

/**  FOOTER IMPRESSUM  */
.footer-kontakt {position: relative; background: #000; bottom: 0; height: 50px; line-height: 50px; width: 100%;}
.footer-kontakt ul {text-align: center; margin-bottom: 0;}
.footer-kontakt ul li a {color: #ffffff;}

/**  CONTENT  */
.content > .container > .container-inner ul.checkboxed {padding-left: 30px; list-style: none;}
.content > .container > .container-inner ul.checkboxed li span{display: inline-block; margin-right: 15px; margin-left: -30px; color: #FF9900;}
.content > .container > .container-inner dl dd {margin-bottom: 10px;}
.content > .container > .container-inner .thumbnail {padding: 0; border-radius: 0;}
.content > .container > .container-inner .thumbnail:hover {border-color: #FF9900;}
.content > .container > .container-inner a {color: #50BDF9; text-decoration: underline;}
.content > .container > .container-inner a:hover {color: #FF9900;}
.content > .container > .container-inner .standorte dd{margin-bottom: 0;}

.form-control {border-radius: 0; background: #eee;}

.btn {border-radius: 0; background: #50BDF9;}
.btn-primary:hover {background: #FF9900;}

.btn-primary:focus, .btn-primary.focus, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {background: #FF9900;}
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label{color: #FF9900;}

audio {width: 227px;}

.page-partner .partner strong{color: #50BDF9;}
.page-hifi-high-end .hifi-high-end strong{color: #50BDF9;}


#Neupreis input, button, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit; color: #999;}

.button, input, optgroup {color: #000; font-family: Calibri, arial, sans-serif;}
.newsticker #carousel-newsticker {position: relative; background-color: #fff; margin-top: 27px; border: 1px solid #CCCCCC; margin-left: 5%; margin-right: 5%;}

@media (min-width: 375px) {
    #carousel-hifi-gaerber .carousel-caption-inner {height: 165px}
}

@media (min-width: 420px) {
    #carousel-hifi-gaerber .carousel-caption-inner {height: 187px}
}



/** iPad portrait or higher */
@media (min-width: 768px) {

    body {margin-bottom: 402px;}

    .header {font-size: 22px;}
    .header p {margin-top: 50px;}

    /** NAVIGATION */
    .navbar {margin-bottom: 20px;}
    .navbar-custom {margin-top: 10px; background: #1A1A1A;}

    .caret {display: none;}

    .container-fluid {padding-right: 0; padding-left: 0;}
    .container-fluid .navbar-collapse {padding-right: 0; padding-left: 0;}

    .navbar-custom .navbar-nav > li > a {padding: 0 9px; line-height: 15px; height: 15px; text-transform: uppercase; color: #fff; font-size: 15px; border-right: 1px solid #fff; margin-top: 15px; margin-bottom: 15px;}
    .navbar-custom .navbar-nav > li:last-child > a {border-right: none;}
    .navbar-custom .navbar-nav > li.active > a {background: none; color: #50BDF9; text-decoration: none;}
    .navbar-custom .navbar-nav > li > .dropdown-menu {background-color: #999; border: none; border-radius: 0;}
    .navbar-custom .navbar-brand {display: none;}
    .navbar-custom .navbar-nav > li > .dropdown-menu {background: #ffffff;}
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {color: #fff; text-decoration: underline;}
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {color: #50BDF9; text-decoration: underline; background: none;}

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {background: #50BDF9;}


    /** TEASER */
    .teaser {background: url(../images/layout/bg-teaser.jpg) repeat-x 20px 0;}
    #carousel-hifi-gaerber {margin-bottom: 30px; margin-left: 0; margin-right: 0;}
    #carousel-hifi-gaerber .carousel-caption {left:20px; right: 0; text-align: left; font-style: italic;}
    #carousel-hifi-gaerber .carousel-caption h3 {min-width: 386px; max-width: 726px; height: 56px; line-height: 56px; font-size: 45px; color: #50BDF9; display: block; text-transform: uppercase; margin: 0; text-align: left; background: rgba(0, 0, 0, 0.8); padding-left: 20px;}
    #carousel-hifi-gaerber .carousel-caption p {min-width: 469px; max-width: 569px; height: 70px; line-height: 30px; font-size: 22px; margin: 0 0 0 45px ; padding: 5px 20px 0 20px; display: inline-block; background: rgba(0, 0, 0, 0.8);}
    #carousel-hifi-gaerber .carousel-indicators li {border-radius: 0; background: rgba(255, 255, 255, 0.25); border: none; width: 10px; height: 10px; margin: 1px;}
    #carousel-hifi-gaerber .carousel-indicators li.active {background: rgba(255, 255, 255, 0.5); border: none; }
    #carousel-hifi-gaerber .carousel-indicators {bottom: -35px;}
    #carousel-hifi-gaerber .carousel-caption-inner {background: none; padding:0}

    .page-news #carousel-hifi-gaerber .carousel-caption,
    .page-angebote #carousel-hifi-gaerber .carousel-caption,
    .page-unser-team #carousel-hifi-gaerber .carousel-caption,
    .page-tipps #carousel-hifi-gaerber .carousel-caption,
    .page-partner #carousel-hifi-gaerber .carousel-caption,
    .page-standorte #carousel-hifi-gaerber .carousel-caption,
    .page-kontakt #carousel-hifi-gaerber .carousel-caption,
    .page-impressum #carousel-hifi-gaerber .carousel-caption,
    .page-datenschutz #carousel-hifi-gaerber .carousel-caption,
    .page-sitemap #carousel-hifi-gaerber .carousel-caption,
    .page-ueber-uns #carousel-hifi-gaerber .carousel-caption
    {display: none}

    .page-klangtuning #carousel-hifi-gaerber .carousel-caption h3 {width: 726px}
    .page-multiroom #carousel-hifi-gaerber .carousel-caption h3 {width: 626px}
    .page-beschallungsanlagen #carousel-hifi-gaerber .carousel-caption h3 {width: 566px}
    .page-car-hifi #carousel-hifi-gaerber .carousel-caption h3 {width: 226px}

    .page-klangtuning #carousel-hifi-gaerber .carousel-caption p {width: 509px;}
    .page-beschallungsanlagen #carousel-hifi-gaerber .carousel-caption p {width: 489px;}
    .page-car-hifi #carousel-hifi-gaerber .carousel-caption p {width: 569px;}
    .page-hifi-netzwerke #carousel-hifi-gaerber .carousel-caption p {width: 549px;}

    /** INFOBOXEN */
    .infoboxen {background: #1A1A1A; margin-bottom: 20px;}

    #carousel-infoboxen .item {padding: 15px;}

    .infobox a.hifi {background: url(../media/infoboxen/info-hifi.jpg) no-repeat center center;}
    .infobox a.klangtuning {background: url(../media/infoboxen/info-klangtuning.jpg) no-repeat center center;}
    .infobox a.streaming {background: url(../media/infoboxen/info-streaming.jpg) no-repeat center center;}
    .infobox a.heimkino {background: url(../media/infoboxen/info-heimkino.jpg) no-repeat center center;}
    .infobox a.projekt {background: url(../media/infoboxen/info-projekt.jpg) no-repeat center center;}
    .infobox a.carhifi {background: url(../media/infoboxen/info-carhifi.jpg) no-repeat center center;}

    .infobox {height: 130px;}
    .infobox > a {height: 130px; display: inline-block; width: 100%;}
    .infobox > a > div {position: absolute; top:0; left: 0; background: rgba(0, 0, 0, 0.5); width: 84%; height: 130px; transition: all 1s; margin-left: 15px; margin-right: 15px;}
    .infobox:hover > a > div {top:40px; left: 11px; width: 71%; height: 50px; transition: all 1s;}
    .infobox > a > p {position: absolute; top:40px; left: 0; right: 0; text-align: center; font-size: 17px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; height: 50px; line-height: 22px; margin-left: 25px; margin-right: 25px; color: #ffffff; transition: all 1s; margin-bottom: 0;}
    .infobox > a > p > span { display: inline-block; padding-top: 12px;}

    .carousel-control {width: 2%;}
    .left.carousel-control {left: -15px;}
    .right.carousel-control {right: -15px;}
    .left.carousel-control, .right.carousel-control {background: none;}
    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next {font-size: 18px;}
    .content .container .container-inner, .footer .container .container-inner {margin-left: 15px; margin-right: 15px;}


    /** FOOTER */
    .footer {position: absolute; bottom: 150px; width: 100%; height: 220px; /** equals to body margin-bottom */ background: #1A1A1A; line-height: 17px;}
    .footer ul, .footer p {margin-bottom: 0; }
    .footer p span, .footer dl span {color: #50BDF9;}
    .footer .logo-myartside {padding-top: 120px; text-align: right;}
    .footer .logo-myartside img{display: inline-block;}
    #.footer-border {border-right: 1px solid #333333;}
    dl.dl-horizontal dt {width: 100%; text-align: left; line-height: 17px;}
    dl.dl-horizontal dd {margin-left: 0; line-height: 17px;}

    /**  FOOTER PARTNER SLIDER  */
    .footer-slider {position: absolute; bottom: 30px; height: 120px; width: 100%;}
    #carousel-partner {margin-top: 15px; }
    #carousel-partner .item {padding: 0 15px;}
    #carousel-partner ul {text-align: center;}
    #carousel-partner ul li{padding: 0 15px;}

    /**  FOOTER IMPRESSUM  */
    .footer-kontakt {position: absolute; background: #1A1A1A; bottom: 0; height: 30px; line-height: 30px; width: 100%;}
	.audio {margin-left:460px}

}

/** iPad landscape or higher */
@media (min-width: 979px) {

    body {margin-bottom: 352px;}

    /**  TEASER  */
    #carousel-hifi-gaerber .carousel-caption h3 {font-size: 50px;}
    #carousel-hifi-gaerber .carousel-caption p {font-size: 22px;}

    /** NAVIGATION */
    .navbar-custom .navbar-nav > li > a {padding: 0 10px; font-size: 20px;}

    /** INFOBOXEN */
    .infobox > a > p {font-size: 21px;}
    .infobox > a > div {width: 90%;}
    .infobox:hover > a > div {width: 81%;}

    /** FOOTER */
    .footer {height: 170px; font-size: 14px; bottom: 112px;}

    dl.dl-horizontal dt {width: 70px;}
    dl.dl-horizontal dd {margin-left: 70px;}

    /** FOOTER PARTNER SLIDER*/
    .footer-slider {height: 82px;}
    #carousel-partner ul li {padding: 0 10px;}

	.audio {margin-left:680px}

}

/** Desktop or higher */
@media (min-width: 1200px) {
    .container {width: 1058px;}

    /** NAVIGATION */
    .navbar-custom .navbar-nav > li > a {padding: 0 16px;}

    /** FOOTER */
    .footer {font-size: 15px;}

    /** FOOTER PARTNER SLIDER */
    #carousel-partner ul li {padding: 0 15px;}
    .audio {margin-left:770px}
}

/** Print view */
@media print {
    .container {width: auto;}
    .footer {position: relative;}
    .footer-slider {display: none;}
    .footer-kontakt {display: none;}
}


.newsbb{ position:relative; 

	border:3px double #50BDF9; background:#1A1A1A; font-size:18px; padding:3rem; margin:10px 0;
}
.newsbb h2{  font-size:22px; margin-bottom:10px; color:#fff; border-left:10px solid #50BDF9; padding-left:15px; margin-bottom: 2rem; }

@media(min-width:768px){
	.newsblock { display:grid; grid-template-columns: 0.8fr 1fr; grid-gap: 20px;  }

	.newsblock .img { position:relative; }
	.newsblock .img img { position:absolute; width:100% !important; height:100% !important; object-fit: cover; object-position: center; }

}
@media(max-width:768px){
	.newsblock .img { position:relative; margin-bottom: 10px; }
}