Sindbad~EG File Manager

/**
 * Theme Name: Turitor
 * Theme URI: https://themeforest.net/user/tripples/portfolio
 * Description: This is a skull theme which we use to develope new themes. textdomain: Turitor, class: Turitor, var: $Turitor_, constants: TURITOR_, function: turitor
 *
 */


/* Table of Content
********************************

1.	Typography
2.  Global Styles (body, link color, gap, ul, section-title, overlay etc)
3.  Header area
4.	Banner area


# Reset & Basics
# Basic
# Typography
# Links
# Buttons
# Menu
# Main Content
# Core WordPress
# Search
# Blog
# Widget
# Footer
# Resonsive
*/

@import 'variable';
@import 'mixin';

/* Typography
================================================== */



body {
   font-family: $rubik;
   line-height: 26px;
   font-size: 16px;
   color: #555;
   font-weight: 400;
   border: 0;
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6{
   color: $title-color;
   font-family: $roboto;
   font-weight: 700;
}



h1 {
   font-size: 48px;
   line-height: 52px;
}

h2 {
   font-size: 36px;
   line-height: 42px;
}

h3 {
   font-size: 30px;
   margin-bottom: 20px;
}

h4 {
   font-size: 24px;
   line-height: 28px;
}

h5 {
   font-size: 20px;
   line-height: 24px;
}

h6 {
   font-size: 18px;
   line-height: 24px;
}

/* Global styles
================================================== */


iframe {
   border: none;
}
a:focus,
a:active,
input,
input:hover,
input:focus,
input:active,
textarea,
textarea:hover,
textarea:focus,
textarea:active {
	-moz-outline: none;
	outline: none;
}
a:active,
a:focus,
a:hover,
a:visited {
	text-decoration: none;
	outline: 0;
}


a {
   color: $primary-color;
   @include transition();
}

a:hover {
   text-decoration: none;
   color: $primary-color;
}

a.read-more {
   color: $primary-color;
   font-weight: 700;
}

a.read-more:hover {
   color: #222;
}

.no-padding {
   padding: 0;
}

.p-60 {
   padding: 60px 0;

}

.p-100 {
   padding: 100px 0 !important;

}

.media>.pull-left {
   margin-right: 20px;
}

.gap-60 {
   clear: both;
   height: 60px;
}

.gap-50 {
   clear: both;
   height: 50px;
}

.gap-40 {
   clear: both;
   height: 40px;
}

.gap-30 {
   clear: both;
   height: 30px;
}

.gap-20 {
   clear: both;
   height: 20px;
}

.gap-10 {
   clear: both;
   height: 10px;
}
.mb-10{
   margin-bottom: 10px;
}
.mb-25 {
   margin-bottom: 25px;
}

.mb-30 {
   margin-bottom: 30px;
}
.mb-40{
   margin-bottom: 40px;
}
.mb-50 {
   margin-bottom: 50px;
}

.mb-60 {
   margin-bottom: 60px;
}

.mb-70 {
   margin-bottom: 70px;
}

.mb-80 {
   margin-bottom: 80px;
}

.mb-100 {
   margin-bottom: 100px;
}

.mb-110 {
   margin-bottom: 110px;
}

.mt-100 {
   margin-top: 100px;
}

.mt-50 {
   margin-top: 50px;
}

.mt-80 {
   margin-top: 80px;
}

.mt-35 {
   margin-top: 35px;
}

.mrb-30 {
   margin-bottom: 30px;
}

.mrb-80 {
   margin-bottom: -80px;
}

.mr-70 {
   margin-right: 70px;
}

.mr-80 {
   margin-right: 80px;
}

.mr-100 {
   margin-right: 100px;
}

.ml-70 {
   margin-left: 70px;
}

.mr-70 {
   margin-right: 70px;
}

.mr-80 {
   margin-right: 80px;
}

.mr-100 {
   margin-right: 100px;
}

.mrt-0 {
   margin-top: 0 !important;
}

.pab-60 {
   padding-bottom: 60px;
}

.pab-70 {
   padding-bottom: 70px;
}

.pab {
   padding-bottom: 0;
}

a:focus {
   outline: 0;
}

img.pull-left {
   margin-right: 20px;
   margin-bottom: 20px;
}

img.pull-right {
   margin-left: 20px;
   margin-bottom: 20px;
}
.pull-left{
   float: left !important;
}
.pull-right{
   float: right !important;
}

.unstyled {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Dropcap */
.dropcap {
   font-size: 48px;
   line-height: 60px;
   padding: 0 7px;
   display: inline-block;
   float: left;
   font-weight: 700;
   margin: 5px 15px 5px 0;
   position: relative;
   text-transform: uppercase;
}


.btn,
.place-order-action .lp-button.button,
.learnpress-page .lp-button.button,
.learn-press-form-login form button,
#learn-press-pmpro-notice.purchase-course a{
	display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 14px;
	line-height: 1.5;
	text-transform: uppercase;
   border-radius: 0px;
   padding: 12px 40px;
   font-weight: 600;

   @include border-radius(36px);
   @include transition();
	 i{
		 margin-left: 10px;
	 }
}

.btn-primary,
.learn-press-form-login form button,
.learnpress-page .lp-button.button,
.place-order-action .lp-button.button,
#learn-press-pmpro-notice.purchase-course a{
	background: $primary-color;
	color: #fff;
	border: 1px solid $primary-color;
   margin-right: 5px;
	&:hover,&:active{
		background: $secondary-color;
		color: #fff;
		border-color: $secondary-color;
		box-shadow: none;
	}
}
.btn-solid{
   display: block;
   width: 100%;
   &:hover{
      box-shadow: none;
   }
}
// form-control
.form-control,
.wpcf7-form-control{
   height: 50px;
   font-size: 14px;
   line-height: 28px;
   padding: 0 25px;
   border-radius: 0;
   &:focus{
      border-color: $primary-color;
      outline: none;
      box-shadow: none;
   }
 
}

