/*
Theme Name: Monopolele2024
Theme URI: https://wordpress.org/themes/monopolele2024/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Monopolele2024 is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Monopolele2024
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
html{
    margin: 0!important;
}
body{
    margin: 0!important;
    background-color: #9ab638!important;
}
.block-x-overflow{
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
}

html, body {
    overflow-x:hidden;
}
/*css lineup*/

.container .pic {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    outline: 5px solid white;
    overflow: hidden;
    transition: font-size 0.3s ease-in-out;
    font-weight: 400;
    color: #9ab638;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .logo{
        max-height: 100vh!important;
    }
}
@media screen and (max-width: 400px){
    .container .pic {

        width: 200px;
        height: 200px;
    }
    .title-artist{
        font-size: 0.875rem;
    }
}
/* Nasconde la scrollbar su Safari */
body::-webkit-scrollbar {
    width: 0; /* Imposta la larghezza della scrollbar a 0 */
}

/* Nasconde il track della scrollbar su Safari */
body::-webkit-scrollbar-track {
    display: none; /* Nasconde il track della scrollbar */
}


.container .pic:hover {
    cursor: pointer;
    color: #fff ;
    font-weight: 600;
    font-size: 1.2rem;
}
.container .pic:hover::after {
    opacity: 0.7;
}
.hover-bold:hover {
    font-weight: 800;
}
.hover-bold {
    transition: font-weight 0.2s ease; /* Aggiungi un effetto di transizione di 0.3 secondi */
}

/*
.container .pic::before {
    position: absolute;
    content:"";
    width: 100%;
    height:100%;
    z-index: 0;
    border-radius: 50%;
    background: url('https://randomuser.me/api/portraits/men/75.jpg') no-repeat center;
    background-size: cover;
    transition: transform 0.3s ease-in-out;
}
*/
.container .pic::after {
    position: absolute;
    content:"";
    width: 100%;
    height:100%;
    background: #111;
    border-radius: 50%;
    opacity: 0.3;
}

.container .pic:hover::before {
    transform: scale(1.1);
}

/*altro css*/

.monserrat{
    font-family: 'Montserrat', sans-serif;
}

.img-container {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll; /* Impedisce la visualizzazione della barra di scorrimento */
    position: relative;
}

.wallpaper {
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover; /* Ridimensiona l'immagine in modo da coprire l'intero contenitore */
}

#image1 {
    position: absolute;
    z-index: 1; /* Posiziona questa immagine sopra l'altra */
    object-fit: contain;
    min-width: 100%;
    border-bottom: 1px solid #9ab638;
}

.triangolo-top-fest {
    width: 0;
    height: 0;
    border-left: 99vw solid transparent;
    border-right: 0 solid transparent;
    rotate: 180deg;
    border-bottom: 40px solid #9ab638;
}

.triangolo-bot-fest {
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 99vw solid transparent;
    border-bottom: 55px solid #ea444c;
}

.triangolo-top-map {
    background-color: transparent;
    width: 0;
    height: 0;
    transform: rotate(180deg);
    border-left: 99vw solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 55px solid #ea444c;
}

.triangolo-bot-map {
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 99vw solid transparent;
    border-bottom: 55px solid #0093ab;
}

.btn-round{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: white;
    border: 1px solid white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 700;
    border-radius: 25px;
    text-decoration: none;
}

