* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    min-height: 100vh;

}



main {
    width: 100vw;
 
  
}

.empty-div {
    width: 100%;
    height: 150px;
}

.menu-wrapper {
    position: sticky;
    width: 100%;
    height: 100px;
    background-color: rgb(255, 255, 255);
    z-index: 10;
top: 0;
}


nav {
    margin: 0 auto;
    text-align: center;
}

.menu-desktop li {
    display: inline;
    list-style: none;
   margin-right: 20px;
   line-height: 150px;
   
}

.menu-desktop li a {
     color: rgb(235, 114, 33);
     font-weight: normal;
     font-family: Arial, Helvetica, sans-serif;
     font-size: large;
     text-decoration: none;
     background-color: rgb(226, 115, 51, 0);
     padding: 5px 20px;
     transition: .5s;

}

.menu-desktop li a:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(226, 115, 51);
}

.menu-mobile {
    display: none;
}


.logo-img {
    position: absolute;
   width: 200px;
   top: -100;
}

.logo-img img {
    width: 100%;
}

.social-media {
    display: flex;
    width: 150px;
    position: absolute;
    top: 64px;
    right: 5%;
 
}
.social-media div {
margin-left: 10px;
    width: 27px;
    height: 25px;
}

.social-media div img {
    width: 100%;
    height: 100%;
}

.social-media div:hover {
    width: 27px;
    height: 20px;

}

#slider {
    overflow: hidden;
    width: 100%;
   height: 600px;
    
    margin-left: 0px;
    margin-top: 0px;
}

#slider figure {
    position: relative;
    margin: 0px;
    width: 500%;
height: 100%;
    left: 0;
    animation: 20s slider infinite;
}

#slider figure div {
    width: 20%;
   height: 100%;
    float: left;
    margin-top: 00px;
   
    
}

.slide-one {
    background-image: url('../img/iStock-819742850.jpg');
    background-position: center;
    background-size: cover;

}

.slide-two {
    background-image: url('../img/kos2.jpg');
    background-position: top;
    background-size: cover;

}

.slide-three {
    background-image: url('../img/medicamentos.jpeg');
    background-position: center;
    background-size: cover;

}

.slide-four {
    background-image: url('../img/pro-series-group.jpg');
    background-position: bottom;
    background-size: cover;

}


.product-slide {
     margin-top: 500px; 
     margin-left: 0px;   
text-decoration: none;
   
}

#slider figure div:hover .product-slide h1 {
    opacity: 1;
    margin-left: 00px;
    
    
}


.product-slide h1 {
    text-align: center;
 
    text-shadow: 1px 1px 2px black;
    text-shadow: 1px 1px 5px black;
    text-shadow: 1px 1px 15px black;
    text-shadow: 1px 1px 10px black;
    background-color: rgb(255, 172, 116);
    margin-top: 300px; 
     margin-left: 500px; 
 opacity: 0; 
  transition: 1s;
}


@keyframes slider {
    0% {
        left: 0;
    }
    20% {
        left: 0%;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
    75% {
        left: -300%;
    }
    95% {
        left: -300%;
    }
100% {
    left: -400%;
}

}

.breif-profile {
 
    width: 59%;
    display: inline-flex;
    justify-content: space-around;
    margin: 70px 20%;
    
}
.profile-text {
    
    width: 500px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
   color: rgb(235, 114, 33);

}


.profile-image {
    width: 570px;
}

.profile-image img {
    width: 100%;
}


.production-line {
    width: 60%;
    margin: 0 auto;
  
}
.production-line  div{
    
   width: 100%;
    text-align: center;
}

.production-line  div img {
    width: 100%;
    margin-top: 10px;
}

.production-line  div p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    color: rgb(226, 115, 51);
    margin-top: 10px;
}

.product-suply {
    display: flex;
    width: 60%;
 
    height: 200px;
    margin: 0px auto;
    justify-content: space-between;
    margin-top: 1px;
}

