/************************************************************************************************
					  	            MaçonnerieDenisRolland.com
-------------------------------------------------------------------------------------------------
			 				  	          realisation.css
		  	 			           Cascading styles sheet V3.0         
-------------------------------------------------------------------------------------------------
                    Définie les éléments spécifiques à la page realisation.html  
-------------------------------------------------------------------------------------------------
                      Copyright © 2020 Patrick Fitzback, tous droit reservée
************************************************************************************************/
/*-----------------------------------------------------------------------------------------------
                                          Élément HTML
-----------------------------------------------------------------------------------------------*/
h1 {
    font-size: 36px;
}

article {
    padding-bottom: 47px;
}

/*-----------------------------------------------------------------------------------------------
                                         Classe d'élément
-----------------------------------------------------------------------------------------------*/

.row img {
    width: 280px;
    margin: 0px 4px 24px 4px;
    border: white 3px solid;
    box-shadow: black 0px 0px 8px;
}

.ImageGroup {
    text-align: center;
}

.button {
    width: 48px;
    height: 48px;
    display: inline-block;
    background-color: #4e0000;
    border-radius: 30px;
    box-shadow: black 2px 2px 8px;
    padding: 4px;
    margin: 8px;
    cursor: pointer;
    border: solid #8c2121 2px;
}

.material-icons {
    font-size: 36px;
    color: white;
}

    .material-icons:hover {
        color: #ff5e5e;
    }

/*-----------------------------------------------------------------------------------------------
                                         Élément unique
-----------------------------------------------------------------------------------------------*/
#presentation {
    display:block;
}

#zoom {
    display: none;
    width: 100%;
    height: 100%;
    background-image: url("../images/background/blocksnoir.jpg")
}

#zoom .img-fluid {
    position: relative;
    max-width: none;
}

#imageContainer {
    height: 100%;
    width: 100%;
}

#closeButton {
    position: absolute;
    top: 8px;
    left: 100%;
    margin-left: -66px;
    z-index: 2;
}

#leftButton {
    position: absolute;
    top: 100%;
    margin-top: -75px;
    left: 50%;
    margin-left: -60px;
    z-index: 2;
}

#rightButton {
    position: absolute;
    top: 100%;
    margin-top: -75px;
    left: 50%;
    margin-left: 30px;
    z-index: 2;
}

#loadingAnimation {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 90px;
    z-index: 2;
    visibility: hidden;
}

/*-----------------------------------------------------------------------------------------------
                           Modification pour les écrans tactiles
-----------------------------------------------------------------------------------------------*/
@supports (-webkit-overflow-scrolling: touch) {

    #zoom {
        height: 120%;
    }

    @media (orientation: landscape) {
        #zoom {
            height: 101%;
        }
    }
}

/*-----------------------------------------------------------------------------------------------
                        Modification pour les écrans extra larges
-----------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
    article {
        padding-bottom: 72px;
    }

    .row img {
        width: 236px;
    }
}

/*-----------------------------------------------------------------------------------------------
                           Modification pour les écrans larges
-----------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 991px) {
    article {
        padding-bottom: 52px;
    }

    .row img {
        width: 90%;
    }
}

/*-----------------------------------------------------------------------------------------------
                          Modification pour les écrans moyens
-----------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

    article {
        padding-bottom: 52px;
    }
}