/*
Theme Name: Stain
Author: ThemePicasso
Author URI: http://themepicasso.com/
*/
/*------------------------------------------------------------------------------------/
[ T A B L E   O F   C O N T E N T S ]
-----------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------/
    1.  Body

    2.  Typography

    3.  Header
        3.1 Search / .top-search
        3.2 Mobile Nav

    4.  Hero Section / .hero-section
        4.1 Hero Section
            4.1.1 Rotate Text
        4.2 Section Header
        4.3 About Section
        4.4 Portfolio Section
        4.5 Skill Section
        4.6 Experience Section
        4.7 Education Section
        4.8 Blog Section
            4.8.1 Grid items
            4.8.2 Progress bar for imagesLoaded
            4.8.3 Placerholder css
        4.9 Testimonial Section
        4.10 Team Section

    5.  Services
    6.  Components
        6.1 Numeric Stats
        6.2 Pricing Table
            6.2.1 Pricing Ribbon
        6.3 Text & Iconic Component
            6.3.1 Text & Iconic Component
            6.3.2 Iconic Component

        6.4 Timeline style components

    7.  Contact
    8.  Footer
    9.  Responsive Layout
    10. Boxed Layout

    11. Blog Page
        11.1 Page template
             11.1.1 Recent blog post sticky ribbon

        11.2 Blog post / .blog-container
             11.2.1 Blog post meta / .blog-post-meta
             11.2.2 Blog post tags / .post-tags-list
             11.2.3 Blog post details / .post-details
             11.2.4 Related Blog / .related-blog-post
             11.2.5 Comments template / #comments
             11.2.6 Blog post divider / .post-divider
             11.2.7 Post pagination
             11.2.8 Blog post pagination

        11.3 Post format
             11.3.1 Grid gallery / .post-grid-wrap
             11.3.2 Slideshow gallery
             11.3.4 Quote post

        11.4 Sidebar / .sidebar
             11.4.1 Sidebar Blog Search
             11.4.2 About author widget

        11.5 Ads widget

        11.6 Widgets
             11.6.1  Widget styles / .widget-col
             11.6.2  Calendar widget / #wp-calendar
             11.6.3  Widget header / .widget-h
             11.6.4  Latest post / .widget-post-list
             11.6.5  Comment list / .widget-comment-list
             11.6.6  Widget category list / .widget-cat
             11.6.7  Widget tag cloud / .wp-tag-cloud
             11.6.8  Responsive tab widget / .resp-tabs-list
             11.6.9  Responsive vertical tab widget / .resp-vtabs
             11.6.10 Responsive tab accordion styles / .resp-tab-active
             11.6.11 Archive / .archive-list

    12. Theme Options
--------------------------------------------------------------------------------*/

/*==========*/
/* 1. Body */
/*========*/
body {
    font-size: 15px;
    line-height: 24px;
    font-family: 'Roboto',sans-serif;
    font-weight: 400;
	    background: #f5f5f5;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0 auto;
}
/*========================================*/
/* Default links colors & hover style */
/*======================================*/
a {
    color: #666666;
    outline: none;
}

a:visited {
    color: inherit;
}

a:hover,a:focus,a:active {
    text-decoration: none;
    color: #16989d;
    outline: none;
}
/*=========================*/
/* Button outline none */
/*=======================*/
button:active {
    outline: none !important;
}

button:focus {
    outline: none !important;
}

