/*
        Template Name: BizCraft Responsive HTML5/CSS3 Template
        Author: tripples
        Author URI: http://shapebootstrap.net/user/tripples
        Description: BizCraft Responsive HTML5/CSS3 Template.
        Version: 1.0
*/

/* Table of Content
==================================================
1.	Global Styles
2. 	Typography
3. 	Common Styles
4.	Header area
5.	Slideshow
6.	Services and Features
7.	Image Block
6.	About (Landing and Featured Tab)
9.	Portfolio
10.	Counter
11.	Team
12.	Pricing
13.	Testimonial
14. Video block
15.	Recent Post
16. Clients
17. Twitter
18. Contact
19. Footer
20. Copyright
21. Sub pages
22. Blog
23. Landing page
24.	Style Swithcer (you can delete the css)
*/

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

@font-face {
    font-family: 'JaapokkiRegular';
    src: url('../fonts/jaapokki/jaapokki-regular.eot');
    src: url('../fonts/jaapokki/jaapokki-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/jaapokki/jaapokki-regular.woff') format('woff'),
        url('../fonts/jaapokki/jaapokki-regular.ttf') format('truetype'),
        url('../fonts/jaapokki/jaapokki-regular.svg#JaapokkiRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


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

html {
    overflow-x: hidden !important;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #000;
    background: #fff;
}

h1,
h2,
h3 {
    color: #323232;
}

.bluecolor {
    color: #00395A !important;
}

.colorwhite {
    color: white;
}

.body-inner {
    position: relative;
    overflow: hidden;
}

a:link,
a:visited {
    text-decoration: none;
}


a:hover {
    text-decoration: none;
    color: #000;
}

a.read-more {
    color: #323232;
}

section {
    padding: 80px 0;
    position: relative;
}

.ts-padding {
    padding: 50px;
}

.no-padding {
    padding: 0;
}

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

.heading {
    padding-bottom: 50px;
    margin-top: 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

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

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

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

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

a:focus {
    outline: 0;
}


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

body,
p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'JaapokkiRegular';
    /*    text-transform: uppercase;*/
    letter-spacing: 0.5px;
}

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

h2 {
    font-size: 32px;
    line-height: 45px;
    font-weight: 400;
}

h3 {
    font-size: 25px;
    line-height: 32px;
    font-weight: 400;
}

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

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

/* Button variation */

.btn.btn-primary {
    color: #323232;
    border-radius: 50px;
    padding: 10px 30px;
    background: none;
    font-size: 14px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.btn.btn-primary:hover {
    color: #fff;
}

.btn.btn-primary.white {
    border: 2px solid #fff;
    color: #fff;
}

.btn.btn-primary.white:hover {
    border: 2px solid transparent;
}

.btn.btn-primary.square {
    border-radius: 0;
    color: #fff;
}

.btn.btn-primary.solid {
    color: #fff;
}


.btn.btn-primary.solid.blank:hover {
    color: #333;
}

.btn.btn-primary.solid:hover {
    background: none;
}

ul.circle,
ul.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.circle li {
    position: relative;
    margin-left: 30px;
    padding-bottom: 20px;

}

ul.circle li:before {
    content: "\f111";
    font-family: FontAwesome;
    font-size: 8px;
    line-height: 8px;
    border: 2px solid rgba(0, 0, 0, .1);
    border-radius: 100%;
    position: absolute;
    left: -33px;
    top: 5px;
}

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

ul.check-list li {
    margin-bottom: 5px;
}

ul.check-list li i {
    margin-right: 10px;
    font-size: 14px !important;
}

ul.arrow li:before {
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 10px;
}

blockquote p {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    font-style: italic;
    color: #959595;
}

blockquote {
    margin: 20px 0;
}



/* Common styles
================================================== */

/* Angle */

.angle:before {
    background: #fff;
    content: "";
    height: 75px;
    top: -37px;
    position: absolute;
    width: 100%;
    z-index: 2;
    -webkit-transform: skew(0deg, 2deg);
    -moz-transform: skew(0deg, 2deg);
    -ms-transform: skewX(0deg) skewY(2deg);
    -o-transform: skew(0deg, 2deg);
    transform: skew(0deg, 2deg);
}

.portfolio.angle:before {
    background: #f5f5f5;
}

.portfolio.angle {
    padding-bottom: 120px;
}

.clients.angle {
    padding: 120px 0;
}

/* Parallax */

.parallax {
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-attachment: fixed !important;
    padding: 110px 0;
    color: #fff;
    position: relative;
}

.parallax h2,
.parallax h3 {
    color: #fff;
    margin-top: 0;
}

.parallax .btn {
    color: #fff;
}

.parallax-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/overaly.png);
}

.parallax h3 {
    margin-bottom: 30px;
}

.parallax1 {
    background: url(../images/parallax/parallax1.jpg) no-repeat;
}

.parallax2 {
    background: url(../images/parallax/parallax2.jpg) no-repeat;
}

.parallax3 {
    background: url(../images/parallax/parallax3.jpg) no-repeat;
}

.parallax4 {
    background: url(../images/parallax/parallax4.jpg) no-repeat;
}
.parallaxDojo {
    background: url(../images/parallax/dojobackground.png) no-repeat;
}



.parallax .btn.solid {
    margin-left: 10px;
}


/* Deafult title */

.title-icon {
    font-size: 32px;
    margin-right: 15px;
    margin-top: 9px;
    color: #959595;
}

.title-icon.classic {
    margin-top: 0;
}

.title {
    position: relative;
    margin: 0;
    line-height: 32px;
    border-left: 2px solid #e7e7e7;
    display: inline-block;
    padding-left: 15px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.title.classic {
    line-height: 40px;
    height: 34px;
}

.title-desc {
    font-family: 'Lato', serif;
    font-size: 18px;
    line-height: 18px;
    font-weight: 400;
    /*   text-transform: capitalize;*/
    display: block;
    color: #6A6A6A
}

/* Title style 2 */

.title2 {
    position: relative;
    margin-top: 30px;
}

.title2:after {
    content: '';
    width: 150px;
    left: 50%;
    margin-left: -75px;
    top: 50%;
    height: 3px;
    background: #dedede;
    position: absolute;
}

.title2 .title-desc {
    padding-top: 30px;
}


/* Title border */

.title-border {
    line-height: normal;
    margin-top: 0;
}

.widget-title {
    margin-bottom: 25px;
    font-size: 20px;
}
/* ---------------------------------------------
   Dojo parallax title underline placement fix
   Place the decorative line below the title
   only within the parallaxDojo section
---------------------------------------------- */
.parallaxDojo .title2 {
    padding-bottom: 40px;
}


.post-title {
    font-size: 24px;
    line-height: normal;
}

.post-title a {
    color: #323232;
}

.long-desc {
    font-size: 16px;
}


/* Icon pentagon */

.icon-pentagon {
    display: inline-block;
    height: 32px;
    width: 40px;
    position: relative;
    color: #fff;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.icon-pentagon:hover {
    color: rgba(0, 0, 0, .5);
}

.icon-pentagon:before {
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    top: -10px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}

.icon-pentagon:after {
    border-left: 20px solid rgba(0, 0, 0, 0);
    border-right: 20px solid rgba(0, 0, 0, 0);
    bottom: -10px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}

.icon-pentagon i {
    font-size: 20px;
    line-height: 24px;
}

.service-icon {
    height: 46px;
    width: 90px;
    margin-bottom: 30px;
}

.service-icon:before {
    border-left: 45px solid rgba(0, 0, 0, 0);
    border-right: 45px solid rgba(0, 0, 0, 0);
    top: -30px;
}

.service-icon:after {
    border-left: 45px solid rgba(0, 0, 0, 0);
    border-right: 45px solid rgba(0, 0, 0, 0);
    bottom: -30px;
}

.service-icon i {
    font-size: 36px;
    line-height: 46px;
}

/* Carousel controller */

.carousel-control {
    width: auto;
}

.ts-carousel-controller {
    text-align: center;
    padding-top: 50px;
    z-index: 1;
    position: relative;
}

.ts-carousel-controller .left,
.ts-carousel-controller .right,
.owl-controls .owl-prev,
.owl-controls .owl-next {
    cursor: pointer;
    background: #f6f6f6;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: #989898;
    opacity: 1;
    top: auto;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
}

.owl-controls .owl-next {
    margin-left: 6px;
}

.ts-carousel-controller .left:hover,
.ts-carousel-controller .right:hover,
.owl-controls .owl-prev:hover,
.owl-controls .owl-next:hover {
    color: #fff;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
    display: inline-block;
}

/* Input form */

.form-control {
    box-shadow: none;
    border: 1px solid #dedede;
    padding: 6px 20px;
    height: 50px;
    background: none;
    color: #959595;
    font-size: 14px;
    border-radius: 0;
}

.form-control:focus {
    box-shadow: none;
}

/*-- Flex slider --*/

.portfolio-slider .flexslider,
.ts-flex-slider .flexslider {
    border: 0;
    box-shadow: none;
}

.portfolio-slider .flex-direction-nav a,
.ts-flex-slider .flex-direction-nav a {
    opacity: 0;
    background: #000;
    color: #fff !important;
    text-align: center;
    text-shadow: none;
    line-height: 40px;
}

.portfolio-slider .flex-direction-nav a:before {
    font-size: 32px;
}

.portfolio-slider .flex-direction-nav a:hover,
.ts-flex-slider .flex-direction-nav a:hover {
    color: #fff;
    opacity: 1;
}

.flexportfolio.flexslider .slides img {
    height: auto;
}

/*-- Pagination --*/

.pagination li a {
    border-radius: 0 !important;
    margin-right: 8px;
}

.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>li>a:hover {
    color: #fff;
    border: 1px solid transparent;
}

/* Header area
================================================== */

/*-- Header style 1 --*/

.header-solid {
    background: #191919;
    box-shadow: 0px 1px 7px 0 rgba(0, 0, 0, 0.2);
}

.header-solid ul.navbar-nav>li>a {
    color: #fff;
}

/*-- Logo --*/

.navbar-header {
    z-index: 9999;
}

.navbar-brand.navbar-bg {
    position: absolute;
    left: 0;
    padding: 3px 15px 10px;
    width: 20%;
    height: 62px;
    line-height: 62px;

}

.navbar-brand img {
    float: right;
    padding: 0 15px;

}


/* Main navigation */

.navbar {
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
}

.navbar-right {
    padding-right: 0;
}

.navbar-right .dropdown-menu {
    right: auto;
    left: 0;
}

.navbar-toggle {
    border-radius: 0;
    margin-right: 5px;
}

.navbar-toggle .icon-bar {
    background: #fff;
}

ul.navbar-nav>li>a {
    font-family: 'JaapokkiRegular';
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    padding-top: 22px;
    padding-bottom: 20px;
    line-height: 20px;
}

ul.navbar-nav>li:last-child a {
    padding-right: 0;
}

ul.navbar-nav>li.active>a,
ul.navbar-nav>li>a:hover {}

ul.navbar-nav>li>a i {
    font-weight: 700;
}

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
    background: transparent;
    border: 0;
}

/* Dropdown */

.dropdown-menu {
    border: 0;
    border-radius: 0px;
    width: 100%;
    box-shadow: none;
    background: none;
    min-width: 180px;
}

.dropdown-menu>ul {
    list-style: none;
    padding: 0 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: -5px;
    background: #fff;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px .09px rgba(0, 0, 0, 0.15);
}

.dropdown-menu>ul>li>a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    padding: 15px;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu>ul>li.active>a {}

.dropdown-menu>ul>li:last-child>a {
    border-bottom: 0;
}

.dropdown-menu>ul>li>a:hover,
.dropdown-menu>ul>li>a:focus {
    background: none;
}

.nav>li.megamenu {
    position: static;
}

.nav>li.megamenu .dropdown-menu {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 20px !important;
    z-index: 1000;
    border-radius: 0;
    top: auto;
}

.nav>li.megamenu .dropdown-menu ul {
    margin-top: 4px;
    padding: 20px;
}


/* Header Style - 2
================================================== */

.header2 {
    padding: 8px 0;
}

.header2 .navbar-brand {
    background: none;
    padding-top: 3px;
}

/*-- Header bgnone fixed --*/

.header-bgnone {
    padding: 11px 0;
    width: auto;
    box-shadow: 0px 1px 7px 0 rgba(0, 0, 0, 0.2);
}

.header-bgnone ul.navbar-nav>li:hover>a,
.header-bgnone ul.navbar-nav>li.active>a {
    color: #000;
}


/* Header Style - 3
================================================== */

.header3 {
    background: #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 0px 1px 7px 0 rgba(0, 0, 0, 0.2);
}

.header3 .navbar-brand {
    padding-top: 10px;
}

.header3 ul.navbar-nav>li>a {
    padding-top: 30px;
    padding-bottom: 25px;
    color: #333;
}

.header3 ul.navbar-nav>li:last-child a {
    padding-right: 15px;
}

.header3 .navbar-collapse {
    padding-right: 30px;
}


/* Header Style - 4
================================================== */

.header4 {
    background: #fff;
    box-shadow: 0px 1px 7px 0 rgba(0, 0, 0, 0.2);
}

.header4 .navbar-brand {
    padding-top: 10px;
}

.header4 ul.navbar-nav>li>a {
    padding-top: 30px;
    padding-bottom: 25px;
    color: #333;
}



/* Slideshow
================================================== */

/*-- Main slide --*/

.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../images/overaly.png);
}

