/**
 * EXPORT-UNION Custom Responsive Style
 *
 * 0.1.0        2014-07-15  Christian Haseloff
 *              - Implementierung
 *
 */

/*****Responsive Media Querys Menu*************************************************************************************/

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

    #content .bild-center {
        max-width:100%;
        height:auto;
    }

    #topnavi #hauptnavigation{
        background: url(/static/img/nav-top-background.png) no-repeat left bottom #fff;
    }
    #topnavi #topnav.first-level li{
        background: #fff;
        color: #6e6e6e;
    }
    #topnavi #topnav.first-level li a{
        color: #6e6e6e;
    }
    #topnavi #topnav.first-level li.active > a,
    #topnavi #topnav.first-level li:hover > a {
        color: #005eb8;
        background: #fff;
        text-decoration: none;
    }
    #topnavi #topnav.first-level > li{
        padding: 15px 13px;
        margin: 16px 21px;
    }
    #topnavi #topnav.first-level > li a {
        padding: 0;
        margin: 0;
        display: block;
        width: 100%;
        height: 100%;    
    }
    #topnavi #hauptnavigation #topnav.first-level li ul.second-level{
        min-width: 243px;
        border: 2px solid #005eb8;
        font-size: 0.9em;
        top: 45px;
        text-align: left;
        z-index: 999;
        padding: 24px 19px;
        background: url(/static/img/nav-sub-arrow.png) no-repeat 20px top #fff;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }
    #topnavi #hauptnavigation #topnav.first-level li ul.second-level li {
        margin: 9px 0;
    }
    #topnavi #hauptnavigation #topnav.first-level li ul.second-level li a{
        text-align: left;
    }
}
@media screen and (max-width: 900px) {
    .navigator ul.map-pois li.poi:hover ul.poi-flyout {
        display: block !important;
        max-height:250px !important;
        overflow-y:auto !important;
    }
    
    .navigator ul.map-pois li.poi ul.poi-flyout {
        left: -25px !important;
        position: absolute !important;
        width: 203px !important;
    }
    .navigator-teaser-liste ul.poi-flyout li.standort-beschreibung, .navigator ul.map-pois li.poi ul.poi-flyout li.standort-beschreibung {
        margin-bottom:10px !important;
        padding-bottom:5px !important;
        border-bottom: 1px solid #005cb9 !important;
    }
    
    .navigator ul.map-pois .poi-flyout-head {
        width: 177px !important;
    }
}
@media screen and (max-width: 894px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 15px;
        margin-right: 15px;
    }
}
@media screen and (max-width: 835px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 14px;
        margin-right: 14px;
    }
}
@media screen and (max-width: 825px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 13px;
        margin-right: 13px;
    }
}
@media screen and (max-width: 815px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 12px;
        margin-right: 12px;
    }
}
@media screen and (max-width: 805px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 11px;
        margin-right: 11px;
    }
}
@media screen and (max-width: 795px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 10px;
        margin-right: 10px;
    }
}
@media screen and (max-width: 785px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 9px;
        margin-right: 9px;
    }
}
@media screen and (max-width: 775px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 8px;
        margin-right: 8px;
    }
}
@media screen and (max-width: 765px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 7px;
        margin-right: 7px;
    }
}
@media screen and (max-width: 755px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 6px;
        margin-right: 6px;
    }
}
@media screen and (max-width: 745px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 5px;
        margin-right: 5px;
    }
}
@media screen and (max-width: 735px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 4px;
        margin-right: 4px;
    }
}
@media screen and (max-width: 725px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 3px;
        margin-right: 3px;
    }
}
@media screen and (max-width: 715px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 2px;
        margin-right: 2px;
    }
}
@media screen and (max-width: 705px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 1px;
        margin-right: 1px;
    }
}
@media screen and (max-width: 695px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media screen and (max-width: 685px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        padding-left: 14px;
        padding-right: 12px;
    }
}
@media screen and (max-width: 675px) and (min-width: 641px){
    #topnavi #topnav.first-level > li {
        padding-left: 13px;
        padding-right: 11px;
    }
}
@media screen and (max-width: 665px) and (min-width: 641px){
    #topnavi #hauptnavigation {
        padding-left: 89px;
    }
}
@media screen and (max-width: 655px) and (min-width: 641px){
    #topnavi #hauptnavigation {
        padding-left: 79px;
    }
}
@media screen and (max-width: 645px) and (min-width: 641px){
    #topnavi #hauptnavigation {
        padding-left: 69px;
    }
}

