/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*LAYOUT*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*****************************************************************************************/
/*LAYOUT (BOTH)*/
/*****************************************************************************************/

#odwiedz-nas div,
#odwiedz-nas,
#lista-typowych-pytan { flex-wrap: wrap; }

#odwiedz-nas h3:before { content: ''; display: inline-block; position: relative; }

#lista-typowych-pytan li { display: flex; align-items: flex-end; justify-content: flex-start; position: relative; }
#lista-typowych-pytan a { display: block; }
#lista-typowych-pytan a p { position: absolute; bottom: 0; text-align: center; }
#mapa figcaption { text-align: center; }

/*****************************************************************************************/
/*LAYOUT (LANDSCAPE)*/
/*****************************************************************************************/

@media all and (orientation: landscape) {}

/*****************************************************************************************/
/*LAYOUT (PORTRAIT)*/
/*****************************************************************************************/

@media all and (orientation: portrait) {}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*SIZES*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*****************************************************************************************/
/*SIZES (BOTH)*/
/*****************************************************************************************/

/*-----------------------------------------------------------*/
/*Proportions*/
/*-----------------------------------------------------------*/

#odwiedz-nas h3,
#lista-typowych-pytan li { width: 100%; }

#lista-typowych-pytan { width: 31.8%; }
#mapa { width: 68.2%; }

    #lista-typowych-pytan a p { width: 100%; }

#page { width: 75%; }

/*-----------------------------------------------------------*/
/*Spaces*/
/*-----------------------------------------------------------*/

h3 { margin: 0.55em 0; padding: 0.76em; }
#odwiedz-nas h3:before { margin-left: 0.5em; margin-right: 0.75em; top: 0.1em; }

    #lista-typowych-pytan li:not(:last-child) { margin-bottom: 0.1em; }
    #lista-typowych-pytan li:not(:first-child) { margin-top: 0.1em; }

        #lista-typowych-pytan a p { padding: 0.8em; transition: all 0.3s ease-in-out 0s; }
        #lista-typowych-pytan a:hover p { padding-bottom: 1.2em; }

    #mapa { margin: 0; padding-left: 0.2em; }

        #mapa figcaption { padding: 1.5em; }
        
            #mapa figcaption p:not(:first-child) { margin-top: 0.75em; }

/*-----------------------------------------------------------*/
/*Sizes*/
/*-----------------------------------------------------------*/

/*................................*/
/*Texts*/
/*................................*/

#lista-typowych-pytan a p { font-size: 0.925em; }

#mapa figcaption { font-size: 0.9em; }

/*................................*/
/*Images*/
/*................................*/

#odwiedz-nas h3:before { height: 1em; width: 1em; }

ul#lista-typowych-pytan li { height: 10.5em; }

    #lista-typowych-pytan a { width: 100%; height: 100%; }

/*................................*/
/*Misc*/
/*................................*/

#gmap_canvas { height: 23.8em; }
figure#mapa figcaption { height: 9em; }

/*****************************************************************************************/
/*SIZES (LANDSCAPE)*/
/*****************************************************************************************/

@media all and (orientation: landscape) {
    
    /*-----------------------------------------------------------*/
    /*Scales*/
    /*-----------------------------------------------------------*/
    
    /*-----------------------------------------------------------*/
    /*Proportions*/
    /*-----------------------------------------------------------*/
    
}

/*****************************************************************************************/
/*SIZES (PORTRAIT)*/
/*****************************************************************************************/

@media all and (orientation: portrait) {
    
    /*-----------------------------------------------------------*/
    /*Scales*/
    /*-----------------------------------------------------------*/
    
    /*-----------------------------------------------------------*/
    /*Proportions*/
    /*-----------------------------------------------------------*/
    
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*STYLES*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*****************************************************************************************/
/*DECORATIONS*/
/*****************************************************************************************/

/*-----------------------------------------------------------*/
/*Texts*/
/*-----------------------------------------------------------*/

#lista-typowych-pytan a p { font-weight: bold; }

/*-----------------------------------------------------------*/
/*Images*/
/*-----------------------------------------------------------*/

#odwiedz-nas h3:before { background: url("../img/icons/icon-map-location-blue.png") no-repeat; background-size: cover; }

#lista-typowych-pytan li:nth-child(1) { background-image: url("../img/pictures/czy-moge-was-odwiedzic.jpg"); background-size: cover; }
#lista-typowych-pytan li:nth-child(2) { background-image: url("../img/pictures/nasz-budynek.jpg"); background-size: cover; }
#lista-typowych-pytan li:nth-child(3) { background-image: url("../img/pictures/jak-wyglada-nabozenstwo.jpg"); background-size: cover; }

/*****************************************************************************************/
/*COLORS*/
/*****************************************************************************************/

/*-----------------------------------------------------------*/
/*Texts*/
/*-----------------------------------------------------------*/

#lista-typowych-pytan a p { color: white; }

#mapa figcaption { color: white; }

/*-----------------------------------------------------------*/
/*Foregrounds*/
/*-----------------------------------------------------------*/

/*-----------------------------------------------------------*/
/*Backgrounds*/
/*-----------------------------------------------------------*/

#lista-typowych-pytan a p { background-color: rgba(44,108,148,0.7); }
#lista-typowych-pytan a:hover p { background-color: rgba(44,108,148,0.8); }

#mapa figcaption { background-color: rgba(44,108,148,1.0); }

/*-----------------------------------------------------------*/
/*Borders*/
/*-----------------------------------------------------------*/

#lista-typowych-pytan a p { box-shadow: 0 -0.4em 1.2em -0.3em #222222; }

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*MISCELLANEOUS*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*****************************************************************************************/
/*RESETS*/
/*****************************************************************************************/

/*****************************************************************************************/
/*UNIVERSAL*/
/*****************************************************************************************/

/*****************************************************************************************/
/*BETA*/
/*****************************************************************************************/

div#gmap_canvas { position: relative; }
div#no-map-wrapper { position: absolute; top: 0; left: 0; display: flex; align-items: center; text-align: center; }
div#no-map-wrapper { padding: 2em; }
div#no-map-wrapper { height: 100%; }
div#no-map-wrapper p { font-size: 0.9em; }
div#no-map-wrapper p a { text-decoration: none; }
div#no-map-wrapper p a:hover { text-decoration: underline; }
div#no-map-wrapper p a { color: #43A4E0; }

/*****************************************************************************************/
/*DEVELOPMENT*/
/*****************************************************************************************/