.widget-title{
   font-size: 20px;
   line-height: 26px;
}
/* Title*/
.ts-title{
   font-size: 24px;
   line-height: 28px;
}
.ts-section-title{
   .title-border{
      position: relative;
      &:after{
         position: absolute;
         left: 0;
         right: 0;
         margin: auto;
         height: 3px;
         width: 40px;
         background: black;
         content: '';
         bottom: 0%;
         transform: translateX(-0%);
        
      }
   }
	.section-title{
      
		margin-bottom: 20px;
		text-align: center;

		span{
		 color: $title-color;
		 margin-bottom: 15px;
      }
      
	 }
	 .title-bold{
		 font-size: 64px;
	 }
	 i{
       display: block;
		 &.icon{
			 font-size: 25px;
			 color: #c4c4c4;
		 }
    }
    &.title-left{
      .title-border:after{
         right: auto;
      }
    }
    &.title-right{
      .title-border:after{
         left: auto;
      }
    }
}
.sub-title{
   display: block;
   font-size: 17px;
   color: #555;
}
// title bar
.title-bar{
   span{
      display: inline-block;
      background: $primary-color;
      &.title-left-bar,
      &.title-right-bar{
         width: 70px;
         height: 2px;
        
      }
      &.title-middle-bar{
         width: 11px;
         height: 11px;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         vertical-align: middle;
         margin: 0 25px;
      }
   }
}

// overlay

.overlay {
   position: relative;
   z-index: 1;

   &:before {
      @include absolute();
      width: 100%;
      height: 100%;
      content: '';
      background: rgba(0, 0, 0, 0.68);
      z-index: -1;
   }
}


.main-container {
   padding: 100px 0;

   &.blog,
   &.blog-single {
      padding-bottom: 50px;
   }
}

// owl-carousel
.owl-carousel {
   .owl-dots{
      text-align: center;
      .owl-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background: rgba(111, 107, 107, 0.6);
         display: inline-block;
         opacity: 1;
         margin: 0 5px;
         opacity: .5;
   
         &.active {
            border: 2px solid $primary-color;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: transparent;
            position: relative;
            top: 3px;
         }
      }
   }

   .owl-nav{
      .owl-prev,
      .owl-next{
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         font-size: 48px;
         color: #666666;
      }
      .owl-prev,
      .owl-next{
         height: 50px;
         width: 50px;
         @include border-radius(50%);
         border: 1px solid #dedfe2;
         color: $title-color;
         display: inline-block;
         text-align: center;
         font-size: 16px;
         line-height: 50px;
         @include transition();
         &:hover{
            color: #fff;
            background: $primary-color;
            border-color: $primary-color;
         }
      }
      .owl-prev{
         left: 30px;
      }
      .owl-next{
         right: 30px
      }
   }

}

.img-link{
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}

