*{ margin: 0;
}
:root {
    --grigiochiaro: #191919;
    --grigioscuro:#090808;
    --pannachiaro: #FCF1DF;
    --pannamedio: #F8E5C7;
    --pannascuro: #F3DDBA;
}

/* FONT HATTON per titoli H1 */
@font-face {
    font-family: 'Hatton';
    src: url('Hatton/CSS/Hatton-Semibold.eot');
    src: url('Hatton/CSS/Hatton-Semibold.eot?#iefix') format('embedded-opentype'),
        url('Hatton/CSS/Hatton-Semibold.woff2') format('woff2'),
        url('Hatton/CSS/Hatton-Semibold.woff') format('woff');
        src: local('Hatton-Semibold'), url('Hatton/CSS/Hatton-Semibold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
}

@font-face {
    font-family: 'Hatton';
    src: url('Hatton/CSS/Hatton-Ultralight.eot');
    src: url('Hatton/CSS/Hatton-Ultralight.eot?#iefix') format('embedded-opentype'),
        url('Hatton/CSS/Hatton-Ultralight.woff2') format('woff2'),
        url('Hatton/CSS/Hatton-Ultralight.woff') format('woff');
        src: local('Hatton-Ultralight.ttf'), url('Hatton/CSS/Hatton-Ultralight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
}

@font-face {
    font-family: 'Hatton';
    src: url('Hatton/CSS/Hatton-Medium.eot');
    src: url('Hatton/CSS/Hatton-Medium.eot?#iefix') format('embedded-opentype'),
        url('Hatton/CSS/Hatton-Medium.woff2') format('woff2'),
        url('Hatton/CSS/Hatton-Medium.woff') format('woff');
        src: local('Hatton-Medium.ttf'), url('Hatton/CSS/Hatton-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
}


body {
    background-color: var(--grigioscuro);
}

.hamburger { position: fixed;
    z-index: 9999;
top: 0px;}
.st0{fill:#fff;}

.navbar-dark .navbar-toggler {
    color: transparent;
    border-color: transparent;
    border: none;
}
.navbar-toggler :active{
    border: none;
}

button:focus {
    outline: none;
}

.bg-dark { background-color: transparent!important;}
.navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 20px;
    margin-bottom: 0;
    list-style: none;
    color: rgb(0, 0, 0);
    padding-top: 50px;
    padding-bottom: 50px;
}

.show {background-color: var(--pannamedio);}




/* porcodio andiamo avanti */
h1{ font-family: 'Hatton';
        font-size: 50px ;
        color: var(--pannascuro);}

h2{font-family: 'Hatton';
    font-size: 30px ;
    color: var(--pannascuro);}

h4 {font-family: 'Hatton';
    color: var(--pannascuro);}

h5 {font-family: 'Hatton';
    color: var(--pannascuro);
    font-size: 14px;}

hr {height: 1px;
    margin-left:30px;}

p{ font-family: 'Marcellus', serif;
    
    font-size: 18px;
    color: var(--pannachiaro);}

.btn_basic { border-color: var(--pannamedio);
    color: var(--pannamedio);
    border: 2px solid;
    border-radius: 0rem;
    box-shadow: none;
    font-family: 'Hatton';}
    .btn-outline-warning:hover{
        color: var(--grigioscuro);
        background-color:var(--pannamedio);
        border-color:var(--pannamedio);}
        .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle {
            color: var(--grigioscuro);
            background-color: var(--pannamedio);
            border-color: var(--pannamedio);
            box-shadow: none;
        }

a {color: var(--pannachiaro)}
a:hover {color:transparent;
    text-decoration: none;
    background-color: transparent;}

.card {background-color: transparent;}
.card-text {font-size: 14px;}
.card-title {font-size: 16px;}
.icona {width: 80px;
    align-self: center;}


/* CLASSI SPAZIATURE*/
.SPAZIATURAHOME {margin-top:20vh;
    margin-bottom: 20vh;}
.DESCRIZIONE {margin-top: 10px;
margin-bottom: 10px;}


/*--------------------------------------------HOME----------------------------------------------*/
      
/*Sezione MANICHINO - Home*/
.manichino {background-image: url("IMG/MANICHINO.MOBILE.jpg");
    background-size: cover;
    background-position: left;
    height: 100vh;}

.frasemanichino {padding-top: 250px;
    padding-left: 30px;}

/*Sezione ABOUT - Home*/
#skewedbg { content: "";
    height: 100px;
    transform: skewY(3deg) translateY(-40px);
background-color: var(--grigioscuro);
position: relative; }
#ritratto {
    border-radius: 50%!important;
    height: 40vh;}

/*Sezione DI COSA MI OCCUPO - Home*/
#titleoccupazione {text-align: center!important;
margin-bottom: 10vh;}


