/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 25.02.2017, 11:36:24
    Author     : Urs Merk
*/

@import "screenBilder.css"; /* Standardbildschirmausgabe */

html {
    overflow: hidden;
}

div#versteckt{
    height:0;
    font-size: 6px;
    color:transparent;
    z-index:-1;
}

div#versteckt_titel{
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}

hr.clear{
    color: transparent;
    clear: both;
    display: block;
    height: 0px;
    overflow: hidden;
    line-height: 0px;
    font-size: 0px;
}

div#bilder_positionrahmen{
    position: absolute;
    top: 1rem;
    bottom:2rem;
    left:17px;
    right:0;
    overflow:auto; 
    overflow-y: scroll;
    z-index:5;
    /*border: 1px solid blue;*/
}

div#bilder_rahmen{
    position: relative;
    background: rgba(255,255,255,0.3);
    width:90%;
    height: auto;
    max-width: 100rem;
    min-width: 55rem;
    margin: 0 auto 0 auto;
    z-index:5;
    /*border: 1px solid violet;*/
}


div#bilder_fenster{
    background: rgba(255,255,255,0.3);
    height:auto;
    font-size: 160%;
    line-height: 125%;
    font-weight:700;
    /*border: solid 1px red;*/
}

div.bilder{
    float:left;
    width:100%;
    padding:0;
}

div#bilder_rechts{
    float:right;
    padding:0;
}

div.bilder .bild100{
    width:100%;
    height: auto;
    padding:0;
}

div.bilder .bild50_links{
    float:left;
    width:49%;
    height: auto;
    padding-bottom:0.5rem;
}

div.bilder .bild50_rechts{
    float:right;
    width:49%;
    height: auto;
    padding-bottom:0.5rem;
}

div#footer{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    text-align:center;
    color: white;
    font-size: 120%;
    font-weight: 400;
    margin:0 auto;
    z-index:10;
}

div#footer a{
    text-decoration: none;
    color: white;
    font-size: 120%;
    font-weight: 600;
}

figure{

}

figcaption {
    height:0;
    text-align: center;
    font-size: 0;
    color: transparent;
}

/* Spezialeinstellungen für Smartphones und kleine Bildschirme */
/* kleine Bildschirme */
@media only screen 
and (max-device-width : 1024px) {

    div#versteckt{
        display:none;
    }

    html{
        font-size:90%;
    }

    body{
        background: none;
    }

    div#hintergrund_rahmen{
        max-width: 100%;
        min-width:0;
        min-height:0;
    }

    div#hintergrund{
        position: absolute;
        background-image: url('../Images/bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        width:100%;
        max-width:none;
        margin:0;
        min-width:0;
        min-height:0;
        height: 100%;
        /*z-index:1;*/
        /*border: 1px solid red;*/
    }

    div#bilder_positionrahmen{
        left:0;
    }

    div#bilder_rahmen{
        position: relative;
        background: rgba(255,255,255,0.3);
        width:100%;
        height: auto;
        max-width: 95%;
        min-width: 0;
        margin: 0 auto 0 auto;
        z-index:5;
        /*border: 1px solid violet;*/
    }

    div#bilder_fenster{
        min-width:0;
        max-width:100%;
    }

}

@media only screen
and (max-device-width : 1024px) 
and (orientation:portrait){

    div#bilder_rahmen{
        width:calc(100% - 2rem);
        max-width:calc(100% - 2rem);;
        min-width: 0;
    }

    div.bilder .bild50{
        width:49.4%;
        height: auto;
    }

}

/* Spezialeinstellungen für Smartphones und kleine Bildschirme */
/* iphone 6 */
/*@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px){


    html{
        font-size:80%;
    }

    body{
        background: none;
    }

    div#bilder_rahmen{
        max-width: 95%;
        min-width: 0;
        /*border: 1px solid violet;
    }

    div#bilder_fenster{
        min-width:0;
        max-width:100%;
    }

    div.bilder .bild66{
        width:65%;
        height: auto;
    }

    div.bilder .bild50{
        width:calc(50% - 0.3rem);
        height: auto;
    }

    div.bilder .bild33{
        width:calc(32.3% - 0.7rem);
        height: auto;
    }

    div#hintergrund_rahmen{
        max-width: 100%;
        min-width:0;
        min-height:0;
    }

    div#hintergrund{
        position: absolute;
        background-image: url('../Images/bg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        width:100%;
        max-width:none;
        margin:0;
        min-width:0;
        min-height:0;
        height: 100%;
        /*z-index:1;*/
/*border: 1px solid red;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px)
and (orientation:portrait){



div.bilder .bild66{
width:65%;
height: auto;
}

div.bilder .bild50{
width:calc(50% - 0.3rem);
height: auto;
}

div.bilder .bild33{
width:calc(32.3% - 0.7rem);
height: auto;
}
}

/* Spezialeinstellungen für Smartphones und kleine Bildschirme */
/* iphone 5 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px){


    div#bilder_rahmen{
        min-width:0;
        width:95%;
        max-width:95%;
    }

    div#bilder_fenster{
        min-width:0;
        max-width:100%;
    }

    div.bilder .bild66{
        width:65%;
        height: auto;
    }

    div.bilder .bild50{
        width:49.35%;
        height: auto;
    }

    div.bilder .bild33{
        width:32%;
        height: auto;
    }

}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation:portrait){

    div.bilder .bild66{
        width:65%;
        height: auto;
    }

    div.bilder .bild50{
        width:48.8%;
        height: auto;
    }

    div.bilder .bild33{
        width:32%;
        height: auto;
    }

}*/