.pink__Main_Wrapper {
    display: block;
    background: #eb8ab0;
    /*padding-bottom: 50px;*/
    
  }

  .orange__Main_Wrapper {
  
    display: block;
    background: #fc741a;
    padding-bottom: 50px;
  }



/*moj test grid -  razvoju*/
/*moj test grid MALI GRID-  razvoju*/
.contianer_pink{
    display: grid;
    grid-template-columns: auto auto;
    padding: 10px;
  }

  
  .contianer_pink_P3{
    display: grid;
    grid-template-columns: auto auto auto;

    /*značajka prilagodljiv row*/
    grid-auto-rows: max-content; /* OR min-content*/
  }

  .element_S_1 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 3;
    position: relative;
    right: 0;
  }

  .element_S_1 img{
    /*width:288px; /*100%;*/
    height: 433px;/*90%;*/

    width:73%; 
    height:97%; 
  }

  .element_S_1_hidden{
    /*background-color: rgba(230, 18, 18, 0.8);*/
    text-align: center;
    height: 20px;
    padding: 10px 0;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    position: relative;
    right: 0;
  }

  .element_S_2_hidden{
    /*background-color: rgba(18, 230, 64, 0.8);*/
    text-align: center;
    padding: 20px 0;
    grid-column: 2 / span 1;
    grid-row: 1 / span 2;
    position: relative;
    right: 0;
  }

  .element_S_3_hidden{
    /*background-color: rgba(230, 18, 18, 0.8);*/
    text-align: center;
    height: 20px;
    padding: 10px 0;
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
    position: relative;
    right: 0;
  }


  /*moj test grid VELIKI GRID - u razvoju*/
  /*samo za slike*/
  .contianer_wrapper_grid__3{
    display: grid;
    grid-template-columns: 50% 25% auto;
    /*padding: 10px;*/
    gap:40px;
    margin-top: -40px;
  }


    .contianer_wrapper_grid__3a{
      display: grid;
      grid-template-columns: auto auto auto;

      gap:40px;
    }

     .contianer_wrapper_grid__3b{
      display: grid;
      grid-template-columns: 30% auto 30%;
      z-index: -1;
      gap:40px;
  
    }


    .contianer_wrapper_grid__3c{
      display: grid;
      grid-template-columns: 20% auto 20%;

      gap:40px;
    }

    /*samo za slike i text*/
  .contianer_wrapper_grid__2{
    display: grid;
    grid-template-columns: 50% 50%;

    gap:40px;
    margin-top: -40px;
  }

  .contianer_wrapper_grid__2a{
    display: grid;
    grid-template-columns: auto auto;
    gap:40px;
  }

   /*samo za slike i text b varijanta*/
   .contianer_wrapper_grid__2b{
    display: grid;
    grid-template-columns: 50% 50%;
    gap:40px;
    margin-top: -100px;

    /*značajka*/
    align-content: center;
    /*justify-content: space-evenly;*/
    align-items: start;
  }


  .contianer_wrapper_grid__2c{
    display: grid;
    grid-template-columns: 50% 50%;
    gap:40px;
    margin-top: -40px;
    /*značajka na mobilnoj*/
  }

  /*samo za slike i text nije za mobilnu*/
  .contianer_wrapper_grid__2d{
    display: grid;
    grid-template-columns: 50% 50%;
    gap:40px;
    margin-top: -40px;
  }

  .contianer_wrapper_grid__2e{
    display: grid;
    grid-template-columns: 70% 30%;
    /*padding: 10px;*/
    gap:10px;
    margin-top: -40px;
  }