/*========================*/
/* Bootstrap Theme Reset */
/*======================*/
.btn,.pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span,.pagination-lg>li:last-child>a, .pagination-lg>li:last-child>span{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
}
.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .05);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .05);
}
.btn:active,
.btn.active {
    background-image: none;
}
.btn-default {
    text-shadow: 0 1px 0 #fff;
    border-color: #e5e5e5;
    border-color: #ddd;
}
.btn-default:hover,
.btn-default:focus {
    background-color: #e0e0e0;
    background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
    background-color: #e0e0e0;
    border-color: #ddd;
}
.btn-default:disabled,
.btn-default[disabled] {
    background-color: #e0e0e0;
    background-image: none;
}
.btn-primary {
    border-color: #2b669a;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #2d6ca2;
    background-position: 0 -15px;
}
.btn-primary:active,
.btn-primary.active {
    background-color: #2d6ca2;
    border-color: #2b669a;
}
.btn-primary:disabled,
.btn-primary[disabled] {
    background-color: #2d6ca2;
    background-image: none;
}
.btn-success {
    border-color: #3e8f3e;
}
.btn-success:hover,
.btn-success:focus {
    background-color: #419641;
    background-position: 0 -15px;
}
.btn-success:active,
.btn-success.active {
    background-color: #419641;
    border-color: #3e8f3e;
}
.btn-success:disabled,
.btn-success[disabled] {
    background-color: #419641;
    background-image: none;
}
.btn-info {
    border-color: #28a4c9;
}
.btn-info:hover,
.btn-info:focus {
    background-color: #2aabd2;
    background-position: 0 -15px;
}
.btn-info:active,
.btn-info.active {
    background-color: #2aabd2;
    border-color: #28a4c9;
}
.btn-info:disabled,
.btn-info[disabled] {
    background-color: #2aabd2;
    background-image: none;
}
.btn-warning {
    border-color: #e38d13;
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: #eb9316;
    background-position: 0 -15px;
}
.btn-warning:active,
.btn-warning.active {
    background-color: #eb9316;
    border-color: #e38d13;
}
.btn-warning:disabled,
.btn-warning[disabled] {
    background-color: #eb9316;
    background-image: none;
}
.btn-danger {
    border-color: #b92c28;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: #c12e2a;
    background-position: 0 -15px;
}
.btn-danger:active,
.btn-danger.active {
    background-color: #c12e2a;
    border-color: #b92c28;
}
.btn-danger:disabled,
.btn-danger[disabled] {
    background-color: #c12e2a;
    background-image: none;
}
.thumbnail,
.img-thumbnail {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}

/*================*/
/* 2. Typography */
/*==============*/
h1 {
    font-size: 88px;
    line-height: 96px;
    margin-top: 48px;
    margin-bottom: 24px;
}

h2 {
    font-size: 48px;
    line-height: 48px;
    margin-top: 48px;
    margin-bottom: 24px;
}

h3 {
    font-size: 23px;
    line-height: 48px;
    margin-top: 24px;
    margin-bottom: 24px;
}