#main-slide .item img {
    width: 100%;
    -webkit-backface-visibility: hidden;

}

#main-slide .item {
    -webkit-backface-visibility: hidden;
}

#main-slide .item .slider-content {
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

#main-slide .item.active .slider-content {
    opacity: 1;
    -webkit-transition: opacity 100ms;
    -moz-transition: opacity 100ms;
    -o-transition: opacity 100ms;
    transition: opacity 100ms;
}

#main-slide .slider-content {
    top: 40%;
    margin-top: -70px;
    left: 10%;
    padding: 0;
    text-align: center;
    position: absolute;

    color: #fff;
}

#main-slide .carousel-indicators {
    bottom: 70px;
}

.carousel-indicators li {
    width: 30px !important;
    height: 10px !important;
    margin: 1px !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .5);
}

#main-slide .carousel-indicators li.active,
#main-slide .carousel-indicators li:hover {
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}


#main-slide .carousel-control.left,
#main-slide .carousel-control.right {
    opacity: 0;
    filter: alpha(opacity=0);
    background-image: none;
    background-repeat: no-repeat;
    text-shadow: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

#main-slide:hover .carousel-control.left,
#main-slide:hover .carousel-control.right {
    opacity: 1;
    filter: alpha(opacity=100);
}

#main-slide:hover .carousel-control.left {
    left: 20px;
}

#main-slide:hover .carousel-control.right {
    right: 20px;
}

#main-slide .carousel-control.left span {
    padding: 15px;
}

#main-slide .carousel-control.right span {
    padding: 15px;
}

#main-slide .carousel-control .fa-angle-left,
#main-slide .carousel-control .fa-angle-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
}

#main-slide .carousel-control .fa-angle-left {
    left: 0;
}

#main-slide .carousel-control .fa-angle-right {
    right: 0;
}

#main-slide .carousel-control i {
    background: none;

    color: #fff;
    line-height: 56px;
    width: 56px;
    height: 56px;
    border: 1px solid #fff;
    border-radius: 100%;
    font-size: 36px;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

#main-slide .carousel-control i:hover {
    border: 1px solid rgba(0, 0, 0, .3);
}

#main-slide .slider-content h2 {
    font-size: 45px;
    /*  text-transform: uppercase;*/
    color: #fff;
}

#main-slide .slider-content h3 {
    font-size: 22px;
    margin-top: 40px;
    color: #fff;
}

#main-slide .slider-content h4 {
    font-size: 22px;
    margin-top: 40px;
    color: #fff;
}

.slider.btn {
    padding: 10px 35px;
    margin-top: 40px;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
}

.slider.btn.solid {
    margin-left: 15px;
}

.slider-content-left {
    position: relative;
    margin: 0 0 0 40px;
}

.slider-content-right {
    position: relative;
}

/*-- Animation */
.carousel .item.active .animated1 {}

.carousel .item.active .animated2,
.flex-active-slide .animated2 {
    -webkit-animation: lightSpeedIn 1s ease-in 200ms both;
    animation: lightSpeedIn 1s ease-in 200ms both;
}

.carousel .item.active .animated3,
.flex-active-slide .animated3 {
    -webkit-animation: bounceInLeft 2s ease-in-out 800ms both;
    animation: bounceInLeft 1.5s ease-in-out 800ms both;
}

.carousel .item.active .animated4,
.flex-active-slide .animated4 {
    -webkit-animation: flipInX 2s ease-in 800ms both;
    animation: flipInX 2s ease-in 800ms both;
}

.carousel .item.active .animated5,
.flex-active-slide .animated5 {
    -webkit-animation: bounceInLeft 1s ease-in-out 100ms both;
    animation: bounceInLeft 1s ease-in-out 100ms both;
}

.carousel .item.active .animated6,
.flex-active-slide .animated6 {
    -webkit-animation: bounceIn 1s ease-in 500ms both;
    animation: bounceIn 1s ease-in 500ms both;
}

.carousel .item.active .animated7,
.flex-active-slide .animated7 {
    -webkit-animation: bounceIn 1s ease-in 500ms both;
    animation: bounceIn 1s ease-in 500ms both;
}

.carousel .item.active .animated8,
.flex-active-slide .animated8 {
    -webkit-animation: bounceInDown 1s ease-in 800ms both;
    animation: bounceInDown 1s ease-in 800ms both;
}


/* Flex slider */

.ts-flex-slider {
    position: relative;
}

.ts-flex-slider .flexSlideshow {
    width: 100%;
    overflow: hidden;
}


.overlay2 {
    position: relative;
}