.product {
    width: 50%;
    height: 200px;
    overflow: hidden;
  position: relative;
  background-color: rgb(0, 0, 0, 0);
  cursor: pointer;
  transition: 1s;
 }

 .product:hover {
    background-color: rgb(0, 0, 0, .7);
 }

 .product:hover .list-prod {
     opacity: 1;
     margin-left: 50px;
 }
 .product img {
    position: absolute;
     width: 100%;
     top: 0;
     z-index: -110;
 }
 
 .product-discr {
     position: absolute;  
      background-color: rgb(0, 0, 0);
     top: 0;
     z-index: 10;
    
    
  
 }
 .list-prod {
     opacity: 0;
     transition: 1s;
     margin-left: 100px;
 }

 .list-prod li {
    line-height: 20px;
     display: block;
     font-family: Arial, Helvetica, sans-serif;
     color: rgb(255, 138, 42);
     text-indent: 30px;
     text-shadow: 2px 2px 2px black;
  
 }

 .text-discr {
    text-shadow: 2px 2px 2px black;
     text-indent: 20px;
     margin-top: 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(253, 121, 45);
 }

 .product-link {
     text-decoration: none;
 }



 




 @media only screen and (max-width: 1364px) {



   
 .breif-profile {
     
    width: 60%;
    display: block;
    justify-content: space-around;
    margin: 70px auto;
    padding: 0 5%;
   
    
}

}



















 @media only screen and (max-width: 1025px) {


    .menu-wrapper {
        position: sticky;
        width: 100%;
        height: 70px;
        background-color: rgb(255, 255, 255);
        z-index: 10;
    top: 0;
    }
    
 
    
    .menu-mobile li {
        display: inline;
        list-style: none;
   
       line-height: 0px;
       
    }
    
    .menu-mobile li a {
         color: rgb(255, 255, 255);
         font-weight: normal;
         font-family: Arial, Helvetica, sans-serif;
         font-size: large;
         text-decoration: none;
         background-color: rgb(226, 115, 51, 0);
        
         transition: .5s;
    
    }
    
   

   .menu-mobile {
       display: block;
      position: absolute;
     top: 50px;
     right: 10%;
  
     text-align: right;
   }

   .menu-mobile li ul {
    display: none;
    transition: 1s;
width: 100px;


}


.menu-lines {
    font-size: x-large;
}

.menu-mobile li ul li {
    list-style: none;
margin-top: 2px;
  
    line-height: 30px;
 display: block;
    padding: 0px 0px;
    text-align: center;
    transition: 1s;

    background-color: rgb(253, 121, 60);
    width: 140px;
}

.menu-mobile li ul li a {
    color: rgb(255, 255, 255);
    width: 100%;
    
}

.menu-mobile li a {
    color: rgb(253, 121, 60);
}

.menu-dropmobile:hover .menu-droplimobile {
    display: block;
 

}

   .menu-desktop {
       display: none;
   }
    
    .logo-img {
        position: absolute;
       width: 100px;
       top: -100;
    }
    
    .logo-img img {
        width: 100%;
    }
    
    .social-media {
        display: flex;
        width: 150px;
        position: absolute;
        top: 10px;
        right: 1%;
      
    }
    .social-media div {
    margin-left: 10px;
        width: 27px;
        height: 25px;
    }
    
    .social-media div img {
        width: 100%;
        height: 100%;
    }
    
    .social-media div:hover {
        width: 27px;
        height: 20px;
    
    }
    
    #slider {
        overflow: hidden;
        width: 100%;
       height: 200px;
        
        margin-left: 0px;
        margin-top: 0px;
    }
    
    #slider figure {
        position: relative;
        margin: 0px;
        width: 500%;
    height: 100%;
        left: 0;
        animation: 20s slider infinite;
    }
    
    #slider figure div {
        width: 20%;
       height: 100%;
        float: left;
        margin-top: 00px;
       
        
    }
    
    .slide-one {
        background-image: url('../img/iStock-819742850.jpg');
        background-position: center;
        background-size: cover;
    
    }
    
    .slide-two {
        background-image: url('../img/kos2.jpg');
        background-position: top;
        background-size: cover;
    
    }
    
    .slide-three {
        background-image: url('../img/medicamentos.jpeg');
        background-position: center;
        background-size: cover;
    
    }
    
    .slide-four {
        background-image: url('../img/pro-series-group.jpg');
        background-position: bottom;
        background-size: cover;
    
    }
    
    
    .product-slide {
         margin-top: 500px; 
         margin-left: 0px;   
    text-decoration: none;
       
    }
    
    #slider figure div:hover .product-slide h1 {
        opacity: 1;
        margin-left: 00px;
        
        
    }
    
    
    .product-slide h1 {
        text-align: center;
     
        text-shadow: 1px 1px 2px black;
        text-shadow: 1px 1px 5px black;
        text-shadow: 1px 1px 15px black;
        text-shadow: 1px 1px 10px black;
        background-color: rgb(255, 172, 116);
        margin-top: 300px; 
         margin-left: 500px; 
     opacity: 0; 
      transition: 1s;
    }
    
    
    @keyframes slider {
        0% {
            left: 0;
        }
        20% {
            left: 0%;
        }
        25% {
            left: -100%;
        }
        45% {
            left: -100%;
        }
        50% {
            left: -200%;
        }
        70% {
            left: -200%;
        }
        75% {
            left: -300%;
        }
        95% {
            left: -300%;
        }
    100% {
        left: -400%;
    }
    
    }
    
    .breif-profile {
     
        width: 90%;
        display: block;
        justify-content: space-around;
        margin: 70px 0%;
        padding: 0 5%;
       
        
    }
    .profile-text {
        
        width: 98%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: large;
       color: rgb(235, 114, 33);
    
    }
    
    
    .profile-image {
        width: 98%;
    }
    
    .profile-image img {
        width: 100%;
    }
    
    
    .production-line {
        width: 98%;
        margin: 0 auto;
      
    }
    .production-line  div{
        
       width: 100%;
        text-align: center;
    }
    
    .production-line  div img {
        width: 100%;
        margin-top: 10px;
    }
    
    .production-line  div p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        color: rgb(226, 115, 51);
        margin-top: 10px;
    }
    
    .product-suply {
        display: none;
        width: 100%;
     
        height: 200px;
        margin: 0px auto;
        justify-content: start;
        margin-top: 1px;
        margin-left: 1px;
    }
    
    .product {
        width: 100%;
        height: 400px;
        overflow: hidden;
      position: relative;
      background-color: rgb(0, 0, 0, 0.7);
      cursor: pointer;
      transition: 1s;
     }
    
     .product:hover {
        background-color: rgb(0, 0, 0, .7);
     }
    
     .product:hover .list-prod {
         opacity: 1;
         margin-left: 50px;
     }
     .product img {
        position: relative;
         width: 100%;
         top: 0;
         z-index: -110;
     }
     
     .product-discr {
         position: relative;  
          background-color: rgb(0, 0, 0);
         top: 0;
         z-index: 10;
        
        
      
     }
     .list-prod {
         opacity: 1;
         transition: 1s;
         margin-left: 10px;
     }
    
     .list-prod li {
        line-height: 20px;
         display: block;
         font-family: Arial, Helvetica, sans-serif;
         color: rgb(255, 138, 42);
         text-indent: 30px;
         text-shadow: 2px 2px 2px black;
         font-size: small;
         text-decoration: none;
      
     }
    
     .text-discr {
        text-shadow: 2px 2px 2px black;
         text-indent: 20px;
         margin-top: 10px;
        font-family: Arial, Helvetica, sans-serif;
        color: rgb(253, 121, 45);
     }
    

 }