/*samo za combo*/
  .contianer_wrapper_grid__4{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    /*padding: 10px;*/
    gap:40px;
    margin-top: -40px;
  }


  /*samo za combo*/
  .contianer_wrapper_grid__6{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    /*padding: 10px;*/
    gap:40px;
    /*margin-top: -40px;*/
  }
  
  .element_1 {
   /* background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
  }

  .element_1_white{
    background-color: white;
    z-index: 100;
  }

  .element_2 {
    /*background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
    grid-column: 2/2;
  }

  .element_3 {
   /* background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
    grid-column: 1 / span 2;
  }

  .element_3 picture img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }


  .element_3 img {
    position: relative;
    right: 0;
    width: 100%;
  }

/*special za text*/
  .element_1b {
    grid-column: 1 / span 2;
  }

  .element_4 {
    grid-column: 3 / span 3;
    position: relative;
    right: 0;
    width: 100%;
  }


  .element_5 {
    grid-column: 1 / span 1;
    position: relative;
    right: 0;
  }

  .element_5 picture img{
     width: 80%;
     height: 80%;
  }



  .element_6 {
    grid-column: 2 / span 1;
    position: relative;
    right: 0;
  }


  /*special for 6*/
  .element_X6_1 {
    /*background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
    grid-column: 1 / span 3;
  }

  .element_X6_2 {
    /*background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);*/
    grid-column: 4 / span 3;
  }


    /*special for 2*/
    .element_M_1 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 1;
    }
  
    .element_M_2 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 1;
    }

    /*hidden*/
    .element_M2_space_1{
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 1;
      grid-row: 2 / span 1;
    }


    .element_M_3 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 1;
    }


    .element_M_4 {
     /* background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 1 / span 1;
    }


    .element_M_5 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 2 / span 1;
      grid-row: 1 / span 3;
    }


    .element_M_5a {
      /*background-color: rgba(24, 5, 66, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 2;
      grid-row: 3;
    }
    
    .element_M_6 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 2;
      grid-row: 1;
    }



    .velvet_item_1 {
      grid-column: 1;
      grid-row: 1 / span 1;
    }
    
    .velvet_item_2 {
      grid-column: 1;
      grid-row: 2 / span 3;
    }
    
    .velvet_item_3 {
      grid-column: 2;
      grid-row: 1 / span 3;
    }
    
    .velvet_item_4 {
      grid-column: 2;
      grid-row: 4 / span 3;
      text-align: left;
    }


    .velvet_item_1 {
      grid-column: 1;
      grid-row: 1 / span 1;
    }

    .velvet2_item_1{
      grid-column: 1;
    }

    .velvet2_item_2{
      grid-column: 2;
      grid-row: 1 / span 3;
    }

    .velvet2_item_3{
      grid-column: 1;
    }
    
   

  



        /*hidden*/
        .element_M2_space_2{
          /*background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);*/
          grid-column: 2;
          grid-row: 2 / span 1;

        }
        .element_M2_space_3{
          /*background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);*/
          grid-column: 2;
          grid-row: 3 / span 3;

        }
        .element_M2_space_4{
         /* background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);*/
          grid-column: 2;
          grid-row: 4 / span 3;

        }
        .element_M2_space_5{
          /*background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);*/
          grid-column: 2;
          grid-row: 5 / span 3;
        }

        .element_M2_space_5X{
          /*background-color: rgba(255, 255, 255, 0.8);
          border: 1px solid rgba(0, 0, 0, 0.8);*/
          grid-column: 1;
          width: 250px;
        }



    .element_M_6 {
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 2 / span 1;
      grid-row: 3 / span 2;

    }



    .element_W_1{
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(0, 0, 0, 0.8);*/
      grid-column: 2 /span 2;
    }



    .mobile_wrap {
      padding: 10px 10px 0 10px;
      margin: auto;
      width: 100%;
      text-align: center;
    }

    .mobile_wrap_fullWidth {
      padding-top: 10px;
      margin: auto;
      width: 100%;
      text-align: center;
    }

    .full_Width_All_element{
      padding: 10px 10px 0 10px;
      padding-top: 10px;
      margin: auto;
      width: 100%;
      text-align: center;
    }


     .full_Width_All_element_9{
      padding-top: 10px;
      margin: auto;
      width: 100%;
      text-align: center;
  
    }



/*--------------------------TOOL AND HACKS---------------------*/
#second_velvet{
  margin-top: 50px;
}


  


 
 /*-----------------------------------------------------------*/

@media (min-width: 1920px){
  .element_S_1 img{
    width:61%; 
    height:80%; 
  }
}



  @media (min-width: 1366px) {
    #dance_q1_desktop_2 {
      display: none;
      visibility: hidden;
     }
   }


   @media (min-width: 1024px) {
    .contianer_wrapper_grid__2a {
     padding-top: 20px;
    }
   }

 /*-----------------------------------------------------------*/

 @media (min-width: 1024px) and (max-width: 1366px) {
  .contianer_wrapper_grid__3b{
    grid-template-columns: 20% auto 20%;
   }

   .contianer_wrapper_grid__3c{
    grid-template-columns: 10% auto 10%;
  }

  .element_M_4 {
    grid-column: 1 / span 2;
    margin-top: -7%;
    width: 80%;
  }
 }
 