.overlay2 img {
    width: 100%;
}

.overlay2::before {
    position: absolute;
    content: '';
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../images/overaly.png);
}

.ts-flex-slider .flexslider .slides {
    z-index: 0;
}

.ts-flex-slider .slider-content {
    z-index: 3;
}


.ts-flex-slider .flex-direction-nav a {
    width: 55px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 32px;
}

.ts-flex-slider .flex-direction-nav a.flex-next {
    border-radius: 3px;
}

.ts-flex-slider .flex-direction-nav a.flex-prev {
    border-radius: 3px;
}


/* Services
================================================== */

.service {
    padding-top: 40px;
}

.service-heading {
    padding-bottom: 30px;
    text-align: center;
}

.service-content {
    margin-top: 30px;
}

.service-content h3 {
    font-size: 18px;
}

.service-content p {
    font-size: 16px;
}

/* Feature box
================================================== */

.feature-icon {
    font-size: 28px;
    margin-top: 5px;
}

.feature-content {
    padding-right: 20px;
    padding-left: 55px;
}

.feature-content h3 {
    margin-top: 0;
    font-size: 18px;
}


/* Feature center */

.feature-center-content .feature-center-icon {
    font-size: 72px;
    margin-bottom: 5px;
    display: inline-block;
}

.feature-center-content h3 {
    font-size: 18px;
}


/* Image Block
================================================== */

.image-block {
    background: #f4f4f4;
}

.img-block-right {
    padding-right: 140px;
}

.img-block-head h2 {
    font-size: 18px;
    line-height: normal;
    margin: 5px 0 0 0;
}

.img-block-head h3 {
    font-size: 40px;
    line-height: 100%;
}

.image-block-content {
    padding: 0 50px;
    margin-bottom: 30px;
}

.image-block-content .feature-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
}

.image-block-content .feature-content {
    padding-left: 85px;
}

.image-block-content .feature-content h3 {
    margin-bottom: 0;
}




/* About us
================================================== */


/* Landing Tab */

.landing-tab {
    position: relative;
    z-index: 10;
}

.landing-tab .nav-tabs {
    border-right: 1px solid #e7e7e7;
    padding: 25px 0;
    border-bottom: 0;
}

.landing-tab .nav-tabs>li.active {
    margin-right: -3px;
}

.landing-tab .nav-tabs>li.active .tab-info h3 {
    color: #323232;
}

.landing-tab .nav-tabs>li {
    padding: 15px 0;
}

.landing-tab .nav-tabs>li>a {
    background: none !important;
    border-radius: 0;
    padding: 0 15px 0;
    color: #6A6A6A !important;
    position: relative;
    border: 0 !important;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}


.landing-tab .nav-tabs>li>a:hover {
    background: none;
}


.landing-tab .tab-icon {
    font-size: 28px;
    display: inline-block;
}

.landing-tab .tab-info {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 70px;
    top: 50%;
    margin-top: -12px;
}

.landing-tab .tab-info h3 {
    font-size: 18px;
    line-height: normal;
    margin: 0;
    color: #6A6A6A
}


.landing-tab .tab-pane h3 {
    margin-top: 0;
    line-height: normal;
}

.landing-tab .tab-pane h3.text-center {
    margin-bottom: 25px;
}

.landing-tab .tab-pane {
    padding-left: 95px;
    text-align: justify;
}

.landing-tab .tab-pane i.big {
    font-size: 200px;
    margin-bottom: 30px;
    display: block;
}



/* Featured Tab */


.featured-tab {
    padding: 30px 0;
}

.featured-tab .nav-tabs {
    border-bottom: 0;
}

.featured-tab .nav-tabs>li.active>a {
    color: #fff;
}

.featured-tab .nav-tabs>li.active>a:after {}

.featured-tab .nav-tabs>li>a {
    background: #f2f2f2;
    border-radius: 0;
    padding: 0 15px 0;
    color: #323232;
    position: relative;
    border: 0 !important;
    line-height: 52px;
    height: 52px;
    margin-bottom: 3px;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.featured-tab .nav-tabs>li>a:after {
    left: 100%;
    border: transparent solid;
    content: " ";
    position: absolute;
    border-width: 25px;
    top: 50%;
    border-left-color: #f2f2f2;
    margin-top: -25px;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.featured-tab .nav-tabs>li>a:hover {
    color: #fff;
}

.featured-tab .nav-tabs>li>a:hover:after {}

.featured-tab .nav-tabs>li.active>a,
.featured-tab .nav-tabs>li.active .tab-info h3,
.featured-tab .nav-tabs>li>a:hover .tab-info h3 {
    color: #fff !important;
}

.featured-tab .tab-icon {
    font-size: 28px;
    display: inline-block;
}

.featured-tab .tab-info {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: 70px;
    top: 50%;
    margin-top: -12px;
}

.featured-tab .tab-info h3 {
    font-size: 16px;
    line-height: normal;
    margin: 0;
}

.featured-tab .tab-pane img.pull-left {
    margin: 0 30px 10px 0;
}

.featured-tab .tab-pane img.pull-right {
    margin: 0 0 0 15px;
}

.featured-tab .tab-pane h3 {
    margin-top: 0;
    line-height: normal;
    text-align: left;
    font-size: 20px;
}

.featured-tab .tab-pane h3.text-center {
    margin-bottom: 25px;
}

.featured-tab .tab-pane {
    padding-left: 25px;
    text-align: justify;
}

.featured-tab .tab-pane i.big {
    font-size: 230px;
}




/* Portfolio
================================================== */

.portfolio {
    background: #f5f5f5;
    padding-bottom: 0;
}

#main-container.portfolio {
    background: none;
}

/*-- Isotope Portfolio start --*/

#isotope .isotope-item {
    padding: 0;
}

.isotope-nav {
    margin: -80px auto 80px;
    display: inline-block;
    float: right;
    position: relative;
    z-index: 100;
}

.isotope-nav ul {
    list-style: none;
    margin: 0;
}

.isotope-nav ul li {
    float: left;
    margin-right: 10px;
}

.isotope-nav ul li a {
    color: #323232;
    padding: 5px 15px 8px;
    border: 1px solid #ddd;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.isotope-nav ul a.active,
.isotope-nav ul a:hover {
    color: #fff;
    position: relative;
    border: 1px solid transparent;
}

.isotope-nav ul a.active:after,
.isotope-nav ul a:hover:after {
    position: absolute;
    content: " ";
    width: auto;
    height: auto;
    bottom: -13px;
    margin-left: -8px;
    left: 50%;
    border-width: 7px;
    border-style: solid;
}

#isotope .isotope-item .grid {
    position: relative;
    margin-bottom: -8px;
}

.grid figure {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    background: #3085a3;
    text-align: center;
    width: 100%;
    height: 100%;
}

.grid figure figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-oscar {
    background: #000;
    background: rgba(0, 0, 0, .8);
}

