/* Rimuovere barra dello scroll */

.scrollbar::-webkit-scrollbar {
    display: none;
}

.scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body {
    font-family: Poppins;
    margin: 0 10px;
    overflow: auto;
}

.body-noscroll {
    overflow: hidden;
    
}

.overlay--open {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
}

nav {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
}

/* Disposition Header */
.logo {float: left;
    width: 10%;
    position: absolute;
    left: 10;    
}

.menu {float: left; width: 60%;}
.cta {float:left ; width: 20%;}
.sidebar-icon {float: right; width: 20%;}


/* Menu list */

.menu {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.menu-list li {
    display: inline-block;
    list-style: none;
}

.menu li a {
    text-decoration: none;
    color: black;
    text-transform: uppercase;
    margin: 0 20px;
}

.drop-content {
    display: none;
}

.dropdown:hover .drop-content {
    display: block;
}

.drop-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 150px;
    padding: 12px 15px;
    z-index: 1;
    margin: 0;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 10px 10px;
}

.drop-content li {
    display: block;
    margin: 20px 0;
    
}


/* Button cta header */

.cta {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
}

.cta button {
    background-color: black;
    color: white ;
    border-radius: 20px;
    padding: 5px 10px;
    border: none;
}

.cta a {
    text-decoration: none;
    color: white;
}

.hamburger {
    position: absolute;
    display: block;
    width: 65px;
    height: 65px;
    cursor: pointer;
    margin-top: 18px;
    right: 10;

    appearance: none;
    background: none;
    outline: none;
    border: none;
    z-index: 100;
}

.hamburger .bar-1 {
    width: 100%;
    height: 2px;
    background-color: black;
    margin: 6px 0;
    transition: 0.5s;
}

.hamburger .bar-2 {
    width: 100%;
    height: 2px;
    background-color: black;
    margin: 6px 0;
    transition: 0.5s;
    width: 70%;
    display: flex;
    float: right;
}

.hamburger.is-active .bar-1 {
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: white;
}


.hamburger.is-active .bar-2 {
    transform: rotate(45deg) translate(1px, 3px);
    background-color: white;
    width: 100%;
    float: none;
}

@media (max-width: 830px) {
    .logo {width: 100%;}
    .menu {display: none;}
    .cta {display: none;}
    
  }


/* Sidebar slide */

.sidebar {
    z-index: 50;
    width: 500px;
    min-height: 100vh;
    top: 0;
    right: -500px;
    position: fixed;
    background-color: black;
    transition: all 1s cubic-bezier(.215, .61, .355, 1);
}

.sidebar--open {
    right: 0;
}

@media (max-width: 550px) {
    .sidebar {width: 90%;}
}

@media (max-width: 500px) {
    .sidebar {width: 90%;}
}

@media (max-width: 450px) {
  .sidebar {width: 90%;}
}



/* Side-1 */

.header-sidebar {width: 100%;}

.logo-sidebar {
    float: left;
    width: 49%;
    opacity: 0;
    transition: 0.5s;
}

.logo-sidebar-open {
    opacity: 1;
    transition: 1s;
    animation-delay: 0.5s;
}

/* Side-2 */
.content-sidebar {
    width: 100%;
    box-sizing: border-box;
    margin-top: 150px;

}

.menu-sidebar {
    display: block;
    margin-top: 30px;
    text-align: right;
}

.menu-sidebar li {
    margin: 50px auto;
    list-style: none;
    margin-right: 30px;
}

.menu-sidebar a {
    text-decoration: none;
    color: white;
    font-size: 50px;
    font-weight: 400;
}

@media (max-width: 550px) {
.menu-sidebar a {font-size: 30px;}  
}

.menu-sidebar a:hover {
    text-decoration: underline;
    font-weight: 500;
}


.dropcontent-side-1 {
    display: none;
    position: absolute;
}

.dropcontent-side-1--open {
    display:contents;
}

.dropcontent-side-1--open li {
    display: block;
    margin: 20px 0;
}

.dropcontent-side-1--open li a {
    font-size: 30px;
}

@media (max-width: 550px) {
    .dropcontent-side-1--open li a {font-size: 20px;}  
    }