@media (min-width: 769px) and (max-width: 1024px) {

 .element_up_relative_1 {
    display: block;
    position: relative;
    margin-top:-100px;
 }


 .element_down_abs_1 {
    display: block;
    position: absolute;
    margin-top: 200px;
 }

 .element_down_relative_1 {
    display: block;
    position: relative;
    margin-top: 100px;
 }

 .element_down_relative_2 {
    display: block;
    position: relative;
    /*margin-top: 100px;*/
    margin-top: 67%;
 }

        @media (min-width: 923px) and (max-width: 1023px) {
            .element_down_relative_2 {
                margin-top: 32%;
            }
        }

        .contianer_wrapper_grid__2b{
          margin-top: -73px;
        }

    .contianer_wrapper_grid__3b{
      grid-template-columns: 10% auto 10%;
     }
  
     .contianer_wrapper_grid__3c{
      grid-template-columns: 5% auto 5%;
    }

 

}

/*-----------------mobile stuff for grid only------------------------*/
/*@media (max-width: 768px) {*/
    @media (min-width: 768px) and (max-width: 1023px) {

    .contianer_wrapper_grid__3 {
        display: block;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        grid-auto-flow: row dense;
    }

    .contianer_wrapper_grid__2{
        display: block;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        grid-auto-flow: row dense;
    }

    .element_1{
        padding-top: 20px;
    }
    .element_2{
        padding-top: 20px;
    }

    .element_2 .intro__content__wrapper{
        padding-top: 20px;
    }
    .element_M2_space_5X{
          width: 150px;
        }

        .element_M_4 {
          grid-column: 1 / span 2;
          margin-top: -4%;
          width: 70%;
        }

}
/*---------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1366px) {
    .element_5 picture img{
        width: 50%;
        height: 50%;
        padding-top: 15px;
     }

     .contianer_wrapper_grid__2 .pinFix_up__2{
        margin-top: 0%;
     }

     #dancing_q .element_1 {
        grid-column: 1 / span 2;
        width: 70%;
     }

     .element_S_1 img {
      width: 45%;
      height: 86%;
      }

      .element_S_3_hidden {
        visibility: hidden;
        display: none;
      }

      .element_S_2_hidden {
        visibility: hidden;
        display: none;
      }

   

    
     #dance_q1_desktop_1 {
      display: none;
      visibility: hidden;
     }
   
    
     #dance_q1_desktop_2 {
      display: block;
      visibility: visible;
      padding: 0 0 40px 0;
     }


     .velvet_item_1 {
      grid-column: 1 / span 2;
      grid-row: 1 / span 1;
    }
    
    .velvet_item_2 {
      grid-column: 1;
      grid-row: 2 / span 3;
    }
    
    .velvet_item_3 {
      grid-column: 2;
      grid-row: 2 / span 3;
    }
    
    .velvet_item_4 {
      grid-column: 1 / span 2;
      grid-row: 5 / span 1;
    }
    
}

  @media (min-width: 768px) and (max-width: 1025px) {
      .element_M_5 {
        grid-row: 1 / span 2;
        height: 70%;
    }
  }



/*(min-width: 360px) and  --izbaćen*/
@media  (max-width: 767px) {
 
    .contianer_wrapper_grid__2{
        display: block;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        grid-auto-flow: row dense;
        /*margin-top: 10px;*/
    }


    .contianer_wrapper_grid__2b{
        display: block;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        grid-auto-flow: row dense;
    }

    /*samo za combo*/
    .contianer_wrapper_grid__4{
        display: block;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-content: center;
        grid-auto-flow: row dense;
      }

      .segment  .contianer_wrapper_grid__4{
        padding-left: 10px;
        padding-right: 10px;
      }


      .element_1{
        padding-top: 20px;
        }
        .element_2{
            padding-top: 20px;
        }

    .element_2 .intro__content__wrapper{
        padding-top: 20px;
    }

      .contianer_wrapper_grid__2c{
        grid-template-columns: 1fr 1fr;
       }

      .element_1__postition_1__swap{
        grid-row: 2 / 2;
      }

      #dance_q1_desktop_2 {
        display: none;
        visibility: hidden;
       }

       .full_Width_All_element{
        padding: 10px 0px 0 0px;
       }

       #orangeMobile {
        margin-top: -10px;
      }

      #velvetMobile {
        margin-top: 10px;
      }

      #second_velvet{
        margin-top: 10px;
      }

      .contianer_wrapper_grid__3b{
        grid-template-columns: 10% auto 10%;
       }
    
       .contianer_wrapper_grid__3c{
        grid-template-columns: 2% auto 2%;
      }


      .dancing_q{
        padding-top: 70px;
      }

    }
