.main {
  width: 100%;
    background-color: #fff0;
    /*background: linear-gradient(90deg, rgba(15, 80, 62, 1) 0%, rgba(126, 202, 18, 1) 100%);*/
    border-radius: 30px;
    position: relative;
    height: 90%;
}

.h3tub, .h1tub, .ptub {
  margin: 0;
}

.h3tub {
  margin-top: 30px;
  color: #000;
  font-size: 3vh;
  font-weight: 300;
   width:  50vw;
   text-align: justify;

    margin-left: 20vh;
}

.h1tub {
  /*margin-bottom: 63px;
    color: #001777;
    font-size: 50px;
    width: 1136px;
    margin-top: 167px;
    margin-left: 203px;*/
        color: #001777;
    font-size: 5vh;
    width: 60vw;
    margin-top: 13vw;
    margin-left: 20vh;
}






#chameleon {
  /*position: absolute;
  bottom: 0px;
  right: 0px;
  height: 390px;
  width: 600px;
  background-image: url("./../assets/1index/seccion2/tubo_s2.png");
  background-repeat: no-repeat;
  background-size: auto 450px;*/

        position: absolute;
    right: 0px;
    height: 99vw;
    width: 42vw;
    background-image: url(./../assets/1index/seccion2/tubo_s2.png);
    background-repeat: no-repeat;
    background-size: auto 63vw;
}


#chameleon2 {
        /*position: absolute;
    height: 1123px;
    width: 100%;
    background-image: url(./assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 492px;*/


    position: static;
    height: 31vw;
    width: 100vw;
    background-image: url(./../assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 28vw;
    margin-top: 6vw;

}








@media (max-width: 100px) {
  body {
    transform: scale(0.5);
  }
}




@media (max-width:1024px) {
    
  .h1tub {
    color: #001777;
    font-size: 3vh;
    width: 97vw;
    margin-top: 5.7vw;
    margin-left: 1vh;
    text-align: left;
      font-weight: 600;
}
.h3tub {
    margin-top: 30px;
    color: #000;
    font-size: 2.5vh;
    font-weight: 300;
    width: 96vw;
     text-align: justify;
    margin-left: 1vh;
}




#chameleon {
                  position: absolute;
        right: 0px;
        height: 32vw;
        width: 87vw;
        background-image: url(./../assets/1index/seccion2/tuborespon.png);
        background-repeat: no-repeat;
        background-size: 84vw;
        margin-top: 91vw;
}







#chameleon2 {
        /*position: absolute;
    height: 1123px;
    width: 100%;
    background-image: url(./assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 492px;*/


    position: static;
    height: 31vw;
    width: 100vw;
    background-image: url(./../assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 28vw;
    margin-top: 18vw;

}
}
@media screen and (min-width: 1025px) {
    .h3tub {
  margin-top: 30px;
  color: #000;
  font-size: 3vh;
  font-weight: 300;
   width:  50vw;
   text-align: justify;

    margin-left: 20vh;
}

.h1tub {
  /*margin-bottom: 63px;
    color: #001777;
    font-size: 50px;
    width: 1136px;
    margin-top: 167px;
    margin-left: 203px;*/
        color: #001777;
    font-size: 5vh;
    width: 60vw;
    margin-top: 13vw;
    margin-left: 20vh;
}

#chameleon2 {
        /*position: absolute;
    height: 1123px;
    width: 100%;
    background-image: url(./assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 492px;*/


    position: static;
    height: 31vw;
    width: 100vw;
    background-image: url(./../assets/1index/seccion2/Textura-circulos-rebanada-1.png);
    background-repeat: no-repeat;
    background-size: auto 28vw;
    margin-top: 6vw;

}
}



