header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.rs-columns {
  clear: both;
  display: inline-block;
  width: 100%;
}

.rs-column {
  float: left;
  width: 100%;
  margin-top: 7.69231%;
  margin-right: 7.69231%;
}
.rs-column.-large-first {
  clear: left;
}
.rs-column.-large-last {
  margin-right: -5px;
}
.rs-column.-large-first-row {
  margin-top: 0;
}
.rs-column.-large-col-1-1 {
  width: 100%;
}
.rs-column.-large-col-2-1 {
  width: 46.15385%;
}
.rs-column.-large-col-2-2 {
  width: 100%;
}
.rs-column.-large-col-3-1 {
  width: 28.20513%;
}
.rs-column.-large-col-3-2 {
  width: 64.10256%;
}
.rs-column.-large-col-3-3 {
  width: 100%;
}
.rs-column.-large-col-4-1 {
  width: 19.23077%;
}
.rs-column.-large-col-4-2 {
  width: 46.15385%;
}
.rs-column.-large-col-4-3 {
  width: 73.07692%;
}
.rs-column.-large-col-4-4 {
  width: 100%;
}
.rs-column.-large-col-5-1 {
  width: 13.84615%;
}
.rs-column.-large-col-5-2 {
  width: 35.38462%;
}
.rs-column.-large-col-5-3 {
  width: 56.92308%;
}
.rs-column.-large-col-5-4 {
  width: 78.46154%;
}
.rs-column.-large-col-5-5 {
  width: 100%;
}
.rs-column.-large-col-6-1 {
  width: 10.25641%;
}
.rs-column.-large-col-6-2 {
  width: 28.20513%;
}
.rs-column.-large-col-6-3 {
  width: 46.15385%;
}
.rs-column.-large-col-6-4 {
  width: 64.10256%;
}
.rs-column.-large-col-6-5 {
  width: 82.05128%;
}
.rs-column.-large-col-6-6 {
  width: 100%;
}
@media screen and (max-width: 900px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-first {
    clear: none;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: left;
  }
  .rs-column.-medium-last {
    margin-right: -5px;
  }
  .rs-column.-medium-first-row {
    margin-top: 0;
  }
  .rs-column.-medium-col-1-1 {
    width: 100%;
  }
  .rs-column.-medium-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-2-2 {
    width: 100%;
  }
  .rs-column.-medium-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-3-3 {
    width: 100%;
  }
  .rs-column.-medium-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-medium-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-medium-col-4-4 {
    width: 100%;
  }
  .rs-column.-medium-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-medium-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-medium-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-medium-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-medium-col-5-5 {
    width: 100%;
  }
  .rs-column.-medium-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-medium-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-medium-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-medium-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-medium-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-medium-col-6-6 {
    width: 100%;
  }
}
@media screen and (max-width: 599px) {
  .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
  }
  .rs-column.-large-last {
    margin-right: 7.69231%;
  }
  .rs-column.-large-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-medium-first {
    clear: none;
  }
  .rs-column.-medium-last {
    margin-right: 7.69231%;
  }
  .rs-column.-medium-first-row {
    margin-top: 7.69231%;
  }
  .rs-column.-small-first {
    clear: left;
  }
  .rs-column.-small-last {
    margin-right: -5px;
  }
  .rs-column.-small-first-row {
    margin-top: 0;
  }
  .rs-column.-small-col-1-1 {
    width: 100%;
  }
  .rs-column.-small-col-2-1 {
    width: 46.15385%;
  }
  .rs-column.-small-col-2-2 {
    width: 100%;
  }
  .rs-column.-small-col-3-1 {
    width: 28.20513%;
  }
  .rs-column.-small-col-3-2 {
    width: 64.10256%;
  }
  .rs-column.-small-col-3-3 {
    width: 100%;
  }
  .rs-column.-small-col-4-1 {
    width: 19.23077%;
  }
  .rs-column.-small-col-4-2 {
    width: 46.15385%;
  }
  .rs-column.-small-col-4-3 {
    width: 73.07692%;
  }
  .rs-column.-small-col-4-4 {
    width: 100%;
  }
  .rs-column.-small-col-5-1 {
    width: 13.84615%;
  }
  .rs-column.-small-col-5-2 {
    width: 35.38462%;
  }
  .rs-column.-small-col-5-3 {
    width: 56.92308%;
  }
  .rs-column.-small-col-5-4 {
    width: 78.46154%;
  }
  .rs-column.-small-col-5-5 {
    width: 100%;
  }
  .rs-column.-small-col-6-1 {
    width: 10.25641%;
  }
  .rs-column.-small-col-6-2 {
    width: 28.20513%;
  }
  .rs-column.-small-col-6-3 {
    width: 46.15385%;
  }
  .rs-column.-small-col-6-4 {
    width: 64.10256%;
  }
  .rs-column.-small-col-6-5 {
    width: 82.05128%;
  }
  .rs-column.-small-col-6-6 {
    width: 100%;
  }
}

