/*------------------------------------------------------------------
TheFirm, AbcTheme
[Table of contents]

/*------------------------------------------------------------------
[Table of contents]

-------------------------------------------------------------------*/

/*------------------------------------------------------------------
A. Custom Classes
	
B. Menu

1. Reset
2. Meta Bar
4. Header Elements
7. Submenu Types
14. Footer
2. Buttons
7. Headings
8. Blog Container
10. Frames
11. Portfolio Element
12. Team Element
18. Highlight Heading
25. Loop Elements
28. Google Map

-------------------------------------------------------------------*/


/* a.1.) header-custom-styles-02-1 */
.header-custom-styles-02-1.header-type-4 .middle-header{
	border-bottom: none;
}
.header-custom-styles-02-1.header-type-4 .meta-bar{
	border-bottom-color: rgba(190, 22, 34, .7);
}
.header-custom-styles-02-1.header-type-4 .nav-is-sticky.stuck.middle-header{
	background-color: rgba(0, 0, 0, 0.8);
}

.header-custom-styles-02-1 .meta-bar .mb-left-container{
	padding-top: 30px;
	padding-bottom: 30px;
}
.header-custom-styles-02-1 .meta-bar .mb-right-container{
	padding-top: 30px;
	padding-bottom: 30px;
}
.header-custom-styles-02-1 .meta-bar .nav-container li{
	border-color: rgba(255, 255, 255, 0.2) !important;
	color: rgba(255, 255, 255, 0.8);
}
.header-custom-styles-02-1 .meta-bar .nav-container li a{
	color: rgba(255, 255, 255, 0.8);
}
.header-custom-styles-02-1 .meta-bar .nav-container li a:hover{
	color: #fff;
}
.header-custom-styles-02-1 .meta-bar .nav-container.icon-type-2 .icon{
	border-color: #24bbd2;
	color: #24bbd2;
}
.header-custom-styles-02-1 .meta-bar .social-icons-container .social-icon-40-google-plus{
    font-size: 22px;
}
.header-custom-styles-02-1 .meta-bar .social-icons-container .social-icon-06-facebook{
	font-size: 20px;
}

.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a > span{
	padding-right: 10px;
	padding-left: 10px;
}
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a{
	padding-top: 45px;
	padding-bottom: 45px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li:hover > a span,
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a:hover span,
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a.active span {
	background-color: #be1522;
	border-color: transparent;
	border-radius: 25px;
}
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a span::before{
	border-color: #be1622;
	border-radius: 25px;
}
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li:hover > a span::before,
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a:hover span::before,
.header-custom-styles-02-1 .nav-type-3 .wsmenu-list > li > a.active span::before{
	border-color: transparent;
}
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li:hover > a,
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li > a:hover,
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li > a.active{
	color: #fff;
}
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li > a{
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
}
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li:hover > a span::before,
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li > a:hover span::before,
.header-custom-styles-02-1 .nav-is-sticky.stuck .nav-type-3 .wsmenu-list > li > a.active span::before{
	border-color: transparent;
}
@media (min-width: 992px) and (max-width: 1199px) {

	.header-custom-styles-02-1.header-type-4 .nav-type-3 .wsmenu-list > li > a > span{
		padding-right: 20px;
		padding-left: 20px;
	}

}

#contact-icons{display: none;}
/* a.2.) row-custom-styles */
.row-custom-styles-02-1{
	padding-top: 100px;
	padding-bottom: 100px;
}
.row-custom-styles-02-2{
	padding-top: 100px;
	padding-bottom: 100px;
	background-color: #cccccc;
}
.row-custom-styles-02-3{
	background-color: #363636;
}
.row-custom-styles-02-4{
	padding-top: 100px;
	padding-right: 100px !important;
	padding-bottom: 100px;
	padding-left: 250px !important;
	background-color: #ffffff;
}
.row-custom-styles-02-5{
	padding-top: 100px;
	padding-right: 265px !important;
	padding-bottom: 100px;
	padding-left: 100px !important;
	background-color: #cccccc;
}
.row-custom-styles-02-6{
	padding-top: 100px;
	padding-bottom: 40px;
}

/* a.3.) highligh-heading-custom-styles */
.highligh-heading-custom-styles-02-1{
	color: #be1522 !important;
}

/* a.4.) highligh-heading-custom-styles */
.boxed-element-custom-styles-02-1{
	margin-bottom: 0;
	border: none;
	border-radius: 25px;
}
.boxed-element-custom-styles-02-1.iconbox-16 .iconbox-design{
	font-size: 50px;
}
.boxed-element-custom-styles-02-1:hover .iconbox-design{
	background-color: #24bbd2;
}
.boxed-element-custom-styles-02-1.iconbox-16:hover .iconbox-header .iconbox-title{
	/*color: #24bbd2;
	text-decoration: underline;*/
}
.boxed-element-custom-styles-02-2.boxed-element .iconbox-counter-4{
	background-color: #24bbd2;
}
.boxed-element-custom-styles-02-2.iconbox-16:hover .iconbox-header .iconbox-title{
	/*color: #24bbd2;
	text-decoration: underline;*/
}

/* a.5.) highligh-heading-custom-styles */
.counter-element-custom-style-02-1{
	background-color:  rgba(0, 0, 0, .65);
	margin-bottom: 0;
    transition: all .5s ease-out;
}
.hover-multiply:hover .counter-element-custom-style-02-1{
	background-color: #be1522;
    mix-blend-mode: multiply;
    transition: all .5s ease-out;
}

.hover-multiply:hover .counter-element-sep-element{
    background: #ffffff;
    transition: all .5s ease-out;
}

.counter-element-custom-style-02-2{
	background-color:  rgba(0, 0, 0, .85);
	margin-bottom: 0;
}
.hover-multiply:hover .counter-element-custom-style-02-2{
	background-color: #be1522;
    mix-blend-mode: multiply;
    transition: all .5s ease-out;
}

/* a.6.) heading-element-custom-styles */
.heading-element-custom-styles-02-1.heading-element-5 h4{
	font-weight: 500;
}
.heading-element-custom-styles-02-1.heading-element-5 h4 span{
	background-color: #363636;
	padding-left: 15px;
	padding-right: 15px;
}
.heading-element-custom-styles-02-1.heading-element-5 .sep-element{
	background-color: #e1e1e1;
}
.heading-element-custom-styles-02-1.heading-element-5 .sep-element:after{
	background-color: #24bbd2;
}

/* a.7.) loop-element-custom-style */
.loop-element-custom-style-02-1{
	margin-bottom: 0
}

/* a.8.) social-media-custom-styl */
.social-media-custom-style-02-1.red{
	background-color: #be1522;
}
.social-media-custom-style-02-2.grayD{
	background-color: #4d4d4d;
}
.social-media-custom-style-02-1.gray{
	background-color: #808080;
}
.social-media-custom-style-02-1:hover,.social-media-custom-style-02-2:hover{
	background-color: #be1622;
}
.social-media-custom-style-02-1:hover .hexagono::before,.social-media-custom-style-02-2:hover .hexagono::before{
	background: #ce5159 !important;
}
.social-media-custom-style-02-2{
	background-color: #be1622;
}

/* a.9.) frame-container-custom-style */
.frame-container-custom-style-02-1{
	padding: 10px !important;
}

/* a.10.) btn-custom-style */
.btn-custom-style-02-1{
	text-transform: none;
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 15px;
}
.btn-custom-style-02-1:hover{
	color: #24bbd2;
}
.btn-custom-style-02-1 .icon{
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	/*background-color: #24bbd2;*/
	font-size: 18px;
	color: #fff;
}
.btn-custom-style-02-1 span{
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	text-decoration: underline;
}



/*------------------------------------------------------------------
1. Reset
-------------------------------------------------------------------*/
body{
	background-color: #fff;
	color: rgba(54, 54, 54, 0.8);
	letter-spacing: 0.2px;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}
a{
	color: #24bbd2;
}
a:hover{
	color: #39c1d6;
}
h1,h2,h3,h4,h5,h6{
	color: #363636;
	font-weight: 500;
}

/*------------------------------------------------------------------
2. Meta Bar
-------------------------------------------------------------------*/
.meta-bar .social-icons-container .icon{
	border-color: rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.8);
}
.meta-bar .social-icons-container .icon:hover{
	border-color: #ffffff;
	color: #ffffff;
}

/*------------------------------------------------------------------
4. Header Elements
-------------------------------------------------------------------*/
form.header-search-form input.search::-moz-placeholder {
	color: rgba(65,65,67,0.5);
}
form.header-search-form input.search:-ms-input-placeholder {
	color: rgba(65,65,67,0.5);
}
form.header-search-form input.search::-webkit-input-placeholder {
	color: rgba(65,65,67,0.5);
}
.shopping-cart-btn{
	font-weight: 500;
}
.nav-is-sticky.stuck .shopping-cart-btn{
	font-weight: 500;
}

/*------------------------------------------------------------------
7. Submenu Types
-------------------------------------------------------------------*/
.nav-submenu-type-1 .wsmenu-submenu li a{
	color: rgba(54,54,54,0.8);
}
.nav-submenu-type-1 .wsmenu-submenu li a:hover{
	color: #24bbd2;
}

.nav-submenu-type-2 .wsmenu-submenu li a{
	background-color: transparent;	
	color: rgba(54,54,54,0.8);
	font-weight: 400;
}
.nav-submenu-type-2 .wsmenu-submenu li a:hover{ 
	background-color: #24bbd2;
	color: #fff;
}

.nav-submenu-type-3 .wsmenu-submenu li a{
	background-color: transparent;	
	color: rgba(54,54,54,0.8);
	font-weight: 400;
}
.nav-submenu-type-3 .wsmenu-submenu li a:hover{ 
	background-color: #24bbd2;
	color: #fff;
}

.nav-submenu-type-4 .wsmenu-submenu li a{
	color: rgba(54,54,54,0.8);
}
.nav-submenu-type-4 .wsmenu-submenu li a:hover{
	color: #24bbd2;	
}
.nav-submenu-type-4 .wsmenu-submenu li a .menu-item-textWrap:after{
    background-color: #24bbd2;	
}

.nav-submenu-type-5 .wsmenu-submenu li a{
	background-color: transparent;
	color: rgba(54,54,54,0.8);
	font-weight: 400;
}
.nav-submenu-type-5 .wsmenu-submenu li a:hover{
	background-color: #f5f5f5;
	color: #24bbd2;
}
.nav-submenu-type-5 .wsmenu-submenu li a .menu-item-textWrap:after{
    background-color: #24bbd2;
}
.nav-submenu-type-5 .wsmenu-submenu-sub-sub:after,
.nav-submenu-type-5 .wsmenu-submenu-sub:after,
.nav-submenu-type-5 .wsmenu-submenu:after{
    background-color: #24bbd2;
}

/*------------------------------------------------------------------
14. Footer
-------------------------------------------------------------------*/
#footer{
	padding-top: 0;
	color: rgba(255, 255, 255, 0.6);
}
.bottom-section{
	padding-top: 0;
	padding-bottom: 0;
}

/*------------------------------------------------------------------
2. Buttons
-------------------------------------------------------------------*/
.btn.btn-primary {
	background-color: #be1622;
	color: #fff;
    border: 1px solid #be1622;
    border-radius: 25px;
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus{
	background-color: transparent;
	color: #fff;
    border: 1px solid #cccccc;
}

/*------------------------------------------------------------------
7. Headings
-------------------------------------------------------------------*/
.heading-element-1 h4{
    font-weight: 500;
}
.heading-element-2:after{
	background-color: #79b400;
}

/*------------------------------------------------------------------
8. Blog Container
-------------------------------------------------------------------*/
.blog-container-2{
	margin-bottom: 30px
}
.blog-container-2 .no-featured-image{
	background-color: #e1e1e1;
}
.blog-container-2 .post-type-date .icon{
	background-color: #e1e1e1;
}
.blog-container-2 .post-type-date .date{
	background-color: #24bbd2;
}
.blog-container-2:hover .blog-container-title a{
	color: #24bbd2;
}

/*------------------------------------------------------------------
10. Frames
-------------------------------------------------------------------*/
.frame-container-1{
	padding: 20px 30px;
}

/*------------------------------------------------------------------
11. Portfolio Element
-------------------------------------------------------------------*/
.portfolio-type-3 .megafolio-container-caption{
	background-color: transparent;
}
.portfolio-type-3 .megafolio-container-link{
	background-color: #363636;
}
.portfolio-type-3 .megafolio-container-link:hover{
	background-color: #464646;	
}
.portfolio-type-3 .megafolio-container-lightbox{
	background-color: #be1522;
}
.portfolio-type-3 .megafolio-container-lightbox:hover{
	background-color: #be1622;	
}

/*------------------------------------------------------------------
12. Team Element
-------------------------------------------------------------------*/
.team-element-2{
	margin-bottom: 0;
}
.team-element-2 .title{
	font-weight: 500;
	font-size: 18px;
}
.team-element-2 .team-element-content{
	color: rgba(0, 0, 0, 0.7);
}
.team-element-2 .sep-element{
	background-color: #24bbd2;
}
.team-element-2 .team-element-social-media .icon{
	background-color: #24bbd2;
}
.team-element-2 .team-element-social-media .icon:hover{
	background-color: #39c1d6;
}
.team-element-2 .team-element-social-media ul{
	background-color: rgba(54,54,54,0.9);
}

.progress-bar-2 .progress-bar-label{
	color: rgba(255, 255, 255, 0.8);
	font-weight: 400;
}
.progress-bar-2 .progress-bar-bar span{
	background-color: #24bbd2;
}
.progress-bar-2 .progress-bar-counter{
	background-color: #363636;
}
.progress-bar-2 .progress-bar-counter:after{
	border-right-color: #363636;
}

/*------------------------------------------------------------------
18. Highlight Heading
-------------------------------------------------------------------*/
.highligh-heading-2{
	font-weight: 500;
}


/*------------------------------------------------------------------
25. Loop Elements
-------------------------------------------------------------------*/
.loop-element-pagination .loop-element-dots .owl-dot{
	background-color: #cccccc;
}
.loop-element-pagination .loop-element-dots .owl-dot.active{

	background-color: #be1522;
}
.loop-element-nav-btn .loop-element-nav > div{
	background-color: #fff;
	color: #959595;
}
.loop-element-nav-btn .loop-element-nav > div:hover{
	background-color: #be1522;
	color: #fff;
}

/*------------------------------------------------------------------
28. Google Map
-------------------------------------------------------------------*/

.google-map-element-3 .map-3{
	position: relative;
	display: block;
	height: 310px;
}




/**********css by agra 16/08/2018***********/

@font-face{
    font-family: 'Eurostile Regular';
    src: url(../../font/Eurostile.ttf) format("truetype"); 
}

@font-face{
    font-family: 'Eurostile Medium';
    src: url(../../font/EurostileMedium.ttf) format("truetype"); 
}

@font-face{
    font-family: 'Eurostile Bold';
    src: url(../../EUROSTIB.ttf) format("truetype"); 
}

/*:root{
    --azul-fuerte: #304ffe;
    --azul-claro: #be1622;
    --gris: #cccccc;
    --blanco: #ffffff;
    --negro: #000000;
}*/
/*************Family euro font*****************/

.euro-r{
    font-family: 'Eurostile Regular'!important;
}

.euro-m{
    font-family: 'Eurostile Medium'!important;
}

.euro-b{
    font-family: 'Eurostile Bold'!important;
}

/**********Familu Open Sans font**************/
.open{
    /*font-family: 'Open Sans', sans-serif!important;*/
}

/******************color letras****************/

.l-blanca{
    color: #ffffff;
}

.l-azul-f{
    color: #be1522;
}

.l-azul-c{
    color: #be1622;
}

.l-gris{
    color: #cccccc;
}

.l-negra{
    color: #4d4d4d;
}

/******************Pesos letra****************/

.w-300{
    font-weight: 300 !important;
}

.w-400{
    font-weight: 400 !important;
}

.w-500{
    font-weight: 500 !important;
}

.w-600{
    font-weight: 600 !important;
}

.w-700{
    font-weight: 700 !important;
}

/*********************fondos color*******************/

.back-azul-fuerte{
    background: #be1522;
}

.back-azul-claro{
    background: #be1622;
}

.back-gris{
    background: #cccccc;
}

/************************************************************/
          /*  Página Home/*
/************************************************************/

.content-footer-center{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 15px;
}

.text-left-footer{
    text-align: left;
}

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

.img-right-footer{
    text-align: right;
}

.logo-strave{
    width: 80px;
}

.logo-spy{
    padding: 15px 0;
}

.icons-header-left{
    padding-right: 7px;
}

.icons-header-right{
    font-size: 25px;
    padding: 0 5px;
}

.titulo-slide{
    font-size: 60px ;
    line-height: 50px ;
    letter-spacing:3px!important;
}

.titulo-slide span{
    letter-spacing:3px!important;
    
}

.subtitulo-slide{
    font-size: 60px ;
    line-height: 50px ;
    letter-spacing:4px!important;
}

.p-slide{
    font-size: 25px ;
}

.boton-slide{
    background: #be1622 !important;
    font-size: 20px !important;
    padding: 5px 10px !important;
    color: #ffffff !important;
    opacity: 1 !important; 
    border: 1px solid #be1622 !important;
}

.boton-slide:hover{
    background: transparent !important;
    border: 1px solid #cccccc !important;
}

.justi-parrafo{
    text-align: justify;
}

.back-graphic-gray{
    position: absolute;
    left: 0;
    bottom: 0;
}

.title-cuadros{
    font-size: 24px;
}

.subtitle-cuadro{
    font-size: 14px;
}

.vigilancia-cuadro{
    width: 80%;
}

.mb-10{
    margin-bottom: 10px!important;
}

.subtitle-ban-middle{
    font-size: 20px;
}

.title-ban-middle{
    font-size: 35px;
}

.boton-middle-banner{
    padding: 10px 10px !important;
    font-size: 20px;
}

.cifras-absolute{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


.hexagono-right-fondo{
    position: absolute;
    bottom: 0px;
    right: 0;
}

.cont-hexagono-right{
    position: relative;
}

.cont-historias-exito{
    padding: 100px 0 80px 250px;
}

.center-cont-historias-extio{
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-separator-home{
    margin-top: 100px;
}

.back-transparent-image{
    position: absolute;
    background: rgba(0, 0, 0, .75);
    width: 100%;
    left: 0;
    content: "";
    height: 100%;
}

.back-transparent-image-2{
    position: absolute;
    background: rgba(0, 0, 0, .75);
    width: 100%;
    left: 0;
    content: "";
    height: 550px;
}

.back-transparent-image-3-sections{
    position: absolute;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    left: 0;
    content: "";
    height: 100%;
}

.text-redes{
    margin-top: -45px;
}

.btn-form-footer{
    padding: 10px 30px;
    background: #be1522;
    border: 1px solid #be1522;
    color: #ffffff;
    cursor: pointer;
    transition: all .5s ease-out;
    text-align: center;
    width: 170px;
    font-size: 18px;
    border-radius: 25px;
}

.btn-form-footer:hover{
    background: transparent;
    border: 1px solid #ffffff;
    color: #000000;
}

.cont-btn-footer{
    text-align: center; 
    margin-top: 30px;
}

.m-0{
    margin: 0;
}

.decoration-none{
    text-decoration: none !important;
}

.flex-direccion{
    display: flex;
}

.content-cifras{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}

.h-275{
    height: 275px;
}

.f-cifra-48{
    font-size: 48px;
}

.f-cifra-24{
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 5px;
}

.mar-b-cont-info{
    margin-bottom: 30px;
}

.boton-recorrido{
    background: #be1522;
    border: 1px solid #be1522;
    padding: 7px 20px;
    transition: all .5s ease-out;
    color: #ffffff;
    text-decoration: none!important;
    border-radius: 25px;
}

.boton-recorrido:hover{
    background: transparent;
    border: 1px solid #cccccc;
    transition: all .5s ease-out;
    color: #000000;
    text-decoration: none;
}

.cont-boton-recorrido{
    margin-top: 20px;
}

.btn-descarga{
    padding: 7px 25px;
    background: #be1522;
    color: #ffffff;
    border: 1px solid #be1522;
    transition: all .5s ease-out;
    text-decoration: none!important;
    border-radius: 25px;
}

.btn-descarga:hover{
    background: transparent;
    border: 1px solid #cccccc;
    transition: all .5s ease-out;
    color: #ffffff;
}

.cont-btn-descarga{
    float: left;
    margin-right: 25px;
}

.btn-ver-mas{
    padding: 7px 25px;
    background: #be1522;
    color: #ffffff;
    border: 1px solid #be1522;
    transition: all .5s ease-out;
    text-decoration: none!important;
    border-radius: 25px;
}

.btn-ver-mas:hover{
    background: transparent;
    border: 1px solid #cccccc;
    transition: all .5s ease-out;
    color: #000000;
}

.cont-btn-ver-mas{
    margin-top: 20px;
}

.cont-btn-ver-mas-2{
    margin-top: 10%;
}


.btn-ver-video{
    padding: 7px 25px;
    background: #be1522;
    color: #ffffff;
    border: 1px solid #be1522;
    transition: all .5s ease-out;
    text-decoration: none!important;
    border-radius: 25px;
}

.btn-ver-video:hover{
    background: transparent;
    border: 1px solid #cccccc;
    transition: all .5s ease-out;
    color: #000000;
}

.cont-ver-video{
    margin-top: 20px;
}

.btn-slide{
    background: #be1522;
    border: 1px solid #be1522;
    padding: 7px 10px;
    transition: all .5s ease-out;
    color: #ffffff;
    text-decoration: none!important;
    font-size: 20px;
    line-height: 40px;
    border-radius: 25px;
}

.btn-slide:hover{
    background: transparent;
    border: 1px solid #cccccc;
    transition: all .5s ease-out;
    color: #ffffff;
    text-decoration: none;
}

.cont-btn-slide{
    margin-top: 10px;
}

.signo-mas{
    font-size: 48px;
}

.mensaje-footer{
    position: absolute;
    bottom: 50px;
}

/*HOVER*/
.hover-azul-fuerte:hover{
    color: #be1522;
}


/************Bandera Whats***************************/

.cont-bandera-whats{
    position: fixed;
    bottom: 220px;
    right: 0;
    z-index: 999;
    text-align: center !important;
    color: #25d366;
}

.cont-bandera-whats:hover{
    color: #25d366;
    text-decoration: none!important;
}

.bandera-whats{
    background: #30af20;
    color: #fff;
    font-size: 15px;
    padding: 5px;
}

.cont-bandera-whats i {
    font-size: 70px;
    text-shadow: 1px 1px 2px #000;
    
}

.cont-bandera-whats:hover{
    color: #25d366 !important;
}

.cont-bandera-whats:active{
    color: #25d366 !important;
}

.cont-bandera-whats:focus{
    color: #25d366 !important;
}


/**********************POP UP******************************/


.white-popup {
  position: relative;
  background: rgba(0,0,0,0.75);
  padding: 20px;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
}

.boton-pop{
    text-align: center;
    padding: 10px 15px;
    width: 120px;
    background: #be1522;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border: 1px solid #be1522;
    transition: all .5s ease-out;
    border-radius: 25px;
}

.boton-pop:hover{
    text-align: center;
    padding: 10px 15px;
    width: 120px;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
     border: 1px solid #be1622;
}

.title-popup{
    color: #fff;
}

.form-control:hover{
    border: 1px solid #be1622;
}

.form-control{background-color: transparent; color: #fff;border-radius: 10px;padding: 10px;}

.mfp-close-btn-in .mfp-close{color: #fff;}

.width-form{
    width: 100%;
    border: 1px solid #cccccc;
}


/******************hexagono**************/
.hexagono {
  position: relative;
  display: block;
  width: 100px;
  height: 36.953488px;
  z-index: 9;
  transition: all .5s ease-out;
  margin-top: 10px;
}



.hexagono::before {
  content: '';
  display: block;
  position: absolute;
  top: -15px;
  width: 100px;
  height: 100px;
  background-color: #4d4d4d;
  border-radius: 50%;
}

.hexagono-content {
  position: absolute;
  z-index: 1000;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 95%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.caja-hover-servicios:hover .hexagono::before{
    background: #be1522;
}

.caja-hover-servicios:hover .title-cuadros{
    color: #be1522;
}
.caja-hover-servicios:hover .hexagono-secciones{
    background: #be1522;
}

.num-hexagono{
    color: #ffffff;
    font-size: 50px;
    text-align: center;
}

.box-historia-exito{
    height: 260px;
    border-radius: 25px;
}

.box-historia-exito:hover .hexagono::before{
    background: #be1522;
}

.box-historia-exito:hover .title-historia{
    color: #be1522;
}

/*hexagono transaprente*/
.hexa-transparent{
    position: relative;
    transition: all .5s ease-out;
    text-align: center;
}
.hexa-1::before{
	background: #ce5159 !important;
}
.hexa-2::before{
	background: #7a7a7a !important;
}
.hexa-3::before{
	background: #a0a0a0 !important;
}
.hexa-transparent::before{
	top: -30px !important;
}
.social-media-custom-style-02-1:hover .hexa-transparent{
    transition: all .5s ease-out;
}

.social-media-custom-style-02-2:hover .hexa-transparent{
    transition: all .5s ease-out;
}

/*hexagono info footer*/

.hexagono-info{
    width: 35px;
    height: 20px;
    margin-top: 0 !important;
}
.hexagono-info::before{
	top: -1px;
    width: 40px;
    height: 40px;
    background-color: #d41622;
    border-radius: 50%;
}
.hexagono-info i{left: 5px;}
/************************************************************/
          /* Fin Página Home/*
/************************************************************/
/************************************************************/
          /* Inicio Seccion vigilancia nocturna/*
/************************************************************/

.header-sections{
    height: 550px;
}

.lista-seccion-cuadros{
    list-style: disc outside none;
    padding-left: 5%;
    font-size: 16px;
    text-align: justify;
}

.h-iconbox-16-vig{
    height: 275px;
}

.hexagon-right-vigilancia{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.clients-cont-sections{
    margin-top: 70px;
}

.frase-garantizado{
    font-size: 20px;
    padding: 0 20px;
}

.hexagono-secciones{
    width: 22px;
    height: 22px;
    background: #4d4d4d;
    border-radius: 11px;
}

.top-boton-ban-sections{
    top: 17px!important;
}

/************************************************************/
          /* Fin Página seccion/*
/************************************************************/

/************************************************************/
          /* Inicio Seccion monitoreo/*
/************************************************************/

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

.padd-l-0{
    padding-left: 0px;
    padding-right: 30px;
}

.h-iconbox-16-mon{
    height: 415px;
}

/************************************************************/
          /* Fin Seccion monitoreo/*
/************************************************************/

/************************************************************/
          /* Inicio Seccion proyectos/*
/************************************************************/


.h-iconbox-16-proy{
    height: 260px;
}

.proveedores{
    background: url(../../archivos/proveedores/proveedores.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 185px;
    margin-bottom: 100px;
}

.padd-50-proyectos{
    padding-bottom: 50px;
}

/************************************************************/
          /* Fin Seccion proyectos/*
/************************************************************/

/************************************************************/
          /* Inicio Seccion proyectos/*
/************************************************************/


.h-iconbox-16-casas{
    height: 195px;
}

/************************************************************/
          /* Fin Seccion proyectos/*
/************************************************************/


/************************************************************/
          /* Responsive/*
/************************************************************/

@media (max-width: 1600px){
    .row-custom-styles-02-5{ padding-right: 100px !important;}
    .row-custom-styles-02-4{padding-left: 100px !important;}
}
@media only screen and (max-width: 1370px){
	.iconbox-16{height: 298px}
	.h-iconbox-16-mon{height: 510px;}
}
@media only screen and (max-width: 1030px){
	.row-custom-styles-02-4{padding-left: 55px !important;}
	.iconbox-16 {height: 338px;}
	.h-iconbox-16-mon {height: 650px;}
	.boxed-element.iconbox-16.boxed-element-custom-styles-02-1.caja-hover-servicios.h-iconbox-16-casas .container{width: 100%;}
}
@media only screen and (max-width: 991px) {
	.wsmenu-list > li > a{
		font-weight: 500 !important;
	}
	.wsmenu-list ul > li > a{
		font-weight: 400 !important;
	}
	.wsmenu > .wsmenu-list > li > a{
		color: #414143 !important;
	}
	.wsmenu > .wsmenu-list > li > a.active,
	.wsmenu > .wsmenu-list > li:hover > a{
		color: #de1622 !important;
	}
	.mobile-sub .wsmenu-submenu li a{
		color: #414143 !important;
	}
	.mobile-sub .wsmenu-submenu li:hover > a{
		color: #79b400 !important;
	}
	.megamenu > ul > li > a{
		color: #414143 !important;
	}
	.megamenu > ul > li > a:hover{
		color: #79b400 !important;
	}
	.fnc-slide__content{width: 100% !important;}
	.titulo-slide,.subtitulo-slide{font-size: 40px !important;}
	.boxed-element-custom-styles-02-1{margin-bottom: 40px;}
	.box-historia-exito, .h-iconbox-16-mon,.h-iconbox-16-casas{height: auto !important;}
	.h-iconbox-16-vig{height: auto !important;}
	.boxed-element .iconbox-description{padding-left: 0!important;}
}
@media only screen and (max-width: 420px){
	#contact-icons{display: block;}
	.fnc-nav{display: none !important;}
	.meta-bar .nav-container li{display: block !important;}
	.mb-left-container .nav-container{margin: 0 !important;}
	.header-type-4 .meta-bar{margin-top: 120px;padding-bottom: 10px;text-align: center;}
	#header .col-md-12{position: initial;}
	.header-type-4 .logo{position: absolute;top: 0;left: 140px;left: calc(50vw - 75px);}
	.header-type-4 .logo img{width: 150px;}
	.cont-btn-descarga{
		background: #be1622;
	    border-radius: 25px;
	    text-align: center;
	    padding: 5px;
	    margin-right: 0 !important;
		display: inline-block;
		float: none !important;
	}
	.cont-btn-descarga a{padding: 0 !important;}
	.titulo-slide,.subtitulo-slide{font-size: 20px !important; line-height: 22px !important;}
	.p-slide{font-size: 18px !important;}
	.mar-b-slide{padding: 0 !important;}
	.social-icons-container{
		position: fixed;
		bottom: 0;
		left: 227px;
		margin: 10px !important;
	}
	.cont-bandera-whats{    
		bottom: 23px !important;
	    left: 20px;
    	right: auto;
	}
	.bandera-whats{padding-right: 50px !important;}
	.animated.infinite{
		position: absolute;
		right: 10px;
		height: 25px;
	}
	.meta-bar .mb-left-container{
		display: none;
	}
	#contact-icons{
		position: fixed;
		bottom: 23px;
		left: 165px;
		z-index: 1;
	}
	#contact-icons i{
		font-size: 18px;
    	padding-right: 15px;
	}
	.center-cont-historias-extio{display: block !important;}
	.center-cont-historias-extio{padding-top: 250px !important;}
	.center-cont-historias-extio .col-md-4{position: absolute;top: 100px;}
	.row-custom-styles-02-4, .row-custom-styles-02-5{padding: 100px 20px !important;}
	#footer{padding-bottom: 50px;}
	.iconbox-16{height: auto;}
	.highligh-heading-custom-styles-02-1{margin-bottom: 30px;}

}
@media only screen and (max-width: 410px){
	.header-type-4 .meta-bar{margin-top: 115px;}
	.meta-bar .nav-container li{margin: 0 !important;padding: 0 !important;}
	.meta-bar .nav-container ul, .cont-btn-descarga{font-size: 13px !important;}
	.bandera-whats{padding-right: 35px !important;}
	.bandera-whats{font-size: 12px;line-height: 20px;}
	.animated.infinite{right: 5px;}
	#contact-icons{left: 132px;}
	.social-icons-container{left: 190px;}
	.box-historia-exito .hexagono{width: 70px;}
	.box-historia-exito .hexagono::before{
		width: 70px;
		height: 70px;
	}
	.hexagono-content{top: 55%;}
	#back-to-top{width: 31px;height: 30px;bottom: 20px;}
	#back-to-top i{
		position: absolute;
		top: -9px;
		left: 7px;
	}
	.boxed-element-custom-styles-02-1 .hexagono img{top: 92%;}
}
@media only screen and (max-width: 380px){
	.hexagono-info .fa-map-marker-alt,.hexagono-info .fa-phone,.hexagono-info .fa-envelope{top: 90%;}
}
@media only screen and (max-width: 350px){
	.bandera-whats{display: none;}
	.animated.infinite{position: relative;}
	.social-icons-container{left: 125px !important;}
	#contact-icons i{padding-right: 19px;}
	#contact-icons{left: 55px;}
	.box-historia-exito .hexagono{position: absolute;top: 37px;width: 40px;text-align: center;}
	.box-historia-exito .hexagono::before{width: 40px;height: 40px;width: 40px;}
	.box-historia-exito .hexagono-content{top: 16%;font-size: 30px;}
	.box-historia-exito .iconbox-title{padding-left: 30px;}
	.highligh-heading-custom-styles-02-1, .highligh-heading-2{
		font-size: 35px;
		margin-bottom: 0;
	}
}
@media only screen and (max-width: 740px) and (orientation: landscape){
	.meta-bar .mb-right-container{position: absolute;width: 100%;top: 50px;}
	#contact-icons{display: block;}
	.fnc-nav{display: none !important;}
	.meta-bar .nav-container li{display: block !important;}
	.mb-left-container .nav-container{margin: 0 !important;}
	.header-type-4 .meta-bar{margin-top: 100px;padding-bottom: 10px;text-align: center;}
	#header .col-md-12{position: initial;}
	.header-type-4 .logo{position: absolute;top: 0;left: 40px;}
	.header-type-4 .logo img{width: 150px;}
	.cont-btn-descarga{
		background: #be1622;
	    border-radius: 25px;
	    text-align: center;
	    padding: 5px;
	    margin-right: 0 !important;
		display: inline-block;
		float: none !important;
	}
	.cont-btn-descarga a{padding: 0 !important;}
	.titulo-slide,.subtitulo-slide{font-size: 20px !important; line-height: 22px !important;}
	.p-slide{font-size: 18px !important;}
	.mar-b-slide{padding: 0 !important;}
	.social-icons-container{
		position: fixed;
		bottom: 0;
		left: 227px;
		margin: 10px !important;
	}
	.cont-bandera-whats{    
		bottom: 23px !important;
	    left: 20px;
    	right: auto;
	}
	.bandera-whats{padding-right: 50px !important;}
	.animated.infinite{
		position: absolute;
		right: 10px;
		height: 25px;
	}
	.meta-bar .mb-left-container{
		display: none;
	}
	#contact-icons{
		position: fixed;
		bottom: 23px;
		left: 165px;
		z-index: 1;
	}
	#contact-icons i{
		font-size: 18px;
    	padding-right: 15px;
	}
	.center-cont-historias-extio{display: block !important;}
	.center-cont-historias-extio{padding-top: 250px !important;}
	.center-cont-historias-extio .col-md-4{position: absolute;top: 100px;}
	.row-custom-styles-02-4, .row-custom-styles-02-5{padding: 100px 20px !important;}
	#footer{padding-bottom: 50px;}
	.iconbox-16{height: auto;}
	.highligh-heading-custom-styles-02-1{margin-bottom: 30px;}
} 
@media only screen and (max-width: 600px) and (orientation: landscape){
	.header-type-4 .logo img{width: 100px;}
	.meta-bar .mb-right-container{top: 25px;}
	.header-type-4 .meta-bar{margin-top: 68px;}
	.cont-bandera-whats{z-index: 99}
}
/*****************************************************************/


.fnc {
  /* you can add color names and their values here
  and then simply add classes like .m--blend-$colorName to .fnc-slide 
  to apply specific color for mask blend mode */
}
.fnc-slider {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  height: 100vh;
}
.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
  box-sizing: border-box;
}
.fnc-slider__slides {
  position: relative;
  height: 100%;
  transition: -webkit-transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s, -webkit-transform 1s 0.6666666667s;
}
.fnc-slider .m--blend-dark .fnc-slide__inner {
  background-color: #8a8a8a;
}
.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
  background-color: #575757;
}
.fnc-slider .m--navbg-dark {
  background-color: #575757;
}
.fnc-slider .m--blend-green .fnc-slide__inner {
  /*background-color: #6d9b98;*/
  background-color: #fff;
}
.fnc-slider .m--blend-green .fnc-slide__mask-inner {
  background-color: #42605E;
}
.fnc-slider .m--navbg-green {
  background-color: #42605E;
}
.fnc-slider .m--blend-red .fnc-slide__inner {
  background-color: #ea2329;
}
.fnc-slider .m--blend-red .fnc-slide__mask-inner {
  background-color: #990e13;
}
.fnc-slider .m--navbg-red {
  background-color: #990e13;
}
.fnc-slider .m--blend-blue .fnc-slide__inner {
  background-color: #59aecb;
}
.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
  background-color: #2D7791;
}
.fnc-slider .m--navbg-blue {
  background-color: #2D7791;
}
.fnc-slide {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide.m--before-sliding {
  z-index: 2 !important;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.fnc-slide.m--active-slide {
  z-index: 1;
  transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide__inner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center top;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
  background-blend-mode: luminosity;
}
.m--before-sliding .fnc-slide__inner {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.m--active-slide .fnc-slide__inner {
  transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide__mask {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  right: 60%;
  top: 15%;
  width: 50.25vh;
  height: 67vh;
  margin-right: -90px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask {
  -webkit-transform: rotate(-10deg) translate3d(200px, 0, 0);
          transform: rotate(-10deg) translate3d(200px, 0, 0);
  opacity: 0;
}
.m--active-slide .fnc-slide__mask {
  transition: opacity 0.35s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}
.m--previous-slide .fnc-slide__mask {
  transition: opacity 0.35s 0.6833333333s, -webkit-transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s, -webkit-transform 0.7s 0.3333333333s;
  -webkit-transform: rotate(10deg) translate3d(-200px, 0, 0);
          transform: rotate(10deg) translate3d(-200px, 0, 0);
  opacity: 0;
}
.fnc-slide__mask-inner {
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  margin-top: -50vh;
  background-size: cover;
  background-position: center center;
  background-blend-mode: luminosity;
  -webkit-transform-origin: 50% 16.5vh;
          transform-origin: 50% 16.5vh;
  transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask-inner {
  -webkit-transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
          transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
}
.m--active-slide .fnc-slide__mask-inner {
  transition: -webkit-transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.m--previous-slide .fnc-slide__mask-inner {
  transition: -webkit-transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s, -webkit-transform 0.7s 0.3333333333s;
  -webkit-transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
          transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
}
.fnc-slide__content {
  z-index: 2;
  position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    text-align: center;
    width: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.fnc-slide__heading {
  margin-bottom: 10px;
  /*text-transform: uppercase;*/
}
.fnc-slide__heading-line {
  overflow: hidden;
  position: relative;
  /*padding-right: 20px;*/
  /*font-size: 100px;*/
  color: #fff;
 /* word-spacing: 10px;*/
}
/*
.fnc-slide__heading-line:nth-child(2) {
  padding-left: 30px;
}
*/
.m--before-sliding .fnc-slide__heading-line {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.m--active-slide .fnc-slide__heading-line {
  transition: -webkit-transform 1.5s 1s;
  transition: transform 1.5s 1s;
  transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.m--previous-slide .fnc-slide__heading-line {
  transition: -webkit-transform 1.5s;
  transition: transform 1.5s;
  transition: transform 1.5s, -webkit-transform 1.5s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.fnc-slide__heading-line span {
  /*display: flex;*/
}
.m--before-sliding .fnc-slide__heading-line span {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.m--active-slide .fnc-slide__heading-line span {
  transition: -webkit-transform 1.5s 1s;
  transition: transform 1.5s 1s;
  transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.m--previous-slide .fnc-slide__heading-line span {
  transition: -webkit-transform 1.5s;
  transition: transform 1.5s;
  transition: transform 1.5s, -webkit-transform 1.5s;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.fnc-slide__action-btn {
  position: relative;
  margin-left: 200px;
  padding: 5px 15px;
  font-size: 20px;
  line-height: 1;
  color: transparent;
  border: none;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  text-align: center;
  outline: none;
}
.fnc-slide__action-btn span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  line-height: 30px;
  color: #fff;
}
.fnc-slide__action-btn span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-top: none;
  border-bottom: none;
}
.fnc-slide__action-btn span:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
  background: #1F2833;
  opacity: 0;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: translateY(100%) rotateX(-90deg);
          transform: translateY(100%) rotateX(-90deg);
  transition: opacity 0.15s 0.15s;
}
.fnc-slide__action-btn:hover span {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.fnc-slide__action-btn:hover span:after {
  opacity: 1;
  transition: opacity 0.15s;
}
.fnc-nav {
  z-index: 5;
  position: absolute;
  right: 0;
  bottom: 0;
}
.fnc-nav__bgs {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fnc-nav__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fnc-nav__bg.m--nav-bg-before {
  z-index: 2 !important;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.fnc-nav__bg.m--active-nav-bg {
  z-index: 1;
  transition: -webkit-transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s, -webkit-transform 1s 0.6666666667s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.fnc-nav__controls {
  font-size: 0;
}
.fnc-nav__control {
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 50px;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  background: #000000;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background-color 0.5s;
}
.fnc-nav__control.m--active-control {
  background: #be1522;
}
.fnc-nav__control-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  transition-timing-function: linear !important;
}
.m--with-autosliding .m--active-control .fnc-nav__control-progress {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.m--prev-control .fnc-nav__control-progress {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: -webkit-transform 0.5s !important;
  transition: transform 0.5s !important;
  transition: transform 0.5s, -webkit-transform 0.5s !important;
}
.m--reset-progress .fnc-nav__control-progress {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  transition: -webkit-transform 0s 0s !important;
  transition: transform 0s 0s !important;
  transition: transform 0s 0s, -webkit-transform 0s 0s !important;
}
.m--autosliding-blocked .fnc-nav__control-progress {
  transition: all 0s 0s !important;
  -webkit-transform: scaleX(0) !important;
          transform: scaleX(0) !important;
}

/* NOT PART OF COMMON SLIDER STYLES */
body {
  margin: 0;
}

.demo-cont {
  overflow: hidden;
  position: relative;
  height: 100vh;
  -webkit-perspective: 1500px;
          perspective: 1500px;
  background: #000;
}
.demo-cont__credits {
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  padding: 20px 10px 30px;
  background: #303030;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  text-align: center;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-45deg);
          transform: translate3d(100%, 0, 0) rotateY(-45deg);
  will-change: transform;
}
.credits-active .demo-cont__credits {
  transition: -webkit-transform 0.7s 0.2333333333s;
  transition: transform 0.7s 0.2333333333s;
  transition: transform 0.7s 0.2333333333s, -webkit-transform 0.7s 0.2333333333s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after {
  box-sizing: border-box;
}
.demo-cont__credits-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.demo-cont__credits-close:before, .demo-cont__credits-close:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}
.demo-cont__credits-close:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.demo-cont__credits-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.demo-cont__credits-heading {
  text-transform: uppercase;
  font-size: 40px;
  margin-bottom: 20px;
}
.demo-cont__credits-img {
  display: block;
  width: 60%;
  margin: 0 auto 30px;
  border-radius: 10px;
}
.demo-cont__credits-name {
  margin-bottom: 20px;
  font-size: 30px;
}
.demo-cont__credits-link {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  color: #fff;
}
.demo-cont__credits-blend {
  font-size: 30px;
  margin-bottom: 10px;
}


.example-slider {
  z-index: 2;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}
.credits-active .example-slider {
  -webkit-transform: translate3d(-400px, 0, 0) rotateY(10deg) ;
          transform: translate3d(-400px, 0, 0) rotateY(10deg) ;
}
.example-slider .fnc-slide-1 .fnc-slide__inner,
.example-slider .fnc-slide-1 .fnc-slide__mask-inner {
  background-image: url("../../archivos/home/detectamos-puntualmente-anomalias-en-tu-empresa.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.example-slider .fnc-slide-2 .fnc-slide__inner,
.example-slider .fnc-slide-2 .fnc-slide__mask-inner {
  background-image: url("../../archivos/home/durante-toda-la-noche-tu-empresa-estara-protegida.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.example-slider .fnc-slide-3 .fnc-slide__inner,
.example-slider .fnc-slide-3 .fnc-slide__mask-inner {
  background-image: url("../../archivos/home/monitorea tu empresa dia y noche.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.example-slider .fnc-slide-3 .fnc-slide__inner:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}

/* COLORFUL SWITCH STYLES 
   ORIGINAL DEMO - https://codepen.io/suez/pen/WQjwOb */
.colorful-switch {
  position: relative;
  width: 180px;
  height: 77.1428571429px;
  margin: 0 auto;
  border-radius: 32.1428571429px;
  background: #cfcfcf;
}
.colorful-switch:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 190px;
  height: 87.1428571429px;
  border-radius: 37.1428571429px;
  background: #314239;
  transition: background-color 0.3s;
}
.colorful-switch:hover:before {
  background: #4C735F;
}
.colorful-switch__checkbox {
  z-index: -10;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.colorful-switch__label {
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 32.1428571429px;
  cursor: pointer;
}
.colorful-switch__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 540px;
  height: 100%;
  background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(-360px, 0, 0);
          transform: translate3d(-360px, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__dot {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 5.1428571429px;
  height: 5.1428571429px;
  margin-left: -2.5714285714px;
  margin-top: -2.5714285714px;
  border-radius: 50%;
  background: #fff;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__on {
  position: absolute;
  left: 104.1428571429px;
  top: 22.5px;
  width: 19.2857142857px;
  height: 36px;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__on__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: rotate(45deg) scale(0) translateZ(0);
          transform: rotate(45deg) scale(0) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
  transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(45deg) scale(1) translateZ(0);
          transform: rotate(45deg) scale(1) translateZ(0);
}
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
  content: "";
  position: absolute;
  border-radius: 2.5714285714px;
  background: #fff;
}
.colorful-switch__on__inner:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6.1428571429px;
}
.colorful-switch__on__inner:after {
  right: 0;
  top: 0;
  width: 6.1428571429px;
  height: 100%;
}
.colorful-switch__off {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 41.1428571429px;
  height: 41.1428571429px;
  margin-left: -20.5714285714px;
  margin-top: -20.5714285714px;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__off:before, .colorful-switch__off:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 5.1428571429px;
  margin-top: -2.5714285714px;
  border-radius: 2.5714285714px;
  background: #fff;
  transition: -webkit-transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s;
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  transition-delay: 0s;
}
.colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(1) translateZ(0);
          transform: rotate(45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(0) translateZ(0);
          transform: rotate(45deg) scaleX(0) translateZ(0);
}
.colorful-switch__off:after {
  transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0);
          transform: rotate(-45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  transition-timing-function: ease;
  -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0);
          transform: rotate(-45deg) scaleX(0) translateZ(0);
}

.mar-b-slide{
    padding: 10px 0;
}

.dis-flex-slide{
    display: flex !important;
    justify-content: center;
}

.w-subt-slide{
    display: inline-flex;
}