.colork {
    color: #000;
    font-weight:600;
}

           
        
        .darksoul-hover-fill-button1
        {
            margin: 0;
            display: flex;
            width: 10vw;
            height: 6vh;
            border-radius: 25px;
            outline: none;
            border: #E5E6E8;
            background-color: #E5E6E8;
             font-family: "Inter", sans-serif;
            cursor: pointer;
            align-items: center;
            justify-content: left;
            color: #fff;
            font-size: 3vh;
         
        }         
        .color-fill-1
        {
            position: absolute;
            width: 20px;
            height: 50px;
            border-radius: 25px 0px 0px 25px;
            background-color: #E5E6E8;
            visibility: hidden;
        } 
        .darksoul-hover-fill-button1:hover .color-fill-1 
        {
            visibility: visible;
            width: 10vw;
            height: 6vh;
            border-radius: 25px;
            transition: all 0.5s;
            
            color: #fff;
        }   
        .darksoul-hover-fill-button1:hover
        {
            box-shadow: 1px 1px 20px #E5E6E8;
            transition: all 1s;
        } 
        .darksoul-hover-fill-button1 p
        {
            margin: auto;
            z-index: 10;
        }   

         @media (max-width: 1280px){
              .darksoul-hover-fill-button1
        {
            margin: 0;
            display: flex;
            width: 26vw;
            height: 5vh;
            border-radius: 25px;
            outline: none;
            border: #E5E6E8;
            background-color: #E5E6E8;
             font-family: "Inter", sans-serif;
            cursor: pointer;
            align-items: center;
            justify-content: left;
            color: #fff;
            font-size: 2vh;
         
        } 
        
        .darksoul-hover-fill-button1:hover .color-fill-1
        {
            visibility: visible;
            width: 26vw;
            height: 5vh;
            border-radius: 25px;
            transition: all 0.5s;
            color: #fff;
        }   
         

         }
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         






     /*****************************************************************
     ******************************************************************
     ******************************************************************
     *****************************************************************/

      *{
    margin: 0;
    padding: 0;
   
}
.letratubosdepres {
   font-family: "Inter", sans-serif;
   

}
.imgprinbody{
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.containerportada{
    display:  ;
    justify-content: left;
    align-items: center;
    width: 96vw;
    height: 83vh;
    overflow: hidden;
    position: relative;
    border-radius: 2vh;

        margin-top: 5.2vh;

 box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
  
 
}
.containerportada img{
    width: 96vw;
    height: 89vh;
    object-fit: cover;
    
    transition: all 0.3s ;
    position: absolute;
    top:0;
    left:0;
    z-index:-1;


}
/*.container:hover img{
    transform: scale(1.2);
    filter:brightness(1);
}*/
.containerportada .headingportada{
       color: #000;
    transition: color 0.8s;
    user-select: none;
    font-size: 8vh;
    font-family: "Inter", sans-serif;
    margin-left: 19vh;
    font-weight: 600;
    padding-top: 30vh;
    
    
    
    
    
    
    
    
    
    
    
    
}



.containerportada2{
    display:  ;
    justify-content: left;
    align-items: center;
    width: 96vw;
    height: 85vh;
    overflow: hidden;
    position: relative;
    border-radius: 2vh;

        margin-top: 5.2vh;

}


.containerportada2 .letrapeque{
       color: #fff;
    transition: color 0.8s;
    user-select: none;
    font-size: 3vh;
    font-family: "Inter", sans-serif;
    margin-left: 0vh;
    width: 80vh
}

@media (max-width:1024px) {
    .containerportada2 .text{
       color: #000;
    transition: color 0.8s;
    user-select: none;
    font-size: 2vh;
    font-family: "Inter", sans-serif;
    margin-left: 0vh;
    width: 40vh
}
}



 .headingportada2{
       color: #000;
    transition: color 0.8s;
 
    font-size: 5vh;
    font-family: "Inter", sans-serif;
    
    font-weight: 600;
}

/*.container:hover .heading{
    color:rgba(255, 255, 255, 1);
}*/

/**********seccion para pagina responsiva*************/

@media (max-width:1024px) {
    .containerportada2 .letrapeque{
       color: #fff;
    transition: color 0.8s;
    user-select: none;
    font-size: 2vh;
    font-family: "Inter", sans-serif;
    margin-left: 0vh;
    width: 40vh
}

.containerportada .headingportada{
      color: #000;
    transition: color 0.8s;
    user-select: none;
    font-size: 6vh;
    font-family: "Inter", sans-serif;
    margin-left: 1.5vh;
    font-weight: 600;
    padding-top: 5vh;
}
.containerportada{
    display:  ;
    justify-content: left;
    align-items: center;
    width: 96vw;
    height: 83vh;
    overflow: hidden;
    position: relative;
    border-radius: 2vh;

        margin-top: 5.2vh;

 box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
 
    background-image: url(./../assets/1index/seccion1/indexres.jpg);
         background-size: 86vh;  
}

.containerportada img{
    width: 0vw;
    height: 0vh;
    object-fit: cover;
    
    transition: all 0.3s ;
    position: absolute;
    top:0;
    left:0;
    z-index:1;


}

}



/********************************************************
*********************************************************
*********************************************************
*********************************************************/



  /*fin de tubo */
.text {
     position: absolute;
    width: 437px;
    left: 10%;
    height: 38px;
    margin-top: -20px;


}

.p1 {
/*width: 53px;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1;
    font-family: "Inter", sans-serif;
    font-size: 413%;
    font-weight: 600;
    margin-left: -191px;

    width: 140%;*/
    
    color: #383C43;
    line-height: 1;
    font-family: "Inter", sans-serif;
    font-size: 8.5vh;
    font-weight: 600;
    width: 79vw;
        padding-top: 17vw;

}

.p2 {

    
    color: #383C43;
    line-height: 1;
    font-family: "Inter", sans-serif;
    font-size: 8.5vh;
    font-weight: 600;
    width: 79vw;

}

.word {
  position: absolute;
  width: 590vw;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  transform: rotateX(-90deg);
}

.letter.in {
  transform: rotateX(0deg);
  transition: transform 1.30s cubic-bezier(0.175, 0.885, 0.32, 1.275);  /*Tiempo de las letras */

}

}