figure.effect-oscar img {
    display: block;
    width: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-oscar figcaption {
    padding: 2.5em;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid rgba(255, 255, 255, .3);
    content: '';
}

figure.effect-oscar h3 {
    font-size: 18px;
    color: #fff;
    opacity: 0;
    margin: 25% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

figure.effect-oscar a {
    color: #fff;
    font-size: 18px;
    margin: 20px 5px 0;
    display: inline-block;
    z-index: 1;
    position: relative;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}


figure.effect-oscar a.link i {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar a {
    opacity: 0;
    -webkit-transition: all 0.35s, -webkit-transform 0.35s;
    transition: all 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

figure.effect-oscar:hover h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover h3,
figure.effect-oscar:hover a {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


figure.effect-oscar:hover figcaption {
    background-color: rgba(0, 0, 0, 0.5);
}

figure.effect-oscar:hover img {
    opacity: 0.4;
}


/* Portfolio box */

.portfolio-box {
    padding-bottom: 80px;
}

.portfolio-box .isotope-nav {
    margin: 0 auto 60px;
    float: none;
}


/* Portfolio details */

.portfolio-static-item {
    padding-bottom: 20px;
}

.portfolio-static-item figure.effect-oscar a {
    margin-top: 70px;
}

.portfolio-static-desc h3 {
    font-size: 16px;
    margin: 5px 0 -5px 0;
    line-height: normal;
}

.portfolio-static-desc a {
    color: #6A6A6A;
}


/* Portfolio details */

.portfolio-desc h3 {
    margin-top: 0;
}

.portfolio-desc .project-btn {
    margin-top: 20px;
    padding: 8px 25px;
}



/* Counter
================================================== */


.facts-wrapper {
    background: #2a2d32;
    color: #fff;
}

.facts {
    position: relative;
    padding: 46px 40px 30px;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.facts:hover {
    background: #000 !important;
}

.facts.one {
    background: rgba(0, 0, 0, .3);
}

.facts.two {
    background: rgba(0, 0, 0, .2);
}

.facts.three {
    background: rgba(0, 0, 0, .15);
}

.facts.four {
    background: rgba(0, 0, 0, .09);
}

.facts i {
    font-size: 36px;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
}

.facts-num span {
    font-size: 42px;
    font-weight: 700;
    margin-top: 20px;
    display: inline-block;
}

.facts h3 {
    font-size: 18px;
    margin-top: 8px;
    color: #fff;
}


/* Counter parallax bg */

.ts_counter_bg .facts {
    padding: 0 15px;
}

.ts_counter_bg .facts:hover {
    background: none !important;
}

.ts_counter_bg .facts-num span {
    margin: 30px 0 20px;
}

.ts_counter.elements .facts {
    padding: 15px;
}

/* Team
================================================== */

.img-hexagon span {
    position: absolute;
    display: block;
    float: left;
    border-left: 120px solid #fff;
    border-right: 120px solid #fff;
}

.img-top {
    top: 0;
    border-top: 0px solid transparent;
    border-bottom: 75px solid transparent;
}

.img-bottom {
    bottom: 0px;
    border-bottom: 0px solid transparent;
    border-top: 75px solid transparent;
}

.img-hexagon {
    width: 240px;
    height: 250px;
    position: relative;
    display: inline-block;
}

.img-hexagon img {
    width: 100%;
    height: 100%;
}


.team-content h3 {
    margin-bottom: 0;
    font-size: 20px;
}

.team-content p {
    color: #959595;
}

.team-social a {
    background: #d5d5d5;
    color: #fff;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.team-social a.fb:hover {
    background: #325c94;
}

.team-social a.twt:hover {
    background: #00abdc;
}

.team-social a.gplus:hover {
    background: #dd4b39;
}

.team-social a.linkdin:hover {
    background: #007bb6;
}

.team-social a.dribble:hover {
    background: #ea4c89;
}


/* Team list */

.team-list .img-hexagon {
    float: left;
    margin-right: 30px;
}


/* Team list square */

.team-list-square .img-square {
    float: left;
    margin-right: 30px;
}


/* Pricing table
================================================== */

.pricing {
    padding-bottom: 80px;
}

.plan {
    border: 1px solid #dedede;
}

.plan-name {
    display: block;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    padding: 20px 0;
    color: #959595;
}

.plan-price {
    font-size: 48px;
    padding: 30px 0;
    margin-bottom: 30px;
    position: relative;
    background: #f2f2f2;
}

.plan-price:after {
    bottom: -30px;
    border: solid transparent;
    content: " ";
    position: absolute;
    border-width: 15px;
    border-top-color: #f2f2f2;
    left: 50%;
    margin-left: -16px;
}

.plan.featured .plan-name {
    color: #323232;
}

.plan.featured .plan-price {
    color: #fff;
}

.plan.featured .plan-price:after {}

.plan-price .currency {
    top: -0.9em;
    font-size: 50%;
    left: -0.01em;
    font-weight: 700;
}

.plan-name small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
}

.plan-price strong {}

.plan-price sub {
    font-size: 18px;
    font-weight: 700;
}

.plan ul {
    background: #fff;
    padding: 0;
    margin-bottom: 0;
}

.plan ul li {
    border-top: 1px dashed #dedede;
    padding: 12px 29px;
    font-weight: 500;
}

.plan ul li:first-child {
    border-top: 0 !important;
}

.plan a.btn {
    color: #323232;
    background: #fff;
    margin-top: 25px;
    margin-bottom: -20px;
    padding: 8px 30px;
}

.plan a.btn:hover {
    color: #fff;
}


/* Testimonial
================================================== */

.testimonial-thumb img {
    border: 1px solid #8E8E8E;
    padding: 3px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
}

.testimonial-slide .testimonial-content h3.name {
    font-size: 18px;
    color: #fff;
    margin: 10px 0;
}

.testimonial-slide .testimonial-content h3 span {
    display: block;
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-top: -10px;
}

.testimonial-slide .owl-buttons {
    display: none;
}

.testimonial-slide .testimonial-text {
    font-size: 18px;
    line-height: 24px;
    max-width: 800px;
    padding-top: 30px;
    display: inline-block;
    position: relative;
    color: #fff;
}

.testimonial-slide .testimonial-text:before {
    content: '\f10d';
    font-family: FontAwesome;
    padding-right: 10px;
}

.testimonial-slide .testimonial-text:after {
    content: '\f10e';
    font-family: FontAwesome;
    padding-left: 10px;
}

.testimonial-slide.owl-theme .owl-controls .owl-page span {
    background: none;
    border: 1px solid #fff;
    opacity: .7;
}

.testimonial-slide.owl-theme .owl-controls .owl-page.active span {
    border: 1px solid transparent;
}

/* Video block
================================================== */

.featured-video {
    background: #fff;
}

.video-block-head h2 {
    font-size: 16px;
    margin: 0;
    line-height: normal;
}

.video-block-head h3 {
    font-size: 24px;
    line-height: normal;
    margin: 0;
}

.video-block-content {
    padding: 10px 0;
}

.video-block-content h3 {
    margin: 0;
    line-height: normal;
}

.video-block-content .btn.btn-primary {
    color: #fff;
    margin: 5px 0 0 40px;
    padding: 8px 25px;
}

.video-block-content .btn.btn-primary:hover {
    color: #333;
}


/* Recent Post
================================================== */

.post-img-wrapper {
    position: relative;
}

.post-img-overlay {
    position: relative;
    display: inline-block;
}

.post-img-overlay::before {
    position: absolute;
    border-radius: 1px;
    background-color: rgba(0, 0, 0, 0);
    content: '';
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.post-img-overlay:hover::before {
    background-color: rgba(0, 0, 0, .5);
}

.post-img-overlay a {
    position: absolute;
    right: 0;
    color: #fff;
    background: #666666;
    padding: 15px 20px;
    opacity: 0;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.post-img-overlay a.link {
    right: 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}

.post-img-overlay:hover a.link {
    left: 0;
    right: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

}

.post-img-overlay a.view {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.post-img-overlay:hover a.view {
    bottom: 0;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.recent-post {
    padding: 0 15px;
}

.recent-post .post-body h3 {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 700;
}

.recent-post .post-body h3 a {
    color: #323232;
}

.recent-post .post-body .post-meta a {
    font-weight: 400;
    font-size: 13px;
}

.recent-post .post-body .post-meta span,
.recent-post .post-body .post-meta span i {
    padding-right: 5px;
}

.recent-post .post-excerpt {
    padding-top: 10px;
}

.recent-post .post-excerpt a.read-more {
    padding: 6px 18px;
    border-width: 1px;
    font-size: 12px;
    margin-top: 10px;
}


/* Clients
================================================== */

.clients {
    color: #fff;
    padding-bottom: 80px;
}

.clients-content {
    padding: 40px 0;
}

.clients h2.title {
    border-left: 0;
    color: #fff;
}

.client-carousel .item a {
    margin-right: 20px;
    border: 1px solid #e7e7e7;
    border-radius: 3px;
    display: inline-block;
    padding: 10px;
    -webkit-transition: all 350ms;
    -ms-transition: all 350ms;
    transition: all 350ms;
}


/* Twitter
================================================== */

.ts_twitter {
    padding: 100px 0;
}

.twitter-feed .twitter-icon {}

.twitter-feed .twitter-icon i {
    font-size: 78px;
    color: #1dcaff;
}

.twitter-feed .tweet a {
    color: #1dcaff;
}

.twitter-feed .tweet a:hover {
    color: #000;
}

.twitter-feed .tweet p {
    font-size: 18px;
    font-style: italic;
    padding-top: 20px;
}

/* Contact
================================================== */

#contact-form {
    margin-top: 25px;
}

#contact-form label {
    font-weight: normal;
}

.map-wrapper {
    position: relative;
}

.map {
    height: 400px;
    z-index: 1;
}

.contact-info-inner h3 {
    margin-bottom: 25px;
    font-size: 24px;
    color: #fff;
}

.contact-info h3 {
    margin-top: 42px;
    font-size: 24px;
}

.contact-info p {
    font-size: 18px;
}

.contact-info i {
    font-size: 18px;
    margin-right: 10px;
}

/* Contact inside Map */
.contact-info-inner {
    position: absolute;
    color: #fff;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(0, 0, 0, .7);
    padding: 25px 30px;
    max-width: 400px;
    max-height: 400px;
    text-align: left;
}

.contact-info-inner p {
    overflow: hidden;
    margin-bottom: 25px;
}

.contact-info-inner p strong {
    display: block;
}

.contact-info-inner i {
    margin-right: 20px !important;
    font-size: 24px;
    margin-top: 5px;
}


/* Footer
================================================== */

.footer {
    padding: 10px 0 28px;
    background: #2e2e2e url(../images/footer-bg.jpg) no-repeat bottom;
    background-size: contain;
    color: #fff;
    font-size: 14px;
}

.footer-logo {
    margin-bottom: 1px;
}

.footer-map {
    padding-bottom: 60px;
}

.footer2 {
    background: #2e2e2e;
}

.footer .widget-title {
    color: #fff;
}

.footer .social-icon {
    padding: 10px 0 20px;
}


/* Latest Post */

.footer-widget .latest-post-image img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 4px solid rgba(255, 255, 255, .5);

}

.footer-widget .latest-post-content h4 a {
    color: #fff;
}

.latest-post-items {
    margin-bottom: 10px;
}

.latest-post-image img {
    width: 70px;
    height: 60px;
}

.footer-widget .post-meta,
.footer-widget .post-meta a {
    color: #fff;
}

.latest-post-content h4 {
    font-size: 14px;
    line-height: normal;
}


/* Image Gallery */

.footer-widget .img-gallery {
    margin-top: 5px;
    display: inline-block;
}

.img-gallery a.thumb-holder {
    overflow: hidden;
    position: relative;
}

.img-gallery a.thumb-holder img {
    margin: 0 15px 15px 0;
    display: inline-block;
    width: 95px;
    height: 85px;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.img-gallery a.thumb-holder:hover img {
    opacity: 0.7;
}


.footer2 .img-gallery a.thumb-holder img {
    width: 90px;
    height: 75px;
}


/* Footer about us */

.footer-about-us h4 {
    font-size: 16px;
    margin-bottom: 0;
    line-height: normal;
}

.subscribe {
    margin-top: 20px;
}

.subscribe input.form-control {
    border: 1px solid rgba(255, 255, 255, .1);
}

.subscribe .input-group-addon {
    background: none;
    border-radius: 0;
    border: 0;
    padding: 0;
}

.subscribe button {
    padding: 13px 20px;
    color: #fff;
}

.subscribe button:hover {
    background: #222;
    color: #fff;
}

.subscribe button i {
    font-size: 20px;
}


/* Footer links */

.footer ul li {
    color: #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.footer ul.arrow li {
    width: 50%;
    float: left;
}

ul.arrow li:before {
    content: "\f105";
    font-family: FontAwesome;
    margin-right: 10px;
}

.footer ul li a {
    color: #fff;
}

/* Copyright
================================================== */

#copyright {
    padding: 30px 0;
    background: #191919;
    color: #fff;
}

.copyright-info {
    font-size: 16px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    max-width: 850px;
    margin: 1px auto 0;
    padding-top: 5px;
}

.copyright.angle:before {
    background: #191919;
    height: 50px;
    top: -25px;
    -webkit-transform: skew(0deg, -2deg);
    -moz-transform: skew(0deg, -2deg);
    -ms-transform: skewX(0deg) skewY(-2deg);
    -o-transform: skew(0deg, -2deg);
    transform: skew(0deg, -2deg);
}

.footer-social {
    position: relative;
    z-index: 10;
}

.footer-social .icon-pentagon i {
    font-size: 16px;
}

/* Footer sytle 2 */

.footer2 .social-icon {
    padding-bottom: 15px;
}

.footer2 .copyright-info {
    color: #323232;
    border-top: 1px solid #e7e7e7;
}


#back-to-top {
    right: 40px;
    top: auto;
    z-index: 10;
    -webkit-backface-visibility: hidden;
}

#back-to-top.affix {
    bottom: 60px;
}

#back-to-top .btn.btn-primary {
    border-radius: 100%;
    padding: 0;
    font-size: 18px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, .3);
    border: 2px solid transparent;
    color: #fff;
    opacity: .5;
}

#back-to-top .btn.btn-primary:hover {
    color: #fff;
    opacity: 1;
}


/* Sub pages
================================================== */

/* Banner area */

#banner-area {
    position: relative;
}