* {
    box-sizing: border-box;
}
body {
    font: 12px/1 Verdana, Helvetica, Arial, sans-serif;
    color: #000;
}
img {
    width: 100%;
    height: auto;
}
h3 {
    margin-bottom: 10px;
    text-align: left;
    font-size: 110%;
    text-transform: uppercase;
    letter-spacing: 3.5px;
}
#wrapper {
    width: 100%;
}
#header {
    z-index: 10;
    height: 5rem;
    background-color: rgba(245, 244, 240, 0.9);
    -webkit-box-shadow: 0 7px 6px -5px rgba(245, 244, 240, 0.9);
    -moz-box-shadow: 0 7px 6px -5px rgba(245, 244, 240, 0.9);
    box-shadow: 0 7px 6px -5px rgba(245, 244, 240, 0.9);
    border-bottom: 1px solid #a4987e;
}
#container {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
}
.logo {
    width: 80%;
    float: left;
    margin: 1.333rem 0 0 1.333rem;
}
.logo a {
    text-decoration: none;
}
.logo a .name {
    font-family: 'Finura Roman', Helvetica, Arial, sans-serif;
    font-weight: 600;
    display: block;
    color: #000;
    font-size: 1.766rem;
    text-transform: uppercase;
    letter-spacing: 0.07666rem;
}
.logo .title {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 0.7666rem;
    margin-top: 2px;
}
#container {
    margin-top: 2.333rem;
}
#main {

}
#main .inside {
    margin: 0 1.333rem 2.333rem 1.333rem;
    background-color: #fff;
    /*line-height: 1.123rem;*/
}
/*#video,
#gallery {
-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
display: block;
}*/
#container .first.column {
    padding: 0 3px 0 0;
}
#container .last.column {
    padding: 0 0 0 3px;
}
#container .column {
    padding: 0 3px;
}
#home .rs-column.-medium-first-row,
#video .rs-column.-medium-first-row,
#advertising .rs-column.-medium-first-row {
    margin-top: 1%;
}
.ce_viddeo,
.ce_gallery {
    width: 100%;
    margin-bottom: 5px;
    position: relative;
    /*display: inline-block;*/
}
.ce_viddeo img,
.ce_gallery img {
    background-color: #efefef;
    min-height: 99px;
}
.description {
    padding: 3%;
    border: 0;
    position: relative;
    width: 100%;
    top: -4px;
    background-color: #fff;
    border-left: solid 1px #999;
    border-bottom: solid 1px #999;
    border-right: solid 1px #999;
}
.description .inner {
    line-height: 1rem;
}
.ce_gallery .description {
    float: left;
}
.ce_viddeo .image_container:hover {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
.ce_viddeo .description:hover+div.image_container  {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
.ce_gallery li:hover {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
.ce_gallery .description:hover+li  {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
#main .ce_gallery:hover .description,
#main .ce_viddeo:hover .description  {
    display: block;
    cursor: pointer;
}
.ce_viddeo li:hover {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
.ce_viddeo .description:hover+div  {
    opacity: 0.3;
    -webkit-transition: opacity 0.4s ease;
    -moz-transition: opacity 0.4s ease;
    -o-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease
}
ul.photo {
    position: relative;
}
ul.photo li {
    display: none;
}
ul.photo li.row_0 {
    display: block;
    width: 100%;
}
#cboxTitle h1 {
    width: 100%;
    position: relative;
    text-align: center;
    font-family: 'Finura Roman', serif;
    font-size: 1.333rem;
    font-weight: 600;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 70%;
    margin: 0;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 3px;
}
#cboxTitle h2 {
    width: 100%;
    position: relative;
    margin-top: 7px;
    text-align: center;
    font: 10px Arial,Helvetica,sans-serif;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#kontakt img {
    width: 214px;
}
#gallery .ce_viddeo .icon {
    background-image: url("../../files/daftarie/images/youtube-icon-02.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 30px;
    position: absolute;
    opacity: 0.6;
    height: 30px;
    width: 40px;
    bottom: 49px;
    right: 3px;
}
#kontakt .ce_text p {
    line-height: 17px;
}
#footer {
    background-color: #666;
}
#footer .inside {
    padding: 0 1.333rem 2rem 1.333rem;
}
#footer nav {
    text-align: center;
}
#footer ul {
    display: block;
}
#footer ul li {
    margin: 2.333rem 0;
}
#footer a {
    color: #fff;
    font-size: 1.123rem;
    text-transform: uppercase;
    text-decoration: none;
}
#footer a:hover {
    text-decoration: underline;
}
.copyright {
    color: #fff;
    margin-top: 1.666rem;
    font-size: 0.666rem;
    text-align: center;
}
/* # # # # # # MEDIUM SCREEN # # # # # # # # # */