.wisteria {
  color: #007B34;
}

.belize {
  color: #007B34;
}

.pomegranate {
  color: #007B34;
}

.green {
  color: #007B34;
}

.midnight {
  color: #007B34;
}

  .banner {
  /*
background: rgb(255,255,255);
background: linear-gradient(72deg, rgba(255,255,255,1) 0%, rgba(249,249,249,1) 100%);
  height: 100vh;
  background-size: cover;
  background-position: center;*/

    /*background-image: url(./../assets/1index/seccion1/Fondo-inicio-01.jpg);
    height: 99vh;
    width: 94%;
    background-position: center;
   margin-top: 79px;
    margin-left: 50px;
    border-radius: 41px;
    background-repeat: no-repeat;
    background-size: 1950PX;*/
            background-image: url(./../assets/1index/seccion1/inicio3.png);
    height: 88vh;
    width: 96vw;
    background-position: center;
    margin-top: 82px;
    margin-left: 50px;
    border-radius: 41px;
    background-repeat: no-repeat;
    background-size: 110vw;
}







.content h2 {
  font-family: alfa slab one;
  color: #ef0554;
  font-size: 60px;
}

/*.btn a {
  text-decoration: none;
  background: #ef0554;
  padding: 15px 10px;
  display: inline-block;
  color: #fff;
  margin-top: 15px;
  border-radius: 50px;
  width: 130px;
  text-align: center;
}*/
.wrapper {
  width: 1060px;
  margin: auto;
  padding-top: 16%;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .wrapper {
    width: 75%;
    padding-top: 26%;
  }
  .content {
    text-align: center;
  }
  .content h2 {
    font-size: 60px;
  }
  .content p {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .banner {
    background-position: 60%;
  }
  .wrapper {
    width: 75%;
    padding-top: 26%;
  }
  .content h2 {
    font-size: 25px;
  }
  .content p {
    width: 100%;
  }
  .btn a {
    padding: 9px 4px;
    width: 105px;
  }
}


/***********************************************************
************************************************************
************************************************************
************************************************************/


/***********************************************************
************************************************************
************************************************************
************************************************************/

 video {
     /*
 display: block;
    width: 93vw;
    height: 43vw;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0px 52px 0px 50px;
    margin-top: -3vw;
        border-radius: 2vh;*/
        
         display: flex;
    width: 95vw;
    height: 88vh;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 4px auto 0px auto;
    margin-top: -3vw;
    border-radius: 2vh;
}




@media (max-width:1080px) {
    
video {
    display: block;
    width: 100vw;
    height: 30vh;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0px 1px 0px 1px;
    margin-top: -6vw;
        border-radius: 2vh;
        
}

}


 



/***********************************************************
************************************************************
************************************************************
************************************************************/

 #chameleon3 {
        position: absolute;
    height: 31vw;
    width: 100vw;
    background-image: url(./../assets/1index/seccion2/ciculo2.png);
    background-repeat: no-repeat;
    background-size: auto 28vw;




   

}







