/*******************************************************************
******                SO Framework: Sass System                ******
********************************************************************/

/* 1.BACK TOP TOP DEMO OPENCART
----------------------------------------------------- */

.back-to-top {
    cursor: pointer;
    background-color: #777;color: #fff;
    width: 45px;bottom: 50px;#{$right}:50px;padding: 5px 0;
    overflow: hidden; z-index: 40;position: fixed;display: inline;text-align: center;border-radius:3px;opacity:1;
    
    @include transition(all 0.5s ease-in-out 0s);
    @include transform(scale(1) );

    &.hidden-top {bottom: -100px;opacity:0;  @include transform(scale(0) );}
    &:hover{background-color:$background1;}
    i{font-size: 32px;display: block; line-height: 18px;}
    span{display: block; line-height: 18px;}

    @media (max-width: 991px){
      right: 10px;
      bottom: 10px;
    }
}

/* 2.SOCIAL ACCOUNTS (RIGHT FIXED PANEL)
----------------------------------------------------- */
.social-widgets {
    position:fixed;
    z-index:560;
    top:50%;
    height:0;
    width:0;
    #{$right} :0
}
.social-widgets .item, .social-widgets .items {
    margin:0;
    padding:0;
    list-style-type:none
}

.social-widgets .items {
    top:-100px;
    position:relative
}
.social-widgets .item {
    position:absolute;
    top:0;
    #{$left} : 120px
}
.social-widgets .active {
    z-index:100;
    #{$left} :-310px
}
.social-widgets .item-01, .social-widgets .item-02, .social-widgets .item-03, .social-widgets .item-04, .social-widgets .item-05, .social-widgets .item-06, .social-widgets .item-07, .social-widgets .item-08, .social-widgets .item-09 {
    #{$left} :0;
}
.social-widgets .item-01 {
    top:0;
    z-index:99
}
.social-widgets .item-02 {
    top:45px;
    z-index:98
}
.social-widgets .item-03 {
    top:90px;
    z-index:97
}
.social-widgets .item-04 {
    top:150px;
    z-index:96
}
.social-widgets .item-05 {
    top:200px;
    z-index:95
}

.social-widgets .tab-icon .fa{font-size:18px;}
.social-widgets .tab-icon {
    position:absolute;
    top:0;
    #{$left} :-45px;
    display:block;
    width:45px;
    height:45px;
    background:#fff;
    text-align:center;
    font-size:1.54em;
    line-height:45px;
}
.social-widgets .tab-icon:hover {
    text-decoration:none
}
.social-widgets .active .tab-icon {
    border-color:#E9E9E9;
    background:#fff
}
.social-widgets .facebook .tab-icon{
    background: #3b5998;
    background-clip: content-box;
    color: white;
}
.social-widgets .twitter .tab-icon{
    background: #07779a;
    background-clip: content-box;
    color: white;
}
.social-widgets .youtube .tab-icon{
    background: #DA2723;
    background-clip: content-box;
    color: white;
}
.social-widgets .tab-content {
    background:#fff;
    width:310px;
    padding:10px ;
}
.social-widgets .active .tab-content {
    box-shadow:0 0 4px rgba(0, 0, 0, .15)
}
.social-widgets .title {
    margin: side-values(-10px -10px 10px);
    padding: 0px 10px;
    background-color: #ccc;
    text-transform: uppercase;
    line-height: 45px;
    color: #000;
    font-weight: bold;
    h5{
        line-height: 45px;
        margin: 0;
    }
}
.social-widgets .facebook.active {
    #{$left} :-260px
}
.social-widgets .facebook .tab-content {
    width:260px
}
.social-widgets .twitter.active {
    #{$left} :-300px
}
.social-widgets .twitter .tab-content {
    width:300px
}
.social-widgets .twitter-widget {
    padding-top:10px
}
.social-widgets .youtube.active {
    #{$left} :-450px
}
.social-widgets .youtube .tab-content {
    width:450px;
}
.social-widgets .loading {
    min-height:200px;
    position:relative;
    z-index: 1000;
}
.social-widgets .loading img.ajaxloader {
    position:absolute;
    top:45%;
    #{$left} :45%;
    width:32px;
    height:32px
}