// post overlay style
.ts-overlay-style{
   position: relative;
   .item,
   &.item{
      @include background-content();
      -webkit-backface-visibility: hidden;
      min-height: 260px;

   }
   &::before{
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.8) 100%);
      @include transition();
   }
   &:hover{
      &::before{
         background-color: rgba(0,0,0, .2);
      } 
   }
   .post-content{
      padding: 20px 20px 18px;
      position: absolute;
      bottom: 0;
      z-index: 1;
   }
   .post-title{
      a{
         color: #fff;
      }
   }
   
   .post-meta-info{
      li{
         color: #fff;
         a{
            color: #fff;
         }
      }
   }
}


.post-meta-info{
   padding: 0;
   margin: 0;
   li{
      font-size: 12px;
      display: inline-block;
      color: #222222;
      font-weight: 400;
      margin-right: 20px;
      padding-left: 10px;
      position: relative;
      a{
         color: #222222;
         &:hover{
            color: $primary-color;
         }
      }
      i{
         margin-right: 6px;
         font-size: 12px;
         vertical-align: middle;
         font-weight: 700;
      }
      &:last-child{
         margin-right: 0;
      }
      &:before{
         position: absolute;
         left: 0;
         top: 2px;
         bottom: 0;
         width: 3px;
         height: 3px;
         @include border-radius(50%);
         background: $primary-color;
         content: '';
         margin: auto;
      }
   }
}


// gutter setting 
@for $g from 2 through 3 {
	.ts-gutter-#{$g}0px{
		margin-top: - ($g*10px)/2 !important;
		margin-bottom: - ($g*10px)/2 !important;
		> div{
			padding-top: ($g*10px)/2 !important;
			padding-bottom: ($g*10px)/2 !important;
		}
	}
}

// btn classic

.btn-classic{
   .elementor-button{
       position: relative;
       &:after{
           position: absolute;
           content: '';
           top: 50%;
           bottom: 0;
           width: 45px;
           height: 7px;
           background: #ffd100;
           transform: translateY(-50%);
           right: -30px;
           transition: all ease 0.4s;
       }
       &:hover{
           &:after{
               right: -60px;
           }
       }
   }
   .mf-btn-wraper {
       .metform-btn {
           position: relative;
           &:after{
               position: absolute;
               content: '';
               top: 50%;
               bottom: 0;
               width: 45px;
               height: 7px;
               background: #ffd100;
               -webkit-transform: translateY(-50%);
               -ms-transform: translateY(-50%);
               transform: translateY(-50%);
               right: -30px;
               -webkit-transition: all ease 0.4s;
               -o-transition: all ease 0.4s;
               transition: all ease 0.4s;
           }
           &:hover{
               &:after{
                   right: -60px;
               }
            }
       }
   }
}


/* BounchInDown */
.turitor_animated { 
   -webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
   -ms-animation-fill-mode: both; 
   -o-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -ms-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
 }
 
  
 
 @-webkit-keyframes turitorbounceInDown {
   0% {
     opacity: 0;
     -webkit-transform: translateY(-2000px);
   }
 
   60% {
     opacity: 1;
     -webkit-transform: translateY(30px);
   }
 
   80% {
     -webkit-transform: translateY(-10px);
   }
 
   100% {
     -webkit-transform: translateY(0);
   }
 }
 @-moz-keyframes turitorbounceInDown {
   0% {
     opacity: 0;
     -moz-transform: translateY(-2000px);
   }
 
   60% {
     opacity: 1;
     -moz-transform: translateY(30px);
   }
 
   80% {
     -moz-transform: translateY(-10px);
   }
 
   100% {
     -moz-transform: translateY(0);
   }
 }
 @-o-keyframes turitorbounceInDown {
   0% {
     opacity: 0;
     -o-transform: translateY(-2000px);
   }
 
   60% {
     opacity: 1;
     -o-transform: translateY(30px);
   }
 
   80% {
     -o-transform: translateY(-10px);
   }
 
   100% {
     -o-transform: translateY(0);
   }
 }
 @keyframes turitorbounceInDown {
   0% {
     opacity: 0;
     transform: translateY(-2000px);
   }
 
   60% {
     opacity: 1;
     transform: translateY(30px);
   }
 
   80% {
     transform: translateY(-10px);
   }
 
   100% {
     transform: translateY(0);
   }
 }
 .turitorbounceInDown {
   -webkit-animation-name: bounceInDown;
   -moz-animation-name: bounceInDown;
   -o-animation-name: bounceInDown;
   animation-name: bounceInDown;
 }