@media screen and (min-width: 659px) {

#devideo {
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
display: block;
}
#home .rs-column.-medium-col-5-1,
#video .rs-column.-medium-col-5-1,
#advertising .rs-column.-medium-col-5-1 {
    width: 19.2%;
}
#home .rs-column,
#video .rs-column,
#advertising .rs-column {
    margin-right: 0.8%;
}

}

/* # # # # # # LARGE SCREEN # # # # # # # # # */

@media screen and (min-width: 959px) {

#header {
    /*height: 15.666rem;*/
    background-color: #fff;
    border-bottom: solid 1px transparent;
    box-shadow: none;
    position: relative;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    top: 0;
}
#header .inside {
    display: flex;
    justify-content: space-between;  /* Verteilt Logo und Nav */
    align-items: flex-start;
    padding: 0 2rem;
}
.logo {
    width: auto;
    flex: 0 0 auto;
    text-align: left;  /* Links ausgerichtet */
    margin: 3.866rem 0 0 0;
}
/*.logo a .name {
    font-family: 'Finura Roman', serif;
    font-weight: 600;
    display: block;
    color: #2C2C2C;
    font-size: 3.6rem;
    text-transform: uppercase;
    letter-spacing: 0.4333rem;
}*/
.logo a .name {
    font-family: 'Finura Roman', serif;
    font-weight: 600;
    display: block;
    width: 381px;
    margin: 0 auto;
    color: #2C2C2C;
    font-size: 3.6rem;
    text-transform: uppercase;
    letter-spacing: 0.4333rem;
    text-indent: -9999px;
    background: url("../../files/daftarie/images/daoud-dafterie-logo-desk.png") left top no-repeat;
    background-size: 330px auto
}
.logo .title {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-top: 1.1rem;
    letter-spacing: 0.333rem;
    color: #666;
}
.main-navigation {
    display: block;
    text-align: right;  /* Rechts ausgerichtet */
    flex: 0 0 auto;
    margin-top: 6.866rem;
}
#container {
    margin-top: 11rem;
    z-index: 30;
}
#home .rs-column.-large-col-5-1,
#video .rs-column.-large-col-5-1,
#advertising .rs-column.-large-col-5-1 {
    width: 19.2%;
}
#home .rs-column,
#video .rs-column,
#advertising .rs-column {
    margin-right: 0.8%;
}
#devideo {
-webkit-column-count: 5;
   -moz-column-count: 5;
        column-count: 5;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
display: block;
}
.description,
#home .description,
#advertising .description,
#video .description,
#gallery .description {
    top: 40%;
    width: 100%;
    padding: 0 15%;
    position: absolute;
    overflow: visible;
    display: none;
    border: 0;
    background: none repeat scroll 0 0 transparent;
    z-index: 20;
}
#cboxTitle h1 {
    width: 250px;
    height: 30px;
    position: relative;
    text-align: center;
    font-size: 1.8666rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 auto;
    text-indent: -9999px;
    background: url("../../files/daftarie/images/daoud-dafterie-logo-desk.png") left top no-repeat;
    background-size: 250px;
}
#cboxTitle h2 {
    width: 100%;
    position: relative;
    margin-top: 0;
    text-align: center;
    font: 12px Arial,Helvetica,sans-serif;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#gallery .ce_viddeo .icon {
    bottom: 3px;
}
.rsts-view {
    margin: 0 auto;
    width: 100%;
    max-width: 1220px;
}
.rsts-nav-prev,
.rsts-nav-next {
    position: absolute;
    top: 50%;                    /* HALBE HÖHE */
    transform: translateY(-50%); /* Zentriert vertikal */
    z-index: 10;
}
.rsts-nav-prev {
    left: 2px;

}
.rsts-nav-next {
    right: 2px;

}
.rsts-nav-item {
    position: relative;
    opacity: 0;
}
.rsts-skin-default-content .rsts-nav-prev a,
.rsts-skin-default-content .rsts-thumbs-prev,
.rsts-skin-default-content .rsts-nav-next a,
.rsts-skin-default-content .rsts-thumbs-next {
    background-image: none;
    left: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    overflow: hidden;
    margin: 12px 4px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    outline: none;
    text-align: left;
    text-indent: -999px;
    background-color: #aaa;
    background-color: rgba(160,160,160,1);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    /*-webkit-box-shadow: 0 0 2px #777;*/
    /*-moz-box-shadow: 0 0 2px #777;*/
    /*box-shadow: 0 0 2px #777;*/
}
.rsts-skin-default-content .rsts-nav-next a,
.rsts-skin-default-content .rsts-thumbs-next {
    background-image: none;
    margin-right: 10px;
    content: "."
}
.rsts-skin-default-content .rsts-caption {
    top: 750px;
    left: 550px;
}
.image_1 {
    /*width: 50%;*/

}
.image_2 {
    /*width: 50%;*/
    
}
#kontakt {
    width: 100%;
    max-width: 730px;
    margin: 0 auto;
    padding: 5rem 0;
    -webkit-column-count: 3;
    -webkit-column-gap: 2rem;
    -moz-column-count: 3;
    -moz-column-gap: 2rem;
    column-count: 3;
    column-gap: 2rem;
}
#kontakt .rs-column {
    margin-top: 7.69231%;
    margin-right: 7.69231%;
}
#kontakt .ce_image {
    margin-top: 1rem;
}
#kontakt .ce_text p {
    line-height: 19px;
}
#footer {
    background-color: #878787;
}
#footer .inside {
    padding: 2rem 0;
}
#footer ul {
    display: inline-block;
}
#footer ul li {
    margin: 0 1rem;
    float: left;
    text-transform: uppercase;
}
#footer a {
    font-size: 1rem;
}
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../../files/daftarie/fonts/OpenSans-Regular-webfont.eot');
    src: url('../../files/daftarie/fonts/OpenSans-Regular-webfont.eot?#iefix') format("embedded-opentype"), 
    url('../../files/daftarie/fonts/OpenSans-Regular-webfont.woff') format("woff"), 
    url('../../files/daftarie/fonts/OpenSans-Regular-webfont.ttf') format("truetype"), 
    url('../../files/daftarie/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format("svg");
}
@font-face {
    font-family: 'Icons';
    src: url('../../files/daftarie/fonts/icons.eot') format('eot'), 
    url('../../files/daftarie/fonts/icons.woff') format('woff'), 
    url('../../files/daftarie/fonts/icons.ttf') format("truetype"),
    url('../../files/daftarie/fonts/icons.svg#icons') format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Finura Roman';
    src: url('../../files/daftarie/fonts/finura-roman.woff2') format('woff2'),
         url('../../files/daftarie/fonts/finura-roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ============================================================
  Mobil Navigation
============================================================ */

#top.mod_navigation {
    display: none;
}

.main-navigation-mobile .projekt {
    font-family: 'Finura Roman', Helvetica, Arial, sans-serif;
    font-weight: 600;
    display: block;
    color: #fff;
    font-size: 1.466rem;
    text-transform: uppercase;
    letter-spacing: 0.07666rem;
    padding: 1.333rem 0 1.111rem 1.9rem;
    border-bottom: solid 1px #666;
}

.main-navigation-mobile-open {
    text-decoration: none;
    position: absolute;
    top: 61px;
    right: 3.66%;
    width: 45px;
    height: 39px;
    margin: -47px 0 0 -11px;
    padding: 11px;
    display: none;
    z-index: 200;
    text-indent: -9em;
    line-height: 0
}

.main-navigation-mobile-open:after {
    content: "";
    display: block;
    height: 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #000;
    -webkit-box-shadow: 0 7px #000, 0 14px #000;
    -moz-box-shadow: 0 7px #000, 0 14px #000;
    box-shadow: 0 7px #000, 0 14px #000
}

.main-navigation-mobile-open div {
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    display: block;
    color: #fff;
    font-weight: normal;
    font-size: 1.5rem;
    width: 1px;
    height: 1px;
    position: relative;
    top: 10px;
    left: 23px;
}

@media screen and (max-width: 959px) {
    .main-navigation-mobile-open {
        display: block
    }
    .main-navigation {
        display: none;
    }
}

.main-navigation-mobile-close {
    position: absolute;
    top: 0;
    right: -17.64706%;
    display: none;
    width: 17.64706%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0 !important;
    text-indent: -99em;
    background: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

.is-active>.main-navigation-mobile-close {
    display: block
}

.main-navigation-mobile {
    font-family: 'OpenSans', Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.23rem;
    text-transform: uppercase;
    letter-spacing: 0.07666rem;
    display: none;
    padding: 0;
    color: #fff;
    background: #515151;
}

.mod_navigation a.invisible,
.mod_customnav a.invisible {
    display: none;
}

@media screen and (max-width: 959px) {
    .main-navigation-mobile {
        display: block
    }
}

.modernizr-js .main-navigation-mobile {
    display: none
}

.main-navigation-mobile.is-enabled {
    position: absolute;
    top: 0;
    left: -85%;
    z-index: 201;
    width: 85%;
    min-height: 100%;
    -webkit-transition: left 0.2s ease-out;
    -moz-transition: left 0.2s ease-out;
    -o-transition: left 0.2s ease-out;
    transition: left 0.2s ease-out
}

@media screen and (max-width: 959px) {
    .main-navigation-mobile.is-enabled {
        display: block
    }
}

.modernizr-csstransforms3d .main-navigation-mobile.is-enabled {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    -o-transition: -o-transform 0.2s ease-out;
    transition: transform 0.2s ease-out
}

.main-navigation-mobile.is-active {
    left: 0;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
}

.modernizr-csstransforms3d .main-navigation-mobile.is-active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.main-navigation-mobile ul {
    display: block;
    margin: 0;
    padding: 0
}

.main-navigation-mobile ul ul {
    font-size: 1rem;
    text-transform: none;
}

.main-navigation-mobile .is-collapsed>ul {
    display: none
}

.main-navigation-mobile li {
    position: relative;
    display: block
}

.main-navigation-mobile a,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail {
    display: block;
    padding: 0.69231em 1em 0.61538em 0;
    margin: 0 0.51rem;
    /*border-bottom: 1px solid #000;*/
    color: inherit;
    text-decoration: none;
    /*background-color: #333;*/
    -webkit-transition: background-color 0.6s ease-out;
    -moz-transition: background-color 0.6s ease-out;
    -o-transition: background-color 0.6s ease-out;
    transition: background-color 0.6s ease-out
}

/*.main-navigation-mobile a:hover,*/
/*.main-navigation-mobile a:focus,*/
.main-navigation-mobile li:hover,
.main-navigation-mobile li:focus,
.main-navigation-mobile span.active:hover,
.main-navigation-mobile span.active:focus,
.main-navigation-mobile span.trail:hover,
.main-navigation-mobile span.trail:focus {
    outline: none;
    text-decoration: none;
    background-color: #333;
    -webkit-transition: background-color 0.2s ease-out;
    -moz-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out
}

.main-navigation-mobile a.active,
.main-navigation-mobile a.trail,
.main-navigation-mobile span.active,
.main-navigation-mobile span.trail {
    /*font-weight:bold*/
}

/*.main-navigation-mobile a.active,*/
.main-navigation-mobile li.active,
/*.main-navigation-mobile li.active a,*/
.main-navigation-mobile span.active {
    background-color: #666;
    /*border-bottom: 1px solid #000;*/
}

.main-navigation-mobile li li a,
.main-navigation-mobile li li span.active,
.main-navigation-mobile li li span.trail {
    padding-left: 1.4666em
}

.main-navigation-mobile li li li a,
.main-navigation-mobile li li li span.active,
.main-navigation-mobile li li li span.trail {
    padding-left: 3em
}

.main-navigation-mobile li li li li a,
.main-navigation-mobile li li li li span.active,
.main-navigation-mobile li li li li span.trail {
    padding-left: 4em
}

.main-navigation-mobile li li li li li a,
.main-navigation-mobile li li li li li span.active,
.main-navigation-mobile li li li li li span.trail {
    padding-left: 5em
}

.main-navigation-mobile .main-navigation-mobile-expand {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    margin: 0;
    padding: 0.61538em 1em;
    border: solid transparent;
    /*border-width:0.23077em 0;*/
    border-width: 0;
    -webkit-box-shadow: inset 1px 0 var(--brown-dark-00);
    -moz-box-shadow: inset 1px 0 var(--brown-dark-00);
    box-shadow: inset 1px 0 var(--brown-dark-00);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    outline: none;
    line-height: 0;
    color: inherit;
    text-indent: -99em;
    text-shadow: none;
    background: none
}

.main-navigation-mobile .main-navigation-mobile-expand:after {
    font: 1.23077em/1 "Icons";
    /*content:"\e009";*/
    content: "\e00b";
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    text-indent: 0;
    display: inline-block;
    position: relative;
    display: block
}

.main-navigation-mobile .is-expanded>.main-navigation-mobile-expand:after {
    /*content:"\e00c";*/
    content: "\e009";
}

.main-navigation-mobile a:before {
    font: 1em/1 "Icons";
    content: "\e00b";
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    text-indent: 0;
    display: inline-block;
    position: relative;
    left: -0.44444rem;
}

.main-navigation-mobile .datenschutz,
.main-navigation-mobile .impressum {
    float: left;
    font-size: 0.8rem;
    color: #acacac;
}
.main-navigation-mobile .datenschutz {
    margin-left: 15px;
}
.main-navigation-mobile .impressum a {
    border-left: solid 1px #acacac;
}

.main-navigation-mobile a.recht {
    display: block;
    padding: 0 1em;
    margin: 1em 0;
    border-bottom: 0;
    text-decoration: underline;
}

.main-navigation-mobile a.recht:before {
    font: 1em/1 "Icons";
    content: "";
}

/* ============================================================
  Main Navigation
============================================================ */


@media only screen and (min-width: 959px) {

    nav.mod_navigation  {
        padding: 1rem 1rem 0.5rem 1rem;
        text-align: center;
    }

    .mod_navigation ul.level_1 {
        font-family: Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.2333rem;
        margin: 0 auto;
        /*height: 33px;*/
        padding: 0;
        /*width: 40rem;*/
        display: inline-flex;
    }

    .mod_navigation ul.level_1 li {
        width: auto;
        /*float: left;*/
        margin: 0 0.8rem;
        padding: 11px 0 9px 0;
        list-style-type: none;
        position: relative;
    }

    .mod_navigation ul.level_1 li>a,
    .mod_navigation ul.level_1 li>span {
        /*padding: 0 12px;*/
        margin-left: 0;
        color: #b7b7b7;
    }

    .mod_navigation ul.level_1 li.last>a {
        padding-right: 1px;
    }

    .mod_navigation ul li a:hover {
        color: #333;
        text-decoration: underline;
    }

    #footer.mod_navigation ul li a:hover {
        color: #333;
    }

    .mod_navigation a,
    .mod_navigation span {
        display: block;
        text-decoration: none;
        color: #000;
    }

    .mod_navigation a.invisible {
        display: none;
    }

    .mod_navigation .active,
    .mod_navigation .trail {
        color: #333;
        /*float: left;*/
        list-style-type: none;
        margin-left: 17px;
        position: relative;
        width: auto;
        padding: 11px 0;
    }

    .mod_navigation ul li.active a {
        color: #333;
    }

    #footer.mod_navigation ul li.active a {
        color: #333;
    }
    
    /*### SECOND LEVEL ###*/

    .mod_navigation ul li ul.level_2 {
        margin: 0;
        padding: 0;
        width: 100%;
        min-width: 235px;
        line-height: 34px;
        top: 32px;
        /*left: -18px;*/
        z-index: 100;
        opacity: 0;
        font-size: 0.8666rem;
        visibility: hidden;
        position: absolute;
        border-top: 1px solid #fff;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }

    .mod_navigation.stick ul li ul.level_2 {
        border-top: 1px var(--brown-light-00);
    }

    .mod_navigation ul li ul.level_2 li {
        background-color: var(--blue-dark-00);
        color: var(--brown-light-00);
        display: block;
        margin: 0 0 1px 0;
        padding: 0 1em;
        float: none;
    }

    .mod_navigation ul li ul.level_2 li a {
        color: var(--blue-light-00);
        font-size: 0.7666rem;
        padding: 0;
        border: 0;
    }

    .mod_navigation ul li:hover ul {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .mod_navigation ul li ul li.active a {
        color: var(--brown-light-00);
    }

    .mod_navigation ul li ul li:hover a {
        color: var(--blue-light-01);
    }
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 1; filter: alpha(opacity = 0);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#fff;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #efefef;}
        #cboxLoadedContent{background:#fff;}

        /* TSMI: costumized */
        /*#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}*/
        #cboxTitle {
            position:absolute; 
            top:-90px; 
            left:0;
            width: 100%;
            height: 50px;
            /*color:#ccc;*/
            text-align: center;
        }
        #cboxCurrent{position:absolute; top:-20px; left:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url("../../files/daftarie/images/loading.gif") no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious, #cboxNext {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}

        #cboxPrevious{position:absolute; top:0; left:1px; margin-top:0; background:url("../../files/daftarie/images/prev.png") no-repeat; width:50px; height:100%; text-indent:-9999px; background-position: 50% 50%;}

        #cboxPrevious:hover{background:url("../../files/daftarie/images/prev-on.png") no-repeat; background-position: 50% 50%;}

        #cboxNext{position:absolute; top:0; right:1px; margin-top:0; background:url("../../files/daftarie/images/next.png") no-repeat; width:50px; height:100%; text-indent:-9999px; background-position: 50% 50%; }

        #cboxNext:hover{background:url("../../files/daftarie/images/next-on.png") no-repeat; background-position: 50% 50%;}

        #cboxClose{position:absolute; top:-30px; right:-5px; display:block; background:url("../../files/daftarie/images/close.png") no-repeat center center; width:38px; height:40px; text-indent:-9999px;}

        #cboxClose:hover{top:-29px; right:-4px;}

@media screen and (min-width: 959px) { 
    #cboxNext{ right:-44px; }
    #cboxPrevious{ left:-44px; }
}