.banner-title-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
}

.banner-title-content h2 {
    color: #fff;
    font-size: 36px;
}

.banner-title-content .breadcrumb {
    background: none;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

.banner-title-content .breadcrumb a:hover {
    color: #ccc;
}

/* About Us */

.about-message {
    background: #f4f4f4;
    min-height: 374px;
}

.about-message ul li a {
    color: #6A6A6A;
}



/* Services */

/* Call to Action */

.call-to-action {
    color: #fff;
    padding: 40px 0;
}

.call-to-action.dark {
    background: #2a2d32;
}

.call-to-action h3 {
    color: #fff;
    float: left;
    margin: 10px 0 0;
    font-size: 20px;
}

.call-to-action .btn.btn-primary.white:hover {
    background: #000;
}

.call-to-action .btn.btn-primary.solid {
    margin-left: 15px;
}

/* Career */

.panel.panel-default {
    margin-top: 20px;
}

h4.panel-title {
    position: relative;
    padding-left: 30px;
}

h4.panel-title a:before,
h4.panel-title a.collapsed:before {
    font-family: FontAwesome;
    position: absolute;
    z-index: 0;
    font-size: 16px;
    left: 0;
    padding: 0 5px;
    text-align: center;
}

h4.panel-title a:before {
    content: "\f056";
}

h4.panel-title a.collapsed:before {
    content: "\f055";
}

.panel-body ul {
    padding-left: 35px;
}

.panel-group .btn.btn-primary.solid:hover {
    color: #333;
}


/* Testimonial */

.ts-testimonial-content {
    position: relative;
    padding: 30px 30px 15px 30px;
    border-width: 1px;
    border-style: solid;
    border-color: #e7e7e7;
    margin-bottom: 40px;
}


.ts-testimonial-content:after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 45px;
    border-style: solid;
    border-width: 40px 0px 0 30px;
    border-color: #e7e7e7 transparent;
    display: block;
    width: 0;
    z-index: 1;
}


.ts-testimonial-content img {
    float: left;
    width: 80px;
    height: 80px;
    border-radius: 100%;
}

.ts-testimonial-text {
    padding-left: 110px;
}

.ts-testimonial-author {
    position: absolute;
    bottom: -60px;
    left: 90px;
}

.ts-testimonial-author h3.name {
    font-size: 14px;
    margin: 10px 0 0;
}

.ts-testimonial-author h3 span {
    display: block;
    font-size: 13px;
    margin-top: -10px;
    text-transform: capitalize;
    color: #555;
}


/* Faq Page */

.faq-box {
    margin-bottom: 45px;
}

.faq-box h4 {
    margin-bottom: 25px;
}

/* 404 page */

.error-page .error-code {
    display: block;
    font-size: 150px;
    line-height: 150px;
    color: #333;
    margin-bottom: 20px;
    text-shadow: 5px 5px 1px rgba(0, 0, 0, .1);
}

.error-page .error-body .btn {
    margin-top: 30px;
    font-weight: 700;
}


/* Blog
================================================== */

/* Blog Listing */

.post {
    margin: 0 0 40px;
    padding: 0 0 40px;
    border-bottom: 1px solid #F5F5F5;
}

.post.post-last {
    border-bottom: 0;
}

.post-image-wrapper {
    margin-bottom: 20px;
    position: relative;
}

.blog-date {
    position: absolute;
    top: 50px;
    left: 0;
    color: #fff;
    border-radius: 0 25px 25px 0;
    padding: 5px 15px;
    font-weight: 700;
}

.blog-date a {
    color: #fff;
}

.post-footer .btn.btn-primary {
    font-size: 12px;
    padding: 8px 20px;
    margin-top: 15px;
}


/* Blog Single */



.post-meta {
    color: #959595;
    font-weight: 400;
    font-size: 13px;
}

.post-meta span {
    padding-right: 10px;
}

.post-meta a {
    color: #959595
}

.post-meta-author a,
.post-meta-cats a {
    color: #323232;
}

.entry-content {
    padding: 20px 0 10px;
}

/* Blog author */

.about-author {
    background: #f2f2f2;
    padding: 15px 20px;
    margin: 20px 0;
}

.author-img img {
    width: 120px;
    height: 120px;
    margin-right: 30px;
    border-radius: 100%;
    margin-top: 20px;
}

.author-url span a {
    color: #959595;
}

.author-info h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: normal;
}

.author-info h3 span {
    font-size: 14px;
    color: #959595;
    border-left: 1px solid #AFAFAF;
    padding-left: 8px;
    margin-left: 5px;
}

/* Blog post comments */

.comments-counter {
    font-size: 18px;
}

.comments-counter a {
    color: #323232;
}

.comments-list {
    list-style: none;
    margin: 0;
    padding: 20px 0;
}

.comments-list .comment {
    border-bottom: 1px solid #cecece;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.comments-list .comment.last {
    border-bottom: 0;
}

.comments-list img.comment-avatar {
    width: 84px;
    height: 84px;
    margin-right: 30px;
    border-radius: 100%;
}

.comments-list .comment-body {
    margin-left: 120px;
}

.comments-list .comment-author {
    margin-bottom: 0;
}

.comments-list .comment-date {
    font-style: italic;
    color: #959595;
    margin-bottom: 20px;
}

.comments-list .comment-reply {
    text-transform: uppercase;
    color: #323232;
}

.comments-reply {
    list-style: none;
    margin: 0 0 0 70px;
}

.comments-form .btn.btn-primary {
    padding: 10px 20px;
}

.comments-form label {
    font-weight: normal;
    color: #959595;
}

/* Sidebar */

.sidebar h3.widget-title {
    font-size: 18px;
    line-height: normal;
    margin-top: 0;
}

.sidebar .widget {
    margin-bottom: 40px;
}

.sidebar-right {
    padding-left: 20px;
}

/* Blog search */

.sidebar #search .input-group-btn .btn.btn-primary {
    padding: 11px 12px;
}


/*-- Blog tab widget --*/

.widget-tab .nav-tabs {
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #e7e7e7;
}

.widget-tab .nav-tabs>li:first-child {
    margin-left: 10px;
}

.widget-tab .nav-tabs>li>a {
    background: #f2f2f2;
    color: #323232;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    border-radius: 3px 3px 0 0;
    margin-right: -1px;
    border: 1px solid #e7e7e7;
    border-bottom: 0;
}

.widget-tab .nav-tabs>li.active>a {
    background: #fff;
    color: #323232;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 0;
}

.widget-tab .tab-content {
    border-top: 0;
    padding: 10px 0 0;
}

.widget-tab .posts-thumb img {
    display: block;
    width: 85px;
    height: 65px;
    margin-right: 20px;
}

.widget-tab .posts-avator img {
    display: block;
    width: 62px;
    height: 62px;
    margin-right: 20px;
    border-radius: 100%;
}

.widget-tab h4.entry-title {
    font-size: 11px;
    line-height: 15px;
    margin-bottom: 5px;
}

.widget-tab h4.entry-title a {
    color: #323232;
}

.widget-tab .post-meta span {
    padding-right: 5px;
}

.widget-tab ul.posts-list li {
    padding-bottom: 10px;
}


/*-- Blog category widget --*/

.widget-categories ul.category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-categories ul.category-list li {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dedede;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-categories ul.category-list li:hover {
    padding-left: 10px;
}

.widget-categories ul.category-list li a {
    color: #323232;
}

.widget-categories ul.category-list li:last-child {
    border-bottom: 0;
}

.widget-categories ul.category-list li .posts-count {}

/*-- Blog tags widget --*/

.widget-tags ul>li {
    float: left;
    margin: 6px;
}

.widget-tags ul>li a {
    background: #f2f2f2;
    color: #6A6A6A;
    display: block;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 25px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.widget-tags ul>li a:hover {
    color: #fff;
}

/* Landing page
================================================== */


/* Header */

.landing-header.header-bgnone {
    background: rgba(0, 0, 0, .8);
}

.landing-header.header-bgnone ul.navbar-nav>li:hover>a,
.landing-header.header-bgnone ul.navbar-nav>li.active>a {}

.img-responsivelogo {
    max-width: 110px !important;
}


.hero-section {
    height: 100%;
    background-image: url(../images/landing/main-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: top center;
    padding-bottom: 0;

    overflow: hidden;
}

/* Background variations for different pages */
.dojo-bg {
    background-image: url(../images/parallax/dojobackground.png) !important;
}

.empleo-bg {
    background-image: url(../images/parallax/empleoparallax.png) !important;
}

.hero-section .container {
    height: 100%;
}

.hero-content {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

.hero-text {
    display: table-cell;
    vertical-align: bottom;
    color: #fff;
    padding-right: 30%;
    width: 100%;
    padding-bottom: 10%;

}

.hero-title {
    font-family: 'DejaVu Sans Mono', monospace;
    font-size: 40px;
    line-height: 50px;
    color: #fff;
}

.hero-description {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
}

.hero-images {
    display: block;
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 50%;
    max-height: 100%;
}

.hero-images img {
    display: block;
    position: relative;
    max-height: 100%;
    width: auto;
}

.hero-buttons a.btn {
    color: #fff;
    padding: 15px 50px;
}

.hero-buttons a.btn.solid {
    margin-left: 10px;
}

.hero-buttons a i {
    margin-left: 5px;
}


/* Facts */

.landing_facts {
    color: #fff;
    padding: 50px 0;
}

/* ==================================================
   Home Features (index.html) - Enhanced cards
   ================================================== */
#features.features {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}

#features .col-md-4.col-sm-4 {
    margin-bottom: 20px;
}

#features .features-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#features .features-content:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #00395a, #39a2ba, #ffc400);
    opacity: 0.6;
}

#features .features-content:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 57, 90, 0.15);
}

#features .features-icon {
    font-size: 3em;
    color: #00395A;
    margin-bottom: 12px;
    display: block;
}

#features .features-content h3 {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 10px;
}

#features .features-content p {
    color: #6c757d;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    #features .features-content {
        padding: 24px;
        border-radius: 14px;
    }
    #features .features-icon {
        font-size: 2.4em;
    }
}

.landing_facts .facts i {
    font-size: 36px;
}

.landing_facts .facts-num span {
    font-size: 56px;
}



/* Video and video background */

.video-embed {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 */
    height: 0;
    background-color: #000000;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-background-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

iframe {
    border: 0;
}

@media (min-width: 768px) {
    .video-section {
        padding: 100px 0;
    }
}

@media (min-width: 992px) {
    .video-section {
        padding: 120px 0;
    }
}

/* Screenshot image */

.app-gallery .grid {
    display: block;
    margin: 0 15px 20px;
    padding: 5px;
}

.app-gallery figure.effect-oscar a {
    margin: 125px 5px 0;
}

.app-gallery figure.effect-oscar figcaption::before {
    border: 0;
}


/* Subscribe Form */

.newsletter-form {
    position: relative;
}

.newsletter-form button {
    position: absolute;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 14px 30px 12px !important;
}

.newsletter-form button:hover {
    color: #323232 !important;
}

/* Clients */

.landing_page_clients {
    padding-top: 30px;
}

/* Elements page
================================================== */

.testimonial.elements .testimonial-text,
.testimonial.elements .testimonial-content h3.name,
.testimonial.elements .testimonial-content h3 span {
    color: #323232;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial.elements .testimonial-slide.owl-theme .owl-controls .owl-page span {
    border: 1px solid #e7e7e7;
}



/* Style Swithcer
================================================== */

.style-switch-wrapper {
    position: fixed;
    top: 100px;
    right: -250px;
    width: 250px;
    height: auto;
    background-color: rgba(0, 0, 0, .75);
    border-bottom-right-radius: 4px;
    padding: 20px 20px;
    z-index: 1000;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
}

.style-switch-wrapper h3 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
}

.style-switch-wrapper.active {
    right: 0;
}

.style-switch-button {
    position: absolute;
    top: 0;
    right: 250px;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, .75);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    z-index: 1000;
    cursor: pointer;
}

.style-switch-button i {
    color: #FFF;
    position: relative;
    line-height: 1;
    top: 15px;
    left: 15px;
    font-size: 20px;
}

.style-switch-wrapper button {
    width: 30px;
    height: 30px;
    border-radius: 100% !important;
    margin-bottom: 5px;
    color: #fff;
    display: inline-block;
    padding: 0 !important;
    margin-right: 2px;
    border: 0 !important;
}

a.close-styler {
    color: #fff !important;
    padding: 7px 20px !important;
    margin-right: 6px;
}

.style-switch-wrapper button:active,
.style-switch-wrapper button:focus {
    border: 2px solid #FFF;
}

.style-switch-wrapper #preset1 {
    background-color: #49a2e7;
}

.style-switch-wrapper #preset2 {
    background-color: #81c83c;
}

.style-switch-wrapper #preset3 {
    background-color: #327cbc;
}

.style-switch-wrapper #preset4 {
    background-color: #ffc400;
}

.style-switch-wrapper #preset5 {
    background-color: #334F96;
}

.style-switch-wrapper #preset6 {
    background-color: #8C42BA;
}


/*=====================================================
    SECTION CTACT INFO
==========================================================*/
#section-contact-info {
    background: #F7F7F7;
    background: url("../images/footer-bg.jpg");
    background-size: cover;
    padding: 60px 0px;
}

.info-box {
    text-align: center;
    color: #000000;
}

.info-box p {
    font-weight: 600;
    color: #000000;
}

.info-box i {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 20px;

}

/*=====================================================
    SECTION footer
==========================================================*/
#section-footer {
    padding: 60px 0px;
    border-bottom: 20px solid #2a2d32;

}

.footer-logo {
    /*color: #199AD9;*/
}

.footer-desc {}

.footer-desc p {
    width: 60%;
    margin: 1px auto;
}

.footer-desc .copy {
    letter-spacing: 4px
}

.info-box a {
    color: #000000;

}

.footer-desc a {
    color: #000000;
}

ul.checkic li:before {
    content: "\f00c";

}

.features-content {

    font-size: 55px;
}

.features-content p {

    text-align: justify;
}

/* Lista de Próximos Pasos en empleo.html */
.next-steps-list {
    font-size: 18px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 20px auto;
    padding-left: 20px;
    list-style: disc inside;
}

/* Tarjetas de Ofertas de Empleo */
.job-offer-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.job-offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: #007bff;
}

.job-offer-card .features-icon {
    margin-bottom: 20px;
}

.job-offer-card h3 {
    margin-bottom: 20px;
    color: #007bff;
}

