/*
Author       : Syed Ekram.
Template Name: Accede - Consultancy HTML5 Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT US DESIGN
    05. START OUR MISSION AND COUNTER DESIGN
    06. START OUR SERVICE DESIGN
    07. START WHY CHOOSE US DESIGN
    08. START PORTFOLIO DESIGN
    09. START PROMOTION DESIGN
    10. START TEAM DESIGN
    11. START TESTIMONIAL DESIGN
    12. START BLOG DESIGN
    13. START PRICING TABLE DESIGN
    14. START COMPANY PARTNER LOGO DESIGN
    15. START CONTACT DESIGN
    16. START MAP DESIGN
    17. START NEWSLETTER DESIGN
    18. START FOOTER DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #777;
    overflow-x: hidden;
    margin: auto;
    background: #fff;
}

html,
body {
    height: 100%
}

h1,
h2,
h3,
h4,
h5,
h7,
h6 {
    color: #333;
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
}

a {
    font-family: "Montserrat",sans-serif;
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

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

    a:focus {
        outline: none;
        text-decoration: none;
    }

ul,
li {
    margin: 0;
    padding: 0;
}

fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.status-mes {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 7px solid rgba(0, 0, 0, 0.08);
    border-right: 7px solid rgba(0, 0, 0, 0.08);
    border-bottom: 7px solid rgba(0, 0, 0, 0.08);
    border-left: 7px solid #42c0d9;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.no-padding {
    padding: 0
}
/*END PRELOADER DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
    background: #42c0d9 none repeat scroll 0 0;
    border-radius: 5px;
    bottom: 5px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    height: 40px;
    line-height: 40px;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    position: fixed;
    right: 5px;
    text-align: center;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
}

    .topcontrol:hover {
        background: #222;
        color: #fff;
    }
/*END SCROLL TO TOP*/
.section-padding {
    padding: 120px 0
}
/*START SECTION TITLE DESIGN*/
.section-title {
    margin-bottom: 60px
}

    .section-title h2 {
        background: #42c0d9 none repeat scroll 0 0;
        border: 4px double #fff;
        font-size: 26px;
        color: #fff;
        margin: auto;
        padding: 10px 0;
        position: relative;
        text-transform: uppercase;
        /*width: 350px;*/
    }

@media only screen and (max-width:480px) {
    .section-title h2 {
        font-size: 24px;
        width: 300px;
    }
}

@media only screen and (max-width:320px) {
    .section-title h2 {
        font-size: 18px
    }
}

@media only screen and (max-width:768px) {
    .section-title p {
        font-size: 12px;
        padding: 0 2px;
    }
}

@media only screen and (max-width:375px) {
    .section-title p {
        margin-bottom: 0;
        padding: 0 15px;
    }
}

.section-title span {
    background: #42c0d9 none repeat scroll 0 0;
    display: block;
    position: relative;
    height: 2px;
    margin: 20px auto;
    width: 70px;
}

.section-title-white {
    position: relative;
    color: #fff !important;
}

h2.section-title-white {
    background: #fff none repeat scroll 0 0;
    border: 4px double #ddd;
    color: #333 !important;
}
/*END SECTION TITLE DESIGN*/
/*SECTION OVERLAY*/
.overlay {
    background: rgba(0,0,0,0.6) none repeat scroll 0 0
}
/*END SECTION OVERLAY*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02. START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/


.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}

    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        color: #42c0d9 !important;
        background-color: transparent;
    }

    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: #42c0d9 !important;
        background-color: transparent;
    }

.navbar-brand {
    padding: 0px
}

    .navbar-brand img {
        /*width: 150px;*/
        width: 100px;
        margin-left: 10px;
    }

@media only screen and (max-width:768px) {
    .navbar-brand img {
        width: 80px;
        margin-left: 5px;
    }
}

@media only screen and (max-width:480px) {
    .navbar-brand img {
        width: 60px;
        margin-left: 5px;
    }
}

@media only screen and (max-width:375px) {
    .navbar-brand img {
        width: 50px;
        margin-left: 5px;
    }
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #fff
}

.menu-top li a {
    color: #333 !important;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}

    .menu-top li a:hover {
        color: #42c0d9 !important
    }

@media only screen and (max-width:768px) {
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
    }

    .menu-top li a {
        font-size: 11px;
    }
}

@media only screen and (max-width:480px) {
    .menu-top {
        background-color: #fff
    }

    .navbar-default .navbar-nav > li > a {
        color: #313131 !important
    }
}

.navbar-default.menu-shrink {
    background-color: rgba(255,255,255,0.9);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    margin-top: 0px;
    width: 100%;
}

@media only screen and (max-width:480px) {
    .menu-top {
        color: #fff !important;
        margin-left: 0px;
    }
}

.navbar-default.menu-shrink li a {
    color: #313131 !important
}

    .navbar-default.menu-shrink li a:hover {
        color: #42c0d9 !important
    }

.navbar-default .navbar-toggle {
    background: #fff none repeat scroll 0 0
}

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        background-color: #fff
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #42c0d9
    }


#navigation li ul.sub-menu, #navigation ul li ul.sub-menu li ul.sub-menu {
    opacity: 0;
    position: absolute;
    top: 115%;
    transition: all .3s ease 0s;
    width: 228px;
    z-index: -99;
    visibility: hidden;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
    padding: 15px;
    left: 10px;
    background: #f5f5f5;
    list-style: none
}

#navigation ul li ul.sub-menu li ul.sub-menu {
    top: 0;
    left: 100%;
    transition: all .5s ease 0s;
    right: auto
}

#navigation ul li ul.sub-menu li {
    padding: 0;
    width: 100%;
    position: relative
}

#navigation ul li:hover ul.sub-menu {
    top: 100%;
    opacity: 1;
    z-index: 999;
    visibility: visible
}

#navigation ul.nav > li ul li:hover ul.sub-menu {
    opacity: 1;
    visibility: visible
}

#navigation ul li ul.sub-menu li a {
    color: #333 !important;
    cursor: pointer;
    display: block;
    padding: 13px 10px;
    font-weight: 400;
    text-transform: none;
    font-size: 14px
}

.about_single h4, .btn-light-bg, .btn-light-bg-two, .caption h2, .counter p, .hero-text h2, .single_feature h3, .single_service h4, .why_choose h3 {
    text-transform: uppercase
}

#navigation ul li:hover ul.sub-menu li a:hover {
    color: #fff !important;
    background: #42c0d9;
    text-decoration: none
}

