/*Bloc images page Sculptures, Peintures, Collages, Expositions*/

#photos{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 60%;
    height: auto;
    margin-top: 3%; 
    margin-left: 35%;

}

/*h3 page Sculptures, Peintures, Collages, Expositions, */

#photos h3{

    font-family: 'juliagarregular';
    display: flex;
    flex-direction: row;
    margin-bottom: 2%;
    margin-left: 15%;
    text-align: center;
    /*border: 1px solid red;*/
    color: rgba(193, 73, 5, 1);
    font-size: 2em;
}

#photos img{

   
    width: 20%;
    height: auto;
    margin-right: 2%;
    margin-left: 2%;

}


.myImg{

    cursor: pointer;
}

.myImg:hover{

    opacity:  0.7;
}

/*fin Bloc images page Sculptures, Peintures, Collages, Expositions*/



/*début Modal photos page Sculptures, Peintures, Collages, Expositions*/

.modal{

    display: none;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(4, 4, 4, 0.9);
    height: 100%;
    width: 100%;
    z.index: 1;
}

.modal-content{

    display: block;
    margin: auto;
    margin-top: 1%;
    width: auto;
    height: 100%;
    max-width: 100%;

}

.close{

    position: absolute;
    top: 5px;
    right: 35px;
    color: #f1f1f1;
    font-size: 90px;    
    transition: 0.3s;
   
}

.close:hover{

    color: silver;
    cursor: pointer;
}

/* fin Modal photos page Sculptures, Peintures, Collages, Expositions*/


/*photorama début page photorama.html Atelier*/
/*taille et position photorama*/

.cadrePhotorama{

    max-width: 65%;
    min-height: 30%;
    max-height: 50%;
    position: relative;
    margin-top: 25%;
    /*margin-right: 10%;*/
    left: 30%;
}
    
/*Photoramas position et largeur photos par rapport cadre flèches*/

.sculptures{

    position: absolute;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: opacity 1s;
    width: 60%;
    max-width: 100%;
    z-index: 1;

}
    

button{
    
    border: none;
    cursor: pointer;
    
}
    
    /*flèches*/

.precedent,
.suivant{

    color: silver;
    transition: color .4s linear;
    transform: translatey(-30%);
    top: 65%;
    padding: 15%;
    font-size: 200%;
    background: white;
    position: absolute

}

.precedent{left:0}
.suivant{right:0}
    
.precedent:hover,
.suivant:hover{

    color: black;
}
    
/*fin page Photorama*/



/*début page Vidéos*/

.video{

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 50%;
    margin-right: 10%;
    margin-left: 40%;
    margin-top: 7%;    
}

#video{
     
   margin: 15px 45px;
   
}

.video h3{
  
    font-family: 'lunaregular', arial, sans-serif;
    text-align: center;
    font-size: 0.7em;
    /*border: 1px solid red;*/
    margin-top: 5%;
    color: rgba(193, 73, 5, 1.0);

}

/*fin Vidéos page Vidéos*/


/*media queries*/


/*grand écran */
@media all and (min-width:1800px){

#photos h3{

    font-size: 3.5em;
}

/*photorama début page Photorama*/
/*taille et position photorama*/

.cadrePhotorama{

    max-width:80%;
    min-height: 30%;
    max-height: 60%;
    position: relative;
    margin-top: 40%;
    /*margin-right: 10%;*/
    left: 30%;
    
    }

/*position et largeur photos par rapport cadre flèches*/

.sculptures{

    position: absolute;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: opacity 1s;
    width: 60%;
    max-width: 100%;
    z-index: 1;

    }

}


@media all and (max-width:1400px){

.cadrePhotorama{

    margin-top: 30%;
    }

}


@media all and (max-width: 600px){

.modal-content{

    width: 100%;
    height: auto;
    }

#photos{

    width: 100%;
    height: 100%;
    margin-top: 20%;
    margin-right: 0%;
    margin-left: 0%;

    }   

.cadrePhotorama{

    margin-top: 57%;
    left: 6%;
    max-width: 90%;
    min-height: 30%;
    max-height: 100%;
    
    }

.video{

    margin-top: 25%;
    right: 15%;
    }

#video{

      
   /*margin-top: 40%;*/
   margin-right: 10px;
   margin-left: 10px;
   padding-top: 20px;
   width: 100%;
   }

}


@media all and (max-width: 500px){


#photos h3{

    font-size: 1.2em;
    }


#photos{

    margin-top: 30%;
    
    }


.sculptures{

    left: 50%;
    }

.cadrePhotorama{

    margin-top: 75%;
    left: 6%;
    margin-left: 0%;
    margin-right: 0%;
    max-width: 90%;
    min-height: 30%;
    max-height: 100%;
    
    }
    
.video{

    right: 25%;
    }

}


@media all and (max-width: 425px){

.cadrePhotorama{

    max-width: 90%;
    min-height: 30%;
    max-height: 100%;
    position: relative;
    margin-top: 90%;
    margin-left: 0%;
    margin-right: 0%;
    
    }

.sculptures{

    left: 50%;
    right: 50%;
    width: 80%;
    max-width: 100%;
    }

.precedent,
.suivant{

    
    top: 65%;
    padding: 5%;
    font-size: 90%;

    }


#photos{
 
    margin-top: 35%;
    
    }

.video{
    
    right: 28%;
    }

}


@media all and (max-width: 375px){

#photos{
   
    margin-top: 35%;
    
    }

}