h4 {
    font-size: 21px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

h5 {
    font-size: 14px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

h6 {
    font-size: 12px;
    line-height: 24px;
    margin-top: 24px;
    margin-bottom: 24px;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    color: #f5f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.full-width-section h1,
.full-width-section h2,
.full-width-section h3,
.full-width-section h4,
.full-width-section h5,
.full-width-section h6,
.full-width-section .h1,
.full-width-section .h2,
.full-width-section .h3,
.full-width-section .h4,
.full-width-section .h5,
.full-width-section .h6 {
    color: #444;
}

p,ul,ol,pre,table {
    margin-top: 24px;
    margin-bottom: 24px;
}

ul {
    list-style: square;
}

ul,ol {
    margin-left: 24px;
}

blockquote {
    margin: 24px 0px;
}

pre {
    padding: 22px;
    line-height: 24px;
    background: #f5f5f5;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: #eee 1px solid;
}

blockquote p {
    margin: 0px;
    font-size: 16px;
}

code,kbd,tt,var {
    font: 14px 'Roboto',sans-serif;
}

hr {
    border: 1px solid;
    margin: -1px 0;
}

ul ul,ol ol,ul ol,ol ul {
    margin-top: 0;
    margin-bottom: 0;
}

sup,sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

sub {
    top: 0.4em;
}

dt,dd {
    line-height: 24px;
}

address {
    margin-bottom: 24px;
    line-height: 24px;
}
/*================*/
/* Default table */
/*==============*/
table {
    border-collapse: collapse;
}

table>thead>tr>th,table>tbody>tr>th,table>tfoot>tr>th,table>thead>tr>td,table>tbody>tr>td,table>tfoot>tr>td {
    padding: 12px 12px 11px 12px;
    vertical-align: top;
    border: 1px solid #ddd;
}

table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 1px solid #ccc;
}

.table>tbody+tbody {
    border-top: 2px solid #ddd;
}

dd {
    margin-bottom: 24px;
}

button,input[type="button"],input[type="reset"],input[type="submit"] {
    box-shadow: none;
}

button:hover,input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover {
    box-shadow: none;
}

button:focus,input[type="button"]:focus,input[type="reset"]:focus,input[type="submit"]:focus,button:active,input[type="button"]:active,input[type="reset"]:active,input[type="submit"]:active {
    box-shadow: none;
}

blockquote {
    display: block;
    background: #fff;
    padding: 32px 20px 20px 20px;
    position: relative;
    font-size: 16px;
    text-align: center;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

blockquote::before {
    content: "\201C";
    font-size: 60px;
    line-height: 74px;
    font-weight: bold;
    color: #ccc;
    position: absolute;
    width: 48px;
    height: 48px;
    left: 50%;
    top: -25px;
    font-family: Georgia,Times,"Times New Roman",serif;
    background-color: #eee;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

blockquote::after {
    content: "";
}

blockquote a {
    text-decoration: none;
    cursor: pointer;
    padding: 2px 6px 3px 6px;
    color: #666;
    display: block;
}

blockquote a:hover {
    color: #478dbf;
}

blockquote em {
    font-style: italic;
}
/*========================*/
/* Bootstrap input reset */
/*======================*/
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: 0 0 0 2px rgba(200,200,200,.1);
    box-shadow: 0 0 0 2px rgba(200,200,200,.1);
}

/*============*/
/* 3. Header */
/*==========*/
.nav-container {
    position: relative;
    margin-right: 24px;
    min-height: 60px;
}

.autofix_sb.fixed {
    position: fixed !important;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    min-height: 60px;
    /* Additional styles */
    background-color: rgba(000,000,000,.8);
    /* Animations */
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    z-index: 1000;
}

.autofix_sb.fixed.bottom {
    bottom: 0;
    position: absolute !important;
}

/*----------------------------*\
   Sticky Specific Styles
/*----------------------------*/
.top-logo {
    font-size: 30px;
    line-height: 40px;
    z-index: 1200;
    text-align: left;
    position: absolute;
    left: 39px;
    top: 6px;
    width: 200px;
}

.top-logo a {
    color: #fff;
    font-weight: 400;
    height: 40px;
    display: inline-block;
}

.top-logo a:hover {
    color: #f5f5f5;
}

.nav-clone {
    width: 100%;
    /* Required styles */
    position: fixed;
    top: 0;
    left: 0;
    /* Additional styles */
    background-color: rgba(000,000,000,.8);
    /* Translate -100% to move off screen */
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    /* Animations */
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    z-index: 1000;
}

.nav-stick {
    /* Translate back to 0%; */
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}

.nav-unstick {
    /* Not required to use, but could be useful to have */;
}

#scrollTop {
    background-color: rgba(000,000,000,.5);
    color: #fff;
    outline: 0;
    bottom: 24px;
    right: 24px;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#scrollTop:hover {
    background-color: #16989d;
    -webkit-transition: all 100ms linear;
    -moz-transition: all 100ms linear;
    -o-transition: all 100ms linear;
    -ms-transition: all 100ms linear;
    transition: all 100ms linear;
}

#scrollTop i {
    line-height: 46px;
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

/*==============*/
/* 3.1 Search  */
/*============*/
.top-search-frm {
    height: 60px;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 2100;
    display: none;
}

.top-search {
    width: 60px;
    height: 60px;
    position: absolute;
    right: -15px;
    top: 0px;
}

.top-search a {
    width: 60px;
    height: 60px;
    display: inline-block;
    color: #f5f5f5;
}

.top-search a:hover {
    color: #ffffff;
}

.top-search a i {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
}

/*=================*/
/* 3.2 Mobile Nav */
/*===============*/
.slicknav_menu {
    display: none;
}

/*==============*/
/* 4. Sections */
/*============*/
/*===================*/
/* 4.1 Hero Section */
/*=================*/

.hero-section {
    background-color: #ccc;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px 0;
    position: relative;
}

.section-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(000,000,000,.7);
}

.introduction {
    position: relative;
}

.introduction-text {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    text-align: left;
    color: #fff;
}

.profile-card {
    position: relative;
    width: 500px;
}

.profile-card-info {
    width: 80%;
}

.image-block {
    width: 370px;
    height: 370px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: -10px 0;
    margin: auto;
    position: absolute;
    right: -370px;
    top: -20px;
    border: rgba(255,255,255,.5) 2px solid;
    background-color: #444;
}

.image-block:before {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: #fff 2px solid;
}

.image-block a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    color: #fff;
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    letter-spacing: .1em;
}

.image-block a:hover {
    color: #fff;
}