.job-details p {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.job-details strong {
    color: #495057;
}

.job-offer-card .btn {
    margin-top: 20px;
    width: 100%;
}

/* Responsive para tarjetas de empleo */
@media (max-width: 768px) {
    .job-offer-card {
        margin-bottom: 30px;
    }
}

/*=====================================================
    ESTILOS PARA EL ACORDEÓN DEL DOJO
==========================================================*/

.accordion {
    max-width: 1140px;
    margin: 20px auto;
}

.accordion-item {
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    width: 100%;
    padding: 22px 25px;
    text-align: left;
    background: #f8f9fa;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    color: #495057;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.accordion-header:hover {
    background: #e9ecef;
    color: #007bff;
}

.accordion-header i {
    transition: transform 0.3s ease;
    color: #6c757d;
}

.accordion-content {
    display: none;
    padding: 25px;
    background: white;
    border-top: 1px solid #e9ecef;
    line-height: 1.8;
    color: #495057;
    font-size: 1.1rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active .accordion-content {
    display: block;
    max-height: 500px;
    padding: 25px;
}

.accordion-item.active .accordion-header {
    background: #007bff;
    color: white;
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
    color: white;
}

/* Mejoras adicionales para el acordeón */
.accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.accordion-header span {
    flex: 1;
    margin-right: 15px;
}

.accordion-content p {
    margin: 0;
    text-align: justify;
    font-size: 1.8rem;
    line-height: 1.8;
    color: #495057;
}

/* Asegurar que el acordeón funcione correctamente */
.accordion-content {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.accordion-item.active .accordion-content {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para el icono de flecha */
.accordion-header i.fa-angle-down {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-header i.fa-angle-down {
    transform: rotate(180deg);
}

/* Estilos adicionales para mejorar el acordeón */
.accordion {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-header:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Animación de entrada para el contenido */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accordion-item.active .accordion-content {
    animation: slideDown 0.3s ease forwards;
}

/* Estilos para el formulario de pre-inscripción */
.step {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.step label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
    display: block;
}

.step .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.step .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.step .btn {
    margin-top: 20px;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 8px;
}

/* Estilos para los resultados */
#results {
    background: #f8f9fa;
}

#results .plan {
    background: white;
    border: 2px solid #007bff;
    border-radius: 10px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

#results .plan-price {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 20px;
}

#results .plan-name {
    font-size: 18px;
    color: #495057;
    margin-bottom: 15px;
    display: block;
}

/*=====================================================
    ESTILOS PARA LA SECCIÓN METODOLOGÍA DEL DOJO
==========================================================*/

/* Estilos para los planes de metodología */
.plan.featured .plan-price {
    background: #39a2ba;
}

.plan.featuredORA .plan-price {
    background: #c6713b;
}

.plan.featuredYELL .plan-price {
    background: #ebc026;
}

.plan.featuredBLUED .plan-price {
    background: #00395a;
}

.plan.featuredYELL {
    background-color: rgba(235, 192, 38, 0.2);
}

.featuredYELL:hover {
    background-color: rgba(235, 192, 38, 1);
}

.plan.featuredORA {
    background-color: rgba(198, 113, 59, 0.2);
}

.featuredORA:hover {
    background-color: rgba(198, 113, 59, 1);
}

.plan.featured {
    background-color: rgba(57, 162, 186, 0.2);
}

.plan.featured:hover {
    background-color: rgba(57, 162, 186, 1);
}

.plan.featuredBLUED {
    background-color: rgba(0, 57, 90, 0.2);
}

.featuredBLUED:hover {
    background-color: rgba(0, 57, 90, 1);
    color: #fff;
}

.featured p,
.featuredORA p,
.featuredYELL p,
.featuredBLUED p {
    padding: 10px 5px !important;
}

/* Estilos base para la altura de los planes */
.planhe {
    height: 330px;
}

/* Estilos modernos para la sección de pricing */
.plan-modern {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    margin: 20px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-modern::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan-modern:hover::before {
    opacity: 1;
}

.plan-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.plan-modern .plan-icon {
    margin-bottom: 20px;
}

.plan-modern .plan-icon i {
    font-size: 48px;
    color: #667eea;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.plan-modern:hover .plan-icon i {
    transform: scale(1.1);
    color: #fff;
}

.plan-modern .plan-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.plan-modern:hover .plan-title {
    color: #fff;
}

.plan-modern .plan-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.plan-modern .plan-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    transition: all 0.3s ease;
}

.plan-modern:hover .plan-content p {
    color: #fff;
}

/* Estilos específicos para cada cuadro */
.plan-modern-nosotros .plan-icon i {
    color: #ebc026;
}

.plan-modern-nosotros::before {
    background: linear-gradient(45deg, #ebc026 0%, #f39c12 100%);
}

.plan-modern-mision .plan-icon i {
    color: #c6713b;
}

.plan-modern-mision::before {
    background: linear-gradient(45deg, #c6713b 0%, #e67e22 100%);
}

.plan-modern-vision .plan-icon i {
    color: #39a2ba;
}

.plan-modern-vision::before {
    background: linear-gradient(45deg, #39a2ba 0%, #3498db 100%);
}

.plan-modern-estado .plan-icon i {
    color: #00395a;
}

.plan-modern-estado::before {
    background: linear-gradient(45deg, #00395a 0%, #2c3e50 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .plan-modern {
        margin: 15px 0;
        padding: 30px 20px;
        height: auto;
        min-height: 280px;
    }

    .plan-modern .plan-icon i {
        font-size: 36px;
    }

    .plan-modern .plan-title {
        font-size: 24px;
    }

    .plan-modern .plan-content p {
        font-size: 14px;
    }
}

/* ==================================================
   Horizontal Menu Styles - Overview Section
   ================================================== */

.horizontal-menu-wrapper {
    position: relative;
    margin: 30px 0;
}

.horizontal-menu-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #00395A #f8f9fa;
    position: relative;
}

.horizontal-menu-container::-webkit-scrollbar {
    height: 8px;
}

.horizontal-menu-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.horizontal-menu-container::-webkit-scrollbar-thumb {
    background: #00395A;
    border-radius: 4px;
}

.horizontal-menu {
    display: flex;
    min-width: max-content;
    gap: 20px;
    padding: 20px 0;
}

.menu-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 20px;
    padding: 25px 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #00395A;
}

.menu-item.active {
    background: linear-gradient(135deg, #00395A 0%, #2c3e50 100%);
    border-color: #00395A;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 57, 90, 0.3);
}

.menu-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.menu-icon {
    display: block;
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #00395A;
}

.menu-item.active .menu-icon {
    color: white;
}

.menu-item.active h3 {
    color: white !important;
}

.menu-item h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* Flechas de scroll */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    background: rgba(0, 57, 90, 0.8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.4em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 15;
    border: 2px solid rgba(255, 255, 255, 0.2);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.scroll-arrow:hover {
    background: rgba(0, 57, 90, 0.95);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 57, 90, 0.4);
}

.scroll-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.scroll-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
    background: rgba(0, 57, 90, 0.4);
    transform: translateY(-50%) scale(0.9);
}

/* Efecto de desvanecimiento en los bordes - mejorado */
.horizontal-menu-wrapper::before,
.horizontal-menu-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 5;
}

.horizontal-menu-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.horizontal-menu-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}

.scroll-arrow-left {
    left: 10px;
}

.scroll-arrow-right {
    right: 10px;
}

.scroll-arrow i {
    color: white;
    font-size: 1.2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Ocultar flechas en dispositivos móviles donde el scroll táctil es más natural */
@media (max-width: 768px) {
    .scroll-arrow {
        display: none;
    }

    .horizontal-menu-container::before,
    .horizontal-menu-container::after {
        display: none;
    }
}

/* Colores específicos para cada menú item */
.menu-item[data-tab="tab_a"] .menu-icon {
    color: #ebc026;
}

.menu-item[data-tab="tab_a"]:hover {
    border-color: #ebc026;
}

.menu-item[data-tab="tab_a"].active {
    background: linear-gradient(135deg, #ebc026 0%, #f39c12 100%);
    border-color: #ebc026;
    box-shadow: 0 8px 25px rgba(235, 192, 38, 0.3);
}

.menu-item[data-tab="tab_b"] .menu-icon {
    color: #c6713b;
}

.menu-item[data-tab="tab_b"]:hover {
    border-color: #c6713b;
}

.menu-item[data-tab="tab_b"].active {
    background: linear-gradient(135deg, #c6713b 0%, #e67e22 100%);
    border-color: #c6713b;
    box-shadow: 0 8px 25px rgba(198, 113, 59, 0.3);
}

.menu-item[data-tab="tab_c"] .menu-icon {
    color: #39a2ba;
}

.menu-item[data-tab="tab_c"]:hover {
    border-color: #39a2ba;
}

.menu-item[data-tab="tab_c"].active {
    background: linear-gradient(135deg, #39a2ba 0%, #3498db 100%);
    border-color: #39a2ba;
    box-shadow: 0 8px 25px rgba(57, 162, 186, 0.3);
}

.menu-item[data-tab="tab_d"] .menu-icon {
    color: #00395A;
}

.menu-item[data-tab="tab_d"]:hover {
    border-color: #00395A;
}

.menu-item[data-tab="tab_d"].active {
    background: linear-gradient(135deg, #00395A 0%, #2c3e50 100%);
    border-color: #00395A;
    box-shadow: 0 8px 25px rgba(0, 57, 90, 0.3);
}

.menu-item[data-tab="tab_e"] .menu-icon {
    color: #8e44ad;
}

.menu-item[data-tab="tab_e"]:hover {
    border-color: #8e44ad;
}

.menu-item[data-tab="tab_e"].active {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border-color: #8e44ad;
    box-shadow: 0 8px 25px rgba(142, 68, 173, 0.3);
}

.tab-content-container {
    margin-top: 40px;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
}

.content-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #00395A 0%, #2c3e50 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5em;
    box-shadow: 0 4px 15px rgba(0, 57, 90, 0.3);
}

.content-text {
    flex: 1;
}

.content-text h3 {
    color: #333;
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: 600;
}

.content-text p {
    color: #666;
    font-size: 1.1em;
    line-height: 1.6;
    margin: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .horizontal-menu {
        gap: 15px;
        padding: 15px 0;
    }

    .menu-item {
        min-width: 180px;
        padding: 20px 25px;
    }

    .menu-item h3 {
        font-size: 1em;
    }

    .content-wrapper {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }

    .content-icon {
        width: 70px;
        height: 70px;
        font-size: 2em;
    }

    .content-text h3 {
        font-size: 1.5em;
    }

    .content-text p {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .menu-item {
        min-width: 160px;
        padding: 18px 22px;
    }

    .menu-item h3 {
        font-size: 0.9em;
    }

    .content-wrapper {
        padding: 25px 15px;
    }
}

/* ==================================================
   Estilos para las Ofertas de Empleo
   ================================================== */

#loadJobOffersBtn {
    transition: all 0.3s ease;
    margin: 20px 0;
}

#loadJobOffersBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#loadJobOffersBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#loadingSpinner {
    margin: 40px 0;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

#errorMessage {
    margin: 20px 0;
}

.job-offer-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
}

.job-offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.features-icon {
    color: #f39c12;
    font-size: 3em;
    margin-bottom: 20px;
    display: block;
}

.job-details p {
    margin-bottom: 8px;
    font-size: 14px;
}

.job-details strong {
    color: #2c3e50;
}

/* ==================================================
   Estilos para reducir espacios en dojo.html
   ================================================== */

/* Reducir padding de secciones principales */
#dojo .pricing,
#dojo .features,
#dojo .contact {
    padding: 30px 0 !important;
}

/* Reducir márgenes entre elementos dentro de las secciones */
#dojo .heading {
    margin-bottom: 20px;
}

#dojo .heading h1,
#dojo .heading h2 {
    margin-bottom: 10px;
}

#dojo .heading .title-desc {
    margin-top: 16px;
}

