/* xl - DESKTOP STYLES */
/*
@mixin fancyImageStyle01($transition: 'default', $shadowEffect: 'default', $effectStyle: 'default'){
  // fancy image style with two triangle shaped pseudo elements on corners 

  //transtion 
  @if($transition =='default'){
      @include transition01(.5s);
  }@else if($transition =='custom'){
  
  }@else if($transition =='none'){
          
  }@else{
      @include transition01($transition);
  }//if
  
  //box shadow 
  @if($shadowEffect == 'default'){
      //default
      &:hover{
          @include boxShadow06;
      }//hover        
  }@else if($shadowEffect == 'shadow_01'){
      //shadow effect 01
      &:hover{
          @include boxShadow06;
      }//hover        
  }@else if($shadowEffect == 'shadow_02'){
      //shadow effect 02
      @include boxShadow01;
      &:hover{
          @include boxShadow06;
      }//hover         
  }@else if($shadowEffect == 'shadow_03'){
      //shadow effect 03
      @include boxShadow06;
      &:hover{
          @include boxShadow08;
      }//hover          
  }//if    
  
  //style
  @if($effectStyle == 'default'){
      
  }@else if($effectStyle == 'style_01'){
      
  }@else if($effectStyle == 'style_02'){
      
  }@else if($effectStyle == 'style_03'){
      padding: 10px;
  }@else{

  }//if    
      
  position: relative;
  z-index: 2;
  
  
  &::after, &::before {
    
      //transtion 
      @if($transition =='default'){
          @include transition01(.5s);
      }@else if($transition =='custom'){

      }@else if($transition =='none'){

      }@else{
          @include transition01($transition);
      }//if   

      position: absolute;
      content: "";
      width: 100px;
      height: 100px;
      pointer-events: none;
      z-index: -1;
  }//after, before 
  
  &::before {
      //style
      @if($effectStyle == 'default'){
          left: -15px;
          top: -15px;
      }@else if($effectStyle == 'style_01'){
          left: -15px;
          top: -15px;
      }@else if($effectStyle == 'style_02'){
          left: 0;
          top: 0;
      }@else if($effectStyle == 'style_03'){
          left: 0;
          top: 0;
      }//if   
      
      background: rgba($ci01, .6);
      clip-path: polygon(100% 0, 0 0, 0 100%);
  }//before
  
  &::after {
      //style
      @if($effectStyle == 'default'){
          right: -15px;
          bottom: -15px;
      }@else if($effectStyle == 'style_01'){
          right: -15px;
          bottom: -15px;
      }@else if($effectStyle == 'style_02'){
          right: 0;
          bottom: 0;
      }@else if($effectStyle == 'style_03'){
          right: 0;
          bottom: 0;
      }//if           
      
      background: rgba($ci01, .8);
      clip-path: polygon(100% 0, 0 100%, 100% 100%);
  }//after    
  
  // assign class to images you want to get hover effect 
  &.img_hover_effect_01{
      
      &:hover{
          
          &::before {
              //style
              @if($effectStyle == 'default'){
                  left: -25px;
                  top: -25px;
              }@else if($effectStyle == 'style_01'){
                  left: -25px;
                  top: -25px;
              }@else if($effectStyle == 'style_02'){
                  left: -25px;
                  top: -25px;
              }@else if($effectStyle == 'style_03'){
                  left: -20px;
                  top: -20px;
              }//if               
              
              background: rgba($ci01, .8);
              //clip-path: polygon(100% 0, 0 0, 0 100%);
          }//before

          &::after {
      //style
              @if($effectStyle == 'default'){
                  right: -25px;
                  bottom: -25px;
              }@else if($effectStyle == 'style_01'){
                  right: -25px;
                  bottom: -25px;
              }@else if($effectStyle == 'style_02'){
                  right: -25px;
                  bottom: -25px;
              }@else if($effectStyle == 'style_03'){
                  right: -20px;
                  bottom: -20px;
              }//if                
             
              background: rgba($ci01, 1);
              //clip-path: polygon(100% 0, 0 100%, 100% 100%);
          }//after             
          
      }//hover
              
  }//img_hover_animation_01
  
}//fancyImageStyle01
//@include fancyImageStyle01; 
//@include fancyImageStyle01('default', 'default', 'default'); 
//@include fancyImageStyle01(.3s, 'shadow_02', 'style_01'); 
*/
/*
@mixin fancyImageStyle03($transition: 'default', $shadowEffect: 'default', $overlayEffect: 'default'){
 	// fancy image style with hover effect (image intense kiev)
    // work in progress, not all parameter are being used here yet

    //transtion 
    @if($transition =='default'){
        @include transition01(.5s);
    }@else if($transition =='custom'){

    }@else if($transition =='none'){

    }@else{
        @include transition01($transition);
    }//if
    
    position: relative; 
	overflow: hidden !important; 
    
    //overlay
    &::after{
 
        //transtion 
        @if($transition =='default'){
            @include transition01(.5s);
        }@else if($transition =='custom'){

        }@else if($transition =='none'){

        }@else{
            @include transition01($transition);
        }//if     
        
        position: absolute; 
        content: ''; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: rgba($ci03, .2) ; 
        //opacity: 0; 
        // z-index: 1000; 
        pointer-events: none; 
    }//after

    //design element 
    &::before{
   
        content: "";
        position: absolute; 
        z-index: 5; 
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%; 
        height: 100%; 
        // width: 700%; 
        //height: 700%; 
        
        //opacity: 0; 
        pointer-events: none; 
        
        //background: rgba($ci01, .8) ; 
        //background: hsla(0,0%,100%,.5);
        background: rgba($ci01, .4);
        
        
        -webkit-transition: -webkit-transform .6s;
        transition: -webkit-transform .6s;
        -o-transition: transform .6s;
        transition: transform .6s;
        transition: transform .6s,-webkit-transform .6s;
        
        -webkit-transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,-90%,0);
        transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,-90%,0);
        // //transform: scaleX(0) rotate(90deg);
        // transform: rotate(45deg) translateX(550px);         
        
    } //before               
    

    // assign class to images you want to get hover effect 
    &.img_hover_effect_01{

        &:hover{
			//overlay	
            &::after{
                background: rgba($ci03, .4) ; 
            }//after
			
            //design element 
            &::before{
                //transform: scaleX(1) rotate(90deg);
                //transform: rotate(45deg) translateX(-500px); 
                -webkit-transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,90%,0);
                //-webkit-transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,100%,0);   
                //-webkit-transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,120%,0); //disappear 
                transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,90%,0); 
                //transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,100%,0);      
                //transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,120%,0);  //disappear
                background: rgba($ci01, .6);
            }//before   

        }//hover 

    }//img_hover_animation_01
  
}//fancyImageStyle03
//@include fancyImageStyle03; 
//@include fancyImageStyle03('default', 'default', 'default'); 
//@include fancyImageStyle03(.3s, 'shadow_02', 'overlay_01' ); 
*/
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sourceRoot%22%3A%22%2F%22%2C%22sources%22%3A%5B%22(stdin)%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3B%3BAAAA%3B%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */