/** COSMOS PRODUCT GRID **/

.cosmos-dtls-wrapper.f-col {
    width: 330px;
}

.cosmos-dtls-wrapper.f-col h2, .cosmos-dtls-wrapper.f-col h1 {
    margin: 0;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}

.product {
    width: 23%;
    height: 214px;
    text-align: center;
    margin-bottom: 30px;
    margin: 3px;
    position: relative;
}

.prd-img-container {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 5px;
    transition: .5s ease;
}

#product-list-grid {
    flex: 1;
    position: relative;
}

#cosmos {
     margin-top: 30px;
}

#cosmos .sub-header h2 {
    margin-bottom: 10px;
}

.tag-line h3 {
    margin-top: 0;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.cosmos-dtls-wrapper p img {
    position: relative;
    top: 3px;
    opacity: .85;
    width: 68px;
}

.prd-img-container img {
    width: 95%;
}

.prd-name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: .8em;
    line-height: 1.4em;
    color: #000;
    transition: .5s ease;
}

.side-logo {
    position: absolute;
    left: -33%;
    transform: rotate(-90deg);
    top: 72%;
    opacity: .1;
}

.product:hover {
    box-shadow: 0 0 7px 2px #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
}

.product a {
    display: block;
    width: 100%;
    height: 100%;
    transition: .5s ease;
}

/**** PRODUCT HOVER EFFETS ****/
.product .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: .7s ease;
  opacity: 0;
  transform: scale(0.2);
  height: 100%;
}

/*.product:hover .overlay {
  opacity: 1;
  transform: scale(1);
}

.text {
  color: white;
  font-size: 1.8em;
  text-transform: capitalize;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.product:hover a {
    transform: scale(0.9);
}*/






/************************** MOBILE STYLES IN PORTRAIT ***********************************/


/********* TABLET PORTRAIT */
@media screen and (max-device-width: 768px) and (orientation: portrait){

    
    #cosmos {
        flex-wrap: wrap;
        margin-top: 0 !important;
    }


    .cosmos-dtls-wrapper.f-col{
        width: 40%;
    }

    .product {
        width: 31.33%;
        height: 160px;
        box-shadow: inset 0 0 11px 1px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        border-radius: 10px;
    }

    .prd-img-container {
        height: 115px;
    }

    .prd-img-container img {
            width: 80%;
    }
        
    .side-logo {
        left: -310px;
    }

    .side-logo img{
        width: 450px;
    }
}



/********* LARGE PHONE PORTRAIT */
@media screen and (max-device-width: 414px) and (orientation: portrait){

    
     .side-logo {
        display: none;
    }

    .product {
        width: 48%;
        height: 210px;
    }

    .cosmos-dtls-wrapper.f-col {
        width: 100%;
        margin-bottom: 20px;
    }
    
    .mid-bdr {
        display: none;
    }
    .prd-img-container {
        height: 75%;
        
    }

    .cosmos-dtls-wrapper p {
        margin-bottom: 0;
    }
    .cosmos-dtls-wrapper button {
        margin-top: 15px;
    }
    
    
}



/********* SMALL PHONE PORTRAIT */
@media screen and (max-device-width: 360px) and (orientation: portrait){

    
    .product {
        width: 47%;
        height: 160px;
    }
    
}


/************************** MOBILE STYLES IN LANDSCAPE ***********************************/


/********* TABLET LANDSCAPE *********/
@media screen and (max-device-width: 1024px) and (orientation: landscape){

    
     #cosmos {
        flex-wrap: wrap;
        margin-top: 0 !important;
    }

    
    .cosmos-dtls-wrapper.f-col{
        width: 40%;
    }

    .product {
        box-shadow: inset 0 0 11px 1px rgba(0, 0, 0, 0.38);
    }

    .product {
        width: 31.33%;
       height: 202px;
    }

    .prd-name {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .side-logo {
        left: -255px;
    }

    .side-logo img {
        width: 400px;
    }

    .prd-img-container {
        height: 75%;

    }

    .prd-img-container img {
        width: 85%;
    }




/********* LARGE PHONE LANDSCAPE *********/
@media screen and (max-device-width: 736px) and (orientation: landscape){

    
   .prd-name {
        padding: 0;
    }

    .product {
        height: 133px;
        font-size: .8em;
    }

    .prd-img-container img {
        width: 68%;
    }

    side-logo {
        display: none;
    }
    
}




/********* SMALL PHONE LANDSCAPE *********/
@media screen and (max-device-width: 640px) and (orientation: landscape){

    
    
}