.button-container{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.triangolo-bot-press {
    width: 0;
    height: 0;
    border-left: 100vw solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 55px solid #314B68;
    background-color: #007691;
}

p{
    margin-bottom: 0!important;
}

.triangolo-top-content {
    width: 0;
    height: 0;
    border-left: 99vw solid transparent;
    border-right: 0 solid transparent;
    rotate: 180deg;
    border-bottom: 40px solid #0093ab;
}

.icons-footer a svg{
    width: 2rem;
    height: 2rem;
}

.icons-footer a{
    padding: 1rem;
}

.triangolo-bot-content {
    width: 0;
    height: 0;
    border-left: 0 solid transparent;
    border-right: 99vw solid transparent;
    border-bottom: 55px solid #ea444c;
}
.split {
    width: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    display: flex;
}

.col-5{
    width: 41%;
    display: flex;
}
.col-6 {
    width: 50%;
    display: flex;
}

.red{
    color: #ea444c;
    font-size: 2em;
    text-align: center;
    margin-right: 23%;
    margin-top: 10%;
    font-family: 'Montserrat', sans-serif;
}

.button-box{
    width: 100%;
    z-index: 2;
}

.flex-column{
    flex-direction: column;
}

.logo {
    max-width: 100%;
    max-height: 80%;
    width: auto;
    height: auto;
    margin-right: 23%;
}
.white{
    font-family: 'Montserrat', sans-serif;
    font-size: 3em;
    text-align: center;
    color: white;
    margin-right: 23%;
    font-weight: 700;
}

.fs-2rem-res{
    font-size: 2rem;
}

/* Stile per nascondere la scrollbar */
.hide-scrollbar {
    scrollbar-width: 0; /* Per Firefox */
    -ms-overflow-style: none; /* Per Internet Explorer e Microsoft Edge */
}
.btn-round{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: white;
    border: 1px solid white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 6rem;
    padding-right: 6rem;
    font-weight: 700;
    border-radius: 25px;
    text-decoration: none;
}

.fs-4rem{
    font-size: 4rem;
}

.fs-3rem{
    font-size: 3rem;
}

.card{
    background-color: transparent!important;
    border: 0!important;
}

.card-body{
    color: white!important;
}

.rettangolo-azzurro {
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 15px;
    width: 40px;
    background-color: #009DC5;
}

/* Aggiungi un riferimento specifico per WebKit (Chrome, Safari, Opera) */
.hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.wallpaper-mobile{
    width: 100%;
    height: auto;
}

.gmnoprint{
    display: none!important;
}

@media only screen and (min-width: 786px) and (max-width: 1025px) {
    .red, .white {
        text-align: center;
        margin-right: 23%;
        font-family: 'Montserrat', sans-serif;
    }

    .red {
        color: #ea444c;
        font-size: 1em;
        margin-top: 10%;
    }

    .white {
        color: white;
        font-size: 2em;
        font-weight: 700;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .red, .white {
        text-align: center;
        margin-right: 23%;
        font-family: 'Montserrat', sans-serif;
    }

    .red {
        color: #ea444c;
        font-size: 1.5em;
        margin-top: 10%;
    }

    .white {
        color: white;
        font-size: 2.5em;
        font-weight: 700;
    }
}
.horizontal-container {
    position: relative;
    width: 35%;
    display: flex;
    align-items: center;
    margin-top: 9%;
    margin-left: 21%;
}

.line {
    width: 100%;
    height: 1px;
    background-color: #ea444c; /* Colore della linea */
}

.round-button {
    width: 30px; /* Dimensione del pulsante */
    height: 30px;
    border-radius: 50%; /* Rende il pulsante tondo */
    border: 1px solid #ffffff;
    background-color: transparent; /* Colore di sfondo del pulsante */
    color: #ffffff; /* Colore del testo del pulsante */
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    text-decoration: none;
}

.w-card{
    width: 15%;
}

.pt-4rem-res {
    padding-top: 15rem;
    padding-bottom: 9rem;
}

.pt-5rem-res {
    padding-top: 5rem;
    padding-bottom: 9rem;
}

.w-loghi-foot{
    width: 35%;
}

.w-menu-internal{
    width: 55%;
}

.h-55vh{
    height: 55vh;
}
.pt-5rem{
    padding-top: 5rem;
}
.h-55vh-res{
    height: 100%;
    margin-top: 0;
}

@media only screen and (max-width: 426px) {
    .border-bottom-visible {
        border-bottom: 1px solid white;
    }
    .bg-sm-none {
        background-color: transparent!important;
    }
    .d-sm-none{
        display: none;
    }
    .button-box{
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        position: absolute;
        bottom: 17%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .red{
        margin-right: 0;
        font-size: 1rem;
    }
    .white{
        margin-right: 0;
        font-size: 2rem;
    }
    .button-container{
        margin-right: 0;
    }
    .fs-4rem{
        font-size: 2.5rem;
    }
    .fs-3rem{
        font-size: 2rem;
    }
    .fs-2rem-res{
        font-size: 1.5rem;
    }
    .w-card{
        width: 40%;
        margin-top: 1rem;
    }
    .w-loghi-foot{
        width: 100%;
    }
    .h-55vh{
        height: 119vh;
    }
    .h-55vh-res{
        height: 56vh;
        margin-top: 0;
    }
    .pt-4rem-res{
        padding-top: 6rem;
        padding-bottom: 3rem;
    }

    .pt-5rem-res{
        padding-top: 6rem;
        padding-bottom: 3rem;
    }
    .d-mobile-none{
        display: none!important;
    }
}
@media only screen and (min-width: 426px) {
    .border-bottom-md-none {
        border-bottom: 0px!important;
    }
    .border-end-md-end {
        border-right: 1px solid white!important;
    }
    .d-lg-none{
        display: none;
    }
}
@media only screen and (max-width: 350px) {
    .white{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 1280px) {
    .menu li {
        font-size: 0.7em;
    }
}

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

    .w-menu-internal{
        width: 85%;
    }
}
@media only screen and (min-width: 1320px) {

    .w-menu-internal{
        width: 100%;
    }
}
@media only screen and (min-width: 812px) {

    .w-menu-internal{
        width: 130%;
    }
}
.ps-15rem{
    padding-left: 3rem;
}
@media only screen and (min-width: 768px) {

    .w-menu-internal{
        width: 160%;
    }
    
    .ps-15rem{
        padding-left: 15rem;
    }
}


/*---------------------------social---------------------------*/
#lineUp ul{
    padding:0;
    margin: 0.875rem 0;

}

.social  li:nth-last-child{
    margin-right: 0;

}
.social a {
    text-decoration: none;
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    background-color: #0093ab;
    color: #fff;
    /*border: 2px solid #9ab638;*/
}

.social a i {
    font-size: 1rem;
    color: #fff;

}
.social  li{

    list-style-type: none;
    padding-right: 1rem;



}
.social a:hover  {
    background-color: #9ab638;
}

.social a:hover i {
    color: #fff;
}

@media screen and (min-width: 1025px){
    .social  li{
        padding: 0;
        margin-right: 2rem;
        list-style-type: none;
        justify-content: left;

    }
}

/*-----------------nationality---------------------*/
@media screen and (max-width:1025px) {
    .modal-nationality {

        text-align: center;
    }
    .modal-pic{
        justify-self: center !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
        margin-right: 0 !important;
        padding: 0;
    }
}
/*-------------------------------------modal-------------------------------------*/

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index:1000000;
}
.modal-content {
    position: absolute;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%, -50%);
    width: 85%;
    height:80%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 100000;
}
.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #ea444c;
    transition: transform 0.2s ease-in-out;

}
.close-modal:hover {
    position: absolute;
    top: 10px;
    right: 15px;
    transform: rotate(180deg);

}
@media screen and (max-width: 700px){
    .close-modal {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 1.4rem;
        font-weight: bold;
        cursor: pointer;
        color: #ea444c;
        transition: transform 0.2s ease-in-out;

    }
    .close-modal:hover {
        position: absolute;
        top: 5px;
        right: 10px;
        transform: rotate(180deg);

    }

}

