/********************************************************
        
  1. Basics
    1.1. Helpers
    1.2. Custom grid
    1.3. Forms
  2. Custom mouse cursor
  3. Animsition preloader
    3.1. Animsition-overlay
    3.2. Loading animation
    3.3. Add class after preloader
  4. Header
    4.1. Header logo
    4.2. Header menu-open
    4.3. MidnightHeader
    4.4. Headroom
  5. Navigation
    5.1. Navigation logo
    5.2. Navigation close icon
    5.3. Navigation menu
    5.4. Navigation links
    5.5. Navigation backgrounds
    5.6. Navigation backgrounds overlay
    5.7. Drop down menu
    5.8. Drop down close
  6. Colors
    6.1. Bg colors
    6.2. Text colors
  7. Typography
  8. Buttons
    8.1. To top button
    8.2. Border button
    8.3. Flip button
    8.4. Arrow button
    8.5. Scroll button
    8.6. Overlay Button
  9. Animations
    9.1. Loading animations
      9.1.1. Loading overlay animation #1
      9.1.2. Loading overlay animation #2
      9.1.3. Loading fade animation
      9.1.4. Loading title fill animation
    9.2. Scroll animations
      9.2.1. Scroll overlay animation #1
      9.2.2. Scroll overlay animation #2
      9.2.3. Scroll fade animation
      9.2.4. Scroll title fill animation
  10. Hovers
  11. Footer
  12. Magnific popup
    12.1. Popup arrows
    12.2. Popup counter 
    12.3. Popup close
  13. Min-height flex center (IE11-fix)
  14. Page-head
  15. Swiper slider
    15.1. Home slider
      15.1.1. Home slider title fill effect
      15.1.2. Home slider overlay effect
      15.1.3. Home slider overlay #2 effect
      15.1.4. Home slider fade effect
    15.2. Testimonials slider
    15.3. About slider
    15.4. Swiper pagination
      15.4.1. Home slider pagination
      15.4.2. Testimonials slider pagination
      15.4.3. Portfolio full screen slider pagination
    15.5. Swiper arrows
      15.5.1. Home slider arrows
      15.5.2. About slider arrows
      15.5.3. Portfolio full screen slider arrows
      15.5.4. Portfolio slider arrows
      15.5.5. Portfolio columns slider arrows
      15.5.6. Fullscreen home slider arrows
    15.6. Portfolio full screen slider
      15.6.1. Portfolio slider overlay animations
      15.6.2. Portfolio slider fade animations
    15.7. Portfolio slider
    15.8. Portfolio columns slider
      15.8.1. Portfolio columns slider hover effects
    15.9. Fullscreen home slider
  16. List dots
  17. Services
  18. Progress bar
  19. Portfolio
  20. Project
  21. About
    21.1. Team
  22. Our clients
  23. Video content
  24. Blog
    24.1. Sidebar
      24.1.1. Search form
      24.1.2. Categories
      24.1.3. Recent-posts
      24.1.4. Tegs
      24.1.5. Widget-instagram
    24.2. Single post
      24.2.1. Post autor
      24.2.2. Post comments
      24.2.3. Comment form
  25. Contact
    25.1. Contact form
  26. Video background
  27. Portfolio grid
    27.1. isotope buttons
    27.2. Isotope item
    27.3. Isotope hover
  28. Typewriter home
  29. Particles home
  30. Price table
    30.1. Price button

********************************************************/




/*--------------------------------------------------------------
9. Animations
--------------------------------------------------------------*/
.animated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

[data-animation]:before,
[data-animation]:after,
[data-animation] {
    opacity: 0;
}

[data-animation].animated:before,
[data-animation].animated:after,
[data-animation].animated {
    opacity: 1;
}

.tr-delay01,
.tr-delay01:before,
.tr-delay01:after {
    -webkit-transition-delay: .1s !important;
    -o-transition-delay: .1s !important;
    transition-delay: .1s !important; 
}

.tr-delay02,
.tr-delay02:before,
.tr-delay02:after {
    -webkit-transition-delay: .2s !important;
    -o-transition-delay: .2s !important;
    transition-delay: .2s !important;
}

.tr-delay03,
.tr-delay03:before,
.tr-delay03:after {
    -webkit-transition-delay: .3s !important;
    -o-transition-delay: .3s !important;
    transition-delay: .3s !important;
}

.tr-delay04,
.tr-delay04:before,
.tr-delay04:after {
    -webkit-transition-delay: .4s !important;
    -o-transition-delay: .4s !important;
    transition-delay: .4s !important;
}

.tr-delay05,
.tr-delay05:before,
.tr-delay05:after {
    -webkit-transition-delay: .5s !important;
    -o-transition-delay: .5s !important;
    transition-delay: .5s !important;
}

.tr-delay06,
.tr-delay06:before,
.tr-delay06:after {
    -webkit-transition-delay: .6s !important;
    -o-transition-delay: .6s !important;
    transition-delay: .6s !important;
}

.tr-delay07,
.tr-delay07:before,
.tr-delay07:after {
    -webkit-transition-delay: .7s !important;
    -o-transition-delay: .7s !important;
    transition-delay: .7s !important;
}

.tr-delay08,
.tr-delay08:before,
.tr-delay08:after {
    -webkit-transition-delay: .8s !important;
    -o-transition-delay: .8s !important;
    transition-delay: .8s !important;
}

.tr-delay09,
.tr-delay09:before,
.tr-delay09:after {
    -webkit-transition-delay: .9s !important;
    -o-transition-delay: .9s !important;
    transition-delay: .9s !important;
}

.tr-delay10,
.tr-delay10:before,
.tr-delay10:after {
    -webkit-transition-delay: 1s !important;
    -o-transition-delay: 1s !important;
    transition-delay: 1s !important;
}

.overlay-light-bg-1:before {
    background: #f5f5f5 !important;
}

.overlay-light-bg-2:before {
    background: #f0f0f0 !important;
}

.overlay-dark-bg-1:before {
    background: #111517 !important;
}

.overlay-dark-bg-2:before {
    background: #1b2a2f !important;
}

.overlay-red-bg:before {
    background: #ef7f1b !important;
}

.red-color.overlay-anim-box2:before,
.red-color.overlay-anim-box:before,
.red-color.overlay-loading:before,
.red-color.overlay-loading2:before,
.red-color .overlay-anim-box2:before,
.red-color .overlay-anim-box:before,
.red-color .overlay-loading:before,
.red-color .overlay-loading2:before {
    background: #f24538 !important
}

/* 9.1. Loading animations */

/* 9.1.1. Loading overlay animation #1 */
.overlay-loading {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.overlay-loading:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #1b2a2f;
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    z-index: 3;
    -webkit-transform: translateX(-202%);
    -ms-transform: translateX(-202%);
    transform: translateX(-202%);
}

body.anim .overlay-loading:before {
    -webkit-transform: translateX(1%);
    -ms-transform: translateX(1%);
    transform: translateX(1%);
}

.loading-opacity-anim {
    opacity: 0;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    -webkit-transition-delay: .86s;
    -o-transition-delay: .86s;
    transition-delay: .86s;
}

body.anim .loading-opacity-anim {
    opacity: 1;	
}

.dark-bg-1 .overlay-loading:before,
.dark-bg-2 .overlay-loading:before {
    background: #f5f5f5;
}

.tr-delay01 .loading-opacity-anim {
    -webkit-transition-delay: .96s;
    -o-transition-delay: .96s;
    transition-delay: .96s;
}

.tr-delay02 .loading-opacity-anim {
    -webkit-transition-delay: 1.06s;
    -o-transition-delay: 1.06s;
    transition-delay: 1.06s;
}

.tr-delay03 .loading-opacity-anim {
    -webkit-transition-delay: 1.16s;
    -o-transition-delay: 1.16s;
    transition-delay: 1.16s;
}

.tr-delay04 .loading-opacity-anim {
    -webkit-transition-delay: 1.26s;
    -o-transition-delay: 1.26s;
    transition-delay: 1.26s;
}

