/*
***********************************************************************************************************************
* ARS&GRAPHIA - style.css                                                                                             *
* version: 1.01.07 - jan. 2024                                                                                        *
* copyright (c) 2024 LAVORE-CARAMIA                                                                                   *
* webmaster: E.Lavore (enrico.lavore@arsetgraphia.eu) - web developer: A.Caramia (alessandro.caramia@arsetgraphia.eu) *
***********************************************************************************************************************
*/

/* GENERALE: TESTI & CONTENITORI */

@font-face {
    font-family: 'spectralbold_italic';
    src: url('font/spectral-bolditalic-webfont.woff2') format('woff2'),
         url('font/spectral-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'spectralregular';
    src: url('font/spectral-regular-webfont.woff2') format('woff2'),
         url('font/spectral-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {
    font-family: EBGaramond-Bold;
    letter-spacing: 0.75px;
}

input, select {
    font-family: 'spectralregular' !important;
}

.myContainer {
    width: 100%;
    height: 65vh;
    padding: 42px;
    text-align: left;
    font-size: 1.85vh;
    border-radius: 7px;
}

.title {
    text-align: center;
    font-weight: bold;
    font-size: 21px;
}

.titleLogin {
    font-weight: bold;
    font-size: 26px;
    font-weight: bold;
}

/* GENERALE: MENU */

.myMenu {
    width: fit-content;
    height: 95%;
    padding: 1vh 0rem 1vh 0rem !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.myMenuItem {
    text-align: center;
    width: auto;
    background: transparent;
    text-decoration: none;
    font-size: 2.7vh;
    padding: 0.6vh 2.5rem !important;
}

.myMenuItem a {
    text-decoration: none;
}

/* GENERALE: INTESTAZIONE PAGINA */


/* GENERALE: PIEDE PAGINA */

footer {
    width: 100%;
    font-size: 1.5vh;
    padding: 1.5rem 1.25rem;
}

/* GENERALE: BODY */

body {
    overflow-y: hidden;
}

/* GENERALE: BARRE DI SCORRIMENTO */

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    margin: 10px;
    width: 8px;
    border: none;
    background: transparent;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-corner,
::-webkit-resizer {
    display: none;
}

::-webkit-scrollbar-thumb {
    box-shadow: inset 0px 0px 4px #00000090;
    border-radius: 6px;
    /*background-color: #1A5FAC;*/
}

::-webkit-scrollbar-track {
    background-image: url("img/scrollbar.png") !important;
    background-repeat: repeat-y;
    background-size: contain;
}

.myContainer::-webkit-scrollbar-track {
    background-image: url("img/scrollbar_b.png") !important;
}

#lista_libri::-webkit-scrollbar-track {
    background-image: url("img/scrollbar_b.png") !important;
}

/* GENERALE: PUNTATORI */

.cursor-pointer {
    cursor: pointer;
}

/* GENERALE: COMMUTATORI & TENDINE */

.theToggler {
    opacity: 0;
    border-radius: 100% !important;
    height: 8vh;
    width: 8vh;
    border: none;
    margin-top: 3.75vh;
    z-index: 1000;
}

.theToggler i {
    font-size: 4vh;
}

.theToggler.collapsed {
    margin-top: 7.5vh;
}

.collapse:not(.show) {
    /*display: block;*/
    margin-left: -12rem;
    opacity: 0;
    transition: 500ms margin ease;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: all .35s ease;
}

.flag img {
    height: 2vh !important;
    width: auto;
}

.flag {
    padding: 0px 8px;
    cursor: pointer;
    transition: 350ms all ease;
}

.flag:hover {
    transform: scale(1.25);
}

/* GENERALE: LOGO */

.the_logo_container {
    height: 20vh;
}

.the_logo {
    height: 8vh;
    transition: 350ms all ease;
}

/* GENERALE: PULSANTI */

.mailButton i {
    font-size: 2.75vh;
    margin: 0 0 2vh 0;
    transition: 350ms all ease;
}

.mailButton i:hover {
    color: #0A8C76 !important;
    transform: scale(1.25);
}

#octoParent {
    height: 235px;
}

#octo {
    position: absolute;
    text-align: center;
    top: 6.5vh;
    cursor: pointer;
}

#kmgaico {
    left: 24px;
    top: 23px;
    position: absolute;
    width: 103px;
    height: 103px;
    z-index:1;
}

#layer_8 {
    left: 93px;
    top: 22px;
    position: absolute;
    width: 36px;
    height: 35px;
    z-index:2;
}

#layer_7 {
    left: 123px;
    top: 51px;
    position: absolute;
    width: 27px;
    height: 47px;
    z-index:3;
}

