/*  Plugin: imgFlip (Toggle View Flip/Mirror Image)
 *   Frameworks: jQuery 3.3.1
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */
/* File: imgflip.css */
/* Horizontal and Vertical Flip Buttons */ 
.btn-flip-h,
.btn-flip-v{
   padding: 5px;
   background: rgba(0, 0, 0, 0.4);
   border: 0;
   outline: 0;
   color: #fff;
   width: 32px;
   height: 32px;
   border-radius: 4px;
  margin: 0 3px;
}
/* Adding The Material Design Iconic Font to buttons*/
.btn-flip-h:before,
.btn-flip-v:before{
   font-family: Material-Design-Iconic-Font;
   font-size: 18px;
   font-weight: 300;
   text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
   transition: .3s;
 -webkit-transition: .3s;
 -moz-transition: .3s;
} 
.btn-flip-h:before{
 content: '\f375'; 
}

.btn-flip-v:before{
 content: '\f251'; 
}
/* Buttons Hover style */
.btn-flip-h:hover,
.btn-flip-v:hover{
   background: rgba(0, 0, 0, 0.9);
}
/* Style when flip button will be active*/
.btn-flip-v.active,
.btn-flip-h.active{
   background: rgba(0, 0, 0, 1);
}

/* Conatainer for flip Buttons */
.button-board{
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: -40px;
    position: absolute;
    display: block;
    box-sizing: border-box;
    padding: 0;
    text-align: left;
}

/* Status bar looking and styles */
.flip-status{
 background: rgba(0, 0, 0, 0.34);
  color: #fff;
  text-shadow: 1px 0.4px #222;
  font-size: 12px;
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px;
  z-index: 10;
  display: none;
}

/* The image container */
.img-container{
   display: block;
   margin: 10px;
   text-align: center;
   position: relative;
   box-shadow: 2px 1px 6px rgba(0, 0, 0, 0.5);
   overflow: hidden;
   background: -webkit-linear-gradient(to right, #33001b, #ff0084);
	background: linear-gradient(to right, #33001b, #ff0084);
   box-sizing: border-box;
}

/* Making Container Image Responsive */
.img-container img{
    width: 100%;
    height: auto;
   transition: .4s;
   -webkit-transition: .4s;
-moz-transition: .4s;
}