@media screen and (max-width: 640px) {
    
    #topnavi #hauptnavigation.smartphone {
        padding-left: 0;
        background: #fff;
    }
    
    #topnavi #hauptnavigation.smartphone #topnav{
        background: #fff;
    }
    
    #topnavi #hauptnavigation.smartphone #topnav a{
        background: #fff;
        color: #6e6e6e;
        text-align: left;
        line-height: 39px;
        padding-top: 0;
        padding-bottom: 0;
    }
    #topnavi #hauptnavigation.smartphone #topnav.first-level .active > a{
        color: #005eb8;
    }
    
    #topnavi #hauptnavigation.smartphone ul{
        margin-bottom: 19px;
        border-bottom: 1px solid #005eb8;
    }
    
    #topnavi #hauptnavigation.smartphone li{
        border-top: 1px solid #005eb8;
        text-align: left;
        font-weight: bold;
        background: #fff;
        
    }
    
    #topnavi .smartphone-script ul.second-level{
        margin-bottom:0 !important;
    }
    
    #topnavi .smartphone-script ul.second-level,
    #topnavi .smartphone-script ul.second-level > li{
        background: #5c5c5c !important;
        font-size: 0.95em;
        border-bottom: 0 none !important;
    }
    
    #topnavi .smartphone-script ul.second-level > li.active{
        background: #005eb8 !important;
    }
    
    #topnavi .smartphone-script ul.second-level a{
        background: #5c5c5c !important;
        color: #fff !important;
        font-weight: 600 !important;
    }
    
    #topnavi .smartphone-script ul.second-level li.active a{
        background: #005eb8 !important;
    }
    
    #topnavi .smartphone-script span.smartphone-plus,
    #topnavi .smartphone-script span.smartphone-minus {
        background: none repeat scroll 0 0 rgba(125, 125, 125, 0.5);
        height: 39px;
        width: 39px;
        padding:0;
        margin-top: -39px;
    }
    #topnavi .smartphone-script span.smartphone-plus {
        background: url(/static/img/nav-arrow-down.png) no-repeat center center;
    }
    #topnavi .smartphone-script span.smartphone-minus {
        background: url(/static/img/nav-arrow-up.png) no-repeat center center;
    }
}

/*****Responsive Media Querys Custom***********************************************************************************/
@media screen and (max-width: 1015px){
     div.form-wrapper {
        width:90%;
        padding-left:5%;
        padding-right:5%;
        background: #e4e4e4;
    }
    
    .exportanfrageformular .field-wrapper {
        width:48%;
    }
    
    .kontaktformular .nachname, .exportanfrageformular .nachname, .kontaktformular .vorname, .exportanfrageformular .vorname {
        float: none;
        width: 100%;
    }
    
    .kontaktformular .nachname input, .exportanfrageformular .nachname input, .kontaktformular .vorname input, .exportanfrageformular .vorname input {
        width: 99%;
    }
    
    .anfrage {
        clear:both;
    }
}
@media screen and (max-width: 980px){
    .image-gallery .imageslide-container{
        width: 508px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 394px !important;
    }
    .image-gallery .imageslide{
        margin-left: -158px !important;
    }
}

@media screen and (max-width: 920px){
    .image-gallery .imageslide-container{
        width: 408px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 294px !important;
    }
    .image-gallery .imageslide{
        margin-left: -208px !important;
    }
}

@media screen and (max-width: 820px){
    .image-gallery .imageslide-container{
        width: 308px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 194px !important;
    }
    .image-gallery .imageslide{
        margin-left: -258px !important;
    }
}

@media screen and (max-width: 768px) {
    #right-outer {
        background-image: none;
    }
    #container > .breadcrump {
        padding: 13px 0 19px;
    }
    .navigator ul.map-pois {
        background-size:100px auto;
    }
    #right{
        margin-top: 20px;
    }

    .image-gallery .image-container{
        width: 600px;
        max-width: 100%;
        margin: 0 auto;
    }
    .image-gallery .imageslide-container{
        width: 608px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 494px !important;
    }
    .image-gallery .imageslide{
        margin-left: -110px !important;
    }
}

@media screen and (max-width: 644px){
    .image-gallery .imageslide-container{
        width: 508px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 394px !important;
    }
    .image-gallery .imageslide{
        margin-left: -158px !important;
    }
}

@media screen and (max-width: 640px) {
    #hauptnavigation{
        margin-top: 23px;
    }
}

@media screen and (max-width: 575px){
    .exportanfrageformular .field-wrapper {
        width:100%;
    }
}

@media screen and (max-width: 544px){
    .image-gallery .imageslide-container{
        width: 408px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 294px !important;
    }
    .image-gallery .imageslide{
        margin-left: -208px !important;
    }
}

@media screen and (max-width: 444px){
    .image-gallery .imageslide-container{
        width: 308px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 194px !important;
    }
    .image-gallery .imageslide{
        margin-left: -258px !important;
    }
}

@media screen and (max-width: 400px) {
    .navigator ul.map-pois li.poi ul.poi-flyout {
        left: -70px;
    }
}

@media screen and (max-width: 394px){
    .image-gallery .imageslide-container{
        width: 258px !important;
        margin: 0 auto;
    }
    .image-gallery .imageslide-window{
        width: 144px !important;
    }
    .image-gallery .imageslide{
        margin-left: -283px !important;
    }
}