#layer_6 {
    left: 92px;
    top: 94px;
    position: absolute;
    width: 36px;
    height: 35px;
    z-index:4;
}

#layer_5 {
    left: 52px;
    top: 124px;
    position: absolute;
    width: 46px;
    height: 26px;
    z-index:5;
}

#layer_4 {
    left: 22px;
    top: 94px;
    position: absolute;
    width: 34px;
    height: 34px;
    z-index:6;
}

#layer_3 {
    left: 0px;
    top: 51px;
    position: absolute;
    width: 27px;
    height: 48px;
    z-index:7;
}

#layer_2 {
    left: 22px;
    top: 19px;
    position: absolute;
    width: 38px;
    height: 37px;
    z-index:8;
}

#layer_1 {
    left: 51px;
    top: -1px;
    position: absolute;
    width: 49px;
    height: 26px;
    z-index:9;
}


/* ID: POPUP */

#popupArtista, #popupLibro, #popupInserisciLibro, #popupIntervista, #popupInserisciIntervista {
    position: absolute;
    left: 23.5%;
    top: 16%;
    width: 70%;
    height: 71%;
    padding: 52px;
    border-radius: 12px;
    z-index: 1050;
    transition: 350ms all ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: none;
}

#popupInserisciLibro {
    overflow-x: hidden;
    overflow-y: auto;
}

#popupInserisciIntervista {
    overflow-x: hidden;
    overflow-y: auto;
}

#popupLibro {
    padding: 44px;
    overflow-x: hidden;
    overflow-y: auto;
}

#popupLibro .copertinaLibro:hover {
    transform: none;
}

#popupIntervista {
    padding: 44px;
    overflow-x: hidden;
    overflow-y: auto;
}

#closePopup, #closePopupInserisci {
    cursor: pointer;
    position: absolute !important;
    right: -4.5vh;
    top: -4.5vh;
    transition: 350ms transform ease;
}

#closePopup i, #closePopupInserisci {
    font-size: 5vh;
}

#closePopup:hover, #closePopupInserisci:hover {
    transform: scale(1.2);
}

#closePopupInserisci {
    color: #fff !important;
}

/* ID & CLASSI: VIDEO */

#titoloVideo {
    font-size: 2.1vh;
}

videoDIV:before {
    border: 117px solid transparent;
    border-image: url(img/TVc.png);
    border-image-outset: 0px;
    border-image-slice: 26%;
}

#videoIntervista {
    /*border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    margin-top: -10px;*/
    z-index: -1;
}

#myControls {    
    bottom: 0px;
    width: 77%;
    height: 2rem !important;
    left: 4%;
    border-radius: 40px;
    background: #ffffff00;
}

.videoplayer .dropup-volume .form-range {
    width: 7.5rem !important;
    height: 2rem !important;
    margin-left: -3.05rem !important;
    border: 0;
    -webkit-appearance: slider-horizontal !important;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}
  
.videoplayer .dropup-volume {
    height: 9rem;
    width: 3.5rem;
}

#myPlayer {
    margin: 35px 30px;
}

#theTV {
    position: absolute;
}

#theTV img {
    width: 100%;
}

#descrizioneVideo {
    font-size: 1.65vh;
}

/* ID: IMMAGINI */

#divFotoArtista img, #divImmagine1 img, #divImmagine2 img, #divImmagine3 img, #divImmagine4 img {
    width: 100%;
}

#logoArtista {
    padding: 0 2vh 2vh 0;
}

#logoArtistaImg {
    height: 3.5vh;
}

/* ID: TESTI */

#nazioneAnnoArtista, #descrizioneArtista {
    font-size: 1.72vh;
}

#descrizioneArtista {
    padding: 2vh;
}

#nomeCognomeArtista {
    font-family: 'spectralbold_italic';
    font-size: 1.9vh;
}

#testo_marchio, #marchio_registrato {
    font-size: 1.45vh;
}

#bibliografia_testo {
    font-family: 'spectralregular';
    font-size: 2vh;
    letter-spacing: 0.15px !important;
}

/* ID: ALTRO */

#profileDiv {
    position: fixed;
    top: 1vh;
    left: 3vh;
    font-size: 2.25vh;
    backdrop-filter: blur(1px);
    z-index: 1100;
    padding: 6px;
    text-shadow: 1px 1px 0px #000000e8;
    border-radius: 10px;
}

#mySearchDiv {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 10px;
    border-radius: 9px;
}

#myToast {
    z-index: 9999;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* CLASSI: IMMAGINI */

.chisiamoIMG {
    width: 100%;
    padding: 11px;
    cursor: pointer;
}

.listaFoto {
    height: 65vh;
    padding-right: 22px;
    /*background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.11));*/
}