.modal-container{display: grid;
    grid-template-columns: 1fr 1fr;
    /*height: 100%;*/
    width:100%;
    height:100%;

}

.section-center{
    width: 95%;
    margin: 0 auto;
    max-width: 1170px;
}
.modal-pic{
    border: 0.675rem solid #d9cfbf;
}

@media screen and (min-width: 1025px){
    .modal-text {
        padding:0 !important;
    }
}
@media screen and (max-width: 1025px){

    .modal-container{
        grid-template-columns: 1fr;
        margin-top: 1.3rem;

    }
    .modal h2{

        text-align: center;
    }
    .modal ul {
        justify-content: center;
    }
    .underline{
        margin: 0 auto;
    }
    .modal-pic{
        width: 17rem !important;
        height:21rem !important;
    }
    .modal-content {

        width: 85%;
        height:95%;
        overflow: scroll;

    }


}

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

    .modal-container{
        grid-template-columns: 1fr;
        padding: 1rem 0;
    }

}

.modal-text{
    align-self: center;
}

/*this is line up*/
@media screen and (max-width: 380px){
    .resp{
        max-width: 100% !important;
    }
    .content{
        width: 95%;
    }
}

.modal h2{
    color: #ea444c;
    font-weight: bold;
    line-height: 1.4rem;
}