/* 3.TOP PANEL (RIGHT FIXED PANEL)
----------------------------------------------------- */
// @include breakpoint(lg){
// .navbar-compact { position: fixed;width:100%;    background: #fff; z-index:900;box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
//     @include   transition(all 0.5s ease-in-out);
//     &.hidden-menu{@include transform(translate(0,-100%));}
// }
// .navbar-compact .compact-hidden{display: none !important;}
// .navbar-compact .header-center{padding: 20px 0; transition: 0.3s all ease 0s;}
// .navbar-compact .header-bottom{margin:0 !important;}
// .navbar-switcher {
//     text-align: center;
//     float: $right;
//     display: none;
//     width: 45px;
//     height: 45px;
//     margin-bottom: -47px;
//     background: $background1!important;
//     padding: 6px 7px;
//     border-radius: 0 0 3px 3px;
//     cursor: pointer;
//     color: #fff;
// }
// .navbar-switcher .i-active, .navbar-switcher.active .i-inactive {display:none}
// .navbar-switcher.active .i-active ,
// .navbar-switcher .fa-caret-down{display:inline;font-size:1.8em;line-height:1.5em}
// .navbar-compact {
//     &.type_1 ,&.type_2{
//         .sidebar-menu {display: none;}
//         .header-bottom-right{margin: 0;padding: 0 15px;width:100%;}
//     }
// } 
// header .navbar-switcher{display: block;}
// }
/* 4.LARY LOADER
--------------------------------------- */
.mfp-iframe-scaler iframe{background: white url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;}
.lazy {display: block;position: relative;  overflow: hidden; background: transparent url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;}
.loadeding{background: white url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;;height: 100%; position: absolute;z-index: 2;top: 0;left: 0;right: 0;opacity: 1;}
.loaded .loadeding{background: none;height:auto;opacity: 0;display: none;}
@media (min-width: 1200px) {
	.lazy.lazy-loaded {background: none;height:auto;}
	.lazy img {transition: 1s all ease;opacity: 0;-webkit-backface-visibility: hidden;}
	.lazy.lazy-loaded img { opacity: 1; }
}


/* Overlay pattern 
--------------------------------------- */
body.no-bgbody{background-image:none;}

$columns: 45;
@for $i from 1 through $columns {
  .pattern-#{$i} {
    background-image: url('#{$base-url-theme}patterns/#{$i}.png');
  }
}

/* Preloading Screen
--------------------------------------- */

// #loader-wrapper {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
//   z-index: 1000;
// }

//   #loader {
//     display: block;
//     position: relative;
//     left: 50%;
//     top: 50%;
//     width: 150px;
//     height: 150px;
//     margin: -75px 0 0 -75px;
//     border-radius: 50%;
//     border: 3px solid transparent;
//     border-top-color: #3498db;
//     z-index: 1001;
//     animation: spin 2s linear infinite;
    
//     &:before {
//       content: "";
//       position: absolute;
//       top: 5px;
//       left: 5px;
//       right: 5px;
//       bottom: 5px;
//       border-radius: 50%;
//       border: 3px solid transparent;
//       border-top-color: #e74c3c;
//       animation: spin 3s linear infinite;
//     }
    
//     &:after {
//       content: "";
//       position: absolute;
//       top: 15px;
//       right: 15px;
//       left: 15px;
//       bottom: 15px;
//       border-radius: 50%;
//       border: 3px solid transparent;
//       border-top-color: #f9c922;
//       animation: spin 1.5s linear infinite;
//     }
//   }

// #loader-wrapper .loader-section {
//   position: fixed;
//   top: 0;
//   width: 50%;
//   height: 100%;
//   background: rgba(255,255,255,0.6);
//   z-index: 1000;
//   transform: translateX(0);
// }

//   #loader-wrapper .loader-section.section-left {
//     left: 0;
//   }

//   #loader-wrapper .loader-section.section-right {
//     right: 0;
//   }

// //Loading Logo
// .ip-header {
//     position: fixed;
//     top: 0;
//     z-index: 99999;
//     min-height: 480px;
//     width: 100%;
//     height: 100%;
//     background: #ffffff;
//     h1 { margin: 0;}
//     .ip-inner {display: block;margin: 0 auto;}
//     .ip-logo {position: absolute;top: 40%;text-align: center;
// 	   a {display: inline-block;}    
//     }
    
//     .ip-loader svg path {fill: none;stroke-width: 6;}
//     .ip-loader svg path.ip-loader-circlebg {stroke: #ddd;}
//     .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s;transition: stroke-dashoffset 0.2s;stroke: #df1f26;}
// }


