/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 23, 2020, 7:44:43 PM
    Author     : kimbe_000
*/
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/


    .recommend {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin: auto;
        flex-wrap: wrap;
    }
    .recommend.lift{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
        color: #352E7B;
        max-width:40%;
        flex-wrap: nowrap;
    }
    .lift>h4{
        margin-top: 0px;
        margin-bottom: 0px;
         color: #352E7B;
    }
    .lift>ul{
        margin-top: 1px;        
        margin-bottom: 5px;
        padding-bottom: 10px;
    }
    .lift a:visited {
       color: #726caf; 
    }
    
    .lift a:link {
        color: #352E7B;
    }
    
    .lift a:hover{
        background-color: #352E7B;
        color: #CCC9E8;
    }
    .recommend.rift{
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
               max-width: 35%;            
               padding-right:5%;
               flex-wrap: nowrap;
    }
    .rift>a{
        text-decoration: none;
    }
    .booty{
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
         -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: auto;  
     }
    .booty>div{
        background-color: #FFFFFF;
        padding: 2px;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-line-pack: space-around;
            align-content: space-around;
        color: #352E7B;
       max-width: 300px;
       width: auto;
    }
       
        .booty>div>a:hover{
            background-color: #CCC9E8;
            opacity: 70%;  
        }
        .booty>div>a>img{
          max-height: 250px;
          height: auto;
            padding: 4px;
            width: 100%;
        }
    .booty>div img{
       max-height: 300px;
       width:auto;
    }
    
    .ingredients>a:visited {
       color: #726caf; 
    }
    
    .ingredients>a:link {
        color: #352E7B;
    }
    
    .ingredients>a:hover{
        background-color: #352E7B;
        color: #CCC9E8;
    }
    @media screen and (max-width: 1200px){
    .recommend{
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
               justify-content: center;
               margin: auto;
       width: auto;
        
    }
    .lift{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-line-pack: center;
            align-content: center;
        -webkit-box-flex:1;
            -ms-flex-positive:1;
                flex-grow:1;
        max-width:95%
    }
    }
    @media screen and (max-width: 700px){
       .booty{
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: auto;  
     } 
      .recommend{
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       width: auto;
        
    }
    .lift {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        max-width:95%
    }
    }