/***********************************************************
************************************************************
************************************************************
************************************************************/


.top {
  text-align: center;
  color: #001489;
  padding-top: 100px;
     font-size: 4vh;
    font-weight: 600;
}






/***********************************************************
************************************************************
************************************************************
************************************************************/



  

    .icon {
    width: 6vw;
    display: block;
    margin: auto;
    padding: 5px 0px 5px 0px;
}

:root{

    margin: 0;
    padding: 0;
    --size:100px;
    --white: #fff;
    --black: #000;
    --font1:'Carlito', sans-serif;

}

.seccion4{
       margin: 0;
    font-size: 1.2rem;
    display:  ;
    align-content: center;
    justify-content: center;
    background-color: #ffff;
    /* background: url(https://images.pexels.com/photos/7203982/pexels-photo-7203982.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) no-repeat; */
    height: 71%;
}

.container{
    /*width:70vw;
    display: inline-flex;
    grid-template: 40% 40% / 40% 40% ;
    justify-content: center;
    align-content: center;
    
    gap: 60px;*/

        display: flex;
    grid-template: 40% 40% / 40% 40%;
    justify-content: center;
    align-content: center;
    gap: 5vh;
    padding-top: 150px;
    
    & .box{
                padding: 1em;
        block-size: auto;
        overflow: hidden;
        border-radius: 7%;
        background: var(--black);
        color: var(--white);
        font-family: var(--font1);
        animation: myim 3s linear;
        box-shadow: 1px 1px 20px 4px #10010175;
        transition: 0.15s linear;
        transition-delay: 0.5;
        text-align: center;
        font-size: 0.5vh;

        
        &:hover{
            box-shadow: 1px 1px 1px 3px ;
            transform: scale(1.30);

        box-shadow: 1px 1px 20px 4px #10010175;
        


        }

         & .p{
            font-size: 4vh;
            font-weight: 600;
            padding: 1em 3px;
            cursor: pointer;
            margin-bottom: 1em;
            color: #007B34;
            margin: 2;
            text-decoration: none;


        }
          & .p2{
font-size: 2vh;
            padding: 1em 3px;
            cursor: pointer;
            margin-bottom: 2em;
            color: #000;
margin: 2;
text-decoration: none;
        }
    }
}



.cls {
    text-align: center;
}

.box:nth-child(1){

    background-color: #fff;
    ;
    height: 15vw;
        width: 16vw;
        padding-top: 2vh;
}

.box:nth-child(2){

    background-color: #fff;
    ;
     height: 15vw;
         width: 16vw;
         padding-top: 2vh;
}

.box:nth-child(3){

    background-color: #fff; 
    ;
     height: 15vw;

         width: 16vw;
         padding-top: 2vh;
}

.box:nth-child(4){

    background-color: #fff; 
    ;
     height: 15vw;

         width: 16vw;
         padding-top: 2vh;
}



.a{
    text-decoration: none;
    
    font-size: 3vh;
    color: #000;
}
.span > .img{
 width: 32px;
 height: 32px;
 margin-right: 10px  ;
 float: right; 

}