/*-------------------------------------DIGITAL STRATEGY------------------------------------------------*/

#skewedbg_top { content: "";
    height: 30vh;
    transform: skewY(3deg) translateY(-70px);
background-color: var(--grigiochiaro);
position: relative; }


.btn-link:hover {color: var(--pannamedio);
    text-decoration: none;
    background-color: transparent;}
    .btn-link:focus {color: var(--pannamedio);
        text-decoration: none;
        background-color: transparent;}
        .btn-link:active {color: var(--pannamedio);
            text-decoration: none;
            background-color: transparent;}

.btn_accordion { color: var(--pannamedio);
        box-shadow: none;
        font-family: 'Hatton';
        text-decoration: none;}   
    .btn_accordion:hover{
        background-color: var(--pannamedio);
        color: var(--grigioscuro);
        border-radius: 0rem;
        text-decoration: none;
    }
    
#collapseOne {background-color: transparent;
    font-family: 'Marcellus', serif;
    font-size: 14px;
    color: var(--pannachiaro);}
    #collapseTwo {background-color: transparent;
        font-family: 'Marcellus', serif;
        font-size: 14px;
        color: var(--pannachiaro);}
        #collapseThree {background-color: transparent;
            font-family: 'Marcellus', serif;
            font-size: 14px;
            color: var(--pannachiaro);}
            #collapseFour {background-color: transparent;
                font-family: 'Marcellus', serif;
                font-size: 14px;
                color: var(--pannachiaro);}


.btn_accordion {font-family: 'Marcellus';
                font-weight: bold;}


/*-------------------------------------ABOUT------------------------------------------------*/

.formazione_icone {height: 60px;
    width: 60px;
    margin: 10px;
}

/*-------------------------------------WEB DESIGN------------------------------------------------*/








/*Menu di navigazione*/
.menu{position: fixed;
top: 20px;
z-index: 999;}
#hamburger {fill: var(--pannamedio)!important;
margin-left: 20px;
}
.closebtn {color: var(--grigioscuro);}
.indicemenu{font-family: 'Hatton' ;
    color: var(--grigioscuro);}
 /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: var(--pannamedio); /* Black fallback color */
    background-color:rgb(248, 229, 199, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 20%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 20px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: var(--grigioscuro);
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: var(--grigiochiaro)!important;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 15px;
    right: 45px;
    font-size: 60px;
  }
  
 


/*Footer*/
footer {background-color: var(--grigiochiaro);
margin-top: 20px;
margin-top: 20vh}
#skewedbg_footer { content: "";
    height: 100px;
    transform: skewY(3deg) translateY(-40px);
background-color: var(--grigiochiaro);
position: relative; }
#mailfooter {font-size: 14px;}
.iconesocial{width: 20px!important;
fill: var(--pannachiaro)!important;}
.social {padding: 5px;
align-items: center;}
#Copyright {text-align: end!important;
font-size: 10px;
margin-top: 50px;}














    /* Small devices (landscape phones, 576px and up)*/
    @media (max-width: 575px) {
        h1 {font-size: 40px;}
        p {font-size: 16px;}
        .card {width: 12rem!important;}
        .card-text {font-size: 14px;}
        .card-title {font-size: 16px;}
        .icona {width: 60px!important;}
        .marginesocialfooter {margin-top: 10px;}
        #skewedbg_footer { height: 50px;
            transform: skewY(3deg) translateY(-30px); }
        .certificazione {height: 200px;
        padding-bottom: 20px;}    
        


        

            /*menu di navigazione*/
            .overlay a {font-size: 20px}
            .overlay .closebtn {
              font-size: 50px;
              top: 15px;
              right: 35px;
            }
            #hamburger {float: right;
            margin-right: 20px;}
        
        .CaroselloSmall {height:200px;}
        
        }

    @media (min-width: 576px) { 
        .certificazione {height: 200px;
            padding-bottom: 20px;}
    .CaroselloSmall {height:200px;}        

     }
    
    /* Medium devices (tablets, 768px and up)*/
    @media (min-width: 768px) { 
        
     .certificazione {height: 250px;
    }   
    .CaroselloBig {height:200px;}
    
    p { font-size: 18px; }
    .manichino {background-image: url("IMG/MANICHINO.DESKTOP.png");
    }
        
     }
    
    /* Large devices (desktops, 992px and up)*/
    @media (min-width: 992px) {
        
        .CaroselloBig {height:300px;}
        p { font-size: 18px; }
        
        
    
    }