/* La struttura base */
/* material icons  */

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: "liga";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Arial, Helvetica, sans-serif;  */
}

body {
    background-color: #222;
    color: #fff;
    font-family: "Sawarabi Mincho";
}

.wf-sawarabimincho {
    font-family: "Sawarabi Mincho";
}

.center {
    text-align: center;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right;
}

.small img {
    width: 20px !important;
}



/* .big {
  font-size: 2rem !important;
} */
/* grandezza dei caratteri */

.piccolo {
    font-size: 1rem !important;
}

.piccolissimo {
    font-size: 1.2rem !important;
}

.medio {
    font-size: 1.5rem;
}

.submenu {
    display: none;
    position: absolute;
    background-color: #222;
}

.submenu a {
    padding: 5px;
    display: block;
    text-align: left;
}

.sub-menu {
    display: none;
    position: absolute;
    right: 150px;
    top: 60px;
    width: 100x;
    z-index: 1;
    background-color: rgba(30, 30, 30, 0.8);
}

.namiten:hover .submenu {
    display: block;
}

/* Colori */

.text-black {
    color: black !important;
}

.hamburgher {
    display: none;
}

/* titolo della  pagina  */

.title {
    font-size: 0.8rem;
    color: rgb(255, 255, 255);
    /* padding: 05rem; */
    /* width: 30%; */
    display: flex;
    flex-direction: row;
    align-items: end;
    align-self: end;
}

.logo {
    margin-right: 5px;
    margin-left: 5px;
    /* margin-bottom: 5px; */
}

/* il container classico, solo il 90% della pagina, centrato */

.container {
    padding: 1rem;
    margin: 1rem auto;
    width: 90%;
    /* border: 1px solid #fff; */
}

.container img {
    width: 100%;
}

/* contenitore come sopra ma con lo sfondo bianco */

.container-white {
    width: 90%;
    background-color: #fff;
    color: #000;
    padding: 1rem;
    margin: 1rem auto;
}