@media (max-width: 1024px) {
        
    
    
.container{
      display: flex;
    justify-content: space-between;
    align-content: center;
    gap: 1vh;
    padding-top: 150px;

   
    
    & .box{
                padding: 1em;
        block-size: auto;
        overflow: hidden;
        border-radius: 7%;
        background: var(--black);
        color: var(--white);
        font-family: var(--font1);
        animation: myim 3s linear;
        box-shadow: 1px 1px 20px 4px #10010175;
        transition: 0.15s linear;
        transition-delay: 0.5;
        text-align: center;
        font-size: 0.5vh;

        
        &:hover{
            box-shadow: 1px 1px 1px 3px ;
            transform: scale(1.30);

        box-shadow: 1px 1px 20px 4px #10010175;


        }

         & .p{
            font-size: 2vh;
            font-weight: 600;
            padding: 1em 3px;
            cursor: pointer;
            margin-bottom: 1em;
            color: #007B34;
            margin: 2;


        }
          & .p2{
font-size: 1vh;
            padding: 1em 3px;
            cursor: pointer;
            margin-bottom: 2em;
            color: #000;
margin: 2;
        }
    }
}



.cls {
    text-align: center;
}

.box:nth-child(1){

    background-color: #fff;
    ;
 height: 30vw;
        width: 90vw;
        padding-top: 2vh;
}

.box:nth-child(2){

    background-color: #fff;
    ;
   height: 30vw;
        width: 90vw;
        padding-top: 2vh;
}

.box:nth-child(3){

    background-color: #fff; 
    ;
  height: 30vw;
        width: 90vw;
        padding-top: 2vh;
}

.box:nth-child(4){

    background-color: #fff; 
    ;
    height: 30vw;
        width: 90vw;
        padding-top: 2vh;
}



.a{
    text-decoration: none;
    
    font-size: 3vh;
    color: #000;
}
.span > .img{
 width: 32px;
 height: 32px;
 margin-right: 10px  ;
 float: right; 

}

.top {
    text-align: center;
    color: #001489;
    padding-top: 100px;
    font-size: 2vh;
    font-weight: 600;
}
}


/***********************************************************
************************************************************
************************************************************
************************************************************/

.cultuextr {
        font-size: 5.3vh;
        font-weight: 600;
        color: #080808;
          padding-left: 26vh;

    font-family: Inter, sans-serif;

      }




/***********************************************************
************************************************************
************************************************************
************************************************************/



   .secti {
     background-color: #E5E6E8;
         padding-top: 0vh;
    margin-top: 10vw;
  
    
}
        
        
   
        
        .darksoul-hover-fill-button2
        {
            margin: auto;
            display: flex;
            width: 8vw;
            height: 5vh;
            border-radius: 25px;
            outline: none;
            border: #007B34;
            background-color: #007B34;
             font-family: "Inter", sans-serif;
            cursor: pointer;
            align-items: center;
            justify-content: left;
            color: #fff;
            font-size: 3vh;
         
        }         
        .color-fill-2
        {
            position: absolute;
            width: 1vw;
            height: 5vh;
            border-radius: 25px 0px 0px 25px;
            background-color: rgb(160, 168, 255);;
            visibility: hidden;
        } 
        .darksoul-hover-fill-button2:hover .color-fill-2
        {
            visibility: visible;
            width: 8vw;
            height: 5vh;
            border-radius: 25px;
            transition: all 0.5s;
            background-color:  #001970;
            color: #fff;
        }   
        .darksoul-hover-fill-button2:hover
        {
            box-shadow: 1px 1px 20px rgb(160, 168, 255);
            transition: all 1s;
        } 
        .darksoul-hover-fill-button2 p
        {
            margin: auto;
            z-index: 10;
        }   
        
         @media (max-width: 1024px){
              .darksoul-hover-fill-button2
        {
        margin: 0;
            display: flex;
            width: 23vw;
            height: 5vh;
            border-radius: 25px;
            outline: none;
            border: #007B34;
            background-color: #007B34;
             font-family: "Inter", sans-serif;
            cursor: pointer;
            align-items: center;
            justify-content: left;
            color: #fff;
            font-size: 4vh;
         
        } 
        
        .darksoul-hover-fill-button2:hover .color-fill-2
        {
            visibility: visible;
            width: 23vw;
            height: 5vh;
            border-radius: 25px;
            transition: all 0.5s;
            background-color:  #001970;
            color: #fff;
        } 
        
        
         .darksoul-hover-fill-button2:hover .color-fill-2
        {
            visibility: visible;
            width: 23vw;
            height: 5vh;
            border-radius: 25px;
            transition: all 0.5s;
            background-color:  #001970;
            color: #fff;
        }
        
        .coslr {
            font-size: 2vh;
            font-weight: 600;
        }
             
         }





