body, html {
    height: 100%;
    overflow-x: hidden;
}

/*________________________in.gr________________________*/
.site-header {
    border-bottom: 3px solid #e60000;
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 70px;
  }
  
  .ingr {
    display: block;
    position: relative;
    height: 80%;
  }
  .ingr > img {
    content: url(imgs/ingr_logo.png);
    max-height: 100%;
  }
  
  .social_chunk {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
  }
  
  #fb_logo {
    display: block;
    position: relative;
    height: 30%;
    margin-right: 14px;
  }
  #fb_logo > img {
    content: url(imgs/fb_logo.png);
    max-height: 100%;
  }
  
  #x_logo {
    display: block;
    position: relative;
    height: 30%;
    margin-right: 14px;
  }
  #x_logo > img {
    content: url(imgs/x_logo.png);
    max-height: 100%;
  }
  
  #ig_logo {
    display: block;
    position: relative;
    height: 30%;
    margin-right: 14px;
  }
  #ig_logo > img {
    content: url(imgs/ig_logo.png);
    max-height: 100%;
  }
  
  /*________________________in.gr________________________*/
  /*___________________________________________________*/




        /* Extra small devices (portrait phones, less than 576px)
         No media query since this is the default in Bootstrap*/
        
        /*Small devices (landscape phones, 576px and up)*/

        @media (max-width: 575.98px) {
            .col-xs-6{
                max-width: 50%;
                padding: 0.4rem;
            }
        }
        
                
        @media (min-width: 1px) {

            #hrwn_header > img {
                content: url("./imgs/vibes-mob-v2.jpg?v=1");
                max-width: 100vw;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }

           
           
           /*SNOW CSS*/
           canvas{
                width: 100%;
                height: 100%;
                position: fixed;
                z-index: -1;
                overflow: hidden;
            }
           
           /*SNOW CSS END*/       
        
                      
           
           
            body {
            background-color: #a30011;
            }

            

            .article_text{
                z-index: 1;                 
            }

            .down_arrow {
                display: none;                
                position: relative;
                top: 90vh;                
                left: 0;
                right: 0;
                color: #fd6f28;
                height: 50px;
                width: 50px;
            }
            
            .mask_img {
                position: absolute;
                bottom: 0;
                height: 30%;
                opacity: 0.8;
            }  

            .custom_card {
                position: inherit;
                height: 40vh;
                width: 100%;                
                background-position: center;
                background-repeat: no-repeat;
                background-size:cover;                
                border-radius: 15px;
                border-style: solid;
                border-width: 2px;
                border-color: aliceblue;
                overflow: hidden;
                
            }
            

            .custom_card_container {
                position: relative;                
                bottom: 0%;                             
            }

            .custom_card_title {
                font-family: 'Syne', sans-serif;
                position: absolute;
                width: 100%;
                height: 6rem;
                color: aliceblue;
                font-size: 0.9rem;
                padding-top: 26vh;
                padding-left: 1vw;
                z-index: 1;
                transition: all 1s ease;
                opacity: 1;
            }

            .custom_card_text {
                font-family: 'Syne', sans-serif;
                position:absolute;
                width: 100%;
                height: 6rem;
                color: aliceblue;
                font-size: 0.9rem;
                padding: 1rem;
                padding-top: 30%;
                z-index: 1;
                opacity: 0;
                transition: all 1s ease;
            }      

            .custom_card_textbgcolor {
                position:absolute;
                background-color: #770000;               
                height: 100vh;
                width: 100%;
                opacity: 0.8;
                margin-top: 24vh;
                transition: all 1s ease;
            }

            .custom_card_img {
                max-width: 100%;               
            }


            /*
            .category_label {
                position: relative;
                background-color: aliceblue;
                padding: 8px;
                border-radius: 15px;                
                width: 9rem;
                font-family: 'Syne', sans-serif;
                font-weight: 800;
                margin-left: 0.7rem;
                margin-top: 1rem;
            }
            */
            
            .category_label {                
                background-color: aliceblue;                
                font-family: 'Syne', sans-serif;
                font-weight: 800;
                max-width: 17rem;
                border-radius: 15px;
                margin-left: 1rem;
               
            }


        }
        
        /* Medium devices (tablets, 768px and up)*/
        @media (min-width: 768px) {      

            #hrwn_header {
            
            }

            #hrwn_header > img {
                content: url("./imgs/vibes-desk-v2.jpg?v=1");
                max-width: 100vw;
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        
           html {
                font-size: 1.2rem;
            }
           
            .mask {
                display:block;
                background-color: rgba(0, 0, 0, 0.6); width: 20vw; height: 30vh;
                border-radius: 25px;
            }

            .down_arrow {              
                position: relative;
                top: 90vh;                
                left: 0;
                right: 0;
                color: #fd6f28;
                height: 100px;
                width: 100px;
            }
            
          
               
          
        }
        
        /* Large devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            html {
                font-size: 1.4rem;
            }
         
            .myhero {      
                width: 100vw;
                height: 36%;                                
            }  

            .custom_card:hover .custom_card_text {
                opacity: 1;
            }

            .custom_card:hover .custom_card_title {
                opacity: 0;
            }

            .custom_card:hover .custom_card_textbgcolor {
                margin-top: 0vh;           
            
            }

        }
        
        /* Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1200px) {
           
        }
        
         /* (large desktops, 1400px and up)*/
        @media (min-width: 1400px) {
            .myhero {            
            width: 100vw;
            height: 56%;
                    }  
             
        }

        /* Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1920px) {
           /*Change the actual image into a bigger one dimensions-wise*/
        }