/* body {
    background-color: #8EC5FC;
    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  } */
  
  
    


.content {
    position: relative;
  }
  .screen {
      max-width: auto;
      max-height: 628px;
      border: 2px solid #b8b8b8;
      border-radius: 10px;
      margin: 0 auto;
  }
  .screen img {
    
      top: 0;
      width: 100%;
      height: auto;
      position: absolute;
      z-index: 0;
      margin:0;
      padding:0;
      -webkit-transition: top 3s;
      -moz-transition: top 3s;
      -ms-transition: top 3s;
      -o-transition: top 3s;
      transition: bottom 3s;
  }
  .screen:hover{
      opacity: 0.9;
  }
  .details-left
  {
      border-right: solid;
  }

  .screenpage {

display: block;
width: 300px;
height: 350px;
overflow: hidden;
position: relative;
border: 2px solid #b8b8b8;
border-radius: 10px;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.screenpage img {

top: 0;
width: 100%;
height: auto;
position: absolute;
z-index: 0;
margin:0;
padding:0;
-webkit-transition: top 3s;
-moz-transition: top 3s;
-ms-transition: top 3s;
-o-transition: top 3s;
transition: bottom 3s;
}
.screenpage:hover img, .info-slide:active img {
top: -100%;
-webkit-transition: all 3s ease-in-out ;
-moz-transition: all 3s ease-in-out ;
-ms-transition:  all 3s ease-in-out ;
-o-transition:  all 3s ease-in-out ;
transition:  all 3s ease-in-out;
}
.screendetail{
  padding: 20px;
  border: 2px solid #b8b8b8;
  border-radius: 10px;
}
.screendetail:hover{
  cursor: pointer;
  background-color: #212529;
  color: wheat;
  transition:  all 0.5s ease-in-out;
}





.macbook {
    

    padding: 2% 6%;
    margin: auto auto;
    max-width: 80vw;
  }
  
  .screenmac {
    background: #000;
    border-radius: 3% 3% 0.5% 0.5% / 5%;
    margin: 0 auto;
    /* for aspect ratio */
    position: relative;
    width: 80%;
  }
  
  .screenmac:before {
    border: 2px solid #cacacc;
    border-radius: 3% 3% 0.5% 0.5% / 5%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8) inset, 0 0 1px 2px rgba(255, 255, 255, 0.3) inset;
    content: "";
    display: block;
    /* for aspect ratio ~67:100 */
    padding-top: 67%;
  }
  
  .screenmac:after {
    content: "";
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    position: absolute;
    bottom: 0.75%;
    left: 0.5%;
    padding-top: 1%;
    width: 99%;
  }
  
  .viewport {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: 4.3% 3.2%;
    background: #333;
  }
  
  .base {
    /* for aspect ratio */
    position: relative;
    width: 100%;
  }
  
  .base:before {
    content: "";
    display: block;
    /* for aspect ratio ~33:1000*/
    padding-top: 3.3%;
    /* stylin */
    background: linear-gradient(#eaeced, #edeef0 55%, #fff 55%, #8a8b8f 56%, #999ba0 61%, #4B4B4F 84%, #262627 89%, rgba(0, 0, 0, .01) 98%);
    border-radius: 0 0 10% 10%/ 0 0 50% 50%;
  }
  
  .base::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.8) 0.5%, rgba(0, 0, 0, 0.4) 3.3%, transparent 15%, rgba(255, 255, 255, 0.8) 50%, transparent 85%, rgba(0, 0, 0, 0.4) 96.7%, rgba(255, 255, 255, 0.8) 99.5%, rgba(0, 0, 0, 0.5) 100%);
    content: "";
    height: 53%;
    position: absolute;
    top: 0;
    width: 100%;
  }
  
  .notch {
    background: #ddd;
    border-radius: 0 0 7% 7% / 0 0 95% 95%;
    box-shadow: -5px -1px 3px rgba(0, 0, 0, 0.2) inset, 5px -1px 3px rgba(0, 0, 0, 0.2) inset;
    margin-left: auto;
    margin-right: auto;
    margin-top: -3.5%;
    z-index: 2;
    /* for aspect ratio */
    position: relative;
    width: 14%;
  }
  
  .notch:before {
    content: "";
    display: block;
    /* for aspect ratio ~1:10 */
    padding-top: 10%;
  }

  .screenselect{
    padding: 20px;
    border: 2px solid #b8b8b8;
    border-radius: 10px;
  }


  /* PAGINA CONTATTI */

  .macbookcontatti {
    padding: 0% 6% 2% 6%;
    margin: auto auto;
    max-width: 40vw;
  }

  .viewportcontatti{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: 4.3% 3.2%;
    background: #333;
    overflow-y: scroll; /* Enable vertical scrolling */

    /* Hide the scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .viewportcontatti::-webkit-scrollbar 
  {
    width: 0; /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
  }

  .screencontatti {
    max-width: auto;
    max-height: 628px;
    /* border: 2px solid #b8b8b8;
    border-radius: 10px; */
    margin: 0 auto;
    padding: 10px;
  }

  @media (max-width: 768px){
    .macbookcontatti {
      padding: 2% 6%;
      margin: auto auto;
      max-width: 80vw;
    }
  }