/***********************************************************
************************************************************
************************************************************
************************************************************/

body {
  color: #000;
 
}

.main {
  
     display: flex;
    flex-direction: row;
    width: 89vw;
    height: 64vh;
    padding-left: 26vh;
  
}

/*Device below 1024px, tablet/mobile*/
@media(max-width:1024px){
  
  .main {
  
  display:flex;
  flex-direction:column;
  width:100%;   
  height:auto;
    padding-left: 0vh;
  
} 
}

.column {
  /*
  width:25%;
  transition: width 0.5s;
  overflow: hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;*/
  width: 23%;
    transition: width 0.5s;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
  
}

.column:nth-child(1) {
  
  background-image: url('./../assets/1index/seccion5/carrucel/Tubo-depresible-aluminio-inicio-baja.jpg');
  background-size:cover;
  background-position:center center;
border-radius: 2vh;
  
}

.column:nth-child(2) {
  
  background-image: url('./../assets/1index/seccion5/carrucel/Tubo-laminado-PBL-ABL-inicio-baja.jpg');
  background-size:cover;
  background-position:center center;
  border-radius: 2vh;
  
}

.column:nth-child(3) {
  
  background-image: url('./../assets/1index/seccion5/carrucel/impresion-pelicula-polilaminada-inicio-baja.jpg');
  background-size:cover;
  background-position:center center;
  border-radius: 2vh;
  
}
/*
.column:nth-child(4) {
  
  background-image: url('./../assets/1index/seccion5/carrucel/impresion-aluminio-inicio-baja.jpg');
  background-size:cover;
  background-position:center center;
 border-radius: 2vh;
}
*/
.column:nth-child(4) {
  
  background-image: url('./../assets/1index/seccion5/carrucel/etiquetas-inicio-baja.jpg');
  background-size:cover;
  background-position:center center;
 border-radius: 2vh;
}

/*Border Styling for device width below 1024px, Tablet/Mobile*/
@media(max-width:1024px){
  
  .column:nth-child(1) {
  
   border-radius: 10px 10px 0px 0px;
  
}
  
  .column:nth-child(4) {
  
   border-radius: 0px 0px 10px 10px;
}
}

/*Desktop Styling*/
@media screen and (min-width: 1025px) {
            
    /*Clicked column styling*/
    .expanded {
        
    width: 187% !important;
    
    }
    }
    
    .expanded:after {
        
           content: '';
    background: #ffffff87;
    position: absolute;
    left: 0px;
    top: 33vh;
    height: 38%;
    width: 100%;
    z-index: 0;
    pointer-events: none;
        
    }
      
/*Tablet and mobile, below 1025px*/  
@media (max-width: 1024px) {
        
.column {
        
        width:100%;
        transition: height 0.5s;
        height: 120px;
        
}   

 
        
/*Clicked column styling*/
.expanded{
        
    height: 70vh !important;         

    }
 }
    
/*Inner elements inside column container styling*/
.inner-element {
        
  opacity: 0;
  transition: opacity 0s;
  z-index: 2;
  padding:20px;
  background:transparent;
  position:absolute;
  left:0;
  bottom:100px;
  
  left: 19vh;
    right: 80vh;
      
}

.inner-element h2{
  
       color: black;
    font-size: 3.3vh;
    font-family: "Inter", sans-serif;
        width: 35vw;
  
}

.inner-element p{
  
  color:white;
      font-family: "Inter", sans-serif;
  font-size:16px;
  font-weight:600;
  
}
    