/* Reducir espacios en la sección de entrenamiento */
#entrenamientoinfo .features-content p {
    margin-bottom: 15px;
}

#entrenamientoinfo .features-content br {
    display: none;
}

/* Reducir espacios en el acordeón */
#accordeoninfo .accordion {
    margin-top: 20px;
}

#accordeoninfo .accordion-item {
    margin-bottom: 15px;
}

/* Reducir espacios en el formulario */
#ingpreinscripcion .form-group {
    margin-bottom: 20px;
}

#ingpreinscripcion .heading {
    margin-bottom: 25px;
}

/* Reducir espacios en la sección de metodología */
#metodologiavlop .plan {
    margin-bottom: 20px;
}

#metodologiavlop .planhe {
    padding: 20px 15px;
}

/* Reducir espacios en resultados */
#results .heading {
    margin-bottom: 20px;
}

/* Reducir espacios generales */
#dojo .gap-20 {
    height: 20px;
}

#dojo .gap-40 {
    height: 20px;
}

/* Reducir padding de contenedores */
#dojo .container {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Reducir espacios en hero section */
#dojo .hero-section {
    padding: 60px 0;
}

/* Reducir espacios en footer */
#dojo .footer {
    padding: 30px 0;
}

/* ==================================================
   Estilos para las tarjetas de características del Dojo
   ================================================== */

.dojo-feature-card {
    background: #ffffff;
    border: 1px solid #e8f4fd;
    border-radius: 12px;
    padding: 30px 35px;
    margin-bottom: 25px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.dojo-feature-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #28a745, #ffc107, #dc3545);
    opacity: 0.7;
}

.dojo-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
    border-color: #007bff;
}

.dojo-feature-card:last-child {
    margin-bottom: 0;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.feature-title {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.feature-title:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #28a745);
    border-radius: 1px;
}

.feature-description {
    color: #555;
    font-size: 1.8rem;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
    text-align-last: center;
}

/* Responsive para las tarjetas */
@media (max-width: 768px) {
    .dojo-feature-card {
        padding: 20px 20px;
        margin-bottom: 20px;
    }

    .feature-icon {
        font-size: 2.5rem;
    }

    .feature-title {
        font-size: 1.5rem;
    }

    .feature-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .dojo-feature-card {
        padding: 18px 15px;
        margin-bottom: 18px;
    }

    .feature-icon {
        font-size: 2.2rem;
    }

    .feature-title {
        font-size: 1.3rem;
    }
}

/* ==================================================
   FOOTER GENÉRICO REUTILIZABLE
   ================================================== */

/* Footer moderno con 3 columnas */
.footer-modern {
    padding: 30px 0 !important;
    background: #2e2e2e;
    color: #fff;
    font-size: 14px;
}

.footer-modern .footer-columns {
    margin-bottom: 20px;
}

.footer-modern .footer-logo {
    text-align: center;
}

.footer-modern .footer-logo img {
    max-width: 140px;
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
}

.footer-modern .footer-logo p {
    color: #dddddd;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 0;
}

.footer-modern .features-content h3 {
    font-size: 14px;
    margin: 0 0 12px 0;
    color: #ffffff;
    border-bottom: 2px solid #f1c40f;
    padding-bottom: 6px;
    text-transform: uppercase;
    font-weight: bold;
}

.footer-modern .features-content p {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 6px;
    color: #dddddd;
}

.footer-modern .contact-info p {
    margin-bottom: 6px;
}

.footer-modern .quick-links p {
    margin-bottom: 6px;
}

.footer-modern .quick-links a {
    color: #dddddd;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-modern .quick-links a:hover {
    color: #f1c40f;
    text-decoration: none;
}

.footer-modern i.fa-solid {
    color: #f1c40f;
    margin-right: 5px;
}

.footer-modern hr {
    border-color: #444;
    margin: 20px 0 10px 0;
    opacity: 0.3;
}

.footer-modern .copyright-info {
    color: #999;
    font-size: 11px;
    margin: 0;
    text-align: center;
}

/* Mantener las columnas en línea centradas */
.footer-modern .footer-columns {
    margin-bottom: 20px;
}

/* Responsive para el footer moderno */
@media (min-width: 768px) {
    .footer-modern .col-md-4 {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .footer-modern .col-md-4 {
        text-align: center;
        margin-bottom: 20px;
    }
}

/* Language switcher dropdown (planet icon)
================================================== */
.lang-switcher {
    position: relative;
    display: inline-block;
}
.lang-trigger {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 15px 12px;
    font-size: 1.3em;
    line-height: 1;
    vertical-align: middle;
    transition: opacity 0.2s, color 0.2s;
}
.lang-trigger:hover,
.lang-trigger:focus {
    opacity: 0.85;
    outline: none;
    color: #ffc400;
}
.lang-trigger .fa-globe {
    font-size: 1.1em;
}
/* Header solid (after scroll) - darker icon */
.header-solid .lang-trigger {
    color: #333;
}
.header-solid .lang-trigger:hover,
.header-solid .lang-trigger:focus {
    color: #00395A;
}
.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 8px 0;
    min-width: 150px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    border-radius: 6px;
    display: none;
    z-index: 9999;
    border: 1px solid rgba(0,0,0,0.1);
}
.lang-switcher.open .lang-dropdown {
    display: block !important;
}
.lang-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Hide current language option so only the other two appear */
html[lang="es"] .lang-dropdown li:has(.lang-link-es) { display: none; }
html[lang="en"] .lang-dropdown li:has(.lang-link-en) { display: none; }
html[lang="fr"] .lang-dropdown li:has(.lang-link-fr) { display: none; }
.lang-dropdown a {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.15s;
    white-space: nowrap;
}
/* Flag images in language dropdown */
.lang-dropdown .lang-flag {
    display: inline-block;
    margin-right: 10px;
    width: 24px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: contain;
}
.lang-dropdown a:hover,
.lang-dropdown a:focus {
    background: #f0f4f8;
    color: #00395A !important;
}
/* Align trigger with nav items */
.navbar-nav > li.lang-switcher {
    display: flex;
    align-items: center;
}
.navbar-nav > li.lang-switcher > .lang-trigger {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}