@media only screen and (max-width:767px) {
    .navbar-collapse {
        margin-top: 15px
    }

    #navigation ul li a {
        position: inherit;
        color: #333
    }

    #navigation li ul.sub-menu, #navigation ul li ul.sub-menu li ul.sub-menu {
        opacity: 1;
        position: inherit;
        top: 0;
        transition: all .3s ease 0s;
        z-index: 1;
        visibility: visible;
        box-shadow: 0 0 2px 0 rgba(0,0,0,.2);
        padding: 15px;
        left: 0;
        background: #f5f5f5;
        list-style: none;
        width: 100%
    }

    #navigation ul li ul.sub-menu li ul.sub-menu {
        box-shadow: inherit !important;
        padding: 0 0 0 15px !important
    }

    #navigation ul li ul.sub-menu li {
        z-index: 1
    }

    #navigation ul li:hover ul.sub-menu {
        top: 0;
        opacity: 1;
        z-index: 999;
        visibility: visible
    }
}

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
#home-slider {
    overflow: hidden;
    position: relative;
}

.caption {
    color: #fff;
    left: 0;
    margin-top: -104px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    z-index: 15;
}

@media only screen and (max-width:480px) {
    .caption {
        top: 60%
    }
}

@media only screen and (max-width:375px) {
    .caption {
        top: 80%
    }
}

.caption h2 {
    color: #fff;
    font-size: 44px;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
}

.caption h7 {
    color: #fff;
    font-size: 65px;
    margin-bottom: 20px;
    margin-top: 0;
    text-transform: uppercase;
    line-height: 1.3em
}

@media only screen and (max-width:768px) {
    .caption h2 {
        font-size: 26px
    }

    .caption h7 {
        font-size: 46px
    }
}

@media only screen and (max-width:480px) {
    .caption h2 {
        font-size: 30px;
    }

    .caption h7 {
        font-size: 40px;
    }
}

@media only screen and (max-width:375px) {
    .caption h2 {
        font-size: 25px;
    }

    .caption h7 {
        font-size: 30px;
    }
}


.caption p {
    margin: auto auto 0px;
    width: 60%;
}

.caption a {
    margin: 30px 0 0 30px
}

@media only screen and (max-width:480px) {
    .caption a {
        margin: 30px 0 0 0px
    }
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition-property: opacity;
    transition-property: opacity;
    background-repeat: no-repeat;
    background-size: cover;
    height: 750px;
}

@media only screen and (max-width:1200px) {
    .carousel-fade .carousel-inner .item {
        width: auto;
        height: 750px;
    }
}

@media only screen and (max-width:900px) {
    .carousel-fade .carousel-inner .item {
        width: auto;
        height: 700px;
    }
}

@media only screen and (max-width:700px) {
    .carousel-fade .carousel-inner .item {
        width: auto;
        height: 500px;
    }
}

@media only screen and (max-width:480px) {
    .carousel-fade .carousel-inner .item {
        width: auto;
        height: 400px;
    }
}

@media only screen and (max-width:375px) {
    .carousel-fade .carousel-inner .item {
        width: auto;
        height: 280px;
    }
}




.carousel-fade .carousel-inner .item:after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    bottom: 0;
    content: " ";
    left: 0;
    opacity: 0.7;
    position: absolute;
    right: 0;
    top: 0;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        z-index: 1;
    }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}

.carousel-fade .carousel-control {
    z-index: 2
}

.left-control,
.right-control {
    background: #42c0d9 none repeat scroll 0 0;
    border-radius: 30px;
    color: #fff;
    font-size: 24px;
    height: 51px;
    line-height: 48px;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 51px;
    z-index: 20;
}

@media only screen and (max-width:480px) {
    .left-control,
    .right-control {
        display: none
    }
}

.left-control {
    left: -51px
}

.right-control {
    right: -51px
}

    .left-control:hover,
    .right-control:hover {
        background-color: #fff;
        color: #42c0d9;
    }

#home-slider:hover .left-control {
    left: 30px
}

#home-slider:hover .right-control {
    right: 30px
}

#home-slider .fa-angle-down {
    position: absolute;
    left: 50%;
    bottom: 50px;
    color: #fff;
    display: inline-block;
    width: 24px;
    margin-left: -12px;
    font-size: 24px;
    line-height: 24px;
    z-index: 999;
    -webkit-animation: bounce 3000ms infinite;
    animation: bounce 3000ms infinite;
}