.immaginiArtista {
    cursor: pointer;
    transition: 350ms all ease;
}

.immaginiArtista:hover {
    transform: scale(1.1);
}

.vetrinaIMG, .contattiIMG {
    transition: 350ms all ease;
}

.vetrinaIMG:hover, .contattiIMG:hover {
    transform: scale(1.05);
}

.contattiIMG {
    padding: 0.8rem;
    cursor: pointer;
    width: 100%;
}

/* CLASSI: TESTI */

.nomeCognomeVetrina {
    padding: 0 1rem 0.5rem 1rem;
    cursor: pointer;
}

.nomeCrediti, .ruoloCrediti {
    font-size: 1.75vh;
}

.copertinaLibro {
    width: 100%;
    padding: 18px;
    cursor: pointer;
    transition: 350ms all ease;
}

.copertinaLibro:hover {
    transform: scale(1.05);
}

.titoloLibro {
    font-family: 'spectralregular';
    font-weight: bold;
    font-size: 1.9vh;
}

.autoreLibro {
    font-family: 'spectralregular';
    font-style: italic;
    font-size: 1.9vh;
}

.datiLibro {
    font-family: 'spectralregular';
    font-style: normal;
    font-size: 1.9vh;
}

.testo_ricerca {
    font-family: 'spectralregular';
    font-size: 2.5vh;
}

.mySearch {
    font-family: 'spectralregular';
    font-size: 2.5vh;
    border-radius: 30px;
    border: 1px solid #212529;
    padding: 0.5vh 2vh;
    transition: 350ms all ease;
}

/* CLASSI: ALTRO */

.mySearch:focus-visible {
    outline: 0px;
    box-shadow: 0 7px 25px -19px black;
}

.my-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.superButtons {
    background: #223F8F !important;
    border-color: #223F8F !important;
    transition: all .15s ease-in-out !important;
}

.superButtons:hover {
    background: #14358F !important;
    border-color: #14358F !important;
    box-shadow: 0 8px 25px -16px black !important;
}

.ivListaDiv {
    padding: 1rem 1.61rem;
    font-size: 1.85vh;
    cursor: pointer;
}

.ivListaDiv b {
    font-size: 2.1vh;
}

.transformOnHover, .transformOnHover2 {
    transition: all .15s ease-in-out !important;
}

.transformOnHover:hover {
    transform: scale(1.05);
}

.transformOnHover2:hover {
    transform: scale(1.1);
}


.lightbox-modal .modal-content {
    background: var(--lightbox);
}

.lightbox-modal .btn-close {
    position: absolute;
    top: 20px;
    right: 18px;
    font-size: 1.2rem;
    z-index: 10;
}

.lightbox-modal .modal-body {
    display: flex;
    align-items: center;
    padding: 0;
    text-align: center;
}

.lightbox-modal img {
    width: auto;
    max-height: 100vh;
    max-width: 100%;
}

.lightbox-modal .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(36, 36, 36, 0.75);
}

.lightbox-modal .carousel-control-prev,
.lightbox-modal .carousel-control-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
}

.lightbox-modal .carousel-control-prev {
    left: 10px;
}

.lightbox-modal .carousel-control-next {
    right: 10px;
}


.col-resp {
    width: 0 !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    border: 0 !important;
}

.modal-backdrop {
    z-index: 99 !important;
}



/* FORMATI SCHERMO: Larghezza Massima => 991px */

@media only screen and (max-width: 991px) {

    .listaFoto {
        height: auto;
    }

    .col-resp {
        width: 100% !important;
    }

    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

	.myMenu {
    	padding: 1vh 0rem 1vh 0rem !important;
	}
    
    /*
    #octoParent {
        height: 170px;
    }*/

    #octo {
        top: 6vh;
    }

	.theToggler {
        opacity: 1;
        margin-top: 2vh;
	}

    #popupArtista, #popupInserisciLibro {
        position: fixed!important;
        width: 94% !important;
        height: 94% !important;
        left: 3% !important;
        top: 3% !important;
        box-shadow: 0 0 150px 75px black;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #popupInserisciLibro {
        box-shadow: 0 0 150px 125px #000000b0 !important;
    }
    #popupLibro {
        position: fixed!important;
        width: 94% !important;
        left: 3% !important;
        top: 6% !important;
        max-height: 88% !important;
        box-shadow: 0 25px 150px -75px black;
    }

    #popupInserisciIntervista {
        box-shadow: 0 0 150px 125px #000000b0 !important;
    }
    #popupIntervista {
        position: fixed!important;
        width: 94% !important;
        left: 3% !important;
        top: 6% !important;
        max-height: 88% !important;
        box-shadow: 0 25px 150px -75px black;
    }

    #closePopup, #closePopupInserisci {
        right: -3vh;
        top: -3vh;
    }

    .immaginiArtista:hover {
        transform: none;
    }

    .vetrinaIMG:hover, .contattiIMG:hover {
        transform: none;
    }

    .nomeCrediti, .ruoloCrediti {
        font-size: 2.75vh;
        padding-left: 10px;
    }

    #testo_marchio, #marchio_registrato {
        font-size: 2.45vh;
    }

    .copertinaLibro:hover {
        transform: none;
    }

    .myInput {
        margin-bottom: 0.75rem;
    }

    /*#myPlayer {
        margin: 2rem 2rem 3.25rem 2rem;
    }*/

    #videoDIV:before {
        border: 151px solid transparent;
        border-image: url(img/TVc.png);
        border-image-outset: 0px;
        border-image-slice: 25%;
    }

    #myControls {
        bottom: 32px;
        border-radius: 40px;
        background: #ffffff00;
    }

    #titoloVideo {
        margin-top: 2.5em;
    }

    #profileDiv {
        /*position: initial;
        margin-bottom: 1.25rem;*/
        width: 100%;
        left: 0;
        text-align: center;
    }
}