.dropcontent-side-2 {
    display: none;
    position: absolute;
}

.dropcontent-side-2--open {
    display:contents;
}

.dropcontent-side-2--open li {
    display: block;
    margin: 20px 0;
}

.dropcontent-side-2--open li a {
    font-size: 30px;
}

@media (max-width: 550px) {
    .dropcontent-side-2--open li a {font-size: 20px;}  
    }


/* Divider sidebar */

.divider-sidebar .content-divider-sidebar {
    position: relative;
}

.divider-sidebar .content-divider-sidebar span {
    height: 1px;
    width: 70%;
    background-color: white;
    display: block;
    margin: 0px auto;
    position: absolute;
    right: 0;
}

/* Side-3 */

.content-sidebar-2 {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    text-align: right;
}

.social-sidebar {
    margin-right: 20px;
    margin-top: 100px;
}


.social-sidebar i {
    color:white;
    margin: 20px;

}   


/* First section */

.hero-1 {
    width: 100%;
    height: 600px;
}

/* Column-1 */


.retro-column-1 {
    width: 70%;
    float: left;
    background-color: black;
}
.column-1 {
    height: 100%;
    background: white;
    border-radius: 20px;
    border: 1px solid black;
}


.hero-1-title h1 {font-size: 90px; padding-left: 20px; width: 50%;}