.btn-light-bg {
    background: #42c0d9 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: #fff;
    padding: 13px 35px;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

    .btn-light-bg:hover,
    .btn-light-bg:focus {
        background: #fff;
        color: #333;
    }

@media only screen and (max-width:375px) {
    .btn-light-bg {
        padding: 13px 45px;
    }
}

.btn-light-bg-two {
    background: #fff none repeat scroll 0 0;
    color: #333;
    padding: 13px 35px;
    border: medium none;
    border-radius: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

    .btn-light-bg-two:hover,
    .btn-light-bg-two:focus {
        background: #42c0d9;
        color: #fff;
    }

/*START HOME HTML5 VIDEO AND YOUTUBE VIDEO DESIGN*/
.home_video {
    height: 750px;
    position: relative;
}

    .home_video:before {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
        content: "";
        left: 0;
        top: 0;
    }
/*START HTML5 VIDEO*/
.html-video {
    top: 0%;
    left: 0%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-caption {
    position: absolute;
    top: 33%;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 15;
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

    .slider-caption p {
        width: 60% !important;
    }

video {
    min-width: 100%
}
/*END HTML5 VIDEO*/
.hero-text {
    padding-top: 250px;
}

    .hero-text h2 {
        color: #fff;
        font-size: 44px;
        margin-bottom: 20px;
        margin-top: 0;
        text-transform: uppercase;
    }

@media only screen and (max-width:768px) {
    .hero-text h2 {
        font-size: 26px
    }
}

@media only screen and (max-width:480px) {
    .hero-text h2 {
        font-size: 30px;
        line-height: 40px;
    }
}

@media only screen and (max-width:320px) {
    .hero-text h2 {
        font-size: 24px
    }
}

.hero-text p {
    margin: auto auto 0px;
    width: 90%;
    color: #fff;
}

.hero-text a {
    margin: 30px 0 0 30px
}

@media only screen and (max-width:480px) {
    .hero-text a {
        margin: 30px 0 0 0px
    }
}
/*END HOME HTML5 VIDEO AND YOUTUBE VIDEO DESIGN*/
.carousel-indicators li {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #fff;
    border-radius: 0;
    height: 6px;
    margin: 0 1px;
    width: 20px;
}

.carousel-indicators .active {
    height: 6px;
    margin: 0 1px;
    width: 20px;
    border: 1px solid #42c0d9;
    background: #42c0d9 none repeat scroll 0 0;
}

.carousel-indicators {
    bottom: -220px
}

@media only screen and (max-width:480px) {
    .carousel-indicators {
        bottom: -60px
    }
}
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/
.about_single {
    padding: 0px 13px 0;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

@media only screen and (max-width:768px) {
    .about_single {
        margin-bottom: 30px
    }
}

.about_single h4 span {
}

.about_single h4 {
    color: #333;
    font-weight: 600;
    margin-top: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

    .about_single h4 span {
        color: #eaeaea;
        font-size: 74px;
        margin-right: 10px;
    }

.about_single p {
    margin-bottom: 0;
}

.about_image {
    margin-top: 60px
}
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT US DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 05.START OUR MISSION AND COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.why_choose_us {
    position: relative;
}

    .why_choose_us:before {
        background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.single_feature {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    border-radius: 3px;
    padding: 30px;
}

    .single_feature i {
        background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        font-size: 26px;
        height: 60px;
        line-height: 62px;
        position: relative;
        text-align: center;
        width: 60px;
        z-index: 3;
    }

    .single_feature:hover i {
        color: #fff
    }

    .single_feature h3 {
        color: #fff;
        font-size: 20px;
        margin-bottom: 0;
        text-transform: uppercase;
    }

    .single_feature span {
        background: #fff none repeat scroll 0 0;
        display: block;
        height: 2px;
        margin: 20px auto;
        width: 80px;
    }

    .single_feature p {
        margin-bottom: 0;
        color: #fff;
    }

.carousel-indicators li {
    border: 1px solid #fff;
    border-radius: 12px;
    height: 12px;
    margin: 0 1px;
    width: 12px;
    background: #fff;
}

.carousel-indicators .active {
    background-color: #42c0d9;
    height: 12px;
    margin: 0 1px;
    width: 12px;
}

.site-wrapper {
    margin-bottom: 65px
}

#why_choose {
    margin-bottom: 70px
}

    #why_choose .carousel-indicators {
        bottom: -80px
    }

#testimonial_slide {
    margin-bottom: 70px
}

    #testimonial_slide .carousel-indicators {
        bottom: -80px
    }

.carousel-control {
    display: none
}
/*START COUNT DOWN DESIGN*/
.counter_feature {
    margin-top: 60px
}

.counter {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    padding: 30px 18px;
    position: relative;
}

@media only screen and (max-width:768px) {
    .counter {
        margin-bottom: 20px
    }
}

@media only screen and (max-width:360px) {
    .counter {
        padding: 20px
    }
}

.counter_icon {
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 12px;
}

.counter i {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    border-radius: 30px;
    color: #fff;
    font-size: 22px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}

.counter h2 {
    color: #fff;
    margin-bottom: 0;
    margin-top: 8px;
    overflow: hidden;
}

@media only screen and (max-width:320px) {
    .counter h1 {
        font-size: 30px
    }
}

.counter p {
    font-family: "Montserrat",sans-serif;
    color: #fff;
    font-size: 13px;
    margin-bottom: 0;
    overflow: hidden;
    text-transform: uppercase;
}

@media only screen and (max-width:768px) {
    .counter p {
        font-size: 13px
    }
}

@media only screen and (max-width:360px) {
    .counter p {
        font-size: 12px
    }
}

@media only screen and (max-width:320px) {
    .counter p {
        font-size: 14px
    }
}
/*END COUNT DOWN DESIGN*/
/*
* ----------------------------------------------------------------------------------------
* 05.END OUR MISSION AND COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 06.START OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.our_service {
    background: #f7f7f7
}

.single_service {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #eee;
    margin-left: -1px;
    margin-top: -1px;
    padding: 40px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    position: relative;
}

    .single_service:hover {
        box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }

    .single_service i {
        font-size: 40px;
        padding-bottom: 20px;
        color: #42c0d9;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }

    .single_service h4 {
        color: #333;
        margin: 0;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-size: 16px;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }

    .single_service p {
        margin-bottom: 0;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }
/*
* ----------------------------------------------------------------------------------------
* 06.END OUR SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 * 07.START WHY CHOOSE US DESIGN
 * ----------------------------------------------------------------------------------------
*/
.why_choose {
    margin-bottom: 60px
}

@media only screen and (max-width:480px) {
    .why_choose {
        margin-top: 60px
    }
}

.why_choose h3 {
    background: #42c0d9 none repeat scroll 0 0;
    border: 4px double #eee;
    color: #fff;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 250px;
}

.why_choose p {
    margin-bottom: 0;
    text-align: center;
}

.according-area {
    margin-top: 120px
}

.panel-default .panel-heading {
    background-color: #42c0d9;
    border-bottom: 1px solid #2fb3cd;
    border-color: #2fb3cd;
    color: #fff;
    font-size: 16px;
    padding: 16px;
}

.panel-group .panel + .panel {
    margin: 0;
    border: none;
    border-bottom: 0px;
}

.panel-group .panel {
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
}

.panel-body {
    border-radius: 0;
    padding: 30px;
}

.panel-heading {
    border-radius: 0px
}

.panel-title a {
    color: #fff;
    display: block;
    font-family: montserrat,sans-serif;
    font-weight: 400;
    text-transform: capitalize;
}

@media only screen and (max-width:360px) {
    .panel-title {
        font-size: 12px
    }
}

.panel-title a:after {
    content: "\f067";
    font: 18px fontAwesome;
    float: left;
    margin-right: 25px;
    margin-top: 2px;
}

.panel-title a:after {
    content: "\f068";
    font: 18px fontAwesome;
    float: left;
    margin-right: 25px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    height: 49px;
    width: 49px;
    margin-left: -16px;
    margin-top: -16px;
    line-height: 55px;
    text-align: center;
}

.panel-title a.collapsed:after {
    content: "\f067";
    font: 18px fontAwesome;
    float: left;
    margin-right: 25px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #fff;
    height: 49px;
    width: 49px;
    margin-left: -16px;
    margin-top: -16px;
    line-height: 55px;
    text-align: center;
}
/*
 * ----------------------------------------------------------------------------------------
 * 07.END WHY CHOOSE US DESIGN
 * ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 *  08.START PORTFOLIO DESIGN
 * ----------------------------------------------------------------------------------------
*/
.portfolio-filters {
    margin-bottom: 60px
}

    .portfolio-filters li.active {
        background-color: #42c0d9;
        border-color: #42c0d9;
        color: #fff;
    }

    .portfolio-filters li {
        border: 1px solid #eee;
        color: #161616;
        cursor: pointer;
        display: inline-block;
        font-family: montserrat;
        font-weight: 400;
        margin-right: 5px;
        padding: 8px 30px;
        text-transform: uppercase;
        -webkit-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

@media only screen and (max-width:480px) {
    .portfolio-filters li {
        padding: 8px 24px;
        margin-bottom: 10px
    }
}

.portfolio-filters li:hover {
    background: #42c0d9;
    color: #fff;
    border: 1px solid #42c0d9;
}

.portfolio-items-list {
    margin: 0
}

.portfolio-item {
    position: relative;
    display: none;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    padding: 0 15px;
    text-align: center;
    margin-bottom: 30px;
}

    .portfolio-item a {
        cursor: url(../img/pointer.png),crosshair
    }

.hover-overlay {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

    .hover-overlay img {
        -webkit-transition: all 600ms;
        transition: all 600ms;
    }

.overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    text-align: center;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

    .overlay-content h4 {
        color: #fff;
        font-size: 18px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    .overlay-content h5 {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

.item-overlay {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(66, 192, 217, .75);
    -webkit-transition: opacity 400ms ease-out;
    transition: opacity 400ms ease-out;
}

.hover-overlay:hover > img {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
}

.hover-overlay:hover .item-overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
}

.portfolio-item:hover .overlay-content {
    bottom: 42%;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
}

.btn-portfolio-bg {
    border: 1px solid #eee;
    border-radius: 30px;
    color: #333;
    padding: 10px 30px;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

    .btn-portfolio-bg:hover,
    .btn-portfolio-bg:focus {
        background: #42c0d9;
        border: 1px solid #42c0d9;
        color: #fff;
    }
/*
 * ----------------------------------------------------------------------------------------
 *  08.END PORTFOLIO DESIGN
 * ----------------------------------------------------------------------------------------
*/
/*
 * ----------------------------------------------------------------------------------------
 * 09.START PROMOTION DESIGN
 * ----------------------------------------------------------------------------------------
*/
.promotions {
    padding: 100px 0;
    position: relative;
}

    .promotions:before {
        background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.promotion_content {
}

    .promotion_content h1 {
        color: #fff;
        margin-top: 0;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

    .promotion_content p {
        color: #fff;
        margin-bottom: 26px;
    }

    .promotion_content a {
        background: #42c0d9 none repeat scroll 0 0;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        font-size: 16px;
        overflow: hidden;
        padding: 14px 40px;
        text-transform: uppercase;
        transition: all 0.2s ease 0s;
    }

        .promotion_content a:hover,
        .promotion_content a:focus {
            color: #333;
            background: #fff;
        }
/*
 * ----------------------------------------------------------------------------------------
 * 09.END PROMOTION DESIGN
 * ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 10.START TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
.our_team {
    background: #f9f9f9 none repeat scroll 0 0
}

.flexslider {
    border: medium none;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    margin: 0;
}

    .flexslider .testi-slider-item {
        padding: 30px 60px
    }

.team_img {
    float: left;
    margin-right: 20px;
    width: 250px;
}

@media only screen and (max-width:480px) {
    .team_img {
        float: none;
        margin-bottom: 20px;
        width: 100%;
    }
}

.team_img img {
    border: 4px solid #eee
}

.flexslider .testi-slider-item h6 {
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 0;
    TExt-transform: uppercase;
}

.flexslider .testi-slider-item p {
    margin-bottom: 0
}

@media only screen and (max-width:360px) {
    .flexslider .testi-slider-item p {
        line-height: 24px;
        font-size: 14px;
    }
}

.flex-viewport {
    max-height: 350px;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

@media only screen and (max-width:768px) {
    .flex-viewport {
        max-height: 500px;
    }
}

@media only screen and (max-width:480px) {
    .flex-viewport {
        max-height: 1000px;
    }
}

.flex-direction-nav a {
    background: #42c0d9 none repeat scroll 0 0;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    display: block;
    line-height: 0;
    margin: -20px 0 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    overflow: hidden;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: none !important;
    top: 50%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .flex-direction-nav a i {
        display: inline-block;
        font-size: 20px;
    }

    .flex-direction-nav a:before {
        display: none
    }

    .flex-direction-nav a.flex-next:before {
        display: none
    }

.flex-control-nav {
    display: none
}
/* START SKILL DESIGN */
.skills {
    margin-top: 10px;
    overflow: hidden;
    width: 500px;
}

@media only screen and (max-width:768px) {
    .skills {
        width: 320px;
    }
}

@media only screen and (max-width:480px) {
    .skills {
        width: 100%;
    }
}

.progress-bar-text {
    color: #333;
    font-family: "Montserrat",sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}

    .progress-bar-text span {
        float: right
    }

.progress-bar {
    background: #e8e8e9 none repeat scroll 0 0;
    box-shadow: 0 0 0;
    height: 4px;
    margin: 0 0 20px;
    position: relative;
    width: 100%;
}

    .progress-bar > span {
        background: #42c0d9 none repeat scroll 0 0;
        display: block;
        height: 100%;
        width: 0;
    }
/* END SKILL DESIGN */
/*START TEAM SOCIAL*/
.team_social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

@media only screen and (max-width:768px) {
    .team_social ul {
        margin-top: 15px;
    }
}

@media only screen and (max-width:480px) {
    .team_social ul {
        text-align: center
    }
}

.team_social ul li {
    margin: 2px;
    display: inline-block;
}

    .team_social ul li a {
        border: 1px solid #eee;
        border-radius: 30px;
        box-shadow: 0 0 0 7px transparent;
        color: #333;
        display: block;
        font-size: 16px;
        height: 45px;
        line-height: 25px;
        padding: 9px 12px;
        text-align: center;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
        width: 45px;
    }

@media only screen and (max-width:768px) {
    .team_social ul li a {
        font-size: 12px
    }
}

@media only screen and (max-width:360px) {
    .team_social ul li a {
        font-size: 14px
    }
}

@media only screen and (max-width:320px) {
    .team_social ul li a {
        font-size: 14px;
        height: 40px;
        width: 40px;
        line-height: 20px;
    }
}

.team_social ul li a:hover {
    color: #fff
}

.f_facebook:hover {
    background: #5D82D1;
    box-shadow: 0 0 0 0px #5D82D1;
    border: 1px solid #5D82D1;
}

.f_twitter:hover {
    background: #40BFF5;
    box-shadow: 0 0 0 0px #40BFF5;
    border: 1px solid #40BFF5;
}

.f_google:hover {
    background: #EB5E4C;
    box-shadow: 0 0 0 0px #EB5E4C;
    border: 1px solid #EB5E4C;
}

.f_linkedin:hover {
    background: #238CC8;
    box-shadow: 0 0 0 0px #238CC8;
    border: 1px solid #238CC8;
}

.f_youtube:hover {
    background: #CC181E;
    box-shadow: 0 0 0 0px #CC181E;
    border: 1px solid #CC181E;
}

.f_skype:hover {
    background: #00AFF0;
    box-shadow: 0 0 0 0px #00AFF0;
    border: 1px solid #00AFF0;
}
/*END TEAM SOCIAL*/
/*
* ----------------------------------------------------------------------------------------
* 10.END TEAM DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 11.START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial {
    position: relative
}

    .testimonial:before {
        background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.line-white {
    background: #fff none repeat scroll 0 0 !important
}

@media only screen and (max-width:480px) {
    .single_testimonial {
        margin-bottom: 30px;
        overflow: hidden;
    }
}

.testimonial_text {
    background: #fff none repeat scroll 0 0;
    margin-bottom: 30px;
    padding: 30px;
}

    .testimonial_text p {
        margin-bottom: 0px
    }

.testimonial_img img {
    border-radius: 100px;
    float: left;
    height: 120px;
    margin-right: 20px;
    width: 120px;
    border: 4px solid #fff;
}

.testimonial_img h4 {
    color: #fff;
    padding-top: 36px;
    text-transform: uppercase;
    margin: 0;
    overflow: hidden;
}

.testimonial_img h5 {
    color: #fff;
    overflow: hidden;
    margin-bottom: 0;
    text-transform: capitalize;
}
/*
* ----------------------------------------------------------------------------------------
* 11.END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 12.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.blog-post {
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width:768px) {
    .blog-post {
        margin-bottom: 40px
    }
}

.blog-post h4 {
    border-bottom: 1px solid #eee;
    margin: 20px 0;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.blog-post .tittle-post:hover {
    color: #42c0d9
}

.blog-post p {
    margin-bottom: 20px
}

.blog-post .post-bt {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
}

    .blog-post .post-bt span {
        color: #42c0d9;
        font-weight: 700;
    }

.blog-post .post-info {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 8px 0;
    position: relative;
}

.blog-post .post-img {
    position: relative;
    overflow: hidden;
}

    .blog-post .post-img img {
        width: 100%
    }

.blog-post iframe {
    border: medium none;
    height: 350px;
    width: 100%;
}

.blog-post .post-info li {
    display: inline-block;
    margin-right: 20px;
}

@media only screen and (max-width:360px) {
    .blog-post .post-info li {
        margin-right: 8px;
    }
}

.blog-post .post-info li i {
    margin-right: 10px;
    font-size: 14px;
}

.blog-post .post-info li .date {
    background: #42c0d9 none repeat scroll 0 0;
    color: #fff;
    float: right;
    font-size: 16px;
    font-family: montserrat,sans-serif;
    padding: 6px 10px 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: -26px;
    width: 77px;
}

.btn-blog-bg {
    border: 1px solid #eee;
    border-radius: 30px;
    color: #333;
    font-size: 14px;
    padding: 10px 30px;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

    .btn-blog-bg:hover,
    .btn-blog-bg:focus {
        background: #42c0d9;
        border: 1px solid #42c0d9;
        color: #fff;
    }
/*
* ----------------------------------------------------------------------------------------
* 12.END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 13.START PRICING TABLE DESIGN
* ----------------------------------------------------------------------------------------
*/
.single_pricing {
    border: 1px solid #eee;
    border-radius: 10px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

@media only screen and (max-width:480px) {
    .single_pricing {
        margin-bottom: 40px
    }
}

.single_pricing:hover {
    box-shadow: 0 21px 35px rgba(0, 0, 0, 0.2)
}

.single_pricing h3 {
    background: #42c0d9 none repeat scroll 0 0;
    border-radius: 23px 0 30px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 0 0 30px;
    padding: 15px 0;
    text-transform: uppercase;
}

.price {
    display: inline-block
}

    .price span {
        color: #42c0d9;
        display: block;
        font-family: montserrat,sans-serif;
        font-size: 52px;
    }

    .price h5 {
        margin: 20px 0 40px;
        font-weight: normal;
    }

.pricing-list {
    list-style: outside none none;
    margin-bottom: 0;
    text-align: center;
}

    .pricing-list li {
        border-bottom: 1px solid #eee;
        color: #161616;
        font-size: 14px;
        padding: 12px 0;
        -webkit-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

.pricing-btn {
    padding: 15px 0
}

.btn-pricing-bg {
    border: 1px solid #eee;
    border-radius: 30px;
    color: #333;
    display: inline-block;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    padding: 10px 20px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

    .btn-pricing-bg:hover,
    .btn-pricing-bg:focus {
        border: 1px solid #42c0d9;
        color: #42c0d9;
    }
/*
* ----------------------------------------------------------------------------------------
* 13.END PRICING TABLE ESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 14.START COMPANY PARTNER LOGO DESIGN
* ----------------------------------------------------------------------------------------
*/
.partner-logo {
    background: #42c0d9 none repeat scroll 0 0;
}

.partner {
    text-align: center
}

    .partner img {
        border: 1px solid rgba(255, 255, 255, 0.8);
        padding: 10px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }

        .partner img:hover {
            border: 1px solid #fff;
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        }
/*
* ----------------------------------------------------------------------------------------
* 14.END COMPANY PARTNER LOGO DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 15.START LOGIN DESIGN
* ----------------------------------------------------------------------------------------
*/
.login_area {
    position: relative
}

    .login_area:before {
        background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%
    }


/*
* ----------------------------------------------------------------------------------------
* 15.START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact_area {
    position: relative
}

    .contact_area:before {
        background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

.contact {
    background: #fff none repeat scroll 0 0;
    padding: 80px 60px;
    margin: 20px 0;
}

    .contact input {
        background: #f5f5f5 none repeat scroll 0 0;
        border: 1px solid #f5f5f5;
        border-radius: 0;
        box-shadow: none;
        color: #333;
        height: 45px;
        padding: 10px;
    }

    .contact textarea {
        background: #f5f5f5 none repeat scroll 0 0;
        border: 1px solid #f5f5f5;
        border-radius: 0;
        box-shadow: none;
        padding: 10px;
        color: #333;
        height: 200px;
    }

    .contact input:hover,
    .contact input:focus {
        border: 1px solid #42c0d9;
        box-shadow: none;
        outline: 0 none;
    }

    .contact textarea:hover,
    .contact textarea:focus {
        border: 1px solid #42c0d9;
        box-shadow: none;
        outline: 0 none;
    }

.success {
    background: #fff none repeat scroll 0 0;
    color: #42c0d9;
    font-weight: 700;
    padding: 20px;
    text-align: center;
}

.contact_address {
    padding-bottom: 80px;
    padding-top: 80px;
}

    .contact_address h3 {
        color: #fff;
        margin: 0 0 15px;
        text-transform: uppercase;
    }

    .contact_address p {
        color: #fff;
        margin-bottom: 30px;
    }

    .contact_address ul {
        list-style: none
    }

        .contact_address ul li {
            color: #fff;
            font-size: 16px;
            margin-bottom: 30px;
        }

            .contact_address ul li i {
                background: #42c0d9 none repeat scroll 0 0;
                border-radius: 30px;
                font-size: 18px;
                height: 45px;
                line-height: 45px;
                margin-right: 20px;
                text-align: center;
                width: 45px;
            }

.btn-advertencia-bg {
    background: #CC181E none repeat scroll 0 0 !important;
    border: 1px solid #f41818 !important;
    color: #fff !important;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    padding: 10px 30px !important;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

    .btn-advertencia-bg:hover,
    .btn-advertencia-bg:focus {
        background: #333 !important;
        border: 1px solid #333 !important;
        color: #fff;
    }

.btn-contact-bg {
    background: #42c0d9 none repeat scroll 0 0 !important;
    border: 1px solid #42c0d9 !important;
    color: #fff !important;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    padding: 10px 30px !important;
    text-transform: uppercase;
    transition: all 0.2s ease 0s;
}

    .btn-contact-bg:hover,
    .btn-contact-bg:focus {
        background: #333 !important;
        border: 1px solid #333 !important;
        color: #fff;
    }
/*
* ----------------------------------------------------------------------------------------
* 15.END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 16.START MAP DESIGN
* ----------------------------------------------------------------------------------------
*/
#map {
    height: 400px
}
/*
* ----------------------------------------------------------------------------------------
* 16.END MAP DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
*  17.START NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.newsletter_form {
    background: #171b1e
}

.newsletter_title h4 {
    color: #eaeaea;
    line-height: 25px;
    margin-bottom: 30px;
    margin-top: 0;
    text-transform: uppercase;
}

.newsletter input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 !important;
    box-shadow: none;
    color: #fff;
    font-family: montserrat,sans-serif;
    font-size: 14px !important;
    height: 45px;
}

    .newsletter input:hover,
    .newsletter input:focus {
        border: 1px solid #42c0d9;
        box-shadow: none !important;
    }

.btn-newsletter-bg {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    display: block;
    font-family: montserrat,sans-serif;
    font-size: 14px;
    margin: auto auto auto 20px;
    padding: 11px 40px;
    text-transform: uppercase;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

    .btn-newsletter-bg:hover,
    .btn-newsletter-bg:focus {
        background: #fff;
        color: #333;
    }
/*
* ----------------------------------------------------------------------------------------
* 17.END NEWSLETTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 18.START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.footer {
    background-color: #121315;
    padding: 30px 0;
}

@media only screen and (max-width:480px) {
    .footer_social {
        float: none !important;
        margin-top: 30px;
    }
}

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

@media only screen and (max-width:480px) {
    .footer_social ul {
        text-align: center
    }
}

.footer_social ul li {
    margin: 2px;
    display: inline-block;
}

    .footer_social ul li a {
        background: #1f2428 none repeat scroll 0 0;
        border-radius: 4px;
        color: #fff;
        display: block;
        font-size: 16px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
        width: 40px;
    }

@media only screen and (max-width:768px) {
    .footer_social ul li a {
        font-size: 12px
    }
}

@media only screen and (max-width:360px) {
    .footer_social ul li a {
        font-size: 14px
    }
}

@media only screen and (max-width:320px) {
    .footer_social ul li a {
        font-size: 14px;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
}

.footer_social ul li a:hover {
    color: #fff
}

.footer_facebook:hover {
    background: #5D82D1
}

.footer_twitter:hover {
    background: #40BFF5
}

.footer_google:hover {
    background: #EB5E4C
}

.footer_linkedin:hover {
    background: #238CC8
}

.footer_youtube:hover {
    background: #CC181E
}

.footer_skype:hover {
    background: #00AFF0
}

.footer_copyright {
    color: #fff;
    margin: 0;
    padding-top: 10px;
    font-size: 14px;
}

@media only screen and (max-width:480px) {
    .footer_copyright {
        float: none !important;
        text-align: center;
    }
}
/*
* ----------------------------------------------------------------------------------------
* 18.END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 19. Estilos Grupos de Preguntas
* ----------------------------------------------------------------------------------------
*/
#panel_encuesta {
    background: #f9f9f9;
    border: 1px #ccc solid;
    overflow: hidden;
}

#encuesta {
    overflow: hidden;
}

#titulo-encuesta {
    padding: 10px;
    font-size: 19px;
    font-weight: bold;
}

.tgrupo {
    background: #42c0d9;
    padding: 5px;
    color: #fff;
    clear: both;
    font-weight: bold;
    width: 100%;
}

#contenido-grupo {
    clear: both;
    width: 100%;
}

#pregunta {
    float: left;
    padding: 5px;
    font-family: Lucida Sans, Arial, Geneva, sans-serif;
    margin: 0;
}

#titulo-pregunta {
    font-weight: bold;
}



#semaforo {
    float: left;
    padding: 5px;
    /*font-size: 13px;
    font-weight: bold;*/
}

#puntaje {
    width: 130px;
    height: 130px;
    float: left;
}

#ContentPlaceHolder1_puntaje {
    width: 130px;
    height: 130px;
    float: left;
}

#PuntajeGrupo {
    width: 40px;
    height: 40px;
    float: right;
}

#ContentPlaceHolder1_value {
    font-weight: bold;
    font-size: 40px;
    margin: 40px;
}

