/* changed color of selected item in navigation bar in index and services*/

.header-section ul li.active>a,
.header-section.dark-dropdowns.style1 ul li.active>a {
    color: #ccd3dc;
}


/*  added custom image to homepage Datos section */

.parallax-3.datos {
    background: url("../images/vendor/inicio-datos1.jpg") 50% 0 no-repeat fixed;
}

.parallax-4.television {
    background: url("../images/vendor/servicios-television-banner1.jpg") 50% 0 no-repeat fixed;
}

.parallax-2.voip {
    background: url("../images/vendor/servicios-banner-voip.jpg") 50% 0 no-repeat fixed;
}


/* changed the preloader color*/

.loader-item.style6 .sk-cube {
    background-color: #002250;
}


/* made the cards have the same height */

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

.full-height-column {
    height: 100%;
}


/* added space between cards*/

.margin-add-bottom {
    margin-bottom: 10px;
}


/* made the tab navigation in services ocupy full width and a min width to prevent text distorsion*/

.tabstyle-9 .responsive-tabs li {
    width: 33.33%;
    min-width: 140px;
}

.tp-caption.text-primary.tp-color-change {
    color: #fff;
    text-transform: uppercase;
}


/** Keeping the hamburger menu color to white when hovered **/

.header-section.hamburger-white ul li:hover>a,
.text-light-altered {
    color: #fff;
}


/** transform the circles into olimpic circle setup and content centered **/

.ce-feature-box-1 .circle-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/** making the icons white with a blue background **/

.ce-feature-box-1 .circle-inner .icon {
    background-color: #002250;
}

span.icon-video.ring-icons,
span.icon-puzzle.ring-icons,
span.icon-camera.ring-icons,
span.icon-shield.ring-icons,
span.icon-magnifying-glass.ring-icons {
    color: #fff;
}


/** adding 2px to font size and make the text bold on h6 paragraphs**/

.raleway.raleway-altered {
    font-size: 18px;
    font-weight: bold;
}


/** making sure the big title letters doesn't overlap **/

.ce-big-title {
    line-height: 44px;
}

@media only screen and (min-width: 1025px) {
    .ce-big-title {
        line-height: 70px;
    }
}


/** replacing green color with blue color on homepage lists **/

.list-3.icon-green.altered-color .icon {
    color: #002250;
    background-color: #fff;
    border: 1px solid #fff;
}


/** make visible the content in span tags by bolding **/

h3.less-mar-1.modify-max-width {
    max-width: 1000px;
    margin: 0 auto 3px;
}


/** adjusting the header so it won't remain only one word on the second line **/

span.bolded-span {
    font-weight: bold;
}


/* repair broken media between 768 and 991 px for footer blocks*/

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .set-minmax-height {
        min-height: 220px;
    }
}


/* adjust the layout on different media screens*/

@media only screen and (min-width: 991px) {
    div.ce-feature-box-3 {
        padding-top: 0;
    }
}

@media only screen and (min-width: 1200px) {
    div.ce-feature-box-3 {
        max-width: 700px;
    }
    .img-align-right img {
        margin-left: auto;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1600px) {
    div.ce-feature-box-3 {
        padding-top: 85px;
    }
}


/* beautify adicionales header section*/

.text-center h4.uppercase.adicionales-adjust {
    font-size: 27px;
}

@media only screen and (min-width: 640px) {
    .text-center h4.uppercase.adicionales-adjust {
        margin-bottom: 40px;
    }
}


/* modify boxes color and functionality*/

.section-dark.box-redone {
    background-color: #fff;
}

img.img-responsive.filter-added {
    filter: invert(45%) sepia(9%) saturate(10%) hue-rotate(325deg) brightness(95%) contrast(87%);
}


/* when hovering cards icon color changes*/

div.section-dark.box-redone:hover>img.img-responsive.filter-added {
    filter: invert(12%) sepia(17%) saturate(7372%) hue-rotate(198deg) brightness(96%) contrast(106%);
}

div.section-dark.box-redone:hover>p {
    color: #272727;
}


/** on hover the footer links become white for visibility, better blue to keep site consistency**/

a.white-hover:hover {
    color: #002250;
}


/** added padding top on the h4 to align it to the form and add space below send button on small screens**/

h4.pad-top-55 {
    padding-top: 55px;
}


/** making the icons white also for acordeon on the services page */


/* span.icon-layers.white-icon,
span.icon-global.white-icon,
span.icon-desktop.white-icon {
    color: #002250;
} */

.tabstyle-9 .responsive-tabs li a:hover>span.white-icon {
    color: #fff;
}

.tabstyle-9 .responsive-tabs li.active a>span.white-icon {
    color: #fff;
}


/** move image below menu to make the white menu visible**/

.parallax-1.header-cover {
    margin-top: -145px;
}


/** adjust top and bottom padding on the 404 image to cover the screen**/

.padding-404.sec-tpadding-3 {
    padding-top: 280px;
}

.padding-404.sec-bpadding-3 {
    padding-bottom: 170px;
}

@media only screen and (max-width: 991px) {
    .padding-404.sec-tpadding-3 {
        padding-top: 320px;
    }
    .padding-404.sec-bpadding-3 {
        padding-bottom: 220px;
    }
}


/** align button on the center on 404 and success pages**/

.big-btn-center {
    text-align: center;
}


/*  added custom image to 404 and success page */

.parallax-1.banner-404 {
    background: url("../images/vendor/banner-404.jpg") 50% 0 no-repeat fixed;
}

.parallax-1.banner-success {
    background: url("../images/vendor/banner-success.jpg") 50% 0 no-repeat fixed;
}


/*  wider paragraph to keep the last word on the same line on wide screens */

p.ce-sub-title.raleway {
    width: 60%;
}


/*  added invisible divs to hold the ID's and make the TAGS to center the sections they are targeting */

#fibra,
#hogar-empresa,
#velocidad,
#satelital,
#voip,
#inalambrico {
    position: relative;
    left: 0px;
    top: -80px;
}

#banda {
    position: relative;
    left: 0px;
    top: -89px;
}


/* justify all paragraphs */

.justify-t {
    text-align: justify;
    text-justify: inter-word;
}


/* changed the hover text color in footer site links*/

.text-white.text-hover a:hover {
    color: #002250;
}