// .ip-logo,
// .ip-loader {position: absolute;left: 0;width: 100%;opacity: 0;cursor: default;pointer-events: none;}
// .ip-loader {top: 46%;}


// .loading .ip-logo,
// .loading .ip-loader {
//   opacity: 1;
//   -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
//   animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
// }

// .loading .ip-loader {
//   -webkit-animation-delay: 0.2s;
//   animation-delay: 0.2s;
// }

// .loaded .ip-loader {
//   -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
//   animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
// }
// .loaded .ip-header {
//   -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
//   animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
// }
// .loaded .ip-logo,
// .loaded .ip-loader {
//   opacity: 1;
// }
// .loaded .ip-logo {
//   display: none;
// }

// Animations
@keyframes spin {
  0%   {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// Loaded
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}



/* @group Banners hover effect */
.banners-effect-1 .banners > div {
	img { @include transition(all 0.2s ease-in);
		&:hover{opacity: 0.8;}
	}
	
}

.banners-effect-2 .banners > div a{display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{left: 0;opacity: 1;}
	}	
	&:before,&:after{
		background-color: rgba(255, 255, 255, 0.4);
		display: block;
		width: 100%;
		height: 100%;
		left: -100%;
		opacity: 0;
		filter: alpha(opacity=0);
		position: absolute;
		top: 0;
		@include transition(all 0.3s ease-in);
		content: "";
		z-index: 1;
	}
	
}

.banners-effect-3 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{border: 0 solid rgba(0, 0, 0, 0.7);opacity: 0;filter: alpha(opacity=0);}
	}	
	&:before,&:after{
		border: 50px solid transparent;
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-right-radius: 50px;
		border-bottom-left-radius: 50px;
		box-sizing: border-box;
		cursor: pointer;
		display: inline-block;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		position: absolute;
		top: 0;
		content: "";
		opacity: 1;
		filter: alpha(opacity=100);
		width: 100px;
		height: 100px;
		@include transform(scale(7));
		@include transition(all 0.4s ease-in-out);
		
		visibility: visible;
		z-index: 1;
	}
}

.banners-effect-4 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			opacity: 1;
			
			@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1));
		}
	}	
	&:before,&:after{
		 border-bottom: 50px solid rgba(0, 0, 0, 0.2);
		border-top: 50px solid rgba(0, 0, 0, 0.2);
		content: "";
		height: 100%;
		left: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		position: absolute;
		top: 0;
		
		transform-origin: 50% 50% 0;
		width: 100%;
		@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1));
		@include transition(opacity 0.4s ease 0s, transform 0.35s ease 0s);
		
		visibility: visible;
		z-index: 1;
	}
}

.banners-effect-5 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			opacity: 0;
               filter: alpha(opacity=0);
               border: 0 double rgba(255, 255, 255, 0.7);
               visibility: hidden;
		}
	}	
	&:before,&:after{
		 bottom: 0;
		content: "";
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		
		z-index: 1;
		border: 200px double transparent;
		opacity: 1;
		filter: alpha(opacity=100);
		visibility: visible;
		
		@include transition(all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s);
		
		
	}
}


.banners-effect-6 .banners > div a {
     display: inline-block;
	vertical-align: top;
     position: relative;
     overflow: hidden;
     background: #000;
}

    
     .banners-effect-6 .banners > div a img {
          backface-visibility: hidden;
          opacity: 1;
          filter: alpha(opacity=100);
          -webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
          -o-transition: opacity 1s ease 0s, transform 1s ease 0s;
          transition: opacity 1s ease 0s, transform 1s ease 0s;
     }
     
          
          .banners-effect-6 .banners > div a:hover img {
               opacity: 0.8;
               filter: alpha(opacity=80);
               transform: scale3d(1.1, 1.1, 1);
          }
          

.banners-effect-7 .banners > div a {
     display: block;
     position: relative;
     overflow: hidden;
}

     
     .banners-effect-7 .banners > div a:before {
          position: absolute;
          background: rgba(0, 0, 0, 0.3);
          width: 0;
          top: 0;
          left: 50%;
          content: "";
          transition: all 0.3s ease-in-out 0s;
     }
     
          
          .banners-effect-7 .banners > div a:hover:before {
               width: 100%;
               left: 0;
               top: 0;
               height: 100%;
          }
          