#value {
    font-weight: bold;
    font-size: 40px;
    margin: 40px;
}

.icaAltamente {
    background: url('/imagenes/ica/altamente.png');
    color: #fff;
}

.icaRiesgo {
    background: url('/imagenes/ica/riesgo.png');
}

.icaLevemente {
    background: url('/imagenes/ica/levemente.png');
}

.icaAdecuado {
    background: url('/imagenes/ica/adecuado.png');
    color: #fff;
}

#altamente {
    width: 50px;
    background-color: #ff0000;
    color: #fff;
}

#riesgo {
    width: 50px;
    background-color: #ffcc00;
}

#levemente {
    width: 50px;
    background-color: #ffff00;
}

#adecuado {
    width: 50px;
    background-color: #009900;
    color: #fff;
}

.col2 {
    float: left;
}

.row2 {
    clear: both;
}


.cssCal {
    background-color: #304B90;
}

.cssTitle1 {
    font-size: 14px;
    color: #000000;
    background-color: #f2f2f2;
}

.cssHeading1 {
    font-size: 12px;
    color: #000000;
    background-color: #f2f2f2;
}

.cssDays1 {
    font-size: 14px;
    color: #000000;
    background-color: #FFFFFF;
}

.cssWeeks1 {
    font-size: 12px;
    color: #FFFFFF;
    background-color: #304B90;
}