.tr-delay05 .loading-opacity-anim {
    -webkit-transition-delay: 1.36s;
    -o-transition-delay: 1.36s;
    transition-delay: 1.36s;
}

.tr-delay06 .loading-opacity-anim {
    -webkit-transition-delay: 1.46s;
    -o-transition-delay: 1.46s;
    transition-delay: 1.46s;
}

.tr-delay07 .loading-opacity-anim {
    -webkit-transition-delay: 1.56s;
    -o-transition-delay: 1.56s;
    transition-delay: 1.56s;
}

.tr-delay08 .loading-opacity-anim {
    -webkit-transition-delay: 1.66s;
    -o-transition-delay: 1.66s;
    transition-delay: 1.66s;
}

.tr-delay09 .loading-opacity-anim {
    -webkit-transition-delay: 1.76s;
    -o-transition-delay: 1.76s;
    transition-delay: 1.76s;
}

.tr-delay10 .loading-opacity-anim {
    -webkit-transition-delay: 1.86s;
    -o-transition-delay: 1.86s;
    transition-delay: 1.86s;
}

/* 9.1.2. Loading overlay animation #2 */
.overlay-loading2 {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.overlay-loading2:before {
    content: '';
    background: #f5f5f5;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1);
    -o-transition: 1s cubic-bezier(.86, 0, .07, 1);
    transition: 1s cubic-bezier(.86, 0, .07, 1);
    z-index: 3;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

body.anim .overlay-loading2:before {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

.light-bg-2 .overlay-loading2:before {
    background: #f0f0f0;
}

.dark-bg-1 .overlay-loading2:before {
    background: #111517;
}

.dark-bg-2 .overlay-loading2:before {
    background: #1b2a2f;
}

.red-bg .overlay-loading2:before {
    background: #ef7f1b;
}

/* 9.1.3. Loading fade animation */
.fade-loading {
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1s cubic-bezier(.77, 0, .175, 1);
    transition: 1s cubic-bezier(.77, 0, .175, 1);
}

body.anim .fade-loading {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* 9.1.4. Loading title fill animation */
.load-title-fill {
    white-space: nowrap;
    color: transparent;
    position: relative;
    display: inline-block;
}

.load-title-fill:before,
.load-title-fill:after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    color: #262626;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1s cubic-bezier(.77, 0, .175, 1);
    transition: 1s cubic-bezier(.77, 0, .175, 1);
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
}

.load-title-fill:after {
    color: #ef7f1b;
    background: #000;
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

body.anim .load-title-fill:before,
body.anim .load-title-fill:after {
    width: 100%;
}

.dark-bg-1 .load-title-fill:before,
.dark-bg-2 .load-title-fill:before {
    color: white;
}

.red-bg .load-title-fill:before {
    color: #262626;
}

.light-bg-2 .load-title-fill:after {
    background: #f0f0f0;
}

.dark-bg-1 .load-title-fill:after {
    background: #111517;
}

.dark-bg-2 .load-title-fill:after {
    background: #1b2a2f;
}

.red-bg .load-title-fill:after {
    background: #1b2a2f;
}

.tr-delay01.load-title-fill:after {
    -webkit-transition-delay: .4s !important;
    -o-transition-delay: .4s !important;
    transition-delay: .4s !important;
}

.tr-delay02.load-title-fill:after {
    -webkit-transition-delay: .5s !important;
    -o-transition-delay: .5s !important;
    transition-delay: .5s !important;
}

.tr-delay03.load-title-fill:after {
    -webkit-transition-delay: .6s !important;
    -o-transition-delay: .6s !important;
    transition-delay: .6s !important;
}

.tr-delay04.load-title-fill:after {
    -webkit-transition-delay: .7s !important;
    -o-transition-delay: .7s !important;
    transition-delay: .7s !important;
}

.tr-delay05.load-title-fill:after {
    -webkit-transition-delay: .8s !important;
    -o-transition-delay: .8s !important;
    transition-delay: .8s !important;
}

.tr-delay06.load-title-fill:after {
    -webkit-transition-delay: .9s !important;
    -o-transition-delay: .9s !important;
    transition-delay: .9s !important;
}

.tr-delay07.load-title-fill:after {
    -webkit-transition-delay: 1s !important;
    -o-transition-delay: 1s !important;
    transition-delay: 1s !important;
}

.tr-delay08.load-title-fill:after {
    -webkit-transition-delay: 1.1s !important;
    -o-transition-delay: 1.1s !important;
    transition-delay: 1.1s !important;
}

.tr-delay09.load-title-fill:after {
    -webkit-transition-delay: 1.2s !important;
    -o-transition-delay: 1.2s !important;
    transition-delay: 1.2s !important;
}

.tr-delay10.load-title-fill:after {
    -webkit-transition-delay: 1.3s !important;
    -o-transition-delay: 1.3s !important;
    transition-delay: 1.3s !important;
}

/* 9.2. Scroll animations */

/* 9.2.1. Scroll overlay animation #1 */
[data-animation].overlay-anim-box:before,
[data-animation].overlay-anim-box:after,
[data-animation].overlay-anim-box {
    opacity: 1;
}

.overlay-anim-box {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.overlay-anim-box:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #1b2a2f;
    position: absolute;
    top: 0;
    left: 100%;
    -webkit-transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    transition: 1.8s cubic-bezier(.77, 0, .175, 1);
    z-index: 3;
    -webkit-transform: translateX(-202%);
    -ms-transform: translateX(-202%);
    transform: translateX(-202%);
}

.overlay-anim-box.overlay-anim:before {
    -webkit-transform: translateX(1%);
    -ms-transform: translateX(1%);
    transform: translateX(1%);
}

.overlay-opacity-anim {
    opacity: 0;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    -webkit-transition-delay: .86s;
    -o-transition-delay: .86s;
    transition-delay: .86s;
}

.overlay-anim .overlay-opacity-anim {
    opacity: 1;	
}

.dark-bg-1 .overlay-anim-box:before,
.dark-bg-2 .overlay-anim-box:before {
    background: #f5f5f5;
}

.tr-delay01 .overlay-opacity-anim {
    -webkit-transition-delay: .96s;
    -o-transition-delay: .96s;
    transition-delay: .96s;
}

.tr-delay02 .overlay-opacity-anim {
    -webkit-transition-delay: 1.06s;
    -o-transition-delay: 1.06s;
    transition-delay: 1.06s;
}

.tr-delay03 .overlay-opacity-anim {
    -webkit-transition-delay: 1.16s;
    -o-transition-delay: 1.16s;
    transition-delay: 1.16s;
}

.tr-delay04 .overlay-opacity-anim {
    -webkit-transition-delay: 1.26s;
    -o-transition-delay: 1.26s;
    transition-delay: 1.26s;
}

.tr-delay05 .overlay-opacity-anim {
    -webkit-transition-delay: 1.36s;
    -o-transition-delay: 1.36s;
    transition-delay: 1.36s;
}

.tr-delay06 .overlay-opacity-anim {
    -webkit-transition-delay: 1.46s;
    -o-transition-delay: 1.46s;
    transition-delay: 1.46s;
}

.tr-delay07 .overlay-opacity-anim {
    -webkit-transition-delay: 1.56s;
    -o-transition-delay: 1.56s;
    transition-delay: 1.56s;
}

.tr-delay08 .overlay-opacity-anim {
    -webkit-transition-delay: 1.66s;
    -o-transition-delay: 1.66s;
    transition-delay: 1.66s;
}

.tr-delay09 .overlay-opacity-anim {
    -webkit-transition-delay: 1.76s;
    -o-transition-delay: 1.76s;
    transition-delay: 1.76s;
}

.tr-delay10 .overlay-opacity-anim {
    -webkit-transition-delay: 1.86s;
    -o-transition-delay: 1.86s;
    transition-delay: 1.86s;
}

/* 9.2.2. Scroll overlay animation #2 */
[data-animation].overlay-anim-box2:before,
[data-animation].overlay-anim-box2:after,
[data-animation].overlay-anim-box2 {
    opacity: 1;
}

.overlay-anim-box2 {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.overlay-anim-box2:before {
    content: '';
    background: #f5f5f5;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: -1px;
    -webkit-transition: 1s cubic-bezier(.86, 0, .07, 1);
    -o-transition: 1s cubic-bezier(.86, 0, .07, 1);
    transition: 1s cubic-bezier(.86, 0, .07, 1);
    z-index: 3;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);       
}

.overlay-anim-box2.overlay-anim2:before {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

.light-bg-2 .overlay-anim-box2:before {
    background: #f0f0f0;
}

.dark-bg-1 .overlay-anim-box2:before {
    background: #111517;
}

.dark-bg-2 .overlay-anim-box2:before {
    background: #1b2a2f;
}

.red-bg .overlay-anim-box2:before {
    background: #ef7f1b;
}

/* 9.2.3. Scroll fade animation */
.fade-anim-box {
    display: inline-block;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1s cubic-bezier(.77, 0, .175, 1);
    transition: 1s cubic-bezier(.77, 0, .175, 1);
}

.fade-anim-box.fade-anim {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* 9.2.4. Scroll title fill animation */
[data-animation].title-fill:before,
[data-animation].title-fill:after,
[data-animation].title-fill {
    opacity: 1;
}

.title-fill {
    white-space: nowrap;
    color: transparent;
    position: relative;
    display: inline-block;
}

.title-fill:before,
.title-fill:after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    color: #262626;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    -webkit-transition: 1s cubic-bezier(.77, 0, .175, 1);
    -o-transition: 1s cubic-bezier(.77, 0, .175, 1);
    transition: 1s cubic-bezier(.77, 0, .175, 1);
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
}

.title-fill:after {
    color: #fff;
    background: #f5f5f5;
    -webkit-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

.title-fill.title-fill-anim:before,
.title-fill.title-fill-anim:after {
    width: 100%;
}

.dark-bg-1 .title-fill:before,
.dark-bg-2 .title-fill:before {
    color: white;
}

.red-bg .title-fill:before {
    color: #262626;
}

.light-bg-2 .title-fill:after {
    background: #f0f0f0;
}

.dark-bg-1 .title-fill:after {
    /*background: #111517;*/
    background: none;
}

.dark-bg-2 .title-fill:after {
    background: #1b2a2f;
}

.red-bg .title-fill:after {
    background: #1b2a2f;
}

.tr-delay01.title-fill:after {
    -webkit-transition-delay: .4s !important;
    -o-transition-delay: .4s !important;
    transition-delay: .4s !important;
}

.tr-delay02.title-fill:after {
    -webkit-transition-delay: .5s !important;
    -o-transition-delay: .5s !important;
    transition-delay: .5s !important;
}

.tr-delay03.title-fill:after {
    -webkit-transition-delay: .6s !important;
    -o-transition-delay: .6s !important;
    transition-delay: .6s !important;
}

.tr-delay04.title-fill:after {
    -webkit-transition-delay: .7s !important;
    -o-transition-delay: .7s !important;
    transition-delay: .7s !important;
}

.tr-delay05.title-fill:after {
    -webkit-transition-delay: .8s !important;
    -o-transition-delay: .8s !important;
    transition-delay: .8s !important;
}

.tr-delay06.title-fill:after {
    -webkit-transition-delay: .9s !important;
    -o-transition-delay: .9s !important;
    transition-delay: .9s !important;
}

.tr-delay07.title-fill:after {
    -webkit-transition-delay: 1s !important;
    -o-transition-delay: 1s !important;
    transition-delay: 1s !important;
}

.tr-delay08.title-fill:after {
    -webkit-transition-delay: 1.1s !important;
    -o-transition-delay: 1.1s !important;
    transition-delay: 1.1s !important;
}

.tr-delay09.title-fill:after {
    -webkit-transition-delay: 1.2s !important;
    -o-transition-delay: 1.2s !important;
    transition-delay: 1.2s !important;
}

.tr-delay10.title-fill:after {
    -webkit-transition-delay: 1.3s !important;
    -o-transition-delay: 1.3s !important;
    transition-delay: 1.3s !important;
}