.banners-effect-8 .banners > div a {
     display: inline-block;
     position: relative;
     overflow: hidden;
     background: #000;
	vertical-align: top;
}
     
     .banners-effect-8 .banners > div a:before,
     .banners-effect-8 .banners > div a:after {
          bottom: 20px;
          content: "";
          left: 20px;
          opacity: 0;
          position: absolute;
          right: 20px;
          top: 20px;
          -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
          z-index: 1;
     }
     
          .banners-effect-8 .banners > div a:before {
               border-bottom: 1px solid #ffffff;
               border-top: 1px solid #ffffff;
               -webkit-transform: scale(0, 1);
               -ms-transform: scale(0, 1);
               -o-transform: scale(0, 1);
               transform: scale(0, 1);
          }
          
          .banners-effect-8 .banners > div a:after {
               border-left: 1px solid #ffffff;
               border-right: 1px solid #ffffff;
               -webkit-transform: scale(1, 0);
               -ms-transform: scale(1, 0);
               -o-transform: scale(1, 0);
               transform: scale(1, 0);
          }
     
          .banners-effect-8 .banners > div img {
               opacity: 1;
			width:100%;
               filter: alpha(opacity=100);
               -webkit-transition: opacity 0.35s ease 0s;
               -o-transition: opacity 0.35s ease 0s;
               transition: opacity 0.35s ease 0s;
          }
          
               .banners-effect-8 .banners > div a:hover:before,
               .banners-effect-8 .banners > div a:hover:after {
                    opacity: 1;
                    filter: alpha(opacity=100);
                    -webkit-transform: scale(1);
                    -ms-transform: scale(1);
                    -o-transform: scale(1);
                    transform: scale(1);
               }
               
               .banners-effect-8 .banners > div a:hover img {
                    opacity: 0.5;
                    filter: alpha(opacity=50);
               }


.banners-effect-9 .banners > div a {
     display: block;
     position: relative;
     z-index: 10;
}
     

     .banners-effect-9 .banners > div a:before {
     	position: absolute;
     	top: 0;
     	left: 0;
     	z-index: 0;
     	width: 100%;
     	height: 100%;
     	background: #000;
     	content: '';
     	-webkit-transition: opacity 0.35s;
     	transition: opacity 0.35s;
     	box-shadow: 0 3px 30px rgba(0,0,0,0.2);
     	opacity: 0;
     }
     
          .banners-effect-9 .banners > div a:hover:before {
               opacity: 1;
          }

     .banners-effect-9 .banners > div a img {
          opacity: 1;
          -webkit-transition: -webkit-transform 0.35s;
          transition: transform 0.35s;
          -webkit-transform: perspective(1000px) translate3d(0,0,0);
          transform: perspective(1000px) translate3d(0,0,0);
     }
     
          .banners-effect-9 .banners > div a:hover img {
               -webkit-transform: perspective(1000px) translate3d(0,0,21px);
               transform: perspective(1000px) translate3d(0,0,21px);
          }
          
.banners-effect-10 .banners > div a {
     display: block;
     position: relative;
     overflow: hidden;
}
     
     .banners-effect-10 .banners > div a:before {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 100%;
     	height: 100%;
     	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
     	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
     	content: '';
     	opacity: 0;
     	-webkit-transform: translate3d(0,50%,0);
     	transform: translate3d(0,50%,0);
     	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
     	transition: opacity 0.35s, transform 0.35s;
     }
     
          .banners-effect-10 .banners > div a:hover:before {
               opacity: 1;
               -webkit-transform: translate3d(0,0,0);
               transform: translate3d(0,0,0);
          }


.banners-effect-11 .banners > div a {display: block;position: relative;overflow: hidden;
	&:hover{
		&:before,&:after{
			width:100%;height: 100%;
		}
	}
	
	&:before,&:after{
		 background-color: rgba(0, 0, 0, 0.15);
		content: "";
		height: 0;
		left: 0;
		margin: auto;
		position: absolute;
		
		width: 0;
		@include transition(all 0.3s ease-out 0s);
	}
	&:after{left: auto;right: 0; bottom: 0;}
}

.banners-effect-12 .banners > div {
	img { @include transition(all 0.3s ease-in);
		&:hover{@include filter(grayscale(100%));}
	}
	
}
/* @end */