.cssSaturdays1 {
    font-size: 14px;
    color: #000000;
    background-color: #FFFFFF;
}

.cssSundays1 {
    font-size: 14px;
    color: #D00000;
    background-color: #FFF0F0;
}

.cssHilight1 {
    font-size: 14px;
    color: #000000;
    background-color: #D2D2D2;
    cursor: pointer;
}


/*Este Estilo es para manejar un tipo de  radiobutton*/

body {
    /*display: -webkit-box;*/
    display: -ms-flexbox;
    /*display: flex;*/
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100vh;
}

.radio {
    margin: 0.5rem;
}

    .radio input[type="radio"] {
        position: absolute;
        opacity: 0;
    }

    .radio input[type="checkbox"] {
        position: absolute;
        opacity: 0;
    }

    .radio input[type="radio"] + .radio-label:before {
        content: '';
        background: #f4f4f4;
        border-radius: 100%;
        border: 1px solid #b4b4b4;
        display: inline-block;
        width: 1.4em;
        height: 1.4em;
        position: relative;
        top: -0.2em;
        margin-right: 1em;
        vertical-align: top;
        cursor: pointer;
        text-align: center;
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;
    }



    .radio input[type="radio"]:checked + .radio-label:before {
        background-color: #3197EE;
        box-shadow: inset 0 0 0 4px #f4f4f4;
    }


    .radio input[type="radio"]:focus + .radio-label:before {
        outline: none;
        border-color: #3197EE;
    }



    .radio input[type="radio"]:disabled + .radio-label:before {
        box-shadow: inset 0 0 0 4px #f4f4f4;
        border-color: #b4b4b4;
        background: #b4b4b4;
    }



    .radio input[type="radio"] + .radio-label:empty:before {
        margin-right: 0;
    }