.container-kaiho {
    width: 90%;
    margin: 1rem auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container-kaijo {
    width: 95%;
    margin: 1rem auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container-kain-all {
    margin: 2rem auto;
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.container-kainten {
    width: 95%;
    margin: 2rem auto;
    /* justify-content: space-between; */
}

.container-flex {
    display: flex;
    flex-direction: row;
    margin: auto;
    justify-content: space-between;
}

/* this is for the home.php where there is an image */
.home-image-text-container {
    overflow: auto; /* Clears the float */
  }

.home-image-text-container img {
        width: 150px !important;
}
  
  .float-right {
    float: right;
    width: 150px;
    /* Add any additional styling for the image */
  }
  
  

.cartella-verticale {
    /* background-image: url(../img/photographers/actual/fabio/fabio2.jpg); */
    width: 250px;
    display: flex;
    flex-direction: column;
    /* border: 1px solid grey; */
    border-radius: 5px;
    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.5);
    background-color: white;
    margin-top: 1rem;
}

.cartella-orizzontale {
    width: 100%;
    display: flex;
    justify-content: start;
    /* flex-direction: row; */
    /* border: 1px solid grey; */
    border-radius: 5px;
    /* box-shadow: 0 3px 5px 3px rgba(255, 255, 255, 0.5); */
    background-color: white;
    margin-top: 1rem;
    padding: 1rem;
    color: black;
}

.cartella-orizzontale img {
    width: 100px;
    margin-right: 1rem;
}

.cartella-orizzontale .setumei {
    color: black;
}

.image {
    background-position: center;
    background-repeat: no-repeat;
    width: 250px;
    height: 150px;
    /* padding: 0.5rem; */
    background-color: #333;
    border-radius: 5px 5px 0 0;
    /* border: 1px solid white; */
}

.setsumei-due {
    padding: 0.5rem;
    line-height: 1.5rem;
    /* border: 1px solid white; */
    color: black;
}

.setsumei-due a {
    text-decoration: none;
    color: black;
    text-align: right;
}

.ilLink-due {
    text-align: right;
    width: 100%;
}

.ilLink a {
    text-decoration: none;
    color: aliceblue;
}

.tre {
    /* display: grid;
                                                                                                grid-template-columns: 1fr 1fr 1fr;
                                                                                                border: 1px solid white; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.mt-2 {
    margin-top: 2rem;
}

.mt-1 {
    margin-top: 1rem;
}

.kaijo-shashin {
    width: 28%;
    margin: 1rem;
}

/* menu for the navigation */

navigatore {
    padding-top: 10px;
    width: 100%;
    border-bottom: 1px solid rgb(255, 255, 255);
    display: grid;
    grid-template-columns: 2fr 4fr;
    grid-gap: 10px;
    justify-content: end;
    align-content: end;
    background-color: #222;
}

/* the navbar is a grid with 2 columns */

/* .navbar {
    display: flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;
} */

/* .menu {
    width: 80%;
} */

/* for the menu items */

/* the list is a flex, displayed in a row with the items at the end */

ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    list-style-type: none;
    /* align-self: end; */
    /* padding: 1rem; */
}

ul li {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
    align-self: end;
    /* border-right: 1px solid white; */
}

/* non decoration foro the links of the menu */

ul a {
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
}

/* all the links are set to this */

a {
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
}

.mappa img {
    width: 50%;
}

.modoru {
    background-color: #ddd;
    text-align: center;
    font-weight: 700;
    border-radius: 5px;
    margin-left: 90%;
    margin-top: 10px;
    width: 10%;
}

/* on the 会報 page, this is the ul for the list of the books */

.kaiho-menu {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.kaiho-menu {
    /* width: 30%; */
    padding: 0.5rem;
}

/* for the width of the card */
.kaiho-card2 {
    width: 30%;
}


.kaiho-tandoku {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.kaiho-tandoku .kaiho-tandoku-card 

{
    width: 30%;
    margin-bottom: 10px;
} 

.kaiho-tandoku-card img {
    width: 80%;
}


/* black card that display for 100% of the page */

.card-black {
    background-color: black;
    padding: 1rem;
    /* width: 100%; */
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card-black-4 {
    width: 20%; /* Ogni card occupa il 20% dello spazio del contenitore */
    display: flex;
    justify-content: center; /* Centrare il contenuto all'interno */
    align-items: center;
}

.card-black-4 img {
    width: 100%; /* L'immagine occupa l'intera larghezza della card */
    height: auto; /* Mantieni le proporzioni dell'immagine */
    border-radius: 0.5rem; /* Aggiunge angoli arrotondati (opzionale) */
}

/* white card that display for 100% of the page */

.card {
    padding: 1rem;
    /* width: 100%; */
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    /* border: 1px solid white; */
}

.card img {
    padding: 0.5rem;
}

.card-2 {
    width: 45%;
}

.card-3 {
    width: 30%;
    /* margin: auto; */
}

.card-3 img {
    width: 100%;
    margin: auto;
}

.card-1 {
    width: 80%;
    margin: auto;
}

.card-1 img {
    width: 100%;
}

/* space for the image inside the card. displayed 100% of the card */

.card-image {
    text-align: center;
    padding: 1rem;
    width: 100%;
}

/* width of the image */

.card-image img {
    width: 100%;
    margin: auto;
}

.card-presentation {
    padding: 1rem;
}

.card-presentation p {
    font-size: 1.2rem;
    line-height: 2rem;
    width: 100%;
    margin: auto;
}

/* this is the card for each member, display across all the display */

.card-kain {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.card-kain .card-image {
    width: 30%;
}

.card-kain .card-presentation {
    width: 70%;
}

/* for the 浪展 gallery */

.card-gallery {
    display: flex;
    width: 100%;
    justify-content: center;
}

.card-gallery img {
    padding: 0 1rem;
    width: 30%;
}

.details {
    display: flex;
    justify-content: end;
}
.card-details {
    margin: 0 2rem;
    padding-top: 1rem;
    /* border-top: 1px solid white; */
    /* border-radius: 5px; */
    width: 100%;
}

/* .card-details-title {
    width: 100%;
    background-color: rgb(177, 172, 109);
    color: black;
    padding: 0.5rem;
} */

.card-details-body {
    padding: 0.5rem;
}

/* added on 26 august 2021 for the layout of the namiten
and the mokuroku. Still I don't know how to layout it */

.container-namiten {
    /* width: 98%; */
    /* margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr; */
    display: flex;
    flex-direction: row;
    align-content: space-around;
}

.container-home {
    /* width: 100%; */
    display: grid;
    grid-template-columns: auto auto;
    margin: auto;
    /* border: 1px solid white; */
    grid-column-gap: 50px;
}

.container-home img {
    width: 100%;
}

.container-mokuroku {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-img-mokuroku {
    width: 24%;
    margin-top: 1rem;
}

/* this is for wrap the card-kain-namiten parts */

.kain-namiten {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    border-right: 1px solid white;
    padding-top: 1rem;
}

.kain-namiten-title {
    width: 100%;
}

.card-kain-namiten {
    border: 1px solid #888;
    border-radius: 5px 5px 0 0;
    margin: 10px 10px;
    width: 25%;
}

.card-kain-namiten-title {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid white;
    background-color: #333;
    border-radius: 5px 5px 0 0;
}

.card-kain-namiten-body {
    padding: 10px;
    text-align: center;
}

.mokuroku {
    border: 1px solid white;
    margin: 1rem;
    padding: 1rem;
}

.container-blog {
    display: grid;
    grid-template-columns: auto auto auto;
    /* gap: 10px; */
}

.card-blog {
    padding: 10px;
}

/* containter for the rekidai kojin.
I needed to display it in rows and at the
center of the screen so I choose justify-content: space-around
instead of space-between
*/

.container-rekidai-kojin {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card-img-rekidai-kojin {
    width: 30%;
    margin: auto;
    padding-bottom: 2rem;
}

.card-img-rekidai-kojin img {
    width: 90%;
    padding-bottom: 2rem;
}

.card-name {
    font-size: 1.2rem;
    text-align: center;
}

.photo-square {
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top;
    width: 300px;
    height: 250px;
    margin: 1rem;
}

footer {
    text-align: right;
    padding: 1rem;
    width: 100%;
    border-top: 1px solid rgb(255, 255, 255);
}

footer a {
    text-decoration: none;
    color: #fff;
}

/* For the Namiten-page 
    .container-namiten-kaijo is for the hall page that shows 6 card with each photo.
    .container-namiten-opere 3 cards for each row for the photos of each photographer.

*/

.container-namiten-kaijo {
    width: 98%;
    margin: auto;
    padding: 10px;
    /* display:grid;
    grid-template-rows: repeat(6, 1fr);
    row-gap: 10px; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.card-namiten-kaijo {
    width: 90%;
    margin: auto;
    padding: 5px;
    grid-row: 1;
}

.card-namiten-kaijo img {
    width: 100%;
}

.container-namiten-opere hr {
    color: #fff;
}

.card-namiten-opere {
    padding: 5px;
    margin: auto;
}

.card-namiten-opere-title {
    width: 100%;
    font-size: 1.2rem;
    background-color: #eee;
    color: #000;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
}

/* koten for the kain */

.container-koten {
    display: flex;
    justify-content: space-between;
}

.koten-card {
    padding: 1rem;
    margin: 0.5rem;
    background-color: white;
}

.koten-card img {
    width: 100%;
}

/* for the gallery  */

.gallery {
    width: 950px;
    margin: 1rem auto;
    display: flex;
    flex-wrap: wrap;
}

.title {
    /* width: 950px; */
    margin: auto;
    font-size: 2rem;
    text-align: center;
    color: #fff;
}

.img-w img {
    width: 300px;
    margin: 5px;
}

.mostra {
    position: fixed;
    left: 0;
    top: 0%;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: #fff;
}

.container-gallery {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.mostra .chiudi {
    width: 100%;
    margin: auto;
    padding: 2rem;
    font-size: 1.4rem;
    text-align: left;
}

.mostra .immagine {
    /* padding: 10px; */
    margin: auto;
    /* width: 85%; */
}

.gallery-photographer {
    font-size: 1rem;
}

/* the style for the Shuppan page */

.container-shuppan {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card-shuppan {
    width: 25%;
    text-align: center;
    margin: auto 1rem;
    padding-bottom: 2rem;
}

.card-shuppan img {
    width: 100%;
}

/* added for the setsuritsu images */
.container-setsuritsu {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
}

/* if i don't decide the mx-width, then the grid will show 
    in a strange way.
*/
@media (max-width: 2200px) {
    .title {
        width: 100%;
        font-size: 1.5rem;
        padding: 0;
    }
}

@media (max-width: 1400px) {
    /* .container-mokuroku {
        display: block;
        margin: auto;
    } */

    

    .gallery {
        display: block;
        width: 100%;
        margin: auto;
    }

    .title {
        width: 100%;
        font-size: 1.1rem;
    }

    .img-w img {
        width: 100%;
    }

}

    /* Mobile optimize 
the size of the screen for tablet is better viewed with more than 900px
less than 900px it will flows one image and one block on top of the other
*/
    @media only screen and (max-width: 900px) {
        .title {
            font-size: 1rem;
        }

        /* .container, */
        .container-white {
            width: 100%;
            padding: 5px;
        }

        .container-mokuroku, .container-home {
            width: 100%;
            display: block;
            margin: auto;
        }

        .modoru {
            /* background-color: #aaa;
        padding: 5px;
        text-align: center;
        font-weight: 700;
        border-radius: 5px; */
            margin: auto;
            width: 95%;
        }

        .ham-sub-menu {
            display: block;
            position: absolute;
            left: 90px;
            top: 280px;
            width: 100x;
            z-index: 1;
            background-color: rgba(30, 30, 30, 0.8);
        }

        .ham-sub-menu li a {
            padding: 0.5rem;
            font-size: 1rem;
        }

        /* on the 会報 page, this is the ul for the list of the books */
        .kaiho-menu {
            /* text-align: center; */
            display: flex;
            flex-direction: column;
            /* width: 100%; */
        }
        /* for the mobile part */
        .kaiho-card2 {
            width: 100%;
            margin:auto;
        }

        .kaiho-tandoku {
            text-align: center;
            display: block;
            width: 100%;
        }
/* I have to write in this manner if i want to change the 
width of the card, meaning the same as in the main
*/
        .kaiho-tandoku .kaiho-tandoku-card {
            width: 100%;
            margin: auto;
        }

        .kaiho-tandoku-card img {
            width: 100%;
        }

        .container-koten {
            display: block;
        }

        .container-flex {
            display: block;
        }

        .card-1 {
            width: 100%;
        }
        
        .card-2 {
            width: 100%;
        }

        .card-3 {
            width: 100%;
        }

        .card-black-4 {
            width: 100%;
            margin-top: 10px;
        }
        nav {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: start;
        }

        .title {
            font-size: 1.3rem;
        }

        .card,
        .card-kain, .card-3, .tre {
            width: 100%;
            display: block;
        }

        .card .card-presentation,
        .card-kain .card-presentation {
            width: 100%;
            margin: auto;
        }

        .card-presentation {
            width: 100%;
        }

        .card .card-image img,
        .card-kain .card-image img {
            width: 100%;
            margin: auto;
        }

        .card-shuppan,
        .card-shuppan img {
            width: 90%;
            margin: auto;
        }

        .photo-square {
            background-size: 500px;
            background-repeat: no-repeat;
            background-position: top;
            width: 300px;
            height: 250px;
            margin: 1rem auto;
        }

        .menu {
            display: none;
        }
        navigatore {
            display: flex;
            justify-content:space-between;
        }
/* display yhe hamburger  */
        .hamburgher {
            display: block;
            padding: 1rem;
        }

        .hamburgher div {
            width: 35px;
            height: 5px;
            background-color: #fff;
            margin: 6px 0;
        }

        .hamMenu {
            display: none;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            position: absolute;
            top: 0;
            left: 0;
        }

        /* aggiunto dopo */
        .hamMenu li {
            margin-bottom: 0.5rem;
        }

        .hamMenu li a {
            font-size: 1rem;
        }

        /* fino a qui */


        .card-gallery {
            display: block;
            width: 100%;
        }

        .card-gallery img {
            width: 100%;
            margin: auto;
        }

        .card-kain .profile {
            width: 100%;
        }

        .profile-piccolo {
            width: 60%;
        }

        /* .kain-namiten {
            display: block;
        } */

        .card-kain-namiten {
            /* border: 1px solid #888; */
            border-radius: 0 0 5px 5px;
            margin: 1rem;
            /* border: 1px solid green; */
            width: 40%;
        }

        .container-namiten {
            display: block;
            margin: auto;
        }

        .container-rekidai-kojin {
            /* display: flex; */
            margin: auto;
        }

        .card-img-rekidai-kojin {
            /* width: 100%; */
            padding-bottom: 1rem;
            margin:auto;
        }

    }

    @media only screen and (max-width: 900px) and (-webkit-min-device-pixel-ratio: 2) {
        
        /* nasconde il menu*/
        .menu {
            display: none;
        }

        .hamburgher {
            display: flex;
            /* justify-content: flex-end; */
            padding-right: 10px;
        }

        .hamMenu li {
            margin-bottom: 0.5rem;
        }

        .hamMenu li a {
            font-size: 1.5rem;
        }

        .title {
            /* font-size: 1rem; */
            width: 100%;
        }

        .title .nome {
            font-size: 1.2rem;
        }

        .navigatore {
            display: flex;
            justify-content: space-between;

        }

        .logo {
            margin: 0 5px;
        }

        .mappa img {
            width: 100%;
        }

        .card-img-rekidai-kojin {
            width: 96%;
        }

        .card-img-rekidai-kojin img {
            width: 80%;
        }

        .container-namiten {
            display: block;
            border: 1px solid green;
        }

        .container-mokuroku {
            display: block;
            margin: auto;
            width: 100%;
        }

        .card-img-mokuroku {
            width: 95%;
        }

        .container-kaiho {
            font-size: 1rem;
        }

        h2 {
            font-size: 1.5rem;
        }
    }