.social-profile-label {
    margin-bottom: 12px;
    font-size: 12px;
}

.social-profile-icon {
    font-size: 18px;
}

.profileSelector {
    overflow: hidden;
}

.profile-card-divider {
    height: 0px;
    border-bottom: rgba(255,255,255,.5) 1px solid;
    display: block;
    margin-right: -40px;
}

.profile-title {
    color: #16989d;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0px;
    font-size: 38px;
}

.profile-designation {
    display: block;
    margin-bottom: 24px;
    font-size: 16px;
    color: #ddd;
}

.profile-img-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    display: none;
    border-radius: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
}

.social-profile {
    display: block;
    text-transform: uppercase;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.social-profile-label {
    display: block;
}

.social-profile-icon {
    display: block;
}

.st-btn {
    position: relative;
    display: inline-block;
    padding: .8em 2em;
    background-color: #16989d;
    color: #ffffff;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*border-radius: .2em;*/
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);*/
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
}

.st-btn:hover,.st-btn:focus,.st-btn:active {
    /*box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);*/
    color: #ffffff;
}

.btn-view-profile {
    position: relative;
    display: inline-block;
    padding: .8em 2em;
    background-color: #16989d;
    color: #ffffff !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: .1em;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
}

.btn-view-profile:hover,.btn-view-profile:focus,.btn-view-profile:active {
    color: #ffffff !important;
    background-color: #2b2b2b;
}

.btn-theme {
    position: relative;
    display: inline-block;
    padding: .8em 1.5em;
    background-color: #16989d;
    color: #ffffff !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: .1em;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
    margin-top: 24px;
}

.btn-theme:hover,.btn-theme:focus,.btn-theme:active {
    color: #ffffff !important;
    background-color: #2b2b2b;
}

.btn-read-more i {
    margin-left: 10px;
}

.details-button {
    padding: .8em 1.5em;
    display: inline-block;
}

.details-button i {
    margin-left: 8px;
}

.section-full-height {
    position: relative;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: cover;
}