/** {
    Estilo radio button actual
}*/

@keyframes click-wave {
    0% {
        height: 40px;
        width: 40px;
        opacity: 0.35;
        position: relative;
    }

    100% {
        /*height: 200px;
        width: 200px;
        margin-left: -80px;
        margin-top: -80px;
        opacity: 0;*/
    }
}

.labelRadio {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #777;
    margin: 10px;
    margin-left: 10px;
    margin-top: 5px;
}

.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    height: 30px;
    width: 30px;
    transition: all 0.15s ease-out 0s;
    color: #5D82D1;
    cursor: pointer;
    display: inline-flex;
    z-index: 1000;
    margin: 0.5rem;
    /*content: '';*/
    background: #aee5ee;
    /*border-radius: 100%;*/
    border: 0.5px solid rgba(18, 43, 64, 1);
    position: relative;
    top: -0.2em;
    margin-right: 1em;
    vertical-align: middle;
    text-align: left;
    -webkit-transition: all 250ms ease;
}

    .option-input:hover {
        background: #31bdd4;
    }

    .option-input:checked {
        /*background: #40e0d0;*/
        background-color: rgba(51, 122, 183, 1);
        box-shadow: inset 0 0 0 4px #f4f4f4;
    }



        .option-input:checked::before {
            border: 2px solid #fff;
            position: absolute;
            background-color: #c3e3fc;
        }
        /* content: '';*/

        .option-input:checked::after {
            -webkit-animation: click-wave 0.65s;
            -moz-animation: click-wave 0.65s;
            animation: click-wave 0.65s;
        }

    .option-input.radio {
        border-radius: 50%;
        height: 30px;
    }

        .option-input.radio::after {
            border-radius: 50%;
        }