/*Inner elements made visible on clicked column*/
.inner-element.active {
              
 opacity: 1; 
 transition: opacity 0.5s 0.4s;        
       
}

.icons {
  /*
  position:absolute;
  bottom:20px;
  left:18px;
  font-size:2vh;
  padding:20px;
  background:white;
  z-index:2;
  border-radius:50%;
  height:40px;
  width:40px;
  display:flex;
  justify-content:center;
  align-items:center;*/
  
      position: absolute;
    bottom: 0px;
    left: 0px;
    font-size: 2.7vh;
    padding: 2px;
    background: white;
    z-index: 2;
    border-radius: 2%;
    height: 66vh;
    width: 7vw;
    display: flex;
    justify-content: left;
    align-items: center;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
    font-family: "Inter", sans-serif;
    font-weight: 600;
   
}

.DMmotionarts{
  
  position:absolute;
  width:200px;
  left:0;
  bottom:0;
  
}




@media (max-width: 1024px) {
        

.icons {
        bottom: 1px;
       
        font-size: 2vh;
      

        height: 7vh;
        width: 100vw;
        writing-mode: horizontal-tb;
        transform: rotate(360deg);
}

.inner-element {
        
  opacity: 0;
  transition: opacity 0s;
  z-index: 2;
  padding:20px;
  background:transparent;
  position:absolute;
  left:0;
  bottom:15vh;
  
  left: 1vh;
    right: 9vh;
      
}



    .expanded:after {
        
           content: '';
    background: #ffffff87;
    position: absolute;
    left: 0px;
    top: 37vh;
    height: 30%;
    width: 100%;
    z-index: 0;
    pointer-events: none;
        
    }



.secti {
     background-color: #E5E6E8;
         padding-top: 4vh;
    margin-top: 30vw;
  
    
}

  .cultuextr {
        font-size: 4.3vh;
        font-weight: 600;
        color: #080808;
          padding-left: 0;

    font-family: Inter, sans-serif;

      }
.inner-element h2{
  
       color: black;
    font-size: 3.3vh;
    font-family: "Inter", sans-serif;
        width: 90vw;
  
}

}



@media screen and (min-width: 1025px) {
 inner-element h2 {
    color: black;
    font-size: 3.3vh;
    font-family: "Inter", sans-serif;
    width: 35vw;
}

.inner-element {
    opacity: 0;
    transition: opacity 0s;
    z-index: 2;
    padding: 20px;
    background: transparent;
    position: absolute;
    left: 0;
    bottom: 100px;
    left: 19vh;
    right: 80vh;
}
    
}




/***********************************************************
************************************************************
************************************************************
************************************************************/

.logoface{
    width: 35px;
    left: 6%;
       padding-top: 2vh;
   
} 
hr {
    margin-top: 64px;
    margin-bottom: 64px;
    border: 0;
    border-top: 3px solid #001970;
  


}

#picassoFooter {
    background-color: #E5E6E8;
    color: #000;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
   
    font-family: "Inter", sans-serif;
    padding-top: 30px;
}
#picassoFooter2 {
    background-color: #E5E6E8;
    color: #000;
    padding: 20px;
    display: flow;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
   
    font-family: "Inter", sans-serif;
    padding-top: 1px;
}

.footer-navigation, .footer-contact, .footer-social {
    margin: 10px;
}

.footer-navigation h3, .footer-contact h3, .footer-social h3 {
    color: #000;
    margin-bottom: 15px;
}

.footer-navigation ul, .footer-social .social-icons {
    list-style: none;
    padding: 0;
}

.footer-navigation ul li, .social-icon {
    margin-bottom: 10px;
    transition: transform 0.2s ease-in-out;
}