.vertical-center-content {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.introduction .inner-element-container {
    padding: 48px 30px;
    color: #f5f5f5;
}

.inner-element-container {
    padding: 48px 45px;
    color: #f5f5f5;
}

.full-width-section {
    background-color: #f5f5f5;
}

.full-width-section .section-header h2 {
    background-color: #f5f5f5;
    color: #333;
}

.full-width-section .section-header {
    border-bottom: #666 2px solid;
}

.full-container {
    padding: 25px 24px;
}

.full-container .header-wrap {
    margin-top: 72px;
    margin-bottom: 72px;
    position: relative;
}

.light-section .inner-element-container {
    color: #333;
}

.light-section .inner-element-container h1,
.light-section .inner-element-container h2,
.light-section .inner-element-container h3,
.light-section .inner-element-container h4,
.light-section .inner-element-container h5,
.light-section .inner-element-container h6,
.light-section .inner-element-container .h1,
.light-section .inner-element-container .h2,
.light-section .inner-element-container .h3,
.light-section .inner-element-container .h4,
.light-section .inner-element-container .h5,
.light-section .inner-element-container .h6 {
    color: #333;
}

.light-section h1,
.light-section h2,
.light-section h3,
.light-section h4,
.light-section h5,
.light-section h6,
.light-section .h1,
.light-section .h2,
.light-section .h3,
.light-section .h4,
.light-section .h5,
.light-section .h6 {
    color: #333;
}

.blog-page-wrapper h1,
.blog-page-wrapper h2,
.blog-page-wrapper h3,
.blog-page-wrapper h4,
.blog-page-wrapper h5,
.blog-page-wrapper h6,
.blog-page-wrapper .h1,
.blog-page-wrapper .h2,
.blog-page-wrapper .h3,
.blog-page-wrapper .h4,
.blog-page-wrapper .h5,
.blog-page-wrapper .h6 {
    color: #333;
}

.light-section .inner-element-container .section-header {
    border-bottom: #666 2px solid;
}

/*====================*/
/* 4.1.1 Rotate Text */
/*==================*/
.rw-wrapper {
    padding-top: 24px;
}

.rw-sentence {
    margin: 0;
    text-align: left;
}

.rw-sentence span {
    color: #fff;
    font-size: 150%;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

.rw-words {
    display: inline;
    text-indent: 10px;
}

.rw-words-r span {
    font-weight: 700;
    position: absolute;
    opacity: 0;
    color: #3e91a1;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}

.rw-words-r span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    color: #dc596f;
}

.rw-words-r span:nth-child(3) {
    -webkit-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    color: #f2c963;
}

.rw-words-r span:nth-child(4) {
    -webkit-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
    color: #a8d9cb;
}

.rw-words-r span:nth-child(5) {
    -webkit-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
    color: #ea98fe;
}

.rw-words-r span:nth-child(6) {
    -webkit-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
    color: #7fca86;
}

@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -ms-transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes rotateWord {
    0% {
        opacity: 0;
    }

    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 768px) {
    .rw-sentence {
        font-size: 18px;
    }
}

@media screen and (max-width: 320px) {
    .rw-sentence {
        font-size: 9px;
    }
}

/*========================*/
/* 4.4 Portfolio Section */
/*======================*/
.portfolio-wrapper {
    margin: 0 auto;
    position: relative;
}

.portfolio-filter {
    text-align: center;
    /*margin: 15px 0px 48px 0px;*/
}

.portfolio-wrapper .cbp-item-wrapper {
    background-color: #01549c;
}
/*--------------------------------------*/
/* 4.8.2 Progress bar for imagesLoaded */
/*------------------------------------*/

.progress-bar {
    background-color: #0BC20B;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 0;
    box-shadow: 0 1px 3px rgba(11, 194, 11, 0.2);
    -webkit-transition: width 0.3s ease-out;
    -moz-transition: width 0.3s ease-out;
    -o-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}

/*-------------------------*/
/* 4.8.3 Placerholder css */
/*-----------------------*/
.wookmark-placeholder {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #eee;
    border: 1px solid #dedede;
    z-index: -1;
}
/*=======================*/
/* 9. Responsive Layout */
/*=====================*/

@media screen and (max-width:480px) {

    .profile-card {
        position: relative;
        width: 280px;
        margin: auto;
    }

    .profile-card-info {
        width: 90%;
    }

    .image-block {
        width: 280px;
        height: 280px;
        position: absolute;
        right: -280px;
    }

    .profile-card-divider {
        margin-right: 0px;
    }

    .introduction .inner-element-container {
        padding: 48px 0px;
        color: #f5f5f5;
    }

    .inner-element-container {
        padding: 48px 0px;
        color: #f5f5f5;
    }

    .btn-view-profile {
        padding: .8em 1em;
    }

    .section-header {
        width: 270px;
    }

    .section-header h2 {
        font-size: 22px;
    }

    .full-container {
        padding: 48px 0px;
    }

    .ex-hightlight ul li.ex-inro {
        width: 100%;
        margin-left: 0px;
        top: 35px;
        background: #fff;
        z-index: 100;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .ex-hightlight ul li.ex-inro h2 {
        font-size: 30px;
    }

    .ex-details {
        padding: 12px 24px;
        width: 100%;
        position: relative;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        -webkit-transform: translateX(0%) translateY(0%);
        -moz-transform: translateX(0%) translateY(0%);
        -ms-transform: translateX(0%) translateY(0%);
        -o-transform: translateX(0%) translateY(0%);
        transform: translateX(0%) translateY(0%);
    }

    .job-list-item {
        display: block;
    }

    .job-list-item  ul li {
        display: block;
    }

    .job-list-item .job-date {
        width: 180px;
        margin: 0px auto 24px auto;
    }

    .job-list-item .job-description {
        margin-left: 0px;
        z-index: 100;
    }

    .job-description:after, .job-description:before {
        top: -11px;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .job-description:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 11px;
        margin-left: -11px;
    }

    .job-description:before {
        border-color: rgba(229, 229, 229, 0);
        border-bottom-color: #eeeeee;
        border-width: 11px;
        margin-left: -11px;
    }

    .job-brand {
        display: block;
    }

    .job-details {
        display: block;
    }

    .job-brand-container {
        padding-left: 0px;
        padding-right: 0px;
        margin: auto;
    }

    .ex-hightlight ul li.yrs-ex {
        width: 100%;
    }

    .timeline-stroke {
        left: 50%;
        height: 102%;
        width: 1px;
    }

    .edu-institute li {
        margin: 0px 12px 24px 12px;
    }

    .details-button {
        margin-bottom: 24px;
    }

    .testimonial-text {
        font-size: 14px;
        min-height: 300px;
    }

    .instagram-stream {
        width: 280px;
        margin: auto;
    }

    .instagram-stream li {
        width: 70px;
        height: 70px;
    }
}

@media screen and (max-width:768px) {
    .profile-card {
        margin: auto;
        text-align: center;
    }

    .profile-card-info {
        width: 90%;
        text-align: left;
    }

    .profile-card-divider {
        margin-right: 0px;
    }

    /*=========================*/
    /* Responsive Mobile Menu */
    /*=======================*/

    .slicknav_menu {
        display: block;
    }

    .sf-menu {
        display: none;
    }

    .nav-clone {
        display: none;
    }

    .nav-wrapper {
        position: relative;
    }

    .autofix_sb.fixed {
        position: relative !important;
    }

    .testimonial-text {
        font-size: 18px;
        min-height: 300px;
    }

    .blog-page-wrapper {
        margin: 80px auto 0px auto;
    }
    .st-theme-options{
        display: none;
    }
}

@media screen and (max-width:979px) {
    .introduction-text {
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        width: 100%;
        text-align: left;
    }

    .image-block {
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .vertical-center-content {
        position: relative;
        left: 0;
        top: 0;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
}

@media only screen and (min-width:769px) and (max-width:1199px) {

    .blog-page-wrapper {
        margin: 120px auto 0px auto;
    }

}

/*===================*/
/* 10. Boxed Layout */
/*=================*/
@media only screen and (min-width:1200px) and (max-width:100000px) {

    .layout-boxed {
        background-image: url(../images/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }

    .layout-boxed .page-wrapper {
        width: 1100px;
        margin: auto;
        -webkit-transition: all .1s ease-out;
        -moz-transition: all .1s ease-out;
        -o-transition: all .1s ease-out;
        transition: all .1s ease-out;
    }

    .layout-boxed .sticky-nav {
        left: 0px;
    }

    .blog-page-wrapper {
        width: 1000px;
        margin: 120px auto 0px auto;
    }
    .blog-section .container-fluid{
        width: 1170px;
    }
    .layout-boxed .blog-section .container-fluid{
        width: 100%;
        -webkit-transition: all .1s ease-out;
        -moz-transition: all .1s ease-out;
        -o-transition: all .1s ease-out;
        transition: all .1s ease-out;
    }
}
/*====================*/
/* 12. Theme Options */
/*==================*/
.st-theme-options,
.st-theme-options.option-show{
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
.st-theme-options{
    width: 340px;
    height: 100%;
    position: fixed;
    top: 0px;
    right: -340px;
    background-color: #fff;
    z-index: 100;
}
.st-theme-options.option-show{
    right: 0px;
}
.st-theme-options .options-action{
    width: 126px;
    height: 48px;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    left: -126px;
    line-height: 48px;
    text-align: right;
    padding-right: 10px;
    top: 80px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    -webkit-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
}
.st-theme-options .options-action i{
    font-size: 24px;
    height: 48px;
    width: 40px;
    display: inline-block;
    line-height: 48px;
    text-align: center;
    position: absolute;
    left: 0px;
}
.st-theme-options .options-container{
    margin-top: 80px;
}

.st-theme-options .options-container .st-theme-options-h {
    border-top: #eee 1px solid;
    border-bottom: #eee 1px solid;
    padding-top: 12px;
    margin-bottom: 24px;
    text-align: center;
}

.st-theme-options .options-container .st-theme-options-h h4 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    color: #444444;
    position: relative;
    z-index: 2;
    border-bottom: #16989d 1px solid;
    padding-right: 0px;
    padding-bottom: 12px;
    margin-bottom: -1px;
    margin-top: 0px;
}

.colors-list{
    text-align: center;
    margin: 0px 0px 24px 0px;
}
.colors-list li{
    width: 48px;
    height: 48px;
    background-color: #f5f5f5;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.layout-list{
    margin: 0px;
    text-align: center;
}
.layout-list li{
    padding: 10px;
    width: 100px;
    height: 100px;
    list-style: none;
    background-color: #eee;
    display: inline-block;
    text-align: center;
    line-height: 80px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: .05em;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    cursor: pointer;
    color: #ccc;

}

.layout-list li.active{
    background-color: #444;
    color: #fff;

}