body {
    /*display: -moz-box;
  
    display: box;*/
    /*background: #e8ebee;
    color: #9faab7;*/
    /*text-align: center;*/
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100vh;
}



    body label {
        display: block;
        line-height: 40px;
    }

/*Videos
    }*/

#main-section {
    margin-top: 70px;
}

.small-grid, .md-grid {
    margin-bottom: 25px;
}

.vid-img-holder {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.overlay-div:before {
    content: '';
    width: 1%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    display: inline-block;
    background: rgba(0,0,0,0.0);
    z-index: 1;
    transition: width 0.3s ease 0s, background 0.4s ease 0s;
}

.overlay-div:after {
    content: '';
    width: 1%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 50%;
    display: inline-block;
    background: rgba(0,0,0,0.0);
    z-index: 1;
    transition: width 0.3s ease 0s, background 0.4s ease 0s;
}

.vid-img-holder:hover .overlay-div:before, .vid-img-holder:hover .overlay-div:after, .latest-vid-img-container:hover .overlay-div:before, .latest-vid-img-container:hover .overlay-div:after, .bottom-vid-img-container .bottom-vid:hover .overlay-div:before, .bottom-vid-img-container .bottom-vid:hover .overlay-div:after {
    background: rgba(0,0,0,0.6);
    width: 50%;
}

.top-shadow {
    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,0.65) 42%, rgba(0,0,0,0.35) 68%, rgba(0,0,0,0) 98%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,0.65) 42%, rgba(0,0,0,0.35) 68%, rgba(0,0,0,0) 98%, rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 1%, rgba(0,0,0,0.65) 42%, rgba(0,0,0,0.35) 68%, rgba(0,0,0,0) 98%, rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    min-height: 20%;
    position: absolute;
    text-align: center;
    padding-top: 15px;
    width: 100%;
    transition: all 0.3s ease 0.1s;
    top: -30%;
    left: 0px;
    /*display: none;*/
    z-index: 10; /*transition:top 0.3s ease 0s, background 0.4s ease 0s;*/
}

    .top-shadow span:first-child {
        padding-left: 15px !important;
        text-align: left;
    }

    .top-shadow span {
        color: #fff;
        display: inline-block;
        overflow: hidden;
        padding: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 32%;
    }

        .top-shadow span a {
            color: #fff;
        }

            .top-shadow span a:hover {
                color: #0098D8;
            }

        .top-shadow span:last-child {
            padding-right: 15px !important;
            text-align: right;
        }