.footer-navigation ul li a, .social-icon {
 
        color: #383c43;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}



.footer-navigation ul li a:hover{
 
        color: #383c437d;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}

.social-icon {
    display: inline-block;
    padding: 8px;
    background-color: #333;
    margin-right: 5px;
}

.social-icon:hover, .footer-navigation ul li a:hover {
    transform: scale(1.1);
}

.footer-art canvas {
    max-width: 100px;
    height: auto;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #picassoFooter {
        flex-direction: column;
        align-items: center;
    }

    .footer-art canvas {
        max-width: 100%;
    }
}



.logos{
    width: 197px;
    left: 6%;
   
} 

.logofoot{
   width: 16px;

   
} 


.tamfon {
       width: width: 149px;
    font-family: "Inter", sans-serif;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #383C43;
    list-style:none;

}

.contac {
   
    font-weight: 600;
    font-size: 2.7rem;


}



.linea {
  margin-left: 64px;
    margin-right: 64px;
    color: #001970;
    

}

.derech {
    font-size: 15px;
    text-align: center;
    font-family: "Inter", sans-serif;
}


.h1fontitu {
    font-size: 2.7rem;
    
font-weight: 600;
    font-family: "Inter", sans-serif;
}




.pcontactanos{
    margin: 0 0 10px;
    font-size: 3.0vh;
    line-height: 1.1;
}
@media (max-width:1080px) {
   .pcontactanos{
    margin: 0 0 10px;
    font-size: 2vh;
    line-height: 1.1;
} 



.contac {
   
       font-weight: 600;
    font-size: 3.6vh;


}
}






/***********************************************************
************************************************************
************************************************************
************************************************************/






/***********************************************************
************************************************************
************************************************************
************************************************************/

ol {
    text-align: justify;
    margin-left: 41px;
        margin-bottom: 1px;
}

@media (max-width:1080px) {

ol {
    text-align: justify;
    margin-left: 5px;
        margin-bottom: 1px;
}
}
/***********************************************************
************************************************************
************************************************************
************************************************************/


/***********************************************************
************************************************************
************************************************************
************************************************************/



.containerg {
    
 width: 94%;
    margin: auto;
    max-width: 72vw;
}
  
  
.section-title {
     color: #001970;
    text-align: center;
    font-size: 3.5rem;
    text-transform: ;
    letter-spacing: 1px;
    margin: 50px 0 0 0;
    font-weight: 600;
  
  &::after {
    content: "";
    display: block;
    height: 2px;
    background-color: #21764500;
    margin-bottom: 40px;
  }
}
  
  
.services-inner {
  display: grid;
  grid-template-rows: 1fr 0fr;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-row-gap: 50px;
  grid-column-gap: 20px;
}
  
  
.services-box {
    color: #000;
    text-align: center;
    text-transform: capitalize;
    border: 3px solid #ffffff;
    padding: 15px;
    box-shadow: 1px 1px 20px #E5E6E8;
    border-radius: 2vh;
    height: 25vh;
    align-content: center;
        background-color: #fff;
}
  
   .services-box:hover{
            box-shadow: 1px 1px 1px 2px ;
            transform: scale(1.30);

        box-shadow: 1px 1px 20px 4px #10010175;
        


        }
.icon {
  display: block;
  background-color: #2ecc7100;
  border-radius: 0%;
  width: 122px;
  height: 114px;
  padding: 12px;
  margin: 0 auto 10px auto;
}
  
  
.icon i {
  color: #333;
  font-size: 1.2rem;
}
  
  
.services-title {
 font-weight: normal;
    font-size: 1.9rem;
   
    
}
.services-title2 {
 font-weight: 600;
    font-size:3.9rem;
    color: #007B34;
   
    
}
  /*****************tablet*********************/
@media(min-width:991.98px) {
    
    .services-box {
    color: #000;
    text-align: center;
    text-transform: capitalize;
    border: 3px solid #ffffff;
    padding: 15px;
    box-shadow: 1px 1px 20px #E5E6E8;
    border-radius: 2vh;
    height: 45vh;
    align-content: center;
    background-color: #fff;
}
    
 .services-title {
 font-weight: normal;
    font-size: 1.9rem;
   
    
}
.services-title2 {
 font-weight: 600;
    font-size:3.9rem;
    color: #007B34;
   
    
}  

}



/***********************************************************
************************************************************
************************************************************
************************************************************/