/* FORMATI SCHERMO: Larghezza Massima => 767px */

@media only screen and (max-width: 767px) {

    #divImmagine1 img, #divImmagine2 img, #divImmagine3 img, #divImmagine4 img {
        width: 74%;
        margin-left: 13%;
    }

   #divImmagine3 img, #divImmagine4 img {
        margin-top: 2vh;
    }

    #myControls {
        bottom: 35px;
        border-radius: 40px;
        background: #ffffff00;
    }
}

/* FORMATI SCHERMO: Larghezza Massima => 600px */

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

    footer {
        font-size: 2.5vh;
    }

	.myMenu {
    	padding: 1vh 0rem 1vh 0rem !important;
        height: 87.5%;
	}

    .myMenuItem {
        font-size: 2.75vh;
    }

    .the_logo {
        height: 7.25vh;
        max-width: 360px;
    }

    #popupArtista, #popupLibro, #popupInserisciLibro {
        padding: 26px;
    }

    .nomeCrediti, .ruoloCrediti {
        font-size: 2.25vh;
        padding-left: 10px;
    }

    #testo_marchio, #marchio_registrato {
        font-size: 1.9vh;
    }

    .copertinaLibro {
        padding: 11px;
    }

    #myControls {
        bottom: 35px;
        border-radius: 40px;
        background: #ffffff00;
    }

}

/* FORMATI SCHERMO: Larghezza Massima => 450px */

@media only screen and (max-width: 450px) {

    .col-min {
        flex: 0 0 auto;
        width: 100%;
    }

    .datiArtisti {
        width: 100%;
        margin: 2rem 0;

    }

    #divImmagine2 {
        margin-top: 1rem;
    }

    #nomeCognomeArtista {
        font-size: 2.5vh;
    }

    #nomeCognomeArtista, #nazioneAnnoArtista, #logoArtista {
        text-align: center !important;
    }

    #logoArtista {
        margin-top: 0.5rem;
    }

    #descrizioneArtista {
        padding: 1vh;
        text-align: justify !important;
    }

    #videoDIV:before {
        border-image: none;
        border: none;
    }

    #myControls {
        bottom: -60px;
    }

    /*#myPlayer {
        margin: 0rem 0rem 5rem 0rem !important;
    }*/
}


/* FORMATI SCHERMO: Larghezza Massima => 375px */

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

	.myMenu {
    	padding: 1vh 0rem 1vh 0rem !important;
	}

    .the_logo {
        height: 7vh;
        max-width: 300px;
    }

    #popupArtista, #popupLibro, #popupInserisciLibro {
        padding: 20px;
    }

    #descrizioneArtista {
        padding: 1vh;
    }

    .nomeCrediti, .ruoloCrediti {
        font-size: 2vh;
        padding-left: 10px;
    }

    #testo_marchio, #marchio_registrato {
        font-size: 1.8vh;
    }
}

/* FORMATI SCHERMO: Larghezza Massima => 300px */

@media only screen and (max-width: 300px) {

	.myMenu {
    	padding: 1vh 0rem 1vh 0rem !important;
	}

    .the_logo {
        height: 6.5vh;
        max-width: 230px;
    }

    .theToggler {
        height: 44px;
        width: 44px;
    }

    .theToggler i {
        font-size: 22px;
    }


    .nomeCrediti, .ruoloCrediti {
        font-size: 1.5vh;
        padding-left: 10px;
    }

    #testo_marchio, #marchio_registrato {
        font-size: 1.35vh;
    }
}