.vid-img-holder:hover .top-shadow {
    top: 0px; /*display: block;*/
}

.play-icon {
    height: 70px;
    left: 50%;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    margin-left: -35px;
    /*transform: translate(-50%, -50%);*/
    width: 70px;
    z-index: 10;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transition: all 0.3s ease-in-out 0.1s;
}

.play-small-icon {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
}

.play-md-icon {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
}

.svg path {
    fill: #fff;
    transition: all 0.3s ease 0s;
}

.svg:hover path {
    fill: #0098D8;
}

.vid-img-holder:hover .play-icon, .latest-vid-img-container:hover .play-icon, .bottom-vid-img-container .bottom-vid:hover .play-icon {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

.bottom-shadow {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    position: absolute;
    width: 100%;
    min-height: 40%;
    bottom: 0px;
    left: 0px;
}

.vid-author {
    bottom: 10px;
    margin: 0;
    overflow: hidden;
    padding: 0 15px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    z-index: 2;
}

    .vid-author span {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        color: #fff;
    }

        .vid-author span a {
            font-size: 14px;
        }

    .vid-author a {
        font-family: 'Montserrat';
        color: #fff;
        font-size: 16px;
        text-decoration: none;
    }

        .vid-author a:hover {
            color: #DC3D3D;
        }


/* Secondary Section */

#secondary-section {
    padding: 30px 0px;
}

.secondary-vid {
    padding-bottom: 30px;
}

.vid-heading {
    font-family: 'Montserrat';
    /*border-bottom: 1px solid #d0d0d0;*/
    margin: 0px;
    font-size: 0px;
    position: relative;
}

    .vid-heading span {
        position: relative;
        margin: 0px;
        font-size: 18px;
        text-transform: uppercase;
        color: #0098D8;
        border-bottom: 1px solid #0098D8;
        padding-bottom: 12px;
        display: inline-block;
        z-index: 10;
    }

.hding-bottm-line {
    height: 1px;
    width: 100%;
    display: inline-block;
    background: #d0d0d0;
    bottom: 0px;
    left: 0px;
    position: absolute;
    z-index: -1;
}

.vid-container {
    margin-top: 50px;
}

.latest-vid-img-container {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.vid-img {
    position: relative;
}

.vid-text {
    margin-top: 15px;
    color: #363636;
}

    .vid-text a {
        color: #979797;
        /*font-weight: bold;*/
        font-size: 13px;
        text-decoration: none;
    }

        .vid-text a:hover {
            color: #0098D8;
        }

    .vid-text h1, .blog-text h1 {
        margin: 0px;
        font-size: 0px;
        margin-bottom: 3px;
    }

        .vid-text h1 a, .blog-text h1 a {
            font-family: 'Montserrat';
            text-decoration: none;
            display: inline-block;
            color: #363636;
            font-size: 14px;
            line-height: 1.2em;
            margin: 0px 0px 0px;
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    .vid-text p.vid-info-text {
        color: #979797;
        margin-bottom: 0px;
    }

    .vid-text p span {
        /*color: #363636;	*/
    }

    .vid-text p i.fa {
        color: #979797;
        transition: all 0.3s ease 0s;
    }

        .vid-text p i.fa:hover {
            color: #0098D8;
        }

.bottom-vid-img-container {
    margin-top: 30px;
}

    .bottom-vid-img-container h1 {
        margin-top: 0px;
        font-size: 0px;
    }

        .bottom-vid-img-container h1 a {
            display: inline-block;
            margin: 0px;
            font-size: 16px;
            margin-bottom: 10px;
        }

    .bottom-vid-img-container p, .blog-text p {
        line-height: 1.7em;
        color: #363636;
    }

    .bottom-vid-img-container .row .bottom-vid {
        margin-bottom: 30px;
        display: inline-block;
    }

    .bottom-vid-img-container .row:last-child .bottom-vid {
        margin-bottom: 0px;
        margin-top: 0px;
    }

/* Side Bar */

.sidebar-vid {
    margin-bottom: 30px;
}

.sidebar h1, .latest-post h1 {
    color: #363636;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 5px;
}

    .sidebar h1 a, .latest-post h1 a {
        color: #363636;
        font-family: 'Montserrat';
        text-decoration: none;
    }

        .sidebar h1 a:hover, .latest-post h1 a:hover {
            color: #0098D8;
        }

.sidebar p, .latest-post p {
    color: #979797;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 0px;
}

    .sidebar p span, .latest-post p span {
        margin-right: 10px;
    }

        .sidebar p span:last-child .latest-post p span:last-child {
            margin-right: 0px;
        }

h1.sidebar-heading {
    background: #0098D8;
    color: #fff;
    text-transform: uppercase;
    /*font-weight: bold;*/
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 20px;
    padding: 10px 25px;
    border-left: 3px solid #bd2222;
    border-right: 3px solid #bd2222;
}

.sidebar .most-liked .media, .latest-post .media {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

    .sidebar .most-liked .media:last-child, .latest-post .media:last-child {
        border-bottom: none;
        padding-bottom: 0px;
    }

.most-viewd .most-viewd-img {
    margin-bottom: 15px;
}

.most-viewd .most-viewd-container {
    margin-bottom: 15px;
}


#index-v2 .svg:hover path {
    fill: #0098D8;
}

#index-v2 a:hover {
    color: #0098D8;
}

#social-v2 a:hover {
    color: #fff;
}

#index-v2 .vid-heading span {
    color: #0098D8;
    border-color: #0098D8;
}

#index-v2 h1.sidebar-heading {
    background: #0098D8;
    border-left: 3px solid #0082ba;
    border-right: 3px solid #0082ba;
}

#index-v2 #copyright {
    background: #0098D8;
}

#index-v2 .tags ul li a:hover {
    background: #0098D8;
    color: #fff;
}

#index-v2 .footer-about .bottom-social li a:hover {
    background: #0098D8;
    color: #fff;
}

#main-bar.main-bar-v2 {
    border-bottom: none;
}

#main-bar .login-v2 a {
    color: #737373;
}

    #main-bar .login-v2 a:hover {
        color: #0098d8;
    }

.btn-blue {
    background: #0098d8;
    font-size: 14px;
    border-radius: 25px;
    padding: 10px 30px;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.2);
    border: none;
    margin-top: 16px;
    outline: none;
}

    .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
        background: #0089c3;
        color: #fff;
        outline: none;
    }

.v2-bg {
    background: #0098d8 !important;
}

.v2-color {
    color: #0098d8 !important;
}