.column-1 button {margin-left: 20px;}
.button-hero-1 {
    padding: 15px 30px;
    border-radius: 40px;
    background: linear-gradient(to top right, #FFDCC6, #F8A59F);
    border: none;
    font-weight: 500;
    float: left;
}

.button-hero-1 a {color: black; text-decoration: none;}

.border-button-email {
    float: left;
    margin-left: 10px;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    border-radius: 50px;
    position: relative;
}

.border-button-email a {color: black;}

.button-email {
    position: absolute;
    margin-top: 24px;
    margin-left: 13px;

}


/* Column-2 */

.retro-column-2 {
    width: 30%;
    float: left;
    background-color: black;
    box-sizing: border-box;
}

.column-2 {
    height: 100%;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #fff;
    background: url(/media/abstract-lines.jpg);
    background-repeat: none;
    background-position: center;
    position: relative;
}

.column-2 img {
    box-sizing: border-box;
    width: 750px;
    position: absolute;
    bottom: 0;
    right: 100px;
}

@media (max-width: 820px) {
    .retro-column-1 {
      width: 100%;
      display: flex;
      height: 100%;
      box-sizing: border-box;
      float: none;
  }
    .column-1 {width: 100%;
        box-sizing: border-box;
        background: url(/media/woman-b-w.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: -160 0;
    }

    .column-1 h1 {
        text-shadow: 2px 2px 10px white;
    }
  }

  @media (min-width: 758px) and (max-width: 820px) {
    .column-1 {width: 100%;
        box-sizing: border-box;
        background: url(/media/woman-b-w.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 0;
    }
  }

@media (max-width: 820px) {
    .retro-column-2 {display: none;}
    .column-2 {display: none;}
}

@media (max-width: 929px) {
  .column-2 img {right: 30px;}
}

@media (max-width: 845px) {
  .column-2 img {right: 10px;}
}

@media (max-width: 399px) {
  .column-1 h1 {font-size: 60px;}
}

/* Second section */

.hero-2 {
    width: 100%;
    display: flex;
}

@media (max-width: 845px) {
  .hero-2 {display: block;}
}

/* Column 3 */

.retro-column-3 {
    display: flex;
    background-color: black;
    width: 33%;
    float: left;
    height: 500px;
}

.column-3 {
    background-color: #E8E7EE;
    border-radius: 20px;
    margin: 1px;
    width: 100%;
    position: relative;
}

.column-3 p {line-height: 2; margin-left: 30px; margin-top: 30px;}

.column-3 img {
    width: 30%;
    margin-left: 30px;
    margin-top: 150px;
}

@media (max-width: 845px) {
    .retro-column-3 {
        width: 100%;
        display: flex;
        float: none;
        box-sizing: border-box;
    }

    .column-3 {margin: 1px;}
    .column-3 p {margin-top: 80;}

    .column-3 img {margin-top: 0;}
}

@media (max-width: 640px) {
    .column-3 p {margin-top: 50px;}
    .column-3 img {margin-top: 100px;}
}

/* Column 4 */

.retro-column-4 {
    display: flex;
    background-color: black;
    width: 33%;
    float: left;
    height: 500px;
}

.column-4 {
    background-color: white;
    border-radius: 20px;
    margin: 1px;
    width: 100%;
}

.column-4 h3 {line-height: 1.5; margin-top: 30px; margin-left: 30px;}
.column-4 p a {
    text-decoration: none; 
    color: grey; 
    margin-left: 30px;
}

@media (max-width: 640px) {
   .column-4 h3 {padding-top: 30px;}
   .column-4 p {padding-top: 40px;}
}

@media (max-width: 845px) {
    .retro-column-4 {
        width: 100%;
        display: flex;
        float: none;
    }

    .column-4 {box-sizing: border-box;}

    .column-4 h3 {margin-top: 80;}
}


.team {
    display: flex;
    width: 100%;
    margin-top: 200px;
    padding-left: 20px;
    float: left;
}

.team .team-1 {width: 15%;}
.team .team-2 {width: 15%; margin-left: -10px;}
.team .team-3 {width: 15%; margin-left: -10px;}

.team img {
    width: 100%;
    border-radius: 100%;

}

.team-cta {
    margin-left: 10px; 
    float: right;
    display: flex;
    align-items: center;
}

.team-cta a {color: black;}

.team-cta-resp {
    margin-left: 20px;
}

@media (max-width: 1145px) {
    .team-cta {display: none;}
    .team img {margin-bottom: 20px;}
    .team-cta-resp a {color: black;}
  
}

@media (min-width: 1145px) {
    .team-cta {display: flex;}
    .team-cta-resp {display: none;}
}

@media (max-width: 845px) {
  .team img {width: 60%; margin-top: -50px;}
  .team {width: 90%;float: left;}
  .team-cta-resp {display: flex; float: left;}
}

@media (max-width: 640px) {
    
    .team img {width: 100%; margin-bottom: 5px; margin-top: -150px;}
    .team-cta-resp {margin-left: 25px; margin-top: -80px;}
}

/* Column 5 */

.retro-column-5 {
    display: flex;
    background-color: black;
    width: 34%;
    float: left;
    height: 500px;
}

.column-5 {
    background-color: white;
    background: url(/media/bg-triangle-white.jpg);
    background-position: center;
    background-repeat: none;
    background-size: cover;
    border-radius: 20px;
    margin: 1px;
    width: 100%;
    position: relative;
}

.column-5 h1 {font-size: 120px; margin-top: 10px; margin-left: 30px;}
.column-5 img {
    width: 10%;
    margin-left: 40px;
    margin-top: 130px;
}

@media (max-width: 845px) {
    .retro-column-5 {
        width: 100%;
        display: flex;
        float: none;
        box-sizing: border-box;
    }

    .column-5 {display: flex; width: 100%;}

    .column-5 h1 {margin-top: 0;}

    .column-5 img {margin-left: -150; margin-top: 150px;}
}



/* Footer */

footer {
    width: 100%;
    height: 100px;
    background-color: black;
    border-radius: 0 0 30px 30px;
    margin-bottom: 20px;
    padding: 1px;
    box-sizing: border-box;
}

.column-footer {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 0 30px 30px;
    background-color: #E8E7EE ;
    text-align: center;
}

.column-footer h6 {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
}

.column-footer a {
    color: black;
}


.column-footer-1 {
    width: 30%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

.column-footer-2 {
    width: 39%;
    float: left;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.column-footer-3 {
    width: 30%;
    height: 100%;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 845px) {
    .column-footer h6 {font-size: 15px;}
}

@media (max-width: 768px) {
  footer {display: flex;height: auto;}
  .column-footer h6 {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.5;
    margin: 5;
}
  .column-footer-1 {float: none;width: 100%;}
  .column-footer-2 {float: none;width: 100%;border-top: 1px solid black; border-bottom: 1px solid black;}
  .column-footer-3 {float: none;width: 100%;}
}